/* Site-wide polish.
   Tasteful micro-interactions and hover states. Nothing flashy, nothing
   that distracts from reading or buying. Every animation:
   - Respects prefers-reduced-motion
   - Stays under 300ms duration
   - Uses GPU-friendly transforms (translate, scale) not layout-shifting props
*/

/* Footer payment marks — ghost dark. Grayscale + brightness reduction so the
   brand colors (Interac yellow, Bitcoin orange, etc.) blend with the dark
   footer instead of fighting it. */
.footer-sitemap__pay-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.footer-sitemap__pay-mark img {
  height: 28px;
  width: auto;
  display: block;
  filter: grayscale(1) brightness(1.4) opacity(0.72);
  transition: filter 200ms ease, opacity 200ms ease;
}
.footer-sitemap__pay-mark:hover img {
  filter: grayscale(1) brightness(1.6) opacity(0.95);
}
.footer-sitemap__pay-mark--interac img {
  /* Interac logo is darker — needs more brightness to ghost-match */
  filter: grayscale(1) brightness(1.7) opacity(0.78);
}
.footer-sitemap__pay-mark--btc img,
.footer-sitemap__pay-mark--xmr img,
.footer-sitemap__pay-mark--usdt img {
  height: 26px;
}
.footer-sitemap__pay-via {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-left: 6px;
}

/* PDP dose-selector width fix — content was cutting off ("/ mg)" clipped). */
.dose-select,
select[name="dose"],
.pdp__dose select,
.pdp select,
select.variant-select {
  min-width: 200px;
  padding-right: 32px;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}

/* Wishlist hearts EVERYWHERE — DISABLED. Hide every known variant. */
.card__wish,
.ll-wishlist-btn,
.wish-btn,
.wish-pdp,
button.card__wish,
button.wish-btn,
button.wish-pdp,
[class*="wish-btn"],
[class*="card__wish"],
button[aria-label="Save to wishlist"],
button[aria-label="Add to wishlist"],
button[aria-label="Remove from wishlist"],
button[aria-label*="wishlist" i] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Broken "+ $X" quick-add overlay (.card__quickadd) — auto-injected by
   comprehension-pack.js but click handler unreliable + duplicates the
   .card__quick CTA below the photo. Remove entirely. */
