/* ===== Amino House — Preview Stylesheet ===== */
:root {
  /* Base tokens aligned to polish.css overrides so no lavender/warm-grey can
     ever flash or leak — polish.css remains the canonical override layer. */
  --ink: #0e1626;
  --accent: #0b2545;
  --green: #15803d;
  --green-soft: #f0fdf4;
  --off: #f6f8fb;
  --muted: #5b6477;
  --border: #e4e7ee;
  --bg: #ffffff;
  --radius-card: 16px;
  --radius-pill: 100px;
  --max: 1160px;
  --shadow-sm: 0 1px 2px rgba(13,15,26,.04);
  --shadow-md: 0 8px 24px rgba(13,15,26,.06);
  --shadow-lg: 0 20px 60px rgba(13,15,26,.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* A5, REVISED — rubber-band overscroll past the footer showed WHITE, and the first fix was to
   paint the <html> canvas with the footer's ink. That worked for overscroll and introduced a worse
   problem: the canvas is what a browser paints for a new document BEFORE the body box is laid out,
   so every navigation flashed dark navy. On the account pages, where you move between four
   sub-pages, that is most of what you see. Reported from a real phone as "the screen goes black".
   The canvas is the page colour again, so a mid-navigation paint is indistinguishable from the
   page. The overscroll is handled by stopping the bounce instead of colouring what it reveals —
   and `overscroll-behavior` has to be on the ELEMENT THAT DEFINES THE VIEWPORT, which is <html>;
   on <body> it does nothing in Safari, which is why the bounce was still there to colour in. */
html { background: var(--bg); overscroll-behavior-y: none; }
body { background: var(--bg); color: var(--ink); overscroll-behavior-y: none; }
html, body { color: var(--ink); }
/* Responsive safety net — keep every screen overflow-free regardless of content.
   See "Responsive design" note in Updates Log / Claude Code handoff. */
html { -webkit-text-size-adjust: 100%; }
/* `clip` (not `hidden`) prevents horizontal scroll WITHOUT turning <body> into a
   scroll container — `overflow-x: hidden` breaks `position: sticky` on the header
   (it scrolls away instead of staying floating). clip has no such side-effect. */
body { overflow-x: clip; }
body, p, h1, h2, h3, h4, li, a, span, div, td, summary, label { overflow-wrap: break-word; }
img, svg, video, iframe, canvas { max-width: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 56px; }

/* ===== Announcement bar ===== */
.announce {
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  text-align: center;
  padding: 10px 24px;
  letter-spacing: 0.02em;
}

/* ===== Header ===== */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.hdr-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 48px;
  height: 88px;
}
.hdr .wrap { max-width: none; padding: 0 64px; }
.hdr-inner > .logo { justify-self: start; }
.hdr-inner > .nav { justify-self: center; }
.hdr-inner > .hdr-actions { justify-self: end; }

/* THREE COLUMNS MEANS THREE CHILDREN. `.hdr-inner` is a three-column grid at every width, and a
   fourth visible child does not overflow or shrink — it auto-places onto a second row, outside the
   bar's fixed height, floating over the page.

   Desktop's three are logo · nav · actions. `.hdr-lead` is the mobile left group (burger and the
   language switcher) and must not exist as a fourth item here, so it is hidden by default and
   turned on inside the ≤900px block in polish.css, where `.nav` is hidden in exchange. */
.hdr-lead { display: none; }
.logo { height: 56px; display: inline-flex; align-items: center; }
.logo img { height: 100%; width: auto; display: block; }
.nav { display: flex; gap: 36px; }
.nav a {
  font-size: 14px; font-weight: 500; color: var(--ink);
  position: relative;
}
.nav a:hover { color: var(--accent); }
.nav a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -26px;
  height: 2px; background: var(--ink);
}

/* Peptide Categories dropdown */
.hdr-cat { position: relative; display: flex; align-items: center; }
.hdr-cat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: var(--ink);
  font-family: inherit; cursor: pointer;
}
.hdr-cat-btn:hover, .hdr-cat-btn.on { color: var(--accent); }
.hdr-cat-btn svg { color: currentColor; }
.hdr-cat-menu {
  position: absolute; top: calc(100% + 22px); left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 10px; min-width: 240px; z-index: 60;
  box-shadow: 0 24px 64px rgba(13,15,26,.14);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.hdr-cat-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: var(--ink);
  font-family: inherit; text-align: left; cursor: pointer;
  transition: background .15s ease;
}
.hdr-cat-item:hover { background: var(--off); }
.hdr-cat-dot { width: 8px; height: 8px; border-radius: 100px; flex-shrink: 0; }
.hdr-actions { display: flex; gap: 8px; align-items: center; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.icon-btn:hover { background: var(--off); }
.icon-btn svg { width: 18px; height: 18px; stroke: var(--ink); }
.cart-count {
  position: absolute; transform: translate(12px, -10px);
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 600;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 100px; display: inline-flex; align-items: center; justify-content: center;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px;
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #000; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-light { background: #fff; color: var(--ink); border: 1px solid var(--border); }
.btn-light:hover { border-color: var(--ink); }
.btn-full { width: 100%; }
.btn-lg { height: 56px; padding: 0 32px; font-size: 15px; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 13px; }

/* ===== Typography ===== */
h1, h2, h3, h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
h1 { font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.03em; font-weight: 500; }
h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 500; }
h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 500; }
.eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.lede { font-size: 18px; color: var(--muted); max-width: 640px; line-height: 1.55; }

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: 72px 0 96px;
  background:
    radial-gradient(1200px 520px at 85% -10%, rgba(79,110,247,.10), transparent 60%),
    radial-gradient(800px 400px at 10% 100%, rgba(21,128,61,.06), transparent 60%);
  overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center;
}
.hero-copy .eyebrow { margin-bottom: 18px; display: inline-block; }
.hero h1 { margin-bottom: 22px; }
.hero .lede { margin-bottom: 32px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-trust {
  display: flex; gap: 24px; align-items: center; font-size: 13px; color: var(--muted);
}
.hero-trust .dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; display: inline-block; margin-right: 8px; }

.hero-visual {
  position: relative; aspect-ratio: 1/1; width: 100%;
}
.hero-glow {
  position: absolute; inset: -12% -10%;
  pointer-events: none;
  background:
    radial-gradient(44% 42% at 50% 45%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 68%),
    radial-gradient(58% 54% at 50% 55%, rgba(99,132,255,.11), rgba(99,132,255,0) 64%),
    radial-gradient(50% 46% at 78% 80%, rgba(214,178,150,.08), transparent 60%);
}

.hero-glow::after {
  content: ""; position: absolute; left: 16%; right: 16%; bottom: 9%; height: 7%;
  background: radial-gradient(ellipse at center, rgba(13,15,26,.16), transparent 70%);
  filter: blur(9px);
}
.hero-vials { position: absolute; inset: 0; z-index: 1; }
.hero-coa {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 5;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 9px 14px 9px 11px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 100px;
  box-shadow: 0 14px 34px rgba(13,15,26,.14);
  cursor: pointer;
  text-align: left;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}
.hero-coa:hover { transform: translateX(-50%) translateY(-3px); box-shadow: 0 20px 44px rgba(13,15,26,.2); }
.hero-coa:active { transform: translateX(-50%) translateY(-1px); }
.hero-coa-ic {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft, #eef3fa); color: var(--accent, #0b2545);
}
.hero-coa-ic svg { width: 18px; height: 18px; }
.hero-coa-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 132px; }
.hero-coa-lab { font-size: 10.5px; color: var(--muted); letter-spacing: .02em; animation: heroCoaFade .45s ease both; }
.hero-coa-val { font-size: 14px; font-weight: 600; color: var(--ink); animation: heroCoaFade .45s ease both; }
@keyframes heroCoaFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-coa-lab, .hero-coa-val { animation: none; }
}
.hero-coa-arrow {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; margin-left: 2px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff;
  transition: transform .2s ease;
}
.hero-coa-arrow svg { width: 14px; height: 14px; }
.hero-coa:hover .hero-coa-arrow { transform: translateX(2px); }
.hv {
  position: absolute; width: auto; bottom: 8%;
  will-change: transform;
  cursor: pointer;
  transition: filter .25s ease;
}
.hv:hover { filter: drop-shadow(0 12px 22px rgba(13,15,26,.22)); }
.hv:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px;
}
.hv-center {
  height: 60%; left: 50%; z-index: 3;
  transform: translateX(-50%) rotate(-2deg);
  animation: floatC 6.5s ease-in-out infinite;
}
.hv-left {
  height: 47%; left: 9%; bottom: 12%; z-index: 1;
  transform: rotate(-8deg);
  animation: floatL 7.4s ease-in-out infinite;
}
.hv-right {
  height: 49%; right: 8%; bottom: 11%; z-index: 2;
  transform: rotate(7deg);
  animation: floatR 8s ease-in-out infinite .4s;
}
@keyframes floatC { 0%,100% { transform: translate(-50%,0) rotate(-2deg); } 50% { transform: translate(-50%,-13px) rotate(-2deg); } }
@keyframes floatL { 0%,100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-10px) rotate(-8deg); } }
@keyframes floatR { 0%,100% { transform: translateY(0) rotate(7deg); } 50% { transform: translateY(-11px) rotate(7deg); } }
@media (prefers-reduced-motion: reduce) {
  .hv { animation: none !important; }
}
.hero-card {
  position: absolute;
  z-index: 4;
  background: rgba(255,255,255,.66);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 13px;
  padding: 9px 13px;
  box-shadow: 0 12px 32px rgba(13,15,26,.13);
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
}
.hero-card.c1 { left: 3%; bottom: 9%; top: auto; }
.hero-card.c2 { right: 3%; top: 7%; }
.hero-card .ic {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-soft); color: var(--green);
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.hero-card .lab { color: var(--muted); font-size: 10.5px; letter-spacing: .01em; line-height: 1.2; }
.hero-card .val { font-weight: 600; font-size: 13px; line-height: 1.25; white-space: nowrap; }

/* ===== Section base ===== */
section { padding: 96px 0; }
.section-off { background: var(--off); }
.sec-head { text-align: center; margin-bottom: 56px; }
.sec-head .eyebrow { margin-bottom: 14px; display: inline-block; }
.sec-head h2 { margin-bottom: 14px; }
.sec-head .lede { margin: 0 auto; }

/* ===== Pillars (3-up) ===== */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pillar {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #fff;
  transition: box-shadow .2s ease, transform .2s ease;
}
.pillar:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pillar-ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--green-soft); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; margin-bottom: 20px;
}
.pillar h3 { margin-bottom: 10px; font-size: 20px; }
.pillar p { color: var(--muted); font-size: 14px; }

