*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    /* Premium Apothecary palette — approved direction. Legacy variable NAMES
       (--navy/--teal/etc.) are kept so every existing rule below re-themes
       automatically; only the VALUES change. New tokens (--ink, --brass, …)
       are added for new markup. */
    --ink:        #F7FAFF;
    --surface:    #FFFFFF;
    --line:       #D3DAEA;
    --paper:      #0B1F3F;
    --muted:      #64748B;
    --dim:        #94A3B8;
    --brass:      #2563EB;
    --brass-lite: #1D4ED8;
    --verify:     #16A34A;
    /* Darker on-light variants — used only where text sits on an explicit
       light card (--white/--off-white/--paper), never on the page ground.
       --brass and --brass-lite are calibrated for dark backgrounds and fall
       below 4.5:1 on light ones. */
    --brass-deep: #1D4ED8;
    --ink-soft:   #0B1F3F;
    --gray-onlight: #64748B;
    --success-deep: #0f5c2c;
    --success-ondark: #16a34a;
    --amber-deep: #7a3505;
    --danger: #ef4444;
    --danger-onlight: #991b1b;
    --danger-ondark: #f87171;

    --navy: var(--ink);
    --navy-light: var(--surface);
    --teal: var(--brass);
    --teal-dark: var(--brass-lite);
    --white: var(--paper);
    --off-white: #F4F8FF;
    --gray: var(--muted);
    --gray-light: var(--line);
    --text: #1B1917;
    --radius: 8px;
    --shadow: 0 4px 24px rgba(0,0,0,0.35);
    --font-display: 'Archivo', Georgia, serif;

    /* Page ground + primary/secondary/tertiary text for content that sits
       directly on the dark ground (not inside an explicit light card). */
    --bg-page: var(--ink);
    --text-onpage: var(--paper);
    --text-onpage-secondary: var(--muted);
    --text-onpage-tertiary: var(--dim);
  }
  html { scroll-behavior: smooth; }
  body { font-family: 'Inter', sans-serif; color: var(--text-onpage); background: var(--bg-page); font-size: 16px; line-height: 1.6; }
  ::selection { background: var(--brass); color: var(--ink); }
  a { color: inherit; }
  h1, h2, h3, .logo, .section-title, .hs-title, .pcard-name, .ct-name {
    font-family: var(--font-display);
    text-wrap: balance;
  }
  .price-tabular, .pcard-from, .price-was, .acct-code, .calc-input-wrap input {
    font-variant-numeric: tabular-nums;
  }

  /* TOP BAR */
  .top-bar {
    background: var(--teal);
    color: var(--ink);
    text-align: center;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* HEADER / NAV */
  header {
    background: var(--navy);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 16px rgba(0,0,0,0.3);
  }
  .nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--white);
    text-decoration: none;
    letter-spacing: -0.02em;
  }
  .logo span { color: var(--teal); }
  .nav-right { display: flex; align-items: center; gap: 28px; }
  nav ul {
    list-style: none;
    display: flex;
    gap: 32px;
  }
  nav ul a {
    color: rgba(11,31,63,0.8);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
  }
  nav ul a:hover { color: var(--teal); }
  /* Cart icon */
  .cart-btn {
    position: relative;
    background: none;
    border: none;
    color: rgba(11,31,63,0.85);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
  }
  .cart-btn:hover { color: var(--teal); }
  .cart-btn svg { width: 24px; height: 24px; display: block; }
  .cart-count {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--teal);
    color: var(--ink);
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
  }
  .cart-count.empty { display: none; }
  .hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
  }
  .hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: all 0.3s;
  }
  .mobile-nav {
    display: none;
    background: var(--navy-light);
    padding: 16px 24px;
  }
  .mobile-nav.open { display: block; }
  .mobile-nav a {
    display: block;
    color: rgba(11,31,63,0.85);
    text-decoration: none;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid rgba(11,31,63,0.08);
  }
  .mobile-nav a:last-child { border-bottom: none; }

  /* 2026-09-01 audit #24: Shop / Learn dropdowns. Header/nav itself stays
     navy (kept per the earlier light-theme pass); the flyout PANEL uses the
     site's light paper surface so it reads as "light theme" content sitting
     on top of the dark bar, matching category/product pages elsewhere.
     Opens on :hover and :focus-within (mouse + keyboard, no JS needed for
     either) and on a JS-toggled .dd-open class for touch -- see NAV_DD_JS. */
  .has-dd { position: relative; }
  nav ul button {
    all: unset;
    color: rgba(11,31,63,0.8);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s;
  }
  nav ul button:hover, nav ul button:focus-visible { color: var(--teal); }
  .nav-dd {
    /* .nav-dd is a <ul> nested inside <nav>, so it would otherwise inherit
       `nav ul { display: flex; gap: 32px; }` (laying its items out in a
       horizontal row instead of stacking them) -- override explicitly. */
    display: block;
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 14px;
    min-width: 230px;
    background: var(--paper);
    border: 1px solid rgba(37,99,235,0.25);
    border-radius: 10px;
    box-shadow: 0 16px 36px rgba(0,0,0,0.3);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 1100;
  }
  .has-dd:hover > .nav-dd,
  .has-dd:focus-within > .nav-dd,
  .has-dd.dd-open > .nav-dd {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-dd a {
    display: block;
    color: var(--ink);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    padding: 9px 12px;
    border-radius: 6px;
    white-space: nowrap;
  }
  .nav-dd a:hover, .nav-dd a:focus-visible {
    background: rgba(37,99,235,0.12);
    color: var(--brass-deep);
  }
  .nav-dd-all {
    border-top: 1px solid rgba(37,99,235,0.2);
    margin-top: 4px;
    padding-top: 8px;
  }
  .mobile-nav-label {
    display: block;
    padding: 10px 0 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(11,31,63,0.45);
  }
  .mobile-nav a.mobile-nav-sub {
    padding-left: 16px;
    font-size: 14px;
    color: rgba(11,31,63,0.7);
  }

  .btn-primary {
    display: inline-block;
    background: var(--teal);
    color: var(--white);
    text-decoration: none;
    padding: 14px 36px;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
  }
  .btn-primary:hover { background: var(--teal-dark); transform: translateY(-1px); }
  .btn-full { width: 100%; display: block; }

  /* SHOP HERO STRIP */
  .shop-hero {
    position: relative;
    background: var(--navy);
    padding: 56px 24px 48px;
    overflow: hidden;
    text-align: center;
  }
  .shop-hero-bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 20% 50%, rgba(37,99,235,0.12) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 30%, rgba(197,138,70,0.08) 0%, transparent 50%),
      repeating-linear-gradient(60deg, transparent, transparent 40px, rgba(37,99,235,0.03) 40px, rgba(37,99,235,0.03) 41px),
      repeating-linear-gradient(-60deg, transparent, transparent 40px, rgba(37,99,235,0.03) 40px, rgba(37,99,235,0.03) 41px);
  }
  .shop-hero-content { position: relative; max-width: 760px; margin: 0 auto; }
  .shop-hero h1 {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
  }
  .shop-hero h1 span { color: var(--teal); }
  .shop-hero p {
    color: rgba(11,31,63,0.65);
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 24px;
  }
  .hero-badges {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(37,99,235,0.12);
    border: 1px solid rgba(37,99,235,0.3);
    color: rgba(11,31,63,0.85);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
  }
  .hero-badge .hb-ic { color: var(--teal); }

  /* SHOP CONTROLS */
  .shop-wrap { max-width: 1200px; margin: 0 auto; padding: 40px 24px 80px; }
  .shop-search {
    width: 100%;
    max-width: 520px;
    margin: 0 auto 22px;
    display: block;
    background: var(--surface);
    border: 1px solid var(--gray-light);
    border-radius: 24px;
    padding: 13px 20px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text-onpage);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .shop-search:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
  .shop-search::placeholder { color: var(--text-onpage-secondary); }
  .filter-chips {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .chip {
    border: 1px solid var(--gray-light);
    background: var(--white);
    color: var(--ink-soft);
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
  }
  .chip:hover { border-color: var(--teal); color: var(--brass-deep); }
  .chip.active { background: var(--teal); color: var(--ink); border-color: var(--teal); }
  .result-count { text-align: center; color: var(--gray); font-size: 13px; margin-bottom: 28px; }

  /* PRODUCT GRID */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 22px;
  }
  .pcard-purity { color: var(--verify); font-weight: 700; }
  .pcard {
    position: relative;
    border: 1px solid var(--gray-light);
    border-radius: 12px;
    background: var(--white);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    text-decoration: none;
    color: inherit;
  }
  .pcard:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.12); border-color: rgba(37,99,235,0.4); }
  .pcard.bestseller { border-color: rgba(37,99,235,0.5); box-shadow: 0 6px 28px rgba(37,99,235,0.16); }
  .pcard-ribbon { background: var(--teal); color: var(--ink); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; padding: 5px; }
  /* Product stage: the full render, not a 50px sprite. The renders already
     exist per SKU (img/p/<slug>.png) and the product pages use them — the
     cards showing a generic glyph instead is what read as placeholder art. */
  /* The render carries its own studio background, so it fills the stage edge to
     edge. Insetting it just showed the PNG's dark square as a visible box. */
  /* Deep-ink product stage (reference tile): the vial renders are transparent
     PNGs, so the tile owns the background — an ink gradient with decorative
     copper chevrons behind the vial (the ONLY sanctioned dark surface on the
     otherwise light site). Chevrons sit at z-index:0 under the vial (z-index:1)
     so the render's contact shadow falls over them. */
  .pcard-top {
    background: linear-gradient(155deg, #0B0B0C 0%, #1A1815 100%);
    padding: 0;
    position: relative;
    line-height: 0;
    overflow: hidden;
  }
  .pcard-top::before, .pcard-top::after {
    content: "";
    position: absolute;
    z-index: 0;
    background: var(--teal, #2563EB);
    opacity: 0.42;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
    pointer-events: none;
  }
  /* twin chevrons, lower-left, pointing up-right */
  .pcard-top::before {
    left: 6%; bottom: 9%; width: 26%; height: 17%;
    clip-path: polygon(0 100%, 50% 62%, 100% 100%, 100% 72%, 50% 34%, 0 72%);
  }
  /* twin chevrons, upper-right, pointing down-left (rotated pair) */
  .pcard-top::after {
    right: 5%; top: 8%; width: 22%; height: 15%;
    clip-path: polygon(0 0, 50% 38%, 100% 0, 100% 28%, 50% 66%, 0 28%);
    opacity: 0.30;
  }
  .pcard-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    position: relative;
    z-index: 1;
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.3s ease;
  }
  .pcard:hover .pcard-img {
    transform: scale(1.02);
    filter: drop-shadow(0 0 18px rgba(255, 244, 224, 0.28));
  }
  .pcard:hover .pcard-top::before { transform: translate(4px, -5px); opacity: 0.62; }
  .pcard:hover .pcard-top::after { transform: translate(-4px, 5px); opacity: 0.46; }
  @media (prefers-reduced-motion: reduce) {
    .pcard, .pcard-img, .pcard-top::before, .pcard-top::after { transition: none !important; }
    .pcard:hover { transform: none; }
    .pcard:hover .pcard-img { transform: none; }
    .pcard:hover .pcard-top::before, .pcard:hover .pcard-top::after { transform: none; }
  }
  .pcard-head { min-width: 0; }
  .vial-svg { display: block; width: 100%; height: auto; }
  .pcard-cat {
    display: inline-block;
    align-self: flex-start;  /* .pcard-body is a flex column — otherwise it stretches full width */
    background: rgba(37,99,235,0.18);
    color: var(--teal);
    border: 1px solid rgba(37,99,235,0.35);
    border-radius: 4px;
    padding: 3px 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  /* Name now sits in the cream body, not the dark header — var(--white) is an
     alias for --paper and would render invisible here. */
  .pcard-name { font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.25; margin-bottom: 14px; }
  .pcard-best {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--teal);
    color: var(--ink);
    border-radius: 4px;
    padding: 3px 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .pcard-body { padding: 16px 20px 20px; display: flex; flex-direction: column; flex: 1; }
  .pcard-blurb { font-size: 13px; color: var(--gray-onlight); line-height: 1.6; margin-bottom: 14px; flex: 1; }
  .pcard-meta { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
  .pcard-from { font-size: 12px; color: var(--gray-onlight); }
  .pcard-from b { font-size: 20px; color: var(--text); font-weight: 700; }
  .pcard-doses { font-size: 11px; color: var(--gray-onlight); }
  .pcard-view {
    display: block;
    text-align: center;
    background: rgba(37,99,235,0.1);
    color: var(--teal-dark);
    border: 1px solid rgba(37,99,235,0.3);
    border-radius: var(--radius);
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
  }
  .pcard:hover .pcard-view { background: var(--teal); color: var(--ink); }
  .no-results { text-align: center; color: var(--gray); padding: 60px 0; font-size: 15px; }

  /* PRODUCT DETAIL PAGE */
  .pdp-wrap { max-width: 920px; margin: 0 auto; padding: 40px 24px 80px; }
  .breadcrumb { font-size: 13px; color: var(--gray); margin-bottom: 24px; }
  .breadcrumb a { color: var(--teal-dark); text-decoration: none; }
  .breadcrumb a:hover { text-decoration: underline; }
  .pdp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
  /* 2026-09-14 audit fix C: a grid item's automatic minimum size is its
     min-content width, so .pdp-buybox (22px padding around a .vol-table
     whose widest row could not wrap) forced the 1fr track to 372px inside
     a 327px content box -- 6px of horizontal page overflow at 390px. */
  .pdp-grid > * { min-width: 0; }
  .pdp-visual {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    border-radius: 14px;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .pdp-visual .vial { font-size: 96px; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4)); }
  .pdp-visual .vial-svg { width: 165px; height: auto; filter: drop-shadow(0 10px 26px rgba(0,0,0,0.45)); }
  .pdp-hero-img { width: 100%; max-width: 420px; height: auto; display: block; }
  .pdp-about { margin-top: 36px; border-top: 1px solid var(--gray-light); padding-top: 28px; }
  .pdp-about h2 { font-size: 20px; font-weight: 700; color: var(--text-onpage); margin-bottom: 14px; }
  .pdp-about p { font-size: 15px; color: var(--text-onpage); line-height: 1.85; margin-bottom: 14px; }
  .pdp-about p:last-child { margin-bottom: 0; }
  .pdp-visual .pdp-cat-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(37,99,235,0.18);
    color: var(--teal);
    border: 1px solid rgba(37,99,235,0.35);
    border-radius: 4px;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .pdp-info h1 { font-size: clamp(26px, 4vw, 34px); font-weight: 700; color: var(--text-onpage); letter-spacing: -0.02em; margin-bottom: 8px; }
  .pdp-cat-label { font-size: 13px; color: var(--teal-dark); font-weight: 600; margin-bottom: 16px; }
  .pdp-blurb { font-size: 15px; color: var(--gray); line-height: 1.75; margin-bottom: 20px; }
  .pdp-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
  .pdp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(37,99,235,0.08);
    border: 1px solid rgba(37,99,235,0.25);
    color: var(--text-onpage);
    border-radius: 20px;
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 600;
  }
  .pdp-badge .pb-ic { color: var(--teal); }
  .pdp-buybox {
    border: 1px solid var(--gray-light);
    border-radius: 12px;
    padding: 22px;
    background: var(--off-white);
  }
  .dose-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-onlight); margin-bottom: 10px; }
  .dose-options { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
  .dose-btn {
    border: 1px solid var(--gray-light);
    background: var(--white);
    color: var(--text);
    border-radius: var(--radius);
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
  }
  .dose-btn:hover { border-color: var(--teal); }
  .dose-btn.active { background: var(--teal); color: var(--ink); border-color: var(--teal); }
  .dose-btn .db-price { display: block; font-size: 11px; font-weight: 500; opacity: 0.8; margin-top: 1px; }
  .dose-btn.sold-out { opacity: 0.45; cursor: not-allowed; background: var(--bg, #f8fafc); border-color: var(--gray-light); color: var(--gray-onlight); }
  .dose-btn.sold-out:hover { border-color: var(--gray-light); }
  .dose-btn.sold-out .db-price { display: none; }
  .dose-btn .db-soldout { display: none; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 1px; }
  .dose-btn.sold-out .db-soldout { display: block; }
  .pcard.sold-out { opacity: 0.55; }
  .pcard.sold-out .pcard-view { visibility: hidden; }
  .pcard-soldout-badge { position: absolute; top: 12px; right: 12px; background: #64748b; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; z-index: 2; }
  .pdp-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
  .pdp-price { font-size: 32px; font-weight: 700; color: var(--text); } /* pdp-buybox is an off-white card */
  .pdp-price-unit { font-size: 13px; color: var(--gray-onlight); }
  .qty-stepper { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
  .qty-stepper button {
    width: 38px; height: 38px;
    border: 1px solid var(--gray-light);
    background: var(--white);
    border-radius: var(--radius);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--text);
    font-family: inherit;
    transition: background 0.15s;
  }
  .qty-stepper button:hover { background: var(--gray-light); }
  .qty-stepper .qty-val { font-size: 18px; font-weight: 700; min-width: 28px; text-align: center; }
  .pdp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .btn-outline {
    background: var(--white);
    color: var(--brass-deep);
    border: 1px solid var(--teal);
    padding: 13px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
  }
  .btn-outline:hover { background: rgba(37,99,235,0.08); }
  .ruo-note { font-size: 12px; color: var(--gray-onlight); margin-top: 16px; line-height: 1.6; }

  .related-section { margin-top: 56px; }
  .related-section h2 { font-size: 22px; font-weight: 700; color: var(--text-onpage); margin-bottom: 4px; letter-spacing: -0.01em; }
  .related-section .rs-sub { font-size: 14px; color: var(--gray-onlight); margin-bottom: 24px; }

  /* CART PAGE / DRAWER */
  .cart-page-wrap { max-width: 820px; margin: 0 auto; padding: 48px 24px 80px; }
  .cart-page-wrap h1 { font-size: 30px; font-weight: 700; color: var(--text-onpage); letter-spacing: -0.02em; margin-bottom: 24px; }
  .cart-items { border: 1px solid var(--gray-light); border-radius: 12px; overflow: hidden; background: var(--white); }
  .cart-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--gray-light);
  }
  .cart-row:last-child { border-bottom: none; }
  .cart-row-icon {
    width: 48px; height: 48px;
    background: rgba(37,99,235,0.12);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; flex-shrink: 0;
  }
  .cart-row-icon .vial-svg { width: 26px; height: auto; }
  .cart-row-info { flex: 1; min-width: 0; }
  .cart-row-name { font-size: 15px; font-weight: 700; color: var(--text); }
  .cart-row-dose { font-size: 13px; color: var(--gray-onlight); }
  .cart-row-qty { display: flex; align-items: center; gap: 8px; }
  .cart-row-qty button {
    width: 30px; height: 30px;
    border: 1px solid var(--gray-light);
    background: var(--white);
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--text);
    font-family: inherit;
  }
  .cart-row-qty button:hover { background: var(--gray-light); }
  .cart-row-qty .crq-val { min-width: 22px; text-align: center; font-weight: 600; }
  .cart-row-price { font-weight: 700; color: var(--text); min-width: 80px; text-align: right; }
  .cart-row-remove {
    background: none; border: none; color: var(--gray-onlight); cursor: pointer;
    font-size: 13px; text-decoration: underline; font-family: inherit; padding: 0;
  }
  .cart-row-remove:hover { color: var(--danger-onlight); }
  .cart-summary {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  .cart-subtotal { font-size: 14px; color: var(--text-onpage-secondary); }
  .cart-subtotal b { font-size: 22px; color: var(--text-onpage); margin-left: 10px; }
  .cart-empty { text-align: center; padding: 60px 20px; color: var(--gray-onlight); } /* renders inside the .cart-items light card */
  .cart-empty a { color: var(--brass-deep); font-weight: 600; text-decoration: none; }

  /* VOLUME / BULK PRICING -- feature 10: same accent (copper) as the card
     discount pill, so per-vial tier savings read consistently with sale
     pricing everywhere else on the site. */
  .tier-save {
    display: inline-block;
    background: rgba(37,99,235,0.14);
    color: var(--brass-deep);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 1px 7px;
    border-radius: 999px;
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
  }

  /* Free-bacteriostatic-water under-threshold nudge (owner request
     2026-09-16) -- one shared look across the cart page, the mini-cart
     drawer, and the checkout step-1 review list. */
  .cart-row-nudge, .mc-bac-nudge, .cart-review-nudge {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(37,99,235,0.08);
    border: 1px dashed rgba(37,99,235,0.35);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--brass-deep);
  }
  .cart-row-nudge a, .mc-bac-nudge a, .cart-review-nudge a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
  }
  .cart-row-dose s { color: var(--gray-onlight); opacity: 0.7; margin-right: 2px; }
  /* Buybox note + live discount indicator on the product page */
  .vol-note { font-size: 12px; color: var(--brass-deep); font-weight: 600; margin: -8px 0 14px; } /* feature 10: savings copy uses the one copper accent */
  .pdp-save-ind { display: inline-block; margin-left: 6px; }
  .pdp-line-total { font-size: 13px; color: var(--gray-onlight); margin: -8px 0 16px; }
  .pdp-line-total b { color: var(--text); font-weight: 700; }
  /* Volume pricing table (product page) */
  .vol-pricing { margin-top: 22px; }
  .vol-pricing h3 {
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--gray-onlight); margin-bottom: 10px;
  }
  .vol-table {
    border: 1px solid var(--gray-light);
    border-radius: var(--radius);
    /* overflow-x:auto rather than hidden so a row that still cannot fit
       scrolls inside the table instead of being silently clipped, now that
       min-width:0 above lets the buybox shrink below its min-content.
       overflow-y stays hidden so the border-radius still clips. */
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--white);
  }
  .vol-tr {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 14px;
    border-bottom: 1px solid var(--gray-light);
    font-size: 13px;
  }
  .vol-tr:last-child { border-bottom: none; }
  .vol-tr.active { background: rgba(37,99,235,0.08); }
  .vol-tr.best { background: rgba(37,99,235,0.12); }
  .vol-qty { font-weight: 600; color: var(--text); }
  .vol-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    justify-content: flex-end; row-gap: 4px; }
  .vol-unit { font-weight: 700; color: var(--brass-deep); }
  .vol-tr .tier-save { margin-left: 0; }
  .vol-tr .tier-save.best { background: rgba(37,99,235,0.22); }
  .vol-cards-note { font-size: 11px; color: var(--brass-deep); font-weight: 600; margin-top: 8px; }

  /* Clickable tier picker upgrades (rows set the add-to-cart quantity) */
  .vol-tr.clickable { cursor: pointer; transition: background 0.15s; }
  .vol-tr.clickable:hover { background: rgba(37,99,235,0.12); }
  .vol-was { color: var(--gray-onlight); text-decoration: line-through; font-weight: 500; margin-right: 6px; font-size: 12px; }
  .vol-pop {
    display: inline-block; background: var(--teal); color: #fff; font-size: 9px;
    font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
  }

  /* Per-card purity / COA badge row (shop + home + related cards) */
  .pcard-trust { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
  .pcard-purity-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(16,163,74,0.10); color: var(--success-deep);
    border: 1px solid rgba(16,163,74,0.25); border-radius: 999px;
    padding: 2px 9px; font-size: 11px; font-weight: 700; white-space: nowrap;
  }
  .pcard-coa-link {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(37,99,235,0.08); color: var(--brass-deep, #8C5E24);
    border: 1px solid rgba(37,99,235,0.3); border-radius: 999px;
    padding: 2px 9px; font-size: 11px; font-weight: 700; white-space: nowrap;
    cursor: pointer; transition: background 0.15s;
  }
  .pcard-coa-link:hover { background: rgba(37,99,235,0.18); }

  /* Ship-by countdown + delivery estimate (product pages + cart) */
  .shipby { border: 1px solid rgba(37,99,235,0.25); background: rgba(37,99,235,0.05); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 14px; font-size: 13px; color: var(--text-onpage, var(--text)); line-height: 1.55; }
  .shipby b { color: var(--brass-deep, #8C5E24); }
  .shipby .shipby-sub { display: block; font-size: 12px; color: var(--gray-onlight); margin-top: 2px; }

  /* Per-batch COA / batch documentation panel (product pages) */
  .batch-panel { margin-top: 36px; border: 1px solid var(--gray-light); border-radius: 12px; background: var(--white); box-shadow: var(--shadow); overflow: hidden; }
  .batch-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 18px 22px; background: linear-gradient(155deg, #0B0B0C 0%, #1A1815 100%); }
  .batch-panel-head h2 { font-size: 17px; font-weight: 700; color: #fff; margin: 0; }
  .batch-panel-head .bp-kicker { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); margin-bottom: 3px; }
  .batch-coa-btn {
    display: inline-flex; align-items: center; gap: 7px; background: var(--teal); color: #0B0B0C;
    border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 700; text-decoration: none;
    transition: filter 0.15s; white-space: nowrap;
  }
  .batch-coa-btn:hover { filter: brightness(1.08); }
  .batch-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; }
  .batch-cell { padding: 14px 22px; border-top: 1px solid var(--gray-light); }
  .batch-cell .bc-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-onlight); margin-bottom: 3px; }
  .batch-cell .bc-value { font-size: 15px; font-weight: 700; color: var(--text); }
  .batch-cell .bc-value.ok { color: var(--success-deep); }
  .batch-history { border-top: 1px solid var(--gray-light); padding: 14px 22px 18px; }
  .batch-history h3 { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-onlight); margin-bottom: 10px; }
  .batch-hrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border: 1px solid var(--gray-light); border-radius: 8px; font-size: 13px; margin-bottom: 8px; color: var(--gray-onlight); }
  .batch-hrow:last-child { margin-bottom: 0; }
  .batch-hrow.current { border-color: rgba(37,99,235,0.45); background: rgba(37,99,235,0.06); }
  .batch-hrow .bh-lot { font-weight: 700; color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
  .batch-hrow .bh-tag { display: inline-block; background: var(--teal); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; margin-left: 8px; }
  .batch-hrow a { color: var(--brass-deep, #8C5E24); font-weight: 600; text-decoration: none; }
  .batch-hrow a:hover { text-decoration: underline; }

  /* Storage & stability card (product pages) */
  .storage-card { margin-top: 24px; border: 1px solid var(--gray-light); border-radius: 12px; background: var(--white); box-shadow: var(--shadow); padding: 20px 22px; }
  .storage-card h2 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
  .storage-card ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 18px; }
  .storage-card li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--text-onpage, var(--text)); line-height: 1.55; }
  .storage-card li .sc-ic { flex: 0 0 auto; font-size: 15px; line-height: 1.4; }
  .storage-card li b { color: var(--text); }
  .storage-card .sc-note { font-size: 11.5px; color: var(--gray-onlight); margin-top: 12px; margin-bottom: 0; }

  footer { background: var(--navy); color: rgba(11,31,63,0.6); padding: 48px 24px 32px; }
  .footer-inner { max-width: 1200px; margin: 0 auto; }
  .footer-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid rgba(11,31,63,0.1); margin-bottom: 24px; }
  .footer-logo { font-size: 18px; font-weight: 700; color: var(--white); text-decoration: none; letter-spacing: -0.02em; }
  .footer-logo span { color: var(--teal); }
  .footer-tagline { font-size: 13px; margin-top: 6px; }
  .disclaimer-box { border: 1px solid rgba(255,100,100,0.3); background: rgba(255,60,60,0.06); border-radius: var(--radius); padding: 18px 20px; font-size: 12px; color: rgba(255,200,200,0.8); line-height: 1.7; margin-bottom: 24px; }
  .disclaimer-box strong { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,150,150,0.9); margin-bottom: 6px; }
  .footer-bottom { font-size: 12px; text-align: center; color: rgba(11,31,63,0.3); }

  .ref-promo { background: linear-gradient(90deg, rgba(37,99,235,0.14), rgba(37,99,235,0.04)), var(--surface); border-bottom: 1px solid rgba(37,99,235,0.35); color: var(--paper); }
  .ref-promo[hidden] { display: none; }
  /* Wholesale launch banner — same geometry as .ref-promo, different accent so the
     two stacked banners are visually distinguishable. Own dismissal key. */
  .ws-promo { background: linear-gradient(90deg, rgba(0,180,216,0.16), rgba(0,180,216,0.04)), var(--surface); border-bottom: 1px solid rgba(0,180,216,0.4); }
  .ws-promo .ref-promo-cta { background: #00b4d8; color: #04121c; }
  .ws-promo .ref-promo-cta:hover { background: #38c9e6; }
  .ws-promo-new { display: inline-block; background: #00b4d8; color: #04121c; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; margin-right: 8px; vertical-align: 2px; }
  .ref-promo-inner { max-width: 1200px; margin: 0 auto; padding: 13px 24px; display: flex; align-items: center; gap: 18px; }
  .ref-promo-txt { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
  .ref-promo-txt strong { color: var(--paper); font-weight: 700; }
  .ref-promo-sub { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
  .ref-promo-sub a { color: var(--teal-dark); font-weight: 500; text-decoration: none; }
  .ref-promo-sub a:hover { text-decoration: underline; }
  .ref-promo-cta { flex: 0 0 auto; background: var(--teal); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: var(--radius); white-space: nowrap; transition: background 0.2s; }
  .ref-promo-cta:hover { background: var(--teal-dark); }
  .ref-promo-x { flex: 0 0 auto; background: none; border: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 2px; }
  .ref-promo-x:hover { color: var(--paper); }
  @media (max-width: 760px) {
    .ref-promo-inner { flex-wrap: wrap; padding: 11px 14px; gap: 9px; align-items: flex-start; }
    .ref-promo-txt { flex: 1 1 auto; font-size: 13px; }
    /* The long explainer is desktop-only: on a phone it ate a third of the
       viewport. The offer, the CTA and the terms link all survive. */
    .ref-promo-detail { display: none; }
    .ref-promo-sub { font-size: 12px; }
    .ref-promo-x { order: 2; align-self: flex-start; }
    .ref-promo-cta { order: 3; flex: 1 1 100%; text-align: center; padding: 9px 14px; }
  }

  /* Feature 1: promo ribbon */
  .promo-ribbon { background: linear-gradient(90deg, #1D4ED8, #2563EB 45%, #1D4ED8 100%); color: #fff; text-align: center; padding: 9px 40px 9px 16px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; position: relative; }
  .promo-ribbon[hidden] { display: none; }
  .promo-ribbon-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
  .promo-code-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(11,31,63,0.16); border: 1px solid rgba(11,31,63,0.55); color: #fff; font-weight: 800; letter-spacing: 0.04em; padding: 2px 10px; border-radius: 5px; font-size: 12px; font-family: inherit; cursor: pointer; transition: background 0.15s; }
  .promo-code-chip:hover { background: rgba(11,31,63,0.28); }
  .promo-code-chip.copied { background: rgba(11,31,63,0.32); }
  .promo-ribbon-end { font-weight: 600; opacity: 0.9; }
  .promo-ship-live { font-weight: 700; letter-spacing: 0.02em; }
  .promo-ship-live b { color: #fff; text-transform: uppercase; }
  .promo-ribbon-sep { opacity: 0.55; }
  @media (max-width: 640px) { .promo-ribbon-sep { display: none; } .promo-ribbon-inner { gap: 4px 10px; } }
  .promo-ribbon-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(11,31,63,0.8); font-size: 17px; line-height: 1; cursor: pointer; padding: 4px; }
  .promo-ribbon-x:hover { color: #fff; }
  @media (max-width: 560px) { .promo-ribbon { padding: 8px 34px 8px 10px; font-size: 11.5px; } }

  /* Feature 2: editorial homepage hero */
  /* Editorial hero — STANDALONE (no legacy home-hero class: the old dark-hero
     rules set white/cream text with !important and sit later in the cascade,
     which is exactly what made the first version unreadable). */
  .hero-editorial {
    position: relative; overflow: hidden;
    background:
      radial-gradient(ellipse 55% 65% at 82% 40%, rgba(197,138,70,0.22), transparent 62%),
      radial-gradient(ellipse 45% 45% at 8% 90%, rgba(37,99,235,0.10), transparent 60%),
      linear-gradient(150deg, #FFFDF9 0%, #F7F0E4 60%, #EFE4D2 100%);
    border-bottom: 1px solid rgba(122,74,30,0.14);
    padding: 72px 24px 64px;
  }
  .hero-editorial::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: repeating-linear-gradient(115deg, rgba(37,99,235,0.05) 0, rgba(37,99,235,0.05) 1px, transparent 1px, transparent 34px);
    opacity: 0.55;
  }
  .hero-ed-grid {
    position: relative; z-index: 1;
    max-width: 1160px; margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px; align-items: center;
  }
  .hero-ed-eyebrow {
    display: flex; align-items: center; gap: 12px;
    font-size: 13.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: #1D4ED8; margin-bottom: 20px;
  }
  .hero-ed-rule { display: inline-block; width: 44px; height: 3px; background: #2563EB; border-radius: 2px; }
  .hero-ed-h1 {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(38px, 5.6vw, 68px); line-height: 1.05; letter-spacing: -0.015em;
    color: #17130E; margin-bottom: 20px;
  }
  .hero-ed-h1 em { font-style: italic; color: #1D4ED8; }
  .hero-ed-copy { font-size: clamp(15px, 1.6vw, 17.5px); color: #3E3831; line-height: 1.75; margin-bottom: 30px; max-width: 60ch; }
  .hero-ed-copyblock .hero-ctas { justify-content: flex-start; margin-bottom: 22px; }
  .hero-ed-copyblock .btn-primary { background: #2563EB; color: #fff; box-shadow: 0 10px 24px rgba(37,99,235,0.32); }
  .hero-ed-copyblock .btn-primary:hover { background: #1D4ED8; }
  .hero-ed-btn2 {
    display: inline-block; padding: 14px 32px; border-radius: var(--radius);
    font-size: 15px; font-weight: 600; text-decoration: none;
    color: #17130E; border: 1.5px solid rgba(23,19,14,0.28); background: rgba(11,31,63,0.72);
    transition: border-color 0.2s, background 0.2s;
  }
  .hero-ed-btn2:hover { border-color: #2563EB; background: #fff; }
  .hero-ed-chips { display: flex; gap: 10px; flex-wrap: wrap; }
  .hero-ed-chip {
    font-size: 12.5px; font-weight: 600; color: #5C4326;
    background: rgba(37,99,235,0.10); border: 1px solid rgba(37,99,235,0.28);
    border-radius: 999px; padding: 6px 13px;
  }
  .hero-ed-visual { position: relative; text-align: center; }
  .hero-ed-visual::before {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(420px, 90%); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(197,138,70,0.30), rgba(197,138,70,0.08) 55%, transparent 72%);
  }
  .hero-ed-vials { position: relative; width: 100%; max-width: 440px; height: auto; filter: drop-shadow(0 34px 44px rgba(110,70,30,0.26)); }
  @media (max-width: 900px) {
    .hero-ed-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
    .hero-ed-eyebrow { justify-content: center; }
    .hero-ed-copy { margin-left: auto; margin-right: auto; }
    .hero-ed-copyblock .hero-ctas { justify-content: center; }
    .hero-ed-chips { justify-content: center; }
    .hero-ed-vials { max-width: 330px; }
  }

  /* Bac-water promo: a real highlighted banner, not eyebrow-weight text --
     the plain-text line was getting lost between the headline and CTAs. */
  .hero-bac-banner {
    display: flex; align-items: center; gap: 13px;
    background: linear-gradient(135deg, #2563EB, #1D4ED8);
    color: #fff; border-radius: 12px;
    padding: 14px 20px; margin: 2px 0 24px;
    box-shadow: 0 14px 30px rgba(122,74,30,0.32);
  }
  .hero-bac-banner__icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
  .hero-bac-banner__text { font-size: 14.5px; font-weight: 700; line-height: 1.35; letter-spacing: 0.01em; }
  @media (max-width: 900px) { .hero-bac-banner { justify-content: center; text-align: left; } }

  /* Corner ribbon on the hero product photo -- same offer, second placement,
     since the visual column otherwise has no mention of it at all. */
  .hero-bac-ribbon {
    position: absolute; top: 6px; right: 0; z-index: 2;
    background: #17130E; color: #fff;
    font-size: 12px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
    padding: 10px 18px; border-radius: 999px;
    border: 2px solid #2563EB;
    box-shadow: 0 10px 24px rgba(0,0,0,0.24);
    transform: rotate(5deg);
    text-align: center;
  }
  .hero-bac-ribbon span { display: block; color: #E7A75C; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; margin-top: 1px; }
  @media (max-width: 900px) {
    .hero-bac-ribbon { position: static; display: inline-block; transform: none; margin-bottom: 14px; }
  }

  /* Feature 3: stat strip -- the one sanctioned dark slim band beneath the hero */
  /* 2026-09-01 audit #25: was var(--ink) (#0B0B0C, same near-black as the
     header/footer) — a dark band sandwiched between light sections read as
     an accidental theme break rather than a deliberate one. Owner dislikes
     dark UIs sitewide; header/footer navy is the one explicitly-kept
     exception. Lightened to the paper/off-white surface with a brass top
     border so it still reads as a distinct "trust strip," not another page. */
  .stat-strip { background: var(--paper); padding: 40px 24px; border-top: 1px solid rgba(37,99,235,0.25); border-bottom: 1px solid rgba(37,99,235,0.25); }
  .stat-strip-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
  .stat-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 4vw, 40px); color: var(--brass-deep); letter-spacing: -0.01em; line-height: 1; margin-bottom: 8px; }
  .stat-label { font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--ink); opacity: 0.68; line-height: 1.4; }
  @media (max-width: 700px) { .stat-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } }

  /* Feature 4: how-we-compare table */
  .compare-section { padding: 72px 24px; background: var(--paper); }
  .compare-panels { max-width: 940px; margin: 40px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--gray-light); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
  .compare-col { padding: 26px 26px 30px; }
  .compare-col-rr { background: #fff; }
  .compare-col-market { background: #F4F1EB; }
  .compare-col-title { font-size: 14px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 18px; }
  .compare-col-rr .compare-col-title { color: var(--brass-deep); }
  .compare-col-market .compare-col-title { color: var(--gray-onlight); }
  .compare-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; padding: 9px 0; border-top: 1px solid rgba(0,0,0,0.06); }
  .compare-row:first-of-type { border-top: none; }
  .compare-mark { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; margin-top: 1px; }
  .compare-col-rr .compare-mark { background: rgba(37,99,235,0.15); color: var(--brass-deep); }
  .compare-col-market .compare-mark { background: rgba(0,0,0,0.06); color: var(--gray-onlight); }
  .compare-col-rr .compare-row span:last-child { color: var(--text); font-weight: 500; }
  .compare-col-market .compare-row span:last-child { color: var(--gray-onlight); }
  @media (max-width: 680px) { .compare-panels { grid-template-columns: 1fr; } }

  /* Feature 8: shop toolbar (search+chips already existed; adds sort+count row) */
  .shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
  .shop-toolbar .result-count { margin-bottom: 0; text-align: left; }
  .shop-sort-label { font-size: 12.5px; color: var(--gray); display: flex; align-items: center; gap: 8px; }
  .shop-sort { background: var(--surface); border: 1px solid var(--gray-light); color: var(--text-onpage); border-radius: 6px; padding: 7px 10px; font-size: 13px; font-family: inherit; cursor: pointer; }

  /* Feature 5: category-tinted card scenes -- tint is set per-card via the
     --cat-tint custom property (inline style), CSS just consumes it. */
  .pcard-top {
    --cat-tint: var(--teal, #2563EB);
    background:
      radial-gradient(ellipse 75% 65% at 50% 42%, color-mix(in srgb, var(--cat-tint) 26%, transparent) 0%, transparent 72%),
      linear-gradient(155deg, #0B0B0C 0%, #1A1815 100%);
  }
  .pcard-top::before, .pcard-top::after { background: var(--cat-tint, var(--teal, #2563EB)); }

  /* Feature 6: how-it-works */
  .how-it-works { padding: 76px 24px; background: #fff; }
  .hiw-steps { max-width: 1000px; margin: 44px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
  .hiw-step { text-align: center; padding: 0 12px; }
  .hiw-num { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(37,99,235,0.1); border: 1.5px solid rgba(37,99,235,0.35); color: var(--brass-deep); font-family: var(--font-display); font-weight: 700; font-size: 20px; margin-bottom: 18px; }
  .hiw-ic { display: block; margin: 0 auto 14px; color: var(--brass); }
  .hiw-step h3 { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
  .hiw-step p { font-size: 14px; color: var(--gray-onlight); line-height: 1.6; }
  @media (max-width: 720px) { .hiw-steps { grid-template-columns: 1fr; gap: 32px; } }

  /* Feature 7: sticky bottom conversion bar. Right-inset so it never collides
     with the fixed chat bubble (bottom:22px/right:22px, 66px, z-index 99998). */
  .sticky-cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: #fff; border-top: 1px solid var(--gray-light);
    box-shadow: 0 -6px 20px rgba(0,0,0,0.08);
    padding: 12px 110px 12px 20px;
    display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  }
  .sticky-cta-bar[hidden] { display: none; }
  .sticky-cta-txt { font-size: 13.5px; font-weight: 600; color: var(--text); }
  .sticky-cta-btn { background: var(--brass); color: #fff; text-decoration: none; padding: 10px 22px; border-radius: var(--radius); font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: background 0.15s; }
  .sticky-cta-btn:hover { background: var(--brass-deep); }
  .sticky-cta-x { position: absolute; right: 96px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--gray-onlight); font-size: 18px; cursor: pointer; padding: 4px; }
  body.has-sticky-cta { padding-bottom: 64px; }
  @media (max-width: 700px) {
    .sticky-cta-bar { padding: 10px 96px 10px 14px; gap: 10px; }
    .sticky-cta-txt { font-size: 12px; }
    .sticky-cta-x { right: 84px; }
  }

  /* Feature 9: card quick-add + mini-cart drawer */
  .pcard-hit { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
  .pcard-actions { display: flex; gap: 8px; padding: 0 20px 18px; margin-top: -6px; }
  .pcard-btn-view, .pcard-btn-add { flex: 1; text-align: center; border-radius: var(--radius); padding: 9px 8px; font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; }
  .pcard-btn-view { background: transparent; color: var(--ink-soft); border-color: var(--gray-light); }
  .pcard-btn-view:hover { border-color: var(--brass); color: var(--brass-deep); }
  .pcard-btn-add { background: var(--brass); color: #fff; position: relative; }
  .pcard-btn-add:hover { background: var(--brass-deep); }
  /* A card badged "Sold Out" must not offer a working quick-add (the PDP is
     where its stock messaging lives) -- the View button stays. */
  .pcard.sold-out .pcard-btn-add, .pcard.sold-out .quick-add-pop { display: none; }
  .quick-add-pop {
    /* Anchored INSIDE the card, just above the actions row: .pcard has
       overflow:hidden, so a popover hung above the card's top edge
       (bottom: calc(100% + 8px)) would be clipped to invisibility. */
    position: absolute; z-index: 40; bottom: 60px; left: 12px; right: 12px;
    background: #fff; border: 1px solid var(--gray-light); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18); padding: 10px; display: none;
    max-height: 280px; overflow-y: auto;
  }
  .quick-add-pop.open { display: block; }
  .quick-add-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 6px; border-radius: 6px; cursor: pointer; font-size: 12.5px; }
  .quick-add-pop-row:hover { background: rgba(37,99,235,0.08); }
  .quick-add-pop-dose { color: var(--text); font-weight: 600; }
  .quick-add-pop-price { color: var(--brass-deep); font-weight: 700; }

  .mini-cart-backdrop { position: fixed; inset: 0; background: rgba(11,11,12,0.35); z-index: 10000; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  .mini-cart-backdrop.open { opacity: 1; pointer-events: auto; }
  .mini-cart-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); z-index: 10001;
    background: #fff; box-shadow: -12px 0 36px rgba(0,0,0,0.22);
    transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.22,0.61,0.36,1);
    display: flex; flex-direction: column;
  }
  .mini-cart-drawer.open { transform: translateX(0); }
  .mc-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--gray-light); }
  .mc-head h3 { font-family: var(--font-display); font-size: 18px; color: var(--text); }
  .mc-close { background: none; border: none; font-size: 20px; color: var(--gray-onlight); cursor: pointer; padding: 4px; }
  .mc-items { flex: 1; overflow-y: auto; padding: 10px 20px; }
  .mc-empty { color: var(--gray-onlight); font-size: 14px; padding: 30px 0; text-align: center; }
  .mc-line { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
  .mc-line-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
  .mc-line-dose { font-size: 12px; color: var(--gray-onlight); margin-top: 2px; }
  .mc-qty { display: flex; align-items: center; gap: 6px; }
  .mc-qty button { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--gray-light); background: #fff; cursor: pointer; font-size: 13px; }
  .mc-line-price { font-size: 13px; font-weight: 700; color: var(--text); min-width: 56px; text-align: right; }
  .mc-foot { padding: 16px 20px 20px; border-top: 1px solid var(--gray-light); }
  .mc-subtotal { display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
  .mc-checkout { display: block; text-align: center; background: var(--brass); color: #fff; text-decoration: none; padding: 13px; border-radius: var(--radius); font-weight: 700; font-size: 14.5px; }
  .mc-checkout:hover { background: var(--brass-deep); }

  /* Feature 10: high-contrast price treatment (accent = copper, one consistent color) */
  .price-list-old { color: var(--gray-onlight); text-decoration: line-through; font-weight: 500; }
  .price-sale-current { color: var(--brass-deep); font-weight: 800; }
  .price-discount-pill { display: inline-block; background: rgba(37,99,235,0.14); color: var(--brass-deep); font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }

  /* Shared section primitives (salvaged from old index.html) */
  .section-label { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
  .section-title { font-size: clamp(24px, 4vw, 36px); font-weight: 700; color: var(--text-onpage); letter-spacing: -0.02em; margin-bottom: 16px; }
  .section-sub { color: var(--gray); max-width: 560px; margin-bottom: 48px; }
  .center { text-align: center; }
  .center .section-sub { margin-left: auto; margin-right: auto; }

  /* HOME HERO (brand-level) */
  .home-hero { position: relative; background: var(--navy); padding: 84px 24px 76px; overflow: hidden; text-align: center; }
  .home-hero-bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 20% 50%, rgba(37,99,235,0.14) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 30%, rgba(197,138,70,0.10) 0%, transparent 50%),
      repeating-linear-gradient(60deg, transparent, transparent 40px, rgba(37,99,235,0.03) 40px, rgba(37,99,235,0.03) 41px),
      repeating-linear-gradient(-60deg, transparent, transparent 40px, rgba(37,99,235,0.03) 40px, rgba(37,99,235,0.03) 41px);
  }
  .home-hero-content { position: relative; max-width: 760px; margin: 0 auto; }
  .hero-kicker { font-family: var(--font-display); font-style: italic; font-size: 14px; font-weight: 500; letter-spacing: 0.04em; color: var(--teal); margin-bottom: 14px; }
  .home-hero h1 { font-family: var(--font-display); font-size: clamp(32px, 6vw, 56px); font-weight: 600; color: var(--white); letter-spacing: -0.01em; line-height: 1.1; margin-bottom: 18px; }
  .home-hero h1 span { color: var(--teal); }
  .home-hero p { color: rgba(237,231,222,0.72); font-size: clamp(15px, 2vw, 18px); font-weight: 300; line-height: 1.7; margin-bottom: 30px; }
  .hero-focus-note { max-width: 560px; margin: -14px auto 30px; font-size: 14px !important; color: rgba(237,231,222,0.6) !important; }
  .hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

  /* HERO VIAL ART — pure CSS gradients + shadow, no image files */
  /* Rendered group shot (img/hero-vials.png) — replaces three CSS divs that
     read as gradient bars with a floating square for a cap. */
  .hero-vials { display: block; width: 100%; max-width: 420px; height: auto; margin: 26px auto 0; }
  @media (max-width: 640px) { .hero-vials { max-width: 320px; margin-top: 18px; } }
  .btn-ghost {
    display: inline-block; background: rgba(11,31,63,0.06); color: var(--white);
    text-decoration: none; padding: 14px 32px; border-radius: var(--radius);
    font-size: 15px; font-weight: 600; border: 1px solid rgba(11,31,63,0.18);
    cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.15s;
  }
  .btn-ghost:hover { background: rgba(11,31,63,0.12); border-color: var(--teal); transform: translateY(-1px); }

  /* TRUST BAR */
  .trust-bar { background: var(--off-white); border-bottom: 1px solid var(--gray-light); }
  .trust-inner { max-width: 1100px; margin: 0 auto; padding: 22px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .trust-item { display: flex; align-items: center; gap: 11px; justify-content: center; }
  .trust-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; background: rgba(37,99,235,0.12); color: var(--brass-deep); display: flex; align-items: center; justify-content: center; font-size: 17px; }
  .trust-txt { font-size: 13px; line-height: 1.35; }
  .trust-txt b { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
  .trust-txt span { color: var(--gray-onlight); font-size: 12px; }

  .ws-hero { padding: 56px 24px 28px; text-align: center; }
  .ws-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 12px; }
  .ws-card { background: var(--surface); border: 1px solid rgba(11,31,63,0.1); border-radius: var(--radius); padding: 20px; }
  .ws-card h3 { font-size: 15px; margin: 0 0 6px; color: var(--white); }
  .ws-card p { font-size: 13px; color: rgba(11,31,63,0.6); line-height: 1.6; margin: 0; }
  .ws-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .ws-step { background: rgba(11,31,63,0.03); border-radius: var(--radius); padding: 18px; }
  .ws-step b { display: block; color: var(--teal); font-size: 12px; letter-spacing: .1em; margin-bottom: 6px; }
  .ws-step h4 { margin: 0 0 5px; font-size: 14px; color: var(--white); }
  .ws-step p { margin: 0; font-size: 13px; color: rgba(11,31,63,0.6); line-height: 1.6; }
  .ws-form { background: var(--surface); border: 1px solid rgba(11,31,63,0.1); border-radius: var(--radius); padding: 26px; max-width: 780px; margin: 0 auto; }
  .ws-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .ws-form label { display: block; font-size: 12px; font-weight: 600; color: rgba(11,31,63,0.65); margin-bottom: 5px; }
  .ws-form input, .ws-form select, .ws-form textarea { width: 100%; background: rgba(0,0,0,0.28); border: 1px solid rgba(11,31,63,0.16); border-radius: 8px; padding: 11px 12px; color: var(--white); font-family: inherit; font-size: 14px; }
  .ws-form textarea { min-height: 82px; resize: vertical; }
  .ws-full { grid-column: 1 / -1; }
  .ws-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: rgba(11,31,63,0.72); line-height: 1.6; }
  .ws-check input { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; }
  .ws-msg { display: none; border-radius: 8px; padding: 14px 16px; font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
  .ws-msg.ok { background: rgba(22,163,74,0.14); border: 1px solid rgba(22,163,74,0.45); color: #86efac; }
  .ws-msg.err { background: rgba(220,38,38,0.12); border: 1px solid rgba(220,38,38,0.4); color: #fca5a5; }
  .ws-msg code { background: rgba(0,0,0,0.35); padding: 2px 7px; border-radius: 4px; font-size: 15px; color: var(--teal); }
  .ws-terms { max-width: 860px; margin: 0 auto; font-size: 13px; color: rgba(11,31,63,0.55); line-height: 1.8; }
  .ws-terms h3 { color: var(--white); font-size: 15px; margin: 0 0 8px; }
  @media (max-width: 860px) { .ws-cards, .ws-steps { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .ws-cards, .ws-steps, .ws-grid { grid-template-columns: 1fr; } }
  /* PayPal acceptance badge — official brand colors (#003087 navy / #009CDE cyan)
     on a white card so it pops against the dark storefront. Purely a trust/awareness
     mark: it is not a payment button and never carries a checkout link. */
  /* Compact top-bar lockup — white pill so the brand blues stay legible on the dark banner. */
  .pp-chip { display: inline-flex; align-items: center; gap: 5px; background: #ffffff; border-radius: 999px;
    padding: 3px 9px 3px 7px; vertical-align: middle; line-height: 1; margin: 0 3px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4); position: relative; top: -1px; }
  .pp-chip svg { width: 13px; height: 15px; display: block; flex-shrink: 0; }
  .pp-chip .pp-w { font-family: Helvetica, Arial, sans-serif; font-weight: 800; font-size: 13px;
    letter-spacing: -0.02em; text-transform: none; }
  .pp-chip .pp-w .a { color: #003087; }
  .pp-chip .pp-w .b { color: #009CDE; }
  /* Card-brand marks — same white-pill treatment as the PayPal chip so the two read
     as a single payment lockup on the dark bar. */
  .cc-chip { display: inline-flex; align-items: center; gap: 7px; background: #ffffff;
    border-radius: 999px; padding: 4px 10px; vertical-align: middle; line-height: 1;
    margin: 0 3px; box-shadow: 0 1px 5px rgba(0,0,0,0.4); position: relative; top: -1px; }
  .cc-m { height: 13px; width: auto; display: block; flex-shrink: 0; }
  @media (max-width: 600px) { .cc-chip { gap: 5px; padding: 3px 8px; } .cc-m { height: 11px; } }

  .pp-badge { display: flex; align-items: center; gap: 16px; background: #ffffff; border: 1px solid rgba(0,48,135,0.18);
    border-radius: 14px; padding: 16px 20px; box-shadow: 0 6px 20px rgba(0,0,0,0.28); max-width: 420px; }
  .pp-badge.pp-center { margin: 0 auto; }
  .pp-mark { width: 44px; height: 50px; flex-shrink: 0; }
  .pp-copy { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .pp-kicker { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; color: #6b7280; text-transform: uppercase; }
  .pp-word { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; font-family: Helvetica, Arial, sans-serif; margin: 1px 0 3px; }
  .pp-word .pp-pay { color: #003087; }
  .pp-word .pp-pal { color: #009CDE; }
  .pp-sub { font-size: 12px; color: #4b5563; }
  @media (max-width: 520px) {
    .pp-badge { gap: 12px; padding: 13px 15px; }
    .pp-mark { width: 36px; height: 41px; }
    .pp-word { font-size: 25px; }
    .pp-sub { font-size: 11px; }
  }

  /* GENERIC HOME SECTION WRAP */
  .home-section { max-width: 1200px; margin: 0 auto; padding: 64px 24px; }
  .home-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
  .home-section-head .hs-title { font-size: clamp(22px, 3.5vw, 30px); font-weight: 700; color: var(--text-onpage); letter-spacing: -0.02em; }
  .home-section-head .hs-sub { font-size: 14px; color: var(--gray); margin-top: 4px; }
  .hs-link { font-size: 14px; font-weight: 600; color: var(--teal-dark); text-decoration: none; white-space: nowrap; }
  .hs-link:hover { text-decoration: underline; }

  /* SALE BADGE + COMPARE-AT (used on home tile, shop card, PDP) */
  .pcard-sale { position: absolute; top: 14px; right: 14px; background: var(--danger); color: var(--ink); border-radius: 4px; padding: 3px 9px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
  .pcard-editor { display: inline-block; background: rgba(245,158,11,0.16); color: var(--amber-deep); border: 1px solid rgba(245,158,11,0.4); border-radius: 4px; padding: 3px 9px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; }
  .price-was { color: var(--gray-onlight); text-decoration: line-through; font-size: 13px; margin-left: 7px; font-weight: 500; }
  .pcard.onsale { border-color: rgba(239,68,68,0.45); box-shadow: 0 6px 28px rgba(239,68,68,0.12); }

  /* CATEGORY TILES */
  .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
  .cat-tile {
    position: relative; display: block; text-decoration: none; color: var(--white);
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    border: 1px solid var(--gray-light); border-radius: 12px; padding: 26px 22px;
    overflow: hidden; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  }
  .cat-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.16); border-color: rgba(37,99,235,0.5); }
  .cat-tile .ct-accent { width: 38px; height: 4px; border-radius: 2px; margin-bottom: 16px; }
  .cat-tile .ct-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
  .cat-tile .ct-count { font-size: 12px; color: rgba(11,31,63,0.55); margin-top: 6px; }
  .cat-tile .ct-go { font-size: 13px; font-weight: 600; color: var(--teal); margin-top: 14px; }

  /* WHY STRIP */
  .why-strip { background: var(--off-white); }
  .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1100px; margin: 0 auto; }
  .why-card { background: var(--white); border: 1px solid var(--gray-light); border-radius: 12px; padding: 24px 20px; text-align: center; }
  .why-card .wc-ic { font-size: 26px; margin-bottom: 10px; }
  .why-card h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
  .why-card p { font-size: 13px; color: var(--gray-onlight); line-height: 1.6; }

  /* FAQ teaser + faq.html list (salvaged) */
  .faq-list { max-width: 720px; margin: 0 auto; }
  .faq-item { border: 1px solid var(--gray-light); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
  .faq-question { width: 100%; background: none; border: none; text-align: left; padding: 18px 20px; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--text-onpage); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: background 0.15s, color 0.15s; }
  .faq-question:hover { background: var(--off-white); color: var(--text); }
  .faq-chevron { font-size: 18px; color: var(--teal); transition: transform 0.25s; flex-shrink: 0; }
  .faq-item.open .faq-chevron { transform: rotate(180deg); }
  .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
  .faq-answer-inner { padding: 0 20px 18px; font-size: 14px; color: var(--gray); line-height: 1.75; border-top: 1px solid var(--gray-light); padding-top: 14px; }
  .faq-cta { text-align: center; margin-top: 28px; }

  /* REVIEWS strip (salvaged, navy) */
  .reviews-strip { background: var(--navy); }
  .reviews-strip .section-label { color: var(--teal); }
  .reviews-strip .section-title { color: var(--white); }
  .reviews-meta { font-size: 16px; font-weight: 700; color: #fbbf24; margin-bottom: 36px; }
  .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; }
  .review-card { background: var(--surface); border: 1px solid rgba(37,99,235,0.18); border-radius: 12px; padding: 24px; text-align: left; }
  .review-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; gap: 10px; }
  .review-author { font-size: 15px; font-weight: 700; color: var(--white); }
  .review-date { font-size: 12px; color: rgba(11,31,63,0.4); white-space: nowrap; }
  .review-stars { color: #fbbf24; font-size: 16px; letter-spacing: 1px; margin-bottom: 8px; }
  .review-text { font-size: 14px; color: rgba(11,31,63,0.7); line-height: 1.75; margin-bottom: 12px; }
  .verified-badge { display: inline-block; background: rgba(37,99,235,0.12); color: var(--teal); border: 1px solid rgba(37,99,235,0.3); border-radius: 4px; padding: 2px 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }

  /* Educational research-background block (PDP + faq page reuse) */
  .research-bg { background: var(--off-white); }
  .research-bg .rb-inner { max-width: 720px; margin: 0 auto; }
  .research-bg p { color: var(--gray-onlight); font-size: 15px; line-height: 1.8; margin-bottom: 16px; }
  .research-bg p:last-of-type { margin-bottom: 24px; }
  /* .research-bg (and the referral-terms "paper-panel") are explicit light
     surfaces on the dark page ground — their headings must stay dark. */
  .research-bg .section-title,
  .paper-panel .section-title,
  .why-strip .section-title { color: var(--text); }
  .research-bg .section-sub,
  .paper-panel .section-sub,
  .why-strip .section-sub { color: var(--gray-onlight); }
  .paper-panel { color: var(--text); }
  .paper-panel h1, .paper-panel h2, .paper-panel h3 { color: var(--text); }
  .research-key { background: rgba(37,99,235,0.07); border-left: 3px solid var(--teal); border-radius: 0 var(--radius) var(--radius) 0; padding: 16px 20px; font-size: 14px; color: var(--text); line-height: 1.7; }

  /* CALCULATOR page */
  .calc-section { background: var(--navy); padding: 64px 24px 80px; }
  .calc-inner { max-width: 680px; margin: 0 auto; }
  .calc-box { background: var(--surface); border: 1px solid rgba(37,99,235,0.2); border-radius: 12px; padding: 28px; margin-top: 32px; }
  .calc-field-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(11,31,63,0.5); margin-bottom: 8px; }
  .calc-input-wrap { display: flex; align-items: center; background: #16151B; border: 1px solid rgba(11,31,63,0.12); border-radius: var(--radius); overflow: hidden; transition: border-color 0.2s; }
  .calc-input-wrap input { flex: 1; background: none; border: none; padding: 11px 14px; font-size: 15px; font-weight: 600; color: #fff; font-family: inherit; outline: none; width: 0; }
  .calc-input-wrap input:focus { outline: none; }
  .calc-input-wrap:focus-within { border-color: var(--teal); }
  .calc-input-wrap .unit { padding: 0 14px 0 4px; font-size: 13px; color: rgba(11,31,63,0.4); white-space: nowrap; }

  /* the split-screen reference -- split-screen editorial hero: enormous whitespace,
     restrained accent, near-zero noise. */
  .hero-split {
    display: grid; grid-template-columns: minmax(0,6fr) minmax(0,6fr);
    min-height: 640px; background: var(--ink);
  }
  .hero-split-copy {
    display: flex; flex-direction: column; justify-content: center;
    padding: 96px 72px; max-width: 640px;
  }
  .hero-split-eyebrow {
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--brass-deep); margin-bottom: 26px;
  }
  .hero-split-h1 {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(34px, 4.4vw, 54px); line-height: 1.14; letter-spacing: -0.01em;
    color: var(--paper); margin-bottom: 26px;
  }
  .hero-split-h1 em { font-style: italic; color: var(--brass-deep); }
  .hero-split-copy-text {
    font-size: 17px; line-height: 1.85; color: var(--muted); margin-bottom: 40px; max-width: 52ch;
  }
  .hero-split-btn2 {
    display: inline-block; padding: 14px 32px; border-radius: 2px;
    font-size: 15px; font-weight: 500; text-decoration: none;
    color: var(--paper); border: 1px solid var(--line); background: transparent;
    transition: border-color 0.2s, background 0.2s;
  }
  .hero-split-btn2:hover { border-color: var(--brass); background: var(--surface); }
  .hero-split .btn-primary { border-radius: 2px; }
  .hero-split-chips {
    display: flex; gap: 22px; flex-wrap: wrap; margin-top: 48px;
    padding-top: 24px; border-top: 1px solid var(--line);
  }
  .hero-split-chips span {
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--dim);
  }
  .hero-split-visual {
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, #E9DCC8 0%, #D9C6A8 55%, #C9AF88 100%);
    display: flex; align-items: center; justify-content: center; padding: 48px;
  }
  .hero-split-photo { max-width: 420px; width: 100%; }
  .hero-split-photo img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(60,40,10,0.28)); }
  .hero-split .coa-card { position: absolute; left: 40px; bottom: 40px; max-width: 260px; }
  @media (max-width: 980px) {
    .hero-split { grid-template-columns: 1fr; min-height: 0; }
    .hero-split-copy { padding: 56px 28px 40px; max-width: none; text-align: left; }
    .hero-split-visual { padding: 40px 28px 96px; min-height: 360px; }
    .hero-split .coa-card { left: 28px; right: 28px; bottom: 24px; max-width: none; }
  }

  /* Send It Peptides -- busy conversion hero: bright ground, heavy two-colour
     display type, scattered product renders, floating proof cards, countdown
     promo bar, review stars, badges. */
  .hero-busy-promo {
    background: var(--paper); color: var(--surface);
    text-align: center; font-size: 13.5px; font-weight: 700; letter-spacing: 0.02em;
    padding: 10px 16px;
  }
  .hero-busy-promo strong { color: var(--brass-lite); letter-spacing: 0.04em; }
  .promo-countdown {
    display: inline-block; font-variant-numeric: tabular-nums; font-weight: 800;
    background: var(--brass); color: var(--surface); padding: 2px 8px; border-radius: 4px; margin-left: 4px;
  }
  .hero-busy {
    position: relative; overflow: hidden;
    background: radial-gradient(ellipse 70% 60% at 85% 15%, rgba(255,77,46,0.14), transparent 60%),
      linear-gradient(160deg, #EEF4FF 0%, #DCEBFF 45%, #FFFFFF 100%);
    padding: 56px 24px 72px;
  }
  .hero-busy-grid {
    position: relative; z-index: 1; max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: minmax(0,6fr) minmax(0,6fr); gap: 40px; align-items: center;
  }
  .hero-busy-h1 {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(36px, 6vw, 64px); line-height: 1.02; letter-spacing: -0.01em;
    color: var(--paper); text-transform: uppercase; margin-bottom: 20px;
  }
  .hero-busy-h1 .accent { color: var(--brass); }
  .hero-busy-sub { font-size: 16px; line-height: 1.7; color: var(--muted); margin-bottom: 26px; max-width: 52ch; }
  .hero-busy .hero-ctas { justify-content: flex-start; margin-bottom: 18px; }
  .hero-busy .btn-primary { border-radius: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
  .hero-busy-btn2 {
    display: inline-block; padding: 14px 30px; border-radius: 10px;
    font-size: 15px; font-weight: 700; text-decoration: none;
    color: var(--paper); border: 2px solid var(--paper); background: transparent;
  }
  .hero-busy-btn2:hover { background: var(--paper); color: var(--surface); }
  .hero-busy-reviews { font-size: 14px; color: var(--brass); letter-spacing: 0.08em; margin-bottom: 14px; }
  .hero-busy-reviews span { color: var(--muted); letter-spacing: normal; margin-left: 6px; font-weight: 600; }
  .hero-busy-badges { display: flex; gap: 10px; flex-wrap: wrap; }
  .hero-busy-badge {
    font-size: 12px; font-weight: 700; color: var(--paper);
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
    box-shadow: 0 2px 8px rgba(11,18,32,0.06);
  }
  .hero-busy-visual { position: relative; min-height: 420px; }
  .hero-scatter-img {
    position: absolute; width: 30%; max-width: 190px; filter: drop-shadow(0 18px 24px rgba(11,18,32,0.16));
  }
  .hero-scatter-1 { top: 2%; left: 8%; width: 34%; max-width: 210px; z-index: 3; }
  .hero-scatter-2 { top: 32%; right: 2%; width: 26%; max-width: 165px; z-index: 2; opacity: 0.92; }
  .hero-scatter-3 { bottom: 6%; left: 22%; width: 24%; max-width: 150px; z-index: 1; opacity: 0.85; }
  .hero-float-card {
    position: absolute; background: var(--surface); border-radius: 12px;
    box-shadow: 0 12px 30px rgba(11,18,32,0.16); padding: 10px 14px;
    font-size: 12.5px; font-weight: 700; color: var(--paper); display: flex; align-items: center; gap: 8px;
  }
  .hero-float-1 { top: 8%; right: 20%; }
  .hero-float-2 { bottom: 18%; left: 4%; }
  .hero-busy .coa-card { position: absolute; bottom: -6%; right: 6%; max-width: 230px; z-index: 4; }
  @media (max-width: 980px) {
    .hero-busy-grid { grid-template-columns: 1fr; }
    .hero-busy .hero-ctas, .hero-busy-reviews, .hero-busy-badges { justify-content: center; }
    .hero-busy-visual { min-height: 320px; margin-top: 24px; }
    .hero-busy .coa-card { position: static; margin: 20px auto 0; }
  }

  .coa-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 18px 20px; box-shadow: 0 16px 40px rgba(0,0,0,0.14);
  }
  .coa-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .coa-card-pass {
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; color: var(--surface);
    background: var(--verify); border-radius: 4px; padding: 3px 8px;
  }
  .coa-card-label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray-onlight); }
  .coa-card-compound { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink-soft); margin-bottom: 10px; }
  .coa-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 12px; }
  .coa-card-grid dt { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-onlight); }
  .coa-card-grid dd { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin: 0; }
  .coa-card-foot { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
  .coa-qr {
    flex: none; width: 34px; height: 34px; border-radius: 4px;
    background:
      linear-gradient(90deg, var(--ink-soft) 0 30%, transparent 30% 40%, var(--ink-soft) 40% 70%, transparent 70% 80%, var(--ink-soft) 80%),
      linear-gradient(0deg, var(--ink-soft) 0 30%, transparent 30% 40%, var(--ink-soft) 40% 70%, transparent 70% 80%, var(--ink-soft) 80%);
    background-blend-mode: multiply; background-color: var(--off-white);
    border: 1px solid var(--line);
  }
  .coa-card-link { font-size: 12px; font-weight: 700; color: var(--brass-deep); text-decoration: none; }
  .coa-card-link:hover { text-decoration: underline; }

  /* ============================================================
     SEND IT PEPTIDES -- design system, applied site-wide.
     ============================================================ */
  body {
    --navy-deep: #0B1F3F;
    --navy-mid: #0F253F;
    --blue: #2563EB;
    --hot: #E8452B;
    --gold: #E6D075;
    --hair: #D3DAEA;
    --tint: #F4F8FF;
    --slate: #64748B;
    background: #FFFFFF;
    font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
    color: #111827;
  }
  body h1, body h2, body h3, body .section-title, body .hs-title,
  body .pdp-info h1, body .cart-page-wrap h1, body .paper-panel h1,
  body .paper-panel h2, body .acct-card h1, body .shop-hero h1,
  body .related-section h2, body .pdp-about h2, body .storage-card h2,
  body .batch-panel-head h2, body .pdp-faq > h2, body .modal-head h2,
  body .compare-col-title, body .ws-hero h1, body .pcard-name, body .stat-num {
    font-family: 'Archivo', 'Segoe UI', Arial, sans-serif;
    font-weight: 800; color: var(--navy-deep); letter-spacing: -.01em;
  }
  body .section-title { font-size: 30px; }

  /* ---- Top bar ---- */
  body .top-bar {
    background: linear-gradient(90deg,var(--navy-mid),#173659); color: #FFFFFF;
    text-align: center; font-size: 14px; padding: 9px 16px; border: 0;
  }
  body .top-bar b, body .top-bar strong { color: var(--gold); }

  /* ---- Header / nav ---- */
  body header {
    background: #D1DCE5; border-bottom: 0;
    box-shadow: 0 1px 4px rgba(15,37,63,.12); backdrop-filter: none;
  }
  body header .nav-inner { max-width: 1200px; padding: 12px 24px; }
  body header .logo {
    font-family: 'Archivo', 'Segoe UI', Arial, sans-serif; font-weight: 900;
    font-size: 23px; letter-spacing: -.4px; color: var(--navy-mid); text-transform: uppercase;
  }
  body header .logo span { color: var(--hot); }
  body header nav ul > li > a, body header nav ul > li > button {
    font-size: 14.5px; font-weight: 600; color: #2A3040; text-transform: none; letter-spacing: 0;
  }
  body header nav ul > li > a:hover, body header nav ul > li > button:hover { color: var(--blue); }
  body .nav-dd { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 12px; box-shadow: 0 14px 34px rgba(11,31,63,.14); }
  body .nav-dd a { color: #2A3040; font-size: 14px; }
  body .nav-dd a:hover, body .nav-dd a:focus-visible { background: var(--tint); color: var(--blue); }
  body .cart-btn { color: var(--navy-mid); }
  body .cart-btn:hover { color: var(--blue); }
  body .cart-count { background: var(--hot); color: #FFFFFF; }
  body .hamburger span { background: var(--navy-mid); }
  body .mobile-nav { background: #FFFFFF; border-top: 1px solid var(--hair); }
  body .mobile-nav a { color: #2A3040; border-bottom: 1px solid var(--hair); }
  body .mobile-nav a.mobile-nav-sub { color: var(--slate); }
  body .mobile-nav-label { color: #94A3B8; }

  /* ---- Buttons ---- */
  body .btn-primary, body .mc-checkout, body .btn-next, body .sticky-cta-btn,
  body .ref-promo-cta, body .rr-pop-form button, body .promo-row button, body .pcard-btn-add {
    background: var(--blue); color: #FFFFFF; border: 0; border-radius: 30px;
    font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none;
    padding: 13px 28px; box-shadow: none;
  }
  body .btn-primary:hover, body .mc-checkout:hover, body .btn-next:hover,
  body .sticky-cta-btn:hover, body .ref-promo-cta:hover, body .rr-pop-form button:hover,
  body .promo-row button:hover, body .pcard-btn-add:hover { filter: brightness(1.12); background: var(--blue); color: #FFFFFF; }
  body .btn-next:disabled { background: #9CA3AF; color: #FFFFFF; filter: none; }
  body .btn-outline, body .btn-ghost, body .pcard-btn-view, body .btn-back, body .faq-cta .btn-ghost {
    background: transparent; color: var(--blue); border: 1.5px solid var(--blue);
    border-radius: 24px; font-weight: 700; font-size: 13.5px; text-transform: none; letter-spacing: 0;
  }
  body .btn-outline:hover, body .btn-ghost:hover, body .pcard-btn-view:hover,
  body .btn-back:hover, body .faq-cta .btn-ghost:hover { background: var(--blue); color: #FFFFFF; border-color: var(--blue); }

  /* ---- Product cards ---- */
  body .pcard { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 16px; box-shadow: none; }
  body .pcard:hover { box-shadow: 0 14px 34px rgba(11,31,63,.14); transform: translateY(-3px); border-color: var(--hair); }
  body .pcard-top {
    background: linear-gradient(180deg,#EEF3FB,#CFE0F4); border-radius: 12px;
    margin: 14px 14px 0; padding: 10px; height: 180px; aspect-ratio: auto;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  body .pcard-top::before, body .pcard-top::after { display: none; }
  body .pcard-img { max-height: 100%; max-width: 88%; width: auto; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(11,31,63,.20)); }
  body .pcard-body { padding: 14px 16px 6px; }
  body .pcard-cat { color: var(--slate); font-size: 10.5px; }
  body .pcard-name { font-size: 15.5px; font-weight: 800; }
  body .pcard-from, body .pcard-from b, body .price-sale-current { color: var(--navy-deep); font-weight: 800; }
  body .price-list-old, body .price-was { color: #94A3B8; font-weight: 400; }
  body .pcard-doses { color: var(--slate); }
  body .pcard-sale, body .price-discount-pill { background: #DC2626; color: #FFFFFF; border: 0; border-radius: 12px; }
  body .pcard-ribbon { background: var(--navy-deep); color: var(--gold); border: 0; border-radius: 12px; }
  body .pcard-purity-pill { background: #16A34A; color: #FFFFFF; border: 0; border-radius: 12px; }
  body .pcard-editor { color: var(--hot); }
  body .pcard-actions { padding: 0 16px 16px; }
  body .quick-add-pop { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 12px; box-shadow: 0 14px 34px rgba(11,31,63,.16); }
  body .quick-add-pop-row { color: var(--navy-deep); }
  body .quick-add-pop-row:hover { background: var(--tint); }

  /* ---- Surfaces / panels ---- */
  body .paper-panel, body .acct-card, body .cart-summary, body .checkout-panel,
  body .storage-card, body .why-card, body .faq-item, body .modal, body .rr-pop,
  body .batch-panel, body .vol-pricing, body .cat-tile, body .review-card,
  body .compare-col, body .ws-card, body .hiw-step, body .blog-card, body .pdp-buybox,
  body .related-section, body .calc-box, body .mini-cart-drawer, body .pdp-faq-item {
    background: #FFFFFF; border: 1px solid var(--hair); border-radius: 16px; box-shadow: none;
  }
  body .faq-item, body .pdp-faq-item { background: var(--tint); border-radius: 12px; }
  body .cat-tile:hover, body .blog-card:hover { border-color: var(--blue); box-shadow: 0 14px 34px rgba(11,31,63,.12); }
  body .why-strip, body .compare-section, body .reviews-strip, body .how-it-works { background: var(--tint); }
  body .stat-strip { background: var(--tint); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); color: #2A3040; }
  body .stat-num { color: var(--navy-deep); font-size: 30px; }
  body .stat-label { color: var(--slate); }
  body .section-sub, body .hs-sub, body .why-card p, body .hiw-step p, body .faq-answer-inner { color: var(--slate); }
  body .trust-bar { background: var(--tint); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
  body .trust-ic { background: var(--blue); color: #FFFFFF; }
  body .trust-txt b { color: var(--navy-deep); }
  body .trust-txt span { color: var(--slate); }
  body .breadcrumb, body .breadcrumb a { color: var(--slate); }
  body .breadcrumb a:hover { color: var(--blue); }

  /* ---- Forms ---- */
  body .form-group input, body .form-group select, body .acct-field input,
  body .ws-form input, body .ws-form select, body .ws-form textarea,
  body .shop-search, body .promo-row input, body .rr-pop-form input,
  body .calc-input-wrap input, body .shop-sort, body .news-input {
    background: #FFFFFF; border: 1.5px solid var(--hair); border-radius: 10px;
    color: #111827; padding: 12px 16px; font-family: 'Inter', sans-serif; font-size: 14px;
  }
  body .form-group input:focus, body .form-group select:focus, body .acct-field input:focus,
  body .ws-form input:focus, body .shop-search:focus, body .rr-pop-form input:focus,
  body .calc-input-wrap input:focus, body .news-input:focus {
    outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.18);
  }
  body .form-group label, body .acct-field label, body .ws-form label, body .calc-field-label {
    color: var(--navy-deep); font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0;
  }
  body .form-group input::placeholder, body .shop-search::placeholder { color: #9CA3AF; }
  body .chip, body .pay-method-tab, body .dose-btn, body .acct-tab {
    background: #FFFFFF; border: 1.5px solid var(--hair); color: var(--navy-deep); border-radius: 24px;
  }
  body .chip.active, body .pay-method-tab.active, body .dose-btn.active, body .acct-tab.active {
    background: var(--blue); border-color: var(--blue); color: #FFFFFF;
  }
  body .chip:hover, body .dose-btn:hover { border-color: var(--blue); color: var(--navy-deep); }

  /* ---- Links / accents ---- */
  body .hs-link, body .coa-card-link, body .acct-link, body .pcard-coa-link,
  body .pdp-reading a, body .cart-empty a { color: var(--blue); }
  body .hs-link:hover, body .acct-link:hover, body .pdp-reading a:hover { color: #1D4ED8; }
  body .verified-badge, body .coa-card-pass, body .acct-badge.verified { background: #16A34A; color: #FFFFFF; }

  /* ---- Footer ---- */
  body footer { background: var(--navy-deep); color: #9CA3AF; padding: 56px 24px 24px; font-size: 13.5px; }
  body footer .footer-logo { font-family: 'Archivo', 'Segoe UI', Arial, sans-serif; font-weight: 900; font-size: 22px; color: #FFFFFF; text-transform: uppercase; }
  body footer .footer-logo span { color: var(--hot); }
  body footer a { color: #9CA3AF; }
  body footer a:hover { color: var(--gold); }
  body .footer-top { border-bottom: 1px solid #1A3049; }
  body .footer-bottom { color: #475569; border-top: 1px solid #1A3049; padding-top: 18px; }
  body .disclaimer-box { background: rgba(255, 255, 255, .03); border: 1px solid #1A3049; color: #64748B; }
  body .disclaimer-box strong { color: #9CA3AF; }
  body .disclaimer-box a { color: var(--gold); }
  body .sticky-cta-bar { background: var(--navy-deep); border-top: 1px solid #1A3049; }
  body .sticky-cta-txt { color: #C7D2E4; }

  /* ---- Homepage hero (navy photo band, per the approved mockup) ---- */
  body .hero-busy {
    background:
      linear-gradient(90deg, rgba(30,52,84,.86) 0%, rgba(30,52,84,.62) 45%, rgba(15,37,63,.45) 100%),
      url('/img/si-hero-bg.png') center/cover no-repeat, var(--navy-mid);
    padding: 96px 24px 100px;
  }
  body .hero-busy-h1 { font-family: 'Archivo', sans-serif; font-weight: 800; color: #FFFFFF; text-transform: none; font-size: clamp(32px,4.6vw,46px); line-height: 1.15; }
  body .hero-busy-h1 .accent { color: var(--gold); }
  body .hero-busy-sub { color: #E3EAF5; font-size: 17px; }
  body .hero-busy .btn-primary { border-radius: 30px; text-transform: none; letter-spacing: 0; }
  body .hero-busy-btn2 { color: #FFFFFF; border: 2px solid rgba(255, 255, 255, .55); border-radius: 30px; }
  body .hero-busy-btn2:hover { background: #FFFFFF; color: var(--navy-mid); }
  body .hero-busy-reviews { color: var(--gold); }
  body .hero-busy-reviews span { color: #E3EAF5; }
  body .hero-busy-badge {
    background: rgba(15,37,63,.55); border: 1px solid rgba(255, 255, 255, .22);
    color: #FFFFFF; border-radius: 12px; font-size: 13px; box-shadow: none;
  }
  body .hero-busy .coa-card { background: #FFFFFF; }
  body .hero-float-card { background: #FFFFFF; color: var(--navy-deep); }
  body .hero-busy-promo {
    background: linear-gradient(90deg,#4D1623,#752516); color: #FFFFFF;
    font-size: 14px; font-weight: 600; letter-spacing: 0; padding: 9px 16px;
  }
  body .hero-busy-promo strong { background: var(--gold); color: #4D1623; font-weight: 700; padding: 2px 10px; border-radius: 20px; font-size: 12px; margin: 0 6px; }
  body .promo-countdown { background: transparent; color: var(--gold); font-weight: 700; padding: 0; }

  /* ---- Homepage-only structures (see home_sections()) ---- */
  body .si-band {
    background: linear-gradient(120deg,var(--navy-deep),#0C233D); color: #FFFFFF;
    text-align: center; padding: 64px 24px;
  }
  body .si-band h2 { color: #FFFFFF; font-size: 34px; }
  body .si-band p { color: #AEB8D1; margin: 12px auto 26px; max-width: 620px; }
  body .si-band .accentbar { width: 70px; height: 6px; border-radius: 3px; background: var(--hot); margin: 0 auto 18px; display: block; }
  body .si-band .btn-primary { background: #FFFFFF; color: var(--navy-deep); }
  body .si-news { text-align: center; padding: 56px 24px; background: #FFFFFF; }
  body .si-news h2 { margin-bottom: 8px; }
  body .si-news p { color: var(--slate); margin-bottom: 22px; }
  body .si-news form { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
  body .si-news .news-input { width: 300px; max-width: 70vw; border-radius: 26px; }
  body .si-news .si-news-ok { display: none; color: #16A34A; font-weight: 700; margin-top: 12px; }
  body .si-news.done form { display: none; }
  body .si-news.done .si-news-ok { display: block; }
  body .si-values { background: var(--tint); padding: 64px 24px; }
  body .si-values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; max-width: 1200px; margin: 0 auto; }
  body .si-vcard { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 16px; padding: 24px; }
  body .si-vcard .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--navy-deep); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 18px; }
  body .si-vcard h3 { font-size: 17px; margin: 12px 0 8px; }
  body .si-vcard p { color: var(--slate); font-size: 14px; line-height: 1.55; }

  /* ---- Shop / product banded headers ---- */
  body .shop-hero, body .home-hero { background: linear-gradient(120deg,var(--navy-deep),#0F253F); color: #FFFFFF; }
  body .shop-hero h1, body .home-hero h1 { color: #FFFFFF; }
  body .shop-hero h1 span, body .home-hero h1 span { color: var(--gold); }
  body .shop-hero p, body .home-hero p { color: #AEB8D1; }
  body .shop-hero-bg, body .home-hero-bg { opacity: .16; }

  @media (max-width: 900px) {
    body .si-values-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    body .si-values-grid { grid-template-columns: 1fr; }
  }

  /* ---- Dark-band text repair (see brand_design module docstring) ---- */
  body .hero-badge {
    background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28);
    color: #E3EAF5;
  }
  body .hero-badge .hb-ic { color: var(--gold); }
  body .hero-badge .pcard-purity { color: #E3EAF5; }
  body .shop-hero p, body .home-hero p { color: #AEB8D1; }
  body footer [style*="color:rgba"], body footer [style*="color: rgba"] { color: #9CA3AF !important; }
  body footer .footer-top [style*="font-weight:600"] { color: #FFFFFF !important; }
  body footer .footer-bottom a { color: #64748B !important; }
  body footer .footer-bottom a:hover { color: var(--gold) !important; }
  body .sticky-cta-txt { color: #C7D2E4; }

  /* Spread the three hero vial renders so they read as a group, not a pile. */
  body .hero-scatter-1 { top: 4%; left: 2%; width: 33%; max-width: 200px; }
  body .hero-scatter-2 { top: 26%; left: 34%; right: auto; width: 27%; max-width: 165px; opacity: 1; }
  body .hero-scatter-3 { bottom: 4%; left: 12%; width: 24%; max-width: 148px; opacity: 1; }
  body .hero-float-1 { top: 2%; right: 6%; }
  body .hero-float-2 { bottom: 26%; left: 0; }


  /* ---- `--white` alias trap: repaint the surfaces that use it as a
     BACKGROUND (see patch note / module docstring). --white aliases --paper,
     which is this brand's DARK body text colour, so these painted dark. ---- */
  body .vol-table, body .cart-items, body .vol-pop { background: #FFFFFF; border-color: #D3DAEA; }
  body .vol-tr { border-bottom-color: #D3DAEA; }
  body .vol-qty, body .vol-tr .vol-qty { color: #0B1F3F; font-weight: 600; }
  body .vol-unit { color: #1D4ED8; }
  body .vol-was { color: #64748B; }
  body .vol-pricing h3 { color: #64748B; }
  body .qty-stepper button, body .cart-row-qty button, body .mc-qty button {
    background: #FFFFFF; border: 1px solid #D3DAEA; color: #0B1F3F;
  }
  body .qty-stepper button:hover, body .cart-row-qty button:hover { background: #F4F8FF; color: #0B1F3F; }
  body .qty-stepper .qty-val, body .cart-row-qty .crq-val { color: #0B1F3F; }

  body .pdp-visual { background: linear-gradient(180deg,#EEF3FB,#CFE0F4); border: 1px solid #D3DAEA; }
  body .pdp-visual .pdp-cat-tag { background: #FFFFFF; color: #1D4ED8; border: 1px solid #D3DAEA; }


  /* Keep the floating proof cards clear of the vial cluster. */
  body .hero-float-1 { top: 0; right: 4%; }
  body .hero-float-2 { bottom: 2%; left: 0; right: auto; }
  body .hero-scatter-2 { top: 22%; left: 36%; }
  body .hero-scatter-3 { bottom: 12%; left: 6%; }


  /* --- audit #6: the sticky bottom conversion bar is a phone affordance, but
     it carried no media query, so its 118px sat over the desktop viewport too,
     under a header nav and a hero CTA that already say the same thing. Scope
     it, and drop the body padding it reserves, above the phone breakpoint. */
  @media (min-width: 701px) {
    body .sticky-cta-bar { display: none !important; }
    body.has-sticky-cta { padding-bottom: 0; }
  }

  /* --- audit #4: above-the-fold recovery on a phone. 329px of stacked chrome
     (promo ribbon + top bar + header + referral banner) ran before the hero
     even began, and the split-layout hero's CTA landed 1417px down -- nearly two
     viewports. The top bar only repeats what the promo ribbon and the sticky
     bar already say, so on a phone it goes; the referral banner collapses to
     one compact line; the hero's own vertical rhythm tightens. */
  /* The single biggest reason that hero's CTA sat 1417px down: the
     shared sheet collapses .hero-split to one column at <=980px, but this
     brand's own sheet re-declares `body .hero-split { grid-template-columns:
     minmax(0,7fr) minmax(0,5fr) }` OUTSIDE any media query -- higher
     specificity, so two columns survived all the way down to 390px. The copy
     column was 228px wide there, which stretched the h1 to 195px and the
     subhead to 294px. Undo it at the same breakpoint the shared rule uses. */
  @media (max-width: 980px) {
    body .hero-split { grid-template-columns: 1fr; min-height: 0; }
  }

  /* At 1440x900 the hero CTA sat at top 874 / bottom 926 -- 26px of a 52px
     button below the fold, which is the same as having no above-fold CTA at
     all. The hero was spending 96px of padding, a 54px/4-line headline and a
     1.85 line-height paragraph before it got there. Tightening each of those a
     little (the type is still the brand's display serif at 46px) brings the
     whole CTA row into the first screen without shortening a word of copy. */
  @media (min-width: 981px) {
    body .hero-split-copy { padding-top: 60px; padding-bottom: 60px; }
    body .hero-split-eyebrow { margin-bottom: 18px; }
    body .hero-split-h1 { font-size: clamp(32px, 3.6vw, 46px); margin-bottom: 20px; }
    body .hero-split-copy-text { line-height: 1.7; margin-bottom: 32px; }
  }

  @media (max-width: 700px) {
    body .top-bar { display: none; }

    /* The referral banner wrapped to 3 lines plus a stacked button (152px).
       Two clamped lines and a compact button say the same thing in a third
       of the fold. */
    /* The dismiss X took a whole flex row of its own above the CTA. Pinned to
       the corner it costs nothing, and the CTA stops being full-width. */
    body .ref-promo { position: relative; }
    body .ref-promo-inner { padding: 8px 34px 8px 12px; gap: 8px; align-items: center; }
    body .ref-promo-x { position: absolute; top: 6px; right: 8px; }
    body .ref-promo-cta { flex: 0 0 auto; }
    body .ref-promo-txt {
      font-size: 11.5px; line-height: 1.3;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden;
    }
    body .ref-promo-cta { padding: 6px 10px; font-size: 11.5px; }

    /* The sticky bar itself was 118px -- an eighth of the viewport -- because
       its text wrapped above the button. One line, elliptical if it must be,
       keeps it to ~54px. The right inset still clears the chat bubble. */
    body .sticky-cta-bar {
      flex-wrap: nowrap; justify-content: space-between;
      padding: 8px 96px 8px 12px; gap: 10px;
    }
    body .sticky-cta-txt {
      font-size: 11.5px; min-width: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    body .sticky-cta-btn { padding: 8px 16px; font-size: 12.5px; }
    body .sticky-cta-x { right: 84px; }
    body.has-sticky-cta { padding-bottom: 60px; }

    body .hero-split-copy { padding: 22px 20px 26px; }
    body .hero-split-eyebrow { margin-bottom: 10px; }
    body .hero-split-h1 { font-size: 29px; line-height: 1.12; margin-bottom: 12px; }
    body .hero-split-copy-text { font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
    body .hero-split-visual { padding: 24px 20px 40px; min-height: 0; }
    body .hero-busy-h1 { font-size: 30px; }
    body .hero-busy-sub { font-size: 14.5px; line-height: 1.5; }
  }

  /* --- audit #4, second half: the site header is position:sticky at
     z-index 1000 and the gate overlay sat at 900, so on a phone the header
     painted ON TOP of the gate -- two wordmarks stacked over each other and
     the promo line sliced in half. The gate is a modal overlay and belongs
     above the page chrome. It stays below the mini-cart drawer (10001),
     which is unreachable anyway while the gate is up. */
  body .wg-gate { z-index: 10020; }

  /* --- audit #8: storage/cookie notice. Deliberately light: one line, one
     button, no vendor, no blocking layer. */
  body .cookie-note {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9990;
    max-width: 620px; margin: 0 auto;
    background: var(--surface); color: var(--paper);
    border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    padding: 10px 12px; display: flex; align-items: center; gap: 10px;
    font-size: 11.5px; line-height: 1.4;
  }
  body .cookie-note[hidden] { display: none; }
  body .cookie-note a { color: var(--brass-deep); text-decoration: underline; }
  body .cookie-note button {
    flex: 0 0 auto; background: var(--brass); color: #FFFFFF; border: 0;
    border-radius: 999px; padding: 7px 14px; font: inherit; font-weight: 700;
    font-size: 11.5px; cursor: pointer;
  }
  @media (max-width: 700px) {
    body.has-sticky-cta .cookie-note { bottom: 78px; }
  }

  .pic-webp { display: contents; }

  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  .modal-overlay.open { display: flex; }
  .modal {
    background: var(--navy);
    border-radius: 12px;
    max-width: 580px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  }
  .modal-head {
    background: var(--ink);
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid rgba(11,31,63,0.08);
  }
  .modal-head h2 { color: var(--white); font-size: 17px; font-weight: 700; }
  .modal-close {
    background: none; border: none; color: rgba(11,31,63,0.5);
    font-size: 24px; cursor: pointer; line-height: 1; padding: 0 4px; transition: color 0.2s;
  }
  .modal-close:hover { color: var(--white); }
  .modal-body { padding: 24px 28px 28px; }
  .checkout-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 28px; }
  .step-dot { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
  .step-dot .dot {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(11,31,63,0.1); border: 2px solid rgba(11,31,63,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: rgba(11,31,63,0.4); transition: all 0.3s;
  }
  .step-dot.active .dot { background: var(--teal); border-color: var(--teal); color: var(--white); }
  .step-dot.done .dot { background: rgba(37,99,235,0.3); border-color: var(--teal); color: var(--teal); }
  .step-dot .step-label { font-size: 11px; color: rgba(11,31,63,0.35); font-weight: 500; white-space: nowrap; }
  .step-dot.active .step-label { color: var(--teal); }
  .step-dot.done .step-label { color: rgba(11,31,63,0.5); }
  .step-connector { width: 64px; height: 2px; background: rgba(11,31,63,0.1); margin: 0 6px; margin-bottom: 22px; flex-shrink: 0; transition: background 0.3s; }
  .step-connector.done { background: rgba(37,99,235,0.5); }
  .form-group { margin-bottom: 16px; }
  .form-group label { display: block; font-size: 12px; font-weight: 600; color: rgba(11,31,63,0.6); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
  .form-group input, .form-group select {
    width: 100%; background: var(--surface); border: 1px solid rgba(11,31,63,0.12);
    border-radius: var(--radius); padding: 11px 14px; font-size: 14px; font-family: inherit;
    color: var(--white); outline: none; transition: border-color 0.2s;
  }
  .form-group input::placeholder { color: rgba(11,31,63,0.4); }
  .form-group input:focus, .form-group select:focus { border-color: var(--teal); }
  .form-group select option { background: var(--surface); color: var(--white); }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .checkout-panel { display: none; }
  .checkout-panel.active { display: block; }
  .order-line { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(11,31,63,0.06); font-size: 14px; color: rgba(11,31,63,0.65); }
  .order-line:last-child { border-bottom: none; }
  .order-line .val { color: var(--white); font-weight: 600; }
  .order-total-row { background: rgba(37,99,235,0.1); border: 1px solid rgba(37,99,235,0.25); border-radius: 8px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; margin: 16px 0 20px; }
  .order-total-row .total-label { color: rgba(11,31,63,0.7); font-size: 14px; font-weight: 500; }
  .order-total-row .total-amount { color: var(--teal); font-size: 24px; font-weight: 700; }
  .cart-review-line { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(11,31,63,0.06); }
  .cart-review-line:last-of-type { border-bottom: none; }
  .crl-name { font-size: 14px; color: var(--white); font-weight: 600; }
  .crl-sub { font-size: 12px; color: rgba(11,31,63,0.45); }
  .crl-price { font-size: 14px; color: rgba(11,31,63,0.85); font-weight: 600; }
  .btc-address-box { background: var(--surface); border: 1px solid rgba(37,99,235,0.3); border-radius: var(--radius); padding: 14px; font-family: monospace; font-size: 13px; color: var(--teal); word-break: break-all; margin-bottom: 8px; cursor: pointer; position: relative; transition: border-color 0.2s; }
  .btc-address-box:hover { border-color: var(--teal); }
  .btc-copy-hint { font-size: 11px; color: rgba(11,31,63,0.35); margin-bottom: 16px; }
  .btc-note { font-size: 13px; color: rgba(11,31,63,0.55); line-height: 1.6; margin-bottom: 20px; background: rgba(11,31,63,0.04); border-radius: 6px; padding: 12px 14px; border-left: 3px solid var(--teal); }
  .pay-method-tabs { display: none; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
  .pay-method-tabs.multi { display: flex; }
  .pay-method-tab { flex: 1 1 96px; background: rgba(11,31,63,0.06); color: rgba(11,31,63,0.6); border: 1px solid rgba(11,31,63,0.14); border-radius: var(--radius); padding: 10px 8px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.2s; }
  .pay-method-tab:hover { background: rgba(11,31,63,0.1); }
  .pay-method-tab.active { background: var(--teal); border-color: var(--teal); color: var(--ink); }
  .pay-method-pane { display: none; }
  .pay-method-pane.active { display: block; }
  .pay-copy-box { background: var(--surface); border: 1px solid rgba(37,99,235,0.3); border-radius: var(--radius); padding: 14px; font-family: monospace; font-size: 13px; color: var(--teal); word-break: break-all; margin-bottom: 8px; cursor: pointer; position: relative; transition: border-color 0.2s; }
  .pay-copy-box:hover { border-color: var(--teal); }
  .pay-copy-hint { font-size: 11px; color: rgba(11,31,63,0.35); margin-bottom: 16px; }
  .pay-note { font-size: 13px; color: rgba(11,31,63,0.55); line-height: 1.6; margin-bottom: 20px; background: rgba(11,31,63,0.04); border-radius: 6px; padding: 12px 14px; border-left: 3px solid var(--teal); }
  .step-btns { display: flex; gap: 12px; margin-top: 4px; }
  .btn-back { flex: 0 0 auto; background: rgba(11,31,63,0.08); color: rgba(11,31,63,0.7); border: 1px solid rgba(11,31,63,0.15); padding: 13px 20px; border-radius: var(--radius); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.2s; }
  .btn-back:hover { background: rgba(11,31,63,0.14); }
  .btn-next { flex: 1; background: var(--teal); color: var(--white); border: none; padding: 14px; border-radius: var(--radius); font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.2s; letter-spacing: 0.02em; }
  .btn-next:hover { background: var(--teal-dark); }
  .btn-next:disabled { opacity: 0.6; cursor: not-allowed; }
  .confirm-screen { text-align: center; padding: 8px 0 16px; }
  .confirm-check { width: 72px; height: 72px; margin: 0 auto 20px; }
  .confirm-screen h3 { font-size: 22px; font-weight: 700; color: var(--white); margin-bottom: 6px; }
  .confirm-screen .confirm-sub { color: rgba(11,31,63,0.55); font-size: 14px; margin-bottom: 24px; }
  .confirm-summary { background: rgba(11,31,63,0.05); border: 1px solid rgba(11,31,63,0.1); border-radius: 8px; padding: 16px; text-align: left; margin-bottom: 20px; }
  .confirm-summary .cs-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid rgba(11,31,63,0.06); color: rgba(11,31,63,0.6); }
  .confirm-summary .cs-row:last-child { border-bottom: none; }
  .confirm-summary .cs-row .cs-val { color: var(--white); font-weight: 600; }
  .confirm-btc-reminder { font-size: 12px; color: rgba(11,31,63,0.4); margin-bottom: 20px; line-height: 1.6; }
  .modal-empty-cart { text-align: center; color: rgba(11,31,63,0.6); padding: 24px 0; }

  @media (max-width: 860px) {
    .pdp-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 768px) {
    nav ul { display: none; }
    .hamburger { display: flex; }
    .form-row { grid-template-columns: 1fr; }
    .cart-row { flex-wrap: wrap; }
    .cart-row-price { min-width: auto; }
    /* 2026-09-01 audit #24: on a 375px viewport the promo ribbon, referral
       banner, and wholesale banner stacked with full desktop padding/copy
       pushed the H1 to roughly y=800 and the first product to ~y=1600.
       Neither banner's CTA is lost -- the detail sentence and volume/apply
       sub-line are what made them tall, so those collapse on small screens
       and the CTA button shrinks to an inline pill instead of a full-width
       block, cutting each banner to roughly one compact row. */
    .ref-promo-inner { padding: 10px 16px; gap: 10px; }
    .ref-promo-detail, .ref-promo-sub { display: none; }
    .ref-promo-txt { font-size: 12.5px; line-height: 1.4; }
    .ref-promo-cta { padding: 7px 14px; font-size: 12.5px; white-space: nowrap; }
  }

  @media (max-width: 820px) {
    .trust-inner { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .reviews-grid { grid-template-columns: 1fr; }
  }

  .rr-pop-overlay { position: fixed; inset: 0; background: rgba(13,27,42,0.72); backdrop-filter: blur(3px);
    display: none; align-items: center; justify-content: center; z-index: 2000; padding: 20px; }
  .rr-pop-overlay.open { display: flex; }
  .rr-pop { position: relative; background: #fff; border-radius: 16px; max-width: 420px; width: 100%;
    padding: 34px 30px 30px; box-shadow: 0 24px 60px rgba(0,0,0,0.4); text-align: center;
    animation: rrPopIn .28s cubic-bezier(.2,.8,.3,1); }
  @keyframes rrPopIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
  .rr-pop-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 26px;
    line-height: 1; color: #94a3b8; cursor: pointer; }
  .rr-pop-close:hover { color: #0B0B0C; }
  .rr-pop-badge { display: inline-block; background: rgba(37,99,235,0.12); color: var(--brass-deep); font-size: 12px;
    font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; }
  .rr-pop h3 { font-size: 23px; font-weight: 700; color: #0B0B0C; margin: 14px 0 6px; line-height: 1.25; }
  .rr-pop p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 18px; }
  .rr-pop-form { display: flex; gap: 8px; }
  .rr-pop-form input { flex: 1; min-width: 0; padding: 13px 14px; border: 1px solid #cbd5e1; border-radius: 9px;
    font-size: 15px; font-family: inherit; }
  .rr-pop-form input:focus { outline: none; border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
  .rr-pop-form button { background: #2563EB; color: var(--ink); border: none; border-radius: 9px; font-weight: 700;
    font-size: 15px; padding: 0 18px; cursor: pointer; white-space: nowrap; }
  .rr-pop-form button:hover { background: #1D4ED8; }
  .rr-pop-fine { font-size: 11px; color: #94a3b8; margin: 14px 0 0; }
  .rr-pop-success { display: none; }
  .rr-pop.done .rr-pop-form, .rr-pop.done .rr-pop-sell { display: none; }
  .rr-pop.done .rr-pop-success { display: block; }
  .rr-pop-code { display: inline-block; background: #0B0B0C; color: #2563EB; font-family: monospace;
    font-size: 20px; font-weight: 700; letter-spacing: 0.12em; padding: 12px 22px; border-radius: 10px; margin: 6px 0 4px; }
  /* Checkout promo row */
  .promo-row { display: flex; gap: 8px; margin: 4px 0 16px; }
  .promo-row input { flex: 1; min-width: 0; text-transform: uppercase; }
  .promo-row button { background: rgba(37,99,235,0.12); color: #1D4ED8; border: 1px solid rgba(37,99,235,0.4);
    border-radius: 8px; font-weight: 700; font-size: 13px; padding: 0 16px; cursor: pointer; white-space: nowrap; }
  .promo-msg { font-size: 13px; font-weight: 600; margin: -8px 0 12px; min-height: 0; }
  .promo-msg.ok { color: var(--success-ondark); }
  .promo-msg.bad { color: var(--danger-ondark); }
  /* Same element and styling as the promo-code feedback, reused for inline
     checkout field errors (2026-09-14 audit fix A, replaces alert()). */
  .promo-msg.field-err { margin: 6px 0 0; }
  .checkout-panel input[aria-invalid="true"],
  .checkout-panel select[aria-invalid="true"] { border-color: var(--danger-ondark); }
  .order-line.discount span.val { color: var(--success-ondark); }
  /* Product FAQ (SEO/AEO) */
  .pdp-faq { margin-top: 40px; }
  .pdp-faq > h2 { font-size: 22px; font-weight: 700; color: var(--text-onpage); margin-bottom: 16px; }
  .pdp-faq-item { border: 1px solid var(--gray-light); border-radius: 10px; padding: 0 18px; margin-bottom: 10px; background: #fff; }
  .pdp-faq-item summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 600;
    font-size: 15.5px; color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .pdp-faq-item summary::-webkit-details-marker { display: none; }
  .pdp-faq-item summary::after { content: "+"; color: var(--teal); font-size: 22px; font-weight: 400; line-height: 1; }
  .pdp-faq-item[open] summary::after { content: "\2212"; }
  .pdp-faq-item p { font-size: 14.5px; color: var(--gray-onlight); line-height: 1.75; padding: 0 0 18px; margin: 0; }
  /* Further reading / internal links — an elevated dark surface (not a
     translucent brass wash) so it stays legible on the dark page ground. */
  .pdp-reading { margin-top: 32px; background: var(--surface); border: 1px solid rgba(37,99,235,0.25);
    border-radius: 12px; padding: 22px 24px; }
  .pdp-reading h2 { font-size: 17px; font-weight: 700; color: var(--paper); margin-bottom: 12px; }
  .pdp-reading ul { list-style: none; margin: 0; padding: 0; }
  .pdp-reading li { margin-bottom: 8px; }
  .pdp-reading a { color: var(--teal-dark); text-decoration: none; font-weight: 600; font-size: 14.5px; }
  .pdp-reading a:hover { text-decoration: underline; }
  .pdp-reading a::before { content: "\2192  "; color: var(--teal); }
  /* Blog index hub */
  .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
  .blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gray-light);
    border-radius: 12px; padding: 24px; text-decoration: none; transition: box-shadow .15s, transform .15s; }
  .blog-card:hover { box-shadow: 0 8px 24px rgba(13,27,42,0.08); transform: translateY(-2px); }
  .blog-card h2 { font-size: 18px; font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: 10px; }
  .blog-card p { font-size: 14px; color: var(--gray-onlight); line-height: 1.65; margin-bottom: 16px; flex: 1; }
  .blog-card-more { color: var(--brass-deep); font-weight: 700; font-size: 14px; }