@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════════
   THE BOX CO — app.css
   The single stylesheet for the whole site (public + account + admin shell).
   Ported from reference/index.html. Vanilla CSS. No framework, no build step.

   CONTENTS
     01  TOKENS
     02  RESET · BASE TYPE · FOCUS · SELECTION
     03  LAYOUT — .wrap .sec .center .head .grid .rail .railnav .card
     04  BUTTONS · ICON BUTTONS · PILLS · CHIPS · TAGS · BADGES
     05  HEADER · SEARCH · MEGA MENU · MOBILE DRAWER
     06  PRODUCT CARD · CATEGORY CARD · QUICK CARD
     07  PDP — gallery, variants, price, specs, sticky buy panel
     08  LISTING — filters, sort, active chips, empty state
     09  FORMS — fields, auth cards, checkout, address book
     10  CART — line items, stepper, summary, cart drawer
     11  TABLES · ALERTS · EMPTY · CRUMBS · PAGINATION · TOASTS · UTILITIES
     12  HOME — hero, trust band, marquee, info band
     13  FOOTER
     15  RESPONSIVE  (1200 / 1024 / 860 / 700 / 560)
     16  REDUCED MOTION
     17  PRINT
     18  GENERATED ARTWORK — .art .art-mini .a-*
     19  HOME — catalogue index (.idx__*)
     20  HOME — range bento (.rbento .rcard) · tab panels · .load
     21  HOME — die-line stage (.stage .dieline .dl-* .fcard)
     22  HOME — dark panel · three-ways cards · WhatsApp quote
     23  HOME — "own factory" evidence (.evi .eblock .e-*)
     24  HOME — price ladder (.ladder .readout .save)
     25  HOME — scenario cards (.scen .scard__*)
     26  HOME — factory build track (.track .stop .build .b-*)
     27  HOME — comparison table · process dial · expanding panels · .faq2
     28  LISTING — category index (.jump .rsec .lgrid .lcard__*)
     29  PDP — sizes · add-ons · size table · note · quote drawer
     31  RESPONSIVE for §18-§29
     32  REDUCED MOTION for §18-§29
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   01  TOKENS
   The palette block below is the design contract (SPEC §5) and is reproduced
   verbatim. Underneath it sits a thin SEMANTIC layer — surfaces, text, lines —
   which is what every component actually reads: a surface, a text colour or a
   line is changed in one place rather than in every component that uses it.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --red:#E31E25; --red-deep:#A81319; --red-dark:#7C0E13;
  --red-wash:#FDF1F1; --red-tint:#F9DEDF;
  --ink:#0A0A0B; --ink-2:#141417; --ink-3:#1E1E22;
  --white:#fff;
  --g50:#FAFAFA; --g100:#F4F4F5; --g150:#EDEDEF; --g200:#E5E5E7;
  --line:#E4E4E7; --line-2:#D4D4D8; --muted:#6F6F78; --muted-2:#A1A1AA;

  --display:"Bricolage Grotesque","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;

  --f-hero:clamp(2.5rem,6.2vw,5.2rem);
  --f-h2:clamp(1.8rem,3.8vw,3.05rem);
  --f-h3:clamp(1.1rem,1.55vw,1.36rem);
  --f-lead:clamp(1rem,1.22vw,1.26rem);
  --f-body:clamp(.93rem,1vw,1.01rem);
  --f-sm:clamp(.84rem,.92vw,.92rem);
  --f-xs:clamp(.75rem,.79vw,.79rem);

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:2.5rem; --s8:3rem; --s9:4rem; --s10:5rem; --s11:6.5rem;

  --gut:clamp(1rem,2.4vw,1.75rem);
  --max:87rem;
  /* Corners: soft, not squarish. The panels and sections carry the generous
     radius the design was drawn with; the product card is deliberately tighter
     so a grid of tiles reads as crisp rather than bubbly. Round things (pills,
     chips, avatars, dots, icon buttons) opt in with 999px / 50% and are not
     governed by these tokens. */
  --r:12px; --r-lg:18px; --r-xl:26px; --r-2xl:26px;
  --r-card:10px;   /* product + category tiles */

  --ease:cubic-bezier(.19,.72,.28,1);
  --dur:170ms; --dur-l:620ms;
  --sh1:0 1px 2px rgba(10,10,11,.04), 0 8px 22px -12px rgba(10,10,11,.16);
  --sh2:0 2px 6px rgba(10,10,11,.05), 0 26px 60px -22px rgba(10,10,11,.3);
  --sh-red:0 12px 30px -12px rgba(227,30,37,.55);

  /* ── semantic layer ─────────────────────────────────────────────────── */
  --bg:var(--white);              /* page ground                          */
  --surface:var(--white);         /* cards, drawers, menus                */
  --surface-2:var(--g50);         /* quiet panels                         */
  --surface-3:var(--g100);        /* inputs, chips, wells                 */
  --surface-4:var(--g150);        /* pressed / hovered wells              */
  --text:var(--ink);              /* body copy                            */
  --text-2:var(--muted);          /* secondary copy                       */
  --text-3:var(--muted-2);        /* tertiary, placeholders               */
  --red-ink:var(--red-deep);      /* red used as TEXT (never as a bg)     */
  --hdr-bg:rgba(255,255,255,.93); /* translucent sticky header            */
  --scrim:rgba(10,10,11,.5);
  --ft-bg:var(--ink);
  --ft-text:rgba(255,255,255,.68);
  --ok:#14804A; --ok-wash:#ECFAF1;
  --warn:#9A6200; --warn-wash:#FFF7E6;
  --hdr-h:118px;                  /* header height; sticky offsets read it */

  /* ── reference sections (§18-§29) ───────────────────────────────────── */
  --hot:var(--ink);               /* "hot" / selected ink surface         */
  --hot-line:var(--ink);          /* its edge                             */
  --art-face:#fff;                /* drawn box — lid                      */
  --art-face-2:#F1F1F3;           /* drawn box — right face               */
  --art-face-3:#E3E3E7;           /* drawn box — left face                */
  --art-line:var(--ink);          /* drawn box — outline                  */
  --art-fine:var(--muted-2);      /* drawn box — hairlines                */
  --art-sh:rgba(10,10,11,.08);    /* drawn box — cast shadow              */
  --art-win:#fff;                 /* drawn box — die-cut window           */
  --art-flap:#FBFBFC;             /* drawn box — open flap                */
}


/* ══════════════════════════════════════════════════════════════════════════
   02  RESET · BASE TYPE · FOCUS · SELECTION
   ══════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; color-scheme:light;
  scroll-padding-top:calc(var(--hdr-h) + 1rem)}

html.is-locked{overflow:hidden}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--body);
  font-size:var(--f-body); line-height:1.6; -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;      /* fallback for browsers without clip …            */
  overflow-x:clip;        /* …clip keeps position:sticky working on the hdr */
  min-height:100vh; display:flex; flex-direction:column}
body > main{flex:1 0 auto}

h1,h2,h3,h4{font-family:var(--display); font-weight:800; line-height:1.03;
  letter-spacing:-.03em; margin:0; text-wrap:balance; color:var(--text)}
h1,.t-hero{font-size:var(--f-hero); letter-spacing:-.042em; line-height:1}
h2{font-size:var(--f-h2); letter-spacing:-.035em}
h3{font-size:var(--f-h3)}
h4{font-size:var(--f-sm); letter-spacing:-.01em}
h1 em,h2 em,h3 em{font-style:normal; color:var(--red)}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
a.link{color:var(--red-ink); font-weight:600; text-underline-offset:3px;
  text-decoration:underline; text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--red) 40%,transparent)}
a.link:hover{text-decoration-color:currentColor}
img{display:block; max-width:100%}
svg{display:block}
hr{border:0; border-top:1px solid var(--line); margin:var(--s4) 0}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
table{border-collapse:collapse; width:100%}
address{font-style:normal}
small{font-size:var(--f-xs)}
b,strong{font-weight:700}
[hidden]{display:none !important}

:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:5px}
::selection{background:var(--red); color:#fff}

.skip{position:absolute; left:50%; top:-100px; transform:translateX(-50%); z-index:400;
  background:var(--ink); color:#fff; font-size:var(--f-sm); font-weight:600;
  padding:.75rem 1.35rem; border-radius:0 0 var(--r) var(--r);
  transition:top var(--dur) var(--ease)}
.skip:focus-visible{top:0}

/* type helpers */
.lead{font-size:var(--f-lead); line-height:1.5; color:var(--text-2)}
.sm{font-size:var(--f-sm)}
.xs{font-size:var(--f-xs)}
.mute{color:var(--text-2)}
.mute-2{color:var(--text-3)}
.num{font-variant-numeric:tabular-nums}
.center{text-align:center}
.nowrap{white-space:nowrap}
.uc{text-transform:uppercase; letter-spacing:.1em; font-size:var(--f-xs); font-weight:600}


/* ══════════════════════════════════════════════════════════════════════════
   03  LAYOUT
   ══════════════════════════════════════════════════════════════════════════ */
.wrap{width:min(100% - (var(--gut)*2), var(--max)); margin-inline:auto}
.wrap--narrow{width:min(100% - (var(--gut)*2), 62rem)}
.wrap--tight{width:min(100% - (var(--gut)*2), 46rem)}

.sec{padding-block:clamp(3rem,6.5vw,6.5rem)}
.sec--sm{padding-block:clamp(2rem,4vw,3.5rem)}
.sec--xs{padding-block:clamp(1.25rem,2.4vw,2rem)}
.sec--top{padding-top:clamp(1.5rem,3vw,2.75rem)}
.sec--tint{background:var(--surface-2)}
.sec--wash{background:var(--red-wash)}
.sec--band{background:var(--ink); color:#fff}
.sec--band h1,.sec--band h2,.sec--band h3,.sec--band h4{color:#fff}
.sec--band .lead,.sec--band .mute{color:rgba(255,255,255,.68)}

/* section heading row: title left, action right */
.head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:var(--s5) var(--s8)}
.head__t{max-width:44rem}
.head__t .tag{margin-bottom:var(--s4)}
.head__t p{margin-top:var(--s4)}
.head__a{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}

/* the product grid — auto-fit, collapses cleanly, never scrolls sideways */
.grid{display:grid; gap:var(--gut);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 16rem), 1fr))}
.grid--wide{grid-template-columns:repeat(auto-fill, minmax(min(100%, 20rem), 1fr))}
.grid--tight{grid-template-columns:repeat(auto-fill, minmax(min(100%, 13rem), 1fr))}
.grid--2{grid-template-columns:repeat(auto-fit, minmax(min(100%, 22rem), 1fr))}
.grid--3{grid-template-columns:repeat(auto-fit, minmax(min(100%, 17rem), 1fr))}
.grid--4{grid-template-columns:repeat(auto-fit, minmax(min(100%, 14rem), 1fr))}
.grid + .pagination{margin-top:var(--s8)}

/* generic surface card */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.15rem,2vw,1.75rem)}
.card--flat{box-shadow:none}
.card--pad{padding:clamp(1.5rem,2.8vw,2.5rem)}
.card--tint{background:var(--surface-2)}
.card--lift{transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
  border-color var(--dur) var(--ease)}
.card--lift:hover{transform:translateY(-2px); box-shadow:var(--sh2); border-color:var(--line-2)}
.card__h{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding-bottom:var(--s4); margin-bottom:var(--s5); border-bottom:1px solid var(--line)}
.card__h h3{font-size:clamp(1rem,1.3vw,1.16rem)}

/* horizontal scroller + its arrows */
.rail{display:grid; grid-auto-flow:column; gap:var(--gut); overflow-x:auto;
  scroll-snap-type:x proximity; scroll-behavior:smooth; scrollbar-width:none;
  padding:14px 3px 18px; margin:0}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}
.rail--sm{grid-auto-columns:minmax(150px,1fr)}
.rail--md{grid-auto-columns:minmax(210px,1fr)}
.rail--lg{grid-auto-columns:minmax(270px,1fr)}
.railnav{display:flex; gap:.5rem}
.railnav button:disabled{opacity:.35; cursor:not-allowed}
.railnav button:disabled:hover{background:var(--surface); color:var(--text);
  border-color:var(--line); transform:none}

/* two-column page shell: sidebar + content (listing, account, admin) */
.split{display:grid; grid-template-columns:17rem minmax(0,1fr); gap:clamp(1.5rem,3vw,3rem);
  align-items:start}
.split--right{grid-template-columns:minmax(0,1fr) 22rem}
.stack{display:grid; gap:var(--s4)}
.stack--lg{display:grid; gap:var(--s6)}
.row{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.row--between{justify-content:space-between}
.row--end{justify-content:flex-end}
.spacer{flex:1}
.stack--xs{display:grid; gap:var(--s1)}
.sec--xl{padding-block:clamp(3.5rem,8vw,var(--s11))}
.divider{height:1px; background:var(--g200); border:0; margin-block:var(--s6)}
.scrollbox{overflow:auto; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent}
.scrollbox::-webkit-scrollbar{width:8px; height:8px}
.scrollbox::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:99px}
.scrollbox::-webkit-scrollbar-track{background:var(--g200)}


/* ══════════════════════════════════════════════════════════════════════════
   04  BUTTONS · ICON BUTTONS · PILLS · CHIPS · TAGS · BADGES
   Buttons are pills. Red is the CTA and nothing else.
   ══════════════════════════════════════════════════════════════════════════ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--body); font-weight:600; font-size:var(--f-sm); line-height:1.2;
  padding:.95em 1.75em; border-radius:999px; border:1px solid transparent;
  white-space:nowrap; cursor:pointer; text-align:center;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease)}
.btn svg{flex:none}

.btn--red{background:var(--red); color:#fff !important; border-color:var(--red)}
.btn--red:hover{background:var(--red-deep); border-color:var(--red-deep);
  transform:translateY(-2px); box-shadow:var(--sh-red)}
.btn--red:active{transform:translateY(0); box-shadow:none}

.btn--ink{background:var(--ink); color:#fff !important; border-color:var(--ink)}
.btn--ink:hover{background:var(--ink-2); border-color:var(--ink-2);
  transform:translateY(-2px); box-shadow:var(--sh1)}
.btn--ink:active{transform:translateY(0); box-shadow:none}

.btn--out{border-color:var(--line-2); background:var(--surface); color:var(--text) !important}
.btn--out:hover{border-color:var(--text); transform:none}

.btn--ghost{border-color:rgba(255,255,255,.32); color:#fff !important; background:transparent}
.btn--ghost:hover{background:rgba(255,255,255,.12); border-color:#fff}

.btn--soft{background:var(--red-wash); color:var(--red-ink) !important; border-color:transparent}
.btn--soft:hover{background:var(--red-tint)}

.btn--quiet{background:var(--surface-3); color:var(--text) !important; border-color:transparent}
.btn--quiet:hover{background:var(--surface-4)}

.btn--danger{background:transparent; border-color:var(--line-2); color:var(--red-ink) !important}
.btn--danger:hover{background:var(--red); border-color:var(--red); color:#fff !important}

.btn--pill{padding:.72em 1.35em; font-size:var(--f-sm);
  border:1px solid var(--line-2); background:var(--surface)}
.btn--pill:hover{border-color:var(--text)}

.btn--sm{padding:.68em 1.15em; font-size:var(--f-xs)}
.btn--lg{padding:1.08em 2.15em; font-size:var(--f-body)}
.btn--block{display:flex; width:100%}
.btn--wide{min-width:12rem}

.btn:disabled,.btn[aria-disabled="true"],.btn.is-disabled{
  opacity:.45; cursor:not-allowed; pointer-events:none; box-shadow:none; transform:none}

/* async state — app.js toggles .is-busy while a fetch is in flight */
.btn.is-busy{position:relative; color:transparent !important; pointer-events:none}
.btn.is-busy::after{content:""; position:absolute; width:1.05em; height:1.05em;
  border-radius:50%; border:2px solid currentColor; border-top-color:transparent;
  color:#fff; animation:spin .7s linear infinite}
.btn--out.is-busy::after,.btn--pill.is-busy::after,.btn--quiet.is-busy::after{color:var(--text)}
@keyframes spin{to{transform:rotate(360deg)}}

/* the quiet inline "→" link */
.arrow{display:inline-flex; align-items:center; gap:.5em; font-weight:600;
  font-size:var(--f-sm); color:var(--red-ink); transition:gap var(--dur) var(--ease)}
.arrow:hover{gap:.85em}

.iconbtn{width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2);
  background:var(--surface); color:var(--text); display:grid; place-items:center; flex:none;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    color var(--dur) var(--ease), transform var(--dur) var(--ease)}
