/* Briar Rose "Warm Air" tokens — mirrors brc-warmair/assets/warmair.css (pulled 2026-07-26) */
*,
*::before,
*::after { box-sizing: border-box; }

/* THE FORK (2026-08-03): baseline-v1 (aminoclub structure, white canvas, ink,
   black pills) stays the foundation. Grafted from the live site: the type voice
   (Fraunces/Cormorant/DM Mono), the terracotta/sage/bronze accent family,
   category tints, warm cream on select bands. NOT a restore. */
:root {
  --wa-bark: #131315;          /* ink — baseline */
  --wa-bark-deep: #131315;     /* CTA black pill — baseline */
  --wa-bark-soft: #374151;     /* secondary text — baseline */
  --wa-cream: #faf6f0;         /* live-site warm cream — hero + accent bands only */
  --wa-canvas: #ffffff;        /* page bg — baseline white */
  --wa-surface: #ffffff;
  --wa-hair: #e4e4e7;          /* zinc borders — baseline */
  --wa-hair-dk: #d4d4d8;
  --wa-terracotta: #9e603c;    /* live-site accent — italics, badges, stars */
  --wa-bronze: #9e8266;        /* live-site muted label accent - DECORATIVE ONLY (borders/rules) */
  --wa-sage: #7d8471;          /* live-site positive/verified accent - DECORATIVE ONLY (borders/bg/icons) */
  /* WCAG AA text variants, added 2026-08-14 (mark). --wa-bronze and --wa-sage
     measure 3.60:1 and 3.88:1 on white and FAIL AA body text (4.5:1) - they were
     being used as `color:` on 9-10px uppercase mono labels, the worst case on the
     site. These two preserve the hue and saturation exactly (30.0deg / 82.1deg)
     and only drop lightness until they clear 4.6:1 against the DARKEST live
     surface (--wa-mint #f2f3ee), so they pass on white, cream and mint alike.
     Use these for any `color:`; keep the originals for borders, backgrounds and
     icons, where 3:1 non-text contrast already applies and the hue is correct. */
  --wa-bronze-text: #816952;   /* 5.15 white / 4.79 cream / 4.62 mint */
  --wa-sage-text: #696f5f;     /* 5.20 white / 4.83 cream / 4.66 mint */
  --wa-mint: #f2f3ee;          /* warm wash for bands that were mint green */
  --wa-glow: #c9a86a;          /* warm gold */
  --wa-ink60: rgba(19, 19, 21, 0.65);
  --wa-ink40: rgba(19, 19, 21, 0.45);
  --wa-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.18);
  --wa-shadow-sm: 0 8px 20px -12px rgba(0, 0, 0, 0.12);

  /* Positive / status green — one family for every "good news" surface:
     the PDP ship-window banner and the cart's free-shipping progress bar.
     Deliberately an OLIVE-forest ramp grown out of --wa-sage rather than a
     stock emerald: the palette is warm (cream, terracotta, bronze) and a
     blue-leaning #22c55e reads as a SaaS alert dropped onto it. This is
     saturated enough to signal status, warm enough to belong. */
  --brc-pos: #4a7150;          /* dot, icon, emphasis */
  --brc-pos-ink: #2c4632;      /* body text on the tint */
  --brc-pos-bed: #e9efe4;      /* tint background / progress track */
  --brc-pos-line: #c3d5bb;     /* border */
  --brc-pos-fill: #5f8a63;     /* progress fill */
}

html, body { margin: 0; padding: 0; }
/* Sticky .site-head is content-height clamp(66–80) + 1px border + safe-area.
   84px cleared the bar but left FAQ / #catalog headings tight under it on
   hash scroll (mobile audit M4). 104px keeps a short gap below the bar. */
html { scroll-behavior: smooth; scroll-padding-top: calc(104px + env(safe-area-inset-top, 0px)); }
#faq,
#catalog {
  scroll-margin-top: calc(104px + env(safe-area-inset-top, 0px));
}
body {
  font-family: var(--wa-sans);
  color: var(--wa-bark);
  background: var(--wa-canvas);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; }

/* ---------- shell ---------- */
.shell { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.site-head {
  position: sticky; top: 0; z-index: 30;
  background: rgba(253, 251, 248, 0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--wa-hair);
  transition: box-shadow 0.3s;
  /* Notched iPhones: keep the sticky bar clear of the status island. */
  padding-top: env(safe-area-inset-top, 0px);
}
.site-head.scrolled { box-shadow: 0 12px 34px -22px rgba(42, 29, 24, 0.3); }
/* Header: brand + primary links + action icons. Below ~820px the links move into
   MobileNav's hamburger drawer (Scott, 2026-09-21) so the wordmark and icons
   stay readable on a ~375px phone. Desktop keeps the fluid clamp metrics. */
.site-head-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(5px, 1.6vw - 1px, 16px);
  height: clamp(66px, 2.1vw + 58px, 80px);
  /* Own gutter (not .shell's flat 24px); tightens on phone. Declared after
     .shell so source order wins the padding. */
  padding-left: clamp(12px, 1.807vw + 5.49px, 24px);
  padding-right: clamp(12px, 1.807vw + 5.49px, 24px);
}
.brand { display: flex; align-items: center; flex-shrink: 0; min-width: 0; }
/* Height drives it; width follows the 132x42 source ratio. */
.brand img { height: clamp(40px, 3.66vw + 24.3px, 62px); width: auto; }
.nav {
  display: flex; align-items: center; min-width: 0;
  gap: clamp(10px, 2.786vw - 6.53px, 22px);
}
/* Actions never shrink. Menu toggle + search/account/cart stay pinned right. */
.head-acts {
  display: flex; align-items: center; flex: none;
  gap: clamp(4px, 1.1vw + 0.9px, 14px);
}
.nav a { white-space: nowrap; }
.nav a {
  font-family: var(--wa-mono); font-size: clamp(9px, 0.54vw + 6.97px, 10px);
  letter-spacing: clamp(0.3px, 0.166vw - 0.32px, 1.4px);
  text-transform: uppercase; color: var(--wa-ink60);
  position: relative;
  padding-top: 15px; padding-bottom: 18px;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 15px; height: 1px;
  background: var(--wa-terracotta); transform: scaleX(0); transform-origin: left;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav a:hover { color: var(--wa-terracotta); }
.nav a:hover::after { transform: scaleX(1); }
/* Hamburger is phone-only; desktop keeps the inline .nav. */
.nav-toggle { display: none; }
@media (max-width: 820px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .brand img { height: clamp(42px, 11vw, 52px); }
  .hd-icon { width: 44px; height: 44px; }
}
.cart-btn {
  position: relative; background: none; border: 1px solid var(--wa-hair-dk);
  border-radius: 100px;
  padding: clamp(7px, 0.15vw + 6.5px, 8px) clamp(11px, 0.75vw + 8.3px, 16px);
  flex-shrink: 0;
  font-family: var(--wa-mono); font-size: clamp(9px, 0.54vw + 6.97px, 10px);
  letter-spacing: clamp(0.5px, 0.105vw + 0.12px, 1.2px); text-transform: uppercase;
  color: var(--wa-bark); transition: border-color 0.18s;
}
.cart-btn:hover { border-color: var(--wa-bronze); }
.cart-count {
  display: inline-block; min-width: 17px; text-align: center; margin-left: 6px;
  background: var(--wa-terracotta); color: var(--wa-cream);
  border-radius: 100px; font-size: 9.5px; padding: 1px 4px;
}

.site-foot { border-top: 1px solid var(--wa-hair); margin-top: 80px; padding: 36px 0 48px; }
.ruo-line {
  font-family: var(--wa-mono); font-size: 9px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--wa-ink40); text-align: center; line-height: 1.8;
}

/* Site-wide RUO disclaimer. Deliberately NOT .ruo-line: that is 9px uppercase in
   --wa-ink40, which composites to #959596 = 2.99:1 on white and fails WCAG AA. This
   is a compliance notice, so it has to be readable - 11px, sentence case, --wa-ink60
   (#666667 = 5.74:1). Keep it legible; do not shrink it back to match the copyright. */
.ruo-legal {
  font-family: var(--wa-sans); font-size: 11px; line-height: 1.7;
  color: var(--wa-ink60); text-align: center;
  max-width: 62ch; margin: 0 auto 10px;
}
.ruo-legal a { color: var(--wa-ink60); text-decoration: underline; }
.ruo-legal a:hover { color: var(--wa-terracotta); }

/* ---------- hero ---------- */
.hero { padding: 72px 0 44px; }
.eyebrow {
  font-family: var(--wa-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--wa-bronze-text); font-weight: 500; margin: 0 0 10px;
}
.hero h1 {
  font-family: var(--wa-sans); font-weight: 600; font-size: clamp(32px, 4.6vw, 48px);
  line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 16px; color: var(--wa-bark);
}
.hero h1 em { font-style: normal; font-weight: 600; color: inherit; }
.hero p { font-size: 15px; color: var(--wa-ink60); max-width: 56ch; line-height: 1.7; margin: 0; }

.trust { display: flex; gap: 26px; flex-wrap: wrap; padding: 22px 0 0; }
.tick {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--wa-mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--wa-ink60);
}
.tick svg { color: var(--wa-sage); flex: none; }
/* Phone: stack the three ticks so "Veteran-owned" is not an orphan under a
   two-item first row (Scott mobile screenshot, 2026-09-21). */
@media (max-width: 720px) {
  .hero-amino .trust {
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    padding-top: 16px;
  }
}

/* ---------- grid ---------- */
.cat-head { margin: 54px 0 6px; }
.cat-head h2 {
  font-family: var(--wa-display); font-weight: 500; font-size: 34px;
  letter-spacing: -0.015em; margin: 0 0 4px; color: var(--wa-bark);
}
.cat-head p { font-size: 13px; color: var(--wa-ink60); margin: 0 0 18px; }
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px;
}
.wa-card {
  /* aminoclub card: white, 1px zinc border, 16px radius, shadow only on hover */
  background: #fff; border: 1px solid var(--wa-hair); border-radius: 16px; box-shadow: none;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.22s, box-shadow 0.22s;
}
.wa-card:hover { transform: translateY(-4px); box-shadow: var(--wa-shadow); }
.wa-img { position: relative; height: 200px; padding: 14px; background: var(--wa-surface); }
.wa-img img { object-fit: contain; padding: 20px; mix-blend-mode: multiply; }
.wa-chip {
  /* BRC chip: category tint (passed inline), mono uppercase — the Warm Air signature */
  position: relative; z-index: 2; display: inline-block;
  font-family: var(--wa-mono); font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase;
  background: #e8dcc6; padding: 5px 11px; border-radius: 9999px; color: var(--wa-bark-soft);
}
.wa-body { padding: 14px 18px 0; }
.wa-nm {
  font-family: var(--wa-display); font-size: 20px; font-weight: 500;
  line-height: 1.15; letter-spacing: -0.01em; margin: 0; color: var(--wa-bark);
}
.wa-ds { font-size: 12px; color: var(--wa-ink60); margin: 3px 0 12px; }
.wa-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 18px 18px; margin-top: auto;
}
.wa-pr { font-family: var(--wa-sans); font-size: 18px; font-weight: 600; color: var(--wa-bark); }
.wa-btn {
  /* aminoclub CTA geometry: 36px black pill, 12px/500, no tracking/uppercase */
  background: var(--wa-bark-deep); color: #fff; border: none; border-radius: 9999px;
  font-family: var(--wa-sans); font-weight: 500; font-size: 12px; letter-spacing: 0;
  text-transform: none; height: 36px; padding: 0 16px; display: inline-flex;
  align-items: center; justify-content: center; transition: opacity 0.18s;
}
.wa-btn:hover { opacity: 0.86; }
.wa-btn[disabled] { opacity: 0.5; cursor: default; }

/* ---------- PDP ---------- */
/* Longhand for the same reason as .foot-cols — this is `class="shell pdp"`, and
   the shorthand's `0` was wiping .shell's 24px gutter on all 21 product pages.
   Invisible on desktop, where the 1200px max-width leaves slack anyway; on a
   phone it ran the h1, subtitle and price flush to both screen edges. */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-top: 56px; }
@media (max-width: 820px) { .pdp { grid-template-columns: 1fr; } }
.pdp-img {
  position: relative; min-height: 420px; background: var(--wa-surface);
  border-radius: 24px; box-shadow: var(--wa-shadow-sm);
}
.pdp-img img { object-fit: contain; padding: 48px; mix-blend-mode: multiply; transition: opacity 0.28s ease; }
.pdp-title {
  font-family: var(--wa-display); font-weight: 500; font-size: 34px;
  line-height: 1.12; letter-spacing: -0.015em; margin: 10px 0 8px; color: var(--wa-bark);
}
/* the synonym line — Cormorant italic, the live site's signature */
.pdp-sub { font-family: var(--wa-serif); font-style: italic; font-size: 17px; color: var(--wa-ink60); margin: 0 0 14px; }
.pdp-price { font-family: var(--wa-mono); font-size: 22px; color: var(--wa-terracotta); margin: 0 0 22px; }
.pdp-desc { font-size: 14px; line-height: 1.75; color: var(--wa-bark-soft); max-width: 54ch; }
.pdp-add { display: flex; gap: 12px; align-items: center; margin: 26px 0 18px; }
.pdp-add .wa-btn { font-size: 10.5px; padding: 15px 28px; }
.back {
  font-family: var(--wa-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wa-ink40); border-bottom: 1px solid var(--wa-hair-dk); padding-bottom: 2px;
}
.back:hover { color: var(--wa-terracotta); }

/* ── RESEARCHER GATE ──────────────────────────────────────────────────────────
   The site's own palette, not a gate-only one. Cream ground, white card with the
   hairline and shadow every other surface uses, the display face for the heading
   and the mono label voice for the eyebrow — so the first screen a visitor sees
   is recognisably the same brand as the catalogue behind it.

   The gate carries no product HTML at all: names, prices and COA data load only
   after the affirmation, so a crawler that stops here has nothing to take. */
.gate-wrap {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  background: var(--wa-cream); padding: 24px;
}
.gate {
  width: 460px; max-width: 100%; background: var(--wa-surface);
  border: 1px solid var(--wa-hair); border-radius: 24px;
  box-shadow: var(--wa-shadow); padding: 40px 38px 34px; text-align: center;
}
.gate-lockup { display: block; margin: 0 auto 26px; height: auto; }
.gate-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--wa-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--wa-bronze-text); margin: 0 0 8px;
}
.gate-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--wa-terracotta); flex: none; }
.gate h1 {
  font-family: var(--wa-display); font-weight: 500; font-size: 30px; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--wa-bark); margin: 0 0 10px;
}
.gate-lede {
  font-size: 13.5px; color: var(--wa-ink60); line-height: 1.7; margin: 0 auto 22px;
  max-width: 36ch;
}

/* The session line. Presentational, not an input — it states a fact about the
   visit rather than asking for anything, so it is the one row with no control in
   it and is tinted with the site's verified accent. */
.gate-status {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--wa-mint); border: 1px solid var(--wa-hair); border-radius: 12px;
  padding: 13px 16px; margin: 0 0 10px;
  font-family: var(--wa-mono); font-size: 10px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--wa-sage-text);
}
.gate-tick { color: var(--wa-sage-text); font-size: 13px; line-height: 1; }

/* Each affirmation is its own tappable row. text-align:left because the card is
   centred but a two-line sentence must not be. */
.gate-check {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  background: var(--wa-canvas); border: 1px solid var(--wa-hair); border-radius: 12px;
  padding: 15px 16px; margin: 0 0 10px; cursor: pointer;
  font-size: 13.5px; line-height: 1.55; color: var(--wa-bark);
  transition: border-color 0.18s;
}
.gate-check:hover { border-color: var(--wa-hair-dk); }
.gate-check input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: none; margin: 1px 0 0; cursor: pointer;
  border: 1.5px solid var(--wa-hair-dk); border-radius: 5px; background: var(--wa-canvas);
  display: grid; place-content: center; transition: background 0.15s, border-color 0.15s;
}
.gate-check input::after {
  content: ""; width: 10px; height: 10px; transform: scale(0);
  transition: transform 0.12s ease-in-out; background: var(--wa-surface);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.gate-check input:checked { background: var(--wa-terracotta); border-color: var(--wa-terracotta); }
.gate-check input:checked::after { transform: scale(1); }
.gate-check input:focus-visible { outline: 2px solid var(--wa-terracotta); outline-offset: 2px; }

.gate-role {
  width: 100%; appearance: none; -webkit-appearance: none;
  background: var(--wa-canvas); border: 1px solid var(--wa-hair); border-radius: 12px;
  padding: 15px 16px; margin: 0 0 22px; cursor: pointer;
  font-family: var(--wa-sans); font-size: 14px; color: var(--wa-bark); text-align: left;
  /* The chevron, inlined so the CSP has no external asset to block. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23131315' stroke-opacity='0.45' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.gate-role:focus-visible { outline: 2px solid var(--wa-terracotta); outline-offset: 2px; }
/* Boxes checked, role empty — mark the select so Enter's disabled state is explained. */
.gate-role.gate-role-need {
  margin-bottom: 8px;
  border-color: var(--wa-terracotta);
  box-shadow: 0 0 0 1px var(--wa-terracotta);
}
.gate-role-hint {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--wa-terracotta);
  text-align: left;
}
/* The native dropdown list is drawn by the OS and does not inherit the card. */
.gate-role option { background: var(--wa-surface); color: var(--wa-bark); }

.gate-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gate-enter {
  background: var(--wa-bark-deep); color: var(--wa-cream); border: 1px solid var(--wa-bark-deep);
  border-radius: 100px; padding: 15px 20px; cursor: pointer;
  font-family: var(--wa-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; transition: opacity 0.18s;
}
.gate-enter[disabled] { opacity: 0.35; cursor: default; }
.gate-exit {
  background: none; color: var(--wa-ink60); border: 1px solid var(--wa-hair-dk);
  border-radius: 100px; padding: 15px 20px; cursor: pointer;
  font-family: var(--wa-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; transition: color 0.18s, border-color 0.18s;
}
.gate-exit:hover { color: var(--wa-bark); border-color: var(--wa-bronze); }

/* At 375px the card's side padding leaves too little for two uppercase mono
   pills side by side — they wrapped and the row read as broken. */
@media (max-width: 420px) {
  .gate { padding: 32px 22px 28px; }
  .gate-actions { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- motion system ---------- */
/* route transition */
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.page-enter { animation: pageIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* hero with imagery + parallax */
.hero-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; }
@media (max-width: 880px) { .hero-split { grid-template-columns: 1fr; } }

/* photo hero */
.hero-visual {
  position: relative; border-radius: 28px; overflow: hidden;
  box-shadow: var(--wa-shadow); aspect-ratio: 4 / 3;
  animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards;
}
.hero-visual img {
  width: 100%; height: 112%; object-fit: cover;
  /* kenburns removed 2026-09-19: scale cropped vial labels. */
  animation: none;
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }

/* ---------- ambient motion (aminoclub-style, Warm Air register) ---------- */
/* shimmer — a soft light band sweeping across the surface */
@keyframes shimmer { 0% { transform: translateX(-160%) skewX(-14deg); } 55%, 100% { transform: translateX(220%) skewX(-14deg); } }
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
  content: ""; position: absolute; inset: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(250, 246, 240, 0.34), transparent);
  animation: none; /* extra motion off 2026-09-19 */
}
.hero-visual::after {
  content: ""; position: absolute; inset: 0; width: 38%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 253, 249, 0.22), transparent);
  animation: none;
}

/* breathing glow behind the hero photo */
@keyframes glow-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.06); } }
.hero-right { position: relative; }
.hero-glow {
  position: absolute; inset: -8% -6%; z-index: -1; border-radius: 40px; filter: blur(46px);
  background: radial-gradient(60% 60% at 60% 40%, #ecd8c2 0%, #d9e0cf 55%, transparent 100%);
  animation: none;
}

/* slow-spinning medallion seal on the photo corner */
@keyframes spin-slow { to { transform: rotate(360deg); } }
.hero-seal {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 64px; height: 64px; border-radius: 100px;
  background: rgba(255, 253, 249, 0.86); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--wa-shadow-sm);
}
.hero-seal img { width: 44px; height: 44px; animation: spin-slow 36s linear infinite; }

