/* =====================================================================
 * togo-pdp-redesign.css  —  PDP "STILLHET" (the quiet room) · v2 synthesis
 * ---------------------------------------------------------------------
 * Loaded LAST on compound.html. Pure visual layer: every data / cart /
 * stock / compliance ID + script keeps working untouched. Scoped to
 * body[data-page="compound"]; dark default + light pairs.
 *
 * Design lens: SCANDINAVIAN MINIMAL. No card, no frame — type, air and a
 * single hairline system do the work. INK (never red) marks the selected
 * strength and the active tab. The ONE red on the whole page is the
 * Add-to-cart button; the ONE wow is its hover bloom (soft accent glow +
 * 1px lift). Restraint itself reads as expensive.
 *
 * Synthesis + judge fixes baked in:
 *  - Variant chips get a real faint fill + a stronger (~.12) border so they
 *    read as tappable option cards and pass 1.4.11 non-text contrast.
 *  - Single-red thesis honoured: focus rings are high-contrast INK, not red,
 *    so the page genuinely has exactly one red (the CTA).
 *  - Stock state is legible by TEXT ("In stock" / "Fresh batch", medium
 *    weight) + a state-coloured dot, never a lone colour.
 *  - Structural hairlines lifted to ~.10 so the architecture survives glare.
 *  - Selected strength is unmistakable: 2px INK ring + stronger fill + bold
 *    size (a non-colour weight cue too).
 *  - #price-stock dot is tied to the injected .togo-lead state (NO hardcoded
 *    green ::before that would contradict a fresh-batch line).
 *  - Stock leads use theme-paired *-on-weak tokens so they pass AA in light.
 *  - Legacy inner .variant-chip__label box + selected sibling rail are reset
 *    so no doubled box leaks through.
 *
 * HARD RULE honoured: NOTHING here targets .compound-hero (the grid),
 * .compound-hero__media, .compound-hero__badge positioning, or
 * .container max-width — the live product photo + hero layout show through
 * exactly as on the live site. Only .compound-hero__copy and its children,
 * the buy block, tabs and essentials are restyled.
 * ===================================================================== */

body[data-page="compound"]{
  --pdp-ink: var(--color-text);
  --pdp-rule: rgba(255,255,255,.10);          /* structural separators (glare-proof) */
  --pdp-line: rgba(255,255,255,.07);          /* soft secondary lines */
  --pdp-chip-border: rgba(255,255,255,.12);   /* tappable affordance, >=3:1 non-text */
  --pdp-fill: rgba(255,255,255,.035);         /* faint quiet fill */
  --pdp-fill-strong: rgba(255,255,255,.07);   /* hover / selected fill */
  --pdp-card-bg: #0c0c0f;                      /* the buy card — a quiet plate that mirrors the photo frame */
  --pdp-card-border: rgba(255,255,255,.10);
}
html[data-theme="light"] body[data-page="compound"]{
  --pdp-ink: var(--color-text);
  --pdp-rule: rgba(15,23,42,.12);
  --pdp-line: rgba(15,23,42,.07);
  --pdp-chip-border: rgba(15,23,42,.14);
  --pdp-fill: rgba(15,23,42,.028);
  --pdp-fill-strong: rgba(15,23,42,.055);
  --pdp-card-bg: #ffffff;
  --pdp-card-border: rgba(15,23,42,.12);
}

/* Calm vertical rhythm. Hero grid / photo untouched (live behaviour). */
body[data-page="compound"] .section{ padding-block: var(--space-7) !important; }

/* =====================================================================
 * 1. HERO COPY  —  editorial masthead (photo + grid left as live)
 * ===================================================================== */
body[data-page="compound"] .breadcrumb{
  font-size: var(--text-xs); color: var(--color-text-muted);
  margin-bottom: var(--space-4); letter-spacing: .01em;
}

/* Kicker — quiet engraved label (NOT red; red is the CTA alone) */
body[data-page="compound"] .compound-hero__copy .section__eyebrow,
body[data-page="compound"] .compound-hero__copy #compound-eyebrow{
  font-size: var(--text-2xs) !important; letter-spacing: .26em !important;
  text-transform: uppercase; color: var(--color-text-muted) !important;
  font-weight: var(--weight-semibold) !important; margin: 0 0 var(--space-3) !important;
}

