/* ═══════════════════════════════════════════════════════════════════════
   NUBODY · online clinic built around one person
   Brand book v1.0 (October 2026): one typeface, Albert Sans — Light 300
   for headlines, numerals and body, Medium 500 for labels, buttons and
   emphasis, never bold. Warm linen neutrals, Ink for type and the main
   buttons, Bronze the single accent, Rust for offers only. One ten-step
   spacing scale, square corners, 1px Seam hairlines, shadows on hover only.
   The wordmark is artwork (img/wordmark-*.svg, Playfair Display Medium),
   never typed.
   Forked from default-new (2026-09-02); page layouts are the Claude Design
   "nubody" pages. build-css.py runs brand_pass.py over every layer so the
   design's one-off sizes land on the scales below.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ──
   Palette / type / radius read the platform design tokens (--ac-*, emitted by
   platform-head + the Design panel) with the brand value as the fallback.
   Direction: read --ac-*, never define them. */
:root{
  /* brand palette (brand book §02) */
  --ink:          var(--ac-color-text, #141416);            /* type, primary buttons, footer */
  --bronze:       var(--ac-color-accent, #8C6E4E);          /* the accent: numerals, hover, the dot */
  --sand:         #D5B89A;                                  /* separators, rules, accent on Ink */
  --linen:        var(--ac-color-background, #F4F0EB);      /* page background */
  --porcelain:    #FAF6F3;                                  /* cards, header */
  --oat:          var(--ac-color-background-secondary, #F0E9E2); /* bands, ticker, text on Ink */
  --clay:         #EAE1D9;                                  /* chips, image wells */
  --seam:         var(--ac-color-border, #E2DAD1);          /* 1px hairlines */
  --graphite:     var(--ac-color-text-secondary, #4A4744);  /* body copy */
  --stone:        var(--ac-color-text-muted, #8B857F);      /* 11px caps labels, fine print */
  --ash:          #A6A09A;                                  /* secondary text on Ink */
  --rust:         var(--ac-color-sale, #9E3B26);            /* offers & savings only */
  /* design vocabulary → brand palette */
  --accent:       var(--bronze);
  --accent-soft:  var(--sand);
  --muted:        var(--stone);
  --ink-soft:     var(--graphite);
  --bg:           var(--linen);
  --surface:      var(--porcelain);
  --surface-alt:  var(--oat);
  --surface-2:    var(--clay);
  --surface-dark: var(--ac-color-primary, #141416);
  /* Oat on Ink, never pure white (§02). Not read from --ac-button-primary-text: the theme
     bundle doesn't forward the Design panel's button colours, so that token is always the
     platform's #ffffff (3 Nov 2026) and put pure white on every dark band and in the footer. */
  --on-dark:      var(--oat);
  --border:       var(--seam);
  --border-dark:  #33322F;
  --sale:         var(--rust);
  /* type (brand book §03) — the Design panel picks the family; Albert Sans is the brand */
  --font-heading: var(--ac-font-heading, 'Albert Sans', 'Helvetica Neue', Arial, sans-serif);
  --font-body:    var(--ac-font-body, 'Albert Sans', 'Helvetica Neue', Arial, sans-serif);
  --fw-light:     300;
  --fw-medium:    500;
  --fs-hero:      clamp(52px,7.4vw,112px);   /* lh .9 · -.035em */
  --fs-h1:        clamp(34px,4.1vw,58px);    /* lh 1.04 */
  --fs-h2:        clamp(24px,2.4vw,32px);
  --fs-h3:        26px;
  --fs-quote:     clamp(20px,1.7vw,24px);    /* lh 1.34 */
  --fs-lede:      clamp(17px,1.35vw,19px);
  --fs-body:      16px;                      /* lh 1.62 */
  --fs-small:     14px;
  --fs-label:     11px;                      /* Medium · .2em · caps */
  --fs-fine:      12px;                      /* .02em */
  --ls-hero:      -.035em;
  --ls-label:     .2em;
  --ls-fine:      .02em;
  /* space & structure (brand book §04) — no values in between. Namespaced: platform-head emits its own --space-1…8. */
  --nb-space-1: 4px; --nb-space-2: 8px; --nb-space-3: 12px; --nb-space-4: 16px; --nb-space-5: 20px;
  --nb-space-6: 24px; --nb-space-7: 34px; --nb-space-8: 44px; --nb-space-9: 60px; --nb-space-10: 116px;
  --max-width:     1320px;
  --max-narrow:    960px;
  --gutter:        clamp(20px,4vw,56px);
  --band-y:        clamp(60px,7vw,116px);
  --measure:       62ch;
  --radius-card:   var(--ac-radius, 0px);
  --radius-image:  var(--ac-radius-image, 0px);
  --radius-button: var(--ac-radius-button, 0px);
  --radius-input:  var(--ac-radius-input, 0px);
  --radius-pill:   999px;                    /* 52px icon chips only */
  --shadow-card:   0 1px 2px rgba(20,18,16,.04),0 18px 40px -22px rgba(20,18,16,.18);  /* hover only */
  --shadow-raised: 0 26px 60px -26px rgba(20,18,16,.34);                               /* drawers */
  /* legacy default-new vocabulary → brand values (pages not yet rebuilt) */
  --ink-muted:   var(--muted);
  --panel:       var(--surface);
  --accent-deep: #6E5539;
  --line-soft:   var(--surface-2);
  --inverse:     var(--surface-dark);
  --inv-text:    var(--on-dark);
  --star:        var(--ac-color-star, var(--accent));
  --r-card:      var(--radius-card);
  --r-btn:       var(--radius-button);
  --r-input:     var(--radius-input);
  --font:         var(--font-body);
  --font-display: var(--font-heading);
  --container:   var(--max-width);
  --sec-y:       var(--band-y);
  --sec-y-m:     60px;
}
/* base type: Light everywhere, Medium for emphasis, upright, never bold */
b,strong{font-weight:500}
em,i,cite{font-style:normal}
h1,h2,h3,h4,h5,h6{font-weight:300}
/* Claude Design nubody pages 2026-09-02 — tokens + shared chrome/components (verbatim from consultation.html) */


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-weight:300;font-size:var(--fs-body);line-height:1.62;text-wrap:pretty;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:300;margin:0;letter-spacing:-.015em;line-height:1.04}
p{margin:0}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.24em}
a:hover{color:var(--accent)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter)}
.wrap-n{max-width:960px}
.band{padding:var(--band-y) 0;background:var(--bg)}
.kicker{display:block;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.rule{width:44px;height:1px;background:var(--ink);border:0;margin:0}
.rule-c{margin-inline:auto}
.lede{font-size:var(--fs-lede);color:var(--ink-soft)}
.fine{font-size:var(--fs-fine);letter-spacing:.02em;color:var(--ink-soft)}
.serif-it{font-family:var(--font-heading);font-style:normal}
.h-sec{font-size:var(--fs-h1)}
.h-sub{font-size:var(--fs-h2)}
.center{text-align:center}
.btn{display:inline-flex;align-items:center;gap:16px;font-family:var(--font-body);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;text-decoration:none;padding:21px 34px;border:1px solid var(--ink);border-radius:var(--radius-button);background:var(--ink);color:var(--surface);cursor:pointer;transition:background .35s,border-color .35s,color .35s}
.btn:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn svg{width:18px;height:18px;flex:none}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.btn--onink{background:var(--on-dark);border-color:var(--on-dark);color:var(--ink)}
.btn--onink:hover{background:transparent;border-color:var(--on-dark);color:var(--on-dark)}
.btn--sm{padding:14px 22px;gap:12px;font-size:var(--fs-label);letter-spacing:var(--ls-label)}
.tlink{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-small);color:var(--ink);text-decoration:underline}
.tlink svg{width:16px;height:16px}
.ph{background:linear-gradient(155deg,#F0E9E2,#E4DED7 55%,#D6CEC7);background-size:cover;background-position:center;position:relative}
/* ticker — the theme's one ambient effect */
.ticker{background:var(--surface-alt);border-bottom:1px solid var(--border);overflow:hidden}
.ticker__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.ticker__set{display:flex;align-items:center;flex:none;padding:0}
.ticker__set span{display:block;padding:12px 34px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.ticker__set span::after{content:"·";margin-left:34px;color:var(--accent-soft)}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}
/* header */
.hdr{background:var(--surface);border-bottom:1px solid var(--border);position:relative;z-index:20}
.hdr__main{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:24px 0 24px}
.hdr__util{display:flex;align-items:center;gap:24px}
.hdr__util--r{justify-content:flex-end}
.iconlink{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap}
.iconlink svg{width:17px;height:17px}
.iconlink .count{font-size:var(--fs-label);letter-spacing:.06em;color:var(--ink-soft)}
.wordmark{font-family:var(--font-heading);font-weight:500;font-size:clamp(34px,4.4vw,54px);line-height:.9;letter-spacing:-.03em;text-decoration:none;color:var(--ink);white-space:nowrap}
.wordmark span{color:var(--accent)}
.hdr__nav{border-top:1px solid var(--border)}
.hdr__nav ul{display:flex;justify-content:center;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0}
.hdr__nav li+li{border-left:1px solid var(--border)}
.hdr__nav a{display:block;padding:16px 24px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap;transition:color .3s}
.hdr__nav a:hover{color:var(--accent)}
.hdr__search{display:none}
.srch{display:flex;align-items:center;gap:12px;width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-input);padding:12px 16px}
.srch svg{width:17px;height:17px;color:var(--muted);flex:none}
.srch input{flex:1;min-width:0;font:inherit;font-size:var(--fs-small);color:var(--ink);background:none;border:0;outline:none}
.srch input::placeholder{color:var(--ink-soft);letter-spacing:.04em}
.burger{display:none}
details.mnav{display:none}
details.mnav>summary{list-style:none;cursor:pointer}
details.mnav>summary::-webkit-details-marker{display:none}
.mnav__panel{position:absolute;left:0;right:0;top:100%;z-index:60;max-height:78vh;overflow:auto;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface);box-shadow:none}
.mnav__panel ul{list-style:none;margin:0;padding:0}
.mnav__panel a{display:block;padding:16px var(--gutter);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--border)}
.mnav__panel li:last-child a{border-bottom:0}
.mnav__panel .sub a{font-size:var(--fs-small);font-weight:300;letter-spacing:.04em;text-transform:none;color:var(--ink-soft)}
/* product card */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2vw,34px)}
.pcard{display:flex;flex-direction:column;background:transparent}
.pcard__shot{position:relative;display:block;overflow:hidden;border-radius:var(--radius-image);background:var(--surface-alt)}
.pcard__img{aspect-ratio:4/5;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .pcard__img{transform:scale(1.045)}
.badge{position:absolute;top:14px;left:14px;z-index:2;padding:8px 12px;background:var(--surface);color:var(--ink);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase}
.badge.is-new{background:var(--ink);color:var(--surface)}
.badge.is-sale{background:var(--sale);color:#fff}
.pcard__quick{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 16px;background:var(--ink);color:var(--surface);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;text-align:center;transform:translateY(101%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .pcard__quick,.pcard__shot:focus-visible .pcard__quick{transform:translateY(0)}
.pcard__body{padding:20px 2px 0}
.pcard__cat{display:block;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.pcard__title{font-size:var(--fs-quote);margin:8px 0 0}
.pcard__title a{text-decoration:none}
.pcard:hover .pcard__title a{text-decoration:underline}
.stars{display:inline-flex;gap:2px;color:var(--accent)}
.stars svg{width:12px;height:12px}
.rate{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:var(--fs-fine);color:var(--ink-soft)}
.pcard__price{display:flex;align-items:baseline;gap:8px;margin-top:12px;font-size:var(--fs-body)}
.pcard__price s{color:var(--ink-soft);text-decoration-color:var(--muted)}
.pcard__price .per{font-size:var(--fs-fine);color:var(--ink-soft)}
/* support cards */
.support{border:1px solid var(--border);background:var(--surface);padding:clamp(34px,3.4vw,60px) clamp(20px,3vw,44px)}
.support__grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:34px}
.support__grid>div{padding:0 clamp(16px,2vw,24px);text-align:center;display:grid;grid-template-rows:auto auto auto 1fr;align-content:start}
.support__grid>div+div{border-left:1px solid var(--border)}
.chip{width:52px;height:52px;margin:0 auto 16px;display:grid;place-items:center;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--ink)}
.chip svg{width:21px;height:21px}
.support h4{font-family:var(--font-body);font-weight:300;font-size:var(--fs-body);letter-spacing:.02em;color:var(--ink-soft);margin:0}
.support .val{display:block;margin:8px 0 4px;font-size:var(--fs-body);font-weight:500;letter-spacing:.01em}
.support .val a{text-decoration:none}
/* newsletter */
.nl{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,60px);align-items:end}
.nlform{display:flex;gap:12px;min-width:min(420px,100%)}
.nlform input{flex:1;min-width:0;font:inherit;font-size:var(--fs-body);color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-input);padding:20px 20px;outline:none}
.nlform input:focus{border-color:var(--accent)}
/* footer */
.ftr{background:var(--surface-dark);color:var(--on-dark);padding:clamp(60px,6vw,116px) 0 34px}
.ftr a{color:var(--on-dark);text-decoration:none}
.ftr a:hover{color:var(--accent-soft);text-decoration:underline}
.ftr__top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:clamp(24px,3vw,44px);padding-bottom:60px;border-bottom:1px solid var(--border-dark)}
.ftr .wordmark{color:var(--on-dark);font-size:40px}
.ftr__blurb{margin-top:20px;max-width:30ch;font-size:var(--fs-small);color:var(--ash)}
.ftr h5{font-family:var(--font-body);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ash);margin:0 0 20px}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:var(--fs-small)}
.ftr__social{display:flex;gap:12px;margin-top:24px}
.ftr__social a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--border-dark);border-radius:var(--radius-pill)}
.ftr__social svg{width:16px;height:16px}
.ftr__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:24px;font-size:var(--fs-label);letter-spacing:.04em;color:var(--ash)}
.ftr__legal p{max-width:78ch}
/* nav mega panels */
.hdr__nav{position:relative}
.hdr__nav li:hover>a,.hdr__nav li:focus-within>a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:7px}
a.consult{color:var(--ink)}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);box-shadow:none;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .28s,transform .28s,visibility .28s;z-index:70}
.hdr__nav li:hover>.mega,.hdr__nav li:focus-within>.mega{opacity:1;visibility:visible;transform:none}
.mega__in{max-width:var(--max-width);margin:0 auto;padding:clamp(24px,3vw,44px) var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(24px,4vw,60px);align-items:start}
.mega__list{display:flex;flex-direction:column}
.mega__list a{display:block;padding:12px 0;border-bottom:1px solid var(--border);text-decoration:none;text-transform:none;letter-spacing:0;white-space:normal}
.mega__list a:last-child{border-bottom:0}
.mega__list b{display:block;font-family:var(--font-heading);font-weight:300;font-size:var(--fs-quote);letter-spacing:-.01em;transition:color .2s}
.mega__list a:hover b{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.mega__list span{display:block;margin-top:4px;font-size:var(--fs-small);font-weight:300;color:var(--ink-soft)}
.mega__feat{display:flex;flex-direction:column;gap:8px;text-decoration:none;text-transform:none;letter-spacing:0;padding:0;white-space:normal}
.mega__feat .mega__img{display:block;aspect-ratio:16/10;border:1px solid var(--border)}
.mega__feat b{font-family:var(--font-heading);font-weight:300;font-size:var(--fs-quote);margin-top:8px}
.mega__feat>span{font-size:var(--fs-small);font-weight:300;color:var(--ink-soft)}
.mega__feat em{display:inline-flex;align-items:center;gap:8px;font-style:normal;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink);margin-top:4px}
.mega__feat em svg{width:14px;height:14px;transition:transform .3s}
.mega__feat:hover em svg{transform:translateX(5px)}
.mega__feat:hover b{color:var(--accent)}
.mnav__panel details{border-bottom:1px solid var(--border)}
.mnav__panel summary.grp{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px var(--gutter);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;cursor:pointer;list-style:none}
.mnav__panel summary.grp::-webkit-details-marker{display:none}
.mnav__panel summary.grp svg{width:14px;height:14px;transition:transform .3s}
.mnav__panel details[open] summary.grp svg{transform:rotate(180deg)}
.mnav__panel .subl{list-style:none;margin:0;padding:0 0 8px}
.mnav__panel .subl a{display:block;padding:12px var(--gutter) 12px calc(var(--gutter) + 16px);font-size:var(--fs-small);font-weight:300;letter-spacing:.04em;text-transform:none;color:var(--ink-soft);border-bottom:0}
.mnav__foot{display:flex;flex-direction:column;gap:12px;padding:20px var(--gutter) 24px;border-top:1px solid var(--border)}
.mnav__foot .btn{justify-content:center}
.mnav__sup{margin-top:8px;font-size:var(--fs-fine);color:var(--ink-soft);text-align:center}

/*#RESP-START shared header/grid/footer responsive*/
@media (max-width:960px){
.hdr__main{grid-template-columns:auto auto 1fr auto;gap:16px;padding:16px 0}
.hdr__util--l{gap:0}
.hide-m{display:none!important}
.hdr__util--r{gap:0}
.hdr__util--r .iconlink:not(.hdr__bag){display:none}
details.mnav{display:block}
.burger{display:inline-flex;align-items:center;color:var(--ink)}
.burger svg{width:22px;height:22px}
.wordmark{font-size:clamp(30px,5.4vw,40px);text-align:center}
.hdr__nav{display:none}
}
@media (max-width:1080px){
.pgrid{grid-template-columns:repeat(2,1fr);gap:24px 20px}
.ftr__top{grid-template-columns:1fr 1fr;gap:44px}
}
@media (max-width:900px){
.support__grid{grid-template-columns:1fr 1fr;gap:34px 0}
.support__grid>div:nth-child(3){border-left:0}
.support__grid>div:nth-child(n+3){padding-top:34px;border-top:1px solid var(--border)}
}
@media (max-width:720px){
.wordmark{font-size:30px}
.pgrid{gap:24px 16px}
.pcard__title{font-size:var(--fs-lede)}
.support__grid{grid-template-columns:1fr}
.support__grid>div{border-left:0!important}
.support__grid>div+div{padding-top:34px;border-top:1px solid var(--border)}
.ftr__top{grid-template-columns:1fr;gap:34px}
.ftr__legal{flex-direction:column}
}
/*#RESP-END*/

