/* =====================================================================
   ASTRAL — Research Peptides
   Design system: EDITORIAL — warm ivory, Fraunces serif, quiet accent
   ===================================================================== */

:root{
  /* palette — warm editorial neutrals */
  --paper:#F7F3EA;        /* ivory */
  --paper-2:#F0E9DB;      /* sand */
  --paper-3:#E8DFCD;      /* deeper sand */
  --ink:#1C1A14;          /* warm near-black */
  --ink-2:#4B463A;        /* secondary */
  --muted:#8A8373;        /* captions */
  --line:#E2D9C7;         /* warm hairline */
  --line-2:#D2C7B0;
  --accent:#9E4A2E;       /* terracotta */
  --accent-ink:#7A3620;
  --accent-soft:#EDDDCF;
  --sage:#5F6B4F;         /* positive / "passed" */
  --sage-soft:#E4E6D8;
  --gold:#A9803C;

  /* type */
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',system-ui,-apple-system,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* structure */
  --container:1200px;
  --wide:1320px;
  --gutter:clamp(20px,5vw,60px);
  --radius:6px;
  --radius-sm:4px;
  --radius-lg:12px;
  --shadow-sm:0 1px 2px rgba(28,26,20,.05);
  --shadow:0 26px 60px -32px rgba(40,32,20,.32);
  --shadow-lg:0 40px 90px -40px rgba(40,32,20,.42);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:76px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{
  font-family:var(--font-display);font-optical-sizing:auto;
  font-weight:400;line-height:1.08;letter-spacing:-.014em;margin:0;
}
p{margin:0}
em{font-style:italic}
::selection{background:var(--ink);color:var(--paper)}

/* ---------- layout helpers ---------- */
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.container--wide{max-width:var(--wide)}
.section{padding-block:clamp(44px,6.5vw,84px)}
.section--tight{padding-block:clamp(36px,5vw,60px)}
/* checkout starts right under the header — the shared section padding
   left the flow floating far too low on a page that is all business */
#checkout{padding-block:26px 72px}
.bg-soft{background:var(--paper-2)}
.bg-ink{background:var(--ink);color:var(--paper)}
.rule{height:1px;background:var(--line);border:0;margin:0}

.eyebrow{
  font-family:var(--font-sans);
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:12px;margin:0 0 22px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55}
.bg-ink .eyebrow{color:var(--gold)}

.display{font-size:clamp(2.5rem,6.4vw,5rem);font-weight:400;letter-spacing:-.02em;line-height:1.02}
.h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:400}
.h3{font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:500}
.lede{font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.6;color:var(--ink-2);max-width:62ch;font-weight:400}
.muted{color:var(--muted)}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .lede{margin-inline:auto}
.mono{font-family:var(--font-mono)}
.serif{font-family:var(--font-display)}
.italic{font-style:italic;font-family:var(--font-display)}
.dropcap::first-letter{
  font-family:var(--font-display);font-weight:500;float:left;font-size:3.5em;line-height:.78;
  padding:6px 12px 0 0;color:var(--accent);
}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink);--fg:var(--paper);--bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:100px;border:1px solid var(--bd);
  background:var(--bg);color:var(--fg);
  font-size:13.5px;font-weight:600;letter-spacing:.03em;
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s,border-color .3s,box-shadow .3s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--accent{--bg:var(--accent);--bd:var(--accent);--fg:#fff}
.btn--accent:hover{box-shadow:0 16px 34px -14px rgba(158,74,46,.6)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line-2)}
.btn--ghost:hover{--bd:var(--ink);background:var(--ink);color:var(--paper)}
.btn--light{--bg:var(--paper);--fg:var(--ink);--bd:var(--paper)}
.btn--block{width:100%}
.btn--sm{padding:11px 20px;font-size:12.5px}
/* The IC.* icons app.js injects are raw <svg viewBox> with NO width/height — no
   intrinsic size, so an unstyled one defaults to 300px and inflates the button
   around it. Size them here, not per call site: .btn svg covers every injected
   icon, .ico stays for hand-written markup that already carries the class. */
.btn .ico,.btn svg{width:15px;height:15px;flex:none}

.link-arrow{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.link-arrow svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}

/* ---------- pills / labels ---------- */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 13px;border-radius:100px;border:1px solid var(--line-2);color:var(--ink-2);background:transparent;
}
.pill--verify{color:var(--sage);border-color:transparent;background:var(--sage-soft)}
.pill--accent{color:var(--accent-ink);border-color:transparent;background:var(--accent-soft)}
.pill--ruo{color:var(--accent-ink);border-color:transparent;background:var(--accent-soft)}
.pill .dot{width:5px;height:5px;border-radius:50%;background:currentColor}