/* gentle pulse on trust ticks */
@keyframes tick-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.tick svg { animation: tick-pulse 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.tick:nth-child(2) svg { animation-delay: 0.6s; }
.tick:nth-child(3) svg { animation-delay: 1.2s; }
.tick:nth-child(4) svg { animation-delay: 1.8s; }

/* stat strip — editorial, hairline-divided */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 52px 0 10px; text-align: center;
  border-top: 1px solid var(--wa-hair); border-bottom: 1px solid var(--wa-hair);
}
.stat { padding: 30px 22px; }
.stat + .stat { border-left: 1px solid var(--wa-hair); }
@media (max-width: 680px) {
  .stat + .stat { border-left: none; border-top: 1px solid var(--wa-hair); }
}
.stat-v {
  display: block; font-family: var(--wa-display); font-weight: 500;
  font-size: clamp(32px, 4vw, 44px); letter-spacing: -0.02em; color: var(--wa-bark);
}
.stat-v::after { content: ""; display: block; width: 26px; height: 1px; background: var(--wa-terracotta); margin: 10px auto 0; }
.stat-l {
  display: block; margin-top: 10px; font-family: var(--wa-mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--wa-ink60); line-height: 1.7;
}

/* PDP image is static per Scott (2026-08-03) — the bounce lives on the home hero only */
@keyframes floaty { from { transform: translateY(0); } to { transform: translateY(-8px); } }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
/* hero entrance — CSS-only stagger on load */
.hero > * { animation: fadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero > *:nth-child(1) { animation-delay: 0.05s; }
.hero > *:nth-child(2) { animation-delay: 0.14s; }
.hero > *:nth-child(3) { animation-delay: 0.24s; }
.hero > *:nth-child(4) { animation-delay: 0.34s; }
.hero > *:nth-child(5) { animation-delay: 0.46s; }

/* scroll reveal */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); }
.rv.in { opacity: 1; transform: none; }
.rv-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.rv-stagger.in > * { opacity: 1; transform: none; }
.rv-stagger.in > *:nth-child(1) { transition-delay: 0.06s; }
.rv-stagger.in > *:nth-child(2) { transition-delay: 0.12s; }
.rv-stagger.in > *:nth-child(3) { transition-delay: 0.18s; }
.rv-stagger.in > *:nth-child(4) { transition-delay: 0.24s; }
.rv-stagger.in > *:nth-child(5) { transition-delay: 0.3s; }
.rv-stagger.in > *:nth-child(6) { transition-delay: 0.36s; }
.rv-stagger.in > *:nth-child(7) { transition-delay: 0.42s; }
.rv-stagger.in > *:nth-child(n + 8) { transition-delay: 0.48s; }