/* Claude Design nubody home 2026-09-02 — page CSS (verbatim, after the shared block) */

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,47%) minmax(0,53%);background:var(--bg)}
.hero__copy{display:flex;flex-direction:column;justify-content:center;gap:24px;padding:clamp(44px,6vw,116px) clamp(24px,4.4vw,60px) clamp(44px,6vw,116px) max(var(--gutter),calc((100vw - var(--max-width))/2 + var(--gutter)))}
.hero h1{font-size:var(--fs-hero);line-height:.9;letter-spacing:-.035em}
.hero__sub{display:flex;flex-direction:column;gap:16px;max-width:34ch}
.hero__sub strong{font-weight:500;color:var(--ink)}
.hero__cta{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:8px}
.hero__shot{background-image:url('/themes/nubody/img/hero.jpg');min-height:clamp(420px,52vw,720px)}
/* usp row */
.usp{background:var(--surface);border-bottom:1px solid var(--border)}
.usp__grid{display:grid;grid-template-columns:repeat(5,1fr);padding:clamp(34px,3.6vw,60px) 0}
.usp__grid>div{padding:0 clamp(12px,1.8vw,34px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.usp__grid>div+div{border-left:1px solid var(--border)}
.usp svg{width:30px;height:30px;color:var(--ink);stroke-width:1.1}
.usp p{font-size:var(--fs-small);line-height:1.5;color:var(--ink-soft);max-width:16ch}
/* steps */
.steps__head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:end}
.steps__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,60px);margin-top:clamp(44px,4.4vw,60px)}
.step{border-top:1px solid var(--border);padding-top:24px}
.step__n{font-family:var(--font-heading);font-size:var(--fs-small);letter-spacing:.14em;color:var(--accent)}
.step h3{font-size:var(--fs-h3);margin:16px 0 12px}
.step p{font-size:var(--fs-body);color:var(--ink-soft)}
.steps__foot{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:clamp(34px,4vw,60px)}
/* ritual — the dark band */
.ritual{background:var(--surface-dark);color:var(--on-dark)}
.ritual .kicker{color:var(--accent-soft)}
.ritual__head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,116px);align-items:start;padding-bottom:clamp(44px,4.6vw,60px);border-bottom:1px solid var(--border-dark)}
.ritual__head h2{font-size:var(--fs-h1)}
.ritual__head h2 em{font-style:normal;color:var(--accent-soft)}
.ritual__intro{display:flex;flex-direction:column;gap:20px;font-size:var(--fs-body);color:var(--ash);padding-top:12px}
.ritual__list{display:grid;grid-template-columns:repeat(4,1fr)}
.rit{padding:clamp(34px,3.2vw,44px) clamp(20px,2.2vw,34px);display:flex;flex-direction:column;gap:16px}
.rit+.rit{border-left:1px solid var(--border-dark)}
.rit__t{display:flex;align-items:baseline;gap:12px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent-soft)}
.rit h3{font-size:var(--fs-h3)}
.rit p{font-size:var(--fs-body);color:var(--ash)}
.rit__mark{margin-top:auto;padding-top:24px;color:var(--graphite)}
.rit__mark svg{width:22px;height:22px;stroke-width:1}
/* membership */
.mem{background:var(--surface-alt)}
.mem__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(34px,5vw,116px);align-items:center}
.mem__shot{aspect-ratio:5/6;background-image:url('/themes/nubody/img/still-life.jpg');border-radius:var(--radius-image)}
.mem h2{font-size:var(--fs-h1)}
.mem h2 em{font-style:normal;color:var(--ink)}
.mem__copy{display:flex;flex-direction:column;gap:24px}
.mem__list{display:flex;flex-direction:column;gap:0;margin-top:8px;border-top:1px solid var(--border)}
.mem__list>div{display:grid;grid-template-columns:34px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--border)}
.mem__list svg{width:22px;height:22px;color:var(--accent);stroke-width:1.1;margin-top:4px}
.mem__list h4{font-family:var(--font-body);font-size:var(--fs-body);font-weight:500;letter-spacing:.03em;margin:0 0 4px}
.mem__list p{font-size:var(--fs-small);color:var(--ink-soft)}
.mem__foot{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:8px}
.mem__price{font-family:var(--font-heading);font-size:var(--fs-lede)}
.mem__price b{font-weight:300;font-size:var(--fs-h3)}
/* the edit */
.edit__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:clamp(34px,3.4vw,60px)}
/* reviews */
.revs{background:var(--surface);border-top:1px solid var(--border)}
.revs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,60px);margin-top:clamp(34px,4vw,60px)}
.rev{display:flex;flex-direction:column;gap:20px;padding-top:24px;border-top:1px solid var(--border)}
.rev blockquote{font-family:var(--font-heading);font-size:var(--fs-h3);line-height:1.34;margin:0}
.rev cite{font-style:normal;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.rev cite span{display:block;margin-top:4px;font-weight:300;letter-spacing:.04em;text-transform:none;font-size:var(--fs-small);color:var(--ink-soft)}
/* sections */
.secs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2vw,34px);margin-top:clamp(34px,4vw,60px)}
.sec-tile{position:relative;display:flex;flex-direction:column;text-decoration:none;background:var(--surface);border:1px solid var(--border)}
.sec-tile__img{aspect-ratio:16/10}
.sec-tile__body{display:flex;flex-direction:column;gap:8px;padding:20px 24px 24px}
.sec-tile h3{font-size:var(--fs-h3)}
.sec-tile p{font-size:var(--fs-small);color:var(--ink-soft)}
.sec-tile .go{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink)}
.sec-tile .go svg{width:14px;height:14px;transition:transform .3s}
.sec-tile:hover .go svg{transform:translateX(5px)}
.sec-tile:hover h3{text-decoration:underline}
/* mobile */
@media (max-width:960px){
.hdr__main{grid-template-columns:auto auto 1fr auto;gap:16px;padding:16px 0}
.hdr__util--l{gap:0}
.hide-m{display:none!important}
.hdr__util--r{gap:0}
.hdr__util--r .iconlink:not(.hdr__bag){display:none}
.hdr__util--r .btn{display:none}
details.mnav{display:block}
.burger{display:inline-flex;align-items:center;color:var(--ink)}
.burger svg{width:22px;height:22px}
.wordmark{font-size:clamp(30px,5.4vw,40px);text-align:center}
.hdr__nav{display:none}

}
@media (max-width:1080px){
.pgrid{grid-template-columns:repeat(2,1fr);gap:24px 20px}
.usp__grid{grid-template-columns:repeat(3,1fr);gap:34px 0}
.usp__grid>div:nth-child(4){border-left:0}
.ritual__list{grid-template-columns:repeat(2,1fr)}
.rit:nth-child(3){border-left:0}
.rit:nth-child(n+3){border-top:1px solid var(--border-dark)}
.ftr__top{grid-template-columns:1fr 1fr;gap:44px}
}
@media (max-width:900px){
.hero{grid-template-columns:1fr}
.hero__copy{order:2;padding:44px var(--gutter) 60px;gap:24px}
.hero__shot{order:1;min-height:0;aspect-ratio:4/3}
.steps__head,.steps__grid,.ritual__head,.mem__grid,.revs__grid,.nl{grid-template-columns:1fr}
.steps__grid{gap:0}
.step{padding:24px 0}
.step:last-child{border-bottom:1px solid var(--border)}
.ritual__head{gap:24px}
.mem__shot{aspect-ratio:4/3;order:2}
.support__grid{grid-template-columns:1fr 1fr;gap:34px 0}
.support__grid>div:nth-child(3){border-left:0}
.support__grid>div:nth-child(n+3){padding-top:34px;border-top:1px solid var(--border)}
.nl{gap:24px}
.nlform{min-width:0}
}
@media (max-width:720px){
.wordmark{font-size:30px}
.usp__grid{grid-template-columns:1fr 1fr}
.usp__grid>div{border-left:0!important}
.usp__grid>div:nth-child(5){grid-column:1/-1}
.ritual__list{grid-template-columns:1fr}
.rit+.rit{border-left:0;border-top:1px solid var(--border-dark)}
.pgrid{gap:24px 16px}
.pcard__title{font-size:var(--fs-lede)}
.support__grid{grid-template-columns:1fr}
.support__grid>div{border-left:0!important}
.support__grid>div+div{padding-top:34px;border-top:1px solid var(--border)}
.ftr__top{grid-template-columns:1fr;gap:34px}
.ftr__legal{flex-direction:column}
}
@media (max-width:1080px){.secs{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.secs{grid-template-columns:1fr}}

/* Claude Design nubody pages 2026-09-02 — per-page CSS (verbatim fragments, collisions scoped) */
/* ── page: consultation ── */

/* consultation flow */
.fhero{background:var(--surface);border-bottom:1px solid var(--border);padding:clamp(34px,3.8vw,60px) 0}
.fhero h1{font-size:var(--fs-h1);margin-top:16px}
.fhero .lede{margin-top:16px;max-width:52ch}
.fhero .fine{margin-top:12px}
.flowband{padding:clamp(34px,3.6vw,60px) 0 var(--band-y);background:var(--bg)}
.flow{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,3.4vw,60px);align-items:start}
.scr{background:var(--surface);border:1px solid var(--border);padding:clamp(24px,3vw,44px)}
.scr__meta{display:flex;justify-content:space-between;gap:16px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.scr__meta b{font-weight:500;color:var(--ink)}
.pbar{height:2px;background:var(--border);margin:16px 0 24px}
.pbar i{display:block;height:100%;background:var(--accent)}
.scr h2{font-size:var(--fs-h2)}
.scr .hint{margin-top:12px;font-size:var(--fs-small);color:var(--ink-soft)}
.entry{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-alt);border:1px solid var(--border);padding:16px 20px;margin-top:24px;font-size:var(--fs-small);color:var(--ink-soft)}
.entry a{white-space:nowrap}
.q{padding:24px 0;border-bottom:1px solid var(--border)}
.q:last-of-type{border-bottom:0}
.qt{font-size:var(--fs-body);font-weight:300;color:var(--ink);max-width:62ch}
.qt .qn{font-family:var(--font-heading);color:var(--accent);margin-right:12px}
.qs{display:block;margin-top:8px;font-size:var(--fs-small);color:var(--ink-soft);max-width:58ch}
.yn{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.pill{position:relative;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--bg);padding:12px 24px;font-size:var(--fs-small);letter-spacing:.04em;cursor:pointer;transition:border-color .2s}
.pill input{position:absolute;opacity:0;pointer-events:none}
.pill:hover{border-color:var(--ink)}
.pill:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--surface)}
a.pill{text-decoration:none;color:var(--ink)}
.fld{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.fld label{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.fld input{font:inherit;font-size:var(--fs-body);color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-input);padding:16px 16px;outline:none;width:110px}
.fld input:focus{border-color:var(--accent)}
.fld input.w-l{width:200px}
.u-imp{display:none}
.q:has(.ut input.imp:checked) .u-imp{display:flex}
.q:has(.ut input.imp:checked) .u-met{display:none}
.bmi{display:flex;align-items:baseline;gap:16px;border:1px solid var(--border);background:var(--surface-alt);padding:16px 24px;margin-top:20px}
.bmi b{font-family:var(--font-heading);font-weight:300;font-size:var(--fs-h2)}
.bmi span{font-size:var(--fs-fine);color:var(--ink-soft)}
.upl{display:flex;flex-direction:column;align-items:flex-start;gap:12px;border:1px dashed var(--muted);background:var(--bg);padding:clamp(24px,2.6vw,34px);margin-top:16px}
.upl b{font-weight:500;font-size:var(--fs-small)}
.upl p{font-size:var(--fs-small);color:var(--ink-soft);max-width:52ch}
.upl .btn{padding:14px 22px;font-size:var(--fs-label)}
.reg{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.reg label{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.reg input{font:inherit;font-size:var(--fs-body);color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-input);padding:16px 16px;outline:none}
.reg input:focus{border-color:var(--accent)}
.scr__foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:34px}
.scr__foot .btn{gap:12px}
.decl{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--border);background:var(--surface-alt);padding:24px;margin-top:24px;font-size:var(--fs-body);cursor:pointer}
.decl input{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:2px 0 0;border:1px solid var(--muted);background:var(--surface);cursor:pointer;display:grid;place-items:center;flex:none}
.decl input:checked{background:var(--ink);border-color:var(--ink)}
.decl input:checked::after{content:"";width:9px;height:5px;border-left:1.5px solid var(--surface);border-bottom:1.5px solid var(--surface);transform:translateY(-1px) rotate(-45deg)}
.screen{display:none}
#s1{display:block}
.flow__main:has(.screen:target) #s1:not(:target){display:none}
.screen:target{display:block}
.aside{position:sticky;top:24px;display:flex;flex-direction:column;gap:16px}
.acard{border:1px solid var(--border);background:var(--surface);padding:24px}
.acard h3{font-size:var(--fs-quote);margin-bottom:12px}
.acard p{font-size:var(--fs-small);color:var(--ink-soft)}
.acard .val{display:block;margin-top:12px;font-size:var(--fs-body);font-weight:500}
.acard .val a{text-decoration:none}
.acard ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:var(--fs-small);color:var(--ink-soft)}
.acard li{display:flex;gap:12px;align-items:baseline}
.acard li::before{content:"";width:5px;height:5px;background:var(--accent);flex:none}
.done,.refused{text-align:center;padding:clamp(44px,5vw,60px) clamp(24px,3vw,44px)}
.done h2,.refused h2{font-size:var(--fs-h1)}
.done p,.refused p{margin:16px auto 0;max-width:46ch;font-size:var(--fs-body);color:var(--ink-soft)}
.done .btn,.refused .btn{margin-top:24px}


@media (max-width:960px){
.flow{grid-template-columns:1fr}
.aside{position:static}
.reg{grid-template-columns:1fr}
}

/* ── page: weight-loss ── */

/* weight loss hub */
.wlhero{display:grid;grid-template-columns:minmax(0,52%) minmax(0,48%);background:var(--surface);border-bottom:1px solid var(--border)}
.wlhero__copy{display:flex;flex-direction:column;justify-content:center;gap:24px;padding:clamp(44px,5.4vw,116px) clamp(24px,4vw,60px) clamp(44px,5.4vw,116px) max(var(--gutter),calc((100vw - var(--max-width))/2 + var(--gutter)))}
.wlhero h1{font-size:var(--fs-h1);line-height:.98}
.wlhero .lede{max-width:38ch}
.wlhero__cta{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:4px}
.wlhero__shot{background-image:url('/themes/nubody/img/hero.jpg');min-height:clamp(320px,38vw,560px)}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,2.6vw,44px);margin-top:clamp(34px,4vw,60px)}
.steps4 .step{border-top:1px solid var(--border);padding-top:24px}
.steps4 .step__n{font-family:var(--font-heading);font-size:var(--fs-small);letter-spacing:.14em;color:var(--accent)}
.steps4 .step h3{font-size:var(--fs-h3);margin:16px 0 12px}
.steps4 .step p{font-size:var(--fs-small);color:var(--ink-soft)}
.subnav{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px)}
.snt{display:flex;flex-direction:column;gap:8px;padding:24px 24px 24px;border:1px solid var(--border);background:var(--surface);text-decoration:none}
.snt h3{font-size:var(--fs-quote)}
.snt p{font-size:var(--fs-small);color:var(--ink-soft)}
.snt .go{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink)}
.snt .go svg{width:14px;height:14px;transition:transform .3s}
.snt:hover .go svg{transform:translateX(5px)}
.snt:hover h3{text-decoration:underline}
.optcards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,34px);margin-top:clamp(34px,3.6vw,60px)}
.optcard{border:1px solid var(--border);background:var(--surface);padding:clamp(24px,3vw,44px)}
.optcard .kicker{color:var(--ink)}
.optcard h3{font-size:var(--fs-h2);margin:16px 0 12px}
.optcard p{font-size:var(--fs-small);color:var(--ink-soft);max-width:44ch}
.inclist{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,60px);margin-top:clamp(34px,3.4vw,44px);border-top:1px solid var(--border)}
.inclist>div{display:grid;grid-template-columns:34px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--border)}
.inclist svg{width:22px;height:22px;color:var(--accent);stroke-width:1.1;margin-top:4px}
.inclist h4{font-family:var(--font-body);font-size:var(--fs-body);font-weight:500;letter-spacing:.03em;margin:0 0 4px}
.inclist p{font-size:var(--fs-small);color:var(--ink-soft)}
.supband{background:var(--surface-dark);color:var(--on-dark)}
.supband .kicker{color:var(--accent-soft)}
.supband h2 em{font-style:normal;color:var(--accent-soft)}
.sup3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(34px,3.6vw,60px)}
.sup3>div{padding:clamp(24px,2.8vw,44px) clamp(20px,2.2vw,34px);display:flex;flex-direction:column;gap:12px}
.sup3>div+div{border-left:1px solid var(--border-dark)}
.sup3 h3{font-size:var(--fs-h3)}
.sup3 p{font-size:var(--fs-small);color:var(--ash)}
.sup3 svg{width:22px;height:22px;stroke-width:1;color:var(--accent-soft)}
.revs2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,60px);margin-top:clamp(34px,3.6vw,60px)}
.revs2 .rev{display:flex;flex-direction:column;gap:20px;padding-top:24px;border-top:1px solid var(--border)}
.revs2 .rev blockquote{font-family:var(--font-heading);font-size:var(--fs-h3);line-height:1.34;margin:0;font-style:normal;color:var(--ink-soft)}
.revs2 .rev cite{font-style:normal;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.acc{margin-top:clamp(34px,3.4vw,44px);border-top:1px solid var(--border);max-width:860px;margin-inline:auto}
.acc details{border-bottom:1px solid var(--border)}
.acc summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;cursor:pointer;font-size:var(--fs-body);font-family:var(--font-heading);list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary svg{width:15px;height:15px;flex:none;transition:transform .3s}
.acc details[open] summary svg{transform:rotate(45deg)}
.acc__body{padding:0 0 24px;font-size:var(--fs-small);color:var(--ink-soft);max-width:64ch}
.presc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,3vw,44px);align-items:center;border:1px solid var(--border);background:var(--surface);padding:clamp(24px,3.4vw,60px)}
.presc h2{font-size:var(--fs-h2)}
.presc p{font-size:var(--fs-small);color:var(--ink-soft);margin-top:12px;max-width:52ch}
.presc__acts{display:flex;flex-direction:column;gap:12px}


@media (max-width:1080px){
.subnav{grid-template-columns:1fr 1fr}
.steps4{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:900px){
.wlhero{grid-template-columns:1fr}
.wlhero__copy{order:2;padding:44px var(--gutter) 44px}
.wlhero__shot{order:1;min-height:0;aspect-ratio:4/3}
.optcards,.inclist,.revs2,.sup3,.presc{grid-template-columns:1fr}
.sup3>div+div{border-left:0;border-top:1px solid var(--border-dark)}
.sup3>div{padding:24px 0}
.steps4{grid-template-columns:1fr;gap:0}
.steps4 .step{padding:20px 0}
.subnav{grid-template-columns:1fr}
}

/* ── page: hub ── */
/* audience hub */
.ahero{display:grid;grid-template-columns:minmax(0,52%) minmax(0,48%);background:var(--surface);border-bottom:1px solid var(--border)}
.ahero__copy{display:flex;flex-direction:column;justify-content:center;gap:24px;padding:clamp(44px,5.4vw,116px) clamp(24px,4vw,60px) clamp(44px,5.4vw,116px) max(var(--gutter),calc((100vw - var(--max-width))/2 + var(--gutter)))}
.ahero h1{font-size:var(--fs-h1);line-height:.98}
.ahero .lede{max-width:38ch}
.ahero__cta{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:4px}
.ahero__shot{min-height:clamp(320px,38vw,540px)}
.secs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2vw,34px);margin-top:clamp(34px,4vw,60px)}
.sec-tile{position:relative;display:flex;flex-direction:column;text-decoration:none;background:var(--surface);border:1px solid var(--border)}
.sec-tile__img{aspect-ratio:16/10}
.sec-tile__body{display:flex;flex-direction:column;gap:8px;padding:20px 24px 24px}
.sec-tile h3{font-size:var(--fs-h3)}
.sec-tile p{font-size:var(--fs-small);color:var(--ink-soft)}
.sec-tile .go{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink)}
.sec-tile .go svg{width:14px;height:14px;transition:transform .3s}
.sec-tile:hover .go svg{transform:translateX(5px)}
.sec-tile:hover h3{text-decoration:underline}
.row5{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,34px);margin-top:clamp(34px,3.6vw,60px)}
.row5>div{border-top:1px solid var(--border);padding-top:20px}
.row5 .step__n{font-family:var(--font-heading);font-size:var(--fs-small);letter-spacing:.14em;color:var(--accent)}
.row5 h3{font-size:var(--fs-lede);margin:12px 0 8px}
.row5 p{font-size:var(--fs-small);color:var(--ink-soft)}
.whyband{background:var(--surface-dark);color:var(--on-dark)}
.whyband .kicker{color:var(--accent-soft)}
.whyband h2 em{font-style:normal;color:var(--accent-soft)}
.why3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(34px,3.6vw,60px)}
.why3>div{padding:clamp(24px,2.8vw,44px) clamp(20px,2.2vw,34px);display:flex;flex-direction:column;gap:12px}
.why3>div+div{border-left:1px solid var(--border-dark)}
.why3 h3{font-size:var(--fs-h3)}
.why3 p{font-size:var(--fs-small);color:var(--ash)}
.why3 svg{width:22px;height:22px;stroke-width:1;color:var(--accent-soft)}
.revs2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,60px);margin-top:clamp(34px,3.6vw,60px)}
.revs2 .rev{display:flex;flex-direction:column;gap:20px;padding-top:24px;border-top:1px solid var(--border)}
.revs2 .rev blockquote{font-family:var(--font-heading);font-size:var(--fs-h3);line-height:1.34;margin:0;font-style:normal;color:var(--ink-soft)}
.revs2 .rev cite{font-style:normal;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.presc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,3vw,44px);align-items:center;border:1px solid var(--border);background:var(--surface);padding:clamp(24px,3.4vw,60px)}
.presc h2{font-size:var(--fs-h2)}
.presc p{font-size:var(--fs-small);color:var(--ink-soft);margin-top:12px;max-width:52ch}
.presc__acts{display:flex;flex-direction:column;gap:12px}

