/* ============================================================
   FRS · DESIGN SYSTEM — shared across every page.
   Content lives in data.js. Behavior lives in site.js.
   Edit colors in :root (the brand accent is --accent).
   ============================================================ */
:root{
  /* ONE CONTROL HEIGHT. Every control used to derive its height from its own padding and
     font-size - input 43px, select 40px, pay button 44px, coupon 52px - so two of them sitting
     together only ever lined up by accident, and the coupon row only looked right because flex
     stretch silently inflated the input by nine pixels. A single token makes alignment a
     property of the system rather than of each rule's arithmetic, and 48px clears the 44px
     touch minimum on all of them. */
  --ctl:48px;
  --accent:#e7dfc8;                 /* ivory linework — brand, packaging spec */
  --gold:#c8b184;                   /* rim / hairline gold */
  --burgundy:#6b373d;               /* petal accent — a jewel, ~5–10% max */
  --burgundy-lift:#9a545b;          /* legible burgundy for small type / hover on black */
  --blush:#c98b91;                  /* lightest petal tone — coupon + applied states */
  --line-gold:rgba(200,177,132,.20);--gold-soft:rgba(200,177,132,.42);
  --bg:#0a0908;--surface:#100e0c;--surface-2:#16130f;--paper:#e8e1d4;
  --text:#e7e1d6;--muted:#928b7e;
  /* --faint was #5b554c: 2.70:1 on --bg, which fails AA at any size. It is used in 23 places
     that carry MEANING, not decoration - 9px field labels, "(optional)", "at list", section
     headers, and the pricing read-out's no-discount warning - so the fix belongs in the token
     rather than in each call site. #80796d is 4.62:1 (passes AA) and still sits clearly below
     --muted at 5.89:1, so the visual hierarchy is unchanged. Anything at these sizes that must
     be READ belongs at --muted or above; --faint is the floor, not a decoration. */
  --faint:#80796d;
  --line:rgba(231,225,214,.08);--line-strong:rgba(231,225,214,.17);
  --ink:#0a0908;--max:1240px;--gut:34px;
  /* Status amber + red. These hex values were already in the console as bare literals on
     .kpi.warn, .mod.warn and .badge.re; naming them stops the recurring bug of writing
     var(--warn) for a token that was never declared - an unresolved var() renders as
     nothing, so a warning silently loses its colour and reads as body text. */
  --warn:#e6b566;--danger:#cf7a6a;
  --fdisp:'Cormorant Garamond',serif;--fbody:'Archivo','Helvetica Neue',system-ui,sans-serif;
  --crest-url:url('assets/frs-crest-light.png?v=20260813h');   /* swap this one line to version the crest */
  --crest-mask:url('assets/frs-crest-light.png');  /* silhouette used by the holographic sheen */
  --ease:cubic-bezier(.2,.7,.2,1);
  --sheen-a:rgba(231,223,200,.5);--sheen-b:rgba(200,177,132,.5);--sheen-c:rgba(154,84,91,.38);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-gutter:stable both-edges}
body{background:var(--bg);color:var(--text);font-family:var(--fbody);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;min-height:100vh;font-feature-settings:"kern","liga","calt";
  background-image:radial-gradient(150% 90% at 50% -8%,rgba(231,225,214,.045),transparent 55%),linear-gradient(180deg,#0c0a09 0%,#0a0908 40%,#090807 100%);
  background-attachment:fixed}
body.locked{overflow:hidden}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative}
.wrap.narrow{max-width:920px}
.serif{font-family:var(--fdisp);font-feature-settings:"liga","dlig","onum","swsh"}
h1,h2{text-wrap:pretty}
.label{font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);font-weight:500}
a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}
::selection{background:var(--accent);color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
::-webkit-scrollbar{width:11px}::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#26262b;border:3px solid var(--bg);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#36363c}

/* texture + frame */
.grain{position:fixed;inset:0;z-index:600;pointer-events:none;opacity:.028;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vig{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(125% 95% at 50% 38%,transparent 56%,rgba(0,0,0,.5) 100%)}
.frame{position:fixed;inset:16px;border:1px solid var(--line-gold);pointer-events:none;z-index:45}
.fc{display:block;position:fixed;width:20px;height:20px;z-index:46;pointer-events:none}
.fc.tl{top:6px;left:6px;border-top:1px solid var(--gold-soft);border-left:1px solid var(--gold-soft)}
.fc.tr{top:6px;right:6px;border-top:1px solid var(--gold-soft);border-right:1px solid var(--gold-soft)}
.fc.bl{bottom:6px;left:6px;border-bottom:1px solid var(--gold-soft);border-left:1px solid var(--gold-soft)}
.fc.br{bottom:6px;right:6px;border-bottom:1px solid var(--gold-soft);border-right:1px solid var(--gold-soft)}
@media(max-width:600px){.frame{inset:8px}.fc.tl,.fc.tr{top:3px}.fc.bl,.fc.br{bottom:3px}.fc.tl,.fc.bl{left:3px}.fc.tr,.fc.br{right:3px}}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:var(--ctl);border:1px solid var(--line-strong);background:transparent;color:var(--text);padding:17px 42px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;transition:border-color .45s,color .45s,background .45s;overflow:hidden;isolation:isolate}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 30%,rgba(231,225,214,.10) 50%,transparent 70%);transform:translateX(-130%);transition:transform .85s var(--ease)}
.btn::after{display:none}
.btn:hover::before{transform:translateX(130%)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.solid{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn.solid:hover{background:#fbf7f0;border-color:#fbf7f0;color:var(--ink)}
.btn.full{width:100%;text-align:center}
.btn.ghost{color:var(--muted);border-color:transparent}.btn.ghost:hover{color:var(--text)}

.dropcd{display:none;align-items:flex-end;justify-content:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.dropcd .cdlabel{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);align-self:center}
.dropcd .cd{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:38px}
.dropcd .cd b{font-family:var(--fdisp);font-weight:500;font-size:31px;line-height:1;font-variant-numeric:tabular-nums;color:var(--text)}
.dropcd .cd i{font-style:normal;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
@media(max-width:480px){.dropcd{gap:11px}.dropcd .cd b{font-size:25px}}
/* returning-member chip */
.memba-wrap{margin:20px 0 18px;max-width:560px}
.memba{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;border:1px solid var(--line-strong);border-radius:100px;padding:9px 9px 9px 18px;font-size:12.5px;line-height:1.5;color:var(--muted);background:var(--surface)}
.memba .memb-t{color:var(--text)}
.memba a{color:var(--accent);text-decoration:none;letter-spacing:.04em}
.memba a:hover{text-decoration:underline}
.memx{border:1px solid var(--line);background:transparent;color:var(--muted);width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:11px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.memx:hover{color:var(--text);border-color:var(--line-strong)}
/* per-strain "why this one" note in the product drawer */
.pd-why{margin:14px 0 2px;padding:12px 16px;border-left:2px solid var(--accent);background:linear-gradient(90deg,rgba(255,255,255,.035),transparent);font-family:var(--fdisp);font-style:italic;font-size:15.5px;line-height:1.5;color:var(--text)}
.pd-why-k{display:block;font-family:'Archivo',system-ui,sans-serif;font-style:normal;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--burgundy-lift);margin-bottom:5px}
/* concierge allocation line — quiet scarcity, in-voice */
.pd-alloc{display:flex;align-items:center;gap:9px;margin:13px 0 2px;font-size:12px;letter-spacing:.02em;color:var(--muted)}
.pd-alloc-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--burgundy-lift);box-shadow:0 0 0 0 rgba(154,84,91,.5);animation:allocPulse 2.6s ease-out infinite}
@keyframes allocPulse{0%{box-shadow:0 0 0 0 rgba(154,84,91,.5)}70%{box-shadow:0 0 0 7px rgba(154,84,91,0)}100%{box-shadow:0 0 0 0 rgba(154,84,91,0)}}
@media(prefers-reduced-motion:reduce){.pd-alloc-dot{
  /* A pulsing allocation badge is exactly what reduced-motion exists to stop. */
  .alloc,[class*="alloc"]{animation:none!important}animation:none}}
/* handwritten personal note on the confirmation screen */
.handnote{max-width:430px;margin:0 auto 30px;padding:22px 26px;border:1px solid var(--line);position:relative;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.handnote::before{content:'';position:absolute;top:-1px;left:26px;right:26px;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}
.handnote p{font-family:var(--fdisp);font-style:italic;font-size:19px;line-height:1.55;color:var(--text);margin:0}
.handnote-sig{display:block;margin-top:12px;font-size:15px;font-style:italic;color:var(--accent);letter-spacing:.02em}
.catload{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
.catload.row{grid-template-columns:repeat(2,1fr)}
.catload span{display:block;aspect-ratio:4/3;border:1px solid var(--line);background:linear-gradient(100deg,rgba(255,255,255,.02) 30%,rgba(255,255,255,.055) 50%,rgba(255,255,255,.02) 70%);background-size:220% 100%;animation:cshimmer 1.25s ease-in-out infinite}
@keyframes cshimmer{0%{background-position:180% 0}100%{background-position:-40% 0}}
@media(max-width:900px){.catload{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.catload,.catload.row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.catload span{animation:none}}
.reveal{opacity:0;transform:translateY(20px);transition:opacity 1.05s ease,transform 1.05s var(--ease)}
.reveal.in{opacity:1;transform:none}
.orn{display:flex;align-items:center;justify-content:center;gap:18px;color:var(--faint);font-size:11px}
.orn span{width:74px;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}

/* ===== holographic crest engine (hero + gate) ===== */
.crestwrap{position:relative;display:inline-block;filter:drop-shadow(0 10px 52px rgba(0,0,0,.7))}
.crestwrap .crest{position:relative;display:block;z-index:1}
.crestwrap .sheen{position:absolute;inset:0;pointer-events:none;z-index:2;
  -webkit-mask:var(--crest-mask) center/contain no-repeat;mask:var(--crest-mask) center/contain no-repeat}
.crestwrap .sheen::before{content:'';position:absolute;inset:0;
  background:linear-gradient(125deg,var(--sheen-a),var(--sheen-b),var(--sheen-c),var(--sheen-a));
  background-size:300% 100%;mix-blend-mode:screen;opacity:.14;animation:drift 14s linear infinite}
.crestwrap .sheen::after{content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 41%,var(--sheen-a) 47%,var(--sheen-b) 51%,var(--sheen-c) 55%,transparent 61%);
  background-size:260% 100%;background-position:165% 0;mix-blend-mode:screen;animation:sweep 8.5s ease-in-out 1.8s infinite}
@keyframes drift{0%{background-position:0 0}100%{background-position:300% 0}}
@keyframes sweep{0%{background-position:165% 0}46%{background-position:-65% 0}100%{background-position:-65% 0}}

/* age gate */
/* No flash on repeat visits: an inline <head> script marks <html> before first
   paint, so the gate is never painted for someone who already confirmed. */
html.ok21 #gate{display:none}
html.ok21 body.locked{overflow:visible}
#gate{position:fixed;inset:0;z-index:1000;background:radial-gradient(120% 90% at 50% 32%,#0d0d10,#060607 70%);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;transition:opacity .9s ease,visibility .9s}
#gate.go{opacity:0;visibility:hidden}
.gate-inner{position:relative}
#gate .crestwrap{margin:0 auto 26px}
#gateImg{height:118px;width:auto;display:block}
#gate .gate-crest{animation:gateCrest 1.4s .15s var(--ease) both}
@keyframes gateCrest{0%{transform:scale(.92);filter:blur(7px)}100%{transform:none;filter:none}}
#gate .mark{font-size:30px;letter-spacing:.05em;margin-bottom:9px;line-height:1}
#gate .el{margin-bottom:24px}
#gate p{color:var(--muted);font-size:13.5px;margin:0 auto 30px;max-width:340px;line-height:1.7}
.gate-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
#gate .mark,#gate .el,#gate p,#gate .gate-actions{animation:hUp 1s both}
#gate .mark{animation-delay:.5s}#gate .el{animation-delay:.62s}#gate p{animation-delay:.74s}#gate .gate-actions{animation-delay:.86s}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(8,8,10,.55);backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:background .4s,border-color .4s}
header.scrolled{background:rgba(8,8,10,.88);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.nav .brand{font-size:15px;letter-spacing:.4em;text-transform:uppercase;font-weight:500;padding-left:.4em}
.nav .brand b{color:var(--gold);font-weight:500}
.nav ul{display:flex;gap:34px;list-style:none}
.nav ul a{position:relative;white-space:nowrap;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);transition:color .25s}
.nav ul a::after{content:'';position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--gold);transition:right .35s var(--ease)}
.nav ul a:hover{color:var(--text)}
.nav ul a.active{color:var(--text)}.nav ul a.active::after{right:0}
.nav-right{display:flex;align-items:center;gap:22px}
.reserve-btn{min-height:44px;display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text);background:none;border:none;display:flex;align-items:center;gap:9px}
.reserve-btn .count{min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:100px;background:var(--accent);color:var(--ink);font-size:10.5px;letter-spacing:0;line-height:1;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;justify-content:center;font-weight:600;transition:transform .3s var(--ease),background .3s}
.reserve-btn .count.bump{animation:countpop .42s var(--ease)}
@keyframes countpop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.reserve-btn .count.empty{background:transparent;color:var(--faint);border:1px solid var(--line-strong)}
.menu-toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center;display:none;background:none;border:none;color:var(--text);font-size:22px}

/* dpill */
.dpill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-strong);border-radius:100px;padding:8px 17px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.014)}
.dpill .dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.dpill .dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:pulse 2.6s ease-out infinite}
.dpill.tone-off{color:var(--faint)}.dpill.tone-off .dot{background:var(--faint)}.dpill.tone-off .dot::after{display:none}
.dpill.tone-warn{color:#caa07e}.dpill.tone-warn .dot,.dpill.tone-warn .dot::after{background:#cf9b6a}
.dpill.tone-soon{color:var(--muted)}.dpill.tone-soon .dot::after{animation-duration:4.2s}
@keyframes pulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3.4);opacity:0}}