.card__quickadd,
button.card__quickadd,
.card__photo .card__quickadd {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* "Add to cart" button (.card__quick) inline icon + text alignment.
   Lucide injects an <svg> for the plus icon; default svg display=inline
   wraps under text in narrow buttons. Force the icon to size + behave
   like inline-flex content matching the button height. */
.card__quick {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.card__quick i[data-lucide],
.card__quick svg {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 !important;
}

/* Product card photo — vials were being cropped (top + bottom cut off)
   because object-fit was 'cover' with a 1.04× zoom on top. Switch to
   'contain' so the full vial fits cleanly inside the square frame and
   drop the auto-zoom — looks intentional, photo-grade, no clipping. */
.card__photo {
  background: var(--surface-card) !important;
  padding: 14px !important;
}
/* Desktop vial cropping (round 5): the bundle has multiple
   `.card__photo img { transform: scale(1.04..1.06) !important; }` rules
   plus `aspect-ratio:1` on the photo container. The scale push and
   the square aspect ratio together crop portrait vials at top/bottom.
   Use html-body-anchored specificity to outrank the !important rules in
   styles.min.css, and constrain the image to letterboxing inside the
   padded square. */
/* Vial card photo — absolute-position the picture inside a relative-
   position container. This is the reliable pattern for "image fills
   parent with letterboxing" because it sidesteps the
   flex-item-with-percentage-height-against-aspect-ratio-parent edge
   case where height:100% doesn't resolve cleanly.

   Layout:
     .card__photo (relative, aspect-ratio:1, padding:14px)
       picture (absolute, inset:14px, flex centerer)
         img (max 100%, object-fit:contain)
*/
html body .card__photo,
html body .product-grid .card__photo,
html body article.card.kit-card .card__photo {
  position: relative !important;
  overflow: hidden !important;
}
html body .card__photo picture,
html body .product-grid .card__photo picture {
  position: absolute !important;
  inset: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
}
html body .card__photo img,
html body .product-grid .card__photo img,
html body article.card.kit-card .card__photo img,
html body .stacks-grid__photo img,
html body .card__photo picture img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  display: block !important;
}
/* Kill the hover-scale too on desktop (already off on mobile) */
html body .card:hover .card__photo img,
html body .card:hover .card__photo picture img,
html body a.card:hover img {
  transform: none !important;
}

/* Blog article-wrap layout override (round 2): on desktop the bundle's
   styles.min.css applies `display: grid; grid-template-columns: ...` to
   .section-head which puts the eyebrow + lede in a narrow LEFT column
   and the h1 on the RIGHT. The blog post layout breaks completely.
   Force a clean single-column block layout for any .section-head INSIDE
   an .article-wrap. */
html body .article-wrap,
html body section.article-wrap,
html body article.article-wrap {
  display: block !important;
  grid-template-columns: none !important;
}
html body .article-wrap .section-head,
html body .article-wrap > .container > .section-head,
html body .article-wrap .container .section-head {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  max-width: 720px !important;
  margin: 0 auto 32px !important;
  padding: 0 clamp(20px, 4vw, 40px) !important;
  text-align: left !important;
}
html body .article-wrap .section-eyebrow,
html body .article-wrap .section-head .section-eyebrow {
  display: inline-block !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  max-width: none !important;
  word-break: normal !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: var(--blue, #1c69d4) !important;
  margin: 0 0 14px !important;
}
html body .article-wrap .section-title,
html body .article-wrap h1.section-title,
html body .article-wrap .section-head h1 {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  font-family: var(--font, "Pure North Sans", Helvetica, Arial, sans-serif) !important;
  font-weight: 300 !important;
  font-size: clamp(28px, 4.4vw, 44px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 20px !important;
  color: var(--ink, #262626) !important;
  text-align: left !important;
}
html body .article-wrap .section-lede,
html body .article-wrap .section-head .section-lede {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: 640px !important;
  font-size: 19px !important;
  line-height: 1.55 !important;
  color: var(--body, #3c3c3c) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  text-align: left !important;
}

/* Discount-applied row was rendering with display:flex even when the
   HTML `hidden` attribute was set on it, because the styles.min.css rule
   `.disc-applied{display:flex;...}` overrides the UA-stylesheet
   `[hidden]{display:none}`. Result: an empty "Remove" button visible at
   the top of every checkout, suggesting (falsely) that a promo was
   applied. Force [hidden] to win. */
.disc-applied[hidden],
[data-disc-applied][hidden] {
  display: none !important;
}

/* Hero darkening overlay — full opacity at the BOTTOM (where light
   pixels of the molecule background were showing through as a visible
   "grey band" against the white content section below) and lighter
   opacity through the middle where the headline copy sits, so the
   molecule pattern still peeks through behind the type but the seam
   into the next section is uniformly dark. The "grey bar under the
   hero on subpages" the user kept reporting was the molecule image's
   light pixels visible through the 0.88 uniform overlay near the
   hero's bottom edge. */
html body .page-hero--media .page-hero__bg-shade {
  background: linear-gradient(180deg,
    rgba(16, 20, 26, 0.78) 0%,
    rgba(16, 20, 26, 0.78) 55%,
    rgba(16, 20, 26, 1) 100%) !important;
}
/* Also nudge the hero's bg color toward pure black at the bottom so
   even if the gradient feathered, the seam is invisible. */
html body .page-hero--media {
  background-color: rgb(16, 20, 26) !important;
}
/* And kill the faint white border-bottom on the hero (rgba(255,255,255,0.05))
   that was contributing a 1-pixel light highlight at the seam. */
html body .page-hero,
html body .page-hero--media {
  border-bottom: 0 !important;
}
/* Center-align the hero content (eyebrow + h1 + lede) horizontally so
   the dark hero band looks symmetric instead of left-loaded. Some
   subpages (e.g. /why-purenorth/) use <section class="band band--dark">
   as the hero rather than .page-hero--media — handle both. */
html body .page-hero--media .page-hero__inner,
html body main > section.band--dark:first-of-type > .container,
html body main > section.band--dark.cta + .container {
  align-items: center !important;
  text-align: center !important;
  max-width: 880px !important;
  margin: 0 auto !important;
}
html body main > section.band--dark:first-of-type {
  text-align: center !important;
}
html body main > section.band--dark:first-of-type h1,
html body main > section.band--dark:first-of-type .display-lg,
html body main > section.band--dark:first-of-type .display-md,
html body main > section.band--dark:first-of-type p,
html body main > section.band--dark:first-of-type .lede,
html body main > section.band--dark:first-of-type .eyebrow,
html body main > section.band--dark:first-of-type .eyebrow.on-dark {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
}
html body main > section.band--dark:first-of-type h1,
html body main > section.band--dark:first-of-type .display-lg,
html body main > section.band--dark:first-of-type .display-md {
  max-width: 880px !important;
}
html body main > section.band--dark:first-of-type p,
html body main > section.band--dark:first-of-type .lede {
  max-width: 720px !important;
}
html body .page-hero--media .page-hero__inner h1,
html body .page-hero--media .page-hero__inner .display-lg,
html body .page-hero--media .page-hero__inner p,
html body .page-hero--media .page-hero__inner .eyebrow,
html body .page-hero--media .page-hero__inner .eyebrow.on-dark {
  text-align: center !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body .page-hero--media .page-hero__inner .hero__mstripe {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Blog breadcrumb bar — many blog posts use <nav class="breadcrumb-bar">
   (singular hyphenated) but the original stylesheet only targets
   .breadcrumbs (plural). Without a matching rule the breadcrumb renders
   as inline text on white background with no visual delineation, which
   was the reason the "blog has no styling" complaint kept coming back —
   the rest of the article IS styled, but the breadcrumb above it
   collapses to default-rendered text and makes the whole page look bare.
   Mirror the .breadcrumbs design so both class names render identically. */
nav.breadcrumb-bar,
html body nav.breadcrumb-bar {
  background: #262e38;
  color: rgba(255, 255, 255, 0.78);
  padding: 12px var(--pad-x, clamp(20px, 4vw, 60px));
  font-size: 12.5px;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
nav.breadcrumb-bar a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: color 160ms ease;
}
nav.breadcrumb-bar a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
nav.breadcrumb-bar .crumb-sep,
nav.breadcrumb-bar span {
  color: rgba(255, 255, 255, 0.55);
}
nav.breadcrumb-bar .crumb-current,
nav.breadcrumb-bar [aria-current="page"] {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 500;
}
@media (max-width: 640px) {
  nav.breadcrumb-bar {
    font-size: 11.5px;
    padding: 10px 18px;
    gap: 6px;
  }
}

/* MOBILE — center ALL section headers + eyebrows + leads so the page
   reads as uniformly centered, matching the centered hero. Without
   this, the hero is centered but the rest of the page is left-aligned,
   which looks misaligned at narrow viewports. */
@media (max-width: 640px) {
  html body .section-head,
  html body .page-head,
  html body .blog-band__head,
  html body section header,
  html body .by-numbers__head,
  html body .lab-band__head {
    text-align: center !important;
    align-items: center !important;
  }
  html body .section-head > *,
  html body .page-head > *,
  html body .section-eyebrow,
  html body .eyebrow,
  html body .section-title,
  html body .section-lede,
  html body .display-lg,
  html body .display-md,
  html body .lab-band__eyebrow,
  html body .lab-band__headline,
  html body .lab-band__lead,
  html body .by-numbers__num,
  html body .by-numbers small {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Restore the 4px gap between the big number and its inline unit
     suffix (e.g. "2.1 days", "< 0.05 EU/mg", "≥ 99 %"). The wider rule
     above sets margin-left:auto on every .by-numbers small, which on
     inline <small> elements collapses to 0 and visually fuses the unit
     to the number. Re-narrow the rule for *inline* units only. */
  html body .by-numbers__num small {
    margin-left: 4px !important;
  }
  /* CTA buttons that sit under headings — center them */
  html body .section-head .btn,
  html body .section-head .btn--blue {
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex !important;
  }
  /* Product card body — center the name + meta + price too, since
     they're inside a narrow card and look better centered. */
  html body .product-grid .card__body {
    text-align: center !important;
  }
  html body .product-grid .card__cat,
  html body .product-grid .card__name,
  html body .product-grid .card__meta,
  html body .product-grid .card__row {
    text-align: center !important;
    justify-content: center !important;
  }
  /* Trim the vertical air inside product cards on mobile so they're
     more compact and the catalog browses faster. */
  html body .product-grid .card__body {
    padding-top: 12px !important;
    padding-bottom: 14px !important;
    gap: 6px !important;
  }
}

/* MOBILE PAGE PADDING — uniform horizontal padding for all content
   sections on small viewports so nothing looks left- or right-loaded.
   Removes inconsistent inner padding from .disc-row, normalizes the
   form column to share the same offset as the discount and trust
   badges, and bumps the .container/.band padding for breathing room. */
@media (max-width: 640px) {
  /* Outer container: one source of truth for left/right indent */
  html body .band--light > .container,
  html body section.band > .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }
  /* Discount-code row was 24px inner padding — wider indent than form
     fields below. Strip that extra padding so the input edge-aligns
     with the form. */
  html body .disc-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Form, columns, fields: no inner padding — they inherit container indent. */
  html body .checkout-form,
  html body .checkout-col,
  html body .checkout-grid,
  html body .field {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Trust badges row (.checkout-trust) — keep its inner padding modest */
  html body .checkout-trust {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* Section-head and similar — also share container padding */
  html body .page-head,
  html body .section-head {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* H2/h3 title-md should be flush with the container indent, not extra */
  html body h2.title-md {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Sticky checkout summary on mobile — the right-column "Order summary"
   gets cut off below the fold on phones; users can't see their total or
   the Checkout CTA without scrolling all the way down past every line
   item. Pin a slim summary bar to the bottom so subtotal/discount/total/
   CTA are always visible. */
@media (max-width: 900px) {
  body.has-checkout-stick .checkout-stick-bar {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    background: var(--surface-card, #1a1a1a);
    border-top: 1px solid var(--hairline, #3c3c3c);
    box-shadow: 0 -10px 24px -10px rgba(0, 0, 0, 0.55);
    padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 10px);
    z-index: 70;
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-size: 13px;
  }
  body.has-checkout-stick .checkout-stick-bar__totals {
    flex: 1 1 auto;
    line-height: 1.25;
  }
  body.has-checkout-stick .checkout-stick-bar__total {
    font-weight: 800;
    font-size: 16px;
    color: var(--ink, #262626);
  }
  body.has-checkout-stick .checkout-stick-bar__sub {
    font-size: 11px;
    color: var(--muted, #757575);
  }
  body.has-checkout-stick .checkout-stick-bar__cta {
    flex: 0 0 auto;
    background: var(--blue, #1c69d4);
    color: #fff;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
  }
  /* When sticky bar is rendered, reserve bottom padding on body so the
     existing footer Checkout button isn't covered by the new bar. */
  body.has-checkout-stick {
    padding-bottom: 70px !important;
  }
}
@media (min-width: 901px) {
  .checkout-stick-bar { display: none !important; }
}

/* Floating "Talk to an agent" widget. Desktop: stays bottom-LEFT (left
   half is where the layout has more whitespace on wide viewports). Mobile:
   bottom-RIGHT because text wraps full-width and the LEFT edge is where
   most prose starts — having the chat there constantly covers the first
   word of wrapped lines (real problem observed on PDP descriptions). */
.lsw-root {
  left: 20px !important;
  right: auto !important;
}
@media (max-width: 640px) {
  .lsw-root {
    left: auto !important;
    right: 14px !important;
    bottom: 14px !important;
  }
}
/* Checkout is the exception to desktop-left: its form column hugs the
   container's LEFT edge, so the pill sat on top of the Full name field and
   the Interac payment card while scrolling. The right rail below the order
   summary is whitespace — dock there. (checkout-stick.js adds the body
   class on /checkout/ at every viewport; the bar itself is mobile-only.) */
@media (min-width: 641px) {
  body.has-checkout-stick .lsw-root,
  /* Catalog has a left filter sidebar (.cat-side) hugging the left edge; the
     default bottom-left pill sat on top of the bottom category filter links
     (e.g. "Metabolic"). The product grid's lower-right is whitespace — dock
     the pill there on the catalog page (desktop only; mobile is already
     bottom-right and the sidebar is collapsed). */
  body.catalog-page .lsw-root {
    left: auto !important;
    right: 20px !important;
  }
  body.has-checkout-stick .lsw-root .lsw-panel,
  body.catalog-page .lsw-root .lsw-panel {
    left: auto;
    right: 0;
  }
}
/* Lift the support widget above any bottom-fixed bar (checkout summary on
   mobile checkout, sticky add-to-cart on mobile PDPs, or the desktop PDP
   sticky buy-rail) so the chat bubble never sits inside the bar. Targets
   both left + right positioning. The desktop .buy-rail is full-width and
   ~73px tall; its price label hugs the left edge exactly where the pill
   docks, so without this lift the pill covers the "$xx CAD" price. */
body.has-checkout-stick .lsw-root,
body:has(.purenorth-mobile-cta.is-active) .lsw-root,
body:has(.buy-rail.is-visible) .lsw-root,
body:has(.buy-rail--desktop.is-visible) .lsw-root {
  bottom: 88px !important;
}

/* Cart page: the order summary (Subtotal / Total / Checkout) is the LAST
   block on the page, so on a short mobile viewport its right-aligned
   "$xxx CAD" values sit exactly where the bottom-right floating support
   pill rests — the bubble clipped the Subtotal value ("$270 C…"). Two
   guards: (1) reserve bottom scroll room on the cart container so the
   totals can scroll clear above the pill, and (2) on mobile keep the
   pill tucked into the corner with a small lift so a stationary user can
   still read the full total. */
@media (max-width: 640px) {
  [data-cart-page] { padding-bottom: 96px; }
  body:has([data-cart-page]) .lsw-root { bottom: 92px !important; }
}

/* Product photo zoom/magnifier removed (2026-06-10). Neutralize the legacy
   .is-zoomed scale rule so even a stale service-worker-cached bundle that
   still toggles the class can't magnify the image. */
.pdp__media img.is-zoomed { transform: none !important; cursor: default !important; }
.pdp__media img { cursor: default !important; }

/* Inline checkout validation (checkout-validate.js). Error text sits under
   the field it belongs to; 4.5:1 on white; border flags the input itself
   so colour isn't the only signal. */
.field-error {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #b3261e;
}
label.field--invalid input,
label.field--invalid select {
  border-color: #b3261e !important;
}

/* Checkout trust strip — shield + other icons were being clipped at top
   because some parent had no explicit height + the SVGs inherited a
   smaller size from flex alignment. Lock to 20px square + display:block
   so each glyph always renders full-frame. */
.checkout-trust__cell svg,
.checkout-trust svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  display: block !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}
.checkout-trust__cell {
  align-items: center !important;
  min-height: 28px !important;
}

/* Variant cell — multiple historical clips around the trailing "g" / "G"
   in unit labels (e.g. "60 MG", "1000 MG"). Root causes:
     1. text-transform:uppercase + 1.4px letter-spacing makes "MG" wider
        than the cell calculates for.
     2. Cell parent .variant-table grid columns shrink on narrow viewports.
     3. Some ancestor in the section chain has overflow:hidden.
   Fix: drop the uppercase + heavy letter-spacing on the unit row, keep
   font weight, ensure cell + parents never clip. */
.variant-cell {
  padding: 14px 14px 16px !important;
  overflow: visible !important;
}
.variant-table { overflow: visible !important; }
.variant-cell__per-mg,
.variant-cell__size,
.variant-cell__price {
  line-height: 1.4 !important;
  padding-bottom: 2px !important;
  overflow: visible !important;
  white-space: nowrap;
}
.variant-cell__size {
  text-transform: none !important;
  letter-spacing: 0.2px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
@media (max-width: 480px) {
  .variant-cell { padding: 10px 8px 12px !important; }
  .variant-cell__size { font-size: 12px !important; }
  .variant-cell__price { font-size: 16px !important; }
  .variant-cell__per-mg { font-size: 10px !important; letter-spacing: 0 !important; }
}

/* PDP price row — flex was collapsing on mobile when stock text was long,
   pushing the price visually off-screen on certain PDPs (CJC reported by
   user 2026-05-25). Allow wrap so the price always renders. */
.pdp__price-row {
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.pdp__price-row > * {
  min-width: 0 !important;
}
.pdp__price[data-price] {
  display: inline-block !important;
  min-width: 80px !important;
}
@media (max-width: 640px) {
  .pdp__price-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .pdp__price {
    font-size: 32px !important;
  }
}

/* Cart drawer "Researchers also bought" upsell — re-enabled 2026-06-09 per
   owner, COMPACT. (Hidden 2026-05-23 because it buried cart items + Remove
   buttons.) Compromise: a tight max-2-row block that always sits BELOW every
   cart line — the drawer body scrolls independently, so items stay fully
   visible while the cart still suggests the next purchase. */
.cart-upsell {
  border-top: 1px solid var(--hairline) !important;
  padding: 10px 24px 2px !important;
}
.cart-upsell__label {
  font-size: 10px !important;
  margin-bottom: 6px !important;
}
.cart-upsell__items { gap: 4px !important; }
.cart-upsell__item {
  grid-template-columns: 34px 1fr auto !important;
  gap: 10px !important;
  padding: 4px 0 !important;
}
.cart-upsell__item img { width: 34px !important; height: 34px !important; }
.cart-upsell__item__name { font-size: 12px !important; }
.cart-upsell__item__meta { font-size: 10px !important; }
.cart-upsell__item__add { padding: 6px 10px !important; font-size: 10px !important; }

/* Catalog toolbar overflow on phones: the inline grid (input | sort | Filters)
   is wider than the viewport at ~375px, pushing the sort <select> past the
   right edge. Stack: search input on its own row, sort + Filters share row 2. */
@media (max-width: 560px) {
  .cat-filter > div:first-child { grid-template-columns: 1fr auto !important; }
  .cat-filter [data-cat-q] { grid-column: 1 / -1 !important; }
  .cat-filter [data-cat-sort] { max-width: 100% !important; min-width: 0 !important; }
}

/* Footer legal links were ~12px-tall tap targets on mobile. */
@media (max-width: 600px) {
  .footer-sitemap__bottom a {
    display: inline-block;
    padding: 8px 6px;
  }
}

/* Drawer footer: keep everything above the fold. Checkout spans the full
   width; "View cart" and "Continue shopping" share one row, which keeps the
   foot short enough that nothing clips off-screen on phones. */
.cart-drawer__foot {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px 8px !important;
}
.cart-drawer__foot .cart-foot-row,
.cart-drawer__foot .cart-checkout { grid-column: 1 / -1 !important; }
.cart-drawer__foot .cart-view { margin: 0 !important; }
.cart-drawer__foot .cart-continue { margin: 0 !important; padding: 12px 6px !important; }
/* Short screens: let the items area shrink a little further so the foot
   (with both rows) always fits. Body still scrolls for big carts. */
@media (max-height: 900px) {
  /* Higher specificity than the `.cart-drawer__body{min-height:200px}` rule
     further down — same !important, so source order would otherwise win. */
  .cart-drawer .cart-drawer__body { min-height: 140px !important; }
  .cart-drawer .cart-drawer__foot { padding: 12px 24px 8px !important; gap: 8px !important; }
}

/* Mobile audit 2026-06-09: grid/flex children default to min-width:auto, so
   their min-content width (long unwrappable lines like the SKU/formula row or
   trust badges) forced the checkout form column to ~362px and the PDP info
   column past the right edge on 360–390px phones — content was clipped at the
   screen edge. min-width:0 lets the columns actually shrink to the container;
   inner text then wraps normally. Verified in-browser before shipping. */
@media (max-width: 900px) {
  .checkout-grid > * { min-width: 0 !important; }
  .pdp__info, .pdp__media { min-width: 0 !important; }
}
/* Body fills all remaining drawer space (between shipbar + promo/footer)
   and scrolls independently so every cart item is reachable. */
.cart-drawer__body {
  flex: 1 1 auto !important;
  min-height: 200px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: no-preference) {

/* ---------------------------------------------------------------------
   1. CARD HOVER LIFT
   Product cards, kit cards, stack cards: small upward translate + soft
   shadow on hover. Photo inside cards subtly zooms.
--------------------------------------------------------------------- */

.card,
.product-grid .card,
.stacks-grid__card,
.stack-related,
.kit-card,
article.card {
  transition:
    transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 200ms ease;
  will-change: transform;
}

.card:hover,
.product-grid .card:hover,
.stacks-grid__card:hover,
.stack-related:hover,
.kit-card:hover,
article.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -16px rgba(28, 105, 212, 0.18),
              0 4px 12px -4px rgba(0, 0, 0, 0.08);
}

/* Photo zoom on card hover — DISABLED. User asked it removed. */
.card:hover .card__photo img,
.stacks-grid__card:hover .stacks-grid__photo img,
.stack-related:hover .stack-related__photo img,
.kit-card:hover .card__photo img,
.product-grid .card:hover img,
a.card:hover img {
  transform: none !important;
}

/* ---------------------------------------------------------------------
   2. BUTTON MICRO-INTERACTIONS
   Subtle scale + shadow on press. Already has a hover color shift from
   the design system; we add the motion layer.
--------------------------------------------------------------------- */

.btn,
.stack-hero__cta,
.sb__cta {
  transition:
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 200ms ease,
    transform 120ms ease;
  will-change: transform;
}

.btn:hover,
.stack-hero__cta:hover,
.sb__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(28, 105, 212, 0.40);
}

.btn:active,
.stack-hero__cta:active,
.sb__cta:active {
  transform: translateY(0);
  transition-duration: 50ms;
}

/* ---------------------------------------------------------------------
   3. NAV LINK UNDERLINE
   Animated underline that slides in/out on hover. The existing nav has
   ::after defined as a placeholder; ensure it animates smoothly.
--------------------------------------------------------------------- */

.nav__links a::after {
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-origin: left center;
}

/* ---------------------------------------------------------------------
   4. PRICE-PILL / STOCK-BADGE PULSE on update
   When the stock badge gets toggled (via [data-stock] mutation), do a
   gentle pulse so users notice the live update.
--------------------------------------------------------------------- */

@keyframes lm-pulse-soft {
  0%   { transform: scale(1);   }
  50%  { transform: scale(1.06);}
  100% { transform: scale(1);   }
}
.stock-badge.is-changed {
  animation: lm-pulse-soft 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------------
   5. COUNT-UP NUMBER ANIMATION
   Elements with [data-count-up="N"] tween from 0 → N when revealed.
   The actual tween logic is in scroll-animations.js; this just hides
   the final number until JS takes over so we don't see the final state
   pop in.
--------------------------------------------------------------------- */

[data-count-up]:not(.is-counted) {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   6. SECTION-EYEBROW (small uppercase label) — subtle fade-in
   Pairs nicely with the bigger reveal of the section heading.
--------------------------------------------------------------------- */

[data-reveal] .eyebrow,
[data-reveal] .section-eyebrow {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease, transform 600ms ease;
  transition-delay: 60ms;
}
[data-reveal].is-revealed .eyebrow,
[data-reveal].is-revealed .section-eyebrow {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------
   7. IMG fade-in on load — replaces the harsh "image popped" look
--------------------------------------------------------------------- */

img.lm-fade-in {
  opacity: 0;
  transition: opacity 400ms ease;
}
img.lm-fade-in.is-loaded {
  opacity: 1;
}

/* ---------------------------------------------------------------------
   8. FORM FIELD FOCUS RING — softer, branded
--------------------------------------------------------------------- */

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 0;
  border-color: var(--blue, #1c69d4);
  box-shadow: 0 0 0 4px rgba(28, 105, 212, 0.16);
}

} /* /prefers-reduced-motion */

/* =============================================================
   MOBILE LAYOUT FIXES (override stale rules in styles.min.css)
   ============================================================= */

/* Catalog product cards: force vertical (photo on top, body below) on
   mobile. The legacy styles.min.css has THREE conflicting horizontal
   grid-template-columns rules at max-width 720 / 600 / 600 that put
   the photo in a 110px column. The photo's 1:1 aspect ratio renders
   it 136px wide, which OVERLAPS the body column and clips category
   text + price on the left edge. Reset to flex-column. */
@media (max-width: 720px) {
  .product-grid > .card,
  .product-grid .card {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    border: 1px solid var(--hairline, #e6e6e6) !important;
    background: var(--canvas, #fff) !important;
    overflow: hidden !important;
  }
  .product-grid .card__photo {
    width: 100% !important;
    /* Vial product photos are PORTRAIT (1632×2620 source).
       Round 4: prior CSS had `height:100%` on the img which combined
       with the inherited `transform:scale(1.04..1.06)` from the desktop
       bundle was pushing the bottom of the vial out of bounds. Fix:
       — Make the photo container an explicit fixed-height flex box.
       — Make `picture` an inner flex centerer with overflow:hidden.
       — Use natural width/height on the img with max-width/max-height
         constraints + object-fit:contain — no forced 100% height that
         interacts badly with the scale transform.
       — Kill `transform:none` and `position:static` on the img to
         neutralize any zoom or absolute-positioning rule inherited
         from styles.min.css. */
    aspect-ratio: auto !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    background: var(--surface-card, #1a1a1a) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .product-grid .card__photo picture {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    transform: none !important;
  }
  .product-grid .card__photo img,
  .product-grid .card__photo picture img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    position: static !important;
    margin: 0 auto !important;
    filter: none !important;
  }
  /* Add to cart quick button: separate from the price row with a hairline
     border + breathing room so the price isn't visually touching the CTA. */
  .product-grid .card__quick {
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--hairline, #e6e6e6) !important;
  }
  .product-grid .card__body {
    padding: 14px 16px 16px !important;
    width: 100% !important;
  }
  .product-grid .card__cat {
    display: block !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
  .product-grid .card__name,
  .product-grid .card__meta,
  .product-grid .card__price,
  .product-grid .card__cta {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
  .product-grid .card__row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* Hero video text contrast: the existing .lab__video-shade uses a
   horizontal left-to-right gradient (dark left, transparent right),
   which works on desktop where the copy is on the left half. On
   mobile the copy fills the whole width, so the right portion has
   no overlay and the white text becomes unreadable over the bright
   lab video. Replace with a vertical uniform dark gradient on mobile. */
@media (max-width: 720px) {
  .hero--lab .lab__video-shade {
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.70) 0%,
        rgba(0,0,0,.55) 50%,
        rgba(0,0,0,.45) 100%
      ) !important;
  }
  /* Also dim the video itself a touch more on mobile for extra headroom. */
  .hero--lab .lab__video {
    opacity: 0.55 !important;
  }
  /* Stronger text shadow on hero copy as a belt-and-suspenders read. */
  .hero--lab .lab__display,
  .hero--lab .lab__lead {
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55), 0 0 28px rgba(0, 0, 0, 0.35) !important;
  }
  /* Stats ribbon: stale CSS sets very low-contrast greys over the video,
     AND the .55 black background lets the bright video pixels bleed through.
     Make ribbon bg nearly solid + bump label/value contrast. */
  .hero--lab .lab__ribbon {
    background: rgba(10, 13, 18, 0.92) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .hero--lab .lab__ribbon__k {
    color: rgba(255, 255, 255, 0.88) !important;
  }
  .hero--lab .lab__ribbon__v,
  .hero--lab .lab__ribbon__v i {
    color: #fff !important;
  }
}

/* Blog post + article-style content lacks horizontal padding on mobile —
   text was flush to the viewport edges, which made the page look
   "unstyled" even though typography + max-width were set correctly.
   .section-inner is the inner-padded container used across blog posts,
   research pages, and other long-form templates. */
.section-inner,
.section .section-inner,
article.section .section-inner {
  padding-left: clamp(20px, 4vw, 60px) !important;
  padding-right: clamp(20px, 4vw, 60px) !important;
  box-sizing: border-box !important;
}
/* Same fix for naked <article> elements that hold blog body text. */
article.section,
article.band {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* "Most ordered<br/>by Canadian researchers." typo fix: the rule
   `section.band--light#shop .section-head br{display:none}` hides
   the <br/> on every viewport, which fuses "ordered" + "by" with no
   space → "Most orderedby Canadian researchers." Re-enable BR on
   mobile so the heading line-breaks naturally. */
@media (max-width: 900px) {
  section.band--light#shop .section-head br,
  html section.band--light#shop .section-head br {
    display: inline !important;
  }
}

/* "Bestseller" pill — added by /assets/js/bestsellers.js to .card__photo
   on homepage cards whose SKU matches a top-3 product from the admin's
   public bestsellers endpoint. Brand-matched: small, hairline-thin, no
   loud red — quiet trust signal, not a discount sticker. */
.card__bestseller-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-block;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
  background: var(--blue, #1c69d4);
  border: 0;
  border-radius: 0;
  pointer-events: none;
  line-height: 1.2;
}
@media (max-width: 720px) {
  .card__bestseller-badge {
    top: 8px;
    left: 8px;
    padding: 3px 7px;
    font-size: 9px;
    letter-spacing: 1.2px;
  }
}

/* ======================================================================
   BLOG ARTICLE TYPOGRAPHY
   ======================================================================
   The blog posts were styled with one-off inline declarations on every
   <p>, <h2>, and <div> — which meant the rules drifted between posts and
   collapsed entirely on mobile (no horizontal padding, Helvetica fallback
   visible, headings stuck to body copy). Replace that ad-hoc styling with
   a single `.article` class set built on the BMW CI2020 dialect:
   Archivo at three weights (300 / 400 / 500), zero corner radius,
   measured vertical rhythm, Pure North Blue links, hairline tables.

   Apply by wrapping the blog post body with `<div class="article">`.
   Existing inline styles continue to render — these rules only fire when
   the wrapper is present, so the rollout is safe.
   ====================================================================== */
.article {
  /* Container: comfortable reading column. Wider than 70 chars hurts
     read speed; narrower than 50 chars hurts rhythm. 720px desktop is
     ~70 characters at the 17px body size. */
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  font-family: var(--font, "Pure North Sans", Helvetica, Arial, system-ui, sans-serif);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  color: var(--ink, #262626);
  /* Tabular numerics — matches the BMW-CI2020 specification convention */
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (max-width: 720px) {
  .article {
    font-size: 16px;
    line-height: 1.65;
    padding: 0 18px;
  }
}

/* Lede / opening paragraph — slightly larger, lighter weight */
.article > p:first-of-type,
.article .article__lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--body, #3c3c3c);
  font-weight: 400;
  margin: 0 0 32px;
}
@media (max-width: 720px) {
  .article > p:first-of-type,
  .article .article__lede {
    font-size: 17px;
    line-height: 1.55;
    margin: 0 0 24px;
  }
}

/* H1 — only one per article, reserved for the article-head section.
   We don't restyle h1 here because the blog template already places it
   in a section-head with its own typography. */

/* H2 — section divider. BMW dialect: light weight (300), UPPERCASE,
   tight letter-spacing, generous breathing room above. */
.article h2 {
  font-family: var(--font, "Pure North Sans", Helvetica, Arial, sans-serif);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink, #262626);
  margin: 56px 0 20px;
  padding: 0;
  border: 0;
}
@media (max-width: 720px) {
  .article h2 {
    font-size: 22px;
    letter-spacing: 0.4px;
    margin: 40px 0 16px;
    line-height: 1.2;
  }
}

/* H3 — subsection / FAQ question. Sentence-case, medium weight. */
.article h3 {
  font-family: var(--font, "Pure North Sans", Helvetica, Arial, sans-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink, #262626);
  margin: 32px 0 10px;
}
@media (max-width: 720px) {
  .article h3 {
    font-size: 16.5px;
    margin: 24px 0 8px;
  }
}

/* Paragraphs */
.article p {
  margin: 0 0 20px;
}
@media (max-width: 720px) {
  .article p {
    margin: 0 0 18px;
  }
}

/* Inline emphasis */
.article strong, .article b {
  font-weight: 600;
  color: var(--ink, #262626);
}
.article em {
  
}

/* Links — Pure North Blue underline, slightly thicker underline on hover */
.article a {
  color: var(--blue, #1c69d4);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 120ms ease;
}
.article a:hover,
.article a:focus-visible {
  text-decoration-thickness: 2px;
}

/* Lists */
.article ul, .article ol {
  margin: 0 0 24px;
  padding-left: 24px;
}
.article li {
  margin: 0 0 10px;
  line-height: 1.65;
}
.article li::marker {
  color: var(--muted, #6b6b6b);
}
@media (max-width: 720px) {
  .article ul, .article ol {
    padding-left: 20px;
    margin: 0 0 20px;
  }
}

/* Tables — hairline borders, tabular numerics, mobile horizontal scroll */
.article .table-scroll {
  margin: 24px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--hairline, #e6e6e6);
}
.article table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.article table th {
  text-align: left;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1.2px;
  font-weight: 600;
  color: var(--muted, #9a9a9a);
  padding: 14px 12px;
  background: var(--surface-soft, #0d0d0d);
  border-bottom: 1px solid var(--hairline, #3c3c3c);
}
.article table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--hairline, #e6e6e6);
  vertical-align: top;
}
.article table tr:last-child td {
  border-bottom: 0;
}
@media (max-width: 720px) {
  .article table { font-size: 13px; }
  .article table th, .article table td { padding: 10px 10px; }
}

/* FAQ list — visually grouped, each item a hairline card */
.article .faq-list {
  margin: 16px 0 32px;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline, #e6e6e6);
}
.article .faq-list .faq-item {
  border-bottom: 1px solid var(--hairline, #e6e6e6);
  padding: 18px 0;
}
.article .faq-list .faq-item h3 {
  margin: 0 0 6px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink, #262626);
  letter-spacing: -0.005em;
}
.article .faq-list .faq-item p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--body, #3c3c3c);
}
@media (max-width: 720px) {
  .article .faq-list .faq-item {
    padding: 14px 0;
  }
  .article .faq-list .faq-item h3 {
    font-size: 15.5px;
  }
  .article .faq-list .faq-item p {
    font-size: 14.5px;
  }
}

/* Blockquote / pull-quote */
.article blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--blue, #1c69d4);
  font-style: normal;
  font-size: 18px;
  line-height: 1.5;
  color: var(--body, #3c3c3c);
}

/* Inline code + pre */
.article code {
  font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9em;
  background: #f4f5f7;
  padding: 1px 6px;
  color: var(--ink, #262626);
}
.article pre {
  background: var(--surface-soft, #0d0d0d);
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
  margin: 16px 0 24px;
  border-left: 3px solid var(--hairline, #e6e6e6);
}
.article pre code {
  background: transparent;
  padding: 0;
}

/* Horizontal rule — hairline separator */
.article hr {
  border: 0;
  border-top: 1px solid var(--hairline, #e6e6e6);
  margin: 48px 0;
}

/* "Continue reading" footer block */
.article .article__footer {
  margin: 56px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--hairline, #e6e6e6);
}
.article .article__footer .section-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--blue, #1c69d4);
}

/* Article-head section (eyebrow + h1 + lede) — apply to .section-head
   inside an .article-wrap so existing blog template stays working. */
.article-wrap {
  padding: 64px 0 80px;
}
.article-wrap .section-head {
  max-width: 720px;
  margin: 0 auto 32px;
  padding: 0 clamp(20px, 4vw, 40px);
}
.article-wrap .section-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--blue, #1c69d4);
  margin: 0 0 14px;
}
.article-wrap .section-title {
  font-family: var(--font, "Pure North Sans", Helvetica, Arial, sans-serif);
  font-weight: 300;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  color: var(--ink, #262626);
}
.article-wrap .section-lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--body, #3c3c3c);
  margin: 0;
  font-weight: 400;
  max-width: 640px;
}
@media (max-width: 720px) {
  .article-wrap {
    padding: 40px 0 56px;
  }
  .article-wrap .section-head {
    padding: 0 18px;
    margin: 0 auto 24px;
  }
  .article-wrap .section-eyebrow {
    font-size: 10.5px;
    letter-spacing: 1.4px;
    margin: 0 0 12px;
  }
  .article-wrap .section-title {
    font-size: 26px;
    line-height: 1.18;
  }
  .article-wrap .section-lede {
    font-size: 16.5px;
  }
}

/* ======================================================================
   MOBILE FOOTER ACCORDION
   ======================================================================
   The footer has 4 columns × 5-11 links each = 30+ links stacked
   vertically on mobile. That's a wall. Convert each column into a
   tap-toggle accordion on mobile (<=640px): heading visible, list
   hidden until tapped. JS handler in /assets/js/footer-accordion.js
   adds the .is-open class on tap.
   ====================================================================== */
@media (max-width: 640px) {
  .footer-sitemap {
    padding: 28px 18px 18px !important;
  }
  .footer-sitemap__inner {
    display: block !important;
    gap: 0 !important;
  }
  .footer-sitemap__col {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin: 0;
    padding: 0;
  }
  .footer-sitemap__col h3,
  .footer-sitemap__col h4 {
    margin: 0 !important;
    padding: 18px 0 !important;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px !important;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #fff;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  /* Chevron — pure CSS, no extra markup */
  .footer-sitemap__col h3::after,
  .footer-sitemap__col h4::after {
    content: "+";
    font-size: 18px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.55);
    transition: transform 200ms ease;
    line-height: 1;
  }
  .footer-sitemap__col.is-open h3::after,
  .footer-sitemap__col.is-open h4::after {
    content: "\2212"; /* unicode minus */
  }
  /* Hide list by default — show when column is .is-open */
  .footer-sitemap__col ul {
    display: none !important;
    padding: 0 0 18px !important;
    margin: 0 !important;
    gap: 12px !important;
  }
  .footer-sitemap__col.is-open ul {
    display: flex !important;
    flex-direction: column !important;
  }
  /* Larger tap targets for footer links on mobile */
  .footer-sitemap__col a {
    font-size: 14.5px !important;
    padding: 4px 0;
    color: rgba(255, 255, 255, 0.78);
    display: inline-block;
  }
  /* Payment marks block: keep visible, but tighten — it's part of the
     "Support" column block. Don't hide it when Support is collapsed. */
  .footer-sitemap__pay-incol {
    display: block !important;
    margin-top: 4px !important;
    padding: 14px 0 18px !important;
    border-top: 0 !important;
  }
  .footer-sitemap__pay-incol .footer-sitemap__pay-label {
    font-size: 9.5px !important;
    letter-spacing: 1.4px !important;
    margin-bottom: 10px !important;
  }
  /* Bottom row — copyright + legal links. Compact on mobile. */
  .footer-sitemap__bottom {
    margin-top: 18px !important;
    padding-top: 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 10.5px !important;
  }
  .footer-sitemap__bottom a {
    font-size: 10.5px !important;
  }
}

/* ======================================================================
   SEARCH DRAWER + PDP SEARCH BAR — MOBILE FIX
   ======================================================================
   Two issues on mobile:
   1) The .search-drawer__input was sized at font-size:24px with
      padding:16px 0 (no horizontal padding) — placeholder text gets
      visually clipped at the right edge on narrow screens.
   2) The .search-drawer__panel had padding:32px on every side, which
      eats 64px of a 375px viewport (~17% of width).
   ====================================================================== */
@media (max-width: 640px) {
  .search-drawer__panel {
    padding: 24px 18px 22px !important;
    margin: 8vh auto 0 !important;
  }
  .search-drawer__input {
    font-size: 18px !important;
    padding: 14px 4px !important;
    margin: 6px 0 !important;
  }
  .search-drawer__hint {
    font-size: 10px !important;
    letter-spacing: 1.4px !important;
  }
  /* PDP search bar (the inline one injected on every product page) */
  .pdp-search-bar__input {
    font-size: 15px !important;
    padding: 11px 12px !important;
  }
}

/* PDP crypto/Interac payment trust block — sits below the .pdp__features
   list on every product detail page. Reinforces that we accept the kinds
   of payment that work for research-chemical categories (where mainstream
   card processors don't). Brand-matched: hairline border, no salesy
   color, payment marks ghosted to blend with the surface. */
.pdp-payment {
  margin: 20px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--hairline, #3c3c3c);
  background: var(--surface-soft, #0d0d0d);
  display: grid;
  gap: 12px;
}
.pdp-payment__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pdp-payment__title {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink, #262626);
}
.pdp-payment__sub {
  font-size: 12px;
  color: var(--muted, #6b6b6b);
  line-height: 1.5;
}
.pdp-payment__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pdp-payment__mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--body, #3c3c3c);
}
.pdp-payment__mark img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: grayscale(0.15);
}
.pdp-payment__mark b {
  font-weight: 600;
  color: var(--ink, #262626);
  font-size: 12px;
  letter-spacing: 0.2px;
}
@media (max-width: 720px) {
  .pdp-payment { padding: 14px 14px; }
  .pdp-payment__marks { gap: 10px 14px; }
  .pdp-payment__mark img { width: 20px; height: 20px; }
}

/* ======================================================================
   BLOG ARTICLE — EDITORIAL UPGRADE (2026-05-25)
   ======================================================================
   Direction: editorial minimalism with surgical accent treatment.
   White space is the primary design element. Pure North Blue is used like
   a researcher's pen mark — sparingly, deliberately. Hairlines define
   structure. The sentence rhythm matches a quality-assurance certificate:
   measured, precise.

   What's new vs the earlier .article rules:
   - Article meta strip (publish date + reading time + author) below h1
   - H2 with small accent rule above it (Pure North-Blue 32×3 px)
   - More generous vertical rhythm between sections (72px above h2)
   - Pull-quote treatment for <blockquote> inside .article
   - Callout cards (.article .callout) for asides/notes/warnings
   - Subtle hairline divider between major sections
   - First-paragraph drop-cap (opt-in via .article--has-dropcap)
   - Refined link hover (animated underline thickness)
   - Custom list bullets (small Pure North-Blue square)
   - Footer "Continue reading" treatment (eyebrow + hairline cards)
   ====================================================================== */

/* 1. ARTICLE-WRAP container — tighten + add subtle background field */
html body .article-wrap {
  background:
    radial-gradient(800px 400px at 50% -150px, rgba(28, 105, 212, 0.10), transparent 70%),
    var(--canvas, #000000);
  position: relative;
}

/* 2. SECTION-HEAD refinement — tighter eyebrow + display heading */
html body .article-wrap .section-eyebrow {
  font-size: 10.5px !important;
  letter-spacing: 2.2px !important;
  font-weight: 700 !important;
  position: relative;
  padding-left: 0 !important;
  display: inline-block;
}
html body .article-wrap .section-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--blue, #1c69d4);
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 3px;
}
html body .article-wrap .section-title {
  font-weight: 300 !important;
  letter-spacing: -0.018em !important;
  font-size: clamp(32px, 5vw, 52px) !important;
  line-height: 1.08 !important;
  max-width: 18ch !important;
  margin: 0 auto 24px !important;
}
html body .article-wrap .section-lede {
  font-size: 20px !important;
  line-height: 1.5 !important;
  color: var(--body, #3c3c3c) !important;
  font-weight: 300 !important;
  letter-spacing: -0.005em !important;
  max-width: 56ch !important;
  margin: 0 auto !important;
}
@media (max-width: 720px) {
  html body .article-wrap .section-title {
    font-size: 30px !important;
    max-width: 100% !important;
  }
  html body .article-wrap .section-lede {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }
}

/* 3. ARTICLE META STRIP — small caps after the h1, between hairlines.
   Renders only if the page includes <p class="article-meta"> after h1. */
.article-wrap .article-meta {
  max-width: 720px;
  margin: 36px auto 0;
  padding: 18px clamp(20px, 4vw, 40px);
  border-top: 1px solid var(--hairline, #e6e6e6);
  border-bottom: 1px solid var(--hairline, #e6e6e6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted, #6b6b6b);
  font-variant-numeric: tabular-nums;
}
.article-wrap .article-meta__sep {
  color: var(--hairline-strong, #cccccc);
}
.article-wrap .article-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.article-wrap .article-meta__item b {
  color: var(--ink, #262626);
  font-weight: 600;
}
@media (max-width: 720px) {
  .article-wrap .article-meta {
    margin: 24px auto 0;
    padding: 14px 18px;
    font-size: 10px;
    letter-spacing: 1.4px;
    gap: 8px 14px;
  }
}

/* 4. H2 — accent rule above, more breathing room */
html body .article h2 {
  position: relative;
  font-weight: 300 !important;
  font-size: 30px !important;
  letter-spacing: 0.4px !important;
  line-height: 1.15 !important;
  margin: 80px 0 24px !important;
  padding-top: 28px !important;
  text-transform: uppercase !important;
}
html body .article h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--blue, #1c69d4);
}
@media (max-width: 720px) {
  html body .article h2 {
    font-size: 22px !important;
    margin: 56px 0 18px !important;
    padding-top: 22px !important;
    letter-spacing: 0.3px !important;
  }
  html body .article h2::before {
    width: 28px;
  }
}

/* 5. H3 — tighter spacing, slightly bolder */
html body .article h3 {
  font-weight: 600 !important;
  font-size: 19px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em !important;
  margin: 44px 0 12px !important;
  color: var(--ink, #262626) !important;
}
@media (max-width: 720px) {
  html body .article h3 {
    font-size: 17px !important;
    margin: 32px 0 10px !important;
  }
}

/* 6. PARAGRAPHS — better rhythm */
html body .article p {
  font-size: 17px !important;
  line-height: 1.75 !important;
  margin: 0 0 24px !important;
  color: var(--ink, #262626) !important;
  letter-spacing: -0.003em;
}
html body .article > p:first-of-type,
html body .article > p:nth-of-type(1) {
  font-size: 21px !important;
  line-height: 1.5 !important;
  font-weight: 300 !important;
  color: var(--body, #3c3c3c) !important;
  margin: 0 0 32px !important;
  letter-spacing: -0.008em;
}
@media (max-width: 720px) {
  html body .article p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    margin: 0 0 20px !important;
  }
  html body .article > p:first-of-type {
    font-size: 18px !important;
    line-height: 1.5 !important;
    margin: 0 0 26px !important;
  }
}

/* 7. LINKS — refined hover (underline thickness anim) */
html body .article a {
  color: var(--blue-bright, #3b9eff) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(59, 158, 255, 0.45);
  transition: text-decoration-color 160ms ease, text-decoration-thickness 160ms ease;
}
html body .article a:hover,
html body .article a:focus-visible {
  text-decoration-color: var(--blue, #1c69d4);
  text-decoration-thickness: 2px;
}

/* 8. LISTS — custom blue square bullets + tight spacing */
html body .article ul,
html body .article ol {
  margin: 0 0 28px !important;
  padding-left: 0 !important;
  list-style: none !important;
}
html body .article ul li,
html body .article ol li {
  position: relative;
  padding-left: 24px;
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink, #262626);
}
html body .article ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 6px;
  height: 6px;
  background: var(--blue, #1c69d4);
}
html body .article ol {
  counter-reset: art-ol;
}
html body .article ol li {
  counter-increment: art-ol;
}
html body .article ol li::before {
  content: counter(art-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--blue, #1c69d4);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  html body .article ul li,
  html body .article ol li {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 12px;
  }
}

/* 9. BLOCKQUOTES / PULL QUOTES — large, light, with accent rule */
html body .article blockquote {
  margin: 48px 0 !important;
  padding: 8px 0 8px 24px !important;
  border-left: 3px solid var(--blue, #1c69d4) !important;
  font-size: 24px !important;
  line-height: 1.4 !important;
  font-weight: 300 !important;
  letter-spacing: -0.012em !important;
  color: var(--ink, #262626) !important;
  font-style: normal !important;
}
html body .article blockquote p {
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 0 12px !important;
  font-weight: inherit !important;
}
html body .article blockquote cite {
  display: block;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted, #6b6b6b);
  margin-top: 16px;
}
@media (max-width: 720px) {
  html body .article blockquote {
    font-size: 19px !important;
    margin: 32px 0 !important;
    padding-left: 18px !important;
  }
}

/* 10. CALLOUT CARDS — for definitions, asides, warnings.
    Markup: <aside class="article-callout"><h4>Title</h4><p>Body</p></aside>
    Variants: .article-callout--note (blue), --warn (amber), --quote (grey) */
html body .article .article-callout,
html body .article-wrap .article-callout {
  margin: 36px 0;
  padding: 24px 28px;
  background: var(--surface-soft, #f7f7f7);
  border-left: 3px solid var(--ink, #262626);
  position: relative;
}
html body .article .article-callout h4 {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: var(--muted, #6b6b6b) !important;
  margin: 0 0 10px !important;
}
html body .article .article-callout p {
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  color: var(--ink, #262626) !important;
}
html body .article .article-callout p + p {
  margin-top: 10px !important;
}
html body .article .article-callout--note {
  background: rgba(28, 105, 212, 0.04);
  border-left-color: var(--blue, #1c69d4);
}
html body .article .article-callout--note h4 {
  color: var(--blue, #1c69d4) !important;
}
html body .article .article-callout--warn {
  background: rgba(245, 158, 11, 0.06);
  border-left-color: #f59e0b;
}
html body .article .article-callout--warn h4 {
  color: #b45309 !important;
}
@media (max-width: 720px) {
  html body .article .article-callout {
    padding: 18px 20px;
    margin: 24px 0;
  }
}

/* 11. SECTION DIVIDERS — subtle hairline between major sections */
html body .article hr,
html body .article .article-divider {
  border: 0 !important;
  height: 1px !important;
  background: var(--hairline, #e6e6e6) !important;
  margin: 64px auto !important;
  max-width: 240px !important;
}

/* 12. TABLE REFINEMENT — tabular numerics, generous padding, borderless except hairline */
html body .article .table-scroll {
  margin: 32px 0 !important;
  border: 1px solid var(--hairline, #3c3c3c) !important;
  background: var(--surface-card, #1a1a1a);
}
html body .article table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-variant-numeric: tabular-nums;
}
html body .article table th {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--muted, #9a9a9a) !important;
  padding: 16px 14px !important;
  background: var(--surface-soft, #0d0d0d);
  border-bottom: 1px solid var(--hairline, #3c3c3c) !important;
  text-align: left;
}
html body .article table td {
  padding: 16px 14px !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  border-bottom: 1px solid var(--hairline, #e6e6e6) !important;
  vertical-align: top;
  color: var(--ink, #262626);
}
html body .article table tr:last-child td {
  border-bottom: 0 !important;
}
@media (max-width: 720px) {
  html body .article table th,
  html body .article table td {
    padding: 12px 10px !important;
    font-size: 13px !important;
  }
}

/* 13. FAQ LIST refinement — cleaner card-ish layout */
html body .article .faq-list {
  margin: 24px 0 40px !important;
  border-top: 1px solid var(--hairline, #e6e6e6) !important;
}
html body .article .faq-list .faq-item {
  padding: 24px 0 !important;
  border-bottom: 1px solid var(--hairline, #e6e6e6) !important;
}
html body .article .faq-list .faq-item h3 {
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.004em !important;
  margin: 0 0 8px !important;
  color: var(--ink, #262626) !important;
  padding-top: 0 !important;
}
html body .article .faq-list .faq-item h3::before {
  display: none !important;
}
html body .article .faq-list .faq-item p {
  font-size: 16px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  color: var(--body, #3c3c3c) !important;
}
@media (max-width: 720px) {
  html body .article .faq-list .faq-item {
    padding: 18px 0 !important;
  }
  html body .article .faq-list .faq-item h3 {
    font-size: 15.5px !important;
  }
  html body .article .faq-list .faq-item p {
    font-size: 15px !important;
  }
}

/* 14. INLINE CODE + PRE — minimal monospace treatment */
html body .article code {
  font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(28, 105, 212, 0.06);
  color: var(--blue-deep, #0066b1);
  padding: 1px 6px;
  font-weight: 500;
}
html body .article pre {
  background: var(--surface-soft, #f7f7f7);
  padding: 20px 24px;
  margin: 28px 0;
  overflow-x: auto;
  border-left: 3px solid var(--hairline-strong, #cccccc);
  font-size: 13px;
  line-height: 1.55;
}
html body .article pre code {
  background: transparent;
  padding: 0;
  color: var(--ink, #262626);
  font-weight: 400;
}

/* 15. CONTINUE-READING FOOTER — replace the generic button row with
    an editorial "More from the Journal" treatment. Drop into the bottom
    of any blog post with:
      <footer class="article-foot">
        <span class="article-foot__eyebrow">Continue reading</span>
        <a class="article-foot__card" href="/blog/...">...</a>
        ...
      </footer> */
html body .article-foot {
  max-width: 720px;
  margin: 96px auto 0;
  padding: 0 clamp(20px, 4vw, 40px);
  border-top: 1px solid var(--hairline, #e6e6e6);
  padding-top: 40px;
}
html body .article-foot__eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--blue, #1c69d4);
  margin-bottom: 24px;
}
html body .article-foot__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
html body .article-foot__card {
  display: block;
  padding: 24px;
  border: 1px solid var(--hairline, #3c3c3c);
  background: var(--surface-card, #1a1a1a);
  text-decoration: none !important;
  color: var(--ink, #ffffff);
  transition: border-color 160ms ease, transform 160ms ease;
}
html body .article-foot__card:hover {
  border-color: var(--blue, #1c69d4);
  transform: translateY(-2px);
}
html body .article-foot__card-cat {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--blue, #1c69d4);
  margin-bottom: 10px;
}
html body .article-foot__card-title {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  color: var(--ink, #262626);
}
@media (max-width: 720px) {
  html body .article-foot {
    margin: 64px auto 0;
    padding: 32px 18px 0;
  }
  html body .article-foot__cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* 16. PROGRESS BAR REFINEMENT — already exists as `.progress` 2px blue bar.
    Make it 3px and ensure it tracks the article reading position not just
    the page scroll. (CSS-only — no JS needed; .scroll-progress-fill is
    animated by the existing scroll-animations.js.) */
.scroll-progress {
  z-index: 60;
}
.scroll-progress-fill {
  background: var(--blue, #1c69d4) !important;
  height: 3px !important;
}

/* ============================================================
   CRO FRICTION FIXES — 2026-05-26
   ------------------------------------------------------------
   #5  Payment cards (replaces single-paragraph pdp-payment)
   #4  "Researchers also buy" bundle widget
   #3  Variant switcher polish (variant-fix.js already builds the
       dropdown; these rules are aesthetic upgrades only)
   ============================================================ */

/* ---------- #5 Payment cards ---------- */
.pdp-payment {
  margin-top: 24px;
  padding: 20px;
  background: var(--surface-soft, #f7f7f7);
  border: 1px solid var(--hairline, #e6e6e6);
}
.pdp-payment__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) {
  .pdp-payment__cards { grid-template-columns: 1fr; }
}
.pdp-payment__card {
  background: var(--surface-card, #1a1a1a);
  border: 1px solid var(--hairline, #3c3c3c);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .15s ease, transform .15s ease;
}
.pdp-payment__card:hover {
  border-color: var(--blue, #1c69d4);
}
.pdp-payment__card--primary {
  border-color: var(--blue, #1c69d4);
  box-shadow: 0 0 0 1px var(--blue, #1c69d4);
}
.pdp-payment__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.pdp-payment__card-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.pdp-payment__card-titles {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.pdp-payment__card-titles strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #262626);
  line-height: 1.2;
}
.pdp-payment__card-tagline {
  font-size: 11px;
  color: var(--muted, #6b6b6b);
  margin-top: 2px;
  letter-spacing: .3px;
}
.pdp-payment__card-pin {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  background: var(--blue, #1c69d4);
  color: #fff;
  padding: 4px 8px;
  border-radius: 2px;
  white-space: nowrap;
}
.pdp-payment__card-body {
  font-size: 13px;
  color: var(--body, #3c3c3c);
  line-height: 1.55;
  margin: 0;
}
.pdp-payment__steps {
  border-top: 1px solid var(--hairline, #e6e6e6);
  padding-top: 12px;
  margin-top: 4px;
}
.pdp-payment__steps summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue, #1c69d4);
  letter-spacing: .3px;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.pdp-payment__steps summary::-webkit-details-marker { display: none; }
.pdp-payment__steps summary::after {
  content: "▾";
  font-size: 10px;
  transition: transform .2s ease;
}
.pdp-payment__steps[open] summary::after { transform: rotate(180deg); }
.pdp-payment__steps ol {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--body, #3c3c3c);
  line-height: 1.6;
}
.pdp-payment__steps ol li + li { margin-top: 6px; }
.pdp-payment__footnote {
  margin: 14px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted, #6b6b6b);
  text-transform: uppercase;
}

/* ---------- #4 "Researchers also buy" bundle widget ---------- */
.pdp-bundle {
  margin: 18px 0 0;
  padding: 18px;
  background: var(--surface-card, #1a1a1a);
  border: 1px solid var(--hairline, #3c3c3c);
}
.pdp-bundle__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted, #6b6b6b);
  margin: 0 0 12px;
}
.pdp-bundle__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pdp-bundle__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--hairline, #e6e6e6);
  background: var(--surface-soft, #f7f7f7);
  transition: border-color .15s ease;
}
.pdp-bundle__item:hover {
  border-color: var(--blue, #1c69d4);
}
.pdp-bundle__item-meta {
  flex: 1;
  min-width: 0;
  /* Establish positioning context so the link's ::after can expand to
     cover the full meta div (and the row). Touch-target fix 2026-05-29:
     the link itself is 20px tall — too small on iOS (44px min). */
  position: relative;
}
.pdp-bundle__item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #262626);
  text-decoration: none;
  display: block;
}
.pdp-bundle__item-name:hover { color: var(--blue, #1c69d4); }
/* Expand the tap target so the entire .pdp-bundle__item-meta area
   navigates to the product. The "+ Add" button sits OUTSIDE this meta
   div, so it remains independently tappable. */
.pdp-bundle__item-name::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.pdp-bundle__item-meta > *:not(.pdp-bundle__item-name) {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.pdp-bundle__item-size {
  font-size: 11px;
  color: var(--muted, #6b6b6b);
  letter-spacing: .3px;
}
.pdp-bundle__item-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #262626);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pdp-bundle__add {
  appearance: none;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.pdp-bundle__add:hover {
  background: #fff;
  color: #000;
}
.pdp-bundle__add[data-added="1"] {
  background: #15803d;
  color: #fff;
  border-color: #15803d;
  cursor: default;
}
.pdp-bundle__add[data-added="1"]::before {
  content: "✓ ";
}
.pdp-bundle__footnote {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--muted, #6b6b6b);
  letter-spacing: .2px;
}

/* ---------- #3 Variant switcher polish ---------- */
/* variant-fix.js already builds .variant-dropdown with inline styles;
   these rules just give it a tighter look that matches the new payment
   card aesthetic above. */
.variant-dropdown {
  max-width: 100% !important;
}
.variant-dropdown__select {
  border-radius: 0 !important;
}

/* ---------- A11y skip-link focus reveal ----------
   The base .skip-link rule (in critical CSS) hides the link
   off-screen at left:-9999px. Without a :focus override, the
   link is invisible even to keyboard users — defeats the
   whole point of a skip-link. Reveal on focus. */
.skip-link:focus,
.skip-link:focus-visible {
  left: 12px !important;
  top: 12px !important;
  outline: 3px solid #fff;
  outline-offset: 2px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13px;
}


/* ============================================================
   PURE NORTH DESIGN SYSTEM — tokens + nw-* component classes
   Vendored from Claude Design handoff (see /design-system/).
   Additive: :root tokens (match existing) + nw-* primitives.
   ============================================================ */
/* ============================================================
   Pure North Peptides — BMW-M COLOR TOKENS  (authoritative)
   Motorsport-engineering dialect. TRUE-BLACK canvas (#000000)
   holding white type. NO light marketing surface. The only
   chromatic signature is the PURE NORTH TRICOLOR STRIPE
   (#0066b1 -> #1c69d4 -> #e22718) — brand identity only, never
   a button fill, never a surface. Values are the exact handoff
   tokens from /design-system/tokens/colors.css. This block
   REPLACES the prior CI2020 white-canvas tokens.
   ============================================================ */
:root {
  /* ---- Surfaces (black-on-up) ---- */
  --canvas:            #000000;   /* true-black page floor */
  --surface-soft:      #0d0d0d;   /* spec cells, alt bands, footer strips */
  --surface-card:      #1a1a1a;   /* cards, secondary buttons, inputs */
  --surface-elevated:  #262626;   /* nested cards inside dark bands */
  --carbon:            #2b2b2b;   /* carbon-fibre technical-spec tone */
  --plinth:            #0d0d0d;   /* studio plinth behind vials */

  /* ---- Legacy surface aliases (kept so components don't break) ---- */
  --surface-strong:    #262626;
  --surface-dark:      #000000;   /* nav / footer / hero floor */
  --surface-dark-alt:  #1a1a1a;
  --surface-dark-elev: #262626;

  /* ---- Ink — white-on-black hierarchy ---- */
  --ink:               #ffffff;   /* headlines + primary text */
  --body:              #bbbbbb;   /* running body (cooler than white) */
  --body-strong:       #e6e6e6;   /* lead paragraph */
  --muted:             #7e7e7e;   /* meta / breadcrumb / caption */
  --muted-soft:        #5a5a5a;   /* fine print / disabled */
  --on-dark:           #ffffff;
  --on-dark-soft:      #bbbbbb;
  --on-dark-faint:     #7e7e7e;

  /* ---- Hairlines & borders ---- */
  --hairline:          #3c3c3c;   /* 1px divider on dark surfaces */
  --hairline-strong:   #4a4a4a;   /* emphasized border */
  --hairline-dark:     #262626;   /* one-step-elevation border */

  /* ---- PURE NORTH TRICOLOR — brand signature ONLY ---- */
  --m-blue-light:      #0066b1;   /* stripe stop 1 */
  --m-blue-dark:       #1c69d4;   /* stripe stop 2 (heritage blue) */
  --m-red:             #e22718;   /* stripe stop 3 (maple red) */
  --tricolor: linear-gradient(90deg,
                var(--m-blue-light) 0 33.34%,
                var(--m-blue-dark) 33.34% 66.67%,
                var(--m-red) 66.67% 100%);
  --tricolor-v: linear-gradient(180deg,
                var(--m-blue-light) 0 33.34%,
                var(--m-blue-dark) 33.34% 66.67%,
                var(--m-red) 66.67% 100%);

  /* ---- Heritage blue (small accents, links, focus) ---- */
  --blue:              #1c69d4;
  --blue-active:       #0653b6;
  --blue-deep:         #0066b1;
  --blue-bright:       #3b9eff;   /* labels / accents on black */
  --blue-bright-soft:  #7eb1ff;
  --electric-blue:     #0653b6;
  --blue-glow:         rgba(28,105,212,0.32);
  --blue-soft:         rgba(28,105,212,0.14);

  /* ---- Primary interactive = WHITE (the outline IS the button) ---- */
  --accent:            #ffffff;

  /* ---- Semantic (validation & order status only) ---- */
  --success:           #0fa336;
  --success-dot:       #0fa336;
  --warning:           #f4b400;
  --error:             #e22718;

  /* ---- Spacing scale ---- */
  --s-xxs: 4px;  --s-xs: 8px;  --s-sm: 12px;  --s-md: 16px;
  --s-lg: 24px;  --s-xl: 40px; --s-xxl: 64px; --s-3xl: 80px;
  --s-section: 96px;

  /* ---- Radii ---- */
  --r-none: 0; --r-xs: 2px; --r-sm: 4px; --r-pill: 9999px;

  /* ---- Layout ---- */
  --container-max: 1600px;
  --pad-x:         clamp(20px, 4vw, 60px);
  --nav-h:         72px;

  /* ---- Elevation & motion (depth = surface contrast, NOT shadow) ---- */
  --shadow-hover: 0 30px 60px -20px rgba(0,0,0,0.65);
  --shadow-focus: 0 0 0 1px var(--blue-soft);
  --ring-focus:   0 0 0 2px var(--blue-bright);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:  cubic-bezier(0.6, 0, 0.8, 0.2);
  --dur-fast: 150ms; --dur-med: 250ms; --dur-slow: 400ms;

  /* ---- Type families + scale ---- */
  --font:         "Pure North Sans", Helvetica, Arial, system-ui, sans-serif;
  --font-display: "Pure North Sans", Helvetica, Arial, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-display-xl: clamp(44px, 6.4vw, 80px);
  --fs-display-lg: clamp(34px, 4.6vw, 56px);
  --fs-display-md: clamp(28px, 3.2vw, 40px);
  --fs-display-sm: clamp(24px, 2.4vw, 32px);
  --fs-title-lg: 24px; --fs-title-md: 20px; --fs-title-sm: 18px;
  --fs-body-md: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --fs-eyebrow: 14px;
}

/* Neutralize the legacy html.dark navy theme — force true black if ever toggled */
html.dark {
  --canvas:#000000; --surface-soft:#0d0d0d; --surface-card:#1a1a1a;
  --surface-strong:#262626; --hairline:#3c3c3c; --hairline-strong:#4a4a4a;
  --ink:#ffffff; --body:#bbbbbb; --muted:#9a9a9a;
}

/* Tell the UA this is a dark UI (native form controls, scrollbars) */
:root { color-scheme: dark; }
html, body { background: #000000; color: var(--ink); }

/* ============================================================
   nw-* COMPONENT CLASSES  (exact from /design-system/components)
   ============================================================ */

/* ---------------- TRICOLOR STRIPE (brand signature) ---------------- */
.pn-stripe { height: 4px; width: 100%; background: var(--tricolor); border: 0; }
.pn-stripe--sm { width: 56px; }
.pn-stripe--md { width: 96px; }
.pn-stripe--v { width: 4px; height: 100%; background: var(--tricolor-v); }

/* ---------------- BUTTON ---------------- */
.nw-btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font);
  font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 16px 32px; min-height: 48px;
  border: 1px solid transparent; border-radius: 0;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}
.nw-btn:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.nw-btn .nw-btn__arrow { transition: transform var(--dur-fast) var(--ease-out); }
.nw-btn:hover .nw-btn__arrow { transform: translateX(4px); }
.nw-btn--blue  { background: transparent; color: #fff; border-color: #fff; }
.nw-btn--blue:hover  { background: #fff; color: #000; border-color: #fff; }
.nw-btn--dark  { background: #fff; color: #000; border-color: #fff; }
.nw-btn--dark:hover  { background: var(--body-strong); border-color: var(--body-strong); }
.nw-btn--ghost { background: transparent; color: #fff; border-color: var(--hairline-strong); }
.nw-btn--ghost:hover { background: #fff; color: #000; border-color: #fff; }
.nw-btn--ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.nw-btn--ghost-dark:hover { background: #fff; color: #000; border-color: #fff; }
.nw-btn--lg { padding: 20px 38px; min-height: 60px; }
.nw-btn--sm { padding: 11px 18px; min-height: 40px; font-size: 12px; gap: 8px; }
.nw-btn--block { display: flex; width: 100%; justify-content: center; }
.nw-btn:disabled, .nw-btn[aria-disabled="true"] {
  background: var(--surface-card); color: var(--muted-soft);
  border-color: var(--surface-card); cursor: not-allowed;
}

/* ---------------- ICON BUTTON ---------------- */
.nw-iconbtn {
  background: transparent; border: 0; color: var(--ink);
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; border-radius: 0;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nw-iconbtn:hover { color: #fff; background: var(--surface-card); }
.nw-iconbtn:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.nw-iconbtn svg { width: 20px; height: 20px; }
.nw-iconbtn--on-dark { color: var(--body); }
.nw-iconbtn--on-dark:hover { color: #fff; }
.nw-iconbtn--round { width: 48px; height: 48px; background: var(--surface-card); border-radius: var(--r-pill); }
.nw-iconbtn--round:hover { background: var(--surface-elevated); }
.nw-iconbtn__dot {
  position: absolute; top: 2px; right: 2px;
  background: var(--m-red); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  min-width: 16px; height: 16px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* ---------------- LINK ARROW ---------------- */
.nw-link-arrow {
  display: inline-flex; gap: 6px; align-items: center;
  font-family: var(--font);
  font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: #fff; text-decoration: none; cursor: pointer;
  transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nw-link-arrow:hover { gap: 12px; color: var(--blue-bright); }
.nw-link-arrow--on-dark { color: #fff; }
.nw-link-arrow--on-dark:hover { color: var(--blue-bright); }

/* ---------------- CHIP (filter) ---------------- */
.nw-chip {
  font-family: var(--font);
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 11px 18px; border: 1px solid var(--hairline);
  border-radius: 0; background: transparent; color: var(--body); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.nw-chip:hover { border-color: #fff; color: #fff; }
.nw-chip:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.nw-chip[aria-pressed="true"], .nw-chip.is-active {
  background: #fff; color: #000; border-color: #fff;
}

/* ---------------- BADGE ---------------- */
.nw-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font);
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 5px 10px; border-radius: 0; line-height: 1;
}
.nw-badge--blue    { background: var(--blue); color: #fff; }
.nw-badge--ink     { background: #fff; color: #000; }
.nw-badge--red     { background: var(--m-red); color: #fff; }
.nw-badge--outline { background: transparent; color: #fff; border: 1px solid var(--hairline-strong); }
.nw-badge--success { background: transparent; color: var(--success); }
.nw-badge--success::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success-dot); }

/* ---------------- INPUT / SELECT ---------------- */
.nw-field { display: flex; flex-direction: column; gap: 6px; }
.nw-field__label {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
}
.nw-input, .nw-select {
  font-family: var(--font); font-size: 15px; font-weight: 300; color: #fff;
  padding: 12px 16px; min-height: 48px;
  border: 1px solid var(--hairline); border-radius: 0; background: var(--surface-card); outline: none; width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.nw-input::placeholder { color: var(--muted); }
.nw-input:focus, .nw-select:focus { border-color: #fff; }
.nw-input:disabled, .nw-select:disabled { background: var(--surface-soft); color: var(--muted-soft); cursor: not-allowed; }
.nw-input--error { border-color: var(--error); }
.nw-select {
  appearance: none; cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='1.5'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 11px;
}

/* ---------------- QTY STEPPER ---------------- */
.nw-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--hairline); }
.nw-qty button {
  width: 48px; height: 48px; border: 0; background: transparent; cursor: pointer;
  font-size: 18px; font-weight: 300; color: #fff; line-height: 1;
  transition: background var(--dur-fast) var(--ease-out);
}
.nw-qty button:hover { background: var(--surface-card); }
.nw-qty button:disabled { color: var(--muted-soft); cursor: not-allowed; }
.nw-qty input {
  width: 56px; height: 48px; border: 0; text-align: center; background: transparent;
  font-family: var(--font); font-size: 14px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline);
}
.nw-qty input::-webkit-outer-spin-button, .nw-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------- SPEC RIBBON ---------------- */
.nw-ribbon { display: grid; width: 100%; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.nw-ribbon--on-dark { border-color: var(--hairline); }
.nw-ribbon__cell { padding: 24px; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--hairline); }
.nw-ribbon--on-dark .nw-ribbon__cell { border-right-color: var(--hairline); }
.nw-ribbon__cell:last-child { border-right: 0; }
.nw-ribbon__lbl { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.nw-ribbon--on-dark .nw-ribbon__lbl { color: var(--muted); }
.nw-ribbon__val { font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: #fff; font-variant-numeric: tabular-nums; }
.nw-ribbon--on-dark .nw-ribbon__val { color: #fff; }

/* ---------------- PRODUCT CARD (nw-) ---------------- */
.nw-product {
  display: flex; flex-direction: column; background: var(--canvas);
  text-decoration: none; color: inherit; cursor: pointer;
  border: 1px solid var(--hairline);
  transition: border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
}
.nw-product:hover { border-color: #fff; background: var(--surface-soft); position: relative; z-index: 2; }
.nw-product:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.nw-product__photo { background: var(--plinth); aspect-ratio: 1; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }
.nw-product__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.nw-product:hover .nw-product__photo img { transform: scale(1.04); }
.nw-product__flag { position: absolute; top: 0; left: 0; }
.nw-product__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.nw-product__cat { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue-bright); }
.nw-product__name { font-size: 20px; font-weight: 700; line-height: 1.2; text-transform: uppercase; color: #fff; margin: 0; }
.nw-product__meta { font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums; }
.nw-product__row { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: baseline; }
.nw-product__price { font-size: 22px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }
.nw-product__price small { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: var(--muted); margin-left: 4px; }
.nw-product__cta { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; }

/* ============================================================
   SITE-WIDE BMW-M SKIN OVERRIDES
   Flip the live storefront's existing classes onto true black.
   These target the bundled styles.combined.css classes that
   tokens alone don't fully convert (hardcoded #fff, dark-on-dark
   text, navy surfaces). Ordered last so they win the cascade.
   ============================================================ */

/* ---- Global page floor + tricolor stripe at very top of page ---- */
html { border-top: 4px solid transparent; border-image: var(--tricolor) 1; }
body { background: #000 !important; color: var(--body); }

/* ---- Bands: every band is black; alt bands one step up ---- */
.band, .band--dark { background: #000 !important; color: var(--ink); }
.band--light { background: var(--surface-soft) !important; color: var(--ink); }

/* ---- Compliance bar (top) ---- */
.compliance { background: #000 !important; color: var(--muted) !important; border-bottom: 1px solid var(--hairline-dark); }
.compliance b, .compliance__inner b { color: #fff !important; }
.compliance__alt { color: var(--muted-soft) !important; }

/* ---- Nav: true black with bottom hairline + tricolor under it ---- */
.nav { background: #000 !important; color: #fff; border-bottom: 1px solid var(--hairline-dark); position: relative; }
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--tricolor); z-index: 51; pointer-events: none; }
html.dark .nav { background: #000 !important; }
.nav__brand, .nav__brand a { color: #fff !important; }
.nav__brand span, .nav__wm span { color: var(--blue-bright) !important; }
.nav__links a { color: var(--body) !important; }
.nav__links a:hover, .nav__links a.is-active { color: #fff !important; }
.nav__links a::after { background: #fff; }

/* ---- Scroll progress bar -> tricolor ---- */
.progress { background: var(--tricolor) !important; height: 3px; }

/* ---- Hero: true black floor (photo + black gradient overlay sits on top) ---- */
.hero { background: #000 !important; color: #fff; }
.hero__lead, .hero p { color: var(--body); }

/* ---- Page head / breadcrumbs (inner pages) ---- */
.page-head { background: #000 !important; color: #fff; border-bottom: 1px solid var(--hairline-dark); }
.page-head__lede, .page-head p { color: var(--body) !important; }
.breadcrumbs, .crumbs { background: #000 !important; color: var(--muted) !important; }
.breadcrumbs a, .crumbs a { color: var(--body) !important; }
.breadcrumbs a:hover, .crumbs a:hover { color: #fff !important; }

/* ---- Footer ---- */
.footer { background: #000 !important; color: #fff; border-top: 1px solid var(--hairline-dark); position: relative; }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--tricolor); }
html.dark .footer { background: #000 !important; }
.footer a, .footer__col a { color: var(--body) !important; }
.footer a:hover, .footer__col a:hover { color: #fff !important; }
.footer__h, .footer__wm { color: #fff !important; }
.footer__wm span { color: var(--blue-bright) !important; }
.footer__tag, .footer__base { color: var(--body) !important; }

/* ---- Product cards (.card / .card__*) -> dark #1a1a1a, white text ---- */
.product-grid { background: var(--hairline); border: 1px solid var(--hairline); gap: 1px; }
.card { background: var(--surface-card) !important; border: 1px solid var(--hairline) !important; color: var(--ink); box-shadow: none !important; }
.card:hover { background: var(--surface-elevated) !important; border-color: #fff !important; transform: none !important; box-shadow: none !important; }
.card__photo { background: var(--plinth) !important; }
.card__name { color: #fff !important; text-transform: uppercase; }
.card__cat { color: var(--blue-bright) !important; }
.card__meta { color: var(--muted) !important; }
.card__price { color: #fff !important; }
.card__price small { color: var(--muted) !important; }

/* ---- Generic card surfaces used across the site ---- */
.lab-card, .review-card, .team-card, .j-card, .fbw-card, .why-card,
.janoshik-badge, .ruo-block, .recently a, .variant-cell, .address-card,
.qa-block details, .compliance-tab, .verify-widget, .recon-calc, .recon-grid input {
  background: var(--surface-card) !important; color: var(--ink); border-color: var(--hairline) !important; box-shadow: none !important;
}
.lab-card__photo, .fbw-card__photo, .recently img, .gallery__main, .gallery__thumb, .pdp__media, .pdp__thumb {
  background: var(--plinth) !important;
}
.fbw-card:hover, .variant-cell:hover, .recently a:hover { background: var(--surface-elevated) !important; border-color: var(--hairline-strong) !important; }

/* ---- Soft / strong surface bands -> near-black ---- */
.refs, .buyer-verify, .checkout-summary, .pdp-ruo, .bulk-slider, .newsletter, .why-card,
.recon-calc, .sub-block, .compliance-tabs, .stat, .feature, .callout {
  background: var(--surface-soft) !important; color: var(--ink); border-color: var(--hairline) !important;
}
.stock-badge.stock--out { background: var(--surface-elevated) !important; color: var(--body) !important; }

/* ---- Hover rows -> elevated dark, never light ---- */
.qty__btn:hover, .search-hit:hover, .sub-block__opt:hover, .cmp-table tbody tr:hover,
.search-drawer__result:hover, .search-pop__item:hover, .trust__item:hover {
  background: var(--surface-elevated) !important;
}

/* ---- PDP (product detail) ---- */
.pdp { color: var(--ink); }
.pdp__name { color: #fff !important; text-transform: uppercase; }
.pdp__cat { color: var(--blue-bright) !important; }
.pdp__lead { color: var(--body) !important; }
.pdp__formula { color: var(--muted) !important; border-color: var(--hairline) !important; }
.pdp__media { background: var(--plinth) !important; border-color: var(--hairline) !important; }
.pdp__specs, .pdp__specs > div { border-color: var(--hairline) !important; }
.pdp__specs > div { background: var(--surface-soft) !important; }
.pdp__specs dt { color: var(--muted) !important; }
.pdp__specs dd { color: #fff !important; }
.pdp__price, .pdp__price-row { color: #fff !important; border-color: var(--hairline) !important; }
.pdp__price small { color: var(--muted) !important; }
.pdp__stock, .pdp__features li { color: var(--body) !important; }
.pdp__features svg { color: var(--blue-bright) !important; }
.buy-rail, .buy-rail--desktop, .buy-box { background: var(--surface-soft) !important; color: var(--ink); border-color: var(--hairline) !important; box-shadow: none !important; }

/* ---- Spec / data tables, definition lists ---- */
table, .spec-table, .cmp-table { color: var(--body); border-color: var(--hairline) !important; }
table th, .spec-table th, .cmp-table th { color: #fff !important; border-color: var(--hairline) !important; background: var(--surface-soft) !important; }
table td, .spec-table td, .cmp-table td { border-color: var(--hairline) !important; color: var(--body); }
dl, dt, dd { color: var(--body); }
dt { color: #fff; }

/* ---- COA gallery / lab results tiles ---- */
.gallery, .gallery__main, .gallery__thumb { border-color: var(--hairline) !important; }
.gallery__thumb { border: 1px solid var(--hairline) !important; }
.gallery__thumb.is-active, .gallery__thumb:hover { border-color: #fff !important; }
.lab-card__meta, .lab-card__lot { color: var(--muted) !important; }
.lab-card__name, .lab-card h3, .lab-card h4 { color: #fff !important; }

/* ---- Forms / inputs everywhere -> dark fields ---- */
input, select, textarea,
.field input, .field select, .field textarea,
.recon-grid input, .buyer-verify select, .newsletter input, .nw-input, .nw-select {
  background: var(--surface-card) !important; color: #fff !important; border-color: var(--hairline) !important;
}
input::placeholder, textarea::placeholder { color: var(--muted) !important; }
input:focus, select:focus, textarea:focus { border-color: #fff !important; outline: none; }
label, .field label { color: var(--body); }
html.dark input, html.dark select, html.dark textarea { background: var(--surface-card) !important; color: #fff !important; border-color: var(--hairline) !important; }

/* ---- Blog / article prose ---- */
.prose, .article, .post { color: var(--body); }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6,
.article h1, .article h2, .article h3, .article h4,
.post h1, .post h2, .post h3 { color: #fff !important; }
.prose a, .article a, .post a { color: var(--blue-bright) !important; }
.prose strong, .article strong { color: #fff; }
.prose blockquote, .article blockquote { border-left: 3px solid var(--m-red); color: var(--body-strong); }
.prose code, .article code, .prose pre { background: var(--surface-card); color: #fff; border-radius: 0; }
.blog-card, .post-card, .article-card { background: var(--surface-card) !important; border: 1px solid var(--hairline) !important; color: var(--ink); box-shadow: none !important; }
.blog-card:hover, .post-card:hover, .article-card:hover { border-color: #fff !important; background: var(--surface-elevated) !important; transform: none !important; box-shadow: none !important; }
.blog-card h2, .blog-card h3, .post-card h2, .post-card h3 { color: #fff !important; }
.blog-card p, .post-card p { color: var(--muted) !important; }

/* ---- FAQ / accordion ---- */
.faq { border-top: 1px solid var(--hairline); }
.faq details, .faq summary { border-color: var(--hairline) !important; }
.faq summary { color: #fff !important; }
.faq details p, .faq details { color: var(--body) !important; }
details { color: var(--body); border-color: var(--hairline) !important; }
summary { color: #fff; }

/* ---- Cart & checkout panels ---- */
.checkout-cart, .status-row, .age-gate__card, .tabs-mobile, .address-card,
.cart__line, .cart-summary, .order-summary, .checkout-step, .checkout-panel {
  background: var(--surface-card) !important; color: var(--ink); border-color: var(--hairline) !important; box-shadow: none !important;
}
.age-gate__card { border-top: 4px solid transparent; border-image: var(--tricolor) 1; }
.cart__line h3, .cart__line .name, .order-summary h3 { color: #fff !important; }
.cart__line .meta, .order-summary .meta { color: var(--muted) !important; }

/* ---- BUTTONS: white-outline -> white fill on hover (radius 0, uppercase 1.5px) ---- */
.btn, button.btn, a.btn,
.btn--blue, .btn--dark, .btn--ghost, .btn--ghost-light, .btn--ghost-dark, .btn--primary, .btn--secondary,
.card__quick, .pdp__cta .btn, .buy-rail .btn, .checkout .btn, .cart .btn,
.add-to-cart, button.add-to-cart, .checkout-btn, .place-order, .btn-checkout {
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-weight: 700 !important;
  transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out) !important;
}
/* Primary CTA = white outline over black, fills white (black label) on hover */
.btn, .btn--blue, .btn-blue, .btn--primary, .btn-primary, .card__quick,
.add-to-cart, button.add-to-cart, .checkout-btn, .place-order, .btn-checkout, .pdp__cta .btn--blue {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn:hover, .btn--blue:hover, .btn-blue:hover, .btn--primary:hover, .btn-primary:hover, .card__quick:hover,
.add-to-cart:hover, button.add-to-cart:hover, .checkout-btn:hover, .place-order:hover, .btn-checkout:hover, .pdp__cta .btn--blue:hover {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
  transform: none !important;
}
/* Secondary / ghost buttons: outline in hairline, also fill white on hover */
.btn--ghost, .btn--ghost-light, .btn--ghost-dark, .btn--secondary {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid var(--hairline-strong) !important;
}
.btn--ghost:hover, .btn--ghost-light:hover, .btn--ghost-dark:hover, .btn--secondary:hover {
  background: #fff !important; color: #000 !important; border-color: #fff !important;
}
.btn:focus-visible, button:focus-visible, a.btn:focus-visible,
.add-to-cart:focus-visible, .checkout-btn:focus-visible {
  outline: 2px solid var(--blue-bright) !important; outline-offset: 2px !important;
}
/* Solid "ink" button (dark variant) -> solid white CTA */
.btn--dark { background: #fff !important; color: #000 !important; border-color: #fff !important; }
.btn--dark:hover { background: var(--body-strong) !important; border-color: var(--body-strong) !important; }

/* ---- Icon buttons / cart dot ---- */
.iconbtn { color: var(--body) !important; }
.iconbtn:hover { color: #fff !important; }
.cart__dot, .nw-iconbtn__dot { background: var(--m-red) !important; color: #fff !important; }

/* ---- Links & eyebrows ---- */
a { color: inherit; }
.eyebrow, .label-uppercase { color: var(--muted); }
.eyebrow.on-dark { color: var(--body-strong); }

/* ---- Section dividers via tricolor (opt-in class for editorial moments) ---- */
.section-stripe, .divider--tricolor { height: 4px; width: 100%; background: var(--tricolor); border: 0; margin: 0; }

/* ---- Global focus ring (keyboard) — visible blue on black ---- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--blue-bright); outline-offset: 2px;
}

/* ---- Kill drop shadows globally (depth = surface contrast) ---- */
.card, .lab-card, .review-card, .blog-card, .post-card, .pdp__media,
.buy-rail, .buy-box, .checkout-cart, .j-card, .fbw-card, .why-card {
  box-shadow: none !important;
}

/* ---- Tabular numerics on all data ---- */
.tabular, [data-tabular], .price, .card__price, .pdp__price,
.lab-card__lot, .nw-ribbon__val { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ============================================================
   ADDITIONAL BUTTON FAMILIES -> white-outline system
   The site ships several parallel button namespaces beyond .btn:
   .lab__btn (lab hero), .mobile-cta (sticky mobile bar), and the
   JS-injected .lsw-btn (support pill). Flip them all to the
   white-outline -> white-fill primary, radius 0, uppercase 1.5px.
   ============================================================ */
.lab__btn, .lab__btn--blue, .lab__btn--ghost,
.mobile-cta,
.hero__cta .btn, .hero .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 16px 34px !important;
  min-height: 52px !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out) !important;
}
.lab__btn--blue, .mobile-cta {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}
.lab__btn--blue:hover, .mobile-cta:hover, .mobile-cta:active {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}
.lab__btn--ghost {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid var(--hairline-strong) !important;
}
.lab__btn--ghost:hover { background: #fff !important; color: #000 !important; border-color: #fff !important; }

/* Support-widget floating pill (.lsw-btn) — JS injects a solid-blue,
   border-radius:999px pill. Keep it a pill (it is a circular launcher
   companion) but recolor to the white-outline language with !important
   so it beats the runtime-injected inline style. */
.lsw-btn {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  letter-spacing: 1.5px !important;
  font-weight: 700 !important;
}
.lsw-btn:hover { background: #fff !important; color: #000 !important; border-color: #fff !important; transform: translateY(-1px) !important; }
.lsw-btn svg, .lsw-btn i { color: currentColor !important; }

/* Catch-all: any remaining element whose background is heritage blue and
   reads as a button (has btn/cta in the class) -> white outline. Progress
   bars (.shipbar__fill, .*-prog__fill, .track-step__dot) intentionally
   keep blue as accent and are excluded by not matching btn/cta. */
[class*="btn"][style*="background"],
a[class*="cta"]:not(.shipbar__fill):not([class*="prog"]) {
  border-radius: 0;
}

/* ---- Print: keep legible (white paper) — leave existing @media print as-is ---- */

/* ============================================================
   LEGIBILITY + HARSHNESS SOFTENING (white-on-black)
   Headlines stay crisp white; body steps down to --body (#bbb)
   with airier leading + a readable measure. Product/vial photo
   plates are pure black so incoming black-background vial photos
   blend seamlessly (no harsh white cutout/frame).
   ============================================================ */
body { color: var(--body, #bbb); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
p, li, dd, .body-md, .body-sm, figcaption, .pdp__lead { color: var(--body, #bbb); line-height: 1.65; }
.lead, .hero__lead, .intro { color: var(--body-strong, #e6e6e6); }
h1,h2,h3,h4,.display-xl,.display-lg,.display-md,.display-sm,.title-lg,.title-md { color: var(--ink, #fff); }
article p, .prose p, .post p, main .container p { max-width: 74ch; }
a:not(.btn):not(.nw-btn):not(.nav__brand):not(.nav__links a) { color: var(--blue-bright, #3b9eff); }
.muted, .caption { color: var(--muted, #9a9a9a); }
/* vial/product photography sits on a true-black plate — black-bg photos blend, white-bg fallbacks don't get a bright frame */
.nw-product__photo, .pdp__media, .product-card__media, .product__media, .card__media,
[data-product-media], .pdp__gallery, .pdp__image, .product-photo {
  background: #000 !important; border-color: var(--hairline, #3c3c3c) !important;
}
.nw-product__photo img, .pdp__media img, .pdp__gallery img, .product-photo img { background: transparent; }

/* ============================================================
   FINAL LEGIBILITY AUDIT PASS (2026-06-15)
   Render-verified fixes: kill remaining light surfaces from the
   minified base stylesheet + raise muted/blue text to WCAG-AA on
   both the #000 canvas and #1a1a1a cards.
   ============================================================ */

/* AA muted: #7e7e7e was 4.29:1 on #1a1a1a cards (fails AA). Raise the
   global token to #9a9a9a (≈5.0:1 on #1a1a1a, 7.0:1 on #000).
   Each page ships an inline <style data-critical> that sets a plain
   :root{--muted:#7e7e7e}; inline <head> styles win at equal specificity,
   so we use :root:root (0,2,0) to outrank it from the external sheet. */
:root:root { --muted: #9a9a9a !important; --on-dark-faint: #9a9a9a !important; }
/* Direct belt-and-suspenders for the card meta/price-unit text that reads
   muted on the #1a1a1a card surface. */
.card__meta, .card__price small, .card__price .unit,
.j-card__meta, .product-card__meta { color: #9a9a9a !important; }

/* Small-text blue links/CTAs at #1c69d4 fail AA on dark surfaces
   (3.3–4.0:1). Use the bright accent blue (#3b9eff) for any blue text
   that isn't a filled button. */
.card__cta, a.card__cta, span.card__cta,
.card:hover .card__cta,
.lab-card__cta, .pdp-bundle__name a {
  color: var(--blue-bright, #3b9eff) !important;
}
.breadcrumbs a, .crumbs a,
a[href]:not(.btn):not(.nw-btn):not([class*="btn--"]):not(.nav__brand):not(.skip-link) {
  color: var(--blue-bright, #3b9eff);
}
/* skip-link is white-on-blue when focused — keep it; the broad rule above
   was tinting it blue-on-blue. */
.skip-link, a.skip-link { color: #fff !important; }
/* Buttons rendered as <a> inside .article must keep the white-outline
   button label (the .article a bright-blue rule would otherwise tint
   them and they'd no longer read as buttons). */
html body .article a.btn, html body .article a.btn-blue,
html body .article a.btn--blue, html body .article a[class*="btn"] {
  color: #fff !important; text-decoration: none !important;
}
html body .article a.btn:hover, html body .article a[class*="btn"]:hover {
  color: #000 !important;
}
/* compliance bar inline link sits on #000; bundle keeps it heritage blue
   (4.0:1, fails AA). Force the bright accent. */
.compliance a, .compliance__inner a { color: var(--blue-bright, #3b9eff) !important; }
/* keep white nav/footer link treatment intact */
.nav__links a, .footer a, .footer__col a { color: inherit; }

/* Compliance / research-use gate modal: card was hardcoded #fff in the
   base stylesheet while its text uses --ink (white) -> invisible.
   Flip to a dark surface card with a hairline + visible icon. */
.compliance-modal__card,
.modal__card,
.age-gate__card {
  background: var(--surface-card, #1a1a1a) !important;
  border: 1px solid var(--hairline, #3c3c3c) !important;
  color: var(--ink, #fff) !important;
}
.compliance-modal__card h2 { color: var(--ink, #fff) !important; }
.compliance-modal__card p  { color: var(--body, #bbb) !important; }
.compliance-modal__card small { color: var(--muted, #9a9a9a) !important; }
.compliance-modal__icon {
  background: rgba(28,105,212,0.18) !important;
  color: var(--blue-bright, #3b9eff) !important;
}

/* PDP "Mechanism of action" + FAQ sections shipped background:#fff in the
   base stylesheet while their text is --ink/--body (white/grey) ->
   completely invisible. Flip to the black canvas. */
.moa-block, section.moa-block,
.pdp-faq, section.pdp-faq {
  background: var(--canvas, #000) !important;
  border-top: 1px solid var(--hairline, #3c3c3c) !important;
}
.moa-block .moa__card, .moa-block .moa__panel {
  background: var(--surface-card, #1a1a1a) !important;
  border: 1px solid var(--hairline, #3c3c3c) !important;
}
.moa__title, .pdp-faq h2, .faq-item__q { color: var(--ink, #fff) !important; }
.moa__body, .moa__foot, .faq-item__a, .faq-item p { color: var(--body, #bbb) !important; }
.moa__label, .moa-block .eyebrow, .pdp-faq .eyebrow { color: var(--muted, #9a9a9a) !important; }
.faq-item, .faq-item + .faq-item { border-color: var(--hairline, #3c3c3c) !important; }

/* Blog index hero band sits on an elevated ~#3c3c3c surface; muted byline
   text reads 3.9:1 there. Lift to body-strong for AA on the lighter band. */
.blog-band__meta, .blog-band__meta span, .blog-band__byline {
  color: var(--body-strong, #e6e6e6) !important;
}

/* In-stock green (#15803d) and the heritage-blue $-threshold/summary text
   fail AA on dark surfaces (3.3–3.9:1). Brighten to AA-clearing tones.
   Body-prefixed to outrank the inline contrast-fix block that forces
   #15803d / heritage blue with !important. */
body .pdp__stock, body .stock-badge.stock--ok, body .stock--ok,
body .disc-applied, body .disc-applied * { color: #2ec75f !important; }
body .pdp__price-row b, body .pdp__ship-note b, body .ship-threshold b,
body .pdp__free-ship b, body summary, body .fbw-card__cat,
body .j-card__cat, body .pdp-ship-prog__txt b { color: var(--blue-bright, #3b9eff) !important; }
/* Inline-styled heritage-blue accent spans (purity badges, "≥ 99%") read
   3.7:1 on dark cards. Remap inline var(--blue) text to the bright accent. */
[style*="color:var(--blue)"], [style*="color: var(--blue)"] {
  color: var(--blue-bright, #3b9eff) !important;
}
/* Checkout pay-method badges: "Recommended" (heritage blue 3.7:1) and the
   muted blue-grey "Direct to wallet" caption (3.75:1) both fail AA. */
body .pay-card__badge { color: var(--blue-bright, #3b9eff) !important; }
body .pay-card__badge--alt { color: #9aa6bd !important; }
/* Contact-card heading shipped heritage blue (3.7:1 on #0d0d0d). Brighten. */
body .contact-card__h { color: var(--blue-bright, #3b9eff) !important; }

/* Safety net: any remaining sizeable element that the base stylesheet
   left on a pure-white / near-white fill and that we have NOT already
   themed (cards, panels, sections, wraps) -> dark surface. Buttons,
   chips and badges keep their intentional white fills (excluded). */
section[style*="#fff"], div[style*="background:#fff"],
.section-light, .panel--light, .card--light {
  background: var(--surface-card, #1a1a1a) !important;
  color: var(--ink, #fff) !important;
}

/* Age-gate modal buttons -> BMW-M white system (were solid heritage blue) */
.age-modal__btn, .age-gate__cta, .age-modal__btn--primary, .age-modal__btn--secondary {
  border-radius:0!important; text-transform:uppercase!important; letter-spacing:1.5px!important; font-weight:700!important; box-shadow:none!important;
}
.age-modal__btn--primary, .age-gate__cta { background:#fff!important; color:#000!important; border:1px solid #fff!important; }
.age-modal__btn--primary:hover, .age-gate__cta:hover { background:#e6e6e6!important; border-color:#e6e6e6!important; }
.age-modal__btn--secondary { background:transparent!important; color:#fff!important; border:1px solid var(--hairline-strong)!important; }
.age-modal__btn--secondary:hover { background:#fff!important; color:#000!important; border-color:#fff!important; }

/* Portrait vial photos: show the FULL vial (no cap-crop), centered on black */
.pdp__media, .nw-product__photo, .product-photo, .product-card__media, .card__photo { background:#000 !important; }
.pdp__media img, .nw-product__photo img, .product-photo img, .product-card__media img, .card__photo img { object-fit: contain !important; }

/* ============================================================
   NEWSLETTER CTA BAND (.cta__inner) — MOBILE OVERFLOW FIX
   The blog/journal "Method notes monthly" signup band is a flex row
   (text column + email form). On mobile the form carries an inline
   min-width:400px and the text column a ~390px max-width, so both
   blew past the 375px viewport and were clipped on the right by the
   section's overflow-x:hidden (heading + Subscribe button cut off).
   Stack the band and let both children shrink to the viewport.
   ============================================================ */
@media (max-width: 640px) {
  .cta__inner {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
  }
  .cta__inner > * { max-width: 100% !important; min-width: 0 !important; }
  .cta__inner form {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
  /* email input must be allowed to shrink inside the now-narrow form */
  .cta__inner form input[type="email"] { min-width: 0 !important; }
}

/* ============================================================
   Inline COA proof at PDP buy-box (added 2026-06-15)
   Lightweight third-party-verification cue at the decision
   point. Thumbnail is a 3 KB lazy webp so it costs no LCP.
   ============================================================ */
.pdp-coa{
  display:flex;align-items:center;gap:12px;
  margin:16px 0 0;padding:10px 12px;
  border:1px solid var(--hairline,#2a2a2a);border-radius:0;
  background:var(--surface-soft,#0d0d0d);
  text-decoration:none;
  transition:border-color .18s ease, transform .18s ease;
}
.pdp-coa:hover{border-color:#1c69d4;transform:translateY(-1px);}
.pdp-coa:focus-visible{outline:2px solid #1c69d4;outline-offset:2px;}
.pdp-coa__img{
  width:56px;height:56px;object-fit:cover;
  border:1px solid var(--hairline,#2a2a2a);flex:0 0 auto;
}
.pdp-coa__txt{display:flex;flex-direction:column;gap:2px;line-height:1.3;min-width:0;}
.pdp-coa__txt b{
  font-size:12px;letter-spacing:.4px;text-transform:uppercase;
  color:var(--ink,#fff);
}
.pdp-coa__txt span{font-size:12px;color:var(--muted,#9a9a9a);}

/* ============================================================
   Tactile press feedback (added 2026-06-15) — user-approved
   exception to the BMW-M "no transform on buttons" rule, per
   UX press-feedback / scale-feedback guidance. Subtle + fast,
   NO spring overshoot. Reduced-motion users get nothing.
   Transition lists the hover-animated props too so the
   existing white-fill / border-lift behaviour is preserved.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .btn, .nw-btn, .lab__btn, .chip, .nw-chip, .iconbtn,
  .qty-stepper button, [data-add-to-cart], .buy-rail .btn,
  .pdp__cta .btn, .lab__cta a {
    transition: transform .12s cubic-bezier(.2,.8,.2,1),
                background-color .15s ease, border-color .15s ease, color .15s ease;
  }
  .nw-product, .product-grid > a, .pdp-coa, .feat {
    transition: transform .14s cubic-bezier(.2,.8,.2,1),
                background-color .2s ease, border-color .2s ease;
  }
  /* controls: a clear, snappy press */
  .btn:active, .nw-btn:active, .lab__btn:active, .chip:active,
  .nw-chip:active, .iconbtn:active, .qty-stepper button:active,
  [data-add-to-cart]:active, .buy-rail .btn:active,
  .pdp__cta .btn:active, .lab__cta a:active {
    transform: scale(.955) !important;
  }
  /* cards: barely-there give */
  .nw-product:active, .product-grid > a:active, .pdp-coa:active, .feat:active {
    transform: scale(.99) !important;
  }
}

/* ============================================================
   Canadian trust strip (added 2026-06-15) — leans into the
   "Pure North / Canadian-owned" identity as an e-commerce
   trust signal. BMW-M flat: surface-soft band, hairline rules,
   vertical tricolor accent, blue-bright bullets. No emoji.
   ============================================================ */
.trust-strip { background: var(--surface-soft,#0d0d0d); border-top: 1px solid var(--hairline,#2a2a2a); border-bottom: 1px solid var(--hairline,#2a2a2a); padding: 0 !important; margin: 0 !important; }
.trust-strip__inner { display: flex; align-items: center; gap: 28px; padding: 15px var(--pad-x,clamp(20px,4vw,60px)) !important; flex-wrap: wrap; }
.trust-strip__brand { display: inline-flex; align-items: center; gap: 11px; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink,#fff); white-space: nowrap; }
.trust-strip__bar { flex: 0 0 auto; width: 4px; height: 16px; background: linear-gradient(180deg,#0066b1 0 33.34%,#1c69d4 33.34% 66.67%,#e22718 66.67% 100%); }
.trust-strip__list { display: flex; flex-wrap: wrap; gap: 9px 26px; list-style: none; margin: 0; padding: 0; }
.trust-strip__list li { position: relative; font-size: 12px; color: var(--muted,#9a9a9a); letter-spacing: .3px; padding-left: 17px; }
.trust-strip__list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--blue-bright,#3b9eff); border-radius: 50%; }
.trust-strip__list b { color: var(--body-strong,#e6e6e6); font-weight: 600; }
@media (max-width: 760px) {
  .trust-strip__inner { gap: 12px; padding: 13px var(--pad-x) !important; }
  .trust-strip__list { gap: 7px 16px; }
  .trust-strip__list li { font-size: 11px; padding-left: 14px; }
  .trust-strip__brand { font-size: 11px; }
}

/* ---- maple leaf in trust strip ---- */
.trust-strip__leaf { width: 15px; height: 15px; color: #e22718; flex: 0 0 auto; }

/* ============================================================
   "Why Canadian-domestic" section (added 2026-06-15) — the
   domestic-shipping / no-seizure trust angle for Canadian
   research-peptide buyers. BMW-M flat, maple-leaf eyebrow.
   ============================================================ */
.cdn { background: #000; }
.cdn__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-bright,#3b9eff); }
.cdn__leaf { width: 15px; height: 15px; color: #e22718; flex: 0 0 auto; }
.cdn__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline,#2a2a2a); border: 1px solid var(--hairline,#2a2a2a); margin-top: 8px; }
.cdn__card { background: var(--surface-soft,#0d0d0d); padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; }
.cdn__h { font-size: 17px; font-weight: 700; letter-spacing: .2px; color: var(--ink,#fff); margin: 0; line-height: 1.25; }
.cdn__p { font-size: 14px; line-height: 1.6; font-weight: 300; color: var(--body,#bbb); margin: 0; }
.cdn__p b { color: var(--body-strong,#e6e6e6); font-weight: 600; }
@media (max-width: 860px) { .cdn__grid { grid-template-columns: 1fr; } }

/* ---- sitewide footer Canadian badge ---- */
.footer-cdn { display: flex; align-items: center; gap: 10px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; line-height: 1.5; color: var(--muted,#9a9a9a); letter-spacing: .2px; }
.footer-cdn__leaf { width: 16px; height: 16px; flex: 0 0 auto; }
.footer-cdn b { color: var(--body-strong,#e6e6e6); font-weight: 600; }
@media (max-width: 600px) { .footer-cdn { align-items: flex-start; } }

/* cdn header (own classes — avoids .section-head grid centering entirely) */
.cdn__head { margin-bottom: 30px; }
.cdn__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; justify-content: flex-start; }
.cdn__title { margin: 0; max-width: 22ch; text-align: left; }

/* cdn header — definitive left-align (max specificity) */
section.cdn .cdn__head,
section.cdn .cdn__head .cdn__title,
section.cdn .cdn__head .cdn__eyebrow { text-align: left !important; }

/* ============================================================
   Cookie consent banner (added 2026-06-15) — gates GTM/GA4 +
   Clarity behind explicit consent. BMW-M flat slide-up bar.
   ============================================================ */
.pn-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--surface-card,#1a1a1a); border-top: 1px solid var(--hairline,#3c3c3c); transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.pn-cookie.is-on { transform: translateY(0); }
.pn-cookie__inner { max-width: var(--container-max,1600px); margin: 0 auto; padding: 14px var(--pad-x,clamp(20px,4vw,60px)); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: space-between; }
.pn-cookie__txt { margin: 0; font-size: 13px; line-height: 1.5; color: var(--body,#bbb); max-width: 760px; }
.pn-cookie__txt a { color: var(--blue-bright,#3b9eff); text-decoration: underline; }
.pn-cookie__btns { display: flex; gap: 10px; flex-shrink: 0; }
.pn-cookie__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; padding: 11px 22px; border: 1px solid var(--hairline-strong,#4a4a4a); background: transparent; color: var(--ink,#fff); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s cubic-bezier(.2,.8,.2,1); }
.pn-cookie__btn--ghost { color: var(--muted,#9a9a9a); }
.pn-cookie__btn--ghost:hover { color: #fff; border-color: #fff; }
.pn-cookie__btn--ok { background: #fff; color: #000; border-color: #fff; }
.pn-cookie__btn--ok:hover { background: #1c69d4; border-color: #1c69d4; color: #fff; }
.pn-cookie__btn:active { transform: scale(.955); }
@media (max-width: 600px) { .pn-cookie__inner { padding: 12px 18px; gap: 12px; } .pn-cookie__txt { font-size: 12px; } .pn-cookie__btns { width: 100%; } .pn-cookie__btn { flex: 1; } }

/* focus rings (keyboard a11y) for hero CTAs + cookie banner */
.lab__btn:focus-visible, .pn-cookie__btn:focus-visible { outline: 2px solid var(--blue-bright,#3b9eff); outline-offset: 2px; }

/* maple-leaf nav logo (replaces the hexagon-P mark) */
.nav__brand .nav__logo { height: 40px; width: auto; display: block; }
@media (max-width: 600px) { .nav__brand .nav__logo { height: 34px; } }