@media (max-width:1080px){
.secs{grid-template-columns:1fr 1fr}
.row5{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
.ahero{grid-template-columns:1fr}
.ahero__copy{order:2;padding:44px var(--gutter) 44px}
.ahero__shot{order:1;min-height:0;aspect-ratio:4/3}
.why3,.revs2,.presc,.row5{grid-template-columns:1fr}
.why3>div+div{border-left:0;border-top:1px solid var(--border-dark)}
.why3>div{padding:24px 0}
.row5{gap:0}
.row5>div{padding:20px 0}
}
@media (max-width:720px){
.secs{grid-template-columns:1fr}
}

/* ── page: concern ── */
/* concern page (template) */
.cnhero .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:var(--fs-fine);letter-spacing:.04em;color:var(--ink-soft);margin-bottom:clamp(20px,2.4vw,34px)}
.cnhero .crumbs a{color:var(--ink-soft);text-decoration:none}
.cnhero .crumbs a:hover{color:var(--ink);text-decoration:underline}
.cnhero .crumbs svg{width:11px;height:11px;transform:rotate(-90deg)}
.cnhero{background:var(--surface);border-bottom:1px solid var(--border);padding:clamp(34px,4.6vw,60px) 0}
.cnhero__row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,60px);align-items:center}
.cnhero h1{font-size:var(--fs-h1);margin-top:16px}
.cnhero .lede{margin-top:20px;max-width:46ch}
.cnhero .btn{margin-top:24px}
.cnhero__shot{aspect-ratio:4/3;background-image:url('/themes/nubody/img/foliage.jpg')}
.isyou{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(34px,3.6vw,60px)}
.isyou>blockquote{margin:0;border:1px solid var(--border);background:var(--surface);padding:clamp(24px,2.4vw,34px);font-family:var(--font-heading);font-style:normal;font-size:var(--fs-quote);line-height:1.36;color:var(--ink-soft)}
.help3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.6vw,44px);margin-top:clamp(34px,3.6vw,60px)}
.help3 .step{border-top:1px solid var(--border);padding-top:24px}
.help3 .step__n{font-family:var(--font-heading);font-size:var(--fs-small);letter-spacing:.14em;color:var(--accent)}
.help3 .step h3{font-size:var(--fs-h3);margin:16px 0 12px}
.help3 .step p{font-size:var(--fs-small);color:var(--ink-soft)}
.inclist{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,60px);margin-top:clamp(34px,3.4vw,44px);border-top:1px solid var(--border)}
.inclist>div{display:grid;grid-template-columns:34px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--border)}
.inclist svg{width:22px;height:22px;color:var(--accent);stroke-width:1.1;margin-top:4px}
.inclist h4{font-family:var(--font-body);font-size:var(--fs-body);font-weight:500;letter-spacing:.03em;margin:0 0 4px}
.inclist p{font-size:var(--fs-small);color:var(--ink-soft)}
.cnconsult{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,4.4vw,60px);align-items:center}
.cnconsult__shot{aspect-ratio:5/6;background-image:url('/themes/nubody/img/notebook.jpg')}
.cnconsult ul{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column}
.cnconsult li{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--border);font-size:var(--fs-body);color:var(--ink-soft)}
.cnconsult li::before{content:"";width:5px;height:5px;background:var(--accent);flex:none;transform:translateY(-2px)}
.optnote{background:var(--surface-dark);color:var(--on-dark)}
.optnote p.big{font-family:var(--font-heading);font-style:normal;font-size:var(--fs-h2);line-height:1.3;max-width:26ch;margin:20px auto 0}
.optnote .kicker{color:var(--accent-soft)}
.cn-acc{margin-top:clamp(34px,3.4vw,44px);border-top:1px solid var(--border);max-width:860px;margin-inline:auto}
.cn-acc details{border-bottom:1px solid var(--border)}
.cn-acc summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;cursor:pointer;font-size:var(--fs-body);font-family:var(--font-heading);list-style:none}
.cn-acc summary::-webkit-details-marker{display:none}
.cn-acc summary svg{width:15px;height:15px;flex:none;transition:transform .3s}
.cn-acc details[open] summary svg{transform:rotate(45deg)}
.cn-acc .acc__body{padding:0 0 24px;font-size:var(--fs-small);color:var(--ink-soft);max-width:64ch}
.rev1{max-width:760px;margin:clamp(34px,3.6vw,60px) auto 0;text-align:center;display:flex;flex-direction:column;gap:20px;align-items:center}
.rev1 blockquote{font-family:var(--font-heading);font-style:normal;font-size:var(--fs-h3);line-height:1.34;margin:0;color:var(--ink-soft)}
.rev1 cite{font-style:normal;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.ctaband{background:var(--surface-alt);text-align:center}
.ctaband h2{font-size:var(--fs-h1)}
.ctaband em{font-style:normal;color:var(--ink)}

@media (max-width:1080px){
.isyou{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
.cnhero__row,.cnconsult,.inclist,.help3{grid-template-columns:1fr}
.cnhero__shot{order:-1}
.cnconsult__shot{aspect-ratio:4/3}
.help3{gap:0}
.help3 .step{padding:20px 0}
}
@media (max-width:720px){
.isyou{grid-template-columns:1fr}
}

/* ── page: product ── */
/* product page */
.pdpband .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:var(--fs-fine);letter-spacing:.04em;color:var(--ink-soft);padding:clamp(20px,2vw,24px) 0}
.pdpband .crumbs a{color:var(--ink-soft);text-decoration:none}
.pdpband .crumbs a:hover{color:var(--ink);text-decoration:underline}
.pdpband .crumbs svg{width:11px;height:11px;transform:rotate(-90deg)}
.pdpband{background:var(--bg);padding-bottom:var(--band-y)}
.pdp{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(34px,4.6vw,60px);align-items:start}
.gal__main{position:relative;aspect-ratio:4/5;border-radius:var(--radius-image);background-image:url('/themes/nubody/img/box.jpg')}
.gal__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.gal__th{display:block;aspect-ratio:1/1;border:1px solid var(--border);background-size:cover;background-position:center}
.gal__th:hover{border-color:var(--muted)}
.gal__th.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.buy{position:sticky;top:28px}
.buy h1{font-size:var(--fs-h1);margin-top:12px}
.buy .rate{margin-top:16px;font-size:var(--fs-small)}
.buy .rate a{color:var(--ink-soft)}
.buy__desc{margin-top:20px;font-size:var(--fs-body);color:var(--ink-soft);max-width:52ch}
.optlab{display:block;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin:34px 0 12px;padding:0}
.opts{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.opt{position:relative;display:grid;grid-template-columns:auto 1fr;gap:16px;padding:20px;border:1px solid var(--border);background:var(--surface);cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt__dot{width:17px;height:17px;margin-top:4px;border:1px solid var(--muted);border-radius:var(--radius-pill);display:grid;place-items:center;flex:none}
.opt input:checked+.opt__dot{border-color:var(--ink)}
.opt input:checked+.opt__dot::after{content:"";width:9px;height:9px;border-radius:var(--radius-pill);background:var(--ink)}
.opt__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px}
.opt__name{font-size:var(--fs-body);font-weight:500;letter-spacing:.02em}
.opt__tag{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;background:var(--accent);color:var(--surface);padding:4px 8px;transform:translateY(-2px)}
.opt__price{margin-left:auto;font-size:var(--fs-body);white-space:nowrap}
.opt__price s{color:var(--ink-soft);font-size:var(--fs-small);margin-left:8px;text-decoration-color:var(--muted)}
.opt__sub{display:block;margin-top:8px;font-size:var(--fs-small);color:var(--ink-soft);max-width:46ch}
.opt__extra{display:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--border);flex-direction:column;gap:12px}
.opt input:checked~.opt__body .opt__extra{display:flex}
.freq{display:flex;align-items:center;gap:12px;font-size:var(--fs-small);color:var(--ink-soft)}
.freq select{font:inherit;font-size:var(--fs-small);color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-input);padding:12px 12px;outline:none;cursor:pointer}
.buyrow{display:flex;gap:12px;margin-top:24px}
.pdp .qty{display:inline-flex;align-items:stretch;border:1px solid var(--ink);background:var(--surface)}
.pdp .qty button{width:48px;border:0;background:none;font-family:var(--font-body);font-size:var(--fs-lede);font-weight:300;cursor:pointer;color:var(--ink)}
.pdp .qty input{width:40px;text-align:center;border:0;background:none;font:inherit;font-size:var(--fs-body);outline:none;color:var(--ink)}
.buyrow .btn{flex:1;justify-content:center}
.buy>.fine{margin-top:16px}
.pusp{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:24px;padding-top:24px;border-top:1px solid var(--border)}
.pusp span{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-fine);color:var(--ink-soft)}
.pusp svg{width:17px;height:17px;stroke-width:1.1;color:var(--accent)}
.pdp-acc{margin-top:24px;border-top:1px solid var(--border)}
.pdp-acc details{border-bottom:1px solid var(--border)}
.pdp-acc summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;cursor:pointer;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;list-style:none}
.pdp-acc summary::-webkit-details-marker{display:none}
.pdp-acc summary svg{width:15px;height:15px;flex:none;transition:transform .3s}
.pdp-acc details[open] summary svg{transform:rotate(45deg)}
.pdp-acc .acc__body{padding:0 0 24px;font-size:var(--fs-small);color:var(--ink-soft);max-width:60ch}
.pdp-acc .acc__body ul{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
/* inside-the-box band */
.why{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(34px,5vw,116px);align-items:center}
.why__shot{aspect-ratio:5/6;background-image:url('/themes/nubody/img/still-life.jpg');border-radius:var(--radius-image)}
.why h2{font-size:var(--fs-h1);margin-top:20px}
.why h2 em{font-style:normal;color:var(--ink)}
.why .lede{margin-top:20px}
.inb{display:flex;flex-direction:column;margin-top:24px;border-top:1px solid var(--border)}
.inb>div{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--border)}
.inb .qtyn{font-family:var(--font-heading);font-size:var(--fs-lede);color:var(--accent)}
.inb h4{font-family:var(--font-body);font-size:var(--fs-body);font-weight:500;letter-spacing:.02em;margin:0}
.inb p{font-size:var(--fs-small);color:var(--ink-soft);margin-top:4px}
/* related */
.relhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:clamp(34px,3.4vw,60px)}

@media (max-width:900px){
.pdp{grid-template-columns:1fr;gap:34px}
.buy{position:static}
.why{grid-template-columns:1fr;gap:24px}
.why__shot{aspect-ratio:4/3}
.buyrow{flex-wrap:wrap}
.buyrow .btn{flex:1 1 100%}
.opt__price{margin-left:0;width:100%}
}

/* ── page: category ── */
/* wellness category page */
.chero .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:var(--fs-fine);letter-spacing:.04em;color:var(--ink-soft);margin-bottom:clamp(20px,2.4vw,34px)}
.chero .crumbs a{color:var(--ink-soft);text-decoration:none}
.chero .crumbs a:hover{color:var(--ink);text-decoration:underline}
.chero .crumbs svg{width:11px;height:11px;transform:rotate(-90deg)}
.chero{background:var(--surface);border-bottom:1px solid var(--border);padding:clamp(34px,4.6vw,60px) 0}
.chero__row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,60px);align-items:end}
.chero h1{font-size:var(--fs-h1);margin-top:16px}
.chero .lede{max-width:44ch;padding-bottom:8px}
.catband{padding:clamp(34px,3.4vw,60px) 0 var(--band-y)}
.flt-t{position:absolute;opacity:0;pointer-events:none}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.toolbar__count{font-size:var(--fs-small);color:var(--ink-soft)}
.flt-btn{display:none;align-items:center;gap:12px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;border:1px solid var(--ink);padding:13px 20px;cursor:pointer;background:var(--surface)}
.flt-btn svg{width:16px;height:16px}
.sortsel{display:inline-flex;align-items:center;gap:12px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.sortsel select{font:inherit;font-size:var(--fs-small);font-weight:300;letter-spacing:.02em;text-transform:none;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-input);padding:12px 16px;outline:none;cursor:pointer}
.cat-layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:clamp(24px,3.6vw,60px);align-items:start;padding-top:clamp(24px,2.8vw,44px)}
.filters{position:sticky;top:24px}
.fgroup{border-bottom:1px solid var(--border)}
.fgroup summary{display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;cursor:pointer;list-style:none}
.fgroup summary::-webkit-details-marker{display:none}
.fgroup summary svg{width:14px;height:14px;transition:transform .3s}
.fgroup[open]>summary svg{transform:rotate(180deg)}
.fgroup__body{display:flex;flex-direction:column;gap:12px;padding:2px 0 24px}
.fopt{display:flex;align-items:center;gap:12px;font-size:var(--fs-small);color:var(--ink-soft);cursor:pointer}
.fopt input{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;border:1px solid var(--muted);background:var(--surface);cursor:pointer;display:grid;place-items:center;flex:none}
.fopt input:checked{background:var(--ink);border-color:var(--ink)}
.fopt input:checked::after{content:"";width:8px;height:4px;border-left:1.5px solid var(--surface);border-bottom:1.5px solid var(--surface);transform:translateY(-1px) rotate(-45deg)}
.fopt .n{margin-left:auto;font-size:var(--fs-fine);color:var(--ink-soft)}
.fclear{display:inline-block;margin-top:20px;font-size:var(--fs-fine);color:var(--ink-soft)}
.pgrid--cat{grid-template-columns:repeat(3,1fr)}
.editcta{background:var(--surface-dark);color:var(--on-dark)}
.editcta .kicker{color:var(--accent-soft)}
.editcta h2{font-size:var(--fs-h1);margin:20px 0 20px}
.editcta em{font-style:normal;color:var(--accent-soft)}
.editcta p.lede{color:var(--ash);max-width:52ch;margin:0 auto 34px}

@media (max-width:960px){
.cat-layout{grid-template-columns:1fr;padding-top:0;gap:0}
.flt-btn{display:inline-flex}
.toolbar{flex-wrap:wrap}
.toolbar__count{order:3;width:100%}
.filters{display:none;position:static;border:1px solid var(--border);background:var(--surface);padding:8px 20px 20px;margin:20px 0 8px}
.flt-t:checked~.cat-layout .filters{display:block}
.cat-layout>div{padding-top:24px}
}
@media (max-width:900px){
.chero__row{grid-template-columns:1fr;gap:16px}
}

/* ── page: cart ── */
/* cart page */
.cartband{padding:clamp(34px,4vw,60px) 0 var(--band-y);background:var(--bg)}
.cart__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:20px;margin-bottom:clamp(24px,2.8vw,44px)}
.cart__head h1{font-size:var(--fs-h1)}
.cart__head .fine{font-size:var(--fs-small)}
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,384px);gap:clamp(24px,4vw,60px);align-items:start}
.freebar{display:flex;flex-direction:column;gap:12px;padding:16px 20px;background:var(--surface-alt);border:1px solid var(--border);font-size:var(--fs-small);color:var(--ink-soft)}
.freebar b{font-weight:500;color:var(--ink)}
.freebar .meter{height:2px;background:var(--border)}
.freebar .meter i{display:block;height:100%;width:100%;background:var(--accent)}
.cline{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:clamp(16px,2vw,24px);padding:24px 0;border-bottom:1px solid var(--border)}
.cline__img{display:block;aspect-ratio:4/5;border-radius:var(--radius-image)}
.cline h3{font-size:var(--fs-quote);margin-top:8px}
.cline h3 a{text-decoration:none}
.cline h3 a:hover{text-decoration:underline}
.cline__var{margin-top:8px;font-size:var(--fs-small);color:var(--ink-soft)}
.cline__var .subtag{color:var(--ink);font-weight:500}
.cline__acts{display:flex;align-items:center;gap:20px;margin-top:20px}
.cline .qty{display:inline-flex;align-items:stretch;height:44px;border:1px solid var(--border);background:var(--surface)}
.cline .qty button{width:42px;border:0;background:none;font-family:var(--font-body);font-size:var(--fs-lede);font-weight:300;cursor:pointer;color:var(--ink)}
.cline .qty button:hover{background:var(--surface-alt)}
.cline .qty input{width:36px;text-align:center;border:0;background:none;font:inherit;font-size:var(--fs-small);outline:none;color:var(--ink)}
.cline__rm{font-size:var(--fs-fine);color:var(--ink-soft)}
.cline__price{text-align:right;font-size:var(--fs-body);padding-top:8px}
.cline__price s{display:block;font-size:var(--fs-small);color:var(--ink-soft);text-decoration-color:var(--muted)}
.cart__cont{margin-top:24px}
.csum{border:1px solid var(--border);background:var(--surface);padding:clamp(24px,2.4vw,34px);position:sticky;top:24px}
.csum h2{font-size:var(--fs-h3);margin-bottom:16px}
.csum__row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:var(--fs-small);color:var(--ink-soft)}
.csum__row span:last-child{color:var(--ink)}
.csum__row.total{border-top:1px solid var(--border);margin-top:12px;padding-top:20px;font-size:var(--fs-body);color:var(--ink);align-items:baseline}
.csum__row.total b{font-weight:300;font-size:var(--fs-quote)}
.code{border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:16px 0 4px}
.code summary{display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;cursor:pointer;list-style:none}
.code summary::-webkit-details-marker{display:none}
.code summary svg{width:14px;height:14px;transition:transform .3s}
.code[open] summary svg{transform:rotate(45deg)}
.code__row{display:flex;gap:8px;padding-bottom:16px}
.code__row input{flex:1;min-width:0;font:inherit;font-size:var(--fs-small);color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-input);padding:12px 12px;outline:none}
.code__row button{font-family:var(--font-body);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;background:none;border:1px solid var(--ink);padding:0 18px;cursor:pointer}
.code__row button:hover{background:var(--ink);color:var(--surface)}
.csum .btn{width:100%;justify-content:center;margin-top:20px}
.csum__secure{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.csum__secure svg{width:13px;height:13px}
.csum>.fine{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}

@media (max-width:960px){
.cart-layout{grid-template-columns:1fr;gap:34px}
.csum{position:static}
}
@media (max-width:720px){
.cline{grid-template-columns:84px minmax(0,1fr)}
.cline__price{grid-column:2;text-align:left;padding-top:0;display:flex;gap:12px;align-items:baseline}
.cline__price s{display:inline}
.cline__acts{flex-wrap:wrap;gap:16px}
}

/* ── page: cart-drawer ── */
/* background page (behind the drawer) */
.bgband{padding:clamp(34px,3.4vw,60px) 0 var(--band-y);background:var(--bg)}
.bgband .edithead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:clamp(34px,3.4vw,60px)}
/* drawer */
.drw-t{position:absolute;opacity:0;pointer-events:none}
.scrim{position:fixed;inset:0;z-index:80;background:rgba(20,20,22,.46);opacity:0;pointer-events:none;transition:opacity .45s;cursor:pointer}
.drw-t:checked~.scrim{opacity:1;pointer-events:auto}
.drw{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(432px,100vw);background:var(--surface);display:flex;flex-direction:column;box-shadow:var(--shadow-raised);transform:translateX(103%);transition:transform .55s cubic-bezier(.22,.75,.22,1)}
.drw-t:checked~.drw{transform:none}
.drw__head{display:flex;align-items:baseline;gap:12px;padding:24px 24px;border-bottom:1px solid var(--border)}
.drw__head h2{font-size:var(--fs-h3)}
.drw__head .fine{font-size:var(--fs-fine)}
.drw__x{margin-left:auto;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border);background:var(--surface);cursor:pointer;align-self:center}
.drw__x:hover{border-color:var(--ink)}
.drw__x svg{width:15px;height:15px}
.drw__free{display:flex;flex-direction:column;gap:8px;padding:16px 24px;background:var(--surface-alt);border-bottom:1px solid var(--border);font-size:var(--fs-fine);color:var(--ink-soft)}
.drw__free b{font-weight:500;color:var(--ink)}
.drw__free .meter{height:2px;background:var(--border)}
.drw__free .meter i{display:block;height:100%;width:100%;background:var(--accent)}
.drw__lines{flex:1;overflow:auto;padding:2px 24px}
.dline{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:16px;padding:20px 0;border-bottom:1px solid var(--border)}
.dline:last-child{border-bottom:0}
.dline__img{display:block;aspect-ratio:4/5;border-radius:var(--radius-image)}
.dline h3{font-size:var(--fs-lede)}
.dline h3 a{text-decoration:none}
.dline h3 a:hover{text-decoration:underline}
.dline__var{font-size:var(--fs-fine);color:var(--ink-soft);margin-top:4px}
.dline__var .subtag{color:var(--ink);font-weight:500}
.dline__acts{display:flex;align-items:center;gap:16px;margin-top:12px}
.dline .qty{display:inline-flex;align-items:stretch;height:36px;border:1px solid var(--border);background:var(--surface)}
.dline .qty button{width:32px;border:0;background:none;font-family:var(--font-body);font-size:var(--fs-body);font-weight:300;cursor:pointer;color:var(--ink)}
.dline .qty button:hover{background:var(--surface-alt)}
.dline .qty input{width:30px;text-align:center;border:0;background:none;font:inherit;font-size:var(--fs-small);outline:none;color:var(--ink)}
.dline__rm{font-size:var(--fs-label);color:var(--ink-soft)}
.dline__price{text-align:right;font-size:var(--fs-small);padding-top:2px}
.dline__price s{display:block;font-size:var(--fs-fine);color:var(--ink-soft);text-decoration-color:var(--muted)}
.drw__foot{border-top:1px solid var(--border);padding:20px 24px 24px;display:flex;flex-direction:column;gap:12px;background:var(--surface)}
.drw__row{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-body)}
.drw__row b{font-weight:300;font-size:var(--fs-lede)}
.drw__foot .btn{width:100%;justify-content:center}
.drw__view{text-align:center;font-size:var(--fs-small)}
.drw__foot .fine{text-align:center}
/* demo reopen control */
.drw__open{position:fixed;right:22px;bottom:22px;z-index:70;display:inline-flex;align-items:center;gap:12px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;padding:20px 24px;background:var(--ink);color:var(--surface);border:1px solid var(--ink);cursor:pointer;box-shadow:var(--shadow-raised)}
.drw__open svg{width:17px;height:17px}
.drw__open:hover{background:var(--accent);border-color:var(--accent)}
.drw-t:checked~.drw__open{display:none}



/* nubody HOME (2026-10-01) — Claude Design project d3483983-…, nubody/index.html,
   page stylesheet verbatim except: classes prefixed (hero→hm-hero, split→jsplit,
   .hl→jsplit__hl, how/hstep→hm-how/hm-step, secs-band/secs/sec-tile→hm-secs-band/
   hm-secs/hm-tile, trust→hm-trust) so they never collide with the older home /
   audience-hub bands that still use .hero/.secs/.sec-tile; the hero photo reads
   the section's --hm-hero-img vars; the header/footer responsive rules the page
   repeated are dropped (design-shared.css carries them). Mockup deltas live in
   css-home-mockup.css. */
/* hero */
.hm-hero{position:relative;background:var(--surface-alt);overflow:hidden}
.hm-hero__shot{position:absolute;inset:0;background-image:var(--hm-hero-img);background-size:cover;background-position:right center}
.hm-hero__copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:var(--max-width);margin:0 auto;padding:clamp(60px,8vw,116px) var(--gutter) clamp(60px,8vw,116px)}
.hm-hero h1{font-size:var(--fs-hero);line-height:.94;letter-spacing:-.035em}
.hm-hero__sub{font-family:var(--font-heading);font-size:var(--fs-h2);line-height:1.3;max-width:24ch;color:var(--ink)}
.hm-hero .btn{margin-top:12px}
/* journey split */
.jsplit{display:grid;grid-template-columns:1fr 1fr;background:var(--bg)}
.jsplit__p{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:clamp(44px,4.4vw,60px) clamp(24px,4.4vw,60px)}
.jsplit__p .btn{margin-top:auto;align-self:stretch;justify-content:center}
.jsplit__p h2{font-size:var(--fs-h1)}
.jsplit__p .lede{max-width:40ch;margin-bottom:24px}
.jsplit__p--new{background:var(--surface-dark);color:var(--on-dark)}
.jsplit__p--new .kicker{color:var(--accent-soft)}
.jsplit__p--new .lede{color:var(--on-dark)}
.jsplit__p--mem{background:var(--surface)}
.jsplit__p--mem .kicker{color:var(--ink)}
.jsplit__p--mem .jsplit__hl{font-family:var(--font-heading);font-size:var(--fs-h3);color:var(--accent)}
/* steps */
.hm-how{background:var(--bg);padding:clamp(44px,5vw,60px) 0}
.hm-how__title{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.hm-how__title::before,.hm-how__title::after{content:"";height:1px;background:var(--border)}
.hm-how__title h2{font-family:var(--font-body);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase}
.hm-how__list{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:clamp(24px,3vw,44px) 0;border-bottom:1px solid var(--border)}
.hm-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.hm-step+.hm-step::before{content:"";position:absolute;left:-14px;top:26px;width:28px;height:28px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M3.5 12h17M14 5.5l6.5 6.5L14 18.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M3.5 12h17M14 5.5l6.5 6.5L14 18.5'/%3E%3C/svg%3E") center/contain no-repeat}
.hm-step__n{font-family:var(--font-heading);font-size:var(--fs-h1);line-height:1;color:var(--accent-soft)}
.hm-step h3{font-size:var(--fs-quote);line-height:1.2;max-width:12ch}
.hm-step p{font-size:var(--fs-small);color:var(--ink-soft);max-width:24ch}
/* sections */
.hm-secs-band{background:var(--bg);padding:clamp(20px,2vw,34px) 0 var(--band-y)}
.hm-secs-band h2{font-size:var(--fs-h1);text-transform:uppercase;letter-spacing:var(--ls-label)}
.hm-secs-band .rule{margin:16px auto 0}
.hm-secs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,24px);margin-top:clamp(24px,3vw,44px)}
.hm-tile{position:relative;display:flex;flex-direction:column;text-decoration:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;transition:box-shadow .35s}
.hm-tile:hover{box-shadow:var(--shadow-card)}
.hm-tile__img{aspect-ratio:2/1;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.hm-tile:hover .hm-tile__img{transform:scale(1.04)}
.hm-tile__body{position:relative;display:flex;flex-direction:column;gap:4px;padding:20px 20px 24px;background:var(--surface)}
.hm-tile h3{font-size:var(--fs-quote)}
.hm-tile p{font-size:var(--fs-small);color:var(--ink-soft)}
.hm-tile .go{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink)}
.hm-tile .go svg{width:14px;height:14px;transition:transform .3s}
.hm-tile:hover .go svg{transform:translateX(5px)}
.hm-tile:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
/* trust strip */
.hm-trust{background:var(--surface-dark);color:var(--on-dark)}
.hm-trust ul{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;list-style:none;margin:0;padding:clamp(24px,3vw,44px) 0}
.hm-trust li{font-family:var(--font-heading);font-size:var(--fs-quote);text-align:center;padding:4px clamp(16px,3vw,44px)}
.hm-trust li+li{border-left:1px solid var(--border-dark)}
/* mobile */
@media (max-width:960px){
.jsplit{grid-template-columns:1fr}
.hm-how__list{grid-template-columns:1fr 1fr;gap:34px 0}
.hm-step:nth-child(3)::before{display:none}
.hm-secs{grid-template-columns:1fr 1fr}
.hm-trust ul{grid-template-columns:1fr 1fr;gap:20px 0}
.hm-trust li:nth-child(3){border-left:0}
}
@media (max-width:720px){
.hm-hero__shot{position:relative;inset:auto;display:block;aspect-ratio:4/3;background-image:var(--hm-hero-img-m,var(--hm-hero-img));background-position:center}
.hm-hero__copy{padding:44px var(--gutter) 44px;gap:20px}
.hm-hero .btn{align-self:stretch;justify-content:center}
.hm-how__list{grid-template-columns:1fr;gap:24px}
.hm-step::before{display:none}
.hm-secs{grid-template-columns:1fr}
.hm-trust ul{grid-template-columns:1fr;gap:0}
.hm-trust li{border-left:0!important;padding:12px 0}
.hm-trust li+li{border-top:1px solid var(--border-dark)}
}


