/* 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, "Lumera 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-lumera/) 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: #fff;
    border-top: 1px solid var(--hairline, #e6e6e6);
    box-shadow: 0 -10px 24px -10px rgba(0, 0, 0, 0.12);
    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;
  }
}
/* Lift the support widget above any bottom-fixed bar (checkout summary on
   mobile checkout, or sticky add-to-cart on mobile PDPs) so the chat
   bubble never sits inside the bar. Targets both left + right positioning. */
body.has-checkout-stick .lsw-root,
body:has(.lumera-mobile-cta.is-active) .lsw-root {
  bottom: 78px !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 — HIDDEN EVERYWHERE.
   Per user 2026-05-23: customers must be able to see all their actual
   cart items. The upsell was burying line items + REMOVE buttons even
   on desktop. Kill it; cart space goes to the products being purchased. */
.cart-upsell,
[data-cart-upsell] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !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: #fafafa !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, Lumera 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, "Lumera 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, "Lumera 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, "Lumera 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 {
  font-style: italic;
}

/* Links — Lumera 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, #6b6b6b);
  padding: 14px 12px;
  background: #fafafa;
  border-bottom: 1px solid var(--hairline, #e6e6e6);
}
.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: #f7f7f7;
  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, "Lumera 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, #e6e6e6);
  background: #fafafa;
  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. Lumera 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 (Lumera-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 Lumera-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.02), transparent 70%),
    #ffffff;
  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, #1c69d4) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(28, 105, 212, 0.4);
  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, #e6e6e6) !important;
  background: #fff;
}
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, #6b6b6b) !important;
  padding: 16px 14px !important;
  background: #fafafa;
  border-bottom: 1px solid var(--hairline, #e6e6e6) !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, #e6e6e6);
  background: #fff;
  text-decoration: none !important;
  color: var(--ink, #262626);
  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: #fff;
  border: 1px solid var(--hairline, #e6e6e6);
  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: #fff;
  border: 1px solid var(--hairline, #e6e6e6);
}
.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 var(--blue, #1c69d4);
  background: #fff;
  color: var(--blue, #1c69d4);
  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: var(--blue, #1c69d4);
  color: #fff;
}
.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;
}