.iconbtn:hover{border-color:var(--ink); background:var(--ink); color:#fff; transform:none}
.iconbtn--sm{width:38px; height:38px}
.iconbtn:disabled{opacity:.35; cursor:not-allowed}

/* segmented pill group (tabs, view switchers) */
.pills{display:inline-flex; flex-wrap:wrap; gap:.2rem; padding:.28rem;
  background:var(--surface-3); border-radius:999px}
.pills button,.pills a{padding:.68em 1.2em; border-radius:999px; font-weight:600;
  font-size:var(--f-sm); color:var(--text-2); white-space:nowrap; cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.pills button:hover,.pills a:hover{color:var(--text)}
.pills button[aria-selected="true"],.pills a[aria-selected="true"],
.pills button.is-on,.pills a.is-on,.pills a.is-active{
  background:var(--red); color:#fff; box-shadow:var(--sh-red)}
.pills--ink button[aria-selected="true"],.pills--ink a[aria-selected="true"],
.pills--ink a.is-active{background:var(--ink); color:#fff; box-shadow:var(--sh1)}
.pills--sm button,.pills--sm a{padding:.5em .95em; font-size:var(--f-xs)}

/* static chip (facts, materials) */
.chip{display:inline-flex; align-items:center; gap:.4rem; font-size:var(--f-xs);
  font-weight:600; padding:.4em .85em; border-radius:999px;
  background:var(--surface-3); color:var(--text-2)}
.chip--red{background:var(--red-wash); color:var(--red-ink)}
.chip--ink{background:var(--ink); color:#fff}
.chip--out{background:transparent; border:1px solid var(--line); color:var(--text-2)}
.chip--ok{background:var(--ok-wash); color:var(--ok)}
.chip i{width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; opacity:.7}

/* clickable chip — subcategory strip, filter values */
a.chip,button.chip{cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease)}
a.chip:hover,button.chip:hover{background:var(--red-wash); color:var(--red-ink);
  transform:translateY(-1px)}
a.chip[aria-current="page"],a.chip.is-active,button.chip.is-active{
  background:var(--ink); color:#fff}
a.chip[aria-current="page"]:hover,a.chip.is-active:hover{background:var(--ink-2); color:#fff}
.chip--lg{font-size:var(--f-sm); padding:.55em 1.1em}

/* removable chip — active filters */
.chip--x{padding-right:.45em; gap:.5rem; background:var(--red-wash); color:var(--red-ink)}
.chip--x b{font-weight:700}
.chip--x .x{width:19px; height:19px; border-radius:50%; display:grid; place-items:center;
  background:var(--red-tint);
  background:color-mix(in srgb,var(--red) 18%,transparent); color:var(--red-ink);
  font-size:.68rem; line-height:1; flex:none;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.chip--x:hover .x{background:var(--red); color:#fff}

/* uppercase eyebrow */
.tag{display:inline-block; font-weight:600; font-size:var(--f-xs); letter-spacing:.06em;
  text-transform:uppercase; padding:.45em .95em; border-radius:999px;
  background:var(--red-wash); color:var(--red-ink)}
.tag--grey{background:var(--surface-3); color:var(--text-2)}
.tag--ink{background:var(--ink); color:#fff}
.tag--ok{background:var(--ok-wash); color:var(--ok)}

/* corner ribbon inside a .ph tile */
.badge{position:absolute; top:1rem; left:1rem; z-index:3; font-size:.75rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; background:var(--surface); color:var(--text);
  padding:.4em .8em; border-radius:999px; box-shadow:var(--sh1)}
.badge--red{background:var(--red); color:#fff}
.badge--ink{background:var(--ink); color:#fff}
.badge--ink:hover{background:var(--ink-3)}
.badge--right{left:auto; right:1rem}
.badge--inline{position:static; box-shadow:none}

/* count bubble (cart, nav) */
.cnt{min-width:20px; height:20px; padding-inline:5px; border-radius:999px;
  background:var(--red); color:#fff; font-size:.75rem; font-weight:700;
  display:grid; place-items:center; font-variant-numeric:tabular-nums}
.cnt.is-zero{background:var(--surface-4); color:var(--text-2)}
.newpill{font-size:.75rem; font-weight:700; letter-spacing:.05em; background:var(--red);
  color:#fff; padding:.16em .5em; border-radius:999px; margin-left:.3rem}

/* status dots used by orders / stock */
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--text-3);
  flex:none}
.dot--ok{background:var(--ok)} .dot--warn{background:var(--warn)} .dot--err{background:var(--red)}


/* ══════════════════════════════════════════════════════════════════════════
   05  HEADER · SEARCH · MEGA MENU · MOBILE DRAWER
   ══════════════════════════════════════════════════════════════════════════ */
.hdr{position:sticky; top:0; z-index:100; background:var(--hdr-bg);
  backdrop-filter:saturate(1.7) blur(18px); -webkit-backdrop-filter:saturate(1.7) blur(18px);
  border-bottom:1px solid transparent; transition:border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease)}
.hdr.stuck{border-bottom-color:var(--line); box-shadow:0 10px 30px -26px rgba(10,10,11,.5)}
.hdr__top{display:flex; align-items:center; gap:var(--s6); padding-block:.8rem}

.brand{display:flex; align-items:center; gap:.65rem; flex:none}
.brand img{width:40px; height:40px; border-radius:5px; box-shadow:var(--sh1); object-fit:cover}
.brand__w{display:block; line-height:1.1}
.brand b{font-family:var(--display); font-weight:800; font-size:.94rem; letter-spacing:.14em;
  display:block; line-height:1.1}
.brand span{display:block; font-size:.75rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-2); font-weight:500}

.search{position:relative; flex:1; max-width:42rem; margin-inline:auto}
.search input{width:100%; border:1px solid transparent; background:var(--surface-3);
  color:var(--text); border-radius:999px; padding:.92em 1.2em .92em 3rem; font-size:var(--f-sm);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease)}
.search input:focus{outline:none; background:var(--surface); border-color:var(--red)}
.search input::placeholder{color:var(--text-3)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}
.search > svg{position:absolute; left:1.1rem; top:50%; transform:translateY(-50%);
  color:var(--text-3); pointer-events:none}

/* live suggestions */
.sresults{position:absolute; top:calc(100% + .55rem); left:0; right:0; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh2);
  padding:.4rem; max-height:22rem; overflow:auto; display:none; z-index:20}
.sresults.on{display:block}
.sresult{display:flex; width:100%; align-items:center; gap:.85rem; padding:.55rem .7rem;
  border-radius:5px; text-align:left; cursor:pointer;
  transition:background var(--dur) var(--ease)}
.sresult:hover,.sresult.is-active{background:var(--red-wash)}
.sresult .thumb{width:44px; height:38px; border-radius:5px; flex:none; background:var(--surface-3);
  position:relative; overflow:hidden}
.sresult .thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.sresult__t{display:grid; min-width:0}
.sresult .nm{font-weight:600; font-size:var(--f-sm); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.sresult .mt{font-size:var(--f-xs); color:var(--text-2)}
.sresult .pr{margin-left:auto; font-weight:700; font-size:var(--f-sm);
  font-variant-numeric:tabular-nums; color:var(--red-ink); white-space:nowrap}
.sresult--all{justify-content:center; font-weight:600; font-size:var(--f-sm);
  color:var(--red-ink); border-top:1px solid var(--line); border-radius:0 0 5px 5px;
  margin-top:.25rem}
.sresults .empty{padding:1rem .8rem; font-size:var(--f-sm); color:var(--text-2);
  background:none; border:0; min-height:0}

.hdr__act{display:flex; align-items:center; gap:var(--s3); flex:none}
.qbtn{display:inline-flex; align-items:center; gap:.45rem; font-weight:600;
  font-size:var(--f-sm); padding:.4rem .2rem; transition:color var(--dur) var(--ease)}
.qbtn:hover{color:var(--red-ink)}
.acct__btn[aria-expanded="true"]{background:var(--ink); border-color:var(--ink); color:#fff}



/* account dropdown */
.acct{position:relative}
.acct__menu{position:absolute; right:0; top:calc(100% + .6rem); min-width:14rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh2); padding:.4rem; z-index:120;
  animation:megaIn 200ms var(--ease) both}
.acct__menu a,.acct__link{display:block; width:100%; text-align:left; padding:.6rem .75rem;
  border-radius:5px; font-size:var(--f-sm); font-weight:500; cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.acct__menu a:hover,.acct__link:hover{background:var(--red-wash); color:var(--red-ink)}
.acct__who{padding:.6rem .75rem .7rem; border-bottom:1px solid var(--line); margin-bottom:.3rem}
.acct__who b{display:block; font-size:var(--f-sm); margin-top:.1rem}
.acct__menu hr{margin:.3rem .75rem}
.acct__logout{margin:0}

.navrow{border-top:1px solid var(--line)}
.hdr__nav{display:flex; align-items:center; gap:var(--s2); padding-block:.35rem;
  font-size:var(--f-sm)}
.hdr__nav > a,.mtrig{display:inline-flex; align-items:center; gap:.4rem; padding:.6rem .9rem;
  border-radius:999px; font-weight:500; white-space:nowrap; cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.hdr__nav > a:hover,.mtrig:hover,.mtrig[aria-expanded="true"],
.hdr__nav > a[aria-current="page"]{background:var(--red-wash); color:var(--red-ink)}
.mtrig svg{transition:transform var(--dur) var(--ease)}
.mtrig[aria-expanded="true"] svg{transform:rotate(180deg)}
.hdr__nav .right{margin-left:auto; display:flex; gap:var(--s2); color:var(--text-2)}
.hdr__nav .right a{padding:.6rem .9rem; border-radius:999px;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.hdr__nav .right a:hover{background:var(--red-wash); color:var(--red-ink)}

.mega{position:absolute; left:0; right:0; top:100%; background:var(--surface);
  border-top:1px solid var(--line); box-shadow:0 24px 48px -28px rgba(10,10,11,.35);
  display:none; z-index:99}
.mega.on{display:block; animation:megaIn 240ms var(--ease) both}
@keyframes megaIn{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
.mega__in{display:block; padding-block:var(--s7) var(--s8)}
/* Four equal directory columns. The promo is a full-width strip UNDER them, not a
   fifth column — a 22rem card in the row squeezed each column to 226px, which is
   narrower than the longest subcategory name (227px) plus its rate (73px), so every
   long row wrapped and prices split mid-number ("from ₹9.0" / "0"). */
.mega__panel{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s7) var(--s6)}
.mcol{min-width:0}
.mcol h4{font-size:var(--f-sm); font-family:var(--display); font-weight:800; letter-spacing:-.01em}
.mcol ul{margin-top:.9rem; display:grid; gap:.15rem}

/* name | rate — two tracks, so every rate in a column lands on the same edge and a
   row is always exactly one line. */
.mcol a{font-size:var(--f-sm); color:var(--text-2); display:grid;
  grid-template-columns:minmax(0,1fr) auto; align-items:baseline; column-gap:var(--s4);
  padding:.32rem .5rem .32rem 0; border-radius:8px;
  transition:color var(--dur) var(--ease), background-color var(--dur) var(--ease)}
.mcol a .mname{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mcol a:hover{color:var(--red-ink)}
.mcol .fee{font-size:var(--f-xs); color:var(--text-3); font-variant-numeric:tabular-nums;
  white-space:nowrap; text-align:right}
.mcol a:hover .fee{color:var(--red-ink)}

/* Full-width strip beneath the directory. */
.mpromo{grid-column:1/-1; background:linear-gradient(120deg,var(--red) 0%,var(--red-dark) 100%);
  color:#fff; border-radius:var(--r-lg); padding:var(--s5) var(--s6); display:flex;
  flex-direction:row; align-items:center; justify-content:space-between; gap:var(--s6)}
.mpromo h4{font-size:1.05rem; color:#fff; max-width:none}
.mpromo p{font-size:var(--f-sm); color:rgba(255,255,255,.82); margin-top:.25rem; max-width:52ch}
.mpromo__cta{margin-top:0; flex:none}
.mpromo .btn--ink{background:#fff; color:var(--ink) !important; border-color:#fff}
.mpromo .btn--ink:hover{background:var(--ink); color:#fff !important; border-color:var(--ink)}

.burger{display:none; width:40px; height:40px; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:5px; color:var(--text)}

/* ── slide-in drawers (mobile nav + cart share the scrim) ───────────────── */
.navscrim{position:fixed; inset:0; background:var(--scrim); opacity:0; visibility:hidden;
  z-index:110; transition:opacity 320ms var(--ease), visibility 320ms}
.navscrim.on{opacity:1; visibility:visible}

.mobnav,.cartdrawer{position:fixed; inset:0 0 0 auto; width:min(92vw,23rem);
  background:var(--surface); color:var(--text); z-index:120; transform:translateX(101%);
  transition:transform 380ms var(--ease); display:flex; flex-direction:column;
  box-shadow:-30px 0 70px -34px rgba(10,10,11,.5)}
.mobnav.on,.cartdrawer.on{transform:none}
.mobnav__top,.cartdrawer__top{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); padding:1rem var(--gut); border-bottom:1.5px solid var(--line); flex:none}
.mobnav__top b,.cartdrawer__top b{font-family:var(--display); font-weight:800;
  letter-spacing:.1em; font-size:.9rem; display:inline-flex; align-items:center; gap:.5rem}
.mobnav__x{width:44px; height:44px; border-radius:5px; border:1.5px solid var(--line);
  display:grid; place-items:center; flex:none; color:var(--text);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    color var(--dur) var(--ease)}
.mobnav__x:hover{border-color:var(--ink); background:var(--ink); color:#fff}
.mobnav__body{overflow:auto; padding:var(--s5) var(--gut) var(--s8); flex:1;
  -webkit-overflow-scrolling:touch}
.mobnav h4{font-size:var(--f-xs); letter-spacing:.13em; text-transform:uppercase;
  color:var(--red); font-family:var(--body); font-weight:600; margin-top:var(--s6)}
.mobnav h4:first-child{margin-top:0}
.mobnav a{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:.85rem 0; border-bottom:1px solid var(--line);
  font-family:var(--display); font-weight:600; font-size:1.02rem}
.mobnav a small{font-family:var(--body); font-weight:600; font-size:var(--f-xs);
  color:var(--red-ink); font-variant-numeric:tabular-nums}
.mobnav__logout{margin-top:.3rem}
.mobnav__logout .acct__link{padding:.85rem 0; border-bottom:1px solid var(--line);
  border-radius:0; font-family:var(--display); font-weight:600; font-size:1.02rem}
.mobnav__logout .acct__link:hover{background:none; color:var(--red-ink)}
.mobnav__cta{display:grid; gap:.5rem; margin-top:var(--s7)}
.mobnav__cta a{justify-content:center; border-bottom:0; padding:.95em 1.5em;
  font-family:var(--body); font-size:var(--f-sm)}
.mobnav__foot{font-size:var(--f-xs); color:var(--text-2); margin-top:var(--s6); line-height:1.7}
body.navopen{overflow:hidden}


/* ══════════════════════════════════════════════════════════════════════════
   06  PRODUCT CARD · CATEGORY CARD · QUICK CARD
   .ph is the photo tile: a fixed-ratio, clipped box with a drawn fallback
   underneath. app.js adds .is-broken when the <img> 404s.
   ══════════════════════════════════════════════════════════════════════════ */
.ph{position:relative; overflow:hidden; background:var(--surface-3); isolation:isolate}
.ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  filter:saturate(.94) contrast(1.02);
  transition:transform var(--dur-l) var(--ease), filter var(--dur) var(--ease)}

/* drawn fallback: brand mark on a soft wash, always behind the photo */
.pcard__fallback{position:absolute; inset:0; z-index:0; display:grid; place-content:center;
  justify-items:center; gap:.6rem; padding:1rem; text-align:center;
  background:radial-gradient(72% 64% at 50% 40%, var(--red-wash) 0%, var(--surface-3) 78%);
  color:var(--text-3)}
.pcard__fallback svg{width:clamp(38px,26%,64px); height:auto; opacity:.55}
.pcard__fallback b{font-family:var(--display); font-weight:800; font-size:.75rem;
  letter-spacing:.18em; opacity:.6}

/* ── the product tile ───────────────────────────────────────────────────── */
.pcard{position:relative; display:flex; flex-direction:column; min-width:0;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  overflow:hidden;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease)}
.pcard:hover{transform:translateY(-2px); box-shadow:var(--sh2); border-color:var(--line-2)}
.pcard:focus-within{border-color:var(--line-2); box-shadow:var(--sh1)}

.pcard__img{display:block; aspect-ratio:5/4; width:100%; border-bottom:1px solid var(--line);
  background:var(--surface-3)}
.pcard:hover .pcard__img img{transform:none}
.pcard__img.is-broken img{display:none}

.pcard__oos{position:absolute; inset:0; z-index:4; display:grid; place-items:center;
  background:rgba(255,255,255,.74);
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  font-family:var(--display); font-weight:800; font-size:var(--f-sm); letter-spacing:.03em;
  color:var(--text); text-align:center}
.pcard__oos::before{content:""; position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:min(72%,11rem); height:2.6rem; border-radius:999px; border:1.5px solid var(--text);
  z-index:-1}
.pcard--oos .pcard__img img{filter:grayscale(.85) saturate(.4) contrast(.96); opacity:.75}
.pcard--oos:hover{transform:none; box-shadow:var(--sh1)}
.pcard--oos:hover .pcard__img img{transform:none}

/* wishlist heart — floats over the photo, top-right */
.pcard__wish{position:absolute; top:.8rem; right:.8rem; z-index:5;
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.88);
  background:color-mix(in srgb, var(--surface) 88%, transparent); color:var(--text-2);
  border:1px solid var(--line); box-shadow:var(--sh1);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transform:scale(.86);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background var(--dur) var(--ease)}
.pcard:hover .pcard__wish,.pcard:focus-within .pcard__wish,
.pcard__wish:focus-visible,.pcard__wish.is-on{opacity:1; transform:none}
.pcard__wish:hover{color:var(--red); border-color:var(--red-tint)}
.pcard__wish.is-on{color:var(--red); border-color:var(--red-tint)}
.pcard__wish.is-on svg{fill:var(--red); animation:pop 320ms var(--ease)}
.pcard__wish:disabled{opacity:.5; cursor:wait}
@keyframes pop{0%{transform:scale(.7)}55%{transform:scale(1.18)}100%{transform:scale(1)}}

.pcard__body{display:flex; flex-direction:column; gap:.3rem; flex:1;
  padding:clamp(.85rem,1.3vw,1.05rem) clamp(.9rem,1.4vw,1.15rem) clamp(.9rem,1.4vw,1.1rem)}
.pcard__cat{margin:0; font-family:var(--body); letter-spacing:.02em; font-weight:500;
  color:var(--text-3); text-transform:none; position:relative; z-index:3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pcard__cat a{transition:color var(--dur) var(--ease)}
.pcard__cat a:hover{color:var(--red-ink)}
.pcard__name{font-family:var(--body); font-weight:600;
  font-size:clamp(1.02rem,1.25vw,1.12rem); line-height:1.32; margin-top:.25rem;
  letter-spacing:-.005em; color:var(--text)}
.pcard__name a{display:block}
.pcard__name a::after{content:""; position:absolute; inset:0; z-index:2}   /* whole-card hit area */
.pcard__desc{margin-top:.15rem; line-height:1.5}
.pcard__price{display:flex; align-items:baseline; justify-content:space-between;
  gap:.5rem; flex-wrap:wrap; margin-top:auto; padding-top:.7rem;
  border-top:1px solid var(--line)}
.pcard__moq{white-space:nowrap; color:var(--text-3)}
.pcard__add{position:relative; z-index:3; margin-top:var(--s4)}

/* price typography, shared by tile / PDP / cart */
.price{font-family:var(--display); font-weight:800; font-size:1.05rem; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--text)}
.price .xs{font-family:var(--body); font-weight:500; letter-spacing:0}
.price--red{color:var(--red-ink)}
.price--lg{font-size:clamp(1.6rem,3vw,2.3rem); letter-spacing:-.04em}
.price--was{font-family:var(--body); font-weight:500; font-size:var(--f-sm);
  color:var(--text-3); text-decoration:line-through; margin-left:.45rem}
.price__unit{font-family:var(--body); font-weight:500; font-size:var(--f-xs);
  color:var(--text-2); letter-spacing:0}

/* ── category tile (categories page, home strip) ────────────────────────── */
.ccard{display:block; position:relative; min-width:0}
.ccard .ph{aspect-ratio:1/1; border-radius:var(--r-2xl); border:1px solid var(--line);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease)}
.ccard:hover .ph{transform:translateY(-2px); box-shadow:var(--sh2); border-color:var(--line-2)}
.ccard:hover .ph img{transform:none}
.ccard__row{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s3); margin-top:var(--s5)}
.ccard h3{font-size:clamp(1.02rem,1.3vw,1.22rem)}
.ccard .price{font-size:1.02rem; color:var(--red-ink)}
.ccard .meta{margin-top:.3rem; font-size:var(--f-xs); color:var(--text-2)}
.ccard__subs{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:var(--s4)}

/* ── small rail tile ────────────────────────────────────────────────────── */
.qcard{display:block; min-width:0}
.qcard .ph{aspect-ratio:1/1; border-radius:var(--r-xl); border:1px solid var(--line);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease)}
.qcard:hover .ph{transform:translateY(-2px); box-shadow:var(--sh2); border-color:var(--line-2)}
.qcard:hover .ph img{transform:none}
.qcard b{display:block; margin-top:var(--s4); font-family:var(--display); font-weight:600;
  font-size:var(--f-sm); text-align:center; line-height:1.25}
.qcard .p{display:block; text-align:center; font-size:var(--f-xs); color:var(--red-ink);
  margin-top:.15rem; font-variant-numeric:tabular-nums; font-weight:600}


/* ══════════════════════════════════════════════════════════════════════════
   07  PDP — gallery, variant picker, price block, specs, sticky buy panel
   ══════════════════════════════════════════════════════════════════════════ */
.pdp{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem,3.4vw,3.5rem); align-items:start}

/* gallery */
.gal{position:sticky; top:calc(var(--hdr-h) + 1.25rem); display:grid; gap:.75rem}
.gal__main{aspect-ratio:4/3; border-radius:var(--r-2xl); border:1px solid var(--line);
  background:var(--surface-3); position:relative; overflow:hidden}
.gal__main img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity var(--dur) var(--ease)}
.gal__main .badge{top:1.1rem; left:1.1rem}
.gal__thumbs{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  gap:.6rem; overflow-x:auto; scrollbar-width:none; padding:2px}
.gal__thumbs::-webkit-scrollbar{display:none}
.gal__thumb{position:relative; aspect-ratio:1/1; border-radius:5px; overflow:hidden;
  border:1.5px solid var(--line); background:var(--surface-3); cursor:pointer; padding:0;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease)}
.gal__thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.gal__thumb:hover{border-color:var(--line-2); transform:none}
.gal__thumb.is-active,.gal__thumb[aria-selected="true"]{border-color:var(--red);
  box-shadow:0 0 0 2px var(--red-wash)}
.gal__zoom{position:absolute; right:.85rem; bottom:.85rem; z-index:3}

/* headline block */
.pdp__head{display:grid; gap:var(--s3)}
.pdp__eyebrow{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  font-size:var(--f-xs); color:var(--text-2)}
.pdp h1{font-size:clamp(1.7rem,3.1vw,2.6rem); letter-spacing:-.035em; line-height:1.05}
.pdp__tagline{font-size:var(--f-lead); color:var(--text-2); max-width:46ch}
.pdp__facts{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:var(--s2)}

/* price block */
.pblk{margin-top:var(--s6); padding:var(--s5) 0; border-block:1px solid var(--line);
  display:grid; gap:.4rem}
.pblk__row{display:flex; align-items:baseline; flex-wrap:wrap; gap:.6rem}
.pblk .price{font-size:clamp(1.75rem,3.4vw,2.5rem); letter-spacing:-.045em; color:var(--text)}
.pblk__note{font-size:var(--f-xs); color:var(--text-2)}
.pblk__save{display:inline-flex; align-items:center; gap:.5em; font-weight:600;
  font-size:var(--f-xs); color:#fff; background:var(--red); border-radius:999px;
  padding:.4em .85em}

/* stock state */
.stock{display:inline-flex; align-items:center; gap:.5rem; font-size:var(--f-sm);
  font-weight:600; color:var(--ok)}
.stock--low{color:var(--warn)}
.stock--out{color:var(--red-ink)}

/* variant picker — a radio inside each chip */
.variants{margin-top:var(--s6)}
.variants__h{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); margin-bottom:var(--s4)}
.variants__h b{font-size:var(--f-sm); letter-spacing:.02em}
.vlist{display:flex; flex-wrap:wrap; gap:.55rem}
.vchip{position:relative; display:flex; flex-direction:column; gap:.15rem; cursor:pointer;
  min-width:min(100%,8.5rem); padding:.7rem .95rem; border-radius:5px;
  border:1.5px solid var(--line); background:var(--surface);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.vchip:hover{border-color:var(--line-2); transform:none}
.vchip input{position:absolute; opacity:0; width:0; height:0; pointer-events:none}
.vchip__l{font-family:var(--display); font-weight:700; font-size:var(--f-sm); line-height:1.15}
.vchip__m{font-size:var(--f-xs); color:var(--text-2); font-variant-numeric:tabular-nums}
.vchip__p{font-size:var(--f-xs); font-weight:700; color:var(--red-ink);
  font-variant-numeric:tabular-nums}
.vchip:has(input:checked),.vchip.is-selected{border-color:var(--red);
  background:var(--red-wash); box-shadow:0 0 0 1px var(--red)}
.vchip:has(input:focus-visible){outline:2px solid var(--red); outline-offset:3px}
.vchip:has(input:disabled),.vchip--oos{opacity:.5; cursor:not-allowed;
  background:var(--surface-3); border-style:dashed}
.vchip:has(input:disabled):hover,.vchip--oos:hover{transform:none; border-color:var(--line)}
.vchip--oos .vchip__p{color:var(--text-2); text-decoration:line-through}

/* quantity stepper (PDP + cart page) */
.stepper{display:inline-flex; border:1px solid var(--line-2); border-radius:999px;
  background:var(--surface); overflow:hidden; flex:none}
.stepper button{width:50px; display:grid; place-items:center; font-size:1.2rem; color:var(--text);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.stepper button:hover{background:var(--red-wash); color:var(--red-ink)}
.stepper button:disabled{color:var(--line-2); cursor:not-allowed; background:transparent}
.stepper input{width:116px; border:0; text-align:center; background:transparent;
  font-family:var(--display); font-weight:800; font-size:1.3rem;
  font-variant-numeric:tabular-nums; padding-block:.7em; -moz-appearance:textfield;
  appearance:textfield; color:var(--text)}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.stepper input:focus{outline:none}
.stepper:focus-within{border-color:var(--red)}
.stepper--sm button{width:38px; font-size:1rem}
.stepper--sm input{width:64px; font-size:1rem; padding-block:.5em}

/* quick quantity presets */
.quick{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:var(--s4)}
.quick button{font-size:var(--f-xs); font-weight:600; padding:.52em .95em; border-radius:999px;
  border:1px solid var(--line); color:var(--text-2);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    background var(--dur) var(--ease)}
.quick button:hover{border-color:var(--red); color:var(--red-ink)}
.quick button[aria-pressed="true"]{background:var(--red); color:#fff; border-color:var(--red)}

/* the sticky buy panel */
.buy{position:sticky; bottom:0; z-index:40; margin-top:var(--s6);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(1rem,1.8vw,1.4rem); box-shadow:var(--sh1); display:grid; gap:var(--s4)}
.buy__row{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.buy__row .btn{flex:1 1 12rem}
.buy__line{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);
  font-size:var(--f-sm)}
.buy__line b{font-family:var(--display); font-weight:800; font-size:1.16rem;
  font-variant-numeric:tabular-nums; color:var(--red-ink)}
.buy__note{font-size:var(--f-xs); color:var(--text-2)}
.buy--out{border-color:var(--red-tint); background:var(--red-wash)}

/* slab / tier price table */
.slabs{margin-top:var(--s6); background:var(--surface); border-radius:var(--r-lg);
  overflow:hidden; border:1px solid var(--line)}
.slabs caption{font-size:var(--f-xs); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; text-align:left; padding:.85rem 1.1rem; color:var(--text-2);
  border-bottom:1px solid var(--line)}
.slabs th,.slabs td{padding:.85rem 1.1rem; font-size:var(--f-sm); text-align:right}
.slabs th:first-child,.slabs td:first-child{text-align:left}
.slabs thead th{font-size:var(--f-xs); letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-2); font-weight:500}
.slabs tbody tr{border-top:1px solid var(--line)}
.slabs tbody td{font-variant-numeric:tabular-nums}
.slabs tbody tr[data-on],.slabs tbody tr.is-active{background:var(--red-wash);
  box-shadow:inset 3px 0 0 var(--red)}
.slabs tbody tr[data-on] td,.slabs tbody tr.is-active td{font-weight:700}

/* spec table */
.spec{margin-top:var(--s6); width:100%; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; background:var(--surface)}
.spec th,.spec td{padding:.85rem 1.1rem; font-size:var(--f-sm); text-align:left;
  vertical-align:top; border-bottom:1px solid var(--line)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec th{width:38%; font-weight:600; color:var(--text-2); font-size:var(--f-xs);
  letter-spacing:.07em; text-transform:uppercase; background:var(--surface-2)}
.spec td{font-weight:500}
.spec tbody tr:hover td{background:var(--surface-2)}

/* PDP long copy + related rail */
.pdp__desc{margin-top:var(--s6); font-size:var(--f-body); color:var(--text-2); max-width:64ch}
.pdp__desc p + p{margin-top:var(--s4)}
.pdp__tabs{margin-top:var(--s8)}
.pdp__panel{display:none; padding-top:var(--s5)}
.pdp__panel.is-active,.pdp__panel.on{display:block; animation:fadeup 420ms var(--ease) both}
@keyframes fadeup{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}


/* ══════════════════════════════════════════════════════════════════════════
   08  LISTING — filter sidebar / drawer, sort bar, active chips, empty state
   The base layer. §36 carries the current filter panel — its groups, its
   sticky rail and the drawer it becomes on a narrow screen — and overrides
   most of what follows; this block is what everything else in the file
   (search, wishlist, the account pages) still reads.
   Markup shape:
     .listing > form.filters + div.listing__main
   ══════════════════════════════════════════════════════════════════════════ */
.listing{display:grid; grid-template-columns:16.5rem minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3rem); align-items:start}

.filters{position:sticky; top:calc(var(--hdr-h) + 1.25rem); display:grid; gap:var(--s5);
  max-height:calc(100vh - var(--hdr-h) - 2.5rem); overflow:auto; padding-right:.35rem;
  scrollbar-width:thin}
.filters__top{display:none; align-items:center; justify-content:space-between; gap:var(--s4);
  padding-bottom:var(--s4); border-bottom:1px solid var(--line)}
.filters__group{border-bottom:1px solid var(--line); padding-bottom:var(--s5)}
.filters__group:last-of-type{border-bottom:0}
.filters__group > h4{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); font-family:var(--body); font-size:var(--f-xs); font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--text-2);
  margin-bottom:var(--s4)}
.filters__list{display:grid; gap:.15rem; max-height:16rem; overflow:auto; scrollbar-width:thin}
.filters__list::-webkit-scrollbar{width:6px}
.filters__list::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:99px}
.filters label{display:flex; align-items:center; gap:.6rem; padding:.42rem .5rem;
  border-radius:5px; font-size:var(--f-sm); cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.filters label:hover{background:var(--surface-3)}
.filters label .n{margin-left:auto; font-size:var(--f-xs); color:var(--text-3);
  font-variant-numeric:tabular-nums}
.filters a.f-link{display:flex; align-items:center; gap:.6rem; padding:.42rem .5rem;
  border-radius:5px; font-size:var(--f-sm); color:var(--text-2);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.filters a.f-link:hover{background:var(--surface-3); color:var(--text)}
.filters a.f-link[aria-current="page"],.filters a.f-link.is-active{
  background:var(--red-wash); color:var(--red-ink); font-weight:600}
.filters__price{display:flex; align-items:center; gap:.5rem}
.filters__price .input{padding:.6em .8em; font-size:var(--f-sm)}
.filters__act{display:grid; gap:.5rem; position:sticky; bottom:0; padding-top:var(--s4);
  background:linear-gradient(to top, var(--bg) 62%, transparent)}

/* native checkbox / radio, restyled */
.filters input[type="checkbox"],.filters input[type="radio"],
.check input[type="checkbox"],.check input[type="radio"]{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:none; margin:0;
  border:1.5px solid var(--line-2); background:var(--surface); border-radius:5px;
  display:grid; place-content:center; cursor:pointer;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease)}
.filters input[type="radio"],.check input[type="radio"]{border-radius:50%}
.filters input[type="checkbox"]::after,.check input[type="checkbox"]::after{
  content:""; width:10px; height:10px; transform:scale(0); transition:transform 140ms var(--ease);
  background:#fff; clip-path:polygon(14% 44%,0 60%,40% 100%,100% 22%,84% 6%,38% 66%)}
.filters input[type="radio"]::after,.check input[type="radio"]::after{
  content:""; width:8px; height:8px; border-radius:50%; background:#fff;
  transform:scale(0); transition:transform 140ms var(--ease)}
.filters input:checked,.check input:checked{background:var(--red); border-color:var(--red)}
.filters input:checked::after,.check input:checked::after{transform:scale(1)}

/* the toolbar above the grid */
.toolbar{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  flex-wrap:wrap; padding-bottom:var(--s5); border-bottom:1px solid var(--line);
  margin-bottom:var(--s6)}
.toolbar__count{font-size:var(--f-sm); color:var(--text-2)}
.toolbar__count b{color:var(--text); font-variant-numeric:tabular-nums}
.toolbar__act{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.sortbar{display:inline-flex; align-items:center; gap:.55rem; font-size:var(--f-sm);
  color:var(--text-2)}
.sortbar .select{min-width:11rem}
.filters__toggle{display:none}

/* active filter chips */
.activefilters{display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  margin-bottom:var(--s5)}
.activefilters .lbl{font-size:var(--f-xs); color:var(--text-3); text-transform:uppercase;
  letter-spacing:.1em; font-weight:600; margin-right:.25rem}
.activefilters .clear{font-size:var(--f-xs); font-weight:600; color:var(--text-2);
  text-decoration:underline; text-underline-offset:3px; margin-left:.35rem}
.activefilters .clear:hover{color:var(--red-ink)}

/* subcategory chip strip on the category landing page */
.substrip{display:flex; gap:.45rem; overflow-x:auto; scrollbar-width:none;
  padding:.15rem .15rem var(--s5)}
.substrip::-webkit-scrollbar{display:none}
.substrip .chip{flex:none}

/* empty state — also used by the cart drawer and search */
.empty{display:grid; justify-items:center; gap:var(--s4); text-align:center;
  padding:clamp(2rem,5vw,4rem) var(--s5); border:1.5px dashed var(--line);
  border-radius:var(--r-2xl); background:var(--surface-2); color:var(--text-2)}
.empty h3{color:var(--text)}
.empty p{max-width:44ch; font-size:var(--f-sm)}
.empty svg{color:var(--text-3); width:44px; height:auto}
.empty--sm{padding:var(--s6) var(--s5); border-radius:var(--r-lg)}
.empty--plain{border:0; background:none; padding:var(--s6) 0}


/* ══════════════════════════════════════════════════════════════════════════
   09  FORMS — .field .input .select .label .err, auth cards, checkout, address
   ══════════════════════════════════════════════════════════════════════════ */
.form{display:grid; gap:var(--s5)}
.fieldset{display:grid; gap:var(--s4); border:0; padding:0; margin:0}
.fieldset > legend{font-family:var(--display); font-weight:800; font-size:var(--f-h3);
  letter-spacing:-.02em; padding:0; margin-bottom:var(--s2)}
.fields{display:grid; gap:var(--s4) var(--s4); grid-template-columns:repeat(2,minmax(0,1fr))}
.fields--1{grid-template-columns:minmax(0,1fr)}
.fields--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{display:grid; gap:.4rem; min-width:0; align-content:start}
.field--full{grid-column:1/-1}

.label{font-size:var(--f-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-2)}
.label .req{color:var(--red); margin-left:.15em}
.label__hint{display:block; text-transform:none; letter-spacing:0; font-weight:500;
  color:var(--text-3); margin-top:.15rem}

.input,.select,textarea.input{width:100%; background:var(--surface);
  border:1.5px solid var(--line); border-radius:var(--r); color:var(--text);
  padding:.82em 1em; font-size:var(--f-sm); line-height:1.35;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease)}
.input::placeholder,textarea.input::placeholder{color:var(--text-3)}
.input:hover,.select:hover{border-color:var(--line-2)}
.input:focus,.select:focus,textarea.input:focus{outline:none; border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-wash)}
.input:disabled,.select:disabled{background:var(--surface-3); color:var(--text-2);
  cursor:not-allowed}
.input[readonly]{background:var(--surface-2)}
textarea.input{min-height:8rem; resize:vertical}

.select{appearance:none; -webkit-appearance:none; padding-right:2.6em; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1.15em) 55%, calc(100% - .8em) 55%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat}
.select--sm{padding-block:.6em; font-size:var(--f-xs)}

.input--sm{padding:.6em .8em; font-size:var(--f-xs)}
.input--lg{padding:1em 1.15em; font-size:var(--f-body)}
.input-group{display:flex; align-items:stretch; gap:.5rem}
.input-group .input{flex:1}
.input--money{font-variant-numeric:tabular-nums; text-align:right}

.err{font-size:var(--f-xs); font-weight:500; color:var(--red-ink);
  display:flex; align-items:center; gap:.35rem}
.err::before{content:"!"; width:14px; height:14px; border-radius:50%; background:var(--red);
  color:#fff; font-size:.6rem; font-weight:700; display:grid; place-items:center; flex:none}
.field.has-err .input,.field.has-err .select,.field.has-err textarea.input,
.input.is-err,.select.is-err{border-color:var(--red); background:var(--red-wash)}
.hint{font-size:var(--f-xs); color:var(--text-3)}

/* checkbox / radio in a normal form */
.check{display:flex; align-items:flex-start; gap:.65rem; font-size:var(--f-sm);
  line-height:1.45; cursor:pointer}
.check input{margin-top:.15rem}
.check a{text-decoration:underline; text-underline-offset:3px}
.check--card{padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:var(--r);
  background:var(--surface); transition:border-color var(--dur) var(--ease),
    background var(--dur) var(--ease)}
.check--card:hover{border-color:var(--line-2)}
.check--card:has(input:checked),.check--card.is-selected{border-color:var(--red);
  background:var(--red-wash)}

.form__act{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  padding-top:var(--s2)}
.form__act .btn{min-width:9rem}

/* ── auth cards (login / register / forgot / reset) ─────────────────────── */
.authwrap{display:grid; place-items:center; padding-block:clamp(2rem,5vw,4.5rem)}
.authcard{width:min(100%, 27rem); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-2xl); padding:clamp(1.5rem,3vw,2.5rem); box-shadow:var(--sh1)}
.authcard__h{text-align:center; margin-bottom:var(--s6)}
.authcard__h h1{font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.035em}
.authcard__h p{margin-top:var(--s3); font-size:var(--f-sm); color:var(--text-2)}
.authcard .form{gap:var(--s4)}
.authcard__alt{margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--line);
  text-align:center; font-size:var(--f-sm); color:var(--text-2)}
.authcard__alt a{font-weight:600; color:var(--red-ink)}
.authcard__meta{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap; font-size:var(--f-xs)}
.authside{display:grid; gap:var(--s4); align-content:center}

/* password field with a reveal button */
.pwd{position:relative}
.pwd .input{padding-right:3.2rem}
.pwd__eye{position:absolute; right:.5rem; top:50%; translate:0 -50%; width:34px; height:34px;
  border-radius:50%; display:grid; place-items:center; color:var(--text-2);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.pwd__eye:hover{background:var(--surface-3); color:var(--text)}

/* ── checkout ───────────────────────────────────────────────────────────── */
.checkout{display:grid; grid-template-columns:minmax(0,1fr) 23rem;
  gap:clamp(1.5rem,3vw,3rem); align-items:start}
.checkout__main{display:grid; gap:var(--s5)}
.costep{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(1.15rem,2.2vw,1.85rem)}
.costep__h{display:flex; align-items:center; gap:.75rem; margin-bottom:var(--s5)}
.costep__n{width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-family:var(--display); font-weight:700;
  font-size:.76rem; flex:none}
.costep__h h2{font-size:clamp(1.05rem,1.5vw,1.25rem); letter-spacing:-.02em}
.costep--done .costep__n{background:var(--ok)}
.costep__foot{margin-top:var(--s5); padding-top:var(--s4); border-top:1px dashed var(--line);
  font-size:var(--f-xs); color:var(--text-2)}

/* address book cards */
.addrgrid{display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.addr{position:relative; display:grid; gap:.3rem; padding:1rem 1.1rem; border-radius:var(--r-lg);
  border:1.5px solid var(--line); background:var(--surface); cursor:pointer;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease)}
.addr:hover{border-color:var(--line-2)}
.addr input[type="radio"]{position:absolute; opacity:0; pointer-events:none}
.addr:has(input:checked),.addr.is-selected{border-color:var(--red);
  background:var(--red-wash); box-shadow:0 0 0 1px var(--red)}
.addr__top{display:flex; align-items:center; justify-content:space-between; gap:var(--s3)}
.addr__label{font-family:var(--display); font-weight:800; font-size:var(--f-sm);
  letter-spacing:-.01em}
.addr__body{font-size:var(--f-sm); color:var(--text-2); line-height:1.55}
.addr__act{display:flex; gap:.5rem; margin-top:.5rem}
.addr__act button,.addr__act a{font-size:var(--f-xs); font-weight:600; color:var(--text-2);
  text-decoration:underline; text-underline-offset:3px}
.addr__act button:hover,.addr__act a:hover{color:var(--red-ink)}
.addr--new{border-style:dashed; place-content:center; justify-items:center; text-align:center;
  min-height:8rem; color:var(--text-2)}
.addr--new:hover{border-color:var(--red); color:var(--red-ink)}

/* payment strip */
.paybox{display:grid; gap:var(--s4)}
.paybox__logo{display:flex; align-items:center; gap:.6rem; font-size:var(--f-sm);
  color:var(--text-2)}
.paysecure{display:flex; align-items:center; gap:.5rem; font-size:var(--f-xs);
  color:var(--text-2)}
.paysecure svg{color:var(--ok); flex:none}


/* ══════════════════════════════════════════════════════════════════════════
   10  CART — line items, summary panel, cart drawer
   .citem is rendered BOTH by cart.php and by app.js (drawer). One ruleset.
   ══════════════════════════════════════════════════════════════════════════ */
.cartpage{display:grid; grid-template-columns:minmax(0,1fr) 22.5rem;
  gap:clamp(1.5rem,3vw,3rem); align-items:start}
.cartlist{display:grid; gap:var(--s4)}
.cartlist__h{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); padding-bottom:var(--s4); border-bottom:1px solid var(--line)}

.citem{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--s4);
  align-items:start; padding:var(--s4); border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--surface);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.citem:hover{border-color:var(--line-2)}
.citem.is-busy{opacity:.55; pointer-events:none}
.citem__img{position:relative; width:76px; height:76px; border-radius:5px; overflow:hidden;
  background:var(--surface-3); flex:none; display:block}
.citem__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.citem__img.is-broken,.citem__ph{background:
  radial-gradient(70% 60% at 50% 40%, var(--red-wash) 0%, var(--surface-3) 76%)}
.citem__ph{position:absolute; inset:0; display:block}
.citem__meta{display:grid; gap:.28rem; min-width:0}
.citem__name{font-family:var(--display); font-weight:700; font-size:var(--f-sm);
  line-height:1.25; letter-spacing:-.015em}
a.citem__name:hover{color:var(--red-ink)}
.citem__ctl{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.45rem}
.citem__step{width:32px; height:32px; border-radius:50%; border:1px solid var(--line-2);
  display:grid; place-items:center; font-size:1rem; line-height:1; color:var(--text); flex:none;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease)}