/* Title — confident, tight, airy */
body[data-page="compound"] .compound-hero__copy .section__title,
body[data-page="compound"] .compound-hero__copy #compound-title{
  font-size: clamp(32px, 3.8vw, 46px) !important; line-height: 1.03 !important;
  letter-spacing: -0.03em !important; font-weight: var(--weight-semibold) !important;
  color: var(--pdp-ink) !important; margin: 0 !important;
}

/* Lead — one calm sentence, readable measure */
body[data-page="compound"] .compound-hero__copy > .section__lead,
body[data-page="compound"] .compound-hero__copy #compound-lead{
  font-size: var(--text-lg) !important; line-height: var(--leading-snug) !important;
  color: var(--color-text-soft) !important; margin: var(--space-3) 0 0 !important;
  max-width: 44ch; font-weight: var(--weight-regular) !important;
}

/* "Also known as" alias chips — borderless faint tags (overrides injected style) */
body[data-page="compound"] .compound-hero__copy .enrich-aliases{
  list-style: none !important; margin: var(--space-4) 0 0 !important; padding: 0 !important;
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px !important;
}
body[data-page="compound"] .enrich-aliases__label{
  font-size: var(--text-2xs) !important; letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-text-muted) !important; font-weight: var(--weight-semibold);
  margin: 0 var(--space-1) 0 0 !important;
}
body[data-page="compound"] .enrich-aliases li{
  font-size: var(--text-xs) !important; color: var(--color-text-muted) !important;
  border: 0 !important; border-radius: var(--radius-pill) !important;
  padding: 4px 11px !important; background: var(--pdp-fill) !important;
  line-height: 1.3; white-space: nowrap;
}
body[data-page="compound"] .enrich-aliases li.is-brand{
  color: var(--color-text-soft) !important; background: var(--pdp-fill-strong) !important;
}

/* Hide the print control + runtime research-signals / jumpbar (clutter) */
body[data-page="compound"] .compound-hero__copy [data-no-print],
body[data-page="compound"] .pdp-signals,
body[data-page="compound"] .pdp-jumpbar{ display: none !important; }

/* =====================================================================
 * 2. THE BUY BLOCK  —  a quiet contained card that mirrors the photo
 *    frame on the left (symmetry = calm + premium). Stillhet's restraint
 *    lives INSIDE it; the page around stays open air.
 * ===================================================================== */
body[data-page="compound"] #compound-form{
  display: block !important;
  position: relative !important;
  margin-top: var(--space-6) !important;
  padding: var(--space-6) !important;
  background: var(--pdp-card-bg) !important;
  border: 1px solid var(--pdp-card-border) !important;
  border-top: 1px solid var(--pdp-card-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
}
/* Neutralise any legacy grid placement so children flow vertically */
body[data-page="compound"] #compound-form > *{
  grid-column: auto !important; position: relative; z-index: 1;
}

/* Shared field labels — small, tracked, quiet */
body[data-page="compound"] #compound-form .field__label,
body[data-page="compound"] .variant-picker legend.field__label,
body[data-page="compound"] .variant-picker legend{
  display: block; font-size: var(--text-2xs) !important; letter-spacing: .18em !important;
  text-transform: uppercase; color: var(--color-text-muted) !important;
  font-weight: var(--weight-semibold) !important; margin: 0 0 var(--space-3) !important;
}

