/* ==========================================================================
   wag'n'tails — design system
   Warm, editorial pet-fashion brand. Beige base, brown primary, pink
   secondary, blue used sparingly. Inspired by wildone.com structure.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&display=swap');

@font-face{
  font-family:'Baskerville';
  src:url('../fonts/Baskerville-Italic.woff2') format('woff2');
  font-style:italic;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'Helvetica Neue';
  src:url('../fonts/HelveticaNeue-Regular.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'Helvetica Neue';
  src:url('../fonts/HelveticaNeue-Medium.woff2') format('woff2');
  font-style:normal;
  font-weight:500;
  font-display:swap;
}
@font-face{
  font-family:'Helvetica Neue';
  src:url('../fonts/HelveticaNeue-Bold.woff2') format('woff2');
  font-style:normal;
  font-weight:700;
  font-display:swap;
}
@font-face{
  font-family:'Century Gothic';
  src:url('../fonts/CenturyGothic.woff2') format('woff2');
  font-style:normal;
  font-weight:700;
  font-display:swap;
}
@font-face{
  font-family:'Miroslav';
  src:url('../fonts/Miroslav-Regular.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'BIP';
  src:url('../fonts/BIP.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'Brittany Signature';
  src:url('../fonts/BrittanySignature.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'Butler';
  src:url('../fonts/Butler-Regular.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'Times New Roman Web';
  src:url('../fonts/TimesNewRoman.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

:root{
  /* ---- brand palette (from brand guide) ---- */
  --ink:        #3E2B26;   /* primary — dark chocolate brown */
  --ink-soft:   #5B443C;   /* secondary brown, for body copy on light */
  --mocha:      #AD9686;   /* tan / secondary brown */
  --sand:       #F1E8D9;   /* background beige (main bg) */
  --sand-deep:  #E4D3AF;   /* deeper beige, ticker / accents */
  --paper:      #FAF6EC;   /* lightest panel bg */
  --cream:      #FFFDF8;   /* near-white card bg */
  --blush:      #E7C9CE;   /* pink — secondary accent */
  --blush-deep: #D9A8B1;   /* pink, stronger */
  --butter:     #EEE0AF;   /* pale yellow accent */
  --denim:      #838CA3;   /* blue — rare accent only */
  --mist:       #DCE6DD;   /* mint, rare */
  --line:       #DCCBB0;   /* hairline borders on sand */
  --line-soft:  rgba(62,43,38,0.12);

  --font-serif:   'Baskerville', Georgia, 'Times New Roman', serif;
  --font-display: 'Fredoka', 'Helvetica Neue', sans-serif;
  --font-sans:    'Helvetica Neue', -apple-system, Inter, Arial, sans-serif;

  --container: 1240px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; border:none; background:none; padding:0; color:inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 900px){
  .container{ padding: 0 20px; }
}

/* ---- typography helpers ---- */
.eyebrow{
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mocha);
}
.headline{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.08;
}
.headline-strong{
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  line-height: 1.05;
}
.section-title{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -.01em;
  color: var(--ink);
  text-align:center;
}
.faq .section-title{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 3.8vw, 48px);
  letter-spacing: normal;
}
.section-sub{
  font-family: var(--font-sans);
  font-size: 15.5px;
  color: var(--ink-soft);
  text-align:center;
  max-width: 520px;
  margin: 14px auto 0;
}
.section-head{
  text-align:center;
  margin-bottom: 52px;
}

/* ---- logo image ---- */
.logo-img{ height: 30px; width: auto; display:block; }
.footer-brand .logo-img{ height: 26px; }

/* ---- icon button variants ---- */
.icon-btn--plain{ }
.icon-btn--plain:hover{ background: none; }
.icon-cart svg{ width: 22.8px; height: 22.8px; }

/* ---- mixed-typeface heading (serif italic + bold sans), used across
   homepage section titles and interior page-hero banners ---- */
.mixed-title{ text-align:center; }
.mixed-title .mixed-serif{
  display:block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight:400;
  font-size: clamp(40px, 5.6vw, 64px);
  color: var(--mocha);
  line-height:1.1;
}
.mixed-title .mixed-bold{
  display:block;
  font-family: var(--font-sans);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:-.01em;
  font-size: clamp(30px, 4vw, 46px);
  color: var(--ink);
  line-height:1.05;
  margin-top: 4px;
}
.page-hero .mixed-title .mixed-serif{ color: rgba(62,43,38,.6); }

/* ---- buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:52px;
  padding: 0 30px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: all .25s var(--ease);
}
.btn-dark{
  background: var(--ink);
  color: var(--paper);
}
.btn-dark:hover{ background:#2B1D19; }
.btn-outline{
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline:hover{ background: var(--ink); color: var(--paper); }
.btn-outline-light{
  background: transparent;
  border-color: rgba(250,246,236,.7);
  color: var(--paper);
}
.btn-outline-light:hover{ background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-sm{ height:44px; padding:0 22px; font-size:12px; }
.btn-block{ width:100%; }
.btn-label{
  position:relative;
  display:inline-block;
  overflow:hidden;
  height:1.2em;
  line-height:1.2em;
  vertical-align:middle;
}
.btn-label-line{
  display:block;
  transition: transform .45s var(--ease);
}
.btn-label-dup{
  position:absolute;
  top:0; left:0;
  transform: translateY(100%);
}
.btn:hover .btn-label-line:not(.btn-label-dup){ transform: translateY(-100%); }
.btn:hover .btn-label-dup{ transform: translateY(0); }
.btn-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:19px;
  height:19px;
  font-size:0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cpolyline points='13 5 21 12 13 19'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cpolyline points='13 5 21 12 13 19'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform .3s var(--ease);
}
.btn:hover .btn-arrow,
.footer-sub-form button:hover .btn-arrow{ transform: translateX(-4px); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: sticky;
  top:0;
  z-index: 60;
  background: var(--sand);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}
.logo{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--ink);
  letter-spacing: -.01em;
  display:flex;
  align-items:baseline;
  gap:2px;
}
.logo .paw{
  font-size: 11px;
  vertical-align: super;
  color: var(--blush-deep);
}
.nav-links{
  display:flex;
  align-items:center;
  gap: 34px;
}
.nav-links a{
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color .2s var(--ease);
  position:relative;
  text-transform: lowercase;
}
.nav-links a:hover{ color: var(--ink); }
.nav-links a.active{ color: var(--ink); font-weight:600; }
.nav-actions{
  display:flex;
  align-items:center;
  gap: 20px;
}
.icon-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  color: var(--ink);
  transition: background .2s var(--ease);
}
.icon-btn:hover{ background: var(--sand-deep); }
.icon-btn svg{ width:19px; height:19px; }

.nav-burger{
  display:none;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  border:none;
  background:none;
  color: var(--ink);
}

@media (max-width: 1100px){
  .nav-links{
    position:absolute;
    top: 100%;
    left:0; right:0;
    flex-direction:column;
    align-items:flex-start;
    gap: 0;
    background: var(--sand);
    border-top: 0 solid var(--line);
    padding: 0 24px;    /* vertical padding moves to .open below — padding can't shrink past max-height:0, so it has to be 0 while closed */
    max-height:0;
    overflow:hidden;
    transition: max-height .35s var(--ease), padding .35s var(--ease);
  }
  .nav-links.open{ max-height: 420px; padding: 8px 24px 20px; border-top-width: 1px; }
  .nav-links a{ padding: 12px 0; width:100%; border-bottom: 1px solid var(--line-soft); font-size:14.5px; }
  .nav-burger{ display:flex; }
  .site-header{ position: sticky; }
  .nav-row{ position:relative; }
}

/* ticker */
.ticker{
  display:block;
  width:100%;
  background: var(--sand-deep);
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid rgba(62,43,38,.08);
  border-bottom: 1px solid rgba(62,43,38,.08);
}
.ticker-track{
  display:flex;
  width:max-content;
  align-items:center;
  animation: ticker 64s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.ticker span{
  padding: 11px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ticker span::after{
  content: '·';
  margin: 0 26px;
  color: var(--mocha);
}
@keyframes ticker{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* ==========================================================================
   Shop-by-pet split
   ========================================================================== */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height: 92vh;
}
.split-card{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  background: var(--mocha);
}
.split-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .6s var(--ease);
}
.split-card:hover img{ transform: scale(1.05); }
.split-card::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(24,16,14,.8) 0%, rgba(24,16,14,.15) 45%, rgba(24,16,14,0) 68%);
}
.split-card-body{
  position:relative; z-index:2;
  padding: 64px 72px;
  color: var(--paper);
  max-width: 480px;
}
.split-card-body .headline-strong{ color:var(--paper); font-size: clamp(26px,2.8vw,38px); }
.split-title-serif{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.split-card-body .split-title-caps{ font-size: clamp(22px,2.4vw,32px); }
.split-card-body p{ color: rgba(250,246,236,.85); font-size:14px; max-width:340px; margin:12px 0 22px; }
.split-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-sans);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--paper);
  border-bottom: 1px solid rgba(250,246,236,.55);
  padding-bottom:4px;
  transition: border-color .25s var(--ease);
}
.split-link:hover{ border-color: var(--paper); }
.split-link--dark{ color: var(--ink); border-bottom-color: rgba(62,43,38,.35); }
.split-link--dark:hover{ border-color: var(--ink); }

/* ---- Shelf toolbar: category tabs + catalog link, above the product grid ---- */
.shelf-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom: 34px;
}
.shelf-tabs{ display:flex; flex-wrap:wrap; gap:26px; }
.shelf-tab{
  font-family: var(--font-sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--ink-soft);
  background:none;
  border:none;
  padding:0 0 5px;
  cursor:pointer;
  border-bottom: 1.5px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.shelf-tab:hover{ color: var(--ink); }
.shelf-tab.active{ color: var(--ink); border-color: var(--ink); }
.product-card.is-hidden{ display:none; }

/* ---- Embroidery price list: category tabs + row panels ---- */
.price-tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:28px;
  margin-bottom:40px;
}
.price-tab{
  font-family: var(--font-sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--ink-soft);
  background:none;
  border:none;
  padding:0 0 6px;
  cursor:pointer;
  border-bottom: 1.5px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.price-tab:hover{ color: var(--ink); }
.price-tab.active{ color: var(--ink); border-color: var(--ink); }
.price-panels{
  max-width:640px; margin:0 auto;
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding:12px 40px;
}
.price-panel{ display:none; }
.price-panel.active{ display:block; }
.price-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--sand-deep);
  font-size:14.5px;
}
.price-row:last-child{ border-bottom:none; }
.price-row span:first-child{ color: var(--ink); }
.price-row span:last-child{ color: var(--mocha); font-weight:700; white-space:nowrap; }
.price-note{
  text-align:center; color: var(--ink-soft); font-size:13px;
  margin:26px 0 0;
}
.price-cta{ text-align:center; margin-top:22px; }
@media (max-width:640px){
  .price-panels{ padding:6px 22px; }
  .price-tabs{ gap:18px; }
}

@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; min-height: 0; }
  .split-card{ min-height: 78vh; }
  .split-card-body{ padding: 36px 28px; max-width:none; }
}