.citem__step:hover{background:var(--red-wash); border-color:var(--red-tint); color:var(--red-ink)}
.citem__step:disabled{opacity:.4; cursor:not-allowed}
.citem__qty{width:4.4rem; padding:.42em .5em; text-align:center; font-weight:600;
  font-variant-numeric:tabular-nums; border-radius:999px; -moz-appearance:textfield;
  appearance:textfield}
.citem__qty::-webkit-outer-spin-button,
.citem__qty::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.citem__rm{font-size:var(--f-xs); font-weight:600; color:var(--text-2);
  text-decoration:underline; text-underline-offset:3px; margin-left:.25rem}
.citem__rm:hover{color:var(--red-ink)}
.citem__line{font-family:var(--display); font-weight:800; font-size:var(--f-sm);
  font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; align-self:center}
.citem--oos{border-color:var(--red-tint); background:var(--red-wash)}
.citem__flag{font-size:var(--f-xs); font-weight:600; color:var(--red-ink)}

/* order summary panel (cart, checkout, confirmation) */
.summary{position:sticky; top:calc(var(--hdr-h) + 1.25rem); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(1.15rem,2.2vw,1.6rem); display:grid; gap:var(--s4)}
.summary h3{font-size:clamp(1rem,1.3vw,1.16rem)}
.summary__rows{display:grid; gap:.1rem; border-top:1px solid var(--line); padding-top:var(--s4)}
.summary__row{display:flex; justify-content:space-between; gap:var(--s4);
  padding-block:.42rem; font-size:var(--f-sm); color:var(--text-2)}
.summary__row b{color:var(--text); font-weight:600; font-variant-numeric:tabular-nums}
.summary__row--free b{color:var(--ok)}
.summary__tot{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s4);
  border-top:1px solid var(--line-2); margin-top:.4rem; padding-top:.85rem;
  font-size:var(--f-sm)}
.summary__tot b{font-family:var(--display); font-weight:800; font-size:1.28rem;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--red-ink)}
.summary__note{font-size:var(--f-xs); color:var(--text-2); line-height:1.6}
.summary .btn{margin-top:.25rem}
.summary__trust{display:grid; gap:.45rem; margin-top:.35rem; padding-top:var(--s4);
  border-top:1px dashed var(--line)}
.summary__trust li{display:flex; align-items:center; gap:.5rem; font-size:var(--f-xs);
  color:var(--text-2)}
.summary__trust svg{color:var(--red); flex:none}

/* generic totals block (reference parity) */
.totals{margin-top:var(--s5); border-top:1px solid var(--line-2); padding-top:var(--s4)}
.totals div{display:flex; justify-content:space-between; gap:var(--s4); padding-block:.42rem;
  font-size:var(--f-sm)}
.totals b{font-variant-numeric:tabular-nums; font-weight:600}
.totals .fin{border-top:1px solid var(--line-2); margin-top:.4rem; padding-top:.8rem}
.totals .fin b{font-family:var(--display); font-weight:800; font-size:1.16rem;
  color:var(--red-ink)}

/* ── the slide-in cart drawer ───────────────────────────────────────────── */
.cartdrawer__body{flex:1; overflow:auto; padding:var(--s4) var(--gut); display:grid;
  gap:.65rem; align-content:start; -webkit-overflow-scrolling:touch}
.cartdrawer__body .citem{grid-template-columns:auto minmax(0,1fr); padding:.75rem;
  border-radius:5px; gap:.75rem}
.cartdrawer__body .citem__img{width:62px; height:62px}
.cartdrawer__body .citem__line{grid-column:2; text-align:left; margin-top:.15rem}
.cartdrawer__body .empty{padding:var(--s7) var(--s4); border-radius:var(--r-lg);
  font-size:var(--f-sm)}
.cartdrawer__foot{flex:none; padding:var(--s4) var(--gut) var(--s5);
  border-top:1.5px solid var(--line); background:var(--surface); display:grid; gap:.55rem;
  box-shadow:0 -18px 30px -28px rgba(10,10,11,.6)}
.cartdrawer__tot{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); font-size:var(--f-sm)}
.cartdrawer__tot b{font-family:var(--display); font-weight:800; font-size:1.24rem;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--red-ink)}


/* ══════════════════════════════════════════════════════════════════════════
   11  TABLES · ALERTS · CRUMBS · PAGINATION · TOASTS · ACCOUNT · MISC
   ══════════════════════════════════════════════════════════════════════════ */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--surface)}
.tablewrap .table{border:0; border-radius:0}
.table{width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); border-collapse:separate; border-spacing:0; overflow:hidden}
.table th,.table td{padding:.9rem 1.1rem; text-align:left; font-size:var(--f-sm);
  vertical-align:middle; border-bottom:1px solid var(--line)}
.table thead th{font-size:var(--f-xs); letter-spacing:.08em; text-transform:uppercase;
  font-weight:600; color:var(--text-2); background:var(--surface-2); white-space:nowrap}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background var(--dur) var(--ease)}
.table tbody tr:hover{background:var(--surface-2)}
.table .num,.table .right{text-align:right; font-variant-numeric:tabular-nums}
.table .nowrap{white-space:nowrap}
.table__t{font-weight:600}
.table__sub{display:block; font-size:var(--f-xs); color:var(--text-2)}
.table--flush{border:0; border-radius:0}
.table--compact th,.table--compact td{padding:.62rem .8rem}
.table--lined tbody tr:hover{background:transparent}
.table caption{caption-side:top; text-align:left; padding:.9rem 1.1rem; font-size:var(--f-xs);
  font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--text-2);
  border-bottom:1px solid var(--line)}
.table__act{display:flex; gap:.4rem; justify-content:flex-end}

/* order status pill, reused in tables and on the order page */
.status{display:inline-flex; align-items:center; gap:.4rem; font-size:var(--f-xs);
  font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.35em .75em;
  border-radius:999px; background:var(--surface-3); color:var(--text-2); white-space:nowrap}
.status::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.status--pending{background:var(--warn-wash); color:var(--warn)}
.status--paid,.status--processing{background:var(--red-wash); color:var(--red-ink)}
.status--shipped{background:#EEF2FF; color:#3730A3}
.status--delivered{background:var(--ok-wash); color:var(--ok)}
.status--cancelled,.status--failed,.status--refunded{background:var(--surface-3);
  color:var(--text-2)}

/* alerts / flashes */
.flashes{margin-top:var(--s5); display:grid; gap:.6rem}
.alert{display:flex; align-items:flex-start; gap:.7rem; padding:.9rem 1.05rem;
  border-radius:var(--r); border:1px solid var(--line); background:var(--surface-2);
  color:var(--text); font-size:var(--f-sm); line-height:1.5}
.alert svg{flex:none; margin-top:.15rem; color:var(--text-2)}
.alert > span{flex:1; min-width:0}
.alert--ok{background:var(--ok-wash); border-color:color-mix(in srgb,var(--ok) 24%,transparent);
  color:var(--ok)}
.alert--ok svg{color:var(--ok)}
.alert--err{background:var(--red-wash); border-color:var(--red-tint); color:var(--red-ink)}
.alert--err svg{color:var(--red)}
.alert--warn{background:var(--warn-wash);
  border-color:color-mix(in srgb,var(--warn) 24%,transparent); color:var(--warn)}
.alert--warn svg{color:var(--warn)}
.alert__x{flex:none; width:24px; height:24px; border-radius:50%; display:grid;
  place-items:center; color:inherit; opacity:.55;
  transition:opacity var(--dur) var(--ease), background var(--dur) var(--ease)}
.alert__x:hover{opacity:1; background:rgba(127,127,127,.14);
  background:color-mix(in srgb, currentColor 12%, transparent)}
.alert a{text-decoration:underline; text-underline-offset:3px; font-weight:600}

/* breadcrumbs */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .5rem;
  font-size:var(--f-xs); color:var(--text-2); padding-block:var(--s5) 0}
.crumbs li{display:inline-flex; align-items:center; gap:.5rem}
.crumbs li + li::before{content:"/"; color:var(--line-2)}
.crumbs a{transition:color var(--dur) var(--ease)}
.crumbs a:hover{color:var(--red-ink)}
.crumbs [aria-current="page"]{color:var(--text); font-weight:600}

/* pagination */
.pagination{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.35rem; margin-top:var(--s8)}
.pagination__link{display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  min-width:40px; height:40px; padding-inline:.85rem; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  font-size:var(--f-sm); font-weight:600; font-variant-numeric:tabular-nums;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), transform var(--dur) var(--ease)}
a.pagination__link:hover{border-color:var(--ink); transform:none}
.pagination__link.is-current{background:var(--red); border-color:var(--red); color:#fff;
  box-shadow:var(--sh-red)}
.pagination__link.is-disabled{opacity:.4; cursor:not-allowed}
.pagination__gap{padding-inline:.35rem; color:var(--text-3)}
.pagination__of{width:100%; text-align:center; margin-top:.5rem}

/* toasts (created by app.js) */
.toasts{position:fixed; right:var(--gut); bottom:var(--gut); z-index:200; display:grid;
  gap:.5rem; justify-items:end; pointer-events:none; max-width:min(92vw,24rem)}
.toast{display:flex; align-items:center; gap:.7rem; pointer-events:auto;
  background:var(--ink); color:#fff; border-radius:999px; padding:.72rem 1.15rem;
  font-size:var(--f-sm); font-weight:500; box-shadow:var(--sh2);
  opacity:0; transform:translateY(10px) scale(.97);
  transition:opacity 220ms var(--ease), transform 220ms var(--ease)}
.toast.is-in{opacity:1; transform:none}
.toast.is-out{opacity:0; transform:translateY(6px) scale(.97)}
.toast--ok{background:var(--ink)}
.toast--err{background:var(--red)}
.toast__msg{flex:1; min-width:0}
.toast__x{flex:none; width:22px; height:22px; border-radius:50%; display:grid;
  place-items:center; font-size:1rem; line-height:1; color:inherit; opacity:.6}
.toast__x:hover{opacity:1; background:rgba(255,255,255,.16)}

/* account / dashboard shell */
.acctnav{display:grid; gap:.15rem; position:sticky; top:calc(var(--hdr-h) + 1.25rem)}
.acctnav a{display:flex; align-items:center; gap:.65rem; padding:.7rem .9rem;
  border-radius:5px; font-size:var(--f-sm); font-weight:500; color:var(--text-2);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.acctnav a:hover{background:var(--surface-3); color:var(--text)}
.acctnav a[aria-current="page"],.acctnav a.is-active{background:var(--red-wash);
  color:var(--red-ink); font-weight:600}
.acctnav svg{flex:none; opacity:.75}
.acctnav hr{margin:.5rem .9rem}

/* small stat tiles (account, admin dashboard) */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));
  gap:var(--gut)}
.stats > div{border-left:2px solid var(--line); padding-left:var(--s4)}
.stats > div:first-child{border-left-color:var(--red)}
.stats b{display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(1.4rem,2.3vw,2.05rem); letter-spacing:-.03em; line-height:1;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.stats > div > span{display:block; margin-top:.5rem; font-size:var(--f-xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-2)}

/* order confirmation / order detail */
.ordhead{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:var(--s5); padding-bottom:var(--s5); border-bottom:1px solid var(--line)}
.ordhead__n{font-family:var(--display); font-weight:800; font-size:clamp(1.3rem,2.4vw,2rem);
  letter-spacing:-.035em; font-variant-numeric:tabular-nums}
.ordgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
  gap:var(--s5); margin-top:var(--s6)}
.ordbox{padding:1rem 1.15rem; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface-2)}
.ordbox h4{font-family:var(--body); font-size:var(--f-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-2); font-weight:600; margin-bottom:.5rem}
.ordbox p{font-size:var(--f-sm); line-height:1.6}
.timeline{display:grid; gap:0; margin-top:var(--s5)}
.timeline li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.9rem;
  padding-bottom:var(--s5); position:relative}
.timeline li::before{content:""; position:absolute; left:6px; top:16px; bottom:0; width:1.5px;
  background:var(--line)}
.timeline li:last-child{padding-bottom:0}
.timeline li:last-child::before{display:none}
.timeline i{width:13px; height:13px; border-radius:50%; background:var(--surface);
  border:2px solid var(--line-2); margin-top:4px; z-index:1}
.timeline li.is-done i{background:var(--red); border-color:var(--red)}
.timeline b{display:block; font-size:var(--f-sm)}
.timeline span{font-size:var(--f-xs); color:var(--text-2)}

/* accordion (FAQ, mobile filters, admin sections) */
.acc{display:grid; gap:.7rem}
.acc__item{background:var(--surface-3); border-radius:var(--r-xl); overflow:hidden;
  transition:background var(--dur) var(--ease)}
.acc__item:hover{background:var(--red-wash)}
.acc__btn{display:flex; width:100%; align-items:center; justify-content:space-between;
  gap:var(--s4); padding:1.3rem 1.6rem; text-align:left; font-family:var(--display);
  font-weight:600; font-size:clamp(1rem,1.3vw,1.14rem); letter-spacing:-.015em}
.acc__ico{flex:none; width:26px; height:26px; display:grid; place-items:center;
  transition:transform var(--dur) var(--ease), color var(--dur) var(--ease)}
.acc__item.open .acc__ico,.acc__item[data-open] .acc__ico{transform:rotate(180deg);
  color:var(--red)}
.acc__pan{display:grid; grid-template-rows:0fr; transition:grid-template-rows 360ms var(--ease)}
.acc__item.open .acc__pan,.acc__item[data-open] .acc__pan{grid-template-rows:1fr}
.acc__pan > div{overflow:hidden}
.acc__pan p{padding:0 1.6rem 1.4rem; font-size:var(--f-sm); color:var(--text-2); max-width:64ch}

/* Scroll reveal. Progressive: the element is visible unless a script has
   marked the document with html.js, so no-JS never hides content. */
.rev{transition:opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease)}
html.js .rev:not(.in){opacity:0; transform:translateY(18px)}
html.js .rev.in{opacity:1; transform:none}


/* ══════════════════════════════════════════════════════════════════════════
   12  HOME — hero, trust band, marquee, info band
   The home page stays minimal: hero + category strip + one trust/info band.
   ══════════════════════════════════════════════════════════════════════════ */
.hero{padding-block:clamp(3rem,6.5vw,6.5rem) clamp(2rem,4vw,4rem); position:relative;
  overflow:hidden}
.hero__glow{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 42% at 50% -4%, var(--red-tint) 0%, transparent 68%)}
.hero .wrap{position:relative}
.hero h1{max-width:20ch; margin-inline:auto}
.hero__sub{margin-top:var(--s6); font-size:var(--f-lead); color:var(--text-2); max-width:58ch;
  margin-inline:auto}
.hero__cta{margin-top:var(--s7); display:flex; gap:var(--s3); justify-content:center;
  flex-wrap:wrap}

/* inline photo chip inside the headline */
.ic{display:inline-block; width:1.1em; height:.84em; border-radius:min(.15em,5px);
  overflow:hidden;
  vertical-align:-.1em; background:var(--surface-3); position:relative;
  box-shadow:0 8px 20px -8px rgba(10,10,11,.45); margin-inline:.1em}
.ic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2}
.ic::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  z-index:3; background:linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,0) 52%)}
.ic--a{animation:icFloat 6.5s ease-in-out infinite}
.ic--b{animation:icFloatB 6.5s ease-in-out infinite 1.1s}
@keyframes icFloat{0%,100%{transform:rotate(-5deg) translateY(0)}
  28%{transform:rotate(-2deg) translateY(-5px)} 62%{transform:rotate(-7deg) translateY(2px)}}
@keyframes icFloatB{0%,100%{transform:rotate(4deg) translateY(0)}
  34%{transform:rotate(7deg) translateY(-6px)} 70%{transform:rotate(2deg) translateY(1px)}}

.trust{margin-top:clamp(2.5rem,4.5vw,4rem); display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:var(--s3) var(--s6)}
.trust p{font-size:var(--f-sm); color:var(--text-3)}
.trust span{font-family:var(--display); font-weight:600; font-size:clamp(.85rem,1vw,1rem);
  color:var(--text-2); white-space:nowrap; transition:color var(--dur) var(--ease)}
.trust span:hover{color:var(--red-ink)}

/* red marquee strip */
.mq{overflow:hidden; background:var(--red); color:#fff; padding-block:1.35rem}
.mq__t{display:flex; gap:var(--s8); width:max-content; animation:slide 38s linear infinite}
.mq:hover .mq__t{animation-play-state:paused}
.mq span{display:inline-flex; align-items:center; gap:var(--s4); font-family:var(--display);
  font-weight:600; font-size:clamp(1rem,1.6vw,1.45rem); letter-spacing:-.015em;
  white-space:nowrap}
.mq svg{opacity:.7; flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* the single trust / info band */
.band{background:var(--ink); color:#fff; border-radius:var(--r-2xl); overflow:hidden;
  padding:clamp(1.75rem,4vw,3.5rem)}
.band h2,.band h3,.band h4{color:#fff}
.band .lead{color:rgba(255,255,255,.7)}
.bandgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:var(--s8) var(--gut); margin-top:var(--s8)}
.bblock{border-top:2px solid rgba(255,255,255,.16); padding-top:var(--s6)}
.bblock:first-child{border-top-color:var(--red)}
.bblock__n{font-family:var(--display); font-weight:800; font-size:clamp(2rem,3.4vw,2.8rem);
  letter-spacing:-.04em; line-height:1; color:var(--red); font-variant-numeric:tabular-nums}
.bblock h3{margin-top:var(--s4); font-size:clamp(1.05rem,1.4vw,1.24rem)}
.bblock p{margin-top:var(--s3); font-size:var(--f-sm); color:rgba(255,255,255,.66);
  max-width:38ch}
.checks{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),auto));
  gap:.9rem var(--s7); justify-content:center; margin-top:var(--s8)}
.checks li{display:flex; align-items:center; gap:.55rem; font-size:var(--f-sm);
  color:rgba(255,255,255,.88)}
.checks svg{color:var(--red); flex:none}

/* editorial / about page pieces */
.prose{max-width:68ch; font-size:var(--f-body); color:var(--text-2)}
.prose h2{color:var(--text); margin-top:var(--s8)}
.prose h3{color:var(--text); margin-top:var(--s7)}
.prose p + p,.prose ul,.prose ol{margin-top:var(--s4)}
.prose ul li,.prose ol li{display:flex; gap:.65rem; padding-block:.28rem}
.prose ul li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--red);
  flex:none; margin-top:.62em}
.prose ol{counter-reset:p}
.prose ol li{counter-increment:p}
.prose ol li::before{content:counter(p) "."; color:var(--red); font-weight:700; flex:none}
.prose strong{color:var(--text)}
.pagehead{padding-block:clamp(1.75rem,3.4vw,3rem) clamp(1.25rem,2.4vw,2rem)}
.pagehead h1{font-size:clamp(1.9rem,4.4vw,3.2rem)}
.pagehead p{margin-top:var(--s4); max-width:56ch}

/* ── category / subcategory header: a signpost, not a poster ───────────────
   The generic .pagehead is a landing header (hero-sized title, tinted band,
   stat strip). A range page is somewhere you arrive to shop, so its header
   says where you are in four short lines and gets out of the way. */
.pagehead--cat{padding-block:clamp(1.1rem,2.2vw,1.75rem) 0}
.pagehead--cat .pagehead__eyebrow{margin:0 0 .5rem; font-size:var(--f-xs); font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--text-3)}
.pagehead--cat h1{font-size:clamp(1.7rem,2.9vw,2.35rem); letter-spacing:-.03em; line-height:1.1;
  text-wrap:balance}