/* ---- 2a. Strength — minimal selector (INK selection, never red) ---- */
body[data-page="compound"] .variant-picker{
  margin: 0 0 var(--space-5) !important; padding: 0 !important; border: 0 !important; min-width: 0;
}
body[data-page="compound"] .variant-picker__options{
  display: grid !important;
  /* 3 across = a calm 3x2 grid; chips stay wide enough that "10 mg" never wraps */
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
body[data-page="compound"] .variant-chip{
  position: relative; display: block !important;
  border: 1px solid var(--pdp-chip-border) !important;
  border-radius: var(--radius-12) !important;
  background: var(--pdp-fill) !important;
  padding: 13px 15px !important; cursor: pointer !important;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out) !important;
}
body[data-page="compound"] .variant-chip:hover{
  border-color: var(--color-border-strong) !important;
  background: var(--pdp-fill-strong) !important;
}
/* Neutralise the locked inner label box (prevents a doubled box) */
body[data-page="compound"] .variant-chip__label{
  display: flex !important; flex-direction: column; gap: 8px; min-width: 0;
  background: transparent !important; padding: 0 !important; border: 0 !important;
  box-shadow: none !important; min-height: 0 !important;
}
body[data-page="compound"] .variant-chip input:checked + .variant-chip__label{
  background: transparent !important; box-shadow: none !important; border-color: transparent !important;
}
body[data-page="compound"] .variant-chip__row--top{
  display: flex !important; align-items: baseline; justify-content: space-between; gap: 10px;
}
body[data-page="compound"] .variant-chip__size{
  font-size: var(--text-lg) !important; font-weight: var(--weight-semibold) !important;
  color: var(--pdp-ink) !important; letter-spacing: -0.015em; font-variant-numeric: tabular-nums;
}
body[data-page="compound"] .variant-chip__per-unit{
  font-size: var(--text-xs) !important; color: var(--color-text-muted) !important;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
body[data-page="compound"] .variant-chip__row--bottom{
  display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* Stock lead — TEXT label + medium weight + a state-coloured dot.
   Uses theme-paired *-on-weak so it passes AA in both themes. */
body[data-page="compound"] .variant-chip .togo-lead{
  font-size: var(--text-2xs) !important; color: var(--color-text-muted) !important;
  font-weight: var(--weight-medium) !important;
  display: inline-flex; align-items: center; gap: 6px;
}
body[data-page="compound"] .togo-lead__dot{
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto;
}
body[data-page="compound"] .variant-chip .togo-lead--in-stock{ color: var(--color-success-on-weak) !important; }
body[data-page="compound"] .variant-chip .togo-lead--made-to-order,
body[data-page="compound"] .variant-chip .togo-lead--fresh-batch{ color: var(--color-warning-on-weak) !important; }
/* "Best deal" — plain tracked label, no pill, no box */
body[data-page="compound"] .variant-chip__best{
  font-size: 10px !important; letter-spacing: .14em; text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted) !important;
  border: 0 !important; background: none !important; padding: 0 !important;
}
/* "Only N left" micro note */
body[data-page="compound"] .variant-chip__low{
  font-size: 10px !important; letter-spacing: .04em; font-weight: var(--weight-medium);
  color: var(--color-warning-on-weak) !important;
}
/* Selected — INK ring + stronger fill + bold size. The input lives INSIDE
   the label -> :has(). Never red. Weight + ring = a non-colour-alone cue. */
body[data-page="compound"] .variant-chip:has(input:checked){
  border-color: var(--pdp-ink) !important;
  background: var(--pdp-fill-strong) !important;
  box-shadow: inset 0 0 0 1px var(--pdp-ink) !important;
}
body[data-page="compound"] .variant-chip:has(input:checked) .variant-chip__size{
  font-weight: var(--weight-bold) !important;
}
body[data-page="compound"] .variant-chip:has(input:checked) .variant-chip__best{
  color: var(--color-text-soft) !important;
}
/* Keyboard focus ring — high-contrast INK (keeps red exclusive to the CTA) */
body[data-page="compound"] .variant-chip:has(input:focus-visible){
  outline: 2px solid var(--pdp-ink); outline-offset: 2px;
}

/* ---- 2b. Provenance line (.togo-inv batch / COA / stock) — text, not pills ---- */
body[data-page="compound"] .togo-inv{ margin: 0 0 var(--space-5) !important; }
body[data-page="compound"] .togo-inv__row{
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 14px !important;
}
body[data-page="compound"] .togo-inv-pill{
  display: inline-flex !important; align-items: center; gap: 7px;
  font-size: var(--text-2xs) !important; color: var(--color-text-muted) !important;
  border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; background: transparent !important;
  font-variant-numeric: tabular-nums; line-height: 1.3;
}
body[data-page="compound"] .togo-inv-pill__dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-faint); flex: 0 0 auto;
}
body[data-page="compound"] .togo-inv-pill--in-stock .togo-inv-pill__dot{ background: var(--color-success); }
body[data-page="compound"] .togo-inv-pill--low .togo-inv-pill__dot,
body[data-page="compound"] .togo-inv-pill--pulse .togo-inv-pill__dot{ background: var(--color-warning); }
body[data-page="compound"] .togo-inv-pill--retiring .togo-inv-pill__dot{ background: var(--color-text-faint); }
body[data-page="compound"] .togo-inv-pill--in-stock{ color: var(--color-success-on-weak) !important; }
body[data-page="compound"] .togo-inv-pill--low{ color: var(--color-warning-on-weak) !important; }
body[data-page="compound"] .togo-stock-sealed{
  display: inline-flex !important; align-items: center; gap: 7px;
  font-size: var(--text-2xs) !important; color: var(--color-text-muted) !important; letter-spacing: .02em;
}
body[data-page="compound"] .togo-stock-sealed__icon{
  width: 6px; height: 6px; border-radius: 1px; background: var(--color-text-faint); transform: rotate(45deg);
}
/* COA doc link — quiet underline; hovers toward ink (no second colour) */
body[data-page="compound"] .togo-inv-pill__coa{
  color: var(--color-text-soft) !important; text-decoration: underline;
  text-underline-offset: 2px; font-weight: var(--weight-medium);
}
body[data-page="compound"] .togo-inv-pill__coa:hover{ color: var(--pdp-ink) !important; }
/* Fresh-batch banner (only when OOS) — calm when shown */
body[data-page="compound"] .togo-inv-banner{
  background: var(--pdp-fill) !important; border: 0 !important;
  border-left: 2px solid var(--pdp-rule) !important; border-radius: var(--radius-sm) !important;
  padding: var(--space-3) var(--space-4) !important; margin: var(--space-3) 0 0 !important;
}
body[data-page="compound"] .togo-inv-banner__title{
  color: var(--color-text-soft) !important; font-weight: var(--weight-semibold); font-size: var(--text-sm) !important;
}
body[data-page="compound"] .togo-inv-banner__lead,
body[data-page="compound"] .togo-inv-banner__pipeline{
  color: var(--color-text-muted) !important; font-size: var(--text-xs) !important;
}