/* ---------- announcement / marquee ---------- */
.topbar{background:var(--ink);color:var(--paper);overflow:hidden}
.marquee{display:flex;gap:0;white-space:nowrap;will-change:transform;animation:marq 42s linear infinite}
.topbar:hover .marquee{animation-play-state:paused}
.marquee span{
  display:inline-flex;align-items:center;gap:16px;padding:10px 30px;
  font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#d8d1c2;
}
.marquee span::after{content:"✦";color:var(--gold)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  transition:background .3s var(--ease),box-shadow .3s,border-color .3s;
  background:rgba(247,243,234,.7);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid transparent;
}
.site-header.is-solid{background:rgba(247,243,234,.92);border-bottom-color:var(--line);box-shadow:var(--shadow-sm)}
.nav{height:var(--header-h);display:flex;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand .star{width:24px;height:24px;color:var(--ink)}
.brand .word{font-family:var(--font-display);font-size:22px;font-weight:500;letter-spacing:.3em;padding-left:.3em}
.nav-links{display:flex;align-items:center;gap:6px;margin-left:16px}
.nav-links a{
  padding:9px 15px;border-radius:100px;font-size:14px;font-weight:500;color:var(--ink-2);
  transition:color .2s,background .2s;
}
.nav-links a:hover{color:var(--ink);background:var(--paper-3)}
/* the current page gets no pill — just darker ink. The filled background read as
   a border sitting around the link. Hover keeps its background; that's an
   interaction affordance, not a state. */
.nav-links a.active{color:var(--ink)}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:4px}
.icon-btn{
  width:42px;height:42px;border-radius:50%;border:1px solid transparent;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink);position:relative;
  transition:background .2s,border-color .2s;
}
.icon-btn:hover{background:var(--paper-3)}
.icon-btn svg{width:20px;height:20px}
.cart-count{
  position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:100px;
  background:var(--accent);color:#fff;font-family:var(--font-sans);font-size:10.5px;font-weight:700;
  display:none;align-items:center;justify-content:center;line-height:1;
}
.cart-count.show{display:inline-flex}
.nav-toggle{display:none}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(600px,92vh,920px);display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(120% 90% at 75% 12%,#efe6d6 0%,#f3ece0 40%,#f7f3ea 72%);}
.hero__media video{width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.02)}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:
   linear-gradient(180deg,rgba(247,243,234,.72) 0%,rgba(247,243,234,.30) 24%,rgba(247,243,234,.14) 48%,rgba(247,243,234,.66) 100%),
   linear-gradient(90deg,rgba(247,243,234,.9) 0%,rgba(247,243,234,.42) 44%,rgba(247,243,234,0) 76%);
}
.hero__inner{padding-block:clamp(96px,15vh,168px);max-width:820px}
.hero h1{margin:0 0 26px}
.hero h1 em{color:var(--accent-ink)}
.hero .lede{font-size:clamp(1.1rem,1.7vw,1.34rem);color:#2b271e;max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero__byline{display:flex;align-items:center;gap:16px;margin-top:40px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.hero__byline::before{content:"";width:44px;height:1px;background:var(--line-2)}
.hero__scroll{position:absolute;left:var(--gutter);bottom:28px;z-index:2;font-family:var(--font-sans);
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:12px}
.hero__scroll .bar{width:46px;height:1px;background:var(--ink);opacity:.35;position:relative;overflow:hidden}
.hero__scroll .bar::after{content:"";position:absolute;inset:0;background:var(--accent);animation:scrollbar 2.8s var(--ease) infinite}
@keyframes scrollbar{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---------- trust strip ---------- */
.trust{border-block:1px solid var(--line);background:var(--paper)}
.trust__row{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-block:28px}
.trust__item{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:14px}
.trust__item svg{width:22px;height:22px;color:var(--accent);flex:none;stroke-width:1.5}
.trust__item b{color:var(--ink);font-weight:600}

/* ---------- section head ---------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:40px}
.sec-head p.lede{margin-top:18px}
@media(max-width:720px){.sec-head{flex-direction:column;align-items:flex-start;gap:18px}}

/* ---------- category chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  padding:10px 18px;border-radius:100px;border:1px solid var(--line-2);background:transparent;
  font-size:13px;font-weight:500;color:var(--ink-2);transition:.2s;white-space:nowrap;
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip .n{font-size:11px;opacity:.55;margin-left:7px}

/* ---------- product grid + card (editorial) ---------- */
/* ---------- horizontal rail ----------
   A real overflow-x track, not a JS-transformed carousel — so a trackpad swipe,
   a touch drag and the keyboard all work without us implementing any of them. */
.rail{position:relative}
.rail__track{
  display:flex;gap:26px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  /* the padding gives the cards' hover-lift and focus ring room to breathe
     inside a clipping scroll container */
  padding:4px 2px 10px;margin:0 -2px;
  scrollbar-width:none;-ms-overflow-style:none}
.rail__track::-webkit-scrollbar{display:none}
.rail__track > *{flex:0 0 clamp(230px,25%,290px);scroll-snap-align:start}
.rail__track:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
/* everything already fits — centre it rather than leaving a lonely left-aligned row */
.rail__track.is-static{justify-content:flex-start}

.rail__btn{
  position:absolute;top:34%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;flex:none;
  background:var(--paper);border:1px solid var(--line-2);color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 6px 20px -8px rgba(40,32,20,.35);
  transition:opacity .25s var(--ease),background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.rail__btn svg{width:18px;height:18px}
.rail__btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.rail__btn:disabled{opacity:.28;pointer-events:none}
.rail__btn--prev{left:-23px}
.rail__btn--next{right:-23px}
/* on narrow screens there is no room outside the container — pull them inside */
@media(max-width:1340px){
  .rail__btn--prev{left:6px}
  .rail__btn--next{right:6px}
  .rail__btn{background:rgba(247,243,234,.94);backdrop-filter:blur(6px)}
}
@media(max-width:560px){
  .rail__track > *{flex:0 0 76%}
  .rail__btn{width:40px;height:40px}
}

.grid{display:grid;gap:26px}
.grid--products{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1080px){.grid--products{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.grid--3{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.grid--products{grid-template-columns:1fr 1fr};.grid{gap:20px}}
@media(max-width:460px){.grid--products,.grid--3{grid-template-columns:1fr}}

.card{position:relative;display:flex;flex-direction:column;background:transparent;transition:transform .3s var(--ease)}
.card:hover{transform:translateY(-3px)}
.card__media{position:relative;aspect-ratio:4/5;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color .3s}
.card:hover .card__media{border-color:var(--line-2)}
.card__vial{width:38%;height:74%}
.card__tag{position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--font-sans);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:rgba(247,243,234,.82);backdrop-filter:blur(4px);padding:6px 10px;border-radius:100px}
.card__tag.is-new{color:#fff;background:var(--accent)}
.card__body{padding:20px 4px 6px;display:flex;flex-direction:column;gap:7px;flex:1}
.card__cat{font-family:var(--font-sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.card__name{font-family:var(--font-display);font-weight:500;font-size:22px;letter-spacing:-.01em;line-height:1.1}
.card__desc{font-size:13.5px;color:var(--muted);line-height:1.5;font-style:italic;font-family:var(--font-display)}
.card__foot{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.price{font-family:var(--font-display);font-weight:500;font-size:20px}
.price s{font-family:var(--font-sans);font-weight:400;font-size:13px;color:var(--muted);margin-right:7px}
.card__size{font-family:var(--font-sans);font-size:12px;font-weight:400;color:var(--muted);letter-spacing:.02em}
.card__add{width:42px;height:42px;border-radius:50%;background:transparent;color:var(--ink);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;transition:.25s var(--ease)}
.card__add:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.card__add svg{width:18px;height:18px}
.card__add.added{background:var(--sage);border-color:var(--sage);color:#fff}
.card__link{position:absolute;inset:0;z-index:1}
.card__body .price,.card__foot,.card__add{position:relative;z-index:2}
/* ---------- the vial image ----------
   ONE rule sizes every vial, everywhere: card, product stage, thumbnail, cart
   line, upsell. It fills whatever box it's given and scales to fit.

   object-fit:contain is the whole point — it scales the vial down (or up) to fit
   the box while KEEPING its aspect ratio. `cover` was cropping the vial whenever
   the container wasn't exactly 4:5, and setting width AND height as percentages
   (as .pdp__stage img used to) squashes it outright. Never do either.

   The PNGs are transparent cut-outs, so the shadow is drawn here rather than
   baked in — drop-shadow() follows the silhouette, not the bounding box.

   --pmedia-pad is the breathing room inside the box; each context tunes it. */
.pmedia{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;          /* fit, never crop, never stretch */
  object-position:center;
  padding:var(--pmedia-pad,0);
  box-sizing:border-box;
  /* transparent, not --paper: with contain there is letterboxing either side,
     and the CONTAINER's background should show through it, not the image's */
  background:transparent;
  filter:drop-shadow(0 10px 16px rgba(28,26,20,.17)) drop-shadow(0 2px 3px rgba(28,26,20,.11))}

.card__media{--pmedia-pad:3%;--ground-b:2%;--ground-h:4.2%}
.pdp__stage{--pmedia-pad:4%;--ground-b:3%;--ground-h:4.1%}
.pdp__thumb{--pmedia-pad:9%}
.citem__img{--pmedia-pad:7%}
.upsell__img{--pmedia-pad:8%}

/* GROUNDING — the two large contexts only. A drop-shadow() traces the alpha
   silhouette, which is a sticker's shadow; an object standing on a surface
   throws a soft ellipse that pools under its base. So: filter off, and the
   container draws (a) a contact ellipse under the vial and (b) a faint sand
   wash in its corners, so the vial sits in light rather than on flat color.

   The geometry is knowable in pure CSS because every render shares one crop
   (897x1781, base 1.2% above the bottom edge) and every vial box is wider
   than the image is (so `contain` always binds by HEIGHT):
     base offset  = --pmedia-pad + 1.1% of container height
     --ground-b   = that, minus half the ellipse height  (per context above)
   The small contexts (thumbs, cart lines, upsell) keep the plain drop-shadow:
   at 74px a blurred ellipse reads as a smudge, not a shadow.

   Layering: the ellipse at -1 (negative z still paints ABOVE the
   container's own background), the image at its natural auto level. The
   image must NOT get a z-index: .card__media does not create a stacking
   context, so a z-indexed image joins the CARD's context at the same level
   as the .card__link overlay (z1) and, being later in the DOM, paints over
   it — which is a link the whole vial stops responding to. Badges and
   controls sit at 2 either way. */
.card__media .pmedia,.pdp__stage .pmedia{filter:none}
.card__media::after,.pdp__stage::after{
  content:"";position:absolute;z-index:-1;
  left:50%;bottom:var(--ground-b);transform:translateX(-50%);
  height:var(--ground-h);aspect-ratio:6.5/1;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(28,26,20,.28) 0%,rgba(28,26,20,.13) 52%,transparent 74%);
  filter:blur(3px)}
.card__media,.pdp__stage{
  background:radial-gradient(ellipse 120% 95% at 50% 42%,
    transparent 55%,rgba(232,223,205,.32) 100%)}

/* .pmedia is position:absolute, so EVERY box that holds a vial must establish a
   containing block — miss one and the image escapes to the nearest positioned
   ancestor and lands somewhere else on the page entirely. */
.card__media,.pdp__stage,.pdp__thumb,.citem__img,.upsell__img{position:relative;overflow:hidden}

/* The outage notice: shown when the content API cannot be reached. It
   deliberately spans the grid it replaces. */
.store-down{grid-column:1/-1;text-align:center;padding:70px 24px;border:1px dashed var(--line-2);border-radius:var(--radius-lg);background:var(--paper-2)}
.store-down b{font-family:var(--font-display);font-weight:500;font-size:22px;display:block;margin-bottom:8px}
.store-down p{color:var(--ink-2);font-size:14.5px;max-width:46ch;margin:0 auto}

/* ---------- feature / split ---------- */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(34px,6vw,88px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:40px}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(26px,3vw,40px)}
.panel--dark{background:var(--ink);color:var(--paper);border-color:#2a271f}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{padding:38px 34px 38px 0;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:none}
@media(max-width:820px){.step{border-right:none;border-bottom:1px solid var(--line);padding-right:0}}
.step__n{font-family:var(--font-display);font-style:italic;font-size:15px;color:var(--accent)}
.step h3{margin:16px 0 10px;font-size:23px;font-weight:500}
.step p{color:var(--ink-2);font-size:15px}

/* quality metrics — editorial figures */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:760px){.metrics{grid-template-columns:1fr 1fr;gap:36px 24px}}
.metric{padding:0 30px;border-left:1px solid rgba(247,243,234,.2)}
.metric:first-child{border-left:none;padding-left:0}
.metric .num{font-family:var(--font-display);font-weight:400;font-size:clamp(2.6rem,5vw,3.8rem);letter-spacing:-.03em;line-height:1}
.metric .lab{font-size:13.5px;color:#b7b0a0;margin-top:12px;max-width:22ch}
.bg-ink .metric .num{color:var(--paper)}

/* ---------- spec list (editorial, was table) ---------- */
.spectable{width:100%;border-collapse:collapse;font-size:15px}
.spectable tr{border-bottom:1px solid var(--line)}
.spectable tr:last-child{border-bottom:none}
.spectable th{text-align:left;font-weight:400;color:var(--muted);padding:15px 0;width:44%;font-family:var(--font-display);font-style:italic;font-size:15px}
.spectable td{text-align:right;padding:15px 0;font-family:var(--font-sans);font-size:14.5px;color:var(--ink);letter-spacing:.01em}

/* ---------- testimonials — pull quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{padding:44px 34px 40px 0;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:24px}
.quote:last-child{border-right:none}
@media(max-width:900px){.quote{border-right:none;border-bottom:1px solid var(--line);padding-right:0}}
.quote p{font-family:var(--font-display);font-weight:400;font-size:22px;line-height:1.4;color:var(--ink);letter-spacing:-.01em}
.quote .who{display:flex;align-items:center;gap:13px;margin-top:auto}
.quote .av{width:38px;height:38px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:500;color:var(--accent-ink)}
.quote .who b{font-size:14px;display:block;font-weight:600}
.quote .who small{color:var(--muted);font-size:12.5px}

/* ---------- FAQ ---------- */
/* category headings on faq.html. Each group is its own accordion. */
.faq-group + .faq-group{margin-top:44px}
.faq-group__h{font-family:var(--font-display);font-weight:500;font-size:clamp(1.25rem,2.4vw,1.6rem);
  letter-spacing:-.01em;margin:0 0 14px}
.faq{border-top:1px solid var(--ink);margin-top:4px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:28px 0;display:flex;align-items:center;justify-content:space-between;gap:22px;
  font-family:var(--font-display);font-weight:500;font-size:clamp(1.2rem,1.9vw,1.5rem);letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;transition:.3s var(--ease)}
.faq summary .ic svg{width:14px;height:14px}
.faq details[open] summary .ic{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:rotate(45deg)}
.faq .ans{padding:0 0 30px;max-width:76ch;color:var(--ink-2);font-size:15.5px}
.faq .ans p+p{margin-top:12px}

/* ---------- CTA band ---------- */
.cta-band{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--ink);color:var(--paper);padding:clamp(44px,7vw,88px);isolation:isolate}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.6;
  background:radial-gradient(80% 150% at 10% 8%,rgba(158,74,46,.5),transparent 60%),radial-gradient(70% 120% at 100% 100%,rgba(169,128,60,.28),transparent 55%)}
.cta-band .star-bg{position:absolute;right:-46px;top:-46px;width:340px;color:rgba(247,243,234,.055);z-index:-1}
.cta-band h2 em{font-style:italic;color:var(--gold)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#c7c0b1;padding-block:72px 32px}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-brand .brand{color:var(--paper)}
.footer-brand .brand .star{color:var(--paper)}
.footer-brand p{margin-top:20px;font-size:14.5px;max-width:36ch;color:#a49d8d;font-family:var(--font-display);font-style:italic;line-height:1.6}
.footer-col h4{font-family:var(--font-sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8a8474;font-weight:600;margin-bottom:18px}
.footer-col a{display:block;padding:6px 0;font-size:14.5px;color:#c7c0b1;transition:color .2s}
.footer-col a:hover{color:var(--paper)}
.footer-bottom{margin-top:56px;padding-top:24px;border-top:1px solid rgba(247,243,234,.1);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;font-size:12.5px;color:#8a8474}
.footer-note{font-size:12px;color:#8a8474;max-width:100%;margin-top:16px;line-height:1.7}

/* ---------- cart drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(28,26,20,.46);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.35s var(--ease);z-index:90}
.scrim.open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(440px,100%);background:var(--paper);z-index:100;
  transform:translateX(100%);transition:transform .4s var(--ease);display:flex;flex-direction:column;box-shadow:var(--shadow-lg);
}
.drawer.open{transform:none}
/* flex:none on the head and foot is load-bearing. The drawer is a flex column;
   without it both default to flex-shrink:1, so when the footer grew (the promo
   field) the browser shrank the FOOTER below its own content height and its
   children spilled out over each other. The scrollable body is the thing that
   should give. */
.drawer__head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:24px 26px;border-bottom:1px solid var(--line)}
.drawer__head h3{font-size:20px;font-weight:500;display:flex;align-items:center;gap:11px}
.drawer__head h3 svg{width:19px;height:19px;flex:none}
.drawer__head .count{font-size:12px;color:var(--muted)}
.drawer__body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px 26px}
.drawer__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;gap:16px;color:var(--muted)}
.drawer__empty svg{width:44px;height:44px;color:var(--line-2)}
.citem{display:grid;grid-template-columns:60px 1fr auto;gap:15px;padding:20px 0;border-bottom:1px solid var(--line)}
/* ---------- account overview ----------
   Reuses .rw-hero / .rw-stats so Overview, Rewards and Partner all open the
   same way. The hero here carries identity rather than a metric — there is no
   single number that means "your account". */
.acct-id{display:flex;align-items:center;gap:16px}
.acct-id__ini{flex:none;width:52px;height:52px;border-radius:50%;
  background:rgba(247,243,234,.1);border:1px solid rgba(247,243,234,.22);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:.02em}
.acct-id__who{min-width:0}
.acct-id__name{font-family:var(--font-display);font-weight:500;font-size:clamp(1.5rem,3.4vw,2rem);
  line-height:1.15;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis}
.acct-id__mail{font-size:13.5px;color:#c9c4b6;margin-top:5px;overflow:hidden;text-overflow:ellipsis}

/* jump-to-tab cards. Real links, intercepted for in-place tab switching. */
.acct-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.acct-navcard{display:flex;align-items:center;gap:14px;padding:17px 18px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease)}
.acct-navcard:hover{border-color:var(--ink);background:#fff;transform:translateY(-2px)}
.acct-navcard__ic{flex:none;width:38px;height:38px;border-radius:50%;background:var(--paper-2);
  color:var(--ink);display:flex;align-items:center;justify-content:center;transition:.25s var(--ease)}
.acct-navcard__ic svg{width:18px;height:18px}
.acct-navcard:hover .acct-navcard__ic{background:var(--ink);color:var(--paper)}
.acct-navcard__body{min-width:0;flex:1}
.acct-navcard__body b{display:block;font-family:var(--font-display);font-weight:500;font-size:16px;color:var(--ink)}
.acct-navcard__body p{font-size:12.5px;line-height:1.45;color:var(--ink-3);margin:3px 0 0}
.acct-navcard__go{flex:none;color:var(--line-2);transition:.25s var(--ease)}
.acct-navcard__go svg{width:16px;height:16px}
.acct-navcard:hover .acct-navcard__go{color:var(--ink);transform:translateX(3px)}

/* ---------- rewards ----------
   The balance is the only number most people come here for, so it gets a whole
   card in the ink colour and Fraunces at display size. Everything else is
   deliberately quieter than it. */
.rw-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--ink);color:var(--paper);border-radius:var(--radius-lg);
  padding:clamp(24px,3.5vw,34px) clamp(24px,3.5vw,36px);position:relative;overflow:hidden;isolation:isolate}
.rw-hero::after{content:"";position:absolute;right:-40px;top:-60px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(158,74,46,.30),transparent 65%);z-index:-1}
/* min-width:0 — without it a big points figure pushes the tier badge out of the card */
.rw-hero__main{min-width:0}
.rw-hero__k{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:#a9a496;margin-bottom:6px}
.rw-hero__n{font-family:var(--font-display);font-weight:500;font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rw-hero__v{font-size:14px;color:#c9c4b6;margin-top:10px}
.rw-hero__v b{color:var(--paper);font-weight:500}
.rw-hero.is-neg .rw-hero__n{color:#e8a48c}
.rw-hero.is-neg .rw-hero__v{max-width:34ch;line-height:1.55}
.rw-hero__tier{text-align:right;flex:none}
.rw-hero__rate{font-size:12.5px;color:#a9a496;margin-top:9px}
.rw-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(247,243,234,.1);
  border:1px solid rgba(247,243,234,.22);border-radius:100px;padding:7px 15px 7px 12px;
  font-size:13px;font-weight:500;letter-spacing:.02em}
.rw-badge svg{width:14px;height:14px;color:var(--gold)}
@media(max-width:560px){.rw-hero{flex-direction:column;align-items:flex-start}.rw-hero__tier{text-align:left}}

.rw-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:20px}
.rw-stat{background:var(--paper);padding:18px 20px}
.rw-stat .n{font-family:var(--font-display);font-weight:500;font-size:24px;font-variant-numeric:tabular-nums}
.rw-stat .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
@media(max-width:640px){.rw-stats{grid-template-columns:1fr}}

.rw-prog{margin-top:2px}
.rw-prog__bar{height:10px;border-radius:20px;background:var(--paper-3);overflow:hidden}
.rw-prog__bar span{display:block;height:100%;border-radius:20px;background:var(--ink);transition:width .6s var(--ease)}
.rw-prog__meta{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-3);margin-top:9px}
.rw-prog__meta b{color:var(--ink);font-variant-numeric:tabular-nums}

/* the ladder — every tier visible at once, so the deal is obvious */
.rw-ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.rw-tier{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);padding:18px 18px 16px;
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.rw-tier.is-done{background:var(--paper-2)}
.rw-tier.is-current{border-color:var(--ink);border-width:1.5px;background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.rw-tier__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.rw-tier__name{font-family:var(--font-display);font-weight:500;font-size:17px}
.rw-tier__you{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--paper);
  background:var(--ink);border-radius:100px;padding:3px 8px;white-space:nowrap}
.rw-tier__req{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.rw-tier__perks{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.rw-tier__perks li{position:relative;padding-left:17px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.rw-tier__perks li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--sage)}

.rw-how{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.rw-how__step{display:flex;gap:15px;align-items:flex-start;background:var(--paper);padding:20px 22px}
.rw-how__n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;font-family:var(--font-sans)}
.rw-how__step b{display:block;font-family:var(--font-display);font-weight:500;font-size:16px;margin-bottom:4px}
.rw-how__step p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0;max-width:62ch}

.rw-log{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.rw-log th{text-align:left;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--paper);white-space:nowrap}
.rw-log td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.rw-log tbody tr:last-child td{border-bottom:0}
.rw-log .r{text-align:right}
.rw-log__d{white-space:nowrap;color:var(--ink-3);font-size:12.5px}
.rw-log__s{font-size:12px;color:var(--ink-3);margin-top:3px;line-height:1.5}
.rw-log__b{font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap}
.rw-delta{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.rw-delta.is-up{color:var(--sage)}
.rw-delta.is-down{color:var(--accent)}

.rw-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  border:1px dashed var(--line-2);border-radius:var(--radius);padding:44px 24px;color:var(--muted)}
.rw-empty svg{width:30px;height:30px;color:var(--line-2)}
.rw-empty p{margin:0;font-size:14px}

/* ---------- checkout ----------
   Deliberately austere. Every link out of a checkout is a way to lose the
   order, so the header is a wordmark and a single way back to the cart. */
.co-header{position:static}
.co-header .nav{justify-content:space-between}
.co-back{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2)}
.co-back:hover{color:var(--ink)}
.co-back svg{width:15px;height:15px}
.co-footer{margin-top:0;padding-block:34px}
.co-footer .footer-note{margin:0 0 14px}

.co{display:grid;grid-template-columns:1.35fr .95fr;gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:940px){.co{grid-template-columns:1fr}.co__aside{order:-1}}
.co__aside{position:sticky;top:24px}
@media(max-width:940px){.co__aside{position:static}}

.co-step{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);
  margin-bottom:14px;overflow:hidden;transition:border-color .25s var(--ease)}
.co-step.is-open{border-color:var(--ink);background:#fff}
.co-step.is-locked{opacity:.5}
.co-step__head{display:flex;align-items:center;gap:12px;padding:18px clamp(18px,2.4vw,24px)}
.co-step.is-open .co-step__head{border-bottom:1px solid var(--line)}
.co-step__n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--paper-3);color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.co-step.is-open .co-step__n{background:var(--ink);color:var(--paper)}
.co-step.is-done .co-step__n{background:var(--sage);color:#fff}
.co-step.is-done .co-step__n svg{width:12px;height:12px}
.co-step__head h2{flex:1;font-family:var(--font-display);font-weight:500;font-size:1.1rem;margin:0}
.co-step__edit{font:inherit;font-size:12.5px;color:var(--ink-2);background:none;border:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.co-step__edit:hover{color:var(--accent)}
.co-step__body{padding:20px clamp(18px,2.4vw,24px) clamp(18px,2.4vw,24px)}
.co-step__recap{padding:0 clamp(18px,2.4vw,24px) 18px;margin-left:38px}
.co-step__recap b{font-size:14px}
.co-step__recap p{font-size:13px;line-height:1.55;color:var(--ink-3);margin:3px 0 0}

.co-three{display:grid;grid-template-columns:1.6fr .7fr 1fr;gap:12px}
@media(max-width:520px){.co-three{grid-template-columns:1fr}}
.co-hint{font-size:12px;color:var(--muted);margin:6px 0 16px}
/* the slot is always in the DOM so it can be filled in place — collapse it when
   empty rather than reserving a gap under every field */
.co-err{display:block;font-size:12px;color:var(--accent);margin-top:5px}
.co-err:empty{display:none}
.co-err-box{font-size:13px;line-height:1.5;color:var(--accent);margin:0 0 12px}
.co-err-box:empty{display:none}
/* aria-invalid does the styling as well as the announcement — one source of
   truth, and it can't drift from what a screen reader is told */
.co-step input[aria-invalid="true"]{border-color:var(--accent);background:#fdf6f3}
.co-step input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--accent-soft)}
.auth-field .opt{font-family:var(--font-display);font-style:italic;font-size:12px;
  text-transform:none;letter-spacing:0;color:var(--muted)}

/* delivery tiers — all admin-editable copy */
.co-rates{display:grid;gap:10px;margin-bottom:18px}
.co-rate{display:flex;align-items:center;gap:13px;padding:15px 16px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:10px;background:var(--paper);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.co-rate:hover{border-color:var(--ink-3)}
.co-rate.is-on{border-color:var(--ink);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.co-rate input{position:absolute;opacity:0;width:0;height:0}
.co-rate__dot{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-2);
  position:relative;transition:.2s var(--ease)}
.co-rate.is-on .co-rate__dot{border-color:var(--ink);border-width:5px}
.co-rate__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.co-rate__name{font-family:var(--font-display);font-weight:500;font-size:15.5px;color:var(--ink)}
.co-rate__desc{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.co-rate__eta{font-size:12px;color:var(--muted)}
.co-rate__price{flex:none;text-align:right;font-family:var(--font-display);font-weight:500;font-size:16px}
.co-rate__price .is-free{color:var(--sage)}
.co-rate__price s{display:block;font-size:12px;color:var(--muted);font-weight:400}

.co-pay__intro{font-size:13px;line-height:1.55;color:var(--ink-2);margin:0 0 12px}
.co-pay__methods{display:grid;gap:10px;margin-bottom:16px}
.co-paymethod{display:flex;align-items:flex-start;gap:13px;padding:15px 16px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:10px;background:var(--paper);
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.co-paymethod:hover{border-color:var(--ink-3)}
.co-paymethod.is-on{border-color:var(--ink);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.co-paymethod input{position:absolute;opacity:0;width:0;height:0}
.co-paymethod__dot{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-2);
  position:relative;transition:.2s var(--ease);margin-top:2px}
.co-paymethod.is-on .co-paymethod__dot{border-color:var(--ink);border-width:5px}
.co-paymethod__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.co-paymethod__name{font-family:var(--font-display);font-weight:500;font-size:15.5px;color:var(--ink)}
.co-paymethod__desc{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.co-paymethod input:focus-visible + .co-paymethod__dot{outline:2px solid var(--ink);outline-offset:3px}
.co-paymethod input:disabled + .co-paymethod__dot{opacity:.55}
.co-pay__note{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;border-radius:10px;
  background:var(--paper-2);border:1px solid var(--line);margin-bottom:16px}
.co-pay__note svg{width:20px;height:20px;color:var(--ink-3);flex:none}
.co-pay__note b{display:block;font-size:14px;margin-bottom:3px}
.co-pay__note p{font-size:12.5px;line-height:1.55;color:var(--ink-2);margin:0}
.co-pay__btn{font-size:15px;padding-block:16px}
.co-pay__btn:disabled{opacity:1;cursor:progress}
/* the button keeps its accent colour while working — going grey reads as
   "broken", and this is the moment a customer is most anxious */
.co-pay__btn:disabled:hover{transform:none;box-shadow:none}
.co-spin{display:inline-block;width:15px;height:15px;border-radius:50%;flex:none;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:coSpin .7s linear infinite}
@keyframes coSpin{to{transform:rotate(360deg)}}
/* the whole step dims while the payment is in flight, so it reads as locked */
.co-step.is-busy .co-pay__note{opacity:.55}
@media(prefers-reduced-motion:reduce){
  .co-spin{animation:none;border-top-color:rgba(255,255,255,.9)}
}

.co-gate{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  padding:60px 24px;border:1px dashed var(--line-2);border-radius:var(--radius-lg);color:var(--muted)}
.co-gate svg{width:30px;height:30px;color:var(--line-2)}

/* order summary on checkout */
.co-sum__items{display:grid;gap:12px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.co-sum__item{display:flex;align-items:center;gap:12px}
.co-sum__item .citem__img{overflow:visible}
.co-sum__qty{position:absolute;top:-7px;right:-7px;z-index:2;min-width:19px;height:19px;padding:0 5px;
  border-radius:20px;background:var(--ink);color:var(--paper);font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center}
.co-sum__body{flex:1;min-width:0;display:flex;flex-direction:column}
.co-sum__body b{font-family:var(--font-display);font-weight:500;font-size:14.5px}
.co-sum__body span{font-size:12px;color:var(--muted)}
.co-sum__price{flex:none;font-size:14px;font-variant-numeric:tabular-nums}
.co-sum__ship{font-style:normal;font-size:12px;color:var(--muted)}

/* ---------- cart summary ---------- */
.csum{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(20px,2.4vw,26px)}
.csum__h{font-family:var(--font-display);font-weight:500;font-size:1.2rem;margin:0 0 16px}
.csum__rows{display:grid;gap:10px}
.csum__row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:14px;color:var(--ink-2)}
.csum__row b{color:var(--ink);font-variant-numeric:tabular-nums}
.csum__row.is-credit{color:var(--sage)}
.csum__row.is-credit span:first-child{display:inline-flex;align-items:center;gap:6px}
.csum__row.is-credit svg{width:12px;height:12px;color:var(--gold)}
.csum__free{color:var(--sage);font-weight:500}
.csum__total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--font-display);font-weight:500;font-size:1.35rem;font-variant-numeric:tabular-nums}
.csum__go{margin-top:20px}
.csum__warn{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--accent);text-align:center}
.csum__trust{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--muted)}
.csum__trust span{display:inline-flex;align-items:center;gap:5px}
.csum__trust svg{width:13px;height:13px}

/* free-shipping progress */
.cship{margin-top:14px;padding:11px 13px;border-radius:8px;background:var(--paper-2);border:1px solid var(--line)}
.cship.is-done{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--sage);
  background:var(--sage-soft);border-color:transparent}
.cship.is-done svg{width:14px;height:14px;flex:none}
.cship__k{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);margin-bottom:8px}
.cship__k svg{width:14px;height:14px;color:var(--accent);flex:none}
.cship__k b{color:var(--ink);font-weight:600}
.cship__bar{height:5px;border-radius:20px;background:var(--paper-3);overflow:hidden}
.cship__bar span{display:block;height:100%;border-radius:20px;background:var(--ink);
  transition:width .5s var(--ease)}

/* ---------- earn preview ----------
   What you get for paying. The most persuasive thing a rewards program can put
   in front of someone who is about to check out. */
.earn{display:flex;align-items:flex-start;gap:11px;margin-top:16px;padding:13px 14px;
  border-radius:10px;background:var(--sage-soft);border:1px solid transparent}
.earn.is-out{background:var(--paper-2);border-color:var(--line)}
.earn__ic{flex:none;width:26px;height:26px;border-radius:50%;background:var(--sage);color:#fff;
  display:flex;align-items:center;justify-content:center}
.earn.is-out .earn__ic{background:var(--ink)}
.earn__ic svg{width:12px;height:12px}
.earn__body{min-width:0}
.earn__body b{display:block;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.earn__body p{font-size:12px;line-height:1.5;color:var(--ink-2);margin:2px 0 0}
.earn__link{font:inherit;font-size:12px;font-weight:600;color:var(--ink);background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.earn__link:hover{color:var(--accent)}

/* ---------- spend points at checkout ----------
   Same sand-on-hairline as the free-shipping strip above it. A white card here
   read as a foreign element punched into the summary. */
.rpay{border:1px solid var(--line);border-radius:8px;background:var(--paper-2);padding:15px;margin:14px 0 0;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.rpay.is-on{border-color:var(--ink)}
.rpay.is-idle{border-style:dashed}

.rpay__head{display:flex;align-items:center;gap:11px}
.rpay__ic{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--gold);
  display:flex;align-items:center;justify-content:center}
.rpay__ic svg{width:13px;height:13px}
.rpay__id{flex:1;min-width:0}
.rpay__bal{font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.005em}
.rpay__sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.rpay__off{flex:none;font-family:var(--font-display);font-weight:500;font-size:1.25rem;
  color:var(--sage);font-variant-numeric:tabular-nums}
.rpay:not(.is-on) .rpay__off{color:var(--line-2)}

.rpay__slider{margin-top:14px}
/* the track is painted from --fill, updated live on drag, so the used portion
   reads as "spent" rather than the thumb floating on an undifferentiated line */
.rpay__slider input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:20px;cursor:pointer;
  background:linear-gradient(to right,var(--ink) 0 var(--fill,0%),var(--paper-3) var(--fill,0%) 100%)}
.rpay__slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--ink);border:3px solid #fff;box-shadow:0 1px 5px rgba(28,26,20,.35);cursor:grab}
.rpay__slider input[type=range]::-webkit-slider-thumb:active{cursor:grabbing}
.rpay__slider input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--ink);border:3px solid #fff;
  box-shadow:0 1px 5px rgba(28,26,20,.35);cursor:grab}
.rpay__slider input[type=range]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.rpay__scale{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;
  font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.rpay__scale span:nth-child(2){font-weight:600;color:var(--ink);font-size:12px}
.rpay:not(.is-on) .rpay__scale span:nth-child(2){font-weight:400;color:var(--muted)}

.rpay__acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.rpay__btn{font:inherit;font-size:12px;font-weight:500;color:var(--ink-2);background:transparent;
  border:1px solid var(--line-2);border-radius:100px;padding:6px 13px;cursor:pointer;transition:.2s var(--ease)}
.rpay__btn:hover{border-color:var(--ink);color:var(--ink);background:var(--paper)}
.rpay__cap{font-size:11px;color:var(--muted);margin-left:auto}

/* ---------- partner program ---------- */
.acct-tab.has-dot{position:relative}
.acct-tab.has-dot::after{content:"";position:absolute;top:50%;right:12px;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--accent)}

.prt-terms{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:34px}
.prt-term{background:var(--paper);padding:22px 22px 20px}
.prt-term__num{font-family:Fraunces,serif;font-size:30px;font-weight:500;letter-spacing:-.015em;line-height:1.1}
.prt-term__k{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin:8px 0 8px}
.prt-term p{font-size:13.5px;color:var(--ink-2);line-height:1.55}
@media(max-width:640px){.prt-terms{grid-template-columns:1fr}}

.prt-applied{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.prt-applied.is-closed{background:var(--paper-2)}
.prt-applied__badge{flex:none;width:34px;height:34px;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center}
.prt-applied__badge svg{width:17px;height:17px}
.prt-applied b{display:block;margin-bottom:5px}
.prt-applied p{font-size:14px;line-height:1.6;margin:0}

/* ---------- partner application ----------
   An editorial composer, not a stray form control. The card carries the
   section heading so the textarea reads as the body of a letter. */
.prt-apply{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);overflow:hidden;max-width:640px}
.prt-apply__head{padding:26px clamp(22px,3vw,30px) 22px;border-bottom:1px solid var(--line)}
.prt-apply__head .eyebrow{margin-bottom:12px}
.prt-apply__head h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.35rem,2.4vw,1.7rem);letter-spacing:-.015em;margin:0 0 8px}
.prt-apply__head p{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin:0;max-width:46ch}
.prt-apply__body{padding:24px clamp(22px,3vw,30px) 0}

.prt-brief__lab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.prt-brief__lab span{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.prt-brief__lab em{font-family:var(--font-display);font-style:italic;font-size:13px;color:var(--muted)}
.prt-brief textarea{display:block;width:100%;box-sizing:border-box;resize:vertical;min-height:150px;
  padding:16px 17px;border:1px solid var(--line-2);border-radius:10px;background:#fff;
  font-family:var(--font-sans);font-size:15px;line-height:1.7;color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.prt-brief textarea::placeholder{color:var(--muted);opacity:.85}
.prt-brief textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--accent-soft)}
.prt-brief__foot{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:9px}
.prt-brief__hint{font-size:12.5px;color:var(--muted);line-height:1.5}
.prt-brief__count{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.prt-brief__count.is-near{color:var(--accent)}

.prt-apply__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:24px;padding:20px clamp(22px,3vw,30px);border-top:1px solid var(--line);background:var(--paper-2)}
.prt-apply__foot .btn{margin:0}
.prt-apply__note{font-size:12.5px;color:var(--muted);line-height:1.55;margin:0;max-width:30ch;font-style:italic;font-family:var(--font-display)}
.prt-apply .auth-err{margin:0 0 4px}
@media(max-width:520px){
  .prt-apply__foot{flex-direction:column;align-items:stretch}
  .prt-apply__foot .btn{width:100%;justify-content:center}
  .prt-apply__note{max-width:none;order:2;text-align:center}
}

.prt-link{display:flex;gap:8px}
.prt-link input{flex:1;min-width:0;font:inherit;font-size:14px;font-family:ui-monospace,"DejaVu Sans Mono",monospace;padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--radius-sm,6px);background:#fff;color:var(--ink)}
.prt-code{display:flex;gap:8px}
.prt-code input{flex:1;min-width:0;font:inherit;font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--radius-sm,6px);background:#fff;color:var(--ink)}
.prt-code input:focus,.prt-link input:focus{outline:0;border-color:var(--ink)}
.prt-codemsg{font-size:12.5px;margin-top:7px;min-height:1em}
.prt-codemsg.is-bad{color:var(--accent)}
.prt-codemsg.is-ok{color:var(--sage)}

/* progress bar + commission log now use the shared .rw-prog / .rw-log components */

.prt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.prt-cell{background:#fff;padding:16px 18px}
.prt-cell .k{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.prt-cell .v{font-family:Fraunces,serif;font-size:24px;font-weight:500;margin-top:5px;font-variant-numeric:tabular-nums}
@media(max-width:640px){.prt-grid{grid-template-columns:repeat(2,1fr)}}

.prt-st{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:20px;border:1px solid}
.prt-st.is-pending{color:#8a7420;border-color:#e6dcb4;background:#fbf7e8}
.prt-st.is-approved{color:#2f5d78;border-color:#c3d8e4;background:#eef5f9}
.prt-st.is-paid{color:#2f6a45;border-color:#c2ddcc;background:#eef6f1}
.prt-st.is-reversed{color:#a33b28;border-color:#e6cfc6;background:#fdf3f0;text-decoration:line-through}

/* ---------- contact page ----------
   The form deliberately reuses the .prt-brief composer from the partner
   application: same textarea, same counter, same footer bar. Two forms that do
   the same job should not look like they came from different sites. */
.contact{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,4vw,54px);align-items:start}
@media(max-width:940px){.contact{grid-template-columns:1fr}}

.contact__form{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);overflow:hidden}
.contact__head{padding:26px clamp(22px,3vw,32px) 22px;border-bottom:1px solid var(--line)}
.contact__head .eyebrow{margin-bottom:12px}
.contact__head h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.015em;margin:0 0 8px}
.contact__head p{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin:0;max-width:48ch}
.contact__body{padding:24px clamp(22px,3vw,32px) 0}
.contact__body .auth-field>span{display:flex;align-items:baseline;gap:8px}
.contact__body .opt{font-family:var(--font-display);font-style:italic;font-size:12px;text-transform:none;letter-spacing:0;color:var(--muted)}
.contact__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:24px;padding:20px clamp(22px,3vw,32px);border-top:1px solid var(--line);background:var(--paper-2)}
.contact__note{font-size:12.5px;color:var(--muted);line-height:1.55;margin:0}
.contact__note a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.contact__note a:hover{color:var(--accent)}
.contact__form .auth-err{margin:0 0 4px}

/* the honeypot must be unreachable, not merely invisible — display:none is
   the one thing some bots know to skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.contact__card{display:flex;gap:15px;align-items:flex-start;padding:22px;border:1px solid var(--line);
  border-radius:var(--radius-lg);background:#fff;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.contact__card:hover{border-color:var(--ink);transform:translateY(-2px)}
.contact__card-ic{flex:none;width:38px;height:38px;border-radius:50%;background:var(--paper-2);color:var(--ink);
  display:flex;align-items:center;justify-content:center}
.contact__card-ic svg{width:19px;height:19px}
.contact__card b{display:block;font-family:var(--font-display);font-weight:500;font-size:16px;margin-bottom:5px}
.contact__card p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0 0 9px}
.contact__card-go{font-size:12.5px;font-weight:500;color:var(--accent)}

.contact__facts{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.contact__fact{padding:16px 20px;border-bottom:1px solid var(--line);background:var(--paper)}
.contact__fact:last-child{border-bottom:0}
.contact__fact .k{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.contact__fact .v{font-family:var(--font-display);font-weight:500;font-size:16px}
.contact__fact .v a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.contact__fact .v a:hover{color:var(--accent)}

/* sent state — replaces the form in place */
.contact__sent{display:flex;gap:16px;align-items:flex-start;padding:clamp(24px,3vw,34px)}
.contact__sent-ic{flex:none;width:38px;height:38px;border-radius:50%;background:var(--sage);color:#fff;
  display:flex;align-items:center;justify-content:center}
.contact__sent-ic svg{width:18px;height:18px}
.contact__sent h2{font-family:var(--font-display);font-weight:400;font-size:1.5rem;margin:0 0 8px}
.contact__sent p{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin:0 0 6px;max-width:46ch}
.contact__sent .ref{font-family:var(--font-mono);font-size:12px;color:var(--muted)}

/* ---------- out of stock ---------- */
.card.is-oos .pmedia{filter:grayscale(.55) opacity(.62)}
.card.is-oos .card__media::after{opacity:.4}
.card.is-oos .card__name{color:var(--ink-2)}
.card__tag.is-oos{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.card__oos{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.card__add:disabled{opacity:.32;cursor:not-allowed}
.card__add:disabled:hover{background:transparent;border-color:var(--line-2);color:inherit}

.dose__opt.is-oos{opacity:.45;cursor:not-allowed;text-decoration:line-through;text-decoration-color:var(--ink-3)}
.dose__opt.is-oos span{text-decoration:none}
.dose__opt:disabled:hover{border-color:var(--line-2)}

.pdp__stock--oos{color:var(--accent);font-weight:500}
.pdp__stock--low{color:var(--accent);font-weight:500}

/* discount code entry on the cart page */
/* One discount component, used in the cart drawer AND on the cart page. */
.promo{display:flex;gap:8px;margin:16px 0 0}
.promo input{flex:1;min-width:0;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line-2);
  border-radius:6px;background:#fff;color:var(--ink);text-transform:uppercase;letter-spacing:.04em}
.promo input::placeholder{text-transform:none;letter-spacing:0;color:var(--muted)}
.promo input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px var(--accent-soft)}
.promo .btn{flex:none}
.promo .btn:disabled{opacity:.45;pointer-events:none}

/* collapses to zero when there's no message, so it doesn't reserve dead space
   in the drawer footer where vertical room is tight */
.promo__msg{font-size:12.5px;line-height:1.45;margin-top:7px}
.promo__msg:empty{display:none;margin:0}
.promo__msg.is-bad{color:var(--accent)}
.promo__msg.is-ok{color:var(--sage)}

/* the applied code's "remove" — a button, because it performs an action rather
   than going anywhere */
.promo__rm{font:inherit;font-size:12px;color:var(--muted);background:none;border:0;padding:0 0 0 2px;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.promo__rm:hover{color:var(--accent)}

.citem__img{width:60px;height:74px;border-radius:5px;background:var(--paper);display:flex;align-items:center;justify-content:center;border:1px solid var(--line);position:relative;overflow:hidden}

.citem__name{font-family:var(--font-display);font-weight:500;font-size:16px}
.citem__meta{font-size:12px;color:var(--muted);margin-top:3px;letter-spacing:.02em}
.citem__qty{display:inline-flex;align-items:center;gap:2px;margin-top:12px;border:1px solid var(--line-2);border-radius:100px;padding:2px}
.citem__qty button{width:24px;height:24px;border:none;background:transparent;border-radius:50%;font-size:15px;color:var(--ink);display:flex;align-items:center;justify-content:center}
.citem__qty button:hover{background:var(--paper-3)}
.citem__qty span{min-width:22px;text-align:center;font-size:13px}
.citem__right{text-align:right;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}
.citem__price{font-family:var(--font-display);font-weight:500}
.citem__rm{background:none;border:none;color:var(--muted);font-size:12px;text-decoration:underline;padding:0}
.citem__rm:hover{color:var(--ink)}
/* ---------- cart upsell ----------
   Sits under the cart lines, inside the drawer body. Deliberately quieter than
   a real cart line — it's an offer, not something you've chosen. */
.upsell{margin:18px 0 6px;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);overflow:hidden}
.upsell__k{display:flex;align-items:center;gap:7px;padding:9px 14px;border-bottom:1px solid var(--line);
  background:var(--paper);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.upsell__k svg{width:11px;height:11px;flex:none}
.upsell__row{display:flex;align-items:center;gap:13px;padding:13px 14px}
.upsell__img{flex:none;width:44px;height:54px;border-radius:5px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden}

.upsell__body{flex:1;min-width:0}
.upsell__name{display:block;font-family:var(--font-display);font-weight:500;font-size:15px;color:var(--ink)}
.upsell__name:hover{color:var(--accent)}
.upsell__body p{font-size:12px;line-height:1.45;color:var(--ink-3);margin:3px 0 0}
.upsell__act{flex:none;text-align:right}
.upsell__price{font-family:var(--font-display);font-weight:500;font-size:15px;margin-bottom:6px}
.upsell__btn{font:inherit;font-size:12px;font-weight:500;color:var(--paper);background:var(--ink);
  border:1px solid var(--ink);border-radius:100px;padding:6px 16px;cursor:pointer;transition:.2s var(--ease)}
.upsell__btn:hover{background:transparent;color:var(--ink)}
.upsell__btn:disabled{opacity:.5;pointer-events:none}

/* max-height is the safety net: on a very short viewport even the natural
   footer may not fit, and flex:none would let it run off the bottom of the
   drawer. Scroll it rather than lose the checkout button. */
.drawer__foot{flex:none;max-height:72%;overflow-y:auto;
  border-top:1px solid var(--line);padding:22px 26px;background:var(--paper-2)}
.drawer__row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:var(--ink-2);margin-bottom:9px}
.drawer__row svg{width:14px;height:14px;flex:none}
.drawer__row.total{font-family:var(--font-display);font-weight:500;font-size:20px;color:var(--ink);margin:14px 0 0}
/* the promo field and the checkout button were butting up against each other —
   .btn is inline-flex, so it brings no margin of its own */
.drawer__foot .promo{margin-top:16px}
.drawer__foot .btn--block{margin-top:16px}
.drawer__foot .note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:14px;font-style:italic;font-family:var(--font-display)}

/* ---------- shop layout ---------- */
.page-hero{padding-block:clamp(56px,8vw,104px);border-bottom:1px solid var(--line);background:
  radial-gradient(100% 130% at 88% 0%,#efe6d6,var(--paper) 62%)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:34px}
.toolbar .count{font-size:13px;color:var(--muted);font-style:italic;font-family:var(--font-display)}
/* ---------- verification gate (verify.html) ---------- */
.verify-body{background:var(--paper-2)}
.verify{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.verify__card{background:var(--paper);border:1px solid var(--line-2);border-radius:14px;max-width:520px;width:100%;padding:clamp(30px,5vw,48px);text-align:center;box-shadow:0 24px 70px rgba(28,26,20,.12)}
.verify__card .star{width:28px;height:28px;color:var(--accent);margin-bottom:16px}
.verify__eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.verify__card h1{font-family:var(--font-display);font-weight:500;font-size:clamp(1.6rem,4vw,2.1rem);margin-bottom:12px}
.verify__body{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin-bottom:24px}
.verify__check{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:14px 16px;border:1px solid var(--line-2);border-radius:10px;margin-bottom:10px;cursor:pointer;font-size:14px;line-height:1.55;color:var(--ink-2)}
.verify__check:hover{border-color:var(--ink-3)}
.verify__check input{accent-color:var(--accent);width:17px;height:17px;flex:none;margin-top:2px;cursor:pointer}
.verify__row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.verify__row .btn[disabled]{opacity:.45;cursor:not-allowed}
.verify__fine{font-size:12px;line-height:1.6;color:var(--ink-3);margin-top:22px}

.shop-search{position:relative;flex:1 1 220px;max-width:320px}
.shop-search input{width:100%;appearance:none;-webkit-appearance:none;border:1px solid var(--line-2);background:transparent;border-radius:100px;padding:11px 18px 11px 42px;font-family:var(--font-sans);font-size:13px;color:var(--ink)}
.shop-search input::placeholder{color:var(--muted)}
.shop-search input:focus{outline:none;border-color:var(--ink-3)}
.shop-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.shop-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:14px;height:14px;pointer-events:none;color:var(--muted)}
.select{position:relative}
.select select{appearance:none;border:1px solid var(--line-2);background:transparent;border-radius:100px;padding:11px 42px 11px 18px;font-family:var(--font-sans);font-size:13px;color:var(--ink);cursor:pointer}
.select svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:14px;height:14px;pointer-events:none;color:var(--muted)}

/* ---------- product detail ---------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:start}
@media(max-width:900px){.pdp{grid-template-columns:1fr}}
.pdp__media{position:sticky;top:calc(var(--header-h) + 22px)}
.pdp__stage{aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--paper);
  display:flex;align-items:center;justify-content:center}
/* .pdp__stage img is sized by .pmedia — a % width AND height squashes it */
.pdp__thumbs{display:flex;gap:12px;margin-top:14px}
.pdp__thumb{width:74px;height:88px;border-radius:6px;border:1px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.pdp__thumb.active{border-color:var(--ink)}
/* .pdp__thumb img is sized by .pmedia */
@media(max-width:900px){.pdp__media{position:static}}
.pdp__cat{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.pdp h1{font-size:clamp(2.4rem,4.6vw,3.4rem);font-weight:400;margin:14px 0 16px;letter-spacing:-.02em}
.pdp__sub{font-size:1.15rem;color:var(--ink-2);max-width:52ch;font-family:var(--font-display);line-height:1.5}
.pdp__price{display:flex;align-items:baseline;gap:14px;margin:26px 0}
.pdp__price .amt{font-family:var(--font-display);font-weight:500;font-size:2.1rem}
.pdp__buy{display:flex;gap:12px;align-items:stretch;margin:24px 0}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:100px;padding:4px}
.qty button{width:38px;height:38px;border:none;background:transparent;border-radius:50%;font-size:18px;display:flex;align-items:center;justify-content:center}
.qty button:hover{background:var(--paper-3)}
.qty span{min-width:34px;text-align:center}
.pdp__facts{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}
.pdp__section{margin-top:38px;padding-top:32px;border-top:1px solid var(--line)}
.pdp__section h3{font-size:12px;font-family:var(--font-sans);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.seq{font-family:var(--font-mono);font-size:13px;line-height:1.9;word-break:break-word;background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:16px 18px;color:var(--ink-2)}
.ruo-note{display:flex;gap:15px;padding:20px;border:1px solid var(--accent-soft);background:var(--accent-soft);border-radius:8px;color:var(--accent-ink);font-size:14px;line-height:1.6}
.ruo-note svg{width:22px;height:22px;color:var(--accent);flex:none}
.incart{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

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

/* responsive nav */
@media(max-width:860px){
  .nav-links{position:fixed;inset:var(--header-h) 0 auto 0;background:var(--paper);flex-direction:column;align-items:stretch;
    gap:2px;padding:16px var(--gutter) 26px;border-bottom:1px solid var(--line);transform:translateY(-140%);
    transition:transform .35s var(--ease);box-shadow:var(--shadow);margin:0}
  .nav-links.open{transform:none}
  .nav-links a{padding:14px 12px;font-size:16px;border-radius:8px}
  .nav-toggle{display:inline-flex}
}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);
  padding:14px 22px;border-radius:100px;font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:10px;opacity:0;visibility:hidden;transition:.35s var(--ease);z-index:120}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.toast svg{width:17px;height:17px;color:var(--sage)}

/* ---------- card 'from' price ---------- */
.card__from{font-family:var(--font-sans);font-size:12px;font-weight:400;color:var(--muted)}

/* ---------- product: aka + stock + dosage selector ---------- */
.pdp__aka{font-size:14px;color:var(--muted);margin:-8px 0 16px;font-style:italic;font-family:var(--font-display)}
.pdp__stock{color:var(--sage);font-size:13px;display:inline-flex;align-items:center;gap:5px}
.pdp__stock svg{width:15px;height:15px}
.dose{margin:26px 0 6px}
.dose__label{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.dose__label span{color:var(--ink);margin-left:6px}
.dose__opts{display:flex;flex-wrap:wrap;gap:10px}
.dose__opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:11px 17px;border:1px solid var(--line-2);border-radius:10px;background:transparent;min-width:96px;cursor:pointer;transition:.2s var(--ease);font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink)}
.dose__opt span{font-family:var(--font-sans);font-weight:400;font-size:12.5px;color:var(--muted)}
.dose__opt:hover{border-color:var(--ink)}
.dose__opt.active{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.dose__opt.active span{color:#cfc9bd}

/* ---------- COA section ---------- */
.coa-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:760px){.coa-grid{grid-template-columns:1fr}}
.coa-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);padding:26px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow-sm)}
.coa-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:15px}
.coa-card__batch{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.01em}
.coa-card__no{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:4px}
.coa-badge{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.1em;padding:6px 13px;border-radius:100px;background:var(--paper-3);color:var(--ink-2);white-space:nowrap}
.coa-badge.is-pass{background:var(--sage-soft);color:var(--sage)}
.coa-fields,.coa-panels{display:grid;grid-template-columns:1fr 1fr;gap:13px 20px}
.coa-panels{grid-template-columns:1fr;gap:11px;padding-top:15px;border-top:1px solid var(--line)}
.coa-field{display:flex;flex-direction:column;gap:3px}
.coa-field span{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.coa-field b{font-family:var(--font-mono);font-size:13px;font-weight:400;color:var(--ink);line-height:1.4}
.coa-card__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:8px}
.coa-card__foot .btn svg{width:16px;height:16px}
.coa-verify{font-size:12px;color:var(--muted);text-decoration:underline;font-family:var(--font-mono)}
.coa-verify:hover{color:var(--ink)}
.coa-empty{display:flex;gap:18px;align-items:flex-start;padding:32px;border:1px dashed var(--line-2);border-radius:var(--radius);background:var(--paper-2);color:var(--ink-2);max-width:760px}
.coa-empty svg{width:30px;height:30px;color:var(--muted);flex:none;margin-top:2px}
.coa-empty b{font-family:var(--font-display);font-size:18px}
.coa-empty p{font-size:14px;color:var(--muted);margin-top:5px;max-width:60ch}
.coa-checking{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:9px}
.coa-checking svg{width:17px;height:17px}

/* ---------- account: button avatar + user menu ---------- */
.icon-btn.is-auth{background:var(--ink);color:var(--paper)}
.icon-btn.is-auth:hover{background:var(--accent)}
.acct-ini{font-family:var(--font-display);font-weight:600;font-size:13px;line-height:1}
.acct-ini.lg{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.acct-menu{position:fixed;z-index:150;width:252px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;animation:acctIn .2s var(--ease)}
@keyframes acctIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.acct-menu__id{display:flex;gap:12px;align-items:center;padding:12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.acct-menu__who{min-width:0}
.acct-menu__who b{font-family:var(--font-display);font-weight:600;font-size:15px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-menu__who small{color:var(--muted);font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-role{display:inline-block;margin-top:7px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft);padding:3px 9px;border-radius:100px}
.acct-menu__item{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:8px;font-size:14px;color:var(--ink);background:none;border:none;cursor:pointer;font-family:inherit}
.acct-menu__item:hover{background:var(--paper-2)}
/* same signal as the account page's Partner tab: there is something here for you */
.acct-menu__item.has-dot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.acct-menu__item.has-dot::after{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.acct-signout{color:var(--accent-ink);font-weight:600}
.acct-menu__demo{font-family:var(--font-mono);font-size:10px;color:var(--muted);text-align:center;padding:10px 8px 4px;border-top:1px solid var(--line);margin-top:6px}

/* ---------- auth modal ---------- */
.auth-scrim{position:fixed;inset:0;background:rgba(28,26,20,.5);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.3s var(--ease);z-index:130}
.auth-scrim.open{opacity:1;visibility:visible}
.auth-modal{position:fixed;z-index:140;top:50%;left:50%;transform:translate(-50%,-46%) scale(.98);opacity:0;visibility:hidden;
  width:min(444px,calc(100vw - 28px));max-height:calc(100vh - 36px);overflow:auto;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:34px 32px 26px;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.auth-modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.auth-close{position:absolute;top:15px;right:15px;width:36px;height:36px;border-radius:50%;border:1px solid transparent;background:transparent;color:var(--ink-2);display:flex;align-items:center;justify-content:center}
.auth-close:hover{background:var(--paper-3)}
.auth-close svg{width:18px;height:18px}
.auth-brand{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:24px}
.auth-brand .auth-star{width:22px;height:22px;color:var(--ink)}
.auth-brand .auth-star svg{width:22px;height:22px;display:block}
.auth-word{font-family:var(--font-display);font-weight:500;letter-spacing:.28em;padding-left:.28em;font-size:18px}
.auth-view h2{font-size:1.7rem;font-weight:400;text-align:center;margin-bottom:6px}
.auth-sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:22px;max-width:34ch;margin-inline:auto}
.auth-field{display:block;margin-bottom:14px}
.auth-field>span{display:block;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.auth-field input,.auth-field select,.auth-field textarea{width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--paper);font-family:var(--font-sans);font-size:15px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.auth-field input:focus,.auth-field select:focus,.auth-field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--accent-soft)}
/* a textarea with no rule of its own falls back to the browser default — wrong
   font, wrong border, wrong everything. It inherits the field styling above. */
.auth-field textarea{display:block;resize:vertical;min-height:110px;line-height:1.6}
.auth-field select{appearance:none;cursor:pointer;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236a6e78'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
.auth-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:430px){.auth-two{grid-template-columns:1fr}}
.auth-err{color:var(--accent-ink);font-size:13px;margin:2px 0 10px;line-height:1.4}
.auth-err:empty{display:none}
.auth-submit{margin-top:6px}
.auth-fine{font-size:11.5px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.55}
.auth-forgot{font-size:12.5px;text-align:right;margin:-8px 0 10px}
.auth-forgot a{color:var(--ink-3);text-decoration:underline}
.auth-forgot a:hover{color:var(--accent)}
.auth-switch{font-size:13.5px;color:var(--ink-2);text-align:center;margin-top:16px}
.auth-switch a{color:var(--accent);font-weight:600;text-decoration:underline}
.auth-mode{text-align:center;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted);margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}

/* ---------- account page ---------- */
.acct{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:start}
@media(max-width:820px){.acct{grid-template-columns:1fr;gap:26px}}
.acct-nav{position:sticky;top:calc(var(--header-h) + 20px);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;background:var(--paper)}
@media(max-width:820px){.acct-nav{position:static}}
.acct-nav__id{display:flex;gap:13px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:14px}
.acct-nav__who{min-width:0}
.acct-nav__who b{font-family:var(--font-display);font-weight:600;font-size:16px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-nav__who small{color:var(--muted);font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.acct-tabs{display:flex;flex-direction:column;gap:4px}
.acct-tab{text-align:left;padding:11px 14px;border-radius:9px;border:none;background:none;font-family:var(--font-sans);font-size:14.5px;color:var(--ink-2);cursor:pointer;transition:.15s}
.acct-tab:hover{background:var(--paper-2);color:var(--ink)}
.acct-tab.active{background:var(--ink);color:var(--paper)}
.acct-out{margin-top:16px;width:100%;text-align:left;padding:11px 14px;border-radius:9px;border:none;background:none;color:var(--accent-ink);font-weight:600;font-size:14px;cursor:pointer;font-family:inherit}
.acct-out:hover{background:var(--accent-soft)}
.acct-h{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:400;margin-bottom:6px}
.acct-sub{font-family:var(--font-display);font-weight:500;font-size:1.1rem;margin:26px 0 14px}
/* the overview's stat strip is now the shared .rw-stats component */
.acct-empty{display:flex;gap:16px;align-items:flex-start;padding:30px;border:1px dashed var(--line-2);border-radius:var(--radius);background:var(--paper-2)}
.acct-empty svg{width:28px;height:28px;color:var(--muted);flex:none}
.acct-empty b{font-family:var(--font-display);font-size:17px}
.acct-empty p{color:var(--muted);font-size:14px;margin-top:4px}
.acct-orders{display:flex;flex-direction:column;gap:16px}
.order{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);padding:20px 22px}
.order__actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.order__actions .order__cancel{margin-right:auto;color:var(--muted);border-color:var(--line)}
.order__actions .order__cancel:hover{color:var(--accent-ink);border-color:var(--accent)}

/* the cancel-confirmation dialog */
.cfm-backdrop{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(28,26,20,.45);backdrop-filter:blur(3px)}
.cfm-card{width:min(92vw,420px);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:28px}
.cfm-card h3{font-family:var(--font-display);font-weight:500;font-size:1.35rem;margin:0 0 8px}
.cfm-card p{margin:0 0 20px;color:var(--ink-2);font-size:14px;line-height:1.6}
.cfm-actions{display:flex;justify-content:flex-end;gap:10px}

/* ---------- order details view ---------- */
.od-back{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);text-decoration:none;margin-bottom:18px}
.od-back svg{width:14px;height:14px;transform:rotate(180deg)}
.od-back:hover{color:var(--accent)}
.od-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.od-head .acct-h{margin-bottom:0}
.od-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:#FFFDF6;box-shadow:var(--shadow-sm);padding:24px 26px}
.od-card h3{font-family:var(--font-display);font-weight:500;font-size:1.15rem;margin:0 0 18px}
.od-progress{margin-bottom:22px}
.od-steps{position:relative;display:flex;justify-content:space-between;margin-top:6px;padding-top:2px}
.od-steps::before{content:"";position:absolute;left:calc(12.5% - 14px);right:calc(12.5% - 14px);top:16px;height:2px;background:var(--line-2)}
.od-steps.is-idle::before{background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px)}
.od-steps__fill{position:absolute;left:calc(12.5% - 14px);top:16px;height:2px;background:var(--sage);max-width:calc(75% + 28px);transition:width .5s var(--ease)}
.od-step{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.od-step__dot{width:30px;height:30px;border-radius:50%;background:var(--paper);border:2px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:transparent;transition:background .3s,border-color .3s}
.od-step__dot svg{width:14px;height:14px}
.od-step.is-on .od-step__dot{background:var(--sage);border-color:var(--sage);color:#fff}
.od-step.is-now .od-step__dot{box-shadow:0 0 0 5px var(--sage-soft)}
.od-step__label{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.od-step.is-on .od-step__label{color:var(--ink)}
.od-step__date{font-size:11.5px;color:var(--muted);min-height:15px}
.od-tracking{display:flex;justify-content:space-between;gap:14px;margin-top:18px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);font-size:13px;color:var(--ink-2)}
.od-progress__note{margin:16px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.od-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start}
.od-side{display:grid;gap:22px}
.od-items{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.od-item{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:14.5px}
.od-item em{font-style:normal;color:var(--muted)}
.od-row{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:14px;color:var(--ink-2)}
.od-row span:last-child{color:var(--ink);font-variant-numeric:tabular-nums}
.od-row--total{margin-top:6px;padding-top:12px;border-top:1px solid var(--line-2);font-family:var(--font-display);font-size:17px;color:var(--ink)}
.od-row--total span:last-child{font-size:19px;font-weight:500}
.od-addr{font-style:normal;font-size:14.5px;line-height:1.75;color:var(--ink-2)}
.od-addr b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.od-help{margin-top:26px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper-2);padding:32px 26px;text-align:center}
.od-help h3{font-family:var(--font-display);font-weight:500;font-size:1.3rem;margin:0 0 8px}
.od-help p{margin:0 auto 18px;max-width:46ch;color:var(--ink-2);font-size:14px}
@media (max-width:760px){
  .od-grid{grid-template-columns:1fr}
  .od-step__label{font-size:10px;letter-spacing:.05em}
  .od-step__date{display:none}
  .od-card{padding:18px 16px}
}
.order.is-returned{border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-soft)}
.order__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:13px}
.order__id{font-family:var(--font-display);font-weight:600;font-size:16px}
.order__date{font-size:12.5px;color:var(--muted);margin-top:2px}
.order__status{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft);padding:5px 11px;border-radius:100px;white-space:nowrap}
/* status hues — warm-palette siblings of the design tokens: gray while
   nothing has happened, amber while we work, steel blue on the road,
   sage on arrival; canceled goes quiet, refunded keeps the accent */
.order__status--pending{color:#6B6455;background:#EAE6DB}
.order__status--processing,.order__status--ready{color:#8A6520;background:#F4E7C6}
.order__status--shipped{color:#35617D;background:#DCE7EE}
.order__status--delivered{color:var(--sage);background:var(--sage-soft)}
.order__status--canceled{color:var(--muted);background:#ECE9E1}
.order__items{display:flex;flex-direction:column;gap:8px}
.order__item{display:flex;justify-content:space-between;gap:14px;font-size:14px;color:var(--ink-2)}
.order__item em{font-style:normal;color:var(--muted);font-family:var(--font-mono);font-size:12px}
.order__foot{display:flex;justify-content:space-between;margin-top:13px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--font-display);font-weight:600}
.pay-return{display:flex;gap:18px;align-items:flex-start;border:1px solid var(--sage);border-radius:var(--radius-lg);background:var(--sage-soft);padding:24px;margin:0 0 24px}
.pay-return--pending{border-color:var(--line-2);background:var(--paper-2)}
.pay-return__icon{flex:none;width:42px;height:42px;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center}
.pay-return--pending .pay-return__icon{background:var(--ink-2)}
.pay-return__icon svg{width:22px;height:22px}
.pay-return__body{min-width:0;flex:1}
.pay-return__eyebrow{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin:0 0 5px}
.pay-return h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:400;margin:0}
.pay-return__body>p:not(.pay-return__eyebrow){font-size:14px;line-height:1.6;color:var(--ink-2);margin:8px 0 0;max-width:62ch}
.pay-return__summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(95,107,79,.18);border:1px solid rgba(95,107,79,.18);border-radius:var(--radius);overflow:hidden;margin-top:18px;max-width:520px}
.pay-return__summary div{background:rgba(255,255,255,.38);padding:13px 15px}
.pay-return__summary span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.pay-return__summary b{font-family:var(--font-display);font-size:18px}
.pay-return__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.pay-return__actions .btn{padding:11px 18px;font-size:13px}
@media(max-width:620px){.pay-return{flex-direction:column}.pay-return__summary{grid-template-columns:1fr}}
.acct-form{max-width:470px}
.acct-form input:disabled{background:var(--paper-2);color:var(--muted);cursor:not-allowed}
.acct-form .btn{margin-top:10px}

/* ---------- account settings (Settings tab) ---------- */
.set-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:#FFFDF6;box-shadow:var(--shadow-sm);padding:22px 24px;margin-bottom:14px}
.set-card__head{display:flex;align-items:center;gap:16px}
.set-card__ic{flex:none;width:38px;height:38px;border-radius:50%;background:var(--paper-2);display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.set-card__ic svg{width:18px;height:18px}
.set-card__tx{flex:1;min-width:0}
.set-card__tx h3{font-family:var(--font-display);font-weight:500;font-size:1.12rem;margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.set-card__tx p{margin:3px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.set-card__act{padding:9px 16px;font-size:13px;white-space:nowrap;flex:none}
.set-card__form,.set-card__body{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.set-card__form .btn,.set-card__body .btn{margin-top:0}
.set-card__body form{max-width:470px}
.set-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.set-actions .btn{padding:11px 18px;font-size:13px}
.set-note{font-size:13px;color:var(--ink-2);line-height:1.6;margin:0 0 14px;max-width:60ch}
.set-pill{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:100px;white-space:nowrap}
.set-pill--on{color:var(--sage);background:var(--sage-soft)}
.set-pill--off{color:#6B6455;background:#EAE6DB}
.set-secret{display:flex;align-items:center;gap:14px;justify-content:space-between;border:1px dashed var(--line-2);border-radius:var(--radius);background:var(--paper-2);padding:14px 16px;margin:0 0 16px;max-width:470px}
.set-secret__tx{min-width:0}
.set-secret__label{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.set-secret code{font-family:var(--font-mono);font-size:14px;letter-spacing:.06em;word-break:break-all}
.set-codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;max-width:470px;margin:0 0 4px}
.set-codes code{font-family:var(--font-mono);font-size:13px;letter-spacing:.05em;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:9px 12px;text-align:center}
.set-backup__h{font-family:var(--font-display);font-weight:500;font-size:1.05rem;margin:0 0 6px}
@media(max-width:640px){
  .set-card{padding:18px 16px}
  .set-card__head{flex-wrap:wrap}
  /* the text keeps a readable column (the 200px basis stops the button from
     squeezing it word-by-word); the action wraps below, aligned past the icon */
  .set-card__tx{flex:1 1 200px}
  .set-card__act{margin-left:54px}
  .set-secret{flex-wrap:wrap}
}
.acct-gate{display:flex;justify-content:center;padding:36px 0}
.acct-gate__card{max-width:404px;text-align:center;border:1px solid var(--line);border-radius:var(--radius-lg);padding:46px 34px;background:var(--paper)}
.acct-gate__icon{display:inline-flex;width:58px;height:58px;border-radius:50%;background:var(--paper-2);align-items:center;justify-content:center;color:var(--ink-2);margin-bottom:18px}
.acct-gate__icon svg{width:26px;height:26px}
.acct-gate h1{font-size:1.9rem;font-weight:400;margin-bottom:8px}
.acct-gate p.muted{margin-bottom:10px}
.acct-gate .auth-switch{margin-top:16px}

/* ---------- order confirmation (cart) ---------- */
.order-done{max-width:520px;margin:20px auto;text-align:center;border:1px solid var(--line);border-radius:var(--radius-lg);padding:48px 34px;background:var(--paper)}
.order-done__badge{display:inline-flex;width:58px;height:58px;border-radius:50%;background:var(--sage-soft);color:var(--sage);align-items:center;justify-content:center;margin-bottom:18px}
.order-done__badge svg{width:28px;height:28px}
.order-done h1{margin-bottom:4px}
.order-done__row{display:flex;justify-content:space-between;max-width:280px;margin:22px auto 0;padding-top:14px;border-top:1px solid var(--line);font-family:var(--font-display);font-weight:600;font-size:18px}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.05ms!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ================= ABOUT PAGE =================
   Sections are rows in the store — the admin adds, removes and reorders them —
   so the CSS cannot assume how many there are or what order they come in. Every
   rule here is per-section: alternating bands are set from the index in JS, not
   from :nth-child, because an unpublished section would otherwise flip the
   stripe of every section after it. */
/* Vertical rhythm is asymmetric on purpose: less air ABOVE a heading than below
   the body it introduces, so a heading reads as belonging to the text under it
   rather than floating between two sections. */
.about__sec{padding-block:clamp(44px,5.6vw,78px)}
.about__sec + .about__sec{border-top:1px solid var(--line)}
.about__sec.bg-soft + .about__sec.bg-soft{border-top:0}

/* a measure that is actually readable — prose on a 1200px container is not */
.about__lead{max-width:70ch}
.about__h{margin:6px 0 0;font-size:clamp(1.5rem,3.2vw,2.3rem);letter-spacing:-.015em}
.about__body{margin-top:16px}
.about__body p{font-size:clamp(15px,1.15vw,16.5px);line-height:1.75;color:var(--ink-2);margin:0 0 16px}
.about__body p:last-child{margin-bottom:0}

/* figures. auto-fit rather than a fixed count: the admin decides how many.
   No rules anywhere in this band: the change of background is what separates it
   from the sections either side, so a hairline on top of that is one divider too
   many — including the one .about__sec + .about__sec would otherwise draw. */
.about__sec--stats{padding-block:clamp(34px,4vw,52px);background:var(--paper-2);border-top:0}
.about__sec--stats + .about__sec{border-top:0}
.about__stats{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  padding-top:0;margin-top:0}
.about__sec--stats .about__lead + .about__stats{margin-top:22px}
.about__stat-n{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(2.1rem,4.4vw,3.1rem);line-height:1;color:var(--ink)}
.about__stat-k{margin-top:10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* cards */
.about__cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));margin-top:28px}
.about__card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px}
.about__card-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:var(--accent-soft);color:var(--accent);margin-bottom:16px}
.about__card-ic svg{width:16px;height:16px}
.about__card h3{font-family:var(--font-display);font-weight:500;font-size:17px;letter-spacing:-.01em;margin:0 0 8px}
.about__card p{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin:0}
.about__sec.bg-soft .about__card{border-color:var(--line-2)}

@media(max-width:640px){
  .about__stats{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:18px}
  .about__cards{grid-template-columns:1fr}
}