/* ===== Product grid ===== */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.card {
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* The card is an <a> now (see product-card.php), so it must not inherit link styling — and the
   CTA inside it is a <span>, so its hover has to be driven from the card rather than from itself,
   or the button would sit inert while the card it lives in visibly lifts under the cursor. */
a.card { text-decoration: none; color: inherit; }
a.card:hover .btn-ink { background: #000; box-shadow: var(--shadow-md); }
a.card:hover .btn-ghost { background: var(--ink); color: #fff; }
/* Keyboard parity: the card takes focus as one element, so it gets the same visible treatment a
   focused control gets, rather than a default outline drawn tight around a 300px flex container. */
a.card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.card-img {
  aspect-ratio: 1/1;
  border-radius: var(--radius-card);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.card-img .vial {
  width: 30%; height: 60%;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(13,15,26,.08);
  border-radius: 6px 6px 20px 20px;
  position: relative;
}
.card-img .vial::before {
  content:""; position: absolute; top: -7px; left: 22%; right: 22%; height: 10px;
  background: rgba(13,15,26,.55); border-radius: 2px;
}
.card-img .vial::after {
  content:""; position: absolute; left: 15%; right: 15%; bottom: 10%; top: 30%;
  background: rgba(255,255,255,.6);
  border-radius: 4px;
}
.card-meta { padding: 16px 6px 6px; display: flex; flex-direction: column; flex: 1; }
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.card-name { font-weight: 500; font-size: 16px; line-height: 1.2; }
.card-price { text-align: right; font-weight: 500; font-size: 15px; line-height: 1.2; }
.card-price .from { display: block; font-size: 10px; font-weight: 400; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.card-type { color: var(--muted); font-size: 13px; margin-top: 4px; }
.gtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gtag {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 100px;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap; line-height: 1;
}
.card .btn { margin-top: auto; }

/* pastel backgrounds */
.bg-sky { background: #d7e3f7; }
.bg-blush { background: #f3d9dd; }
.bg-gray { background: #dcdce0; }
.bg-mauve { background: #dfd0dc; }
.bg-beige { background: #e8dfcf; }
.bg-sage { background: #d4e0d2; }
.bg-peach { background: #f1dccc; }
.bg-lilac { background: #d9d5eb; }

/* ===== Category tiles ===== */
.cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.cat {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
  background: #fff;
  aspect-ratio: 1/1.1;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: background .2s ease, border-color .2s ease;
}
.cat:hover { background: var(--off); border-color: var(--ink); }
.cat-num { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cat-name { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.cat-arrow { width: 32px; height: 32px; border-radius: 100px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; }

/* ===== Quality tabs ===== */
.quality { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.q-tabs { display: flex; flex-direction: column; gap: 4px; }
.q-tab {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px;
  border-radius: 14px;
  text-align: left;
  transition: background .15s ease;
  color: var(--muted);
  font-size: 16px; font-weight: 500;
  border: 1px solid transparent;
}
.q-tab .num { font-size: 12px; color: var(--muted); width: 20px; font-variant-numeric: tabular-nums; }
.q-tab.active { background: #fff; color: var(--ink); border-color: var(--border); box-shadow: var(--shadow-sm); }
.q-tab:hover:not(.active) { background: rgba(13,15,26,.03); color: var(--ink); }
.q-panel {
  padding: 40px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  min-height: 360px;
}
.q-panel .eyebrow { color: var(--green); margin-bottom: 14px; display: inline-block; }
.q-panel h3 { margin-bottom: 16px; font-size: 28px; }
.q-panel p { color: var(--muted); margin-bottom: 24px; line-height: 1.6; }
.q-stat { display: flex; gap: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.q-stat .k { font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.q-stat .v { font-size: 22px; font-weight: 500; }
.q-stat .v .unit { font-size: 14px; color: var(--muted); font-weight: 400; }

/* ===== Why grid (6) ===== */
.whyg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why {
  padding: 28px; border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: #fff;
}
.why .ic {
  width: 40px; height: 40px; border-radius: 10px;
  background: #eef2ff; color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  font-weight: 600;
}
.why h3 { font-size: 18px; margin-bottom: 8px; }
.why p { color: var(--muted); font-size: 14px; }

/* ===== Research cards ===== */
.research-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.r-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.r-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.r-thumb {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
}
.r-thumb .tag {
  position: absolute; top: 14px; left: 14px;
  background: rgba(255,255,255,.92);
  padding: 6px 12px; border-radius: 100px;
  font-size: 11px; font-weight: 500; color: var(--ink);
  letter-spacing: .05em; text-transform: uppercase;
}
.r-body { padding: 20px; }
.r-body h3 { font-size: 16px; font-weight: 500; margin-bottom: 8px; line-height: 1.3; }
.r-body p { font-size: 13px; color: var(--muted); line-height: 1.5; }
.r-meta { margin-top: 14px; font-size: 12px; color: var(--muted); display: flex; gap: 10px; }

/* ===== FAQ ===== */
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 500;
  font-size: 17px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq p { margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ===== CTA banner ===== */
.cta-banner {
  background: linear-gradient(135deg, #0d0f1a 0%, #1a1f3a 100%);
  color: #fff;
  border-radius: 24px;
  padding: 64px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content:""; position: absolute; right: -10%; top: -40%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(79,110,247,.3), transparent 60%);
}
.cta-banner h2 { color: #fff; margin-bottom: 16px; position: relative; }
.cta-banner p { color: rgba(255,255,255,.7); font-size: 16px; position: relative; }
.cta-banner .btns { display: flex; gap: 12px; position: relative; justify-content: flex-end; flex-wrap: wrap; }
.cta-banner .btn-ink { background: #fff; color: var(--ink); }
.cta-banner .btn-ink:hover { background: var(--accent); color: #fff; }
.cta-banner .btn-ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.cta-banner .btn-ghost:hover { background: #fff; color: var(--ink); }

/* ===== Newsletter ===== */
.news {
  background: var(--off);
  border-radius: 24px;
  padding: 72px 56px;
  text-align: center;
}
.news h2 { margin-bottom: 14px; }
.news p { color: var(--muted); margin-bottom: 28px; max-width: 520px; margin-left: auto; margin-right: auto; }
.news-form {
  display: flex; gap: 8px; max-width: 480px; margin: 0 auto;
  background: #fff; border: 1px solid var(--border); border-radius: 100px; padding: 6px;
}
.news-form input {
  flex: 1; border: 0; padding: 0 18px; background: none; font: inherit;
}
.news-form input:focus { outline: none; }

/* ===== Press strip ===== */
.press {
  display: flex; justify-content: space-around; align-items: center;
  padding: 40px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 40px;
  opacity: .72;
}
.press-item { font-weight: 500; font-size: 18px; letter-spacing: -0.01em; color: var(--muted); }
.press-item.serif { font-weight: 500; }

/* ===== Footer ===== */
footer.ft {
  background: var(--ink);
  color: rgba(255,255,255,.72);
  padding: 72px 0 32px;
}
.ft-top { display: grid; grid-template-columns: 1.6fr 3fr; gap: 40px; }
.ft-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.ft-brand .logo-inv {
  font-size: 22px; color: #fff; font-weight: 400; margin-bottom: 16px;
}
.ft-brand .logo-inv b { font-weight: 700; font-style: italic; }
.ft-brand .logo-inv-img { display: block; height: 72px; width: auto; margin-bottom: 20px; }
.ft-brand p { font-size: 13px; line-height: 1.6; margin-bottom: 20px; color: rgba(255,255,255,.55); max-width: 320px; }
.ft-socials { display: flex; gap: 10px; }
.ft-socials a {
  width: 36px; height: 36px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
}
.ft-socials a:hover { background: #fff; color: var(--ink); }
.ft-col h4 {
  font-size: 12px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .1em; color: #fff; margin-bottom: 18px;
}
.ft-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ft-col a { font-size: 13px; color: rgba(255,255,255,.72); }
.ft-col a:hover { color: #fff; }
.ft-col-body { overflow: hidden; }
.ft-bot {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
  font-size: 12px; color: rgba(255,255,255,.45);
}
/* The disclaimer wraps narrower before the marks beside it give up a pixel (polish.css sets the marks rigid). */
.ft-bot .disc { flex: 0 1 640px; max-width: 640px; line-height: 1.5; }

/* ===== Simple page layouts ===== */
.page-hd { padding: 72px 0 48px; text-align: center; }
.page-hd h1 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 14px; }
.page-hd p { color: var(--muted); max-width: 620px; margin: 0 auto; }

/* ===== Research filters ===== */
.filter-bar {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px;
}
.chip {
  padding: 10px 18px; border: 1px solid var(--border); border-radius: 100px;
  font-size: 13px; font-weight: 500; color: var(--muted);
  white-space: nowrap;
  transition: all .15s ease;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Divider before the Accessories group in the catalog filter bar */
.filter-div { width: 1px; height: 26px; background: var(--border); margin: 0 6px; align-self: center; flex: 0 0 auto; }
@media (max-width: 640px) { .filter-div { display: none; } }

/* ===== Partner / Earnings card ===== */
.partner-hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
  padding-top: 80px; padding-bottom: 80px;
}
@media (max-width: 640px) {
  .partner-hero { padding-top: 30px; padding-bottom: 32px; gap: 26px; }
  .partner-hero h1 { font-size: clamp(28px, 7.4vw, 34px); }
}
/* ===== Partner page — compact for mobile/tablet (≤900px) so it's quicker to scan =====
   Scoped to .partner-page so the shared .stat-row/.steps/.tiers/.faq/.cta-banner
   classes used elsewhere are untouched. */
@media (max-width: 900px) {
  .partner-page section { padding-top: 36px !important; padding-bottom: 36px !important; }
  .partner-page section:first-child { padding-top: 20px !important; }

  .partner-page .partner-hero { padding-top: 0; padding-bottom: 0; gap: 22px; }
  .partner-page .partner-hero h1 { font-size: clamp(25px, 6.6vw, 31px); margin-top: 10px !important; margin-bottom: 12px !important; }
  .partner-page .partner-hero .lede { font-size: 14.5px; margin-bottom: 18px !important; }
  .partner-page .partner-hero .btn-lg { height: 46px; padding: 0 20px; font-size: 14px; }

  /* Earnings card */
  .partner-page .earn-card { padding: 20px; border-radius: 16px; }
  .partner-page .earn-card .eb { margin-bottom: 16px; }
  .partner-page .earn-card .amt { font-size: 38px; }
  .partner-page .earn-card .sub { margin-bottom: 18px; }
  .partner-page .earn-bars { height: 56px; margin-bottom: 16px; }
  .partner-page .earn-foot { padding-top: 14px; gap: 12px; }
  .partner-page .earn-foot .v { font-size: 16px; }

  /* Stat row → 2-up, tighter */
  .partner-page .stat-row { grid-template-columns: 1fr 1fr; gap: 18px 16px; padding: 22px 0; }
  .partner-page .stat .k { margin-bottom: 5px; }
  .partner-page .stat .v { font-size: 26px; }

  /* Section heads */
  .partner-page .sec-head { margin-bottom: 24px; }
  .partner-page .sec-head h2 { font-size: 23px; line-height: 1.15; }

  /* How-it-works steps → 2-up */
  .partner-page .steps { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
  .partner-page .step { padding-top: 16px; }
  .partner-page .step .n { padding-top: 10px; margin-bottom: 9px; font-size: 11px; min-width: 0; }
  .partner-page .step h3 { font-size: 16px; margin-bottom: 5px; }
  .partner-page .step p { font-size: 13px; }

  /* Commission tiers → 1-up, smaller */
  .partner-page .tiers { gap: 12px; }
  .partner-page .tier { padding: 22px; }
  .partner-page .tier .pct { font-size: 44px; margin-bottom: 8px; }
  .partner-page .tier h3 { font-size: 18px; }
  .partner-page .tier p { font-size: 13px; margin-bottom: 16px; }
  .partner-page .tier ul { gap: 8px; }
  .partner-page .tier li { font-size: 13px; }

  /* FAQ */
  .partner-page .faq details { padding: 15px 0; }
  .partner-page .faq summary { font-size: 15px; }
  .partner-page .faq summary::after { font-size: 20px; }
  .partner-page .faq p { font-size: 13.5px; }

  /* CTA banner */
  .partner-page .cta-banner { padding: 24px !important; }
  .partner-page .cta-banner h2 { font-size: 24px; margin-bottom: 10px; }
  .partner-page .cta-banner p { font-size: 14px; }
  .partner-page .cta-banner .btn-lg { height: 46px; padding: 0 20px; font-size: 14px; }
}
.earn-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 32px;
  box-shadow: var(--shadow-lg);
}
.earn-card .eb { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.earn-card .eb .lab { font-size: 12px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.earn-card .eb .pill { padding: 6px 12px; background: var(--green-soft); color: var(--green); border-radius: 100px; font-size: 12px; font-weight: 500; }
.earn-card .amt { font-size: 56px; font-weight: 500; letter-spacing: -0.03em; margin-bottom: 4px; }
.earn-card .sub { color: var(--muted); font-size: 13px; margin-bottom: 28px; }
.earn-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 80px; margin-bottom: 24px; }
.earn-bars div { background: linear-gradient(to top, var(--accent), #8aa2ff); border-radius: 4px; }
.earn-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 20px; border-top: 1px solid var(--border); }
.earn-foot .k { font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.earn-foot .v { font-size: 18px; font-weight: 500; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 56px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat .k { font-size: 12px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.stat .v { font-size: 36px; font-weight: 500; letter-spacing: -0.02em; }
.stat .d { font-size: 13px; color: var(--muted); margin-top: 4px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { position: relative; padding-top: 32px; }
.step .n {
  font-size: 12px; color: var(--muted); letter-spacing: .1em;
  padding-top: 16px; border-top: 1px solid var(--ink);
  margin-bottom: 16px; display: inline-block; min-width: 60px;
}
.step h3 { font-size: 20px; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--muted); }

/* ===== Tiers ===== */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tier {
  padding: 40px; border: 1px solid var(--border); border-radius: var(--radius-card);
  background: #fff; position: relative;
}
.tier.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.tier .pct { font-size: 72px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; margin-bottom: 14px; }
.tier h3 { font-size: 22px; margin-bottom: 8px; }
.tier p { font-size: 14px; opacity: .7; margin-bottom: 24px; }
.tier ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tier li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.tier li::before {
  content: "✓"; display: inline-flex; width: 18px; height: 18px; border-radius: 100px;
  background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 600;
  justify-content: center; align-items: center; flex-shrink: 0; margin-top: 2px;
}
.tier.primary li::before { background: rgba(79,110,247,.2); color: #fff; }

/* ===== Contact ===== */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; }
.contact-info { display: flex; flex-direction: column; gap: 20px; }
.contact-block { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-card); }
.contact-block .k { font-size: 12px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.contact-block .v { font-size: 16px; font-weight: 500; }
.contact-block .d { font-size: 13px; color: var(--muted); margin-top: 4px; }
form.contact-form { display: flex; flex-direction: column; gap: 14px; }
form.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
form.contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
form.contact-form input,
form.contact-form textarea,
form.contact-form select {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; font: inherit; color: var(--ink); background: #fff;
  width: 100%; min-width: 0;
}
form.contact-form textarea { min-height: 140px; resize: vertical; }
form.contact-form input:focus,
form.contact-form textarea:focus,
form.contact-form select:focus { outline: none; border-color: var(--ink); }

@media (max-width: 640px) {
  /* Stack two-up form rows + stop long emails/inputs forcing overflow */
  form.contact-form .row { grid-template-columns: 1fr; }
  form.contact-form label, form.contact-form .row > * { min-width: 0; }
  .contact-grid { gap: 28px; }
  .contact-info, form.contact-form { min-width: 0; }
  .contact-block { padding: 18px; }
  .contact-block .v { overflow-wrap: anywhere; }
}

/* ===== Modal ===== */
.modal-bg {
  position: fixed; inset: 0; background: rgba(13,15,26,.55); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 24px;
}
.modal-bg.on { display: flex; }
.modal {
  background: #fff; border-radius: 20px; max-width: 720px; width: 100%;
  max-height: 86vh; overflow: auto;
}
.modal-thumb { aspect-ratio: 16/7; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 32px; }
.modal-body { padding: 32px 40px 40px; }
.modal-body .eyebrow { margin-bottom: 10px; }
.modal-body h2 { margin-bottom: 14px; font-size: 28px; }
.modal-body p { color: var(--muted); margin-bottom: 14px; line-height: 1.65; }
.modal-close { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,.9); border-radius: 100px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }

/* ===== Announcement marquee ===== */
.announce-marquee {
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  position: relative;
  padding: 11px 0;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.announce-marquee::before,
.announce-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none;
}
.announce-marquee::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.announce-marquee::after { right: 0; background: linear-gradient(-90deg, var(--ink), transparent); }
/*
 * THE SEPARATOR IS CENTRED IN ITS GAP (round 2, task 6). The track used to space its items with a
 * 48px gap while each item put its own dot 10px before its text, so every "·" sat 48px from the
 * text before it and 10px from the text after it. The whole gap is now the dot's own inline margin,
 * equal on both sides; the track and the item have no gap of their own, and the track's leading
 * padding is gone because the first dot carries its own space. Logical margins, so on /ar/ the
 * mirrored track keeps the same spacing without a second rule.
 */
.announce-track {
  display: inline-flex; gap: 0; white-space: nowrap;
  animation: announce-scroll 38s linear infinite;
  padding-inline-start: 0;
  will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.announce-item { display: inline-flex; align-items: center; gap: 0; }
.announce-dot { opacity: .5; font-size: 14px; line-height: 1; margin-inline: 24px; }
/* A1 — the track is THREE copies of the item list (header.php duplicates it 3x), so a seamless
   loop must travel exactly one copy: -100%/3. It travelled -50%, which lands one and a half copies
   along and snaps back half a copy every cycle — a visible jump, on every engine.
   translate3d promotes the track to its own compositor layer: without it iOS throttles the
   animation hard in Low Power Mode and repaints it on the main thread, which is the reported
   stutter. */
@keyframes announce-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-33.3333%, 0, 0); }
}

/* Accent within headings — same family, accent color (no serif italic) */
h1 em, h2 em, h3 em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: var(--em-tone, #5f7492);
  letter-spacing: -0.02em;
}

/* Stats band */
.stats-band {
  background: var(--ink);
  color: #fff;
  padding: 56px 0;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.stats-cell {
  padding: 8px 24px;
  border-left: 1px solid rgba(255,255,255,.12);
}
.stats-cell:first-child { border-left: 0; padding-left: 0; }
.stats-v {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: #fff;
  margin-bottom: 8px;
}
.stats-k {
  font-size: 13px; color: rgba(255,255,255,.55);
  letter-spacing: .04em;
}

/* Product card badge */
.card-img { position: relative; }
.card-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 5px 10px; border-radius: 100px;
  font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--ink); color: #fff;
}
.card-badge--bestseller { background: var(--ink); color: #fff; }
.card-badge--new { background: var(--accent); color: #fff; }
.card-badge--restocked { background: var(--green); color: #fff; }

/* Stacks (curated bundles) */
.stacks-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
/* Stack cards are <a> now — see template-parts/home/stacks.php for why the onclick had to go. */
a.stack-card { text-decoration: none; color: inherit; }
a.stack-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Its CTA is a <span> (one link per card), so the hover has to come from the card. */
a.stack-card:hover .btn-ink { background: #000; box-shadow: var(--shadow-md); }
.stack-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: grid; grid-template-columns: 5fr 7fr;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stack-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--ink); }
.stack-thumb {
  aspect-ratio: 4 / 5;
  align-self: start;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.stack-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.stack-save {
  position: absolute; top: 14px; left: 14px;
  padding: 6px 12px; border-radius: 100px;
  background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
  z-index: 5;
}
.stack-vials { position: relative; width: 80%; height: 70%; }
.stack-vial {
  position: absolute; bottom: 0;
  width: 22%; height: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.55));
  border: 1px solid rgba(13,15,26,.12);
  border-radius: 8px 8px 18px 18px;
  box-shadow: 0 8px 24px rgba(13,15,26,.12);
}
.stack-vial::before {
  content:""; position: absolute; top: -6px; left: 22%; right: 22%; height: 8px;
  background: rgba(13,15,26,.55); border-radius: 2px;
}
.stack-vial::after {
  content:""; position: absolute; left: 18%; right: 18%; top: 22%; bottom: 14%;
  background: rgba(255,255,255,.5); border-radius: 4px;
}
.stack-body { padding: 28px 28px 24px; display: flex; flex-direction: column; }
.stack-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stack-eyebrow { display: block; margin-bottom: 12px; }
.stack-name { font-weight: 500; font-size: 22px; line-height: 1.12; letter-spacing: -0.01em; }
.stack-tagline { color: var(--ink); font-weight: 600; font-size: 15px; margin: 8px 0 12px; line-height: 1.4; }
.stack-desc { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
.stack-items { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; padding: 16px 18px; background: var(--off); border-radius: 12px; }
.stack-items li { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.stack-chip { font-weight: 500; white-space: nowrap; }
.stack-dose { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stack-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; gap: 12px; }
.stack-price { white-space: nowrap; }
.stack-price--top { display: none; }
.stack-price--foot { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.stack-was { display: block; font-size: 13px; font-weight: 400; color: var(--muted); text-decoration: line-through; margin-bottom: 2px; }
.stack-now { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.stack-foot .btn { flex-shrink: 0; }

/* Compare section */
.compare-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  max-width: 980px; margin: 0 auto;
}
.compare-col {
  padding: 36px;
  border-radius: var(--radius-card);
  position: relative;
}
.compare-col--bad {
  background: #fff;
  border: 1px solid var(--border);
}
.compare-col--good {
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
}
.compare-head { padding-bottom: 22px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.compare-col--good .compare-head { border-color: rgba(255,255,255,.12); }
.compare-tag {
  display: inline-block; padding: 4px 10px; border-radius: 100px;
  background: var(--off); color: var(--muted);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 14px;
}
.compare-tag--good { background: rgba(255,255,255,.12); color: #fff; }
.compare-head h3 {
  font-size: 22px;
  font-family: inherit;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.compare-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.compare-col li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.compare-col--good li { color: rgba(255,255,255,.88); }
.ck {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.ck-x { background: #fef2f2; color: #b91c1c; }
.ck-v { background: rgba(255,255,255,.12); color: #4ade80; }

/* How it works */
.hiw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hiw-step { padding: 32px 28px; border: 1px solid var(--border); border-radius: var(--radius-card); position: relative; }
.hiw-num {
  font-family: inherit;
  font-style: normal;
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 18px;
}
.hiw-step h3 { font-size: 22px; margin-bottom: 10px; }
.hiw-step p { color: var(--muted); font-size: 14px; line-height: 1.55; }

@media (max-width: 1024px) {
  .compare-grid { grid-template-columns: 1fr; }
  .hiw-grid { grid-template-columns: 1fr; gap: 14px; }
  .stats-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .stats-cell:nth-child(3) { border-left: 0; padding-left: 0; }
}
/* ---- Stack cards: simplified 2-up on phones (desktop stays rich/horizontal) ---- */
@media (max-width: 768px) {
  .stacks-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .stack-card { display: flex; flex-direction: column; }
  .stack-thumb { aspect-ratio: 4 / 3; align-self: stretch; }
  .stack-eyebrow, .stack-desc, .stack-items, .stack-price--foot { display: none; }
  .stack-body { padding: 14px 14px 14px; flex: 1; }
  .stack-head { margin-bottom: 0; gap: 10px; }
  .stack-name { font-size: 15px; line-height: 1.18; }
  .stack-price--top { display: flex; flex-direction: column; text-align: right; line-height: 1.15; }
  .stack-price--top .stack-was { font-size: 10px; margin-bottom: 1px; }
  .stack-price--top .stack-now { font-size: 15px; }
  .stack-tagline { color: var(--muted); font-weight: 400; font-size: 12.5px; margin: 6px 0 0; line-height: 1.4; }
  /* `margin-top: 14px` overrode the desktop rule's `margin-top: auto`, so the foot followed the
     content instead of being pushed to the bottom of the card — and since names run to one, two or
     three lines and taglines to one or two, no two "View bundle" buttons in a row lined up. The
     gap is now padding, which does not fight the auto margin. */
  .stack-foot { margin-top: auto; padding-top: 14px; }
  .stack-foot .btn { width: 100%; }
}
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stats-cell { border-left: 0; padding-left: 0; }
}

/* ===== END section additions ===== */
@media (max-width: 1024px) {
  .hero-grid, .quality, .partner-hero, .contact-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 520px; margin: 0 auto; }
  .pillars, .whyg { grid-template-columns: 1fr 1fr; }
  .prod-grid, .research-grid { grid-template-columns: 1fr 1fr; }
  .cats { grid-template-columns: repeat(3, 1fr); }
  .steps, .stat-row { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ft-top { grid-template-columns: 1fr; gap: 48px; }
  .cta-banner { grid-template-columns: 1fr; padding: 40px; }
  .cta-banner .btns { justify-content: flex-start; }
  .tiers { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  section { padding: 64px 0; }
  .wrap { padding: 0 20px; }
  .hdr .wrap { padding: 0 20px; }
  .acct-wrap { padding: 0 20px; }
  .nav { display: none; }
  .pillars, .whyg { grid-template-columns: 1fr; }
  .prod-grid, .research-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cats { grid-template-columns: 1fr 1fr; }
  .stat-row, .steps { grid-template-columns: 1fr 1fr; }
  .ft-top { grid-template-columns: 1fr; gap: 20px; }
  /* LV-style accordion footer menu */
  .ft-brand { margin-bottom: 4px; }
  .ft-brand .logo-inv-img { margin-bottom: 14px; }
  .ft-brand p { margin-bottom: 16px; }
  .ft-cols { display: block; }
  .ft-col-acc { border-top: 1px solid rgba(255,255,255,.12); }
  .ft-col-acc:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
  .ft-col-acc h4 {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0; padding: 14px 2px; cursor: pointer;
    font-size: 13px; letter-spacing: .08em; user-select: none;
    transition: opacity .15s ease;
  }
  .ft-col-acc h4:hover { opacity: .75; }
  .ft-acc-icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
  .ft-acc-icon::before, .ft-acc-icon::after {
    content: ""; position: absolute; background: rgba(255,255,255,.7);
    transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s ease;
  }
  .ft-acc-icon::before { top: 6px; left: 0; width: 14px; height: 1.5px; }
  .ft-acc-icon::after { left: 6px; top: 0; width: 1.5px; height: 14px; }
  .ft-col-acc.is-open .ft-acc-icon::after { transform: scaleY(0); opacity: 0; }
  .ft-col-acc .ft-col-body {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1);
  }
  .ft-col-acc.is-open .ft-col-body { grid-template-rows: 1fr; }
  .ft-col-acc .ft-col-body ul {
    min-height: 0; overflow: hidden; gap: 0;
  }
  .ft-col-acc .ft-col-body li a {
    display: block; padding: 8px 2px; font-size: 14px;
    color: rgba(255,255,255,.6);
  }
  .ft-col-acc .ft-col-body li:last-child a { padding-bottom: 12px; }
  /* Phones: the marks go under the disclaimer — the very last thing in the footer — on one line. */
  .ft-bot { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 22px; padding-top: 18px; }
  .ft-bot .disc { flex-basis: auto; }
  .news { padding: 48px 24px; }
  .hero { padding: 48px 0 72px; }
  .card-name { font-size: 14px; }
  .card-type { font-size: 12px; }
}

/* ===== Auth (gated pricing) ===== */
.hdr-auth {
  height: 40px; padding: 0 16px;
  border: 1px solid var(--ink); color: var(--ink);
  border-radius: 100px; font-size: 13px; font-weight: 500;
  transition: all .15s ease; background: transparent;
}
.hdr-auth:hover { background: var(--ink); color: #fff; }
.hdr-auth--on {
  background: transparent; border-color: var(--border);
  display: inline-flex; align-items: center; gap: 8px;
}
.hdr-auth--on svg { width: 14px; height: 14px; stroke: var(--ink); }
.hdr-auth--on:hover { border-color: var(--ink); background: var(--off); color: var(--ink); }
.signin-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 500;
  color: var(--accent);
  background: none; border: 0; cursor: pointer; padding: 0;
}
.signin-link:hover { color: var(--ink); text-decoration: underline; }
.card-locked { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; align-items: flex-start; }
.card-locked .btn { margin-top: 0; }
.pd-price--locked { display: flex; align-items: center; }
.stack-price--locked { font-size: 14px; }

.auth-modal {
  background: #fff; border-radius: 20px;
  max-width: 880px; width: 100%;
  max-height: 90vh; overflow: auto;
  display: grid; grid-template-columns: 1fr 1.2fr;
  position: relative;
}
.auth-side { background: var(--ink); color: #fff; padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; }
.auth-side .eyebrow { display: inline-block; margin-bottom: 16px; }
.auth-side h2 { color: #fff; font-size: 28px; margin-bottom: 14px; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; }
.auth-side p { color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.6; margin-bottom: 24px; }
.auth-perks { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.auth-perks li { display: flex; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,.85); }
.auth-perks li span { color: #4ade80; font-weight: 700; }
.auth-main { padding: 36px; display: flex; flex-direction: column; gap: 12px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--off); border-radius: 100px; padding: 4px; margin-bottom: 16px; }
.auth-tabs button { padding: 8px 14px; border-radius: 100px; font-size: 13px; font-weight: 500; color: var(--muted); background: none; border: 0; cursor: pointer; transition: all .15s ease; }
.auth-tabs button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.auth-main label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.auth-main input, .auth-main select { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font: inherit; color: var(--ink); background: #fff; }
.auth-main input:focus, .auth-main select:focus { outline: none; border-color: var(--ink); }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-forgot { font-size: 12px; color: var(--accent); text-align: right; }
.auth-fine { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
@media (max-width: 820px) {
  .auth-modal { grid-template-columns: 1fr; max-height: 95vh; }
  .auth-side { padding: 28px; }
}

/* ===== Research page (overhaul) ===== */
.r-hero-band { padding: 64px 0 28px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--off) 0%, transparent 100%); }
@media (max-width: 640px) {
  .r-hero-band { padding: 28px 0 20px; }
  .r-hero-title { font-size: clamp(27px, 7.4vw, 33px) !important; margin-bottom: 10px; }
  .r-hero-band > .wrap > p { font-size: 14.5px; margin-bottom: 18px; }
}
.r-hero-band .eyebrow { display: inline-block; margin-bottom: 14px; }
.r-hero-title { font-size: clamp(40px, 5vw, 60px); margin-bottom: 14px; }
.r-hero-band > .wrap > p { color: var(--muted); font-size: 17px; max-width: 580px; margin-bottom: 28px; }
.r-search-wrap { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.r-search { flex: 1 1 480px; min-width: 280px; display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--ink); border-radius: 100px; padding: 4px 4px 4px 20px; background: #fff; height: 56px; }
.r-search svg { color: var(--muted); flex-shrink: 0; }
.r-search input { flex: 1; border: 0; background: none; font: inherit; font-size: 15px; outline: none; height: 100%; }
.r-search-clear { background: var(--off); border: 0; border-radius: 100px; height: 40px; padding: 0 16px; font-size: 12px; font-weight: 500; color: var(--muted); cursor: pointer; }
.r-search-clear:hover { background: var(--ink); color: #fff; }
.r-quick-stats { display: flex; gap: 24px; font-size: 13px; color: var(--muted); }
.r-quick-stats b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.r-toolbar { padding: 24px 0 0; }
.r-filter-row { display: flex; gap: 24px; flex-wrap: wrap; padding-bottom: 16px; }
.r-filter-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.r-filter-label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.r-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip--alt { font-size: 12px; padding: 8px 14px; }
.chip--alt.on { background: var(--accent); border-color: var(--accent); }
.r-view-row { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.r-saved-toggle { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 100px; font-size: 13px; font-weight: 500; color: var(--muted); background: #fff; cursor: pointer; transition: all .15s ease; }
.r-saved-toggle:hover { border-color: var(--ink); color: var(--ink); }
.r-saved-toggle.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.r-view-toggle { margin-left: auto; display: inline-flex; border: 1px solid var(--border); border-radius: 100px; padding: 3px; }
.r-view-toggle button { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 100px; background: none; border: 0; color: var(--muted); cursor: pointer; transition: all .15s ease; }
.r-view-toggle button.on { background: var(--ink); color: #fff; }
.r-result-count { font-size: 13px; color: var(--muted); }

.r-meta-row { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); margin-bottom: 14px; flex-wrap: wrap; }
.r-type-chip { display: inline-block; padding: 3px 10px; border-radius: 100px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.r-type-chip--abs { position: absolute; top: 14px; right: 14px; z-index: 2; }

.r-featured { display: grid; grid-template-columns: 5fr 7fr; background: #fff; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; margin-bottom: 40px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.r-featured:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--ink); }
.r-featured-thumb { position: relative; min-height: 320px; }
.r-featured-pill { position: absolute; top: 20px; left: 20px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.r-featured-body { padding: 40px 44px; display: flex; flex-direction: column; }
.r-featured-body h2 { font-size: 28px; margin-bottom: 12px; line-height: 1.15; }
.r-featured-body > p { color: var(--muted); font-size: 15px; line-height: 1.55; margin-bottom: 20px; }
.r-featured-findings { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; padding: 16px; background: var(--off); border-radius: 12px; }
.r-featured-findings li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; }
.r-featured-findings li span { color: var(--accent); font-weight: 700; flex-shrink: 0; }
.r-featured-foot { display: flex; gap: 12px; align-items: center; margin-top: auto; }
.r-save { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; height: 40px; border: 1px solid var(--border); border-radius: 100px; background: #fff; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--muted); transition: all .15s ease; }
.r-save:hover { border-color: var(--ink); color: var(--ink); }
.r-save.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.r-save--sm { width: 32px; height: 32px; padding: 0; justify-content: center; }
.r-save--sm svg { width: 14px; height: 14px; }

.r-grid-tight { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.r-card { position: relative; }
.r-card-save { position: absolute; top: 12px; right: 12px; z-index: 3; width: 32px; height: 32px; border-radius: 100px; background: rgba(255,255,255,.95); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: all .15s ease; }
.r-card-save:hover { color: var(--ink); }
.r-card-save.on { background: var(--ink); color: #fff; }
.r-thumb { position: relative; }
.r-card-foot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.r-compounds { display: flex; gap: 6px; flex-wrap: wrap; }
.r-compound-chip { font-size: 11px; padding: 4px 10px; background: var(--off); border-radius: 100px; color: var(--ink); font-weight: 500; }
.r-compound-more { font-size: 11px; color: var(--muted); padding: 4px 4px; }

.r-list { display: flex; flex-direction: column; gap: 8px; }
.r-row { display: grid; grid-template-columns: 80px 1fr auto; gap: 20px; padding: 18px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 14px; cursor: pointer; transition: all .15s ease; }
.r-row:hover { border-color: var(--ink); transform: translateX(2px); }
.r-row-thumb { width: 80px; height: 80px; border-radius: 10px; }
.r-row-body h3 { font-size: 17px; margin-bottom: 6px; }
.r-row-body p { font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }
.r-row-body .r-meta-row { margin-bottom: 6px; }
.r-row-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.r-row-arrow { font-size: 20px; color: var(--muted); }

.r-empty { text-align: center; padding: 80px 24px; border: 1px dashed var(--border); border-radius: 16px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.r-empty h3 { font-size: 20px; }
.r-empty p { color: var(--muted); }

.r-modal { background: #fff; border-radius: 20px; max-width: 920px; width: 100%; max-height: 92vh; overflow: auto; position: relative; }
.r-modal-hero { padding: 40px 44px 28px; border-bottom: 1px solid var(--border); position: relative; }
.r-modal-hero-inner { max-width: 700px; }
.r-modal-title { font-size: 32px; margin: 6px 0 0; letter-spacing: -0.02em; line-height: 1.15; }
.r-modal-grid { display: grid; grid-template-columns: 220px 1fr; gap: 0; }
.r-modal-toc { padding: 32px 0 32px 32px; border-right: 1px solid var(--border); position: sticky; top: 0; align-self: start; }
.r-modal-toc ul { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
.r-modal-toc a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 13px; color: var(--muted); cursor: pointer; transition: all .15s ease; }
.r-modal-toc a:hover { background: var(--off); color: var(--ink); }
.r-modal-toc-action { padding-right: 24px; }
.r-modal-body { padding: 32px 44px 44px; max-width: none; }
.r-modal-body section { margin-bottom: 32px; }
.r-modal-body h3 { font-size: 22px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.r-modal-body p { color: var(--muted); margin-bottom: 12px; line-height: 1.65; }

.r-tldr { background: var(--off); border-radius: 14px; padding: 24px; }
.r-tldr .eyebrow { display: inline-block; margin-bottom: 14px; }
.r-tldr ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.r-tldr li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.r-tldr-num { font-family: inherit; font-style: normal; font-size: 16px; color: var(--accent); font-weight: 700; }

.r-evidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.r-evidence-stat { padding: 20px; border: 1px solid var(--border); border-radius: 12px; }
.r-evidence-stat .v { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 4px; line-height: 1; }
.r-evidence-stat .k { font-size: 12px; color: var(--muted); }

.r-related { padding-top: 24px; border-top: 1px solid var(--border); }
.r-related .eyebrow { display: inline-block; margin-bottom: 14px; }
.r-related-grid { display: flex; flex-direction: column; gap: 8px; }
.r-related-card { display: grid; grid-template-columns: 60px 1fr auto; gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 12px; transition: all .15s ease; }
.r-related-card:hover { border-color: var(--ink); background: var(--off); }
.r-related-thumb { position: relative; width: 60px; height: 60px; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.r-related-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.r-related-thumb .vial { width: 30%; height: 60%; background: rgba(255,255,255,.7); border: 1px solid rgba(13,15,26,.08); border-radius: 4px 4px 10px 10px; position: relative; }
.r-related-thumb .vial::before { content: ""; position: absolute; top: -5px; left: 22%; right: 22%; height: 6px; background: rgba(13,15,26,.55); border-radius: 1px; }
.r-related-name { font-weight: 500; font-size: 14px; }
.r-related-type { font-size: 12px; color: var(--muted); }
.r-related-arrow { color: var(--muted); }
.r-refs { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); }
.r-refs li { display: flex; gap: 8px; line-height: 1.5; }
.r-ref-num { color: var(--ink); font-variant-numeric: tabular-nums; flex-shrink: 0; }

@media (max-width: 960px) {
  .r-featured { grid-template-columns: 1fr; }
  .r-modal-grid { grid-template-columns: 1fr; }
  .r-modal-toc { position: static; padding: 24px; border-right: 0; border-bottom: 1px solid var(--border); }
  .r-grid-tight { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .r-grid-tight { grid-template-columns: 1fr; }
  .r-evidence-grid { grid-template-columns: 1fr; }
  .r-row { grid-template-columns: 60px 1fr; }
  .r-row-actions { grid-column: 2; grid-row: 2; margin-top: 10px; justify-content: flex-end; }
  .r-row-thumb { width: 60px; height: 60px; }
  .r-featured-body { padding: 24px; }
  .r-modal-hero { padding: 28px 24px 20px; }
  .r-modal-title { font-size: 24px; }
  .r-modal-body { padding: 24px; }
}

/* ===== Bundle (stack) detail page ===== */
.bundle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.bundle-hero {
  aspect-ratio: 1/1.05;
  border-radius: 24px;
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px;
  overflow: hidden;
}
.bundle-hero-pill {
  position: absolute; top: 20px; left: 20px;
  background: var(--ink); color: #fff;
  padding: 8px 14px; border-radius: 100px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
  z-index: 5;
}
.bundle-hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.bundle-hero-vials {
  display: flex; gap: 14px;
  flex: 1; align-items: center; justify-content: center;
  width: 100%; max-width: 380px;
}
.bundle-hero-vial {
  flex: 1; aspect-ratio: 1/3.5;
  background: linear-gradient(to bottom, rgba(255,255,255,.92) 0%, rgba(255,255,255,.65) 100%);
  border: 1px solid rgba(13,15,26,.15);
  border-radius: 14px 14px 26px 26px;
  box-shadow: 0 20px 50px rgba(13,15,26,.15);
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px 10px;
}
.bundle-hero-vial::before {
  content: ""; position: absolute; top: -10px; left: 20%; right: 20%; height: 12px;
  background: linear-gradient(to bottom, #c4c4c4, #8a8a8a);
  border-radius: 3px;
}
.bundle-hero-vial::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: 18%; bottom: 8%;
  background: rgba(255,255,255,.25);
  border-radius: 4px;
}
.bundle-hero-label {
  position: relative; z-index: 1;
  text-align: center;
}
.bundle-hero-name {
  font-size: 13px; font-weight: 700; color: var(--ink);
  letter-spacing: -.01em; line-height: 1.1;
}
.bundle-hero-dose {
  display: inline-block; margin-top: 4px;
  background: var(--ink); color: #fff;
  font-size: 9px; padding: 2px 8px; border-radius: 100px;
  font-weight: 600;
}
.bundle-hero-foot {
  position: absolute; bottom: 20px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 8px;
  font-size: 11px; color: var(--ink); opacity: .7;
  letter-spacing: .04em;
}

.bundle-info { padding-top: 12px; }
.bundle-info .eyebrow { color: var(--accent); margin-bottom: 8px; display: inline-block; }
.bundle-title {
  font-size: clamp(36px, 4.5vw, 56px);
  letter-spacing: -0.02em; line-height: 1; margin-bottom: 14px;
  font-weight: 600;
}
.bundle-rating {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--muted);
  margin-bottom: 20px;
}
.bundle-stars { color: #f59e0b; letter-spacing: 1px; }
.bundle-rating b { color: var(--ink); font-weight: 600; }
.bundle-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.bundle-tag {
  font-size: 11px; padding: 5px 11px;
  background: var(--off); border-radius: 100px;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink);
}
.bundle-lede {
  font-size: 17px; font-weight: 500; color: var(--ink);
  margin-bottom: 10px; line-height: 1.4;
}
.bundle-desc {
  font-size: 14px; color: var(--muted); line-height: 1.6;
  margin-bottom: 28px;
}

.bundle-set {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 28px;
}
.bundle-set-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.bundle-set-tag {
  font-size: 11px; color: var(--muted);
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 100px;
}
.bundle-set-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
/* The row's layout moved from the <li> onto the <a> inside it: the anchor is what the person
   clicks, so it has to be the thing that fills the row. A link laid out smaller than its own row
   leaves dead strips along the edges that look clickable and are not. */
.bundle-set-list li { list-style: none; }
.bundle-set-link {
  display: grid; grid-template-columns: 56px 1fr auto 16px;
  gap: 14px; align-items: center;
  padding: 12px;
  background: var(--off); border-radius: 12px;
  transition: all .15s ease;
  text-decoration: none; color: inherit;
}
.bundle-set-link:hover { background: #fff; box-shadow: var(--shadow-sm); }
.bundle-set-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bundle-set-thumb {
  width: 56px; height: 56px; border-radius: 10px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.bundle-set-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.bundle-set-thumb .vial {
  width: 30%; height: 60%;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(13,15,26,.08);
  border-radius: 4px 4px 10px 10px; position: relative;
}
.bundle-set-thumb .vial::before {
  content: ""; position: absolute; top: -5px; left: 22%; right: 22%; height: 6px;
  background: rgba(13,15,26,.55); border-radius: 1px;
}
.bundle-set-meta { display: flex; flex-direction: column; gap: 2px; }
.bundle-set-num {
  font-family: inherit;
  font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent);
}
.bundle-set-name { font-weight: 600; font-size: 14px; }
.bundle-set-type { font-size: 12px; color: var(--muted); }
.bundle-set-dose {
  background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: 100px;
}
.bundle-set-arrow { color: var(--muted); font-size: 16px; }

.bundle-buy {
  border: 0;
  border-radius: 16px;
  padding: 0;
  background: transparent;
}
.bundle-buy-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.bundle-qty-label {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.bundle-price {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px; line-height: 1;
}
.bundle-was {
  font-size: 14px; color: var(--muted);
  text-decoration: line-through;
}
.bundle-now {
  font-size: 36px; font-weight: 700; letter-spacing: -.02em;
}
.bundle-save-pill {
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 100px;
  background: var(--green-soft); color: var(--green);
}
.bundle-price--locked { padding: 8px 0; }

.bundle-badges {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.bundle-badge { font-size: 12px; }
.bundle-badge-k {
  font-size: 11px; color: var(--muted);
  letter-spacing: .04em; margin-bottom: 4px;
}
.bundle-badge-v { font-weight: 600; font-size: 12.5px; color: var(--ink); line-height: 1.3; }

.bundle-ruo {
  margin-top: 16px;
  padding: 12px 14px;
  background: #fef9f2; border: 1px solid #fde68a;
  border-radius: 10px;
  font-size: 11px; color: #92400e; line-height: 1.5;
}
.bundle-ruo b { color: #78350f; font-weight: 700; }

@media (max-width: 960px) {
  .bundle-grid { grid-template-columns: 1fr; gap: 32px; }
  .bundle-hero { aspect-ratio: 16/10; }
  .bundle-badges { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bundle-set-list li { grid-template-columns: 48px 1fr auto; }
  .bundle-set-arrow { display: none; }
  .bundle-set-thumb { width: 48px; height: 48px; }
  .bundle-buy-row { flex-direction: column; align-items: stretch; }
  .bundle-price { align-items: flex-start; }
}

/* ===== PDP Bundle & Save tier picker ===== */
.pd-price .val { font-size: 32px; font-weight: 700; }
.pd-price-was {
  display: block; font-size: 14px; color: var(--muted);
  text-decoration: line-through; margin-bottom: 2px;
}

.pd-bundle { margin: 22px 0; }
.pd-bundle-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 12px;
}
.pd-bundle-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.pd-tier {
  position: relative;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 18px 12px 16px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  transition: all .15s ease;
  text-align: left;
  font: inherit;
}
.pd-tier:hover { border-color: var(--ink); }
.pd-tier.on {
  border-color: #0ea5a5;
  background: #f0fdfa;
  box-shadow: 0 0 0 3px rgba(14,165,165,.12);
}
.pd-tier-badge {
  position: absolute;
  top: -10px; left: 50%; transform: translateX(-50%);
  padding: 4px 10px; border-radius: 100px;
  font-size: 9px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; white-space: nowrap;
}
.pd-tier-badge--popular { background: #0ea5a5; }
.pd-tier-badge--value { background: #f59e0b; }
.pd-tier-vis {
  display: flex; gap: 2px;
  flex-shrink: 0; align-items: flex-end;
  height: 44px; width: 56px; justify-content: center;
}
.pd-tier-vial {
  width: 16px; height: 38px;
  border-radius: 4px 4px 7px 7px;
  position: relative;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 5px;
  flex-shrink: 0;
}
.pd-tier-vial::before {
  content:""; position: absolute; top: -3px; left: 3px; right: 3px; height: 4px;
  background: rgba(13,15,26,.55); border-radius: 1px;
}
.pd-tier-vial::after {
  content:""; position: absolute; left: 2px; right: 2px; bottom: 4px; top: 10px;
  background: rgba(255,255,255,.5); border-radius: 2px;
}
.pd-tier-vial-label {
  position: relative; z-index: 1;
  font-size: 5px; font-weight: 800;
  color: rgba(13,15,26,.7);
  letter-spacing: -.02em;
  line-height: 1;
}
.pd-tier-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pd-tier-label {
  font-size: 12px; font-weight: 600;
  color: var(--ink);
  letter-spacing: .02em;
  line-height: 1.2;
}
.pd-tier-off {
  font-size: 12px; font-weight: 600;
  color: #0ea5a5;
}
.pd-tier-off--mute { color: transparent; }

.pd-cta-row .pd-add svg { display: inline-block; vertical-align: middle; }

@media (max-width: 720px) {
  .pd-bundle-grid { grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
}

/* ===== PDP density improvements ===== */
.pd-grid { align-items: flex-start; }
.pd-gallery { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 100px; }
.pd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pd-thumb { aspect-ratio: 1/1; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s ease; color: var(--muted); }
.pd-thumb:hover { border-color: var(--ink); }
.pd-thumb.on { border-color: var(--ink); }
.pd-thumb-vial { width: 22%; height: 56%; background: rgba(255,255,255,.7); border: 1px solid rgba(13,15,26,.1); border-radius: 4px 4px 8px 8px; position: relative; }
.pd-thumb-vial::before { content: ""; position: absolute; top: -4px; left: 22%; right: 22%; height: 5px; background: rgba(13,15,26,.55); border-radius: 1px; }
.pd-thumb-doc { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.pd-thumb--shipping svg { stroke: var(--muted); }
.pd-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--off); overflow: hidden; margin-top: 4px; }
.pd-quick-item { padding: 12px 14px; border-right: 1px solid var(--border); }
.pd-quick-item:last-child { border-right: 0; }
.pd-quick-k { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.pd-quick-v { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.pd-info { padding: 0; }
.pd-title { margin-bottom: 14px; }
.pd-aliases { margin-bottom: 14px; }
.pd-blurb { margin-bottom: 20px; }
.pd-buy { padding-top: 20px; }
.pd-row { margin-bottom: 12px; }
.pd-bundle { margin: 16px 0; }
.pd-cta-row { margin-top: 14px; margin-bottom: 14px; }
.pd-badges { margin-bottom: 14px; }
@media (max-width: 1024px) { .pd-gallery { position: static; } }
@media (max-width: 640px) {
  .pd-quick { grid-template-columns: 1fr 1fr; }
  .pd-quick-item:nth-child(2) { border-right: 0; }
  .pd-quick-item:nth-child(1), .pd-quick-item:nth-child(2) { border-bottom: 1px solid var(--border); }
}

/* ===== PDP Common Questions ===== */
.pd-faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
.pd-faq-head { position: sticky; top: 110px; }
.pd-faq-head .eyebrow { display: inline-block; margin-bottom: 24px; }
.pd-faq-head h2 { font-size: clamp(36px, 4vw, 52px); letter-spacing: -.02em; line-height: 1.05; font-weight: 500; }
.pd-faq-list { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 4px 24px; }
.pd-faq-list details { border-bottom: 1px solid var(--border); padding: 22px 0; }
.pd-faq-list details:last-child { border-bottom: 0; }
.pd-faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 600; font-size: 16px; color: var(--ink); }
.pd-faq-list summary::-webkit-details-marker { display: none; }
.pd-faq-list summary::after { content: "▾"; color: var(--muted); font-size: 14px; flex-shrink: 0; transition: transform .2s ease; }
.pd-faq-list details[open] summary::after { transform: rotate(180deg); }
.pd-faq-list p { margin-top: 14px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 1024px) { .pd-faq-grid { grid-template-columns: 1fr; gap: 32px; } .pd-faq-head { position: static; } }

/* ===== PDP Researchers also viewed ===== */
.pd-related-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.pd-related-head .eyebrow { display: inline-block; margin-bottom: 16px; }
.pd-related-head h2 { font-size: clamp(32px, 4vw, 48px); letter-spacing: -.02em; line-height: 1.05; font-weight: 500; }
.pd-related-actions { display: flex; align-items: center; gap: 20px; }
.pd-related-all { font-size: 15px; font-weight: 600; color: var(--accent); }
.pd-related-all:hover { color: var(--ink); }
.pd-related-nav { display: inline-flex; border: 1px solid var(--border); border-radius: 100px; padding: 4px; gap: 4px; background: #fff; }
.pd-related-nav button { width: 40px; height: 40px; border-radius: 100px; background: none; border: 0; display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; transition: background .15s ease; }
.pd-related-nav button:hover { background: var(--off); }
.pd-related-scroll-wrap { position: relative; overflow: hidden; }
.pd-related-scroll { display: flex; gap: 16px; overflow-x: auto; padding: 8px max(24px, calc((100vw - var(--max)) / 2 + 24px)) 24px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pd-related-scroll::-webkit-scrollbar { display: none; }
.pd-related-card { flex: 0 0 280px; scroll-snap-align: start; background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; cursor: pointer; transition: all .2s ease; }
/* Related cards are <a> now (they used to navigate from an onclick), so they must not pick up
   link styling — the design has never underlined them. */
a.pd-related-card { display: block; text-decoration: none; color: inherit; }
a.pd-related-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pd-related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--ink); }
.pd-related-thumb { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.pd-vial-mini { width: 34%; height: 64%; background: linear-gradient(to bottom, #f4f4f4, #e5e5e5 12%, #fafafa 16%, #fff 100%); border: 1px solid rgba(13,15,26,.1); border-radius: 10px 10px 22px 22px; position: relative; box-shadow: 0 10px 28px rgba(13,15,26,.12); display: flex; flex-direction: column; justify-content: center; padding: 10px; }
.pd-vial-mini::before { content: ""; position: absolute; top: -10px; left: 22%; right: 22%; height: 12px; background: linear-gradient(to bottom, #c4c4c4, #8a8a8a); border-radius: 3px; }
.pd-vial-mini::after { content: ""; position: absolute; left: 12%; right: 12%; top: 14%; bottom: 6%; background: rgba(255,255,255,.25); border-radius: 4px; }
.pd-vial-mini-label { position: relative; z-index: 1; text-align: center; }
.pd-vial-mini-name { font-size: 11px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; margin-bottom: 4px; line-height: 1; }
.pd-vial-mini-dose { display: inline-block; background: var(--ink); color: #fff; font-size: 8px; font-weight: 700; padding: 2px 7px; border-radius: 100px; }
.pd-related-meta { padding: 18px; }
.pd-related-name { font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.pd-related-type { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.pd-related-foot { display: flex; justify-content: space-between; align-items: center; }
.pd-related-price { font-weight: 700; font-size: 15px; color: var(--ink); }
.pd-related-locked { font-size: 12px; color: var(--muted); }
.pd-related-link { font-size: 13px; font-weight: 600; color: var(--accent); }
@media (max-width: 640px) { .pd-related-card { flex: 0 0 240px; } .pd-related-head { align-items: flex-start; flex-direction: column; } }

/* ===== Conversion widgets ===== */

/* Same-day dispatch countdown */
.pd-countdown {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: color-mix(in oklab, var(--green) 8%, #fff);
  border: 1px solid color-mix(in oklab, var(--green) 25%, var(--border));
  border-radius: 12px;
  font-size: 13.5px; color: var(--ink);
  margin-bottom: 16px;
  color: var(--green);
}
.pd-countdown b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Lot availability */
.pd-lot {
  padding: 14px 16px;
  background: var(--off);
  border-radius: 12px;
  margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.pd-lot-info {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 13px;
}
.pd-lot-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pd-lot-num { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pd-lot-purity { color: var(--green); font-weight: 600; }
.pd-lot-avail { display: flex; align-items: center; gap: 12px; }
.pd-lot-bar { flex: 1; height: 6px; background: var(--border); border-radius: 100px; overflow: hidden; }
.pd-lot-fill { height: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 70%, #fff)); border-radius: 100px; transition: width .3s ease; }
.pd-lot-remaining { font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Subscribe & save */
.pd-sub { margin: 16px 0; }
.pd-sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-sub-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: #fff;
  text-align: left; cursor: pointer;
  font: inherit; transition: all .15s ease;
}
.pd-sub-opt:hover { border-color: var(--ink); }
.pd-sub-opt.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 5%, #fff); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 12%, transparent); }
.pd-sub-icon { width: 28px; height: 28px; border-radius: 100px; background: var(--off); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ink); flex-shrink: 0; }
.pd-sub-opt.on .pd-sub-icon { background: var(--accent); color: #fff; }
.pd-sub-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-sub-name { font-weight: 600; font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pd-sub-pct { background: var(--accent); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 100px; font-weight: 700; }
.pd-sub-sub { font-size: 12px; color: var(--muted); }

/* Guarantee strip */
.pd-guarantee {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; padding: 24px;
  background: var(--off);
  border-radius: 16px;
  margin-top: 24px;
}
.pd-guarantee-item { display: flex; gap: 14px; align-items: flex-start; }
.pd-guarantee-item svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.pd-guarantee-t { font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 3px; }
.pd-guarantee-s { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* Sticky buy bar */
/* Dosage card in the floating bar — styled like the buy-box selector cards */
.sticky-buy-dose {
  position: relative; flex: 0 0 auto; display: flex; align-items: center;
  height: 44px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
  min-width: max-content;   /* the label always fits inside the card */
}
.sticky-buy-dose select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; cursor: pointer;
  height: 100%; width: auto; max-width: none; padding: 0 34px 0 14px; text-overflow: clip;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .015em;
  font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1 5 5 9 1' stroke='%238a97a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.sticky-buy-dose select:focus { outline: none; }
.sticky-buy-dose:focus-within { border-color: var(--ink); }
.sticky-buy-dose--single {
  padding: 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .015em;
  font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1;
}
/* Right column wrapper: transparent on desktop (caption hidden); on mobile it
   floats the thumbs right with the tiny name caption above them. */
.sticky-buy-rightcol { display: contents; }
.sticky-buy-capname { display: none; }
.sticky-buy .sticky-buy-add { height: 44px; padding: 0 16px; font-size: 13.5px; white-space: nowrap; }
/* When the floating ATC bar is on the page, give the footer clearance so the
   bar never covers its last lines (bar is fixed: full-width bottom on mobile,
   floating pill bottom-right on desktop). */
body:has(.sticky-buy) .ft { padding-bottom: 68px; }
@media (max-width: 720px) {
  body:has(.sticky-buy) .ft { padding-bottom: 78px; }
}
.sticky-buy {
  position: fixed; left: auto; right: 24px; bottom: 24px; top: auto;
  width: max-content; max-width: min(620px, calc(100vw - 48px));
  background: rgba(255,255,255,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border); border-radius: 16px;
  z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none;
  box-shadow: 0 16px 44px rgba(13,15,26,.18);
}
.sticky-buy.on { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.sticky-buy-inner {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 16px;
  margin: 0;
}
.sticky-buy-thumb {
  width: 50px; height: 50px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden; background: #f4f5f7;
}
.sticky-buy-vial-img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
/* Wide multi-vial stack renders: contain on white instead of a cover-crop sliver */
.sticky-buy-thumb--contain { background: #fff; }
.sticky-buy-thumb--contain .sticky-buy-vial-img { object-fit: contain; object-position: center; padding: 3px; }

/* Thumbnail cluster — main vial + kit add-on thumbs overlapping left→right */
.sticky-buy-thumbs { display: flex; flex-direction: row; align-items: center; flex-shrink: 0; }
.sticky-buy-thumbs .sticky-buy-thumb { position: relative; }
.sticky-buy-thumbs.has-kit .sticky-buy-thumb { box-shadow: 0 0 0 2px #fff, 0 2px 7px rgba(13,15,26,.16); }
.sticky-buy-thumbs.has-kit .sticky-buy-thumb:first-child { z-index: 4; }
.sticky-buy-thumb--kit {
  width: 44px; height: 44px; border-radius: 10px; margin-left: -14px;
  background: #f4f5f7; z-index: 3;
  animation: kitThumbIn .28s cubic-bezier(.2,.8,.3,1) both;
}
.sticky-buy-thumb--kit:nth-of-type(3) { z-index: 2; }
.sticky-buy-thumb--kit:nth-of-type(4) { z-index: 1; }
.sticky-buy-thumb--kit img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
@keyframes kitThumbIn { from { opacity: 0; } to { opacity: 1; } }

.sticky-buy-kit { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--green, #1f8a5b); font-size: 11.5px; font-weight: 600; animation: kitThumbIn .28s ease both; }
.sticky-buy-kit-ic { flex: none; }
.sticky-buy-kit-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.sticky-buy-kit-cap { font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.sticky-buy-price-row { display: flex; align-items: baseline; gap: 8px; }
.sticky-buy-thumb .vial {
  width: 30%; height: 60%;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(13,15,26,.08);
  border-radius: 4px 4px 8px 8px;
  position: relative;
}
.sticky-buy-thumb .vial::before { content:""; position: absolute; top: -4px; left: 22%; right: 22%; height: 5px; background: rgba(13,15,26,.55); border-radius: 1px; }
.sticky-buy-info { flex: 1; min-width: 0; }
.sticky-buy-name { font-weight: 600; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-buy-meta { font-size: 12px; color: var(--muted); }
.sticky-buy-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; white-space: nowrap; }
.sticky-buy-was { font-size: 12px; color: var(--muted); text-decoration: line-through; white-space: nowrap; }
.sticky-buy-now { font-size: 18px; font-weight: 700; white-space: nowrap; }
.sticky-buy-add { height: 44px; padding: 0 20px; }

@media (max-width: 720px) {
  /* Floating add-to-cart — full-width bottom bar on mobile */
  .sticky-buy { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: 0 -4px 20px rgba(13,15,26,.10); background: rgba(255,255,255,.97); }
  .sticky-buy-inner { padding: 8px 12px; gap: 8px; flex-wrap: nowrap; }
  /* One compact row: [thumbs←left, tiny name above][price] … [dose][ATC] */
  .sticky-buy-rightcol { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; order: 1; min-width: 0; flex: 0 1 auto; }
  .sticky-buy-capname { display: block; font-size: 9.5px; font-weight: 600; color: var(--muted); max-width: 112px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky-buy-thumb { width: 36px; height: 36px; }
  .sticky-buy-thumb--kit { width: 29px; height: 29px; margin-left: -11px; }
  .sticky-buy-info { display: none; }
  .sticky-buy-kit-cap { display: none; }
  .sticky-buy-price { order: 2; flex-direction: row; align-items: baseline; gap: 4px; white-space: nowrap; }
  .sticky-buy-now { font-size: 15px; white-space: nowrap; }
  .sticky-buy-was { font-size: 11px; white-space: nowrap; }
  /* Never shrink below the label — the flexible members are the caption and
     the strike price, both of which already have ellipsis / drop rules. */
  .sticky-buy-dose { order: 3; flex: 0 0 auto; height: 44px; margin-left: auto; min-width: max-content; }
  /* No dose card (bundles): the price becomes the elastic member so the row
     reads [thumbs+caption …… price | ATC] instead of leaving a dead gap. */
  .sticky-buy--nodose .sticky-buy-price { margin-left: auto; }
  .sticky-buy-dose select { max-width: none; padding: 0 30px 0 11px; font-size: 12.5px; background-position: right 11px center; }
  .sticky-buy-dose--single { padding: 0 11px; font-size: 12.5px; }
  /* ATC never shrinks below its label — the flexible items are the dose select,
     the caption (ellipsis) and the strike price (drops on small phones). */
  .sticky-buy-add { order: 4; flex: 0 0 auto; height: 44px; padding: 0 14px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 480px) {
  .sticky-buy-was { display: none; }
  .sticky-buy-inner { gap: 6px; }
  /* Kit pre-checked = 3 thumbs + caption by default: the left column must never
     push the ATC off-screen. Caption clamps to the cluster width, thumbs tighten,
     dose + ATC give up padding — the ATC is the one member that never shrinks. */
  .sticky-buy-capname { max-width: 100%; }
  .sticky-buy-thumb { width: 34px; height: 34px; }
  .sticky-buy-thumb--kit { width: 26px; height: 26px; margin-left: -12px; }
  .sticky-buy-dose select { max-width: none; padding: 0 26px 0 9px; background-position: right 9px center; }
  .sticky-buy-dose--single { padding: 0 9px; }
  .sticky-buy .sticky-buy-add { padding: 0 12px; font-size: 12.5px; }
}
@media (max-width: 360px) {
  .sticky-buy-inner { gap: 4px; padding: 8px 10px; }
  .sticky-buy-thumb { width: 30px; height: 30px; }
  .sticky-buy-thumb--kit { width: 22px; height: 22px; margin-left: -10px; }
  .sticky-buy-now { font-size: 14px; }
  .sticky-buy-dose select { max-width: none; font-size: 12px; padding: 0 24px 0 8px; background-position: right 8px center; }
  .sticky-buy-dose--single { padding: 0 8px; font-size: 12px; }
  .sticky-buy .sticky-buy-add { padding: 0 10px; }
}

/* Reviews */
.pd-reviews-head {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 56px; margin-bottom: 40px; align-items: end;
}
.pd-reviews-head .eyebrow { display: inline-block; margin-bottom: 14px; }
.pd-reviews-summary { display: flex; flex-direction: column; gap: 16px; }
.pd-reviews-avg { display: flex; align-items: center; gap: 18px; padding: 16px 20px; background: var(--off); border-radius: 14px; }
.pd-reviews-avg-num { font-size: 48px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.pd-reviews-stars { color: #f59e0b; font-size: 16px; letter-spacing: 2px; }
.pd-reviews-count { font-size: 13px; color: var(--muted); margin-top: 2px; }
.pd-reviews-bars { display: flex; flex-direction: column; gap: 4px; }
.pd-reviews-bar { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border: 0; background: none; cursor: pointer; border-radius: 6px; transition: background .15s; }
.pd-reviews-bar:hover { background: var(--off); }
.pd-reviews-bar.on { background: var(--off); outline: 1px solid var(--ink); }
.pd-reviews-bar-n { font-size: 11px; color: var(--muted); width: 22px; text-align: right; font-weight: 600; }
.pd-reviews-bar-track { flex: 1; height: 6px; background: var(--border); border-radius: 100px; overflow: hidden; }
.pd-reviews-bar-fill { height: 100%; background: #f59e0b; }
.pd-reviews-bar-c { font-size: 11px; color: var(--muted); width: 18px; font-variant-numeric: tabular-nums; }

.pd-reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pd-review { padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.pd-review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pd-review-avatar { width: 40px; height: 40px; border-radius: 100px; background: var(--off); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--ink); }
.pd-review-who { flex: 1; }
.pd-review-name { font-weight: 600; font-size: 14px; }
.pd-review-lab { font-size: 12px; color: var(--muted); }
.pd-review-verified { font-size: 10px; padding: 3px 8px; background: color-mix(in oklab, var(--green) 12%, #fff); color: var(--green); border-radius: 100px; font-weight: 600; letter-spacing: .04em; }
.pd-review-rating-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pd-review-date { font-size: 12px; color: var(--muted); }
.pd-review-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.pd-review-body { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

@media (max-width: 1024px) {
  .pd-reviews-head { grid-template-columns: 1fr; gap: 24px; }
  .pd-reviews-grid { grid-template-columns: 1fr; }
}

/* Card quick-add */
.card-img { position: relative; }

/* Cart shipping progress */
.cart-progress {
  padding: 16px 24px;
  background: var(--off);
  border-bottom: 1px solid var(--border);
}
.cart-progress-line { font-size: 13px; color: var(--ink); margin-bottom: 10px; }
.cart-progress-line b { color: var(--accent); font-weight: 700; }
.cart-progress-line--win { color: var(--green); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }
.cart-progress-line--win .cart-win-check { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 100px; background: var(--green); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; }
.cart-progress-track { position: relative; height: 6px; background: var(--border); border-radius: 100px; overflow: hidden; }
.cart-progress-fill { height: 6px; background: linear-gradient(90deg, var(--accent), var(--green)); border-radius: 100px; transition: width .4s ease; }

/* Cart upsell */
.cart-upsell { padding: 16px 24px; border-top: 1px solid var(--border); background: #fafafa; }
.cart-upsell-head { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.cart-upsell-list { display: flex; flex-direction: column; gap: 8px; }
.cart-upsell-item { display: grid; grid-template-columns: 40px 1fr 32px; gap: 12px; align-items: center; padding: 10px; background: #fff; border-radius: 10px; border: 1px solid var(--border); }
.cart-upsell-thumb { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.cart-upsell-thumb .vial-tiny { width: 26%; height: 60%; background: rgba(255,255,255,.7); border: 1px solid rgba(13,15,26,.1); border-radius: 3px 3px 6px 6px; position: relative; }
.cart-upsell-thumb .vial-tiny::before { content:""; position:absolute; top:-3px; left:22%; right:22%; height:3px; background:rgba(13,15,26,.55); border-radius:1px; }
.cart-upsell-name { font-size: 13px; font-weight: 500; line-height: 1.2; }
.cart-upsell-price { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cart-upsell-add { width: 32px; height: 32px; border-radius: 100px; background: var(--ink); color: #fff; border: 0; cursor: pointer; font-size: 18px; transition: background .15s ease; }
.cart-upsell-add:hover { background: var(--accent); }
/* C2 — the upsell control now OPENS the product rather than adding it, so it wears the same pill
   as the old button (one visual grammar) with an arrow instead of a plus. Sized to the 44px tap
   target the rest of the touch work standardised on, using a transparent box around the 32px pill
   so the hit area grows without the pill changing size. */
.cart-upsell-go {
  width: 32px; height: 32px; border-radius: 100px; background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  text-decoration: none; transition: background .15s ease, transform .15s ease;
  position: relative;
}
.cart-upsell-go::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 100px;
}
.cart-upsell-go:hover { background: var(--accent); transform: translateX(2px); }
.cart-upsell-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Shipped toast */
.shipped-toast {
  position: fixed; left: 24px; bottom: -120px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 40px 14px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 20px 60px rgba(13,15,26,.12);
  z-index: 70; max-width: 320px;
  transition: bottom .35s cubic-bezier(.2,.8,.2,1);
}
.shipped-toast.on { bottom: 24px; }
.shipped-toast-dot { width: 10px; height: 10px; background: var(--green); border-radius: 100px; box-shadow: 0 0 0 3px color-mix(in oklab, var(--green) 25%, transparent); flex-shrink: 0; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--green) 25%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--green) 10%, transparent); } }
.shipped-toast-line { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.shipped-toast-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.shipped-toast-close { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 100px; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; }
.shipped-toast-close:hover { background: var(--off); color: var(--ink); }

/* First-order banner */
.first-order { background: var(--ink); color: #fff; padding: 10px 16px; }
.first-order-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.first-order-tag { padding: 4px 10px; background: var(--accent); color: #fff; border-radius: 100px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; flex-shrink: 0; }
.first-order-copy { flex: 1; font-size: 13px; color: rgba(255,255,255,.9); }
.first-order-copy b { color: #fff; }
.first-order-code { display: inline-block; padding: 2px 10px; margin: 0 2px; background: rgba(255,255,255,.12); color: #fff; border: 1px dashed rgba(255,255,255,.3); border-radius: 6px; font: inherit; font-weight: 700; font-family: monospace; cursor: pointer; letter-spacing: 1px; }
.first-order-code:hover { background: rgba(255,255,255,.2); }
.first-order-x { width: 24px; height: 24px; border-radius: 100px; background: none; border: 0; color: rgba(255,255,255,.6); cursor: pointer; font-size: 18px; flex-shrink: 0; }
.first-order-x:hover { background: rgba(255,255,255,.1); color: #fff; }
@media (max-width: 640px) { .first-order-copy { font-size: 12px; } }

/* Chat bubble */
.chat-bubble {
  position: fixed; right: 24px; bottom: 24px;
  width: 56px; height: 56px; border-radius: 100px;
  background: var(--ink); color: #fff;
  border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 32px rgba(13,15,26,.25);
  z-index: 80; transition: all .2s ease;
}
.chat-bubble:hover { background: var(--accent); transform: translateY(-2px) scale(1.05); }
.chat-bubble.on { background: var(--accent); }
.chat-panel {
  position: fixed; right: 24px; bottom: 96px;
  width: 360px; max-width: calc(100vw - 32px); max-height: calc(100vh - 140px);
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 20px 60px rgba(13,15,26,.18);
  z-index: 80; overflow: hidden;
  display: flex; flex-direction: column;
}
.chat-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--ink); color: #fff; }
.chat-head-info { display: flex; align-items: center; gap: 12px; }
.chat-avatars { display: flex; }
.chat-avatar { width: 32px; height: 32px; border-radius: 100px; background: var(--accent); border: 2px solid var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin-left: -8px; }
.chat-avatar:first-child { margin-left: 0; }
.chat-name { font-size: 14px; font-weight: 600; }
.chat-status { font-size: 11px; color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.chat-dot { width: 7px; height: 7px; background: #4ade80; border-radius: 100px; }
.chat-head .icon-btn { color: #fff; }
.chat-head .icon-btn:hover { background: rgba(255,255,255,.1); }
.chat-body { padding: 18px 20px; flex: 1; overflow-y: auto; }
.chat-msg { background: var(--off); padding: 12px 14px; border-radius: 12px 12px 12px 4px; font-size: 13px; color: var(--ink); line-height: 1.5; margin-bottom: 14px; }
.chat-msg p { margin: 0; }
.chat-suggestions { display: flex; flex-direction: column; gap: 6px; }
.chat-suggestions button { text-align: left; padding: 9px 14px; border: 1px solid var(--border); border-radius: 100px; background: #fff; font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; transition: all .15s ease; }
.chat-suggestions button:hover { border-color: var(--ink); background: var(--off); }
.chat-form { display: flex; gap: 6px; padding: 12px 14px; border-top: 1px solid var(--border); }
.chat-form input { flex: 1; border: 1px solid var(--border); border-radius: 100px; padding: 10px 14px; font: inherit; font-size: 13px; outline: none; }
.chat-form input:focus { border-color: var(--ink); }
.chat-foot { padding: 10px 20px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--border); background: var(--off); }
.chat-foot b { color: var(--ink); }

/* Compound finder */
.finder { max-width: 880px; margin: 0 auto; }
.finder-steps { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 32px; }
.finder-step-pip { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.finder-step-pip .finder-pip-num { width: 24px; height: 24px; border-radius: 100px; background: var(--off); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.finder-step-pip.done { color: var(--ink); }
.finder-step-pip.done .finder-pip-num { background: var(--ink); color: #fff; border-color: var(--ink); }
.finder-step-line { width: 40px; height: 1px; background: var(--border); }
.finder-card { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 36px; position: relative; }
.finder-card h3 { font-size: 26px; margin-bottom: 8px; font-weight: 600; }
.finder-card > p { color: var(--muted); margin-bottom: 24px; font-size: 14.5px; }
.finder-back { position: absolute; top: 24px; right: 24px; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; }
.finder-back:hover { color: var(--ink); }
.finder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.finder-grid--two { grid-template-columns: 1fr 1fr; }
.finder-option { display: grid; grid-template-columns: 56px 1fr 20px; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: #fff; text-align: left; cursor: pointer; font: inherit; transition: all .15s ease; }
.finder-option:hover { border-color: var(--ink); transform: translateX(2px); }
.finder-option-thumb { width: 56px; height: 56px; border-radius: 12px; }
.finder-option-label { font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.finder-option-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.finder-option-arrow { color: var(--muted); font-size: 16px; }
.finder-option--wide { grid-template-columns: 56px 1fr; padding: 24px; gap: 18px; }
.finder-emoji { width: 56px; height: 56px; border-radius: 100px; background: color-mix(in oklab, var(--accent) 8%, var(--off)); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--accent); }
.finder-card--result .eyebrow { color: var(--accent); display: inline-block; margin-bottom: 8px; }
.finder-results { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.finder-result { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer; transition: all .15s ease; }
.finder-result:hover { border-color: var(--ink); background: var(--off); }
.finder-result-thumb { width: 56px; height: 56px; border-radius: 10px; display: flex; align-items: center; justify-content: center; position: relative; }
.finder-result-thumb .vial { width: 26%; height: 60%; background: rgba(255,255,255,.7); border: 1px solid rgba(13,15,26,.1); border-radius: 4px 4px 8px 8px; position: relative; }
.finder-result-thumb .vial::before { content:""; position: absolute; top:-4px; left:22%; right:22%; height:5px; background: rgba(13,15,26,.55); border-radius: 1px; }
.finder-result-name { font-weight: 600; font-size: 14.5px; }
.finder-result-type { font-size: 12px; color: var(--muted); }
.finder-result-arrow { font-size: 13px; font-weight: 600; color: var(--accent); }
.finder-result--stack .finder-result-thumb { background: var(--ink); }
.finder-stack-pill { position: absolute; top: 4px; right: 4px; background: var(--ink); color: #fff; padding: 2px 6px; border-radius: 100px; font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

@media (max-width: 640px) {
  .pdp .pd-buy-sec { padding-bottom: 6px !important; }
  .pdp .pd-guarantee-sec { padding-top: 0 !important; padding-bottom: 0 !important; }
  .pd-guarantee { grid-template-columns: 1fr; margin-top: 14px; padding: 18px; }
  .pd-sub-grid { grid-template-columns: 1fr 1fr; }
  .finder-grid, .finder-grid--two { grid-template-columns: 1fr; }
  .finder-card { padding: 24px; }
  .first-order-inner { flex-wrap: wrap; }
}

/* ===== Header account dropdown ===== */
.hdr-acct { position: relative; }
.hdr-acct-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px 0 8px;
  border: 1px solid var(--border); border-radius: 100px;
  background: #fff; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink);
  transition: all .15s ease;
}
.hdr-acct-btn:hover { border-color: var(--ink); }
.hdr-acct-avatar {
  width: 28px; height: 28px; border-radius: 100px;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.hdr-acct-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-acct-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 6px;
  min-width: 220px; z-index: 60;
  box-shadow: 0 20px 60px rgba(13,15,26,.12);
}
.hdr-acct-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  background: none; border: 0; cursor: pointer;
  border-radius: 8px; font: inherit; font-size: 13.5px;
  color: var(--ink); text-align: left;
  transition: background .15s ease;
}
.hdr-acct-menu button:hover { background: var(--off); }
.hdr-acct-menu button svg { color: var(--muted); flex-shrink: 0; }
.hdr-acct-divider { height: 1px; background: var(--border); margin: 6px 0; }
.hdr-acct-signout { color: var(--muted) !important; }
.hdr-acct-signout:hover { color: var(--ink) !important; }

/* ===== Auth page (full-page) ===== */
.auth-page { min-height: 100vh; background: var(--off); padding: 0 !important; }
.auth-page-grid {
  min-height: 100vh;
  display: grid; grid-template-columns: 0.92fr 1.08fr;
}
.auth-page-grid--narrow { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
.auth-page-sell-mobile { display: none; }

/* ---- Brand (left) panel ---- */
.auth-page-side {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
}
.auth-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(820px 460px at 88% -8%, rgba(79,110,247,.32), transparent 60%),
    radial-gradient(640px 420px at 4% 108%, rgba(21,128,61,.20), transparent 62%),
    radial-gradient(520px 320px at 50% 50%, rgba(79,110,247,.06), transparent 70%);
}
.auth-glow::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 78%);
  mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 78%);
  opacity: .5;
}
.auth-page-side-inner {
  position: relative; z-index: 1;
  min-height: 100vh;
  padding: 52px 60px 48px;
  display: flex; flex-direction: column;
}
.auth-page-logo { display: inline-flex; align-self: flex-start; margin-bottom: 40px; }
.auth-page-logo .logo-inv-img { height: 50px; width: auto; display: block; }

.auth-page-side-body { max-width: 440px; }
.auth-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 12px; margin-bottom: 28px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 100px;
  font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.auth-chip-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74,222,128,.18);
}
.auth-page-side .eyebrow { display: block; color: rgba(255,255,255,.55); margin-bottom: 14px; }
.auth-page-side h1 {
  color: #fff; font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 500; letter-spacing: -.025em;
  line-height: 1.04; margin-bottom: 16px;
}
.auth-page-side-body > p {
  color: rgba(255,255,255,.66); font-size: 15px; line-height: 1.6;
  margin-bottom: 30px; max-width: 400px;
}
.auth-page-side .auth-perks, .auth-page-sell-mobile .auth-perks { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.auth-page-side .auth-perks li, .auth-page-sell-mobile .auth-perks li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,.9); line-height: 1.4;
}
.auth-page-side .auth-perks li span, .auth-page-sell-mobile .auth-perks li span { color: rgba(255,255,255,.9); font-weight: 500; }
.auth-page-side .auth-perk-ic, .auth-page-sell-mobile .auth-perk-ic {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(74,222,128,.16); color: #4ade80;
  border: 1px solid rgba(74,222,128,.28);
}

.auth-page-foot { margin-top: auto; padding-top: 36px; }
.auth-page-quote { padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); }
.auth-page-quote p {
  font-family: inherit;
  font-style: normal; font-size: 16px;
  color: rgba(255,255,255,.82); line-height: 1.5;
  margin-bottom: 12px; max-width: 460px;
}
.auth-page-quote-who { font-size: 13px; color: rgba(255,255,255,.5); }
.auth-trust-strip {
  display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 26px;
}
.auth-trust-strip span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.auth-trust-strip span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* ---- Form (right) panel ---- */
.auth-page-main {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 56px 32px;
}
.auth-page-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 22px; padding: 40px;
  width: 100%; max-width: 440px;
  box-shadow: var(--shadow-lg);
}
.auth-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--off); border: 1px solid var(--border);
  border-radius: 100px; padding: 4px; margin-bottom: 4px;
}
.auth-tabs button {
  padding: 11px 14px; border-radius: 100px;
  font-size: 14px; font-weight: 600; color: var(--muted);
  background: none; border: 0; cursor: pointer; transition: all .18s ease;
}
.auth-tabs button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.auth-page-form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.auth-page-form label {
  display: flex; flex-direction: column; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.auth-page-form input, .auth-page-form select {
  height: 50px; border: 1px solid var(--border); border-radius: 12px;
  padding: 0 15px; font: inherit; font-weight: 400; font-size: 15px;
  color: var(--ink); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-page-form select { padding: 0 12px; }
.auth-page-form input::placeholder { color: #9a9a9a; }
.auth-page-form input:focus, .auth-page-form select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79,110,247,.14);
}
.auth-page-form .auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-pw { position: relative; display: flex; }
.auth-pw input { width: 100%; padding-right: 48px; }
.auth-pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); background: none; border: 0; cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.auth-pw-toggle:hover { color: var(--ink); background: var(--off); }
.auth-forgot {
  font-size: 13px; font-weight: 500; color: var(--accent);
  text-align: right; margin-top: -4px;
}
.auth-forgot:hover { color: var(--ink); }
.auth-fine { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin-top: 6px; }
.auth-fine a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.auth-page-divider {
  display: flex; align-items: center; gap: 14px;
  color: var(--muted); font-size: 12px; margin: 10px 0;
}
.auth-page-divider::before, .auth-page-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.auth-sso { display: flex; align-items: center; justify-content: center; gap: 10px; }

/* ---- Forgot password (narrow) ---- */
.auth-page-logo--dark { margin-bottom: 28px; }
.auth-page-logo--dark .logo img { height: 48px; }
.auth-back {
  font-size: 13px; color: var(--muted); display: inline-block; margin-bottom: 20px;
}
.auth-back:hover { color: var(--ink); }
.auth-sent { text-align: center; padding: 24px 0; }
.auth-sent-ic {
  width: 56px; height: 56px; border-radius: 100px;
  background: color-mix(in oklab, var(--green) 12%, #fff);
  color: var(--green); font-size: 26px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.auth-sent h2 { margin-bottom: 12px; }
.auth-sent p { color: var(--muted); margin-bottom: 8px; }

/* ---- Set a new password (the reset link's destination) ---- */

/* The requirement hint sits tight under its field: the gap belongs to the pair, not between them.
   Pulled up by the form's own 16px row gap so it reads as part of the input above it. */
.auth-hint {
  font-size: 12.5px; color: var(--muted); margin-top: -8px;
}
/* The same slot, in the failure case. Same position so nothing below it moves when the rule the
   hint describes turns out to have been broken — a form that reflows as you're reading the reason
   makes the reason harder to read. */
.auth-field-msg {
  font-size: 12.5px; font-weight: 600; color: #b42318; margin-top: -8px;
}
.auth-page-form input.is-err,
.auth-page-form .auth-pw input.is-err {
  border-color: #b42318;
  box-shadow: 0 0 0 3px rgba(180,35,24,.08);
}
/* An expired link is not an error the person made, so it is not painted red — the neutral disc
   says "this didn't work" without implying they broke it. */
.auth-sent-ic--warn {
  background: var(--off);
  color: var(--muted);
}

/* ===== Loyalty ladder — horizontal tier cards (login page only) =====
   The AuthModal keeps the stacked .loy-ladder--stack layout; these rules are
   scoped to the full-page login surfaces so the ladder reads left→right and
   uses vertical space far more efficiently. */
.auth-page-sell { margin-top: 4px; }
.auth-page-sell .auth-loy,
.auth-page-sell-mobile .auth-loy { margin-top: 0; }

.auth-page-sell .loy-ladder,
.auth-page-sell-mobile .loy-ladder {
  display: grid; gap: 10px;
}
.auth-page-sell .loy-ladder { grid-template-columns: repeat(2, 1fr); }
.auth-page-sell-mobile .loy-ladder { grid-template-columns: repeat(2, 1fr); }

/* Each tier becomes a vertical mini-card: badge → name/threshold → perks. */
.auth-page-sell .loy-tier,
.auth-page-sell-mobile .loy-tier {
  flex-direction: column; align-items: flex-start; gap: 10px;
  height: 100%; padding: 13px 13px 14px;
}
.auth-page-sell .loy-tier-txt,
.auth-page-sell-mobile .loy-tier-txt { width: 100%; gap: 8px; }
.auth-page-sell .loy-tier-head,
.auth-page-sell-mobile .loy-tier-head {
  flex-direction: column; align-items: flex-start; gap: 1px;
}
.auth-page-sell .loy-tier-name,
.auth-page-sell-mobile .loy-tier-name { font-size: 14px; }
/* Simpler + shorter: badge + name + threshold only. Per-tier perks stay in the
   AuthModal (which keeps the stacked layout), just hidden on the login page. */
.auth-page-sell .loy-tier-perks,
.auth-page-sell-mobile .loy-tier-perks { display: none; }
.auth-page-sell .loy-tier,
.auth-page-sell-mobile .loy-tier { gap: 8px; padding: 12px 13px 13px; }

/* ===== AuthModal ladder — match the improved login-page compact 2×2 cards,
   but hide the qualifying thresholds too, so each tile is just badge + name. ===== */
.auth-modal .loy-ladder {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.auth-modal .loy-tier {
  flex-direction: column; align-items: flex-start;
  height: 100%; padding: 12px 13px 13px; gap: 8px;
}
.auth-modal .loy-tier-txt { width: 100%; gap: 6px; }
.auth-modal .loy-tier-head { flex-direction: column; align-items: flex-start; gap: 1px; }
.auth-modal .loy-tier-name { font-size: 14px; }
.auth-modal .loy-tier-perks,
.auth-modal .loy-tier-min { display: none; }

/* Generic benefit checklist below the ladder — balance it across the wider area. */
.auth-page-sell .auth-perks {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 26px; margin-top: 22px;
}
.auth-page-sell-mobile .auth-perks {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}

@media (max-width: 900px) {
  /* Single column, ordered: compact brand header → form → loyalty/perks.
     Keeps the sign-in form above the fold instead of behind the tall ladder. */
  .auth-page-grid { display: flex; flex-direction: column; min-height: 0; }

  /* Compact dark header — logo, headline, one line of copy only. */
  .auth-page-side-inner { min-height: 0; padding: 26px 22px 24px; }
  .auth-page-logo { margin-bottom: 16px; }
  .auth-page-logo .logo-inv-img { height: 40px; }
  .auth-page-side .auth-chip { display: none; }
  .auth-page-side .eyebrow { margin-bottom: 8px; }
  .auth-page-side h1 { font-size: clamp(26px, 7.4vw, 32px); margin-bottom: 9px; }
  .auth-page-side-body { max-width: none; }
  .auth-page-side-body > p { font-size: 14px; line-height: 1.5; margin-bottom: 0; max-width: none; }
  .auth-page-sell { display: none; }   /* ladder + perks move below the form */
  .auth-page-foot { display: none; }

  /* Form sits directly under the compact header */
  .auth-page-main { padding: 22px 20px 30px; }
  .auth-page-card { padding: 24px 20px; border-radius: 20px; box-shadow: var(--shadow-md); }

  /* Loyalty ladder + perks as a dark “why join” section below the form */
  .auth-page-sell-mobile {
    display: block; background: var(--ink); color: #fff;
    padding: 30px 22px 40px !important;
  }
  .auth-page-sell-mobile .auth-loy { margin-top: 0; }
  .auth-page-sell-mobile-hd {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.5); margin-bottom: 16px;
  }
  .auth-page-sell-mobile .auth-perks { margin-top: 20px; }
}
@media (max-width: 560px) {
  .auth-chip { font-size: 11.5px; }
  .auth-page-side .auth-perks li { font-size: 13.5px; }
}

/* ===== Account dashboard ===== */
.acct { padding: 56px 0 80px; }
.acct-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 48px; max-width: var(--max); margin: 0 auto; padding: 0 56px; }
.acct-side {
  position: sticky; top: 110px; align-self: start;
}
.acct-user {
  display: flex; gap: 14px; align-items: center;
  padding: 18px; border: 1px solid var(--border); border-radius: 14px;
  background: #fff; margin-bottom: 16px;
}
.acct-avatar {
  width: 44px; height: 44px; border-radius: 100px;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.acct-user-name { font-weight: 600; font-size: 15px; line-height: 1.2; }
.acct-user-email { font-size: 12px; color: var(--muted); margin-top: 2px; }
.acct-user-lab { font-size: 12px; color: var(--muted); margin-top: 2px; font-style: italic; }
.acct-nav { display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--off); border-radius: 14px; }
.acct-nav a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--ink);
  cursor: pointer; transition: background .15s ease;
}
.acct-nav a:hover { background: rgba(13,15,26,.04); }
.acct-nav a.on { background: var(--ink); color: #fff; }
.acct-nav-count {
  background: rgba(13,15,26,.08);
  color: var(--muted);
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 100px;
  font-variant-numeric: tabular-nums;
}
.acct-nav a.on .acct-nav-count { background: rgba(255,255,255,.15); color: rgba(255,255,255,.8); }
.acct-signout {
  margin-top: 4px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 8px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--muted);
  width: 100%; text-align: left;
  transition: all .15s ease;
}
/* `.acct-nav a` sets justify-content: space-between for the label/count pair, and it out-specifies
   `.acct-signout` — so the sign-out icon was thrown to the far left and its label to the far right,
   which reads as a stray arrow glyph floating in the menu rather than as one control. */
.acct-nav a.acct-signout { justify-content: flex-start; }
.acct-signout:hover { background: rgba(13,15,26,.04); color: var(--ink); }

.acct-h { margin-bottom: 32px; }
.acct-h .eyebrow { color: var(--accent); display: inline-block; margin-bottom: 12px; }
.acct-h h1 { font-size: clamp(36px, 4vw, 48px); margin-bottom: 8px; font-weight: 500; }
.acct-h p { color: var(--muted); font-size: 15px; }

.acct-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
  margin-bottom: 28px;
}
.acct-stat {
  padding: 18px; border: 1px solid var(--border); border-radius: 14px;
  background: #fff;
}
.acct-stat--accent {
  background: linear-gradient(135deg, var(--ink), color-mix(in oklab, var(--accent) 30%, var(--ink)));
  color: #fff; border-color: var(--ink);
}
.acct-stat-k {
  font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.acct-stat--accent .acct-stat-k { color: rgba(255,255,255,.65); }
.acct-stat-v {
  font-size: 28px; font-weight: 600;
  letter-spacing: -.02em; line-height: 1;
  margin-bottom: 6px;
}
.acct-stat-d { font-size: 12px; color: var(--muted); }
.acct-stat--accent .acct-stat-d { color: rgba(255,255,255,.6); }
.acct-tier-prog { margin-top: 10px; }
.acct-tier-bar {
  height: 5px; border-radius: 100px; background: rgba(255,255,255,.18); overflow: hidden;
}
.acct-tier-bar span {
  display: block; height: 100%; border-radius: 100px;
  background: #fff; transition: width .4s ease;
}
.acct-tier-next { margin-top: 6px; font-size: 11.5px; color: rgba(255,255,255,.8); }

.acct-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 16px; padding: 24px;
  margin-bottom: 20px;
}
.acct-card--danger { border-color: #fca5a5; background: #fef2f2; }
.acct-card--danger .acct-card-head h2 { color: #991b1b; }
.acct-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.acct-card-head h2 { font-size: 18px; margin: 0; font-weight: 600; }
.acct-card-head a { font-size: 13px; font-weight: 600; color: var(--accent); }
.acct-card-head a:hover { color: var(--ink); }

.acct-order-list { display: flex; flex-direction: column; gap: 14px; }
.acct-order {
  border: 1px solid var(--border); border-radius: 14px;
  padding: 18px; background: var(--off);
}
.acct-order-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px;
}
.acct-order-id { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.acct-order-date { font-size: 12px; color: var(--muted); margin-top: 2px; }
.acct-order-status {
  padding: 5px 12px; border-radius: 100px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .04em;
}
.acct-order-status--in-transit { background: color-mix(in oklab, var(--accent) 12%, #fff); color: var(--accent); }
.acct-order-status--delivered { background: color-mix(in oklab, var(--green) 12%, #fff); color: var(--green); }
.acct-order-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.acct-order-item {
  display: grid; grid-template-columns: 40px 1fr auto;
  gap: 12px; align-items: center;
  padding: 8px; background: #fff; border-radius: 8px;
}
.acct-order-item.is-clickable { cursor: pointer; transition: background .15s ease, box-shadow .15s ease, transform .15s ease; }
.acct-order-item.is-clickable:hover { background: var(--off); box-shadow: 0 2px 10px rgba(13,15,26,.06); }
.acct-order-item.is-clickable:active { transform: scale(.995); }
.acct-order-item.is-clickable .acct-order-item-name { transition: color .15s ease; }
.acct-order-item.is-clickable:hover .acct-order-item-name { color: var(--accent); }
.acct-order-thumb {
  width: 40px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.acct-order-thumb .vial {
  width: 28%; height: 60%;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(13,15,26,.1);
  border-radius: 3px 3px 7px 7px; position: relative;
}
.acct-order-thumb .vial::before {
  content: ""; position: absolute; top: -3px; left: 22%; right: 22%; height: 4px;
  background: rgba(13,15,26,.55); border-radius: 1px;
}
.acct-order-item-name { font-weight: 600; font-size: 13.5px; }
.acct-order-item-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.acct-order-item-price { font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.acct-order-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px; border-top: 1px solid var(--border);
  gap: 16px; flex-wrap: wrap;
}
.acct-order-total span { font-size: 12px; color: var(--muted); margin-right: 8px; }
.acct-order-total b { font-size: 18px; font-weight: 700; }
.acct-order-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.acct-sub-list { display: flex; flex-direction: column; gap: 12px; }
.acct-sub {
  display: grid; grid-template-columns: 56px 1fr auto auto;
  gap: 18px; align-items: center;
  padding: 16px; background: var(--off); border-radius: 12px;
}
.acct-sub-thumb { width: 56px; height: 56px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.acct-sub-thumb .vial { width: 30%; height: 60%; background: rgba(255,255,255,.7); border: 1px solid rgba(13,15,26,.08); border-radius: 4px 4px 8px 8px; position: relative; }
.acct-sub-thumb .vial::before { content: ""; position: absolute; top: -4px; left: 22%; right: 22%; height: 5px; background: rgba(13,15,26,.55); border-radius: 1px; }
.acct-sub-name { font-weight: 600; font-size: 14px; }
.acct-sub-cadence { font-size: 12px; color: var(--muted); margin-top: 2px; }
.acct-sub-next { font-size: 12px; color: var(--muted); margin-top: 4px; }
.acct-sub-next b { color: var(--ink); font-weight: 600; }
.acct-sub-price { text-align: right; }
.acct-sub-discount { font-size: 11px; color: var(--accent); font-weight: 700; }
.acct-sub-amt { font-size: 16px; font-weight: 700; }
.acct-sub-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.acct-empty {
  padding: 32px; text-align: center; border: 1px dashed var(--border);
  border-radius: 12px;
}
.acct-empty p { color: var(--muted); margin-bottom: 16px; }
.acct-empty--large { padding: 72px 24px; background: var(--off); border: 1px solid var(--border); }
.acct-empty--large h3 { font-size: 22px; margin-bottom: 8px; }

.acct-filters { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }

.acct-reorder { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.acct-reorder-card {
  display: grid; grid-template-columns: 48px 1fr auto;
  gap: 12px; align-items: center;
  padding: 12px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; cursor: pointer; transition: all .15s ease;
  text-align: left; font: inherit;
}
.acct-reorder-card:hover { border-color: var(--ink); background: var(--off); }
.acct-reorder-thumb { width: 48px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.acct-reorder-thumb .vial { width: 28%; height: 60%; background: rgba(255,255,255,.7); border: 1px solid rgba(13,15,26,.1); border-radius: 4px 4px 8px 8px; position: relative; }
.acct-reorder-thumb .vial::before { content: ""; position: absolute; top: -4px; left: 22%; right: 22%; height: 4px; background: rgba(13,15,26,.55); border-radius: 1px; }
.acct-reorder-name { font-weight: 600; font-size: 14px; }
.acct-reorder-type { font-size: 12px; color: var(--muted); margin-top: 2px; }
.acct-reorder-cta { font-size: 12px; font-weight: 600; color: var(--accent); }

.acct-form { display: flex; flex-direction: column; gap: 14px; }
.acct-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acct-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.acct-form input, .acct-form select {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font: inherit; color: var(--ink); background: #fff;
}
.acct-form input:focus, .acct-form select:focus { outline: none; border-color: var(--ink); }
.acct-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.acct-saved { color: var(--green); font-size: 13px; font-weight: 600; }

.acct-row-list { display: flex; flex-direction: column; gap: 4px; }
.acct-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.acct-row:last-child { border-bottom: 0; }
.acct-row-name { font-weight: 600; font-size: 14px; }
.acct-row-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.acct-danger-btn { color: #991b1b; border-color: #fca5a5; }
.acct-danger-btn:hover { background: #fef2f2; border-color: #991b1b; }

/* A stated fact rather than a control — order mail is not optional, so it is not offered as one. */
.acct-row-state { font-size: 13px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.acct-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.acct-toggle input { opacity: 0; width: 0; height: 0; }
.acct-toggle span {
  position: absolute; inset: 0;
  background: var(--border); border-radius: 100px;
  transition: background .2s ease; cursor: pointer;
}
.acct-toggle span::before {
  content: ""; position: absolute;
  top: 2px; left: 2px; width: 18px; height: 18px;
  background: #fff; border-radius: 100px;
  transition: transform .2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.acct-toggle input:checked + span { background: var(--accent); }
.acct-toggle input:checked + span::before { transform: translateX(18px); }

@media (max-width: 1024px) {
  /* minmax(0,1fr) lets the column shrink below its children's min-content,
     otherwise the grid blows past the viewport and body{overflow-x:hidden}
     silently CLIPS the account cards on mobile. */
  .acct-wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .acct-side { position: static; min-width: 0; }
  .acct-main { min-width: 0; }
  /* Wrap the tabs so every section stays reachable without a hidden
     horizontal scroll; sign-out drops to its own full-width row. */
  /* Four items on a phone wrap 3 + 1, leaving "Settings" stranded on its own line and the menu
     looking half-finished. A 2x2 grid gives four equal, full-width targets and one tidy block —
     the same treatment the account stats already get directly below. */
  .acct-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .acct-nav a { flex: 0 0 auto; }
  .acct-signout { grid-column: 1 / -1; width: 100%; margin-top: 6px; }
  .acct-stats { grid-template-columns: 1fr 1fr; }
  .acct-stats .acct-stat--accent { grid-column: 1 / -1; }
  .acct-reorder { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .acct { padding: 36px 0 64px; }
  .acct-h { margin-bottom: 24px; }
  .acct-h h1 { font-size: clamp(28px, 8vw, 34px); }
  .acct-card { padding: 18px !important; border-radius: 14px; }
  .acct-card-head { margin-bottom: 14px; }
  .acct-card-head h2 { font-size: 17px; }

  /* Order cards: stack the footer so the total and actions each get a full row */
  .acct-order { padding: 16px; }
  .acct-order-foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .acct-order-total { display: flex; align-items: baseline; justify-content: space-between; }
  .acct-order-total span { margin-right: 0; }
  .acct-order-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .acct-order-actions .btn { width: 100%; }

  /* Subscriptions: thumb + meta on top, price + actions full-width below */
  .acct-sub { grid-template-columns: 56px 1fr; gap: 14px; }
  .acct-sub-price { grid-column: span 2; text-align: left; display: flex; align-items: baseline; gap: 10px; }
  .acct-sub-actions { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .acct-sub-actions .btn { width: 100%; }

  .acct-form-row { grid-template-columns: 1fr; }
  .acct-row { gap: 12px; }
}

/* ===== Accent alignment pass =====
   Use the blue accent for major section eyebrows + brand quality cues
   so old sections match the new ones. Green stays reserved for
   "verified / saving money / earned" success signals. */
.sec-head .eyebrow,
.r-hero-band .eyebrow,
.partner-hero .eyebrow,
.contact-grid .eyebrow,
.page-hd .eyebrow {
  color: var(--accent);
}
.cta-banner .eyebrow,
.tier .eyebrow,
.q-tab .eyebrow {
  color: inherit;
}

/* Pillar icons: align to soft accent tint (was green) */
.pillar-ic {
  background: color-mix(in oklab, var(--accent) 12%, #fff);
  color: var(--accent);
}

/* Step section: italic accent number */
.step .n { color: var(--accent); border-top-color: var(--accent); }

/* Footer column heading subtle accent dot */
.ft-col h4 { position: relative; }

/* Newsletter eyebrow accent */
.news .eyebrow { color: var(--accent); }

/* Earn card label accent */
.earn-card .eb .lab { color: var(--accent); }

/* Auth modal side gets a soft accent rim on perks */
.auth-perks li span { color: var(--accent); }

/* Partner page tier accent alignment */
.tier:not(.primary) .pct { color: var(--accent); }
.stat .v { background: linear-gradient(90deg, var(--ink) 0%, color-mix(in oklab, var(--accent) 60%, var(--ink)) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Quality / QA section — compact on phones so it doesn't fill the whole screen */
@media (max-width: 640px) {
  .quality-section { padding-top: 44px !important; padding-bottom: 44px !important; }
  .quality-section .sec-head { margin-bottom: 22px; }
  .quality-section .sec-head h2 { font-size: 26px !important; line-height: 1.12; }
  .quality-section .sec-head .lede { font-size: 14px; }
  .quality-section .quality { gap: 18px; }
  .quality-section .q-tabs { gap: 2px; }
  .quality-section .q-tab { padding: 12px 14px; gap: 12px; font-size: 14.5px; border-radius: 11px; }
  .quality-section .q-tab .num { width: 18px; font-size: 11px; }
  .quality-section .q-panel { padding: 22px; min-height: 0; }
  .quality-section .q-panel h3 { font-size: 22px; margin-bottom: 12px; }
  .quality-section .q-panel p { font-size: 14px; margin-bottom: 18px; }
  .quality-section .q-stat { gap: 22px; padding-top: 18px; }
}


/* ===== Partner program — live (simplified, no public figures) ============
   Centred lead block instead of a 2-col hero; benefits in one 4-up row of
   the same hairline card used by .step. No new visual ideas. */
.partner-lead { max-width: 720px; margin: 0 auto; text-align: center; padding-top: 64px; padding-bottom: 40px; }
.partner-lead h1 { margin: 16px 0 18px; }
.partner-lead .lede { margin: 0 auto 28px; max-width: 560px; }
.partner-lead-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.partner-gets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.partner-get {
  border: 1px solid var(--border); border-radius: 14px; background: #fff;
  padding: 22px 20px 24px;
}
.partner-get h3 { margin: 0 0 8px; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.partner-get p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.partner-terms-note {
  margin: 28px auto 0; max-width: 620px; text-align: center;
  font-size: 13.5px; line-height: 1.65; color: var(--muted); text-wrap: pretty;
}
.po-summary-lede { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
@media (max-width: 1024px) {
  .partner-gets { grid-template-columns: 1fr 1fr; }
  .steps--3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* Matches the existing ≤900 partner compaction rhythm. */
  .partner-page .partner-lead { padding-top: 8px; padding-bottom: 22px; }
  .partner-page .partner-lead h1 { font-size: clamp(25px, 6.6vw, 31px); margin: 10px 0 12px; }
  .partner-page .partner-lead .lede { font-size: 14.5px; margin-bottom: 18px; }
  .partner-page .partner-lead .btn-lg { height: 46px; padding: 0 20px; font-size: 14px; }
  .partner-page .partner-gets { gap: 12px; }
  .partner-page .partner-get { padding: 16px 16px 18px; border-radius: 12px; }
  .partner-page .partner-get h3 { font-size: 14.5px; margin-bottom: 6px; }
  .partner-page .partner-get p { font-size: 12.5px; }
  .partner-page .steps--3 { grid-template-columns: 1fr 1fr; }
  .partner-page .partner-terms-note { margin-top: 18px; font-size: 12.5px; }
}
@media (max-width: 560px) {
  .partner-page .steps--3 { grid-template-columns: 1fr; }
}


/* ===== Floating restock-alert bar (sold-out counterpart to .sticky-buy) =====
   Shares every shell rule with .sticky-buy — position, blur, radius, shadow,
   entrance, and all breakpoints. Only the right-hand cluster differs: an email
   field + Notify me instead of price + Add to cart. */
.sticky-buy--notify { max-width: min(660px, calc(100vw - 48px)); }
.sticky-notify-meta { display: inline-flex; align-items: center; gap: 6px; }
.sticky-notify-meta svg { flex-shrink: 0; color: var(--muted); }
.sticky-notify-badge {
  flex-shrink: 0; padding: 2px 7px; border-radius: 100px;
  background: var(--ink); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.sticky-notify-form { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.sticky-notify-form input {
  height: 44px; width: 190px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
  font: inherit; font-size: 13.5px; color: var(--ink);
}
.sticky-notify-form input::placeholder { color: var(--muted); }
.sticky-notify-form input:focus { outline: none; border-color: var(--ink); }
.sticky-notify-ok {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  height: 44px; padding: 0 16px; border-radius: 12px;
  background: color-mix(in oklab, var(--green) 10%, #fff);
  border: 1px solid color-mix(in oklab, var(--green) 32%, #fff);
  font-size: 13.5px; font-weight: 600; color: var(--green); white-space: nowrap;
}
@media (max-width: 900px) {
  .sticky-buy--notify { max-width: none; }
  .sticky-notify-form { order: 4; margin-left: auto; gap: 6px; flex: 1 1 auto; min-width: 0; }
  .sticky-notify-form input { flex: 1 1 auto; width: auto; min-width: 0; font-size: 13px; padding: 0 12px; }
  /* the name column stops competing for width so the field can grow */
  .sticky-buy--notify .sticky-buy-info { flex: 0 1 auto; min-width: 0; }
  .sticky-notify-ok { order: 4; margin-left: auto; padding: 0 12px; font-size: 13px; }
}
@media (max-width: 480px) {
  .sticky-notify-meta .sticky-notify-badge { display: none; }  /* name + field is enough */
  .sticky-notify-form input { padding: 0 11px; font-size: 12.5px; }
  .sticky-buy--notify .sticky-buy-name { font-size: 12.5px; }
  .sticky-notify-ok span { font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME-ONLY additions — NOT in design-source/v3/preview/styles.css.
   Everything above this line is that file, ported verbatim (v9). These rules
   below exist because the theme renders REAL markup where the preview renders
   a mock, or because a documented divergence needs them. Re-append them after
   any future verbatim port of styles.css.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Theme wraps each hero vial in an <a> (real PDP link) with the .hv positioning class; the design
   source puts .hv on the <img> directly. Make the inner <img> fill the anchor's height at natural
   aspect so the anchor shrink-wraps to the vial — renders identically to the design's bare <img>.
   filter:drop-shadow on the anchor traces the transparent-PNG vial's alpha, so the sourced hover
   shadow renders on the vial shape exactly as the design intends. */
.hv img { display: block; height: 100%; width: auto; }

.filter-div { width: 1px; height: 26px; background: var(--border); margin: 0 6px; align-self: center; flex: 0 0 auto; }

/* pin the View product / Notify me button to the card bottom (v2) */

/* pastel backgrounds */
.bg-sky { background: #d7e3f7; }

/* REMOVED: a v2 `.sticky-buy` base rule that sat HERE, below the THEME-ONLY line and therefore
   below v9's `@media (max-width: 720px)` block. Same specificity, later in the file, so it won —
   and it re-pinned the bar to `right: 24px; bottom: 24px; width: max-content`, cancelling the
   design's full-width bottom bar on every screen under 720px. v9 defines the identical base rule
   at the top of this file (with a 620px cap rather than 560px), so nothing is lost by deleting it.
   Third instance of this exact bug: check the THEME-ONLY block first when a media query looks
   ignored. */

/* REMOVED: three v2 leftovers that shadowed v9's own rules for the same selectors —
   `.auth-page-side` (padding 56px/64px, flex), `.auth-page-side > .auth-page-side-body > p`
   and `.auth-page-main`. v9 moved the aside's padding onto the new `.auth-page-side-inner`
   wrapper and defines all three identically-or-better above the THEME-ONLY line. Because these
   sat BELOW that line they won on specificity-tie-by-order, double-padding the mobile aside by
   128px horizontally — which wrapped the subline to three lines and pushed everything down. */

.auth-page-form .auth-forgot { font-size: 12px; color: var(--accent); text-align: right; }

.auth-page-form .auth-fine { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 4px; }

/* ===== v2 Account A2: loyalty tier progress bar (in the accent stat card) ===== */
.acct-tier-prog { margin-top: 10px; }

/* v2 AU2: forgot-page dark logo (light bg) */
.auth-page-logo--dark { margin-bottom: 28px; }

/* Account dropdown: the design's menu items are <button>s driving an SPA router, so every rule is
   written as `.hdr-acct-menu button`. Ours are real <a> links — right for a multi-page site
   (middle-click, copy link, keyboard, no JS dependency) but invisible to those selectors, so the
   items rendered as bare inline text and wrapped into two ragged lines. Mirror the design's own
   rules onto the anchors rather than downgrading the links to buttons. */
.hdr-acct-menu a {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  background: none; border: 0; cursor: pointer;
  border-radius: 8px; font: inherit; font-size: 13.5px;
  color: var(--ink); text-align: left; text-decoration: none;
  transition: background .15s ease;
}
.hdr-acct-menu a:hover { background: var(--off); }
.hdr-acct-menu a svg { color: var(--muted); flex-shrink: 0; }

/* Catalog toolbar — keep Sort beside the search field on narrow screens.
   DIVERGENCE (DIVERGENCES.md §9): the design wraps this row below ~520px, measured identical in
   preview and build, so this is a deliberate owner-requested departure and not a port fix. Only
   the two properties that force the wrap are touched: the search field's 220px floor, and the
   select's horizontal padding. Both keep their design values above 520px. */
/* The design's own values, moved out of the inline style attribute so a media query can reach
   them at all — an inline declaration outranks any stylesheet rule, so leaving them there made
   the narrow-screen rule below silently inert. Identical behaviour above 520px. */
.cat-toolbar { flex-wrap: wrap; }
.cat-toolbar .cat-search { flex: 1 1 280px; min-width: 220px; }

/* Side by side in the narrow-window band only — 431px to 520px.
   Not below 431px, for two reasons. Every current phone is 390–430px wide, and at those widths
   forcing one row squeezes the search field to about 150px, which is worse than the design's
   stacked layout, not better. And it is measurable: forcing it at 390px moved every card up a row
   height and took catalog mobile from 5.73% to 27.78% against the design. The reported screenshot
   was a ~486px browser window, which is inside this band and is what the rule fixes. */
@media (min-width: 431px) and (max-width: 520px) {
  .cat-toolbar { flex-wrap: nowrap; gap: 10px; }
  .cat-toolbar .cat-search { min-width: 0; flex: 1 1 auto; padding: 0 14px; }
  .cat-toolbar .cat-sort { flex: 0 0 auto; padding: 0 10px; max-width: 46vw; }
}

/* `.hdr-auth` and `.icon-btn` are <button> in the design, so their rules set height and
   `padding: 0 16px` and rely on a button's built-in centring. This build renders real <a> links
   (a sign-in link should be a link), and an anchor has no such default — the label sat on the
   baseline near the top of the pill instead of in the middle of it. Same class of mismatch as
   `.hdr-acct-menu a` above: keep the correct element, restate what the button gave for free. */
a.hdr-auth,
a.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; box-sizing: border-box;
}

/* Restock bar: show EITHER the form or the confirmation, never both.
   The design renders one or the other from state (`{done ? ok : form}`); this build renders both
   and toggles them, and the confirmation carried only the `hidden` ATTRIBUTE. An attribute cannot
   beat a stylesheet — `.sticky-notify-ok { display: inline-flex }` above wins over the UA's
   `[hidden] { display: none }` — so the green "You're on the list" chip sat next to the email
   field permanently, squeezing the name to "Melan…" and wrapping "Restock alert" onto two lines.
   Driving both off the bar's own `is-done` class matches the design's state exactly. */
.sticky-buy--notify:not(.is-done) .sticky-notify-ok { display: none; }
.sticky-buy--notify.is-done .sticky-notify-form { display: none; }
.sticky-buy--notify.is-done .sticky-notify-badge { display: none; }

/* Auth modal / auth page: let the form shrink instead of spilling off-screen.
   DIVERGENCE (DIVERGENCES.md §10) — this reproduces IDENTICALLY in the v9 preview (modal box 342px,
   content 518px, `.auth-row` 446px as two 217px columns at 390px wide), so it is a defect in the
   export rather than a port error, and it is fixed here rather than reproduced.

   Mechanism: a grid item defaults to `min-width: auto`, i.e. it refuses to shrink below its
   content's intrinsic minimum. Two side-by-side <input>s carry a browser default size of about
   217px each, so the single column the modal collapses to at ≤820px cannot go below ~518px. The
   box itself sizes correctly, but `.modal-bg` centres it, so the overflow splits evenly and the
   left half — labels, the close button, the start of every field — ends up off-screen and
   unreachable, since you cannot scroll left past a centred flex item.

   Two changes: allow the shrink, and stack the name row when it can no longer sit side by side. */
.auth-modal, .auth-modal > *, .auth-side, .auth-main { min-width: 0; }
.auth-main input, .auth-main select, .auth-main label,
.auth-page-form input, .auth-page-form select, .auth-page-form label { min-width: 0; max-width: 100%; }
.auth-row > * { min-width: 0; }

@media (max-width: 520px) {
  /* Below this the two-up name row would leave each field too narrow to read what you typed. */
  .auth-row, .auth-page-form .auth-row { grid-template-columns: 1fr; }
}

/* WooCommerce injects `<a class="added_to_cart wc-forward">View cart</a>` immediately after any
   button it handles. The design has no such link anywhere: adding to cart OPENS THE DRAWER, which
   is both the confirmation and the route to the cart. Left alone it lands inside a product card
   (and, before the JS fix, inside the floating buy bar, where the flex order threw it to the far
   left across the name and thumbnails).

   The PDP/stack/supply bars are handled properly in JS — we simply stop handing WooCommerce the
   button, which it documents as supported. These two surfaces use WooCommerce's OWN click handler,
   so the link cannot be prevented there and is hidden instead. Hidden, not removed: it stays in the
   DOM for screen readers and for anyone who has JS-driven drawers disabled. */
.card .added_to_cart,
.cart-upsell .added_to_cart,
.sticky-buy .added_to_cart,
.pd-cta-row .added_to_cart { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ── Cart drawer: fixed head, fixed checkout button, one scrolling middle ──────
   A full cart pushed "Go to checkout" off the bottom of the screen with no way to reach it. Two
   causes. `.cart-drawer-body` (the AJAX fragment wrapper, which the design has no equivalent of)
   was not a flex column, so the design's `.cart-items { flex: 1; overflow: auto }` had no flex
   parent to work against; and a flex child defaults to `min-height: auto`, so even once it did, it
   would not shrink below its content. The upsell block also sat outside the scroll area, adding
   fixed height in front of the footer. `.cart-scroll` now wraps items + upsell as one region. */
.cart-drawer-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* FIXED CHROME, ONE SCROLLING MIDDLE (owner's ruling, 19 Sep 2026 — DIVERGENCES §71, which retires
   B4). The header, the progress bar and the footer are `flex: 0 0 auto` and never shrink; the region
   between them holds the items AND the "Researchers also added" block and is the only thing that
   moves. B4 had pinned the upsell as chrome, which on a short phone left the items a sliver between
   two fixed blocks; as scrolling content it costs the items nothing until they have been read. */
.cart-drawer-body > .cart-progress,
.cart-drawer-body > .cart-foot { flex: 0 0 auto; }
/* A landscape phone still leaves the list a usable strip rather than none. */
@media (max-height: 520px) {
  .cart-scroll { min-height: 84px; }
}
.cart-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* The item list takes keyboard focus so the drawer can be scrolled from the keyboard; show that
   only to a keyboard user, drawn inside the edge so the panel's overflow cannot clip it. */
.cart-items[data-cart-list]:focus { outline: none; }
.cart-items[data-cart-list]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }


/* The inner list must NOT scroll independently, or there are two scrollbars and the outer one is
   the only way to reach the upsell. */
.cart-scroll .cart-items { overflow: visible; flex: 0 0 auto; }

/* DESKTOP: THE UPSELL IS PINNED (owner's ruling, 20 Sep 2026 — DIVERGENCES §71, the fourth
   arrangement). From 768px wide the region stops scrolling and becomes a column: the item list is
   the only scroller, and "Researchers also added" sits fixed beneath it, above the footer. The list
   is `flex: 0 1 auto` rather than `1 1 auto` so a short cart keeps the upsell directly under its
   lines instead of stranding it at the bottom with a gap above it; a long cart fills the space and
   scrolls. One scroller at a time, so never two scrollbars.

   AND ONLY WHEN THERE IS HEIGHT FOR IT. The ruling's own reason for scrolling on mobile is that
   "vertical space is too tight to pin it", and a phone turned sideways is 768+ wide and ~390 tall:
   header, progress bar, pinned upsell and footer take ~490px on their own and would leave the list
   nothing. Below 600px of height the drawer keeps the mobile arrangement at any width. */
@media (min-width: 768px) and (min-height: 600px) {
  .cart-scroll { overflow: hidden; display: flex; flex-direction: column; }
  .cart-scroll > .cart-items {
    flex: 0 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .cart-scroll > .cart-upsell { flex: 0 0 auto; }
}

/* ── Floating buy bar: the kit thumbnails must not run over the price ─────────
   At 390px the thumbnails ended at x=112 while the price started at 97 — a 15px overlap, 27px at
   360px. `.sticky-buy-rightcol` is allowed to shrink (min-width: 0) but the thumbnails inside it
   are fixed-size and were not clipped, so they spilled onto the next flex item. Below 430px there
   is simply not enough room for three thumbnails, a price, a dose control and a button: measured,
   the row needs ~347px of content in ~324px of space. So the kit thumbnails drop out on the
   narrowest screens — the capname still names them in full ("BPC-157 + Bacteriostatic Water +
   Insulin Syringes"), so nothing is lost but the duplicate picture. */
@media (max-width: 430px) {
  .sticky-buy .sticky-buy-thumbs .sticky-buy-thumb--kit { display: none; }
}
.sticky-buy-capname {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sticky-buy-price { flex: 0 0 auto; }

/* ── CoA overlay: scrollable when it is taller than the window ────────────────
   `.coa-ov` centres its card with `align-items: center`. A centred flex item that overflows spills
   equally top and bottom, and the top half cannot be scrolled to — the same defect as the signup
   modal, in the vertical axis. `margin: auto` on the child keeps it centred when it fits and lets
   the overlay scroll normally when it does not. */
.coa-ov { align-items: flex-start; }
.coa-modal { margin: auto; max-height: none; }

/* ═══ A2 — scroll lock, CSS half ═══
   The JS pins <body> with position:fixed. These make the overlay itself behave once it is the only
   scrollable thing: `overscroll-behavior: contain` stops a flick at the end of the drawer's list
   from chaining into the document behind it (scroll chaining is what makes an overlay feel like it
   "drags the whole site"), and momentum scrolling is enabled explicitly for older WebKit. */
html.is-scroll-locked { overflow: hidden; }
/* Chromium's SCROLL ANCHORING adjusts the document's scroll offset when content resizes, to keep
   what you are looking at still. The cart drawer replaces its whole body via a WooCommerce fragment
   swap, and that made the anchor drag the restored position downward frame by frame after close —
   measured 2145 → 2133 over 20 frames on Chromium, and not at all on WebKit or Firefox, which do
   not implement it. Overlays are fixed-position chrome; they must never move the document. */
.cart-drawer, .cart-overlay, .modal-bg, .coa-ov, .mnav, [data-entry-gate] { overflow-anchor: none; }
.cart-scroll,
.cart-drawer,
.auth-modal,
.coa-ov,
.modal-bg,
.mnav {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ═══ A3 — floating buy bar: compositing + safe area ═══
   The reported "tripping" is iOS repaint corruption: a `position: fixed` element carrying
   `backdrop-filter: blur(14px)` is re-blurred against moving content on every frame of a momentum
   scroll, and Safari smears or mis-places it. The blur is decorative; an opaque background is not.
   Kept for engines that composite it cheaply, dropped on touch-primary devices, which is exactly
   where it broke.
   `bottom: 0` also put the full-width bar underneath the home indicator, so the safe-area inset is
   added to its padding rather than its offset — the bar still reaches the bottom edge, its CONTENT
   just stops above the indicator. */
@media (hover: none) and (pointer: coarse) {
  .sticky-buy {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: #fff;
  }
}
.sticky-buy { transform: translateZ(0); }
@supports (padding: max(0px)) {
  @media (max-width: 720px) {
    .sticky-buy { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
  }
}

/* ═══ A4 — hero vials resolved at first paint ═══
   Each vial is an <a> sized `height: %` with `width: auto`, so its box was ZERO WIDE until the PNG
   decoded. `.hv-center` is centred with translateX(-50%) of its own width, so it sat in the wrong
   place and jumped once the image arrived — worst on a cold or throttled connection, which is why
   it never reproduced locally. Declaring the intrinsic ratio gives the browser the width at parse
   time, with no dependence on load order, JS or font metrics. */
.hv-left  img { aspect-ratio: 1022 / 1634; }
.hv-right img { aspect-ratio: 1195 / 1757; }
.hv-center img { aspect-ratio: 960 / 1621; }
.hv-left  { aspect-ratio: 1022 / 1634; }
.hv-right { aspect-ratio: 1195 / 1757; }
.hv-center { aspect-ratio: 960 / 1621; }

/* ═══ B2 — account stats: two equal cards, side by side, at every width ═══
   DIVERGENCE (DIVERGENCES.md §11). The design gives `.acct-stat--accent` `grid-column: 1 / -1` on
   mobile, which made "This year" span both columns and drop to a second row under "Orders" —
   measured at 390px: Orders 171px wide on row one, This year 354px wide on row two. That reads as
   two unrelated blocks rather than one pair. The owner asked for a 2-up grid of equal cards at
   every viewport, so the accent card takes one column like any other.

   `align-items: stretch` is the grid default and is what keeps the heights equal; it is stated
   explicitly here so a later `align-items` on the grid cannot silently reintroduce ragged cards. */
.acct-stats { align-items: stretch; }
@media (max-width: 720px) {
  .acct-stats { grid-template-columns: 1fr 1fr; }
  .acct-stats .acct-stat--accent { grid-column: auto; }
}

/* ═══ C2 — iOS dynamic viewport ═══
   `100vh` on iOS is the LARGEST viewport: the height the page would have with the browser chrome
   collapsed. A full-height panel therefore extends under the address bar on first paint, and a
   `max-height: calc(100vh - Npx)` overlay can be taller than the space actually visible, which is
   how a modal ends up with its footer unreachable before you have scrolled at all.

   `dvh` tracks the viewport as the chrome shows and hides; `svh` is the SMALL viewport, the safe
   choice for anything that must fit without scrolling. Declared after the `vh` originals so
   engines that do not know the units keep the old value — a progressive enhancement, not a
   replacement. */
@supports (height: 100dvh) {
  .auth-page { min-height: 100dvh; }
  .co { min-height: 100dvh; }
  /*
   * The auth GRID and its inner column only take a full-height rule on wide screens — the mobile
   * breakpoint deliberately collapses `.auth-page-side-inner` to `min-height: 0` so the dark panel
   * becomes a compact header above the form. Upgrading them unconditionally sat AFTER that rule and
   * re-inflated the panel to full height on mobile: measured, it took login mobile from 13.57% to
   * 66.32% against the design. Match the original scope, not just the original property — the
   * collapse lives in `@media (max-width: 900px)`, so this complements it exactly at 901.
   */
  @media (min-width: 901px) {
    .auth-page-grid, .auth-page-side-inner { min-height: 100dvh; }
  }
}
@supports (height: 100svh) {
  /* These must FIT rather than fill, so they use the small viewport. */
  .gate-card { max-height: calc(100svh - 24px); }
  .r-modal-card { max-height: calc(100svh - 40px); }
  .hdr-acct-menu { max-height: calc(100svh - 140px); }
}

/* Sticky bottom chrome clears the home indicator. `env()` is 0 where there is no inset, so this is
   a no-op everywhere else and needs no media query of its own. */
@supports (padding: max(0px)) {
  .cart-foot { padding-bottom: max(24px, calc(24px + env(safe-area-inset-bottom))); }
}