/* compound marquee */
.marquee { overflow: hidden; border-top: 1px solid var(--wa-hair); border-bottom: 1px solid var(--wa-hair); padding: 15px 0; margin-top: 48px; }
.marquee-track { display: flex; gap: 44px; width: max-content; animation: marq 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.mq-item { display: flex; align-items: center; gap: 44px; font-family: var(--wa-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wa-ink60); white-space: nowrap; }
.mq-item .star { color: var(--wa-terracotta); font-size: 11px; }

/* hover depth */
.wa-img img { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.wa-card:hover .wa-img img { transform: scale(1.05); }
.wa-btn, .dw-co, .gate-enter, .dark-cta { transition: opacity 0.18s, transform 0.15s; }
.wa-btn:active, .dw-co:active, .gate-enter:active, .dark-cta:active { transform: scale(0.96); }
.usp { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s; }
.usp:hover { transform: translateY(-4px); box-shadow: var(--wa-shadow-sm); }

/* cart badge pop */
@keyframes pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.cart-count { animation: pop 0.32s cubic-bezier(0.22, 1, 0.36, 1); }

/* drawer item entrance */
@keyframes dwIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
.drawer.open .dw-item { animation: dwIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.drawer.open .dw-item:nth-child(1) { animation-delay: 0.05s; }
.drawer.open .dw-item:nth-child(2) { animation-delay: 0.11s; }
.drawer.open .dw-item:nth-child(3) { animation-delay: 0.17s; }
.drawer.open .dw-item:nth-child(n + 4) { animation-delay: 0.23s; }

@media (prefers-reduced-motion: reduce) {
  .hero > *, .cart-count, .drawer.open .dw-item, .marquee-track, .page-enter,
  .hero-visual, .hero-visual img, .pdp-img img,
  .shimmer::after, .hero-visual::after, .hero-glow, .hero-seal img, .tick svg,
  /* .promo-dot and .promo-cta::after used to be listed here. Both were deleted
     in the 2026-08-07 banner rewrite — the pulsing dot and the shimmer sweep —
     so there is no longer anything to switch off. */
  .ha-img, .ha-img img { animation: none !important; }
  .pdp-img img { transition: none; }
  .rv, .rv-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wa-img img, .usp, .wa-btn { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- category chip nav (hero) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip-lg {
  font-family: var(--wa-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wa-bark-soft); padding: 9px 16px; border-radius: 100px;
  transition: transform 0.16s, box-shadow 0.16s;
}
.chip-lg:hover { transform: translateY(-2px); box-shadow: var(--wa-shadow-sm); }

/* ---------- USP cards ---------- */
.usp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.usp { border-radius: 22px; padding: 26px 26px 22px; }
.usp h3 { font-family: var(--wa-display); font-weight: 500; font-size: 20px; margin: 0 0 8px; letter-spacing: -0.01em; }
.usp p { font-size: 13px; color: var(--wa-bark-soft); line-height: 1.7; margin: 0 0 14px; }
.usp-cta {
  font-family: var(--wa-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wa-terracotta); border-bottom: 1px solid var(--wa-bronze); padding-bottom: 2px;
}

/* ---------- tinted category bands ---------- */
.band-wrap { margin-top: 34px; }
.band { border-radius: 28px; padding: 30px 28px 34px; }
.band .cat-head { margin-top: 0; }
.band .wa-card { box-shadow: 0 10px 30px -18px rgba(42, 29, 24, 0.28); }

/* ---------- dark research band ---------- */
.dark-band {
  margin-top: 60px; background: var(--wa-bark-deep); border-radius: 28px;
  padding: 44px 46px; display: flex; align-items: center; gap: 36px; justify-content: space-between;
  flex-wrap: wrap; color: var(--wa-cream);
}
.dark-band h2 {
  font-family: var(--wa-display); font-weight: 500; font-size: clamp(24px, 3.4vw, 34px);
  letter-spacing: -0.01em; margin: 6px 0 10px; color: var(--wa-cream);
}
.dark-band p { font-size: 13.5px; line-height: 1.7; color: rgba(250, 246, 240, 0.72); max-width: 58ch; margin: 0; }
.dark-cta {
  flex: none; background: var(--wa-terracotta); color: var(--wa-cream); border-radius: 100px;
  font-family: var(--wa-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 16px 30px; transition: opacity 0.18s;
}
.dark-cta:hover { opacity: 0.88; }

/* ---------- research library ---------- */
.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding-bottom: 20px; }
.ref-card {
  background: var(--wa-surface); border: 1px solid var(--wa-hair); border-radius: 18px;
  padding: 22px 24px; display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.18s, box-shadow 0.18s;
}
.ref-card:hover { transform: translateY(-3px); box-shadow: var(--wa-shadow-sm); }
.ref-nm { font-family: var(--wa-display); font-weight: 500; font-size: 19px; letter-spacing: -0.01em; }
.ref-go { font-family: var(--wa-mono); font-size: 9px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--wa-bronze-text); }
.ref-article { max-width: 780px; }
.ref-foot { display: flex; align-items: center; gap: 22px; margin: 30px 0 10px; }

/* ---------- prose (WP-rendered content) ---------- */
.prose { max-width: 780px; margin: 0 auto; font-size: 14px; line-height: 1.75; color: var(--wa-bark-soft); }
.prose h1 {
  font-family: var(--wa-display); font-weight: 500; color: var(--wa-bark);
  letter-spacing: -0.015em; font-size: clamp(30px, 4vw, 40px); line-height: 1.1; margin: 6px 0 14px;
}
.prose h2, .prose h3 {
  font-family: var(--wa-display); font-weight: 500; color: var(--wa-bark);
  letter-spacing: -0.01em; margin: 30px 0 10px;
}
.prose h2 { font-size: 24px; }
.prose h3 { font-size: 19px; }
.prose a { color: var(--wa-terracotta); border-bottom: 1px solid var(--wa-bronze); }
.prose table { width: 100%; border-collapse: collapse; margin: 14px 0 22px; font-size: 13px; }
.prose th, .prose td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--wa-hair); }
.prose th {
  font-family: var(--wa-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wa-bronze-text); font-weight: 400;
}
.prose details { border-top: 1px solid var(--wa-hair); padding: 14px 0; }
.prose summary { font-family: var(--wa-display); font-size: 17px; font-weight: 500; color: var(--wa-bark); cursor: pointer; }
.prose img { border-radius: 14px; }
.faq { margin-bottom: 30px; }

/* ---------- aminoclub float library (extracted verbatim from their stylesheet) ---------- */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes float-delayed { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes float-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes float-rotate { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-6px) rotate(2deg); } 50% { transform: translateY(-12px) rotate(0); } 75% { transform: translateY(-6px) rotate(-2deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(1deg); } }
@keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- announcement rail (see components/PromoBanner.tsx) ---------- */
/* Warm bark ground kept — a dark rail above a cream hero is a legitimate device
   and it frames the page. What was wrong was the TYPE on it, all of which came
   from a borrowed pattern rather than from this site. */
.promo { position: relative; overflow: hidden; background: linear-gradient(180deg, #2a1d18, #3d2b24); }
.promo-in {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding-top: 13px; padding-bottom: 13px; flex-wrap: wrap;
}
/* The label voice used everywhere else on the site — .tick and .wa-chip are the
   same mono / uppercase / 0.1em. Bronze, which IS in the palette; the previous
   #d9bb72 gold was not, and at 20px Cormorant italic it was heading scale for
   what is an eyebrow. */
.promo-head {
  font-family: var(--wa-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #c2a179;
}
/* The site's accent voice — same Cormorant italic as .store-head p and the
   hero's own em. Replaces plain DM Sans, which carried no brand. */
.promo-sub {
  font-family: var(--wa-serif); font-style: italic; font-size: 17px;
  color: rgba(250, 246, 240, 0.94); letter-spacing: 0.005em;
}
/* .wa-btn geometry, inverted for the dark ground: 36px pill, DM Sans 12px/500,
   no tracking, no uppercase. The shimmer sweep and the circled arrow are gone —
   shimmer is discount-ecommerce urgency and this brand does not shout. */
.promo-cta {
  margin-left: auto; background: var(--wa-cream); color: #2a1d18; border: none;
  border-radius: 9999px; font-family: var(--wa-sans); font-weight: 500;
  font-size: 12px; letter-spacing: 0; height: 36px; padding: 0 18px;
  display: inline-flex; align-items: center; transition: opacity 0.18s;
}
.promo-cta:hover { opacity: 0.86; }
@media (max-width: 720px) {
  /* Stacked, the auto margin would shove the button to its own full-width row.
     Let it sit with the text. */
  .promo-cta { margin-left: 0; }
  .promo-sub { font-size: 15.5px; }
}
/* Seasonal rail themes — attach via HERO_QUARTER.promo.themeClass when
   promo.enabled is true. Keep energy here; do not restyle .hero-amino. */
/* .promo--fall { … } */

/* ---------- cream hero with floating vials (restored from 61ccbbf) ---------- */
.hero-amino {
  position: relative; overflow: hidden; background: var(--wa-cream);
  padding: 60px 24px 90px; text-align: center; min-height: 640px;
}
/*
  Woo / Jetpack shots are opaque RGB JPEGs (even when the URL ends in .webp)
  on a ~254 white bed. Store cards clear that bed with mix-blend-mode:multiply
  on the IMG against a light ground. Same pattern here.

  The blend target has to be this wrapper's own background. Rotate and float
  are transforms, and a transformed element is a blending group: an img that
  multiplies inside it cannot see the hero cream behind the group. Painting
  the wrapper the same cream the hero uses gives multiply a backdrop that
  matches the page, so the bed disappears and the wrapper itself does not
  read as a card.

  Do not put a CSS filter on these imgs. The old #ha-cream-bed feColorMatrix
  turned the filter region's transparent margin into opaque black (alpha out
  ignored source alpha), which is the hard postcard frame on mobile. Filter
  and mix-blend-mode also must not share an element.

  The multiply only runs if the image is CORS-clean. Hero imgs set
  crossorigin="anonymous" (see page.tsx). Without it Safari paints the JPEG
  bed opaque and the cream wrapper never shows through — the white postcard
  Scott photographed, including on assets that are not the BAC shot.
*/
.ha-img {
  position: absolute; pointer-events: none;
  background: var(--wa-cream);
}
.ha-img img {
  width: 100%; height: auto; display: block; background: transparent;
  mix-blend-mode: multiply;
}
.ha-big { left: 2%; top: 6%; width: min(40vw, 470px); rotate: -14deg; animation: float 4s ease-in-out infinite; }
.ha-tb { left: 51%; top: 3%; width: clamp(110px, 15vw, 200px); rotate: 9deg; animation: float-delayed 4.5s ease-in-out infinite; }
.ha-bpc { left: 45%; top: 21%; width: clamp(100px, 14vw, 185px); rotate: -5deg; animation: float-delayed 4.5s ease-in-out infinite; animation-delay: 0.7s; }
.ha-nad { right: 4%; top: 7%; width: clamp(120px, 16vw, 215px); rotate: 12deg; animation: float-slow 5s ease-in-out infinite; }
.hero-amino h1 {
  /* aminoclub's scale, Fraunces' voice */
  position: relative; z-index: 2; font-family: var(--wa-display); font-weight: 500;
  font-size: clamp(40px, 6.5vw, 60px); line-height: 1.04; letter-spacing: -0.02em;
  color: var(--wa-bark); margin: 260px auto 22px; max-width: 14ch;
}
.hero-amino h1 em {
  font-family: var(--wa-serif); font-style: italic; font-weight: 500; color: var(--wa-terracotta);
}
.hero-amino .ha-sub {
  position: relative; z-index: 2; font-size: 18px; line-height: 1.6;
  color: var(--wa-ink60); max-width: 46ch; margin: 0 auto;
}
.hero-amino .trust { justify-content: center; position: relative; z-index: 2; padding-top: 26px; }
.hero-amino .hero-cta {
  position: relative; z-index: 3; padding-top: 28px;
}
@media (max-width: 720px) {
  .hero-amino {
    /* Collage band height. Vial widths and the headline's top margin both
       hang off this so the type stays below the vials on narrow phones. */
    --ha-band: clamp(156px, 42vw, 208px);
    padding: 8px 16px 48px;
    min-height: 0;
  }
  /* Same Shop CTA as desktop, sized for a thumb and filled — phones have
     no hover, so the bark fill is the primary state (mint-cta hover). */
  .hero-amino .hero-cta {
    display: flex;
    justify-content: center;
    padding-top: 18px;
  }
  .hero-amino .hero-cta .mint-cta {
    min-height: 44px;
    padding: 11px 22px;
    font-size: 14px;
    background: var(--wa-bark);
    color: #fff;
  }
  .hero-amino h1 {
    margin-top: calc(var(--ha-band) + 10px);
    margin-bottom: 14px;
    font-size: clamp(32px, 9.2vw, 40px);
    max-width: 12ch;
  }
  .hero-amino .ha-sub {
    font-size: 15.5px;
    line-height: 1.55;
    max-width: 34ch;
    padding: 0 4px;
  }
  /* Top collage band. Insets stay positive so a rotated vial cannot leave
     the viewport (the old left:-8% / right:-2% cropped the anchor vial).
     The big slot still anchors, but under 48vw. Slots are spread so the
     four scales read evenly instead of stacking on the headline. */
  .ha-img { z-index: 0; }
  /* max() insets: a small percent still lets a rotated cap cross x=0.
     32px clears that swing on a ~430px phone; the ≤390 query tightens scale. */
  /* Gentler angles than desktop so a rotated cap stays inside the
     viewport. Motion stays on the wrapper; the img only multiplies. */
  .ha-big {
    width: calc(var(--ha-band) * 0.58);
    left: max(32px, 6%);
    top: 2px;
    rotate: -8deg;
  }
  .ha-tb {
    width: calc(var(--ha-band) * 0.46);
    left: 34%;
    top: 0;
    rotate: 7deg;
  }
  .ha-bpc {
    width: calc(var(--ha-band) * 0.44);
    left: 52%;
    top: calc(var(--ha-band) * 0.34);
    rotate: -5deg;
  }
  .ha-nad {
    width: calc(var(--ha-band) * 0.48);
    right: max(32px, 6%);
    top: 4px;
    rotate: 8deg;
  }
}
@media (max-width: 390px) {
  .hero-amino { --ha-band: 150px; }
  .ha-big { left: max(28px, 7%); width: calc(var(--ha-band) * 0.56); }
  .ha-tb { left: 36%; width: calc(var(--ha-band) * 0.44); }
  .ha-bpc { left: 54%; top: calc(var(--ha-band) * 0.32); width: calc(var(--ha-band) * 0.42); }
  .ha-nad { right: max(28px, 7%); width: calc(var(--ha-band) * 0.46); }
}
@media (max-width: 720px) and (max-height: 700px) {
  .hero-amino { --ha-band: 136px; padding-bottom: 36px; }
}

/* ---------- store page (aminoclub listing geometry) ---------- */
.store-head { padding: 44px 0 8px; }
.store-head h1 { font-family: var(--wa-display); font-weight: 500; font-size: 34px; letter-spacing: -0.015em; color: var(--wa-bark); margin: 0 0 4px; }
.store-head p { font-family: var(--wa-serif); font-style: italic; font-size: 17px; color: var(--wa-ink60); margin: 0; }
.store-bar { display: flex; flex-direction: column; gap: 14px; padding: 18px 0 22px; }
.store-sort { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--wa-ink60); }
.store-sort select {
  font: inherit; color: var(--wa-bark); border: 1px solid var(--wa-hair); border-radius: 9999px;
  padding: 7px 14px; background: #fff;
}
.store-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.store-chip {
  font-family: var(--wa-mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--wa-bark-soft); background: #f3f4f6;
  border: none; border-radius: 9999px; padding: 9px 16px; transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}
.store-chip:hover { transform: translateY(-1px); box-shadow: var(--wa-shadow-sm); }
.store-chip.on { background: var(--wa-bark); color: #fff; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; padding-bottom: 40px; }
.st-card { display: flex; flex-direction: column; }
.st-imgwrap {
  position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden;
  background: #f9fafb; border: 1px solid var(--wa-hair); margin-bottom: 10px;
}
/* their card hover timings exactly: transform 0.3s, opacity 0.15s */
.st-imgwrap img { object-fit: contain; padding: 14%; mix-blend-mode: multiply; transition: transform 0.3s; }
.st-card:hover .st-imgwrap img { transform: scale(1.045); }
.st-view { transition: opacity 0.15s, transform 0.3s; }
.st-view:hover { opacity: 0.85; }
.st-new { position: absolute; top: 10px; left: 12px; z-index: 2; font-size: 10px; font-weight: 600; color: var(--wa-sage-text); }
.st-nm { font-family: var(--wa-display); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; margin: 0; color: var(--wa-bark); line-height: 1.2; }
.st-from { font-size: 12px; color: var(--wa-ink60); margin: 2px 0 0; }
.st-pr { font-size: 18px; font-weight: 600; color: var(--wa-bark); }
.st-type { font-family: var(--wa-serif); font-style: italic; font-size: 14px; color: var(--wa-ink60); margin: 2px 0 10px; }
.st-view { width: 100%; margin-top: auto; }

/* ---------- PDP (aminoclub anatomy) ---------- */
.buy-card { border: 1px solid var(--wa-hair); border-radius: 16px; padding: 20px; margin-top: 6px; background: #fff; }
.buy-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
/* Point-of-purchase RUO notice, directly under Add to cart. Must stay legible:
   --wa-ink60 is 5.74:1 on white. Do NOT restyle this to match .buy-lbl, which is
   9-10px in --wa-bronze - the whole reason this line exists is that a disclaimer
   at the buy control has to be readable at the buy control. */
.buy-ruo {
  font-family: var(--wa-sans); font-size: 12px; line-height: 1.55;
  color: var(--wa-ink60); margin: 10px 0 0; text-align: center;
}
.buy-ruo a { color: var(--wa-ink60); text-decoration: underline; }
.buy-ruo a:hover { color: var(--wa-terracotta); }

.buy-lbl { font-family: var(--wa-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--wa-bronze-text); }
.buy-size { display: inline-block; width: fit-content; background: #f3f4f6; border-radius: 9999px; padding: 6px 14px; font-size: 13px; font-weight: 600; }
/* their tier controls: 66px rectangular cards, radius 8, teal-tinted when active */
.buy-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.buy-tier {
  border: 1px solid var(--wa-hair); background: #fff; border-radius: 8px;
  font-size: 16px; font-weight: 400; height: 66px; transition: all 0.15s; color: var(--wa-bark);
  display: flex; align-items: center; justify-content: center;
}
.buy-tier:hover { border-color: var(--wa-sage); }
.buy-tier.on { background: var(--wa-mint); border-color: var(--wa-sage); color: var(--wa-bark); }
/* aminoclub buy-card internals */
.buy-size2 { display: inline-block; background: #131315; color: #fff; border-radius: 9999px; padding: 8px 16px; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
/* Strength switcher — shown only when the compound has more than one mass. */
.buy-mass { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
/* Matches .buy-qtylbl so the two row labels read as a pair. */
.buy-mass-lbl { font-size: 14px; font-weight: 600; color: var(--wa-bark); }
.buy-mass-pills { display: flex; gap: 8px; }
.buy-mass-pill {
  display: inline-block; border-radius: 9999px; padding: 8px 16px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--wa-hair-dk); background: #fff; color: var(--wa-bark);
  text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.buy-mass-pill:hover { border-color: var(--wa-bark); }
.buy-mass-pill.is-on { background: #131315; border-color: #131315; color: #fff; }
.buy-qtyrow { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.buy-qtylbl { font-size: 14px; font-weight: 600; }
.buy-stepper { display: inline-flex; align-items: center; border: 1px solid var(--wa-hair); border-radius: 9999px; overflow: hidden; }
.buy-stepper button { background: none; border: none; width: 34px; height: 34px; font-size: 17px; color: var(--wa-bark); }
.buy-stepper button:hover { background: #f3f4f6; }
.buy-stepper > span { min-width: 26px; text-align: center; font-size: 14px; font-weight: 600; }
.buy-price2 { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.buy-price2 b { font-size: 24px; font-weight: 700; line-height: 1.15; }
.buy-sub { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--wa-ink60); letter-spacing: 0.01em; }
.buy-sub s { color: var(--wa-ink40); }
.buy-sub i { font-style: normal; color: var(--wa-ink40); }
/* Variation selector dropdown */
.buy-var { margin-bottom: 16px; }
.buy-var-lbl {
  display: block;
  font-family: var(--wa-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--wa-bronze-text);
  margin-bottom: 6px;
}
.buy-var-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.buy-var-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  border: 1px solid var(--wa-hair-dk);
  border-radius: 10px;
  padding: 10px 38px 10px 14px;
  font-family: var(--wa-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--wa-bark);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  line-height: 1.4;
}
.buy-var-select:hover {
  border-color: var(--wa-bark);
}
.buy-var-select:focus {
  border-color: var(--wa-bark);
  box-shadow: 0 0 0 3px rgba(19, 19, 21, 0.08);
}
.buy-var-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--wa-bark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.buy-tier { position: relative; flex-direction: column; gap: 4px; height: 84px; }
.bt-float { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 8.5px; font-weight: 700; letter-spacing: 0.04em; color: #fff; border-radius: 9999px; padding: 3px 9px; white-space: nowrap; }
.bt-teal { background: var(--wa-sage); }
.bt-orange { background: var(--wa-terracotta); }
.bt-imgs { display: flex; align-items: center; }
.bt-img { display: inline-flex; width: 34px; height: 34px; border-radius: 6px; overflow: hidden; background: #fff; }
.bt-img img { object-fit: contain; mix-blend-mode: multiply; }
.bt-in { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.2; }
.bt-l { font-size: 13px; font-weight: 600; }
.bt-off { font-size: 10.5px; font-weight: 600; color: var(--wa-terracotta); }
/* Narrow phones: 3-up ~90px tiles clip .bt-float badges (mobile audit L2).
   Stack to one column and keep badges in-flow so nothing hangs off the tile.
   Placed after the column/absolute tier rules so these win at ≤560. */
@media (max-width: 560px) {
  .buy-tiers { grid-template-columns: 1fr; gap: 10px; }
  .buy-tier {
    height: auto;
    min-height: 64px;
    flex-direction: row;
    justify-content: flex-start;
    padding: 12px 14px;
    gap: 12px;
  }
  .buy-tier .bt-float {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    margin-left: auto;
    flex: none;
  }
  .buy-tier .bt-in { align-items: flex-start; }
}
.buy-actions { margin-top: 14px; }
/* .buy-subscribe / .buy-soon removed 2026-08-08 with the "Subscribe & Save —
   Coming soon" control they styled. Left as a note rather than dead rules so
   the next person does not resurrect the markup to match orphaned CSS. */
.ship-banner {
  margin-top: 12px; background: var(--brc-pos-bed); border: 1px solid var(--brc-pos-line);
  border-radius: 12px; padding: 11px 14px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; align-items: start;
}
.ship-banner p { margin: 0; font-size: 13px; color: var(--brc-pos-ink); }
.ship-banner b { font-weight: 700; color: var(--brc-pos-ink); }
.ship-ic {
  display: flex; align-items: center; justify-content: center; color: var(--brc-pos);
  height: 18px; /* matches the first line's box so the icon sits on its baseline */
  animation: dot-pulse 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.ship-banner small { display: block; margin-top: 3px; font-size: 11.5px; color: #4d6653; }
.ship-banner small b { font-weight: 700; color: var(--brc-pos-ink); }
/* The three things we push. Equal thirds with hairline rules between them, so
   they read as three separate claims rather than one run-on line. */
.buy-facts { display: grid; grid-template-columns: repeat(3, 1fr); background: #f9fafb; border-radius: 12px; padding: 16px 4px; margin-top: 12px; }
/* BAC Water omits the purity chip (no assay). Two claims, still equal columns. */
.buy-facts--2 { grid-template-columns: repeat(2, 1fr); }
.buy-facts span { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 10px; font-size: 12.5px; font-weight: 500; color: #3f4652; text-align: center; text-wrap: balance; }
.buy-facts span + span { border-left: 1px solid var(--wa-hair-dk); }
/* Each fact icon carries its own colours inline, so no currentColor here. */
.buy-facts svg { width: 20px; height: 20px; flex: none; }
@media (max-width: 560px) {
  .buy-facts { grid-template-columns: 1fr; padding: 4px 16px; }
  .buy-facts span { flex-direction: row; justify-content: flex-start; text-align: left; padding: 11px 0; }
  .buy-facts span + span { border-left: none; border-top: 1px solid var(--wa-hair-dk); }
}
.buy-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: #6b7280; padding: 12px 0; border-top: 1px solid var(--wa-hair); }
.buy-total b { font-size: 22px; color: var(--wa-bark); }
.buy-actions { display: flex; gap: 10px; }
.buy-coa {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px;
  border: 1px solid #e0e0e0; border-radius: 9999px; font-size: 14px; font-weight: 500;
  color: var(--wa-bark); transition: all 0.15s;
}
.buy-coa:hover { border-color: var(--wa-bark); }
.buy-add { flex: 1; height: 48px; font-size: 14px; }
.buy-ship { font-size: 12px; color: #6b7280; text-align: center; margin: 12px 0 0; }

.verify-band { background: var(--wa-mint); margin-top: 48px; padding: 44px 0; }
.verify-band h2 { font-family: var(--wa-display); font-size: 34px; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 22px; color: var(--wa-bark); }
.verify-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.verify-cols h3 { font-family: var(--wa-display); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 6px; }
.verify-cols p { font-size: 13.5px; color: var(--wa-ink60); line-height: 1.6; margin: 0; }

.coa-card {
  border: 1px solid var(--wa-hair); border-radius: 16px; padding: 22px; background: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
}
.coa-fields { display: flex; gap: 34px; flex-wrap: wrap; }
.coa-fields > div { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.coa-purity { color: var(--wa-sage-text); }

/* PDP upsell strip ("Pairs well with it"), section 1b of the product page.
   Two-up on desktop, single column on phones. Sized off .d2-addon in the cart
   drawer — same hairline, same radius, same pill button — so the add-on
   language is one thing across the cart and the product page rather than two
   lookalikes that drift. */
.pdp-ups { padding-top: 8px; padding-bottom: 8px; }
.pdp-ups-h {
  font-family: var(--wa-display); font-size: 20px; font-weight: 500;
  letter-spacing: -0.01em; margin: 0 0 14px; color: var(--wa-bark);
}
.pdp-ups-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.pdp-ups-card {
  display: flex; align-items: center; gap: 14px; background: #fff;
  border: 1px solid var(--wa-hair); border-radius: 16px; padding: 12px 14px;
}
.pdp-ups-img {
  position: relative; width: 56px; height: 56px; flex: none;
  border-radius: 12px; overflow: hidden; background: #f9fafb;
}
.pdp-ups-img img { object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.pdp-ups-tx { flex: 1; min-width: 0; }
.pdp-ups-tx h3 {
  font-family: var(--wa-display); font-size: 15px; font-weight: 500;
  letter-spacing: -0.01em; line-height: 1.25; margin: 0;
}
.pdp-ups-price { font-size: 13.5px; font-weight: 600; margin: 3px 0 0; }
.pdp-ups-tx .co-err { font-size: 12px; margin: 5px 0 0; }
.pdp-ups-add {
  flex: none; border: 1px solid var(--wa-bark); background: #fff; color: var(--wa-bark);
  border-radius: 100px; font-size: 13px; font-weight: 600; padding: 8px 20px;
  cursor: pointer; transition: background 0.18s, color 0.18s;
}
.pdp-ups-add:hover:not(:disabled) { background: var(--wa-bark); color: #fff; }
/* Out of stock and mid-flight both land here. Kept legible rather than faded
   out entirely — a control a shopper cannot read is a control they retap. */
.pdp-ups-add:disabled { opacity: 0.45; cursor: not-allowed; }

.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
/* Cards stretch to the tallest in the row and the title absorbs the slack, so
   a two-line name (CJC-1295 No DAC / Ipamorelin) does not push its price and
   View button below its neighbours'. */
.rel-card { display: flex; flex-direction: column; gap: 6px; height: 100%; }
.rel-img { position: relative; aspect-ratio: 1; border: 1px solid var(--wa-hair); border-radius: 14px; overflow: hidden; background: #f9fafb; }
.rel-img img { object-fit: contain; padding: 12%; mix-blend-mode: multiply; transition: transform 0.3s; }
.rel-card:hover .rel-img img { transform: scale(1.05); }
.rel-card h3 { flex: 1 0 auto; font-family: var(--wa-display); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; margin: 2px 0 0; line-height: 1.2; }
.rel-card p { font-size: 13px; font-weight: 600; margin: 0 0 4px; }

.ci-acc { border: 1px solid var(--wa-hair); border-radius: 14px; padding: 16px 20px; margin-bottom: 10px; background: #fff; }
.ci-acc summary { font-family: var(--wa-display); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer; color: var(--wa-bark); }
.ci-acc .prose { margin-top: 12px; }
.ci-more { font-size: 14px; color: var(--wa-ink60); margin: 12px 0 0; }
.ci-more a { color: var(--wa-sage-text); font-weight: 600; }

.ruo-band { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 16px; padding: 24px 26px; margin-top: 44px; }
.ruo-band h2 { font-family: var(--wa-display); font-size: 20px; font-weight: 500; margin: 0 0 8px; }
.ruo-band p { font-size: 13.5px; line-height: 1.7; color: #7c2d12; margin: 0; }

/* ---------- home sections (aminoclub anatomy) ---------- */
.g-cards { margin-top: 6px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (min-width: 1080px) { .g-cards { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .g-cards { grid-template-columns: 1fr; } }
.g-card { border: none; border-radius: 18px; padding: 24px; background: #fff; }
.g-ic { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.g-ic > svg { width: 34px; height: 34px; color: var(--wa-bark); opacity: 0.8; }
.g-ic .g-check { width: 26px; height: 26px; color: #2e7d32; opacity: 1; }
.g-card h3 { font-family: var(--wa-display); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 7px; }
.g-card p { font-size: 13.5px; color: var(--wa-bark-soft); line-height: 1.65; margin: 0; }

/* inspection chain — "American quality, inspected." */
.h2-em { font-family: var(--wa-serif); font-style: italic; font-weight: 500; color: var(--wa-terracotta); }
.inspect-chain {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  position: relative; margin-top: 26px;
}
@media (max-width: 900px) { .inspect-chain { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .inspect-chain { grid-template-columns: 1fr; } }
.inspect-chain::before {
  content: ""; position: absolute; top: 21px; left: 6%; right: 6%; height: 1px;
  background: var(--wa-hair-dk); z-index: 0;
}
@media (max-width: 900px) { .inspect-chain::before { display: none; } }
.ins-step { position: relative; z-index: 1; text-align: center; padding: 0 6px; }
.ins-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 9999px;
  font-family: var(--wa-mono); font-size: 12px; color: var(--wa-bark);
  border: 3px solid var(--wa-canvas); box-shadow: 0 0 0 1px var(--wa-hair-dk);
  margin-bottom: 12px;
}
.ins-step h3 { font-family: var(--wa-display); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 6px; }
.ins-step p { font-size: 13px; color: var(--wa-bark-soft); line-height: 1.65; margin: 0; }

/* photo band — live-site photography + transparency voice */
.photo-band { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; margin-top: 54px; }
@media (max-width: 820px) { .photo-band { grid-template-columns: 1fr; } }
.photo-band-img { border-radius: 24px; overflow: hidden; box-shadow: var(--wa-shadow); }
.photo-band-img img { width: 100%; height: auto; display: block; }
.photo-band-txt h2 { font-family: var(--wa-display); font-weight: 500; font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.015em; margin: 4px 0 12px; }
.photo-band-txt > p:not(.eyebrow) { font-size: 14.5px; line-height: 1.7; color: var(--wa-ink60); margin: 0 0 20px; max-width: 50ch; }

.mint-band { background: var(--wa-mint); margin-top: 54px; padding: 46px 0 54px; }
.mint-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.mint-card { background: #fff; border-radius: 18px; padding: 26px; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.08); border-top: 4px solid var(--wa-sage); }
.mint-card:nth-child(2) { border-top-color: var(--wa-terracotta); }
.mint-card:nth-child(3) { border-top-color: var(--wa-glow); }
.mint-card h3 { font-family: var(--wa-display); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 8px; }
.mint-card p { font-size: 14px; color: var(--wa-ink60); line-height: 1.65; margin: 0 0 16px; }
.mint-cta {
  display: inline-flex; align-items: center; border: 1px solid var(--wa-bark); border-radius: 9999px;
  padding: 9px 18px; font-size: 13px; font-weight: 600; color: var(--wa-bark); transition: all 0.15s;
}
.mint-cta:hover { background: var(--wa-bark); color: #fff; }

.green-band {
  margin: 56px 0 24px; background: linear-gradient(180deg, #2a1d18, #3d2b24); border-radius: 20px;
  padding: 40px 42px; display: flex; align-items: center; justify-content: space-between; gap: 30px;
  flex-wrap: wrap; color: var(--wa-cream);
}
.green-band h2 { font-family: var(--wa-display); font-size: clamp(22px, 3vw, 30px); font-weight: 500; margin: 0 0 8px; color: var(--wa-cream); }
.green-band p { font-size: 14.5px; color: rgba(250, 246, 240, 0.8); margin: 0; }

/* content pages */
.page-head { padding: 46px 0 10px; }
.page-head h1 { font-size: 34px; font-weight: 600; margin: 0 0 6px; color: var(--wa-bark); }
.page-head p { font-size: 15px; color: var(--wa-ink60); margin: 0; }
.coa-table { width: 100%; border-collapse: collapse; margin: 22px 0 46px; font-size: 14px; }
.coa-table th {
  text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: #6b7280; padding: 10px 12px; border-bottom: 1px solid var(--wa-hair);
}
.coa-table td { padding: 12px; border-bottom: 1px solid var(--wa-hair); }
.coa-table .coa-view {
  display: inline-flex; border: 1px solid var(--wa-bark); border-radius: 9999px; padding: 6px 14px;
  font-size: 12px; font-weight: 600; color: var(--wa-bark); transition: all 0.15s; white-space: nowrap;
}
.coa-table .coa-view:hover { background: var(--wa-bark); color: #fff; }

/* footer columns */
/* LONGHAND PADDING, DELIBERATELY (Scott, 2026-08-06: "too close to the edge.
   this is something thats global").

   This element is `class="shell foot-cols"`. `.shell` gives it `padding: 0 24px`
   — the site gutter. `.foot-cols` used the SHORTHAND `padding: 40px 0 26px`,
   whose `0` silently reset left and right to zero, and being declared later at
   equal specificity it won. The whole footer — lockup, tagline, every link
   column — sat flush against the left edge of the browser on every page.

   Setting only the axis this rule actually cares about leaves the gutter alone.
   Do not collapse these back into a shorthand. */
.foot-cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px;
  padding-top: 40px; padding-bottom: 26px;
}
@media (max-width: 720px) { .foot-cols { grid-template-columns: 1fr 1fr; } }
/* Cormorant italic, not 13px DM Sans (Scott, 2026-08-06: "text not on-brand. too
   close to" the lockup). Sitting directly under the wordmark, a plain sans sentence
   read like a meta description — generic, and typographically unrelated to the mark
   above it. Cormorant italic is the site's own established accent voice (it carries
   the product synonym line), so the tagline now finishes the lockup instead of
   competing with it. 10px of clearance was also too tight against the logo. */
.foot-brand p {
  font-family: var(--wa-serif); font-style: italic;
  font-size: 17px; line-height: 1.55; letter-spacing: 0.005em;
  color: var(--wa-ink60); margin: 20px 0 0; max-width: 30ch;
}
.foot-h { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: #6b7280; margin: 0 0 12px; }
.foot-col a { display: block; font-size: 14px; color: var(--wa-bark-soft); padding: 4px 0; }
.foot-col a:hover { color: var(--wa-sage-text); }

/* ---------- storefront checkout (pre-payment gate) ---------- */
.co-shell { min-height: 100vh; background: #faf8f5; overflow-x: clip; }
.co-right { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 24px; }
.co-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px 24px; background: #fff; border-bottom: 1px solid var(--wa-hair);
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
}
.co-back { justify-self: start; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--wa-bark); text-decoration: none; }
.co-back:hover { opacity: 0.7; }
.co-mark { justify-self: center; display: inline-flex; }
/* The wordmark is the only branding on a page stripped of all other chrome, and
   the one thing telling a customer whose payment page this is. It was smaller
   here than in the site header it replaced, which read as an afterthought on the
   page where confidence matters most. */
.co-mark img { height: 62px; width: auto; }
@media (max-width: 640px) { .co-mark img { height: 44px; } }
.co-secure {
  justify-self: end; display: inline-flex; align-items: center; gap: 6px;
  background: var(--brc-pos-bed); color: var(--brc-pos-ink); border: 1px solid var(--brc-pos-line);
  border-radius: 9999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.co-head { max-width: 1180px; margin: 0 auto; padding: 40px 24px 0; }
.co-head h1 { font-family: var(--wa-display); font-weight: 500; font-size: clamp(30px, 4vw, 46px); margin: 0; letter-spacing: -0.02em; }
/* Subhead, same treatment as .store-head p — Cormorant italic is the site's
   subhead voice, and this was the last plain-sans one left on a co- surface
   (Scott, 2026-08-07). */
.co-head p { margin: 6px 0 0; color: var(--wa-ink60); font-family: var(--wa-serif); font-style: italic; font-size: 17px; }
/* ...except the receipt's not-found body copy, which is a recovery paragraph
   with a link in it, not a subhead. A whole italic serif paragraph is harder to
   read at exactly the moment someone is worried about an order. */
.co-head p.oc-miss { font-family: var(--wa-sans); font-style: normal; font-size: 15px; }
.co-empty { max-width: 1180px; margin: 0 auto; padding: 48px 24px 80px; }
.co-empty p { color: var(--wa-ink60); margin: 0 0 16px; }
/* Held while the cart read is in flight. Same shell width as .co-grid so the
   checkout does not jump sideways when the basket arrives. Quiet bars, not a
   spinner: the read is usually short, and a spinner reads as a failure. */
.co-cart-pending { max-width: 1180px; margin: 0 auto; padding: 28px 24px 72px; }
.co-cart-pending > p { margin: 0 0 16px; color: var(--wa-ink40); font-size: 13.5px; }
.co-skel {
  background: #fff; border: 1px solid var(--wa-hair); border-radius: 20px;
  padding: 28px 24px; display: grid; gap: 12px;
}
.co-skel span {
  display: block; height: 12px; border-radius: 999px; background: #efeae3;
}
.co-skel span:nth-child(1) { width: 38%; }
.co-skel span:nth-child(2) { width: 92%; }
.co-skel span:nth-child(3) { width: 70%; }
.co-skel span:nth-child(4) { width: 100%; height: 44px; border-radius: 12px; margin-top: 8px; }
.co-grid {
  max-width: 1180px; margin: 0 auto; padding: 28px 24px 72px;
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start;
}
/* A single centred card, for a co- surface with no order summary beside it
   (/signin). Deliberately not .co-grid: that is 1fr + 400px for the checkout's
   summary column, so a lone child sits off-centre against a column that is not
   there. 520px keeps the 380px .co-form inside the card's 40px padding. */
.co-solo { max-width: 520px; margin: 0 auto; padding: 40px 24px 72px; }
/*
  On-brand type for the sign-in gate — ONE definition, both surfaces.

  Scoped to .co-gate, not to a page: /signin and the checkout gate are the same
  card and must not drift into two looks. It was briefly .co-solo-scoped, which
  gave /signin the brand type and left checkout in plain DM Sans — the same
  duplication in CSS that the copy had in markup (Scott, 2026-08-07).

  The vocabulary is the site's own, not new: Cormorant italic for the subhead is
  exactly .store-head p, and the mono / uppercase / 0.14em / bronze label is
  exactly .buy-lbl, which is how every other field label on the storefront reads.

  .co-gate .co-field-lbl, deliberately, NOT .co-field-lbl: CheckoutSteps' address
  form lives in .co-steps and has a dozen fields, where mono uppercase would read
  as shouting. This is only the one- and two-field auth card.
*/
.co-gate-sub {
  font-family: var(--wa-serif); font-style: italic;
  font-size: 16.5px; line-height: 1.5;
  /* Both steps run to two short lines at 38ch. text-wrap: pretty balances the
     last one, so neither can strand a one-word widow if the copy is edited —
     which it has been once already. */
  max-width: 38ch; text-wrap: pretty;
}
/* The address and the countdown are data, not prose — mono keeps them legible
   against the italic and stops a long address looking like a typo. */
.co-gate-sub b {
  font-family: var(--wa-mono); font-style: normal;
  font-size: 13px; font-weight: 500; color: var(--wa-bark);
}
/* The address gets its own line. Inline, a long one wrapped mid-token —
   "signin-" / "probe@example.com" — which reads as a broken address at the
   exact moment the customer is checking they typed it right. */
.co-gate-addr { display: block; margin: 7px 0 5px; }
/* An expired code is the one line here the customer has to act on. */
.co-ttl-out { color: var(--wa-terracotta); font-style: italic; }
.co-gate .co-field-lbl {
  font-family: var(--wa-mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--wa-bronze-text); margin-bottom: 8px;
}
.co-gate .co-err { font-size: 12px; }
.co-card { background: #fff; border: 1px solid var(--wa-hair); border-radius: 20px; }
.co-gate { padding: 48px 40px; text-align: center; }
.co-gate-lead { margin: 0 0 26px; color: var(--wa-ink60); font-size: 14px; }
.co-gate-mark img { height: 38px; width: auto; margin: 0 auto 18px; }
.co-gate h2 { font-family: var(--wa-display); font-weight: 500; font-size: 26px; margin: 0 0 8px; letter-spacing: -0.01em; }
.co-gate-sub { margin: 0 auto 24px; color: var(--wa-ink60); }
/* Shown for the one request that asks whether they are already signed in. The
   min-height is roughly the email card's body, so the answer landing does not
   shunt the page. Quiet on purpose — a spinner would make a ~100ms check look
   like a problem. */
.co-gate-wait {
  margin: 0; min-height: 168px; display: flex; align-items: center; justify-content: center;
  color: var(--wa-ink40); font-size: 13.5px;
}
/* The account block, above the summary in the right column. A card rather than
   a caption: it answers "who is this order for, and how do I change that", and
   both halves of that need to be findable without hunting. */
.co-whoami {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--wa-hair); border-radius: 14px;
}
.co-whoami-id {
  display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto;
  text-decoration: none; color: inherit; border-radius: 10px;
  background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer;
}
/* The avatar's menu. Anchored to the card (.co-whoami is relative); the veil
   behind it turns any outside click into "close". */
.co-whoami { position: relative; }
.co-whoami-veil { position: fixed; inset: 0; z-index: 40; }
.co-whoami-menu {
  position: absolute; top: calc(100% - 6px); left: 14px; z-index: 41;
  display: flex; flex-direction: column; min-width: 170px; padding: 6px;
  background: #fff; border: 1px solid var(--wa-hair); border-radius: 12px;
  box-shadow: var(--wa-shadow-sm);
}
.co-whoami-menu a {
  padding: 9px 12px; border-radius: 8px; text-decoration: none;
  font-size: 13.5px; color: var(--wa-ink);
}
.co-whoami-menu a:hover { background: var(--wa-mint); }
.co-whoami-id:hover .co-whoami-who { color: var(--wa-terracotta); }
.co-whoami-id:hover .co-whoami-av { filter: brightness(0.95); }
.co-whoami-av {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  /* Background is set inline from lib/theme avatarTint() — a pastel picked from
     the category palette and stable per account. --wa-sage was tried here and is
     a mid olive, which read as a muddy disc at this size. */
  color: var(--wa-bark);
  font-family: var(--wa-display); font-size: 17px; line-height: 1;
}
.co-whoami-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.co-whoami-who { font-size: 14.5px; font-weight: 600; color: var(--wa-ink); }
.co-whoami-em {
  font-size: 12px; color: var(--wa-ink40);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.co-whoami-acts { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.co-whoami-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--wa-ink60);
  text-decoration: underline; text-underline-offset: 2px;
}
.co-whoami-link:hover { color: var(--wa-terracotta); }
.co-whoami-link:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 640px) {
  .co-whoami-acts { flex-direction: row; gap: 12px; align-items: center; }
}

/* Address suggestions under the street field. Anchored to the label, which is
   the positioned ancestor, so the list hugs the input at every viewport. */
.co-field--suggest { position: relative; }
.co-suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  margin: 4px 0 0; padding: 4px; list-style: none;
  background: #fff; border: 1px solid var(--wa-hair); border-radius: 12px;
  box-shadow: var(--wa-shadow-sm); max-height: 240px; overflow-y: auto;
}
.co-suggest button {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  padding: 9px 11px; background: none; border: 0; border-radius: 8px;
  cursor: pointer; font-family: inherit;
}
.co-suggest button:hover { background: var(--wa-mint); }
.co-suggest b { font-size: 13.5px; font-weight: 600; color: var(--wa-ink); }
.co-suggest span { font-size: 12px; color: var(--wa-ink40); }

/* Savings on a summary line, mirroring the cart drawer. Same information, same
   order, same words — a discount that is celebrated in the drawer and silently
   dropped at checkout reads as if it stopped applying. */
.co-sum-was { display: block; font-size: 11.5px; color: var(--wa-ink40); text-decoration: line-through; }
.co-sum-save { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; }
.co-sum-badge {
  display: inline-block; padding: 2px 7px; border-radius: 999px;
  background: #e7f3ea; color: #15803d; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.co-sum-reason { font-size: 11.5px; color: var(--wa-ink40); }
/* The one line that answers "what did I save in total". */
.co-sum-row.saved span:last-child { color: #15803d; font-weight: 600; }
/* Sits below the summary card, in the right column, like the reference. */
.co-cta {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  background: var(--wa-bark-deep); color: #fff; border-radius: 9999px; height: 56px;
  font-size: 15px; font-weight: 600; text-decoration: none; transition: opacity 0.15s;
}
.co-cta svg { color: var(--brc-pos-line); }
.co-cta:hover { opacity: 0.88; }
/* Signed-out: the CTA is a real disabled <button>, not a dimmed link, so it is
   unclickable and announced as disabled rather than merely looking inert. */
.co-cta[disabled] { opacity: 0.32; cursor: not-allowed; border: none; }
.co-cta[disabled]:hover { opacity: 0.32; }
.co-cta-why {
  margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--wa-ink40);
}
.co-form { max-width: 380px; margin: 0 auto; text-align: left; }
/* The code step is a fully centred composition, so a left-aligned label and
   error above and below a centre-aligned input were the one thing out of line
   (Scott, 2026-08-07). .co-form sets text-align:left for ordinary multi-field
   forms; this overrides it for that step only. SAME specificity as .co-form,
   so it has to stay after it in source order. */
.co-form-center,
.co-form-center .co-field-lbl,
.co-form-center .co-err { text-align: center; }
.co-field { display: block; margin-bottom: 12px; }
.co-field-lbl { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--wa-bark); }
.co-field input {
  /* 16px, not 15px: iOS Safari auto-zooms ANY input below 16px on focus, and this
     is the first field of the checkout. The zoom is not recoverable by the user
     without pinching back out. Height and padding unchanged. */
  width: 100%; height: 52px; padding: 0 16px; font-size: 16px; font-family: inherit;
  color: var(--wa-bark); background: #f6f5f2; border: 1px solid var(--wa-hair);
  border-radius: 12px; transition: border-color 0.15s, background 0.15s;
}
.co-field input::placeholder { color: var(--wa-ink40); }
.co-field input:focus { outline: none; background: #fff; border-color: var(--wa-bark); }
.co-field input[aria-invalid="true"] { border-color: #a8422e; }
.co-err { margin: -4px 0 10px; font-size: 12.5px; color: #a8422e; }
.co-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--wa-ink40); line-height: 1.45; }
.co-code { text-align: center; font-family: var(--wa-mono); font-size: 24px !important; letter-spacing: 0.4em; text-indent: 0.4em; }
.co-selwrap { position: relative; display: block; }
.co-selwrap select {
  /* 16px for the same iOS zoom reason as .co-field input above. */
  width: 100%; height: 52px; padding: 0 42px 0 16px; font-size: 16px; font-family: inherit;
  color: var(--wa-bark); background: #f6f5f2; border: 1px solid var(--wa-hair);
  border-radius: 12px; appearance: none; cursor: pointer;
}
.co-selwrap select:focus { outline: none; background: #fff; border-color: var(--wa-bark); }
.co-selwrap svg { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--wa-ink60); pointer-events: none; }
/* Date of birth: month / day / year. Month is widest because it holds "September";
   day is narrowest. Uneven columns rather than thirds so nothing truncates and the
   row still reads as one field. Chevron padding drops on the two narrow selects,
   which have no long label to collide with. */
.co-dob { display: grid; grid-template-columns: 1.35fr 0.8fr 1fr; gap: 8px; }
.co-dob .co-selwrap select { padding-right: 34px; }
.co-dob .co-selwrap svg { right: 11px; }
@media (max-width: 420px) {
  .co-dob { grid-template-columns: 1fr 1fr; }
  .co-dob .co-selwrap:first-child { grid-column: 1 / -1; }
}
/* The guest way out of the sign-in card. A hairline and a centred "or" so it
   reads as a genuine alternative rather than a footnote to the button above —
   but the button above stays the primary action, because an account still gets
   the customer their order history and saved address. */
.co-guest { margin-top: 18px; text-align: center; }
.co-guest-or {
  display: block; position: relative; margin-bottom: 14px;
  font-size: 12px; color: var(--wa-ink40); text-transform: lowercase;
}
.co-guest-or::before,
.co-guest-or::after {
  content: ""; position: absolute; top: 50%; width: calc(50% - 18px);
  border-top: 1px solid var(--wa-hair);
}
.co-guest-or::before { left: 0; }
.co-guest-or::after { right: 0; }
.co-guest .co-linkbtn { margin-top: 0; font-size: 14px; color: var(--wa-terracotta); }
.co-guest .co-linkbtn:hover { color: var(--wa-bark); }
.co-guest .co-hint { margin-top: 8px; }

.co-linkbtn {
  margin-top: 14px; background: none; border: none; padding: 0; font: inherit; font-size: 13px;
  color: var(--wa-ink60); text-decoration: underline; cursor: pointer;
}
.co-linkbtn:hover { color: var(--wa-bark); }
.co-signin {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; border: none; font-family: inherit; cursor: pointer;
  background: var(--wa-bark-deep); color: #fff; border-radius: 9999px; height: 54px;
  font-size: 15px; font-weight: 600; text-decoration: none; transition: opacity 0.15s;
}
.co-signin:hover { opacity: 0.88; }
.co-signin:disabled { opacity: 0.45; cursor: default; }
/* Resend line. Sits directly under Continue because it answers the question the
   customer already has by the time they are staring at an empty code box. */
.co-resend { margin: 14px 0 0; font-size: 12.5px; color: var(--wa-ink60); }
.co-resend b { font-family: var(--wa-mono); font-weight: 500; color: var(--wa-bark); }
.co-resend a { color: var(--wa-terracotta); }
.co-resend-btn {
  background: none; border: none; padding: 0; font: inherit; color: var(--wa-terracotta);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.co-resend-btn:disabled { opacity: 0.5; cursor: default; text-decoration: none; }
.co-gate-legal { margin: 16px 0 0; font-size: 11.5px; color: var(--wa-ink40); }

/* Clickwrap consent, directly above Pay. Deliberately larger than
   .co-gate-legal: this sentence is the affirmative act the order evidence
   records, not a footnote, so it has to be comfortably readable. */
.co-consent {
  margin: 0 0 12px; max-width: 46ch; text-wrap: pretty;
  font-size: 12.5px; line-height: 1.5; color: var(--wa-ink60);
}
/* The global reset is a{color:inherit;text-decoration:none}, so a link here
   renders as plain darker text and reads as prose. This link is the only
   route to the eight acknowledgments the sentence says the customer accepts,
   so it has to be visibly a link. Underline restored explicitly. */
.co-consent a {
  color: var(--wa-bark); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.co-consent a:hover { text-decoration-thickness: 2px; }
.co-gate-legal a { color: var(--wa-ink60); }
/* Support route. Under the legal line but separated by a hairline so it reads as help
   rather than more small print — on a failed sign-in this is the only way out. */
.co-gate-help {
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--wa-hair);
  font-size: 12px; color: var(--wa-ink40);
}
.co-gate-help a { color: var(--wa-terracotta); text-decoration: none; }
.co-gate-help a:hover { text-decoration: underline; }
/* Summary: sticky so the money stays in view while the left column scrolls. */
.co-sum { overflow: hidden; }
.co-sum-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 20px 24px; background: #f6f2ec; }
.co-sum-head h2 { font-family: var(--wa-display); font-weight: 500; font-size: 20px; margin: 0; }
.co-sum-count { font-size: 12.5px; color: var(--wa-ink60); }
.co-sum-items { padding: 4px 24px; }
.co-sum-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--wa-hair); }
.co-sum-item:last-child { border-bottom: none; }
.co-sum-img { position: relative; width: 64px; height: 64px; border-radius: 12px; background: #f9fafb; overflow: visible; }
.co-sum-img img { object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.co-sum-qty {
  position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center; border-radius: 9999px;
  background: #fff; border: 1px solid var(--wa-hair-dk); color: var(--wa-bark);
  font-size: 11px; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.co-sum-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.co-sum-name small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--wa-ink60); }
.co-sum-price { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.co-sum-ctl { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.co-sum-step { display: inline-flex; align-items: center; border: 1px solid var(--wa-hair-dk); border-radius: 100px; overflow: hidden; }
.co-sum-step button { background: none; border: none; width: 28px; height: 28px; font-size: 15px; line-height: 1; color: var(--wa-ink60); cursor: pointer; }
.co-sum-step button:hover:not(:disabled) { background: #f5f5f5; color: var(--wa-bark); }
.co-sum-step button:disabled { opacity: .45; cursor: default; }
.co-sum-step span { font-size: 13px; font-weight: 600; min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.co-sum-rm { background: none; border: none; padding: 0; font-size: 12px; font-weight: 400; color: var(--wa-ink40); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.co-sum-rm:hover:not(:disabled) { color: var(--wa-bark); }
.co-sum-rm:disabled { opacity: .45; cursor: default; }
.co-points {
  padding: 16px 24px 4px;
  border-top: 1px solid var(--wa-hair);
}
.co-points-lbl {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wa-bark);
}
.co-points-note {
  margin: 6px 0 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--wa-ink60);
}
.co-points-row { display: flex; align-items: center; gap: 8px; }
.co-points-row input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--wa-hair-dk);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--wa-bark);
}
.co-points-row input:focus { outline: none; border-color: var(--wa-bark); }
.co-points-row input:disabled { opacity: 0.55; }
.co-points-apply,
.co-points-clear {
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.co-points-apply {
  border: 0;
  background: var(--wa-bark);
  color: var(--wa-cream);
}
.co-points-apply:disabled { opacity: 0.45; cursor: default; }
.co-points-clear {
  border: 1px solid var(--wa-hair-dk);
  background: transparent;
  color: var(--wa-bark);
}
.co-points-clear:disabled { opacity: 0.45; cursor: default; }
.co-points-err { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: #a8422e; }
.co-points-ok { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--brc-pos); }
.co-sum-totals { padding: 18px 24px 22px; border-top: 1px solid var(--wa-hair); }
.co-sum-row { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 9px; color: var(--wa-bark-soft); }
.co-sum-row.total { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--wa-hair); font-size: 15px; color: var(--wa-bark); font-weight: 600; }
.co-sum-row.total span:last-child { font-family: var(--wa-display); font-size: 22px; font-weight: 500; }
.co-sum-note { margin: 10px 0 0; font-size: 11.5px; color: var(--wa-ink40); }
@media (max-width: 900px) {
  .co-grid { grid-template-columns: 1fr; gap: 22px; }
  .co-right { position: static; order: -1; }
  .co-gate { padding: 36px 24px; }
}

/* ---------- cart upsell ---------- */
.dw-bac {
  display: flex; gap: 13px; align-items: center; margin: 14px 22px 4px;
  border: 1px solid var(--brc-pos-line); background: var(--brc-pos-bed); border-radius: 14px; padding: 12px;
}
.dw-bac-h { font-size: 13.5px; font-weight: 600; margin: 0; color: var(--brc-pos-ink); }
.dw-bac-s { font-size: 12px; color: #4d6653; margin: 2px 0 0; }
.dw-bac-s s { opacity: 0.6; }
.dw-bac-deal { color: var(--brc-pos-ink); font-weight: 700; }
.dw-bac-add {
  margin-left: auto; flex: none; background: var(--brc-pos); color: #fff; border: none;
  border-radius: 9999px; font-size: 12px; font-weight: 600; padding: 8px 18px; transition: opacity 0.15s;
}
.dw-bac-add:hover { opacity: 0.85; }
.dw-sec { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: #6b7280; padding: 18px 22px 10px; margin: 0; }

/* Upsells are a vertical list, not a horizontal carousel. The carousel put a
   third card half off the panel edge with its Add button unreachable, and left
   a tall empty gap underneath. Rows read cleanly, fit the panel width, and
   match the reconstitution add-on directly above them. */
.dw-xs { display: flex; flex-direction: column; gap: 8px; padding: 0 22px 8px; }
.dw-xcard {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto;
  align-items: center; column-gap: 12px;
  background: #fff; border: 1px solid var(--wa-hair); border-radius: 12px; padding: 9px 11px;
}
.dw-ximg { position: relative; width: 52px; height: 52px; border-radius: 9px; background: #f9fafb; overflow: hidden; }
.dw-ximg img { object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.dw-xnm { font-size: 13px; font-weight: 600; margin: 0; line-height: 1.25; }
/* Price and Add become grid cells of the row itself. */
.dw-xfoot { display: contents; }
.dw-xpr { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dw-xadd {
  background: none; border: 1px solid var(--wa-bark); color: var(--wa-bark); border-radius: 9999px;
  font-size: 11px; font-weight: 600; padding: 6px 15px; transition: all 0.15s;
}
.dw-xadd:hover { background: var(--wa-bark); color: #fff; }

/* ---------- cart drawer ---------- */
.ovl {
  position: fixed; inset: 0; background: rgba(42, 29, 24, 0.42); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity 0.34s ease; z-index: 40;
}
.ovl.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: 420px; max-width: 100%;
  background: var(--wa-canvas); box-shadow: -24px 0 60px -30px rgba(42, 29, 24, 0.5);
  transform: translateX(100%); transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 41; display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .drawer, .ovl { transition: none; } }
.dw-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--wa-hair);
  /* Full-bleed drawer on phone reaches under the status bar. */
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
}
.dw-title { font-family: var(--wa-display); font-size: 21px; font-weight: 500; margin: 0; letter-spacing: -0.01em; }
.dw-x { background: none; border: none; padding: 6px; line-height: 0; color: var(--wa-ink60); border-radius: 100px; }
.dw-x:hover { background: var(--wa-cream); }
.dw-scroll { flex: 1; overflow-y: auto; padding: 4px 0 8px; }
.dw-item { display: flex; gap: 13px; padding: 14px 22px; border-bottom: 1px solid var(--wa-hair); }
.dw-iimg { position: relative; width: 62px; height: 62px; flex: none; border-radius: 12px; background: var(--wa-surface); overflow: hidden; border: 1px solid var(--wa-hair); }
.dw-iimg img { object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.dw-imain { flex: 1; min-width: 0; }
.dw-itop { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.dw-inm { font-family: var(--wa-display); font-size: 15.5px; font-weight: 500; margin: 0; line-height: 1.25; }
.dw-ipr { font-family: var(--wa-mono); font-size: 12.5px; color: var(--wa-terracotta); white-space: nowrap; }
.dw-irow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.dw-qty { display: inline-flex; align-items: center; border: 1px solid var(--wa-hair-dk); border-radius: 100px; overflow: hidden; }
.dw-qty button { background: none; border: none; width: 26px; height: 26px; font-size: 14px; color: var(--wa-bark-soft); line-height: 1; }
.dw-qty button:hover { background: var(--wa-cream); }
.dw-qty span { font-family: var(--wa-mono); font-size: 11.5px; min-width: 22px; text-align: center; }
.dw-rm {
  background: none; border: none; font-family: var(--wa-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--wa-ink40); padding: 4px 2px;
  border-bottom: 1px solid transparent;
}
.dw-rm:hover { color: var(--wa-terracotta); border-bottom-color: var(--wa-bronze); }
.dw-foot {
  border-top: 1px solid var(--wa-hair); background: var(--wa-surface);
  padding: 16px 22px calc(20px + env(safe-area-inset-bottom, 0px));
}
/* Free-shipping progress. Same green family as the PDP ship-window banner so
   the two read as one status language. */
.dw-ship { margin-bottom: 13px; }
.dw-ship-h { font-size: 12px; font-weight: 500; color: var(--wa-ink60); margin: 0 0 6px; }
.dw-ship-h b { font-weight: 700; color: var(--brc-pos); }
.dw-track { display: block; position: relative; height: 6px; border-radius: 100px; background: var(--brc-pos-bed); overflow: hidden; }
.dw-fill { position: absolute; inset: 0 auto 0 0; border-radius: 100px; background: var(--brc-pos-fill); transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

/* ---- free shipping, earned ---------------------------------------------
   Clearing the threshold is the one bit of good news in the drawer, and it
   was landing in the same grey 12px as "Subtotal". Earned state gets a tick,
   a size bump, a thicker bar, and a single shine that sweeps once and stops —
   celebration, not a loop that nags. */
.dw-ship-h { display: flex; align-items: center; gap: 7px; }
.dw-ship-tick { width: 17px; height: 17px; flex: none; }
.dw-ship-tick circle { fill: var(--brc-pos); }
.dw-ship-tick path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Earned takes the same tinted card the add-on special uses — that is already this
   drawer's language for good news, so the reward reads as one rather than as a
   green label. The progress track is hidden once it is full: a 100% bar has no
   information left to give, and dropping it lets the card carry the moment. */
.dw-ship.is-earned {
  background: var(--brc-pos-bed); border: 1px solid var(--brc-pos-line);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 14px;
  animation: dw-earned 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dw-ship.is-earned .dw-ship-h { font-size: 14.5px; font-weight: 600; margin: 0; color: var(--brc-pos-ink); }
.dw-ship.is-earned .dw-ship-h b { font-weight: 700; color: var(--brc-pos-ink); letter-spacing: -0.005em; }
.dw-ship.is-earned .dw-track { display: none; }
.dw-ship.is-earned .dw-ship-tick { animation: dw-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s both; }

@keyframes dw-earned {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dw-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .dw-fill { transition: none; }
  .dw-ship.is-earned, .dw-ship.is-earned .dw-ship-tick { animation: none; }
}
/* Line-item saving: struck "was" beside the price, reason underneath. */
.dw-iwas { margin-right: 6px; font-weight: 400; color: var(--wa-ink40); text-decoration-thickness: 1px; }
.dw-isave { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 5px 0 0; }
.dw-ibadge { display: inline-flex; background: var(--brc-pos); color: #fff; border-radius: 9999px; padding: 3px 9px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.dw-ireason { font-size: 11px; color: var(--wa-ink60); }
.dw-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 7px; }
.dw-line .lbl { color: var(--wa-ink60); }
.dw-line .val { font-family: var(--wa-mono); font-size: 13px; }
.dw-line.total { padding-top: 11px; border-top: 1px solid var(--wa-hair); margin-bottom: 14px; }
.dw-line.total .lbl { color: var(--wa-bark); font-size: 14px; }
.dw-line.total .val { font-family: var(--wa-display); font-size: 22px; font-weight: 500; }
.dw-taxnote { margin: -8px 0 14px; font-size: 11px; color: var(--wa-ink40); }
.dw-co {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  background: var(--wa-bark-deep); color: #fff; border: none; border-radius: 9999px;
  font-family: var(--wa-sans); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
  padding: 14px; transition: opacity 0.18s;
}
.dw-co:hover { opacity: 0.88; }
.dw-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px; text-align: center; }
.dw-empty p { font-family: var(--wa-display); font-size: 19px; margin: 0; }
.dw-empty span { font-size: 12.5px; color: var(--wa-ink60); line-height: 1.6; }
@media (max-width: 520px) { .drawer { width: 100%; } }

/* ── Cart drawer v2 ──────────────────────────────────────────────────────────
   The aminoclub.com panel, measured off the live site 2026-08-05 and scoped
   under .d2 so v1 is untouched. Every magic number below is a measurement,
   not a preference. Preview-flag only: components/CartDrawer.tsx.            */

.drawer.d2 { width: 448px; background: #fff; display: flex; flex-direction: column; }

.d2-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 14px;
  border-bottom: 1px solid #f0f0f0;
}
.d2-title { font-family: var(--wa-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0; color: #000; }
.d2-title span { font-weight: 400; color: var(--wa-ink40); margin-left: 2px; }
.d2-x { background: none; border: none; padding: 4px; line-height: 0; color: #999; border-radius: 100px; }
.d2-x:hover { background: #f5f5f5; color: #000; }

.d2-scroll { flex: 1; overflow-y: auto; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 12px; }

/* Item card — 1px #e8e8e8 hairline at radius 16, 72px tinted thumbnail. */
.d2-card { position: relative; display: flex; align-items: center; gap: 14px; border: 1px solid #e8e8e8; border-radius: 16px; padding: 14px 40px 14px 14px; background: #fff; }
.d2-thumb { position: relative; width: 72px; height: 72px; flex: none; border-radius: 12px; background: var(--wa-mint); overflow: hidden; }
.d2-thumb img { object-fit: contain; padding: 7px; mix-blend-mode: multiply; }
.d2-body { flex: 1; min-width: 0; }
.d2-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0; color: #000; overflow-wrap: anywhere; }
.d2-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }

/* Quantity control — their pill, rendered as our −/+ stepper. */
.d2-qty { display: inline-flex; align-items: center; border: 1px solid #e2e2e2; border-radius: 100px; overflow: hidden; }
.d2-qty button { background: none; border: none; width: 30px; height: 30px; font-size: 15px; color: #555; line-height: 1; }
.d2-qty button:hover { background: #f5f5f5; color: #000; }
.d2-qty span { font-size: 13px; font-weight: 500; min-width: 24px; text-align: center; }

/* The price pair. <s> only ever renders from a real regular_price. */
.d2-price { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.d2-price s { font-size: 15px; color: #999; text-decoration-thickness: 1px; }
.d2-price b { font-size: 19px; font-weight: 700; color: #000; letter-spacing: -0.01em; }
.d2-price b.cut { color: var(--d2-pos, #16a34a); }

.d2-rm { position: absolute; top: 12px; right: 12px; background: none; border: none; padding: 3px; line-height: 0; color: #bbb; border-radius: 100px; }
.d2-rm:hover { background: #f5f5f5; color: #000; }

.d2-addon { display: flex; align-items: center; gap: 12px; border: 1px solid #e8e8e8; border-radius: 16px; padding: 12px 14px; }
.d2-addon-ic { position: relative; width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--wa-mint); overflow: hidden; }
.d2-addon-ic img { object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.d2-addon-tx { flex: 1; min-width: 0; }
.d2-addon-tx p { font-size: 13.5px; font-weight: 600; margin: 0; }
.d2-addon-tx small { font-size: 12px; color: var(--wa-ink60); }
.d2-addon-add { border: 1px solid var(--wa-bark); background: #fff; border-radius: 100px; font-size: 12.5px; font-weight: 600; padding: 6px 16px; }
.d2-addon-add:hover { background: var(--wa-bark); color: #fff; }

.d2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.d2-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e2e2e2; border-radius: 100px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: #000; }

.d2-foot {
  border-top: 1px solid #e8e8e8; background: #fff;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}

/* Free-shipping meter — 6px track, #dcfce7 bed, #22c55e fill. */
.d2-ship { margin-bottom: 8px; }
.d2-ship-h { font-size: 12px; font-weight: 500; color: #666; margin: 0 0 6px; }
.d2-ship-h b { font-weight: 600; color: var(--d2-pos, #16a34a); }
.d2-track { display: block; position: relative; height: 6px; border-radius: 100px; background: var(--d2-pos-bed, #dcfce7); overflow: hidden; }
.d2-fill { position: absolute; inset: 0 auto 0 0; border-radius: 100px; background: var(--d2-pos-fill, #22c55e); transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

.d2-when { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
.d2-pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 100px; border: 1px solid rgba(19, 19, 21, 0.1); background: var(--d2-pos-bed, #e9fce6); box-shadow: 0 1px 2px rgba(19, 19, 21, 0.04); padding: 4px 12px; font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: var(--wa-bark); }
.d2-dot { width: 6px; height: 6px; border-radius: 100px; background: var(--d2-pos, #16a34a); flex: none; animation: d2pulse 2s ease-in-out infinite; }
@keyframes d2pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.d2-eta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: #374151; margin: 0; }
.d2-eta svg { color: var(--d2-pos, #16a34a); flex: none; }

.d2-sum { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.d2-sum-l { font-size: 14px; font-weight: 600; color: #000; }
.d2-sum-v { display: flex; align-items: baseline; gap: 8px; }
.d2-sum-v s { font-size: 16px; color: #999; text-decoration-thickness: 1px; }
.d2-sum-v b { font-size: 20px; font-weight: 700; color: #000; letter-spacing: -0.01em; }
.d2-disc { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-size: 14px; color: var(--d2-pos, #16a34a); }
.d2-disc span:last-child { font-weight: 600; }
.d2-demo { font-size: 11px; color: var(--wa-terracotta); margin: 6px 0 0; letter-spacing: 0.01em; }

/* CTA — 44px black pill. Their Google Pay button has no counterpart here. */
.d2-cta { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; margin-top: 14px; border-radius: 100px; background: #000; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; }
.d2-cta:hover { background: rgba(0, 0, 0, 0.9); }
.d2-cta:active { transform: scale(0.98); }
.d2-secure { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11px; color: var(--wa-ink40); margin: 10px 0 0; }

@media (max-width: 520px) { .drawer.d2 { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .d2-dot, .d2-fill { animation: none; transition: none; } }

/* ---------- checkout: the signed-in steps (2026-08-05) ----------
   Geometry taken from the reference measured live at 1280px: card radius 24 /
   padding 32, a 32px numbered disc, completed steps collapsing to a labelled
   recap with a green tick and an Edit link. Woo renders none of this — which
   is precisely why address and delivery moved onto the storefront. */
.co-steps { padding: 32px; border-radius: 24px; }
.co-step { padding: 28px 0; border-bottom: 1px solid var(--wa-hair); }
.co-step:first-child { padding-top: 4px; }
.co-step--last { border-bottom: none; padding-bottom: 4px; }
.co-step.is-locked { opacity: 0.45; }

.co-stephead { display: flex; align-items: center; gap: 14px; }
.co-stepnum {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9999px;
  background: #131315; color: #fff; display: inline-flex; align-items: center;
  justify-content: center; font-size: 14px; font-weight: 600; line-height: 1;
}
.co-stephead h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.co-tick { flex: 0 0 20px; }
.co-edit {
  margin-left: auto; background: none; border: 0; cursor: pointer; padding: 4px;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--wa-bark);
  text-decoration: underline; text-underline-offset: 2px;
}
.co-edit:hover { opacity: 0.7; }

/* Completed step: a quiet receipt line. Was three columns squeezed into half a
   card — long emails collided with the billing column and every cell carried
   small print; the recap read busier than the form it replaced. */
.co-recap {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; margin: 18px 0 0 46px;
}
.co-recap--two { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.co-recap > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.co-recap-lbl { font-size: 13.5px; font-weight: 700; color: var(--wa-bark); }
.co-recap span:not(.co-recap-lbl) { font-size: 14px; line-height: 1.5; color: var(--wa-ink60); }
.co-recap small { display: block; margin-top: 6px; font-size: 12px; color: var(--wa-ink40); }
/* Recognition, not legibility — the ellipsis keeps one long address on one line. */
.co-recap-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The delivery estimate, in the positive family the PDP banner established. */
.co-recap-eta { color: var(--brc-pos-ink) !important; }
.co-recap-eta b { font-weight: 600; }
.co-steplocked { margin: 14px 0 0 46px; font-size: 13.5px; color: var(--wa-ink40); }

.co-addr, .co-rates, .co-paybody { margin: 20px 0 0 46px; }
.co-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-row3 { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr; gap: 12px; }
/* Phone: the 46px indent + 3-up City/State/ZIP blew past 375 (~417 scrollWidth)
   and clipped State to "Te>". Collapse indent, stack rows, keep the card inside
   the shell (Scott mobile audit H4, 2026-09-21). */
@media (max-width: 640px) {
  .co-steps { padding: 22px 16px; box-sizing: border-box; max-width: 100%; }
  .co-card { max-width: 100%; box-sizing: border-box; }
  .co-addr, .co-rates, .co-paybody,
  .co-recap, .co-steplocked { margin-left: 0; }
  .co-row2, .co-row3 { grid-template-columns: 1fr; }
  .co-recap, .co-recap--two { grid-template-columns: 1fr; gap: 14px; }
  .co-grid { padding-left: 16px; padding-right: 16px; }
  .co-cart-pending { padding-left: 16px; padding-right: 16px; }
  .co-head { padding-left: 16px; padding-right: 16px; }
  .co-bar { padding-left: 16px; padding-right: 16px; gap: 8px; }
  .co-secure { padding: 6px 10px; font-size: 11.5px; }
}
.co-addr .co-field-lbl em { font-style: normal; color: var(--wa-ink40); font-weight: 400; }
.co-addr .co-signin, .co-rates .co-signin, .co-paybody .co-signin { max-width: 320px; margin-top: 16px; }

/* Free-shipping gap + bundle ladder, under the order summary. Sits as its own
   quiet card so it reads as an offer, not as part of the bill above it. */
.fsu {
  margin: 14px 0 0; padding: 16px 18px; background: #fff;
  border: 1px solid var(--wa-hair); border-radius: 16px;
}
.fsu-head { margin: 0 0 12px; font-size: 13px; color: var(--wa-ink60); }
.fsu-head b { color: var(--wa-ink); font-weight: 600; }
/* Section label, matching the cart drawer's "STACKS WELL WITH" caps so the two
   surfaces read as one system. */
.fsu-sec {
  margin: 18px 0 8px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--wa-ink60);
}
.fsu-sec:first-child { margin-top: 0; }
.fsu-list { list-style: none; margin: 0; padding: 0; }
.fsu-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.fsu-row + .fsu-row { border-top: 1px solid var(--wa-hair); }
/* Water add-on: the cart drawer's green "add-on special" card, brought to the
   checkout verbatim so the deal looks the same on both surfaces. */
.fsu-deal {
  display: flex; align-items: center; gap: 12px; margin: 12px 0 0;
  border: 1px solid var(--brc-pos-line); background: var(--brc-pos-bed);
  border-radius: 14px; padding: 11px 12px;
}
.fsu-deal-h { font-size: 13px; font-weight: 600; margin: 0; color: var(--brc-pos-ink); }
.fsu-deal-s { font-size: 12px; color: #4d6653; margin: 2px 0 0; }
.fsu-deal-s s { opacity: 0.6; }
.fsu-deal-save { color: var(--brc-pos-ink); font-weight: 700; }
.fsu-add--deal {
  margin-left: auto; background: var(--brc-pos); border-color: var(--brc-pos); color: #fff;
}
.fsu-add--deal:hover:not(:disabled) { background: var(--brc-pos); color: #fff; opacity: 0.85; }
.fsu-thumb { flex: none; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: #f6f4f1; }
.fsu-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fsu-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fsu-name { font-size: 13px; font-weight: 600; color: var(--wa-ink); line-height: 1.3; }
.fsu-price { font-size: 12px; color: var(--wa-ink60); }
.fsu-price s { color: var(--wa-ink40); }
.fsu-add {
  flex: none; background: none; border: 1px solid var(--wa-ink); color: var(--wa-ink);
  border-radius: 999px; padding: 7px 15px; font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.fsu-add:hover:not(:disabled) { background: var(--wa-ink); color: #fff; }
.fsu-add:disabled { opacity: 0.5; cursor: default; }

/* Free-shipping progress bar — the cart drawer's .dw-ship, adapted. Same
   olive-forest positive family, same fill-then-reward behaviour, so the two
   surfaces speak with one voice. */
/* THE GAP STATE IS THE LOUD ONE (Scott, 2026-08-06: "make the free shipping
   more prevalent in order to get customers to achieve free shipping").

   It used to be the quietest thing on the rail — 13px, ink60, a 6px hairline
   bar — sitting under a summary that had just charged $14.99. The one line on
   the screen that could still change that number read like a caption.

   Promoting THIS state and leaving `.is-earned` quiet is the rule the earned
   block already set out below: colour marks the thing with an action attached.
   The gap has an action. The confirmation does not. So the two states now sit
   at opposite ends of the emphasis scale on purpose, rather than both being
   mid-grey.

   No new claim was added to do it. The copy is still the gap and nothing else —
   see the honesty note in FreeShipUpsell.tsx, which is why this is louder
   TYPOGRAPHY rather than the words "save" or "deal". */
.fsu-ship {
  margin: 0 0 16px; padding: 14px 16px;
  background: var(--brc-pos-bed); border: 1px solid var(--brc-pos-line);
  border-radius: 14px;
}
.fsu-ship-h { font-size: 15px; font-weight: 600; color: var(--brc-pos-ink); margin: 0 0 10px; line-height: 1.45; }
.fsu-ship-h b { font-size: 16px; font-weight: 800; color: var(--brc-pos); }
/* Near-miss. Stronger tint and a heavier headline than the ordinary gap state,
   because this is the one moment where a single tap finishes it. Deliberately
   NOT a colour change — the band stays the same positive green so it still
   reads as progress rather than as a warning. */
.fsu-ship.is-close { background: var(--brc-pos-bed); border-color: var(--brc-pos); }
.fsu-ship.is-close .fsu-ship-h { font-size: 16.5px; }
.fsu-ship.is-close .fsu-ship-h b { font-size: 18px; }
/* The charge they are currently paying. Its own line, lighter than the headline
   — it is the REASON the threshold is worth crossing, not a second headline
   competing with it. */
.fsu-ship-now {
  display: block; margin-top: 3px;
  font-size: 12.5px; font-weight: 400; color: var(--brc-pos-ink); opacity: 0.78;
}
/* The bar's scale, right-aligned under the track so it reads as an axis label
   rather than as another claim. Mono, like every other figure on the site. */
.fsu-ship-scale {
  display: block; margin-top: 6px; text-align: right;
  font-family: var(--wa-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--brc-pos-ink); opacity: 0.65;
}
/* White bed, not --brc-pos-bed: the track now sits ON that tint, so the old bed
   colour made the unfilled portion invisible and the bar looked permanently
   full. Thicker too — 6px read as a hairline rule rather than as progress. */
.fsu-track { display: block; position: relative; height: 10px; border-radius: 100px; background: #fff; box-shadow: inset 0 0 0 1px var(--brc-pos-line); overflow: hidden; }
.fsu-fill { position: absolute; inset: 0 auto 0 0; border-radius: 100px; background: var(--brc-pos-fill); transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
/* Earned drops the now-full track — and, since 2026-08-06 (Scott), the card
   treatment with it.

   It used to wear the EXACT tint, border and radius of .fsu-deal directly below
   it, so two green cards stacked and the eye read them as one block. That is a
   waste of the only strong colour on this rail: one of them is an OFFER the
   customer can act on, the other is a receipt for something already won. Colour
   should mark the thing with an action attached.

   So the tick and the positive ink stay — they are what make it legible as good
   news at a glance — but the bed, border and padding go, leaving a quiet
   confirmation line above the one green card that still wants a decision. */
.fsu-ship.is-earned {
  background: none; border: 0;
  border-radius: 0; padding: 0; margin: 0 0 12px;
}
.fsu-ship.is-earned .fsu-ship-h {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; margin: 0; color: var(--brc-pos-ink);
}
.fsu-ship.is-earned .fsu-ship-h b { font-weight: 700; color: var(--brc-pos-ink); }
.fsu-ship.is-earned .fsu-track { display: none; }
.fsu-ship-tick { width: 17px; height: 17px; flex: none; }
.fsu-ship-tick circle { fill: var(--brc-pos); }
.fsu-ship-tick path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .fsu-fill { transition: none; } }

/* Quantity-ladder card — promoted to a prominent, tinted card with a filled
   CTA. It is the highest-intent add (a product the customer already chose), so
   it carries visual weight instead of being the quiet last row. */
/* The product page's BUNDLE & SAVE tiers, in miniature. Same colours, same
   badge pills, same terracotta discount — .bt-* at roughly two-thirds scale so
   it fits the 400px checkout rail. A customer who used the control on the
   product page should recognise this one instantly rather than having to read a
   differently-shaped pitch for an offer they already understood. */
.fsu-tiers {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin: 14px 0 2px;
}
.fsu-tier {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 2px;
  border: 1px solid var(--wa-hair); background: #fff; border-radius: 9px;
  padding: 10px 3px 7px; font: inherit; color: var(--wa-bark);
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.fsu-tier:hover:not(:disabled) { border-color: var(--wa-sage); }
/* The tier they are already on: marked, and inert — see the disabled prop. */
.fsu-tier.on { background: var(--wa-mint); border-color: var(--wa-sage); cursor: default; }
.fsu-tier:disabled:not(.on) { opacity: 0.55; cursor: default; }
.fsu-tfloat {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  font-size: 8px; font-weight: 700; letter-spacing: 0.03em; color: #fff;
  border-radius: 9999px; padding: 2.5px 7px; white-space: nowrap;
}
.fsu-t-teal { background: var(--wa-sage); }
.fsu-t-orange { background: var(--wa-terracotta); }
.fsu-timgs { display: flex; align-items: center; height: 22px; }
.fsu-timg {
  display: inline-flex; width: 22px; height: 22px;
  border-radius: 4px; overflow: hidden; background: #fff;
}
.fsu-timg img { object-fit: contain; mix-blend-mode: multiply; }
.fsu-tl { font-size: 10.5px; font-weight: 600; line-height: 1.2; }
/* Reserves its line even on the 1-VIAL tile (which renders a space), so the
   three tiles share a baseline instead of one sitting taller than the others. */
.fsu-toff {
  font-size: 9px; font-weight: 700; line-height: 1.2;
  color: var(--wa-terracotta); min-height: 11px;
}

.fsu-bundles { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; }
/* A block, not a row, since 2026-08-06: the thumbnail + copy + "Make it 2"
   button became the three-tier control, which needs the full width. Extra top
   padding so the tiers' floating badges have somewhere to sit. */
.fsu-bundle {
  border: 1px solid var(--wa-hair-dk); background: #f7f4ef;
  border-radius: 14px; padding: 12px 12px 11px;
}
.fsu-bundle-h { font-size: 13px; font-weight: 600; margin: 0; color: var(--wa-ink); line-height: 1.3; }
/* .fsu-bundle-s, .fsu-bundle-more and .fsu-add--bundle were deleted here
   (2026-08-06). They styled the sub-line, the "Or make it 3" underline and the
   filled "Make it 2" button — all three replaced by the .fsu-tier control, and
   dead CSS that still looks plausible is how a later reader gets misled about
   what this card renders. */

/* Billing-same-as-shipping toggle, and the billing block it reveals. The block
   is indented under a left rule so its fields read as belonging to the checkbox
   above them, not as a second address the parcel might go to. */
.co-billsame {
  display: flex; align-items: center; gap: 9px; margin: 4px 0 0;
  font-size: 13.5px; color: var(--wa-bark); cursor: pointer;
}
.co-billsame input { accent-color: #131315; width: 16px; height: 16px; flex: none; }
.co-billing {
  margin-top: 12px; padding: 2px 0 2px 14px;
  border-left: 2px solid var(--wa-hair);
  display: flex; flex-direction: column; gap: 12px;
}

/* "Why it's free", worn by the free rate itself. A sticker, not a banner —
   pinned over the card's top edge with a slight tilt so it reads as applied to
   this one row. Same positive family as the PDP banner and the drawer. */
.co-rate-sticker {
  position: absolute; top: -9px; right: 16px; transform: rotate(-2deg);
  padding: 3px 10px; border-radius: 999px;
  background: var(--brc-pos-bed); border: 1px solid var(--brc-pos-line);
  color: var(--brc-pos-ink); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: 0 2px 6px -3px rgba(0, 0, 0, 0.25);
  pointer-events: none; /* decoration — clicks belong to the radio beneath */
}

/* Delivery choices. Selected state is driven by Woo's own `selected` flag. */
.co-rate {
  position: relative; /* anchors the free-rate sticker */
  display: flex; align-items: center; gap: 14px; padding: 16px;
  border: 1px solid var(--wa-hair); border-radius: 14px; cursor: pointer;
  margin-bottom: 10px; background: #fff; transition: border-color 0.15s;
}
.co-rate.is-on { border-color: #131315; }
.co-rate input { accent-color: #131315; width: 18px; height: 18px; }
.co-rate-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.co-rate-name { font-size: 14.5px; font-weight: 600; }
/* The estimate wears the PDP banner's ink so "when it arrives" looks the same
   on the product page and at the rate that delivers it. */
.co-rate-when { font-size: 12.5px; color: var(--brc-pos-ink); }
.co-rate-when b { font-weight: 600; }
.co-rate-price { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* The framed gateway card form (components/PayFrame.tsx). The frame reports its
   own height, and may now scroll itself when that report falls short, so this
   only has to give it a clean edge and the same white ground the rest of step 3
   sits on. Everything inside is styled on the WordPress side by
   brc-pay-onbrand.php.

   THE ONLY STEP BODY THAT BREAKS THE INDENT (2026-09-11). Every other one — the
   address form, the delivery rates — sits 46px in, aligned under its step
   heading, because they are OUR fields and that alignment is the rhythm of the
   card. This one is the gateway's whole payment surface, and it is neither our
   layout nor a column of fields: it centres its own content and lays out a good
   deal wider than a form field wants to be, so the 46px is not rhythm, it is
   46px taken off a panel that was already too narrow for what it has to show —
   an order summary, a wallet, and a verification step, one under the other.
   Pulled back to the card's padding edge, where the frame's own white ground
   meets the card's and the seam does not read as a hanging block. */
.co-payframe-wrap { margin-top: 14px; margin-left: -46px; }
.co-payframe-wrap iframe { display: block; width: 100%; border: 0; border-radius: 10px; }

.co-ssl {
  display: flex; align-items: center; gap: 7px; margin: 0 0 14px;
  font-size: 13px; font-weight: 500; color: #15803d;
}

/* An inline "use the other route" link, not a button that looks like the CTA. */
.co-linkbtn-inline {
  background: none; border: 0; padding: 0; font: inherit; color: var(--wa-ink60);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

/* ── Order confirmed ─────────────────────────────────────────────────────────
   The receipt. Borrows the checkout's shell (.co-shell/.co-bar/.co-card and the
   whole .co-sum-* family) on purpose — these two screens are consecutive, and
   the customer should not feel handed to a different site between them. Only
   what the receipt genuinely adds is defined here. */
/* A bigger wordmark than checkout's (Scott, 2026-08-06). Scoped to .oc-shell on
   purpose: checkout's 62px is a deliberate size for a page where the customer is
   mid-payment and the mark should reassure without competing with the card form.
   Here the transaction is done and the mark is the page's only branding, so it
   can carry the top of the screen. */
.oc-shell .co-mark img { height: 84px; }
@media (max-width: 640px) { .oc-shell .co-mark img { height: 56px; } }

/* The compliance gate's in-place recovery (see CheckoutSteps).
   Tinted rather than red: the customer has done nothing wrong, and this is the
   fix, not the failure. It sits between the card fields and the Pay button, so
   it is styled as a step forward rather than an error block. */
.co-gate-fix {
  display: flex; flex-direction: column; gap: 14px;
  margin: 14px 0 4px; padding: 16px 16px 18px;
  border: 1px solid var(--wa-hair-dk); background: #f7f4ef; border-radius: 14px;
}
.co-gate-fix-h { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--wa-ink); }
.co-gate-fix-h b { font-weight: 700; }
.co-gate-fix .co-field { margin: 0; }

/* The flag mark, top right of the content area. Shares .co-head's 1180px/24px
   measure so it lines up with the card edge below rather than floating. The
   negative bottom margin lets it sit level with the confirmation tick instead of
   pushing the headline down — it is a margin note, not a row of its own. */
.oc-flag {
  max-width: 1180px; margin: 20px auto -22px; padding: 0 24px;
  display: flex; align-items: center; justify-content: flex-end; gap: 9px;
  font-size: 13px; font-weight: 600; color: var(--wa-ink);
}
.oc-flag svg {
  width: 27px; height: 18px; flex: none;
  border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.07);
}
/* Below the two-column break it would collide with the centred headline, so it
   stops trying to be a margin note and simply centres above it. */
@media (max-width: 860px) {
  .oc-flag { justify-content: center; margin: 16px auto 0; }
}

/* The pillars, as a quiet icon row at the foot of the receipt. Deliberately the
   smallest type on the page: these are reassurances a customer takes in at a
   glance, not something to read. Muted stroke icons rather than filled marks so
   the row reads as one texture instead of three badges competing. */
.oc-pillars {
  list-style: none; margin: 30px auto 4px; padding: 0 20px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
}
.oc-pillars li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; letter-spacing: 0.03em; color: var(--wa-ink60);
}
.oc-pillars svg { width: 14px; height: 14px; flex: none; opacity: 0.7; }

.oc-head { text-align: center; }
.oc-head h1 { margin: 10px 0 6px; }
.oc-tick { display: inline-flex; }
.oc-tick circle { fill: var(--brc-pos); }
.oc-tick path { stroke: #fff; }
.oc-wait { color: var(--wa-ink60); }
.oc-grid { align-items: start; }
.oc-card { padding: 22px 24px; }
.oc-h2 {
  font-size: 15px; font-weight: 600; color: var(--wa-ink);
  margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--wa-hair);
}
.oc-card > .oc-h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.oc-h3 { font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--wa-ink60); margin: 0 0 6px; }

/* Order / date / payment. Three facts a customer looks for first, so they sit
   above the fold of the card rather than under the line items. */
.oc-meta { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0 0 4px; }
.oc-meta div { display: flex; flex-direction: column; gap: 2px; }
.oc-meta dt { font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--wa-ink60); }
.oc-meta dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--wa-ink); }

.oc-addrs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* When billing matches shipping there is one block, so it takes the full width
   instead of sitting in a half-width column with dead space beside it. */
.oc-addrs--one { grid-template-columns: 1fr; }
/* The annotation that replaces the duplicate column. Quiet on purpose — it is
   an answer to a question the reader might have, not a fact competing with the
   address above it. */
.oc-addr-note {
  margin: 8px 0 0; font-size: 12px; color: var(--wa-ink40);
}
.oc-addr { display: flex; flex-direction: column; gap: 1px;
  font-style: normal; font-size: 13px; line-height: 1.5; color: var(--wa-ink); }
.oc-addr-dim { color: var(--wa-ink60); }
.oc-next { font-size: 13px; color: var(--wa-ink60);
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--wa-hair); }
.oc-actions { display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px; margin: 16px 0 0; }

@media (max-width: 860px) {
  .oc-card { padding: 18px 16px; }
  .oc-addrs { grid-template-columns: 1fr; }
  .oc-meta { gap: 10px 22px; }
}

/* ── Account area (STAGED) ────────────────────────────────────────────────────
   Layout follows the Amino Club account Scott uses as the reference — identity
   bar, tab row, eyebrow + display heading, hero card, points card, stat row,
   quick links, orders. The THEME is ours: cream and bark rather than their
   white-and-mint, our display serif for headings, terracotta for accents, and
   our own words throughout. Same bones, different skin, nothing borrowed that
   would read as their design.

   Membership / Subscriptions / Partner have no styles here because they have no
   tabs — BRC does not offer them. */
.ac-shell { max-width: 1180px; margin: 0 auto; padding: 26px 24px 80px; }
.ac-wait { color: var(--wa-ink60); padding: 60px 0; }
.ac-empty { text-align: center; padding-top: 60px; }
.ac-empty h1 { font-family: var(--wa-display); font-weight: 500; font-size: 34px; margin: 0 0 8px; }
.ac-empty p { color: var(--wa-ink60); margin: 0 0 18px; }

/* Identity bar */
.ac-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 0 18px; border-bottom: 1px solid var(--wa-hair);
}
.ac-who { display: inline-flex; align-items: center; gap: 11px; }
.ac-av {
  width: 38px; height: 38px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: var(--wa-bark);
}
.ac-who-txt { display: flex; flex-direction: column; line-height: 1.25; }
.ac-who-txt small { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wa-ink60); }
.ac-who-txt b { font-size: 15px; color: var(--wa-bark); }
.ac-bar-acts { display: inline-flex; align-items: center; gap: 16px; font-size: 13.5px; }
.ac-bar-acts a { color: var(--wa-bark); text-decoration: none; }
/* Sign out became a <button> when it stopped being a link to WordPress's logout
   (it now POSTs /api/auth/signout). The pill styling moved off `a:last-child`
   and onto the button so the control looks exactly as it did — a customer
   should not be able to tell that the mechanism underneath changed. */
.ac-signout {
  font: inherit; color: var(--wa-bark); background: none; cursor: pointer;
  border: 1px solid var(--wa-hair-dk); border-radius: 999px; padding: 7px 15px;
}
.ac-signout:hover:not(:disabled) { opacity: 0.72; }
.ac-signout:disabled { opacity: 0.5; cursor: default; }
.ac-bar-acts a:hover { opacity: 0.72; }

/* Tabs */
.ac-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 14px 0 0; }
.ac-tabs::-webkit-scrollbar { display: none; }
.ac-tab {
  flex: none; border: 1px solid transparent; background: none; border-radius: 999px;
  padding: 8px 16px; font: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--wa-ink60); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.ac-tab:hover { color: var(--wa-bark); }
.ac-tab.on { background: var(--wa-bark); color: var(--wa-cream); font-weight: 600; }

.ac-body { padding: 26px 0 0; }
.ac-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--wa-ink60); margin: 0 0 6px;
}
.ac-mt { margin-top: 34px; }
.ac-h1 {
  font-family: var(--wa-display); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(28px, 3.2vw, 40px); margin: 0 0 6px; color: var(--wa-bark);
}
.ac-lead { color: var(--wa-ink60); font-size: 14.5px; margin: 0 0 20px; max-width: 62ch; }
.ac-dim { color: var(--wa-ink60); }
.ac-pos { color: var(--brc-pos); font-weight: 700; }
.ac-neg { color: var(--wa-terracotta); font-weight: 600; }
.ac-ok { color: var(--brc-pos); font-weight: 600; }
.ac-linkish {
  display: inline-block; margin-top: 10px; padding: 0; background: none; border: 0;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--wa-bark);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ac-linkish:hover { opacity: 0.7; }

/* Hero — bark rather than the reference's black, so it reads as ours. */
.ac-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center;
  background: var(--wa-bark); color: var(--wa-cream);
  border-radius: 20px; padding: 30px 32px; margin: 22px 0 0;
}
.ac-hero-h { font-family: var(--wa-display); font-size: 30px; font-weight: 500; margin: 0; }
.ac-hero-s { margin: 6px 0 0; opacity: 0.72; font-size: 14px; max-width: 40ch; }
.ac-hero-cta {
  display: inline-block; margin-top: 16px; background: var(--wa-cream); color: var(--wa-bark);
  border-radius: 999px; padding: 10px 20px; font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.ac-hero-cta:hover { opacity: 0.88; }
.ac-hero-r { display: flex; flex-direction: column; gap: 14px; }
.ac-hero-r span { display: flex; flex-direction: column; gap: 2px; padding-left: 16px; border-left: 1px solid rgb(255 255 255 / 0.2); }
.ac-hero-r small { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.6; }
.ac-hero-r b { font-size: 14px; font-weight: 600; }

/* Points card */
.ac-points-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center;
  background: var(--brc-pos-bed); border: 1px solid var(--brc-pos-line);
  border-radius: 20px; padding: 24px 26px; margin: 16px 0 0;
}
.ac-points-n {
  font-family: var(--wa-display); font-size: 46px; font-weight: 500; line-height: 1;
  margin: 4px 0 6px; color: var(--brc-pos-ink);
}
.ac-points-side { border-left: 1px solid var(--brc-pos-line); padding-left: 22px; }
.ac-points-side p { margin: 0; font-size: 13.5px; line-height: 1.55; }

/* Stat tiles */
.ac-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 16px 0 0; }
.ac-stat {
  display: flex; flex-direction: column; gap: 3px;
  background: #fff; border: 1px solid var(--wa-hair); border-radius: 16px; padding: 18px 18px 16px;
}
.ac-stat small { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wa-ink60); }
.ac-stat b { font-family: var(--wa-display); font-size: 26px; font-weight: 500; color: var(--wa-bark); }
.ac-stat .ac-dim { font-size: 12px; }

/* Quick links */
.ac-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ac-quick-card {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  border: 1px solid var(--wa-hair-dk); border-radius: 16px; padding: 18px;
  font: inherit; cursor: pointer; text-decoration: none; color: var(--wa-bark);
  transition: transform 0.15s;
}
.ac-quick-card:hover { transform: translateY(-2px); }
.ac-quick-card b { font-size: 15px; }
.ac-quick-card small { color: var(--wa-ink60); font-size: 12.5px; }
.ac-quick-card span { margin-top: 10px; font-size: 12.5px; font-weight: 600; }
/* Three tints from our own palette rather than the reference's pastels. */
.ac-q1 { background: #f4efe7; }
.ac-q2 { background: var(--brc-pos-bed); }
.ac-q3 { background: #f7f0ec; }

/* Cards, rows, orders */
.ac-card { background: #fff; border: 1px solid var(--wa-hair); border-radius: 18px; padding: 4px 22px; }
.ac-none { text-align: center; padding: 34px 22px; }
.ac-none p { color: var(--wa-ink60); margin: 0 0 14px; }
.ac-sec { padding: 20px 0; border-bottom: 1px solid var(--wa-hair); }
.ac-sec:last-child { border-bottom: 0; }
.ac-sec p { margin: 0 0 6px; font-size: 14px; }
.ac-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--wa-hair); }
.ac-row:last-child { border-bottom: 0; }
.ac-row span { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.ac-row small { font-size: 12px; }

.ac-orders { display: flex; flex-direction: column; gap: 14px; }

/* Order card — three bands: header, goods, actions.
   The tracking slab that used to sit between items and a loose receipt link is
   gone (Scott, 2026-08-06): it shouted louder than the order itself. Tracking
   now lives in the action footer where a customer looks for things to click,
   untinted, because a tracking number is information rather than an alert. */
.ac-order {
  background: #fff; border: 1px solid var(--wa-hair); border-radius: 18px;
  overflow: hidden;
}
.ac-order-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 16px 20px 14px;
}
.ac-order-id { display: flex; flex-direction: column; gap: 2px; }
.ac-order-id b { font-size: 15px; letter-spacing: 0.01em; }
.ac-order-id small { font-size: 12.5px; }
.ac-order-right { display: inline-flex; align-items: center; gap: 12px; }
.ac-order-total { font-family: var(--wa-display); font-size: 19px; font-weight: 500; }

.ac-order-items {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--wa-hair);
}
.ac-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px; border-bottom: 1px solid var(--wa-hair);
}
.ac-item:last-child { border-bottom: 0; }
.ac-item-img {
  position: relative; width: 42px; height: 42px; flex: none;
  border-radius: 9px; overflow: hidden; background: #f6f4f1;
}
.ac-item-img img { object-fit: contain; mix-blend-mode: multiply; }
.ac-item-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.ac-item-name { font-size: 13.5px; font-weight: 600; color: var(--wa-bark); line-height: 1.3; }
.ac-item-txt small { font-size: 11.5px; }
.ac-item-price { font-size: 13.5px; font-weight: 600; white-space: nowrap; }

/* Actions. Tracking left, receipt right — the two things there are to do. */
.ac-order-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 18px; flex-wrap: wrap;
  padding: 12px 20px; background: #faf8f5; border-top: 1px solid var(--wa-hair);
}
.ac-track { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; }
.ac-track-n {
  font-family: var(--wa-mono, monospace); font-size: 12.5px;
  font-weight: 600; color: var(--wa-bark); letter-spacing: 0.01em;
}
.ac-track a, .ac-receipt {
  font-size: 12.5px; font-weight: 600; color: var(--wa-bark);
  text-decoration: underline; text-underline-offset: 3px;
}
.ac-track a:hover, .ac-receipt:hover { opacity: 0.65; }
.ac-track-none { font-size: 12.5px; }

.ac-addr { display: flex; flex-direction: column; gap: 1px; font-style: normal; font-size: 14px; line-height: 1.55; }
.ac-form { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.ac-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ac-row3 { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr; gap: 12px; }
.ac-form-acts { display: flex; align-items: center; gap: 16px; margin-top: 4px; }

@media (max-width: 860px) {
  .ac-shell { padding: 20px 16px 60px; }
  .ac-hero { grid-template-columns: 1fr; gap: 20px; padding: 24px 22px; }
  .ac-hero-r span { padding-left: 0; border-left: 0; border-top: 1px solid rgb(255 255 255 / 0.2); padding-top: 10px; }
  .ac-points-card { grid-template-columns: 1fr; }
  .ac-points-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--brc-pos-line); padding-top: 16px; }
  .ac-row2, .ac-row3 { grid-template-columns: 1fr; }
}
.ac-billing { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--wa-hair); }
.ac-billing .ac-eyebrow { margin-bottom: 4px; }
.ac-billing-same { font-size: 13px; margin-top: 10px; }
/* Tracking on an order card. Sits between the items and the receipt link — the
   thing a customer opens this page to find once a parcel is moving. */
.ac-track {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  margin: 12px 0 0; padding: 12px 14px;
  background: var(--brc-pos-bed); border: 1px solid var(--brc-pos-line); border-radius: 12px;
}
.ac-track .ac-eyebrow { margin: 0; }
.ac-track-n { font-family: var(--wa-mono, monospace); font-size: 13px; font-weight: 600; color: var(--wa-bark); }
.ac-track .ac-linkish { margin-top: 0; margin-left: auto; }
/* Header marks (account, cart).
   These were outlined pills and read as controls bolted onto the end of an airy
   letterspaced nav — Scott, 2026-08-06: "these don't look like they belong".
   No border, no fill: just the mark at the nav's own weight, so the row reads as
   one thing. The cart count is the only colour, because it is the only part
   carrying information. */
.hd-icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 34px; height: 34px; padding: 0;
  background: none; border: 0; border-radius: 999px;
  color: var(--wa-bark); cursor: pointer; text-decoration: none;
  transition: opacity 0.15s, background 0.15s;
}
.hd-icon:hover { opacity: 0.62; }
/* ---- Mobile primary drawer (MobileNav.tsx) -------------------------------
   Slides in under the sticky bar. Same destinations as desktop .nav; touch
   targets are 48px rows. Veil sits under the drawer, over page content. */
.mn-veil {
  position: fixed; inset: 0; z-index: 28;
  background: rgba(19, 19, 21, 0.32);
  animation: hs-fade 0.18s ease-out;
}
.mn-drawer {
  /* Sit under the sticky bar including its safe-area top padding. */
  position: fixed;
  top: calc(clamp(66px, 2.1vw + 58px, 80px) + env(safe-area-inset-top, 0px));
  left: 0; right: 0; z-index: 29;
  background: var(--wa-canvas);
  border-bottom: 1px solid var(--wa-hair);
  box-shadow: 0 24px 48px -30px rgba(42, 29, 24, 0.45);
  padding: 18px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  animation: hs-drop 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.mn-label {
  margin: 0 0 10px;
  font-family: var(--wa-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--wa-bronze-text);
}
.mn-list { list-style: none; margin: 0; padding: 0; }
.mn-link {
  display: flex; align-items: center;
  min-height: 48px; padding: 0 2px;
  font-family: var(--wa-mono); font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--wa-bark);
  border-bottom: 1px solid var(--wa-hair);
}
.mn-list li:last-child .mn-link { border-bottom: 0; }
.mn-link:hover { color: var(--wa-terracotta); }
@media (prefers-reduced-motion: reduce) {
  .mn-veil, .mn-drawer { animation: none; }
}
/* ---- Header catalog search (SearchButton.tsx) ----------------------------
   A sheet that drops out of the header rather than a modal in the middle of
   the page: the control that opened it stays visible, and the catalog behind
   it is never covered. The veil is deliberately faint - this is a filter, not
   a decision, and it should be cheap to back out of. */
.hs-veil {
  position: fixed; inset: 0; z-index: 28;
  background: rgba(19, 19, 21, 0.28);
  animation: hs-fade 0.18s ease-out;
}
.hs-panel {
  position: fixed; left: 0; right: 0; z-index: 29;
  /* Sits directly under the bar, whose height is the same interpolation + notch. */
  top: calc(clamp(66px, 2.1vw + 58px, 80px) + env(safe-area-inset-top, 0px));
  background: var(--wa-canvas);
  border-bottom: 1px solid var(--wa-hair);
  box-shadow: 0 24px 48px -30px rgba(42, 29, 24, 0.45);
  animation: hs-drop 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes hs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hs-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hs-veil, .hs-panel { animation: none; }
}
.hs-in { padding-top: 16px; padding-bottom: 18px; }
.hs-field {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--wa-hair-dk); padding-bottom: 10px;
  color: var(--wa-ink40);
}
.hs-field input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 6px 0;
  font-family: var(--wa-sans); font-size: 16px; /* 16px: anything smaller zooms iOS on focus */
  color: var(--wa-bark);
}
.hs-field input:focus { outline: none; }
.hs-field input::placeholder { color: var(--wa-ink40); }
.hs-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hs-close {
  flex: none; background: none; border: 0; cursor: pointer;
  font-family: var(--wa-mono); font-size: 9.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--wa-ink60); padding: 6px 2px;
}
.hs-close:hover { color: var(--wa-terracotta); }
.hs-results { margin-top: 6px; max-height: min(58vh, 420px); overflow-y: auto; }
.hs-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 6px; border-radius: 8px;
  color: var(--wa-bark); text-decoration: none;
}
.hs-row:hover { background: var(--wa-mint); }
.hs-row img, .hs-thumb {
  flex: none; width: 38px; height: 38px; border-radius: 6px;
  object-fit: cover; background: var(--wa-mint);
}
.hs-name { flex: 1; min-width: 0; font-size: 14px; }
.hs-price {
  flex: none; font-family: var(--wa-mono); font-size: 11px;
  color: var(--wa-ink60); white-space: nowrap;
}
.hs-note { padding: 12px 6px; font-size: 13.5px; color: var(--wa-ink60); }
.hs-note a { color: var(--wa-terracotta); text-decoration: underline; }

.hd-count {
  position: absolute; top: 0; right: -1px; min-width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px; border-radius: 999px;
  background: var(--wa-terracotta); color: var(--wa-cream);
  font-family: var(--wa-mono); font-size: 9.5px; font-weight: 700; line-height: 1;
}
/* Standing, in the hero. Recognition only — no benefit is implied or styled as
   one, so there is no badge, no gold, nothing that reads as "unlocked". */
.ac-hero-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase;
  opacity: 0.55; margin: 0 0 4px;
}
.ac-hero-track {
  display: block; height: 4px; width: min(280px, 100%); margin: 12px 0 0;
  border-radius: 100px; background: rgb(255 255 255 / 0.16); overflow: hidden;
}
.ac-hero-fill {
  display: block; height: 100%; border-radius: 100px;
  background: var(--wa-cream); transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) { .ac-hero-fill { transition: none; } }
/* The standing ladder. A rail with four rungs — reached ones filled, the
   current one marked. Shown in full rather than only the next step: a ladder
   you cannot see the top of is not motivating, it is just a locked door. */
.ac-ladder { list-style: none; margin: 0; padding: 0; position: relative; }
.ac-ladder::before {
  content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px;
  width: 1px; background: var(--wa-hair-dk);
}
.ac-rung { position: relative; display: flex; gap: 16px; padding: 0 0 18px 0; }
.ac-rung:last-child { padding-bottom: 0; }
.ac-rung-mark {
  position: relative; z-index: 1; flex: none; width: 13px; height: 13px; margin-top: 4px;
  border-radius: 999px; background: var(--wa-cream);
  box-shadow: inset 0 0 0 1.5px var(--wa-hair-dk);
}
.ac-rung.reached .ac-rung-mark { background: var(--brc-pos); box-shadow: inset 0 0 0 1.5px var(--brc-pos); }
.ac-rung.now .ac-rung-mark { background: var(--wa-bark); box-shadow: 0 0 0 3px rgb(19 19 21 / 0.10), inset 0 0 0 1.5px var(--wa-bark); }
.ac-rung-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ac-rung-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.ac-rung-top b { font-size: 14.5px; color: var(--wa-bark); }
.ac-rung-top small { font-size: 12px; }
.ac-rung-you {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--wa-bark); color: var(--wa-cream); border-radius: 999px; padding: 3px 8px;
}
/* Unreached rungs stay legible — greying them out would read as "locked", and
   these are things a customer grows into, not things withheld from them. */
.ac-rung-perk { font-size: 13px; line-height: 1.55; color: var(--wa-ink60); max-width: 62ch; }
.ac-ladder-note { font-size: 12.5px; margin: 14px 0 0; }

/* ---- one-page checkout (2026-09-13) ------------------------------------ */
.co-progress {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: #8a8378;
}
.co-progress li { display: flex; align-items: center; gap: 8px; }
.co-progress li + li::before { content: ""; width: 34px; height: 1px; background: #d9d2c5; margin-right: 6px; }
.co-progress-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid #c8bfae; font-size: 11px; color: #6b655a;
}
.co-progress li.is-current .co-progress-n { border-color: #9e603c; color: #9e603c; font-weight: 600; }
.co-progress li.is-current .co-progress-l { color: #2f2a24; }
.co-progress li.is-done .co-progress-n { background: #9e603c; border-color: #9e603c; color: #fff; }
.co-onepage .co-step { margin-bottom: 18px; }
.co-onepage .co-stephead .co-edit { margin-left: auto; }
.co-agree { align-items: flex-start; padding: 12px 14px; border: 1px solid #e3ddd1; border-radius: 10px; background: #fffdf9; margin: 8px 0; }
.co-agree input { margin-top: 3px; }
.co-agree span { line-height: 1.45; }
@media (max-width: 640px) {
  .co-progress { gap: 6px; font-size: 11px; }
  .co-progress li + li::before { width: 16px; }
  .co-onepage .co-stephead { flex-wrap: wrap; }
  .co-onepage .co-stephead .co-edit { margin-left: 0; flex-basis: 100%; }
}

/* Free shipping value in cart drawer + checkout summary (2026-09-30) */
.brc-free { color: #15803d; font-weight: 700; letter-spacing: .02em; }

/* Restock alerts (2026-10-09, inc/restock.php): sold-out product pages only.
   Quiet but fully legible: --wa-bark / --wa-ink60 text (AA on white), the
   .co-field input look, the black .wa-btn pill. 16px input stops iOS zoom. */
.rs { margin: 14px 0 0; padding: 14px 16px 16px; border: 1px solid var(--wa-hair); border-radius: 12px; background: var(--wa-mint); }
.rs[hidden] { display: none; }
.rs-line { margin: 0 0 10px; font-family: var(--wa-sans); font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--wa-bark); }
.rs-lbl { display: block; margin: 0 0 6px; font-family: var(--wa-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--wa-bronze-text); }
.rs-row { display: flex; gap: 8px; }
.rs-input {
  flex: 1; min-width: 0; height: 42px; padding: 0 14px; border: 1px solid var(--wa-hair-dk); border-radius: 9999px;
  background: #fff; font-family: var(--wa-sans); font-size: 16px; color: var(--wa-bark);
}
.rs-input::placeholder { color: var(--wa-ink40); }
.rs-input:focus { outline: none; border-color: var(--wa-bark); box-shadow: 0 0 0 3px rgba(19, 19, 21, 0.08); }
.rs-input[aria-invalid="true"] { border-color: #a8422e; }
.rs-btn {
  flex: none; height: 42px; padding: 0 18px; border: none; border-radius: 9999px; background: var(--wa-bark-deep); color: #fff;
  font-family: var(--wa-sans); font-size: 13px; font-weight: 500; cursor: pointer; transition: opacity 0.18s;
}
.rs-btn:hover { opacity: 0.86; }
.rs-btn:focus-visible { outline: 2px solid var(--wa-bark); outline-offset: 2px; }
.rs-btn[disabled] { opacity: 0.6; cursor: default; }
.rs-msg { margin: 8px 0 0; font-family: var(--wa-sans); font-size: 13px; line-height: 1.45; color: var(--wa-sage-text); }
.rs-msg.is-err { color: #a8422e; }
.rs-form.is-done .rs-row, .rs-form.is-done .rs-lbl { display: none; }
.rs-form.is-done .rs-msg { margin-top: 0; color: var(--wa-bark); }
.rs-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 380px) {
  .rs-row { flex-direction: column; }
  .rs-btn { width: 100%; }
}

/* ── ONE-STEP RESEARCHER GATE (inc/gate-v2.php, 2026-10-14) ─────────────────
   Desktop: dark brand panel left, form right. Phone: logo, panel card, form.
   Approved mockup: "BRC Age Gate Redesign" canvas. */
.brc-g2 { background: #F4EEE6; }
.g2 {
  min-height: calc(100dvh - 31px); box-sizing: border-box; padding: 28px;
  display: grid; gap: 0 28px;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr auto;
  grid-template-areas: "panel ." "panel logo" "panel main" "panel ." "foot foot";
  color: #1B1513; font-family: var(--wa-sans);
}
.g2-logo { grid-area: logo; justify-self: center; width: 100%; max-width: 460px; text-align: center; margin: 0 0 28px; }
.g2-logo img { width: 280px; max-width: 70%; height: auto; }
.g2-main { grid-area: main; justify-self: center; width: 100%; max-width: 460px; }
.g2-panel {
  grid-area: panel; box-sizing: border-box; background: #2A1C18; color: #F4EEE6;
  border-radius: 28px; padding: 48px;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
}
.g2-chip {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #E7C9BC;
  border: 1px solid #5A4038; border-radius: 999px; padding: 7px 14px;
}
.g2-dot { width: 6px; height: 6px; border-radius: 50%; background: #E39A80; }
.g2-display {
  margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 52px;
  line-height: 1.02; font-weight: 500; letter-spacing: -0.01em;
}
.g2-display em, .g2-tag em { font-style: italic; color: #E39A80; }
.g2-tag { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; line-height: 1.2; }
.g2-fine { margin: 0; max-width: 400px; font-size: 12px; line-height: 1.6; color: #A8978C; }

.g2-h {
  margin: 0 0 8px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 50px;
  line-height: 1.02; font-weight: 500; letter-spacing: -0.015em; color: #1B1513;
}
.g2-sub { margin: 0 0 24px; font-size: 15px; line-height: 1.55; color: #5E534D; }
.g2-sub b { color: #1B1513; font-weight: 600; }
.g2-note, .g2-err { margin: 0 0 16px; font-size: 14px; line-height: 1.5; }
.g2-note { color: #5E534D; }
.g2-err { color: #9e3b2c; }
.g2-form { display: flex; flex-direction: column; gap: 14px; }
.g2-field, .g2-otp { display: flex; flex-direction: column; gap: 8px; }
.g2-lbl { font-size: 14px; font-weight: 600; }
.g2-input {
  height: 52px; box-sizing: border-box; border: 1.5px solid #D8CDC4; border-radius: 14px;
  background: #fff; padding: 0 16px; font: inherit; font-size: 16px; color: #1B1513; width: 100%;
}
.g2-input::placeholder { color: #8A7E76; }
.g2-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%231B1513' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.g2-check {
  display: flex; gap: 14px; align-items: flex-start; background: #fff;
  border: 1.5px solid #E2D8CF; border-radius: 14px; padding: 16px; cursor: pointer;
  font-size: 15px; line-height: 1.5;
}
.g2-check:hover { border-color: #CDBFB4; }
.g2-check a { color: #1B1513; text-decoration: underline; text-underline-offset: 2px; }
.g2-check a:hover { color: #7E4536; }
.g2-check input {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; flex: none; margin: 1px 0 0;
  border: 1.5px solid #B9ADA4; border-radius: 7px; background: #fff; display: grid; place-content: center; cursor: pointer;
}
.g2-check input:checked { background: #7E4536; border-color: #7E4536; }
.g2-check input:checked::after {
  content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
.g2-cta {
  height: 54px; border: 0; border-radius: 14px; background: #1B1513; color: #F4EEE6;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer; margin-top: 6px;
}
.g2-cta:disabled { background: #CFC6BF; color: #6B605A; cursor: not-allowed; }
.g2-check input:focus-visible, .g2-input:focus-visible, .g2-cta:focus-visible, .g2-link:focus-visible {
  outline: 2px solid #7E4536; outline-offset: 2px;
}
.g2-icon {
  width: 56px; height: 56px; border-radius: 16px; background: #2A1C18; color: #F4EEE6;
  display: flex; align-items: center; justify-content: center; margin: 0 0 18px;
}

/* The code: one real input (paste and SMS autofill work), drawn as six boxes
   once JS has run. Without JS it is a plain wide input. */
.g2-otp-box { position: relative; display: block; }
.g2-otp-input {
  width: 100%; height: 58px; box-sizing: border-box; border: 1.5px solid #D8CDC4; border-radius: 14px;
  background: #fff; text-align: center; letter-spacing: 0.4em;
  font-family: 'Times New Roman', Times, serif; font-size: 28px; color: #1B1513;
}
.g2-otp-cells { display: none; }
.g2-otp.is-boxed .g2-otp-input {
  position: absolute; inset: 0; opacity: 0; z-index: 2; cursor: text;
  caret-color: transparent; color: transparent;
}
.g2-otp.is-boxed .g2-otp-cells {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
}
.g2-otp-cells i {
  height: 58px; box-sizing: border-box; border: 1.5px solid #D8CDC4; border-radius: 14px; background: #fff;
  display: flex; align-items: center; justify-content: center; font-style: normal;
  font-family: 'Times New Roman', Times, serif; font-size: 28px; color: #1B1513;
}
.g2-otp-cells i.is-on { border-color: #7E4536; }

.g2-after { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 14px; color: #5E534D; }
.g2-inline { margin: 0; }
.g2-link {
  background: none; border: 0; padding: 0; font: inherit; color: #1B1513; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}
.g2-link:hover { color: #7E4536; }

@media (max-width: 900px) {
  .g2 {
    padding: 22px 14px 28px; gap: 0;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto;
    grid-template-areas: "logo" "panel" "main" "foot";
  }
  .g2-logo { margin: 0 0 14px; }
  .g2-logo img { width: 210px; }
  .g2-panel { border-radius: 20px; padding: 20px 18px; gap: 12px; }
  .g2-chip { font-size: 11px; padding: 6px 12px; }
  .g2-display { display: none; }
  .g2-tag { font-size: 24px; line-height: 1.15; }
  .g2-fine { font-size: 11px; line-height: 1.55; }
  .g2-main { padding: 22px 8px 0; max-width: 520px; }
  .g2-h { font-size: 38px; }
  .g2-sub { font-size: 14px; margin-bottom: 18px; }
  .g2-check { gap: 12px; padding: 14px; font-size: 14px; }
}

/* -- One-step gate as a pop-up (brc_gate_modal). The backdrop is brand copy and
   a generic scene only: no product names, prices or links, so the catalogue
   still never reaches a signed-out visitor (Kashu Storefront Login Gate). */
.brc-g2m { overflow: hidden; }
.g2m-backdrop {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #F4EEE6;
  filter: blur(9px); transform: scale(1.04); pointer-events: none; user-select: none;
}
.g2m-bar { display: flex; align-items: center; justify-content: space-between; padding: 48px 56px 0; }
.g2m-bar img { width: 176px; height: auto; }
.g2m-nav { display: flex; gap: 36px; font-size: 14px; color: #1B1513; }
.g2m-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding: 72px 56px; }
.g2m-h { margin: 0 0 18px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 68px; line-height: 1.02; color: #1B1513; }
.g2m-h em { color: #9e603c; }
.g2m-sub { margin: 0; font-size: 18px; line-height: 1.6; color: #5E534D; max-width: 460px; }
.g2m-img { width: 70%; max-width: 420px; height: auto; justify-self: center; opacity: 0.85; }
.g2m-scrim { position: fixed; inset: 0; z-index: 1; background: rgba(27, 21, 19, 0.42); }
.g2m {
  position: fixed; inset: 31px 0 0; z-index: 2; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px 24px;
}
.g2m .g2 {
  min-height: 0; width: 100%; max-width: 980px; margin: auto 0;
  background: #F4EEE6; border-radius: 28px; padding: 16px; gap: 0 24px;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas: "panel logo" "panel main" "foot foot";
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.45);
  animation: g2m-in 0.28s ease-out both;
}
.g2m .g2-panel { padding: 40px 36px; border-radius: 20px; }
.g2m .g2-display { font-size: 44px; }
.g2m .g2-logo { margin: 24px 0 20px; align-self: end; }
.g2m .g2-logo img { width: 230px; }
.g2m .g2-main { padding: 0 16px 24px; align-self: start; }
.g2m .g2-h { font-size: 40px; }
@keyframes g2m-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .g2m .g2 { animation: none; } }
@media (max-width: 900px) {
  .g2m-bar { padding: 22px 18px 0; } .g2m-nav { display: none; }
  .g2m-hero { grid-template-columns: 1fr; padding: 36px 18px; } .g2m-h { font-size: 40px; }
  .g2m { padding: 12px 10px 16px; }
  .g2m .g2 {
    padding: 10px; border-radius: 22px; gap: 0;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto;
    grid-template-areas: "logo" "panel" "main" "foot";
  }
  .g2m .g2-logo { margin: 10px 0 12px; } .g2m .g2-logo img { width: 190px; }
  .g2m .g2-panel { padding: 18px 16px; border-radius: 16px; }
  .g2m .g2-main { padding: 20px 8px 8px; }
  .g2m .g2-h { font-size: 34px; }
}

/* The research-use banner (Kashu review) stays visible above the pop-up. */
.brc-g2m .brc-ruo-banner { position: relative; z-index: 3; }

/* Research-use small print as the gate's footer (Scott, 2026-10-14). */
.g2-foot { grid-area: foot; justify-self: center; margin: 18px 0 4px; max-width: 640px; text-align: center; color: #6B605A; font-size: 12px; line-height: 1.6; }
.g2m .g2-foot { margin: 14px 16px 6px; }

/* Dark panel, modern layout (Scott, 2026-10-14): text at the top, larger headline,
   tagline under a hairline rule, bigger research-use footer. */
.g2-panel { justify-content: flex-start; gap: 48px; }
.g2-display { font-size: 62px; line-height: 0.98; letter-spacing: -0.02em; }
.g2m .g2-display { font-size: 52px; }
.g2-tag { margin-top: -12px; padding-top: 18px; border-top: 1px solid #5A4038; font-size: 28px; }
.g2-foot { font-size: 14px; }
@media (max-width: 900px) {
  .g2-panel, .g2m .g2-panel { gap: 12px; }
  .g2-tag { margin-top: 0; padding-top: 0; border-top: 0; font-size: 24px; }
  .g2-foot { font-size: 13px; }
}

/* 2026-10-19: clickable photos + gate trust strip */
a.ha-img { pointer-events: auto; cursor: pointer; }
[data-brc-zoom] { cursor: zoom-in; }
[data-brc-bac-text] { cursor: pointer; }
.brc-zoom { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(19, 19, 21, 0.82); cursor: zoom-out; }
.brc-zoom img { max-width: min(92vw, 900px); max-height: 86vh; object-fit: contain; background: #fff; border-radius: 12px; }
.brc-zoom-x { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: #131315; font-size: 28px; line-height: 1; cursor: pointer; }
.g2-trust { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(19, 19, 21, 0.08); display: grid; gap: 6px; font-size: 13px; color: #4A403A; }
.g2-trust li { display: flex; align-items: center; gap: 8px; }
.g2-trust li::before { content: ""; flex: 0 0 6px; height: 6px; border-radius: 50%; background: #9e603c; }
.g2-links { margin: 10px 0 0; font-size: 13px; color: #6B605A; }
.g2-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 2026-10-20 (Scott): mobile hero vials at three depths ----------
   One near (large, sharp, in front, bigger/faster float), one medium, two far
   (small, softened, behind, slower and smaller float). Phone only; desktop
   collage unchanged. Haze uses filter opacity() so the fade-in animation's
   opacity is untouched. Selectors outrank motion.css's float variables. */
@media (max-width: 720px) {
  .hero-amino > .ha-img.ha-big {
    width: calc(var(--ha-band) * 0.80);
    left: max(14px, 3%);
    top: calc(var(--ha-band) * 0.16);
    rotate: -10deg;
    z-index: 3;
    --a: -16px; --r: 2deg; --d: 6s;
  }
  .hero-amino > .ha-img.ha-nad {
    width: calc(var(--ha-band) * 0.54);
    right: max(22px, 6%);
    left: auto;
    top: calc(var(--ha-band) * 0.10);
    rotate: 9deg;
    z-index: 2;
    --a: -10px; --r: -1.5deg; --d: 7.5s;
  }
  .hero-amino > .ha-img.ha-nad img { filter: blur(0.3px) opacity(0.94); }
  .hero-amino > .ha-img.ha-bpc {
    width: calc(var(--ha-band) * 0.36);
    left: 56%;
    top: calc(var(--ha-band) * 0.50);
    rotate: -6deg;
    z-index: 1;
    --a: -6px; --r: 1deg; --d: 9s;
  }
  .hero-amino > .ha-img.ha-bpc img { filter: blur(0.9px) opacity(0.8) saturate(0.85); }
  .hero-amino > .ha-img.ha-tb {
    width: calc(var(--ha-band) * 0.28);
    left: 41%;
    top: calc(var(--ha-band) * 0.09);
    rotate: 6deg;
    z-index: 1;
    --a: -4px; --r: -0.8deg; --d: 10s;
  }
  .hero-amino > .ha-img.ha-tb img { filter: blur(1.5px) opacity(0.65) saturate(0.75); }
}

/* 2026-10-20: per-size lab-report claims (data-brc-coa-only / -none) */
.buy-facts > [hidden], .buy-ruo[hidden] { display: none !important; }

/* 2026-10-20 hero: Shop (filled) + View lab reports (outline). */
.hero-amino .hero-cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hero-amino .hero-cta .mint-cta:first-child { background: var(--wa-bark); color: #fff; }
.hero-amino .hero-cta .mint-cta.mint-cta--ghost { background: transparent; color: var(--wa-bark); }
.hero-amino .hero-cta .mint-cta.mint-cta--ghost:hover { background: var(--wa-bark); color: #fff; }