/* ── CHROME ZONES (header / footer) ──
   The header and footer are the zone builders (templates/header.json +
   footer.json → rows / columns / widgets). The zone renderer emits stable
   ids (#block-<id>) and data-sub-element hooks; the rules below map that DOM
   onto the design's .hdr / .ftr anatomy so the zone stays merchant-editable
   AND pixel-faithful. Merchant style edits compile with !important and win. */
#site-header{background:var(--surface);border-bottom:1px solid var(--border);position:relative;z-index:20}
/* main row: utility left · wordmark · utility right. Text sits 24px inside the
   nav hairline's ends (home mockup, 2026-10-01). */
#block-hdr-row-main{max-width:var(--max-width);margin:0 auto;padding:clamp(16px,1.6vw,24px) calc(var(--gutter) + 24px) clamp(12px,1.4vw,24px)}
#block-hdr-col-util-l,#block-hdr-col-util-r{flex:1 1 0}
/* The wordmark stays dead centre whatever the utility columns hold: the zone
   renderer drops an EMPTY column, and with the left utility link gone (27 Oct
   2026, "How it works" moved into the menu) a flex row put the wordmark on the
   left. Three fixed tracks instead; desktop only — the row is hidden ≤768px. */
@media (min-width:769px){
  #site-header #block-hdr-row-main{display:grid!important;grid-template-columns:1fr auto 1fr;justify-content:normal!important}
  #block-hdr-col-util-l{grid-column:1;grid-row:1}
  #block-hdr-col-logo{grid-column:2;grid-row:1}
  #block-hdr-col-util-r{grid-column:3;grid-row:1}
}
/* the wordmark is artwork (brand book §01): img/wordmark-ink.svg / wordmark-oat.svg, Playfair Display
   Medium with the Bronze full stop, never typed. Sized as the old typed mark (54px type → 182px wide);
   the brand minimum is 90px. */
#site-header [data-block-type="header-logo"] [data-sub-element="image"]{display:block;width:clamp(114px,14.8vw,182px);height:auto;max-width:none!important;max-height:none!important}
#block-hdr-row-mobile [data-block-type="header-logo"] [data-sub-element="image"]{width:104px}
footer[data-zone="footer"] #block-ftr-logo [data-sub-element="image"]{display:block;width:135px;height:auto;max-width:none!important;max-height:none!important}
#site-header [data-sub-element="search-toggle"],
#site-header [data-block-type="header-account"] [data-sub-element="container"],
#site-header [data-block-type="header-cart"] [data-sub-element="container"]{display:inline-flex;align-items:center;gap:8px;margin:0;font-family:var(--font-body);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap;background:none;border:0;padding:0;cursor:pointer}
#site-header [data-sub-element="search-toggle"]::after{content:none}
#site-header [data-block-type="header-cart"] [data-sub-element="badge"]{font-size:inherit;letter-spacing:inherit;color:inherit;background:none;position:static;min-width:0;height:auto;padding:0;border-radius:0;line-height:1}
#site-header [data-block-type="header-cart"] [data-sub-element="badge"]::before{content:"("}
#site-header [data-block-type="header-cart"] [data-sub-element="badge"]::after{content:")"}
#site-header [data-sub-element="icon"]{display:inline-flex;width:17px;height:17px}
#site-header [data-sub-element="icon"] svg{width:17px;height:17px;stroke-width:1.3}
/* primary navigation (header-menu widget, menu-builder source, mega style) on
   the left and the black "Start your consultation" button (hdr-cta, a button
   block) on the right, inside the content width (27 Oct 2026: the menu is
   weight management only — four links, so they sit together instead of
   spreading edge to edge). The hairline above them runs the full page width,
   like the header's bottom border (Tony, 3 Nov 2026: stopping it at the
   content width read as cut off). The row stays full-width + positioned so a
   mega panel still centres on the page. */
#block-hdr-row-menu{position:relative}
#block-hdr-col-menu{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px}
#block-hdr-col-menu::before{content:"";position:absolute;top:0;left:0;right:0;border-top:1px solid var(--border)}
#block-hdr-menu{display:flex;justify-content:flex-start;flex-wrap:wrap;flex:1 1 auto;min-width:0}
#block-hdr-menu>:first-child [data-sub-element^="menu-link"],#block-hdr-menu>[data-sub-element^="menu-link"]:first-child{padding-left:24px}
#block-hdr-cta{display:inline-flex;align-items:center;gap:12px;flex:none;margin:8px 0;padding:16px 24px;font-family:var(--font-body);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;text-decoration:none;white-space:nowrap;border:1px solid var(--ink);border-radius:var(--radius-button);background:var(--ink);color:var(--surface);transition:background .35s,border-color .35s,color .35s}
#block-hdr-cta:hover{background:transparent;color:var(--ink)}
#block-hdr-menu [data-sub-element^="menu-link"],#block-hdr-menu a[data-nav-parent]{display:block;padding:16px clamp(8px,1.4vw,24px);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap;transition:color .3s}
#block-hdr-menu a[data-nav-parent] svg[data-nav-chevron]{display:none}
#block-hdr-menu [data-sub-element^="menu-link"]:hover,#block-hdr-menu [data-has-children]:hover>a[data-nav-parent]{color:var(--accent);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:7px}
#block-hdr-menu [data-sub-element="menu-link-spark"]{color:var(--accent)}
#block-hdr-menu [data-sub-element="menu-badge"],#mobile-drawer [data-sub-element="menu-badge"]{display:none!important}
/* the accordion twins (mobile) never show inside the desktop bar */
#block-hdr-menu>details[data-nav-accordion]{display:none}
/* mega panel: full-width, single list column + featured tile (design .mega) */
#block-hdr-menu [data-nav-dropdown][data-nav-mega]{left:50%;right:auto;top:100%;width:100vw;transform:translateX(-50%);background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
#block-hdr-menu [data-mega-grid]{display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-auto-flow:row;gap:0 clamp(24px,4vw,60px);max-width:var(--max-width);margin:0 auto;padding:clamp(24px,3vw,44px) var(--gutter);background:var(--surface);color:var(--ink);align-items:start;box-shadow:none!important}
#block-hdr-menu [data-mega-grid]:not([data-has-featured]){grid-template-columns:minmax(0,1fr)}
#block-hdr-menu [data-mega-column]{grid-column:1;display:block;padding:12px 0;border-bottom:1px solid var(--border);gap:0;min-width:0}
#block-hdr-menu [data-mega-column]:last-of-type{border-bottom:0}
#block-hdr-menu [data-mega-column] [data-sub-element="mega-column-title"]{display:block;font-family:var(--font-heading);font-weight:300;font-size:var(--fs-quote);letter-spacing:-.01em;text-transform:none;color:var(--ink);text-decoration:none;margin:0;transition:color .2s}
#block-hdr-menu [data-mega-column] [data-sub-element="mega-column-title"]:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
#block-hdr-menu [data-sub-element="mega-column-desc"]{display:block;margin-top:4px;font-size:var(--fs-small);font-weight:300;color:var(--ink-soft);letter-spacing:0;text-transform:none}
#block-hdr-menu [data-mega-featured]{grid-column:2;grid-row:1/span 40;display:flex;flex-direction:column;gap:8px;text-decoration:none;text-transform:none;letter-spacing:0;padding:0;white-space:normal;color:var(--ink)}
#block-hdr-menu [data-sub-element="mega-featured-image"]{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--border);border-radius:0!important}
#block-hdr-menu [data-sub-element="mega-featured-title"]{font-family:var(--font-heading);font-weight:300;font-size:var(--fs-quote);margin-top:8px;letter-spacing:-.01em}
#block-hdr-menu [data-sub-element="mega-featured-text"]{font-size:var(--fs-small);font-weight:300;color:var(--ink-soft)}
#block-hdr-menu [data-mega-featured]::after{content:"Explore  →";display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink);margin-top:4px}
#block-hdr-menu [data-mega-featured]:hover [data-sub-element="mega-featured-title"]{color:var(--accent)}
/* mobile rows */
#block-hdr-row-mobile{padding:16px var(--gutter)}
#block-hdr-row-mobile [data-sub-element="search-toggle"]::after{content:none}
#block-hdr-row-mobile [data-block-type="header-hamburger"] [data-sub-element="toggle"]{display:inline-flex;align-items:center;color:var(--ink);background:none;border:0;padding:0}
#block-hdr-row-mobile [data-block-type="header-hamburger"] svg{width:22px;height:22px}
/* mobile drawer (platform mobile-drawer.js, styled here; Tony 2026-09-02:
   full-height, slides from the left, accordion sections, CTAs at the foot) */
#mobile-drawer[data-menu-drawer]{width:min(420px,92vw)!important;max-width:92vw!important;background:var(--surface)!important;color:var(--ink);box-shadow:var(--shadow-raised)!important;display:flex;flex-direction:column;transition:transform .55s cubic-bezier(.22,.75,.22,1)!important}
#mobile-drawer-backdrop[data-menu-backdrop]{background:rgba(20,20,22,.46)!important;transition:opacity .45s!important}
#mobile-drawer>button[aria-label="Close menu"]{top:14px!important;right:14px!important;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border)!important;background:var(--surface)!important;color:var(--ink)!important;padding:0!important}
#mobile-drawer>button[aria-label="Close menu"] svg{width:16px;height:16px;stroke-width:1.3}
#mobile-drawer [data-drawer-content]{padding:60px 0 0!important;display:flex;flex-direction:column;min-height:100%}
#mobile-drawer [data-drawer-content]>div:first-child{flex:1 0 auto}
#mobile-drawer details[data-nav-accordion]{border-bottom:1px solid var(--border)}
#mobile-drawer summary[data-nav-accordion-summary]{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px var(--gutter);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink);cursor:pointer;list-style:none}
#mobile-drawer summary[data-nav-accordion-summary]::-webkit-details-marker{display:none}
#mobile-drawer summary[data-nav-accordion-summary] svg[data-nav-accordion-chevron]{width:14px;height:14px;stroke-width:1.3;transition:transform .3s}
#mobile-drawer details[open]>summary[data-nav-accordion-summary] svg[data-nav-accordion-chevron]{transform:rotate(180deg)}
#mobile-drawer [data-nav-accordion-children]{padding:0 0 8px}
#mobile-drawer a[data-nav-accordion-child]{display:block;padding:12px var(--gutter) 12px calc(var(--gutter) + 16px);font-size:var(--fs-small);font-weight:300;letter-spacing:.04em;text-transform:none;color:var(--ink-soft);text-decoration:none;border:0}
#mobile-drawer a[data-nav-accordion-viewall]{order:99}
#mobile-drawer [data-nav-accordion-children]{display:flex;flex-direction:column}
#mobile-drawer [data-drawer-content] a[data-nav-item]{display:block;padding:16px var(--gutter)!important;font-family:var(--font-body);font-size:var(--fs-label)!important;font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink)!important;border-bottom:1px solid var(--border)!important;text-decoration:none}
#mobile-drawer [data-drawer-content] a[href="/account"]:last-child{display:none}
#mobile-drawer [data-drawer-foot]{margin-top:auto}
#mobile-drawer .nb-drawer-foot,.nb-drawer-foot[data-drawer-extra]{display:flex;flex-direction:column;gap:12px;padding:20px var(--gutter) 24px;border-top:1px solid var(--border)}
.nb-drawer-foot[data-drawer-extra][hidden]{display:none}
#mobile-drawer .nb-drawer-foot .btn{justify-content:center;width:100%}
#mobile-drawer .nb-drawer-foot .mnav__sup{margin-top:8px;font-size:var(--fs-fine);color:var(--ink-soft);text-align:center}
#mobile-drawer .nb-drawer-foot .mnav__sup a{color:var(--ink)}
#block-hdr-row-drawer-extra{display:none!important}
/* footer */
footer[data-zone="footer"]{background:var(--surface-dark);color:var(--on-dark);padding:clamp(60px,6vw,116px) 0 34px}
footer[data-zone="footer"] a{color:var(--on-dark);text-decoration:none}
footer[data-zone="footer"] a:hover{color:var(--accent-soft);text-decoration:underline}
#block-ftr-row-main{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter) 60px;border-bottom:1px solid var(--border-dark)}
#block-ftr-col-brand{flex:1.4 1 0}
#block-ftr-col-start,#block-ftr-col-patients,#block-ftr-col-help,#block-ftr-col-company{flex:1 1 0}
footer[data-zone="footer"] [data-sub-element="tagline"]{display:block;margin-top:20px;max-width:30ch;font-size:var(--fs-small);color:var(--ash);line-height:1.62}
footer[data-zone="footer"] [data-sub-element="social-row"]{display:flex;gap:12px;margin-top:24px}
footer[data-zone="footer"] [data-sub-element="social-link"]{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--border-dark);border-radius:var(--radius-pill);color:var(--on-dark)}
footer[data-zone="footer"] [data-sub-element="social-icon"],footer[data-zone="footer"] [data-sub-element="social-icon"] svg{width:16px;height:16px}
footer[data-zone="footer"] [data-block-type="footer-links"] [data-sub-element="title"],footer[data-zone="footer"] [data-block-type="footer-links"] h4,footer[data-zone="footer"] [data-block-type="footer-links"] h5{font-family:var(--font-body);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ash);margin:0 0 20px}
footer[data-zone="footer"] [data-block-type="footer-links"] ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:var(--fs-small)}
footer[data-zone="footer"] [data-block-type="footer-links"] a{font-size:var(--fs-small)}
#block-ftr-row-bottom{max-width:var(--max-width);margin:0 auto;padding:24px var(--gutter) 0;font-size:var(--fs-fine);letter-spacing:var(--ls-fine);color:var(--ash)}
#block-ftr-row-bottom p,#block-ftr-row-bottom [data-sub-element="copy-text"],#block-ftr-row-bottom [data-sub-element="legal-part"],#block-ftr-reg{display:block;max-width:78ch;color:var(--ash);margin:0;font-size:var(--fs-fine);letter-spacing:var(--ls-fine);line-height:1.62}
#block-ftr-col-reg{flex:none}
@media (max-width:960px){
  #block-hdr-menu [data-sub-element^="menu-link"],#block-hdr-menu a[data-nav-parent]{font-size:var(--fs-label);letter-spacing:.04em}
}

/* ── DESIGN CARD — platform hooks the mockup didn't need ──
   (wishlist / subscription badge / real <img> in the shot / button reset for
   the quick-add reveal / inline quick-add atom / section icon wrappers). */
.pcard__shot-link{display:block}
.pcard__img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.pcard__quick{border:0;font-family:var(--font-body);width:100%;cursor:pointer}
.pcard__quick--inline{position:static;transform:none;display:inline-flex;width:auto;padding:12px 20px}
.pcard__sub-badge{top:auto;bottom:14px;background:var(--ink);color:var(--surface)}
.pcard__wish{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;display:grid;place-items:center;background:var(--surface);color:var(--ink);border:0;border-radius:var(--radius-pill);cursor:pointer}
.pcard__wish svg{width:16px;height:16px}
.pcard__body .pcard__brand{display:block;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.pcard__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px}
.pcard__row--single{display:block}
.pcard__text{font-size:var(--fs-small);color:var(--ink-soft)}
.pcard__spacer--s{height:6px}.pcard__spacer--m{height:12px}.pcard__spacer--l{height:22px}
/* icon wrappers: the mockup put the <svg> straight in the cell; the section
   wraps it in a data-el span so the style panel can target the icon. The
   wrapper must not change the line box the design's sizing assumed. */
.usp__icon,.mem__icon{display:inline-flex}
.rit__mark{display:block}
.nl-band{background:var(--surface-alt)}
.nl__msg{width:100%;margin:0 0 12px}
.nl__msg--err{color:var(--sale)}
.nlform{flex-wrap:wrap}

/* ── CONSULTATION (consultation gate pages + PDP gate box) ── */
.consult .wrap-n{max-width:820px}
.consult__head{display:flex;flex-direction:column;gap:20px;margin-bottom:clamp(34px,4vw,60px)}
.consult__title{margin:0}
.consult__notice{border:1px solid var(--border);background:var(--surface);padding:24px 24px;margin-bottom:34px;display:flex;flex-direction:column;gap:12px}
.consult__errors{border:1px solid var(--sale);color:var(--sale);padding:16px 20px;margin-bottom:24px;font-size:var(--fs-small)}
.consult__errors p{margin:8px 0 0}
.consult__form{display:flex;flex-direction:column}
.consult__q{border:0;margin:0;padding:24px 0;border-top:1px solid var(--border);min-width:0}
.consult__q.is-error{border-top-color:var(--sale)}
.consult__legend{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:baseline;padding:0;margin:0 0 16px;font-size:var(--fs-lede);color:var(--ink);line-height:1.45}
.consult__n{font-family:var(--font-heading);font-size:var(--fs-small);letter-spacing:.14em;color:var(--accent)}
.consult__help{margin:-8px 0 16px 60px;font-size:var(--fs-small);color:var(--ink-soft)}
.consult__choices{display:flex;flex-wrap:wrap;gap:12px;margin-left:60px}
.consult__choices--small{margin-bottom:16px}
.choice{position:relative;display:inline-flex}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.choice span{display:inline-flex;align-items:center;padding:12px 24px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;transition:background .3s,color .3s;min-width:110px;justify-content:center}
.choice:hover span{background:var(--surface-alt)}
.choice input:checked+span{background:var(--ink);color:var(--surface)}
.choice input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.consult__input{display:block;width:100%;max-width:420px;margin-left:60px;font:inherit;font-size:var(--fs-body);color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-input);padding:16px 16px;outline:none}
.consult__input:focus{border-color:var(--accent)}
textarea.consult__input{max-width:100%;resize:vertical}
.consult__row{display:flex;gap:16px;margin-left:60px;flex-wrap:wrap}
.consult__row .consult__input{margin-left:0;max-width:180px}
.consult__field{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-fine);letter-spacing:.04em;color:var(--ink-soft)}
.consult__bmi{margin:16px 0 0 60px;font-size:var(--fs-body);color:var(--ink-soft)}
.consult__bmi strong{font-family:var(--font-heading);font-size:var(--fs-quote);color:var(--ink);font-weight:300}
.consult__error{margin:12px 0 0 60px;font-size:var(--fs-small);color:var(--sale)}
.consult__file{display:inline-flex;flex-direction:column;gap:12px;margin-left:60px;cursor:pointer}
.consult__file input{position:absolute;opacity:0;width:1px;height:1px}
.consult__file .btn{pointer-events:none}
.consult__q--photo .fine{margin-left:60px;margin-top:12px}
.consult__foot{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:34px;border-top:1px solid var(--border)}
.consult__reasons{margin:0;padding-left:20px;color:var(--ink-soft);font-size:var(--fs-body);display:flex;flex-direction:column;gap:8px}
.consult__products{margin-top:clamp(24px,3vw,44px)}
.consult__retake{margin-top:24px}
.consult__retake a{color:var(--ink)}
/* Questionnaire additions (form builder, 2026-10-17): small print under the
   answers, tick-all-that-apply pills, the identity note on the last screen. */
.qs--note{margin-top:12px}
.pill--tick::before{content:"";width:11px;height:11px;border:1px solid currentColor;flex:none}
.pill--tick:has(input:checked)::before{background:currentColor;box-shadow:inset 0 0 0 2px var(--ink)}
.idnote{display:flex;flex-direction:column;gap:8px;border:1px solid var(--border);background:var(--surface-alt);padding:20px 24px;margin-top:20px}
.idnote b{font-weight:500;font-size:var(--fs-small)}
.idnote p{margin:0;font-size:var(--fs-small);line-height:1.55;color:var(--ink-soft)}
/* Consultation result: one row per treatment — the My Account row (partials/account-treatment-row,
   Tony 4 Nov 2026: "do it as rows"); the row's rules are with .arow below. */
.treat-rows{display:flex;flex-direction:column;gap:12px;margin-top:clamp(24px,3vw,44px)}
.treat__sheet-body .treat__desc{margin:0 0 16px}
.treat__badges{display:flex;flex-wrap:wrap;gap:8px}
.treat__badges span{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;border:1px solid var(--border);padding:8px 12px;color:var(--ink-soft)}
.treat__title{margin:0;font-family:var(--font-heading);font-weight:300;font-size:var(--fs-h3);line-height:1.1}
.treat__sub{margin:-8px 0 0;font-size:var(--fs-small);color:var(--ink-soft)}
.treat__desc{margin:0;font-size:var(--fs-body);line-height:1.6;color:var(--ink-soft)}
.treat__points{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-small);line-height:1.5}
.treat__dose{display:flex;flex-direction:column;gap:8px;margin-top:auto;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.treat__dose select,.buy .select-wrap select{font:inherit;font-size:var(--fs-body);font-weight:300;letter-spacing:0;text-transform:none;color:var(--ink);background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141416' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 15px center;border:1px solid var(--border);border-radius:0;padding:16px 44px 16px 16px;appearance:none;-webkit-appearance:none;width:100%;cursor:pointer}
.treat__dose select:focus,.buy .select-wrap select:focus{outline:none;border-color:var(--ink)}
/* PDP dose / variant picker = the consultation result's dose drop-down (Tony 2026-10-17): same caps label, gap and select */
.buy .variant-block .variant-label{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.buy .opts{margin-top:24px}
.buy .opts>.optlab{margin-top:0}
.treat__note{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--ink-soft);border-left:2px solid var(--accent);padding-left:12px}
.treat__buy{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.treat__price{font-family:var(--font-heading);font-weight:300;font-size:var(--fs-h3);color:var(--ink)}
.treat__price s{font-size:var(--fs-body);color:var(--ink-soft);margin-left:8px}
.treat__links{display:flex;gap:20px;flex-wrap:wrap;font-size:var(--fs-small)}
.treat__modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px}
.treat__scrim{position:absolute;inset:0;background:rgba(20,20,22,.5)}
.treat__sheet{position:relative;display:flex;flex-direction:column;width:100%;max-width:620px;max-height:86vh;background:var(--surface)}
.treat__sheet-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--border)}
.treat__sheet-head h3{margin:0;font-weight:300;font-size:var(--fs-quote)}
.treat__sheet-body{padding:20px 24px;overflow:auto;font-size:var(--fs-body);line-height:1.65;color:var(--ink-soft)}
.pdp-consult{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:24px 0 8px;border-top:1px solid var(--border)}
.pdp-consult__lede{margin:0;font-size:var(--fs-body);color:var(--ink-soft)}
@media (max-width:720px){
  .consult__legend{grid-template-columns:32px 1fr;gap:8px;font-size:var(--fs-body)}
  .consult__help,.consult__choices,.consult__input,.consult__row,.consult__bmi,.consult__error,.consult__file,.consult__q--photo .fine{margin-left:0}
}


