/* ══════════════════════════════════════════════════════════════
   EMBRYO — bespoke stylesheet
   A brighter, more playful "baby store" palette: crisp warm cream,
   the logo's own sage green and gold kept as the brand anchor, a
   vivid coral swapped in for the old muted clay, and three new
   candy-soft accents (sky, butter, blush) for decoration and variety.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ground + depth — crisp and warm rather than tan/muddy */
  --paper:#FFF8EF;
  --paper-2:#FFEFDD;
  --paper-3:#FFE1C2;
  --forest:#3D5940;
  --forest-2:#4A6B4E;

  /* brand — sage + gold are the logo's own colours, kept as the anchor */
  --sage:#6E9857;
  --sage-deep:#4C6E3C;
  --sage-soft:#BEDAA8;
  --clay:#FF7F6E;
  --gold:#E0A94E;
  --gold-line:rgba(224,169,78,.38);
  --soil:#B07D4F;

  /* new candy-soft accents — decoration and variety, used sparingly */
  --sky:#6EC3E0;
  --sky-soft:#CBEBF6;
  --butter:#FFC94D;
  --blush:#FFAFC5;

  /* ink */
  --ink:#40332A;
  --ink-2:rgba(64,51,42,.7);
  --ink-3:rgba(64,51,42,.46);
  --on-dark:#FFF8EF;
  --on-dark-2:rgba(255,248,239,.68);

  /* type */
  --display:'Baloo 2',ui-rounded,'Segoe UI',sans-serif;
  --body:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;

  /* shape + motion */
  --r-sm:12px;
  --r-md:20px;
  --r-lg:28px;
  --r-pill:999px;
  --shadow-soft:0 18px 34px -20px rgba(74,58,36,.28);
  --shadow-lift:0 26px 46px -22px rgba(74,58,36,.34);
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,5vw,64px);
  --maxw:1240px;
  --rule:1px solid var(--gold-line);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:hidden}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-loading{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--sage);color:var(--paper)}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;z-index:200;background:var(--forest);color:var(--on-dark);padding:10px 16px;border-radius:4px}

:focus-visible{outline:2px solid var(--clay);outline-offset:3px}

/* ─────────── type scale ─────────── */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(38px,6.4vw,80px)}
h2{font-size:clamp(28px,4.2vw,52px)}
h3{font-size:clamp(19px,2vw,24px)}
h4{font-size:clamp(17px,1.6vw,20px);line-height:1.25}
p{font-size:clamp(14.5px,1.05vw,16.5px);color:var(--ink-2)}

.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--clay);margin-bottom:18px;
}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.lede{font-size:clamp(16px,1.35vw,19px);line-height:1.62;color:var(--ink-2)}

/* ─────────── reveal ─────────── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ══════════════ PRELOADER — ~2.7s total ══════════════
   One self-contained scene, centred on the screen — every coordinate is
   fixed at author-time (viewBox "-100 -190 200 290"), nothing is measured
   against the real header, so nothing can ever grow past the edge of the
   viewport. Roots fan out below a fixed ground point; a single stem draws
   — one continuous stroke — from that same point up to a fixed spot
   above it, where it opens into the same two leaves the real mark
   carries; "Embryo" fades in right beside them, in the same lockup the
   real header uses. The scene then simply fades to reveal the small,
   real header underneath. */
.preloader{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 90% at 18% 8%,rgba(190,218,168,.5) 0%,transparent 55%),
    radial-gradient(110% 85% at 88% 92%,rgba(255,127,110,.20) 0%,transparent 58%),
    var(--paper);
  transition:opacity .4s var(--ease),visibility .4s;
}
.preloader.done{opacity:0;visibility:hidden;pointer-events:none}

.pre-blob{position:absolute;border-radius:42% 58% 63% 37%/45% 40% 60% 55%;pointer-events:none}
.pre-blob-a{width:230px;height:210px;left:-70px;top:8%;background:var(--sage);opacity:.5;animation:blobFloat 11s ease-in-out infinite}
.pre-blob-b{width:170px;height:180px;right:-50px;top:58%;background:var(--clay);opacity:.34;animation:blobFloat 13s ease-in-out infinite reverse}
.pre-blob-c{width:120px;height:110px;right:12%;top:14%;background:var(--gold);opacity:.42;border-radius:50%;animation:blobFloat 9s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.pre-blob{animation:none}}

/* Floating objects either side of the stage — the same faceless
   trinkets the page uses, mirrored left/right so the loading screen
   reads as balanced rather than scattered. */
/* Deliberately static — the loading screen should cost nothing to
   paint, so these sit still like a printed illustration. */
.preloader .pre-tk{z-index:1!important;opacity:.4;animation:none}
.preloader .pre-tk-boy{left:10%;top:18%;font-size:28px;color:var(--sky);transform:rotate(-5deg)}
.preloader .pre-tk-girl{right:10%;top:18%;font-size:28px;color:var(--clay);transform:rotate(5deg)}
/* sizes pinned here so the site-wide 2x bump doesn't blow up the
   loading screen, which is already balanced at these dimensions */
.preloader .pre-tk-pram{left:6%;top:50%;width:86px;height:86px;color:var(--sage-deep)}
.preloader .pre-tk-onesie{right:6%;top:50%;width:86px;height:86px;color:var(--sage-deep)}
.preloader .pre-tk-crown{left:19%;top:76%;width:56px;height:56px;color:var(--gold)}
.preloader .pre-tk-bottle{right:19%;top:76%;width:56px;height:56px;color:var(--gold)}
@media (max-width:620px){
  .preloader .pre-tk-boy,.preloader .pre-tk-girl{font-size:19px;top:13%}
  .preloader .pre-tk-pram,.preloader .pre-tk-onesie{width:48px;height:48px;left:auto;right:auto}
  .preloader .pre-tk-pram{left:3%}
  .preloader .pre-tk-onesie{right:3%}
  .preloader .pre-tk-crown,.preloader .pre-tk-bottle{width:32px;height:32px}
  .preloader .pre-tk-crown{left:12%}
  .preloader .pre-tk-bottle{right:12%}
}
@media (prefers-reduced-motion:reduce){.preloader .pre-tk{animation:none}}

/* The stage: sized off the viewport, capped both ways, so the whole
   scene — plant and wordmark — always sits well clear of every edge. */
.pre-stage{position:relative;width:min(300px,55vw,41vh)}
.pre-plant{width:100%;height:auto;display:block;overflow:visible}
/* Butt caps: a round cap on a not-yet-drawn line still paints a dot at
   its start, so every root and the stem showed as dots before drawing. */
.pre-plant path{stroke-linecap:butt}

.pre-soil{stroke:var(--soil);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;opacity:.6}
.pre-root{stroke:var(--soil);stroke-dasharray:1;stroke-dashoffset:1}
/* Widths taper tier by tier the way a real root does — a thick crown at
   the soil line, then progressively finer down to hair-fine tips. */
.pre-root-crown{stroke-width:3.4}
.pre-root-main{stroke-width:2}
.pre-root-d1{stroke-width:1.35}
.pre-root-d2{stroke-width:.85}
.pre-root-d3{stroke-width:.5;opacity:.85}

.preloader.run .pre-soil{animation:preDraw 2.7s linear forwards}
.preloader.run .pre-root-crown{animation:preRootMain 2.7s linear forwards}
.preloader.run .pre-root-main{animation:preRootMain 2.7s linear forwards}
.preloader.run .pre-root-d1{animation:preRootD1 2.7s linear forwards}
.preloader.run .pre-root-d2{animation:preRootD2 2.7s linear forwards}
.preloader.run .pre-root-d3{animation:preRootD3 2.7s linear forwards}

@keyframes preDraw{ 0%,3%{stroke-dashoffset:1} 12%,100%{stroke-dashoffset:0} }
/* The taproot goes first; each finer tier of roots picks up as it passes
   their depth, so the root ball fills in from the centre outward. */
@keyframes preRootMain{ 0%,5%{stroke-dashoffset:1} 40%,100%{stroke-dashoffset:0} }
@keyframes preRootD1{ 0%,14%{stroke-dashoffset:1} 48%,100%{stroke-dashoffset:0} }
@keyframes preRootD2{ 0%,26%{stroke-dashoffset:1} 58%,100%{stroke-dashoffset:0} }
@keyframes preRootD3{ 0%,38%{stroke-dashoffset:1} 68%,100%{stroke-dashoffset:0} }

/* The climb: one long, unbroken stroke-draw from the ground to where the
   leaves sit — the growing IS the climb, no separate travel afterwards. */
.pre-stem{stroke:var(--sage);stroke-width:2.6;stroke-dasharray:1;stroke-dashoffset:1}
.pre-leaf path{stroke:var(--sage)}
.pre-leaf{transform-box:fill-box;opacity:0}
.pre-leaf-l{transform-origin:100% 100%;transform:scale(.15,.4)}
.pre-leaf-r{transform-origin:0% 100%;transform:scale(.15,.4)}

.preloader.run .pre-stem{animation:preStem 2.7s linear forwards}
.preloader.run .pre-leaf-l{animation:preLeaf 2.7s linear forwards}
.preloader.run .pre-leaf-r{animation:preLeaf 2.7s linear .05s forwards}
@keyframes preStem{ 0%,8%{stroke-dashoffset:1} 78%,100%{stroke-dashoffset:0} }
@keyframes preLeaf{
  0%,78%{transform:scale(.15,.4);opacity:0}
  82%{opacity:1}
  92%{transform:scale(1.12,1.12)}
  98%,100%{transform:scale(1,1);opacity:1}
}