/* hero (home) */
.hero{position:relative;padding:clamp(108px,13vh,150px) 0 clamp(80px,9vw,104px);text-align:center;border-bottom:1px solid var(--line);overflow:hidden}
.hero .glow{position:absolute;top:40px;left:50%;width:660px;height:660px;max-width:130vw;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,255,255,.06),transparent 60%);pointer-events:none;animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.65;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.09)}}
.hero .crestwrap{display:block;width:max-content;max-width:100%;margin:0 auto 34px}
.hero .crest{height:clamp(158px,27vw,266px);width:auto;max-width:86vw}
.hero .el{margin-bottom:22px}
.hero h1{font-family:var(--fdisp);font-weight:500;font-size:clamp(46px,8vw,104px);line-height:.98;letter-spacing:.015em;margin-bottom:20px;max-width:13ch;margin-left:auto;margin-right:auto}
.hero .tag{font-family:var(--fdisp);font-style:italic;font-weight:400;font-size:clamp(18px,2.8vw,25px);color:var(--text);margin-bottom:34px;opacity:.92}
.hero .dpill{margin:0 auto 26px}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:48px}
body.entered .hero .crestwrap{animation:hUp 1.2s .04s var(--ease) both}
body.entered .hero .dpill{animation:hUp 1s .26s var(--ease) both}
body.entered .hero .el{animation:hUp 1s .36s var(--ease) both}
body.entered .hero h1{animation:hUp 1.05s .46s var(--ease) both}
body.entered .hero .tag{animation:hUp 1s .62s var(--ease) both}
body.entered .hero-actions{animation:hUp 1s .78s var(--ease) both}
body.entered .hero .orn{animation:hUp 1s .94s var(--ease) both}
@keyframes hUp{from{transform:translateY(26px)}to{transform:translateY(0)}}

/* page hero (subpages) */
.phero{padding:clamp(56px,7vw,92px) 0 clamp(28px,4vw,42px);border-bottom:1px solid var(--line)}
.phero .el{margin-bottom:20px}
.phero h1{font-family:var(--fdisp);font-weight:500;font-size:clamp(42px,7vw,86px);line-height:1;letter-spacing:.01em;margin-bottom:22px}
.phero p{color:var(--muted);max-width:620px;font-size:15.5px;line-height:1.85}

section{padding:clamp(88px,10vw,124px) 0;position:relative}
section.tight{padding:clamp(36px,5vw,56px) 0}
.sec-head{display:flex;align-items:baseline;gap:26px;margin-bottom:48px;border-bottom:1px solid var(--line-gold);padding-bottom:26px}
.sec-head .no{font-family:var(--fdisp);font-weight:500;font-style:italic;font-size:clamp(30px,4vw,46px);line-height:1;color:transparent;-webkit-text-stroke:1px var(--line-strong);flex:none;align-self:center}
.sec-head h2{font-family:var(--fdisp);font-weight:500;font-size:clamp(30px,4.4vw,48px);flex:1;line-height:1}
.sec-head .label{white-space:nowrap;align-self:center}

/* home hub: editorial index rows */
.idx{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.idxrow{display:flex;align-items:center;gap:30px;padding:34px 6px;border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease),background .4s}
.idxrow:hover{padding-left:20px;background:linear-gradient(90deg,rgba(255,255,255,.02),transparent 60%)}
.idxrow .ino{font-family:var(--fdisp);font-style:italic;font-size:clamp(22px,3vw,34px);color:transparent;-webkit-text-stroke:1px var(--line-strong);flex:none;width:54px}
.idxrow .imid{flex:1;min-width:0}
.idxrow .it{font-family:var(--fdisp);font-size:clamp(26px,3.4vw,40px);line-height:1.04;margin-bottom:8px;transition:color .3s}
.idxrow .ib{color:var(--muted);font-size:13.5px;line-height:1.7;max-width:60ch}
.idxrow .imeta{flex:none;display:flex;align-items:center;gap:18px;color:var(--muted);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.idxrow .iar{font-size:18px;color:var(--muted);transition:transform .35s var(--ease),color .35s}
.idxrow:hover .iar{transform:translateX(6px);color:var(--accent)}
.idxrow:hover .it{color:var(--accent)}
@media(max-width:680px){.idxrow{gap:18px;padding:26px 4px}.idxrow .imeta .mtag{display:none}}

/* filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-start;margin-bottom:24px}
.chip.avail{margin-left:0}
/* Push "in stock only" to the far edge only when the whole row genuinely fits on
   one line — otherwise it strands itself on row two with a screen-wide gap. */
@media(min-width:1001px){.chip.avail{margin-left:auto}}
.chip{min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:10px 19px;background:transparent;transition:.3s}
.chip:hover{color:var(--text);border-color:var(--line-strong)}
.chip.active{color:var(--ink);background:var(--accent);border-color:var(--accent)}

/* catalog */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:30px 20px}
.grid>*{min-width:0}
.card .ph{max-width:100%}
.card h3,.card .meta{overflow-wrap:anywhere}
.grid.two{grid-template-columns:repeat(3,1fr)}
.card{position:relative;background:var(--surface);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:translateY(22px);transition:border-color .4s,background .4s,box-shadow .4s,transform .65s var(--ease),opacity .65s ease}
.card.in{opacity:1;transform:none}
.card.in:hover{border-color:var(--line-strong);transform:translateY(-6px);background:var(--surface-2);box-shadow:0 30px 70px -30px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.05)}
.card .ph{position:relative;aspect-ratio:4/3;background-size:cover;background-position:center;background-color:#0d0d0f;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);overflow:hidden}
.card .ph.empty{background-image:radial-gradient(circle at 50% 40%,rgba(255,255,255,.025),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.013) 0 11px,transparent 11px 22px)}
.card .ph .crestph{height:56%;opacity:.5}
.card .status{position:absolute;top:15px;right:15px;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;background:rgba(8,8,10,.82);padding:6px 11px;backdrop-filter:blur(4px)}
.status.available{color:var(--accent)}.status.limited{color:var(--burgundy-lift)}.status.reserved,.status.soldout{color:var(--faint)}.status.soon{color:var(--muted)}
.card .ed{position:absolute;top:15px;left:15px;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);background:rgba(8,8,10,.82);padding:6px 10px;backdrop-filter:blur(4px)}
.card .body{padding:26px 26px 28px;flex:1;display:flex;flex-direction:column}
.card .cat{margin-bottom:14px}
.card h3{font-family:var(--fdisp);font-weight:500;font-size:26px;margin-bottom:15px;line-height:1.05}
.card .meta{font-size:12.5px;color:var(--muted);margin-bottom:22px;flex:1;line-height:1.75}
.card .meta b{color:var(--text);font-weight:400}
.card .open{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-strong);padding-bottom:5px;align-self:flex-start;transition:.3s}
.card .open:hover{color:var(--accent);border-color:var(--accent)}
.card.bl{background:#060607;border-color:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.card.bl .ph{background-color:#070709;background-image:radial-gradient(circle at 50% 38%,rgba(255,255,255,.03),transparent 62%)}
.card.bl .ed{color:var(--text);border:1px solid var(--line-strong);background:rgba(0,0,0,.6);letter-spacing:.28em}
.card.bl::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--sheen-a),var(--sheen-b),var(--sheen-c),transparent);background-size:220% 100%;z-index:3;pointer-events:none;animation:seam 7s ease-in-out infinite}
@keyframes seam{0%,100%{background-position:160% 0;opacity:.5}50%{background-position:-60% 0;opacity:1}}
.card.bl.in:hover{border-color:rgba(255,255,255,.34);box-shadow:0 28px 64px -28px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.07)}
/* ---- product-state mechanic: stamp on the artwork ---- */
.card.is-soldout .crestph,.card.is-soon .crestph{opacity:.26;filter:grayscale(1)}
.card .stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center;gap:11px;font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);background:rgba(8,8,10,.5);backdrop-filter:blur(3px);border:1px solid var(--line-strong);padding:11px 17px;white-space:nowrap}
.card .stamp::before,.card .stamp::after{content:'';width:13px;height:1px;background:currentColor;opacity:.6}
.card .stamp.premium{color:var(--text);border-color:transparent;background:rgba(0,0,0,.62);box-shadow:0 0 0 1px rgba(255,255,255,.2);overflow:hidden}
.card .stamp.premium .sx{position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,var(--sheen-a) 47%,var(--sheen-b) 51%,var(--sheen-c) 55%,transparent 62%);background-size:240% 100%;mix-blend-mode:screen;animation:sweep 7s ease-in-out 1s infinite;pointer-events:none}
.card .stamp.soon{color:var(--muted)}

/* lab rows (compact, used on home preview) */
.lab-intro{color:var(--muted);max-width:640px;margin-bottom:42px;font-size:15px;line-height:1.8}
.lab-row{display:grid;grid-template-columns:130px 1.4fr 1fr auto;gap:20px;align-items:center;padding:21px 0;border-top:1px solid var(--line);transition:padding-left .35s var(--ease)}
.lab-row:last-child{border-bottom:1px solid var(--line)}
.lab-row:hover{padding-left:6px}
.lab-row .bid{font-size:11.5px;letter-spacing:.16em;color:var(--accent)}
.lab-row .lp{font-family:var(--fdisp);font-size:21px}
.lab-row .ld{font-size:12.5px;color:var(--muted)}
.lab-row .lc{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-strong);padding-bottom:3px;white-space:nowrap}
.lab-row .lc:hover{color:var(--text)}

/* faq */
.faq-item{border-top:1px solid var(--line)}.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{display:flex;align-items:center;gap:20px;width:100%;text-align:left;background:none;border:none;color:var(--muted);padding:27px 0;font-size:20px;font-family:var(--fdisp);transition:color .3s}
.faq-q:hover,.faq-item.open .faq-q{color:var(--text)}
.faq-q .fno{font-family:var(--fbody);font-size:10.5px;letter-spacing:.12em;color:var(--muted);width:24px;flex:none}
.faq-q .qt{flex:1}
.faq-q .pm{color:var(--accent);font-size:20px;flex:none;transition:transform .35s var(--ease)}
.faq-item.open .faq-q .pm{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a .inner{overflow:hidden}
.faq-a p{color:var(--muted);font-size:15px;line-height:1.85;padding:0 30px 30px 44px;max-width:none;margin:0}
.dropcap::first-letter{font-family:var(--fdisp);font-weight:500;font-size:3.5em;line-height:.74;float:left;padding:8px 14px 0 0;color:var(--text)}

/* standard / story */
.swm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(80vw,780px);aspect-ratio:760/830;background:var(--crest-url) center/contain no-repeat;opacity:.06;pointer-events:none;z-index:0;user-select:none}
.about{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.about .big{font-family:var(--fdisp);font-size:clamp(26px,3.2vw,37px);line-height:1.3}
.about p{color:var(--muted);font-size:15px;margin-bottom:17px;line-height:1.8}

/* drop signup */
.drop{text-align:center;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.drop h2{font-family:var(--fdisp);font-size:clamp(30px,4vw,44px);margin-bottom:16px;line-height:1.05}
.drop p{color:var(--muted);max-width:460px;margin:0 auto 34px;line-height:1.75}
.drop form{display:flex;gap:10px;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.drop input{flex:1;min-width:230px;background:var(--bg);border:1px solid var(--line);color:var(--text);padding:15px 17px;font-family:inherit;font-size:14px;transition:border-color .3s}
.drop input:focus{outline:none;border-color:var(--accent)}
.dropMsg{display:none;color:var(--accent);font-size:13px;margin-top:18px}

/* Strain-index links. The site-wide a{color:inherit} means a link supplies NO affordance of
   its own, which is fine inside prose and wrong on a page whose only function is navigation.
   --accent is #e7dfc8, a near-white ivory: at 1.09:1 against body text it is invisible as a
   cue. --gold (#c8b184) is the brand gold and carries the hue; the border is the second cue,
   because hue alone at 1.43:1 on this background is still weak and one signal is not enough. */
/* EVERY prose link on the strain page, not just the index rows. This rule was scoped to
   .sp-row dd a, so the identical bare link inside the .sp-spec proof panel kept inheriting
   a{color:inherit} and rendered indistinguishable from the sentence around it - and on a product
   with no lab grain that panel IS the proof section, so its only exit was invisible. Widening the
   selector rather than adding a third variant is the point: a second rule with the same intent is
   how these drift apart in the first place. */
.sp-row dd a,.sp-spec a:not(.sp-cta),.sp-why a{color:var(--gold);border-bottom:1px solid var(--line-gold);padding-bottom:1px;transition:border-color .25s,color .25s}
.sp-row dd a:hover,.sp-spec a:not(.sp-cta):hover,.sp-why a:hover{color:var(--accent);border-bottom-color:var(--gold)}

/* Library rows. A row is a doorway, so it gets a real affordance and a 56px target - this is
   the primary navigation on the page now, not a list of footnotes. */
.lib-g{margin-bottom:26px}
.lib-gh{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);padding-bottom:9px;border-bottom:1px solid var(--line-gold)}
.lib-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,1.2fr) auto auto auto;gap:14px;align-items:center;
  min-height:56px;padding:12px 0;border-bottom:1px solid var(--line);transition:border-color .25s}