/* ==========================================================================
   Capsule banner
   ========================================================================== */
.capsule{
  padding: 110px 0 20px;
  text-align:center;
}
.capsule-media{
  max-width: 760px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow:hidden;
  aspect-ratio: 16/8.4;
}
.capsule-media img{ width:100%; height:100%; object-fit:cover; }
.capsule-text{ margin-top: 34px; }
.capsule-text .headline-strong{ font-size: 26px; }
.capsule-text p{ color: var(--ink-soft); font-size:14.5px; margin: 10px 0 26px; }

/* ==========================================================================
   Editorial / ritual section
   ========================================================================== */
.ritual-split-wrap{ margin-top: 110px; }
.ritual-split{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);   /* keep the photo's aspect-ratio from widening the grid */
  min-height: 64vh;
}
.ritual-split-content{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 64px 72px;
}
.ritual-split-content .mixed-title .mixed-serif{ font-size: clamp(36px, 4.2vw, 52px); }
.ritual-split-content .mixed-title .mixed-bold{ font-size: clamp(28px, 3.2vw, 38px); margin-top:0; }
.ritual-split-content p{
  font-size: 14.5px;
  color: var(--ink-soft);
  max-width: 420px;
  margin: 14px 0 26px;
}
.ritual-split-content .btn{ align-self:flex-start; }
.ritual-split-content .doodle{ position:absolute; pointer-events:none; }
.ritual-split-content .doodle-flower{ width:42px; top:32px; left:26px; transform:rotate(-8deg); }
.ritual-split-content .doodle-spiral{ width:34px; top:36px; right:32px; }
@media (max-width: 900px){
  .ritual-split-content .doodle{ display:none; }
}
.ritual-split-media{
  position:relative;
  aspect-ratio: 0.968;
}
.ritual-split-media img{ width:100%; height:100%; object-fit:cover; }

.ritual-list{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 20px;
  margin-top: 46px;
  max-width: 440px;
}
.ritual-list-item{
  display:flex;
  align-items:flex-start;
  gap: 16px;
}
.ritual-list-icon{
  flex-shrink:0;
  width:46px; height:46px;
  border-radius:50%;
  background: var(--sand-deep);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink);
}
.ritual-list-icon svg{ width:19px; height:19px; }
.ritual-list-icon--doodle img{ width:20px; height:20px; object-fit:contain; }
.ritual-list-title{ font-family: var(--font-serif); font-style: italic; font-weight:400; font-size:26px; color: var(--ink); }
.ritual-list-item p{ font-size: 13px; color: var(--mocha); margin-top:3px; }