/* "Embryo" — arrives right beside the leaves the moment they open, the
   same mark-then-wordmark lockup the real header uses. */
.pre-brand-word{
  position:absolute;left:78%;top:14%;transform:translateY(-50%);
  font-family:var(--display);font-weight:700;white-space:nowrap;
  font-size:clamp(20px,4.4vw,26px);color:var(--sage-deep);opacity:0;
}
.preloader.run .pre-brand-word{animation:preWord .5s var(--ease) 2.16s forwards}
@keyframes preWord{to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .pre-plant{display:none}
  .preloader.run .pre-brand-word{animation:preWord .4s var(--ease) forwards}
}

/* ══════════════ NAV ══════════════ */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:155;
  padding:0 var(--pad);
  background-color:#CDBE7E;
  /* a woven-cloth read: a faint dot weave plus a diagonal thread grain,
     so the bar itself looks like fabric, not a flat colour block */
  background-image:
    radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.2px),
    linear-gradient(90deg, rgba(74,58,36,.05) 50%, transparent 50%);
  background-size:4px 4px, 6px 6px;
  transition:box-shadow .4s var(--ease),padding .4s var(--ease);
  box-shadow:inset 0 -3px 6px rgba(74,58,36,.12), 0 4px 18px -8px rgba(74,58,36,.18);
}
.site-nav.stuck{
  box-shadow:var(--shadow-soft);
}

/* ── five sewn buttons: THREE left of the logo (far-left corner,
   mid-left, then one hugging the patch's left edge) and TWO between
   the logo and the cart (one hugging the patch's right edge, one just
   before the cart). Nothing on the logo, nothing past the cart.

   b/c live inside .brand and e lives inside .nav-actions, so their
   offsets MUST be measured off those boxes' own edges (100% + gap),
   never a plain percentage — a percentage there resolves against the
   logo's / the cart cluster's own width and lands right on top of
   them, which is exactly how buttons ended up over the logo. ── */
.nav-button{
  position:absolute;top:50%;width:34px;height:34px;margin-top:-17px;
  pointer-events:none;filter:drop-shadow(0 2px 3px rgba(74,58,36,.4));
}
.nav-button-a{left:16px}                 /* on the bar: far-left corner */
.nav-button-f{left:18%}                  /* on the bar: mid-left */
.nav-button-b{right:calc(100% + 72px)}   /* off the logo: its left edge */
.nav-button-c{left:calc(100% + 72px)}    /* off the logo: its right edge */
.nav-button-e{right:calc(100% + 80px)}   /* off the cart cluster: just before it */
/* Above this the primary menu takes over the left column, so the
   mid-left button would sit on that text — it only belongs in the gap
   the hamburger leaves behind. */
@media (min-width:1401px){
  .nav-button-f{display:none}
}
/* Below ~900px the logo-to-cart gap is too narrow to hold both of the
   right-hand buttons without them touching — drop the outer one. */
@media (max-width:900px){
  .nav-button-e{display:none}
}
@media (max-width:620px){
  .nav-button{width:12px;height:12px;margin-top:-6px}
  .nav-button-a{left:6px}
  .nav-button-f{left:34px}
  .nav-button-b{right:calc(100% + 4px)}
  .nav-button-c{left:calc(100% + 4px)}
}
.nav-inner{
  /* Wider than the content sections' own --maxw on purpose: with the logo
     fixed in the centre column, both side columns are forced to the SAME
     width as each other, sized by whichever is bigger — so the six-item
     link list needs real room on its own side or it runs into the logo. */
  max-width:1560px;margin:0 auto;height:76px;
  display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:100%;
  align-items:center;column-gap:18px;
}
/* Logo sits dead-center of the bar regardless of how wide the nav links or
   cart/menu icons on either side are. All three get an explicit row: with
   only grid-column set, the logo landing in the *middle* column while the
   others sit either side of it confuses sparse auto-placement into pushing
   them onto a second, overflowing row — this pins everything to row 1. */
/* the logo pill as a sewn-on patch — a stitched trim instead of a plain
   line, like an embroidered badge appliquéd to the header. */
.brand{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:11px;grid-row:1;grid-column:2;justify-self:center;
  background:var(--paper);border:2px dashed var(--sage-deep);border-radius:var(--r-pill);
  outline:2px solid var(--paper);outline-offset:2px;
  padding:8px 20px 8px 10px;
  box-shadow:3px 4px 8px rgba(74,58,36,.28), inset 0 0 5px rgba(74,58,36,.06);
}
.brand::before{
  content:'';position:absolute;inset:3px;border:1px dashed var(--gold-line);
  border-radius:var(--r-pill);pointer-events:none;
}
.nav-links{grid-row:1;grid-column:1;justify-self:start;min-width:0;z-index:2}
.nav-actions{grid-row:1;grid-column:3;justify-self:end;z-index:2}
.brand-mark{width:40px;height:40px;flex:0 0 auto;object-fit:contain}
.brand-word{
  font-family:var(--display);font-size:21px;letter-spacing:0;
  color:var(--sage-deep);font-weight:700;
}

/* ─── straight-line links + dropdowns (desktop) ─── */
.nav-list{display:flex;align-items:center;gap:clamp(6px,.9vw,16px);list-style:none}
.nav-list > li{position:relative;flex-shrink:0}
.nav-list a{
  display:flex;align-items:center;gap:3px;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:var(--ink-2);position:relative;padding:8px 2px;white-space:nowrap;
  transition:color .25s var(--ease);
}
.nav-list > li > a::after{
  content:'';position:absolute;left:3px;right:3px;bottom:3px;height:1px;background:var(--sage);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.nav-list a:hover{color:var(--ink)}
.nav-list > li > a:hover::after{transform:scaleX(1)}
.nav-list .current-menu-item > a{color:var(--sage)}

.nav-caret{
  width:6px;height:6px;flex:0 0 auto;margin-top:-2px;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg);transition:transform .3s var(--ease);opacity:.7;
}
.nav-list > li:hover > a .nav-caret{transform:rotate(225deg);margin-top:2px}

/* Dropdown card — hidden until the item is hovered or focused. Scoped to
   .nav-list so none of this leaks into the mobile drawer's accordion,
   which reuses the same "sub-menu" class WordPress gives every nested
   list but shows/hides itself a completely different way (max-height). */
.nav-list .sub-menu{
  position:absolute;top:100%;left:0;margin-top:10px;min-width:200px;
  background:var(--paper);border:var(--rule);border-radius:var(--r-md);
  box-shadow:var(--shadow-lift);padding:10px;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.nav-list > li:last-child > .sub-menu{left:auto;right:0}
.nav-list > li:hover > .sub-menu,
.nav-list > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-list .sub-menu a{
  padding:9px 11px;border-radius:var(--r-sm);
  font-size:11.5px;letter-spacing:.04em;text-transform:none;font-weight:600;
  color:var(--ink);white-space:nowrap;
}
.nav-list .sub-menu > li > a:hover{background:var(--paper-2);color:var(--sage-deep)}
.nav-list .sub-menu > li > a::after{display:none}

/* "Shop" opens a two-column mega panel — For a Boy / For a Girl side by
   side, each a heading over its own Clothes/Accessories list. */
.nav-list .has-mega > .sub-menu{display:flex;gap:26px;padding:18px;min-width:300px}
.nav-list .has-mega > .sub-menu > li{flex:1 0 130px}
.nav-list .has-mega > .sub-menu > li > a{
  font-family:var(--display);font-size:13.5px;text-transform:none;letter-spacing:0;
  font-weight:700;color:var(--sage-deep);padding:2px 6px 10px;margin-bottom:6px;
  border-bottom:1px solid var(--gold-line);border-radius:0;
}
.nav-list .has-mega > .sub-menu > li > a:hover{background:none;color:var(--sage)}
.nav-list .has-mega .sub-menu .sub-menu{
  position:static;opacity:1;visibility:visible;transform:none;margin-top:2px;
  box-shadow:none;border:0;padding:0;background:none;
}

.nav-actions{position:relative;display:flex;align-items:center;gap:14px}
.nav-cart{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:var(--rule);color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease)}
.nav-cart svg{width:19px;height:19px}
.nav-cart:hover{background:var(--sage);color:var(--paper);border-color:var(--sage)}
.cart-count{
  position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;border-radius:9px;background:var(--clay);color:#fff;
  font-family:var(--mono);font-size:9.5px;line-height:1;
}

/* ─── hamburger: three lines that cross into an X ─── */
.nav-toggle{
  display:none;width:38px;height:38px;border-radius:50%;border:var(--rule);
  align-items:center;justify-content:center;gap:3.5px;flex-direction:column;
  position:relative;z-index:151;background:var(--paper-2);
}
.nav-toggle span{display:block;width:16px;height:1.6px;border-radius:1px;background:var(--ink);transition:transform .32s var(--ease),opacity .2s var(--ease),width .32s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.1px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;width:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.1px) rotate(-45deg)}