/* ── G3 (2026-09-02): PDP / category / cart hooks the mockup didn't need ── */
/* PDP gallery: a real <img> fills the 4:5 shot; thumbs are buttons */
.gal__main{overflow:hidden}
.gal__main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gal__placeholder{position:absolute;inset:0;display:grid;place-items:center;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.gal__th{padding:0;cursor:pointer;background-color:var(--surface-alt);font:inherit}
.buy__price{display:flex;align-items:baseline;gap:12px;margin-top:20px;font-size:var(--fs-quote)}
.buy__price s{color:var(--ink-soft);font-size:var(--fs-body);text-decoration-color:var(--muted)}
.buy .variant-block{margin-top:24px}
.buy .optlab{margin-top:24px}
.buyrow .btn svg{flex:none}
.pdp .qty input{-moz-appearance:textfield}
.pdp .qty input::-webkit-inner-spin-button,.pdp .qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.pdp-acc summary::-webkit-details-marker{display:none}
.pdpband--crumbs .crumbs{padding-bottom:0}
/* category page: mobile filters toggle by Alpine, not the mockup's checkbox */
.fchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.fchip{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-fine);padding:8px 12px;border:1px solid var(--ink);background:var(--surface);cursor:pointer;font-family:var(--font-body)}
.fopt.n{margin-left:auto}
a.fopt{text-decoration:none}
.finput{width:100%;min-width:0;font:inherit;font-size:var(--fs-small);color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-input);padding:12px 12px;outline:none}
.flt-btn--always{display:inline-flex}
.cat-layout--nofilters{grid-template-columns:1fr}
@media (max-width:960px){
  .filters.is-open{display:block}
}
/* cart page: line image is a real <img> inside the 4:5 link; qty input read-only */
.cline__img{position:relative;overflow:hidden;background:var(--surface-alt)}
.cline__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cline__rm{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-body);text-decoration:underline;text-underline-offset:3px}
.cline .qty input{-moz-appearance:textfield}
.csum .code summary::-webkit-details-marker{display:none}
.cartband .cart-empty{max-width:520px;margin:0 auto}


/* ── G4 (2026-09-02): consultation flow hooks the mockup didn't need ── */
.screen.is-on{display:block}
.flow__main .screen{display:none}
.flow__main .screen.is-on{display:block}
.q.is-error .qt,.q.is-error .qn{color:var(--sale)}
.qerr{margin:12px 0 0;font-size:var(--fs-small);color:var(--sale)}
.fld textarea{font:inherit;font-size:var(--fs-body);color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-input);padding:16px 16px;outline:none;width:100%;max-width:560px;resize:vertical}
.fld textarea:focus{border-color:var(--accent)}
.fld input[type="date"]{width:200px}
.upl.is-error{border-color:var(--sale)}
.upl__pick{display:inline-flex;cursor:pointer}
.upl__pick input{position:absolute;opacity:0;width:1px;height:1px}
.upl__pick .btn{pointer-events:none}
.decl.is-error{border-color:var(--sale)}
.reg input:invalid{border-color:var(--border)}
@media (max-width:720px){.scr__foot{flex-wrap:wrap}}

/* ── 2026-10-17: generic pages are CMS pages written in the admin rich-text editor,
   which writes each paragraph as a <div> and sub-headings as <h2>/<h3>. ── */
.content-page__body > div{font-size:var(--fs-body);line-height:1.8;color:var(--ink);margin:0 0 16px}
.content-page__body h3{font-size:var(--fs-body);font-weight:500;margin:24px 0 12px}
.content-page__body strong{font-weight:500}
.content-page__body .contact__ok,.content-page__body .contact__err{margin-top:34px}
.content-page__body .contact-form{margin-top:34px}
/* the legacy .content-page {padding:44px 0 60px} zeroed .wrap's side gutter, so on phones the
   legal and content pages ran flush to the screen edge (3 Nov 2026); the text column stays 820px */
.wrap.content-page{padding-left:var(--gutter);padding-right:var(--gutter);max-width:calc(820px + 2 * var(--gutter))}

/* ── TREATMENTS (27 Oct 2026) ──
   treatment-grid: the weight-loss page's "Treatment options" band, one card per
   live product. treatment-hero / treatment-details: the no-buy treatment page
   (templates/product-treatment.json). Product photos are packshots on white,
   so they sit contained on Porcelain rather than cropped like the lifestyle
   photography. */
.tgrid-band{background:var(--surface-2)}
.tgrid__head{max-width:760px}
.tgrid__head .h-sec{margin:20px 0 0}
.tgrid__head .lede{margin:20px 0 0}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(20px,2vw,24px);margin-top:clamp(34px,3.6vw,60px)}
.tcard{display:flex;flex-direction:column;border:1px solid var(--border);background:var(--surface)}
.tcard__media{display:block;aspect-ratio:1/1;background:var(--porcelain);border-bottom:1px solid var(--border);overflow:hidden}
/* Treatment photos are square on Porcelain with their own margin (photo spec, 5 Nov 2026), so they fill
   the slot edge to edge; contain keeps any photo not yet to spec whole. */
.tcard__media img{display:block;width:100%;height:100%;object-fit:contain}
.tcard__body{display:flex;flex-direction:column;gap:12px;flex:1;padding:clamp(24px,2vw,34px)}
.tcard__title{margin:0;font-size:var(--fs-h3);font-weight:300;letter-spacing:-.01em}
.tcard__title a{color:inherit;text-decoration:none}
.tcard__title a:hover{text-decoration:underline;text-underline-offset:4px}
.tcard__text{margin:0;font-size:var(--fs-small);color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tcard__price{margin:auto 0 0;padding-top:8px;font-size:var(--fs-lede);color:var(--ink)}
.tcard__price span{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.tcard__ctas{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.tcard__ctas .btn{justify-content:center;padding:14px 12px;letter-spacing:var(--ls-label);white-space:nowrap}
.tgrid__fine{margin-top:24px}
.tpage__shot{background:var(--porcelain);border:1px solid var(--border);aspect-ratio:1/1}
.tpage__shot img{width:100%;height:100%;object-fit:contain}
.tpage .gal__th{background-color:var(--porcelain);background-size:contain;background-repeat:no-repeat;background-position:center}
.tpage__eyebrow{color:var(--ink);text-decoration:none}
.tpage__title{margin:16px 0 0;font-size:var(--fs-h1);font-weight:300;letter-spacing:-.02em;line-height:1.08}
.tpage__lede{margin:20px 0 0}
.tpage__points{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.tpage__points li{position:relative;padding-left:24px;font-size:var(--fs-body);color:var(--ink)}
.tpage__points li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:1px;background:var(--accent)}
.tpage__prices{margin-top:34px;padding:clamp(24px,2.4vw,34px);border:1px solid var(--border);background:var(--surface)}
.tpage__doses{margin:16px 0 0;padding:0}
.tpage__dose{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--border)}
.tpage__dose:last-child{border-bottom:0}
.tpage__dose dt{font-size:var(--fs-body);color:var(--ink)}
.tpage__dose dd{margin:0 0 0 auto;font-size:var(--fs-body);color:var(--ink)}
.tpage__dose dd s{color:var(--ink-soft);margin-right:8px}
.tpage__prices .fine{margin:16px 0 0}
.tpage__cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px 24px;margin-top:24px}
.tpage__buy>.fine{margin-top:16px}
.tpage-about__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(34px,4.6vw,60px);align-items:start}
.tpage-about__head .h-sec{margin:20px 0 0}
.tpage-about__body{max-width:68ch;font-size:var(--fs-body);line-height:1.75;color:var(--ink)}
.tpage-about__body p,.tpage-about__body ul,.tpage-about__body ol{margin:0 0 16px}
.tpage-about__body h2,.tpage-about__body h3,.tpage-about__body h4{margin:24px 0 12px;font-size:var(--fs-lede);font-weight:300;letter-spacing:0}
.tpage-about__body ul,.tpage-about__body ol{padding-left:20px}
.tpage-about__body strong,.tpage-about__body b{font-weight:500}
@media (max-width:900px){
  .tpage-about__grid{grid-template-columns:1fr;gap:20px}
}

/* ── MY ACCOUNT — YOUR TREATMENT (Consultations app, partials/account-treatments, 27 Oct 2026;
   compact rows 2 Nov 2026, Tony: "a bit smaller and a bit clearer") ──
   One row per treatment (partials/account-treatment-row): photo, name, last
   ordered, strength, price and the button on one line. The treatment ordered last
   leads, outlined in Ink with an Ink badge and Reorder. Sits in the platform
   account page's column, so it carries its own Porcelain card; the account menu's
   Reorder link lands on it (#treatment). */