.pagehead--cat .lead{margin-top:.6rem; max-width:62ch}
.pagehead--cat .pagehead__meta{margin:.8rem 0 0; max-width:none; display:flex; flex-wrap:wrap;
  gap:.3rem .5rem; font-size:var(--f-sm); color:var(--text-2); font-variant-numeric:tabular-nums}
.pagehead--cat .pagehead__meta b{font-weight:600; color:var(--text)}
.substrip--cat{margin-top:var(--s5); padding-bottom:var(--s5); border-bottom:1px solid var(--line)}
.substrip--cat .chip{font-size:var(--f-xs)}
.substrip--cat .chip[aria-current="page"]{background:var(--text); color:var(--surface); border-color:var(--text)}
.substrip--cat .chip[aria-current="page"] .num{opacity:.8}
/* The header's own section bottom padding plus the listing's top padding
   stacked into ~110px of nothing under the chip rule. The rule is the
   separator now, so both halves shrink. */
section:has(> .wrap > .pagehead--cat){padding-bottom:0}
section:has(> .wrap > .pagehead--cat) + section{padding-top:var(--s5)}
.pagehead--center{text-align:center}
.pagehead--center p{margin-inline:auto}


/* ══════════════════════════════════════════════════════════════════════════
   13  FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.ft{background:var(--ft-bg); color:#fff; padding-block:var(--s10) var(--s6);
  margin-top:var(--s9); flex:none}
.ft__cols{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--s8) var(--gut)}
.fc4{grid-column:span 4} .fc2{grid-column:span 2}
.ft h4{font-size:var(--f-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--red);
  font-weight:600; font-family:var(--body)}
.ft ul{margin-top:var(--s4)}
.ft li + li{margin-top:.5rem}
.ft li a,.ft p a,.ft address a{color:var(--ft-text); font-size:var(--f-sm);
  transition:color var(--dur) var(--ease)}
.ft li a:hover,.ft p a:hover,.ft address a:hover{color:#fff}
.ft__link{color:var(--ft-text); font-size:var(--f-sm); text-align:left; padding:0;
  transition:color var(--dur) var(--ease)}
.ft__link:hover{color:#fff}
.ft__brand{display:flex; align-items:center; gap:.65rem}
.ft__brand img{width:40px; height:40px; border-radius:5px; object-fit:cover}
.ft__brand b{font-family:var(--display); font-weight:800; font-size:.94rem; letter-spacing:.14em}
.ft__blurb{margin-top:var(--s5); color:rgba(255,255,255,.7); max-width:38ch; line-height:1.65}
.wa-box{margin-top:var(--s5); display:flex; gap:.6rem; flex-wrap:wrap}
.ft .btn--out{background:transparent; border-color:rgba(255,255,255,.28); color:#fff !important}
.ft .btn--out:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.ft__addr{margin-top:var(--s6); color:rgba(255,255,255,.7); line-height:1.75}
.ft__addr .mute{color:rgba(255,255,255,.45)}
.ft__hours{margin-top:var(--s5); color:rgba(255,255,255,.45); line-height:1.7}
.social{display:flex; gap:.55rem; margin-top:var(--s6)}
.social a{width:44px; height:44px; display:grid; place-items:center; border-radius:5px;
  border:1px solid rgba(255,255,255,.2); color:#fff;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    transform var(--dur) var(--ease)}
.social a:hover{border-color:var(--red); background:var(--red); transform:none}
.ft__end{margin-top:var(--s9); padding-top:var(--s5);
  border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:var(--s4);
  justify-content:space-between; font-size:var(--f-xs); color:rgba(255,255,255,.5)}


/* ══════════════════════════════════════════════════════════════════════════
   15  RESPONSIVE  —  1200 / 1024 / 860 / 700 / 560
   Rule of the house: nothing scrolls horizontally. Wide things (tables,
   rails, chip strips) scroll inside their own box, never the page.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1200px ─────────────────────────────────────────────────────────────── */
@media (max-width:75em){
  .mega__panel{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s6) var(--s5)}
  .listing{grid-template-columns:15rem minmax(0,1fr)}
  .split{grid-template-columns:15rem minmax(0,1fr)}
  .split--right{grid-template-columns:minmax(0,1fr) 20rem}
  .checkout{grid-template-columns:minmax(0,1fr) 20.5rem}
  .cartpage{grid-template-columns:minmax(0,1fr) 20.5rem}
  .pdp{gap:var(--s6)}
  .hdr__top{gap:var(--s5)}
  .fc4{grid-column:span 12} .fc2{grid-column:span 3}
}

/* ── 1024px — the desktop nav folds into the drawer ─────────────────────── */
@media (max-width:64em){
  /* A crumb is a real navigation control on a phone — 17px of text is not a
     tap target. Grow the hit area, not the type. */
  .crumb a,.crumbs a{position:relative}
  .crumb a::after,.crumbs a::after{content:""; position:absolute; left:0; right:0;
    top:50%; transform:translateY(-50%); height:44px}

  :root{--hdr-h:64px}
  .navrow,.search,.mega{display:none}
  .burger{display:flex}
  .hdr__top{gap:var(--s4)}
  .hdr__act{margin-left:auto}

  .listing,.split,.split--right,.checkout,.cartpage,.pdp{grid-template-columns:minmax(0,1fr)}
  .gal,.filters,.summary,.acctnav{position:static; max-height:none}
  .gal{margin-bottom:var(--s5)}

  /* the filter sidebar becomes a slide-in drawer */
  .filters__toggle{display:inline-flex}
  .filters{position:fixed; inset:0 0 0 auto; z-index:120; width:min(92vw,21rem);
    background:var(--surface); padding:var(--s5) var(--gut) var(--s8);
    overflow:auto; transform:translateX(101%); transition:transform 380ms var(--ease), visibility 0s linear 380ms;
    visibility:hidden;
    box-shadow:none; gap:var(--s5); align-content:start;
    display:grid}
  .filters.on{transform:none; visibility:visible; transition:transform 380ms var(--ease), visibility 0s;
    box-shadow:-30px 0 70px -34px rgba(10,10,11,.5)}
  .filters__top{display:flex}
  .filters__act{position:sticky; bottom:0;
    background:linear-gradient(to top, var(--surface) 62%, transparent)}
  

  /* buy panel hugs the viewport bottom */
  .buy{position:sticky; bottom:0; margin-inline:calc(var(--gut) * -1);
    border-radius:var(--r-xl) var(--r-xl) 0 0; border-bottom:0;
    box-shadow:0 -20px 40px -30px rgba(10,10,11,.7)}

  .fc4{grid-column:span 12} .fc2{grid-column:span 4}
  .ft{padding-block:var(--s9) var(--s6)}
  .checkout__main{gap:var(--s4)}
  .summary{margin-top:var(--s2)}
}

/* ── 860px ──────────────────────────────────────────────────────────────── */
@media (max-width:53.75em){
  .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,13.5rem),1fr))}
  .fields,.fields--3{grid-template-columns:minmax(0,1fr)}
  .fields .field--half{grid-column:auto}
  .toolbar{gap:var(--s3); padding-bottom:var(--s4); margin-bottom:var(--s5)}
  .toolbar__act{width:100%; justify-content:space-between}
  .sortbar{flex:1}
  .sortbar .select{flex:1; min-width:0}
  .head{gap:var(--s4)}
  .pdp h1{font-size:clamp(1.55rem,5.6vw,2rem)}
  .gal__main{aspect-ratio:1/1}
  .citem{grid-template-columns:auto minmax(0,1fr); gap:.85rem}
  .citem__line{grid-column:2; text-align:left; align-self:start; margin-top:.25rem}
  .ordhead{gap:var(--s4)}
  .stats{gap:var(--s5) var(--s4)}
  .band{padding:1.5rem 1.25rem}
  .authcard{padding:1.5rem 1.25rem}
  .card--pad{padding:1.25rem}
}

/* ── 700px ──────────────────────────────────────────────────────────────── */
@media (max-width:43.75em){
  .sec{padding-block:clamp(2.5rem,8vw,3.5rem)}
  .hdr__top{gap:.6rem; padding-block:.6rem}
  .brand__w > span{display:none}
  .brand img{width:34px; height:34px}
  .brand b{font-size:.8rem; letter-spacing:.1em}
  .qbtn .lbl{display:none}
  .hdr__cta{display:none}
  .iconbtn{width:40px; height:40px}

  /* two products across, tightened */
  .grid,.grid--wide,.grid--3,.grid--4{gap:.7rem;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,10.5rem),1fr))}
  .grid--2{grid-template-columns:minmax(0,1fr)}
  .pcard{border-radius:var(--r-lg)}
  .pcard__body{padding:.85rem .8rem .9rem; gap:.25rem}
  .pcard__name{font-size:.94rem}
  .pcard__desc{display:none}
  .pcard__price{padding-top:.6rem}
  .pcard__moq{display:none}
  .pcard__add{padding:.62em .8em; font-size:var(--f-xs); margin-top:.6rem}
  .pcard__wish{opacity:1; transform:none; width:32px; height:32px; top:.55rem; right:.55rem}

  .hero{padding-block:2rem 1.5rem}
  .hero h1{font-size:clamp(2.05rem,9vw,2.9rem)}
  .hero__sub{font-size:1rem; margin-top:var(--s5)}
  .hero__cta{margin-top:var(--s6)}
  .hero__cta .btn{flex:1 1 100%}
  .trust{gap:.5rem 1.1rem; margin-top:2rem}
  .trust p{flex:1 1 100%; text-align:center; margin-bottom:.3rem}
  .trust span{font-size:.82rem}

  .pills{width:100%; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap;
    scrollbar-width:none}
  .pills::-webkit-scrollbar{display:none}
  .pills button,.pills a{flex:none}
  .railnav{margin-left:auto}

  .stepper button{width:44px}
  .stepper input{width:88px; font-size:1.15rem}
  .quick button{font-size:var(--f-xs); padding:.5em .8em}
  .vchip{min-width:7rem; padding:.6rem .8rem}
  .vlist{gap:.45rem}
  .slabs th,.slabs td{padding:.7rem .8rem; font-size:.82rem}
  .spec th,.spec td{padding:.7rem .85rem}
  .spec th{width:42%}
  .table th,.table td{padding:.7rem .8rem}

  .buy__row .btn{flex:1 1 100%}
  .summary{border-radius:var(--r-lg)}
  .fc2{grid-column:span 6}
  .ft__end{gap:.6rem}
  .mq span{font-size:1rem}
  .mq{padding-block:1rem}
  .toasts{right:var(--gut); left:var(--gut); bottom:.75rem; justify-items:stretch;
    max-width:none}
  .toast{border-radius:var(--r-lg)}
  .pagination__link{min-width:36px; height:36px; padding-inline:.7rem}
  .pagination__link--prev span,.pagination__link--next span{display:none}
  .acctnav{grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto;
    scrollbar-width:none; gap:.35rem; padding-bottom:.35rem}
  .acctnav::-webkit-scrollbar{display:none}
  .acctnav hr{display:none}
  .crumbs{padding-block:var(--s4) 0}
}

/* ── 560px ──────────────────────────────────────────────────────────────── */
@media (max-width:35em){
  h1,.t-hero{letter-spacing:-.035em}
  .pagehead h1{font-size:clamp(1.65rem,8vw,2.1rem)}
  .grid,.grid--wide,.grid--3,.grid--4{gap:.6rem;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr))}
  .empty{padding:1.75rem 1rem}
  .card,.costep{padding:1.05rem 1rem; border-radius:var(--r-lg)}
  .citem{padding:.75rem}
  .citem__img{width:60px; height:60px}
  .citem__ctl{gap:.35rem}
  .citem__qty{width:3.6rem}
  .cartdrawer,.mobnav,.filters{width:100vw}
  .authwrap{padding-block:1.5rem}
  .authcard{border:0; box-shadow:none; padding:1.25rem 0; background:transparent}
  .form__act .btn{flex:1 1 100%; min-width:0}
  .ordhead__n{font-size:1.25rem}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats b{font-size:1.35rem}
  .bandgrid{gap:var(--s6)}
  .ft{padding-block:var(--s8) var(--s5)}
  .social a{width:36px; height:36px}
}

/* very small phones — let long words break rather than push the page wide */
@media (max-width:26em){
  body{overflow-wrap:break-word}
  .grid,.grid--wide,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
  .pcard__desc{display:block}
  .pcard__moq{display:inline}
}


/* ══════════════════════════════════════════════════════════════════════════
   16  REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important}
  .mq__t{animation:none}
  .ic--a,.ic--b{animation:none}
  html.js .rev,html.js .rev:not(.in){opacity:1; transform:none}
  .btn:hover,.card--lift:hover,.pcard:hover,.ccard:hover .ph,.qcard:hover .ph,
  .iconbtn:hover,.social a:hover{transform:none}
  .pcard:hover .pcard__img img,.ccard:hover .ph img,.qcard:hover .ph img{transform:none}
  .toast{opacity:1; transform:none}
}


/* ══════════════════════════════════════════════════════════════════════════
   17  PRINT  —  tuned for the order confirmation / order detail page
   ══════════════════════════════════════════════════════════════════════════ */