/* ---- 2c. Quantity — NATIVE site stepper (consistent with the rest of the site).
     Only the spacing around it is set; the control keeps its site styling. ---- */
body[data-page="compound"] #compound-form .field{ margin: 0 0 var(--space-5) !important; }

/* ---- 2d. Price + total ---- */
body[data-page="compound"] .price-block{
  display: flex !important; flex-direction: column; gap: var(--space-3) !important;
  background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
}
body[data-page="compound"] .price-block__row{ display: none !important; } /* unit/qty rows: noise */
body[data-page="compound"] .price-block__total{
  display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: var(--space-4) !important; border-top: 1px solid var(--pdp-rule) !important; margin: 0 !important;
}
body[data-page="compound"] .price-block__total .price-block__label{
  font-size: var(--text-2xs) !important; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-text-muted) !important; font-weight: var(--weight-semibold) !important;
}
body[data-page="compound"] .price-block__value--total,
body[data-page="compound"] #price-total{
  font-size: clamp(28px, 3.4vw, 34px) !important; font-weight: var(--weight-semibold) !important;
  font-variant-numeric: tabular-nums; letter-spacing: -0.025em;
  color: var(--pdp-ink) !important; line-height: 1;
}
/* Stock line — dot colour follows the injected .togo-lead state (no fixed green) */
body[data-page="compound"] .price-block__stock,
body[data-page="compound"] #price-stock{
  margin: 0 !important; font-size: var(--text-sm) !important; color: var(--color-text-soft) !important;
  display: flex; align-items: center; gap: 8px;
}
body[data-page="compound"] #price-stock .togo-lead{
  display: inline-flex; align-items: center; gap: 8px; font-weight: var(--weight-medium);
}
body[data-page="compound"] #price-stock .togo-lead--in-stock{ color: var(--color-success-on-weak) !important; }
body[data-page="compound"] #price-stock .togo-lead--made-to-order,
body[data-page="compound"] #price-stock .togo-lead--fresh-batch{ color: var(--color-warning-on-weak) !important; }
/* Fresh-batch note (usually [hidden]) — calm when shown */
body[data-page="compound"] #stock-panel.togo-stock-panel{
  display: block; background: var(--pdp-fill) !important;
  border: 0 !important; border-left: 2px solid var(--pdp-rule) !important; border-radius: var(--radius-sm) !important;
  padding: var(--space-3) var(--space-4) !important; margin: 0 !important;
  font-size: var(--text-xs) !important; color: var(--color-text-muted) !important; line-height: var(--leading-normal);
}
body[data-page="compound"] #stock-panel[hidden]{ display: none !important; }
body[data-page="compound"] .togo-stock-panel__title{
  display: block; color: var(--color-text-soft) !important; font-weight: var(--weight-semibold);
  font-size: var(--text-2xs) !important; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px;
}

