/* ============================================================
   NIKE THEME ??? Pure North Peptides
   Re-skins the BMW-M (dark, sharp, motorsport) base to the Nike
   commerce system: white canvas, ink-black pill CTAs, soft-cloud
   product staging, Helvetica/Inter UI, Bebas Neue campaign display.

   Loaded LAST on every page so it wins by source order + specificity
   over the 270KB minified blob and per-page inline dark <style>.
   Reversible: remove the <link> (see _build/apply-nike-theme.py).
   Spec: DESIGN-nike.md
   ============================================================ */

/* ---------- 1. TOKEN OVERRIDES ----------
   The inline critical <style> on each page sets these to dark values.
   We redefine them to Nike's palette; our sheet loads later so it wins. */
:root{
  /* surfaces */
  --canvas:#ffffff; --surface-dark:#ffffff; --surface-soft:#f5f5f5;
  --surface-card:#f5f5f5; --surface-elevated:#ffffff; --carbon-gray:#f5f5f5;
  /* ink + text */
  --ink:#111111; --on-dark:#111111; --body:#39393b; --body-strong:#111111;
  --muted:#5d5d60; --b-near-black:#111111; --b-silver:#5d5d60; --b-meta:#5d5d60;
  /* lines */
  --hairline:#cacacb; --hairline-strong:#e5e5e5; --b-line:#e5e5e5; --b-line-dark:#cacacb;
  /* brand: Nike has no brand color ??? primary is ink. Keep a blue var for any
     legacy reference but it is no longer the CTA fill. */
  --blue:#111111; --b-blue:#111111; --blue-bright:#1151ff; --electric-blue:#1151ff;
  --m-blue-light:#1151ff; --m-blue-dark:#1151ff; --m-red:#d30005;
  /* semantic */
  --success:#007d48; --warning:#d30005; --sale:#d30005;
  /* type */
  --font:"Pure North Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --b-font:"Pure North Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --b-font-display:"Pure North Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* heading/title tier = readable Helvetica/Inter. Bebas is applied ONLY to the
     large campaign display classes below ??? never small headings/product names. */
  --font-display:"Pure North Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* ---------- 2. BASE ---------- */
html,body{background:#ffffff!important;color:#111111!important;
  font-family:"Pure North Sans","Helvetica Neue",Helvetica,Arial,sans-serif!important;
  letter-spacing:0!important}
p,li,dd,dt,span,a{letter-spacing:0!important}
::selection{background:#111;color:#fff}

/* ---------- 3. TYPOGRAPHY ----------
   Nike: one towering uppercase display tier (campaign) + quiet Helvetica UI.
   Map the existing big display headlines to Bebas Neue uppercase. */
.lab__display,.hero-title,.display-xl,.display-lg,.display-md,.h7-display,
.lab-band__headline,.cdn__title,.page-hero--media h1,.page-head--media h1{
  font-family:"Pure North Sans","Pure North Sans","Pure North Sans","Helvetica Neue",Arial,sans-serif!important;
  font-weight:400!important;text-transform:uppercase!important;
  letter-spacing:0!important;line-height:.95!important}
/* heading/title tier (product names, sub-heads, FAQ rows) = readable Inter, NOT Bebas */
.card__name,.cdn__h,.title-md,.title-sm,.heading-md,.heading-lg,.feat__h,.trust__h,
.j-card__title,.lab-headline,.faq-row,h3.title-md,.title-lg{
  font-family:"Pure North Sans","Helvetica Neue",Helvetica,Arial,sans-serif!important;
  text-transform:none!important;font-weight:600!important;letter-spacing:0!important;line-height:1.25!important}
.display-lg,.display-md,h1,h2{ -webkit-font-smoothing:antialiased }
/* section/eyebrow labels: quiet caps, ink/mute ??? drop the blue accent */
.eyebrow,.eyebrow.on-dark,.lab__eyebrow,.lab-band__eyebrow,
.section-head .eyebrow,.h7-eyebrow,.card__cat{
  color:#9aa4b6!important;letter-spacing:.04em!important;font-weight:500!important}
.eyebrow::before,.lab__eyebrow::before,.lab-band__eyebrow::before{background:#9aa4b6!important}

/* ---------- 4. PILL GEOMETRY ----------
   Override the global `*{border-radius:0!important}` for actionable chrome.
   Cards/images stay square (Nike keeps product cards at radius 0). */
.btn,a.btn,button.btn,.lab__btn,.lab-band__cta,.mobile-cta,.card__quick,
.chip,.pdp__cta button,.pdp__cta a,.btn--lg,.btn--blue,.btn--ghost,
.hero--lab .lab__btn,.add-to-cart,.checkout__btn,.cta,.cta-band__btn,
input[type="search"],input[type="email"],input[type="text"],.search-pill,
.newsletter-cap input,.filters .chip{
  border-radius:0!important}
/* circular icon buttons */
.iconbtn,.scroll-top,.button-icon,.carousel-arrow{border-radius:0!important}

/* ---------- 5. CTAs ----------
   Nike primary = solid ink pill, white text. Kill the BMW white-outline rule. */
.btn,a.btn,button.btn,.btn--blue,a.btn.btn--blue,.btn--lg,.lab__btn--blue,
.add-to-cart,.checkout__btn,.card__quick,.mobile-cta,.cta-band__btn,
.band .btn.btn--blue,.band--light .btn.btn--blue{
  background:#111111!important;color:#ffffff!important;border:0!important;
  font-family:"Pure North Sans","Helvetica Neue",Arial,sans-serif!important;
  font-weight:500!important;text-transform:none!important;letter-spacing:0!important;
  padding:16px 32px!important;transition:opacity .15s,transform .1s!important}
.btn:hover,a.btn:hover,.btn--blue:hover,.btn--lg:hover,.lab__btn--blue:hover,
.card__quick:hover,.add-to-cart:hover,.mobile-cta:hover,
.band .btn.btn--blue:hover,.band--light .btn.btn--blue:hover{
  background:#111111!important;color:#fff!important;opacity:.82!important}
.btn:active,a.btn:active,.btn--blue:active{transform:scale(.97)!important;opacity:.5!important}
/* secondary / ghost: soft-cloud pill, ink text */
.btn--ghost,.lab__btn--ghost,.btn--secondary,.band--light .btn.btn--ghost{
  background:#f5f5f5!important;color:#111111!important;border:0!important;text-decoration:none!important}
.btn--ghost:hover,.lab__btn--ghost:hover{background:#e9e9e9!important;color:#111!important}
.lab__btn--ghost::after{color:#111!important}

/* ---------- 6. NAV + UTILITY BARS ---------- */
.compliance{background:#0d0d0d!important;color:#9aa4b6!important;border-bottom:1px solid #e5e5e5}
.compliance__inner b{color:#111!important}
.nav,header.nav{background:#ffffff!important;color:#111!important;border-bottom:1px solid #cacacb!important}
.nav__brand,.nav__brand a{color:#111!important}
.nav__links a{color:#111!important;font-weight:500!important;text-transform:none!important;letter-spacing:0!important}
.nav__links a:hover{color:#9aa4b6!important}
/* active / current-page nav link: was forced WHITE (invisible on the Nike white nav) ??? ink */
.nav__links a.is-active,.nav__links a[aria-current="page"],
html body .nav__links a[aria-current="page"]{color:#111111!important}
.nav__links a.is-active::after,.nav__links a[aria-current="page"]::after{background:#111111!important}
.nav__util .iconbtn,.iconbtn{color:#111!important;background:transparent!important}
.cart__dot{background:#111!important;color:#fff!important}
.progress{background:#111!important}
.breadcrumbs,nav.breadcrumbs{background:#ffffff!important;border-bottom:1px solid #e5e5e5}
body[class] nav.breadcrumbs{background:#fff!important}
body[class] nav.breadcrumbs a{color:#9aa4b6!important}
body[class] nav.breadcrumbs span{color:#9e9ea0!important}
/* mobile nav drawer */
.nav__links.is-open{background:#fff!important}
.nav__links.is-open a{color:#111!important}

/* ---------- 7. HERO (dark lab ??? light editorial) ---------- */
.hero,.hero--lab,section.hero.hero--lab,section.hero.hero--vial,
.hero--lab .lab__hero,.hero--v7,.hero--v2{background:#ffffff!important;color:#111!important}
.hero--lab .lab__base,.hero--v7 .h7-grid{background:#ffffff!important;
  background-image:none!important}
.hero--lab .lab__grain,.hero--lab .lab__bracket{display:none!important}
.lab__display,.lab__display__line,.hero--lab .lab__display,
.hero--lab .lab__display .lab__display__line{color:#111111!important}
.lab__display__line--accent,.hero--lab .lab__display__line--accent{color:#9aa4b6!important}
.lab__lead,.hero--lab .lab__lead{color:#39393b!important;text-shadow:none!important}
.lab__lead b,.hero--lab .lab__lead b{color:#111!important}
.lab__eyebrow,.hero--lab .lab__eyebrow{color:#9aa4b6!important}
.lab__eyebrow::before{background:#9aa4b6!important}
.pn-stripe{display:none!important}
/* hero ribbon: dark glass ??? soft-cloud stat strip */
.hero--lab .lab__ribbon{background:#f5f5f5!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;border-top:1px solid #cacacb!important;position:static!important}
.hero--lab .lab__ribbon__cell{border-right:1px solid #e5e5e5!important}
.hero--lab .lab__ribbon__k{color:#9aa4b6!important}
.hero--lab .lab__ribbon__v{color:#111!important}
.hero--lab .lab__ribbon__v i{color:#9aa4b6!important}
.hero--lab .lab__seal,.hero--vial .lab__vial::after{display:none!important}
.hero--vial .lab__vial img{filter:none!important}
/* POLISH: frame the hero emblem on a soft-cloud studio stage (Nike split hero)
   instead of floating a dark mark on white. Copy stays left on white. */
@media(min-width:901px){
  html body section.hero.hero--vial .lab__vial{position:absolute!important;top:0!important;right:0!important;
    bottom:0!important;left:auto!important;width:44%!important;background:#f5f5f5!important;
    display:flex!important;align-items:center!important;justify-content:center!important;padding:56px!important}
  html body section.hero.hero--vial .lab__vial img{max-width:64%!important;max-height:58%!important;
    width:auto!important;height:auto!important;filter:none!important;mix-blend-mode:multiply}
  html body section.hero.hero--vial .lab__vial::after{display:none!important}
}
/* primary hero CTA pill */
.hero--lab .lab__btn--blue{background:#111!important;color:#fff!important;border:0!important}
.hero--lab .lab__btn--blue:hover{background:#111!important;opacity:.82!important}

/* ---------- 7b. PAGE-HEAD / PAGE-HERO (content-page headers) ----------
   These were dark headers with forced white h1/lead; the theme flipped the
   background to white but the page a11y CSS still forces white text ??? invisible.
   Force ink/charcoal on every content-page header across the site. */
/* NON-media headers = white surface ??? ink/charcoal text.
   MEDIA headers (.page-hero--media / .page-head--media) = dark photo band ???
   keep WHITE text (these are the Nike campaign tiles on catalog/checkout/faq). */
header.page-head:not(.page-head--media),section.page-head:not(.page-head--media),
.page-head:not(.page-head--media),.page-hero:not(.page-hero--media),
section.page-hero:not(.page-hero--media){background:#ffffff!important;color:#111!important}
html body .page-head:not(.page-head--media) h1,html body header.page-head:not(.page-head--media) h1,
html body section.band--dark .page-head:not(.page-head--media) h1,
html body section.band--dark .page-head:not(.page-head--media) .on-dark,
html body .page-head:not(.page-head--media) .on-dark,html body .page-head:not(.page-head--media) .display-lg,
html body .page-hero:not(.page-hero--media) h1,html body .page-hero:not(.page-hero--media) .display-lg{color:#111111!important}
html body .page-head:not(.page-head--media) .page-head__lede,html body .page-head:not(.page-head--media) .page-head__lead,
html body .page-hero:not(.page-hero--media) .page-hero__lede,html body .page-head:not(.page-head--media) p,
html body .page-hero:not(.page-hero--media) p,html body .page-head:not(.page-head--media) .lede,
html body .page-hero:not(.page-hero--media) .lede{color:#39393b!important}
html body .page-head:not(.page-head--media) .eyebrow,html body .page-hero:not(.page-hero--media) .eyebrow,
html body .page-hero:not(.page-hero--media) .eyebrow.on-dark{color:#9aa4b6!important}
html body .page-head:not(.page-head--media) .crumbs a,html body .page-head:not(.page-head--media) .crumbs span,
html body .page-hero:not(.page-hero--media) .crumbs a,html body .page-hero:not(.page-hero--media) .crumbs span{color:#9aa4b6!important}
/* MEDIA heroes ??? ensure legible white type on the dark photo, mute the blue eyebrow to a light stone */
html body .page-hero--media h1,html body .page-hero--media .display-lg,
html body .page-head--media h1,html body .page-head--media .display-lg{color:#ffffff!important}
html body .page-hero--media .page-hero__lede,html body .page-hero--media p,
html body .page-hero--media .lede,html body .page-head--media p{color:rgba(255,255,255,.88)!important}
html body .page-hero--media .eyebrow,html body .page-hero--media .eyebrow.on-dark,
html body .page-head--media .eyebrow{color:rgba(255,255,255,.72)!important}
html body .page-hero--media .crumbs a,html body .page-hero--media .crumbs span{color:rgba(255,255,255,.7)!important}

/* ---------- 8. BANDS (flip dark surfaces to light) ---------- */
.band--dark,section.band--dark,.cdn,section.cdn,.by-numbers,
.features-strip,.trust,.standards-band,section#standards{
  background:#ffffff!important;color:#111!important}
.band--light{background:#ffffff!important;color:#111!important}
.band--dark p,.band--dark li,.band--dark .standards__body,.band--dark .lede,
.cdn__p,.by-numbers__sub,.feat__p,.trust__p,.standards__body{color:#39393b!important}
.band--dark h1,.band--dark h2,.band--dark h3,.band--dark .display-lg,
.on-dark,.title-md.on-dark,.cdn__h,.cdn__title,.feat__h,.trust__h,
.by-numbers__num,.by-numbers__lbl,.standards__num,section#standards .display-lg{color:#111!important}
.standards__num,.by-numbers__num{color:#cacacb!important}
.feat__icon,.trust__icon,.cdn__leaf,.trust-strip__leaf{color:#111!important}
/* trust strip */
.trust-strip{background:#f5f5f5!important;color:#111!important;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5}
.trust-strip__brand,.trust-strip__list b{color:#111!important}
.trust-strip__list li{color:#39393b!important}

/* ---------- 9. PRODUCT CARDS (Nike: soft-cloud stage, flat, ink meta) ---------- */
.card,.product-card{background:#ffffff!important;border:0!important;box-shadow:none!important}
/* product image staging = WHITE (new vial renders are white-bg ??? seamless, no gray frame) */
.card__photo,.product-card-image,.card__photo picture,.card__photo img,
.pdp__media,.pdp__gallery,.pdp__image,.pdp__photo,.product-hero__media,
[class*="pdp"] .card__photo,[class*="gallery"] img{background:#ffffff!important}
.card__name,.card__price{color:#111111!important;font-weight:500!important}
.card__meta,.card__cat{color:#9aa4b6!important}
.card__cta{color:#111!important}
.card__price small{color:#9aa4b6!important}
.product-grid{gap:8px!important}
.filters .chip{background:#fff!important;color:#111!important;border:1px solid #cacacb!important}
.filters .chip.is-active{background:#111!important;color:#fff!important;border-color:#111!important}

/* ---------- 10. LAB-BAND (editorial photo band ??? keep dark overlay, on-brand) ----------
   Nike's "photography speaks" ??? a full-bleed image band with white type is on
   spec, so we leave the lab-band image + white text, only pill its CTA. */
.lab-band__cta{background:#ffffff!important;color:#111!important;border:0!important;backdrop-filter:none!important}
.lab-band__cta:hover{background:#f5f5f5!important}
.lab-band__cta::after{content:"\2192";margin-left:6px}

/* ---------- 11. FOOTER (dark ??? white, hairline top, mute links) ---------- */
.footer-sitemap,footer.footer-sitemap{background:#ffffff!important;color:#9aa4b6!important;border-top:1px solid #cacacb!important}
.footer-sitemap__col h3,.footer-sitemap__col h4{color:#111!important}
.footer-sitemap__col a{color:#9aa4b6!important}
.footer-sitemap__col a:hover{color:#111!important}
.footer-sitemap__bottom,.footer-sitemap__bottom span,.footer-sitemap__bottom a{color:#9e9ea0!important}
.footer-sitemap__pay-incol{border-top:1px solid #e5e5e5!important}
.footer-sitemap__pay-label,.footer-sitemap__pay-mark__label,.footer-sitemap__pay-via{color:#9aa4b6!important}
.footer-sitemap__pay-mark__icon{background:#f5f5f5!important;border:1px solid #e5e5e5!important}
.footer-sitemap__pay-mark img{filter:none!important;opacity:.85!important}

/* ---------- 11b. KILL M-TRICOLOR + STRAY ACCENTS ----------
   The page paints a blue???red M stripe as a 4px border-image on <html>.
   Nike has no tricolor ??? remove it. */
html,html.sa-ready{border-top:0!important;border-image:none!important}
.pn-stripe,.hero__mstripe,.lab__mstripe,[class*="mstripe"],[class*="m-stripe"]{display:none!important}
/* the M-tricolor under the nav is painted as .nav::after ??? remove it */
.nav::after,.nav::before,header.nav::after,header.nav::before{display:none!important;background-image:none!important;border-image:none!important}
/* product card category subtitle: an inline rule forces blue ??? make it mute */
.card .card__cat,.j-card .card__cat,.card__cat{color:#9aa4b6!important}
/* lab-band editorial headline reads white on the dark photo (no blue accent) */
.lab-band__headline em,html body section.lab-band .lab-band__headline em{color:#ffffff!important}
.lab-band__eyebrow,html body section.lab-band .lab-band__eyebrow{color:#ffffff!important}
.lab-band__eyebrow::before{background:#ffffff!important}

/* ---------- 12. MISC ---------- */
.scroll-top{background:#111!important;color:#fff!important}
.pdp-stickybar{background:#fff!important;color:#111!important;border-top:1px solid #cacacb!important}
.pdp-stickybar__title,.pdp-stickybar__price{color:#111!important}
.pdp-stickybar__cta{background:#111!important;color:#fff!important;border:0!important;border-radius:0!important}
hr{border-color:#cacacb!important}
/* POLISH: scrub residual accent-blue link text in the support widget to Nike ink */
.lsw-link,.lsw a,[class*="lsw"] a{color:#111111!important;text-decoration:underline}

/* =========================================================================
   POLISH 2 ??? layout overlaps, placement, and the full Nike colour palette
   ========================================================================= */

/* (a) remove the stray fixed bottom "Shop Catalog" bar ??? redundant with the
   hero CTA + nav, and it overlapped the Talk-to-Agent launcher. */
.mobile-cta,.mobile-shop-cta,a.mobile-cta{display:none!important}

/* (b) Talk-to-Agent launcher sits cleanly bottom-left (no bar beneath it now) */
.lsw-root,#lsw-root{bottom:20px!important;left:20px!important;right:auto!important;z-index:70!important}

/* (c) FIX: product-card "Add to cart" was position:absolute and overlapped the
   price row. Put it in normal flow as a full-width pill below the metadata. */
.product-grid .card{display:flex!important;flex-direction:column!important}
.product-grid .card .card__body{display:flex!important;flex-direction:column!important;flex:1 1 auto!important}
.card__quick,.product-grid .card__quick{position:static!important;width:100%!important;
  margin-top:14px!important;min-height:44px!important;display:inline-flex!important;
  align-items:center!important;justify-content:center!important;gap:8px!important;
  opacity:1!important;transform:none!important;visibility:visible!important;inset:auto!important}

/* ---------- Nike semantic palette (DESIGN-nike.md) ---------- */
:root{
  --sale:#d30005;--sale-deep:#780700;--success:#007d48;--success-bright:#1eaa52;
  --info:#1151ff;--info-deep:#0034e3;
  --acc-pink:#ed1aa0;--acc-purple:#6d5ce6;--acc-teal:#0a7281;--acc-amber:#b25f00;
}
/* SUCCESS green ??? in-stock, verified, COA-confirmed, eligibility ticks */
.pdp__stock,.stock-badge.stock--ok,.stock--ok,[class*="in-stock"],.in-stock,
.badge--success,.is-verified,.verified-tick,.trust-row__ok,.checkout__trust .ok,
[data-stock="in"],.lab-headline__status{color:#007d48!important}
.stock-badge.stock--ok,.pdp__stock{background:rgba(0,125,72,.10)!important}
/* SALE red ??? discounted price, savings, "% off" (only place red appears in chrome) */
.disc-applied,.disc-applied *,.sub-block__opt-save,[class*="save"],.price--sale,
.sale-price,.pct-off,del + .price,.cart__discount,.checkout__row--discount b{color:#d30005!important}
del,.price--strike,.was-price{color:#9aa4b6!important}
/* category accent dots on filter chips (Nike category-accent usage) ??? keyed by href */
.filters .chip[href*="cat="]::before,.chips a[href*="cat="]::before,
nav.filters a[href*="cat="]::before{content:"";display:inline-block;width:8px;height:8px;
  border-radius:50%;margin-right:8px;vertical-align:middle;background:#9e9ea0}
.chip[href*="metabolic"]::before{background:var(--acc-teal)!important}
.chip[href*="growth-axis"]::before{background:var(--info)!important}
.chip[href*="healing"]::before{background:var(--success)!important}
.chip[href*="longevity"]::before{background:var(--acc-purple)!important}
.chip[href*="cosmetic"]::before{background:var(--acc-pink)!important}

/* ---------- 13. SPECIFICITY BOOSTS + STRAGGLERS ----------
   Some page-level rules out-specify the bare-class pill rule; raise ours. */
html body .btn,html body a.btn,html body button.btn,html body .btn--lg,
html body .btn--blue,html body .card__quick,html body .lab__btn{border-radius:0!important}
html body .btn--blue,html body .btn.btn--lg.btn--blue{background:#111!important;color:#fff!important;border:0!important}
/* cookie consent bar ??? Nike pills (decline soft, accept ink) */
.pn-cookie__btn{border-radius:0!important;border:0!important}
.pn-cookie__btn--ok{background:#111!important;color:#fff!important;border:0!important;border-radius:0!important}
.pn-cookie__btn--no{background:#f5f5f5!important;color:#111!important;border:0!important}
.pn-cookie a,.pn-cookie__link{color:#111!important}
/* qty stepper boxes keep square per Nike (inputs/cards stay 0) ??? leave as-is */

/* ---------- 14. ACCORDIONS / DISCLOSURES ----------
   FAQ + PDP disclosure rows are <details><summary>; the dark theme left the
   summary label white ??? invisible on Nike's white. Force ink across the site. */
summary,details>summary,.faq summary,.faq__q,.faq-item__q,.faq-row,
[class*="faq"] summary,[class*="accordion"] summary,.pdp-disclosure-row,
[class*="disclosure"] summary{color:#111111!important}
summary::-webkit-details-marker{color:#111!important}
/* toggle +/- glyphs and chevrons in accordions ??? ink, not blue */
[class*="faq"] [class*="toggle"],[class*="faq"] [class*="icon"],
[class*="faq"] summary i,[class*="accordion"] [class*="icon"],
.faq__toggle,.faq-item__toggle{color:#111!important}

/* POLISH 3 ??? content pages: the first body band after a hero has its top
   padding reset to 0, jamming content against the hero (seen on /coa-verify/).
   Give it breathing room. Horizontal padding stays on the inner .container. */
.page-hero + .band,.page-hero--media + .band,.page-head + .band,
section.page-hero + section.band,section.page-head + section.band{padding-top:56px!important}
/* the coa-verify lookup form: center + comfortable vertical rhythm */
#coaForm{margin:0 auto 24px!important}
#coaForm + *,#coaOut{margin-left:auto;margin-right:auto}

/* POLISH 4 ??? footer: uniform 4-col grid, clean centered Proudly-Canadian strip,
   tidy bottom legal row. Simple and balanced. */
.footer-sitemap{padding:64px var(--pad-x) 36px!important;background:#fff!important;border-top:1px solid #cacacb!important}
.footer-sitemap__inner{display:grid!important;grid-template-columns:repeat(4,1fr)!important;
  gap:40px!important;max-width:1240px!important;margin:0 auto!important;align-items:start!important}
.footer-sitemap__col h3,.footer-sitemap__col h4{font-size:13px!important;letter-spacing:.06em!important;
  text-transform:uppercase!important;font-weight:600!important;color:#111!important;margin:0 0 16px!important}
.footer-sitemap__col ul{list-style:none!important;margin:0!important;padding:0!important;
  display:flex!important;flex-direction:column!important;gap:11px!important}
.footer-sitemap__col li{margin:0!important}
.footer-sitemap__col a{font-size:14px!important;color:#9aa4b6!important;text-decoration:none!important}
.footer-sitemap__col a:hover{color:#111!important}
.footer-sitemap__pay-incol{margin-top:22px!important;padding-top:18px!important;border-top:1px solid #e5e5e5!important}
/* Proudly Canadian ??? centered clean strip (was orphaned to the side) */
.footer-cdn{max-width:1240px!important;margin:36px auto 0!important;padding-top:24px!important;
  border-top:1px solid #e5e5e5!important;display:flex!important;align-items:center!important;
  justify-content:center!important;gap:8px!important;text-align:center!important;
  font-size:13px!important;color:#9aa4b6!important}
.footer-cdn b{color:#111!important}
.footer-cdn__leaf{flex:0 0 auto}
/* bottom legal row ??? copyright left, links right, uniform */
.footer-sitemap__bottom{max-width:1240px!important;margin:18px auto 0!important;
  display:flex!important;justify-content:space-between!important;align-items:center!important;
  gap:14px!important;flex-wrap:wrap!important;font-size:12px!important;color:#9e9ea0!important}
.footer-sitemap__bottom a{color:#9e9ea0!important}.footer-sitemap__bottom a:hover{color:#111!important}
@media(max-width:860px){
  .footer-sitemap__inner{grid-template-columns:repeat(2,1fr)!important;gap:28px!important}
  .footer-sitemap__bottom{flex-direction:column!important;text-align:center!important}
}
@media(max-width:520px){.footer-sitemap__inner{grid-template-columns:1fr!important}}

/* =========================================================================
   BRAND ??? RED / WHITE / BLUE (matches the Pure North logo)
   Blue = primary (CTAs, links, eyebrows, active states); Red = accent
   (headline pop, maple leaf, cart count, sale); white canvas, ink body.
   ========================================================================= */
:root{ --brand-blue:#1b4fa0; --brand-blue-deep:#143a78; --brand-red:#cf1a2c; --brand-red-deep:#a8121f; }
/* primary CTAs -> brand blue */
.btn,a.btn,button.btn,.btn--blue,a.btn.btn--blue,.btn--lg,.lab__btn--blue,
.add-to-cart,.checkout__btn,.card__quick,.mobile-cta,.cta-band__btn,.pdp-stickybar__cta,
.pn-cookie__btn--ok,.band .btn.btn--blue,.band--light .btn.btn--blue,.hero--lab .lab__btn--blue{
  background:var(--brand-blue)!important;color:#fff!important;border:0!important}
.btn:hover,a.btn:hover,.btn--blue:hover,.btn--lg:hover,.lab__btn--blue:hover,
.add-to-cart:hover,.card__quick:hover,.mobile-cta:hover,.pdp-stickybar__cta:hover,
.band .btn.btn--blue:hover,.band--light .btn.btn--blue:hover,.hero--lab .lab__btn--blue:hover{
  background:var(--brand-blue-deep)!important;color:#fff!important;opacity:1!important}
/* secondary / ghost -> white w/ blue outline */
.btn--ghost,.lab__btn--ghost,.btn--secondary,.band--light .btn.btn--ghost{
  background:#fff!important;color:var(--brand-blue)!important;border:1.5px solid var(--brand-blue)!important}
.btn--ghost:hover,.lab__btn--ghost:hover{background:var(--brand-blue)!important;color:#fff!important}
.lab__btn--ghost::after{color:inherit!important}
/* eyebrows -> brand blue */
.eyebrow,.eyebrow.on-dark,.lab__eyebrow,.lab-band__eyebrow,.section-head .eyebrow,
.h7-eyebrow,html body .page-head:not(.page-head--media) .eyebrow,
html body .page-hero:not(.page-hero--media) .eyebrow{color:var(--brand-blue)!important}
.eyebrow::before,.lab__eyebrow::before,.lab-band__eyebrow::before{background:var(--brand-blue)!important}
/* hero/headline accent -> brand red pop */
.lab__display__line--accent,.h7-display em,.display-lg em,.hero-title em,.lab-band__headline em{color:var(--brand-red)!important}
/* inline prose links -> brand blue */
.narrative a,.prose a,article a,.page-hero__lede a,.lab__lead a,.cdn__p a{color:var(--brand-blue)!important;text-decoration:underline}
/* active nav + progress -> brand blue; cart count -> brand red */
.nav__links a.is-active,.nav__links a[aria-current="page"],html body .nav__links a[aria-current="page"]{color:var(--brand-blue)!important}
.nav__links a.is-active::after,.nav__links a[aria-current="page"]::after{background:var(--brand-blue)!important}
.progress{background:var(--brand-blue)!important}
.cart__dot{background:var(--brand-red)!important;color:#fff!important}
/* product card category eyebrow -> brand blue */
.card__cat,.card .card__cat{color:var(--brand-blue)!important}
/* category dots -> brand red/blue */
.chip[href*="metabolic"]::before{background:var(--brand-blue)!important}
.chip[href*="growth-axis"]::before{background:var(--brand-red)!important}
.chip[href*="healing"]::before{background:var(--brand-blue)!important}
.chip[href*="longevity"]::before{background:var(--brand-red)!important}
.chip[href*="cosmetic"]::before{background:var(--brand-red)!important}
.filters .chip.is-active{background:var(--brand-blue)!important;border-color:var(--brand-blue)!important;color:#fff!important}
/* maple leaves -> brand red */
.footer-cdn__leaf,.trust-strip__leaf,.cdn__leaf,.footer-cdn svg{color:var(--brand-red)!important;fill:var(--brand-red)!important}
/* sale = brand red */
.disc-applied,.disc-applied *,.sub-block__opt-save,.price--sale,.pct-off,[class*="save"]{color:var(--brand-red)!important}

/* brand colour specificity boosts (beat the hero-scoped rules above) */
html body .hero--lab .lab__display__line--accent,html body .lab__display__line--accent{color:var(--brand-red)!important}
html body .hero--lab .lab__eyebrow,html body .lab__eyebrow,html body .section-head .eyebrow,
html body .cdn__eyebrow,html body .narrative .eyebrow,html body section .eyebrow:not(.on-dark){color:var(--brand-blue)!important}
html body .hero--lab .lab__eyebrow::before,html body .lab__eyebrow::before,
html body .section-head .eyebrow::before{background:var(--brand-blue)!important}
html body .hero--lab .lab__display .lab__display__line--accent{color:var(--brand-red)!important}

/* =========================================================================
   PRO POLISH (design-review findings) ??? premium-grade refinements
   ========================================================================= */
/* B2: hero headline = Bebas Neue (was thin Inter 300 via an inline hero rule) */
html body section.hero.hero--lab .lab__display,
html body section.hero.hero--vial .lab__display,
html body section.hero.hero--lab .lab__display .lab__display__line{
  font-family:"Pure North Sans","Pure North Sans","Pure North Sans","Helvetica Neue",Arial,sans-serif!important;
  font-weight:400!important;line-height:.92!important;letter-spacing:0!important}
/* B1: hero shows the real product vial on white (not a logo in a gray box) */
@media(min-width:901px){
  html body section.hero.hero--vial .lab__vial{background:#ffffff!important;padding:24px 40px!important;width:46%!important}
  html body section.hero.hero--vial .lab__vial img{max-width:88%!important;max-height:80%!important;mix-blend-mode:normal!important;filter:none!important}
  .hero--lab .lab__grid{padding-bottom:56px!important}   /* H4: kill dead space below CTAs */
}
/* B3: stats ribbon = clean white strip with hairline (not a gray bar) */
.hero--lab .lab__ribbon{background:#ffffff!important;border-top:1px solid #e5e5e5!important;backdrop-filter:none!important}
.hero--lab .lab__ribbon__cell{border-right:1px solid #ededed!important}
.hero--lab .lab__ribbon__k{color:#9aa4b6!important}
.hero--lab .lab__ribbon__v{color:#111111!important}
.hero--lab .lab__ribbon__v i{color:#9aa4b6!important}
/* H3: matched, sentence-case hero CTAs */
.hero--lab .lab__cta .lab__btn{height:54px!important;font-size:14px!important;font-weight:600!important;
  text-transform:none!important;letter-spacing:.01em!important;display:inline-flex!important;align-items:center!important}
/* H2: product cards get a real edge + lift on hover (kept white per brand) */
.product-grid .card,.product-grid a.card,.card.card{border:1px solid #e9e9ec!important;border-radius:0!important;
  overflow:hidden!important;background:#fff!important;transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease!important}
.product-grid .card:hover{border-color:#d4d4d8!important;box-shadow:0 8px 24px rgba(17,17,17,.08)!important;transform:translateY(-2px)!important}
.card__photo{aspect-ratio:4/5!important;background:#fff!important;padding:12px!important}
/* M6: bestseller / promo badge pill (matches the pill system) */
.card__bestseller-badge,[class*="bestseller-badge"],.badge-promo,.card__badge{border-radius:0!important}
/* H5: PDP price reads as the hero number, not body copy */
.pdp__price,.pdp__price[data-price],.pdp__buy .price,.buy-rail .price,.pdp__cta .price{
  font-size:34px!important;font-weight:700!important;line-height:1.1!important;color:#111!important}
.pdp__price small,.pdp__price .cur{font-size:14px!important;font-weight:500!important;color:#9aa4b6!important}
/* M2: alternate one editorial band to break the wall-of-white */
section[aria-label="The stakes"]{background:#f7f8fa!important}
/* M3: center editorial section heads to the body column width */
section[aria-label="The shift"] .section-head,section[aria-label="The stakes"] .section-head,
section[aria-label="The promised land"] .section-head{max-width:760px!important;margin-left:auto!important;margin-right:auto!important}
/* footer: subtle tonal break from the white content above */
.footer-sitemap{background:#f7f8fa!important}
/* N2: a touch of nav letter-spacing for crispness */
.nav__links a{letter-spacing:.03em!important}
/* hero headline: #main id beats the body-inline rule that forced Inter 300 */
#main .lab__display,#main .lab__display .lab__display__line,
#main.hero .lab__display{font-family:"Pure North Sans","Pure North Sans","Pure North Sans","Helvetica Neue",Arial,sans-serif!important;font-weight:400!important;line-height:.92!important;letter-spacing:0!important}
#main.hero--vial .lab__vial{background:#ffffff!important}
#main .lab__ribbon{background:#ffffff!important;border-top:1px solid #e5e5e5!important}

/* =========================================================================
   FOOTER ??? dark navy page-end (on-brand blue family, white text)
   Overrides the earlier light footer; gives the page a real close.
   ========================================================================= */
.footer-sitemap{background:#0f2547!important;color:rgba(255,255,255,.66)!important;border-top:0!important;padding-top:72px!important}
.footer-sitemap__col h3,.footer-sitemap__col h4{color:#ffffff!important}
.footer-sitemap__col a{color:rgba(255,255,255,.7)!important}
.footer-sitemap__col a:hover{color:#ffffff!important}
.footer-sitemap__pay-incol{border-top:1px solid rgba(255,255,255,.14)!important}
.footer-sitemap__pay-label,.footer-sitemap__pay-mark__label{color:rgba(255,255,255,.72)!important}
.footer-sitemap__pay-mark__icon{background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.16)!important}
.footer-sitemap__pay-mark img{filter:none!important;opacity:1!important}
.footer-cdn{border-top:1px solid rgba(255,255,255,.14)!important;color:rgba(255,255,255,.72)!important}
.footer-cdn b{color:#ffffff!important}
.footer-cdn__leaf,.footer-cdn svg{color:var(--brand-red)!important;fill:var(--brand-red)!important}
.footer-sitemap__bottom{color:rgba(255,255,255,.5)!important}
.footer-sitemap__bottom a{color:rgba(255,255,255,.55)!important}
.footer-sitemap__bottom a:hover{color:#ffffff!important}
html body footer.footer-sitemap{background:#0f2547!important}

/* PDP polish */
.pdp-search-bar{display:none!important}  /* odd "search for another product" in the buy column */
.pdp__price{font-size:36px!important;font-weight:700!important;letter-spacing:-.01em!important}
.pdp__price-row{align-items:baseline!important;gap:12px!important}
.pdp__specs dt,.pdp__spec-row dt,.pdp__specs .label{color:#9aa4b6!important;font-size:12px!important;letter-spacing:.05em!important;text-transform:uppercase!important;font-weight:600!important}
.pdp__specs dd,.pdp__spec-row dd,.pdp__specs .value{color:#111!important}
/* PDP main Add-to-cart: force brand blue (a .pdp__cta-scoped rule was forcing ink) */
html body .pdp__cta .btn,html body .pdp__cta .btn--blue,html body .pdp__cta .btn--lg,
html body .pdp__cta button.btn--blue,html body .pdp-stickybar__cta{background:var(--brand-blue)!important;color:#fff!important;border:0!important}
html body .pdp__cta .btn:hover,html body .pdp__cta .btn--blue:hover{background:var(--brand-blue-deep)!important}
/* PDP add-to-cart: high-specificity win over the base .btn--blue rules */
html body .pdp .pdp__info .pdp__cta button.btn.btn--blue,
html body .pdp .pdp__info .pdp__cta a.btn.btn--blue,
html body .pdp .pdp__cta button.btn.btn--blue.btn--lg{background:var(--brand-blue)!important;color:#fff!important;border:0!important}

/* Narrative editorial bands ??? premium editorial typography */
section[aria-label="The shift"] .narrative p,section[aria-label="The stakes"] .narrative p,
section[aria-label="The promised land"] .narrative p{font-size:18px!important;line-height:1.72!important;color:#39393b!important;margin:0 0 18px!important}
/* lead-in (first paragraph) larger + darker for editorial drop-in */
section[aria-label="The shift"] .narrative p:first-of-type,section[aria-label="The stakes"] .narrative p:first-of-type,
section[aria-label="The promised land"] .narrative p:first-of-type{font-size:22px!important;line-height:1.55!important;color:#1a1a1a!important;font-weight:500!important;margin-bottom:22px!important}
/* generous, consistent rhythm + a hairline to mark each band start */
section[aria-label="The shift"],section[aria-label="The promised land"]{padding:80px var(--pad-x)!important;border-top:1px solid #ededed!important}
section[aria-label="The stakes"]{padding:80px var(--pad-x)!important}
/* narrative headline a touch bigger, tighter */
section[aria-label="The shift"] .display-lg,section[aria-label="The stakes"] .display-lg,
section[aria-label="The promised land"] .display-lg{font-size:clamp(40px,4.6vw,60px)!important;line-height:.98!important;margin-bottom:8px!important}

/* CART DRAWER polish */
/* Checkout = brand-blue primary (was black); high spec to beat base .btn--blue */
html body .cart-drawer button.btn.btn--blue.cart-checkout,
html body .cart-drawer a.btn.cart-checkout,html body .cart-drawer .cart-checkout{
  background:var(--brand-blue)!important;color:#fff!important;border:0!important}
html body .cart-drawer .cart-checkout:hover{background:var(--brand-blue-deep)!important}
/* View cart = subordinate secondary (white + blue outline) */
html body .cart-drawer .cart-view,html body .cart-drawer .btn--ghost-light.cart-view{
  background:#ffffff!important;color:var(--brand-blue)!important;border:1.5px solid var(--brand-blue)!important}
/* promo Apply = blue */
.cart-drawer .promo__btn{background:var(--brand-blue)!important;color:#fff!important;border:0!important}
/* item thumbnails on soft-cloud, not black */
.cart-drawer img,.cart-drawer picture,.cart-drawer [class*="thumb"],
.cart-drawer [class*="photo"],.cart-drawer [class*="img"],.cart-drawer figure{background:#f5f5f5!important}
.cart-drawer{background:#ffffff!important}
/* Checkout "Place order" = brand-blue primary (beat base .btn--blue) */
html body form.checkout-form .checkout-col button.btn.btn--blue,
html body .checkout-form .btn.btn--blue,html body .checkout-col .btn.btn--blue{
  background:var(--brand-blue)!important;color:#fff!important;border:0!important}
html body .checkout-form .btn.btn--blue:hover{background:var(--brand-blue-deep)!important}

/* =========================================================================
   DNA VIDEO HERO ??? full-bleed background video (desktop + mobile), dark,
   white headline overlay. #main id beats the body-inline white-hero rules.
   ========================================================================= */
#main.hero--video,#main.hero--video .lab__hero{background:#070a14!important}
#main.hero--video .lab__hero{position:relative!important;overflow:hidden!important;
  min-height:clamp(560px,86vh,820px)!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important}
#main.hero--video .lab__video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;z-index:0!important}
#main.hero--video .lab__video--mob{display:none!important}
#main.hero--video .lab__video-scrim{position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,12,28,.92),rgba(6,12,28,.66) 40%,rgba(6,12,28,.3) 72%,rgba(6,12,28,.22)),
  linear-gradient(0deg,rgba(6,12,28,.85),rgba(6,12,28,0) 42%)}
#main.hero--video .lab__grid,#main.hero--video .lab__ribbon{position:relative!important;z-index:2!important}
#main.hero--video .lab__vial{display:none!important}
/* text on the dark video */
#main.hero--video .lab__display,#main.hero--video .lab__display .lab__display__line{color:#ffffff!important}
#main.hero--video .lab__display .lab__display__line--accent{color:#ff5560!important}
#main.hero--video .lab__eyebrow{color:#9db8ff!important}
#main.hero--video .lab__eyebrow::before{background:#9db8ff!important}
#main.hero--video .lab__lead{color:rgba(255,255,255,.9)!important;text-shadow:0 1px 12px rgba(0,0,0,.45)}
#main.hero--video .lab__lead b{color:#fff!important}
/* glass stat ribbon over video */
#main.hero--video .lab__ribbon{background:rgba(8,16,34,.5)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;border-top:1px solid rgba(255,255,255,.12)!important}
#main.hero--video .lab__ribbon__cell{border-right:1px solid rgba(255,255,255,.1)!important}
#main.hero--video .lab__ribbon__k{color:rgba(255,255,255,.62)!important}
#main.hero--video .lab__ribbon__v{color:#fff!important}
#main.hero--video .lab__ribbon__v i{color:rgba(255,255,255,.62)!important}
/* CTAs: primary blue stays; ghost = white outline on dark */
#main.hero--video .lab__btn--ghost{background:transparent!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.55)!important}
#main.hero--video .lab__btn--ghost:hover{background:rgba(255,255,255,.14)!important;border-color:#fff!important}
#main.hero--video .lab__btn--ghost::after{color:#fff!important}
@media(max-width:760px){
  #main.hero--video .lab__video--desk{display:none!important}
  #main.hero--video .lab__video--mob{display:block!important}
}
@media(prefers-reduced-motion:reduce){
  #main.hero--video .lab__video{display:none!important}
  #main.hero--video .lab__hero{background:#070a14 url(/assets/video/dna-hero-poster.jpg) center/cover no-repeat!important}
}
/* footer brand lockup (dark navy footer) */
.footer-logo{max-width:1240px;margin:0 auto 32px!important;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-logo img{height:46px!important;width:auto!important;display:block}
@media(max-width:860px){.footer-logo{text-align:center}.footer-logo img{margin:0 auto;height:40px!important}}

/* DARK NAV ??? cohesive with the dark video hero + navy footer; lets the
   white-wordmark brand lockup sit up top. */
.nav,header.nav{background:#0f2547!important;border-bottom:1px solid rgba(255,255,255,.1)!important}
.nav__brand,.nav__brand a{color:#fff!important}
.nav__logo{height:40px!important;width:auto!important}
.nav__links a{color:rgba(255,255,255,.82)!important}
.nav__links a:hover{color:#fff!important}
.nav__links a.is-active,.nav__links a[aria-current="page"],html body .nav__links a[aria-current="page"]{color:#fff!important}
.nav__links a.is-active::after,.nav__links a[aria-current="page"]::after{background:#fff!important}
.nav__util .iconbtn,.iconbtn,.nav__burger{color:#fff!important}
.compliance{background:#070a14!important;color:rgba(255,255,255,.7)!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
.compliance__inner b{color:#fff!important}
.nav__links.is-open{background:#0f2547!important}
.nav__links.is-open a{color:#fff!important}

/* ============ QA pass: alignment + readability (2026-06-17) ============ */
/* Form inputs inherited the dark-era white --ink ??? invisible text on white.
   Force ink on all controls (checkout, search, newsletter). */
input,select,textarea{color:#111!important}
input::placeholder,textarea::placeholder{color:#8a8a8d!important}
/* Pill geometry consistency: tel/number were square next to pill text inputs. */
input[type="tel"],input[type="number"]{border-radius:0!important}
select{border-radius:0!important}

/* Stat numbers were #cacacb (near-invisible on the now-white bands). */
.standards__num{color:#1b4fa0!important}
.by-numbers__num{color:#111!important}

/* Hero: align the first stat-ribbon cell's left edge with the headline column. */
.hero--lab .lab__ribbon__cell:first-child{padding-left:clamp(20px,4vw,60px)!important}
/* Hero CTAs: equal min-width on desktop, full-width stacked on mobile. */
.hero--lab .lab__cta .lab__btn{min-width:200px;justify-content:center}
@media(max-width:720px){
  .hero--lab .lab__cta{flex-direction:column;align-items:stretch}
  .hero--lab .lab__cta .lab__btn{width:100%;min-width:0}
}

/* Narrative bands: perceptible alternating tint + hairline separators. */
section[aria-label="The stakes"]{background:#f4f6f9!important}
section[aria-label="The shift"],section[aria-label="The promised land"]{border-top:1px solid #ececec}

/* #shop bestsellers: restore desktop top padding (24px was a mobile-density hack). */
@media(min-width:901px){section.band--light#shop{padding-top:56px!important}}

/* ============ Homepage: dark zone below the product showcase ============ */
/* Everything under #shop (narrative + proof + closing CTA) goes navy with
   white text, bookending the dark hero/nav/footer around the white products. */
.home-dark{background:#0f2547}
/* Flip the band backgrounds to transparent so the navy shows through.
   (lab-band keeps its own photo background ??? excluded.) */
.home-dark > section.band--light,
.home-dark > section.band--dark,
.home-dark > section.cdn,
.home-dark > section.by-numbers,
.home-dark > section.features-strip,
.home-dark > section.trust{background:transparent!important}
/* Text colors */
.home-dark{color:rgba(255,255,255,.82)}
.home-dark h1,.home-dark h2,.home-dark h3,.home-dark h4,
.home-dark .display-lg,.home-dark .display-md,.home-dark .section-title,
.home-dark .h2,.home-dark b,.home-dark strong{color:#fff!important}
.home-dark p,.home-dark li,.home-dark .lede,.home-dark small,
.home-dark figcaption,.home-dark dd,.home-dark dt{color:rgba(255,255,255,.82)!important}
.home-dark .eyebrow{color:#9db8ff!important}
.home-dark .by-numbers__num,.home-dark .standards__num{color:#fff!important}
.home-dark .by-numbers__lbl,.home-dark .by-numbers__num small{color:rgba(255,255,255,.55)!important}
.home-dark .feat__icon,.home-dark .trust__icon,.home-dark .cdn__leaf,
.home-dark .trust-strip__leaf,.home-dark svg{color:#9db8ff!important}
/* Cards / panels on dark */
.home-dark .card,.home-dark .feat,.home-dark .trust__item,.home-dark .cdn__card,
.home-dark .by-numbers__cell{background:rgba(255,255,255,.045)!important;
  border-color:rgba(255,255,255,.12)!important}
.home-dark hr,.home-dark [class*="divider"]{border-color:rgba(255,255,255,.12)!important}
/* Section hairlines from the QA pass were light ??? dark */
.home-dark section[aria-label]{border-top-color:rgba(255,255,255,.08)!important}
/* Ghost button needs a light outline on dark */
.home-dark .btn--ghost,.home-dark .btn--ghost-light{color:#fff!important;
  border:1px solid rgba(255,255,255,.45)!important;background:transparent!important}
.home-dark .btn--ghost:hover,.home-dark .btn--ghost-light:hover{
  background:rgba(255,255,255,.1)!important;color:#fff!important}
/* Primary blue CTA stays brand blue (good contrast on navy) */
.home-dark .btn--blue{background:#1b4fa0!important;color:#fff!important}
.home-dark .btn--blue:hover{background:#16407f!important}

/* home-dark: out-specify the per-section narrative/eyebrow color rules above
   (e.g. section[aria-label="..."] .narrative p was beating .home-dark p). */
html body .home-dark p,
html body .home-dark li,
html body .home-dark .narrative p,
html body .home-dark section[aria-label] .narrative p,
html body .home-dark section[aria-label] .narrative p:first-of-type,
html body .home-dark dd,html body .home-dark dt,
html body .home-dark small,html body .home-dark .lede{color:rgba(255,255,255,.85)!important}
html body .home-dark h1,html body .home-dark h2,html body .home-dark h3,
html body .home-dark .display-lg,html body .home-dark .display-md,
html body .home-dark .section-title,html body .home-dark b,html body .home-dark strong{color:#fff!important}
html body .home-dark .eyebrow,
html body .home-dark .narrative .eyebrow,
html body .home-dark section .eyebrow:not(.on-dark){color:#9db8ff!important}
html body .home-dark .narrative a,html body .home-dark a{color:#cfe0ff!important}
html body .home-dark .by-numbers__num,html body .home-dark .standards__num{color:#fff!important}

/* ============ DESIGN PASS: premium type + cohesive dark palette ============ */
/* Display face: Space Grotesk (modern scientific grotesk) replaces Bebas. */
.lab__display,.display-xl,.display-lg,.hero__title,.hero__display,
.lab-band__headline,.cdn__title,.page-hero--media h1,.page-head--media h1,
.section-title.display-lg{
  font-family:"Pure North Sans","Pure North Sans","Pure North Sans","Pure North Sans","Helvetica Neue",Arial,sans-serif!important;
  font-weight:700!important;letter-spacing:0!important;line-height:1.02!important;
}
.lab__display{line-height:.98!important;letter-spacing:0!important}
/* keep the hero headline confident + uppercase for impact */
#main .lab__display{text-transform:uppercase}

/* Cohesive dark navy elevation scale */
:root{
  --pn-d-900:#080b13; --pn-d-800:#0e1422; --pn-d-700:#131a2a;
  --pn-d-600:#1b2c49; --pn-d-line:rgba(255,255,255,.10);
  --pn-d-blue:#4f86e8; --pn-d-red:#ff5263; --pn-d-peri:#9db8ff;
}
.nav,header.nav{background:var(--pn-d-900)!important;border-bottom:1px solid var(--pn-d-line)!important}
.compliance{background:#090c15!important}
.home-dark{background:var(--pn-d-800)!important}
html body footer.footer-sitemap{background:var(--pn-d-900)!important}
/* Dark-zone surfaces get a real elevated card + hairline (depth) */
html body .home-dark .card,html body .home-dark .feat,html body .home-dark .trust__item,
html body .home-dark .cdn__card,html body .home-dark .by-numbers__cell{
  background:var(--pn-d-700)!important;border:1px solid var(--pn-d-line)!important;
  border-radius:0!important;box-shadow:0 1px 0 rgba(255,255,255,.03) inset!important}
html body .home-dark .card:hover,html body .home-dark .cdn__card:hover{
  background:var(--pn-d-600)!important;border-color:rgba(255,255,255,.18)!important}
/* Brighter accents on dark for legibility */
html body .home-dark .eyebrow,html body .home-dark .narrative .eyebrow{color:var(--pn-d-peri)!important}
html body .home-dark .lab__display__line--accent,html body .home-dark .accent{color:var(--pn-d-red)!important}
html body .home-dark .btn--blue{background:var(--pn-d-blue)!important;color:#fff!important}
html body .home-dark .btn--blue:hover{background:#3f73d0!important}
html body .home-dark .feat__icon,html body .home-dark .trust__icon,
html body .home-dark .cdn__leaf,html body .home-dark svg{color:var(--pn-d-peri)!important}

/* Narrative sections -> left-aligned editorial 2-column (heading | body).
   Was a centered 760px column that made the page run long. */
section[aria-label="The shift"] .container,
section[aria-label="The stakes"] .container,
section[aria-label="The promised land"] .container{
  display:grid!important;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(32px,5vw,72px)!important;align-items:start!important;max-width:1120px!important}
section[aria-label="The shift"] .section-head,
section[aria-label="The stakes"] .section-head,
section[aria-label="The promised land"] .section-head{
  text-align:left!important;margin:0!important;position:sticky;top:100px}
section[aria-label="The shift"] .narrative,
section[aria-label="The stakes"] .narrative,
section[aria-label="The promised land"] .narrative{
  max-width:none!important;margin:0!important;text-align:left!important}
section[aria-label="The shift"] .narrative p,
section[aria-label="The stakes"] .narrative p,
section[aria-label="The promised land"] .narrative p{margin:0 0 16px!important}
@media(max-width:860px){
  section[aria-label="The shift"] .container,
  section[aria-label="The stakes"] .container,
  section[aria-label="The promised land"] .container{grid-template-columns:1fr!important;gap:18px!important}
  section[aria-label="The shift"] .section-head,
  section[aria-label="The stakes"] .section-head,
  section[aria-label="The promised land"] .section-head{position:static!important}
}

/* Beat the #main hero font rule so the hero display also uses Space Grotesk. */
#main .lab__display,#main .lab__display__line,
html body #main .lab__display{
  font-family:"Pure North Sans","Pure North Sans","Pure North Sans","Pure North Sans","Helvetica Neue",Arial,sans-serif!important;
  letter-spacing:0!important;font-weight:700!important}

/* Catalog page: align the page-hero copy + strip to the product-grid column
   (was a centered 880px inner -> different left edge than the grid). */
body.catalog-page .page-hero--media .page-hero__inner,
body.catalog-page .page-hero--media .page-hero__strip{
  max-width:1600px!important;width:100%!important;
  margin-left:auto!important;margin-right:auto!important;
  padding-left:clamp(20px,4vw,60px)!important;padding-right:clamp(20px,4vw,60px)!important;
  text-align:left!important}
body.catalog-page .page-hero--media .page-hero__inner h1,
body.catalog-page .page-hero--media .page-hero__inner p{max-width:840px}
body.catalog-page .page-hero--media{min-height:320px!important}

/* Catalog container had no horizontal gutter (content flush at x=0) while nav
   + hero sit at --pad-x. Restore the gutter so the whole page shares one edge. */
body.catalog-page .container.catalog{
  padding-left:clamp(20px,4vw,60px)!important;padding-right:clamp(20px,4vw,60px)!important}

/* Catalog hero inner is a centered flex column -> force left alignment. */
body.catalog-page .page-hero--media .page-hero__inner{
  align-items:flex-start!important;text-align:left!important}
body.catalog-page .page-hero--media .page-hero__inner .eyebrow,
body.catalog-page .page-hero--media .page-hero__inner h1,
body.catalog-page .page-hero--media .page-hero__inner p{margin-left:0!important;align-self:flex-start!important}

/* Catalog hero: clean left-aligned block (override base flex-centering +
   per-child padding so eyebrow/h1/p all share the nav/sidebar edge). */
body.catalog-page .page-hero--media .page-hero__inner{
  display:block!important;max-width:1600px!important;margin:0 auto!important;
  padding:52px clamp(20px,4vw,60px) 40px!important;text-align:left!important}
body.catalog-page .page-hero--media .page-hero__inner > *{
  margin-left:0!important;padding-left:0!important;align-self:auto!important;
  width:auto!important;max-width:860px!important}
body.catalog-page .page-hero--media .page-hero__inner .hero__mstripe{display:none!important}

/* The page-hero section already supplies the pad-x gutter; the inner must not
   add a second one (was double-indenting hero copy past the sidebar). */
body.catalog-page .page-hero--media .page-hero__inner{padding-left:0!important;padding-right:0!important}
body.catalog-page .page-hero--media .page-hero__strip{padding-left:0!important;padding-right:0!important;max-width:none!important;margin:0!important}

/* ===== Legibility pass: sentence-case headings (all-caps Space Grotesk reads
   shouty + measurably harder to read) + right-sized narrative headlines ===== */
.section-title,.display-lg,.display-md,.cdn__title,.lab-band__headline,
section.page-hero--media h1,section.page-head--media h1,.by-numbers h2,.trust h2{
  text-transform:none!important}
section[aria-label="The shift"] .display-lg,
section[aria-label="The stakes"] .display-lg,
section[aria-label="The promised land"] .display-lg{
  font-size:clamp(26px,2.5vw,38px)!important;line-height:1.12!important;
  text-transform:none!important;letter-spacing:-0.01em!important;margin-bottom:8px!important;
  font-weight:600!important}
/* widen the heading column slightly so titles breathe */
section[aria-label="The shift"] .container,
section[aria-label="The stakes"] .container,
section[aria-label="The promised land"] .container{
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)!important}

/* by-numbers description was near-invisible on navy. */
html body .home-dark .by-numbers__sub{color:rgba(255,255,255,.72)!important}
html body .home-dark .by-numbers__lbl{color:rgba(255,255,255,.62)!important}
html body .home-dark .by-numbers__num{color:#fff!important}
html body .home-dark .by-numbers__num small{color:rgba(255,255,255,.55)!important}

/* Narrative must stack to 1 column on mobile (the later widen-column rule was
   overriding the earlier mobile rule -> kept it 2-col on phones). */
@media(max-width:860px){
  section[aria-label="The shift"] .container,
  section[aria-label="The stakes"] .container,
  section[aria-label="The promised land"] .container{
    grid-template-columns:1fr!important;gap:14px!important}
  section[aria-label="The shift"] .section-head,
  section[aria-label="The stakes"] .section-head,
  section[aria-label="The promised land"] .section-head{position:static!important;margin-bottom:6px!important}
}

/* Mobile narrative: left-align heading to match the body (was centered). */
@media(max-width:860px){
  section[aria-label="The shift"] .section-head,
  section[aria-label="The stakes"] .section-head,
  section[aria-label="The promised land"] .section-head,
  section[aria-label="The shift"] .section-head *,
  section[aria-label="The stakes"] .section-head *,
  section[aria-label="The promised land"] .section-head *{text-align:left!important}
}

/* ===== 2026-06-18 homepage polish (hero gap) ===== */
#main.hero--video .lab__hero{min-height:clamp(480px,66vh,620px)!important;justify-content:center!important;padding-top:40px!important;padding-bottom:48px!important}

/* ===== 2026-06-18 GLOBAL DARK THEME ? light reserved for the product grid ===== */
:root{--pnx-bg:#080b13;--pnx-bg2:#0e1422;--pnx-ink:#eef3fb;--pnx-mute:#9db8ff;--pnx-line:rgba(255,255,255,.10);}
html,body{background:var(--pnx-bg)!important;color:var(--pnx-ink)!important}
/* every section band defaults dark, EXCEPT the one holding the product grid */
.trust-strip,.features-strip,.trust,.by-numbers,.cdn,.standards,.cta-band,
section.band:not(:has(.product-grid)){background:var(--pnx-bg)!important;color:var(--pnx-ink)!important}
.home-dark{background:var(--pnx-bg2)!important}
.lab-band{background:#0a0e18!important}
/* light text inside the darkened sections */
section.band:not(:has(.product-grid)) :where(h1,h2,h3,h4,h5,p,li,dd,dt,small,strong,b),
.trust-strip :where(span,a,p,li,b),.features-strip :where(h1,h2,h3,h4,p,span,li),
.by-numbers :where(h1,h2,h3,h4,p,span,li),.trust :where(h1,h2,h3,h4,p,span,li),
.cdn :where(h1,h2,h3,h4,p,span,li),.standards :where(h1,h2,h3,h4,p,span,li){color:var(--pnx-ink)!important}
/* eyebrows + category labels on dark */
.eyebrow,.lab__eyebrow,.lab-band__eyebrow,.cdn__eyebrow,.section-head .eyebrow{color:var(--pnx-mute)!important}
.eyebrow::before,.lab__eyebrow::before{background:var(--pnx-mute)!important}
/* hairlines: softer on dark */
.trust-strip,.features-strip,.by-numbers,.trust,.band{border-color:var(--pnx-line)!important}
/* dark cards inside darkened sections */
.by-numbers .by-numbers__cell,.features-strip .feat,.trust .trust__item,.standards .card{
  background:var(--pnx-bg2)!important;border:1px solid var(--pnx-line)!important;border-radius:0!important}
/* keep the product-grid band explicitly light (defensive, in case :has unsupported) */
section.band--light:has(.product-grid){background:#ffffff!important}

/* ===== 2026-06-18 PDP: dark chrome, light buy zone ===== */
section.band--light:has(.pdp),
.moa-block,.lit-block,section.band--light.pdp-tabs,
.why-card,.bac-cross,.pdp-background,.pdp-faq{
  background:var(--pnx-bg)!important;color:var(--pnx-ink)!important}
.moa-block :where(h1,h2,h3,h4,p,li,span,dt,dd,small,strong,b),
.lit-block :where(h1,h2,h3,h4,p,li,span),
.pdp-tabs :where(h1,h2,h3,h4,p,li,span,th,td),
.why-card :where(h1,h2,h3,h4,p,li,span),
.pdp-background :where(h1,h2,h3,h4,p,li,span,strong),
.pdp-faq :where(h1,h2,h3,h4,p,li,span,summary){color:var(--pnx-ink)!important}
.lit-block,.why-card,.bac-cross,.pdp-background,.pdp-background__disclaimer,.faq-item{
  background:var(--pnx-bg2)!important;border-color:var(--pnx-line)!important}
/* ---- light BUY ZONE panel (gallery + buy box) ---- */
.pdp{background:#ffffff!important;color:#111111!important;border-radius:0!important;
  padding:clamp(20px,3vw,40px)!important;margin:24px 0!important}
.pdp :where(h1,h2,h3,.pdp__name,.pdp__price,.pdp__qty,label,span,a,li,dt,dd){color:#111111!important}
.pdp .pdp__lead,.pdp .pdp__specs,.pdp .pdp__formula{color:#393939!important}
.pdp__media,.pdp__formula{background:#f5f5f5!important}
.pdp-coa,.pdp-bundle,.pdp-bundle__item{background:#f5f5f5!important;color:#111!important}
.pdp-bundle :where(h2,h3,p,span,li){color:#111!important}
/* sticky add-to-cart bar -> dark */
.sticky-cart{background:var(--pnx-bg)!important;border-top:1px solid var(--pnx-line)!important}
.sticky-cart :where(span,strong,.price,div){color:var(--pnx-ink)!important}

/* PDP refinement: broaden light text on dark content sections + catch stray light bands */
body:has(.pdp) section.band--light:not(:has(.product-grid)){background:var(--pnx-bg)!important}
.moa-block *,.lit-block *,.pdp-tabs *,.tabs__panel *,.why-card *,.bac-cross *,
.pdp-background *,.pdp-faq *,.faq-item *,.lit__list *,.moa__list *,.moa__grid *{color:var(--pnx-ink)!important}
.tabs__tab,.tabs__tab.is-active{color:var(--pnx-mute)!important}
/* keep the light buy panel text dark even though it sits in a darkened wrapper */
.pdp,.pdp *{}
.pdp :where(p,li,span,td,th,dd,dt,h1,h2,h3,h4,div,label,strong,b){color:#111111!important}
.pdp .pdp__lead,.pdp .pdp__specs,.pdp .pdp__formula,.pdp .pdp__formula *{color:#393939!important}
.pdp .btn,.pdp .add-to-cart,.pdp button.btn{color:#ffffff!important}

/* ===== 2026-06-18 readability fixes on dark sections (beat component specificity) ===== */
.trust-strip{background:var(--pnx-bg2)!important;border-top:1px solid var(--pnx-line)!important;border-bottom:0!important}
.trust-strip.trust-strip.trust-strip *:not(svg):not(path){color:#eef3fb!important}
.trust-strip .trust-strip__brand{color:#ffffff!important}
/* clean the broken ribbon dividers (sub-pixel borders rendered broken) */
.lab__ribbon__cell{border-right:0!important;border-left:0!important}
.lab__ribbon{border-top:1px solid var(--pnx-line)!important;border-bottom:0!important}
/* strengthen text on the other dark sections */
.features-strip.features-strip *:not(svg):not(path):not(.btn):not(.feat__icon):not(.trust__icon),
.by-numbers.by-numbers *:not(svg):not(path),
.trust.trust *:not(svg):not(path):not(.trust__icon),
.cdn.cdn *:not(svg):not(path):not(.btn):not(.cdn__leaf),
.standards.standards *:not(svg):not(path){color:#eef3fb!important}
/* keep eyebrows periwinkle (re-apply after the blanket light) */
.home-dark .eyebrow,.trust .eyebrow,.cdn .cdn__eyebrow,.standards .eyebrow,.by-numbers .eyebrow{color:var(--pnx-mute)!important}

/* lab-band CTA: white pill, dark text (was light-on-white, invisible) */
.lab-band__cta{background:#ffffff!important;color:#080b13!important;border-color:#fff!important}
.lab-band__cta *{color:#080b13!important}

/* lab-band CTA: stronger override (dark pill, white text) */
html body .lab-band .lab-band__cta,html body a.lab-band__cta{
  background:#1b2c49!important;color:#ffffff!important;border:1px solid rgba(255,255,255,.28)!important}
html body .lab-band .lab-band__cta *{color:#ffffff!important}

/* ===== 2026-06-18 CRO: dark elevation tiers + product cards as white tiles ===== */
/* product-grid section -> darkest frame so white cards pop (no big white block) */
section.band--light:has(.product-grid){background:#090c15!important}
section.band--light:has(.product-grid) .section-head h1,
section.band--light:has(.product-grid) .section-head h2,
section.band--light:has(.product-grid) .section-head h3{color:var(--pnx-ink)!important}
section.band--light:has(.product-grid) .eyebrow{color:var(--pnx-mute)!important}
/* category filter chips readable on dark */
section.band--light:has(.product-grid) a:not(.card):not(.card *):not(.btn){color:#cfe0ff!important}
/* white product cards with real elevation */
.product-grid .card{background:#ffffff!important;border-radius:0!important;
  box-shadow:0 12px 36px rgba(0,0,0,.45)!important;overflow:hidden!important;transition:transform .15s,box-shadow .15s!important}
.product-grid .card:hover{transform:translateY(-4px)!important;box-shadow:0 18px 48px rgba(0,0,0,.55)!important}
.product-grid .card :where(h1,h2,h3,p,span,li,b,strong,.card__name){color:#111111!important}
.product-grid .card :where(.card__cat,[class*="cat"]){color:#1c5fd6!important}
/* brighter conversion CTA (pops on navy) + glow on hover */
.btn--blue,a.btn--blue,.lab__btn--blue,.add-to-cart,.card__quick,.band .btn.btn--blue,.cta-band__btn{
  background:#2f6fed!important;color:#fff!important}
.btn--blue:hover,a.btn--blue:hover,.add-to-cart:hover,.card__quick:hover,.cta-band__btn:hover{
  background:#1c5fd6!important;box-shadow:0 8px 26px rgba(47,111,237,.5)!important}
/* dark elevation rhythm across sections (depth, not flat) */
.trust-strip{background:#0e1422!important}
.lab-band{background:#070a12!important}
.by-numbers{background:#0e1422!important}
.features-strip{background:#080b13!important}
.standards{background:#0e1422!important}
.home-dark{background:#080b13!important}

/* category filter chips on the dark product-grid section */
section.band--light:has(.product-grid) .chip{
  background:rgba(255,255,255,.07)!important;color:#cfe0ff!important;border:1px solid var(--pnx-line)!important}
section.band--light:has(.product-grid) .chip.is-active,
section.band--light:has(.product-grid) .chip[aria-current="true"],
section.band--light:has(.product-grid) .chip.active{
  background:#2f6fed!important;color:#ffffff!important;border-color:#2f6fed!important}

/* ===== 2026-06-18 CRO flow: cut redundant narrative + trust sections =====
   Keeps: hero > trust-strip > bestsellers > The shift > why-canadian >
          Janoshik lab-band > by-numbers > shipping > final CTA */
section[aria-label="The stakes"],
section[aria-label="The promised land"],
section[aria-label="Quality guarantees"],
#standards{display:none!important}

/* ===== 2026-06-18 cart + checkout dark ===== */
.band--light:has(.cart-line),.band--light:has(.cart-foot-row),
.band--light:has(.checkout-form),.band--light:has(.checkout__grid),
.band--light:has(.order-summary),.band--light:has(.cart-empty){
  background:var(--pnx-bg)!important;color:var(--pnx-ink)!important}
.cart-line :where(h1,h2,h3,h4,p,span,b,strong,a,li,div),
.checkout-form :where(h1,h2,h3,h4,p,span,label,li,div),
.order-summary :where(h1,h2,h3,h4,p,span,b,li,div),
.cart-foot :where(h1,h2,h3,h4,p,span,b,li,div){color:var(--pnx-ink)!important}
.cart-line,.order-summary,.checkout__card,.cart-foot{
  background:var(--pnx-bg2)!important;border:1px solid var(--pnx-line)!important;border-radius:0!important}
.cart-line__photo{background:#f5f5f5!important}
/* form fields on dark */
.checkout-form input,.checkout-form select,.checkout-form textarea,
.cart-promo input,input.promo-input,.promo input{
  background:#0d1322!important;color:#eef3fb!important;border:1px solid var(--pnx-line)!important}
.checkout-form input::placeholder,.cart-promo input::placeholder{color:#8aa0c2!important}

/* ===== 2026-06-18 checkout dark (scoped to checkout page) ===== */
body:has(.checkout-summary) section.band--light{background:var(--pnx-bg)!important;color:var(--pnx-ink)!important}
body:has(.checkout-summary) :where(h1,h2,h3,h4,p,span,li,label,a,b,strong,td,small){color:var(--pnx-ink)!important}
body:has(.checkout-summary) .checkout-summary,
body:has(.checkout-summary) .pay-card,
body:has(.checkout-summary) .checkout-trust,
body:has(.checkout-summary) .disc-row,
body:has(.checkout-summary) .janoshik-badge-checkout{
  background:var(--pnx-bg2)!important;border:1px solid var(--pnx-line)!important}
body:has(.checkout-summary) input,
body:has(.checkout-summary) select,
body:has(.checkout-summary) textarea{
  background:#0d1322!important;color:#eef3fb!important;border:1px solid var(--pnx-line)!important}
body:has(.checkout-summary) ::placeholder{color:#8aa0c2!important}
body:has(.checkout-summary) .pay-card__badge{
  background:rgba(79,134,232,.18)!important;color:#cfe0ff!important;border:1px solid var(--pnx-line)!important}
body:has(.checkout-summary) .cart-line__photo{background:#f5f5f5!important}
body:has(.checkout-summary) .btn--blue,body:has(.checkout-summary) [class*="place-order"]{background:#2f6fed!important;color:#fff!important}

/* ===== 2026-06-18 blog + long-form content dark ===== */
.section-light,.article-body,.blog-article,.post-body,.prose{
  background:var(--pnx-bg)!important;color:var(--pnx-ink)!important}
.section-light :where(h1,h2,h3,h4,h5,p,li,dd,dt,blockquote,td,th,figcaption,small){color:var(--pnx-ink)!important}
.section-light :where(strong,b){color:#ffffff!important}
.section-light a:not(.btn){color:#6fa3ff!important}
.section-light :where(pre,code,blockquote,.faq-item,.callout,.note,table){
  background:var(--pnx-bg2)!important;border-color:var(--pnx-line)!important}
.section-light :where(table,th,td,tr,hr){border-color:var(--pnx-line)!important}

/* blog: stronger specificity (section-light lost to section.section-light) */
html body section.section-light,html body .section-light{background:var(--pnx-bg)!important}
html body .section-light *:not(.btn):not(.btn *):not(svg):not(path){color:var(--pnx-ink)!important}
html body .section-light a:not(.btn){color:#6fa3ff!important}
html body .section-light strong,html body .section-light b{color:#ffffff!important}
html body .section-light :where(pre,code,blockquote,table,.faq-item,.callout){
  background:var(--pnx-bg2)!important;border-color:var(--pnx-line)!important}

/* breadcrumbs on dark */
.breadcrumbs{background:var(--pnx-bg)!important;border-color:var(--pnx-line)!important}
.breadcrumbs a,.breadcrumbs span,.crumb{color:#9db8ff!important}
.crumb-current,.breadcrumbs .crumb-current{color:#eef3fb!important}

/* breadcrumb-bar leftover light bg */
.breadcrumb-bar{background:var(--pnx-bg)!important;border-color:var(--pnx-line)!important}
.breadcrumb-bar *{color:#9db8ff!important}
.breadcrumb-bar .crumb-current{color:#eef3fb!important}

/* standards block (lab-results / coa #legit) body text on dark */
.standards__body,.standards .standards__body{color:#cfe0ff!important}
.standards__num{color:#ffffff!important}
.standards .title-md,.standards h3{color:#ffffff!important}

/* ===== 2026-06-18 catalog body dark (no big white) ===== */
body:has(.cat-side) section.band--light,
body.catalog-page section.band--light{background:var(--pnx-bg)!important;color:var(--pnx-ink)!important}
.product-grid{background:transparent!important}
.cat-side :where(h1,h2,h3,h4,p,li,span,label,a){color:var(--pnx-ink)!important}
.cat-side a,.cat-side .cat-link{color:#cfe0ff!important}
.cat-side{border-color:var(--pnx-line)!important}
body:has(.cat-side) .container.catalog :where(h1,h2,h3,p,span,label){color:var(--pnx-ink)!important}
/* search + sort + filter controls on dark */
body:has(.cat-side) input[type="search"],body:has(.cat-side) input[type="text"],
body:has(.cat-side) select,body:has(.cat-side) .search-pill{
  background:#0d1322!important;color:#eef3fb!important;border:1px solid var(--pnx-line)!important}
body:has(.cat-side) ::placeholder{color:#8aa0c2!important}
/* keep product cards bright white */
.product-grid .card{background:#ffffff!important}

/* cards keep dark text on white tile (beat the catalog container light rule) */
html body .product-grid .card,
html body .product-grid .card *:not(.btn):not(.btn *):not(svg):not(path){color:#111111!important}
html body .product-grid .card .card__cat,
html body .product-grid .card .card__cta,
html body .product-grid .card a.card__cta{color:#1c5fd6!important}

/* ===================== 2026-06-18 MODERN POLISH ===================== */
/* glassy elevated cards with hover lift + accent glow */
.home-dark .card,.home-dark .cdn__card,.trust__item,.features-strip .feat,
.by-numbers__cell,.cdn .cdn__card,.standards__row{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02))!important;
  border:1px solid rgba(255,255,255,.09)!important;border-radius:0!important;
  -webkit-backdrop-filter:blur(6px)!important;backdrop-filter:blur(6px)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 12px 34px rgba(0,0,0,.32)!important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important}
.home-dark .card:hover,.home-dark .cdn__card:hover,.trust__item:hover,
.features-strip .feat:hover,.by-numbers__cell:hover{
  transform:translateY(-3px)!important;border-color:rgba(79,134,232,.55)!important;
  box-shadow:0 16px 44px rgba(0,0,0,.42),0 0 0 1px rgba(79,134,232,.35)!important}
/* gradient eyebrow accent lines */
.eyebrow::before,.lab__eyebrow::before,.lab-band__eyebrow::before,.cdn__eyebrow::before{
  background:linear-gradient(90deg,#4f86e8,rgba(79,134,232,0))!important;height:2px!important;width:40px!important}
/* gradient-filled stat numerals */
.by-numbers__num,.standards__num,.lab-band__stat-num,.ribbon__num{
  background:linear-gradient(180deg,#eef4ff,#7aa6ff)!important;-webkit-background-clip:text!important;
  background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important}
/* soft radial glow behind the proof + CTA bands */
.lab-band,.cta-band,section[aria-label="Independent verification"]{position:relative!important;overflow:hidden!important}
.lab-band::before,section[aria-label="Independent verification"]::before{
  content:"";position:absolute;top:-25%;left:18%;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(79,134,232,.16),rgba(79,134,232,0) 62%);pointer-events:none;z-index:0}
.lab-band > *,section[aria-label="Independent verification"] > *{position:relative;z-index:1}
/* gradient primary CTA + glow */
.btn--blue,a.btn--blue,.add-to-cart,.card__quick,.lab__btn--blue,.cta-band__btn{
  background:linear-gradient(180deg,#3f7bf0,#2f6fed)!important;
  box-shadow:0 6px 20px rgba(47,111,237,.34)!important}
/* more breathing room between major blocks (modern whitespace) */
.home-dark > section,.features-strip,.by-numbers,.trust,.cdn,.lab-band,.cta-band{
  padding-top:clamp(54px,7vw,104px)!important;padding-bottom:clamp(54px,7vw,104px)!important}
/* hairline dividers fade at the edges */
.trust-strip{border-top:1px solid transparent!important;
  border-image:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent) 1!important}

/* lab-band: trim the over-padded editorial space */
.lab-band{padding-top:clamp(44px,4.5vw,68px)!important;padding-bottom:clamp(44px,4.5vw,68px)!important;min-height:0!important}

/* ===================== 2026-06-18 round 2: glass extend + hero depth + mobile ===================== */
/* glass system on PDP dark content cards (consistency with homepage) */
.why-card,.bac-cross,.pdp-coa,.pdp-background,.pdp-faq .faq-item,.lit-block,.moa-block,
.pdp-bundle__item,.researchers-also-buy .ral-item{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))!important;
  border:1px solid rgba(255,255,255,.09)!important;border-radius:0!important;
  -webkit-backdrop-filter:blur(5px)!important;backdrop-filter:blur(5px)!important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important}
.pdp-faq .faq-item:hover,.pdp-bundle__item:hover,.why-card:hover,.researchers-also-buy .ral-item:hover{
  transform:translateY(-2px)!important;border-color:rgba(79,134,232,.5)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.36)!important}

/* HERO depth: vignette gradient + fine grain over the DNA video */
#main.hero--video .lab__hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 28% 38%,rgba(8,16,34,0) 30%,rgba(6,12,28,.62) 100%),
  linear-gradient(180deg,rgba(6,12,28,.5),rgba(6,12,28,0) 26%,rgba(6,12,28,.55))}
#main.hero--video .lab__hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:180px 180px;mix-blend-mode:overlay}
#main.hero--video .lab__grid,#main.hero--video .lab__ribbon{z-index:2!important}

/* MOBILE tighten for the new dark sections */
@media (max-width:760px){
  .home-dark > section,.features-strip,.by-numbers,.trust,.cdn,.lab-band,.cta-band{
    padding-top:40px!important;padding-bottom:40px!important}
  .by-numbers__grid,.features-strip__grid,.cdn__grid,.feat-grid{grid-template-columns:1fr 1fr!important;gap:12px!important}
  .home-dark .card,.cdn__card,.trust__item,.by-numbers__cell,.features-strip .feat{
    border-radius:0!important;padding:16px!important}
  .product-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .lab-band::before,section[aria-label="Independent verification"]::before{display:none!important}
  .display-lg,.lab__display,.section-title{line-height:1.02!important}
}
@media (max-width:480px){
  .by-numbers__grid,.product-grid,.cdn__grid,.features-strip__grid{grid-template-columns:1fr!important}
}

/* dna render as a faint depth layer behind the Janoshik proof band */
.lab-band{background-image:linear-gradient(rgba(6,12,28,.88),rgba(6,12,28,.95)),url("/assets/dna-hero.webp")!important;
  background-size:cover!important;background-position:center 30%!important;background-repeat:no-repeat!important}

/* new logo is a squarer lockup -> give it a touch more height in nav + footer */
.nav__brand img{height:46px!important}
.footer-logo img,.footer-sitemap__logo img,footer .logo img{max-height:64px!important;width:auto!important}

/* dna render as depth on the final CTA band (lab-band keeps its own image) */
.cta-band,section[aria-label="Start with a known quantity"]{
  background-image:linear-gradient(rgba(8,16,34,.9),rgba(8,16,34,.955)),url("/assets/dna-hero.webp")!important;
  background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}

/* ===================== 2026 SLEEK PASS: darker, refined, consistent ===================== */
:root{--pnx-bg:#080b13;--pnx-bg2:#0e1422;--pnx-bg3:#151b29;--pnx-ink:#f2f5fa;--pnx-mute:#90a4c6;--pnx-line:rgba(255,255,255,.06);}
html,body{background:#070910!important}
/* frosted sticky nav (2026) */
.nav,header.nav{background:rgba(8,11,19,.72)!important;-webkit-backdrop-filter:blur(14px) saturate(1.2)!important;backdrop-filter:blur(14px) saturate(1.2)!important;border-bottom:1px solid rgba(255,255,255,.06)!important}
/* refined hairlines + tighter card radii everywhere */
.home-dark .card,.cdn__card,.trust__item,.features-strip .feat,.by-numbers__cell,.standards__row,
.why-card,.bac-cross,.pdp-coa,.pdp-background,.pdp-faq .faq-item,.lit-block,.moa-block,.pdp-bundle__item,
.researchers-also-buy .ral-item{border-color:rgba(255,255,255,.06)!important;border-radius:0!important}
/* consistent horizontal gutters (kills the padding inconsistencies) */
.band,.home-dark>section,.features-strip,.by-numbers,.trust,.cdn,.cta-band,.trust-strip,.lab-band,.standards{
  padding-left:clamp(20px,5vw,64px)!important;padding-right:clamp(20px,5vw,64px)!important}
.container{max-width:1280px!important;margin-left:auto!important;margin-right:auto!important;width:100%!important}
/* deeper product-grid frame so white tiles pop harder */
section.band--light:has(.product-grid){background:#06080e!important}
/* sleeker primary CTA: tighter, brighter, soft glow */
.btn--blue,a.btn--blue,.add-to-cart,.card__quick,.lab__btn--blue,.cta-band__btn{
  background:linear-gradient(180deg,#3f7bf0,#2563eb)!important;letter-spacing:.01em!important;
  box-shadow:0 4px 18px rgba(37,99,235,.34)!important}
/* hairline dividers ultra-thin */
.lab__ribbon{border-top:1px solid rgba(255,255,255,.06)!important}

/* ===================== 2026 design round 3 ===================== */
/* product card: image zoom on hover + cleaner body */
.product-grid .card{overflow:hidden!important}
.product-grid .card__photo{overflow:hidden!important;background:#ffffff!important;position:relative!important}
.product-grid .card__photo img,.product-grid .card__photo picture{display:block!important;will-change:transform;
  transition:transform .55s cubic-bezier(.2,.7,.2,1)!important}
.product-grid .card:hover .card__photo img{transform:scale(1.07)!important}
.product-grid .card__body{padding:18px 18px 20px!important}
/* sleek price row: tabular figures */
.product-grid .card .card__price,.product-grid .card [class*="price"]{font-variant-numeric:tabular-nums!important}

/* bigger, bolder stat numerals (2026 big-type) */
.by-numbers__num{font-size:clamp(42px,4.4vw,68px)!important;line-height:.95!important;font-weight:700!important;letter-spacing:-.01em!important}
.by-numbers__cell{padding:24px 22px!important}
.by-numbers__lbl{letter-spacing:.08em!important;font-size:11px!important;opacity:.82!important}

/* feature tiles: refined 2x2 with icon chips */
.features-strip .feat__icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:44px!important;height:44px!important;border-radius:0!important;
  background:rgba(79,134,232,.12)!important;border:1px solid rgba(79,134,232,.25)!important;margin-bottom:14px!important}
@media (min-width:761px){.features-strip__inner{grid-template-columns:repeat(4,1fr)!important;gap:16px!important}}

/* smoother, springier scroll reveals */
[data-reveal],.ll-reveal{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)!important}

/* lab-band: lift off pure black with a subtle blue depth glow */
.lab-band{background-color:#0a0f1a!important}
.lab-band::after{content:""!important;position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none!important;
  background:radial-gradient(110% 90% at 82% 22%,rgba(37,99,235,.14),rgba(37,99,235,0) 55%)!important}
.lab-band>*{position:relative!important;z-index:1!important}

/* ===================== "REFERENCE STANDARD" design system ===================== */
:root{--mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;}

/* monospace for instrument-data type: eyebrows, labels, specs, prices */
.eyebrow,.lab__eyebrow,.cdn__eyebrow,.section-eyebrow,.lab-band__eyebrow,.eyebrow.on-dark,
.by-numbers__lbl,.lab__ribbon__k,.ribbon__k,.card__meta,.card__price,.pdp__price,
.pdp__specs,.standards__num,.cart-foot-row,.coa-data,.lot-data{
  font-family:var(--mono)!important}
.eyebrow,.lab__eyebrow,.cdn__eyebrow,.section-eyebrow,.lab-band__eyebrow,.eyebrow.on-dark,
.by-numbers__lbl,.lab__ribbon__k,.ribbon__k{
  font-size:11px!important;letter-spacing:.16em!important;text-transform:uppercase!important;font-weight:500!important}
.card__price,.pdp__price{font-weight:600!important;letter-spacing:-.01em!important}
.card__meta{font-size:12px!important;letter-spacing:.005em!important;color:#9fb0cc!important}

/* SIGNATURE: HPLC chromatogram trace replaces the generic eyebrow bar */
.eyebrow::before,.lab__eyebrow::before,.cdn__eyebrow::before,.lab-band__eyebrow::before,.section-eyebrow::before{
  content:""!important;display:inline-block!important;width:56px!important;height:14px!important;
  margin-right:11px!important;vertical-align:middle!important;background:none!important;border:0!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'><path d='M0 12 H20 l2 -1 l3 -9 l3 10 l2 1 H38 l2 -4 l2 4 H56' fill='none' stroke='%233f7bf0' stroke-width='1.3' stroke-linejoin='round'/></svg>")!important;
  background-repeat:no-repeat!important;background-position:left center!important;background-size:56px 14px!important;height:14px!important}

/* SIGNATURE fix: encoded HPLC chromatogram, higher specificity */
html body .eyebrow::before,html body .lab__eyebrow::before,html body .cdn__eyebrow::before,
html body .lab-band__eyebrow::before,html body .section-eyebrow::before,html body .eyebrow.on-dark::before{
  content:""!important;display:inline-block!important;width:58px!important;height:14px!important;
  margin-right:11px!important;vertical-align:middle!important;background-color:transparent!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='14'%3E%3Cpath d='M0 12 H20 l2 -1 l3 -9 l3 10 l2 1 H38 l2 -4 l2 4 H58' fill='none' stroke='%233f7bf0' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-size:58px 14px!important;background-position:left center!important}

/* SIGNATURE: chromatogram from a real SVG file (reliable) */
html body .eyebrow::before,html body .lab__eyebrow::before,html body .cdn__eyebrow::before,
html body .lab-band__eyebrow::before,html body .section-eyebrow::before,html body .eyebrow.on-dark::before{
  background-image:url("/assets/chromatogram.svg?v=1")!important}

/* force chromatogram on hero + remaining eyebrows (beat #main + reset rules) */
#main.hero--video .lab__eyebrow::before{
  background:transparent url("/assets/chromatogram.svg?v=1") left center / 58px 14px no-repeat!important;
  width:58px!important;height:14px!important;content:""!important;display:inline-block!important;
  margin-right:11px!important;vertical-align:middle!important}
html body .eyebrow::before,html body .section-eyebrow::before,html body section .eyebrow::before{
  background:transparent url("/assets/chromatogram.svg?v=1") left center / 58px 14px no-repeat!important;
  width:58px!important;height:14px!important;content:""!important;display:inline-block!important;
  margin-right:11px!important;vertical-align:middle!important}

/* chromatogram on every eyebrow variant (catch-all) */
html body [class*="eyebrow"]::before{
  background:transparent url("/assets/chromatogram.svg?v=1") left center / 58px 14px no-repeat!important;
  width:58px!important;height:14px!important;content:""!important;display:inline-block!important;
  margin-right:11px!important;vertical-align:middle!important;border:0!important}

/* ===== CRO cut round 2: trim homepage to the converting essentials ===== */
.trust-strip,
section[aria-label="The shift"],
.features-strip,
section[aria-label="What you get with every order"]{display:none!important}

/* lab-band: collapse the empty media void into a compact image band */
.lab-band__media{height:340px!important;max-height:340px!important;min-height:0!important;overflow:hidden!important;position:relative!important}
.lab-band__media img,.lab-band__media picture,.lab-band__media video{height:340px!important;width:100%!important;object-fit:cover!important;opacity:.55!important}
.lab-band__inner{min-height:0!important}

/* ===================== round 4: reference-standard everywhere ===================== */
/* 1. chromatogram draw-on (hero signature motion) */
@keyframes chromaDraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
#main.hero--video .lab__eyebrow::before{animation:chromaDraw 1.1s cubic-bezier(.2,.7,.2,1) .35s both!important}
@media (prefers-reduced-motion:reduce){#main.hero--video .lab__eyebrow::before{animation:none!important}}

/* 2. product photography: consistent vial framing + soft ground shadow */
.product-grid .card__photo{aspect-ratio:1/1!important;display:flex!important;align-items:center!important;
  justify-content:center!important;padding:16px!important}
.product-grid .card__photo img{max-height:88%!important;max-width:84%!important;width:auto!important;height:auto!important;
  object-fit:contain!important;filter:drop-shadow(0 18px 24px rgba(18,28,56,.24))!important}

/* 3. PDP reference-standard: mono spec sheet + data-table COA feel */
.pdp__specs,.pdp__specs *{font-family:var(--mono)!important}
.pdp__specs{font-size:13px!important;letter-spacing:.01em!important}
.pdp-tabs table,.tabs__panel table,.coa-table,.pdp__specs table{font-family:var(--mono)!important;font-size:13px!important;width:100%!important;border-collapse:collapse!important}
.pdp-tabs table td,.pdp-tabs table th,.tabs__panel table td,.tabs__panel table th{
  padding:10px 12px!important;border-bottom:1px solid rgba(255,255,255,.07)!important;text-align:left!important}
.pdp-tabs table th{color:#9fb0cc!important;font-weight:500!important;letter-spacing:.06em!important;text-transform:uppercase!important;font-size:11px!important}

/* 4. catalog filter rail: mono headers + refined counts */
.cat-side h2,.cat-side h3,.cat-side .cat-head,.cat-side .filter__title{
  font-family:var(--mono)!important;font-size:11px!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#9fb0cc!important}
.cat-side a{font-size:14px!important}
.cat-side .count,.cat-side [class*="count"],.cat-side .cat-link span:last-child{font-family:var(--mono)!important;color:#7e93b5!important;font-size:12px!important}

/* vial drop-shadow (stronger specificity) */
html body .product-grid .card .card__photo img,html body .product-grid .card__photo picture img{
  filter:drop-shadow(0 18px 24px rgba(18,28,56,.26))!important}

/* ===================== mobile nav drawer (slide-in) ===================== */
@media (max-width:900px){
  #navLinks,.nav__links{
    position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;
    width:min(84vw,330px)!important;height:100dvh!important;height:100vh!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;
    gap:0!important;padding:92px 26px 28px!important;margin:0!important;
    background:rgba(9,12,20,.98)!important;-webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;
    border-left:1px solid rgba(255,255,255,.08)!important;box-shadow:-22px 0 60px rgba(0,0,0,.55)!important;
    transform:translateX(102%)!important;transition:transform .34s cubic-bezier(.2,.75,.2,1)!important;
    visibility:visible!important;z-index:1200!important;overflow-y:auto!important}
  #navLinks,.nav__links{pointer-events:none!important}
  body.nav-open #navLinks,body.nav-open .nav__links{transform:translateX(0)!important;pointer-events:auto!important}
  body.nav-open #navLinks a,body.nav-open .nav__links a{pointer-events:auto!important}
  #navLinks a,.nav__links a{
    font-family:var(--mono)!important;font-size:13px!important;letter-spacing:.12em!important;text-transform:uppercase!important;
    color:#eef3fb!important;padding:18px 2px!important;width:100%!important;border-bottom:1px solid rgba(255,255,255,.07)!important}
  body.nav-open::after{content:""!important;position:fixed!important;inset:0!important;z-index:1100!important;
    background:rgba(2,4,8,.55)!important;-webkit-backdrop-filter:blur(2px)!important;backdrop-filter:blur(2px)!important}
  body.nav-open{overflow:hidden!important}
  /* Lift the whole header (and its nested drawer) above the z-1100 backdrop
     so the open menu's links are actually on top and clickable. */
  body.nav-open .nav,body.nav-open header.nav{z-index:1301!important}
  .nav__burger{z-index:1302!important;position:relative!important}
}

/* PDP product title must stay dark on the white buy panel */
html body .pdp__name,html body .pdp .pdp__name,html body section.band--light .pdp__name{color:#0a0e18!important}

/* ===== PDP contrast reset (clean separation) ===== */
/* content sections: dark surface + light text */
html body :is(.moa-block,.lit-block,.pdp-tabs,.tabs__panel,.why-card,.bac-cross,.pdp-background,.pdp-faq,.pdp-bundle,.pdp-coa){
  background:var(--pnx-bg2)!important}
html body :is(.moa-block,.lit-block,.pdp-tabs,.tabs__panel,.why-card,.bac-cross,.pdp-background,.pdp-faq,.pdp-bundle,.pdp-coa) :where(h1,h2,h3,h4,h5,p,li,span,div,td,th,dd,dt,small,strong,b,a,label,summary){
  color:#e8eef8!important}
html body :is(.moa-block,.lit-block,.pdp-tabs,.pdp-background,.pdp-faq) :where(.moa__label,.eyebrow,.section-eyebrow,th){color:#9fb0cc!important}
/* keep the buy panel white with dark text */
html body .pdp{background:#ffffff!important}
html body .pdp :where(h1,h2,h3,h4,p,li,span,div,label,dt,dd,b,strong,.pdp__name,.pdp-payment__c,.pdp-payment span){color:#0a0e18!important}
html body .pdp .pdp__lead,html body .pdp .pdp__specs,html body .pdp .pdp__specs *{color:#3a4660!important}
html body .pdp .btn,html body .pdp .add-to-cart,html body .pdp button.btn{color:#ffffff!important}

/* pdp-bundle + coa badge belong to the LIGHT buy flow (not dark content) */
html body .pdp-bundle,html body .pdp-bundle__item,html body .pdp-bundle__foot,html body .pdp-coa{
  background:#f4f6f9!important;border-color:rgba(10,14,24,.1)!important}
html body .pdp-bundle :where(h2,h3,h4,p,span,div,li,b,strong),
html body .pdp-coa :where(h2,h3,h4,p,span,div,li,b,strong),
html body .pdp-bundle__item :where(span,div,p,b,strong),
html body .pdp-bundle__foot :where(span,div,p){color:#0a0e18!important}
html body .pdp-bundle__add,html body .pdp-bundle .btn{background:#2563eb!important}
html body .pdp-bundle__add,html body .pdp-bundle__add *,html body .pdp-bundle .btn *{color:#ffffff!important}
html body .pdp [class*="janoshik"],html body .pdp [class*="verified"],html body .pdp [class*="janoshik"] *{color:#0a0e18!important}

/* ===== PDP DECISIVE RESET (overrides all prior PDP passes) ===== */
html body main :where(.moa-block,.lit-block,.pdp-tabs,.tabs__panel,.why-card,.bac-cross,.pdp-background,.pdp-faq,.pdp-bundle,.pdp-bundle__item,.pdp-bundle__foot,.pdp-coa){
  background:var(--pnx-bg2)!important;border-color:rgba(255,255,255,.07)!important}
html body main :where(.moa-block,.lit-block,.pdp-tabs,.tabs__panel,.why-card,.bac-cross,.pdp-background,.pdp-faq,.pdp-bundle,.pdp-coa) *:not(.btn):not(.btn *):not(svg):not(path){
  color:#e8eef8!important}
html body main :where(.moa-block,.lit-block,.pdp-tabs,.pdp-background,.pdp-faq) :where(.eyebrow,.moa__label,.section-eyebrow,th){color:#9fb0cc!important}
html body main .pdp-bundle__add,html body main .pdp-bundle__add *,html body main .pdp-bundle .btn,html body main .pdp-bundle .btn *{color:#ffffff!important;background-color:#2563eb!important}
/* buy panel: white + dark text */
html body .pdp{background:#ffffff!important}
html body .pdp *:not(.btn):not(.btn *):not(svg):not(path){color:#0a0e18!important}
html body .pdp .pdp__lead,html body .pdp .pdp__lead *,html body .pdp .pdp__specs *{color:#3a4660!important}
html body .pdp .btn,html body .pdp .btn *,html body .pdp .add-to-cart{color:#ffffff!important}

/* PDP content-section eyebrows -> periwinkle (were dark-blue on dark) + payment badge */
html body main :where(.moa-block,.lit-block,.pdp-tabs,.pdp-background,.pdp-faq,.why-card,.bac-cross) .eyebrow,
html body main .moa__head .eyebrow,html body main .lit__head .eyebrow,html body main .pdp-background__head .eyebrow{
  color:#9db8ff!important}
html body .pdp [class*="pdp-payment__card-"],html body .pdp .pdp-payment__card *{color:#0a0e18!important}
html body .pdp .pdp-payment__card-badge{background:#0a0e18!important;color:#fff!important}

/* eyebrow nuke: readable periwinkle on dark, beats deep cascade (buy panel handled separately) */
html body main .eyebrow.eyebrow.eyebrow,html body main [class*="__eyebrow"].eyebrow,
html body main .moa-block .eyebrow.eyebrow,html body main .lit-block .eyebrow.eyebrow{color:#9db8ff!important}
html body .pdp .eyebrow.eyebrow.eyebrow{color:#1b4fa0!important}

/* FIX: .pdp is the whole page wrapper -> re-light the content sections inside it */
html body .pdp :is(.moa-block,.lit-block,.pdp-tabs,.tabs__panel,.why-card,.bac-cross,.pdp-background,.pdp-faq) *:not(.btn):not(.btn *):not(svg):not(path){color:#e8eef8!important}
html body .pdp :is(.moa-block,.lit-block,.pdp-tabs,.pdp-background,.pdp-faq,.why-card) .eyebrow.eyebrow.eyebrow{color:#9db8ff!important}
html body .pdp :is(.moa-block,.lit-block,.pdp-tabs,.pdp-background,.pdp-faq) :where(.moa__label,th){color:#9fb0cc!important}

/* eyebrows by their actual header parent (no main scope) */
html body .moa__head .eyebrow,html body .lit__head .eyebrow,
html body .pdp-background__head .eyebrow,html body .pdp-faq .eyebrow,
html body .pdp-tabs .eyebrow,html body .why-card .eyebrow,
html body .moa__head .eyebrow.eyebrow,html body .lit__head .eyebrow.eyebrow{color:#9db8ff!important}
/* stray failing labels */
html body .moa-block .title-md,html body .lit-block .title-md,html body .pdp-background .title-md{color:#e8eef8!important}

/* ===== RESTORE lab-band: full-cover image + overlaid content (undo earlier band/void breakage) ===== */
html body section.lab-band{background:#06080e!important}
html body section.lab-band .lab-band__media{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;opacity:.5!important;overflow:visible!important}
html body section.lab-band .lab-band__media img,html body section.lab-band .lab-band__media picture,html body section.lab-band .lab-band__media source{width:100%!important;height:100%!important;object-fit:cover!important}
html body section.lab-band::after{display:none!important}
html body section.lab-band .lab-band__inner{min-height:clamp(380px,52vh,560px)!important;padding-top:clamp(64px,8vw,120px)!important;padding-bottom:clamp(64px,8vw,120px)!important}
@media (max-width:760px){
  html body section.lab-band .lab-band__inner{min-height:auto!important;padding-top:44px!important;padding-bottom:44px!important;grid-template-columns:1fr!important;gap:28px!important}
}

/* hero video flush to the stat ribbon (remove the bottom gap) */
#main.hero--video .lab__hero{padding-bottom:0!important;margin-bottom:0!important}
#main.hero--video .lab__grid{padding-bottom:clamp(32px,4vw,56px)!important}
#main.hero--video .lab__ribbon{margin-top:0!important}

/* ===== fix stray eyebrow bar + bestseller badge ===== */
/* force the chromatogram on every eyebrow (kill the leftover solid bar) */
html body [class*="eyebrow"]::before,html body .section-head .eyebrow::before,html body .eyebrow::before{
  background-color:transparent!important;
  background-image:url("/assets/chromatogram.svg?v=1")!important;
  background-repeat:no-repeat!important;background-position:left center!important;background-size:58px 14px!important;
  width:58px!important;height:14px!important;content:""!important;display:inline-block!important;
  margin-right:11px!important;vertical-align:middle!important;border:0!important}
/* bestseller badge -> clean accent pill (was an unstyled black bar) */
.card__bestseller-badge{
  position:absolute!important;top:12px!important;left:12px!important;right:auto!important;z-index:4!important;
  background:#2563eb!important;color:#ffffff!important;font-family:var(--mono)!important;
  font-size:9px!important;font-weight:600!important;letter-spacing:.12em!important;text-transform:uppercase!important;
  padding:5px 10px!important;border-radius:0!important;line-height:1!important;width:auto!important;height:auto!important;
  box-shadow:0 4px 14px rgba(37,99,235,.45)!important}

/* ===================== UNIFORM SPACING SYSTEM (consolidating, wins last) ===================== */
:root{--sx-gut:clamp(22px,5vw,72px);--sx-section:clamp(76px,9vw,132px);--sx-container:1240px;}
/* every content section: identical vertical rhythm + symmetric gutters (hero + lab-band excluded; they're full-bleed) */
html body .band,html body .home-dark>section,html body .by-numbers,html body .trust,
html body .cdn,html body .cta-band,html body .standards,html body .features-strip,
html body section[aria-label="Independent verification"]{
  padding-top:var(--sx-section)!important;padding-bottom:var(--sx-section)!important;
  padding-left:var(--sx-gut)!important;padding-right:var(--sx-gut)!important}
/* one container width, centered, no double gutter */
html body .container{max-width:var(--sx-container)!important;margin-left:auto!important;margin-right:auto!important;
  width:100%!important;padding-left:0!important;padding-right:0!important}
/* uniform grid gaps */
html body .product-grid,html body .cdn__grid,html body .by-numbers__inner,
html body .features-strip__inner,html body .cards{gap:clamp(16px,1.7vw,26px)!important}
/* uniform card padding */
html body .cdn__card,html body .trust__item,html body .by-numbers__cell,
html body .features-strip .feat,html body .home-dark .card{padding:clamp(22px,2.3vw,34px)!important}
/* uniform eyebrow -> heading -> lead rhythm */
html body .eyebrow,html body .section-eyebrow,html body .cdn__eyebrow{margin:0 0 18px!important}
html body .section-head h2,html body .section-head h3,html body .section-title,html body .cdn__h{margin:0 0 18px!important}
html body .section-head{margin-bottom:clamp(32px,4vw,56px)!important}

/* tune the uniform rhythm + force the outlier section tops */
:root{--sx-section:clamp(68px,8vw,116px)!important;}
html body section.band--light:has(.product-grid),
html body .cta-band,html body section[aria-label="Start with a known quantity"],
html body section[aria-label="Independent verification"]{
  padding-top:var(--sx-section)!important;padding-bottom:var(--sx-section)!important}

/* badge: higher specificity so it wins (clean blue mono pill) */
html body .product-grid .card .card__bestseller-badge,html body .card .card__bestseller-badge{
  background:#2563eb!important;color:#fff!important;font-family:var(--mono)!important;font-size:9px!important;
  font-weight:600!important;letter-spacing:.12em!important;text-transform:uppercase!important;
  padding:5px 10px!important;border-radius:0!important;line-height:1!important;width:auto!important;height:auto!important;
  top:12px!important;left:12px!important;box-shadow:0 4px 14px rgba(37,99,235,.45)!important}

/* ===== secondary-page cards that stayed white-on-white ===== */
html body .contact-card{background:var(--pnx-bg2)!important;border:1px solid var(--pnx-line)!important;border-radius:0!important}
html body .contact-card__h,html body .contact-card__eyebrow{color:#9db8ff!important}
html body .contact-card__data,html body .contact-card h2,html body .contact-card h3{color:#ffffff!important}
html body .contact-card__body,html body .contact-card p,html body .contact-card li,html body .contact-card span{color:rgba(255,255,255,.82)!important}
html body .contact-card a{color:#6fa3ff!important}
html body .contact-card__icon{background:rgba(79,134,232,.12)!important;border:1px solid rgba(79,134,232,.25)!important}

/* contact cards: force dark, beat inline <style> + inline style= */
html body .contact-card.contact-card{background:var(--pnx-bg2)!important;border:1px solid var(--pnx-line)!important;border-radius:0!important}
html body .contact-card.contact-card *:not(a):not(.btn):not(svg):not(path){color:#e8eef8!important}
html body .contact-card.contact-card .contact-card__h,html body .contact-card.contact-card .contact-card__eyebrow{color:#9db8ff!important}
html body .contact-card.contact-card .contact-card__body{color:rgba(255,255,255,.82)!important}
html body .contact-card.contact-card a{color:#6fa3ff!important}

/* PDP dark-on-dark stragglers */
html body .pdp-payment__card-pin{color:#ffffff!important;background:#2563eb!important}
html body .pdp .moa__head .eyebrow,html body .pdp .lit__head .eyebrow,html body .pdp .pdp-background__head .eyebrow,html body .pdp .eyebrow.eyebrow.eyebrow{color:#9db8ff!important}

/* ===== PDP comprehensive content rule (all content dark + light text; buy zone untouched) ===== */
html body :is(.recon-calc,.bac-cross,.moa-block,.lit-block,.pdp-tabs,.tabs__panel,.why-card,.pdp-background,.pdp-faq,.faq-item,.pdp-bundle,.pdp-coa,.pdp details){
  background:#0e1422!important;border-color:rgba(255,255,255,.08)!important;border-radius:0!important}
html body :is(.recon-calc,.bac-cross,.moa-block,.lit-block,.pdp-tabs,.tabs__panel,.why-card,.pdp-background,.pdp-faq,.faq-item,.pdp-bundle,.pdp-coa,.pdp details) *:not(.btn):not(.btn *):not(svg):not(path):not(input):not(select){
  color:#e8eef8!important}
html body :is(.recon-calc,.bac-cross,.moa-block,.lit-block,.pdp-tabs,.pdp-background,.pdp-faq) :where(.eyebrow,.moa__label,th,summary){color:#9db8ff!important}
html body .pdp input,html body .pdp select,html body .recon-calc input,html body .recon-calc select{
  background:#0a0e18!important;color:#eef3fb!important;border:1px solid rgba(255,255,255,.14)!important}

/* bundle items dark (were light from an earlier pass) */
html body .pdp-bundle__item,html body .pdp-bundle__foot,html body .pdp-bundle__item-meta{background:#11192a!important;border-color:rgba(255,255,255,.08)!important}
html body .pdp-bundle__item *:not(.btn):not(.btn *),html body .pdp-bundle__foot *{color:#e8eef8!important}
html body .pdp-bundle__add,html body .pdp-bundle__add *{color:#fff!important;background:#2563eb!important}

/* ===== slim hero stat ribbon (was too thick) ===== */
#main.hero--video .lab__ribbon__cell{padding-top:12px!important;padding-bottom:12px!important}

/* ===== liquid-gloss glass cards ===== */
html body .cdn__card,html body .trust__item,html body .by-numbers__cell,html body .features-strip .feat{
  background:linear-gradient(155deg,rgba(255,255,255,.11),rgba(255,255,255,.035) 42%,rgba(255,255,255,.015))!important;
  border:1px solid rgba(255,255,255,.14)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.4)!important;backdrop-filter:blur(16px) saturate(1.4)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.22),0 22px 50px rgba(0,0,0,.42)!important;
  position:relative!important;overflow:hidden!important;border-radius:0!important}
html body .cdn__card::before,html body .trust__item::before,html body .by-numbers__cell::before,html body .features-strip .feat::before{
  content:""!important;position:absolute!important;top:0!important;left:0!important;right:0!important;height:55%!important;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0))!important;
  pointer-events:none!important;border-radius:18px 18px 40% 40%/18px 18px 14px 14px!important;z-index:0!important}
html body .cdn__card>*,html body .trust__item>*,html body .by-numbers__cell>*,html body .features-strip .feat>*{position:relative!important;z-index:1!important}

/* ===== PDP padding + clean spec table (stop the flush/box issues) ===== */
html body .moa-block,html body .lit-block,html body .pdp-background,html body .pdp-faq,
html body .pdp-tabs,html body .why-card,html body .recon-calc,html body .pdp-bundle,
html body .pdp-coa,html body .tabs__panel{padding:clamp(22px,2.6vw,38px)!important}
html body .pdp__specs{background:transparent!important;border:0!important;box-shadow:none!important}
html body .pdp__specs table,html body .pdp__specs td,html body .pdp__specs th,html body .pdp__specs tr{
  border:0!important;background:transparent!important;padding:7px 0!important}

/* PDP payment-card "How it works" disclosure ? clean toggle, not a dark lozenge
   (my earlier .pdp details dark rule had turned it into a heavy black pill) */
html body .pdp-payment__steps.pdp-payment__steps{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:6px 0 0!important}
html body .pdp-payment__steps.pdp-payment__steps summary{color:#1a2436!important;font-weight:600!important;font-size:12.5px!important;cursor:pointer;list-style:none!important;display:inline-flex!important;align-items:center;gap:6px;letter-spacing:.2px}
html body .pdp-payment__steps.pdp-payment__steps summary::-webkit-details-marker{display:none!important}
html body .pdp-payment__steps.pdp-payment__steps *:not(summary){color:#3b4658!important}

/* Calculator dose/volume option rows: the custom input must shrink and wrap,
   never clip past the card edge on narrow viewports */
html body .calc__opts{flex-wrap:wrap!important}
html body .calc__opts input{flex:1 1 140px!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
html body .calc__opts .calc__chip{flex:0 1 auto!important}

/* Flush-content fix: .container relied on margin-centering for its gutter,
   which collapses to 0 once the viewport is narrower than its max-width.
   Give it real side padding below that point. Fixes flush COA reports, PDP
   spec tables, Overview blocks and any other .container content on tablet/mobile. */
@media(max-width:1260px){
  html body .container{padding-left:clamp(16px,4vw,28px)!important;padding-right:clamp(16px,4vw,28px)!important;box-sizing:border-box!important}
}

/* ===== Homepage hero: branded hero.png as full-bleed background ===== */
html body .hero--video .lab__hero{position:relative}
html body .hero--video .lab__hero-img{position:absolute!important;inset:0!important;z-index:0!important;display:block;line-height:0}
html body .hero--video .lab__hero-img img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important}
/* left-weighted scrim keeps the white headline legible over the image */
html body .hero--video .lab__video-scrim{position:absolute!important;inset:0!important;z-index:1!important;background:linear-gradient(90deg,rgba(6,9,15,.90) 0%,rgba(6,9,15,.70) 36%,rgba(6,9,15,.34) 66%,rgba(6,9,15,.12) 100%)!important}
html body .hero--video .lab__grid,html body .hero--video .lab__ribbon{position:relative;z-index:2}

/* ===== DNA molecular image as the #standards dark-band background ===== */
html body #standards.band--dark{position:relative;overflow:hidden}
html body #standards.band--dark::before{content:"";position:absolute;inset:0;background:url(/assets/dna-full-2000.webp) center/cover no-repeat;opacity:.16;z-index:0;pointer-events:none}
html body #standards.band--dark>*{position:relative;z-index:1}

/* ============================================================
   NORTH MAPLE ? signature palette repaint (Phase 1)
   maple-red = signature accent (sparing); steel-blue = actions only
   ============================================================ */
:root{
  --brand-red:#c0392b;       /* maple ? the signature */
  --brand-red-deep:#9e2c20;
  --brand-blue:#2f6fed;      /* steel ? CTAs + links only */
  --brand-blue-deep:#2257c8;
}
/* eyebrows + category labels + section ticks -> maple */
html body .eyebrow,html body .lab__eyebrow,html body .lab-band__eyebrow,html body .section-head .eyebrow,
html body .h7-eyebrow,html body .card__cat,html body .card .card__cat,html body .j-card__cat,
html body .cdn__eyebrow,html body .narrative .eyebrow,html body section .eyebrow:not(.on-dark),
html body .page-hero:not(.page-hero--media) .eyebrow{color:var(--brand-red)!important}
/* eyebrows on dark / photo surfaces -> light maple (holds contrast) */
html body .eyebrow.on-dark,html body .home-dark .eyebrow,html body .page-hero--media .eyebrow,
html body .page-hero--media .eyebrow.on-dark,html body .hero--video .lab__eyebrow{color:#ec9a8f!important}
/* chromatogram signature mark -> maple svg */
html body .eyebrow::before,html body .lab__eyebrow::before,html body .lab-band__eyebrow::before,
html body .section-head .eyebrow::before{
  background:transparent url("/assets/chromatogram-maple.svg?v=1") left center / 58px 14px no-repeat!important}
/* bestseller flag -> maple signature (was bright SaaS blue) */
html body .card__bestseller-badge{background:var(--brand-red)!important;color:#fff!important;box-shadow:0 4px 14px rgba(192,57,43,.35)!important}
/* category dots: alternate steel/maple for rhythm */
html body .chip[href*="metabolic"]::before,html body .chip[href*="healing"]::before{background:var(--brand-blue)!important}
html body .chip[href*="growth-axis"]::before,html body .chip[href*="longevity"]::before,html body .chip[href*="cosmetic"]::before{background:var(--brand-red)!important}
/* active filter chip stays steel (it is an action) */
html body .filters .chip.is-active{background:var(--brand-blue)!important;border-color:var(--brand-blue)!important;color:#fff!important}
/* display headline accent + leaf + save badges already maple ? deepen to match */
html body .lab__display__line--accent,html body .display-lg em,html body .hero-title em,html body .lab-band__headline em{color:var(--brand-red)!important}

/* ============================================================
   Phase 2: premium product cards
   ============================================================ */
html body .product-grid .card{
  background-color:#ffffff!important;background-image:linear-gradient(180deg,#ffffff 0%,#f4f7fc 100%)!important;
  border:1px solid rgba(16,24,40,.07)!important;border-radius:0!important;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 30px rgba(16,24,40,.10)!important;
  overflow:hidden!important;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease!important}
html body .product-grid .card:hover{transform:translateY(-4px)!important;box-shadow:0 6px 14px rgba(16,24,40,.08),0 22px 48px rgba(16,24,40,.18)!important;border-color:rgba(47,111,237,.28)!important}
/* photo backdrop: subtle radial so the vial separates from the card */
html body .product-grid .card__photo{background-color:#f3f6fb!important;background-image:radial-gradient(120% 90% at 50% 16%,#ffffff 0%,#eef2f8 68%,#e5ebf4 100%)!important;position:relative}
/* drop the redundant "View ->" (whole card links to the PDP) */
html body .product-grid .card__row .card__cta{display:none!important}
html body .product-grid .card__row{justify-content:flex-start!important}
/* price + spec -> JetBrains Mono, prominent */
html body .product-grid .card__price{font-family:var(--mono,'JetBrains Mono',monospace)!important;font-weight:600!important;letter-spacing:-.01em!important;color:#0d1526!important}
html body .product-grid .card__price small{font-family:var(--mono,'JetBrains Mono',monospace)!important;color:#6b7890!important;font-weight:500!important}
html body .product-grid .card__meta{font-family:var(--mono,'JetBrains Mono',monospace)!important;color:#566074!important;letter-spacing:-.01em!important}
/* add-to-cart: refined steel, less heavy */
html body .product-grid .card__quick{
  background:var(--brand-blue)!important;color:#fff!important;border:0!important;border-radius:0!important;
  padding:13px 16px!important;font-weight:600!important;font-size:14px!important;
  box-shadow:0 6px 16px rgba(47,111,237,.26)!important;transition:background .2s,transform .15s,box-shadow .2s!important}
html body .product-grid .card__quick:hover{background:var(--brand-blue-deep)!important;transform:translateY(-1px)!important;box-shadow:0 8px 20px rgba(47,111,237,.36)!important}
html body .product-grid .card__quick:active{transform:scale(.98)!important}
/* bestseller flag -> maple (high specificity to beat the bundle) */
html body .card__photo .card__bestseller-badge.card__bestseller-badge{background:var(--brand-red)!important;color:#fff!important;box-shadow:0 4px 14px rgba(192,57,43,.30)!important;border-radius:0!important}

/* ============================================================
   Phase 3: JetBrains Mono for all lab-data (signature type move)
   ============================================================ */
html body .lab__ribbon__v,html body .by-numbers__num,html body .stat__num,html body .stat-num,
html body .pdp__price,html body .pdp-price,html body .pdp__price *,html body [data-price],
html body .cart-line__price,html body .cart__total,html body .cart-foot__total,html body .checkout__total,
html body .lab-band__fact dd,html body .pdp__specs td,html body .pdp__specs th,
html body .price,html body .product-price,html body .line-price{
  font-family:var(--mono,'JetBrains Mono',monospace)!important;font-feature-settings:'tnum' 1,'zero' 1!important;letter-spacing:-.01em!important}

/* ============================================================
   Phase 4: depth on dark sections (subtle, not on the DNA #standards band)
   ============================================================ */
html body .band--dark:not(#standards){position:relative}
html body .band--dark:not(#standards)::before{content:"";position:absolute;inset:0;background:radial-gradient(130% 90% at 50% -15%,rgba(47,111,237,.07) 0%,rgba(192,57,43,.03) 40%,transparent 62%);pointer-events:none;z-index:0}
html body .band--dark:not(#standards)>*{position:relative;z-index:1}

/* ============================================================
   PDP rebuild (North Maple system)
   ============================================================ */
/* sticky product image fills the long info column's void on desktop */
@media(min-width:900px){
  html body .pdp>div:has(.pdp__media){position:sticky!important;top:88px!important;align-self:start!important}
}
/* eyebrow -> maple signature */
html body .pdp .eyebrow,html body .pdp__eyebrow,html body .pdp .pdp__eyebrow,html body .pdp .pdp__kicker{color:var(--brand-red)!important}
/* sticky add-to-cart bar -> steel CTA (was dark navy) */
html body .pdp-stickybar__cta,html body .pdp-stickybar .btn,html body .pdp-stickybar button.btn{background:var(--brand-blue)!important;color:#fff!important;border:0!important}
html body .pdp-stickybar__cta:hover,html body .pdp-stickybar .btn:hover{background:var(--brand-blue-deep)!important}
/* "MOST POPULAR" pin -> maple signature */
html body .pdp-payment__card-pin{background:var(--brand-red)!important;color:#fff!important}
/* SKU/formula chip: tighten + ensure mono reads */
html body .pdp__idline,html body .pdp__sku-chip{font-family:var(--mono,'JetBrains Mono',monospace)!important}

/* sticky-enable: overflow-x:hidden on the page wrapper forces overflow-y:auto,
   which creates a scroll container that breaks position:sticky. overflow-x:clip
   still prevents horizontal scroll but does NOT establish a scroll container. */
html body .compliance-ack,html body .sa-ready{overflow-x:clip!important;overflow-y:visible!important}

/* correct targets: .sa-ready is <html>, .compliance-ack is <body> */
html.sa-ready{overflow-x:clip!important;overflow-y:visible!important}
body.compliance-ack{overflow-x:clip!important;overflow-y:visible!important}

/* PDP category eyebrow -> maple signature */
html body .pdp .pdp__cat,html body .pdp__cat{color:var(--brand-red)!important;font-weight:700!important;letter-spacing:1.6px!important}
/* keep the molecular formula on a subscript-complete font (mono dropped a glyph) */
html body .pdp__formula{font-family:var(--mono,'JetBrains Mono',monospace)!important;letter-spacing:.2px!important}

/* PDP eyebrow -> maple (stronger specificity) */
html body .pdp__info .pdp__cat.pdp__cat,html body .pdp .pdp__info .pdp__cat{color:var(--brand-red)!important}
/* PDP links contrast-safe on both light buy-zone + dark bundle (was light-blue on light) */
html body .pdp a:not(.btn):not(.card__quick):not(.pdp-bundle__add):not(.pdp-stickybar__cta){color:#2f6fed!important}

/* ============================================================
   Homepage refinement pass (hero bigger, ribbon thinner, white-on-white cards, DNA visible)
   ============================================================ */
/* 1. bigger hero */
html body .hero--video{min-height:84vh!important}
html body .hero--video .lab__grid{padding-top:36px!important;padding-bottom:40px!important}
/* 2. thinner stat ribbon */
html body .hero--video .lab__ribbon__cell{padding-top:8px!important;padding-bottom:8px!important}
html body .hero--video .lab__ribbon{min-height:0!important}
/* 3. products white-on-white: no squares (remove border/shadow/elevation) */
html body .product-grid .card{background:#ffffff!important;background-image:none!important;border:0!important;box-shadow:none!important;border-radius:0!important}
html body .product-grid .card:hover{transform:none!important;box-shadow:none!important;border:0!important}
html body .product-grid .card__photo{background:#ffffff!important;background-image:none!important}
/* keep the bestsellers section white so cards are white-on-white */
html body #shop.band--light{background:#ffffff!important}
/* 4. DNA molecular image clearly visible on the #standards band */
html body #standards.band--dark::before{opacity:.34!important}

/* ===== Mobile hero crop: show vials + mountains, drop the baked logo text =====
   The hero image fits to height on portrait, so the centered baked logo always
   shows. The vial sits on the right, so shift the crop right to drop the logo. */
@media(max-width:720px){
  html body .hero--video .lab__hero-img img{object-position:86% center!important}
  html body .hero--video .lab__video-scrim{background:linear-gradient(180deg,rgba(6,9,15,.90) 0%,rgba(6,9,15,.72) 36%,rgba(6,9,15,.50) 72%,rgba(6,9,15,.40) 100%)!important}
}

/* Mobile hero: near-opaque top scrim hides the baked logo behind the headline;
   fades to reveal vial + mountains lower down */
@media(max-width:720px){
  html body .hero--video .lab__video-scrim{background:linear-gradient(180deg,rgba(6,9,15,.98) 0%,rgba(6,9,15,.93) 26%,rgba(6,9,15,.55) 56%,rgba(6,9,15,.34) 100%)!important}
}

/* Desktop hero: drop the crop lower on the vial so its logo shows */
@media(min-width:721px){
  html body .hero--video .lab__hero-img img{object-position:center 82%!important}
}

/* ============================================================
   Blog rework: dark + readable, no open white space
   ============================================================ */
html body section.blog-band{background:#0a0e16!important}
html body .blog-band__count,html body .blog-band__count b{color:#cfe0ff!important}
/* article cards -> dark, light text (override inline #fff body) */
html body .j-card__body{background:#11192a!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:0!important;transition:border-color .2s ease,transform .2s ease!important}
html body .j-card:hover .j-card__body{border-color:rgba(192,57,43,.45)!important;transform:translateY(-3px)!important}
html body .j-card__title,html body .j-card h2,html body .j-card h3{color:#eef3fb!important}
html body .j-card p{color:rgba(255,255,255,.74)!important}
html body .j-card__cat{color:#ec9a8f!important}
html body .j-card__meta,html body .j-card__meta span{color:rgba(255,255,255,.5)!important;border-top-color:rgba(255,255,255,.08)!important}
/* featured card (first, dark) title + copy readable */
html body .journal-grid > a:first-child .j-card__title,html body .journal-grid > a:first-child p{color:#eef3fb!important}
html body .journal-grid > a:first-child p{color:rgba(255,255,255,.8)!important}

/* blog cards: the real surface is .j-card (was #f5f5f5) ? darken it */
html body .journal-grid .j-card{background:#11192a!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:0!important;overflow:hidden!important}
html body .journal-grid .j-card .j-card__body{background:transparent!important;border:0!important}
html body .journal-grid .j-card .j-card__title,html body .journal-grid .j-card h2,html body .journal-grid .j-card h3{color:#eef3fb!important}
html body .journal-grid .j-card p{color:rgba(255,255,255,.76)!important}
html body .journal-grid .j-card .j-card__cat{color:#ec9a8f!important}

/* DNA video on Janoshik lab-band: video behind, scrim, content above + readable */
html body section.lab-band{position:relative!important}
html body section.lab-band .lab-band__media{opacity:0!important}
html body section.lab-band video.dna-vid{z-index:0!important}
html body section.lab-band::after{content:"";position:absolute!important;inset:0!important;z-index:1!important;background:linear-gradient(90deg,rgba(6,9,15,.82) 0%,rgba(6,9,15,.55) 45%,rgba(6,9,15,.35) 100%)!important;pointer-events:none}
html body section.lab-band .lab-band__inner{position:relative!important;z-index:2!important}
/* page-hero videos: ensure content + shade stay above the video */
html body .page-hero--media video.dna-vid{z-index:0!important}
html body .page-hero--media .page-hero__bg-shade{z-index:1!important}
html body .page-hero--media .page-hero__inner{position:relative!important;z-index:2!important}

/* DNA video must be an absolute background (a rule forced it to relative -> flow) */
html body video.dna-vid{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;z-index:0!important}

/* Full uncropped brand image band (no text over it) */
html body section.brand-band{background:#06090f!important;display:block!important;line-height:0!important;padding:0!important}
html body section.brand-band img{width:100%!important;height:auto!important;display:block!important;max-width:100%!important}


/* === 2026-06 dark + floating unification (matches new app #05070d) === */
:root{--pnx-bg:#05070d!important;--pnx-bg2:#0a0f1a!important;}
html,body{background:#05070d!important}
html body .nav,html body header.nav{background:rgba(8,11,18,.82)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;border-bottom:1px solid rgba(255,255,255,.07)!important}
html body footer.footer-sitemap{background:#070b12!important}

/* blog/journal cards -> dark, floating, glow on hover, NO white anywhere */
html body .j-card,html body .journal-grid .j-card,html body .journal-grid a .j-card{background:#0a0f1a!important;border:0!important;border-radius:0!important;overflow:hidden!important;box-shadow:0 18px 44px -18px rgba(0,0,0,.75)!important;transition:transform .25s ease,box-shadow .25s ease!important}
html body .j-card .j-card__body{background:transparent!important;border:0!important}
html body .j-card:hover{transform:translateY(-5px)!important;box-shadow:0 44px 90px -30px rgba(47,111,237,.40)!important}
html body .j-card:hover .j-card__body{border:0!important;transform:none!important;background:transparent!important}
html body .j-card__cover{background:#070b12!important}
/* generic content cards that may default to a light surface */
html body .lab-card,html body .review-card,html body .why-card,html body .fbw-card{background:#0a0f1a!important;border:1px solid rgba(255,255,255,.06)!important;box-shadow:0 18px 44px -18px rgba(0,0,0,.7)!important}

/* ===== 2026-06-20 interaction-audit fixes ===== */
/* WCAG 2.5.5 — 44px touch targets on coarse pointers */
@media (hover:none) and (pointer:coarse){
  .iconbtn,.cart-close,[data-cart-close],.qty-row button,.cart-qty button,.qty__btn,.pn-cookie__btn{min-width:44px!important;min-height:44px!important}
}
/* Search panel above the cart drawer for the rare both-open case, without
   raising the separate .search-overlay (which would cover the panel input). */
.search-drawer{z-index:200!important}

/* Cart drawer dark — high specificity + last-loaded to beat the legacy white */
html body .cart-drawer,html body .cart-drawer.is-open{background:#0d0d0d!important;color:#f4f6fb!important;border-left:1px solid #262626!important}
html body .cart-drawer__head,html body .cart-drawer__foot{background:#0d0d0d!important;border-color:#262626!important}
html body .cart-drawer h2,html body .cart-drawer h3,html body .cart-drawer .eyebrow,html body .cart-empty,html body .cart-foot-row,html body .cart-shipbar__txt,html body .cart-view,html body .cart-continue,html body .cart-drawer .tabular,html body .cart-drawer b,html body .cart-drawer span,html body .cart-drawer p{color:#f4f6fb!important}
html body .cart-drawer .promo__input,html body .cart-drawer input{background:#05070d!important;color:#fff!important;border:1px solid #3c3c3c!important}
html body .cart-drawer .btn--ghost-light{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.28)!important}
html body .cart-shipbar__track{background:#1a2233!important}
html body .cart-drawer img,html body .cart-item__thumb{background:#000!important}
html body .cart-freevial,html body .cart-upsell{background:#0a0f1a!important;border:1px solid #262626!important}
html body .cart-drawer__body,html body .cart-shipbar,html body .cart-empty,html body .cart-upsell,html body .cart-line,html body .cart-items{background:#0d0d0d!important}
html body .cart-empty,html body .cart-empty *{color:#9aa4b6!important}
html body .cart-empty svg{stroke:#5a6172!important;color:#5a6172!important}
html body .cart-empty .btn,html body .cart-empty .btn--ghost-light{color:#fff!important;border:1px solid rgba(255,255,255,.28)!important}
html body .cart-shipbar__txt{color:#f4f6fb!important}

/* ===== 2026-06-20 blog white-bars + canvas fix ===== */
/* The bare <main> resolved var(--canvas) to white -> white bars between dark
   sections. Force the dark canvas everywhere and kill the white main. */
:root{--canvas:#05070d!important;--surface-soft:#0a0f1a!important;--surface-card:#0a0f1a!important;--surface-strong:#11182a!important;--surface-elevated:#11182a!important;--surface:#0a0f1a!important;--hairline:rgba(255,255,255,.08)!important;--hairline-strong:rgba(255,255,255,.16)!important}
/* content cards (info/landing pages) — multi-class to beat hardcoded white .card rules */
html body .card.card.card,html body a.card.card,html body .product-card.product-card{background:#0a0f1a!important;border:1px solid rgba(255,255,255,.08)!important;color:#e8edf6!important}
html body .card.card .card__photo{background:#000!important}
html body main,html body #main,html body .article-wrap,html body article.section-light{background:#05070d!important}
/* article content "floats" on the dark canvas with a subtle liquid-glass panel */
html body .article-wrap > *{background:transparent!important}

/* ===== 2026-06-20 dark-theme remaining light panels (calc / track-order / lab-results) ===== */
html body .calc__result,html body .calc__notes,html body .calc__disclaimer,
html body .lsw-panel,html body .track-contact__card,
html body .lab-list,html body .lab-list--placeholder{
  background:#0a0f1a!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:0!important}
html body .calc__result,html body .calc__result *,
html body .calc__notes,html body .calc__notes *,
html body .lsw-panel,html body .lsw-panel *,
html body .track-contact__card,html body .track-contact__card *,
html body .lab-list,html body .lab-list *,html body .lab-list--placeholder,html body .lab-list--placeholder *{color:#e8edf6!important}
html body .calc__disclaimer,html body .calc__disclaimer *{color:#9aa4b6!important}
html body .calc__result input,html body .lsw-panel input{background:#05070d!important;color:#fff!important;border:1px solid #3c3c3c!important}
/* calculator option chips: dark base, accent when active (were light pills) */
html body .calc__chip{background:#0a0f1a!important;color:#e8edf6!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:0!important}
html body .calc__chip:hover{background:#121826!important}
html body .calc__chip.is-active,html body .calc__chip.is-selected,html body .calc__chip[aria-pressed="true"],html body .calc__chip.active{background:#1151ff!important;color:#fff!important;border-color:#1151ff!important}

/* ===== 2026-06-20 site-wide content components dark (every page proper styling) ===== */
/* page headers / hero bands on info pages */
html body .page-head,html body .page-header{background:#05070d!important}
/* generic cards on landing/content pages */
html body .card,html body a.card{background:#0a0f1a!important;color:#e8edf6!important;border:1px solid rgba(255,255,255,.08)!important}
html body .card h1,html body .card h2,html body .card h3,html body .card h4,html body .card p,html body .card span,html body .card a,html body .card li,html body .card div{color:#e8edf6!important}
html body .card__cat,html body .card__meta,html body .card__price small,html body .card small{color:#9aa4b6!important}
html body .card__photo,html body .card__photo picture,html body .card__photo img,html body .card img,html body .card picture{background:#000!important}
/* article tables / code / quotes (blog posts) */
html body main table,html body article table,html body .table-scroll,html body .table-scroll table,html body section table{background:#0a0f1a!important;border-color:rgba(255,255,255,.10)!important}
html body main table th,html body article table th,html body .table-scroll th,html body .table-scroll table th,html body table thead th,html body section table th{background:#11182a!important;color:#e8edf6!important;border-color:rgba(255,255,255,.12)!important}
html body main table td,html body article table td,html body .table-scroll td,html body .table-scroll table td,html body section table td{background:transparent!important;color:#d7dce6!important;border-color:rgba(255,255,255,.08)!important}
html body pre,html body article pre{background:#0a0f1a!important;color:#e8edf6!important;border:1px solid rgba(255,255,255,.08)!important}
html body :not(pre) > code{background:#11182a!important;color:#e8edf6!important;border:1px solid rgba(255,255,255,.08)!important;padding:1px 5px!important}
html body blockquote{background:#0a0f1a!important;border-left:3px solid #1151ff!important;color:#cdd4e0!important}

/* ===== 2026-06-21 perf + audit fixes ===== */
:root{color-scheme:dark}
/* cookie decline button: readable on dark (was #9a9a9a muted ~4:1) */
html body .pn-cookie__btn--ghost{color:#cdd4e0!important}
html body .pn-cookie__btn--ghost:hover{color:#fff!important;border-color:#fff!important}
/* blog CTAs use legacy .btn-blue (single hyphen) -> brand-blue fill, not ghost outline */
html body a.btn-blue,html body .btn-blue,html body a.btn.btn-blue{background:#1151ff!important;color:#fff!important;border:0!important;padding:14px 28px!important;text-decoration:none!important;font-weight:600!important}
html body a.btn-blue:hover,html body .btn-blue:hover{background:#0a3fd0!important;color:#fff!important;opacity:1!important}