@media print{
  @page{margin:14mm}
  html,body{background:#fff !important; color:#000 !important}
  
  body{display:block; font-size:11pt; line-height:1.45; overflow:visible}

  .hdr,.ft,.mobnav,.cartdrawer,.navscrim,.toasts,.burger,.railnav,.filters,
  .filters__toggle,.toolbar,.pagination,.skip,.acctnav,.pcard__wish,.buy,
  .alert__x,.acct,.mq,.hero__glow,.mpromo,.substrip,.activefilters,
  [data-cart-open],.sresults,.pdp__tabs{display:none !important}
  .btn,button{display:none !important}
  .btn--print{display:inline-flex !important}

  main{padding:0 !important}
  .wrap,.wrap--narrow,.wrap--tight{width:100% !important; max-width:none !important;
    margin:0 !important}
  .sec,.sec--sm{padding-block:0 !important}

  a{color:#000 !important; text-decoration:none}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:8.5pt; color:#444}
  a[href^="#"]::after,a[href^="mailto"]::after,a[href^="tel"]::after{content:""}

  h1,h2,h3,h4{color:#000 !important; page-break-after:avoid; break-after:avoid}
  .ordhead{border-bottom:1.5pt solid #000; padding-bottom:8pt}
  .ordhead__n{font-size:16pt}
  .ordgrid{display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8pt}
  .ordbox,.card,.costep,.summary,.table,.tablewrap,.spec,.citem{
    background:#fff !important; border:1pt solid #999 !important; box-shadow:none !important;
    border-radius:0 !important; break-inside:avoid; page-break-inside:avoid}
  .summary{position:static !important; width:100% !important}
  .table thead th{background:#F1F1F1 !important; color:#000 !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .table th,.table td,.spec th,.spec td{border-color:#BBB !important; padding:5pt 7pt}
  .table tbody tr:hover{background:transparent !important}
  .summary__tot b,.totals .fin b,.price{color:#000 !important}
  .status{border:1pt solid #666 !important; background:#fff !important; color:#000 !important}
  .alert{border:1pt solid #666 !important; background:#fff !important; color:#000 !important}
  .timeline li::before{background:#999}
  .timeline i{background:#fff; border-color:#666}
  .timeline li.is-done i{background:#000; border-color:#000}
  img{max-width:100% !important; break-inside:avoid}
  .pcard__img,.gal,.ph{display:none !important}
  .empty{border:1pt dashed #999 !important; background:#fff !important}
  tr,li{page-break-inside:avoid}
}


/* ══════════════════════════════════════════════════════════════════════════
   18  GENERATED ARTWORK  —  .art / .art-mini / .a-*
   Every tile in the reference carries a drawn box illustration built in SVG,
   so a section is complete with or without photography. The art sits at
   z-index 0 inside a .ph, underneath the <img> (§06 gives .ph img z-index 1).
   Class names are the reference's, verbatim.
   ══════════════════════════════════════════════════════════════════════════ */
.art{position:absolute; inset:0; width:100%; height:100%; z-index:0;
  animation:artFloat 7s ease-in-out infinite}
@keyframes artFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}
.art *{vector-effect:non-scaling-stroke}

/* The faces of the drawn box read from --art-* tokens (§01) so a dark card or
   the red mega promo can re-point them locally instead of fighting the same
   selectors on specificity. The values are the reference's own, so the artwork
   renders exactly as the mockups do. */
.a-top{fill:var(--art-face); stroke:var(--art-line); stroke-width:1.7; stroke-linejoin:round}
.a-r{fill:var(--art-face-2); stroke:var(--art-line); stroke-width:1.7; stroke-linejoin:round}
.a-l{fill:var(--art-face-3); stroke:var(--art-line); stroke-width:1.7; stroke-linejoin:round}
.a-top.a-dark{fill:var(--ink-3); stroke:var(--ink)}
.a-r.a-dark{fill:var(--ink-2); stroke:var(--ink)}
.a-l.a-dark{fill:#0E0E11; stroke:var(--ink)}
.a-fine{fill:none; stroke:var(--art-fine); stroke-width:1}
.a-sh{fill:var(--art-sh); stroke:none}
.a-dot{fill:var(--red); stroke:none}
.a-red{stroke:var(--red); stroke-width:3.4; fill:none; stroke-linecap:round}
.a-redline{stroke:var(--red); stroke-width:2.6; fill:none; stroke-linecap:round}
.a-red-f{fill:var(--red); stroke:none}
.a-win{fill:var(--art-win); stroke:var(--art-fine); stroke-width:1.3}
.a-flap{fill:var(--art-flap); stroke:var(--art-line); stroke-width:1.7; stroke-linejoin:round}
.a-emb{fill:none; stroke:var(--red); stroke-width:2}
.a-arc{fill:none; stroke:var(--art-line); stroke-width:2.8; stroke-linecap:round}

/* the lid lifts when its card is hovered */
.a-lift{transition:transform 520ms var(--ease); transform-box:view-box;
  transform-origin:center}
.qcard:hover .a-lift,.ccard:hover .a-lift,.pcard:hover .a-lift,
.lcard:hover .a-lift,.rcard:hover .a-lift{transform:translateY(-3px)}

/* a flat, non-floating copy used inside chips, promos and list rows */
.art-mini{position:relative; background:transparent}
.art-mini .art{animation:none}
.ic .art{animation:none}
.ic .a-lift{animation:icLid 6.5s ease-in-out infinite}
@keyframes icLid{0%,58%,100%{transform:translateY(0)} 72%,86%{transform:translateY(-6px)}}

/* the mega-menu promo card is red, so the art inverts to white line work */
.mpromo .art-mini{height:52px; margin-top:0; flex:none}
.mpromo{--art-face:#fff; --art-face-2:rgba(255,255,255,.72);
  --art-face-3:rgba(255,255,255,.45); --art-line:#fff;
  --art-fine:rgba(255,255,255,.6); --art-sh:rgba(0,0,0,.14);
  --art-win:rgba(255,255,255,.85); --art-flap:#fff}
.mpromo .a-dot{fill:var(--ink)}
.mpromo .a-red,.mpromo .a-redline{stroke:var(--ink)}
.mpromo .a-red-f{fill:var(--ink)}


/* ══════════════════════════════════════════════════════════════════════════
   19  HOME · CATALOGUE INDEX  —  .idx__*
   A printed contents page, not a carousel: five rows, one open at a time.
   Type does the work; the photography arrives only when a row is opened.
   ══════════════════════════════════════════════════════════════════════════ */
.idx{border-top:1.5px solid var(--line)}
.idx__row{border-bottom:1.5px solid var(--line); position:relative}
.idx__row::before{content:""; position:absolute; left:0; top:-1.5px; height:1.5px; width:0;
  background:var(--red); transition:width 560ms var(--ease)}
.idx__row[data-open]::before{width:100%}
.idx__bar{display:grid; grid-template-columns:2.75rem minmax(0,1fr) auto auto;
  gap:var(--s4); align-items:center; width:100%;
  padding:clamp(1rem,1.8vw,1.55rem) 0; text-align:left;
  background:none; border:0; cursor:pointer}
.idx__n{font-family:var(--display); font-weight:800; font-size:var(--f-sm);
  letter-spacing:.1em; color:var(--text-3); transition:color var(--dur) var(--ease)}
.idx__row[data-open] .idx__n{color:var(--red)}
.idx__t{font-family:var(--display); font-weight:800; letter-spacing:-.035em;
  font-size:clamp(1.3rem,2.9vw,2.25rem); line-height:1.02;
  transition:color var(--dur) var(--ease)}
.idx__bar:hover .idx__t{color:var(--text)}
.idx__m{font-size:var(--f-xs); color:var(--text-2); white-space:nowrap;
  letter-spacing:.02em; font-variant-numeric:tabular-nums}
.idx__p{font-family:var(--display); font-weight:800; font-size:clamp(.95rem,1.3vw,1.15rem);
  font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--text)}
.idx__row[data-open] .idx__p{color:var(--red)}
.idx__x{width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line);
  display:grid; place-items:center; flex:none;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
             background var(--dur) var(--ease), color var(--dur) var(--ease)}
.idx__bar:hover .idx__x{border-color:var(--text); color:var(--text)}
.idx__row[data-open] .idx__x{background:var(--text); border-color:var(--text);
  color:var(--bg); transform:rotate(45deg)}

/* the panel animates on grid-template-rows, so it needs no measured height */
.idx__panel{display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 520ms var(--ease)}
.idx__row[data-open] .idx__panel{grid-template-rows:1fr}
.idx__inner{overflow:hidden}
.idx__body{display:block; padding-bottom:clamp(1.4rem,2.4vw,2.2rem)}
.idx__shots{display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem}
.idx__shots figure{margin:0; aspect-ratio:5/4; border-radius:5px; overflow:hidden;
  border:1.5px solid var(--line); background:var(--surface-3); position:relative}
.idx__shots img{width:100%; height:100%; object-fit:cover;
  transition:opacity 520ms var(--ease), transform 700ms var(--ease)}
/* the reference fades each shot in as its row opens by adding .on; ours stays
   visible by default so a row still shows its photography without that script */
.idx__shots img.on{opacity:1; transform:none}
.idx__row[data-open] .idx__shots figure:nth-child(1) img{transition-delay:40ms}
.idx__row[data-open] .idx__shots figure:nth-child(2) img{transition-delay:110ms}
.idx__row[data-open] .idx__shots figure:nth-child(3) img{transition-delay:180ms}
.idx__row[data-open] .idx__shots figure:nth-child(4) img{transition-delay:250ms}
.idx__cols{display:grid; grid-template-columns:1.1fr .9fr;
  gap:var(--s5) clamp(1.5rem,3vw,3rem); margin-top:var(--s6); align-items:start}
.idx__copy p{font-size:var(--f-sm); color:var(--text-2); max-width:52ch}
.idx__side{display:flex; flex-direction:column; gap:var(--s4); align-items:flex-start}
.idx__chips{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:0}
.idx__subs{display:flex; flex-wrap:wrap; gap:.35rem .9rem; margin-top:0;
  font-size:var(--f-xs); color:var(--text-2)}
.idx__subs span::after{content:" ·"; color:var(--line-2)}
.idx__subs span:last-child::after{content:""}


/* ══════════════════════════════════════════════════════════════════════════
   20  HOME · RANGE BENTO + TAB PANELS  —  .rbento .rcard__* .panel .load
   ══════════════════════════════════════════════════════════════════════════ */
.rbento{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut)}
.rcard{position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-2xl); border:1.5px solid var(--line); background:var(--surface);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease)}
.rcard:hover{border-color:var(--line-2); box-shadow:var(--sh2); transform:translateY(-2px)}
.rcard__art{position:relative; min-height:190px; flex:1;
  background:radial-gradient(70% 62% at 50% 42%, var(--red-wash) 0%, var(--surface-2) 72%)}
.rcard__art .art{animation:artFloat 7s ease-in-out infinite}
.rcard__b{padding:var(--s6); border-top:1.5px solid var(--line)}
.rcard h3{font-size:clamp(1.15rem,1.7vw,1.5rem)}
.rcard p{margin-top:.55rem; font-size:var(--f-sm); color:var(--text-2); max-width:44ch}
.rcard__chips{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:var(--s5)}
.rcard__go{display:inline-flex; align-items:center; gap:.45rem; margin-top:var(--s5);
  font-weight:600; font-size:var(--f-sm); color:var(--red-ink);
  transition:gap var(--dur) var(--ease)}
.rcard:hover .rcard__go{gap:.8rem}
.rcard--wide{grid-column:span 6; flex-direction:row}
.rcard--half{grid-column:span 6}
.rcard--third{grid-column:span 4}
.rcard--wide .rcard__art{flex:0 0 46%; min-height:0}
.rcard--wide .rcard__b{border-top:0; border-left:1.5px solid var(--line);
  display:flex; flex-direction:column; justify-content:center; flex:1}

/* the tab panels behind .pills — one visible at a time */
.panel{display:none}
.panel.on,.panel.is-active{display:block; animation:fadeup 420ms var(--ease) both}

/* staggered entrance for a freshly-rendered group (no observer needed) */
.load > *{animation:rise 720ms var(--ease) both}
.load > :nth-child(1){animation-delay:60ms}
.load > :nth-child(2){animation-delay:160ms}
.load > :nth-child(3){animation-delay:260ms}
.load > :nth-child(4){animation-delay:360ms}
@keyframes rise{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}


/* ══════════════════════════════════════════════════════════════════════════
   21  HOME · DIE-LINE STAGE + FLOATING CARDS
   .stage .stage__grid .dieline .dl-* .fcard
   The die-line is one SVG that folds: each .dl-panel carries its own --flat
   and --solid transforms inline, and .dieline[data-state="solid"] swaps them.
   ══════════════════════════════════════════════════════════════════════════ */
.stage{position:relative; background:var(--surface-3); border-radius:var(--r-2xl);
  padding:clamp(2rem,5vw,4.5rem) clamp(1rem,4vw,4rem); overflow:hidden}
.stage__grid{position:absolute; inset:0; opacity:.7; pointer-events:none;
  background-image:linear-gradient(to right,var(--g200) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--g200) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent 78%);
          mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent 78%)}

.dieline{width:min(100%,720px); margin-inline:auto; height:auto; overflow:hidden;
  position:relative; z-index:1}
.dl-panel,.dl-stage{transform-box:view-box; transform-origin:0 0}
.dl-panel{transform:var(--flat);
  transition:transform 880ms var(--ease), opacity 480ms var(--ease)}
.dieline[data-state="solid"] .dl-panel{transform:var(--solid)}
.dieline[data-state="solid"] .dl-panel[data-hide]{opacity:0}
.dl-stage{transform:translate(-33px,-48px); transition:transform 880ms var(--ease)}
.dieline[data-state="solid"] .dl-stage{transform:translate(-193.3px,-87.6px) scale(1.45)}
.dl-face{stroke:var(--ink); stroke-width:1.6; vector-effect:non-scaling-stroke}
.f-lid{fill:#fff} .f-front{fill:#FAFAFB} .f-side{fill:#EAEAEE} .f-hide{fill:#F2F2F4}
.dl-label{font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.15em;
  fill:var(--muted-2); text-anchor:middle; text-transform:uppercase}
.dl-soft{opacity:1; transition:opacity 340ms var(--ease)}
.dieline[data-state="solid"] .dl-soft{opacity:0}
.dl-hard{opacity:0; transition:opacity 340ms var(--ease) 300ms}
.dieline[data-state="solid"] .dl-hard{opacity:1}
.dl-crease{stroke:var(--red); stroke-width:1.3; stroke-dasharray:5 4; fill:none; opacity:.55;
  vector-effect:non-scaling-stroke}
.dl-dim{stroke:var(--muted-2); stroke-width:1; fill:none; vector-effect:non-scaling-stroke}
.dl-dimtext{font-family:var(--display); font-weight:500; font-size:12px; fill:var(--muted);
  text-anchor:middle}

/* the four spec cards that drift over the stage */
.fcard{position:absolute; z-index:4; border-radius:var(--r-lg); box-shadow:var(--sh2);
  padding:.95rem 1.15rem; background:var(--surface); animation:fFloat 8s ease-in-out infinite}
.fcard--a{top:8%; left:3%; transform:rotate(-4deg); animation-delay:0s}
.fcard--b{top:26%; right:3%; transform:rotate(3deg); animation-delay:1.4s}
.fcard--c{bottom:20%; left:5%; transform:rotate(2deg); animation-delay:2.6s;
  background:linear-gradient(140deg,var(--red),var(--red-dark)); color:#fff}
.fcard--d{bottom:9%; right:6%; transform:rotate(-3deg); animation-delay:3.8s;
  background:var(--ink); color:#fff}
@keyframes fFloat{0%,100%{translate:0 0} 50%{translate:0 -10px}}
.fcard .k{display:block; font-size:var(--f-xs); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; opacity:.6}
.fcard .v{display:block; font-family:var(--display); font-weight:800; font-size:1.15rem;
  margin-top:.25rem; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.fcard .s{display:block; font-size:var(--f-xs); opacity:.72; margin-top:.15rem}


/* ══════════════════════════════════════════════════════════════════════════
   22  HOME · DARK PANEL + "THREE WAYS" CARDS + WHATSAPP QUOTE
   .dark .dcards .dcard .dtag .dlist .ico .chat .bub .typing .fakeinput .rlist
   NOTE  the reference paints this panel with a bare `.dark` class, which is a
   name generic enough to catch the document element by accident, so the
   selector is guarded with :not(html) — the CLASS NAME in the markup is
   unchanged, only the rule is stopped from repainting the whole page.
   ══════════════════════════════════════════════════════════════════════════ */
.dark:not(html){background:var(--ink); color:#fff; border-radius:var(--r-2xl);
  overflow:hidden}
.dark:not(html) h2,.dark:not(html) h3,.dark:not(html) h4{color:#fff}
.dark:not(html) .lead{color:rgba(255,255,255,.7)}
.dark:not(html) .tag{background:rgba(227,30,37,.18); color:#FF8B8F}

/* three cards, one rhythm: eyebrow, heading, proof, action */
.dcards{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gut);
  margin-top:var(--s9)}
.dcard{position:relative; border-radius:var(--r-2xl); overflow:hidden;
  padding:clamp(1.5rem,2.2vw,2rem); display:flex; flex-direction:column; gap:var(--s5);
  isolation:isolate; background:#141417; border:1.5px solid rgba(255,255,255,.09);
  color:#fff}
.dcard::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 0%, #000, transparent 72%);
          mask-image:radial-gradient(80% 60% at 50% 0%, #000, transparent 72%)}
.dcard > *{position:relative; z-index:1}
.dcard h3{font-size:clamp(1.15rem,1.6vw,1.42rem); max-width:18ch; line-height:1.12; color:#fff}
.dcard .foot{margin-top:auto; padding-top:var(--s2)}

/* the drawings argue with the dark cards, so no photography behind them */
.dcard .ph{position:absolute; inset:0; z-index:-2; border-radius:inherit; background:var(--ink-3)}
.dcard .ph--drawn{background:radial-gradient(72% 60% at 50% 40%, #1B1B20 0%, var(--ink) 74%)}
.dcard .ph--drawn .art{opacity:.85}
.dcard .ph .art{opacity:.5}
.dcard{--art-face:#26262B; --art-face-2:#1C1C21; --art-face-3:#141418;
  --art-line:#4A4A52; --art-fine:#4A4A52; --art-sh:rgba(0,0,0,.4);
  --art-win:#26262B; --art-flap:#22222A}

/* the eyebrow, with its slow blink */
.dtag{font-size:var(--f-xs); font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--red); display:inline-flex; align-items:center; gap:.5rem}
.dtag i{width:6px; height:6px; border-radius:50%; background:var(--red); flex:none;
  animation:dPing 2.4s ease-in-out infinite}
@keyframes dPing{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.7)}}

/* card 1 — the ranges, as a small price list */
.dlist{display:grid; gap:.1rem}
.dlist li{display:grid; grid-template-columns:34px 1fr auto; gap:.85rem; align-items:center;
  padding:.72rem 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:var(--f-sm)}
.dlist li:first-child{border-top:1px solid rgba(255,255,255,.08)}
.dlist i{width:34px; height:26px; display:block; position:relative}
.dlist i .art{animation:none}
.dlist i{--art-face:#2A2A31; --art-face-2:#1E1E24; --art-face-3:#17171C;
  --art-line:#6E6E78; --art-fine:#55555F; --art-sh:transparent;
  --art-win:#2A2A31; --art-flap:#26262B}
.dlist i .a-dot{fill:var(--red)}
.dlist i .a-red,.dlist i .a-redline{stroke:var(--red)}
.dlist i .a-red-f{fill:var(--red)}
.dlist span{color:rgba(255,255,255,.9)}
.dlist b{font-family:var(--display); font-weight:700; font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.62); font-size:var(--f-xs)}

/* small icons: one grid, one weight, aligned optically not mechanically */
.ico{display:grid; place-items:center; width:34px; height:34px; border-radius:5px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.82); flex:none;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease)}
.ico svg{width:19px; height:19px}
.dlist li:hover .ico{background:var(--red); border-color:var(--red); color:#fff}

/* card 2 — the conversation */
.chat{display:grid; gap:.5rem}
.bub{max-width:92%; padding:.7rem .95rem; border-radius:5px; font-size:var(--f-sm);
  line-height:1.45; position:relative}
.bub time{display:block; font-size:var(--f-xs); opacity:.55; margin-top:.3rem;
  font-variant-numeric:tabular-nums}
.bub--them{background:rgba(255,255,255,.94); color:var(--ink); border-bottom-left-radius:5px}
.bub--us{background:var(--red); color:#fff; margin-left:auto; border-bottom-right-radius:5px}
.typing{display:inline-flex; gap:4px; padding:.6rem .8rem; border-radius:5px;
  background:rgba(255,255,255,.1); border-bottom-left-radius:5px; width:max-content}
.typing i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.6);
  animation:tBounce 1.3s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.16s}
.typing i:nth-child(3){animation-delay:.32s}
@keyframes tBounce{0%,60%,100%{transform:translateY(0); opacity:.45}
  30%{transform:translateY(-4px); opacity:1}}
.fakeinput{display:flex; align-items:center; gap:.6rem; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:.72rem 1rem;
  font-size:var(--f-sm); color:rgba(255,255,255,.6)}
.fakeinput span{flex:1}
.fakeinput svg{color:var(--red)}

/* card 3 — the reassurance */
.dcard--red{background:linear-gradient(155deg,var(--red) 0%,var(--red-dark) 100%);
  border-color:rgba(255,255,255,.18)}
.dcard--red::before{opacity:.35}
.dcard--red .dtag{color:rgba(255,255,255,.85)}
.dcard--red .dtag i{background:#fff}
.rlist{display:grid; gap:.75rem}
.rlist li{display:flex; gap:.65rem; align-items:flex-start; font-size:var(--f-sm);
  color:rgba(255,255,255,.92); line-height:1.45}
.rlist svg{flex:none; margin-top:2px; opacity:.9}

/* the four-up "how a quote happens" strip under the chat card */
.qsteps{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s7) var(--gut);
  margin-top:var(--s9)}

/* the drifting product pills over a dark card */
.floaters{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto}
.floater{display:inline-flex; align-items:center; gap:.5rem; background:var(--surface);
  color:var(--text); border-radius:999px; padding:.4rem .9rem .4rem .4rem;
  font-size:var(--f-xs); font-weight:600; box-shadow:var(--sh1);
  transition:transform var(--dur) var(--ease)}
.floater:hover{transform:translateY(-2px)}
.floater i{width:26px; height:26px; border-radius:50%; background:var(--surface-3);
  display:block; flex:none; position:relative; overflow:hidden}


/* ══════════════════════════════════════════════════════════════════════════
   23  HOME · "OWN FACTORY" EVIDENCE  —  .evi .eblock .efig .ekey .e-*
   The drawing is SVG, the words are HTML, so the copy wraps and scales.
   DEVIATION  the reference starts .e-box/.e-many/.e-grow at opacity 0 and
   waits for a reveal observer to add .in. We have no observer yet, so the
   resting state is the finished drawing and .in only re-plays the entrance.
   ══════════════════════════════════════════════════════════════════════════ */
.evi{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s8) var(--gut);
  margin-top:var(--s9)}
.eblock{border-top:2px solid rgba(255,255,255,.14); padding-top:var(--s6)}
.eblock:first-child{border-top-color:var(--red)}
.efig{width:100%; aspect-ratio:300/78; margin-bottom:var(--s4)}
.efig svg{width:100%; height:100%; overflow:visible}
.ekeys{display:grid; gap:.5rem}
.ekey{display:flex; align-items:baseline; gap:.55rem; font-size:var(--f-xs);
  color:rgba(255,255,255,.48); line-height:1.35}
.ekey b{font-family:var(--display); font-weight:800; font-size:1.02rem; letter-spacing:-.02em;
  color:rgba(255,255,255,.75); font-variant-numeric:tabular-nums; white-space:nowrap}
.ekey--hot{color:rgba(255,255,255,.8)}
.ekey--hot b{color:var(--red)}
.eblock h3{font-size:clamp(1.05rem,1.35vw,1.22rem); margin-top:var(--s5); color:#fff}
.eblock p{margin-top:var(--s3); font-size:var(--f-sm); color:rgba(255,255,255,.64);
  max-width:36ch}
.eblock .vs{margin-top:var(--s4); font-size:var(--f-xs); color:rgba(255,255,255,.4);
  border-left:2px solid rgba(255,255,255,.16); padding-left:.8rem; line-height:1.55}

/* the drawings themselves — colour first, then the entrance animations */
.e-box{fill:var(--red); transform-box:fill-box; transform-origin:center}
.e-many{fill:rgba(255,255,255,.17)}
.e-wire{stroke:rgba(255,255,255,.22); stroke-width:1.6; fill:none}
.e-wire-hot{stroke:var(--red); stroke-width:2.4; fill:none}
.e-node{fill:var(--ink-3); stroke:rgba(255,255,255,.32); stroke-width:1.5}
.e-node-hot{fill:var(--red); stroke:none}
.e-bar{fill:var(--red)}
.e-bar2{fill:rgba(255,255,255,.22)}
.e-grow,.e-grow--b{transform-box:fill-box; transform-origin:left center}
/* the overhang is the whole point of the third diagram */
.e-over{fill:url(#hatch); stroke:rgba(255,255,255,.3); stroke-width:1.5}
.e-rule{stroke:rgba(255,255,255,.45); stroke-width:1.4; stroke-dasharray:4 4; fill:none}
.e-cap{fill:#fff}
/* the travelling dot runs on its own — it is a loop, not an entrance */
.e-pulse{fill:#fff; opacity:0}
.e-pulse--fast,.in .e-pulse--fast{animation:pFast 1.6s linear infinite}
.e-pulse--slow,.in .e-pulse--slow{animation:pSlow 4.4s linear infinite}
.in .e-box{animation:eBox 460ms var(--ease) both}
.in .e-many{animation:eFade 900ms var(--ease) .9s both}
.in .e-grow{animation:eGrow 900ms var(--ease) .25s both}
.in .e-grow--b{animation:eGrow 900ms var(--ease) .55s both}
@keyframes eBox{from{opacity:0; transform:scale(.4)} to{opacity:1; transform:scale(1)}}
@keyframes eFade{from{opacity:0} to{opacity:1}}
@keyframes eGrow{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes pFast{0%{opacity:0; transform:translateX(0)} 8%{opacity:1}
  92%{opacity:1; transform:translateX(150px)} 100%{opacity:0; transform:translateX(150px)}}
@keyframes pSlow{0%{opacity:0; transform:translateX(0)} 6%{opacity:1}
  22%{transform:translateX(50px)} 32%{transform:translateX(50px)}
  54%{transform:translateX(100px)} 64%{transform:translateX(100px)}
  90%{opacity:1; transform:translateX(150px)} 100%{opacity:0; transform:translateX(150px)}}

/* the same block set, on a light ground (used outside the dark panel) */
.plain{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gut); margin-top:var(--s9)}
.pblock{border-top:2px solid rgba(255,255,255,.16); padding-top:var(--s6)}
.pblock:first-child{border-top-color:var(--red)}
.pblock__n{font-family:var(--display); font-weight:800; font-size:clamp(2.2rem,3.6vw,3rem);
  letter-spacing:-.04em; line-height:1; color:var(--red)}
.pblock h3{margin-top:var(--s4); font-size:clamp(1.05rem,1.4vw,1.24rem)}
.pblock p{margin-top:var(--s3); font-size:var(--f-sm); color:rgba(255,255,255,.66); max-width:36ch}
.pblock .vs{margin-top:var(--s5); font-size:var(--f-xs); color:rgba(255,255,255,.42);
  border-left:2px solid rgba(255,255,255,.18); padding-left:.8rem; line-height:1.55}


/* ══════════════════════════════════════════════════════════════════════════
   24  HOME · PRICE LADDER  —  .ladder .lad-l .lad-r .readout .save
   The stepper, the quick presets, the slab table and the totals block all
   already live in §07/§10; only the two-column shell and the readout are new.
   ══════════════════════════════════════════════════════════════════════════ */
.ladder{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--s8) var(--gut);
  align-items:start}
.lad-l{grid-column:1/span 5}
.lad-r{grid-column:7/span 6; position:sticky; top:calc(var(--hdr-h) + 2.5rem)}
.readout{background:var(--surface-3); border-radius:var(--r-2xl);
  padding:clamp(1.5rem,2.6vw,2.6rem)}
.readout__big{font-family:var(--display); font-weight:800;
  font-size:clamp(2.6rem,5.4vw,4rem); letter-spacing:-.05em; line-height:1;
  font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:.7rem}
.readout__big small{font-family:var(--body); font-size:var(--f-sm); font-weight:500;
  color:var(--text-2); letter-spacing:0}
.save{display:inline-flex; align-items:center; gap:.5em; margin-top:var(--s4);
  font-weight:600; font-size:var(--f-sm); color:#fff; background:var(--red);
  border-radius:999px; padding:.55em 1.05em}


/* ══════════════════════════════════════════════════════════════════════════
   25  HOME · SCENARIO CARDS  —  .scen .scard__*
   "Which of these is you?" — three cards, the middle one turned up hot.
   ══════════════════════════════════════════════════════════════════════════ */
.scen{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gut)}
.scard{border-radius:var(--r-2xl); padding:clamp(1.5rem,2.4vw,2.4rem);
  background:var(--surface-2); border:1.5px solid var(--line);
  display:flex; flex-direction:column;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease)}
.scard:hover{border-color:var(--line-2); transform:translateY(-2px); box-shadow:var(--sh1)}
.scard__n{width:38px; height:38px; border-radius:50%; background:var(--hot); color:#fff;
  display:grid; place-items:center; font-family:var(--display); font-weight:700;
  font-size:.82rem; margin-bottom:var(--s5)}
.scard__q{font-family:var(--display); font-weight:800; font-size:clamp(1.15rem,1.7vw,1.45rem);
  letter-spacing:-.025em; line-height:1.15}
.scard__q em{font-style:normal; color:var(--red)}
.scard__a{margin-top:var(--s5); font-size:var(--f-sm); color:var(--text-2)}
.scard__k{margin-top:auto; padding-top:var(--s6); display:grid; gap:.55rem}
.scard__k div{display:flex; align-items:flex-start; gap:.6rem; font-size:var(--f-sm)}
.scard__k svg{color:var(--red); flex:none; margin-top:3px}
.scard--hot{background:var(--hot); color:#fff; border-color:var(--hot-line)}
.scard--hot h3,.scard--hot .scard__q{color:#fff}
.scard--hot .scard__a{color:rgba(255,255,255,.7)}
.scard--hot .scard__k div{color:rgba(255,255,255,.88)}
.scard--hot .scard__n{background:var(--red)}
.scard--hot:hover{border-color:var(--ink-3)}


/* ══════════════════════════════════════════════════════════════════════════
   26  HOME · FACTORY BUILD TRACK  —  .track .stop .build .b-* .bl
   Seven stops on one rule; picking a stop swaps the layers of a single SVG.
   ══════════════════════════════════════════════════════════════════════════ */
.track{position:relative; margin-top:var(--s9)}
.track__line{position:absolute; left:0; right:0; top:29px; height:2px; background:var(--line)}
.track__fill{position:absolute; left:0; top:29px; height:2px; background:var(--red);
  transition:width 560ms var(--ease)}
.track__stops{position:relative; display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem}
.stop{display:flex; flex-direction:column; align-items:center; gap:.7rem; text-align:center;
  background:none; border:0; cursor:pointer; padding-top:0}
.stop__d{width:60px; height:60px; border-radius:50%; background:var(--surface);
  border:2px solid var(--line); display:grid; place-items:center; color:var(--text-3);
  position:relative; z-index:2; transition:all var(--dur) var(--ease)}
.stop:hover .stop__d{border-color:var(--text); color:var(--text)}
.stop[aria-selected="true"] .stop__d{background:var(--hot); border-color:var(--hot-line);
  color:#fff; transform:scale(1.06)}
.stop b{font-family:var(--display); font-weight:600; font-size:var(--f-xs); letter-spacing:.02em}
.stop span{font-size:var(--f-xs); letter-spacing:.11em; text-transform:uppercase;
  color:var(--text-3); font-weight:600}
.stop[aria-selected="true"] b{color:var(--red-ink)}

.build{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,3.5vw,3.5rem);
  align-items:center; margin-top:var(--s9); background:var(--surface-2);
  border-radius:var(--r-2xl); padding:clamp(1.5rem,3vw,3rem);
  border:1.5px solid var(--line)}
.build__art{position:relative}
.build__art svg{width:100%; height:auto}
.bl{opacity:0; transition:opacity 460ms var(--ease)}
.bl.on{opacity:1}
/* fallback: if nothing has marked a layer .on yet, show the first one so the
   diagram is never a blank box */
.build__art:not(:has(.bl.on)) .bl:first-of-type{opacity:1}
.b-sheet{fill:#fff; stroke:var(--ink); stroke-width:1.6}
.b-print{fill:none; stroke:var(--muted-2); stroke-width:1.1}
.b-foil{stroke:var(--red); stroke-width:5; stroke-linecap:round; fill:none}
.b-cut{fill:none; stroke:var(--ink); stroke-width:1.8}
.b-crease{fill:none; stroke:var(--red); stroke-width:1.3; stroke-dasharray:5 4; opacity:.75}
.b-face{stroke:var(--ink); stroke-width:1.7; stroke-linejoin:round}
.b-label{font-family:var(--display); font-weight:600; font-size:12px; fill:var(--muted-2);
  letter-spacing:.14em; text-transform:uppercase; text-anchor:middle}
.build__c h3{font-size:clamp(1.3rem,2.1vw,1.85rem); margin-top:.8rem}
.build__c p{margin-top:var(--s4); font-size:var(--f-sm); color:var(--text-2); max-width:46ch}
.build__out{margin-top:var(--s6); display:grid; gap:.1rem}
.build__out li{display:flex; align-items:center; gap:.65rem; padding-block:.7rem;
  border-bottom:1px solid var(--line); font-size:var(--f-sm)}
.build__out i{width:6px; height:6px; border-radius:50%; background:var(--red); flex:none}


/* ══════════════════════════════════════════════════════════════════════════
   27  HOME · COMPARISON TABLE + CIRCULAR PROCESS DIAL + EXPANDING PANELS
   .cmp .cmpwrap · .proc .dial .node .procpills · .xp .xpp
   ══════════════════════════════════════════════════════════════════════════ */
.cmpwrap{overflow-x:auto; scrollbar-width:none}
.cmpwrap::-webkit-scrollbar{display:none}
.cmp{border-radius:var(--r-2xl); overflow:hidden; background:var(--ink);
  padding:clamp(1.5rem,3.5vw,3.5rem); color:#fff}
.cmp table{border-collapse:separate; border-spacing:0; min-width:52rem}
.cmp th,.cmp td{padding:1.05rem 1.15rem; text-align:left; font-size:var(--f-sm);
  border-bottom:1px solid rgba(255,255,255,.09); vertical-align:top}
.cmp thead th{font-size:var(--f-xs); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.45); font-weight:600; padding-bottom:.4rem; border-bottom:0}
.cmp thead .nm{display:block; font-family:var(--display); font-weight:800; font-size:1.02rem;
  letter-spacing:-.015em; color:#fff; margin-top:.35rem; text-transform:none}
.cmp tbody th{font-size:var(--f-xs); letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.5); font-weight:600; white-space:nowrap}
.cmp td{color:rgba(255,255,255,.7)}
.cmp .us{background:rgba(227,30,37,.13); color:#fff; font-weight:600}
.cmp thead .us{background:rgba(227,30,37,.2); border-top:2px solid var(--red);
  border-radius:5px 5px 0 0; color:#FF9296}
.cmp thead .us .nm{color:#fff}
.cmp tbody tr:last-child .us{border-radius:0 0 5px 5px}
.cmp tbody tr:hover td:not(.us){background:rgba(255,255,255,.035)}

.proc{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(1.5rem,4vw,4rem);
  align-items:center}
.dial{position:relative; aspect-ratio:1/1; max-width:470px; margin-inline:auto; width:100%}
.dial svg{width:100%; height:100%}
.dial__track{fill:none; stroke:var(--line-2); stroke-width:1.6}
.dial__arc{fill:none; stroke:var(--red); stroke-width:2.6; stroke-linecap:round;
  transition:stroke-dashoffset 620ms var(--ease)}
.node{cursor:pointer}
.node circle{fill:var(--surface); stroke:var(--line); stroke-width:1.4;
  transition:all var(--dur) var(--ease)}
.node:hover circle{stroke:var(--red)}
.node[data-on] circle{fill:var(--hot); stroke:var(--hot-line); r:22}
.node path,.node line{stroke:var(--muted-2); stroke-width:1.6; fill:none;
  transition:stroke var(--dur) var(--ease)}
.node[data-on] path,.node[data-on] line{stroke:#fff}
.dial__c{position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  pointer-events:none}
.dial__c span{font-size:var(--f-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); font-weight:600}
.dial__c b{display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:-.03em; margin-top:.4rem}
.proc__card{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-2xl); padding:clamp(1.5rem,2.8vw,2.8rem); box-shadow:var(--sh1)}
.proc__card h3{font-size:clamp(1.3rem,2.1vw,1.85rem); margin-top:.9rem}
.proc__out{display:grid; grid-template-columns:1fr 1fr; gap:.2rem 2rem; margin-top:var(--s6)}
.proc__out li{display:flex; align-items:center; gap:.6rem; padding-block:.75rem;
  border-bottom:1px solid var(--line); font-size:var(--f-sm)}
.proc__out i{width:6px; height:6px; border-radius:50%; background:var(--red); flex:none}
.procpills{display:flex; flex-wrap:wrap; gap:.3rem; padding:.35rem; background:var(--surface-3);
  border-radius:999px; margin-top:var(--s8); justify-content:center}
.procpills button{display:inline-flex; align-items:center; gap:.5rem; padding:.6em 1em;
  border-radius:999px; font-size:var(--f-xs); font-weight:600; color:var(--text-2);
  white-space:nowrap; transition:all var(--dur) var(--ease)}
.procpills button:hover{color:var(--text)}
.procpills button[aria-selected="true"]{background:var(--hot); color:#fff}

.xp{display:flex; border-radius:var(--r-2xl); overflow:hidden;
  min-height:clamp(360px,44vw,500px); background:var(--surface-3)}
.xp__lead{flex:0 0 clamp(220px,25%,330px); padding:clamp(1.5rem,2.6vw,2.6rem);
  background:var(--surface-2); display:flex; flex-direction:column;
  justify-content:space-between; gap:var(--s6)}
.xpp{position:relative; display:flex; flex-direction:column; justify-content:flex-start;
  align-items:stretch; flex:0 0 78px; overflow:hidden; cursor:pointer; border:0;
  text-align:left; border-left:1px solid rgba(255,255,255,.4);
  background:color-mix(in srgb, var(--red) calc(var(--t) * 1%), var(--red-wash));
  transition:flex-basis 620ms var(--ease), flex-grow 620ms var(--ease)}
.xpp[data-on]{flex:1 1 auto}
.xpp__n{position:absolute; top:1.1rem; left:1.1rem; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--display); font-weight:700;
  font-size:.84rem; background:rgba(255,255,255,.55); color:var(--ink); z-index:3;
  transition:all var(--dur) var(--ease)}
.xpp[data-dark] .xpp__n{background:rgba(255,255,255,.22); color:#fff}
.xpp[data-on] .xpp__n{background:var(--ink); color:#fff}
.xpp__body{display:block; opacity:0; padding:clamp(1.4rem,2.4vw,2.4rem); padding-top:4.8rem;
  max-width:34rem; transition:opacity 380ms var(--ease) 180ms; position:relative; z-index:2}
.xpp[data-on] .xpp__body{opacity:1}
.xpp__eb{font-size:var(--f-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  opacity:.65}
.xpp h3{margin-top:.5rem; font-size:clamp(1.25rem,2vw,1.75rem)}
.xpp p{margin-top:.8rem; font-size:var(--f-sm); opacity:.78; max-width:40ch}
.xpp ul{margin-top:1rem; display:flex; flex-wrap:wrap; gap:.4rem}
.xpp li{font-size:var(--f-xs); font-weight:600; padding:.35em .8em; border-radius:999px;
  background:rgba(255,255,255,.55)}
.xpp[data-dark]{color:#fff}
.xpp[data-dark] li{background:rgba(255,255,255,.18)}
.xpp__art{position:absolute; right:1.2rem; bottom:.5rem; width:min(40%,250px);
  aspect-ratio:6/5; opacity:0; transition:opacity 460ms var(--ease) 220ms; z-index:1}
.xpp__art .art{position:absolute; inset:0; width:100%; height:100%;
  animation:artFloat 8s ease-in-out infinite}
.xpp[data-on] .xpp__art{opacity:1}
.xpp[data-dark]{--art-face:#fff; --art-face-2:rgba(255,255,255,.66);
  --art-face-3:rgba(255,255,255,.4); --art-line:#fff;
  --art-fine:rgba(255,255,255,.7); --art-sh:rgba(0,0,0,.16);
  --art-win:rgba(255,255,255,.8); --art-flap:#fff}
.xpp[data-dark] .a-dot{fill:var(--ink)}
.xpp[data-dark] .a-red,.xpp[data-dark] .a-redline{stroke:var(--ink)}
.xpp[data-dark] .a-red-f{fill:var(--ink)}

/* the FAQ, two columns wide */
.faq2{display:grid; grid-template-columns:1fr 1fr; gap:.7rem var(--gut)}


/* ══════════════════════════════════════════════════════════════════════════
   28  LISTING · CATEGORY INDEX  —  .crumb .bstats .jump .rsec .subh .lgrid
   The reference catalogue is a printed index: a sticky jump bar, then one
   .rsec per range, each split into .subblock groups of .lcard tiles.
   ══════════════════════════════════════════════════════════════════════════ */
.crumb{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; font-size:var(--f-xs);
  color:var(--text-2)}
.crumb a:hover{color:var(--red-ink)}
.bstats{display:flex; flex-wrap:wrap; gap:var(--s5) var(--s8); margin-top:var(--s7);
  padding-top:var(--s6); border-top:1.5px solid var(--line)}
.bstats b{display:block; font-family:var(--display); font-weight:800; font-size:1.45rem;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.bstats span{display:block; margin-top:.25rem; font-size:var(--f-xs); letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-2)}

/* the sticky range jump bar; it parks under the header */
.jump{position:sticky; top:var(--hdr-h); z-index:60; background:var(--hdr-bg);
  backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1.5px solid var(--line)}
.jump__in{display:flex; gap:.3rem; overflow-x:auto; scrollbar-width:none; padding-block:.7rem}
.jump__in::-webkit-scrollbar{display:none}
.jump a{flex:none; padding:.6em 1.05em; border-radius:999px; font-weight:600;
  font-size:var(--f-sm); color:var(--text-2); white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.jump a:hover{color:var(--text); background:var(--surface-3)}
.jump a[aria-current="true"],.jump a[aria-current="page"]{background:var(--red); color:#fff}

.rsec{padding-block:clamp(2.2rem,4.5vw,4rem); border-bottom:1.5px solid var(--line)}
.rsec__h{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:var(--s5) var(--s8)}
.rsec__h h2{font-size:clamp(1.4rem,2.7vw,2.2rem); max-width:22ch}
.rsec__m{text-align:right}
.rsec__m span{display:block; font-size:var(--f-xs); color:var(--text-2)}
.rsec__m b{display:block; margin-top:.3rem; font-family:var(--display); font-weight:800;
  font-size:1.15rem; color:var(--red); font-variant-numeric:tabular-nums}
.subblock{margin-top:var(--s8)}
.subh{display:flex; align-items:baseline; gap:var(--s4); font-size:1rem;
  padding-bottom:.65rem; border-bottom:1.5px solid var(--line)}
.subh span{font-family:var(--body); font-weight:600; font-size:var(--f-xs);
  color:var(--text-3); letter-spacing:.09em; text-transform:uppercase}

.lgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s7) var(--gut);
  margin-top:var(--s6)}
.lcard{display:block; position:relative}
.lcard .ph{aspect-ratio:4/3; border-radius:var(--r-xl); border:1.5px solid var(--line);
  overflow:hidden;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease)}
.lcard:hover .ph{transform:translateY(-2px); box-shadow:var(--sh2); border-color:var(--line-2)}
.lcard .ph img{transition:transform 700ms var(--ease)}
.lcard:hover .ph img{transform:none}
.lcard__b{margin-top:var(--s4)}
.lcard h4{font-family:var(--display); font-weight:800; font-size:1.02rem;
  letter-spacing:-.02em; line-height:1.2}
.lcard__meta{margin-top:.3rem; font-size:var(--f-xs); color:var(--text-2)}
.lcard__foot{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line)}
.lcard__p{font-family:var(--display); font-weight:800; font-size:1rem; color:var(--red-ink);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.lcard__go{font-size:var(--f-xs); font-weight:600; color:var(--text-2);
  display:inline-flex; align-items:center; gap:.35rem;
  transition:gap var(--dur) var(--ease), color var(--dur) var(--ease)}
.lcard:hover .lcard__go{gap:.6rem; color:var(--text)}
.tagpill{position:absolute; top:.7rem; left:.7rem; z-index:3; font-size:.75rem;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--surface);
  color:var(--text); padding:.35em .7em; border-radius:999px; box-shadow:var(--sh1)}
.tagpill--red{background:var(--red); color:#fff}

/* a photo carried as a background so the drawn art can stay underneath */
.lph{background-size:cover; background-position:center}
.lph.has-photo > svg.art{display:none}


/* ══════════════════════════════════════════════════════════════════════════
   29  PDP · SIZE PICKER · ADD-ONS · SIZE TABLE · NOTE · QUOTE DRAWER
   .lbl .pdp__pos .sizes .size .buy__big .addon .allsz .note .qd .qline .qtot
   ══════════════════════════════════════════════════════════════════════════ */
.lbl{font-size:var(--f-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-2)}
/* …but the header's cart/quote label was here first and stays as it was */
.qbtn .lbl{font-size:var(--f-sm); font-weight:600; letter-spacing:normal;
  text-transform:none; color:inherit}

.pdp__pos{margin-top:var(--s4); font-size:var(--f-lead); color:var(--text-2); max-width:48ch}
.sizes{display:grid; gap:.5rem; margin-top:var(--s4)}
.size{display:grid; grid-template-columns:1fr auto; gap:var(--s4); align-items:center;
  width:100%; text-align:left; padding:.85rem 1.05rem; border-radius:5px;
  border:1.5px solid var(--line); background:var(--surface);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease)}
.size:hover{border-color:var(--line-2)}
.size[aria-pressed="true"]{border-color:var(--text); background:var(--surface-2)}
.size b{font-family:var(--display); font-weight:700; font-size:var(--f-sm); display:block}
.size .d{display:block; margin-top:.15rem; font-size:var(--f-xs); color:var(--text-2);
  font-variant-numeric:tabular-nums}
.size .r{font-family:var(--display); font-weight:800; font-variant-numeric:tabular-nums;
  color:var(--red-ink); white-space:nowrap; text-align:right}
.size .r small{display:block; font-family:var(--body); font-weight:500; font-size:var(--f-xs);
  color:var(--text-2); letter-spacing:0}

.buy__big{font-family:var(--display); font-weight:800; font-size:clamp(1.9rem,3.4vw,2.6rem);
  letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums}
.buy__big small{font-family:var(--body); font-size:var(--f-sm); font-weight:500;
  color:var(--text-2); letter-spacing:0}

.addon{display:flex; align-items:flex-start; gap:.75rem; padding:.85rem 1rem;
  margin-top:var(--s4); border:1.5px solid var(--line); border-radius:5px;
  background:var(--surface); cursor:pointer; transition:border-color var(--dur) var(--ease)}
.addon:hover{border-color:var(--line-2)}
.addon input{margin-top:.2rem; accent-color:var(--red); width:17px; height:17px; flex:none}
.addon .r{margin-left:auto; font-family:var(--display); font-weight:700; color:var(--red-ink);
  font-variant-numeric:tabular-nums; white-space:nowrap}

.allsz{width:100%; border-collapse:collapse; margin-top:var(--s5); font-size:var(--f-sm)}
.allsz th{text-align:left; padding:.6rem .8rem .6rem 0; font-size:var(--f-xs); font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--text-3);
  border-bottom:1.5px solid var(--line)}
.allsz td{padding:.75rem .8rem .75rem 0; border-bottom:1px solid var(--line);
  vertical-align:top}
.allsz .n{font-variant-numeric:tabular-nums; color:var(--text-2)}
.allsz .r{text-align:right; font-variant-numeric:tabular-nums; color:var(--red-ink);
  font-weight:700; white-space:nowrap}
.allsz .na{color:var(--text-3); font-style:italic; font-weight:400}

.note{display:flex; gap:var(--s4); padding:var(--s5); background:var(--surface-2);
  border:1.5px solid var(--line); border-left:3px solid var(--red);
  border-radius:var(--r-lg); margin-top:var(--s6)}
.note svg{flex:none; color:var(--red); margin-top:2px}

/* the slide-in quote drawer — same scrim as the cart drawer (§05) */
.qd{position:fixed; inset:0 0 0 auto; width:min(92vw,26rem); background:var(--surface);
  z-index:130; transform:translateX(101%); transition:transform 380ms var(--ease);
  display:flex; flex-direction:column; box-shadow:-30px 0 70px -34px rgba(10,10,11,.5)}
.qd.on{transform:none}
.qd__top{display:flex; align-items:center; justify-content:space-between;
  padding:1rem var(--s6); border-bottom:1.5px solid var(--line); flex:none}
.qd__body{flex:1; overflow:auto; padding:var(--s5) var(--s6)}
.qd__foot{flex:none; padding:var(--s5) var(--s6); border-top:1.5px solid var(--line);
  background:var(--surface-2)}
.qline{display:grid; grid-template-columns:1fr auto; gap:.8rem; padding:.9rem 0;
  border-bottom:1px solid var(--line)}
.qline b{font-family:var(--display); font-weight:700; font-size:var(--f-sm)}
.qline span{display:block; font-size:var(--f-xs); color:var(--text-2); margin-top:.2rem}
.qline .amt{font-family:var(--display); font-weight:800; font-variant-numeric:tabular-nums;
  text-align:right}
.qline button{font-size:var(--f-xs); color:var(--text-2); text-decoration:underline;
  margin-top:.3rem}
.qline button:hover{color:var(--red-ink)}
.qtot{display:flex; justify-content:space-between; font-size:var(--f-sm); padding-block:.3rem}
.qtot.fin{border-top:1.5px solid var(--line-2); margin-top:.5rem; padding-top:.7rem;
  font-weight:600}
.qtot.fin b{font-family:var(--display); font-weight:800; font-size:1.15rem;
  color:var(--red-ink)}


/* ══════════════════════════════════════════════════════════════════════════
   31  RESPONSIVE FOR THE PORTED SECTIONS
   Same breakpoint ladder as §15. Nothing scrolls the page sideways.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:78em){
  .plain,.scen,.evi{grid-template-columns:minmax(0,1fr)}
  .dcards{grid-template-columns:minmax(0,1fr)}
  .dcard h3{max-width:26ch}
  .eblock p,.eblock .vs{max-width:52ch}
  .lgrid{grid-template-columns:repeat(3,1fr)}
  .proc{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:64em){
  .rcard--wide,.rcard--half,.rcard--third{grid-column:1/-1}
  .rcard--wide{flex-direction:column}
  .rcard--wide .rcard__art{flex:none; min-height:210px}
  .rcard--wide .rcard__b{border-left:0; border-top:1.5px solid var(--line)}
  .track__stops{grid-template-columns:repeat(4,1fr); gap:var(--s5)}
  .track__line,.track__fill{display:none}
  .build{grid-template-columns:minmax(0,1fr)}
  .lad-l,.lad-r{grid-column:1/-1}
  .lad-r{position:static}
  .faq2{grid-template-columns:minmax(0,1fr)}
  .qsteps{grid-template-columns:repeat(2,1fr)}
  .idx__bar{grid-template-columns:2.5rem minmax(0,1fr) auto; gap:var(--s4)}
  .idx__m{display:none}
  .idx__cols{grid-template-columns:minmax(0,1fr)}
  .proc__out{grid-template-columns:minmax(0,1fr)}
  .scen{gap:var(--s5)}
  .scard{padding:1.5rem}
  .fcard--a,.fcard--b{display:none}
  .xp{flex-direction:column}
  .xp__lead{flex:none}
  .xpp{flex:none; border-left:0; border-top:1px solid rgba(255,255,255,.4)}
  .xpp[data-on]{flex:none}
  .xpp__body{opacity:1; padding-top:1.4rem; padding-left:4.4rem}
  .xpp__n{top:1.2rem; left:1.2rem; width:34px; height:34px}
  .xpp__art{display:none}
}
@media (max-width:56em){
  .lgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:43.75em){
  .idx__bar{grid-template-columns:2rem minmax(0,1fr) auto; gap:.75rem; padding-block:1.05rem}
  .idx__t{font-size:1.18rem; line-height:1.15}
  .idx__p{font-size:.88rem}
  .idx__x{width:30px; height:30px}
  .idx__shots{grid-template-columns:repeat(2,1fr); gap:.5rem}
  .idx__cols{gap:var(--s5)}

  .dcards{gap:var(--s5)}
  .dcard{padding:1.35rem}
  .dcard h3{max-width:none; font-size:1.16rem}
  .dlist li{grid-template-columns:28px 1fr auto; gap:.65rem; padding:.62rem 0}
  .dlist i{width:28px; height:22px}
  .bub{max-width:100%; font-size:.86rem}
  .qsteps{grid-template-columns:minmax(0,1fr)}

  .readout{padding:1.35rem}
  .readout__big{font-size:2.5rem}
  .stage{padding:1.25rem .75rem}
  .track__stops{grid-template-columns:repeat(2,1fr); gap:var(--s5)}
  .stop__d{width:48px; height:48px}
  .build{padding:1.25rem}
  .fcard--c,.fcard--d{display:none}

  .lgrid{gap:var(--s6) var(--s4)}
  .lcard h4{font-size:.94rem}
  .rsec__h{flex-direction:column; align-items:flex-start}
  .rsec__m{text-align:left}
  .allsz th,.allsz td{padding-right:.5rem}
  .qd__top,.qd__body,.qd__foot{padding-inline:var(--s5)}
}
@media (max-width:35em){
  .lgrid{grid-template-columns:minmax(0,1fr)}
  .bstats{gap:var(--s4) var(--s6)}
  .bstats b{font-size:1.2rem}
}


/* ══════════════════════════════════════════════════════════════════════════
   32  REDUCED MOTION FOR THE PORTED SECTIONS
   §16 already flattens durations globally; these kill the looping drawings
   outright so nothing keeps moving behind the copy.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .art,.fcard,.dtag i,.typing i,.load > *,.ic .a-lift{animation:none}
  .e-pulse--fast,.e-pulse--slow,.in .e-pulse--fast,.in .e-pulse--slow{animation:none; opacity:1}
  .in .e-box,.in .e-many,.in .e-grow,.in .e-grow--b{animation:none; opacity:1; transform:none}
  .rcard:hover,.scard:hover,.lcard:hover .ph,.floater:hover{transform:none}
  .qcard:hover .a-lift,.ccard:hover .a-lift,.pcard:hover .a-lift,
  .lcard:hover .a-lift,.rcard:hover .a-lift{transform:none}
}


/* ══════════════════════════════════════════════════════════════════════════
   33  BROWSE SECTIONS · CATEGORY TILES · PRODUCT CARD v2 · COMPARE · PDP OPTS
   Appended, never edited over: every rule below either introduces a new class
   or re-states an earlier one on purpose (source order wins), so the pages that
   shipped before this section keep rendering exactly as they did.

   The one deliberate override is the photo tile. Every catalogue photo is
   460x345 — a 4:3 landscape — so every tile in the site is 'aspect-ratio:4/3'
   with 'object-fit:cover'. At the true ratio cover crops nothing at all: the
   photo fills the box edge to edge, is never letterboxed and never stretched.
   Mark the <img> up as width="1200" height="900" so the box is reserved before
   the file lands and the grid does not reflow.

     33.1  .browse  — section head (label / heading / subtext / view-all)
     33.2  .cgrid .ctile — category tile grid
     33.3  .pgrid — product grid
     33.4  .pcard v2 — 4:3 tile, floating wish, round add-to-bag
     33.5  .specgrid — PDP specification grid
     33.6  .optrow .swatch — PDP colour / board / finish chips
     33.7  responsive · reduced motion for §33
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 33.1  section head ─────────────────────────────────────────────────────
   <section class="browse">
     <div class="browse__h">
       <div>
         <p class="browse__lbl">Categories</p>
         <h2>Browse all categories</h2>
         <p>Find exactly what you are looking for.</p>
       </div>
       <a class="browse__view" href="…">View all →</a>
     </div>
     <div class="cgrid">…</div>
   </section>                                                               */
.browse{display:grid; gap:clamp(1.4rem,2.6vw,2.35rem)}
.browse__h{display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:var(--s4) var(--s8)}
.browse__h > *{min-width:0}
.browse__t{max-width:44rem}
.browse__h h2{font-size:var(--f-h2); letter-spacing:-.035em; line-height:1.02;
  margin-top:.5rem}
.browse__h h3{font-size:clamp(1.35rem,2.4vw,2rem); letter-spacing:-.03em; margin-top:.5rem}
.browse__h p{margin-top:.55rem; color:var(--text-2); font-size:var(--f-sm);
  max-width:48ch; line-height:1.6}
.browse__h .browse__lbl + h2,.browse__h .browse__lbl + h3{margin-top:.65rem}

.browse__lbl{display:inline-flex; align-items:center; gap:.55rem; margin:0;
  font-family:var(--body); font-weight:700; font-size:var(--f-xs);
  letter-spacing:.16em; text-transform:uppercase; color:var(--red-ink)}
.browse__lbl::before{content:""; width:1.7rem; height:2px; border-radius:2px;
  background:var(--red); flex:none}
.browse__lbl--grey{color:var(--text-2)}
.browse__lbl--grey::before{background:var(--line-2)}

.browse__view{display:inline-flex; align-items:center; gap:.45em; flex:none;
  font-weight:600; font-size:var(--f-sm); color:var(--text); white-space:nowrap;
  padding-bottom:.2rem; border-bottom:1.5px solid var(--line-2);
  transition:color var(--dur) var(--ease), gap var(--dur) var(--ease),
    border-color var(--dur) var(--ease)}
.browse__view:hover{color:var(--red-ink); border-color:var(--red); gap:.8em}
.browse__view svg{width:15px; height:15px; flex:none}

/* ── 33.2  category tiles ───────────────────────────────────────────────────
   <a class="ctile" href="…">
     <span class="ctile__img"><img …><span class="pcard__fallback">…</span></span>
     <span class="ctile__n">Bakery &amp; Dessert Boxes</span>
     <span class="ctile__c">6 products</span>
   </a>                                                                     */
.cgrid{display:grid; gap:clamp(1rem,2vw,1.75rem);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr))}
.cgrid--lg{grid-template-columns:repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr))}
.cgrid--sm{grid-template-columns:repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr))}

/* ── the compact directory row ────────────────────────────────────────────
   A category is a signpost, not a poster. The 4:3 art panel below gives every
   line a 190px-tall illustration, which turns a 26-line index into a wall and
   pushed /categories past 17,000px. This is the dense alternative: a small
   glyph, the name, and the one number that decides whether you click.

     <a class="drow" href="…">
       <span class="drow__i">…svg…</span>
       <span class="drow__t"><b class="drow__n">Cake Boxes</b><span class="drow__m">1 line</span></span>
       <span class="drow__r">from ₹25.00</span>
     </a>                                                                    */
.dirlist{display:grid; gap:.6rem;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 24rem), 1fr))}
.dirlist--wide{grid-template-columns:repeat(auto-fill, minmax(min(100%, 27rem), 1fr))}

/* Three roomy columns, not four cramped ones: at four, "Scodix Foiled Sweet &
   Dryfruit Boxes" had 150px to live in and was ellipsised away. A name is the
   whole point of a directory, so the column is sized to hold the longest one. */
.drow{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:.9rem; min-width:0; padding:.85rem 1rem; color:inherit;
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  transition:border-color 170ms var(--ease), background-color 170ms var(--ease)}
.drow:hover{border-color:var(--line-2); background:var(--surface-2)}
.drow:focus-visible{outline:2px solid var(--red); outline-offset:2px}

.drow__i{flex:none; width:42px; height:42px; display:grid; place-items:center;
  border-radius:10px; background:var(--surface-2); color:var(--text-2);
  transition:color 170ms var(--ease), background-color 170ms var(--ease)}
.drow__i svg{width:22px; height:22px}
.drow:hover .drow__i{color:var(--red-ink); background:var(--red-wash)}
.drow__t{min-width:0}
.drow__n{display:block; font-weight:600; font-size:.98rem; line-height:1.3;
  color:var(--text); letter-spacing:-.01em}
.drow__m{display:block; margin-top:.15rem; font-size:var(--f-xs); color:var(--text-3);
  white-space:nowrap}
.drow__r{font-size:var(--f-xs); color:var(--text-2); white-space:nowrap;
  font-variant-numeric:tabular-nums; text-align:right; align-self:center}
.drow:hover .drow__n{color:var(--red-ink)}





@media (max-width:40em){
  .drow{padding:.7rem .8rem; gap:.7rem; border-radius:10px}
  .drow__i{width:38px; height:38px}
  .drow__i svg{width:20px; height:20px}
  .drow__n{font-size:.92rem}
}

.drow--oos{opacity:.6}
.drow--oos .drow__r{color:var(--text-3)}





@media (max-width:26em){
  .drow{padding:.55rem .65rem; gap:.55rem}
  .drow__i{width:30px; height:30px}
}

.ctile{display:block; min-width:0; position:relative; text-align:center; color:inherit}
.ctile__img{display:block; position:relative; overflow:hidden; isolation:isolate;
  width:100%; aspect-ratio:4/3; border-radius:var(--r-2xl);
  border:1px solid var(--line); background:var(--surface-3);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease)}
.ctile__img img{position:absolute; inset:0; z-index:1; display:block;
  width:100%; height:100%; object-fit:cover; filter:saturate(.94) contrast(1.02);
  transition:transform var(--dur-l) var(--ease)}
.ctile:hover .ctile__img{transform:translateY(-2px); box-shadow:var(--sh2);
  border-color:var(--line-2)}
.ctile:hover .ctile__img img{transform:none}
.ctile:focus-visible .ctile__img{border-color:var(--red)}
.ctile__n{display:block; margin-top:var(--s4); font-family:var(--display);
  font-weight:600; font-size:clamp(.92rem,1.1vw,1.02rem); line-height:1.25;
  letter-spacing:-.01em; color:var(--text);
  transition:color var(--dur) var(--ease)}
.ctile:hover .ctile__n{color:var(--red-ink)}
.ctile__c{display:block; margin-top:.22rem; font-size:var(--f-xs); color:var(--text-2);
  font-variant-numeric:tabular-nums}
.ctile__img .badge{top:.7rem; left:.7rem}

/* ── 33.3  product grid ─────────────────────────────────────────────────── */
.pgrid{display:grid; gap:clamp(1rem,1.9vw,1.65rem);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr))}
.pgrid--wide{grid-template-columns:repeat(auto-fill, minmax(min(100%, 19rem), 1fr))}
.pgrid--tight{grid-template-columns:repeat(auto-fill, minmax(min(100%, 13rem), 1fr))}
.pgrid--4{grid-template-columns:repeat(auto-fit, minmax(min(100%, 14rem), 1fr))}
.pgrid + .pagination,.cgrid + .pagination{margin-top:var(--s8)}

/* ── 33.4  the product card ─────────────────────────────────────────────────
   Rendered by includes/partials/product-card.php. The photo tile keeps the
   .ph machinery (drawn fallback underneath, .is-broken when the file 404s).  */
.pcard{padding:0; border-radius:var(--r-lg)}
.pcard__media{position:relative; isolation:isolate}

.pcard__img{aspect-ratio:4/3; border-radius:0; border-bottom:1px solid var(--line);
  overflow:hidden; background:var(--surface-2)}
.pcard__img img{display:block; width:100%; height:100%; object-fit:cover}
.pcard__media .badge{top:.7rem; left:.7rem; font-size:var(--f-xs); padding:.3em .7em}

/* out of stock — dim the photo, lay a pill across it */
.pcard__oos{inset:auto; left:50%; top:50%; translate:-50% -50%; width:auto; height:auto;
  padding:.48rem 1.05rem; border-radius:999px; border:1px solid var(--line);
  box-shadow:var(--sh1); background:var(--surface);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  font-family:var(--display); font-weight:700; font-size:var(--f-xs); letter-spacing:.06em;
  text-transform:uppercase; white-space:nowrap; color:var(--text)}
.pcard__oos::before{display:none}
.pcard--oos .pcard__body{opacity:.72}
.pcard--oos .pcard__img img{filter:grayscale(.9) saturate(.35) contrast(.95); opacity:.62}

/* wishlist action, top-right of the photo */
.pcard__acts{position:absolute; top:.7rem; right:.7rem; z-index:5;
  display:grid; gap:.4rem; justify-items:center}
.pcard__acts .pcard__wish{position:static; top:auto; right:auto;
  opacity:1; transform:none}

/* round red add-to-bag, bottom-right of the photo */
.pcard__bag{position:absolute; right:.7rem; bottom:.7rem; z-index:5;
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--surface) 92%, transparent); color:var(--text);
  border:1px solid var(--line); box-shadow:var(--sh1); cursor:pointer;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease)}
.pcard__bag:hover,.pcard__bag:focus-visible{background:var(--red); border-color:var(--red); color:#fff}
.pcard__bag:active{background:var(--red-deep); border-color:var(--red-deep)}
.pcard__bag:disabled,.pcard__bag[aria-disabled="true"]{background:var(--surface-3);
  color:var(--text-3); border-color:var(--line); box-shadow:none;
  cursor:not-allowed; transform:none}
.pcard__bag.is-busy{background:var(--red); border-color:var(--red); color:transparent;
  pointer-events:none}
.pcard__bag.is-busy svg{visibility:hidden}
.pcard__bag.is-busy::after{content:""; position:absolute; width:1.05em; height:1.05em;
  border-radius:50%; border:2px solid #fff; border-top-color:transparent;
  animation:spin .7s linear infinite}

.pcard__body{padding:var(--s4) .5rem .85rem; gap:.28rem}
.pcard__name{font-family:var(--body); font-weight:600;
  font-size:clamp(1rem,1.18vw,1.1rem); line-height:1.32; margin-top:.2rem;
  letter-spacing:-.005em}
.pcard__price{padding-top:.55rem; align-items:center}
.pcard__price .price{font-family:var(--body); font-weight:700; font-size:1.05rem;
  letter-spacing:-.01em}
.pcard__price .price .xs{font-weight:500; color:var(--text-2)}
.pcard__price .price__unit{font-weight:500; color:var(--text-3)}
.pcard__price .price__unit{margin-left:.1rem}

/* ── 33.5  PDP specification grid ───────────────────────────────────────────
   Flat pairs: <dl class="specgrid"><dt class="specgrid__k">…</dt>
   <dd class="specgrid__v">…</dd>…</dl>. A wrapper carrying .specgrid__item is
   transparent to the grid, so pairs may be wrapped as well.                 */
.specgrid{display:grid; grid-template-columns:minmax(7.5rem,auto) minmax(0,1fr);
  margin:0; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--surface); font-size:var(--f-sm)}
.specgrid--2{grid-template-columns:repeat(2, minmax(7.5rem,auto) minmax(0,1fr))}
.specgrid__item{display:contents}
.specgrid__k{margin:0; padding:.72rem 1rem; background:var(--surface-2);
  border-bottom:1px solid var(--line); font-size:var(--f-xs); font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--text-2)}
.specgrid__v{margin:0; padding:.72rem 1rem; border-bottom:1px solid var(--line);
  color:var(--text); min-width:0; overflow-wrap:anywhere}
.specgrid__v b{font-weight:600}
.specgrid > :nth-last-child(1),.specgrid > :nth-last-child(2){border-bottom:0}
.specgrid__v .chip{margin:.1rem .2rem .1rem 0}

/* ── 33.6  PDP option rows — colour / board / finish ────────────────────────
   <div class="optrow">
     <div class="optrow__h"><span>Colour</span><b>Kraft Brown</b></div>
     <button class="swatch swatch--on" …>Kraft Brown</button>
   </div>                                                                    */
.optrow{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin-top:var(--s5)}
.optrow__h{flex:1 0 100%; display:flex; align-items:baseline;
  justify-content:space-between; gap:var(--s3); margin:0 0 .1rem;
  font-size:var(--f-xs); font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-2)}
.optrow__h b,.optrow__h strong{font-family:var(--display); font-weight:700;
  font-size:var(--f-sm); letter-spacing:-.01em; text-transform:none;
  color:var(--text)}
.optrow > div:not(.optrow__h),.optrow__opts{flex:1 0 100%; display:flex;
  flex-wrap:wrap; gap:.5rem}

.swatch{position:relative; display:inline-flex; align-items:center; gap:.45rem;
  padding:.52em .95em; border-radius:999px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--surface); color:var(--text);
  font-family:var(--body); font-size:var(--f-xs); font-weight:600; line-height:1.2;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease)}
.swatch input{position:absolute; opacity:0; width:0; height:0; pointer-events:none}
.swatch:hover{border-color:var(--text); transform:none}
.swatch--on,.swatch[aria-pressed="true"],.swatch.is-on,
.swatch:has(input:checked){border-color:var(--red); background:var(--red-wash);
  color:var(--red-ink); box-shadow:0 0 0 3px var(--red-wash)}
.swatch--on:hover,.swatch[aria-pressed="true"]:hover{border-color:var(--red)}
.swatch--off,.swatch:disabled,.swatch[aria-disabled="true"],
.swatch:has(input:disabled){opacity:.45; cursor:not-allowed; transform:none;
  text-decoration:line-through}
.swatch--lg{font-size:var(--f-sm); padding:.62em 1.15em}
.swatch small{font-weight:500; color:var(--text-2)}
.swatch--on small,.swatch[aria-pressed="true"] small{color:var(--red-ink)}


/* ── 33.7b  responsive ──────────────────────────────────────────────────── */
@media (max-width:43.75em){
  .browse{gap:1.25rem}
  .browse__h{gap:var(--s4)}
  .browse__h p{font-size:var(--f-xs)}
  .cgrid{gap:.85rem; grid-template-columns:repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr))}
  .cgrid--lg{grid-template-columns:repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr))}
  .ctile__img{border-radius:var(--r-xl)}
  .ctile__n{margin-top:.6rem; font-size:.86rem}
  .ctile__c{font-size:.7rem}

  .pgrid,.pgrid--wide,.pgrid--tight,.pgrid--4{gap:.7rem;
    grid-template-columns:repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr))}
  .pcard{padding:.4rem .4rem .1rem; border-radius:var(--r-lg)}
  .pcard__img{border-radius:var(--r-lg)}
  .pcard__body{padding:.7rem .35rem .7rem; gap:.2rem}
  .pcard__price{padding-top:.45rem}
  .pcard__moq{display:none}
  .pcard__acts{top:.4rem; right:.4rem; gap:.3rem}
  .pcard__bag{width:36px; height:36px; right:.45rem; bottom:.45rem}
  .pcard__bag svg{width:16px; height:16px}
  .pcard__oos{padding:.4rem .8rem; font-size:var(--f-xs)}
  .specgrid{grid-template-columns:minmax(6rem,auto) minmax(0,1fr); font-size:var(--f-xs)}
  .specgrid--2{grid-template-columns:minmax(6rem,auto) minmax(0,1fr)}
  .specgrid__k,.specgrid__v{padding:.6rem .75rem}
}