@media (max-width: 900px){
  .ritual-split{ grid-template-columns: 1fr; min-height:0; }
  .ritual-split-content{ padding: 48px 28px 40px; order:2; }
  .ritual-split-media{ aspect-ratio: 4/3; order:1; }
}
@media (max-width: 480px){
  .ritual-list{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Category cards ("Выбирай для своих")
   ========================================================================== */
.categories{ padding: 110px 0 0; }
.cat-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.parallax-gallery{ padding: 50px 0; }
.parallax-item{ will-change: transform; transition: transform .05s linear; }
.cat-card{
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow:hidden;
  transition: transform .3s var(--ease);
}
.cat-card:hover{ transform: translateY(-6px); }
.cat-card-media{ aspect-ratio: 4/3.3; overflow:hidden; background: var(--sand-deep); }
.example-media{ aspect-ratio: 1/1.05; }

/* ---- quote showcase (embroidery philosophy, full-bleed split + slider) ---- */
.quote-showcase{
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height: 92vh;
  border-radius: 0;
}
.quote-showcase-left{
  background: var(--ink);
  color: var(--paper);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 64px 72px 48px;
}
.quote-showcase-quote{ margin:0; }
.quote-showcase-quote-serif{
  display:block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight:400;
  font-size: clamp(39px,4.2vw,53px);
  color: var(--butter);
  line-height:0.96;
}
.quote-showcase-quote-bold{
  display:block;
  font-family: var(--font-sans);
  font-weight:700;
  font-size: clamp(26px,2.8vw,36px);
  color: var(--paper);
  line-height:1.3;
  margin-top:6px;
}
.quote-showcase-link{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--paper);
  border-bottom: 1.5px solid rgba(250,246,236,.4);
  padding-bottom:4px;
  margin-top:40px;
  transition: border-color .25s var(--ease);
}
.quote-showcase-link:hover{ border-color: var(--paper); }
.quote-showcase-media{
  position:relative;
  overflow:hidden;
  border-radius: 0;
}
.quote-showcase-slide{
  position:absolute; inset:0;
  opacity:0;
  transition: opacity .8s var(--ease);
}
.quote-showcase-slide.is-active{ opacity:1; }
.quote-showcase-stamp{
  position:absolute; top:26px; right:26px; z-index:3;
  width:64px; height:64px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
  opacity:.92;
}
.quote-showcase-stamp img{ width:100%; height:100%; object-fit:contain; }
.quote-showcase-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.quote-showcase-dots{
  position:absolute; left:50%; bottom:28px; z-index:3;
  transform: translateX(-50%);
  display:flex;
  gap:12px;
}
.quote-showcase-dot{
  width:30px; height:2px;
  background: rgba(255,255,255,.45);
  border:none; padding:0; cursor:pointer;
  transition: background .3s var(--ease), width .3s var(--ease);
}
.quote-showcase-dot.is-active{ background:#fff; width:44px; }
@media (max-width:900px){
  .quote-showcase{ grid-template-columns:1fr; min-height:0; }
  .quote-showcase-left{ padding: 40px 28px; }
  .quote-showcase-media{ min-height:380px; }
}
.cat-card-media img{ width:100%; height:100%; object-fit:cover; }
.cat-card-body{ padding: 26px 26px 30px; }
.cat-card-body h3{ font-family: var(--font-sans); font-weight:700; font-size:19px; }
.cat-card-body p{ font-size: 13.5px; color: var(--ink-soft); margin: 8px 0 20px; }
.cat-link{
  font-size: 12.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:6px;
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 3px;
}

@media (max-width: 900px){
  .cat-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Product grid
   ========================================================================== */
.shelf{
  position:relative;
  margin-top: 110px;
  padding: 90px 0 100px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.shelf--home{ border-top:none; }
.shelf-cta{ text-align:center; margin-top:44px; }
.product-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 22px;
}
.product-card{ text-align:left; position:relative; }
.product-media{
  position:relative;
  aspect-ratio: 3/3.6;
  border-radius: var(--radius-md);
  overflow:hidden;
  background: var(--sand-deep);
  margin-bottom: 14px;
}
.product-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.product-card:hover .product-media img{ transform: scale(1.06); }
.product-tag{
  position:absolute; top:12px; left:12px;
  background: var(--cream);
  color: var(--ink);
  font-size: 10.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding: 6px 11px;
  border-radius: 999px;
}
.product-tag.pink{ background: var(--blush); }
.product-tag.butter{ background: var(--butter); }
.product-quick{
  position:absolute; right:12px; bottom:12px;
  width:38px; height:38px;
  border-radius:50%;
  background: var(--cream);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform: translateY(6px);
  transition: all .25s var(--ease);
}
.product-card:hover .product-quick{ opacity:1; transform:none; }
.product-quick svg{ width:16px; height:16px; }
.product-name{ font-size: 14.5px; font-weight:600; }
.product-price{ font-size: 13.5px; color: var(--mocha); margin-top:4px; }


/* ---- "Создай сам" constructor CTA card ---- */
.product-card--cta{ cursor:pointer; }
.product-card--cta .product-media{
  background: var(--ink);
  position:relative;
  overflow:hidden;
}
.product-card--cta .cta-photo{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  transition: transform .4s var(--ease);
}
.product-card--cta:hover .cta-photo{ transform: scale(1.06); }
.cta-plus{
  position:absolute;
  top:12px; right:12px;
  width:34px; height:34px;
  border-radius:50%;
  background: var(--paper);
  color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.cta-plus svg{ width:16px; height:16px; }
.product-card--cta .product-name{ font-size:16px; font-weight:700; }
.cta-desc{ font-size:12.5px; color: var(--ink-soft); margin-top:4px; line-height:1.4; }

@media (max-width: 900px){
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Brand statement — oversized Baskerville quote on light background
   ========================================================================== */
.brand-statement{
  background: var(--paper);
  padding: 90px 0;
  overflow:hidden;
  position:relative;
  z-index:6;
}
.brand-statement-inner{
  position:relative;
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items:center;
}
.brand-statement-intro{ position:relative; display:flex; flex-direction:column; align-items:flex-start; }
.brand-statement-intro .promo-media{ width:80%; margin:0; }
.brand-statement-quote{ position:relative; text-align:left; }
.brand-statement-history{ margin:6px 0 26px; }
.brand-statement-history .headline{ font-size: clamp(26px,2.8vw,36px); margin-top:8px; }
.brand-statement-history p{ color: var(--ink-soft); font-size:14.5px; line-height:1.6; max-width:420px; margin-top:14px; }
.brand-statement-eyebrow{
  position:relative;
  z-index:2;
  display:block;
  margin-bottom:20px;
}
.brand-statement-sub{
  position:relative;
  z-index:2;
  text-align:left;
  color: var(--ink-soft);
  font-size:14.5px;
  line-height:1.6;
  max-width:420px;
  margin:22px 0 0;
}
.brand-statement-text{
  position:relative;
  z-index:2;
  text-align:left;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight:400;
  color: var(--ink);
  font-size: clamp(34px, 4vw, 58px);
  line-height:1.15;
  margin:0;
}
.brand-statement-icon{
  position:absolute;
  top:-36px; left:0;
  width:44px; height:auto;
  color: var(--mocha);
  cursor:pointer;
  z-index:2;
  transition: transform .3s var(--ease);
}
@keyframes brandStatementWiggle{
  0%,100%{ transform:rotate(0deg) scale(1); }
  25%{ transform:rotate(-14deg) scale(1.08); }
  75%{ transform:rotate(14deg) scale(1.08); }
}
.brand-statement-icon:hover{ animation: brandStatementWiggle .5s ease; }
.brand-statement-doodle{ position:absolute; pointer-events:none; }
.brand-statement-doodle--flower{ top:-44px; right:7%; width:58px; opacity:.85; }
.brand-statement-doodle--spiral{ bottom:14%; right:-24px; width:62px; opacity:.7; z-index:3; }
.brand-statement-doodle--star{ bottom:-30px; right:6%; width:38px; opacity:.85; }
@media (max-width:900px){
  .brand-statement{ padding:60px 0; }
  .brand-statement-inner{ grid-template-columns:1fr; gap:32px; }
  .brand-statement-intro .promo-media{ width:80%; }
  .brand-statement-icon, .brand-statement-doodle{ display:none; }
}

/* ==========================================================================
   Quote promo — dark brand-colour block with founder quote + photo
   ========================================================================== */
.quote-promo{
  background: var(--sand);
  color: var(--ink);
  min-height: 169vh;
  display:flex;
  align-items:center;
  padding: 48px 0;
  overflow:hidden;
}
.quote-promo-grid{
  display:grid;
  grid-template-columns: 12fr 13fr;
  gap: 24px;
  align-items:stretch;
  width:100%;
}
.quote-promo-text{
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 44px 38px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.quote-promo-icon{ width:42px; height:42px; color:var(--ink); margin-bottom:24px; }
.quote-promo-icon svg{ width:100%; height:100%; }
.quote-promo-eyebrow{ display:block; margin-bottom:22px; color: var(--ink); }
.quote-promo-person{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:36px;
}
.quote-promo-avatar{
  width:52px; height:52px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  display:block;
}
.quote-promo-avatar img{ width:100%; height:100%; object-fit:cover; }
.quote-promo-person-name{ font-size:14px; font-weight:700; color: var(--ink); }
.quote-promo-person-role{ font-size:12.5px; color: var(--ink-soft); margin-top:2px; }
.quote-promo-lead{ color: var(--ink-soft); font-size:14px; line-height:1.65; max-width:none; margin-bottom:0; }
.quote-promo-lead p + p{ margin-top:12px; }
.quote-promo-quote{ margin:0 0 24px; }
.quote-promo-quote-serif{
  display:block;
  font-family: var(--font-serif);
  font-style:italic;
  font-weight:400;
  color: var(--mocha);
  font-size: clamp(34px, 3.4vw, 46px);
  line-height:0.8;
}
.quote-promo-quote-bold{
  display:block;
  font-family: var(--font-sans);
  font-weight:700;
  color: var(--ink);
  font-size: clamp(22px,2.2vw,28px);
  line-height:1.2;
  margin-top:10px;
}
.quote-promo-media{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  height:100%;
  min-height: 82vh;
}
.quote-promo-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.quote-promo-caption{
  position:absolute; left:22px; bottom:22px; z-index:2;
  color:#fff;
  font-size:13px;
  line-height:1.4;
}
@media (max-width:900px){
  .quote-promo{ min-height:auto; }
  .quote-promo-grid{ grid-template-columns:1fr; gap:36px; }
  .quote-promo-media{ order:-1; aspect-ratio:4/3; height:auto; }
}

/* ==========================================================================
   Split promo (embroidery / about)
   ========================================================================== */
.promo{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items:center;
  padding-top: 110px;
  padding-bottom: 60px;
}
.promo.reverse{ grid-template-columns: 1fr 1.1fr; }
.promo.reverse .promo-media{ order:-1; }
.promo-media{
  border-radius: var(--radius-lg);
  overflow:hidden;
  aspect-ratio: 4/5;
  width: 70%;
  margin: 0 auto;
}
.promo-media--polaroid{
  background: var(--cream);
  padding: 12px 12px 40px;
  border-radius: 6px;
  box-shadow: 0 16px 34px -14px rgba(62,43,38,.35);
}
.promo-media--polaroid img{ border-radius: 2px; }
.promo-media--tilt-left{ transform: rotate(-3deg); }
.promo-media--tilt-right{ transform: rotate(3deg); }
.promo-media img{ width:100%; height:100%; object-fit:cover; }
.promo-body .eyebrow{ margin-bottom: 14px; display:block; }
.promo-body .headline{ font-size: clamp(32px,4vw,48px); color: var(--mocha); margin-top:14px; }
.promo-body .headline-strong{ font-size: clamp(26px,3.2vw,38px); margin-top:4px; }
.promo-body p{ color: var(--ink-soft); font-size: 15px; margin: 18px 0 28px; max-width: 440px; }

@media (max-width: 900px){
  .promo, .promo.reverse{ grid-template-columns: 1fr; gap:24px; padding-top:56px; padding-bottom:32px; }
  .promo.reverse .promo-media{ order:0; }
  .promo-media{ width:88%; margin:0; }
}

/* ==========================================================================
   Auto-crossfading photo stack — floema.com-style hero effect
   ========================================================================== */
.photo-fade{ position:relative; overflow:hidden; }
.photo-fade img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition: opacity 1.4s ease;
  animation: photoFadeZoom 16s ease-in-out infinite alternate;
}
.photo-fade img.is-active{ opacity:1; z-index:1; }
@keyframes photoFadeZoom{
  0%{ transform: scale(1); }
  100%{ transform: scale(1.08); }
}

/* ==========================================================================
   Tint promo (full-bleed secondary-colour band, split with photo)
   ========================================================================== */
.tint-promo{
  margin-top: 110px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height: 92vh;
}
.tint-promo-media{ position:relative; }
.tint-promo-media img{ width:100%; height:100%; object-fit:cover; object-position: 50% 80%; position:absolute; inset:0; }
.tint-promo-body{
  background: var(--paper);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: 56px 64px;
}
.tint-promo-quote{
  align-self:flex-end;
  text-align:right;
  max-width: 420px;
}
.tint-promo-quote p{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight:400;
  font-size: clamp(25px, 2.6vw, 34px);
  color: var(--ink-soft);
  line-height: 1.3;
}
.tint-promo-quote cite{
  display:block;
  margin-top: 10px;
  font-style: normal;
  font-size: 13px;
  letter-spacing:.04em;
  color: var(--mocha);
}
.tint-promo-text .headline{ font-size: clamp(32px,3.6vw,46px); margin-top:10px; }
.tint-promo-text .headline-strong{ font-size: clamp(24px,2.8vw,34px); margin-top:4px; }
.tint-promo-text p{ color: var(--ink-soft); font-size:15px; max-width:460px; margin:20px 0 28px; }

@media (max-width: 900px){
  .tint-promo{ grid-template-columns: 1fr; min-height:0; }
  .tint-promo-media{ min-height: 380px; }
  .tint-promo-body{ padding: 40px 28px; gap: 40px; }
  .tint-promo-quote{ align-self:flex-start; text-align:left; }
}

/* ==========================================================================
   Featured product spotlight (live photo + product card on beige panel)
   ========================================================================== */
.feature-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height: 58vh;
}
.feature-split-media{ position:relative; }
.feature-split-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.feature-split-body{
  background: var(--paper);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 64px 72px;
}
.feature-split-body .mixed-title{ margin-bottom:34px; }
.feature-split-body .mixed-title .mixed-serif{ font-size: clamp(20px, 2.8vw, 32px); }
.feature-split-body .mixed-title .mixed-bold{ font-size: clamp(15px, 2vw, 23px); }
.feature-product-card{
  display:block;
  width:100%;
  max-width:195px;
  margin: 0 auto 24px;
  transition: transform .25s var(--ease);
}
.feature-product-card:hover{ transform:translateY(-3px); }
.feature-product-card img{ width:100%; height:auto; display:block; }
.feature-split-body p{ color:var(--ink-soft); font-size:14.5px; max-width:400px; margin:0 auto 26px; }
.feature-split-caption{ color:var(--ink-soft); font-size:13px; margin:0 auto 22px; }
@media (max-width:900px){
  .feature-split{ grid-template-columns:1fr; min-height:0; }
  .feature-split-media{ min-height:380px; }
  .feature-split-body{ padding:48px 28px; }
}

/* ==========================================================================
   Blob promo (oval background + overlapping photos)
   ========================================================================== */
.blob-promo{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  gap: 40px;
  padding-top: 110px;
}
.blob-promo-body p{ color: var(--ink-soft); font-size:15px; margin: 20px 0 30px; max-width: 440px; }
.blob-promo-body .btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
.blob-promo-media{
  container-type:inline-size;   /* lets the patch locate the corgi photo's corner in cqw units */
  position:relative;
  min-height: 480px;
}
.blob-shape{
  position:absolute;
  inset: 6% -14% 6% -14%;
  background: var(--sand-deep);
  border-radius: 50%;
  z-index:0;
}
@media (max-width:1400px){ .blob-shape{ inset: 6% -16px 6% -16px; } }   /* bleed stays inside the page gutter — no sideways overflow */
.blob-photo{
  position:absolute;
  box-sizing:border-box;
  background: var(--cream);
  padding: 12px 12px 40px;
  border-radius: 6px;
  object-fit:cover;
  box-shadow: 0 16px 34px -14px rgba(62,43,38,.35);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.blob-photo-back{
  width:46%;
  aspect-ratio: 3/4;
  left:0;
  top:6%;
  transform: rotate(-6deg);
  z-index:1;
}
.blob-photo-front{
  width:56%;
  aspect-ratio: 4/5;
  right:2%;
  bottom:0;
  transform: rotate(3deg);
  z-index:2;
}
.blob-promo-media:hover .blob-photo-back{
  transform: rotate(-11deg) translate(-10px,-12px);
  box-shadow: 0 26px 48px -16px rgba(62,43,38,.42);
}
.blob-promo-media:hover .blob-photo-front{
  transform: rotate(6deg) translate(10px,-16px) scale(1.03);
  box-shadow: 0 26px 48px -16px rgba(62,43,38,.42);
}

@media (max-width: 900px){
  .blob-promo{ grid-template-columns: minmax(0,1fr); }
  .blob-promo-media{ aspect-ratio: 6/5; min-height: 0; margin-top: 30px; }   /* photos are 70% of the box width tall, so the box must scale with its width */
}

/* ==========================================================================
   Feature icons ("Почему wag'n'tails")
   ========================================================================== */
.features{ margin-top: 110px; }
.section.how-it-works{
  position: relative;
  background: url('../images/how-it-works-bg.jpg') center 30%/cover no-repeat;
  padding-top: 56px;
  padding-bottom: 70px;
}
#embroidery-slide-1, #embroidery-slide-2{ position: sticky; top: 0; }
#embroidery-slide-1{ z-index: 1; }
#embroidery-slide-2{ z-index: 2; }
.how-it-works::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(15,10,8,.38) 0%, rgba(15,10,8,.48) 55%, rgba(15,10,8,.85) 100%);
  z-index:0;
}
.how-it-works .step-grid{ margin-top: 34px; }
.how-it-works .step-card{ min-height: 30vh; padding: 24px 22px; }
.how-it-works::after{
  content:'';
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.35;
  mix-blend-mode: overlay;
  z-index:0;
  pointer-events:none;
}
.how-it-works > .container{
  position:relative;
  z-index:1;
}
.how-it-works .mixed-title .mixed-serif{ color: var(--butter); }
.how-it-works .mixed-title .mixed-bold{ color: var(--paper); }
.how-it-works .section-sub{ color: rgba(250,246,236,.75); }
.step-grid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 10px;
  margin-top: 50px;
}
.step-card{
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  min-height: 35vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition: background .4s var(--ease);
}
.step-card[data-reveal]{
  transition: opacity .7s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), background .4s var(--ease);
}
.step-card[data-reveal]:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 28px -12px rgba(62,43,38,.25);
}
.step-card--ink{ background: var(--ink); }
.step-card--butter{ background: var(--butter); }
.step-card--blush{ background: var(--blush); }
.step-card--sand{ background: var(--sand-deep); }
.step-card:hover{ background: #fff; }
.step-card::before{
  content:'';
  display:block;
  width:1.5px;
  height:22px;
  background: currentColor;
  color: var(--ink-soft);
  opacity:.45;
  margin-bottom:16px;
  transition: color .4s var(--ease);
}
.step-card--ink::before{ color: rgba(250,246,236,.6); }
.features .step-card::before{ display:none; }
.step-card-doodle{
  display:block;
  width:28px;
  height:28px;
  margin-bottom:16px;
  transition: filter .4s var(--ease);
}
.step-card-doodle img{ width:100%; height:100%; object-fit:contain; display:block; }
.step-card:hover .step-card-doodle{ filter: brightness(.55); }
.step-card-doodle--stitches{ width:56px; height:18px; margin-bottom:18px; }   /* a row of running stitches, wider than the round doodles */
.step-card-badge{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  padding: 0;
  border-radius: 0;
  margin-bottom: 14px;
  transition: color .4s var(--ease);
}
.step-card--ink .step-card-badge{ color: rgba(250,246,236,.6); }
.step-card-title{
  font-family: var(--font-serif);
  font-style:normal;
  font-weight:400;
  font-size: clamp(24px, 2.6vw, 30px);
  color: var(--ink);
  line-height:1.15;
  margin-top:0;
  transition: color .4s var(--ease);
}
.step-card--ink .step-card-title{ color: var(--paper); }
.step-card-text{
  font-size:13px;
  color: var(--ink-soft);
  margin-top:14px;
  transition: color .4s var(--ease);
}
.step-card--ink .step-card-text{ color: rgba(250,246,236,.7); }
.step-card-link{
  display:inline-block;
  margin-top:14px;
  font-size:12px;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  color: var(--ink);
}
.step-card--ink .step-card-link{ color: var(--paper); }
.step-card:hover::before,
.step-card:hover .step-card-badge,
.step-card:hover .step-card-title{ color: var(--ink); }
.step-card:hover .step-card-text{ color: var(--ink-soft); }
@media (max-width: 760px){
  .step-grid{ grid-template-columns: repeat(2,1fr); }
  .step-card{ min-height:140px; }
}
@media (max-width: 480px){
  .step-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
  .feature-grid{ grid-template-columns: repeat(2,1fr); row-gap:20px; }
}
@media (max-width: 480px){
  .feature-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Team — headline + bento grid of photo tiles and colour plaques
   ========================================================================== */
.team-section{ background: var(--paper); padding: 90px 0; display:flex; flex-direction:column; justify-content:center; }
.team-grid{
  display:grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: 40px;
  align-items:end;   /* cards sit on the same baseline as the button */
  width:100%;
}
.team-intro{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.team-intro .mixed-title{ margin:0; }
.team-intro p{ color: var(--ink-soft); font-size:14.5px; line-height:1.55; max-width:340px; margin:0; }
.team-bento{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 20px;
  align-items: start;
}
/* every member = a round photo with the name, role and quote centred beneath it (no plaques) */
.team-member{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.team-photo{
  position:relative;
  overflow:hidden;
  width:min(100%, 210px);
  aspect-ratio:1;
  border-radius:50%;
}
.team-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 12%; display:block; }
.team-photo--placeholder{
  background: var(--sand-deep);
  display:flex; align-items:center; justify-content:center;
}
.team-placeholder-icon{ width:40px; height:40px; color: var(--mocha); opacity:.55; }
.team-quote{
  padding: 18px 4px 0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.team-name{
  font-family: var(--font-sans);
  font-weight:700;
  font-size:17px;
  line-height:1.25;
  color: var(--ink);
  margin:0;
}
.team-role{
  display:block;
  font-family: var(--font-sans);
  font-size:12.5px;
  line-height:1.35;
  color: var(--mocha);
  margin:3px 0 12px;
}
.team-quote p{
  overflow-wrap:anywhere; hyphens:auto;
  font-family: var(--font-sans);
  font-style:normal;
  font-weight:400;
  font-size:13.5px;
  line-height:1.5;
  color: var(--ink-soft);
  margin:0;
  max-width: 250px;
}
@media (max-width:900px){
  .team-section{ min-height:0; }
  .team-grid{ grid-template-columns:1fr; gap:32px; align-items:start; }
  .team-intro p{ max-width:none; }
  .team-bento{ grid-template-columns:1fr 1fr; gap:36px 18px; }
}
@media (max-width:480px){
  .team-photo{ width:min(100%, 180px); }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials{
  position:relative;
  margin-top: 110px;
  padding: 90px 0 100px;
  background: var(--butter);
}
#brand-history + .testimonials{ margin-top:0; }
.team-section + .testimonials{ margin-top:0; }
.testi-grid{
  display:block;
}
.testi-track{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 28px;
}
.testi-card{
  display:block;
  text-align:left;
  padding: 0;
}
.testi-shot-img{
  display:block;
  width:100%;
  height:auto;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 40px -26px rgba(62,43,38,.5);
}
.testi-nav{
  display:none;
  flex-shrink:0;
  width:44px; height:44px;
  border-radius:50%;
  border:1.5px solid var(--line);
  background:transparent;
  color: var(--ink);
  align-items:center; justify-content:center;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.testi-nav svg{ width:18px; height:18px; }
.testi-nav:hover{ background: var(--ink); border-color: var(--ink); color: var(--paper); }

@media (max-width: 900px){
  .testi-track{ grid-template-columns: 1fr; gap:36px; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ padding-top: 110px; }
.faq-card{
  max-width: 820px;
  margin: 0 auto;
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 56px;
}
.faq-card .section-head{ margin-bottom: 30px; }
.faq-list{ max-width: 760px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item{
  border-bottom: 1px solid var(--line);
}
@media (max-width: 640px){
  .faq-card{ padding: 40px 24px; }
}
.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
  padding: 24px 4px;
  background:none;
  border:none;
  text-align:left;
  font-family: var(--font-sans);
  font-weight:600;
  font-size: 15.5px;
  color: var(--ink);
}
.faq-q .plus{
  flex:none;
  width:26px; height:26px;
  border-radius:50%;
  border: 1.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.faq-q .plus::before, .faq-q .plus::after{
  content:'';
  position:absolute;
  background: var(--ink);
}
.faq-q .plus::before{ width:10px; height:1.5px; }
.faq-q .plus::after{ width:1.5px; height:10px; transition: opacity .25s var(--ease); }
.faq-item.open .faq-q .plus{ background: var(--ink); transform: rotate(180deg); }
.faq-item.open .faq-q .plus::before, .faq-item.open .faq-q .plus::after{ background: var(--paper); }
.faq-item.open .faq-q .plus::after{ opacity:0; }
.faq-a{
  max-height:0;
  overflow:hidden;
  transition: max-height .35s var(--ease);
}
.faq-a p{
  padding: 0 30px 24px 4px;
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 620px;
}

/* ==========================================================================
   Newsletter / CTA band
   ========================================================================== */
.cta-band{
  padding: 90px 0;
  background: var(--ink);
  text-align:center;
  overflow:hidden;
}
.cta-band .container{ position:relative; }
.cta-band-doodle{
  position:absolute;
  pointer-events:none;
  opacity:.85;
}
.cta-band-doodle--curl1{ width:34px; top:-8px; left:18%; transform:rotate(-12deg); }
.cta-band-doodle--curl2{ width:26px; top:66px; left:calc(50% + 150px); transform:rotate(150deg); }   /* trails away from the button */
.cta-band-doodle--curl3{ width:30px; bottom:-6px; left:24%; transform:rotate(200deg) scaleX(-1); }
.cta-band-doodle--spiral{ width:32px; bottom:-2px; right:16%; transform:rotate(-8deg); }
.cta-band .headline{ color: var(--paper); font-size: clamp(28px,3.6vw,42px); }
.cta-band p{ color: rgba(250,246,236,.7); margin: 16px 0 34px; }
.newsletter-form{
  display:flex;
  max-width: 420px;
  margin: 0 auto;
  gap: 10px;
}
.newsletter-form input{
  flex:1;
  height: 52px;
  border-radius: 999px;
  border: 1.5px solid rgba(250,246,236,.3);
  background: transparent;
  color: var(--paper);
  padding: 0 22px;
  font-family: var(--font-sans);
  font-size: 14px;
}
.newsletter-form input::placeholder{ color: rgba(250,246,236,.5); }
.newsletter-form input:focus{ outline:none; border-color: var(--butter); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer-backdrop{
  height: 110px;
  background: var(--sand);
}
.site-footer{
  position:relative;
  margin-top: -48px;
  background: var(--blush-deep);
  border-radius: 48px 48px 0 0;
  padding: 70px 0 30px;
}
.footer-top{
  position:relative;
  display:grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 30px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(62,43,38,.18);
}
.footer-top .doodle-flower{
  position:absolute; top:-4px; left:150px;
  width:38px;
  transform:rotate(-10deg);
  opacity:.9;
  pointer-events:none;
}
.footer-bottom .doodle-star{ width:20px; height:20px; opacity:.8; flex-shrink:0; }
@media (max-width: 900px){
  .footer-top .doodle-flower{ display:none; }
}
.footer-brand .logo{ margin-bottom: 14px; }
.footer-brand p{ font-size: 13.5px; color: var(--ink-soft); max-width: 240px; }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-col h4{
  font-size: 12px;
  font-weight:700;
  letter-spacing:.1em;
  color: var(--ink-soft);
  margin-bottom: 18px;
  text-transform: uppercase;
}
.footer-col ul li{ margin-bottom: 11px; }
.footer-col a{ font-size: 13.5px; color: var(--ink-soft); transition: color .2s; text-transform: lowercase; }
.footer-col a:hover{ color: var(--ink); }
.footer-sub-form{ display:flex; gap:8px; margin-top:4px; }
.footer-sub-form input{
  flex:1; height:44px; border-radius:999px;
  border:1px solid rgba(62,43,38,.18); background: var(--cream);
  padding: 0 16px; font-size:13px; font-family: var(--font-sans);
}
.footer-sub-form input:focus{ outline:none; border-color: var(--ink-soft); }
.footer-sub-form button{
  width:44px; height:44px; border-radius:50%;
  background: var(--ink); color:var(--paper); border:none;
  display:flex; align-items:center; justify-content:center;
}
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top: 26px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.footer-bottom a{ color: var(--ink-soft); }
.footer-legal{ display:flex; gap:26px; }
.footer-legal a{ text-transform: lowercase; }
@media (max-width:640px){
  .site-footer{ border-radius: 32px 32px 0 0; }
}

@media (max-width: 900px){
  .footer-top{ grid-template-columns: repeat(2,1fr); }
  .footer-bottom{ flex-direction:column; gap:14px; text-align:center; }
}

/* ==========================================================================
   Page hero (interior pages)
   ========================================================================== */
.page-hero{
  margin: 32px 24px 0;
  border-radius: var(--radius-lg);
  padding: 90px 56px 80px;
  background: var(--sand-deep);
  text-align:center;
}
.page-hero .eyebrow{ justify-content:center; display:flex; }
.page-hero .headline-strong{ font-size: clamp(32px,4.6vw,52px); margin-top:10px; }
.page-hero p{ color: var(--ink-soft); max-width:560px; margin: 18px auto 0; font-size:15px; }

/* ==========================================================================
   Full-height page slides (about-page hero + "what matters" points) —
   unified layout: index counter, tag, divider, eyebrow, heading, scroll hint
   ========================================================================== */
.page-slide{
  position:relative;
  min-height: 70vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
}
.page-slide[data-reveal]{
  transform: scale(1.04);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.page-slide[data-reveal].in{ transform: scale(1); }
.slide-stack{ position: relative; }
#brand-history{ position: relative; z-index: 6; }
.page-slide .photo-fade,
.page-slide > img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; }
.page-slide::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(31,20,17,.06) 0%, rgba(31,20,17,.18) 45%, rgba(31,20,17,.6) 100%);
  z-index:1;
}
.slide-content{
  position:relative; z-index:2;
  width:100%;
  max-width: 760px;
  padding: 0 56px 56px;
}
.slide-top-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}
.slide-index{
  font-family: var(--font-sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  color: rgba(255,255,255,.7);
}
.slide-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background: rgba(250,246,236,.16);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  font-size:11px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  padding:7px 14px;
  border-radius:999px;
}
.slide-divider{
  height:1px;
  background: rgba(255,255,255,.28);
  margin-bottom:18px;
}
.slide-content .eyebrow{ color: rgba(255,255,255,.75); display:block; margin-bottom:10px; }
.slide-content .mixed-title{ text-align:left; }
.slide-content .mixed-title .mixed-serif,
.slide-content .mixed-title .mixed-bold{ color:#fff; }
.slide-content p:not(.eyebrow){ color: rgba(255,255,255,.82); max-width:480px; margin:14px 0 0; font-size:14.5px; }
@media (max-width:900px){
  .page-slide{ min-height:64vh; }
  .slide-content{ padding: 0 24px 56px; }
}

.breadcrumbs{
  display:flex; gap:8px; align-items:center;
  font-size:12.5px; color: var(--mocha);
  padding: 22px 0 0;
}
.breadcrumbs a{ color: var(--mocha); }
.breadcrumbs a:hover{ color: var(--ink); }

/* generic content spacing on interior pages */
.section{ padding-top: 100px; }
.section-tight{ padding-top: 60px; }

/* ---- info pages cross-nav (delivery / exchange / production-time / care) ---- */
.info-subnav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin: 46px auto 0;
}
.info-subnav-link{
  padding: 12px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-size: 13px;
  font-weight:600;
  color: var(--ink-soft);
  transition: all .25s var(--ease);
  white-space:nowrap;
}
.info-subnav-link:hover{ border-color: var(--ink); color: var(--ink); }
.info-subnav-link.active{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- misc utility ---- */
.center{ text-align:center; }
.mt-0{ margin-top:0; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid{
  display:grid;
  /* info on the left, form on the right (20% narrower than before), grouped tightly in the middle */
  grid-template-columns: max-content clamp(380px, 40vw, 500px);
  grid-template-areas: "info form";
  justify-content:center;
  column-gap: clamp(56px, 7vw, 110px);
  row-gap: 40px;
  align-items:start;
}
.contact-grid > form{ grid-area: form; }
.contact-grid > .contact-info{ grid-area: info; }
.form-field{ margin-bottom: 16px; }
.form-field input, .form-field textarea{
  width:100%;
  border: 1.5px solid var(--line);
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 15px 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  resize: vertical;
}
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color: var(--mocha); }
.form-field textarea{ min-height: 130px; }
.form-checks{ display:flex; gap:24px; margin: 18px 0 26px; }
.checkbox{ display:flex; align-items:center; gap:9px; font-size:13.5px; color: var(--ink-soft); cursor:pointer; }
.checkbox input{ width:17px; height:17px; accent-color: var(--ink); }
.checkbox input:disabled{ cursor:not-allowed; }
.checkbox:has(input:disabled){ opacity:.5; cursor:not-allowed; }

.contact-info{ display:flex; flex-direction:column; gap:26px; }
.info-block .eyebrow{ display:block; margin-bottom:6px; }
.info-block .value{ font-size: 16.5px; font-weight:600; }
.social-pill{
  display:inline-flex; align-items:center; gap:8px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight:600;
  margin-top:6px;
}

@media (max-width: 900px){
  .contact-grid{ grid-template-columns: minmax(0,1fr); grid-template-areas: "form" "info"; justify-content:stretch; row-gap:64px; }
  /* stacked layout: contact details are centred and sit clearly apart from the form */
  .contact-info{ align-items:center; text-align:center; }
  .info-block{ display:flex; flex-direction:column; align-items:center; }
}

/* ---- Contact page: dark brown variant ---- */
.contact-dark{ background: var(--ink); }
.contact-dark .page-hero{ background: transparent; padding-bottom: 27px; }
.contact-dark .page-hero .eyebrow{ color: var(--butter); }
.contact-dark .page-hero .mixed-title .mixed-serif{ color: var(--butter); }
.contact-dark .page-hero .mixed-title .mixed-bold{ color: var(--paper); }
.contact-dark .page-hero p{ color: rgba(250,246,236,.75); }
.contact-dark .form-field input,
.contact-dark .form-field textarea{
  background: rgba(250,246,236,.06);
  border-color: rgba(250,246,236,.25);
  color: var(--paper);
}
.contact-dark .form-field input::placeholder,
.contact-dark .form-field textarea::placeholder{ color: rgba(250,246,236,.4); }
.contact-dark .form-field input:focus,
.contact-dark .form-field textarea:focus{ border-color: var(--butter); }
.contact-dark .checkbox{ color: rgba(250,246,236,.75); }
.contact-dark .checkbox input{ accent-color: var(--butter); }
.contact-dark .btn-dark{ background: var(--butter); border-color: var(--butter); color: var(--ink); }
.contact-dark .btn-dark:hover{ background: var(--paper); border-color: var(--paper); }
.contact-dark .info-block .eyebrow{ color: var(--butter); }
.contact-dark .info-block .value{ color: var(--paper); }
.contact-dark .social-pill{ border-color: rgba(250,246,236,.3); color: var(--paper); }
.contact-dark .social-pill:hover{ background: rgba(250,246,236,.08); }

/* ==========================================================================
   Catalog page
   ========================================================================== */
.catalog-hero{
  display:grid;
  grid-template-columns: 1fr .9fr;
  gap: 50px;
  align-items:center;
  padding: 70px 0;
}
.catalog-hero-media{ border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 4/3; }
.catalog-hero-media img{ width:100%; height:100%; object-fit:cover; }
.catalog-hero-body .headline-strong{ font-size: clamp(30px,4vw,44px); }
.catalog-hero-body p{ color: var(--ink-soft); font-size:15px; margin: 16px 0 26px; max-width:440px; }
/* two buttons in the hero: keep a gap between them side by side and when they wrap */
.catalog-hero-body .btn{ margin: 0 12px 12px 0; }

.catalog-body{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 44px;
  padding: 20px 0 100px;
  align-items:start;
}
.filter-group{ margin-bottom: 34px; }
.filter-group h4{
  font-size: 11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color: var(--mocha); margin-bottom: 16px;
}
.filter-group ul li{ margin-bottom: 12px; }
.filter-group a{ font-size: 14px; color: var(--ink-soft); }
.filter-group a.active{ color: var(--ink); font-weight:700; }
.filter-check{ display:flex; align-items:center; gap:9px; font-size:14px; color: var(--ink-soft); margin-bottom:12px; cursor:pointer; }
.filter-check input{ width:16px; height:16px; accent-color: var(--ink); }

.catalog-toolbar{
  display:flex; justify-content:flex-end; margin-bottom: 26px;
}
.sort-select{
  border: 1.5px solid var(--line);
  background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B443C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center;
  background-size: 14px;
  border-radius: 999px;
  padding: 10px 18px;
  padding-right: 42px;
  font-size: 13px;
  color: var(--ink-soft);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

@media (max-width: 900px){
  .catalog-hero{ grid-template-columns: 1fr; }
  .catalog-body{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Product detail page
   ========================================================================== */
.pd-layout{
  display:grid;
  grid-template-columns: 88px 1fr 1fr;
  gap: 20px;
  padding: 34px 0 0;
}
.pd-thumbs{ display:flex; flex-direction:column; gap:14px; }
.pd-thumb{
  border-radius: var(--radius-sm);
  overflow:hidden;
  aspect-ratio: 1/1;
  border: 1.5px solid transparent;
  cursor:pointer;
}
.pd-thumb.active{ border-color: var(--ink); }
.pd-thumb img{ width:100%; height:100%; object-fit:cover; }
.pd-main{ border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 4/4.6; }
.pd-main img{ width:100%; height:100%; object-fit:cover; }

.pd-info h1{
  font-family: var(--font-sans);
  font-weight:700;
  font-size: clamp(24px,2.6vw,32px);
  line-height:1.2;
}
.pd-price{ font-size: 22px; font-weight:600; color: var(--ink); margin-top:14px; }
.pd-label{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--mocha); margin: 26px 0 12px; }
.swatch-group{ display:flex; gap:10px; }
.swatch{
  width:36px; height:36px; border-radius:50%;
  border: 1.5px solid var(--line);
  cursor:pointer;
  position:relative;
}
.swatch.active::after{
  content:''; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid var(--ink);
}
.swatch::before{
  content: attr(data-name);
  position:absolute;
  bottom: calc(100% + 10px);
  left:50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  padding:5px 10px;
  border-radius:6px;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index:5;
}
.swatch:hover::before{ opacity:1; transform: translateX(-50%) translateY(0); }
.filter-swatches{ display:flex; flex-wrap:wrap; gap:9px; }
.filter-swatch{
  width:24px; height:24px; border-radius:50%;
  border: 1.5px solid var(--line);
  cursor:pointer;
  position:relative;
  padding:0;
}
.filter-swatch.active::after{
  content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--ink);
}
.filter-swatch::before{
  content: attr(data-name);
  position:absolute;
  bottom: calc(100% + 8px);
  left:50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  padding:5px 10px;
  border-radius:6px;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index:5;
}
.filter-swatch:hover::before{ opacity:1; transform: translateX(-50%) translateY(0); }
.size-group{ display:flex; gap:10px; }
.size-btn{
  width:46px; height:46px; border-radius:50%;
  border: 1.5px solid var(--line);
  background: var(--cream);
  font-size: 13px; font-weight:600; color: var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.size-btn.active{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pd-cta{ margin-top: 32px; display:flex; flex-direction:column; gap:14px; }
.size-guide-link{ font-size:13px; font-weight:600; text-decoration:underline; color: var(--ink-soft); align-self:flex-start; }

.pd-accordion{ margin-top: 30px; border-top: 1px solid var(--line); }
.pd-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 2px; cursor:pointer; border-bottom: 1px solid var(--line);
  font-size: 14.5px; font-weight:600;
}
.pd-row .plus{
  width:22px; height:22px; border-radius:50%; border:1.5px solid var(--ink);
  position:relative; flex:none; transition: transform .3s var(--ease);
}
.pd-row .plus::before, .pd-row .plus::after{ content:''; position:absolute; background:var(--ink); top:50%; left:50%; }
.pd-row .plus::before{ width:8px; height:1.5px; transform:translate(-50%,-50%); }
.pd-row .plus::after{ width:1.5px; height:8px; transform:translate(-50%,-50%); transition: opacity .2s; }
.pd-row.open .plus{ transform: rotate(180deg); }
.pd-row.open .plus::after{ opacity:0; }
.pd-body{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.pd-body p{ padding: 0 2px 20px; font-size:13.5px; color: var(--ink-soft); }

@media (max-width: 900px){
  .pd-layout{ grid-template-columns: minmax(0,1fr); }
  .pd-layout > *{ min-width:0; }
  .pd-thumbs{ flex-direction:row; order:2; overflow-x:auto; }
}

/* ---- Sticky purchase bar ---- */
.pd-sticky-bar{
  position: fixed;
  left:0; right:0; bottom:0;
  z-index: 50;
  background: var(--cream);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 30px -14px rgba(62,43,38,.2);
  transform: translateY(100%);
  opacity:0;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
  pointer-events:none;
}
.pd-sticky-bar.visible{ transform:translateY(0); opacity:1; pointer-events:auto; }
.pd-sticky-bar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  padding: 14px 40px;
}
.pd-sticky-info{ display:flex; align-items:center; gap:14px; min-width:0; }
.pd-sticky-info img{ width:48px; height:48px; border-radius:var(--radius-sm); object-fit:cover; flex-shrink:0; }
.pd-sticky-name{ font-size:13.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:320px; }
.pd-sticky-price{ font-size:13px; color:var(--ink-soft); margin-top:2px; }
.pd-sticky-bar-inner .btn{ flex-shrink:0; height:44px; padding:0 26px; }
@media (max-width:560px){
  .pd-sticky-bar-inner{ padding:12px 20px; }
  .pd-sticky-name{ max-width:150px; }
}

/* ==========================================================================
   Quick-link avatar row (shop-by category)
   ========================================================================== */
.avatar-row{
  display:flex;
  justify-content:center;
  gap: 56px;
  padding: 46px 0 0;
}
.avatar-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}
.avatar-circle{
  width:115px; height:115px;
  border-radius:50%;
  overflow:hidden;
  border: 1.5px solid var(--line);
  background: var(--sand-deep);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.avatar-item:hover .avatar-circle{ transform: translateY(-4px); border-color: var(--mocha); }
.avatar-circle img{ width:100%; height:100%; object-fit:cover; }
.avatar-item span{ font-size:16px; font-weight:700; color: var(--ink); }
.avatar-item:hover .btn-label-line:not(.btn-label-dup){ transform: translateY(-100%); }
.avatar-item:hover .btn-label-dup{ transform: translateY(0); }

@media (max-width: 760px){
  .avatar-row{ gap: 28px; flex-wrap:wrap; }
  .avatar-circle{ width:91px; height:91px; }
}

/* ==========================================================================
   Trick or Treat / seasonal capsule
   ========================================================================== */
.capsule-seasonal{
  position:relative;
  margin-top:110px;
  border-radius: var(--radius-lg);
  overflow:hidden;
  min-height: 480px;
  display:flex;
  align-items:center;
}
.capsule-seasonal img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 50% 20%;
}
.capsule-seasonal::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(20,13,11,.72) 0%, rgba(20,13,11,.35) 45%, rgba(20,13,11,.05) 75%);
}
.capsule-seasonal-body{
  position:relative; z-index:2;
  padding: 56px;
  max-width: 480px;
  color: var(--paper);
}
.capsule-seasonal-body .eyebrow{ color: var(--butter); }
.capsule-seasonal-body .headline{ color:var(--paper); font-size: clamp(38px,5vw,58px); margin-top:8px; }
.capsule-seasonal-body p{ color: rgba(250,246,236,.85); font-size:15px; margin:16px 0 26px; }

/* ---- capsule split: full-bleed 50/50 photo + product panel ---- */
.capsule-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 110px;
  min-height: 92vh;
}
.capsule-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}
.capsule-hero img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 50% 20%;
}
.capsule-hero::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(20,13,11,.85) 0%, rgba(20,13,11,.42) 40%, rgba(20,13,11,0) 68%);
}
.capsule-hero-body{
  position:relative; z-index:2;
  padding: 64px 72px;
  max-width: 560px;
  color: var(--paper);
}
.capsule-hero-body .eyebrow{ color: var(--butter); }
.capsule-hero-body .headline{ color:var(--paper); font-size: clamp(44px,5.4vw,74px); margin-top:10px; }
.capsule-hero-body p{ color: rgba(250,246,236,.85); font-size:15.5px; margin:18px 0 28px; max-width:440px; }
.capsule-products{
  background: var(--paper);
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-content:start;
  gap: 28px;
  padding: 56px;
}

@media (max-width: 900px){
  .capsule-split{ grid-template-columns: 1fr; min-height: 0; }
  .capsule-hero{ min-height: 480px; }
  .capsule-hero-body{ padding: 36px 28px; max-width:none; }
  .capsule-products{ padding: 32px 24px; }
}
@media (max-width: 560px){
  .capsule-products{ gap: 14px; padding: 24px 16px; }
}

/* ==========================================================================
   Instagram carousel
   ========================================================================== */
.insta-section{ margin-top:110px; padding-bottom: 20px; }
.insta-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom: 30px;
}
.insta-head .eyebrow{ display:block; margin-bottom:8px; }
.insta-nav{ display:flex; gap:10px; }
.insta-nav-btn{
  width:44px; height:44px;
  border-radius:50%;
  border:1.5px solid var(--line);
  background: var(--cream);
  color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.insta-nav-btn svg{ width:18px; height:18px; }
.insta-nav-btn:hover{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.insta-head a{
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border-bottom: 1.5px solid var(--ink); padding-bottom:3px; white-space:nowrap;
}
.insta-track{
  display:flex;
  gap: 6px;
  overflow-x:auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.insta-track::-webkit-scrollbar{ display:none; }
.insta-tile{
  position:relative;
  flex: 0 0 auto;
  width: 300px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  scroll-snap-align:start;
  border-radius: 14px;
  background: #fff;
}
.insta-tile-head{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  flex-shrink:0;
}
.insta-tile-avatar{
  width:28px; height:28px; border-radius:50%;
  background: var(--sand-deep);
  flex-shrink:0;
}
.insta-tile-user{ font-family: var(--font-sans); font-size:12.5px; font-weight:700; color: var(--ink); flex:1; }
.insta-tile-dots{ color: var(--ink-soft); font-size:13px; letter-spacing:1px; }
.insta-tile-photo{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.insta-tile-photo img{
  width:100%; height:100%; object-fit:cover;
  display:block;
  transition: transform .5s var(--ease);
}
.insta-tile:hover .insta-tile-photo img{ transform: scale(1.04); }
.insta-tile-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  flex-shrink:0;
}
.insta-tile-icons{ display:flex; align-items:center; gap:13px; }
.insta-tile-foot svg{ width:20px; height:20px; color: var(--ink); }

@media (max-width: 760px){
  .insta-tile{ width: 220px; }
}

/* ==========================================================================
   Constructor modal
   ========================================================================== */
.constructor-cta{
  margin-top:70px;
  border-radius: var(--radius-lg);
  background: var(--ink);
  padding: 70px 56px;
  text-align:center;
}
.constructor-cta .eyebrow{ color: var(--butter); justify-content:center; display:flex; }
.constructor-cta .headline{ color:var(--paper); font-size: clamp(30px,4vw,44px); margin-top:10px; }
.constructor-cta p{ color: rgba(250,246,236,.75); max-width:480px; margin:16px auto 30px; font-size:15px; }

.modal-overlay{
  position: fixed; inset:0;
  background: rgba(20,13,11,.6);
  backdrop-filter: blur(3px);
  z-index: 200;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 24px;
}
.modal-overlay.open{ display:flex; }
.modal-box{
  background: var(--paper);
  border-radius: var(--radius-lg);
  max-width: 80vw;
  width:100%;
  max-height: 90vh;
  overflow-y:auto;
  position:relative;
  padding: 44px;
}
.modal-close{
  position:absolute; top:22px; right:22px;
  width:38px; height:38px;
  border-radius:50%;
  border:1.5px solid var(--line);
  background: var(--cream);
  display:flex; align-items:center; justify-content:center;
  z-index:5;
}
.modal-close svg{ width:16px; height:16px; }
.modal-title{ font-family:var(--font-sans); font-weight:700; font-size:26px; margin-bottom:6px; }
.modal-sub{ font-size:13.5px; color:var(--ink-soft); margin-bottom:30px; }

/* ---- order-timing promo popup ---- */
.promo-popup-overlay{
  position: fixed; inset:0;
  background: rgba(20,13,11,.8);
  z-index: 300;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 24px;
}
.promo-popup-overlay.open{ display:flex; }
.promo-popup{
  position:relative;
  width:100%;
  max-width: 780px;
  min-height: 400px;
  border-radius: var(--radius-lg);
  overflow:hidden;
  display:grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
}
.promo-popup-media{ position:relative; }
.promo-popup-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.promo-popup-body{
  padding: 44px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color: var(--paper);
}
.promo-popup-body .eyebrow{ color: var(--butter); margin-bottom:14px; }
.promo-popup-body h3{
  font-family: var(--font-sans);
  font-weight:700;
  font-size: clamp(22px,2.6vw,28px);
  line-height:1.25;
  margin-bottom:16px;
}
.promo-popup-body .mixed-title{ text-align:left; margin-bottom:16px; }
.promo-popup-body .mixed-title .mixed-serif{ color: var(--butter); font-size: clamp(32px,4.2vw,42px); }
.promo-popup-body .mixed-title .mixed-bold{ color: var(--paper); font-size: clamp(24px,3vw,32px); }
.promo-popup-body p{ font-size:14px; color: rgba(250,246,236,.75); line-height:1.6; margin-bottom:28px; }
.promo-popup-body p.promo-popup-note{ font-size:12.5px; color: rgba(250,246,236,.55); margin-top:-18px; }
.promo-popup-btn{
  align-self:flex-start;
  background: var(--butter);
  border-color: var(--butter);
  color: var(--ink);
}
.promo-popup-btn:hover{ background:#e5cf83; border-color:#e5cf83; }
.promo-popup-close{
  position:absolute; top:18px; right:18px; z-index:5;
  width:38px; height:38px;
  border-radius:50%;
  border:none;
  background: rgba(255,255,255,.15);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: background .25s var(--ease);
}
.promo-popup-close:hover{ background: rgba(255,255,255,.3); }
.promo-popup-close svg{ width:16px; height:16px; }
@media (max-width:640px){
  .promo-popup{ grid-template-columns:1fr; }
  .promo-popup-media{ min-height:180px; }
  .promo-popup-body{ padding:34px 26px; }
}

.constructor-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap:44px; }
.constructor-preview{
  background: #EEE6DC;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  min-height: 560px;
  position:relative;
  overflow:hidden;
}
.preview-shape{ position:relative; width:220px; height:260px; display:flex; align-items:center; justify-content:center; }
.preview-photo{
  position:absolute;
  top:0; bottom:0; left:50%;
  height:100%; width:auto;
  transform: translateX(-50%);
  object-fit:cover;
}
.preview-text{
  position:absolute;
  max-width: 170px;
  text-align:center;
  font-size: 16px;
  line-height:1.25;
  word-break: break-word;
}

.ctor-field{ margin-bottom: 26px; }
.ctor-label{ font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--mocha); margin-bottom:12px; display:block; }
.ctor-pills{ display:flex; flex-wrap:wrap; gap:9px; }
.ctor-pills--phrase{ margin-top:12px; }
.ctor-pill{
  padding: 9px 16px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background: var(--cream);
  font-size:13px; font-weight:600; color:var(--ink-soft);
  cursor:pointer;
  transition: all .2s var(--ease);
}
.ctor-pill.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.ctor-pill[disabled]{ opacity:.35; cursor:not-allowed; }

.ctor-swatches{ display:flex; flex-wrap:wrap; gap:10px; }
.ctor-swatch{
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--line);
  cursor:pointer;
  position:relative;
}
.ctor-swatch.active::after{
  content:''; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid var(--ink);
}
.ctor-swatch::before{
  content: attr(data-color);
  position:absolute;
  bottom: calc(100% + 10px);
  left:50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  padding:5px 10px;
  border-radius:6px;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index:5;
}
.ctor-swatch:hover::before{
  opacity:1;
  transform: translateX(-50%) translateY(0);
}
.ctor-swatch--photo{ padding:0; }
.ctor-swatch--photo img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }

.ctor-select{
  width:100%;
  border:1.5px solid var(--line);
  background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B443C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
  background-size: 14px;
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  padding-right: 40px;
  font-size:14px;
  color:var(--ink);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.ctor-font-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.ctor-font-opt{
  display:flex; align-items:center; justify-content:center;
  width:110px; height:56px;
  border:1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: #ffffff;
  cursor:pointer;
  padding:8px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.ctor-font-opt img{ max-width:100%; max-height:100%; object-fit:contain; }
.ctor-font-opt.active{ border-color: var(--ink); border-width: 1.5px; background: #ffffff; }

.ctor-time{ display:flex; flex-direction:column; gap:10px; }
.ctor-time-opt{
  display:flex; align-items:flex-start; gap:12px;
  border:1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding:14px 16px;
  cursor:pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.ctor-time-opt.active{ border-color: var(--ink); background: var(--cream); }
.ctor-time-opt input{ margin-top:3px; accent-color: var(--ink); }
.ctor-time-title{ font-size:13.5px; font-weight:700; }
.ctor-time-desc{ font-size:12.5px; color:var(--ink-soft); margin-top:3px; }

.ctor-summary{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-top:1px solid var(--line);
  margin-top: 30px;
  padding-top: 22px;
}
.ctor-summary-price{ font-size:22px; font-weight:700; }
.ctor-summary-price span{ font-size:12.5px; font-weight:500; color:var(--mocha); display:block; }
.ctor-summary-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.ctor-summary-actions .btn{ white-space:nowrap; }

@media (max-width: 800px){
  .constructor-grid{ grid-template-columns: 1fr; }
  .modal-box{ padding: 28px 20px; }
  .ctor-summary{ flex-direction:column; align-items:flex-start; }
  .ctor-summary-actions{ width:100%; }
  .ctor-summary-actions .btn{ flex:1; }
}

@media (max-width: 480px){
  .constructor-preview{ min-height: 336px; }
}

/* ==========================================================================
   Fullscreen burger menu
   ========================================================================== */
.fullscreen-menu{
  position:fixed;
  inset:0;
  z-index:300;
  background: var(--paper);
  display:flex;
  flex-direction:column;
  opacity:0;
  visibility:hidden;
  transition: opacity .4s var(--ease), visibility .4s;
  overflow-y:auto;
}
.fullscreen-menu.open{ opacity:1; visibility:visible; }
.fs-menu-media{
  position:relative;
  height:46vh;
  min-height:260px;
  flex:none;
  overflow:hidden;
}
.fs-menu-media img{ width:100%; height:100%; object-fit:cover; }
.fs-menu-media::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(20,13,11,.45) 0%, rgba(20,13,11,0) 45%);
}
.fs-menu-close{
  position:absolute;
  top:20px; right:24px;
  z-index:5;
  width:44px; height:44px;
  border-radius:50%;
  background: rgba(250,246,236,.9);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink);
}
.fs-menu-close svg{ width:18px; height:18px; }
.fs-menu-inner{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 40px 32px 56px;
}
.fs-menu-links{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin-bottom: 36px;
}
.fs-menu-links a{
  --fs-menu-size: clamp(26px, 7vw, 34px);
  position:relative;
  font-family: var(--font-sans);
  font-weight:500;
  font-size: var(--fs-menu-size);
  color: var(--ink);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  text-transform: lowercase;
  letter-spacing:-.01em;
}
.fs-menu-link-label{ position:relative; display:inline-block; }
.fs-menu-link-sans{ display:block; transition: opacity .45s var(--ease); }
.fs-menu-link-serif{
  position:absolute; top:0; left:0;
  display:block;
  white-space:nowrap;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight:400;
  /* Baskerville's cap-height renders ~8% smaller than Helvetica Neue at the
     same font-size (measured via canvas.measureText), so scale up on swap
     to keep the letters visually the same height on hover. */
  font-size: calc(1em * 1.08);
  opacity:0;
  transition: opacity .45s var(--ease);
  pointer-events:none;
}
.fs-menu-links a:hover .fs-menu-link-sans{ opacity:0; }
.fs-menu-links a:hover .fs-menu-link-serif{ opacity:1; }
.fs-menu-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
}
.fs-quick-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding: 13px 22px;
  border-radius:999px;
  background: var(--ink);
  color: var(--paper);
  font-size:13.5px;
  font-weight:600;
}
.fs-quick-btn.outline{
  background:transparent;
  border:1.5px solid var(--ink);
  color:var(--ink);
}
.fs-quick-btn svg{ width:17px; height:17px; }