/* ---- 2e. Primary CTA — NATIVE site .btn--primary (red in both themes, with
     the site's own glow + hover). We only set the spacing above it, so the
     Add-to-cart button is identical to every other primary button on the site. ---- */
body[data-page="compound"] .price-block__cta{ margin-top: var(--space-5) !important; }

/* Secondary actions — NATIVE site ghost buttons, just laid out in a centered row */
body[data-page="compound"] .price-block__cta--row{
  display: flex !important; justify-content: center !important;
  gap: var(--space-3) !important; margin-top: var(--space-3) !important;
}
/* a11y only: keep the icon-only compare button at a 44px touch target (no restyle) */
body[data-page="compound"] #pdp-compare-btn{ min-width: 44px; min-height: 44px; }

body[data-page="compound"] .price-block__note{
  margin: var(--space-2) 0 0 !important; font-size: var(--text-2xs) !important;
  color: var(--color-text-muted) !important; line-height: var(--leading-normal); text-align: center;
}
body[data-page="compound"] .price-block__note a{ color: var(--color-text-soft) !important; text-decoration: underline; text-underline-offset: 2px; }

/* ---- 2f. Assurance row (KEEP visible) — quiet two-up, hairline-topped ---- */
body[data-page="compound"] .pdp-trust-row{
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px 18px !important;
  list-style: none; margin: var(--space-5) 0 0 !important; padding: var(--space-5) 0 0 !important;
  border-top: 1px solid var(--pdp-rule) !important;
}
body[data-page="compound"] .pdp-trust-row li{
  display: flex; align-items: center; gap: 9px;
  font-size: var(--text-xs) !important; color: var(--color-text-muted) !important; line-height: 1.35;
}
body[data-page="compound"] .pdp-trust-row svg{ flex: 0 0 auto; opacity: .6; color: var(--color-text-soft); }
body[data-page="compound"] .pdp-ruo-disclaimer{
  margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--text-2xs);
}

/* Generic focus-visible safety net inside the block (INK) */
body[data-page="compound"] #compound-form a:focus-visible,
body[data-page="compound"] .qty-stepper__btn:focus-visible,
body[data-page="compound"] .qty-stepper__input:focus-visible{
  outline: 2px solid var(--pdp-ink); outline-offset: 2px; border-radius: var(--radius-sm);
}

/* Volume tiers: quiet, optional (stays hidden via [hidden]) */
body[data-page="compound"] .volume-tiers{
  background: var(--pdp-fill) !important; border: 0 !important;
  margin-top: var(--space-4) !important; border-radius: var(--radius-md) !important;
}

/* =====================================================================
 * 3. DECLUTTER HIDES (verbatim — keep the buy decision uncluttered)
 * ===================================================================== */
body[data-page="compound"] #compound-order-trust,        /* 8 trust pills + policy + KvK card */
body[data-page="compound"] #compound-bench,              /* prose cards restating COA */
body[data-page="compound"] .pdp-stack-card,             /* "Part of the Fat Loss Stack" */
body[data-page="compound"] .variant-chip__save,         /* "+EUR x/mg vs 60mg" on every chip */
body[data-page="compound"] #compound-recently-viewed-section,
body[data-page="compound"] #compound-library-section,   /* "Long-form research articles" */
body[data-page="compound"] #compound-compare-section,    /* "vs. similar compounds" table */
body[data-page="compound"] .pdp-signals,
body[data-page="compound"] .pdp-jumpbar,
body[data-page="compound"] .pdp-detail-kicker,           /* "Detailed reference content..." filler */
body[data-page="compound"] .compound-hero__copy > .pdp-answer-block{ /* long research para + policy links */
  display: none !important;
}