/* very small phones — one card across, and the minimum comes back with the
   room to show it (this restates the §15 rule the block above would shadow) */
@media (max-width:26em){
  .pgrid,.pgrid--wide,.pgrid--tight,.pgrid--4{grid-template-columns:minmax(0,1fr)}
  .cgrid{grid-template-columns:repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr))}
  .pcard__moq{display:inline}
}

/* ── 33.7c  reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .ctile:hover .ctile__img,.ctile:hover .ctile__img img,
  .pcard__bag:hover{transform:none}
  .pcard__bag.is-busy::after{animation:none}
}

/* ── 33.7d  print ───────────────────────────────────────────────────────── */
@media print{
  .pcard__bag,.pcard__acts{display:none !important}
}


/* ══════════════════════════════════════════════════════════════════════════
   34  MOBILE-FIRST REPAIR · ALIGNMENT · FLAT CORNERS
   Appended last on purpose: every rule here either introduces a class the
   pages already ask for, or deliberately re-states an earlier one so source
   order settles it without a single !important.

   THE THREE THINGS THIS SECTION IS FOR
     · corners        every box tops out at 5px (§01 tokens now read 4/5/5/5);
                      pills, chips, avatars and round icon buttons keep 999px
                      or 50% because flattening those looks broken, not flat.
     · alignment      cards in a row are equal height and their last line —
                      price, count, footer — sits on one rule across the row.
     · mobile         320 / 360 / 390 / 414 first, then 768, then 1024+.
                      Nothing may scroll the page sideways at any width.

   THE BREAKPOINT LADDER (max-width, the house ordering)
     75em    1200px   wide desktop — mega menu and side rails narrow
     64em    1024px   the desktop nav folds into the drawer; one column
     53.75em  860px   tablet — three cards across, forms go single column
     43.75em  700px   large phone / small tablet — two cards, compact chrome
     35em     560px   phone
     26em     416px   THE PHONE TIER: 320-414 all land here
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 34.1  overflow guards ──────────────────────────────────────────────────
   The page never scrolls sideways. Wide things scroll inside their own box.
   §02 already sets overflow-x:clip on <body>; these fix the causes so that
   clip never actually has to do anything.                                  */