.lib-row:hover{border-bottom-color:var(--gold-soft)}
.lib-n{font-family:var(--fdisp);font-size:20px;color:var(--text)}
.lib-m{font-size:12.5px;color:var(--muted)}
.lib-s{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.lib-s.out{color:var(--faint)}
.lib-a{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.lib-row:hover .lib-a{color:var(--accent)}
@media(max-width:680px){
  .lib-row{grid-template-columns:1fr auto;gap:4px 12px;padding:14px 0}
  .lib-n{grid-column:1}
  .lib-a{grid-column:2;grid-row:1;align-self:center}
  .lib-m{grid-column:1;grid-row:2}
  .lib-p{grid-column:1;grid-row:3;text-align:left}
  .lib-s{grid-column:2;grid-row:2;text-align:right}
}

/* FRIEND PRICE. The struck public price beside a member price is the one place a strikethrough
   belongs on this site: it is not a markdown everyone can see, it is a number only this person
   gets. Gold on the live figure, the struck one receding. */
.price.friend,.pd-size b.friend{color:var(--gold)}
.price.friend s.was,.pd-size b.friend s{color:var(--faint);text-decoration-thickness:1px}
#friendBanner{display:none;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  border:1px solid var(--line-gold);background:rgba(200,177,132,.05);padding:12px 18px;margin:0 auto 22px;max-width:640px}
#friendBanner .fp-k{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
#friendBanner .fp-k+.fp-t{position:relative;padding-left:13px}
/* A real separator character, so the words do not run together for anything reading the text
   rather than looking at it. The visual dash stays as ::before. */
#friendBanner .fp-k::after{content:' \2014 ';position:absolute;left:-9999px}
#friendBanner .fp-k+.fp-t::before{content:'';position:absolute;left:0;top:50%;width:5px;height:1px;background:var(--gold-soft)}
#friendBanner .fp-t{font-size:13px;color:var(--muted)}

.lk-note{grid-column:1/-1;font-size:13px;color:var(--muted);margin:4px 0 0;line-height:1.7}
.lk-note a{color:var(--gold);border-bottom:1px solid var(--line-gold);padding-bottom:1px}
.lk-note a:hover{border-bottom-color:var(--gold-soft);color:var(--accent)}

/* The friend chip. Bottom-anchored and persistent, because the point is that it is still there
   when the decision gets made - a header states a fact once and is then scrolled past. Left side so
   it never covers the cart bar's action on a phone. */
#friendChip{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:70;display:none;align-items:baseline;gap:9px;
  padding:10px 15px;background:rgba(10,9,8,.92);backdrop-filter:blur(8px);
  border:1px solid var(--line-gold);border-radius:100px;pointer-events:none;
  animation:fcIn .5s var(--ease) both}
#friendChip[data-on]{display:inline-flex}
#friendChip .fc-k{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
#friendChip .fc-v{font-size:12px;color:var(--text)}
@keyframes fcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:600px){
  /* Clear of the pinned cart bar, and of the home indicator below it. */
  #friendChip{left:10px;right:10px;bottom:calc(76px + env(safe-area-inset-bottom,0px));justify-content:center}
}
@media(prefers-reduced-motion:reduce){ #friendChip{animation:none} }

/* A hairline between the two filter groups. Without it the tier chips read as more categories,
   which is the whole confusion a second filter row invites. */
.chip-div{width:1px;align-self:stretch;min-height:28px;background:var(--line-strong);margin:0 4px;flex:none}
/* The library's price column. Right-aligned so the numbers form a scannable edge, and the struck
   list price only appears when it differs from what this visitor is charged. */
.lib-p{font-size:13px;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.lib-p s{color:var(--faint);margin-right:5px}

/* The rate rows. One rule per line so each is read once and independently - a price book is a
   list, not a sentence. Tabular figures so the money forms a column the eye can run down. */

/* Filter chips with no results under the other axis' current state. Dimmed rather than hidden:
   a chip that vanishes makes the row jump on every tap, and the customer loses track of what the
   catalogue even offers. */
.chip.none{opacity:.38}
.chip.none:hover{border-color:var(--line);color:var(--muted)}

/* ============================================================
   THE PAIR GRAPHIC.
   ONE grid holds every deal, so the +, the -, the = and the totals line up vertically
   between rows. Two separate grids let each row size its own columns, which is what made
   the block read as assembled rather than designed.
   The old version also wore a solid gold lozenge for its label - supermarket-promo
   language in a house whose entire vocabulary is hairlines, letterspaced caps and serif
   display. And its tiles were empty dark squares, so the graphic asked you to read a
   product from a blank box.
   ============================================================ */
#dealsBand.db-rich{display:block;max-width:none;padding:26px 0 20px}
/* the price under each plate was sitting flush on the module's divider */
.eqgrid{margin-bottom:18px}

/* Centred, because a left-crammed block on a full-width band strands 700px of empty
   beside it. */
.eqhead{display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 20px}
.eqhead s{display:block;width:clamp(24px,7vw,56px);height:1px;text-decoration:none;
  background:linear-gradient(90deg,transparent,var(--line-gold))}
.eqhead s:last-child{background:linear-gradient(90deg,var(--line-gold),transparent)}

/* Fixed tracks: the whole point of one grid is that column 5 is the same width on every
   row, so the discount sits under the discount and the total under the total. */
.eqgrid{display:grid;justify-content:center;align-items:start;
  grid-template-columns:66px 20px 66px 20px 54px 20px 76px auto;gap:0 11px;row-gap:18px}

.eqcell{display:flex;flex-direction:column;align-items:center;gap:7px}
/* A jar plate, not a box: hairline in gold, the tier in display serif, the size beneath
   it - so the tile states what it is instead of relying on the caption to say. */
.eqplate{position:relative;width:66px;height:66px;border:1px solid var(--line-gold);border-radius:2px;
  background:linear-gradient(158deg,rgba(200,177,132,.09),rgba(200,177,132,.015) 62%,transparent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
/* 22px suited a 3-letter stub; a strain name needs to fit 66px, so it steps down and
   ellipsises rather than breaking the plate. */
.eqplate b{font-family:var(--fdisp);font-weight:500;font-size:15px;line-height:1.1;color:var(--gold);
  max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.eqplate i{font-style:normal;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eqp{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1}

/* Operators are padded to the plate's centre rather than centred in their cell, so the
   equation reads across one line while each price stays under its own tile. */
.eqop{font-family:var(--fdisp);font-size:20px;line-height:1;color:var(--faint);text-align:center;padding-top:23px}
.eqcut{font-size:14px;line-height:1;color:var(--gold);text-align:center;padding-top:26px;font-variant-numeric:tabular-nums}
.eqsum{font-family:var(--fdisp);font-size:28px;line-height:1;color:var(--text);padding-top:19px;font-variant-numeric:tabular-nums}
.eqcap{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-top:28px;white-space:nowrap}
/* The band is interactive: each plate carries a picker, and the pair adds to the cart from here.
   The select sits under its plate and is styled as part of the cell rather than as a form control,
   so the equation still reads as an equation. 44px keeps it tappable. */
/* .eqcap was nowrap for a one-line caption; it now holds a button and a hint line. */
/* The 8th grid column is a short caption beside the equation - that is the original design and
   the padding-top values across .eqop/.eqcut/.eqsum/.eqcap are hand-tuned to line up with the
   plate. Making it a flex row with a long string broke that alignment, so it goes back to a
   single nowrap line. The add button lives in .eqbot instead. */
.eqcell{position:relative}
/* The PLATE is the control. The select is a transparent overlay filling the cell, so the band
   looks exactly like the static equation until you tap a plate, and then you get the native
   picker - no custom popover, and it behaves correctly on a phone. */
.eqcell{cursor:pointer}
.eqsel{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;border:0;background:transparent;font-size:16px;
  font-family:var(--fbody)}
/* The native list is OS-drawn, but it does honour these: color-scheme keeps it dark to match the
   site instead of flashing a white panel, and the font stops it rendering in Arial. */
.eqsel,.eqsel option{color-scheme:dark;font-family:var(--fbody);background:var(--surface-2);color:var(--text)}
.eqsel option{padding:8px 10px;font-size:13.5px}
/* Hover is not available on a phone, so the plate carries a small permanent caret. */
.eqplate::after{content:'';position:absolute;right:5px;bottom:5px;width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--gold);
  opacity:.55;transition:opacity .25s}
.eqcell:hover .eqplate::after{opacity:1}
.eqcell:hover .eqplate{border-color:var(--gold-soft)}
.eqsel:focus-visible + .eqp{color:var(--accent)}
.eqcell:focus-within .eqplate{border-color:var(--accent)}
/* Small, and it sits at the bottom right of the module. */
.eqadd{display:inline-flex;align-items:center;justify-content:center;min-height:36px;
  padding:8px 15px;background:transparent;color:var(--accent);border:1px solid var(--gold-soft);
  font-family:inherit;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.eqadd:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.eqhint{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* the module's bottom line: tax note left, add button hard right */
.eqbot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.eqbot .eqfoot{margin:0}
@media(max-width:600px){
  .eqadd{font-size:9px;padding:8px 12px}
  .eqhint{display:none}
}


.eqnote{display:block;text-align:center;font-size:13px;color:var(--muted);margin:22px auto 0;
  padding-top:16px;max-width:44ch;border-top:1px solid var(--line)}
.eqnote b{color:var(--text);font-weight:400}
.eqfoot{display:block;text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:12px}

/* 340px of tracks plus gaps cannot fit a 320px phone, so the caption drops to its own
   full-width line and the plates come in. */
@media(max-width:620px){
  .eqgrid{grid-template-columns:52px 15px 52px 15px 42px 15px auto;gap:0 8px;row-gap:6px}
  .eqplate{width:52px;height:52px}
  .eqplate b{font-size:18px}
  .eqop{font-size:17px;padding-top:17px}
  .eqcut{font-size:13px;padding-top:19px}
  .eqsum{font-size:22px;padding-top:15px}
  .eqcap{grid-column:1/-1;text-align:center;padding:0 0 14px;white-space:normal}
}

/* The scarcity line. Deliberately quiet type with the NUMBERS carrying the weight - a fact stated
   plainly is more credible than the same fact shouted, and credibility is what makes it act on
   someone. The count is the urgency; the styling stays out of the way. */
#dropScarcity:empty{display:none}
#dropScarcity{margin:0 0 16px}
.scar{display:inline-flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.scar b{font-family:var(--fdisp);font-size:17px;font-weight:500;letter-spacing:0;color:var(--gold);text-transform:none}
.scar i{color:var(--faint);font-style:normal}

/* A count in the corner of a card. Same treatment as the label it replaces, with the number pulled
   up so it reads at a glance from a scrolling thumb. */
.status.limited b{font-family:var(--fdisp);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none}

/* The pre-commit line. Gold hairline above, so it reads as a condition of the transaction rather
   than a warning - a red banner here would feel like a threat, and the fact is doing the work. */
.res-urg{margin:0 0 14px;padding-top:14px;border-top:1px solid var(--line-gold);
  font-size:13px;line-height:1.65;color:var(--text)}

/* Closes-in. Sits with the scarcity line, same restraint - the number carries it. */
.dclose{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.dclose b{font-family:var(--fdisp);font-size:17px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--gold)}
#dropClose:empty{display:none}

/* Threshold meter: under 600px the per-rung labels collide (38px overlap at 390px), so the
   dots + headline carry it alone - the headline already names the next rung and its distance. */
.memb-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:7px;vertical-align:middle}

/* THE CHOICE ROWS. One grid so every label shares a column and every control shares a width -
   with a row each, the three selects had three different left edges and three widths. The label
   column is max-content so it hugs the longest label, and the control column is capped so a
   dropdown never stretches the full panel. */
.apx-row{margin:40px 26px 0;padding-top:12px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:max-content minmax(0,230px);gap:14px 20px;align-items:center}
.apx-row.bare{margin:0;padding-top:0;border-top:none}
.apx-k{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);line-height:1.5}
.apx-row select{width:100%;background:transparent;border:1px solid var(--line-strong);color:var(--text);
  font-family:inherit;font-size:12px;padding:8px 10px;min-height:var(--ctl)}
.apx-row select:focus{outline:none;border-color:var(--gold-soft)}

@media(max-width:600px){
  .mt-lbl{display:none}
  .meter-box{padding-bottom:16px!important}
  /* labels hidden -> no rail hang to clear; and a shared label column cannot fit beside a
     control at this width, so each pair stacks. */
  .apx-row{margin:14px 0 0;grid-template-columns:1fr;gap:6px 0}
  .apx-k{margin-top:8px}
  .apx-row select{max-width:100%}
}

/* footer */
footer{border-top:1px solid var(--line);padding:72px 0 48px;text-align:center}
footer .fcrest{height:70px;margin:0 auto 26px;display:block;opacity:.85}
.foot-brand{font-family:var(--fdisp);font-size:28px;letter-spacing:.04em;margin-bottom:9px}
.foot-nav{display:flex;gap:28px;flex-wrap:wrap;justify-content:center;margin:28px 0 38px}
.foot-nav a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}.foot-nav a:hover{color:var(--text)}
.disclaimer{font-size:12px;line-height:1.85;color:var(--muted);max-width:740px;margin:0 auto;border-top:1px solid var(--line);padding-top:28px}
.copy{margin-top:24px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* drawers */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(2px);z-index:200;opacity:0;pointer-events:none;transition:.35s}
.scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:466px;max-width:92vw;background:var(--bg);border-left:1px solid var(--line-strong);z-index:300;transform:translateX(100%);transition:transform .42s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-40px 0 80px -40px rgba(0,0,0,.9)}
.drawer.show{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:24px 30px;border-bottom:1px solid var(--line)}
.drawer-close{background:none;border:none;color:var(--muted);font-size:20px}.drawer-close:hover{color:var(--text)}
.drawer-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:30px;scrollbar-width:thin}
.pd-more{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:10px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);transition:border-color .25s,color .25s}
.pd-more:hover{border-color:var(--gold-soft);color:var(--accent)}
.drawer-foot{border-top:1px solid var(--line);padding:24px 30px}
.pd-img{position:relative;aspect-ratio:4/3;background-size:cover;background-position:center;background-color:#0d0d0f;margin-bottom:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);overflow:hidden}
.pd-img.empty{background-image:radial-gradient(circle at 50% 40%,rgba(255,255,255,.025),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.013) 0 11px,transparent 11px 22px)}
.pd-img .crestph{height:50%;opacity:.5}
.pd-el{margin-bottom:10px;color:var(--muted);letter-spacing:.26em}
.pd-name{font-family:var(--fdisp);font-size:36px;margin-bottom:11px;line-height:1.04}
.pd-cat{margin-bottom:22px}
.pd-desc{color:var(--text);margin-bottom:26px;font-style:italic;font-family:var(--fdisp);font-size:17px;line-height:1.5;opacity:.9}
.pd-row{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;font-size:12.5px;padding:12px 0}
.pd-row + .pd-row{border-top:1px dotted rgba(255,255,255,.13)}
.pd-row .k{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;font-size:10px;white-space:nowrap}
.pd-row .v{color:var(--text);text-align:right}
.pd-row .v a{color:var(--accent);border-bottom:1px solid var(--line-strong)}
.res-item{display:flex;gap:15px;align-items:flex-start;padding:17px 0;border-bottom:1px solid var(--line)}
.res-item .ri-img{width:62px;height:62px;flex:none;background-size:cover;background-position:center;background-color:#0d0d0f;border:1px solid var(--line)}
.res-item .ri-name{font-family:var(--fdisp);font-size:19px}
.res-item .ri-cat{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.res-item .ri-x{margin-left:auto;background:none;border:none;color:var(--faint);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}.res-item .ri-x:hover{color:var(--text)}
.res-empty{color:var(--muted);font-size:14px;text-align:center;padding:44px 0;line-height:1.7}
.fulfil{display:flex;gap:10px;margin:24px 0 20px}
.fulfil button{flex:1;padding:13px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;background:transparent;border:1px solid var(--line);color:var(--muted);transition:.3s}
.fulfil button.active{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.field{margin-bottom:15px}
.field label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.field input,.field textarea{width:100%;min-height:var(--ctl);background:var(--surface);border:1px solid var(--line);color:var(--text);padding:13px 15px;font-family:inherit;font-size:14px;font-weight:300;transition:border-color .3s}
.field textarea{min-height:calc(var(--ctl) * 1.6)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field select{width:100%;min-height:var(--ctl);background:var(--surface);border:1px solid var(--line);color:var(--text);padding:13px 15px;font-family:inherit;font-size:14px;font-weight:300;transition:border-color .3s;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select:focus{outline:none;border-color:var(--accent)}
.zone-note{font-size:12px;color:#caa07e;line-height:1.65;margin-top:10px}
.res-note{font-size:11.5px;color:var(--muted);margin-top:16px;line-height:1.7}
#resSent{display:none;text-align:center;padding:34px 0}
#resSent .ok{font-family:var(--fdisp);font-size:28px;margin-bottom:11px;color:var(--text)}#resSent p{color:var(--muted);font-size:14px;line-height:1.7}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.ch{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.chrow{display:flex;align-items:baseline;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.chrow .ck{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);width:96px;flex:none}
.chrow .cv{font-family:var(--fdisp);font-size:21px;color:var(--text)}
.chrow a.cv{border-bottom:1px solid var(--line-strong);transition:.3s}.chrow a.cv:hover{color:var(--accent);border-color:var(--accent)}
.chrow .cv.empty{font-family:var(--fbody);font-size:12.5px;color:var(--faint);font-style:normal;letter-spacing:.04em}
.cnote{color:var(--muted);font-size:13.5px;line-height:1.8;margin-top:26px;max-width:46ch}

/* ---- lab results page ---- */
.sec-sub{color:var(--muted);font-size:14px;line-height:1.8;max-width:600px;margin-bottom:40px}
.seal{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.seal span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:9px 15px}
.seal span b{color:var(--text);font-weight:500}
.cur-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cur{position:relative;background:var(--surface);border:1px solid var(--line);padding:26px 24px 24px;display:flex;flex-direction:column;transition:border-color .4s,background .4s,transform .5s var(--ease),box-shadow .4s}
.cur:hover{border-color:var(--line-strong);background:var(--surface-2);transform:translateY(-4px);box-shadow:0 24px 56px -30px rgba(0,0,0,.85)}
.cur .tag{position:absolute;top:18px;right:18px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:7px}
.cur .tag .d{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(236,235,232,.5);animation:tp 2.6s ease-out infinite}
@keyframes tp{0%{box-shadow:0 0 0 0 rgba(236,235,232,.4)}70%,100%{box-shadow:0 0 0 9px rgba(236,235,232,0)}}
.cur .bid{font-size:11px;letter-spacing:.18em;color:var(--muted);margin-bottom:16px}
.cur .bid:hover{color:var(--text)}
.cur h3{font-family:var(--fdisp);font-weight:500;font-size:25px;line-height:1.05;margin-bottom:4px}
.cur .cat{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.cur .read{border-top:1px solid var(--line);padding-top:16px;margin-top:auto;display:flex;flex-direction:column;gap:10px}
.cur .rr{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cur .rr .k{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cur .rr .v{font-family:var(--fdisp);font-size:19px;color:var(--text)}
.cur .coa{margin-top:18px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-strong);padding-bottom:5px;align-self:flex-start;transition:.3s}
.cur .coa:hover{color:var(--accent);border-color:var(--accent)}
.yearbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.arow{display:grid;grid-template-columns:118px 1.5fr 1fr 1fr auto;gap:22px;align-items:center;padding:20px 0;border-top:1px solid var(--line);transition:padding-left .35s var(--ease)}
.arow:last-child{border-bottom:1px solid var(--line)}
.arow:hover{padding-left:8px}
.arow .bid{font-size:11.5px;letter-spacing:.14em;color:var(--accent)}
.arow .ap{font-family:var(--fdisp);font-size:20px;line-height:1.1}
.arow .ap small{display:block;font-family:var(--fbody);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-top:5px}
.arow .ad{font-size:12.5px;color:var(--muted)}
.arow .ac{font-size:12.5px;color:var(--text)}
.arow .ac small{display:block;color:var(--faint);font-size:11px;margin-top:3px}
.arow .lc{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-strong);padding-bottom:3px;white-space:nowrap;justify-self:end;transition:.3s}
.arow .lc:hover{color:var(--accent);border-color:var(--accent)}
.arow .lc.na{color:var(--faint);border-color:transparent;pointer-events:none}
.yhead{font-family:var(--fdisp);font-size:15px;color:var(--muted);letter-spacing:.1em;padding:30px 0 6px}
.howto{background:var(--surface);border:1px solid var(--line);padding:clamp(28px,4vw,44px)}
.howto h2{font-family:var(--fdisp);font-weight:500;font-size:clamp(24px,3vw,32px);margin-bottom:24px}
.htgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.htgrid div .label{display:block;margin-bottom:10px;color:var(--accent)}
.htgrid div p{color:var(--muted);font-size:13.5px;line-height:1.75}
@media(max-width:760px){.cur-grid{grid-template-columns:1fr}.arow{grid-template-columns:90px 1fr auto;gap:14px}.arow .ad,.arow .ac{display:none}.htgrid{grid-template-columns:1fr;gap:24px}}

/* ---- price + add on cards ---- */
.card .cardfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto}
.card .price{font-family:var(--fdisp);font-size:23px;color:var(--text);line-height:1}
.card .price.tba{font-family:var(--fbody);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.card .cardacts{display:flex;align-items:center;gap:16px}
.card .open{margin:0}
.card .add{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:var(--accent);border:1px solid var(--accent);padding:11px 17px;transition:background .3s,color .3s}
.card .add:hover{background:transparent;color:var(--accent)}

/* ---- add-to-cart toast ---- */
.toast{position:fixed;padding-bottom:env(safe-area-inset-bottom,0px);left:50%;bottom:30px;transform:translateX(-50%) translateY(22px);z-index:800;background:var(--surface-2);border:1px solid var(--line-strong);color:var(--text);padding:14px 16px 14px 22px;display:flex;align-items:center;gap:20px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .3s,transform .35s var(--ease);box-shadow:0 22px 54px -22px rgba(0,0,0,.85)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast a{color:var(--accent);border-bottom:1px solid var(--line-strong);padding-bottom:3px}

/* ---- cart page ---- */
.cart-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:54px;align-items:start}
.citem{display:flex;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.citem:first-child{border-top:1px solid var(--line)}
.citem .ci-img{width:78px;height:78px;flex:none;background-size:cover;background-position:center;background-color:#0d0d0f;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.citem .ci-img img{height:58%;opacity:.5}
.citem .ci-main{flex:1;min-width:0}
.citem .ci-name{font-family:var(--fdisp);font-size:22px;line-height:1.08}
.citem .ci-cat{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.citem .ci-unit{font-size:12px;color:var(--muted);margin-top:7px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong)}
.qty button{width:44px;height:44px;background:none;border:none;color:var(--muted);font-size:15px;transition:color .25s}.qty button:hover{color:var(--text)}
.qty span{min-width:30px;text-align:center;font-size:13px;color:var(--text)}
.citem .ci-line{font-family:var(--fdisp);font-size:22px;width:82px;text-align:right;flex:none}
.citem .ci-x{background:none;border:none;color:var(--muted);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;flex:none;margin-left:4px}.citem .ci-x:hover{color:var(--text)}
.csum{background:var(--surface);border:1px solid var(--line);padding:30px;position:sticky;top:96px}
.csum h2{font-family:var(--fdisp);font-weight:500;font-size:24px;margin-bottom:18px}
#cartSummary .row{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;font-size:13px;color:var(--muted)}
#cartSummary .row .v{color:var(--text)}
#cartSummary .row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:18px;color:var(--text);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
#cartSummary .row.total .v{font-family:var(--fdisp);font-size:30px;letter-spacing:0;text-transform:none}
.csum .fulfil{margin:18px 0 8px}
.pay{margin-top:20px;border-top:1px solid var(--line);padding-top:22px}
.pay .label{display:block;margin-bottom:12px;color:var(--accent)}
.pay .methods{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.pay .pm-chip{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text);border:1px solid var(--line-strong);padding:9px 14px;background:rgba(255,255,255,.014)}
.pay .remit{font-size:12.5px;color:var(--muted);line-height:1.75}
.pay .remit b{color:var(--text)}
.pay .card-soon{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;border:1px dashed var(--line-strong);padding:13px 15px;color:var(--faint);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.pay .card-soon .tag{color:var(--muted)}
.cart-empty{text-align:center;padding:74px 0;color:var(--muted);line-height:1.8}
.cart-empty .ce-h{font-family:var(--fdisp);font-size:30px;color:var(--text);margin-bottom:14px}
@media(max-width:820px){.cart-grid{grid-template-columns:1fr;gap:34px}.csum{position:static}}
@media(max-width:560px){
  .citem{flex-wrap:wrap;row-gap:14px;align-items:flex-start}
  .citem .ci-img{width:64px;height:64px}
  .citem .ci-main{flex:1 1 calc(100% - 82px)}
  .citem .ci-name{font-size:19px}
  .citem .qty{order:3}
  .citem .ci-line{order:4;width:auto;margin-left:auto;align-self:center}
  .citem .ci-x{order:5;flex-basis:100%;text-align:right;margin:0}
}

/* ============================================================
   REFINEMENT LAYER — tier sections, de-boxed cards, size + pay UI
   ============================================================ */
/* tier-grouped selection */
.tiersec{margin-bottom:clamp(56px,7vw,84px)}
.tiersec:last-child{margin-bottom:0}
.tier-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line-strong);padding-bottom:18px;margin-bottom:36px}
.tier-name{font-family:var(--fdisp);font-weight:500;font-size:clamp(26px,3.6vw,42px);line-height:1}
.tier-sub{margin-top:11px}
.tier-price{font-family:var(--fdisp);font-size:19px;color:var(--muted);white-space:nowrap;letter-spacing:.01em}
.tiersec.is-black .tier-head{border-bottom-color:rgba(231,225,214,.28)}
@media(max-width:600px){.tier-head{flex-direction:column;align-items:flex-start;gap:10px}.tier-price{font-size:16px}}

/* de-boxed editorial cards (override the boxed defaults) */
.card{background:transparent;border:none;overflow:visible;box-shadow:none}
.card .ph{border:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold)}
.card.in:hover{transform:translateY(-5px);background:transparent;box-shadow:none}
.card.in:hover .ph{border-color:var(--line-strong)}
.card .body{padding:18px 0 2px}
.card h3{font-size:28px;margin-bottom:12px}
.card .meta{font-size:12.5px;margin-bottom:0}
.card .cardfoot{padding-top:15px;margin-top:15px;border-top:1px solid var(--line-gold)}
.card.bl{background:transparent;border:none;box-shadow:none}
.card.bl .ph{border-color:rgba(231,225,214,.24)}
.card.bl.in:hover{box-shadow:none}
.card.bl.in:hover .ph{border-color:rgba(231,225,214,.4)}
.card.bl::after{top:0;height:1px}

/* product drawer: size selector */
.pd-sizes{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 24px}
.pd-size{flex:1;min-width:84px;display:flex;flex-direction:column;gap:6px;align-items:center;padding:14px 10px;background:transparent;border:1px solid var(--line-strong);color:var(--muted);font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:.3s}
.pd-size b{font-family:var(--fdisp);font-size:18px;font-weight:500;letter-spacing:0;color:inherit}
.pd-size:hover{color:var(--text)}
.pd-size.active{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.pd-size-one{margin:0 0 24px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* payment funnel */
.pay-intro{font-size:12.5px;color:var(--muted);line-height:1.7;margin-bottom:16px}
.paybtns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.paybtn{flex:1;min-width:88px;min-height:var(--ctl);display:inline-flex;align-items:center;justify-content:center;padding:8px 13px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;background:transparent;border:1px solid var(--line-strong);color:var(--muted);transition:.3s}
.paybtn:hover{color:var(--text)}
.paybtn.active{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.pay-detail{border:1px solid var(--line);padding:17px;margin-bottom:14px;background:rgba(231,225,214,.02)}
.pay-handle{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ph-k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ph-v{font-family:var(--fdisp);font-size:22px;color:var(--text)}
.ph-v.faint{font-family:var(--fbody);font-size:12.5px;color:var(--muted)}
.ph-copy{margin-left:auto;background:none;border:1px solid var(--line-strong);color:var(--muted);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:8px 13px;transition:.3s}.ph-copy:hover{color:var(--text);border-color:var(--accent)}
.pay-note{font-size:12px;color:var(--muted);line-height:1.65;margin-top:11px}

/* category-grouped selection + buttery inline buy */
.catsec{margin-bottom:clamp(34px,4vw,48px);padding:0}.catsec:last-child{margin-bottom:0}
.cat-h{font-family:var(--fdisp);font-weight:500;font-size:clamp(26px,3.4vw,40px);line-height:.97;margin-bottom:20px;border-bottom:1px solid var(--line-strong);padding-bottom:14px}
.tiersub{margin-bottom:clamp(40px,5vw,58px)}.tiersub:last-child{margin-bottom:0}
.tiersub .tier-head{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:30px}
.tiersub .tier-name{font-size:clamp(21px,2.6vw,30px)}
.tier-name .ly{font-family:var(--fdisp);font-style:italic;font-size:15px;letter-spacing:.01em;text-transform:lowercase;color:var(--muted);margin-left:14px;vertical-align:baseline;white-space:nowrap}
.tiersub.is-black .tier-head{border-bottom-color:rgba(231,225,214,.26)}
.szrow{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.szp{font-size:10.5px;letter-spacing:.05em;color:var(--muted);border:1px solid var(--line-strong);background:transparent;padding:9px 12px;transition:background .25s,color .25s,border-color .25s;white-space:nowrap}
.szp:hover{color:var(--text);border-color:var(--text)}
.szp.active{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.card .cardfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:none!important;padding-top:0;margin-top:0}
.card .add.full{flex:1;background:var(--accent);color:var(--ink);border:1px solid var(--accent);padding:12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;transition:background .25s,transform .12s}
.card .add.full:hover{background:#fbf7f0}.card .add.full:active{transform:scale(.985)}
.card .open.mini{min-height:44px;display:inline-flex;align-items:center;flex:none;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-strong);padding-bottom:3px}
.card .open.mini:hover{color:var(--text)}

/* clean gallery card */
.card{cursor:pointer;display:flex;flex-direction:column}
.card .body{padding:16px 0 2px;flex:1;display:flex;flex-direction:column}
.card .cardfoot{margin-top:auto}
.card .ph{aspect-ratio:1/1;position:relative;overflow:hidden}
.ptier{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.card .body{padding:16px 0 2px}
.card h3{font-size:23px;margin-bottom:0;line-height:1.12;min-height:2.24em;display:flex;align-items:flex-start}
.card .cardfoot{display:flex!important;align-items:baseline;justify-content:space-between;gap:10px 12px;flex-wrap:wrap;border-top:none!important;padding-top:13px;margin-top:13px}
.card .price{font-family:var(--fdisp);font-size:20px;color:var(--text);white-space:nowrap}
.card .price.tba{font-family:var(--fbody);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.addcue{min-height:44px;display:inline-flex;align-items:center;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);transition:letter-spacing .25s,opacity .25s;opacity:.85;white-space:nowrap}
.card:hover .addcue{letter-spacing:.26em;opacity:1}
.card .crestph{transition:transform .9s var(--ease),opacity .4s}
.card:hover .crestph{transform:scale(1.05)}
.addcue.muted{color:var(--faint)}

/* featured carousel (home) */
.carwrap{position:relative}
.carousel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 2px 14px}
.carousel::-webkit-scrollbar{display:none}
.carousel>.card{flex:0 0 clamp(216px,38vw,264px);min-width:0;scroll-snap-align:start}
.cbtn{position:absolute;top:34%;transform:translateY(-50%);width:46px;height:46px;border:1px solid var(--line-strong);background:rgba(10,9,8,.72);backdrop-filter:blur(6px);color:var(--text);z-index:3;font-size:15px;transition:opacity .3s,border-color .3s,color .3s;display:flex;align-items:center;justify-content:center}
.cbtn:hover{border-color:var(--accent);color:var(--accent)}
.cbtn.prev{left:-14px}.cbtn.next{right:-14px}
@media(max-width:680px){.cbtn{display:none}.carousel>.card{flex:0 0 76%}}

@media(max-width:900px){.grid,.grid.two{grid-template-columns:1fr 1fr}.about{grid-template-columns:1fr;gap:48px}.contact-grid{grid-template-columns:1fr;gap:40px}.lab-row{grid-template-columns:96px 1fr auto;gap:14px}.lab-row .ld{display:none}}
@media(max-width:860px){
  .nav ul{display:none}.menu-toggle{display:inline-flex}
  .nav ul.open{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:22px 34px;gap:22px}
}
@media(max-width:600px){
  .grid,.grid.two{grid-template-columns:1fr}
  section{padding:84px 0}.hero{padding:84px 0 64px}.sec-head{gap:18px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.card,.crestwrap,.hero .dpill,.hero .el,.hero h1,.hero .tag,.hero-actions,.hero .orn,
  #gate .gate-crest,#gate .mark,#gate .el,#gate p,#gate .gate-actions{opacity:1!important;transform:none!important;filter:none!important}
  .sheen,.hero .glow,.card.bl::after{display:none}
}

/* product drawer gallery */
.pd-thumbs{display:flex;gap:9px;margin:-16px 0 24px}
.pd-thumb{width:58px;height:44px;border:1px solid var(--line);background-size:cover;background-position:center;background-color:#0d0d0f;cursor:pointer;padding:0;opacity:.55;transition:opacity .3s,border-color .3s}
.pd-thumb:hover{opacity:.85}
.pd-thumb.active{opacity:1;border-color:var(--line-strong)}
.pd-thumb:focus-visible{outline:1px solid var(--accent);outline-offset:2px}

/* ============================================================
   MOTION & DEPTH SYSTEM — sharp geometry, living light. 2026-07.
   Two easings + one timing scale; every effect reuses them.
   ============================================================ */
:root{
  --ease-out:cubic-bezier(.19,.8,.22,1);
  --ease-spring:cubic-bezier(.3,1.33,.36,1);
  --t-fast:.26s;--t-med:.52s;--t-slow:1.05s;
  --sh-1:0 1px 2px rgba(0,0,0,.45),0 8px 20px -10px rgba(0,0,0,.6);
  --sh-2:0 3px 8px rgba(0,0,0,.42),0 26px 52px -22px rgba(0,0,0,.74);
  --glow-warm:0 18px 44px -18px rgba(233,227,216,.28);
}

/* ---- buttons: magnetic ink-fill with a glint ---- */
.btn{transform:translate3d(var(--magx,0px),var(--magy,0px),0);
  transition:border-color var(--t-med),color var(--t-med),letter-spacing var(--t-med) var(--ease-out),transform .38s var(--ease-out),box-shadow var(--t-med) var(--ease-out)}
.btn::before{z-index:-1;background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.34) 50%,transparent 68%);transition:transform .9s var(--ease-out)}
.btn::after{content:'';display:block;position:absolute;inset:-1px;z-index:-2;background:var(--accent);transform:translateY(102%);transition:transform var(--t-med) var(--ease-out)}
.btn:hover{border-color:var(--accent);color:var(--ink);letter-spacing:.33em;box-shadow:var(--glow-warm)}
.btn:hover::after{transform:translateY(0)}
.btn:active{transform:translate3d(var(--magx,0px),var(--magy,0px),0) scale(.972);box-shadow:0 6px 18px -12px rgba(233,227,216,.2);transition-duration:.12s}
.btn.solid{box-shadow:0 10px 28px -16px rgba(233,227,216,.4)}
.btn.solid::after{transform:none;transition:background var(--t-med)}
.btn.solid:hover{border-color:#fbf7f0;box-shadow:0 16px 42px -16px rgba(233,227,216,.55)}
.btn.solid:hover::after{background:#fbf7f0}
.btn.ghost::before,.btn.ghost::after{display:none}
.btn.ghost{background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-size:0% 1px;background-position:50% calc(100% - 10px);transition:color var(--t-med),letter-spacing var(--t-med) var(--ease-out),transform .38s var(--ease-out),background-size .5s var(--ease-out)}
.btn.ghost:hover{color:var(--text);border-color:transparent;box-shadow:none;background-size:52% 1px}

/* ---- inputs: sharp, inset depth, glowing focus ---- */
.field input,.field textarea,.field select{border-radius:0;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(255,255,255,.012));box-shadow:inset 0 1px 3px rgba(0,0,0,.5);transition:border-color .3s,box-shadow .5s var(--ease-out)}
.field input:focus,.field textarea:focus,.field select:focus{box-shadow:inset 0 1px 3px rgba(0,0,0,.5),0 0 0 3px rgba(233,227,216,.09),0 0 26px -6px rgba(233,227,216,.2)}
.drop input{transition:border-color .3s,box-shadow .5s var(--ease-out)}
.drop input:focus{box-shadow:0 0 0 3px rgba(233,227,216,.09),0 0 26px -6px rgba(233,227,216,.2)}

/* ---- chips + selectors: sharp again, tactile press ---- */
.chip{border-radius:0;transition:transform var(--t-fast) var(--ease-out),border-color .3s,color .3s,background .3s,box-shadow .3s}
.chip:hover{transform:translateY(-1px)}
.chip:active{transform:translateY(0) scale(.96)}
.chip.active,.paybtn.active,.pd-size.active,.fulfil button.active,.szp.active{box-shadow:0 8px 24px -12px rgba(233,227,216,.4)}
.paybtn,.pd-size,.fulfil button,.szp{min-height:var(--ctl);display:inline-flex;align-items:center;justify-content:center;transition:background .3s,color .3s,border-color .3s,transform var(--t-fast) var(--ease-out),box-shadow .3s}
.paybtn:active,.pd-size:active,.fulfil button:active,.szp:active{transform:scale(.96)}
.dpill{box-shadow:var(--sh-1),inset 0 1px 0 rgba(255,255,255,.05)}
.reserve-btn .count{box-shadow:0 2px 10px -3px rgba(233,227,216,.55)}

/* ---- product tiles: focus-pull entrance, cursor light, interior zoom ---- */
.card{opacity:0;transform:translateY(26px);filter:blur(7px);transition:opacity .7s ease,filter .7s ease,transform .7s var(--ease-out),border-color .4s,background .4s,box-shadow var(--t-med) var(--ease-out)}
.card.in{opacity:1;transform:none;filter:none}
.card.in:hover{transform:translateY(-6px)}
.card .ph{--mx:50%;--my:50%;isolation:isolate;transition:border-color .4s,box-shadow var(--t-med) var(--ease-out)}
.card .ph .phz{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transform:scale(1.001);transition:transform 1.15s var(--ease-out)}
.card.in:hover .ph .phz{transform:scale(1.055)}
.card .ph::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(300px circle at 50% 22%,rgba(233,227,216,.15),transparent 66%);
  transition:opacity .42s var(--ease-out)}
.card.in:hover .ph::before{opacity:1;transition:opacity .55s var(--ease-out)}
.card .ph{transition:box-shadow .34s var(--ease-out),border-color .4s}
.card.in:hover .ph{box-shadow:0 26px 60px -26px rgba(0,0,0,.92),var(--glow-warm);transition:box-shadow .55s var(--ease-out),border-color .4s}
.card .crestph{position:relative;z-index:0}
.card .stamp{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.45);text-shadow:0 1px 0 rgba(0,0,0,.7)}

/* ---- carousel arrows ---- */
.cbtn{transition:opacity .3s,border-color .3s,color .3s,transform .3s var(--ease-out),box-shadow .3s}
.cbtn:hover{transform:translateY(-50%) scale(1.06);box-shadow:0 12px 30px -14px rgba(0,0,0,.8)}
.cbtn:active{transform:translateY(-50%) scale(.94)}

/* ---- index rows: sharp, floating ---- */
.idxrow{transition:padding-left .45s var(--ease-out),background .45s,box-shadow .5s var(--ease-out)}
.idxrow:hover{box-shadow:0 24px 56px -34px rgba(0,0,0,.85)}

/* ---- header: condenses on scroll ---- */
.nav{transition:height .5s var(--ease-out)}
header.scrolled .nav{height:58px}
header.scrolled{box-shadow:0 18px 40px -26px rgba(0,0,0,.7)}

/* ---- hero: ambient aura + slow crest float ---- */
.hero .glow{filter:blur(8px);opacity:.92}
body.entered .hero .crestwrap{animation:hUp 1.2s .04s var(--ease) both,crestFloat 12s 4s ease-in-out infinite}
@keyframes crestFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---- gate: grain flares then settles as it clears ---- */
body.entering .grain{animation:grainFlare 1.25s ease-out}
@keyframes grainFlare{0%{opacity:.028}22%{opacity:.15}100%{opacity:.028}}

/* ---- subpage hero entrance ---- */
body.entered .phero .el{animation:fadeUp .85s .05s var(--ease-out) both}
body.entered .phero h1{animation:fadeUp .9s .16s var(--ease-out) both}
body.entered .phero p{animation:fadeUp .9s .28s var(--ease-out) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---- drawer: spring slide, blur ramp, content stagger ---- */
.scrim{backdrop-filter:blur(0px);transition:opacity .45s ease,backdrop-filter .55s ease,background .45s}
.scrim.show{background:rgba(0,0,0,.6);backdrop-filter:blur(7px)}
.drawer{transition:transform .62s var(--ease-spring);box-shadow:-56px 0 130px -50px rgba(0,0,0,.95),inset 1px 0 0 rgba(255,255,255,.05)}
.pd-img{box-shadow:var(--sh-1)}
.drawer .drawer-body>*,.drawer .drawer-foot>*{opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease}
.drawer.show .drawer-body>*,.drawer.show .drawer-foot>*{opacity:1;transform:none;transition:opacity .55s ease,transform .6s var(--ease-out)}
.drawer.show .drawer-body>*:nth-child(1){transition-delay:.1s}
.drawer.show .drawer-body>*:nth-child(2){transition-delay:.15s}
.drawer.show .drawer-body>*:nth-child(3){transition-delay:.19s}
.drawer.show .drawer-body>*:nth-child(4){transition-delay:.23s}
.drawer.show .drawer-body>*:nth-child(5){transition-delay:.27s}
.drawer.show .drawer-body>*:nth-child(6){transition-delay:.3s}
.drawer.show .drawer-body>*:nth-child(7){transition-delay:.33s}
.drawer.show .drawer-body>*:nth-child(8){transition-delay:.36s}
.drawer.show .drawer-body>*:nth-child(n+9){transition-delay:.39s}
.drawer.show .drawer-foot>*{transition-delay:.42s}

/* ---- toast: spring in ---- */
.toast{transition:opacity .35s,transform .5s var(--ease-spring)}

/* ---- page-to-page cross-fade (no-op where unsupported) ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtFade .26s ease both}
::view-transition-new(root){animation:vtIn .4s ease both}
@keyframes vtFade{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}

/* ---- crest watermark parallax (JS drives --par) ---- */
.swm{transform:translate(-50%,calc(-50% + var(--par,0px)))}

/* ---- reduced motion: extend the kill switch ---- */
@media(prefers-reduced-motion:reduce){
  .drawer .drawer-body>*,.drawer .drawer-foot>*{opacity:1!important;transform:none!important}
  .phero .el,.phero h1,.phero p{animation:none!important;opacity:1!important;transform:none!important}
  .card .ph::before{display:none}
  .card .ph,.card.in:hover .ph::before{transition:none!important}
  .card .ph .phz{transform:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  header.scrolled .nav{height:72px}
  .swm{transform:translate(-50%,-50%)}
}

/* ============================================================
   CARE LAYER — obsessive ergonomics. 2026-07-21.
   Bigger touch targets, inline field errors, undo toasts,
   keyboard focus, held-items bar. No new colors, no radius.
   ============================================================ */
/* Real 44px minimums. Both of these sat under it: .qty at 42px, and Remove had NO height
   rule at any breakpoint - 12px padding on 9.5px text resolves to 34px. Remove is the
   destructive action in the cart, sitting beside the quantity controls, on the surface that
   matters most on a phone. A button needs a stated minimum, not a padding sum that happens
   to land near one. */
.qty button{width:44px;height:44px}
.citem .ci-x{padding:12px 10px;min-height:44px;display:inline-flex;align-items:center;justify-content:flex-end}
.drawer-close{padding:10px 14px;margin:-10px -14px;transition:color .25s,transform .35s var(--ease-out)}
.drawer-close:hover{transform:rotate(90deg)}
/* 26px circle on the text's own row. A 44px touch target is still met via a
   pseudo-element, so the drawn size and the hit area stop fighting each other -
   content-box plus 9px padding rendered a 46px control and forced a 48px line box. */
.memx{width:26px;height:26px;padding:0;position:relative;flex:none}
.memx::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}
.field.err input,.field.err textarea,.field.err select{border-color:#cf9b6a;box-shadow:inset 0 1px 3px rgba(0,0,0,.5),0 0 0 3px rgba(207,155,106,.12)}
.field.err label{color:#cf9b6a}
.card[role="button"]:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.toast .tact{background:none;border:1px solid var(--line-strong);color:var(--accent);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:9px 15px;transition:border-color .3s,color .3s}
.toast .tact:hover{border-color:var(--accent)}
#cartbar{position:fixed;left:14px;right:14px;bottom:14px;z-index:120;display:none;align-items:center;gap:14px;background:rgba(13,12,10,.93);backdrop-filter:blur(14px);border:1px solid var(--line-strong);padding:15px 20px calc(15px + env(safe-area-inset-bottom,0px));box-shadow:0 24px 60px -22px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05);transform:translateY(90px);opacity:0;transition:transform .6s var(--ease-spring),opacity .4s}
#cartbar.show{transform:none;opacity:1}
#cartbar .cb-n{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
#cartbar .cb-s{font-size:21px;color:var(--text);margin-left:auto;line-height:1}
#cartbar .cb-go{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
/* Desktop: a compact pill on the right, not a full-width bar. */
#cartbar{display:flex;left:auto;right:20px;bottom:20px;width:auto;max-width:min(420px,calc(100vw - 40px));border-radius:100px;padding:13px 20px}
#cartbar.checkout{border-radius:14px}
@media(max-width:900px){
  /* back to a full-width thumb bar where the thumb actually is */
  #cartbar{left:14px;right:14px;max-width:none}
}
@media(max-width:680px){
  #cartbar{left:10px;right:10px;bottom:14px;width:auto;max-width:none;border-radius:14px;padding:13px 15px calc(13px + env(safe-area-inset-bottom,0px))}
  body.has-cartbar{padding-bottom:88px}
  body.has-cartbar .toast{bottom:104px}
}
@media(prefers-reduced-motion:reduce){#cartbar{transition:opacity .2s}}

/* ============================================================
   BRAND JEWEL ACCENTS — packaging palette (matte black · ivory
   #E7DFC8 · gold hairline · burgundy #6B373D). Burgundy stays a
   jewel: scarcity signals + link hover only.
   ============================================================ */
a:hover{color:var(--burgundy-lift)}
.nav ul a:hover,.nav ul a.active{color:var(--text)}
.btn:hover,.btn.solid:hover{color:var(--ink)}
.btn:not(.solid):hover{color:var(--accent)}
.orn span{background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}
.pd-why{border-left-color:var(--burgundy-lift)}
.memba a{color:var(--blush)}
/* No certificate yet. This is the substantive compliance disclosure on the lab
   page - the honest statement chosen over publishing unsourced numbers - so it
   uses --muted (~6.3:1), not the --faint used for labels that sit beside a bright
   value. It is the only content in its slot and has to be read. */
.pend{font-family:var(--fbody);font-size:12px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lab-row .lc.na,.cur .coa.na,.arow .lc.na{color:var(--muted);border-bottom-color:transparent;cursor:default}
.lab-row .lc.na:hover,.cur .coa.na:hover,.arow .lc.na:hover{color:var(--muted);border-color:transparent}
.arow .ac small:empty{display:none}
/* no public channels configured yet - point at the form, which does work */
.chnone{font-size:14.5px;line-height:1.75;color:var(--muted);max-width:34ch;margin:0}
.chnone b{color:var(--text);font-weight:400}
/* The Δ9 ceiling is a legal claim, not a lab reading - shown as a definitional
   statement so it can't be mistaken for a measured figure. */
.cur .rr.claim .v{font-size:15px;color:var(--muted);letter-spacing:.02em}
.cur .rr.claim .k{color:var(--gold);opacity:.8}
.curnote{font-size:11.5px;line-height:1.6;color:var(--muted);margin:12px 0 0;max-width:34ch}
/* a cart line whose size no longer resolves - must read as a problem, not a price */
.citem.stale{border-left:1px solid #cf9b6a;padding-left:13px;background:rgba(207,155,106,.045)}
.citem.stale .ci-unit{color:#cf9b6a;font-size:11.5px;line-height:1.5}
.citem.stale .ci-line{color:#cf9b6a;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
/* typeset plate - stands in for photography without ten identical crests */
.plate{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.plate-crest{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:74%;width:auto;
  opacity:.09;filter:grayscale(1);pointer-events:none;transition:opacity .6s var(--ease-out)}
.plate-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:0 14px;text-align:center;max-width:100%}
.plate-tier{font-size:8.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--faint);
  overflow-wrap:anywhere;line-height:1.4}
.plate-code{font-family:var(--fdisp);font-size:clamp(23px,3.1vw,31px);line-height:1;color:var(--accent);
  letter-spacing:.06em;font-variant-numeric:lining-nums tabular-nums;opacity:.92}
.plate-rule{width:26px;height:1px;background:var(--gold-soft)}
.plate-cls{font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);opacity:.75}
.card.in:hover .plate-crest{opacity:.14}
/* The stamp sits dead centre of .ph, and so does the plate's text stack - two
   strings landing on the same pixels. Drop the stamp to the lower third so state
   and identity read as separate lines rather than one on top of the other. */
.card.is-soldout .stamp,.card.is-soon .stamp{top:auto;bottom:15px;transform:translateX(-50%)}
.card.is-soldout .plate-in,.card.is-soon .plate-in{transform:translateY(-13px)}
.card.is-soldout .plate-code,.card.is-soon .plate-code{opacity:.62}
.card.is-soldout .plate-crest,.card.is-soon .plate-crest{opacity:.05}
.pd-img .plate-code{font-size:38px}
.pd-img .plate-crest{height:66%}
@media(prefers-reduced-motion:reduce){.plate-crest{transition:none}}
/* creed - the quiet line between the hero and the drop. Sets the tone before
   anything is being sold. */
.creed{padding:92px 0 84px;position:relative}
.creed::before{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(560px,72vw);height:1px;background:linear-gradient(90deg,transparent,var(--line-gold),transparent)}
.creed .wrap{text-align:center}
.creed-q{font-family:var(--fdisp);font-style:italic;font-weight:400;
  font-size:clamp(23px,3.6vw,37px);line-height:1.42;letter-spacing:.005em;
  color:var(--text);max-width:19ch;margin:0 auto;text-wrap:balance;quotes:none}
.creed-by{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:34px}
.creed-by .orn{opacity:.5}
.creed-who{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)}
@media(max-width:600px){.creed{padding:66px 0 60px}.creed-q{max-width:16ch}}
/* hero crest drifts slower than the rest of the page - it should feel weighted */
.hero .crestwrap{animation-duration:14s!important}
/* the conservatory seed - appears in the footer once someone has looked around.
   Never labelled; it is the only living thing on the site. The glyph stays small
   and quiet, but padding grows the tap target past 44px so it is actually
   findable on a phone - the whole point of the mark. */
.seedmark{display:block;width:26px;height:26px;box-sizing:content-box;padding:10px;
  margin:16px auto 0;color:var(--gold);
  opacity:.34;transition:opacity .5s,transform .5s var(--ease-out);cursor:pointer}
.seedmark svg{width:26px;height:26px;display:block}
.seedmark:hover,.seedmark:focus-visible{opacity:.85;transform:translateY(-2px)}
.seedmark:not(.bloomed){animation:seedIdle 5.2s ease-in-out infinite}
.seedmark.bloomed{color:var(--burgundy-lift);opacity:.6}
@keyframes seedIdle{0%,100%{opacity:.26}50%{opacity:.5}}
@media(prefers-reduced-motion:reduce){.seedmark:not(.bloomed){animation:none}}
/* coupon */
#couponBox{margin-bottom:16px}
.coupon-row{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.coupon-row input{flex:1 1 190px;min-width:0;background:var(--surface);border:1px solid var(--line);color:var(--text);
  padding:0 15px;font:inherit;font-size:14px;letter-spacing:.1em;text-transform:uppercase;height:var(--ctl)}
.coupon-row input::placeholder{letter-spacing:.02em;text-transform:none;color:var(--faint)}
.coupon-row input:focus{outline:none;border-color:var(--gold-soft)}
/* Its own name. This used to be .cbtn, which the CAROUSEL also claims for its arrows -
   position:absolute, 46px square. The coupon button inherited all of it, so Apply sat out of
   flow on top of the input with its label clipped away. Two components sharing a class name
   is not a styling accident waiting to happen, it is one that already happened. */
.coupon-apply{flex:0 1 auto;background:transparent;border:1px solid var(--line-strong);color:var(--text);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:0 20px;height:var(--ctl);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  position:static;width:auto;transform:none;
  transition:border-color .25s,color .25s}
.coupon-apply:hover{border-color:var(--gold-soft);color:var(--gold)}
.coupon-msg{font-size:12.5px;margin-top:9px;min-height:1px;color:var(--muted)}
.coupon-msg.bad{color:#cf9b6a}
.coupon-msg.warn{color:#e6b566}
.coupon-on{display:flex;align-items:center;gap:14px;border:1px solid rgba(154,84,91,.45);
  background:rgba(154,84,91,.08);padding:14px 16px}
.coupon-on .cc{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;letter-spacing:.16em;color:var(--blush)}
.coupon-on .cl{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}
.coupon-on .cx{margin-left:auto;background:none;border:none;color:var(--muted);font:inherit;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer;padding:8px;transition:color .25s}
.coupon-on .cx:hover{color:var(--text)}
#cartSummary .row.disc .v{color:var(--blush)}
/* legal / trust block — the plain-English answer, class-aware */
#legalBlock{border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold);padding:76px 0;margin-top:8px}
.legal-in{max-width:680px}
.legal-in h2{font-family:var(--fdisp);font-weight:500;font-size:clamp(30px,4.4vw,44px);line-height:1.05;margin:14px 0 20px;text-wrap:balance}
.legal-in p{color:var(--muted);font-size:16px;line-height:1.8;text-wrap:pretty}
.legal-marks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px;margin:34px 0 30px;padding-top:26px;border-top:1px solid var(--line)}
.legal-marks span{display:block;font-size:12.5px;color:var(--muted);line-height:1.6}
.legal-marks b{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:7px;font-weight:500}
@media(max-width:600px){#legalBlock{padding:54px 0}}
/* sale pricing — the old price struck through beside the new one */.price .was{color:var(--faint);text-decoration:line-through;font-size:.82em;margin-right:2px;font-variant-numeric:lining-nums tabular-nums}
.pd-size .was{color:var(--faint);text-decoration:line-through;font-size:.85em;margin-right:3px}

/* ============================================================
   CRAFT PASS — typographic finesse + readability. 2026-08-04.
   No new colors, no layout changes. Only refinement.
   ============================================================ */

/* Headlines break on meaning, not on width. Body text avoids orphans. */
h1,h2,h3,.pd-name,.idxrow .it,.hero .tag,.foot-brand{text-wrap:balance}
p,.card .meta,.idxrow .ib,.phero p,.sec-sub,.disclaimer{text-wrap:pretty}

/* Display serif: proportional oldstyle figures read as typeset, not tabular.
   Prices and quantities stay lining + tabular so columns align. */
.serif,h1,h2,.pd-name,.idxrow .it{font-variant-numeric:oldstyle-nums proportional-nums}
.card .price,.chrow .cv,.cur .rr .v,.citem .ci-name,#cartbar .cb-s,.dropcd .cd b,.lab-row .lp{font-variant-numeric:lining-nums tabular-nums}

/* Readability: secondary copy was a touch tight for long-form reading. */
.card .ptier{font-size:11px;letter-spacing:.16em}
.pd-desc{font-size:14.5px;line-height:1.8}
.idxrow .ib{font-size:14px;line-height:1.72}
.phero p{font-size:16px}
.sec-sub{font-size:14.5px}

/* Small-caps labels: optical letter-spacing shouldn't apply to the last letter,
   which otherwise pushes the label off its own right edge. */
/* NOTE: an earlier "optical letter-spacing" rule set padding-right on .chip,
   .status, .label and friends. Because it came after their padding shorthand it
   silently destroyed their right padding, so text sat flush against the border.
   Trailing letter-spacing is not worth that risk — leave padding alone. */

/* Keyboard focus: visible, on-brand, and never a browser-default blue ring. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:1px solid var(--gold-soft);outline-offset:3px;border-radius:1px}
.btn:focus-visible{outline-offset:4px}

/* Selection + tap feedback in brand ink rather than system blue. */
::selection{background:var(--burgundy);color:var(--paper)}
*{-webkit-tap-highlight-color:rgba(200,177,132,.16)}

/* ============================================================
   LEGIBILITY PASS — transparency was costing readability.
   ============================================================ */
/* Tell the browser this is a dark UI, so native dropdown lists, form controls
   and scrollbars render dark instead of a bright system panel. */
:root{color-scheme:dark}

/* The sticky header sat at 55% opacity, so nav links competed with whatever
   content scrolled behind them. Blur alone can't fix contrast — and it silently
   does nothing on browsers that don't support backdrop-filter. */
header{background:rgba(9,8,7,.82)}
header.scrolled{background:rgba(9,8,7,.95)}
@supports not (backdrop-filter:blur(2px)){
  header{background:rgba(9,8,7,.97)}
}

/* Native <select> popup: style the options explicitly, or some platforms draw
   dark-on-dark and the list becomes unreadable. */
.field select option,select option{background:#141210;color:var(--text)}
.field select{background-color:var(--surface)}

/* Scrollbar: thin, dark, unobtrusive on the matte ground. */
html{scrollbar-color:var(--line-strong) var(--bg);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#221f1b;border:2px solid var(--bg);border-radius:100px}
::-webkit-scrollbar-thumb:hover{background:#2e2a24}

/* Hairline rules render crisper as gradients that fade at the ends. */
.sec-head{border-bottom:none;position:relative}
.sec-head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--gold-soft),var(--line-gold) 55%,transparent)}

/* Cards: lift the whole plate on hover instead of only tinting the border. */
.card{transition:border-color .4s,background .4s,transform .55s var(--ease-out),box-shadow .55s var(--ease-out),opacity .7s,filter .7s}
.card:hover{transform:translateY(-3px);box-shadow:0 30px 64px -34px rgba(0,0,0,.9)}
@media(prefers-reduced-motion:reduce){.card:hover{transform:none}}

/* Long strain names shouldn't collide with the price. */
.card .cardfoot{flex-wrap:wrap;row-gap:12px}

/* Cart: the total is the hero number of that page. */
.citem .ci-name{letter-spacing:.005em}

/* ============================================================
   NARROW SCREENS — 414px and under. The existing breakpoints
   stop at 480px, but .wrap's 34px gutters alone eat 21% of a
   320px viewport. Reclaim space and let every row wrap.
   ============================================================ */
@media(max-width:414px){
  :root{--gut:20px}
  .btn{padding:16px 26px;font-size:9.5px;letter-spacing:.18em}
  .hero-actions,.gate-actions{gap:10px}
  .hero-actions .btn,.gate-actions .btn{flex:1 1 auto;min-width:0}
  .drop form{gap:8px}
  .drop input{min-width:0;flex:1 1 100%}
  .drop form .btn{width:100%}
  .sec-head{gap:14px;flex-wrap:wrap;padding-bottom:20px;margin-bottom:34px}
  .sec-head .label{flex-basis:100%}
  .lab-row{grid-template-columns:1fr auto;gap:6px 12px;padding:18px 0}
  .lab-row .ld{display:none}
  .lab-row .lp{font-size:18px}
  .foot-nav{gap:16px 20px}
  .pd-row{gap:14px}
  .pd-row .v{min-width:0;overflow-wrap:anywhere}
  .drawer-head,.drawer-body{padding-left:20px;padding-right:20px}
  .drawer-foot{padding-left:20px;padding-right:20px}
  #cartbar{left:10px;right:10px;gap:10px;padding:13px 15px calc(13px + env(safe-area-inset-bottom,0px))}
  #cartbar .cb-n{font-size:9px;letter-spacing:.14em}
  #cartbar .cb-s{font-size:18px}
  #cartbar .cb-go{font-size:9px;letter-spacing:.14em}
  .seal{gap:8px}
  .seal span{padding:8px 11px;font-size:9px}
  .handnote{padding:18px 18px}
  .handnote p{font-size:17px}
}
@media(max-width:360px){
  :root{--gut:16px}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
  #cartbar{flex-wrap:wrap;row-gap:6px}
  #cartbar .cb-s{margin-left:auto}
  #cartbar .cb-go{flex-basis:100%;text-align:center;padding-top:2px}
  .card h3{font-size:21px}
}
/* the placeholder crest could exceed its frame by a hair at some widths */
.card .ph .crestph,.pd-img .crestph{max-width:82%;object-fit:contain}
.chip:hover{border-color:var(--gold-soft)}
.btn:not(.solid):hover{border-color:var(--gold-soft);color:var(--accent)}
.card:hover .ph{border-color:var(--gold-soft)}
.sec-head .no{-webkit-text-stroke-color:var(--gold-soft)}
.reserve-btn:hover{color:var(--gold)}
.crestwrap .sheen{display:none}
#gateImg{height:118px}

/* ============================================================
   AURA / MOBILE LAYER — the flow, remade for thumbs. 2026-07-21.
   Full-screen nav veil · bottom-sheet product drawer ·
   pinned checkout · edge-swipe filters. Same palette, no noise.
   ============================================================ */
body.navlock{overflow:hidden}
body.navlock #cartbar{opacity:0;pointer-events:none}
@media(max-width:860px){
  .nav .brand,.nav-right{position:relative;z-index:2}
  /* Full-screen veil. Top padding clears the 72px header so the first link never
     tucks under the brand. Auto margins on the first and last item centre the
     column when there is room and let it scroll when there isn't — fixed padding
     alone clipped the top on short windows. */
  .nav ul.open{position:fixed;inset:0;height:100dvh;display:flex;flex-direction:column;justify-content:flex-start;gap:0;background:linear-gradient(180deg,#0b0a09,#070605);backdrop-filter:blur(20px);padding:calc(72px + 30px) var(--gut) calc(44px + env(safe-area-inset-bottom,0px));border-bottom:none;z-index:1;overflow-y:auto;overscroll-behavior:contain}
  .nav ul.open li:first-child{margin-top:auto}
  .nav ul.open li:last-child{margin-bottom:auto}
  .nav ul.open::before{content:'';position:absolute;inset:0;background:var(--crest-url) center/72vw no-repeat;opacity:.05;pointer-events:none}
  .nav ul.open li{border-bottom:1px solid var(--line);animation:navRise .6s var(--ease-out) both}
  .nav ul.open li:nth-child(1){animation-delay:.05s}
  .nav ul.open li:nth-child(2){animation-delay:.11s}
  .nav ul.open li:nth-child(3){animation-delay:.17s}
  .nav ul.open li:nth-child(4){animation-delay:.23s}
  .nav ul.open li:nth-child(5){animation-delay:.29s}
  .nav ul.open a{display:flex;align-items:baseline;justify-content:space-between;gap:18px;font-family:var(--fdisp);font-size:clamp(25px,6.4vw,33px);letter-spacing:.01em;text-transform:none;color:var(--text);padding:17px 2px}
  .nav ul.open a::after{content:'\2192';position:static;left:auto;right:auto;bottom:auto;width:auto;height:auto;background:none;font-size:17px;color:var(--faint)}
  .nav ul.open a.active{color:var(--accent)}
  .nav ul.open a.active::after{color:var(--accent)}
  .filters{margin-bottom:24px}
  .chip{flex:none}
}
/* Edge-to-edge swipeable chip strip. Runs wherever the row can't fit on one
   line (7 chips need ~770px), so filters never orphan two items onto a second
   row. Above this they fit naturally. */
@media(max-width:860px){
  .filters{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    /* room for the active chip's glow and the hover lift, or they get sliced */
    margin:0 calc(var(--gut) * -1) 18px;padding:10px var(--gut) 16px;
    scroll-snap-type:x proximity;scroll-padding-left:var(--gut);
    /* fade at both ends so chips read as scrollable instead of chopped off */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut),#000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut),#000 calc(100% - 26px),transparent 100%);
  }
  .filters::-webkit-scrollbar{display:none}
  .chip{scroll-snap-align:start}
  .chip.avail{margin-left:6px}
}
@keyframes navRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* Short windows (landscape phones, small laptops): tighten so all five links fit
   without the column needing to scroll. */
@media(max-width:860px) and (max-height:640px){
  .nav ul.open{padding-top:calc(72px + 16px);padding-bottom:24px}
  .nav ul.open a{font-size:21px;padding:12px 2px}
  .nav ul.open::before{background-size:52vw}
}
@media(max-width:680px){
  .drawer{top:auto;bottom:0;left:0;right:0;width:100%;max-width:100%;height:auto;min-height:46vh;max-height:86vh;max-height:88dvh;border-left:none;border-top:1px solid var(--line-strong);transform:translateY(103%);box-shadow:0 -50px 110px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05)}
  .drawer.show{transform:translateY(0)}
  .drawer::before{content:'';position:absolute;top:9px;left:50%;transform:translateX(-50%);width:42px;height:4px;border-radius:100px;background:var(--line-strong);z-index:2}
  .drawer-head{padding:22px 26px 14px;touch-action:none}
  .drawer-body{padding:22px 26px}
  .drawer-foot{padding:16px 26px calc(16px + env(safe-area-inset-bottom,0px))}
  .pd-img{aspect-ratio:16/10}
}
/* Room for the fixed bar. This comment used to say the bar was display:none above 680px and
   reserved nothing on desktop - stale: the pill rule below sets display:flex at every width, so
   desktop was left with zero clearance and the pill floated over the foot of the page. A
   full-width thumb bar needs a full band; the desktop pill only needs to clear the footer. */
@media(min-width:681px){ body.has-cartbar{padding-bottom:88px} body.has-cartbar .toast{bottom:92px} }
@media(max-width:680px){ body.has-cartbar{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
}
#cartbar.checkout .cb-s{margin-left:0}
#cartbar.checkout .cb-n{letter-spacing:.14em}
#cartbar.checkout .cb-go{margin-left:auto;color:var(--ink);background:var(--accent);padding:12px 15px}

/* Previewing the disguise: the held cart holds real product ids that cannot resolve
   against the apparel catalog, so the bar would read "1 item held $0". */
body.previewing #cartbar{display:none!important}

/* Below this the greeting cannot hold one line, so the pill treatment is dropped
   rather than wrapped: square corners, even padding, and the close button given its
   own row instead of hanging off a curved edge. */
@media(max-width:560px){
  .memba{border-radius:2px;padding:12px 14px;gap:8px 10px;text-align:center}
  .memba .memx{margin-left:2px}
}

/* ============================================================
   SELECTION - ambient, not kinetic. 2026-08-12.
   Hovering a tile used to fire a diagonal sheen sweep (.85s, top-left
   to bottom-right) AND lift the card 3-6px via three competing rules.
   Sweeping across a grid meant every tile flashed a streak and jumped,
   which reads as busy rather than considered. Selection is now a slow
   change in light: the plate warms, its edge picks up gold, the crest
   settles. Nothing travels, nothing moves, so there is no end to resolve.
   ============================================================ */
.card{transition:opacity .7s ease,filter .7s ease,transform .7s var(--ease-out),border-color .5s var(--ease-out),background .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.card.in:hover,.card:hover{transform:none;box-shadow:none;background:transparent}

/* what selection actually is: the plate lights up and holds */
.card .ph{transition:border-color .55s var(--ease-out),box-shadow .55s var(--ease-out),background-color .55s var(--ease-out)}
.card.in:hover .ph,.card:hover .ph{border-color:var(--gold-soft);background-color:#0f0e0c;
  box-shadow:0 0 0 1px rgba(200,177,132,.08)}
.card .ph::before{transition:opacity .6s var(--ease-out)}
.card.in:hover .ph::before{opacity:1;transition:opacity .6s var(--ease-out)}

/* the image breathes rather than snapping */
.card .ph .phz{transition:transform 1.8s cubic-bezier(.4,0,.6,1)}
.card.in:hover .ph .phz{transform:scale(1.03)}
.card .crestph{transition:transform 1.6s cubic-bezier(.4,0,.6,1),opacity .6s var(--ease-out)}
.card:hover .crestph{transform:scale(1.02);opacity:.5}
.addcue{transition:letter-spacing .5s var(--ease-out),opacity .5s var(--ease-out)}
.card:hover .addcue{letter-spacing:.22em}

@media(prefers-reduced-motion:reduce){
  .card .ph,.card .ph .phz,.card .crestph,.addcue{transition:none!important}
}

/* ============================================================
   SELECTION, second pass. Stripping the streak left nothing at all.
   What replaces it is architectural rather than kinetic: two gold
   hairlines draw out from the centre of the plate's top and bottom
   edges, a warm bloom rises from below, and the crest settles. It is
   slow (.7s), it holds while hovered, and it retracts along the same
   path - so the exit resolves instead of being cut off.
   ============================================================ */
.card::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .7s var(--ease-out)}
.card.in:hover::before{transform:scaleX(1)}
.card .body{position:relative}
.card .body::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .7s var(--ease-out) .06s}
.card.in:hover .body::before{transform:scaleX(1)}

/* a warm floor under the plate, so the tile reads as lit rather than outlined */
.card .ph::before{
  width:62%;height:190%;top:-45%;left:0;right:auto;
  background:linear-gradient(100deg,transparent 30%,rgba(233,227,216,.05) 42%,rgba(233,227,216,.11) 50%,rgba(233,227,216,.05) 58%,transparent 70%);
  opacity:0;will-change:transform,opacity;
  transform:translate3d(-110%,0,0) rotate(8deg);
  transition:opacity .6s var(--ease-out),transform 0s linear .6s}
.card.in:hover .ph::before{opacity:1;transform:translate3d(230%,0,0) rotate(8deg);
  transition:opacity .5s var(--ease-out),transform 2.6s linear}

/* the name comes forward a shade; the price stays put so nothing shifts */
.card h3{transition:color .5s var(--ease-out)}
.card.in:hover h3{color:#f2ece0}

@media(prefers-reduced-motion:reduce){
  .card::before,.card .body::before{transition:none!important;transform:scaleX(1)!important;opacity:.5}
  .card.in:hover .ph::before{transform:translate3d(-110%,0,0)!important;transition:none!important}
  .card .ph{background-position:0 0!important;transition:none!important}
}

/* ---- ordering status: one quiet pill, no details ---- */
.statuscard{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--line-gold);border-radius:100px;padding:11px 20px 11px 16px;margin:26px 0 0}
.statuscard:empty{display:none}
.statuscard .sline{display:contents}
.statusdot{width:8px;height:8px;border-radius:50%;flex:none;background:#8fcf9b;box-shadow:0 0 0 0 rgba(143,207,155,.45);animation:statusPulse 3.2s ease-out infinite}
.statuscard.shut .statusdot{background:var(--faint);animation:none;box-shadow:none}
@keyframes statusPulse{0%{box-shadow:0 0 0 0 rgba(143,207,155,.4)}70%{box-shadow:0 0 0 9px rgba(143,207,155,0)}100%{box-shadow:0 0 0 0 rgba(143,207,155,0)}}
.statuscard .sword{font-family:var(--fdisp);font-size:18px;line-height:1}
.statuscard .suntil{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-top:1px}
.zone-note .zlink{background:transparent;border:none;color:var(--accent);font:inherit;font-size:inherit;letter-spacing:inherit;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* ---- pricing note band + drawer ladder ---- */
.pnote-band{padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(200,177,132,.03)}
.pnote{font-size:13px;color:var(--muted);line-height:1.75;padding:15px 0;max-width:760px}
.pd-ladder{border:1px solid var(--line-gold);margin:16px 0 0}
.pl-row{display:flex;align-items:baseline;gap:12px;padding:11px 15px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.pl-row:first-child{border-top:none}
.pl-row b{margin-left:auto;color:var(--text);font-weight:500;font-size:14px}
.pl-row.hot{background:rgba(200,177,132,.07)}
.pl-row.hot span{color:var(--accent)}
.pl-row em{font-style:normal;font-size:10.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.pl-row b s{color:var(--faint);font-weight:300;margin-right:6px}
.pd-size b s{color:var(--faint);font-weight:300;margin-right:5px}
/* ---- the deal banner: leads the cart ---- */
.dealhero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--line-gold);background:linear-gradient(100deg,rgba(200,177,132,.14),rgba(200,177,132,.03) 55%);padding:18px 22px;margin:0 0 26px}
.dealhero.want{border-style:dashed;background:rgba(200,177,132,.03)}
.dealhero .dh-l{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0}
.dh-badge{flex:none;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:#16130f;background:var(--accent);border-radius:100px;padding:5px 12px}
.dh-badge.dim{background:transparent;color:var(--accent);border:1px solid var(--line-gold)}
.dh-t{font-size:13.5px;color:var(--muted);line-height:1.55}
.dh-boxes{display:inline-flex;gap:7px;flex:none;flex-wrap:wrap}
.dh-box{font-size:11px;letter-spacing:.08em;font-weight:600;color:var(--accent);border:1px solid var(--line-gold);background:rgba(200,177,132,.09);padding:7px 11px;white-space:nowrap}
.dh-amt{flex:none;font-size:30px;line-height:1;color:var(--accent)}
.dh-cta{flex:none;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line-gold);padding:0 18px;white-space:nowrap}
.dh-cta:hover{background:var(--accent);color:#16130f}
.dh-spark{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(232,225,212,.14) 50%,transparent 65%);transform:translateX(-130%);animation:dhSweep 3.4s 1s var(--ease-out) 2}
@keyframes dhSweep{to{transform:translateX(130%)}}
@media(prefers-reduced-motion:reduce){.dh-spark{display:none}}
@media(max-width:560px){.dealhero{flex-direction:column;align-items:flex-start;padding:16px 18px}.dh-amt{font-size:26px}}
.citem.cdeal{border:1px solid var(--line-gold);background:rgba(200,177,132,.05)}
.citem.cdeal.hint{border-style:dashed;background:transparent}
.ci-deal-tick{width:54px;height:54px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:17px;border:1px solid var(--line-gold);border-radius:50%}
.citem.cdeal .ci-line.gold{color:var(--accent)}

.db-txt{flex:1;min-width:240px}
.dbq{display:inline-flex;align-items:center;gap:9px;flex:none}
.dbq-tile{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);width:46px;height:46px;flex:none;border:1px solid var(--line-strong);background:#0d0d0f center/cover no-repeat;display:inline-flex;align-items:center;justify-content:center}
.dbq-tile img{width:60%;height:60%;object-fit:contain;opacity:.5}
.dbq i{font-family:var(--fdisp);font-style:normal;color:var(--accent);font-size:19px;line-height:1}
.dbq-p{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}
.dbq-p s{color:var(--faint);font-size:13px}
.dbq-p b{font-family:var(--fdisp);font-weight:500;color:var(--accent);font-size:21px;line-height:1}
@media(max-width:560px){.pnote.db-rich{gap:12px}.dbq-tile{width:40px;height:40px}}
.dealtag{min-width:0;white-space:normal;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:#16130f;background:var(--accent);border-radius:100px;padding:4px 11px;font-weight:600}
.pd-dealhint{border:1px solid var(--line-gold);background:rgba(200,177,132,.08);padding:12px 15px;margin:14px 0 0;font-size:13px;color:var(--muted);line-height:1.6}
.pd-dealhint b{color:var(--accent);font-weight:600;letter-spacing:.04em}
@media(prefers-reduced-motion:reduce){.statusdot{animation:none}}

/* ---------- gift threshold: the bar and the pick ---------- */
/* Hairline, not a supermarket bar. The fill transitions so adding an item reads as
   MOVEMENT toward something rather than a number changing. */
.gbar{display:block;height:2px;background:var(--line);margin-top:9px;overflow:hidden}
.gbar-f{display:block;height:2px;background:linear-gradient(90deg,var(--gold-soft),var(--accent));transition:width .45s cubic-bezier(.22,.8,.24,1)}
.giftpick{border:1px solid var(--line-gold);border-top:none;background:rgba(200,177,132,.045);padding:14px 16px 15px}
.gp-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.gp-k{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.gp-x{min-height:44px;display:inline-flex;align-items:center;background:none;border:none;padding:0;color:var(--muted);font-family:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.gp-x:hover{color:var(--accent)}
.gp-o{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px;width:100%;text-align:left;background:transparent;border:1px solid var(--line);color:var(--text);font-family:inherit;padding:13px 15px;margin-bottom:8px;cursor:pointer;transition:border-color .2s,background .2s;min-height:44px}
.gp-o:hover{border-color:var(--line-gold)}
.gp-o.on{border-color:var(--accent);background:rgba(200,177,132,.07)}
.gp-t{font-size:14.5px;letter-spacing:.01em}
.gp-n{grid-column:1;font-size:12px;color:var(--muted);line-height:1.5}
.gp-m{grid-row:1/span 2;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.gp-o.on .gp-m{color:var(--accent)}
.gp-w{font-size:12px;color:var(--muted);margin:2px 0 0}
@media(max-width:560px){.gp-o{grid-template-columns:1fr;gap:3px}.gp-m{grid-row:auto;grid-column:1;margin-top:4px}}

/* The seal game. Hairline target, breathing gold ring, serif count - the site's own vocabulary,
   nothing arcade about it. The whole ring is the button: 128px target. */
.sealgame{margin:26px auto 0;text-align:center;max-width:240px}
.sealgame .sg-k{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.sg-ring{position:relative;width:128px;height:128px;margin:0 auto;display:block;background:transparent;border:none;cursor:pointer;padding:0}
.sg-ring:focus-visible{outline:1px solid var(--gold);outline-offset:6px}
.sg-target{position:absolute;inset:14px;border:1px solid var(--gold-soft);border-radius:50%}
.sg-pulse{position:absolute;inset:14px;border:1px solid var(--gold);border-radius:50%;will-change:transform}
.sg-hit .sg-target{border-color:var(--accent);box-shadow:0 0 22px rgba(200,177,132,.25)}
.sg-miss .sg-pulse{border-color:var(--line-strong)}
.sg-score{margin-top:12px;display:flex;align-items:baseline;justify-content:center;gap:10px}
.sg-score b{font-family:var(--fdisp);font-weight:500;font-size:26px;color:var(--text)}
.sg-score span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.sg-hint{margin-top:6px;font-size:11.5px;color:var(--muted)}