/* =====================================================================
 * 4. DEEP REFERENCE TABS  —  calm, secondary. INK underline, never red.
 * ===================================================================== */
body[data-page="compound"] .v2-tabs{ margin-top: var(--space-7); }
body[data-page="compound"] .v2-tabs__bar{
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  border-bottom: 1px solid var(--pdp-rule); margin-bottom: var(--space-5);
}
body[data-page="compound"] .v2-tabs__btn{
  appearance: none; background: transparent !important; border: 0 !important;
  border-bottom: 2px solid transparent !important; cursor: pointer;
  font-size: var(--text-sm) !important; font-weight: var(--weight-medium) !important;
  color: var(--color-text-muted) !important; padding: 10px 14px !important; margin-bottom: -1px;
  letter-spacing: .01em; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
body[data-page="compound"] .v2-tabs__btn:hover{ color: var(--color-text-soft) !important; }
body[data-page="compound"] .v2-tabs__btn[aria-selected="true"]{
  color: var(--pdp-ink) !important; border-bottom-color: var(--pdp-ink) !important;
}
body[data-page="compound"] .v2-tabs__btn:focus-visible{ outline: 2px solid var(--pdp-ink); outline-offset: 2px; border-radius: var(--radius-sm); }

body[data-page="compound"] .pdp-detail-section{ padding-block: var(--space-4) !important; }
body[data-page="compound"] .pdp-detail-section + .pdp-detail-section{ border-top: 1px solid var(--pdp-line); }
body[data-page="compound"] .pdp-detail-section .section__title,
body[data-page="compound"] .pdp-detail-section h2,
body[data-page="compound"] .pdp-detail-section h3{
  font-size: var(--text-lg) !important; line-height: var(--leading-snug) !important;
  letter-spacing: -0.01em; color: var(--color-text-soft) !important; margin: 0 0 var(--space-2) !important;
}
body[data-page="compound"] .pdp-detail-toggle{
  font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-medium);
}
body[data-page="compound"] .research-bullets li::before{ background: var(--color-text-faint) !important; }
body[data-page="compound"] .references-list li::before{ color: var(--color-text-faint) !important; }

/* =====================================================================
 * 5. ESSENTIALS  —  compact, optional. Hairline cards, INK hover.
 * ===================================================================== */
body[data-page="compound"] #pdp-essentials-upsell{ padding-block: var(--space-6) !important; }
body[data-page="compound"] .tgp-ess-upsell__head{
  font-size: var(--text-xl) !important; letter-spacing: -0.01em; color: var(--pdp-ink) !important;
  font-weight: var(--weight-semibold) !important;
}
body[data-page="compound"] .tgp-ess-upsell__sub{
  font-size: var(--text-sm) !important; color: var(--color-text-muted) !important;
}
body[data-page="compound"] .tgp-ess-card{
  padding: var(--space-4) !important; border-radius: var(--radius-12) !important;
  border: 1px solid var(--pdp-chip-border) !important; background: var(--pdp-fill) !important;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
body[data-page="compound"] .tgp-ess-card:hover{
  border-color: var(--color-border-strong) !important; background: var(--pdp-fill-strong) !important;
}
body[data-page="compound"] .tgp-ess-card__cta{
  background: transparent !important; color: var(--color-text-soft) !important;
  border: 1px solid var(--pdp-chip-border) !important; box-shadow: none !important;
  font-weight: var(--weight-medium) !important;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
body[data-page="compound"] .tgp-ess-card__cta:hover{
  border-color: var(--pdp-ink) !important; color: var(--pdp-ink) !important;
}

/* =====================================================================
 * 6. RELATED STRIP  —  quiet discovery (single kept cross-sell)
 * ===================================================================== */
body[data-page="compound"] #compound-related-section .section__eyebrow{
  font-size: var(--text-2xs); letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-text-muted) !important;
}
body[data-page="compound"] #compound-related-section .section__title{
  font-size: var(--text-xl) !important; letter-spacing: -0.01em; color: var(--color-text-soft) !important;
  font-weight: var(--weight-semibold) !important;
}