@media (min-width: 760px){
  .fullscreen-menu{ flex-direction:row-reverse; overflow-y:hidden; }
  .fs-menu-media{ height:100vh; width:50%; flex:none; }
  .fs-menu-inner{ width:50%; padding: 60px 64px; }
  .fs-menu-links a{ --fs-menu-size: clamp(28px, 3.2vw, 40px); }
}

/* reveal-on-scroll */
[data-reveal]{
  opacity:0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].in{
  opacity:1;
  transform:none;
}

/* ---- About page: smoother block-to-block scrolling ---- */
.page-about{ scroll-snap-type: y proximity; }
.page-about section{ scroll-snap-align: start; }
.page-about [data-reveal]{
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
}

/* ==========================================================================
   Legal / info prose pages (offer, privacy, delivery, returns, etc.)
   ========================================================================== */
.legal-content{
  max-width: 740px;
  margin: 0 auto;
  padding: 90px 0 130px;
}
.legal-content .legal-updated{
  font-size: 13px;
  color: var(--mocha);
  margin-bottom: 40px;
}
.legal-content h2{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  margin: 46px 0 14px;
}
.legal-content h2:first-of-type{ margin-top: 0; }
.legal-content h3{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin: 26px 0 10px;
}
.legal-content p{
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.legal-content ul, .legal-content ol{
  margin: 0 0 16px 22px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.75;
}
.legal-content li{ margin-bottom: 8px; }
.legal-content strong{ color: var(--ink); font-weight:600; }
.legal-content a{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-content table{ width:100%; border-collapse:collapse; margin: 8px 0 22px; font-size:14.5px; }
.legal-content th, .legal-content td{ padding:12px 16px; border:1px solid var(--line); text-align:left; color: var(--ink-soft); }
.legal-content th{ color: var(--ink); font-weight:600; background: var(--paper); }
.legal-content .legal-note{
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 8px 0 22px;
}

/* ==========================================================================
   Size guide
   ========================================================================== */
.size-guide-list{
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0 130px;
  display:flex;
  flex-direction:column;
  gap: 48px;
}
.size-card{
  background: var(--sand);
  border-radius: var(--radius-lg);
  overflow:hidden;
  scroll-margin-top: 110px;
}
.size-card-head{
  background: var(--paper);
  padding: 26px 40px;
  text-align:center;
}
.size-card-head h2{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight:400;
  font-size: clamp(22px,2.6vw,28px);
  color: var(--ink);
}
.size-card-note{ font-size:13px; color: var(--mocha); margin-top:4px; }
.size-card-body{
  padding: 36px 40px 40px;
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 30px;
  align-items:center;
}
.size-table-wrap{ overflow-x:auto; }
.size-table{ width:100%; border-collapse:collapse; }
.size-table th, .size-table td{ padding: 9px 10px; text-align:center; font-size:15px; color: var(--ink-soft); white-space:nowrap; }
.size-table thead th{ color: var(--ink); font-weight:700; }
.size-table th:first-child, .size-table td:first-child{ text-align:left; color: var(--mocha); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.size-table tbody tr td{ border-top: 1px solid var(--line); }
.size-diagram{ display:flex; justify-content:center; }
.size-diagram svg{ width:100%; max-width:190px; height:auto; color: var(--ink-soft); }

.size-breed-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 36px;
  padding: 8px 4px 30px;
}
.size-breed-item b{ display:block; font-size:14.5px; color:var(--ink); margin-bottom:3px; }
.size-breed-item span{ font-size:13px; color:var(--ink-soft); line-height:1.5; }

.size-bandana-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  padding: 0 4px;
}
.size-bandana-item{ text-align:center; }
.size-bandana-item .size-bandana-label{ font-weight:700; font-size:13.5px; color: var(--ink); margin-bottom:2px; }
.size-bandana-item .size-bandana-sub{ font-size:12px; color: var(--mocha); margin-bottom:10px; }
.size-bandana-item svg{ width:100%; max-width:120px; height:auto; color: var(--ink-soft); }

@media (max-width: 760px){
  .size-card-head{ padding:22px 24px; }
  .size-card-body{ grid-template-columns: 1fr; padding: 28px 24px 32px; }
  .size-breed-grid{ grid-template-columns: 1fr; padding: 8px 4px 24px; }
  .size-bandana-grid{ grid-template-columns: 1fr 1fr; gap: 22px 16px; }
}

/* ==========================================================================
   Stickers — embroidered patches slapped onto photos, cards and headings.
   Usage: <img class="sticker" src="images/stickers/…webp" alt="" style="--w:110px; --r:-8deg; top:-14px; left:-14px">
   The parent needs position:relative (add .has-sticker). Decorative ones use alt="".
   ========================================================================== */
.has-sticker{ position:relative; }
img.sticker{
  position:absolute; z-index:6;
  inset:auto; max-width:none; object-fit:contain; border-radius:0;
  width:calc(var(--w,110px) * 1.2); height:auto;   /* desktop: +20% */
  pointer-events:none; user-select:none;
  transform: rotate(var(--r,-8deg));
  transition: transform .7s cubic-bezier(.34,1.56,.64,1) .25s, opacity .4s ease .25s;
}
/* "slap on" when the parent block scrolls into view */
[data-reveal]:not(.in) img.sticker{ opacity:0; transform: rotate(var(--r,-8deg)) scale(.35); }
/* label stickers on product cards (replaces the old text tags) */
img.sticker--tag{ --w:86px; top:-14px; left:auto; right:-12px; }   /* straddles the card's top-right corner: half on the photo, half on the page */
@media (max-width:900px){ img.sticker--tag{ --w:69px; } }   /* tablet / phone: 20% smaller */
/* photo wrappers that clip their photo but should let a sticker hang over the edge */
.promo-media.has-sticker{ overflow:visible; }
.promo-media.has-sticker:not(.promo-media--polaroid) > img:not(.sticker){ border-radius: var(--radius-lg); }
/* photo-hover zoom on cards must not scale/re-rotate the sticker */
.product-card:hover .product-media img.sticker{ transform: rotate(var(--r,-8deg)); }
@media (max-width:700px){
  img.sticker{ width:calc(var(--w,110px) * .68); }
  img.sticker--tag{ --w:62px; top:-10px; left:auto; right:-8px; }
}
/* on tablet/phone, stickers that hang past a photo edge are pulled back inside the screen */
@media (max-width:900px){
  img.sticker[style*="left:-"]{ left:6px !important; }
  img.sticker[style*="right:-"]{ right:6px !important; }
}
@media (max-width:900px){ .promo-media img.sticker[style*="top:-"]{ top:-8px !important; } }
@media (max-width:900px){ img.sticker--above-title{ top:-100px !important; } }
@media (max-width:700px){ img.sticker--above-title{ top:-60px !important; } }
/* CTA band (about). Wide screens: heart + woof beside the heading, doodles around the button.
   Below 1280px everything moves into the band's padding — heart above the heading, woof under the button,
   doodles in the corners — so nothing sits on the text or on each other. */
.cta-band--stickers{ padding:100px 0 13px; }   /* the footer backdrop adds ~62px of brown below, so top and bottom room end up equal */
img.sticker--cta-heart{ bottom:18px; left:4%; }
img.sticker--cta-woof{ top:-26px; right:0; }
@media (max-width:1279px){
  .cta-band--stickers{ padding:200px 0 124px; }
  img.sticker--cta-heart{ bottom:auto; top:-128px; left:calc(50% - 60px); }
  img.sticker--cta-woof{ top:calc(100% + 26px); right:auto; left:calc(50% - 79px); }
  .cta-band-doodle--curl1{ top:-64px; left:12%; }
  .cta-band-doodle--curl2{ top:-104px; left:auto; right:14%; }
  .cta-band-doodle--curl3{ bottom:-64px; left:14%; }
  .cta-band-doodle--spiral{ bottom:-96px; right:14%; }
}
@media (max-width:700px){
  .cta-band--stickers{ padding:156px 0 78px; }
  img.sticker--cta-heart{ top:-78px; left:calc(50% - 34px); }
  img.sticker--cta-woof{ top:calc(100% + 20px); left:calc(50% - 45px); }
  .cta-band-doodle--curl1{ top:-50px; left:10%; }
  .cta-band-doodle--curl2{ top:-88px; right:12%; }
  .cta-band-doodle--curl3{ bottom:-52px; left:12%; }
  .cta-band-doodle--spiral{ bottom:-60px; right:12%; }
}
@media (prefers-reduced-motion:reduce){
  img.sticker{ transition:none; }
  [data-reveal]:not(.in) img.sticker{ opacity:1; transform: rotate(var(--r,-8deg)); }
}
/* stickers next to centred section / page titles */
img.sticker--title-r{ left:calc(50% + var(--k,2.4) * clamp(40px, 5.6vw, 64px)); top:var(--oy,-8px); }
.catalog-hero-media.has-sticker{ overflow:visible; }
.catalog-hero-media.has-sticker > img:not(.sticker){ border-radius: var(--radius-lg); width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:700px){
  /* phones: a sticker that sits beside a heading moves above it, centred */
  img.sticker--title-r{ left:calc(50% - var(--w) * .34); right:auto; top:calc(var(--w) * -.68 - 16px); }
  .page-hero > img.sticker{ left:calc(50% - var(--w) * .34) !important; right:auto !important; top:14px !important; }
}

/* embroidered patch under the footer subscription form */
.footer-patch{
  display:block; width:190px; height:auto; margin-top:24px;
  transform: rotate(-6deg); transform-origin:left center;
  pointer-events:none; user-select:none;
}
@media (max-width:700px){ .footer-patch{ width:150px; margin-top:20px; } }

/* FAQ ball: sits on the card's top border, rolls down to the heading while scrolling (see main.js) */
img.sticker.faq-ball{ top:-49px; left:calc(50% - 260px); transition:none; }
@media (max-width:700px){ img.sticker.faq-ball{ top:-30px; left:auto; right:22px; } }

/* Line breaking: short lead-ins and card copy are balanced, so a preposition/conjunction/particle
   ("с", "и", "на", "не" …) moves down with its phrase instead of leaving one word alone on the last line. */
h1, h2, h3, .step-card-title, .step-card-text, .section-sub, .page-hero p, .split-card-body p,
.promo-body p, .tint-promo-text p, .capsule-hero-body p, .team-quote p, blockquote{ text-wrap: balance; }
p, li{ text-wrap: pretty; }

/* Reviews band: the title's embroidery sits centred above the heading, in extra room at the top of the band */
.testimonials .section-head.has-sticker{ padding-top:124px; }
.testimonials .section-head > img.sticker--title-r{ top:6px; left:calc(50% - var(--w) * .6); right:auto; }
@media (max-width:700px){
  .testimonials .section-head.has-sticker{ padding-top:84px; }
  .testimonials .section-head > img.sticker--title-r{ top:4px; left:calc(50% - var(--w) * .34); }
}

/* embroidery hero: a taller, portrait photo so the whole dog and the embroidery fit */
.catalog-hero-media--tall{ aspect-ratio:4/5; width:min(100%, 480px); justify-self:end; }
@media (max-width:900px){ .catalog-hero-media--tall{ justify-self:start; width:min(100%, 420px); } }

/* the patch on the embroidery promo reacts to hover together with the two photos */
img.sticker.blob-sticker{ transition: transform .5s var(--ease), opacity .4s ease .25s; }
.blob-promo-media:hover img.sticker.blob-sticker{ transform: rotate(calc(var(--r, 12deg) + 10deg)) translate(12px, -14px) scale(1.06); }
@media (prefers-reduced-motion:reduce){ .blob-promo-media:hover img.sticker.blob-sticker{ transform: rotate(var(--r, 12deg)); } }

/* patch sits on the top-left corner of the corgi polaroid (left edge 42% of the box, top = box bottom − photo height 70% of its width) */
img.sticker.blob-sticker{ left:42cqw; top:calc(100% - 70cqw); right:auto; translate:-38% -50%; }

/* catalog hero: the patch sits above the last word of the heading, to the right of "Хвостика" */
.hero-word{ position:relative; display:inline-block; }
img.sticker.sticker--hero-word{ left:84%; bottom:calc(100% + 14px); translate:-50% 0; }
@media (max-width:700px){
  /* phones: above the heading, centred */
  .hero-word{ position:static; }
  img.sticker.sticker--hero-word{ left:calc(50% - var(--w) * .34); bottom:auto; top:calc(var(--w) * -.68 - 14px); translate:none; }
}

/* ==========================================================================
   Site search overlay
   ========================================================================== */
body.search-open{ overflow:hidden; }
.search-overlay{
  position:fixed; inset:0; z-index:1200;
  display:flex; justify-content:center; align-items:flex-start;
  padding: 88px 20px 20px;
  background: rgba(62,43,38,.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .25s var(--ease), visibility .25s;
}
.search-overlay.open{ opacity:1; visibility:visible; pointer-events:auto; }
.search-box{
  width:min(680px, 100%);
  max-height: calc(100vh - 120px);
  display:flex; flex-direction:column;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -20px rgba(62,43,38,.5);
  transform: translateY(-12px); transition: transform .3s var(--ease);
  overflow:hidden;
}
.search-overlay.open .search-box{ transform:none; }
.search-form{
  display:flex; align-items:center; gap:12px;
  padding: 16px 18px 16px 22px;
  border-bottom:1px solid var(--line-soft);
}
.search-form-icon{ width:22px; height:22px; color:var(--mocha); flex:none; }
.search-input{
  flex:1; min-width:0;
  border:0; outline:0; background:transparent;
  font-family:var(--font-sans); font-size:18px; color:var(--ink);
  padding:8px 0;
}
.search-input::placeholder{ color:var(--mocha); }
.search-input::-webkit-search-cancel-button{ display:none; }
.search-close{
  width:38px; height:38px; flex:none; border:0; border-radius:50%;
  background:var(--sand); color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s var(--ease);
}
.search-close:hover{ background:var(--sand-deep); }
.search-close svg{ width:18px; height:18px; }
.search-body{ overflow-y:auto; padding: 8px 12px 18px; }
.search-group{ padding: 12px 10px 4px; }
.search-group-title{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mocha); margin: 0 0 10px 6px;
}
.search-chips{ display:flex; flex-wrap:wrap; gap:8px; padding-left:6px; }
.search-chip{
  border:1.5px solid var(--line); background:transparent; color:var(--ink);
  border-radius:999px; padding:8px 16px; font:600 13px var(--font-sans); cursor:pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.search-chip:hover{ background:var(--sand); border-color:var(--mocha); }
.search-list{ list-style:none; margin:0; padding:0; }
.search-item{
  display:flex; align-items:center; gap:14px;
  padding:8px 10px; border-radius: var(--radius-md);
  color:var(--ink); text-decoration:none;
  transition: background .2s var(--ease);
}
.search-item:hover, .search-item:focus-visible{ background:var(--sand); outline:none; }
.search-item img, .search-thumb-empty{
  width:54px; height:54px; flex:none; border-radius:12px; object-fit:cover; background:var(--sand-deep);
}
.search-item-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.search-item-name{ font-size:15px; font-weight:600; line-height:1.3; }
.search-item-meta{ font-size:12px; color:var(--mocha); }
.search-item-price{ font-size:14px; color:var(--ink-soft); white-space:nowrap; }
.search-item--page{ padding:12px 12px; }
.search-item-arrow{ color:var(--mocha); }
.search-empty{ padding:26px 16px 12px; text-align:center; color:var(--ink-soft); font-size:15px; line-height:1.6; }
.search-empty a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:700px){
  .search-overlay{ padding: 64px 12px 12px; }
  .search-box{ max-height: calc(100vh - 80px); border-radius: var(--radius-md); }
  .search-input{ font-size:16px; }   /* 16px stops iOS zooming into the field */
  .search-item img, .search-thumb-empty{ width:46px; height:46px; }
}
@media (prefers-reduced-motion:reduce){ .search-overlay, .search-box{ transition:none; } }
.search-item-price s{ color:var(--mocha); margin-right:4px; }