img,svg,video,canvas,iframe,table{max-width:100%}
.wrap,.wrap--narrow,.wrap--tight{max-width:100%}

/* long unbroken tokens — SKUs, order numbers, emails, URLs — must break */
body{overflow-wrap:break-word}
a[href^="mailto:"],a[href^="tel:"],a[href^="http"],
code,kbd,samp,.break,.ordhead__n,.citem__name,.specgrid__v,
.alert > span,.empty p,.mobnav__foot,.ft__addr{overflow-wrap:anywhere}

/* flex and grid children refuse to shrink below their content unless told */
.row > *,.head > *,.head__a > *,.toolbar > *,.toolbar__act > *,
.browse__h > *,.buy__row > *,.ordhead > *,.rsec__h > *,
.grid > *,.pgrid > *,.cgrid > *,.lgrid > *,.rbento > *,.scen > *,
.dcards > *,.evi > *,.plain > *,.bandgrid > *,.addrgrid > *,
.stats > *,.ordgrid > *,.checks > *,.qsteps > *,.ft__cols > *{min-width:0}
.dlist li > span,.size > :first-child,.qline > :first-child,
.summary__row > :first-child,.totals div > :first-child,
.build__out li,.proc__out li,.rlist li,.checks li,
.track__stops > *,.stop,.subh > *,.bstats > *,.eblock,.pblock,
.lad-l,.lad-r,.build__c,.build__art,.idx__bar > *{min-width:0}

/* every table that is not already inside .tablewrap has to wrap its own text */
.slabs th,.slabs td,.spec th,.spec td,.allsz th,.allsz td,
.table th,.table td{overflow-wrap:anywhere}
.spec th,.allsz th{overflow-wrap:normal}


/* ── 34.2  flat corners, finished ───────────────────────────────────────────
   The tokens carry the boxes. These are the form controls that had opted out
   of the token scale with a hand-written pill radius: a control is an input,
   not a pill, so it flattens with everything else. Real pills — .btn .chip
   .tag .badge .pills .status .cnt .save .swatch — are untouched.           */
.stepper{border-radius:5px}
.citem__qty{border-radius:5px}
.search input{border-radius:5px}
.sresults{border-radius:5px}
.skip{border-radius:0 0 5px 5px}
.toast{border-radius:5px}
.fakeinput{border-radius:5px}

/* the drawers are boxes too: square where they meet the viewport edge */
.mobnav,.cartdrawer,.filters,.qd{border-radius:0}


/* ── 34.3  PDP — the buy panel stops moving ────────────────────────────────
   It used to be position:sticky, so it slid up and down the page while you
   were reading and covered the copy on a short screen. It is a plain, static,
   bordered card now — that is the whole of the "it moves" complaint.

   product.php ships its own layout for the panel's insides. Everything below
   is either the de-stickying (which that page wants too) or a fallback for
   any page still using the plain .buy__line / .buy__row markup, and it is
   deliberately kept at low specificity so a page-level rebuild always wins:
   no bleeding strips, no negative margins, nothing to knock out of line.  */
.buy{position:static; bottom:auto; z-index:auto;
  margin-top:var(--s6); margin-inline:0;
  display:grid; gap:var(--s4); align-content:start;
  padding:clamp(1.1rem,2.1vw,1.6rem);
  background:var(--surface); border:1px solid var(--line); border-radius:5px;
  box-shadow:none}
.buy > *{min-width:0}
.buy > div:not([class]){display:contents}   /* a bare wrapper costs no gap */
.buy .save{margin-top:0}
.buy--out{border-color:var(--red-tint); background:var(--red-wash)}
.buy__note{color:var(--text-2)}

/* the fallback rows */
.buy__line{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s3) var(--s4); flex-wrap:wrap; font-size:var(--f-sm)}
.buy__row{display:flex; align-items:center; flex-wrap:wrap; gap:.6rem}
.buy__row .stepper{flex:0 0 auto; align-self:stretch}
.buy__row .stepper input{width:5rem; font-size:1.1rem}
.buy__row .btn{flex:1 1 10rem; min-width:0}
.buy__row .btn--out{flex:0 1 auto; padding-inline:1.15em}




/* ── 34.4  alignment — equal-height cards, footers on one rule ──────────────
   Never a fixed height: a flex column plus margin-top:auto on the last row,
   so a two-line name pushes the card, not the price.                       */
.pcard{height:100%}
.pcard__body{display:flex; flex-direction:column; flex:1 1 auto; min-width:0}
.pcard__name{min-width:0}
.pcard__price{margin-top:auto}

/* category tile — reserve two lines for the name so the counts rule off */
.ctile{display:flex; flex-direction:column; height:100%}
.ctile__img,.ctile__ico{flex:none}
.ctile__n{min-height:2.5em}
.ctile__c{margin-top:auto; padding-top:.22rem}

/* catalogue index tile */
.lcard{display:flex; flex-direction:column; height:100%}
.lcard > .ph,.ccard > .ph,.qcard > .ph{flex:none}
.lcard__b{display:flex; flex-direction:column; flex:1 1 auto; min-width:0;
  margin-top:var(--s4)}
.lcard__foot{margin-top:auto}

/* the quiet tiles */
.ccard,.qcard{display:flex; flex-direction:column; height:100%}
.ccard__subs{margin-top:auto; padding-top:var(--s4)}
.rcard,.scard,.dcard,.card--lift{height:100%}

/* section heads: title left, action right, and a clean stack when it wraps
   (the stack itself is in §34.9 — .cartlist__h and .variants__h keep the
   baseline alignment they were built with) */
.browse__view{align-self:flex-end}

/* One gutter, one measure. The category grid and the product grid sit in
   consecutive sections on the home page, so they use the same gap or their
   columns visibly disagree with each other. */
.cgrid,.cgrid--lg,.cgrid--sm,.pgrid,.pgrid--wide,.pgrid--tight,.pgrid--4{
  gap:var(--gut)}
.sec > .wrap,.sec--sm > .wrap,.sec--xs > .wrap{min-width:0}


/* ── 34.5  form controls — 16px on touch, so iOS never zooms ────────────── */
@media (max-width:64em){
  .input,.select,textarea.input,.search input,.stepper input,.citem__qty,
  .filters__price .input,.input--sm,.select--sm,
  input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
  input[type="search"],input[type="number"],input[type="password"],
  input[type="date"],select,textarea{font-size:16px}
  .input--sm,.select--sm{padding:.62em .85em}
  textarea.input{min-height:7rem}
}


/* ── 34.6  tap targets — 44x44 minimum on touch ─────────────────────────────
   Where 44px would wreck the drawing (the heart and the bag floating on a
   product photo) the visible control keeps its size and an invisible
   pseudo-element carries the hit area instead.                             */
@media (max-width:64em){
  .btn{min-height:44px}
  .btn--sm{min-height:44px}
  .iconbtn{width:44px; height:44px}
  .iconbtn--sm{width:44px; height:44px}
  .burger{width:44px; height:44px}
  .qbtn{min-height:44px; min-width:44px; justify-content:center; padding-inline:.35rem}
  .pagination__link{min-width:44px; height:44px}
  .pills button,.pills a,.procpills button,.jump a,
  .acct__menu a,.acct__link{min-height:44px;
    display:inline-flex; align-items:center; justify-content:center}
  .acct__menu a,.acct__link{justify-content:flex-start; width:100%}
  a.chip,button.chip,.quick button,.swatch{min-height:44px}
  .filters label,.filters a.f-link,.acctnav a{min-height:44px;
    display:flex; align-items:center}
  .stepper button{min-width:44px; min-height:44px}
  .citem__step{width:38px; height:38px}
  .sresult{min-height:52px}
  .social a{width:44px; height:44px}

  /* Invisible 44px hit areas under the small floating controls. The heart
     and the bag are already position:absolute, which makes them their own
     containing block — re-declaring position:relative on them would strand
     their top/right offsets, so only the statically placed ones get it. */
  .pcard__acts .pcard__wish,.citem__step,.alert__x,.toast__x{position:relative}
  .pcard__wish::before,.pcard__bag::before,.citem__step::before,
  .alert__x::before,.toast__x::before{content:""; position:absolute;
    left:50%; top:50%; translate:-50% -50%; width:44px; height:44px}
}


/* ── 34.7  1024px and down — header, drawers, safe areas ──────────────────
   --hdr-h is what every sticky offset reads (.jump parks on it, and so does
   scroll-padding-top), so it has to match the header the browser actually
   paints: a 44px control plus 2 x .8rem of padding is 69.6 -> 70.          */
@media (max-width:64em){
  :root{--hdr-h:70px}

  .hdr__top{gap:var(--s4); flex-wrap:nowrap}
  .brand{flex:0 1 auto; min-width:0}
  .brand__w{min-width:0; overflow:hidden}
  .brand b,.brand__w > span{white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis}
  .hdr__act{flex:none; gap:.4rem}

  /* the account menu must not run off the right edge on a narrow phone */
  .acct__menu{min-width:min(16rem,calc(100vw - 1.5rem)); max-width:calc(100vw - 1.5rem)}

  /* drawers: keep the scroll inside, and clear the home indicator */
  .mobnav,.cartdrawer,.filters,.qd{overscroll-behavior:contain}
  .mobnav__body{padding-bottom:calc(var(--s8) + env(safe-area-inset-bottom))}
  .cartdrawer__body{padding-bottom:var(--s4)}
  .cartdrawer__foot,.qd__foot{padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom))}
  .filters{padding-bottom:calc(var(--s8) + env(safe-area-inset-bottom))}
  .toasts{bottom:calc(var(--gut) + env(safe-area-inset-bottom))}

  /* the header nav row is gone at this width; the jump bar takes its place */
  .jump__in{padding-block:.5rem}
}

/* the desktop nav between 1024 and 1200 has more links than room */
@media (min-width:64.0625em) and (max-width:75em){
  .hdr__nav{overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}
  .hdr__nav::-webkit-scrollbar{display:none}
  .hdr__nav > a,.mtrig,.hdr__nav .right{flex:none}
}


/* ── 34.8  860px — tablet (768 lands here) ────────────────────────────────
   Three product cards across, not two: at 768 a 15.5rem minimum leaves two
   very wide tiles and a lot of nothing.                                    */
@media (max-width:53.75em){
  .pgrid,.pgrid--wide,.pgrid--4{
    grid-template-columns:repeat(auto-fill, minmax(min(100%, 13rem), 1fr))}
  .cgrid--lg{grid-template-columns:repeat(auto-fill, minmax(min(100%, 12rem), 1fr))}
  .ft__cols{gap:var(--s7) var(--s5)}
  .specgrid--2{grid-template-columns:minmax(6.5rem,auto) minmax(0,1fr)}
  .buy__row .btn--out{flex:1 1 8rem}
}


/* ── 34.9  700px — large phone ─────────────────────────────────────────── */
@media (max-width:43.75em){
  :root{--hdr-h:64px}

  .hdr__act{gap:.3rem}
  .iconbtn{width:44px; height:44px}

  /* section heads stack, and the "View all" link sits under the copy */
  .browse__h,.head,.ordhead{flex-direction:column; align-items:flex-start;
    gap:var(--s4)}
  .browse__view,.head__a{align-self:flex-start}
  .head__a{width:100%}
  .browse__view{margin-top:.1rem}

  /* the buy panel keeps its shape but the CTA owns a full line */
  .buy{margin-top:var(--s5)}
  .buy__row .stepper{display:flex; flex:1 1 100%; justify-content:space-between}
  .buy__row .stepper input{flex:1; width:auto}
  .buy__row .btn,.buy__row .btn--out{flex:1 1 100%}

  /* two tiles across on a large phone — 10.5rem is the §33 minimum, restated
     here so this block does not shadow it with the 13rem tablet value */
  .pgrid,.pgrid--wide,.pgrid--tight,.pgrid--4{gap:.7rem;
    grid-template-columns:repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr))}

  /* tables that have no .tablewrap of their own still have to fit */
  .slabs th,.slabs td,.slabs caption,
  .spec th,.spec td,.allsz th,.allsz td{font-size:.82rem}
  .spec th{width:40%}

  /* long CTA labels wrap rather than push the page */
  .btn{white-space:normal}
  .btn--block,.btn--wide{min-width:0; width:100%}

  /* chips and quick picks get room to breathe */
  .substrip{padding-bottom:var(--s4)}
  .trust span{white-space:normal}

  /* footer columns: two up, then the brand block full width */
  .ft__cols{column-gap:var(--s4)}

  /* the timeline and stat rows line up on one left rule */
  .stats > div{padding-left:.75rem}
}


/* ── 34.10  416px — THE PHONE TIER (320 / 360 / 390 / 414) ────────────────
   Everything below is measured against a 320px viewport: a 288px .wrap.    */
@media (max-width:26em){
  /* HEADER — at 320 the wordmark plus four controls does not fit, so the
     mark carries the brand and the drawer header says the name in full. */
  .brand__w{display:none}
  .brand img{width:36px; height:36px}
  .hdr__top{gap:.5rem; padding-block:.55rem}
  .hdr__act{gap:.25rem}
  .qbtn{padding-inline:.25rem; gap:.3rem}
  .cnt{min-width:20px; height:20px; font-size:.75rem}

  /* TWO TILES ACROSS — an explicit pair, not an auto-fill that might give
     one enormous card at 414 and two thin ones at 415. §15/§33 both fall
     back to auto-fill here, so this restates the last word.               */
  .grid,.grid--wide,.grid--3,.grid--4,
  .pgrid,.pgrid--wide,.pgrid--tight,.pgrid--4{gap:.6rem;
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--2{grid-template-columns:minmax(0,1fr)}
  .cgrid,.cgrid--lg,.cgrid--sm{gap:.6rem;
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .lgrid{grid-template-columns:minmax(0,1fr)}
  .pcard__desc{display:none}
  .pcard__moq{display:inline}

  .pcard{padding:.4rem .4rem .1rem}
  .pcard__body{padding:.7rem .4rem .75rem; gap:.18rem}
  .pcard__name{font-size:.92rem; line-height:1.2}
  .pcard__price{padding-top:.45rem}
  .pcard__price .price{font-size:.95rem}
  .pcard__bag{width:34px; height:34px; right:.4rem; bottom:.4rem}
  .pcard__acts{top:.4rem; right:.4rem}
  .ctile__n{font-size:.84rem; min-height:2.4em}
  .ctile__c{font-size:.68rem}

  /* FORMS — one column, full-width actions, nothing side by side */
  .fields,.fields--2,.fields--3{grid-template-columns:minmax(0,1fr)}
  .form__act{flex-direction:column; align-items:stretch}
  .form__act .btn{width:100%}
  .filters__price{flex-wrap:wrap}
  .filters__price .input{flex:1 1 7rem; min-width:0}
  .input-group{flex-wrap:wrap}
  .input-group .input{flex:1 1 100%}

  /* CART / CHECKOUT */
  .citem{grid-template-columns:56px minmax(0,1fr); gap:.7rem; padding:.7rem}
  .citem__img{width:56px; height:56px}
  .citem__ctl{gap:.3rem}
  .citem__qty{width:3.2rem}
  .citem__rm{margin-left:0}
  .summary{padding:1rem}
  .summary__row,.summary__tot,.totals div{gap:var(--s3)}
  .costep__h{gap:.55rem}

  /* PDP */
  .vlist{gap:.4rem}
  .vchip{flex:1 1 100%; min-width:0}
  .gal__thumbs{grid-auto-columns:minmax(64px,1fr)}
  .quick{gap:.35rem}
  .quick button{flex:1 1 auto}

  /* CHROME */
  .pagination{gap:.3rem}
  .pagination__link{min-width:44px; height:44px; padding-inline:.5rem}
  .toasts{left:.6rem; right:.6rem}
  .crumbs{font-size:var(--f-xs)}
  .tag,.chip{max-width:100%}

  /* the drawers take the whole screen and the close button stays reachable */
  .mobnav,.cartdrawer,.filters,.qd{width:100%}
  .mobnav__top,.cartdrawer__top,.qd__top{padding-inline:1rem}
  .mobnav__body,.cartdrawer__body{padding-inline:1rem}
  .cartdrawer__foot,.qd__foot{padding-inline:1rem}

  /* FOOTER — the phone footer is laid out in one place, §34.15 below. */
  .social{flex-wrap:wrap}

  /* HOME + ABOUT long-form pieces */
  .band,.readout,.stage,.build,.proc__card,.scard,.dcard{padding:1.15rem 1rem}
  .bandgrid{gap:var(--s5)}
  .acc__btn{padding:1rem 1.05rem; font-size:1rem}
  .acc__pan p{padding:0 1.05rem 1.05rem}
  .idx__bar{grid-template-columns:1.6rem minmax(0,1fr) auto; gap:.6rem}
  .idx__t{font-size:1.05rem}
  .hero__cta .btn{width:100%}
  .mq span{font-size:.92rem; gap:var(--s3)}
  .mq__t{gap:var(--s6)}
}


/* ── 34.10b  340px and under — one card across ────────────────────────────
   iPhone SE and the 320px floor: a pair of 138px tiles is too tight to read,
   so the grid gives up the second column and the description comes back.  */
@media (max-width:21.25em){
  .grid,.grid--wide,.grid--2,.grid--3,.grid--4,
  .pgrid,.pgrid--wide,.pgrid--tight,.pgrid--4,
  .cgrid,.cgrid--lg,.cgrid--sm{grid-template-columns:minmax(0,1fr)}
  .pcard__desc{display:block}
  .pcard__name{font-size:1rem}
  .pcard__price .price{font-size:1.02rem}
  .ctile__n{font-size:.92rem}
  .stats{grid-template-columns:minmax(0,1fr)}
  .idx__shots{grid-template-columns:minmax(0,1fr)}
  .qsteps,.proc__out,.faq2{grid-template-columns:minmax(0,1fr)}
}


/* ── 34.11  the classes the pages ask for that had no rule yet ───────────── */

/* index.php — the drawn category tile: an icon, never a photograph */
.ctile__img--art{background:radial-gradient(74% 64% at 50% 42%,
  var(--red-wash) 0%, var(--surface-2) 76%)}
.ctile__img--art > .art,.ctile__ico > .art{inset:10%; width:auto; height:auto;
  animation:none}
.ctile:hover .a-lift{transform:translateY(-3px)}

/* the same tile built from a bare line icon instead of the drawn box */
.ctile__ico{display:grid; place-items:center; position:relative; width:100%;
  aspect-ratio:4/3; border-radius:5px; border:1px solid var(--line);
  background:radial-gradient(74% 64% at 50% 42%,
    var(--red-wash) 0%, var(--surface-2) 76%); overflow:hidden;
  color:var(--red-ink);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease), color var(--dur) var(--ease)}
.ctile__ico > svg,.ctile__img > svg:not(.art){width:clamp(34px,32%,58px);
  height:auto; stroke-width:1.4}
.ctile:hover .ctile__ico{transform:none; box-shadow:var(--sh2);
  border-color:var(--line-2); color:var(--red)}

/* 404 / 500 / wishlist — the line of links under an empty state */
.empty__cta{display:flex; flex-wrap:wrap; justify-content:center;
  align-items:center; gap:var(--s3); margin-top:var(--s2)}
.empty__cta .btn{flex:0 1 auto}

/* wishlist — the remove form that wraps the heart on a tile */
.pcard__wishform{display:contents}



/* ── 34.13  reduced motion for §34 ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .ctile:hover .ctile__ico,.ctile:hover .a-lift{transform:none}
}


/* ── 34.14  print for §34 ───────────────────────────────────────────────── */
@media print{
  .ctile__ico,.ctile__img--art{border:1pt solid #999 !important}
}


/* ── 34.15  verification pass — the targets the §34.6 sweep missed ─────────
   Measured in a real engine at 320 / 360 / 390 / 414 / 768 / 1024 / 1280,
   not by reading the file. Everything below is a control the finger has to
   land on that still came back under 44px, plus the one grid child that had
   no rule at all.                                                          */

/* the results column of the catalogue shell. It is the minmax(0,1fr) track
   of .listing, and a grid item still takes its content-based minimum unless
   it is told otherwise — so the toolbar and the card grid could push it. */
.listing__main{min-width:0}

@media (max-width:64em){
  /* form controls landed on 43px — one pixel short of the rule */
  .input,.select,.input--sm,.select--sm,.sortbar .select,
  input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
  input[type="search"],input[type="number"],input[type="password"],
  input[type="date"],select{min-height:44px}
  .sortbar,.sortbar .select{min-height:44px}

  /* the logo, the "View all" link and the standalone arrow CTAs are the
     primary way out of a section on a phone — they were 22-36px tall */
  .brand{min-height:44px}
  .arrow,.browse__view{min-height:44px}

  /* footer nav columns (bare <ul><li><a>) and the log-out button */
  .ft__cols .fc2 li a,.ft__link{min-height:44px; min-width:44px;
    display:inline-flex; align-items:center}
  .ft__cols .fc2 li{display:flex}

  /* the subcategory links on the category index are the main way into a
     range on a phone, and they were 16px tall. They wrap side by side, so
     the row count is what grows, not one line per link. */
  .ccard__subs a{min-height:44px; display:inline-flex; align-items:center}

  /* saved-address actions on /account — an unclassed link and an unclassed
     submit button, reached through their container */
  .addr__act a,.addr__act button{min-height:44px;
    display:inline-flex; align-items:center}

  /* a checkbox row is tapped on the label, not on the 18px box */
  .check{min-height:44px; align-items:center}
  .check--top{align-items:flex-start; padding-block:.6rem}

  /* the show-password eye sits inside the field, so it keeps its 34px
     drawing and takes its hit area from a centred pseudo-element */
  .pwd__eye{position:absolute}
  .pwd__eye::before{content:""; position:absolute; left:50%; top:50%;
    translate:-50% -50%; width:44px; height:44px}
}


/* ── 34.16  second verification pass — measured in a real engine ────────────
   Chromium, 320 / 360 / 390 / 414 / 768 / 1024 / 1280, on every public page
   plus the four behind auth. document.scrollWidth never exceeded the viewport
   at any of them, no box computed a radius above 5px and no deliberate pill
   or circle had been flattened. What follows is everything the sweep in
   §34.6 / §34.15 still left under 44px that is a CONTROL rather than a link
   inside a sentence — breadcrumb trails and links set in running prose keep
   their type, because padding a word inside a paragraph out to 44px breaks
   the line box it lives in and is not what the rule is asking for.        */
@media (max-width:64em){

  /* /cart — "Remove" measured 56x20. The line already carries 38px steppers
     with a 44px pseudo hit area (§34.6), so this uses the same device rather
     than growing the control and unbalancing the row. */
  .citem__rm{position:relative}
  .citem__rm::before{content:""; position:absolute; left:50%; top:50%;
    translate:-50% -50%; width:100%; min-width:44px; height:44px}

  /* /cart — the line's product link was 17px tall. A centred strip, not
     padding: the name sits in a .28rem grid gap above the options line, so
     growing the box would push the whole line taller on every phone. */
  a.citem__name{position:relative}
  a.citem__name::after{content:""; position:absolute; left:0; right:0; top:50%;
    translate:0 -50%; height:44px}

  /* /account — "Edit" / "Delete" were 44px tall but only 22px wide. They sit
     in a .5rem flex row, so two 44px targets still fit a 288px card. */
  .addr__act a,.addr__act button{min-width:44px; justify-content:center}

  /* /checkout — "Back to the cart" and "order terms" are the way out of a
     step, and both measured 14px tall. */
  .costep__foot a{min-height:44px; display:inline-flex; align-items:center}

  /* a .tag that is a link is a control — the PDP eyebrow is the only way back
     to the range from the top of the page. The static .tag label is left
     alone: it is not clickable and 44px would bloat every card head. */
  a.tag{min-height:44px}

  /* /categories — the range headings are the primary way into a line on a
     phone and were 16px tall. .subh is a baseline-aligned flex row, so the
     hit area is a strip rather than padding: padding would drag the count
     off the heading's baseline. */
  .subh > a{position:relative}
  .subh > a::after{content:""; position:absolute; left:0; right:0; top:50%;
    translate:0 -50%; height:44px}
}

/* Category tiles: the caption has to belong to the tile above it, not to the
   tile below. At the phone tier .cgrid dropped to a .6rem gap in BOTH axes,
   which put the count line 9.6px from the next row's artwork and 9px from its
   own name — the eye then groups the caption downwards and the section reads
   as if the boxes do not line up. The columns stay tight; the rows open up. */
@media (max-width:26em){
  .cgrid,.cgrid--lg,.cgrid--sm{gap:1.5rem .6rem}
}


/* ══════════════════════════════════════════════════════════════════════════
   34.15  THE PHONE FOOTER  (<= 640px)
   One tall stack of link groups made the footer the single tallest thing on
   a phone — 2434px at 390, more than three screens of scrolling past the
   content the reader actually came for. The four nav groups pair up two
   across, the brand block keeps the full width above them, and the vertical
   rhythm inside a list comes from the 44px tap target alone instead of the
   tap target PLUS a margin on every row.

   Everything here is inside the query, so the desktop footer (§13) is
   untouched. It sits after §34.10/§34.11 deliberately: those blocks carry
   the same selectors at the same specificity and the last one wins.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:40em){
  .ft{padding-block:var(--s7) var(--s5); margin-top:var(--s7)}

  /* two equal columns; the brand block spans both */
  .ft__cols{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6) var(--s4)}
  .fc4{grid-column:1 / -1}
  .fc2{grid-column:auto}

  /* quieter headings, and a list whose rows touch */
  .ft h4{font-size:var(--f-xs); letter-spacing:.1em; line-height:1.4}
  .ft ul{margin-top:.25rem}
  .ft li + li{margin-top:0}
  .ft__cols .fc2 li a,.ft__link{font-size:.78rem; line-height:1.35;
    min-height:44px; padding-block:.3rem}

  /* the brand block: mark, one short paragraph, the two actions side by side */
  .ft__brand img{width:34px; height:34px}
  .ft__brand b{font-size:.86rem}
  .ft__blurb{margin-top:var(--s4); font-size:.78rem; line-height:1.55; max-width:none}
  .wa-box{margin-top:var(--s4); gap:.45rem}
  .wa-box .btn{flex:1 1 auto; min-width:0}
  .ft__addr{margin-top:var(--s4); font-size:.78rem; line-height:1.5}
  .ft__hours{margin-top:var(--s3); font-size:.78rem; line-height:1.5}
  .social{margin-top:var(--s4); gap:.4rem}

  /* the legal strip: three short lines, compact, under the columns */
  .ft__end{margin-top:var(--s6); padding-top:var(--s4); gap:.2rem;
    flex-direction:column; align-items:flex-start; font-size:var(--f-xs); line-height:1.5}
}