/* ─── mobile drawer: slides in from the left, dims the page behind it ─── */
body.menu-open{overflow:hidden}
.mobile-nav-backdrop{
  position:fixed;inset:0;z-index:149;background:rgba(74,58,36,.4);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.mobile-nav-backdrop.open{opacity:1;visibility:visible}

.mobile-nav{
  position:fixed;top:0;left:0;bottom:0;z-index:150;
  width:min(320px,84vw);background:var(--paper);
  box-shadow:var(--shadow-lift);overflow-y:auto;
  padding:92px 26px 32px;
  transform:translateX(-100%);
  transition:transform .42s var(--ease),visibility 0s linear .42s;
  visibility:hidden;
}
.mobile-nav.open{
  transform:translateX(0);visibility:visible;
  transition:transform .42s var(--ease),visibility 0s linear 0s;
}

.mobile-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.mobile-list li{border-bottom:1px solid rgba(32,38,28,.07)}
.mobile-list li:last-child{border-bottom:0}
/* Every level needs its own positioning context — not just the top one —
   or a nested item's caret button falls back to its nearest positioned
   ancestor (Shop's own row) and lands exactly on top of it. */
.mobile-list li{position:relative}
.mobile-list a{
  display:block;padding:13px 44px 13px 0;
  font-family:var(--display);font-size:18px;color:var(--ink);
}
.mobile-list .sub-menu{
  list-style:none;max-height:0;overflow:hidden;padding-left:14px;
  transition:max-height .4s var(--ease);
}
.mobile-list li.sub-open > .sub-menu{max-height:900px}
.mobile-list .sub-menu a{
  font-family:var(--body);font-size:14.5px;font-weight:600;color:var(--ink-2);
  padding:11px 44px 11px 0;
}
.mobile-list .sub-menu .sub-menu{padding-left:14px}
.mobile-list .sub-menu .sub-menu a{font-size:13.5px;font-weight:500}

.mobile-caret-btn{
  position:absolute;top:0;right:0;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;
}
.mobile-caret{
  width:8px;height:8px;border-right:1.6px solid var(--ink-2);border-bottom:1.6px solid var(--ink-2);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.mobile-list li.sub-open > .mobile-caret-btn .mobile-caret{transform:rotate(225deg)}

/* ══════════════ HERO ══════════════ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:210px var(--pad) 34px;
}
.hero-aura{
  position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);
  width:min(150vw,1080px);aspect-ratio:1;border-radius:50%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle,rgba(190,218,168,.55) 0%,rgba(224,169,78,.22) 40%,transparent 68%),
    radial-gradient(52% 52% at 64% 66%,rgba(255,127,110,.15) 0%,transparent 70%),
    radial-gradient(44% 44% at 22% 70%,rgba(110,195,224,.18) 0%,transparent 72%);
  animation:aura 9s ease-in-out infinite;
}
/* two soft blobs drifting behind the hero copy — organic, faceless, playful */
.hero::before,.hero::after{
  content:'';position:absolute;z-index:-3;pointer-events:none;border-radius:42% 58% 63% 37%/45% 40% 60% 55%;
}
.hero::before{
  width:280px;height:260px;left:-60px;top:14%;
  background:var(--sage-soft);opacity:.4;
  animation:blobFloat 12s ease-in-out infinite;
}
.hero::after{
  width:220px;height:210px;right:-50px;bottom:12%;
  background:var(--paper-3);opacity:.6;
  animation:blobFloat 14s ease-in-out infinite reverse;
}
@keyframes blobFloat{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(24px,-32px) rotate(10deg)}}
@media (prefers-reduced-motion:reduce){.hero::before,.hero::after{animation:none}}
@keyframes aura{0%,100%{opacity:.72;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}

.motes{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.mote{
  position:absolute;border-radius:50%;background:var(--gold);opacity:0;
  box-shadow:0 0 6px rgba(176,141,91,.55);
  animation:drift linear infinite;
}
@keyframes drift{
  0%{transform:translateY(0) translateX(0) scale(.6);opacity:0}
  14%{opacity:.55}
  70%{opacity:.3}
  100%{transform:translateY(-78vh) translateX(var(--dx,18px)) scale(1);opacity:0}
}
@media (prefers-reduced-motion:reduce){.mote,.hero-aura{animation:none}}

.hero-inner{max-width:var(--maxw);margin:0 auto;width:100%}
.hero-title{margin-bottom:26px;font-weight:500}
.hero-title .line{display:block}
/* the closing line steps down in size and into sage, so the two
   milestones above carry the weight and this reads as the promise */
.hero-title .ht-soft{font-size:.7em;color:var(--sage-deep);margin-top:.18em;letter-spacing:-.005em}

/* "TINY" in blue, "TOES" in pink — set in smaller capitals so the pair
   reads as a label-like stamp inside the headline, with two baby
   footprints (one of each colour) stepping up after it. The blue and
   pink are deepened from --sky/--blush, which are too pale for type. */
.ht-toes{font-size:.78em;font-weight:800;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.ht-tiny{color:#2F86B3}
.ht-toe{color:#D14B7F}
.ht-steps{display:inline-flex;align-items:flex-end;gap:.12em;margin-left:.24em;vertical-align:-.04em}
.ht-foot{width:.46em;height:.66em}
.ht-foot-l{color:#2F86B3;transform:scaleX(-1) translateY(.08em) rotate(14deg)}
.ht-foot-r{color:#D14B7F;transform:translateY(-.3em) rotate(12deg)}

.ht-under{font-weight:700;color:var(--sage-deep);white-space:nowrap}

/* a sprout growing out of "grow" — the same leaf pair as the logo mark */
.ht-grow{position:relative;font-weight:700}
.ht-sprout{position:absolute;right:-.4em;top:-.46em;width:.62em;height:.62em;color:var(--sage);transform:rotate(14deg)}

/* ══ WHY EMBRYO — a clothesline of garment swing-tags ══
   Picks up the header's sewn-fabric story: a twisted rope strung across
   the hero, three swing tags hung off it by wooden clothespins, each
   with a metal eyelet, a stitched border and its own illustration. They
   sway on the line at their own pace; hovering one holds it still and
   lifts it toward you. */
.hero-inner{position:relative;z-index:1}
.why{margin-top:clamp(110px,18vh,190px)}
/* same sewn-on patch as the header logo: dashed sage stitch, a paper
   ring just outside it, a fine gold stitch inside, lifted by a shadow */
.why-title,.patch-title{
  position:relative;display:table;margin:0 auto;
  font-size:clamp(28px,2.8vw,40px);font-weight:700;text-align:center;
  padding:10px 34px 8px;
  background:var(--paper);border:2px dashed var(--sage-deep);border-radius:var(--r-pill);
  outline:2px solid var(--paper);outline-offset:2px;
  box-shadow:3px 4px 8px rgba(74,58,36,.28),inset 0 0 5px rgba(74,58,36,.06);
}
.why-title::before,.patch-title::before{
  content:'';position:absolute;inset:3px;border:1px dashed var(--gold-line);
  border-radius:var(--r-pill);pointer-events:none;
}
.why-title span,.patch-title span{color:var(--sage-deep)}
.why-title i{display:inline-block;font-style:normal;color:var(--clay);transform:rotate(12deg);margin-left:.04em}

.why-line{position:relative;margin-top:clamp(8px,1.6vh,18px)}
/* wooden pegs the rope is tied off to at either end */
.why-line::before,.why-line::after{
  content:'';position:absolute;top:1px;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#E3C394,#9E7A48);z-index:1;
}
.why-line::before{left:-7px}
.why-line::after{right:-7px}
.why-rope{position:absolute;left:0;top:0;width:100%;height:60px;overflow:visible;pointer-events:none}
.why-rope path{fill:none;stroke:#B08D5B;stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.why-rope .twist{stroke:#EAD7B4;stroke-width:1.1;stroke-dasharray:3 5}

.why-tags{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,40px)}
/* --sag is how far the rope has dropped at this tag's column, so each
   clothespin lands exactly on the curve (the rope dips most mid-span) */
.why-item{--sag:25px;position:relative;display:flex;justify-content:center}
.why-item-2{--sag:39px}
.why-item-1{--tag-bg:#DDEFF7;--tag-ink:#2F86B3}
.why-item-2{--tag-bg:#FBE3EC;--tag-ink:#C2437A}
.why-item-3{--tag-bg:#E4EFD9;--tag-ink:var(--sage-deep)}

.why-tag{
  position:relative;display:block;width:min(290px,100%);
  padding-top:calc(var(--sag) + 40px);
  transform-origin:50% var(--sag);
  animation:whySway 6.4s ease-in-out infinite;
}
.why-item-1 .why-tag{animation-duration:6.2s;animation-delay:-1.3s}
.why-item-2 .why-tag{animation-duration:7.4s;animation-delay:-4.1s}
.why-item-3 .why-tag{animation-duration:5.8s;animation-delay:-2.6s}
.why-tag:hover,.why-tag:focus-visible{animation-play-state:paused}
@keyframes whySway{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}

.why-pin{position:absolute;left:50%;top:calc(var(--sag) - 18px);width:20px;height:46px;margin-left:-10px;z-index:3;filter:drop-shadow(0 2px 2px rgba(74,58,36,.3))}
.why-twine{position:absolute;left:50%;top:calc(var(--sag) + 22px);width:26px;height:52px;margin-left:-13px;z-index:2}
.why-twine path{fill:none;stroke:#B08D5B;stroke-width:1.6;stroke-linecap:round}

/* drop-shadow (not box-shadow) because the tag is cut with clip-path,
   which would slice a box-shadow off along the chamfered corners */
.why-body{
  position:relative;z-index:1;display:block;
  filter:drop-shadow(0 10px 14px rgba(74,58,36,.16)) drop-shadow(0 2px 3px rgba(74,58,36,.12));
  transition:transform .45s var(--ease),filter .45s var(--ease);
}
.why-tag:hover .why-body,.why-tag:focus-visible .why-body{
  transform:translateY(-8px);
  filter:drop-shadow(0 22px 26px rgba(74,58,36,.22)) drop-shadow(0 3px 5px rgba(74,58,36,.14));
}
.why-tag:focus-visible{outline:none}
.why-tag:focus-visible .why-body{outline:3px solid var(--tag-ink);outline-offset:6px;border-radius:8px}

/* Each card is a T-shirt, cut to the #whyShirt silhouette: short
   sleeves up top, content sitting in the body. The horizontal padding
   keeps copy inside the body, clear of where the sleeves step in. */
.why-card{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  height:310px;padding:74px 54px 24px;
  background-color:var(--tag-bg);
  background-image:radial-gradient(rgba(255,255,255,.6) 1px,transparent 1.4px);
  background-size:5px 5px;
  clip-path:url(#whyShirt);
}
.why-shirt-defs{position:absolute;width:0;height:0;overflow:hidden}
.why-stitch{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.why-stitch path{fill:none;stroke:var(--tag-ink);stroke-width:1.6;stroke-dasharray:6 5;opacity:.5}
/* the woven label inside the collar — where the twine is tied */
.why-neck{
  position:absolute;left:50%;top:30px;width:26px;height:15px;margin-left:-13px;border-radius:2px;
  background:var(--paper);box-shadow:inset 0 0 0 1px rgba(64,51,42,.14);
}
.why-neck::after{content:'';position:absolute;inset:3px;border:1px dashed var(--tag-ink);opacity:.45}
.why-ico{width:60px;height:60px;color:var(--tag-ink);margin-bottom:12px;transition:transform .45s var(--ease)}
.why-tag:hover .why-ico{transform:scale(1.08) rotate(-4deg)}
.why-name{font-family:var(--display);font-weight:800;font-size:20px;line-height:1.15;color:var(--tag-ink);margin-bottom:8px}
.why-text{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.why-go{margin-top:12px;display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:700;font-size:14px;color:var(--tag-ink)}
.why-go svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.why-tag:hover .why-go svg{transform:translateX(5px)}

/* Stacked: the long line can't reach, so each tag gets its own short
   length of rope to hang from. */
@media (max-width:900px){
  .why-tags{grid-template-columns:1fr;gap:26px}
  .why-rope,.why-line::before,.why-line::after{display:none}
  .why-item,.why-item-2{--sag:14px}
  .why-item::before{
    content:'';position:absolute;top:var(--sag);left:50%;width:220px;height:3px;margin-left:-110px;
    border-radius:2px;background:#B08D5B;
  }
}
@media (prefers-reduced-motion:reduce){.why-tag{animation:none}}

/* ══ FOR A GIRL / FOR A BOY — a fighting-game select screen ══
   Two full-size link panels stacked on top of each other and cut apart
   by one diagonal; --split is where that diagonal crosses the middle of
   the section. Hovering a side pushes the split toward the other one,
   so the chosen panel grows the way a select screen does. Registered
   with @property so the cut itself animates, not just jumps. */
@property --split{syntax:'<number>';inherits:true;initial-value:50}
.vs{
  --split:50;
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:clamp(90px,14vh,160px);
  height:clamp(560px,46vw,660px);background:#2A1A2C;
  transition:--split .65s var(--ease);
}
.vs:has(.vs-girl:hover),.vs:has(.vs-girl:focus-visible){--split:57}
.vs:has(.vs-boy:hover),.vs:has(.vs-boy:focus-visible){--split:43}

.vs-side{position:absolute;inset:0;z-index:1;display:block;color:#fff;transition:filter .5s var(--ease)}
.vs-girl{
  background:radial-gradient(60% 85% at 24% 58%,#D0548A 0%,#9A2B5C 48%,#5E1335 100%);
  clip-path:polygon(0 0,calc((var(--split) + 8) * 1%) 0,calc((var(--split) - 8) * 1%) 100%,0 100%);
}
.vs-boy{
  background:radial-gradient(60% 85% at 76% 58%,#3D8EC6 0%,#1E5B8E 48%,#0F3354 100%);
  clip-path:polygon(calc((var(--split) + 8) * 1%) 0,100% 0,100% 100%,calc((var(--split) - 8) * 1%) 100%);
}
/* speed lines, raked toward the slash from each side */
.vs-side::before{content:'';position:absolute;inset:0;pointer-events:none}
.vs-girl::before{background:repeating-linear-gradient(116deg,rgba(255,255,255,.07) 0 2px,transparent 2px 26px)}
.vs-boy::before{background:repeating-linear-gradient(64deg,rgba(255,255,255,.07) 0 2px,transparent 2px 26px)}
.vs:has(.vs-girl:hover) .vs-boy,.vs:has(.vs-boy:hover) .vs-girl{filter:brightness(.7) saturate(.85)}

.vs-word{
  position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;
  font-family:var(--display);font-weight:800;font-size:clamp(130px,17vw,250px);line-height:1;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.14);
}
.vs-girl .vs-word{left:1.5%}
.vs-boy .vs-word{right:1.5%}

.vs-spark{position:absolute;color:#fff;opacity:.2;pointer-events:none}
.vs-girl .vs-spark-1{left:9%;bottom:14%;width:34px;height:34px;transform:rotate(-14deg)}
.vs-girl .vs-spark-2{left:40%;top:12%;width:44px;height:44px;transform:rotate(12deg)}
.vs-girl .vs-spark-3{left:19%;top:56%;width:22px;height:22px}
.vs-boy .vs-spark-1{right:9%;bottom:14%;width:34px;height:34px;transform:rotate(14deg)}
.vs-boy .vs-spark-2{right:40%;top:12%;width:44px;height:44px;transform:rotate(-12deg)}
.vs-boy .vs-spark-3{right:19%;top:56%;width:22px;height:22px}

.vs-copy{position:absolute;top:clamp(56px,11%,92px);max-width:320px}
.vs-girl .vs-copy{left:var(--pad)}
.vs-boy .vs-copy{right:var(--pad);text-align:right}
.vs-label{display:block;margin-bottom:10px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.78}
.vs-name{display:block;font-family:var(--display);font-weight:800;font-size:clamp(40px,4.4vw,66px);line-height:1;text-shadow:0 4px 18px rgba(0,0,0,.25)}
.vs-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:13px 22px;border-radius:var(--r-pill);
  background:#fff;font-family:var(--display);font-weight:700;font-size:15px;
  box-shadow:0 8px 20px rgba(0,0,0,.2);transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.vs-girl .vs-cta{color:#8E2453}
.vs-boy .vs-cta{color:#1B4F7E}
.vs-cta svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.vs-side:hover .vs-cta{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.28)}
.vs-side:hover .vs-cta svg{transform:translateX(4px)}
/* the panel itself is clipped, so a ring on it would be cut off — show
   keyboard focus on the button inside instead */
.vs-side:focus-visible{outline:none}
.vs-side:focus-visible .vs-cta{outline:3px solid #fff;outline-offset:4px}

.vs-kid-wrap{position:absolute;bottom:0;width:clamp(210px,20vw,290px);transform:translateX(-50%);transition:transform .6s var(--ease)}
.vs-girl .vs-kid-wrap{left:29%}
.vs-boy .vs-kid-wrap{left:71%}
.vs-side:hover .vs-kid-wrap{transform:translateX(-50%) translateY(-8px) scale(1.05)}
.vs-kid{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 22px rgba(0,0,0,.28));animation:vsBob 3.2s ease-in-out infinite}
.vs-boy .vs-kid{animation-delay:-1.6s}
@keyframes vsBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* the slash: a thin lit stripe along the same diagonal, glowing */
.vs-slash-wrap{position:absolute;inset:0;z-index:2;pointer-events:none;filter:drop-shadow(0 0 10px rgba(255,236,190,.9))}
.vs-slash{
  position:absolute;inset:0;background:linear-gradient(180deg,#FFF7E4,#FFE2A3 50%,#FFF7E4);
  clip-path:polygon(calc((var(--split) + 8) * 1% - 4px) 0,calc((var(--split) + 8) * 1% + 4px) 0,calc((var(--split) - 8) * 1% + 4px) 100%,calc((var(--split) - 8) * 1% - 4px) 100%);
}

/* where a VS would be: an impact starburst behind a stitched patch */
.vs-burst{
  position:absolute;z-index:2;left:calc(var(--split) * 1%);top:50%;width:460px;height:460px;margin:-230px 0 0 -230px;
  border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,240,205,.3) 0 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 32%,transparent 70%);mask:radial-gradient(circle,#000 32%,transparent 70%);
  animation:vsSpin 40s linear infinite;
}
@keyframes vsSpin{to{transform:rotate(1turn)}}
.vs-mid{
  position:absolute;z-index:3;left:calc(var(--split) * 1%);top:50%;
  width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;
  background:var(--paper);border:2px dashed var(--sage-deep);outline:3px solid var(--paper);outline-offset:3px;
  box-shadow:0 16px 36px rgba(0,0,0,.38),inset 0 0 6px rgba(74,58,36,.08);
  transition:transform .45s var(--ease);
}
.vs-mid::before{content:'';position:absolute;inset:5px;border:1px dashed var(--gold-line);border-radius:50%;pointer-events:none}
.vs-mid:hover,.vs-mid:focus-visible{transform:scale(1.07)}
.vs-mid-ico{width:36px;height:36px;color:var(--sage-deep);margin-bottom:4px}
.vs-mid-top{max-width:11ch;font-family:var(--display);font-weight:800;font-size:19px;line-height:1.08;color:var(--ink)}
/* half pink, half blue — made for either */
.vs-q{background:linear-gradient(90deg,#D14B7F 50%,#2F86B3 50%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vs-mid-sub{margin-top:4px;max-width:15ch;font-size:12px;line-height:1.35;color:var(--ink-2)}
.vs-mid-go{margin-top:8px;font-family:var(--display);font-weight:700;font-size:13px;color:var(--clay)}

/* Stacked: the cut turns horizontal — girl above, boy below — with the
   badge still sitting on the slash. */
@media (max-width:760px){
  .vs{height:auto;min-height:980px}
  .vs-girl{clip-path:polygon(0 0,100% 0,100% 45%,0 55%)}
  .vs-boy{clip-path:polygon(0 55%,100% 45%,100% 100%,0 100%)}
  .vs-slash{clip-path:polygon(0 calc(55% - 4px),100% calc(45% - 4px),100% calc(45% + 4px),0 calc(55% + 4px))}
  .vs-mid,.vs-burst{left:50%}
  .vs:has(.vs-boy:hover) .vs-girl,.vs:has(.vs-girl:hover) .vs-boy{filter:none}
  .vs-word{font-size:112px}
  .vs-girl .vs-word{top:18%}
  .vs-boy .vs-word{top:auto;bottom:6%;transform:none}
  .vs-copy{max-width:190px}
  .vs-name{font-size:40px}
  .vs-girl .vs-copy{top:48px}
  .vs-boy .vs-copy{top:auto;bottom:56px}
  .vs-kid-wrap,.vs-side:hover .vs-kid-wrap{width:170px;transform:none}
  .vs-girl .vs-kid-wrap{left:auto;right:3%;bottom:auto;top:110px}
  .vs-boy .vs-kid-wrap{left:3%;bottom:10px}
  .vs-girl .vs-spark-2,.vs-boy .vs-spark-2{display:none}
}
@media (prefers-reduced-motion:reduce){
  .vs,.vs-kid-wrap,.vs-mid{transition:none}
  .vs-kid,.vs-burst{animation:none}
}

/* ══ COMBO DEALS — every combo is a wrapped gift box ══
   A coloured lid tied with a gold ribbon and bow, the same ribbon
   running down the box front, and the product on a cream card tucked
   into it. Hovering lifts the lid open: a warm glow and a few stars
   escape from inside. */
.combos{position:relative;isolation:isolate;padding:clamp(110px,14vh,170px) var(--pad) clamp(90px,11vh,140px)}
.combos-head{text-align:center;margin-bottom:clamp(64px,8vh,96px)}
.combos-sub{margin-top:18px;font-size:clamp(15px,1.2vw,17px);color:var(--ink-2)}

.combo-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);align-items:start}
.combo-1{--box:#8DB378;--lid:#4C6E3C}
.combo-2{--box:#E28AAB;--lid:#B8406F}
.combo-3{--box:#74B3DA;--lid:#2F74A6}
.combo{position:relative;padding-top:30px}

.combo-lid{
  position:relative;z-index:3;display:flex;align-items:center;height:62px;margin:0 -10px;padding:0 22px;
  border-radius:16px 16px 8px 8px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--lid) 80%,#fff),var(--lid));
  box-shadow:0 8px 14px -6px rgba(0,0,0,.35);
  transform-origin:16% 100%;transition:transform .55s var(--ease);
}
.combo-lid::before,.combo-box::before{
  content:'';position:absolute;top:0;bottom:0;left:50%;width:32px;margin-left:-16px;
  background:linear-gradient(90deg,#D39A45,#F3C878 50%,#D39A45);
}
/* stitching along both edges of the ribbon */
.combo-lid::after{
  content:'';position:absolute;top:5px;bottom:5px;left:50%;width:22px;margin-left:-11px;
  border-left:1.5px dashed rgba(122,82,30,.45);border-right:1.5px dashed rgba(122,82,30,.45);
}
.combo-tag{position:relative;z-index:1;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.combo-bow{position:absolute;z-index:2;left:50%;top:-32px;width:96px;height:56px;margin-left:-48px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.2))}

.combo-box{
  position:relative;z-index:2;margin-top:-4px;padding:26px 18px 18px;border-radius:6px 6px 26px 26px;
  background:var(--box);box-shadow:0 18px 34px -18px rgba(74,58,36,.45);
  transition:box-shadow .5s var(--ease);
}
.combo-inner{position:relative;z-index:1;padding:14px 14px 20px;border-radius:18px;background:var(--paper);box-shadow:0 4px 12px rgba(74,58,36,.12)}

.combo-glow{
  position:absolute;z-index:1;left:8%;right:8%;top:24px;height:74px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,226,150,.95),rgba(255,226,150,0));
  opacity:0;transition:opacity .5s var(--ease);
}
.combo-spark{position:absolute;z-index:1;top:44px;width:16px;height:16px;color:#F2C14E;opacity:0;pointer-events:none;transition:transform .6s var(--ease),opacity .5s var(--ease)}
.combo-spark-1{left:26%}
.combo-spark-2{left:50%;margin-left:-8px}
.combo-spark-3{right:26%}
.combo:hover .combo-lid,.combo:focus-within .combo-lid{transform:translateY(-16px) rotate(-4deg)}
.combo:hover .combo-glow,.combo:focus-within .combo-glow,
.combo:hover .combo-spark,.combo:focus-within .combo-spark{opacity:1}
.combo:hover .combo-spark-1{transform:translate(-8px,-34px) rotate(-20deg)}
.combo:hover .combo-spark-2{transform:translateY(-50px)}
.combo:hover .combo-spark-3{transform:translate(8px,-30px) rotate(20deg)}
.combo:hover .combo-box{box-shadow:0 28px 46px -18px rgba(74,58,36,.55)}

.combo-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:#F2EADB}
.combo-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.combo:hover .combo-media img{transform:scale(1.05)}
.combo-media-soon{display:grid;place-items:center;background:repeating-linear-gradient(135deg,#F4ECDD 0 12px,#EFE5D3 12px 24px)}
.combo-media-soon svg{width:88px;height:88px;color:var(--lid);opacity:.55}
.combo-seal{
  position:absolute;top:4px;right:4px;z-index:2;display:grid;place-items:center;width:74px;height:74px;border-radius:50%;
  background:var(--clay);color:#fff;text-align:center;
  font-family:var(--display);font-weight:800;font-size:11px;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;
  transform:rotate(12deg);box-shadow:0 6px 14px rgba(0,0,0,.2);
}
.combo-seal::before{content:'';position:absolute;inset:4px;border:1.5px dashed rgba(255,255,255,.75);border-radius:50%}

.combo-body{padding:18px 6px 0}
.combo-name{font-size:22px;font-weight:700;line-height:1.2}
.combo-name a{color:inherit}
.combo-text{margin-top:8px;min-height:4.65em;font-size:14px;line-height:1.55;color:var(--ink-2)}
.combo-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.combo-price{font-family:var(--display);font-weight:800;font-size:22px;color:var(--ink)}
.combo-price del{margin-right:6px;font-size:.7em;font-weight:500;color:var(--ink-3)}
.combo-price ins{text-decoration:none}
.combo-price-soon{font-size:14px;letter-spacing:.04em;color:var(--ink-3)}
.combo-add{
  display:inline-flex;align-items:center;padding:11px 18px;border-radius:var(--r-pill);white-space:nowrap;
  background:var(--lid);color:#fff;font-family:var(--display);font-weight:700;font-size:14px;
  transition:transform .3s var(--ease),filter .3s var(--ease);
}
.combo-add:hover{transform:translateY(-2px);filter:brightness(1.1)}
.is-soon .combo-add{background:transparent;color:var(--lid);box-shadow:inset 0 0 0 2px var(--lid)}

/* ══ MOST POPULAR — editorial arches ══
   Each product in an arched frame with a stitched inner edge, a large
   outlined rank that fills in on hover, and a round add button riding
   the frame's lower edge. The middle card drops lower for a staggered,
   magazine-page rhythm rather than a flat row. */
.popular{position:relative;isolation:isolate;padding:clamp(90px,12vh,150px) var(--pad) clamp(140px,17vh,210px)}
.popular::before{
  content:'';position:absolute;z-index:-1;left:50%;top:58%;width:min(92vw,960px);height:560px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(190,218,168,.38),transparent);
}
.popular-head{max-width:var(--maxw);margin:0 auto clamp(56px,7vh,84px);display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:24px}
.popular-kicker{margin-bottom:14px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--clay)}
.popular-title{font-size:clamp(44px,5.4vw,78px);font-weight:500;line-height:1}
.popular-title span{font-weight:800;color:var(--sage-deep)}
.popular-all{
  display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--r-pill);
  font-family:var(--display);font-weight:700;font-size:15px;color:var(--sage-deep);
  box-shadow:inset 0 0 0 2px var(--sage-soft);transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.popular-all svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.popular-all:hover{background:var(--sage-deep);color:var(--paper);box-shadow:inset 0 0 0 2px var(--sage-deep)}
.popular-all:hover svg{transform:translateX(4px)}

.popular-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px)}
.pop-2{transform:translateY(56px)}
.pop-1{--tint:#E6F0DE}
.pop-2{--tint:#F8E3EA}
.pop-3{--tint:#DFEEF6}
.pop-media{position:relative}
.pop-arch{position:relative;display:block}
.pop-frame{
  position:relative;display:block;aspect-ratio:4/5;overflow:hidden;
  border-radius:999px 999px 28px 28px;background:var(--tint);
  box-shadow:0 30px 50px -30px rgba(74,58,36,.45);
}
.pop-frame::after{content:'';position:absolute;inset:12px;border:1.5px dashed rgba(255,255,255,.85);border-radius:999px 999px 20px 20px;pointer-events:none}
.pop-frame img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pop:hover .pop-frame img{transform:scale(1.07)}
.pop-rank{
  position:absolute;left:-4px;bottom:-.36em;pointer-events:none;
  font-family:var(--display);font-weight:800;font-size:clamp(96px,9vw,136px);line-height:1;
  color:transparent;-webkit-text-stroke:2px var(--sage-deep);transition:color .5s var(--ease);
}
.pop:hover .pop-rank{color:var(--sage-deep)}
.pop-add{
  position:absolute;right:20px;bottom:-26px;z-index:2;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:var(--ink);color:var(--paper);box-shadow:0 12px 24px rgba(0,0,0,.25);
  transition:background .3s var(--ease),transform .4s var(--ease);
}
.pop-add svg{width:22px;height:22px;transition:transform .4s var(--ease)}
.pop-add:hover{background:var(--sage-deep);transform:scale(1.08)}
.pop-add:hover svg{transform:rotate(90deg)}
/* indented past the rank numeral that hangs below the frame */
.pop-body{padding:44px 6px 0 clamp(72px,6.6vw,104px)}
.pop-cat{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--clay)}
.pop-name{margin-top:8px;font-size:clamp(20px,1.7vw,24px);font-weight:700;line-height:1.2}
.pop-name a{color:inherit}
.pop-price{display:block;margin-top:10px;font-family:var(--display);font-weight:800;font-size:19px;color:var(--sage-deep)}

.combo-add:focus-visible,.pop-add:focus-visible,.popular-all:focus-visible{outline:3px solid var(--sage-deep);outline-offset:3px}

@media (max-width:900px){
  .combo-grid{grid-template-columns:1fr;max-width:420px;row-gap:56px}
  .popular-grid{grid-template-columns:1fr;max-width:440px;row-gap:64px}
  .pop-2{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .combo-lid,.combo-spark,.combo-media img,.pop-frame img{transition:none}
}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:16px 30px;border-radius:var(--r-pill);
  font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.01em;
  transition:background .32s var(--ease),color .32s var(--ease),border-color .32s var(--ease),transform .32s var(--ease),box-shadow .32s var(--ease);
}
.btn svg{width:17px;height:17px;transition:transform .32s var(--ease)}
.btn-solid{background:var(--sage-deep);color:var(--paper);box-shadow:var(--shadow-soft)}
.btn-solid:hover{background:var(--sage);transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.btn-quiet{border:2px solid var(--sage-soft);color:var(--sage-deep);background:var(--paper)}
.btn-quiet:hover{border-color:var(--sage-deep);background:var(--sage-deep);color:var(--paper);transform:translateY(-3px)}
.btn-quiet:hover svg{transform:translateX(4px)}


/* ══════════════ SECTION SHELL ══════════════ */
.standard,.cats,.shelf,.research,.trust{padding:clamp(72px,10vh,132px) var(--pad);position:relative;overflow:hidden}

/* ══════════════ DECORATION SYSTEM ══════════════
   The rule, once, so every section follows the same recipe:
   - Three sizes only — sm (24–32px), md (40–52px), lg (64–84px) — and every
     section mixes at least two of the three. Never one size repeated.
   - Three blobs per section: two in corners (::before/::after on the
     section itself) plus one real .deco-blob element placed nearer the
     middle — never just corners. A real element rather than a pseudo on
     some child, so it works no matter what that section's inner markup
     looks like (never lands inside a grid and never silently vanishes).
   - Icons/badges sit on a loose grid (corners, edge-middles, a couple of
     quarter-points) so nothing two decorations ever share a spot — blobs
     and icons are kept on separate points with real gaps between them.
   - Everything is z-index:0 behind real content (z-index:1), low opacity,
     and behind the site's own colours — decoration, not content.
   - No footer clutter — the footer stays plain.               */
.standard::before,.standard::after,.cats::before,.cats::after,.shelf::before,.shelf::after,.research::before,.research::after,.trust::before,.trust::after,
.deco-blob{
  content:'';position:absolute;z-index:0;pointer-events:none;
  border-radius:42% 58% 63% 37%/45% 40% 60% 55%;
}
.standard::before{width:220px;height:200px;left:-70px;bottom:-30px;background:var(--sky-soft);opacity:.5;animation:blobFloat 13.5s ease-in-out infinite}
.standard::after{width:170px;height:160px;right:-50px;top:6%;background:var(--blush);opacity:.35;animation:blobFloat 10.5s ease-in-out infinite reverse}
.deco-blob-standard{width:130px;height:120px;left:42%;top:38%;background:var(--butter);opacity:.24;animation:blobFloat 9.5s ease-in-out infinite}

/* Every section keeps the same diagonal — top blob on the right, bottom
   blob on the left — so two sections stacked never put a blob on the
   same side at their shared edge (that's what was colliding before). */
.cats::before{width:240px;height:220px;right:-80px;top:-40px;background:var(--sky-soft);opacity:.55;animation:blobFloat 13s ease-in-out infinite}
.cats::after{width:200px;height:190px;left:-60px;bottom:-30px;background:var(--blush);opacity:.35;animation:blobFloat 15s ease-in-out infinite reverse}
.deco-blob-cats{width:150px;height:140px;left:46%;top:34%;background:var(--sage-soft);opacity:.32;animation:blobFloat 11.5s ease-in-out infinite reverse}

.shelf::before{width:220px;height:200px;right:-70px;top:0;background:var(--butter);opacity:.28;animation:blobFloat 12s ease-in-out infinite}
.shelf::after{width:180px;height:170px;left:-60px;bottom:-40px;background:var(--sage-soft);opacity:.45;animation:blobFloat 16s ease-in-out infinite reverse}
.deco-blob-shelf{width:140px;height:130px;left:44%;top:40%;background:var(--blush);opacity:.26;animation:blobFloat 10s ease-in-out infinite}

.research::before{width:200px;height:190px;right:-60px;top:10%;background:rgba(190,218,168,.16);animation:blobFloat 14.5s ease-in-out infinite}
.research::after{width:160px;height:150px;left:-40px;bottom:6%;background:rgba(224,169,78,.14);animation:blobFloat 11.5s ease-in-out infinite reverse}
.deco-blob-research{width:170px;height:160px;left:46%;top:36%;background:rgba(255,127,110,.12);animation:blobFloat 13s ease-in-out infinite reverse}

.trust::before{width:210px;height:190px;right:-70px;top:10%;background:var(--paper-3);opacity:.55;animation:blobFloat 14s ease-in-out infinite}
.trust::after{width:170px;height:160px;left:-50px;bottom:0;background:var(--sky-soft);opacity:.4;animation:blobFloat 11s ease-in-out infinite reverse}
.deco-blob-trust{width:130px;height:120px;left:44%;top:38%;background:var(--butter);opacity:.26;animation:blobFloat 9s ease-in-out infinite}

.standard > *,.cats > *,.shelf > *,.research > *,.trust > *,.combos > *,.popular > *{position:relative;z-index:1}
/* the decoration itself is a direct child too — reassert it stays behind */
.deco-blob,.trinket,.trinket-badge{position:absolute!important;z-index:0!important}
.deco-blob{display:block!important}
@media (prefers-reduced-motion:reduce){
  .standard::before,.standard::after,.cats::before,.cats::after,.shelf::before,.shelf::after,.research::before,.research::after,.trust::before,.trust::after,
  .deco-blob{animation:none}
}

/* ── trinkets: faceless baby-object icons, a quiet background layer —
   always behind and lighter than real content, never competing with it.
   Motion is the one thing that should read clearly: a big, slow drift. ── */
.trinket{
  position:absolute;z-index:0;pointer-events:none;
  fill:currentColor;stroke:none;
  animation:trinketFloat 8s ease-in-out infinite;
}
/* Double the old sizes. Opacity rides on the tier so the biggest ones
   stay the faintest — a 148px icon at the small tier's opacity would
   start competing with the copy in front of it. */
.tk-sm{width:72px;height:72px;opacity:.2}
.tk-md{width:92px;height:92px;opacity:.17}
.tk-lg{width:148px;height:148px;opacity:.13}
/* Four different drifts, not one — a single shared keyframe made every
   icon on the page rise and fall on the same path, which read as a row
   of things marching in step rather than scattered objects floating. */
@keyframes trinketFloat{
  0%,100%{transform:translateY(0) rotate(-7deg)}
  50%{transform:translateY(-34px) rotate(7deg)}
}
@keyframes tkDrift{
  0%,100%{transform:translate(0,0) rotate(4deg)}
  50%{transform:translate(22px,-26px) rotate(-8deg)}
}
@keyframes tkSway{
  0%,100%{transform:translate(0,0) rotate(-5deg)}
  50%{transform:translate(-24px,-12px) rotate(6deg)}
}
@keyframes tkBob{
  0%,100%{transform:translateY(0) rotate(9deg)}
  50%{transform:translateY(-18px) rotate(-3deg)}
}
@keyframes tkTilt{
  0%,100%{transform:translateY(-6px) rotate(-12deg)}
  50%{transform:translateY(-28px) rotate(10deg)}
}
/* four stops instead of two, so this one loops round rather than
   retracing its own path */
@keyframes tkOrbit{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(16px,-14px) rotate(6deg)}
  50%{transform:translate(0,-28px) rotate(-4deg)}
  75%{transform:translate(-16px,-14px) rotate(8deg)}
}

/* ── one shared placement grid instead of per-section coordinates.
   Twelve slots in mirrored pairs (odd = left, even = right), so every
   section carries the same count in the same places and the site reads
   evenly decorated rather than crowded here and bare there. Colour,
   size tier and drift timing all ride on the slot, which keeps each
   mirrored pair matched. ── */
/* Position comes inline from embryo_decor(), which divides each section
   into equal bands — that's what keeps the spacing even whatever a
   section's height. These six classes only carry the look: size,
   weight and colour, cycled by row so a mirrored pair always matches.
   The drift (path, speed, phase, easing) is rolled per element in PHP
   and also arrives inline, so no two on the page move alike. */
.tp-1{width:148px;height:148px;opacity:.23;color:var(--sage-deep)}
.tp-2{width:92px;height:92px;opacity:.21;color:var(--clay)}
.tp-3{width:72px;height:72px;opacity:.19;color:var(--gold)}
.tp-4{width:148px;height:148px;opacity:.23;color:var(--sky)}
.tp-5{width:92px;height:92px;opacity:.21;color:var(--sage)}
.tp-6{width:72px;height:72px;opacity:.19;color:var(--blush)}

/* research runs on forest green — same grid, pale ink instead */
.research .trinket{color:#FBF1E1;opacity:.15}
.research .trinket-badge{color:#FBF1E1;opacity:.13}

/* decorative text stamps — same idea as the icons, just typographic;
   still just words, nothing animate. */
.trinket-badge{
  position:absolute;z-index:0;pointer-events:none;
  font-family:var(--display);font-weight:700;white-space:nowrap;
  color:var(--sage-deep);opacity:.16;
  animation:trinketFloat 12s ease-in-out infinite;
}
/* two badge slots per section, mirrored on the same band */
.tpb-1{left:5%;top:41%;font-size:40px;color:var(--clay)}
.tpb-2{right:5%;top:62%;font-size:40px;color:var(--sky)}

/* !important because the drift arrives as an inline style, which would
   otherwise outrank this */
@media (prefers-reduced-motion:reduce){.trinket,.trinket-badge{animation:none!important}}
@media (max-width:900px){
  .trinket{width:56px;height:56px}
  .trinket-badge{font-size:22px}
}
@media (max-width:540px){.trinket,.trinket-badge{display:none}}
.section-head{max-width:var(--maxw);margin:0 auto clamp(36px,5vh,60px)}
.section-head.row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--sage-deep);
  padding-bottom:3px;border-bottom:1px solid var(--gold-line);transition:border-color .3s var(--ease),gap .3s var(--ease);
}
.link-arrow svg{width:17px;height:17px}
.link-arrow:hover{border-bottom-color:var(--sage-deep);gap:13px}

/* ══════════════ THE STANDARD ══════════════ */
.standard{background:var(--paper-2)}
.standard-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,80px);align-items:center;
}
.standard-copy h2{margin-bottom:22px}
.standard-copy p + p{margin-top:16px}
.standard-copy .link-arrow{margin-top:28px}

.standard-panel{
  position:relative;aspect-ratio:1;border:var(--rule);border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper);color:var(--sage-soft);display:flex;align-items:flex-end;
  box-shadow:var(--shadow-soft);
}
.standard-panel .pattern{position:absolute;inset:0;width:100%;height:100%;opacity:.75}
.panel-caption{
  position:relative;z-index:1;width:100%;padding:18px 20px;
  background:linear-gradient(to top,var(--paper) 62%,rgba(255,248,239,0));
  display:flex;flex-direction:column;gap:6px;
}
.panel-caption .mono{color:var(--clay)}
.panel-caption span:last-child{font-size:13px;color:var(--ink-2);line-height:1.5}

/* ══════════════ CATEGORIES ══════════════ */
.cat-list{
  max-width:var(--maxw);margin:0 auto;list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);
}
.cat-row a{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;height:100%;
  padding:clamp(24px,3vw,30px) clamp(20px,2.4vw,26px);position:relative;
  background:var(--paper-2);border-radius:var(--r-lg);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
.cat-row a:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);background:var(--paper)}
.cat-icon{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--paper);color:var(--sage-deep);flex-shrink:0;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.cat-icon svg{width:26px;height:26px}
/* A different candy-soft tint per card — one accent colour would read
   flat across four cards; this is where the palette gets to be playful. */
.cat-row:nth-child(4n+1) .cat-icon{background:var(--sage-soft);color:var(--sage-deep)}
.cat-row:nth-child(4n+2) .cat-icon{background:var(--sky-soft);color:#2E7691}
.cat-row:nth-child(4n+3) .cat-icon{background:#FFE3AE;color:#95651C}
.cat-row:nth-child(4n+4) .cat-icon{background:var(--blush);color:#B23A5C}
.cat-row a:hover .cat-icon{background:var(--sage-deep);color:var(--paper)}
.cat-name{display:block;font-family:var(--display);font-weight:600;font-size:clamp(18px,1.7vw,21px);line-height:1.2}
.cat-items{display:block;font-size:12px;color:var(--ink-3);letter-spacing:.01em;line-height:1.5}
.cat-note{font-size:13px;color:var(--ink-2);line-height:1.55;flex:1}
.cat-go{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--paper);color:var(--sage-deep);align-self:flex-end;margin-top:4px;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.cat-go svg{width:17px;height:17px}
.cat-row a:hover .cat-go{background:var(--clay);color:#fff;transform:translateX(4px)}

/* ══════════════ PRODUCT SHELF ══════════════ */
.shelf-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);
}
.card{
  background:var(--paper);border:var(--rule);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:var(--sage-soft)}
.card-media{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--paper-3)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card-media img{transform:scale(1.045)}
.card-ph{position:absolute;inset:0;background:
  radial-gradient(circle at 50% 44%,var(--paper-2),var(--paper-3));}
.card-badge{
  position:absolute;left:12px;top:12px;padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(255,248,239,.9);color:var(--sage-deep);font-size:9.5px;
  backdrop-filter:blur(6px);
}
.card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-cat{color:var(--ink-3);font-size:10px}
.card-title{font-size:clamp(17px,1.3vw,20px);line-height:1.2}
.card-title a:hover{color:var(--sage-deep)}
.card-excerpt{font-size:13.5px;line-height:1.55;color:var(--ink-2);flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:14px;border-top:1px solid rgba(32,38,28,.08)}
.card-price{font-family:var(--display);font-size:19px;color:var(--ink);font-weight:500}
.card-price del{color:var(--ink-3);font-size:14px;margin-right:6px}
.card-price ins{text-decoration:none;color:var(--clay)}
.card-add{
  font-family:var(--display);font-size:13px;font-weight:600;
  padding:9px 18px;border:2px solid var(--sage-deep);color:var(--sage-deep);border-radius:var(--r-pill);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.card-add:hover{background:var(--sage-deep);color:var(--paper)}

/* ══════════════ RESEARCH ══════════════ */
.research{background:var(--forest);color:var(--on-dark)}
.research h2,.research h3,.research h4{color:var(--on-dark)}
.research p{color:var(--on-dark-2)}
.research .eyebrow{color:var(--gold)}
.research-inner{max-width:var(--maxw);margin:0 auto}
.research-head{max-width:72ch;margin-bottom:clamp(36px,5vh,58px)}
.research-head h2{margin-bottom:20px}

.cites{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.cite{
  border:1px solid rgba(255,248,239,.16);border-radius:var(--r-md);padding:22px 20px 20px;
  background:var(--forest-2);display:flex;flex-direction:column;gap:12px;
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.cite:hover{border-color:var(--gold-line);transform:translateY(-5px);box-shadow:0 20px 36px -20px rgba(0,0,0,.35)}
.cite-k{color:var(--gold)}
.cite p{font-size:14.5px;line-height:1.6;flex:1}
.cite-src{display:flex;flex-direction:column;gap:5px;padding-top:12px;border-top:1px solid rgba(255,248,239,.12)}
.cite-src .mono{font-size:9.5px;color:var(--on-dark-2);letter-spacing:.1em}
.research-foot{margin-top:30px;font-size:13.5px;color:var(--on-dark-2)}
.research-foot .mono{color:var(--gold);margin-right:6px}

/* ══════════════ TRUST + CLOSER ══════════════ */
.trust-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,44px);
}
.trust-item{
  display:flex;flex-direction:column;align-items:center;gap:18px;padding:34px 22px;text-align:center;
  background:var(--paper-2);border-radius:var(--r-lg);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.trust-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft)}
.trust-item:nth-child(1){--ico:var(--sage-deep)}
.trust-item:nth-child(2){--ico:#C2437A}
.trust-item:nth-child(3){--ico:#2F74A6}
.trust-item:nth-child(4){--ico:#C98E35}
/* each icon sits in a coloured button-like badge with a stitched ring */
.trust-ico{
  position:relative;display:grid;place-items:center;width:66px;height:66px;border-radius:50%;
  background:var(--ico);color:#fff;box-shadow:0 10px 18px -10px var(--ico);
  transition:transform .45s var(--ease);
}
.trust-ico::before{content:'';position:absolute;inset:4px;border:1.5px dashed rgba(255,255,255,.7);border-radius:50%}
.trust-item:hover .trust-ico{transform:rotate(-10deg) scale(1.06)}
.trust-ico svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.trust-ico text{fill:currentColor;stroke:none;font-family:var(--display);font-weight:800;font-size:8px}
.trust-item h4{max-width:16ch;font-size:19px;font-weight:700;line-height:1.25}


/* ══════════════ FOOTER ══════════════
   The page's closing fabric band, sewn to match the header: the same
   woven texture in deep green, a scalloped hem along the top with a
   cream stitch and sewn buttons on it, the header's logo patch, and a
   woven care label across the very bottom. */
.site-foot{
  position:relative;margin-top:22px;padding:58px var(--pad) 18px;
  border-radius:28px 28px 0 0;
  color:var(--on-dark);
  background-color:var(--forest);
  background-image:
    radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px),
    linear-gradient(90deg,rgba(0,0,0,.07) 50%,transparent 50%);
  background-size:4px 4px,6px 6px;
}
/* a straight top edge with rounded corners; the sewn buttons sit on a
   running stitch inside the band, clear of the edge */
.foot-hem{position:absolute;left:0;right:0;top:0;height:46px;pointer-events:none}
.foot-hem::after{
  content:'';position:absolute;left:var(--pad);right:var(--pad);top:23px;
  border-top:2px dashed rgba(255,248,239,.45);
}
.foot-button{position:absolute;top:13px;z-index:1;width:22px;height:22px;margin-left:-11px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.foot-button-1{left:10%}
.foot-button-2{left:30%}
.foot-button-3{left:50%}
.foot-button-4{left:70%}
.foot-button-5{left:90%}

.foot-inner{
  position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1fr 2fr;gap:24px;align-items:center;
}

.foot-patch{
  position:relative;display:inline-flex;align-items:center;gap:8px;padding:5px 16px 5px 7px;
  background:var(--paper);border:2px dashed var(--sage-deep);border-radius:var(--r-pill);
  outline:2px solid var(--paper);outline-offset:2px;
  box-shadow:2px 3px 8px rgba(0,0,0,.35);
  transition:transform .35s var(--ease);
}
.foot-patch::before{content:'';position:absolute;inset:3px;border:1px dashed var(--gold-line);border-radius:var(--r-pill);pointer-events:none}
.foot-patch:hover{transform:rotate(-2deg) translateY(-2px)}
.foot-mark{width:24px;height:24px;object-fit:contain}
.foot-word{font-family:var(--display);font-size:15px;font-weight:700;color:var(--sage-deep)}
.foot-line{margin:10px 0 0;max-width:24ch;font-family:var(--display);font-size:13.5px;line-height:1.3;color:var(--on-dark-2)}

.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.foot-col h4{
  position:relative;display:inline-block;margin-bottom:9px;padding-bottom:5px;
  font-family:var(--display);font-size:12.5px;font-weight:700;color:var(--on-dark);
}
.foot-col h4::after{content:'';position:absolute;left:0;bottom:0;width:28px;border-top:2px dashed var(--gold)}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.foot-col a{
  font-size:12px;color:var(--on-dark-2);
  text-decoration:underline dashed transparent;text-underline-offset:4px;
  transition:color .25s var(--ease),text-decoration-color .25s var(--ease);
}
.foot-col a:hover,.foot-col a:focus-visible{color:var(--on-dark);text-decoration-color:var(--gold)}

/* a woven care label, notched at both ends like one cut from a roll */
.foot-label{width:max-content;max-width:100%;
  position:relative;margin:18px auto 0;padding:8px 30px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-2);
  background-color:var(--paper);
  background-image:repeating-linear-gradient(0deg,rgba(74,58,36,.06) 0 1px,transparent 1px 3px);
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%,12px 50%);
}
.foot-label::before{content:'';position:absolute;inset:4px 18px;border:1.5px dashed rgba(74,58,36,.3);pointer-events:none}
.foot-care{display:inline-flex;gap:9px}
.foot-care svg{width:16px;height:16px;fill:none;stroke:var(--ink-2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.foot-care text{fill:var(--ink-2);stroke:none;font-family:var(--mono);font-size:6px}
.foot-care circle{fill:var(--ink-2);stroke:none}

@media (max-width:620px){
  .foot-button-2,.foot-button-4{display:none}
  .foot-button-1{left:14%}
  .foot-button-5{left:86%}
  .foot-label{flex-direction:column;text-align:center;padding:16px 34px}
}

/* ══════════════ INNER PAGES ══════════════ */
.page-shell{max-width:860px;margin:0 auto;padding:132px var(--pad) clamp(64px,9vh,110px)}
.page-shell.wide{max-width:var(--maxw)}
.page-head{margin-bottom:clamp(28px,4vh,48px);padding-bottom:24px;border-bottom:var(--rule)}
.page-head h1{font-size:clamp(32px,4.6vw,58px);margin-bottom:12px}
.page-body p{margin-bottom:16px;font-size:16px;line-height:1.72}
.page-body h2{margin:36px 0 14px}
.page-body h3{margin:28px 0 10px}
.page-body ul,.page-body ol{margin:0 0 18px 20px;color:var(--ink-2)}
.page-body li{margin-bottom:7px}
.page-body a{color:var(--sage-deep);border-bottom:1px solid var(--gold-line)}
.page-body blockquote{border-left:3px solid var(--sage-soft);padding-left:18px;margin:22px 0;font-family:var(--display);font-weight:500;font-size:19px;color:var(--sage-deep)}

/* WooCommerce archives inherit the shelf language */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);list-style:none;margin:0}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{
  width:auto!important;margin:0!important;float:none!important;
  background:var(--paper);border:var(--rule);border-radius:var(--r-md);overflow:hidden;padding:0;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.woocommerce ul.products li.product:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.woocommerce ul.products li.product img{margin:0;aspect-ratio:1;object-fit:cover}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--display);font-weight:600;font-size:18px;padding:16px 16px 4px;line-height:1.22;
}
.woocommerce ul.products li.product .price{display:block;padding:0 16px;font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink)}
.woocommerce ul.products li.product .button{
  display:inline-block;margin:12px 16px 18px;padding:10px 20px;border-radius:var(--r-pill);
  background:var(--sage-deep);color:var(--paper);
  font-family:var(--display);font-weight:600;font-size:13px;
}
.woocommerce ul.products li.product .button:hover{background:var(--sage)}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width:1000px){
  .standard-grid{grid-template-columns:1fr}
  .standard-panel{max-width:460px}
  .shelf-grid,.cites,.woocommerce ul.products,.cat-list{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .foot-inner{grid-template-columns:1fr}
}
/* Below this, six top-level labels plus dropdowns can't sit on one line
   without crowding the centred logo — hand off to the hamburger instead
   of letting the row wrap or overlap. Measured directly (not estimated):
   the link list only clears the logo from ~1360px onward, so this keeps
   real margin rather than cutting it exactly at that edge. */
@media (max-width:1400px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
}

@media (max-width:620px){
  .shelf-grid,.cites,.trust-grid,.foot-cols,.woocommerce ul.products,.cat-list{grid-template-columns:1fr}
  .hero{padding-top:150px;min-height:auto}
  .section-head.row{align-items:flex-start}

  .foot-cols{gap:30px}
}

/* The bar itself is shorter here — just clear it with less top padding. */
@media (max-width:620px){
  .nav-inner{height:66px}
  .mobile-nav{padding-top:82px}
  .brand-word{font-size:18px}
}

/* Touch: every control reaches the 44px minimum without changing how it looks. */
@media (hover:none) and (pointer:coarse){
  .nav-cart,.nav-toggle{width:44px;height:44px}
  .nav-cart svg{width:21px;height:21px}
  .cat-go{width:44px;height:44px}
  .card-add{padding:14px 20px}
  .btn{padding:17px 28px}
  .foot-col a{padding:3px 0;display:inline-block}
  .link-arrow{padding:10px 0}
}