/* =====================================================================
 * 7. RESPONSIVE  —  hero grid / photo NOT touched at any breakpoint
 * ===================================================================== */
@media (max-width: 767px){
  body[data-page="compound"] #compound-form{ max-width: 560px; margin-inline: auto; }
}
@media (max-width: 640px){
  body[data-page="compound"] .section{ padding-block: var(--space-6) !important; }
  /* Tighter card padding on phones so the strength chips keep their width */
  body[data-page="compound"] #compound-form{ padding: var(--space-4) !important; }
  body[data-page="compound"] .compound-hero__copy .section__title,
  body[data-page="compound"] .compound-hero__copy #compound-title{ font-size: clamp(28px, 8vw, 34px) !important; }
  body[data-page="compound"] .compound-hero__copy > .section__lead{ font-size: var(--text-base) !important; }
  body[data-page="compound"] .pdp-trust-row{ grid-template-columns: 1fr !important; }
  /* Strength grid: 2 across on phones (2x3) so "10 mg" + per-unit never wrap */
  body[data-page="compound"] .variant-picker__options{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  /* Comfortable touch targets (WCAG 2.5.5) */
  body[data-page="compound"] .variant-chip{ min-height: 48px !important; }
  body[data-page="compound"] .qty-stepper__btn{ min-width: 44px !important; min-height: 44px !important; }
  body[data-page="compound"] #add-to-cart-btn{ min-height: 54px !important; font-size: var(--text-base) !important; }
  body[data-page="compound"] .price-block__cta--row .btn{ min-height: 44px !important; }
  body[data-page="compound"] #pdp-compare-btn{ min-width: 44px !important; min-height: 44px !important; }
}
@media (max-width: 380px){
  body[data-page="compound"] .variant-picker__options{ grid-template-columns: 1fr 1fr !important; }
}

/* =====================================================================
 * 8. LIGHT THEME PAIRS  —  the white room shines here
 * ===================================================================== */
html[data-theme="light"] body[data-page="compound"] #compound-form{
  background: transparent !important; box-shadow: none !important;
  border-top-color: var(--pdp-rule) !important;
}
html[data-theme="light"] body[data-page="compound"] .variant-chip:has(input:checked){
  border-color: var(--pdp-ink) !important; background: var(--pdp-fill-strong) !important;
  box-shadow: inset 0 0 0 1px var(--pdp-ink) !important;
}
html[data-theme="light"] body[data-page="compound"] .price-block__value--total,
html[data-theme="light"] body[data-page="compound"] #price-total{ color: var(--pdp-ink) !important; }
html[data-theme="light"] body[data-page="compound"] .variant-chip .togo-lead--in-stock,
html[data-theme="light"] body[data-page="compound"] #price-stock .togo-lead--in-stock,
html[data-theme="light"] body[data-page="compound"] .togo-inv-pill--in-stock{ color: var(--color-success-on-weak) !important; }
html[data-theme="light"] body[data-page="compound"] .variant-chip .togo-lead--fresh-batch,
html[data-theme="light"] body[data-page="compound"] .variant-chip .togo-lead--made-to-order,
html[data-theme="light"] body[data-page="compound"] #price-stock .togo-lead--fresh-batch{ color: var(--color-warning-on-weak) !important; }
html[data-theme="light"] body[data-page="compound"] .pdp-trust-row svg{ color: var(--color-text-muted); }

/* =====================================================================
 * 9. REDUCED MOTION  —  kills the one wow's motion (glow stays static)
 * ===================================================================== */
@media (prefers-reduced-motion: reduce){
  body[data-page="compound"] *{ transition: none !important; animation: none !important; }
  body[data-page="compound"] #add-to-cart-btn:hover{ transform: none; box-shadow: 0 8px 30px var(--color-accent-glow); }
}