/* moved out of front-page.php (7 Oct 2026) so browsers cache it instead of re-downloading it on every page */

/* ===========================================================================
   DARK MODE

   This theme predates any dark-mode intent. Three things made earlier attempts
   incomplete, all now handled:

   1. The CSS is spread over SIXTEEN <style> blocks and THIRTEEN sit in the
      BODY. Scanning the <head> alone saw a third of the rules.
   2. Surfaces are classified by LUMINANCE, not by matching "#fff". The cream
      surfaces (#fbf7ef and friends) are near-white and were being missed.
   3. Every comma-separated selector is prefixed INDIVIDUALLY. Prefixing a
      whole group leaves parts 2..n unscoped, so they leak into LIGHT mode.

   Text colour uses !important on the control groups only. The theme sets those
   colours from deeper selectors (header.nav .btn-soft and similar); without it
   the background flips and the text does not, which is the exact failure this
   is fixing.
   =========================================================================== */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ivory:#10130f;--paper:#10130f;--ink:#eef2ea;--ink-soft:#9C99AE;--muted:#8A889B;
    --sage-pale:#182018;--line:#242a22;--red:#e35d67;--red-deep:#c4313b;
    --shadow:0 16px 46px rgba(0,0,0,.5);
      --invert-bg:#eef2ea;--invert-fg:#10130f;
    }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ivory:#10130f;--paper:#10130f;--ink:#eef2ea;--ink-soft:#9C99AE;--muted:#8A889B;
  --sage-pale:#182018;--line:#242a22;--red:#e35d67;--red-deep:#c4313b;
  --shadow:0 16px 46px rgba(0,0,0,.5);
  --invert-bg:#eef2ea;--invert-fg:#10130f;
}
:root{--invert-bg:#21271f;--invert-fg:#ffffff}
:root[data-theme="dark"] body{background:var(--paper);color:var(--ink)}

/* 1 — every surface lighter than 0.75 luminance, from all sixteen blocks.
       These also set color. A <button> or <input> with no colour of its own
       falls back to the browser default BLACK, which is fine on a white tile
       and invisible the moment the tile goes dark — that is exactly what
       happened to the vial-size selector. */
:root[data-theme="dark"] .cutbar,:root[data-theme="dark"] .nav-in,:root[data-theme="dark"] .mmenu{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .fpill,:root[data-theme="dark"] .verify-art,:root[data-theme="dark"] .coa-search{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .cc-badge.req,:root[data-theme="dark"] .pv-dose,:root[data-theme="dark"] .pv-supp{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .pv-supp-add,:root[data-theme="dark"] .wa,:root[data-theme="dark"] .ci .cithumb{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .cart-email input,:root[data-theme="dark"] .cart-name input,:root[data-theme="dark"] .pv-trust .tb{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .lowtag,:root[data-theme="dark"] .soldtag,:root[data-theme="dark"] .add.oos{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .btn.oos,:root[data-theme="dark"] .pv-oos,:root[data-theme="dark"] .pv-low{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .catsearch input,:root[data-theme="dark"] .cart-up,:root[data-theme="dark"] .cu-add{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .bundle,:root[data-theme="dark"] .penkit,:root[data-theme="dark"] .penkit-media{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .cart-free,:root[data-theme="dark"] .pv-sale,:root[data-theme="dark"] .stackcard{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .cart-gift,:root[data-theme="dark"] .bs-card,:root[data-theme="dark"] .jpc{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .jpc-cta.sold,:root[data-theme="dark"] .bs-cart,:root[data-theme="dark"] .assess-chips span{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .assess-card,:root[data-theme="dark"] .assess-card input,:root[data-theme="dark"] .assess-card select{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .assess-card input:focus,:root[data-theme="dark"] .assess-card select:focus,:root[data-theme="dark"] .shop-sel{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .shop-search,:root[data-theme="dark"] .co-in,:root[data-theme="dark"] .co-pay{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .co-panel,:root[data-theme="dark"] .rc-box,:root[data-theme="dark"] .rc-copy{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .rc-copy2,:root[data-theme="dark"] .rc-credit,:root[data-theme="dark"] .kit-card{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .rev,:root[data-theme="dark"] .rb-steps span,:root[data-theme="dark"] .rb-card{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] #carlOptin .co-form input,:root[data-theme="dark"] .su-tier.feat,:root[data-theme="dark"] .pv-stockup{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .jpwc-code span{background:var(--ivory);border-color:var(--line);color:var(--ink)}

/* 2 — controls that used var(--ink) as a background with white text */
:root[data-theme="dark"] .btn-dark,:root[data-theme="dark"] .cartbtn,:root[data-theme="dark"] .fpill.on{background:var(--invert-bg);color:var(--invert-fg)!important}
:root[data-theme="dark"] .prod .add,:root[data-theme="dark"] .jp-toast,:root[data-theme="dark"] .verify{background:var(--invert-bg);color:var(--invert-fg)!important}
:root[data-theme="dark"] .pv-dose.on,:root[data-theme="dark"] .pv-cd,:root[data-theme="dark"] .cart-cd{background:var(--invert-bg);color:var(--invert-fg)!important}:root[data-theme="dark"] .cart-cd b{color:#B496FF}
:root[data-theme="dark"] .bs-see:hover,:root[data-theme="dark"] .jpc-cta,:root[data-theme="dark"] .bs-view{background:var(--invert-bg);color:var(--invert-fg)!important}
/* Sale hero in dark mode: the .shx gradient hardcoded a WHITE hotspot at 15% 0% that never
   flipped, while its text flips to near-white — measured 1.13:1 for the headline/tiers/timer
   and 3.71:1 for the .shx-sub gift line on the live page. Both corrected here. */
:root[data-theme="dark"] .shx-btn,:root[data-theme="dark"] .shx-timer b,:root[data-theme="dark"] .legal-nav a.on{background:var(--invert-bg);color:var(--invert-fg)!important}
:root[data-theme="dark"] .shx{background:radial-gradient(120% 100% at 15% 0%,#1c2119,var(--paper))}
:root[data-theme="dark"] .shx-sub{color:var(--ink-soft)}
:root[data-theme="dark"] .jpwc-cta{background:var(--invert-bg);color:var(--invert-fg)!important}

/* 3 — full-width bands stay dark rather than flashing light across the page */
:root[data-theme="dark"] .trustbar,:root[data-theme="dark"] .navtog span,:root[data-theme="dark"] .trust{background:#080a08;color:#eef2ea}
:root[data-theme="dark"] .promobar{background:#080a08;color:#eef2ea}
:root[data-theme="dark"] .navtog span{background:#eef2ea}

/* 4 — controls that deliberately keep a white ground need dark text back */
:root[data-theme="dark"] .btn-soft,
:root[data-theme="dark"] .btn-light,
:root[data-theme="dark"] .bs-arrow,
:root[data-theme="dark"] .jpc-qadd,
:root[data-theme="dark"] .pv-qty button,
:root[data-theme="dark"] .ci .ciq button{background:#fff!important;color:#21271f!important;border-color:#d8d8d8}

/* 5 — my own components: these use var(--ink) as a ground, which now inverts */
:root[data-theme="dark"] .jp-cookie{background:#080a08;color:#eef2ea}
:root[data-theme="dark"] .jp-cookie p{color:#C9C6D6}
:root[data-theme="dark"] .jp-cookie button{background:#eef2ea;color:#10130f}
:root[data-theme="dark"] .jp-cookie button.ghost{background:none;color:#eef2ea;border-color:rgba(255,255,255,.45)}
:root[data-theme="dark"] .jp-modal-in{background:var(--ivory);color:var(--ink)}

/* 7 — residuals found by measuring the rendered page rather than reading CSS.
       .jpc-cta.sold matched BOTH the surface list (dark ground) and the control
       list (dark text) and came out invisible at 1.0:1. The rest are muted greys
       that were fine on cream and sit under 4.5:1 on a dark ground. */
:root[data-theme="dark"] .jpc-cta.sold{color:var(--ink)!important;opacity:.55}
:root[data-theme="dark"] footer span,
:root[data-theme="dark"] footer small,
:root[data-theme="dark"] .disc{color:#9C99AE}
:root[data-theme="dark"] .ck{color:#B496FF}

/* 8 — --red does two jobs and they pull opposite ways. As TEXT on a dark ground
       it has to lighten (3.43:1 -> 5.37:1), which is why --red is #e35d67 above.
       But these use it as a BACKGROUND with white text on top, where lightening
       it makes contrast WORSE (5.0:1 -> 3.48:1). They keep the deep red. */
:root[data-theme="dark"] .btn-red,:root[data-theme="dark"] .cartbtn .cnt,:root[data-theme="dark"] .prod .add:hover{background:var(--red-deep)!important}
:root[data-theme="dark"] .pv-proto-pct,:root[data-theme="dark"] .saletag,:root[data-theme="dark"] .jpc-badge{background:var(--red-deep)!important}
:root[data-theme="dark"] .jpc-sale,:root[data-theme="dark"] .jpc-cta:hover,:root[data-theme="dark"] .bs-view:hover{background:var(--red-deep)!important}
:root[data-theme="dark"] .bs-tag,:root[data-theme="dark"] .kit-badge,:root[data-theme="dark"] .rb-steps b{background:var(--red-deep)!important}
:root[data-theme="dark"] .su-tab,:root[data-theme="dark"] .jpwc-copy,:root[data-theme="dark"] .spin-tab{background:var(--red-deep)!important}
:root[data-theme="dark"] .spin-tab-txt,:root[data-theme="dark"] .spin-emoji{background:var(--red-deep)!important}

/* 9 — the cart count sits INSIDE .cartbtn, so it inherited that control's
       inverted dark text and landed on the deep red badge. */
:root[data-theme="dark"] .cartbtn .cnt{color:#fff!important}

/* 10 — --sage-deep also does two jobs. It is the BEST VALUE badge ground (white
        text on it, so it must stay deep) and it is the tick/label text colour
        (4.08:1 on black, so that must lighten). Backgrounds keep the deep value;
        only the text usages are lifted. */
:root[data-theme="dark"] .pv-bl li .ck,:root[data-theme="dark"] .prod .pd,:root[data-theme="dark"] .cart-empty .ce-ic,:root[data-theme="dark"] .cart-offer{color:#B496FF}
:root[data-theme="dark"] .pv-trust .tk,:root[data-theme="dark"] .pv-dose.bestval,:root[data-theme="dark"] .bundle.feat,:root[data-theme="dark"] .bundle .bt{color:#B496FF}
:root[data-theme="dark"] .pk-list .ck,:root[data-theme="dark"] .stackcard .sk-list .ck,:root[data-theme="dark"] .rc-stats .rs-n,:root[data-theme="dark"] .kit-list .ck{color:#B496FF}
:root[data-theme="dark"] .rev-vf{color:#B496FF}

/* 11 — leftovers from the product view, which the shop-page audit never saw
        because .pv-* is not in that DOM at all. */
/* the theme's JS writes this colour INLINE (style="color:#a8262f"), so a
   stylesheet rule cannot reach it — !important is the only lever. */
:root[data-theme="dark"] .lowdot{color:var(--red)!important}
:root[data-theme="dark"] .sep{color:var(--muted)}

/* 6 — product shots and COA scans keep a white backing on purpose: a vial or a
       lab certificate on a dark ground reads as broken, not styled */
:root[data-theme="dark"] .prod .ph,
:root[data-theme="dark"] .coa-thumb,
:root[data-theme="dark"] .coa-thumb img,
:root[data-theme="dark"] .coa-modal img,
:root[data-theme="dark"] .pv-media,
:root[data-theme="dark"] .pv-media img{background:#fff}
:root[data-theme="dark"] img:not([src*=".svg"]){filter:brightness(.94)}

/* ===========================================================================
   SYSTEM DARK MODE (prefers-color-scheme)
   The rules above are all [data-theme="dark"], i.e. they only fire when the
   user hits the toggle. A visitor whose PHONE is in dark mode got the token
   flip (dark body, light text) but none of these component rules — so cards
   stayed white with light text on them, which is unreadable.
   Mirrored here, guarded by :not([data-theme="light"]) so an explicit
   light choice still wins.
   =========================================================================== */
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]){
  color-scheme:dark;
  --ivory:#10130f;--paper:#10130f;--ink:#eef2ea;--ink-soft:#9C99AE;--muted:#8A889B;
  --sage-pale:#182018;--line:#242a22;--red:#e35d67;--red-deep:#c4313b;
  --shadow:0 16px 46px rgba(0,0,0,.5);
  --invert-bg:#eef2ea;--invert-fg:#10130f;
}
:root:not([data-theme="light"]) body{background:var(--paper);color:var(--ink)}
/* 1 — every surface lighter than 0.75 luminance, from all sixteen blocks.
       These also set color. A <button> or <input> with no colour of its own
       falls back to the browser default BLACK, which is fine on a white tile
       and invisible the moment the tile goes dark — that is exactly what
       happened to the vial-size selector. */
:root:not([data-theme="light"]) .cutbar, :root:not([data-theme="light"]) .nav-in, :root:not([data-theme="light"]) .mmenu{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .fpill, :root:not([data-theme="light"]) .verify-art, :root:not([data-theme="light"]) .coa-search{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .cc-badge.req, :root:not([data-theme="light"]) .pv-dose, :root:not([data-theme="light"]) .pv-supp{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .pv-supp-add, :root:not([data-theme="light"]) .wa, :root:not([data-theme="light"]) .ci .cithumb{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .cart-email input, :root:not([data-theme="light"]) .cart-name input, :root:not([data-theme="light"]) .pv-trust .tb{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .lowtag, :root:not([data-theme="light"]) .soldtag, :root:not([data-theme="light"]) .add.oos{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .btn.oos, :root:not([data-theme="light"]) .pv-oos, :root:not([data-theme="light"]) .pv-low{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .catsearch input, :root:not([data-theme="light"]) .cart-up, :root:not([data-theme="light"]) .cu-add{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .bundle, :root:not([data-theme="light"]) .penkit, :root:not([data-theme="light"]) .penkit-media{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .cart-free, :root:not([data-theme="light"]) .pv-sale, :root:not([data-theme="light"]) .stackcard{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .cart-gift, :root:not([data-theme="light"]) .bs-card, :root:not([data-theme="light"]) .jpc{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .jpc-cta.sold, :root:not([data-theme="light"]) .bs-cart, :root:not([data-theme="light"]) .assess-chips span{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .assess-card, :root:not([data-theme="light"]) .assess-card input, :root:not([data-theme="light"]) .assess-card select{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .assess-card input:focus, :root:not([data-theme="light"]) .assess-card select:focus, :root:not([data-theme="light"]) .shop-sel{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .shop-search, :root:not([data-theme="light"]) .co-in, :root:not([data-theme="light"]) .co-pay{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .co-panel, :root:not([data-theme="light"]) .rc-box, :root:not([data-theme="light"]) .rc-copy{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .rc-copy2, :root:not([data-theme="light"]) .rc-credit, :root:not([data-theme="light"]) .kit-card{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .rev, :root:not([data-theme="light"]) .rb-steps span, :root:not([data-theme="light"]) .rb-card{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) #carlOptin .co-form input, :root:not([data-theme="light"]) .su-tier.feat, :root:not([data-theme="light"]) .pv-stockup{background:var(--ivory);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .jpwc-code span{background:var(--ivory);border-color:var(--line);color:var(--ink)}
/* 2 — controls that used var(--ink) as a background with white text */
:root:not([data-theme="light"]) .btn-dark, :root:not([data-theme="light"]) .cartbtn, :root:not([data-theme="light"]) .fpill.on{background:var(--invert-bg);color:var(--invert-fg)!important}
:root:not([data-theme="light"]) .prod .add, :root:not([data-theme="light"]) .jp-toast, :root:not([data-theme="light"]) .verify{background:var(--invert-bg);color:var(--invert-fg)!important}
:root:not([data-theme="light"]) .pv-dose.on, :root:not([data-theme="light"]) .pv-cd, :root:not([data-theme="light"]) .cart-cd{background:var(--invert-bg);color:var(--invert-fg)!important}:root:not([data-theme="light"]) .cart-cd b{color:#B496FF}
:root:not([data-theme="light"]) .bs-see:hover, :root:not([data-theme="light"]) .jpc-cta, :root:not([data-theme="light"]) .bs-view{background:var(--invert-bg);color:var(--invert-fg)!important}
:root:not([data-theme="light"]) .shx-btn, :root:not([data-theme="light"]) .shx-timer b, :root:not([data-theme="light"]) .legal-nav a.on{background:var(--invert-bg);color:var(--invert-fg)!important}
:root:not([data-theme="light"]) .shx{background:radial-gradient(120% 100% at 15% 0%,#1c2119,var(--paper))}
:root:not([data-theme="light"]) .shx-sub{color:var(--ink-soft)}
:root:not([data-theme="light"]) .jpwc-cta{background:var(--invert-bg);color:var(--invert-fg)!important}
/* 3 — full-width bands stay dark rather than flashing light across the page */
:root:not([data-theme="light"]) .trustbar, :root:not([data-theme="light"]) .navtog span, :root:not([data-theme="light"]) .trust{background:#080a08;color:#eef2ea}
:root:not([data-theme="light"]) .promobar{background:#080a08;color:#eef2ea}
:root:not([data-theme="light"]) .navtog span{background:#eef2ea}
/* 4 — controls that deliberately keep a white ground need dark text back */
:root:not([data-theme="light"]) .btn-soft, :root:not([data-theme="light"]) .btn-light, :root:not([data-theme="light"]) .bs-arrow, :root:not([data-theme="light"]) .jpc-qadd, :root:not([data-theme="light"]) .pv-qty button, :root:not([data-theme="light"]) .ci .ciq button{background:#fff!important;color:#21271f!important;border-color:#d8d8d8}
/* 5 — my own components: these use var(--ink) as a ground, which now inverts */
:root:not([data-theme="light"]) .jp-cookie{background:#080a08;color:#eef2ea}
:root:not([data-theme="light"]) .jp-cookie p{color:#C9C6D6}
:root:not([data-theme="light"]) .jp-cookie button{background:#eef2ea;color:#10130f}
:root:not([data-theme="light"]) .jp-cookie button.ghost{background:none;color:#eef2ea;border-color:rgba(255,255,255,.45)}
:root:not([data-theme="light"]) .jp-modal-in{background:var(--ivory);color:var(--ink)}
/* 7 — residuals found by measuring the rendered page rather than reading CSS.
       .jpc-cta.sold matched BOTH the surface list (dark ground) and the control
       list (dark text) and came out invisible at 1.0:1. The rest are muted greys
       that were fine on cream and sit under 4.5:1 on a dark ground. */
:root:not([data-theme="light"]) .jpc-cta.sold{color:var(--ink)!important;opacity:.55}
:root:not([data-theme="light"]) footer span, :root:not([data-theme="light"]) footer small, :root:not([data-theme="light"]) .disc{color:#9C99AE}
:root:not([data-theme="light"]) .ck{color:#B496FF}
/* 8 — --red does two jobs and they pull opposite ways. As TEXT on a dark ground
       it has to lighten (3.43:1 -> 5.37:1), which is why --red is #e35d67 above.
       But these use it as a BACKGROUND with white text on top, where lightening
       it makes contrast WORSE (5.0:1 -> 3.48:1). They keep the deep red. */
:root:not([data-theme="light"]) .btn-red, :root:not([data-theme="light"]) .cartbtn .cnt, :root:not([data-theme="light"]) .prod .add:hover{background:var(--red-deep)!important}
:root:not([data-theme="light"]) .pv-proto-pct, :root:not([data-theme="light"]) .saletag, :root:not([data-theme="light"]) .jpc-badge{background:var(--red-deep)!important}
:root:not([data-theme="light"]) .jpc-sale, :root:not([data-theme="light"]) .jpc-cta:hover, :root:not([data-theme="light"]) .bs-view:hover{background:var(--red-deep)!important}
:root:not([data-theme="light"]) .bs-tag, :root:not([data-theme="light"]) .kit-badge, :root:not([data-theme="light"]) .rb-steps b{background:var(--red-deep)!important}
:root:not([data-theme="light"]) .su-tab, :root:not([data-theme="light"]) .jpwc-copy, :root:not([data-theme="light"]) .spin-tab{background:var(--red-deep)!important}
:root:not([data-theme="light"]) .spin-tab-txt, :root:not([data-theme="light"]) .spin-emoji{background:var(--red-deep)!important}
/* 9 — the cart count sits INSIDE .cartbtn, so it inherited that control's
       inverted dark text and landed on the deep red badge. */
:root:not([data-theme="light"]) .cartbtn .cnt{color:#fff!important}
/* 10 — --sage-deep also does two jobs. It is the BEST VALUE badge ground (white
        text on it, so it must stay deep) and it is the tick/label text colour
        (4.08:1 on black, so that must lighten). Backgrounds keep the deep value;
        only the text usages are lifted. */
:root:not([data-theme="light"]) .pv-bl li .ck, :root:not([data-theme="light"]) .prod .pd, :root:not([data-theme="light"]) .cart-empty .ce-ic, :root:not([data-theme="light"]) .cart-offer{color:#B496FF}
:root:not([data-theme="light"]) .pv-trust .tk, :root:not([data-theme="light"]) .pv-dose.bestval, :root:not([data-theme="light"]) .bundle.feat, :root:not([data-theme="light"]) .bundle .bt{color:#B496FF}
:root:not([data-theme="light"]) .pk-list .ck, :root:not([data-theme="light"]) .stackcard .sk-list .ck, :root:not([data-theme="light"]) .rc-stats .rs-n, :root:not([data-theme="light"]) .kit-list .ck{color:#B496FF}
:root:not([data-theme="light"]) .rev-vf{color:#B496FF}
/* 11 — leftovers from the product view, which the shop-page audit never saw
        because .pv-* is not in that DOM at all. */
/* the theme's JS writes this colour INLINE (style="color:#a8262f"), so a
   stylesheet rule cannot reach it — !important is the only lever. */
:root:not([data-theme="light"]) .lowdot{color:var(--red)!important}
:root:not([data-theme="light"]) .sep{color:var(--muted)}
/* 6 — product shots and COA scans keep a white backing on purpose: a vial or a
       lab certificate on a dark ground reads as broken, not styled */
:root:not([data-theme="light"]) .prod .ph, :root:not([data-theme="light"]) .coa-thumb, :root:not([data-theme="light"]) .coa-thumb img, :root:not([data-theme="light"]) .coa-modal img, :root:not([data-theme="light"]) .pv-media, :root:not([data-theme="light"]) .pv-media img{background:#fff}
:root:not([data-theme="light"]) img:not([src*=".svg"]){filter:brightness(.94)}
}





/* ===========================================================================
   DARK-MODE CONTRAST FIXES
   Found by walking every VISIBLE text node and measuring real contrast
   against its real background (alpha composited, gradient stops parsed).
   Hidden nodes are skipped -- the gated wholesale portal alone accounted
   for 354 'failures' that no visitor can actually see.
   =========================================================================== */

/* the >99% <b> inside .cc-kick inherits the kicker grey; * covers b/span/em */
.cc-kick,.cc-kick *{color:#6b6248}
/* red accent on the cream .final gradient: 2.88 in BOTH themes */
.section.final em,.final em{color:#b03a43}
.cc-lab{color:#63604f}
.cc-dose{color:#585e4e}
/* .cc-pur sets the grey that its <b> inherits; the span keeps the red */
.cc-pur{color:#6b6248!important}      /* a .cc.request variant outranks a bare .cc-pur */
.cc-pur span{color:#a32b34!important}
.jp-reviews > p{color:#9aa48c!important} /* this <p> carries an inline color */

@media(prefers-color-scheme:dark){

  /* --- fixed LIGHT panels: text must be pinned dark ----------------------
     .cc (COA card) and .final both paint hardcoded light gradients that never
     change with the theme, while their text follows var(--ink) -- which flips
     light. Ratio 1.0, invisible. */
  :root:not([data-theme="light"]) .cc-name,:root:not([data-theme="light"]) .cc-brand,:root:not([data-theme="light"]) .cc-mono{color:#21271f}
  :root:not([data-theme="light"]) .cc-mono{border-color:#21271f}
  :root:not([data-theme="light"]) .section.final h2,:root:not([data-theme="light"]) .section.final h3,:root:not([data-theme="light"]) .section.final p,
  :root:not([data-theme="light"]) .section.final li,:root:not([data-theme="light"]) .section.final .eyebrow{color:#21271f}

  /* --- .rb: the gradient itself is the bug -------------------------------
     radial-gradient(...,#fff,var(--ivory)) -- the #fff stop is hardcoded, so
     in dark mode it paints a white blob fading into the dark page. Darkening
     that stop keeps the section dark and lets the light text stand. */
  :root:not([data-theme="light"]) .rb{background:radial-gradient(120% 100% at 85% 0%,#1e241c,var(--ivory))}

  /* --- .section.verify INVERTS (dark band in light mode, light in dark) --- */
  :root:not([data-theme="light"]) .section.verify h2,:root:not([data-theme="light"]) .section.verify h3,:root:not([data-theme="light"]) .section.verify p,
  :root:not([data-theme="light"]) .section.verify li,:root:not([data-theme="light"]) .section.verify .eyebrow,
  :root:not([data-theme="light"]) .section.verify cite,:root:not([data-theme="light"]) .section.verify small{color:#21271f}
  :root:not([data-theme="light"]) .section.verify .ck{color:#B496FF}

  /* --- muted text already too faint on dark ------------------------------ */
  :root:not([data-theme="light"]) .rbc-sub{color:#8A889B}
  :root:not([data-theme="light"]) .jpe-dis,:root:not([data-theme="light"]) div.jpe-dis{color:#8A889B}

  /* --- the mobile burger ------------------------------------------------
     .navtog paints a HARDCODED white background. Its border already themed
     (var(--line)) and its bars were deliberately flipped light for dark mode,
     but the background was missed -- so light bars sat on a white plate at a
     contrast ratio of 1.13. Invisible, and invisible to a TEXT-contrast audit
     too, because the bars are <span> backgrounds with no text node. */
  :root:not([data-theme="light"]) .navtog{background:var(--sage-pale);border-color:var(--line);color:var(--ink)}

  /* --- round 2: things that beat a plain class selector ------------------- */
  /* #jpentry .jpe-dis is an ID selector (1,1,0) and outranks the rule above. */
  :root:not([data-theme="light"]) #jpentry .jpe-dis{color:#8A889B}
  /* .eyebrow carries an INLINE style attribute, which beats every stylesheet
     rule -- !important is the only lever short of editing the markup. */
  :root:not([data-theme="light"]) .section.verify .eyebrow{color:#B496FF !important}
  /* .rb is now dark in dark mode, so its copy has to go light rather than
     keeping the mid-grey that only worked against the old white gradient. */
  :root:not([data-theme="light"]) .rb-copy p{color:#C9C6D6}
  :root:not([data-theme="light"]) .rb-copy h2,:root:not([data-theme="light"]) .rb-copy .eyebrow,:root:not([data-theme="light"]) .rb-copy b{color:#eef2ea}
  :root:not([data-theme="light"]) .rb-copy .eyebrow{color:#e35d67 !important}
  :root:not([data-theme="light"]) .rb .btn.btn-red{color:#fff}
}


  /* --- fixed LIGHT panels: text must be pinned dark ----------------------
     .cc (COA card) and .final both paint hardcoded light gradients that never
     change with the theme, while their text follows var(--ink) -- which flips
     light. Ratio 1.0, invisible. */
  :root[data-theme="dark"] .cc-name,:root[data-theme="dark"] .cc-brand,:root[data-theme="dark"] .cc-mono{color:#21271f}
  :root[data-theme="dark"] .cc-mono{border-color:#21271f}
  :root[data-theme="dark"] .section.final h2,:root[data-theme="dark"] .section.final h3,:root[data-theme="dark"] .section.final p,
  :root[data-theme="dark"] .section.final li,:root[data-theme="dark"] .section.final .eyebrow{color:#21271f}

  /* --- .rb: the gradient itself is the bug -------------------------------
     radial-gradient(...,#fff,var(--ivory)) -- the #fff stop is hardcoded, so
     in dark mode it paints a white blob fading into the dark page. Darkening
     that stop keeps the section dark and lets the light text stand. */
  :root[data-theme="dark"] .rb{background:radial-gradient(120% 100% at 85% 0%,#1e241c,var(--ivory))}

  /* --- .section.verify INVERTS (dark band in light mode, light in dark) --- */
  :root[data-theme="dark"] .section.verify h2,:root[data-theme="dark"] .section.verify h3,:root[data-theme="dark"] .section.verify p,
  :root[data-theme="dark"] .section.verify li,:root[data-theme="dark"] .section.verify .eyebrow,
  :root[data-theme="dark"] .section.verify cite,:root[data-theme="dark"] .section.verify small{color:#21271f}
  :root[data-theme="dark"] .section.verify .ck{color:#B496FF}

  /* --- muted text already too faint on dark ------------------------------ */
  :root[data-theme="dark"] .rbc-sub{color:#8A889B}
  :root[data-theme="dark"] .jpe-dis,:root[data-theme="dark"] div.jpe-dis{color:#8A889B}

  /* --- the mobile burger ------------------------------------------------
     .navtog paints a HARDCODED white background. Its border already themed
     (var(--line)) and its bars were deliberately flipped light for dark mode,
     but the background was missed -- so light bars sat on a white plate at a
     contrast ratio of 1.13. Invisible, and invisible to a TEXT-contrast audit
     too, because the bars are <span> backgrounds with no text node. */
  :root[data-theme="dark"] .navtog{background:var(--sage-pale);border-color:var(--line);color:var(--ink)}

  /* --- round 2: things that beat a plain class selector ------------------- */
  /* #jpentry .jpe-dis is an ID selector (1,1,0) and outranks the rule above. */
  :root[data-theme="dark"] #jpentry .jpe-dis{color:#8A889B}
  /* .eyebrow carries an INLINE style attribute, which beats every stylesheet
     rule -- !important is the only lever short of editing the markup. */
  :root[data-theme="dark"] .section.verify .eyebrow{color:#B496FF !important}
  /* .rb is now dark in dark mode, so its copy has to go light rather than
     keeping the mid-grey that only worked against the old white gradient. */
  :root[data-theme="dark"] .rb-copy p{color:#C9C6D6}
  :root[data-theme="dark"] .rb-copy h2,:root[data-theme="dark"] .rb-copy .eyebrow,:root[data-theme="dark"] .rb-copy b{color:#eef2ea}
  :root[data-theme="dark"] .rb-copy .eyebrow{color:#e35d67 !important}
  :root[data-theme="dark"] .rb .btn.btn-red{color:#fff}