.acct-treat{margin:0 0 34px;padding:clamp(20px,2.4vw,34px);background:var(--surface);border:1px solid var(--border);color:var(--ink);scroll-margin-top:140px}
.acct-treat__head{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:640px}
.acct-treat__title{margin:0;font-family:var(--font-heading);font-weight:300;font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.acct-treat__lede{margin:0;font-size:var(--fs-small);line-height:1.55;color:var(--ink-soft)}
.acct-treat__last{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-top:20px;padding:12px 16px;background:var(--surface-alt);border:1px solid var(--border)}
.acct-treat__label{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.acct-treat__name{font-size:var(--fs-body);color:var(--ink)}
.acct-treat__date{font-size:var(--fs-small);color:var(--ink-soft)}
.acct-treat__note{margin:20px 0 0}
.acct-treat__rows{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.acct-treat__expired{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}
.acct-treat__expired h3{margin:0;font-family:var(--font-heading);font-weight:300;font-size:var(--fs-quote);color:var(--ink)}
.acct-treat__expired p{margin:0;font-size:var(--fs-body);color:var(--ink-soft)}
.treat-rows,.acct-treat__rows{container-type:inline-size}
/* The treatment row (My Account + consultation result, Tony 4 Nov 2026): top line photo / name / the one
   price, the button on one line and Learn more small under it; the strength drop-down and Subscribe & save
   or Buy once sit inside the row under the name; the renewal line under them. Brand book: 1px Stone
   borders, Ink when picked, square corners, label type for small caps, the theme's own radio dot. */
.arow{display:grid;grid-template-columns:76px minmax(0,1fr) auto;grid-template-areas:"media info buy" ". choose choose" ". renew renew" ". note note";align-items:start;gap:12px 20px;padding:16px 20px 16px 16px;background:var(--bg);border:1px solid var(--border)}
.arow--current{border-color:var(--ink)}
.arow__media{grid-area:media;width:76px;height:76px;background:var(--porcelain);border:1px solid var(--border);display:grid;place-items:center;overflow:hidden}
.arow__media img{width:100%;height:100%;object-fit:contain;transform:scale(1.25)} /* 76px: zoom past the photo's own margin so the pack reads */
.arow__info{grid-area:info;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.arow__badge{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;background:var(--ink);color:var(--surface);padding:4px 8px;margin-bottom:2px}
.arow__tags{display:flex;flex-wrap:wrap;gap:12px}
.arow__tags span{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft)}
.arow__name{margin:0;font-family:var(--font-heading);font-weight:300;font-size:var(--fs-quote);line-height:1.2;color:var(--ink)}
.arow__sub,.arow__last{margin:0;font-size:var(--fs-small);line-height:1.4;color:var(--ink-soft)}
.arow__points{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 20px;font-size:var(--fs-small);line-height:1.5;color:var(--ink-soft)}
.arow__points li{position:relative;padding-left:16px}
.arow__points li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--accent)}
.arow__summary{margin:4px 0 0;font-size:var(--fs-small);line-height:1.5;color:var(--ink-soft);max-width:62ch}
.arow__buy{grid-area:buy;display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.arow__price{font-family:var(--font-heading);font-weight:300;font-size:var(--fs-quote);line-height:1;color:var(--ink);white-space:nowrap}
.arow__price s{font-size:var(--fs-small);color:var(--ink-soft);margin-left:4px}
.arow__buy .btn{justify-content:center;white-space:nowrap}
.arow__buy .btn:disabled{opacity:.5;cursor:not-allowed}
.arow__links{display:flex;flex-wrap:wrap;gap:12px;font-size:var(--fs-fine)}
.arow__choose{grid-area:choose;display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.arow__dose{flex:0 1 280px;min-width:220px;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.arow__dose select{font:inherit;font-size:var(--fs-small);font-weight:300;letter-spacing:0;text-transform:none;color:var(--ink);background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141416' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid var(--border);border-radius:0;padding:12px 34px 12px 12px;appearance:none;-webkit-appearance:none;width:100%;cursor:pointer}
.arow__dose select:focus{outline:none;border-color:var(--ink)}
.arow__plans{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto}
.arow__plan{position:relative;display:flex;align-items:center;gap:8px;padding:12px;border:1px solid var(--border);background:var(--bg);cursor:pointer;font-size:var(--fs-small);line-height:1.2;color:var(--ink);white-space:nowrap}
.arow__plan.is-on,.arow__plan:has(input:checked){border-color:var(--ink)}
.arow__plan input{position:absolute;opacity:0;pointer-events:none}
.arow__dot{width:16px;height:16px;flex:none;border:1px solid var(--muted);border-radius:var(--radius-pill);display:grid;place-items:center}
.arow__plan input:checked+.arow__dot{border-color:var(--ink)}
.arow__plan input:checked+.arow__dot::after{content:"";width:8px;height:8px;border-radius:var(--radius-pill);background:var(--ink)}
.arow__plan input:focus-visible+.arow__dot{outline:2px solid var(--bronze);outline-offset:2px}
.arow__plan-tag{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft)}
.arow__renew{grid-area:renew;margin:-4px 0 0;font-size:var(--fs-fine);line-height:1.5;color:var(--ink-soft)}
.arow__note{grid-area:note}
/* A narrow card (My Account beside its menu, tablets): the price, button and links drop under the choices. */
@container (max-width:760px){
  .arow{grid-template-columns:76px minmax(0,1fr);grid-template-areas:"media info" ". choose" ". renew" ". buy" ". note"}
  .arow__buy{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:12px 16px;text-align:left}
}
/* Phones: name beside the photo, then everything full width; the button may wrap here. */
@container (max-width:520px){
  .arow{grid-template-columns:60px minmax(0,1fr);grid-template-areas:"media info" "choose choose" "renew renew" "buy buy" "note note";padding:16px}
  .arow__media{width:60px;height:60px}
  .arow__dose{flex:1 1 100%;min-width:0}
  .arow__plan{flex:1 1 auto}
  .arow__buy .btn{flex:1 1 100%;white-space:normal;text-align:center;line-height:1.4}
}

/* Floating "Chat on WhatsApp" button (partials/whatsapp-chat, every page; Tony 4 Nov 2026).
   Ink with oat label in the theme's button type (11px caps, .2em); bronze on hover, the
   theme's hover accent. Under the drawers and overlays (1000+), above page content.
   Phone width: a 52px round icon chip, the brand's one pill shape, label kept for screen readers. */
.wa-chat{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:90;display:inline-flex;align-items:center;gap:12px;padding:16px 24px;background:var(--ink);border:1px solid var(--ink);border-radius:var(--radius-button);color:var(--on-dark);font-family:var(--font-body);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;text-decoration:none;box-shadow:none;transition:background .35s,border-color .35s}
.wa-chat:hover{background:var(--bronze);border-color:var(--bronze);color:var(--on-dark)}
.wa-chat:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.wa-chat__icon{width:20px;height:20px;flex:none}
@media (max-width:760px){
  .wa-chat{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:52px;height:52px;padding:0;justify-content:center;border-radius:var(--radius-pill)}
  .wa-chat__icon{width:24px;height:24px}
  .wa-chat__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media print{.wa-chat{display:none}}
/* ── HOME · DELTAS ON THE CLAUDE DESIGN HOME ──
   2026-10-01: Tony's sign-off mockup (a ~980px render of the design) is denser
   than the design file; these rules keep that density.
   2026-10-14: brought onto brand book v1.0 — Bronze replaces the mockup's rust
   (Rust is for offers only), buttons keep the brand spec (11px label, 21×34),
   the journey-split buttons sit on the panel's text column, headlines are
   sentence case, every value is on the type and spacing scales. Only the home
   bands (design-home-v2.css) are touched.
   2026-10-23: spacing matched to the client's design (the ~1000px render):
   the journey panels are cards inset on the Porcelain ground, the member card
   on Oat, and How it works / the trust strip get the design's breathing room.
   vw values are the design's px at 1000px wide. */
/* the mockup's page ground is the Porcelain of the header, not the Linen band */
.hm-how,.hm-secs-band{background:var(--surface)}

/* hero: copy sits ~12% in from the left */
.hm-hero__copy{gap:var(--nb-space-5)}
@media (min-width:721px){
  .hm-hero__copy{padding-top:clamp(60px,7vw,116px);padding-bottom:clamp(44px,5.8vw,116px);padding-left:max(var(--gutter),calc(12vw - max(0px,(100vw - var(--max-width)) / 2)))}
}
.hm-hero h1{font-size:var(--fs-hero);line-height:.9;letter-spacing:var(--ls-hero)}
.hm-hero__sub{font-family:var(--font-body);font-size:var(--fs-quote);line-height:1.34;max-width:34ch}
.hm-hero .btn{margin-top:var(--nb-space-3)}

/* hero video (2026-11-03): the spinning sphere over the photo. On desktop the clip is
   zoomed 1.15× from its left edge so the sphere clears the headline (the clip has it
   mid-frame, the photo had it on the right); phones show it whole above the copy.
   Reduced motion keeps the photo. */
.hm-hero__shot{overflow:hidden}
.hm-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
@media (min-width:721px){.hm-hero__video{transform:scale(1.15);transform-origin:0 23%}}
@media (prefers-reduced-motion:reduce){.hm-hero__video{display:none}}

/* journey split: two cards on the Porcelain ground — space under the hero,
   inset from the page edge, a hairline gap between them; the button sits on
   the text column with the same inset as the copy above it */
.jsplit{gap:clamp(4px,.55vw,8px);padding:clamp(24px,2.9vw,44px) clamp(12px,1.1vw,16px) 0;background:var(--surface)}
.jsplit__p{gap:var(--nb-space-3);padding:var(--nb-space-8) clamp(24px,3.7vw,60px) var(--nb-space-6)}
.jsplit__p--mem{background:var(--surface-alt)}
.jsplit__p .kicker{margin-bottom:var(--nb-space-1)}
.jsplit__p--new .kicker{color:var(--sand)}
.jsplit__p h2{font-size:var(--fs-h1);line-height:1.04;margin:0}
.jsplit__p .lede{line-height:1.62;margin-bottom:var(--nb-space-7)}
.jsplit__p .btn{align-self:stretch;justify-content:center}
.jsplit__p--new .btn--onink{background:var(--oat);border-color:var(--oat);color:var(--ink)}
.jsplit__p--new .btn--onink:hover{background:transparent;border-color:var(--oat);color:var(--oat)}
.jsplit__p--mem .jsplit__hl{font-family:var(--font-body);font-size:var(--fs-quote);line-height:1.34;color:var(--bronze)}

/* how it works: a label between hairlines, Bronze numerals, Sand arrows */
.hm-how{padding:clamp(44px,6.4vw,116px) 0 0}
.hm-how__title h2{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);color:var(--stone)}
.hm-how__list{padding:clamp(34px,7vw,116px) 0 clamp(44px,9.7vw,116px)}
.hm-step{gap:var(--nb-space-2)}
.hm-step__n{font-family:var(--font-body);font-weight:300;font-size:var(--fs-h1);color:var(--bronze)}
.hm-step h3{font-size:var(--fs-lede);line-height:1.34;max-width:none}
/* arrow centred on the numerals' x-height */
.hm-step+.hm-step::before{background:var(--sand);width:24px;height:24px;left:-12px;top:calc(var(--fs-h1) * .55 - 12px)}

/* sections grid: sentence-case heading, tight grid, compact tile bodies */
.hm-secs-band{padding:var(--nb-space-8) 0 var(--band-y)}
.hm-secs-band h2{font-size:var(--fs-h1);text-transform:none;letter-spacing:-.015em}
.hm-secs-band .rule{margin:var(--nb-space-5) auto 0}
.hm-secs{margin-top:var(--nb-space-8);gap:var(--nb-space-5) var(--nb-space-6)}
.hm-tile__img{aspect-ratio:2.15/1}
.hm-tile__body{gap:var(--nb-space-1);padding:var(--nb-space-5) var(--nb-space-6) var(--nb-space-6)}
.hm-tile h3{font-size:var(--fs-quote)}
.hm-tile p{font-size:var(--fs-small)}
.hm-tile .go{margin-top:var(--nb-space-3);color:var(--ink)}

/* trust strip */
.hm-trust ul{padding:clamp(34px,5.4vw,116px) 0}
.hm-trust li{font-family:var(--font-body);font-size:var(--fs-quote);padding:var(--nb-space-3) clamp(16px,2vw,44px)}
@media (min-width:961px){.hm-trust li{white-space:nowrap}}

@media (max-width:960px){
  .jsplit__p{padding:var(--nb-space-8) var(--gutter) var(--nb-space-6)}
  .hm-how__list{gap:var(--nb-space-6) 0}
}

/* ═══════════ LEGACY default-new page CSS (category / PDP / cart / content / drawers) — restyled by the tokens above, rebuilt page by page ═══════════ */

/* Typography roles — headings take the heading font, the hero statement takes
   the display font. Both fall back through the chain to the body font, so a
   single-font theme is byte-identical and a 2- or 3-font theme just works. */
h1, h2, h3, h4, h5, h6 {font-family:var(--font-heading)}
.hero__heading {font-family:var(--font-display)}
button {font:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}
ul, ol {list-style:none;margin:0;padding:0}
[x-cloak] {display:none!important}

/* ── TYPE ── */
.eyebrow {font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-muted)}
.eyebrow--bar {display:flex;align-items:center;gap:12px}
.eyebrow--bar::before {content:"";width:34px;height:1px;background:var(--accent);display:inline-block;flex-shrink:0}
.eyebrow--light {color:rgba(245,243,239,.6)}
.eyebrow--light.eyebrow--bar::before {background:var(--accent)}

.sec-title {font-size:var(--fs-h1);font-weight:300;line-height:1.08;letter-spacing:-.018em;margin:0}
.sec-title em {font-style:normal;color:var(--ink)}
.sec-title--light {color:var(--inv-text)}
.sec-title--light em {color:var(--ink)}

.sec-head {display:flex;flex-direction:column;gap:12px}
.sec-head--row {flex-direction:row;align-items:flex-end;justify-content:space-between}
.btn--primary {background:var(--ac-btn-bg, var(--accent));color:var(--ac-btn-text, #fff);border-color:var(--ac-btn-bg, var(--accent))}
/* Editor state-preview: each editable atom's interaction state also matches
   [data-v3-state~="…"] so the v3 editor's Hover/Focus tabs can preview it
   (docs/plans/2026-07-15-editor-state-preview-design.md §3.0). Inert on the
   live storefront — nothing sets data-v3-state there. */
.btn--primary:hover, .btn--primary[data-v3-state~="hover"] {background:var(--accent-deep);border-color:var(--accent-deep)}
.btn--ghost-light {background:transparent;color:var(--inv-text);border-color:rgba(245,243,239,.4)}
.btn--ghost-light:hover, .btn--ghost-light[data-v3-state~="hover"] {background:rgba(245,243,239,.1);border-color:rgba(245,243,239,.7)}
.btn--dark {background:var(--inverse);color:var(--inv-text);border-color:var(--inverse)}
.btn--dark:hover, .btn--dark[data-v3-state~="hover"] {background:#000}
.btn--block {width:100%}
.btn--lg {padding:20px 44px}
.tlink--light {color:rgba(245,243,239,.65)}
.tlink--light:hover, .tlink--light[data-v3-state~="hover"] {color:var(--inv-text)}
.tlink--accent {color:var(--ink)}
.tlink--accent:hover, .tlink--accent[data-v3-state~="hover"] {color:var(--accent-deep)}
.tlink--muted {color:var(--ink-soft)}
.badge--sale {background:var(--sale);color:#fff}
.badge--new  {background:var(--accent);color:var(--on-dark)}
.badge--low  {background:var(--surface-alt);color:var(--ink);border:1px solid var(--border)}

/* ── INPUT ── */
.input {font-family:var(--font);font-size:var(--fs-small);color:var(--ink);background:var(--panel);border:1px solid var(--border);border-radius:var(--r-input);padding:12px 16px;width:100%;outline:none;transition:border-color .15s}
.input:focus, .input[data-v3-state~="focus"] {border-color:var(--ink)}
.input::placeholder {color:var(--ink-soft)}

/* ══════════════════════════════════════════
   ANNOUNCEMENT BAR
══════════════════════════════════════════ */
.anno {background:var(--inverse);overflow:hidden;height:34px;display:flex;align-items:center}
.anno__track {display:flex;white-space:nowrap;animation:marquee 30s linear infinite}
.anno__item {font-size:var(--fs-label);font-weight:500;letter-spacing:.07em;color:rgba(245,243,239,.65);padding:0 24px}
.anno__sep {color:var(--ink);font-size:var(--fs-label);flex-shrink:0}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
.site-header {background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.header__top {display:flex;align-items:center;height:70px;gap:20px}
.header__logo img {height:65px;width:auto}
.header__logo-fallback {font-size:var(--fs-lede);font-weight:300;letter-spacing:.04em;color:var(--ink)}
.hamburger {display:none;width:40px;height:40px;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;flex-shrink:0}
.header__search-wrap {flex:1;max-width:460px;margin:0 auto}
.header__search {display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-input);padding:0 16px;height:40px;cursor:text;color:var(--ink-soft);width:100%;transition:border-color .15s}
.header__search:focus-within {border-color:var(--ink-muted)}
.header__search input {border:none;background:transparent;font-family:var(--font);font-size:var(--fs-small);color:var(--ink);outline:none;width:100%}
.header__search input::placeholder {color:var(--ink-soft)}
.header__actions {display:flex;align-items:center;gap:8px;flex-shrink:0}
.icon-btn {width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:0;color:var(--ink-soft);transition:color .15s}
.icon-btn:hover {color:var(--ink)}
.basket-btn {display:flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink);padding:9px 16px;border:1px solid var(--border);border-radius:var(--r-btn);transition:border-color .15s;cursor:pointer;background:none;font-family:var(--font)}
.basket-btn:hover {border-color:var(--ink)}
.basket-btn__count {background:var(--accent);color:var(--on-dark);font-size:var(--fs-label);font-weight:500;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;line-height:1}
/* Mobile search row — must be own full-width row */
.header__msearch {display:none;align-items:center;gap:12px;background:var(--bg);border-top:1px solid var(--border);padding:8px 20px;color:var(--ink-soft)}
.header__msearch input {border:none;background:transparent;font-family:var(--font);font-size:var(--fs-small);color:var(--ink);outline:none;width:100%}
.header__msearch input::placeholder {color:var(--ink-soft)}
/* Nav bar */
.header__nav {border-top:1px solid var(--line-soft)}
.nav {display:flex;align-items:center;height:46px;/* overflow must stay visible on desktop or the absolutely-positioned
     dropdown is clipped to the 46px nav row (overflow-x:auto forces
     overflow-y:auto). Horizontal scroll is re-enabled on mobile below. */
  overflow: visible;scrollbar-width:none}
.nav::-webkit-scrollbar {display:none}
.nav__link {font-size:var(--fs-small);font-weight:500;letter-spacing:.03em;color:var(--ink);padding:0 16px;height:100%;display:flex;align-items:center;white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s, border-color .15s}
.nav__link:hover {color:var(--accent);border-bottom-color:var(--accent)}
.nav__link--active {border-bottom-color:var(--ink)}
.nav__link--sale {color:var(--sale)}
.nav__link--sale:hover {color:var(--sale);border-bottom-color:var(--sale)}

/* ══════════════════════════════════════════
   HERO SLIDER
══════════════════════════════════════════ */
.hero-slider {position:relative;min-height:76vh;overflow:hidden;background:var(--inverse)}
.hero-slide {position:absolute;inset:0;display:flex;align-items:center;padding:116px 0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.hero-slide.is-active {opacity:1;z-index:1;pointer-events:auto}
.hero-slide__bg {position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.hero-slide__overlay {position:absolute;inset:0;z-index:1}
.hero-slide__inner {position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:0 var(--gutter);width:100%;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.hero__eyebrow {font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--on-dark);display:flex;align-items:center;gap:12px}
.hero__eyebrow::before {content:"";width:34px;height:1px;background:var(--accent);display:inline-block}
.hero__heading {font-size:var(--fs-h1);font-weight:300;line-height:1.04;letter-spacing:-.018em;margin:0;color:var(--on-dark);max-width:16ch}
.hero__body {font-size:var(--fs-body);line-height:1.65;color:rgba(255,255,255,.82);max-width:52ch;margin:0}
.hero__cta-row {display:flex;gap:16px;flex-wrap:wrap;margin-top:4px}
.hero__dots {position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:10;display:flex;gap:8px}
.hero__dot {width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;border:0;padding:0;transition:background .2s, transform .2s}
.hero__dot.is-active {background:var(--porcelain);transform:scale(1.5)}
.hero__arr {position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:46px;height:46px;border:1px solid rgba(255,255,255,.28);border-radius:0;display:flex;align-items:center;justify-content:center;color:var(--on-dark);cursor:pointer;background:rgba(0,0,0,.22);transition:background .15s, border-color .15s}
.hero__arr:hover {background:rgba(0,0,0,.5);border-color:rgba(255,255,255,.6)}
.hero__arr--prev {left:var(--gutter)}
.hero__arr--next {right:var(--gutter)}

/* ══════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════ */
.section {padding:var(--sec-y) 0}
.section--sm {padding:var(--sec-y-m) 0}
.bg-paper {background:var(--bg)}
.bg-white {background:var(--panel)}
.bg-alt   {background:var(--surface-alt)}
.bg-dark  {background:var(--inverse);color:var(--inv-text)}

/* ══════════════════════════════════════════
   USP BAR
══════════════════════════════════════════ */
.usp-bar {background:var(--panel);border-bottom:1px solid var(--border);padding:0}
.usp-bar__grid {display:grid;grid-template-columns:repeat(4, 1fr);border-left:1px solid var(--border)}
.usp-item {display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:24px 16px;border-right:1px solid var(--border)}
.usp-item__icon {color:var(--ink)}
.usp-item__title {font-size:var(--fs-small);font-weight:500;color:var(--ink)}
.usp-item__sub {font-size:var(--fs-fine);color:var(--ink-soft);line-height:1.45}
.pgrid--3 {grid-template-columns:repeat(3, minmax(0, 1fr))}
.pgrid--4 {grid-template-columns:repeat(4, minmax(0, 1fr))}
.pgrid--2 {grid-template-columns:repeat(2, minmax(0, 1fr))}

/* ══════════════════════════════════════════
   CATEGORY BROWSE TABLE
══════════════════════════════════════════ */
.cat-browse {display:grid;grid-template-columns:repeat(3, 1fr);gap:20px}
.cat-card {display:block;text-decoration:none;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.cat-card:hover {transform:translateY(-3px);box-shadow:0 14px 34px rgba(29,27,24,.10);border-color:var(--ink-muted)}
.cat-card__media {aspect-ratio:4 / 3;overflow:hidden;position:relative;background:var(--bg);display:flex;align-items:center;justify-content:center}
.cat-card__media::after {content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 60%, rgba(29,27,24,.07))}
.cat-card__media img {width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cat-card:hover .cat-card__media img {transform:scale(1.04)}
.cat-card__placeholder {font-size:var(--fs-body);font-weight:500;letter-spacing:-.01em;color:var(--ink);text-align:center;padding:20px;position:relative;z-index:1}
.cat-card__row {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px}
.cat-card__name {font-size:var(--fs-body);font-weight:500;color:var(--ink);letter-spacing:-.01em}
.cat-card__cta {font-size:var(--fs-label);font-weight:500;color:var(--ink);letter-spacing:var(--ls-label);text-transform:uppercase;white-space:nowrap}

/* ══════════════════════════════════════════
   SPLIT SECTIONS
══════════════════════════════════════════ */
.split {display:grid;grid-template-columns:1fr 1fr}
.split__img {position:relative;overflow:hidden}
.split__img img {width:100%;height:100%;object-fit:cover;display:block}
.split__img-caption {position:absolute;bottom:20px;left:20px;background:rgba(33,30,26,.72);color:rgba(245,243,239,.7);font-size:var(--fs-label);letter-spacing:.06em;padding:8px 12px;border-radius:0}
.split__content {padding:60px 60px;display:flex;flex-direction:column;justify-content:center;gap:24px}
.split__content--dark {background:var(--inverse)}
.split__content--alt  {background:var(--surface-alt)}
.split__stats {display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;padding:24px 0;border-top:1px solid rgba(245,243,239,.14);border-bottom:1px solid rgba(245,243,239,.14);margin:4px 0}
.stat-num {font-size:var(--fs-h3);font-weight:300;color:var(--inv-text)}
.stat-lbl {font-size:var(--fs-fine);color:rgba(245,243,239,.5);letter-spacing:.04em;margin-top:2px}
.split__fine {font-size:var(--fs-small);color:var(--ink-soft);display:flex;align-items:center;gap:8px}
.split__fine::before {content:"✓";color:var(--accent);font-weight:500;flex-shrink:0}

/* ══════════════════════════════════════════
   KLARNA SECTION
══════════════════════════════════════════ */
.klarna-section {background:var(--panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:var(--sec-y-m) 0}
.klarna-header {display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:44px;flex-wrap:wrap;gap:12px}
.klarna-logo {font-size:var(--fs-quote);font-weight:300;letter-spacing:-.02em;background:var(--ink);color:#ffb3c7;padding:4px 16px;border-radius:0;line-height:1}
.klarna-steps {display:grid;grid-template-columns:repeat(3, 1fr);gap:44px}
.klarna-step__n {font-size:var(--fs-fine);font-weight:500;color:var(--ink-muted);letter-spacing:.1em;margin-bottom:8px}
.klarna-step__t {font-size:var(--fs-body);font-weight:500;color:var(--ink);margin-bottom:8px}
.klarna-step__b {font-size:var(--fs-small);line-height:1.65;color:var(--ink-soft)}
.klarna-fine {font-size:var(--fs-label);color:var(--ink-soft);margin-top:24px;line-height:1.6;border-top:1px solid var(--line-soft);padding-top:16px}

/* ══════════════════════════════════════════
   REVIEWS
══════════════════════════════════════════ */
.reviews-grid {display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;margin-top:34px}
.review-card {background:var(--panel);border:1px solid var(--border);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:16px}
.review-card__top {display:flex;align-items:center;gap:12px}
.review-card__stars {color:#c9962e;font-size:var(--fs-small);letter-spacing:2px}
.review-card__tag {font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-muted);border:1px solid var(--border);padding:4px 8px;border-radius:0}
.review-card__body {font-size:var(--fs-small);line-height:1.7;color:var(--ink);flex:1}
.review-card__author {font-size:var(--fs-small);font-weight:500;color:var(--ink)}
.review-card__prod   {font-size:var(--fs-fine);color:var(--ink-soft)}

/* ══════════════════════════════════════════
   INSTAGRAM GRID
══════════════════════════════════════════ */
.insta-grid {display:grid;grid-template-columns:repeat(5, 1fr);gap:8px;margin-top:34px}
.insta-grid__item {aspect-ratio:1/1;overflow:hidden;border-radius:var(--r-card)}
.insta-grid__item img {width:100%;height:100%;object-fit:cover;transition:transform .4s;display:block}
.insta-grid__item:hover img {transform:scale(1.06)}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.site-footer {background:var(--inverse);color:rgba(245,243,239,.6)}
.footer__main {display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;padding:60px 0 60px;border-bottom:1px solid rgba(245,243,239,.09)}
.footer__brand-logo {height:60px;width:auto;filter:brightness(10);opacity:.8;margin-bottom:16px}
.footer__brand-name {font-size:var(--fs-lede);font-weight:300;letter-spacing:.04em;color:var(--inv-text);margin-bottom:16px;display:block}
.footer__blurb {font-size:var(--fs-small);line-height:1.7;color:rgba(245,243,239,.5);max-width:30ch;margin-bottom:16px}
.footer__col-head {font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--inv-text);margin-bottom:16px}
.footer__col-head + .footer__col-head {margin-top:24px}
.footer__col-links {display:flex;flex-direction:column;gap:8px}
.footer__col-links a {font-size:var(--fs-small);color:rgba(245,243,239,.5);transition:color .15s}
.footer__col-links a:hover {color:var(--accent)}
.footer__contact-sub {font-size:var(--fs-small);color:rgba(245,243,239,.4);margin-bottom:8px}
.footer__contact-link {font-size:var(--fs-small);color:rgba(245,243,239,.55);display:block;margin-bottom:8px;transition:color .15s}
.footer__contact-link:hover {color:var(--accent)}
.social {display:flex;gap:8px;margin-top:16px}
.social a {width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(245,243,239,.18);border-radius:0;font-size:var(--fs-label);font-weight:500;color:rgba(245,243,239,.5);letter-spacing:.04em;transition:color .15s, border-color .15s}
.social a:hover {color:var(--accent);border-color:var(--accent)}
.footer__nl-row {display:flex;gap:8px;margin-top:12px}
.footer__nl-row .input {background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--inv-text);flex:1;font-size:var(--fs-small);padding:12px 16px}
.footer__nl-row .input::placeholder {color:rgba(245,243,239,.3)}
.footer__bottom {display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:20px;flex-wrap:wrap}
.footer__copy {font-size:var(--fs-fine);color:rgba(245,243,239,.3)}
.footer__legal {display:flex;gap:16px}
.footer__legal a {font-size:var(--fs-fine);color:rgba(245,243,239,.3);transition:color .15s}
.footer__legal a:hover {color:rgba(245,243,239,.7)}
.pay {display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pay__icon {display:inline-flex;width:34px;height:34px}
.pay__icon svg {width:100%;height:100%;display:block}
.footer__co {font-size:var(--fs-label);color:rgba(245,243,239,.22);padding:12px 0 16px;border-top:1px solid rgba(245,243,239,.06)}

/* ══════════════════════════════════════════
   DRAWERS / OVERLAY
══════════════════════════════════════════ */
.overlay {position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200}
.drawer {position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100vw;background:var(--panel);z-index:201;display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(29,27,24,.16)}
.drawer--left {right:auto;left:0;box-shadow:8px 0 40px rgba(29,27,24,.16)}
.drawer__head {display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0}
.drawer__title {font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase}
.drawer__close {width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);border-radius:0;transition:color .15s}
.drawer__close:hover {color:var(--ink)}
.drawer__promo {display:flex;align-items:center;gap:8px;padding:8px 24px;background:var(--bg);border-bottom:1px solid var(--border);font-size:var(--fs-fine);color:var(--ink-soft);flex-shrink:0}
.drawer__items {flex:1;overflow-y:auto}
.cart-line {display:grid;grid-template-columns:80px 1fr auto;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line-soft);align-items:start}
.cart-line__img {display:block;width:80px;height:80px;border-radius:var(--r-card);overflow:hidden;background:var(--surface-alt);flex-shrink:0}
.cart-line__img img {width:100%;height:100%;object-fit:cover}
.cart-line__cat {font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--ink-muted);margin-bottom:4px}
.cart-line__name {font-size:var(--fs-small);font-weight:500;color:var(--ink);line-height:1.3;margin-bottom:4px}
.cart-line__opt  {font-size:var(--fs-fine);color:var(--ink-soft);margin-bottom:4px}
.cart-line__right {display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.cart-line__remove {font-size:var(--fs-label);color:var(--ink-muted);text-transform:uppercase;letter-spacing:var(--ls-label);transition:color .15s}
.cart-line__remove:hover {color:var(--sale)}
.price {font-size:var(--fs-body);font-weight:500;color:var(--ink)}
.qty__n {min-width:28px;text-align:center;font-size:var(--fs-small);font-weight:500}
.qty--sm {margin-top:8px}
.qty--sm button {width:28px;height:28px}
.drawer-empty {padding:60px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--ink-soft);font-size:var(--fs-small)}
.drawer__foot {border-top:1px solid var(--border);padding:20px 24px 24px;flex-shrink:0;display:flex;flex-direction:column;gap:8px}
.subtotal-row {display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.subtotal-row .lbl {font-size:var(--fs-label);font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--ink-muted)}
.drawer__note {font-size:var(--fs-fine);color:var(--ink-soft);margin:0 0 8px}

/* Alpine transitions */
.dt  {transition:transform .3s cubic-bezier(.32,0,.62,1), opacity .3s}
.dt-off-right {transform:translateX(100%);opacity:0}
.dt-off-left  {transform:translateX(-100%);opacity:0}
.dt-on        {transform:translateX(0);opacity:1}

/* ══════════════════════════════════════════
   MOBILE NAV DRAWER
══════════════════════════════════════════ */
.mnav__links {display:flex;flex-direction:column;padding:4px 0}
.mnav__links a {display:block;padding:12px 24px;font-size:var(--fs-body);font-weight:500;color:var(--ink);border-bottom:1px solid var(--line-soft);transition:color .15s}
.mnav__links a:hover {color:var(--accent)}
.mnav__actions {padding:16px 24px 24px;display:flex;flex-direction:column;gap:12px}

/* ══════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════ */
.breadcrumb {display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-fine);color:var(--ink-soft);margin-bottom:20px}
.breadcrumb a {color:var(--ink-soft);transition:color .15s}
.breadcrumb a:hover {color:var(--accent)}
.breadcrumb__sep {color:var(--border)} guards
   the technique. */
.cat-header {padding:34px calc(50vw - 50%) 24px;margin-inline:calc(50% - 50vw);background:var(--panel, #fff);border-bottom:1px solid var(--border)}
.cat-header__meta {font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-muted);margin-bottom:8px}
.cat-header__eyebrow {display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-muted)}
.cat-header__eyebrow-dash {width:22px;height:1px;background:var(--ink);flex-shrink:0}
.cat-header__title {font-size:var(--fs-h1);font-weight:300;letter-spacing:-.02em;line-height:1.02;margin:0 0 12px}
/* Accent word: italic at 400 — the FAMILY comes from the theme data's
   heading-accent style target (so the font pipeline sees + loads it). */
.cat-header__title em, .cat-header__accent {font-style:normal;font-weight:300}
.cat-header__desc {font-size:var(--fs-body);color:var(--ink-soft);max-width:540px;line-height:1.55}
.filter-bar {display:flex;align-items:center;justify-content:space-between;padding:16px calc(50vw - 50%);margin-inline:calc(50% - 50vw);background:var(--panel, #fff);border-bottom:1px solid var(--border);gap:12px}
.filter-btn {display:flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink);padding:9px 16px;border:1px solid var(--border);border-radius:var(--r-btn);cursor:pointer;background:none;font-family:var(--font);transition:border-color .15s}
.filter-btn:hover {border-color:var(--ink)}
.result-count {font-size:var(--fs-small);color:var(--ink-soft)}
.sort-select {font-family:var(--font);font-size:var(--fs-small);color:var(--ink);background:var(--panel);border:1px solid var(--border);border-radius:var(--r-input);padding:8px 34px 8px 16px;cursor:pointer;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237d766c' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;min-width:180px}
.filter-sidebar {position:sticky;top:132px}
.filter-group {border-bottom:1px solid var(--border);padding:20px 0}
.filter-group:first-child {padding-top:0}
.filter-group__head {display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;margin-bottom:12px}
.filter-group__head svg {transition:transform .2s}
.filter-group.is-closed .filter-group__head svg {transform:rotate(-90deg)}
.filter-group.is-closed .filter-group__body {display:none}
.filter-item {display:flex;align-items:center;gap:12px;padding:4px 0;cursor:pointer;font-size:var(--fs-small);color:var(--ink)}
.filter-item input[type="checkbox"] {accent-color:var(--ink);width:14px;height:14px;flex-shrink:0;cursor:pointer}
.filter-item__count {font-size:var(--fs-fine);color:var(--ink-soft);margin-left:auto}
.filter-swatch {width:22px;height:22px;border-radius:50%;border:1px solid var(--border);cursor:pointer;flex-shrink:0;padding:0;transition:box-shadow .15s}
.filter-swatch:hover {box-shadow:0 0 0 1px var(--ink-muted)}
/* Category-filter swatch / image-swatch / pill layouts — parity with the v2
   filter widget (colour swatches, image swatches, pills) rendered in the
   bedcraft sidebar idiom. Additive: the checkbox groups above are untouched. */
.filter-swatches {display:flex;flex-wrap:wrap;gap:8px}
.filter-img-swatch {width:46px;height:46px;flex-shrink:0;border-radius:0;overflow:hidden;border:2px solid var(--border);cursor:pointer;padding:0;background:var(--surface-alt);transition:border-color .15s;display:flex;align-items:center;justify-content:center}
.filter-img-swatch:hover {border-color:var(--ink-muted)}
.filter-img-swatch.is-active {border-color:var(--ink)}
.filter-img-swatch img {width:100%;height:100%;object-fit:cover;display:block}
.filter-img-swatch__fallback {font-size:var(--fs-label);line-height:1.1;text-align:center;color:var(--ink-soft);padding:2px;overflow:hidden;max-height:100%}
.filter-pills {display:flex;flex-wrap:wrap;gap:8px}
.filter-pills .pill-opt {padding:8px 12px;font-size:var(--fs-small)}
.filter-pill__count {font-size:var(--fs-label);opacity:.7}
.pagination {display:flex;align-items:center;justify-content:center;gap:4px;margin-top:34px;padding-top:24px;border-top:1px solid var(--border)}
.page-btn {min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-small);font-weight:500;color:var(--ink);border:1px solid transparent;border-radius:var(--r-btn);cursor:pointer;transition:all .15s;background:none;font-family:var(--font);padding:0 12px}
.page-btn:hover {border-color:var(--border)}
.page-btn.is-active {background:var(--ink);color:var(--inv-text);border-color:var(--ink)}

/* ══════════════════════════════════════════
   PRODUCT PAGE
══════════════════════════════════════════ */
/* minmax(0,…) kills the auto-minimum: a long thumbs strip (eBay imports ship
   20+ images, flex-shrink:0 each) otherwise forces the gallery column to its
   min-content width and blows the grid past the viewport. */
.pdp-layout {display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:60px;padding:34px 0 60px;align-items:start}
.pdp-gallery {position:sticky;top:132px}
/* No fixed aspect: merchant photos are mixed ratios and must never be cropped —
   the main image renders full-width at its own natural aspect. */
.gallery__main {overflow:hidden;border-radius:var(--r-card);background:var(--surface-alt);margin-bottom:12px;position:relative}
.gallery__main img {width:100%;height:auto;display:block;transition:opacity .2s}
/* No-image slot (products without photos): fill the gallery frame instead of
   a 76px broken-image box. */
.gallery__placeholder {display:grid;place-items:center;aspect-ratio:1 / 1;width:100%;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-muted);text-align:center;padding:24px}
.gallery__flag {position:absolute;top:14px;left:14px;z-index:2}
.gallery__thumbs {display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
.gallery__thumbs::-webkit-scrollbar {display:none}
/* Arrow nav for the thumb strip — the scrollbar is hidden, so when thumbs
   overflow these are the only mouse affordance. Alpine shows each arrow only
   while there's content to scroll to in that direction. */
.gallery__thumbs-wrap {position:relative}
.gallery__thumbs-nav {position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--panel);color:var(--ink);box-shadow:0 2px 8px rgba(29, 27, 24, .16);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--fs-lede);line-height:1;padding:0 0 2px}
.gallery__thumbs-nav:hover {border-color:var(--ink)}
.gallery__thumbs-nav--prev {left:-6px}
.gallery__thumbs-nav--next {right:-6px}
.gallery__thumb {width:74px;height:74px;flex-shrink:0;border-radius:var(--r-card);overflow:hidden;border:2px solid transparent;cursor:pointer;padding:0;background:var(--surface-alt);transition:border-color .15s}
.gallery__thumb.is-active {border-color:var(--ink)}
.gallery__thumb img {width:100%;height:100%;object-fit:cover}
.pdp-form {display:flex;flex-direction:column;gap:20px}
.pdp__cat {font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--ink-muted)}
.pdp__title {font-size:var(--fs-h2);font-weight:300;letter-spacing:-.018em;line-height:1.1}
.pdp__reviews {font-size:var(--fs-small);color:var(--ink-soft)}
.pdp__reviews em {color:#c9962e;font-style:normal}
.pdp-price-row {display:flex;align-items:baseline;gap:12px}
.pdp__price {font-size:var(--fs-h2);font-weight:300;color:var(--ink);letter-spacing:-.02em}
.pdp__price-was {font-size:var(--fs-lede);font-weight:300;color:var(--ink-soft);text-decoration:line-through}
.pdp__vat  {font-size:var(--fs-fine);color:var(--ink-soft)}
.variant-block {display:flex;flex-direction:column;gap:0}
.variant-label {font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.variant-label a {font-weight:300;color:var(--ink);text-transform:none;letter-spacing:0;font-size:var(--fs-fine)}
.pill-opts {display:flex;flex-wrap:wrap;gap:8px}
.pill-opt {font-size:var(--fs-small);font-weight:500;color:var(--ink);padding:8px 16px;border:1px solid var(--border);border-radius:var(--r-btn);cursor:pointer;background:none;font-family:var(--font);transition:border-color .15s, background .15s, color .15s}
.pill-opt:hover {border-color:var(--ink-muted)}
.pill-opt.is-active {border-color:var(--ink);background:var(--ink);color:var(--inv-text)}
.pill-opt:disabled {opacity:.4;cursor:not-allowed}
.color-opts {display:flex;flex-wrap:wrap;gap:8px}
.color-opt {width:38px;height:38px;border-radius:0;cursor:pointer;border:2px solid transparent;outline:2px solid transparent;outline-offset:2px;transition:outline-color .15s, border-color .15s;padding:0}
/* Selected state must be unmistakable (Tony, 2026-07-16): a full ink ring with
   a white gap between swatch and ring, plus a check badge, so the chosen colour
   reads as selected even for dark/ink-like swatches. */
.color-opt.is-active {outline-color:var(--ink);border-color:#fff;position:relative}
.color-opt.is-active::after {content:"✓";position:absolute;right:-6px;top:-6px;width:16px;height:16px;border-radius:50%;background:var(--ink);color:var(--inv-text, #fff);font-size:var(--fs-label);line-height:16px;text-align:center;font-weight:500}
/* Square image swatch (fabric samples) for variant + product options. Distinct
   from .gallery__thumb so resizing here never touches the product gallery. */
.swatch-img {width:72px;height:72px;flex-shrink:0;border-radius:0;overflow:hidden;border:2px solid var(--line-soft);cursor:pointer;padding:0;background:var(--surface-alt);transition:border-color .15s}
.swatch-img:hover {border-color:var(--ink-muted)}
.swatch-img.is-active {border-color:var(--ink);outline:2px solid var(--ink);outline-offset:2px;position:relative}
.swatch-img.is-active::after {content:"✓";position:absolute;right:4px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--ink);color:var(--inv-text, #fff);font-size:var(--fs-label);line-height:16px;text-align:center;font-weight:500}
.swatch-img img {width:100%;height:100%;object-fit:cover;display:block}
.select-wrap {position:relative}
.select-wrap select, .select {font-family:var(--font);font-size:var(--fs-small);color:var(--ink);background:var(--panel);border:1px solid var(--border);border-radius:var(--r-input);padding:12px 34px 12px 16px;width:100%;cursor:pointer;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237d766c' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;transition:border-color .15s}
.select-wrap select:focus, .select:focus {border-color:var(--ink)}
.pdp__trust {display:flex;flex-direction:column;gap:8px;padding:16px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.pdp__trust-line {display:flex;align-items:center;gap:8px;font-size:var(--fs-small);color:var(--ink-soft)}
.pdp__trust-line::before {content:"✓";color:var(--accent);font-weight:500;flex-shrink:0}
.pdp-atc-row {display:flex;gap:12px;align-items:stretch}
.pdp-atc-row .btn--primary {flex:1;justify-content:center}
.accordion {border-bottom:1px solid var(--border)}
.accordion__head {display:flex;align-items:center;justify-content:space-between;padding:16px 0;cursor:pointer;width:100%;font-size:var(--fs-small);font-weight:500;letter-spacing:.01em;user-select:none;text-align:left}
.accordion__head svg {transition:transform .2s;flex-shrink:0;color:var(--ink-muted)}
.accordion.is-open .accordion__head svg {transform:rotate(180deg)}
.accordion__body {display:none;padding:0 0 16px;font-size:var(--fs-small);line-height:1.75;color:var(--ink-soft)}
.accordion.is-open .accordion__body {display:block}
.accordion__body :is(p,ul,ol) {margin:0 0 12px}
.accordion__body ul, .accordion__body ol {padding-left:20px;list-style:revert}

/* ══════════════════════════════════════════
   CART PAGE
══════════════════════════════════════════ */
.cartpage {padding:34px 0 60px}
.cartpage__head {display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}
.cartpage__title {font-size:var(--fs-h2);font-weight:300;letter-spacing:-.018em}
.cart__list {border-top:1px solid var(--border)}
.cart-row {display:grid;grid-template-columns:110px 1fr 120px 110px;gap:20px;padding:20px 0;border-bottom:1px solid var(--border);align-items:start}
.cart-row__img {display:block;width:110px;height:110px;border-radius:var(--r-card);overflow:hidden;background:var(--surface-alt);flex-shrink:0}
.cart-row__img img {width:100%;height:100%;object-fit:cover}
/* No-image line items: named tile instead of an empty-src broken image. */
.cart-row__placeholder {display:grid;place-items:center;width:100%;height:100%;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-muted);text-align:center;padding:12px}
.cart-row__cat {font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--ink-muted);margin-bottom:4px}
.cart-row__name {font-size:var(--fs-body);font-weight:500;color:var(--ink);line-height:1.3;margin-bottom:8px;display:block;transition:color .15s}
.cart-row__name:hover, .cart-row__name[data-v3-state~="hover"] {color:var(--accent)}
.cart-row__opt  {font-size:var(--fs-fine);color:var(--ink-soft);margin-bottom:4px}
.cart-row__remove {font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--ink-muted);transition:color .15s;cursor:pointer;margin-top:8px}
.cart-row__remove:hover, .cart-row__remove[data-v3-state~="hover"] {color:var(--sale)}
.cart-row__price {font-size:var(--fs-body);font-weight:500;color:var(--ink);text-align:right}
.cart__grid {display:grid;grid-template-columns:1fr 380px;gap:44px;align-items:start}
.cart__summary {background:var(--bg);border:1px solid var(--border);border-radius:var(--r-card);padding:24px;position:sticky;top:132px}
.cart__summary h3 {font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;margin:0 0 20px}
.sumrow {display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-small);padding:8px 0;color:var(--ink-soft);border-bottom:1px solid var(--line-soft)}
.sumrow .v {font-weight:500;color:var(--ink)}
.promo {display:flex;gap:8px;padding:16px 0}
.promo .input {font-size:var(--fs-small);padding:12px 12px;flex:1}
.cart__trust {display:flex;flex-direction:column;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)}
.cart__trust span {display:flex;align-items:center;gap:8px;font-size:var(--fs-fine);color:var(--ink-soft)}
.cart__trust em {color:var(--ink);font-style:normal;font-weight:500}
.cart-empty {padding:60px 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.cart-empty h2 {font-size:var(--fs-quote);font-weight:300;letter-spacing:-.018em}
.muted {color:var(--ink-soft);font-size:var(--fs-small);margin:0}
/* active filter pills */
.fchip {display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-fine);font-weight:500;letter-spacing:.04em;color:var(--ink);padding:8px 12px;cursor:pointer;border:1px solid var(--border);border-radius:var(--r-btn);background:var(--panel);transition:border-color .15s}
.fchip:hover {border-color:var(--ink)}
.fchip.is-active {border-color:var(--ink)}
/* subscribe & save (rare for furniture, but never break the code path) */
.buybox {display:flex;flex-direction:column;gap:8px}
.buy-option {display:flex;gap:12px;align-items:flex-start;padding:16px 16px;border:1px solid var(--border);border-radius:var(--r-card);cursor:pointer;transition:border-color .15s}
.buy-option.is-active {border-color:var(--ink)}
.buy-option__radio {width:16px;height:16px;border-radius:50%;border:1px solid var(--border);flex-shrink:0;margin-top:2px;position:relative}
.buy-option.is-active .buy-option__radio {border-color:var(--ink)}
.buy-option.is-active .buy-option__radio::after {content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ink)}
.buy-option__main {display:flex;flex-direction:column;gap:4px}
.buy-option__name {font-size:var(--fs-small);font-weight:500;color:var(--ink)}
.buy-option__sub {font-size:var(--fs-small);color:var(--ink-soft);line-height:1.45}
.subnote {font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-muted)}
.cadences {display:flex;flex-wrap:wrap;gap:8px}
.cadence {border:1px solid var(--border);border-radius:var(--r-card);padding:12px 16px;cursor:pointer;text-align:left;transition:border-color .15s;background:var(--panel);min-width:120px}
.cadence.is-active {border-color:var(--ink)}
.cadence__t {font-size:var(--fs-small);font-weight:500;color:var(--ink)}
.cadence__d {font-size:var(--fs-small);color:var(--ink);margin-top:2px}
.cadence__off {font-size:var(--fs-label);font-weight:500;color:var(--ink);margin-top:2px}
/* search overlay */
.search-overlay {position:fixed;inset:0;z-index:1300;background:var(--bg);overflow-y:auto}
.search-overlay__bar {border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:2}
.search-overlay__barinner {display:flex;align-items:center;gap:16px;padding:16px var(--gutter);max-width:var(--container);margin:0 auto}
.search-overlay__field {flex:1;display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-input);padding:12px 16px;color:var(--ink-soft)}
.search-overlay__field input {flex:1;border:0;background:transparent;outline:none;font-family:var(--font);font-size:var(--fs-body);color:var(--ink)}
.search-overlay__layout {display:flex;gap:34px;align-items:flex-start}
.search-overlay__filters {width:240px;flex:none}
.search-overlay__results {flex:1;min-width:0}
.search-overlay__state {text-align:center;padding:60px 0;color:var(--ink-soft)}
.search-overlay__count {font-size:var(--fs-small);color:var(--ink-soft);margin-bottom:20px}

/* ══════════════════════════════════════════
   CONTENT / STATIC PAGES (about, faq, legal, contact)
══════════════════════════════════════════ */
.content-page {padding:44px 0 60px;max-width:820px}
.content-page__title {font-size:var(--fs-h1);font-weight:300;letter-spacing:-.018em;margin:8px 0 0}
.content-page__body {margin-top:24px}
.content-page__lede {font-size:var(--fs-lede);line-height:1.7;color:var(--ink-soft);margin:0 0 24px}
.content-page__body h2 {font-size:var(--fs-lede);font-weight:300;letter-spacing:-.01em;margin:34px 0 12px}
.content-page__body p {font-size:var(--fs-body);line-height:1.8;color:var(--ink);margin:0 0 16px}
.content-page__body ul, .content-page__body ol {margin:0 0 16px;padding-left:20px;list-style:revert}
.content-page__body li {font-size:var(--fs-body);line-height:1.75;color:var(--ink);margin-bottom:8px}
.content-page__body a {color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.content-page__body a:hover {color:var(--accent-deep)}
.content-page__note {font-size:var(--fs-small);color:var(--ink-soft);margin-top:24px;padding-top:16px;border-top:1px solid var(--line-soft)}
.content-page .accordion:first-of-type {border-top:1px solid var(--border)}

/* contact form */
.contact-form {display:flex;flex-direction:column;gap:16px;margin-top:8px;max-width:620px}
.contact-form__row {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form__field {display:flex;flex-direction:column;gap:8px}
.contact-form__field > span {font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink)}
.contact-form__field > span small {font-weight:300;text-transform:none;letter-spacing:0;color:var(--ink-soft)}
.contact-form textarea.input {resize:vertical;min-height:130px;font-family:var(--font)}
.contact__ok  {background:var(--surface-alt);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r-card);padding:16px 20px;font-size:var(--fs-small);color:var(--ink);margin-bottom:20px}
.contact__err {background:#f7ece9;border:1px solid #e6c9c1;border-left:3px solid var(--sale);border-radius:var(--r-card);padding:16px 20px;font-size:var(--fs-small);color:var(--ink);margin-bottom:20px}
.contact__err ul {margin:8px 0 0;padding-left:20px;list-style:revert}

/* ══════════════════════════════════════════
   CATEGORY / COLLECTION INDEX
══════════════════════════════════════════ */
.cat-index-head {display:flex;flex-direction:column;gap:12px;margin-bottom:34px}
.cat-index-title {font-size:var(--fs-h1);font-weight:300;letter-spacing:-.018em;margin:0}
.cat-index-grid {display:grid;grid-template-columns:repeat(3, 1fr);gap:20px}
.cat-index-card {display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;background:var(--panel);transition:border-color .15s}
.cat-index-card:hover {border-color:var(--ink)}
.cat-index-card__media {aspect-ratio:16/10;overflow:hidden;background:var(--surface-alt);position:relative}
.cat-index-card__media::after {content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 55%, rgba(29,27,24,.06))}
.cat-index-card__media img {width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cat-index-card:hover .cat-index-card__media img {transform:scale(1.04)}
.cat-index-card__row {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 20px}
.cat-index-card__name {font-size:var(--fs-body);font-weight:500;color:var(--ink);letter-spacing:-.01em}
.cat-index-card__count {font-size:var(--fs-fine);color:var(--ink-soft);margin-top:2px}
.cat-index-card__cta {font-size:var(--fs-label);font-weight:500;color:var(--ink);letter-spacing:var(--ls-label);text-transform:uppercase;white-space:nowrap}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .cat-browse {grid-template-columns:repeat(3, 1fr)}
  .split {grid-template-columns:1fr}
  .split__content {padding:60px 44px}
  .split__img img {max-height:420px}
  .footer__main {grid-template-columns:1fr 1fr;gap:34px}
}

@media (max-width: 768px) {
  :root { --gutter: 20px; --sec-y: 56px; --sec-y-m: 40px; }
  .hamburger {display:flex}
  .header__search-wrap {display:none}
  .header__msearch {display:flex}
  .header__nav {display:none}
  .icon-btn--account {display:none}
  .header__top {gap:12px;height:60px}
  .header__logo {flex:1;display:flex;justify-content:center}
  .header__logo img {height:52px}
  .pgrid--3 {grid-template-columns:repeat(2, 1fr)}
  .cat-browse {grid-template-columns:repeat(2, 1fr);gap:12px}
  .usp-bar__grid {grid-template-columns:repeat(2, 1fr)}
  .split {grid-template-columns:1fr}
  .split__img img {max-height:300px;width:100%}
  .split__content {padding:44px 20px}
  .split__stats {grid-template-columns:repeat(3, 1fr);gap:16px}
  .klarna-section {padding:44px 0}
  .klarna-steps {grid-template-columns:1fr;gap:24px}
  .reviews-grid {grid-template-columns:1fr;gap:12px}
  .insta-grid {grid-template-columns:repeat(3, 1fr)}
  .footer__main {grid-template-columns:1fr;gap:24px}
  .footer__bottom {flex-direction:column;align-items:flex-start}
  .filter-sidebar {display:none;position:static;top:auto}
  .filter-sidebar.is-mobile-open {display:block;margin-bottom:24px}
  /* minmax(0,…) — a bare 1fr's implicit auto minimum lets wide content (a
     37-thumb strip) set the column width and blow the page out sideways. */
  .pdp-layout {grid-template-columns:minmax(0, 1fr);gap:24px}
  .pdp-gallery {position:static}
  .cart__grid {grid-template-columns:1fr;gap:24px}
  .cart__summary {position:static}
  .cart-row {grid-template-columns:90px 1fr auto}
  .cart-row__price {grid-column:2}
  .drawer {width:100%}
  .sec-head--row {flex-direction:column;align-items:flex-start;gap:12px}
  .hero__arr {display:none}
  .search-overlay__layout {flex-direction:column}
  .search-overlay__filters {width:100%}
  .contact-form__row {grid-template-columns:1fr}
  .cat-index-grid {grid-template-columns:repeat(2, 1fr);gap:16px}
  /* mobile: nav scrolls horizontally (dropdowns aren't used on touch). */
  .nav {overflow-x:auto}
}
@media (max-width: 1024px) {
  .cat-index-grid {grid-template-columns:repeat(2, 1fr)}
}
/* Showcase cells WRAP the card (label + card) — a percentage height inside
   that wrapper resolves cyclically and can balloon the row (quick-add toggle
   repro, 2026-07-16). Flex the cell and let the card grow instead. */
.card-showcase__cell {display:flex;flex-direction:column}

/* Filters visible/hidden (v1 port, 2026-07-18): 'hidden' turns the sidebar
   into a slide-out drawer at every width — the Filter button opens it. In
   'visible' mode the button only appears under the mobile breakpoint where
   the sidebar collapses. */
.cat-layout--nofilters {grid-template-columns:1fr}
.filter-sidebar--drawer {display:none;position:fixed;top:0;left:0;height:100vh;width:320px;max-width:85vw;background:var(--paper, #fff);z-index:1000;overflow-y:auto;padding:24px;box-shadow:0 0 40px rgba(0,0,0,.25)}
.filter-sidebar--drawer.is-mobile-open {display:block}
.filter-drawer-backdrop {position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:999}
@media (min-width: 769px) { .filter-btn--mobile-only {display:none} }

/* Collections grid settings (2026-07-18): per-row + image shape. */
.cat-index-grid--2 {grid-template-columns:repeat(2, 1fr)}
.cat-index-grid--3 {grid-template-columns:repeat(3, 1fr)}
.cat-index-grid--4 {grid-template-columns:repeat(4, 1fr)}
/* The column variants above post-date (and therefore out-cascade) the
   generic .cat-index-grid mobile clamps up at the breakpoint block — without
   this, a 3-col index stayed 3-col at 390px (120px cards, clipped third
   column on /collections). Same clamp, variant-aware, AFTER the variants. */
@media (max-width: 1024px) {
  .cat-index-grid--3, .cat-index-grid--4 {grid-template-columns:repeat(2, 1fr)}
}
.cat-index-grid--square .cat-index-card__media {aspect-ratio:1 / 1}
.cat-index-grid--portrait .cat-index-card__media {aspect-ratio:3 / 4}
.cat-index-grid--landscape .cat-index-card__media {aspect-ratio:4 / 3}

/* PDP gallery settings (2026-07-18): layout modes, fit, lightbox, qty. */
.pdp-gallery--thumbs-left {display:grid;grid-template-columns:76px 1fr;gap:12px}
.pdp-gallery--thumbs-left .gallery__main {order:2}
.pdp-gallery--thumbs-left .gallery__thumbs-wrap {order:1}
.pdp-gallery--thumbs-left .gallery__thumbs, .pdp-gallery--thumbs-right .gallery__thumbs {flex-direction:column;overflow-x:hidden;overflow-y:auto;max-height:520px}
.pdp-gallery--thumbs-left .gallery__thumbs-nav, .pdp-gallery--thumbs-right .gallery__thumbs-nav {display:none}
.pdp-gallery--thumbs-right {display:grid;grid-template-columns:1fr 76px;gap:12px}
.pdp-gallery--fit-contain .gallery__main img {object-fit:contain}
.pdp-gallery--fit-cover .gallery__main img {object-fit:cover}
.pdp-lightbox {position:fixed;inset:0;z-index:2000;background:rgba(10,10,10,.92);display:flex;align-items:center;justify-content:center}
.pdp-lightbox img {max-width:92vw;max-height:92vh;object-fit:contain}
.pdp-lightbox__close {position:absolute;top:18px;right:22px;background:none;border:0;color:var(--on-dark);font-size:var(--fs-h3);cursor:pointer}
.pdp-lightbox__nav {position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--on-dark);font-size:var(--fs-h1);cursor:pointer;padding:12px 20px}
.pdp-lightbox__nav--prev {left:8px}
.pdp-lightbox__nav--next {right:8px}
.pdp-qty {display:inline-flex;align-items:center;border:1px solid var(--line, #ddd);border-radius:0;overflow:hidden}
.pdp-qty__btn {width:38px;height:44px;background:none;border:0;font-size:var(--fs-lede);cursor:pointer}
.pdp-qty__val {min-width:34px;text-align:center;font-weight:500}
.pdp__stock, .pdp__sku {font-size:var(--fs-small);color:var(--ink-muted, #777);margin:8px 0 0}

/* Circle category cards (00-default design, 2026-07-19): collection-grid
   widget imageShape=circle — round tinted media, centered text, no card
   chrome. Tints rotate per card like the design's ph-img tint-a..f. */
.cat-index-grid--circle {gap:12px}
.cat-index-grid--circle .cat-index-card {text-align:center;border:0;background:transparent;box-shadow:none}
.cat-index-grid--circle .cat-index-card__media {aspect-ratio:1 / 1;border-radius:999px;overflow:hidden}
.cat-index-grid--circle .cat-index-card:hover .cat-index-card__media {transform:scale(1.02)}
.cat-index-grid--circle .cat-index-card__row {justify-content:center;flex-direction:column;gap:2px;align-items:center}
.cat-index-grid--circle .cat-index-card__cta {display:none}
.cat-index-grid--circle .cat-index-card__name {font-size:var(--fs-small);font-weight:500}
.cat-index-grid--circle .cat-index-card__count {font-size:var(--fs-label);color:var(--ink-soft)}
.cat-index-grid--circle .cat-index-card:nth-child(6n+1) .cat-index-card__media {background:linear-gradient(135deg,#e8f0f5,#d3dee6)}
.cat-index-grid--circle .cat-index-card:nth-child(6n+2) .cat-index-card__media {background:linear-gradient(135deg,#f5ede4,#e8d9c6)}
.cat-index-grid--circle .cat-index-card:nth-child(6n+3) .cat-index-card__media {background:linear-gradient(135deg,#ece8f0,#d9d2e2)}
.cat-index-grid--circle .cat-index-card:nth-child(6n+4) .cat-index-card__media {background:linear-gradient(135deg,#e4f0ea,#c9ddd0)}
.cat-index-grid--circle .cat-index-card:nth-child(6n+5) .cat-index-card__media {background:linear-gradient(135deg,#fcf2e6,#f2dfc2)}
.cat-index-grid--circle .cat-index-card:nth-child(6n+6) .cat-index-card__media {background:linear-gradient(135deg,#f5e4e4,#e6cbcb)}
.cat-index-grid--6 {grid-template-columns:repeat(6, 1fr)}
@media (max-width: 900px) { .cat-index-grid--6 {grid-template-columns:repeat(3, 1fr)} }

/* Side-thumb gallery layouts reflow to thumbs-under on phones (2026-07-19):
   a 76px thumb rail beside the main image crushes it at phone widths, so
   both side layouts collapse to the stacked flow below 768px. */
@media (max-width: 767px) {
  .pdp-gallery--thumbs-left, .pdp-gallery--thumbs-right {display:block}
  .pdp-gallery--thumbs-left .gallery__main, .pdp-gallery--thumbs-right .gallery__main {margin-bottom:12px}
  .pdp-gallery--thumbs-left .gallery__thumbs, .pdp-gallery--thumbs-right .gallery__thumbs {flex-direction:row;overflow-x:auto;overflow-y:hidden;max-height:none}
  .pdp-gallery--thumbs-left .gallery__thumbs-nav, .pdp-gallery--thumbs-right .gallery__thumbs-nav {display:none}
}

/* ── Subcategory pill band + pager + filter checkboxes (2026-07-19) ──
   Base look for the subcats_display=pills capability and the pager band;
   merchants restyle via the subcats/subcat-pill/pagination style targets. */
.subcat-pills {display:flex;gap:8px;overflow-x:auto;padding:20px 0 4px;margin-top:8px;scrollbar-width:none}
.subcat-pills::-webkit-scrollbar {display:none}
.subcat-pill {flex-shrink:0;padding:8px 16px;border:1px solid var(--line, #e7e5df);border-radius:999px;font-size:var(--fs-small);font-weight:500;background:var(--bg, #fafaf8);display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;transition:border-color .15s}
.subcat-pill:hover {border-color:var(--ink, #111)}
.subcat-pill.is-active {background:var(--ink, #111);color:var(--on-dark);border-color:var(--ink, #111)}
.subcat-pill__n {color:var(--ink-muted, #6b6b6b);font-size:var(--fs-label)}
.subcat-pill.is-active .subcat-pill__n {color:rgba(255,255,255,.55)}
.pagination {display:flex;justify-content:space-between;align-items:center;margin-top:34px;padding-top:24px;border-top:1px solid var(--line, #e7e5df);font-size:var(--fs-small)}
.pagination__progress {color:var(--ink-muted, #6b6b6b);font-size:var(--fs-fine)}
.pagination__progress b {color:var(--ink, #111);font-weight:500}
.pagination__bar {flex:1;max-width:240px;height:3px;background:var(--line, #e7e5df);border-radius:0;margin:0 20px;position:relative;overflow:hidden}
.pagination__bar-fill {position:absolute;left:0;top:0;bottom:0;background:var(--ink, #111);border-radius:0}
.pagination__ctrl {display:flex;gap:4px}
.pagination .page-btn {width:36px;height:36px;border-radius:0;display:grid;place-items:center;font-size:var(--fs-small);font-weight:500;color:var(--ink, #111);border:1px solid transparent;background:none;cursor:pointer;padding:0}
.pagination .page-btn:hover {background:var(--bg, #fafaf8)}
.pagination .page-btn.is-active {background:var(--ink, #111);color:var(--on-dark)}
.pagination .page-btn--nav {border-color:var(--line, #e7e5df);background:var(--panel, #fff)}
/* Toolbar internals (00-default): chips ride the bar's left group, count +
   sort pill the right. */
.filter-bar__left {display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.filter-bar__right {display:flex;align-items:center;gap:16px;flex-shrink:0}
.fchip {display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg, #fafaf8);border:1px solid var(--line, #e7e5df);border-radius:999px;font-size:var(--fs-fine);font-weight:500;color:var(--ink, #111);cursor:pointer;font-family:var(--font)}
.fchip__x {width:16px;height:16px;border-radius:50%;background:var(--ink, #111);color:var(--on-dark);font-size:var(--fs-label);display:grid;place-items:center}
.filter-clear {background:none;border:0;cursor:pointer;color:var(--ink-muted, #6b6b6b);font-size:var(--fs-fine);text-decoration:underline;padding:0 8px;font-family:var(--font)}
.filter-clear:hover {color:var(--ink, #111)}
.result-count b {color:var(--ink, #111);font-weight:500}
.filter-bar .sort-select {border-radius:999px;font-size:var(--fs-fine);font-weight:500;padding:8px 34px 8px 16px;min-width:0}
/* ── About + FAQ band (seo-faq section, 00-default) ── */
.seofaq {background:var(--panel, #fff);border-top:1px solid var(--line, #e7e5df);padding:60px 0}
.seofaq__grid {display:grid;grid-template-columns:1fr 1.4fr;gap:44px;align-items:start}
@media (max-width: 900px) { .seofaq__grid {grid-template-columns:1fr} }
.seofaq__title {font-family:var(--font-heading);font-weight:300;font-size:var(--fs-h2);letter-spacing:-.02em;line-height:1.1;margin:0 0 16px}
.seofaq__title em {font-style:normal;font-weight:300}
.seofaq__lede {color:var(--ink-muted, #6b6b6b);font-size:var(--fs-small);line-height:1.7;margin:0}
.seofaq__faq {display:flex;flex-direction:column}
.seofaq__q {border-bottom:1px solid var(--line, #e7e5df);padding:16px 0}
.seofaq__q:first-child {border-top:1px solid var(--line, #e7e5df)}
.seofaq__q summary {cursor:pointer;list-style:none;font-family:var(--font-heading);font-size:var(--fs-body);font-weight:500;display:flex;justify-content:space-between;align-items:center;letter-spacing:-.005em}
.seofaq__q summary::-webkit-details-marker {display:none}
.seofaq__q summary::after {content:"+";font-size:var(--fs-quote);color:var(--ink-muted, #6b6b6b);font-weight:300;margin-left:12px;line-height:1}
.seofaq__q[open] summary::after {content:"−"}
.seofaq__q p {margin:12px 0 0;font-size:var(--fs-small);color:var(--ink-muted, #6b6b6b);line-height:1.6}
.filter-item input[type="checkbox"] {appearance:none;width:15px;height:15px;border:1.5px solid var(--line, #e7e5df);border-radius:0;position:relative;flex-shrink:0;cursor:pointer}
.filter-item input[type="checkbox"]:checked {background:var(--ink, #111);border-color:var(--ink, #111)}
.filter-item input[type="checkbox"]:checked::after {content:"✓";position:absolute;color:var(--on-dark);font-size:var(--fs-label);top:50%;left:50%;transform:translate(-50%, -50%)}

/* ── PDP gallery aspect capability (2026-07-19): gallery_aspect setting ── */
.pdp-gallery--aspect-square .gallery__main img {aspect-ratio:1 / 1;object-fit:cover;width:100%}
.pdp-gallery--aspect-portrait .gallery__main img {aspect-ratio:4 / 5;object-fit:cover;width:100%}

/* ══ Home sections v2 (2026-08-19 structure conversion) — hero / promo-tiles /
     quote-rotator / journal-teaser / newsletter-banner. Each block is scoped to
     its section class; mobile rules live beside their desktop rules. ══ */

/* ── hero ── */
.heroS {background:var(--paper, #faf9f7)}
.heroS__grid {display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;padding-top:60px;padding-bottom:60px}
.heroS__title {font-family:var(--font-display);font-size:var(--fs-h1);font-weight:300;line-height:1.02;letter-spacing:-0.025em;color:var(--ink);margin:20px 0 24px}
.heroS__title em {font-style:normal;font-weight:300}
.heroS__intro {font-size:var(--fs-body);line-height:1.7;color:var(--ink-soft);max-width:480px;margin:0 0 24px}
.heroS__ctas {display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.heroS__btn {border-radius:999px;padding:12px 24px}
.heroS__reviews {font-size:var(--fs-small);color:var(--ink-soft);margin:0}
.heroS__stars {color:var(--accent);letter-spacing:2px;margin-right:8px}
.heroS__media {position:relative}
.heroS__img, .heroS__ph {width:100%;aspect-ratio:5 / 6;border-radius:0;object-fit:cover;display:block}
.heroS__ph {background:linear-gradient(135deg, #efece6 0%, #e7e2d9 48%, #efece6 100%);position:relative}
.heroS__ph::before, .heroS__ph::after {content:"";position:absolute;inset:0;background:linear-gradient(to top right, transparent calc(50% - 1px), rgba(29,27,24,.07), transparent calc(50% + 1px))}
.heroS__ph::after {transform:scaleX(-1)}
.heroS__ph-label {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background:rgba(255,255,255,.75);color:var(--ink-muted);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;padding:8px 16px;border-radius:999px;white-space:nowrap}
.heroS__statcard {position:absolute;left:24px;bottom:-26px;background:var(--porcelain);border-radius:0;box-shadow:0 12px 32px rgba(29,27,24,.12);padding:20px 24px;display:flex;gap:34px}
.heroS__stat .stat-num {font-size:var(--fs-quote);font-weight:650;color:var(--ink)}
.heroS__stat .stat-lbl {font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-muted);margin-top:2px}
@media (max-width: 900px) {
  .heroS__grid {grid-template-columns:1fr;gap:34px;padding-top:44px;padding-bottom:44px}
  .heroS__title {font-size:var(--fs-h1);line-height:1.05}
  .heroS__ctas {flex-direction:column;align-items:flex-start;gap:12px}
  .heroS__statcard {position:static;margin-top:16px;display:inline-flex}
}

/* ── promo-tiles ── */
.promoT {display:grid;gap:20px}
.promoT--two {grid-template-columns:1fr 1fr}
.promoT__tile {border-radius:0;padding:44px 44px;min-height:240px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;background-size:cover;background-position:center}
.promoT__tile--dark {background-color:#23201c;background-image:linear-gradient(160deg, #33302a, #1d1b18)}
.promoT__tile--linen {background-color:#efece6;background-image:linear-gradient(160deg, #f4f1eb, #e7e2d9)}
.promoT__tile--accent {background-color:var(--accent-deep, #6d5f4b);background-image:linear-gradient(160deg, var(--accent, #8a795d), var(--accent-deep, #6d5f4b))}
.promoT__eyebrow {font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;margin:0 0 8px;color:rgba(255,255,255,.72)}
.promoT__tile--linen .promoT__eyebrow {color:var(--ink-soft)}
.promoT__heading {font-family:var(--font-display);font-size:var(--fs-h2);font-weight:300;line-height:1.1;margin:0 0 20px;color:var(--on-dark)}
.promoT__heading em {font-style:normal;font-weight:300}
.promoT__tile--linen .promoT__heading {color:var(--ink)}
.promoT__cta {border-radius:999px}
@media (max-width: 900px) {
  .promoT--two {grid-template-columns:1fr}
  .promoT__tile {padding:34px 24px;min-height:190px}
  .promoT__heading {font-size:var(--fs-h3)}
}

/* ── quote-rotator ── */
.quoteR {background:var(--paper, #faf9f7)}
.quoteR__wrap {max-width:820px;text-align:center}
.quoteR__stars {color:var(--accent);letter-spacing:3px;font-size:var(--fs-body);margin:0 0 20px}
.quoteR__item {margin:0}
.quoteR__text {font-family:var(--font-display);font-size:var(--fs-h2);font-weight:450;line-height:1.28;letter-spacing:-0.01em;color:var(--ink);margin:0 0 20px}
.quoteR__text em {font-style:normal;font-weight:300;color:var(--accent-deep, inherit)}
.quoteR__attr {font-size:var(--fs-small);color:var(--ink-soft)}

/* ── journal-teaser ── */
.journalT {display:grid;grid-template-columns:repeat(3, 1fr);gap:24px}
.journalT__card {display:block;text-decoration:none;color:inherit}
.journalT__media {aspect-ratio:16 / 10;border-radius:0;background:linear-gradient(135deg, #efece6, #e7e2d9);overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.journalT__media img {width:100%;height:100%;object-fit:cover;display:block}
.journalT__media-ph {color:var(--ink-muted);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase}
.journalT__meta {font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-muted);margin:0 0 8px}
.journalT__title {font-family:var(--font-display);font-size:var(--fs-quote);font-weight:300;line-height:1.25;margin:0 0 8px;color:var(--ink)}
.journalT__title em {font-style:normal;font-weight:300}
.journalT__summary {font-size:var(--fs-small);line-height:1.6;color:var(--ink-soft);margin:0}
a.journalT__card:hover .journalT__title {text-decoration:underline;text-underline-offset:3px}
@media (max-width: 900px) { .journalT {grid-template-columns:1fr;gap:24px} }

/* ── newsletter-banner ── */
.nlB {background:#1d1b18;color:var(--inv-text, #f5f3ef);padding:60px 0}
.nlB__wrap {max-width:720px;text-align:center;display:flex;flex-direction:column;align-items:center}
.nlB__title {font-family:var(--font-display);font-size:var(--fs-h1);font-weight:300;line-height:1.1;letter-spacing:-0.02em;margin:16px 0 12px;color:var(--on-dark)}
.nlB__title em {font-style:normal;font-weight:300;color:var(--ink)}
.nlB__sub {font-size:var(--fs-body);line-height:1.65;color:rgba(245,243,239,.65);margin:0 0 24px;max-width:520px}
.nlB__form {width:100%;max-width:480px}
.nlB__row {display:flex;gap:12px}
.nlB__input {flex:1;min-width:0;border:1px solid rgba(245,243,239,.25);background:rgba(255,255,255,.06);color:var(--on-dark);border-radius:999px;padding:12px 20px;font-size:var(--fs-small)}
.nlB__input::placeholder {color:rgba(245,243,239,.45)}
.nlB__btn {border-radius:999px;padding:12px 24px}
.nlB__msg {font-size:var(--fs-small);margin:0 0 12px}
.nlB__msg--ok {color:#a7f3d0}
.nlB__msg--err {color:#fecaca}
@media (max-width: 640px) {
  .nlB__row {flex-direction:column}
  .nlB__btn {width:100%}
}

/* stat card collapses when every stat inside it is hidden via the element eye
   (stripHiddenEls removes the stat nodes server-side; without this the empty
   white pill lingered — Tony 2026-08-19 23:23). */
.heroS__statcard:not(:has(.heroS__stat)) {display:none}

/* ── PLATFORM PAGES + LEGACY COMPONENTS ON THE BRAND (brand book v1.0, 2026-10-14) ──
   Sign in / register / password / account are platform Livewire views styled
   with Tailwind utilities and the Design panel tokens (--ac-*, which carry the
   brand via NubodyBrandSettingsSeeder); cart, checkout and content pages ride
   on the legacy default-new rules above. This layer lands after both and
   squares off what they hard-code: rounded corners, resting shadows, bold
   weights, sentence-case form labels, the accent-filled primary button.
   Tailwind utilities sit in @layer utilities, so these unlayered rules win
   without !important; inline styles on the platform button need it. */

/* buttons: Ink, square, an 11px Medium label; filled ↔ outlined on hover (§06) */
.btn--primary{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.btn--primary:hover,.btn--primary[data-v3-state~="hover"]{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--lg{justify-content:center}
#main-content .btn-primary{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;padding:21px 34px;border:1px solid var(--ink)!important;transition:background .35s,color .35s}
#main-content .btn-primary:hover:not(:disabled){background-color:transparent!important;color:var(--ink)!important}

/* square corners, no resting shadows, never bold */
#main-content :is(.rounded-sm,.rounded,.rounded-md,.rounded-lg,.rounded-xl,.rounded-2xl,.rounded-3xl){border-radius:0}
#main-content :is(.shadow-sm,.shadow,.shadow-md,.shadow-lg,.shadow-xl){box-shadow:none}
#main-content :is(.font-semibold,.font-bold,.font-extrabold,.font-black){font-weight:500}

/* form fields: Porcelain, Seam hairline, Ink on focus; labels are brand labels */
#main-content form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea){border-radius:var(--radius-input);box-shadow:none!important;background-color:var(--surface)!important}
#main-content form :is(input,select,textarea):focus{border-color:var(--ink)!important;outline:none}
#main-content form label.font-medium{font-size:var(--fs-label)!important;font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--stone)!important}

/* product grids: the legacy .pgrid--N column counts held 4 across at every width, so the PDP's
   "Often kept together" row overflowed a phone sideways (410px on 390). Two across below the
   design's 1080px break, as .pgrid itself does. */
@media (max-width:1080px){.pgrid--3,.pgrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── TYPE ROLES (brand book v1.0 §03, 3 Nov 2026) ──
   The brand pass maps each design size to its NEAREST type token, so one role
   came out at different sizes on different pages: legal-page section headings
   at the lede size (19px) under a 58px title, step titles at 19px on the home
   and the hubs but 26px elsewhere, quotes at 24px or 26px. This layer lands
   last and gives every heading role one token, sitewide. Rules are scoped to
   #main-content (the <main> on every page) so they outrank the design's
   class rules without !important:
     page title ............ H1 (the home hero keeps the Hero size)
     section opener ........ H1 size (.h-sec and the dark/CTA band headlines)
     section heading ....... H2 (sub-sections, legal pages, empty states, sign-in)
     step and card title ... H3 (product-grid card titles: Quote)
     heading inside legal text  Lede, Medium
     quote ................. Quote, lh 1.34 */

/* page title */
#main-content h1{font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.015em}
#main-content .hm-hero h1{font-size:var(--fs-hero);line-height:.9;letter-spacing:var(--ls-hero)}

/* section headings: H2 unless the heading opens a band */
#main-content h2{font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.015em}
#main-content :is(.h-sec,.jsplit h2,.ctaband h2,.editcta h2){font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.015em}
#main-content .hm-how__title h2{font-size:var(--fs-label);line-height:1.04;letter-spacing:var(--ls-label)}

/* step and card titles */
#main-content h3{font-size:var(--fs-h3);line-height:1.1;letter-spacing:-.015em}
#main-content h3.pcard__title{font-size:var(--fs-quote);line-height:1.2}
#main-content .content-page h3{font-size:var(--fs-lede);font-weight:500;line-height:1.34;letter-spacing:0}

/* quotes and statements */
#main-content blockquote,#main-content .optnote p.big{font-size:var(--fs-quote);line-height:1.34}

/* the sign-in / register card title is a section heading, not a page-width H1 */
#main-content h1:is(.text-3xl,.text-2xl){font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.015em}

/* never bold: the header basket count */
#site-header [data-block-type="header-cart"] [data-sub-element="badge"]{font-weight:500}