/* ══════════════════════════════════════════════════════════════════════════
   CARD CORNERS
   The panels and sections keep the generous radius the design was drawn with.
   Product and category tiles are the exception: at 26px a grid of them reads
   bubbly, so they take --r-card (10px) — softened, not squared off.
   ══════════════════════════════════════════════════════════════════════════ */
.pcard,
.pcard__img,
.ctile__img,
.cmpbar__item{border-radius:var(--r-card)}

/* The image sits inside the card, so its top corners follow the card and its
   bottom edge stays square against the body. */
.pcard__img{border-radius:var(--r-card) var(--r-card) 0 0}


/* ══════════════════════════════════════════════════════════════════════════
   35  PAGED REGIONS + SKELETON SHIMMER
   Every block that pages without a full reload is wrapped in a container
   carrying data-paginate="<id>". app.js swaps that container's innerHTML for
   the same container out of the fetched document, so the id has to be unique
   within a document and stable from page to page.

   While the fetch is in flight the live grid is hidden and a skeleton of the
   same shape is put in its place — grey blocks where the cards or the rows
   will land, with one soft highlight travelling across them. Calm on purpose:
   one 1.2s pass, no pulsing, no bouncing. Under prefers-reduced-motion the
   highlight stops moving and simply sits there.
   ══════════════════════════════════════════════════════════════════════════ */
[data-paginate]{scroll-margin-top:calc(var(--hdr-h) + 1rem)}
[data-paginate]:focus{outline:none}
[data-paginate][aria-busy="true"] .pagination{opacity:.45; pointer-events:none}
[data-paginate] .pagination{transition:opacity var(--dur) var(--ease)}

.skeleton{--sk-bg:var(--g100); --sk-bar:var(--g150)}
.sk{position:relative; overflow:hidden; background:var(--surface);
  border:1px solid var(--line)}
.sk::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 28%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 72%);
  transform:translateX(-100%); animation:skShimmer 1.2s var(--ease) infinite}
.sk__b{display:block; height:.62rem; border-radius:5px; background:var(--sk-bar)}
.sk__b--w{width:80%} .sk__b--m{width:56%} .sk__b--s{width:34%}

/* a product tile: 4:3 photo, an eyebrow, a name, a price line */
.sk--card{border-radius:var(--r-2xl); padding:.55rem .55rem 1.05rem;
  display:grid; gap:.5rem; align-content:start}
.sk--card .sk__img{display:block; width:100%; aspect-ratio:1/1; margin-bottom:.4rem;
  border-radius:var(--r-xl); background:var(--sk-bg)}
.sk--card .sk__b{margin-inline:.35rem}

/* a directory row: glyph, name over meta, rate */
.sk--row{border-radius:12px; padding:.85rem 1rem; display:grid;
  grid-template-columns:42px minmax(0,1fr) 4rem; gap:.9rem; align-items:center}
.sk--row .sk__ico{display:block; width:42px; height:42px; border-radius:10px;
  background:var(--sk-bg)}
.sk--row .sk__t{display:grid; gap:.45rem; min-width:0}

@keyframes skShimmer{from{transform:translateX(-100%)} to{transform:translateX(100%)}}

/* ── a photograph that has not arrived yet ─────────────────────────────────
   Every picture on this site is a real file over the network, and on a phone
   connection it lands well after the text around it. Until it does, the frame
   shimmered nothing: it was either blank or, worse, collapsed and then shoved
   the page around when the file appeared. The shimmer is painted as the
   image's own background, so it needs no wrapper and no markup change — the
   moment the file decodes it covers its own background and app.js drops the
   class. Images that are already in the cache never get it, so a second visit
   shows no flicker at all. */
img.sk-img{
  background-color:var(--g100);
  background-image:linear-gradient(100deg,
    rgba(255,255,255,0) 28%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 72%);
  background-repeat:no-repeat;
  background-size:220% 100%;
  background-position:-120% 0;
  animation:skSweep 1.2s var(--ease) infinite;
  color:transparent;                 /* never flash the alt text mid-load */
  opacity:0;                         /* a half-decoded photograph over a
                                        shimmer reads as a washed-out mess,
                                        so the picture is held back until
                                        the whole file is there */
}
img.sk-in{animation:skFade .26s var(--ease) both}
@keyframes skFade{from{opacity:0} to{opacity:1}}
@keyframes skSweep{from{background-position:-120% 0} to{background-position:220% 0}}

/* ── a cart line that is still being fetched ───────────────────────────── */
.sk--line{border:0; background:none; border-radius:0; padding:.75rem .15rem;
  display:grid; grid-template-columns:56px minmax(0,1fr) 3.5rem; gap:.85rem;
  align-items:center; border-bottom:1px solid var(--line)}
.sk--line .sk__img{display:block; width:56px; height:56px; border-radius:10px;
  background:var(--sk-bg)}
.sk--line .sk__t{display:grid; gap:.45rem; min-width:0}

@media (prefers-reduced-motion:reduce){
  img.sk-img{animation:none; background-position:50% 0}
}

@media (prefers-reduced-motion:reduce){
  /* the highlight freezes where it reads as a highlight, not as a wipe */
  .sk::after{animation:none; transform:none;
    background:linear-gradient(100deg,
      rgba(255,255,255,0) 22%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 78%)}
}


/* ══════════════════════════════════════════════════════════════════════════
   36  THE FILTER PANEL, v2  (public/category.php)
   Shape:
     .listing > form.filters#listingFilters + .listing__main
       .filters__top    the drawer's own title bar (hidden on desktop)
       .filters__body   the groups; this is the part that scrolls
       .filters__act    apply + clear; pinned to the bottom of the drawer

   Desktop: a sticky rail under the sticky header that scrolls inside itself.
   <= 1024px (where .listing has already collapsed to one column): a full
   height slide-in drawer opened from the toolbar, with a fixed apply bar.
   Nothing here changes which query parameters are submitted.
   ══════════════════════════════════════════════════════════════════════════ */
.filters{position:sticky; top:calc(var(--hdr-h) + 1.25rem);
  display:flex; flex-direction:column; gap:0; overflow:hidden; padding-right:0;
  max-height:calc(100vh - var(--hdr-h) - 3rem); min-height:0}

.filters__top{display:none; align-items:center; gap:var(--s3); flex:none;
  padding:0 0 var(--s4); border-bottom:1px solid var(--line)}
.filters__top > b{font-family:var(--display); font-weight:800; font-size:1.05rem;
  letter-spacing:-.01em}
.filters__n{font-size:var(--f-xs); color:var(--red-ink); font-weight:600}
.filters__x{width:40px; height:40px; margin-left:auto; flex:none; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--line); background:var(--surface);
  color:var(--text-2); cursor:pointer;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease)}
.filters__x:hover{border-color:var(--text); color:var(--text)}

.filters__body{flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain;
  display:grid; gap:var(--s5); align-content:start; padding-right:.35rem;
  scrollbar-width:thin}
.filters__body::-webkit-scrollbar{width:6px}
.filters__body::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:99px}

.filters__group{border-bottom:1px solid var(--line); padding-bottom:var(--s5)}
.filters__group:last-child{border-bottom:0; padding-bottom:0}
.filters__group > h4{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s3); font-family:var(--body); font-size:var(--f-xs); font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--text-2);
  margin-bottom:var(--s4)}
.filters__meta{font-size:var(--f-xs); font-weight:500; letter-spacing:0;
  text-transform:none; color:var(--text-3); font-variant-numeric:tabular-nums;
  white-space:nowrap}
.filters__hint{margin-top:.6rem; font-size:var(--f-xs); line-height:1.55; color:var(--text-3)}

/* the range list — links, because a range is a URL, not a form field */
.filters__list{display:grid; gap:.1rem; max-height:17rem; overflow:auto;
  overscroll-behavior:contain; scrollbar-width:thin}
.filters__list::-webkit-scrollbar{width:6px}
.filters__list::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:99px}

/* .filters label (§08) is one type + one class, so every rule that has to beat
   it here is written through .filters as well rather than on the class alone. */
.filters a.f-link,.filters .filters__opt{display:flex; align-items:center; gap:.6rem;
  padding:.46rem .55rem; border-radius:8px; font-size:var(--f-sm); color:var(--text-2);
  cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.filters a.f-link > span:first-child,.filters .filters__opt > span:first-of-type{min-width:0}
.filters a.f-link:hover,.filters .filters__opt:hover{background:var(--surface-3); color:var(--text)}
.filters a.f-link[aria-current="page"]{background:var(--red-wash); color:var(--red-ink);
  font-weight:600}
.filters .n{margin-left:auto; padding-left:.5rem; font-size:var(--f-xs); color:var(--text-3);
  font-variant-numeric:tabular-nums; flex:none}
.filters a.f-link[aria-current="page"] .n{color:var(--red-ink); opacity:.72}
.filters .filters__opt:has(input:checked){color:var(--text); font-weight:600}

/* the price pair reads as one control: two boxed numbers and a dash */
.filters__price{display:flex; flex-wrap:nowrap; align-items:flex-end; gap:.5rem}
.filters .filters__num{display:grid; gap:.3rem; flex:1 1 0; min-width:0; cursor:text;
  padding:0; background:none}
.filters .filters__num > span{font-size:var(--f-xs); color:var(--text-3); letter-spacing:.02em}
.filters .filters__num .input{width:100%; padding:.6em .7em; font-size:var(--f-sm);
  font-variant-numeric:tabular-nums}
.filters__dash{padding-bottom:.72em; color:var(--text-3); font-size:var(--f-xs); flex:none}

/* apply + clear. Ink on desktop: the one red action on this screen belongs to
   the page, not to a rail. In the drawer (below) it becomes the red primary. */
.filters__act{position:static; flex:none; display:grid; gap:.5rem; margin-top:var(--s5);
  padding-top:var(--s4); border-top:1px solid var(--line); background:var(--bg)}
.filters__act .btn{width:100%}
.filters__apply-m{display:none}

/* the toolbar over the results: the count, then Filters (n) beside Sort */
.toolbar__act{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.filters__toggle{display:none; align-items:center; gap:.45rem}
.filters__badge{display:inline-grid; place-items:center; min-width:18px; height:18px;
  padding-inline:.3rem; border-radius:99px; background:var(--red); color:#fff;
  font-size:.68rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1}
.sortform{display:flex; align-items:center; gap:.5rem; margin:0}
.sortform .sortbar{gap:.5rem}
.sortform .sortbar > span{font-size:var(--f-xs); color:var(--text-3);
  text-transform:uppercase; letter-spacing:.1em; font-weight:600}
.sortform .select{min-width:10.5rem}

/* active-filter chips, above the grid */
.activefilters{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
  margin-bottom:var(--s5)}
.activefilters .lbl{font-size:var(--f-xs); color:var(--text-3); text-transform:uppercase;
  letter-spacing:.1em; font-weight:600; margin-right:.15rem}
.activefilters .clear{font-size:var(--f-xs); font-weight:600; color:var(--text-2);
  text-decoration:underline; text-underline-offset:3px; margin-left:.3rem;
  transition:color var(--dur) var(--ease)}
.activefilters .clear:hover{color:var(--red-ink)}

/* ── the drawer (<= 1024px, where .listing is already one column) ────────── */
@media (max-width:64em){
  .filters__toggle{display:inline-flex}

  .filters{position:fixed; inset:0 0 0 auto; z-index:120; width:min(92vw,22rem);
    max-height:none; background:var(--surface); border-radius:0;
    padding:var(--s5) var(--gut) 0;
    transform:translateX(101%); transition:transform 380ms var(--ease), visibility 0s linear 380ms;
    visibility:hidden;
    box-shadow:none; overflow:hidden}
  .filters.on{transform:none; visibility:visible; transition:transform 380ms var(--ease), visibility 0s;
    box-shadow:-30px 0 70px -34px rgba(10,10,11,.5)}
  .filters__top{display:flex}
  .filters__body{padding-block:var(--s5) var(--s4); padding-right:.5rem}

  /* the apply bar is fixed to the foot of the drawer, never scrolls away */
  .filters__act{margin:0 calc(var(--gut) * -1); padding:var(--s4) var(--gut);
    padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom));
    background:var(--surface); box-shadow:0 -16px 30px -26px rgba(10,10,11,.55)}
  .filters__apply-d{display:none}
  .filters__apply-m{display:inline}
  .filters__apply{background:var(--red); border-color:var(--red); color:#fff !important}
  .filters__apply:hover{background:var(--red-deep); border-color:var(--red-deep)}

  /* every row in the drawer is a thumb target */
  .filters a.f-link,.filters .filters__opt{min-height:44px; padding-block:.5rem}
  .filters .filters__num{min-height:0}
  .filters__list{max-height:none}
  .filters__x{width:44px; height:44px}
  .sortform{flex:1 1 12rem; min-width:0}
  .sortform .sortbar{flex:1; min-width:0}
  .sortform .select{flex:1; min-width:0}
}

@media (max-width:35em){
  .filters{width:100%}
  .toolbar__act{width:100%}
  .filters__toggle{flex:1 1 9rem; justify-content:center}
  .sortform{flex:1 1 100%}
}


/* ══════════════════════════════════════════════════════════════════════════
   36  THE MINIMAL PRODUCT TILE
   Appended last so it settles every earlier .pcard rule by source order: no
   card box, no shadow, no lift, no hairline, no overlays but the heart (on
   hover) and "out of stock". A square photo on the page's own quiet grey,
   then the name and one line of price in a single weight. Premium is what is
   left when the decoration is taken away.
   ══════════════════════════════════════════════════════════════════════════ */
.pgrid{gap:clamp(1.25rem,2.2vw,2rem) clamp(1rem,1.8vw,1.6rem)}
.pcard,.pcard:hover,.pcard:focus-within{padding:0; border:0; border-radius:0; background:transparent;
  box-shadow:none; transform:none; overflow:visible}
.pcard--oos:hover{transform:none; box-shadow:none}

/* z-index:3 lifts the photo block above the whole-card link overlay
   (.pcard__name a::after, z-index:2); the heart's own z-index lives inside this
   isolated context and would otherwise be unreachable by a click. */
.pcard__media{position:relative; isolation:isolate; z-index:3}
.pcard__img,.pcard--oos .pcard__img{display:block; aspect-ratio:1/1; width:100%; margin:0; padding:0;
  border:0; border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2);
  transition:background-color var(--dur) var(--ease)}
.pcard__img img,.pcard:hover .pcard__img img{display:block; width:100%; height:100%; object-fit:cover;
  transform:none; transition:filter var(--dur) var(--ease)}
.pcard:hover .pcard__img{background:var(--surface-3)}
.pcard:hover .pcard__img img{filter:brightness(.97)}
.pcard__img.is-broken img{display:none}

/* the heart: present, never loud */
.pcard__wish,.pcard__media .pcard__wish{position:absolute; top:.65rem; right:.65rem; z-index:5;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--surface) 92%, transparent); color:var(--text-2);
  border:1px solid var(--line); box-shadow:none; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transform:none; transition:opacity var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease)}
.pcard:hover .pcard__wish,.pcard:focus-within .pcard__wish,.pcard__wish:focus-visible,
.pcard__wish.is-on{opacity:1; transform:none}
.pcard__wish:hover,.pcard__wish.is-on{color:var(--red); border-color:var(--red-tint)}
@media (hover:none){ .pcard__wish{opacity:1} }

/* out of stock: the photo steps back, one quiet word on top */
.pcard__oos,.pcard--oos .pcard__oos{position:absolute; inset:auto; left:50%; top:50%; translate:-50% -50%;
  z-index:4; width:auto; height:auto; padding:.4rem .85rem; border-radius:999px;
  background:color-mix(in srgb, var(--surface) 94%, transparent); border:1px solid var(--line);
  box-shadow:none; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  font-family:var(--body); font-size:var(--f-xs); font-weight:600; letter-spacing:.02em;
  text-transform:none; color:var(--text-2); white-space:nowrap}
.pcard__oos::before{display:none}
.pcard--oos .pcard__img img{filter:grayscale(.9) saturate(.3); opacity:.55}
/* the dimmed photo is translucent, so the drawn brand mark under it must not ghost
   through; app.js removes a broken <img>, which switches the mark back on */
.pcard--oos .pcard__img img + .pcard__fallback{opacity:0}
.pcard--oos .pcard__body{opacity:1}
.pcard--oos .pcard__name a,.pcard--oos .pcard__meta{color:var(--text-3)}

/* two lines, one voice */
.pcard__body,.pcard--oos .pcard__body{display:block; flex:none; padding:.8rem 0 0; margin:0; gap:0}
.pcard__name{margin:0; min-height:0; font-family:var(--body); font-weight:500; font-size:.95rem; line-height:1.35;
  letter-spacing:-.005em; color:var(--text); text-wrap:balance}
.pcard__name a{display:block; color:inherit; text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pcard__name a::after{content:""; position:absolute; inset:0; z-index:2}
.pcard:hover .pcard__name a{color:var(--text)}
.pcard__meta{margin:.25rem 0 0; padding:0; border:0; display:flex; flex-wrap:wrap; align-items:baseline;
  gap:0 .35rem; font-size:var(--f-sm); font-weight:400; line-height:1.4; color:var(--text-2);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.pcard__p{color:var(--text); font-weight:500}
.pcard__u,.pcard__dot,.pcard__moq{color:var(--text-3)}
.pcard__moq{display:inline}

@media (max-width:40em){
  .pgrid{gap:1.1rem .75rem}
  .pcard__body{padding-top:.6rem}
  .pcard__name{font-size:.9rem}
  .pcard__meta{font-size:var(--f-xs); white-space:normal}
  .pcard__wish{width:32px; height:32px; top:.5rem; right:.5rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   DELIVERY — the courier / transport switch (cart, checkout, drawer), the
   line under a postal code that says where it is, and the money rows the
   drawer paints from /api/cart. One look everywhere the question is asked.
   ══════════════════════════════════════════════════════════════════════════ */
.shipsw{display:grid; gap:.5rem; min-width:0}
.shipsw[hidden]{display:none}
.shipsw__lbl{margin:0}
.shipsw__opt{position:relative; display:flex; align-items:center; gap:.75rem; min-height:48px;
  padding:.6rem .85rem; border:1.5px solid var(--line); border-radius:10px;
  background:var(--surface); cursor:pointer; transition:border-color var(--dur) var(--ease)}
.shipsw__opt:hover{border-color:var(--line-2)}
.shipsw__opt.is-selected,.shipsw__opt:has(input:checked){border-color:var(--red)}
.shipsw__opt input{width:18px; height:18px; margin:0; flex:none; accent-color:var(--red)}
.shipsw__t{display:grid; gap:.1rem; min-width:0}
.shipsw__t b{font-size:var(--f-sm); font-weight:600; color:var(--text)}
.shipsw__t small{font-size:var(--f-xs); color:var(--text-2); line-height:1.4}
.shipsw.is-busy{opacity:.6; pointer-events:none}
.shipsw--sm .shipsw__opt{min-height:44px; padding:.5rem .7rem}

/* the delivery block at the top of the cart summary */
.cartship{display:grid; gap:var(--s4); padding-bottom:var(--s4); border-bottom:1px solid var(--line)}
.cartship .field{gap:.35rem}
.cartship.is-busy{opacity:.6}

/* under a postal code: "Verified: Girgaon, Mumbai, Maharashtra" */
.verify{margin:0; font-size:var(--f-xs); line-height:1.5; color:var(--text-2)}
.verify--ok{color:var(--ok)}
.verify--bad{color:var(--red-ink)}
.verify--wait{color:var(--text-3)}

/* the drawer's money rows: plain figures, one red total at the foot */
.cartdrawer__rows{display:grid; gap:.15rem}
.cartdrawer__rows .cartdrawer__tot b{font-family:var(--body); font-weight:600; font-size:var(--f-sm);
  letter-spacing:0; color:var(--text)}
.cartdrawer__rows .cartdrawer__tot--grand{border-top:1px solid var(--line-2); margin-top:.25rem; padding-top:.5rem}
.cartdrawer__rows .cartdrawer__tot--grand b{font-family:var(--display); font-weight:800; font-size:1.24rem;
  letter-spacing:-.03em; color:var(--red-ink)}
.cartdrawer__tot small,.summary__row small{display:block; font-size:var(--f-xs); font-weight:400;
  color:var(--text-3); line-height:1.4}
.cartdrawer__tot small:empty,.summary__row small:empty{display:none}