/* =====================================================================
   BioCollex site refresh · v2.0.1 · 2026-10-23
   Loaded by the BioCollex Refresh plugin. Nothing to paste.
   Checkout fields and totals are not touched.
   ===================================================================== */

:root {
  --bxrf-ink: #0b1530;
  --bxrf-navy: #0a1f44;
  --bxrf-navy-2: #213b66;
  --bxrf-blue: #2a6ad0;
  --bxrf-blue-2: #4f8fe6;
  --bxrf-sky: #b1cef7;
  --bxrf-mist: #eef4fe;
  --bxrf-line: #dfe6f1;
  --bxrf-muted: #5b6a7f;
  --bxrf-ok: #15803d;
  --bxrf-ok-bg: #e7f6ec;
  --bxrf-ease: cubic-bezier(.22, 1, .36, 1);
  --bxrf-shadow: 0 1px 2px rgba(11, 21, 48, .06), 0 10px 28px -14px rgba(11, 21, 48, .22);
}

/* ---------- 1. Shared pieces ---------------------------------------- */

/* Gradient headline words get a slow sheen */
.bg-gradient-to-r.bg-clip-text.text-transparent {
  background-size: 220% auto !important;
  animation: bxrf-sheen 7s ease-in-out infinite alternate;
}
@keyframes bxrf-sheen { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Scroll reveal (only elements that start below the fold) */
.bxrf-r .bxrf-wait { opacity: 0; transform: translateY(18px); }
.bxrf-r .bxrf-in { animation: bxrf-rise .75s var(--bxrf-ease) var(--bxrf-d, 0ms) backwards; }
@keyframes bxrf-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--bxrf-blue);
  outline-offset: 2px;
}

.bxrf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none !important;
  transition: transform .2s var(--bxrf-ease), box-shadow .2s, background-color .2s, color .2s;
}
.bxrf-btn-primary { background: linear-gradient(135deg, var(--bxrf-navy-2), var(--bxrf-blue)); color: #fff !important; box-shadow: 0 10px 22px -12px rgba(42, 106, 208, .8); }
.bxrf-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(42, 106, 208, .9); }
.bxrf-btn-ghost { background: #fff; color: var(--bxrf-navy-2) !important; box-shadow: inset 0 0 0 1px var(--bxrf-line); }
.bxrf-btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--bxrf-blue); }

.bxrf-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
  border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.bxrf-chip-dark { background: rgba(11, 21, 48, .86); color: #fff; }
.bxrf-chip-ok { background: var(--bxrf-ok-bg); color: var(--bxrf-ok); }

.bxrf-skel {
  width: 100%; height: 100%; min-height: 120px;
  background: linear-gradient(100deg, #eef2f8 30%, #f8fafd 50%, #eef2f8 70%) 0 0 / 300% 100%;
  animation: bxrf-skel 1.2s linear infinite;
}
@keyframes bxrf-skel { to { background-position: -150% 0; } }

/* Stand-in "paper" when a certificate image cannot be shown */
.bxrf-faux {
  position: relative; width: 100%; height: 100%; min-height: 160px; padding: 14% 12%;
  display: flex; flex-direction: column; gap: 9px; background: #fff;
}
.bxrf-faux b { display: block; width: 46%; height: 12px; border-radius: 4px; background: #c9d6ea; margin-bottom: 8px; }
.bxrf-faux i { display: block; height: 7px; border-radius: 4px; background: #e6ecf5; }
.bxrf-faux i.s { width: 62%; }
.bxrf-faux em { position: absolute; right: 12%; bottom: 12%; font-style: normal; font-weight: 800; font-size: 13px; color: var(--bxrf-blue); }

/* ---------- 2. Product cards: shop, home, cart, "bought together" --- */

/* FIX: "Add to cart" disappeared on hover (navy text on navy). It now
   stays white and the button brightens instead. */
[data-bx-card] button[data-bx-sizes],
[data-bx-card] .bg-\[\#1A1A1A\],
[data-bx-card] .bg-\[\#111\],
[data-bx-card] .bg-black {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #213b66 0%, #2c5291 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 18px -10px rgba(33, 59, 102, .75);
  transition: transform .25s var(--bxrf-ease), box-shadow .25s, filter .25s !important;
}
[data-bx-card] button[data-bx-sizes]::after,
[data-bx-card] .bg-\[\#1A1A1A\]::after,
[data-bx-card] .bg-\[\#111\]::after,
[data-bx-card] .bg-black::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .32) 50%, transparent 75%);
  transform: translateX(-130%);
  transition: transform .8s var(--bxrf-ease);
}
[data-bx-card] button[data-bx-sizes]:hover,
[data-bx-card] .bg-\[\#1A1A1A\]:hover,
[data-bx-card] .bg-\[\#111\]:hover,
[data-bx-card] .bg-black:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #2a4f8f 0%, #2a6ad0 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 12px 24px -10px rgba(42, 106, 208, .8);
  transform: translateY(-1px);
}
[data-bx-card] button[data-bx-sizes]:hover::after,
[data-bx-card] .bg-\[\#1A1A1A\]:hover::after,
[data-bx-card] .bg-\[\#111\]:hover::after,
[data-bx-card] .bg-black:hover::after { transform: translateX(130%); }
[data-bx-card] button[data-bx-sizes]:active { transform: translateY(0) scale(.98); }
[data-bx-card] button[data-bx-sizes] svg,
[data-bx-card] button[data-bx-sizes] span { color: #fff !important; }

/* One-size cards: adding feedback on the card's own button */
[data-bx-card] button[data-bx-sizes].bxrf-adding { pointer-events: none; }
[data-bx-card] button[data-bx-sizes].bxrf-adding > span:first-child { opacity: 0; }
[data-bx-card] button[data-bx-sizes].bxrf-adding::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: bxrf-spin .7s linear infinite; z-index: 1;
}
[data-bx-card] button[data-bx-sizes].bxrf-added { background: linear-gradient(135deg, #15803d, #22a35a) !important; }

/* Card lift, vial float, light that follows the cursor */
[data-bx-card] {
  transition: transform .4s var(--bxrf-ease), box-shadow .4s var(--bxrf-ease), border-color .3s !important;
}
[data-bx-card] > div:first-child::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 35%), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 62%);
  transition: opacity .35s ease;
}
[data-bx-card] > div:first-child img { transition: transform .6s var(--bxrf-ease) !important; }
@media (hover: hover) and (pointer: fine) {
  [data-bx-card]:hover {
    transform: translateY(-6px);
    border-color: rgba(42, 106, 208, .38) !important;
    box-shadow: 0 26px 48px -26px rgba(26, 58, 120, .55), 0 0 0 1px rgba(42, 106, 208, .14) !important;
  }
  [data-bx-card]:hover > div:first-child::before { opacity: 1; }
  [data-bx-card]:hover > div:first-child img { transform: translateY(-6px) scale(1.07) rotate(-2.5deg) !important; }
}
@media (hover: none) {
  [data-bx-card]:active { transform: scale(.985); }
}

/* "7x tested" badge on cards whose certificate lists all seven tests */
[data-bx-card] > div:first-child { container-type: inline-size; }
@container (max-width: 210px) { .bxrf-tbadge span { display: none; } .bxrf-tbadge { top: 8px; left: 8px; } }
.bxrf-tbadge {
  position: absolute; z-index: 2; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px;
  border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--bxrf-ok); background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 1px rgba(21, 128, 61, .18), 0 4px 10px -6px rgba(11, 21, 48, .35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* ---------- 3. Product page ----------------------------------------- */

/* Headline: bigger, bolder, vial-blue sheen */
.single-product main > section:first-child h1 {
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  line-height: 1.02 !important;
  font-size: clamp(30px, 7.6vw, 34px) !important;
  background: linear-gradient(100deg, #0b1530 0%, #1d3a6b 38%, #2a6ad0 55%, #1d3a6b 72%, #0b1530 100%) 0 50% / 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: bxrf-sheen 8s ease-in-out infinite alternate;
  padding-bottom: .06em;
}
@media (min-width: 1024px) {
  .single-product main > section:first-child h1 { font-size: clamp(38px, 3.1vw, 46px) !important; }
}

/* Size, purity and "7x tested" as one row of matching pills */
.single-product p.bxrf-specs {
  display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px !important;
}
@media (min-width: 1024px) { .single-product p.bxrf-specs { justify-content: flex-start; } }
.bxrf-spec {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: 999px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; line-height: 1; letter-spacing: .01em; text-decoration: none !important;
  transition: transform .2s var(--bxrf-ease), box-shadow .2s;
}
.bxrf-spec[hidden] { display: none; }
.bxrf-spec svg { flex: none; }
.bxrf-spec-size { color: #475569 !important; background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(42, 106, 208, .2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bxrf-spec-size #bx-size-label { color: var(--bxrf-ink) !important; }
.bxrf-spec-ok { color: var(--bxrf-ok) !important; background: var(--bxrf-ok-bg); box-shadow: inset 0 0 0 1px rgba(21, 128, 61, .2); }
.bxrf-spec-7x { color: #fff !important; background: linear-gradient(135deg, var(--bxrf-navy-2), var(--bxrf-blue)); box-shadow: 0 6px 14px -8px rgba(42, 106, 208, .9); }
a.bxrf-spec:hover { transform: translateY(-1px); }
@media (max-width: 480px) {
  .single-product p.bxrf-specs { gap: 6px; margin-top: 10px !important; flex-wrap: nowrap; }
  .bxrf-spec { height: 28px; padding: 0 9px; gap: 4px; font-size: 11.5px; letter-spacing: 0; }
  .bxrf-spec svg { width: 12px; height: 12px; }
}

/* Section headings get a vial-blue accent bar */
.bxrf-h2 { position: relative; display: inline-flex !important; align-items: center; gap: 12px; }
.bxrf-h2::before {
  content: ""; flex: none; width: 5px; height: .95em; border-radius: 3px;
  background: linear-gradient(180deg, var(--bxrf-blue-2), var(--bxrf-navy-2));
  box-shadow: 0 4px 10px -3px rgba(42, 106, 208, .6);
}

/* Phones and tablets. Order: title, pills, a big vial (or its certificate), Vial | COA, sizes,
   price, tiers, Add to cart. The vial is sized from the height Safari shows with its bars
   (measured once by the script into --bxrf-vh), so it is big without crowding the rest. */
@media (max-width: 1023.98px) {
  .single-product main > section:first-child { padding-top: 12px !important; padding-bottom: 28px !important; }
  .single-product main > section:first-child > .relative.z-\[1\] { padding-left: 16px !important; padding-right: 16px !important; }
  .single-product main > section:first-child div:has(> .bx-pdp-stage) { gap: 0 !important; }
  .single-product p.bxrf-specs { margin-top: 8px !important; }
  .single-product .bx-pdp-stage { flex-direction: column !important; align-items: center !important; margin-top: 10px; }
  .single-product .bx-pdp-stage > .bxrf-flip-box,
  .single-product .bx-pdp-stage > div:has(> img.bx-pdp-vial) { order: 1; }
  .single-product .bx-pdp-stage > .bxrf-flip-tabs { order: 2; }
  .single-product .bx-pdp-stage > .lg\:hidden {
    position: relative !important; left: auto !important; top: auto !important;
    translate: none !important; transform: none !important;
    order: 3; margin: 10px 0 0 !important;
  }
  .single-product .bx-pdp-stage > .lg\:hidden > div { flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 8px !important; }
  .single-product .bx-pdp-stage .bx-swatch {
    width: auto !important; min-width: 72px; height: 36px !important; padding: 0 16px !important;
    border-radius: 999px !important; font-size: 13.5px !important;
  }
  .single-product img.bx-pdp-vial { height: calc(clamp(200px, calc(var(--bxrf-vh, 603px) * .4 - var(--bxrf-tx, 0px)), 340px) - var(--bxrf-fit, 0px)) !important; }
  /* WooCommerce's own "img { height: auto }" would size the visible vial from the box width instead. */
  .single-product img.bx-pdp-vial + img { height: 100% !important; width: auto !important; }
  .single-product .bx-pdp-price { margin-top: 8px !important; }
  .single-product .bx-pdp-price [data-bx-now] { font-size: 32px !important; }
  .single-product .bx-pdp-price [data-bx-was] { font-size: 19px !important; }
  .single-product .bx-pdp-price > p { margin-top: 4px !important; }
  .single-product div:has(> .bx-tiers) { margin-top: 8px !important; }
  .single-product .bx-tiers { padding-top: 6px !important; margin-bottom: 10px !important; }
  .single-product .bx-tier { padding: 9px 6px 8px !important; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .single-product img.bx-pdp-vial { height: clamp(300px, calc(var(--bxrf-vh, 900px) * .44), 440px) !important; }
}
/* Phones, products with the Vial | COA flip: the switch and the size buttons share one row under
   the vial, and the vial gives back about that row's height, so Add to cart stays on the first
   screen the way it does on a product without the flip. */
@media (max-width: 639.98px) {
  .bxrf-flip-on .single-product .bx-pdp-stage { flex-direction: row !important; flex-wrap: wrap; justify-content: center; align-items: center !important; column-gap: 10px; }
  .bxrf-flip-on .single-product .bx-pdp-stage > .bxrf-flip-box { flex: 0 0 100%; }
  .bxrf-flip-on .single-product .bx-pdp-stage > .bxrf-flip-tabs { margin-top: 8px; }
  .bxrf-flip-on .single-product .bx-pdp-stage > .lg\:hidden { margin: 8px 0 0 !important; }
  /* One size: the theme hides its lone button, so the empty holder must not push the switch aside. */
  .bxrf-flip-on .single-product .bx-pdp-stage > .lg\:hidden:not(:has(.bx-swatch:not(:only-child))) { display: none !important; }
  .bxrf-flip-on .single-product img.bx-pdp-vial { height: calc(clamp(200px, calc(var(--bxrf-vh, 603px) * .4 - 36px - var(--bxrf-tx, 0px)), 300px) - var(--bxrf-fit, 0px)) !important; }
}

/* Desktop and laptop windows of every width: the vial on the left, everything to buy in one
   column on the right. Replaces the theme's corner-anchored layout, which scattered the title,
   sizes, price and Add to cart to the four corners at in-between widths (half-screen windows). */
@media (min-width: 1024px) {
  .single-product main > section:first-child { padding-top: clamp(20px, 4vh, 44px) !important; padding-bottom: clamp(28px, 5vh, 56px) !important; }
  .single-product .bxrf-hero {
    display: grid !important; min-height: 0 !important; max-width: 1180px; margin: 0 auto;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 440px);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas: "stage ." "stage title" "stage sizes" "stage price" "stage buy" "stage .";
    column-gap: clamp(32px, 5vw, 88px); row-gap: 0 !important;
  }
  .single-product .bxrf-hero > :is(.bxrf-hero-title, .bxrf-hero-sizes, .bx-pdp-stage, .bx-pdp-price, .bxrf-hero-buy) {
    position: relative !important; inset: auto !important;
    transform: none !important; translate: none !important; scale: none !important; margin: 0 !important;
  }
  .single-product .bxrf-hero > .bxrf-hero-title { grid-area: title; width: auto !important; text-align: left; }
  .single-product .bxrf-hero > .bxrf-hero-sizes { grid-area: sizes; margin-top: 20px !important; }
  .single-product .bxrf-hero-sizes > div { justify-content: flex-start !important; gap: 8px !important; }
  .single-product .bxrf-hero-sizes .bx-swatch {
    width: auto !important; min-width: 76px; height: 42px !important; padding: 0 18px !important;
    border-radius: 999px !important; font-size: 14px !important;
  }
  .single-product .bxrf-hero > .bx-pdp-stage { grid-area: stage; width: 100% !important; align-self: center; justify-content: center; }
  /* Room under the vial for the Vial | COA switch, so it never sits on the certificate. */
  .single-product .bxrf-hero > .bx-pdp-stage.bxrf-flip-stage { padding-bottom: 50px !important; }
  .single-product .bxrf-flip-stage > .bxrf-flip-tabs { bottom: 6px; }
  .single-product .bxrf-hero > .bx-pdp-price { grid-area: price; margin-top: 22px !important; text-align: left; }
  .single-product .bxrf-hero > .bx-pdp-price [data-bx-price] { justify-content: flex-start !important; }
  .single-product .bxrf-hero > .bxrf-hero-buy { grid-area: buy; width: 100% !important; max-width: none !important; margin-top: 18px !important; }
  .single-product .bxrf-hero-buy > p { text-align: left !important; }
  .single-product img.bx-pdp-vial { height: clamp(360px, 58vh, 600px) !important; }
  .single-product img.bx-pdp-vial + img { height: 100% !important; width: auto !important; }
}

/* Shared "All the research compounds you need" band: between 640 and 1023px its two vials ran
   into the headline on every page that has it. They sit in the lower corners beside the button.
   (The About page places its own.) */
@media (min-width: 640px) and (max-width: 1023.98px) {
  body:not(.page-id-188) main .bx-cta-band > img {
    top: auto !important; bottom: 92px !important; width: 104px !important; translate: none !important;
  }
}

/* Newsletter card on phones: the email field only had room for "Enter email add…". */
@media (max-width: 480px) {
  main div.rounded-3xl:has(> div > div > form.lg\:flex input[type="email"]) { padding-left: 16px; padding-right: 16px; }
  main form.lg\:flex > div.rounded-full:has(> input[type="email"]) { gap: 6px; padding-left: 14px; }
  main form.lg\:flex > div.rounded-full:has(> input[type="email"]) > button { padding-left: 14px; padding-right: 14px; }
}
/* Narrow phones: the field and the button each get the full width. */
@media (max-width: 400px) {
  main form.lg\:flex > div.rounded-full:has(> input[type="email"]) {
    flex-wrap: wrap; gap: 8px; padding: 0; border: 0; border-radius: 0; background: none;
  }
  main form.lg\:flex > div.rounded-full:has(> input[type="email"]) > input {
    flex: 1 0 100%; height: 48px; padding: 0 18px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff;
    transition: border-color .2s, box-shadow .2s;
  }
  main form.lg\:flex > div.rounded-full:has(> input[type="email"]) > input:focus { border-color: #2a6ad0; box-shadow: 0 0 0 3px rgba(42, 106, 208, .15); }
  main form.lg\:flex > div.rounded-full:has(> input[type="email"]) > button { flex: 1 0 100%; height: 48px; }
}

/* Smaller sale banner on every page except the home page, so the content gets the room */
@media (max-width: 1023.98px) {
  body:not(.home) .promo-banner { --sp-h: 52px !important; }
  body:not(.home) .promo-banner > .relative.z-10 { padding-top: 8px !important; padding-bottom: 8px !important; gap: 4px !important; }
  body:not(.home) .promo-banner p.promo-copy.flex-wrap { display: none !important; }
  body:not(.home) .promo-banner .bx-sp-title { font-size: 17px !important; }
  body:not(.home) .promo-banner .bx-promo-ends { font-size: 9px !important; }
}

/* Tier cards: clearer selected state */
.single-product .bx-tier { transition: transform .25s var(--bxrf-ease), box-shadow .25s, border-color .25s, background-color .25s !important; }
.single-product .bx-tier[aria-pressed="true"] {
  border-color: var(--bxrf-blue) !important;
  box-shadow: 0 0 0 1px var(--bxrf-blue), 0 12px 26px -14px rgba(42, 106, 208, .7) !important;
}
.single-product .bx-tier[aria-pressed="true"] strong { color: var(--bxrf-navy-2); }

/* Product page "Add to cart": shine on hover */
.single-product button.relative.inline-flex.h-11.w-full { overflow: hidden; isolation: isolate; }
.single-product button.relative.inline-flex.h-11.w-full::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .35) 50%, transparent 75%);
  transform: translateX(-130%); transition: transform .8s var(--bxrf-ease);
}
.single-product button.relative.inline-flex.h-11.w-full:hover::after { transform: translateX(130%); }

/* --- Vial <-> COA flip (pilot products) --- */
.bxrf-flip-box { perspective: 1400px; }
.bxrf-flip-box > img {
  transition: opacity .35s ease, transform .65s var(--bxrf-ease) !important;
  transform-origin: 50% 55%;
}
.bxrf-flip-box.is-coa > img {
  opacity: 0 !important;
  transform: translateX(calc(var(--bxrf-dir, 1) * -16%)) rotateY(calc(var(--bxrf-dir, 1) * 72deg)) scale(.86) !important;
}
.bxrf-coa-face {
  position: absolute; z-index: 5; left: 50%; top: 50%;
  height: min(100%, 640px); aspect-ratio: 8.5 / 11; max-width: calc(100% - 96px);
  translate: -50% -50%;
  border-radius: 18px; overflow: hidden; background: #fff; cursor: zoom-in;
  box-shadow: 0 30px 60px -28px rgba(10, 31, 68, .55), 0 0 0 1px rgba(42, 106, 208, .16);
  opacity: 0; pointer-events: none;
  transform: rotateY(calc(var(--bxrf-dir, 1) * -78deg)) scale(.9);
  transition: opacity .3s ease .1s, transform .7s var(--bxrf-ease) .06s;
  container-type: inline-size;
}
.bxrf-flip-box.is-coa .bxrf-coa-face { opacity: 1; transform: none; pointer-events: auto; }
.bxrf-coa-face.nudge { animation: bxrf-nudge .45s var(--bxrf-ease); }
@keyframes bxrf-nudge { 30% { transform: scale(1.03); } }
.bxrf-coa-doc { position: absolute; inset: 0; background: #fff; }
.bxrf-coa-doc canvas, .bxrf-coa-doc img { display: block; width: 100% !important; height: auto !important; }
.bxrf-coa-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 20%, rgba(243, 247, 254, .88) 44%, rgba(236, 242, 252, .97) 60%, #eaf1fc 100%);
}
.bxrf-coa-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; gap: 6px; }
/* Purity, report name, the button and the date/lot stack in one column at the bottom: nothing overlaps. */
.bxrf-coa-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 0 12px 14px; text-align: center;
}
.bxrf-coa-pur { margin: 0; font-size: clamp(26px, 16cqw, 46px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--bxrf-ink); }
.bxrf-coa-cap { margin: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 600; color: var(--bxrf-muted); }
.bxrf-coa-open {
  display: inline-flex; flex: none; align-items: center; gap: 7px; height: 38px; margin-top: 5px; padding: 0 16px;
  border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--bxrf-navy-2), var(--bxrf-blue));
  box-shadow: 0 12px 24px -12px rgba(42, 106, 208, .9), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .2s var(--bxrf-ease), box-shadow .2s;
}
.bxrf-coa-open:hover { transform: translateY(-1px) scale(1.02); }
.bxrf-coa-foot { margin: 2px 0 0; max-width: 100%; font-size: 11px; line-height: 1.35; font-weight: 600; color: #6b7a90; }
/* The size picked has no certificate on the page yet: a calm placeholder, never another size's report. */
.bxrf-coa-face.is-none { cursor: default; }
.bxrf-coa-wait { position: absolute; inset: 0 0 40%; display: grid; place-items: center; color: #9fb4d6; background: repeating-linear-gradient(135deg, #f6f9fe 0 12px, #eff4fc 12px 24px); }
.bxrf-coa-face.is-none .bxrf-coa-pur { font-size: clamp(20px, 11cqw, 30px); }
.bxrf-coa-face.is-none .bxrf-coa-cap { white-space: normal; }
.bxrf-coa-face.is-none .bxrf-chip-ok { background: #fff3dc; color: #8a4b00; }
@container (max-width: 230px) {
  .bxrf-coa-top { top: 8px; left: 8px; right: 8px; }
  .bxrf-coa-top .bxrf-chip { height: 20px; padding: 0 7px; font-size: 9.5px; }
  .bxrf-coa-panel { gap: 4px; padding: 0 9px 11px; }
  .bxrf-coa-cap { font-size: 11px; }
  .bxrf-coa-open { height: 34px; padding: 0 13px; font-size: 13px; }
  .bxrf-coa-foot { font-size: 10px; }
}

.bxrf-flip-btn {
  position: absolute; z-index: 6; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 0; cursor: pointer;
  pointer-events: auto; color: var(--bxrf-navy-2);
  background: rgba(255, 255, 255, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(42, 106, 208, .18), 0 10px 22px -12px rgba(10, 31, 68, .55);
  transition: left .6s var(--bxrf-ease), right .6s var(--bxrf-ease), transform .2s var(--bxrf-ease), background-color .2s, color .2s;
}
.bxrf-flip-btn.is-prev { left: 13%; }
.bxrf-flip-btn.is-next { right: 13%; }
.bxrf-flip-box.is-coa .bxrf-flip-btn.is-prev { left: 0; }
.bxrf-flip-box.is-coa .bxrf-flip-btn.is-next { right: 0; }
.bxrf-flip-btn:hover { background: #fff; color: var(--bxrf-blue); transform: scale(1.08); }
.bxrf-flip-btn:active { transform: scale(.94); }
.bxrf-flip-btn.hint { animation: bxrf-hint 1.6s var(--bxrf-ease) 2; }
@keyframes bxrf-hint { 0%, 100% { transform: none; box-shadow: 0 0 0 1px rgba(42, 106, 208, .18), 0 10px 22px -12px rgba(10, 31, 68, .55); } 40% { transform: translateX(4px); box-shadow: 0 0 0 6px rgba(42, 106, 208, .14), 0 10px 22px -12px rgba(10, 31, 68, .55); } }

.bxrf-flip-tabs {
  position: absolute; z-index: 31; left: 50%; bottom: -16px; translate: -50% 0;
  display: inline-flex; padding: 3px; border-radius: 999px; pointer-events: auto;
  background: rgba(255, 255, 255, .8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(42, 106, 208, .14), 0 6px 16px -10px rgba(10, 31, 68, .5);
}
.bxrf-flip-tabs button {
  height: 24px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; background: transparent;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bxrf-muted);
  transition: background-color .25s, color .25s;
}
.bxrf-flip-tabs button[aria-pressed="true"] { background: var(--bxrf-navy-2); color: #fff; }
@media (max-width: 1023.98px) {
  /* The vial's box spans the column, so the arrows sit at the edges and the certificate has room. */
  .single-product .bx-pdp-stage > .bxrf-flip-box { display: block !important; width: 100%; }
  .bxrf-flip-tabs { position: relative; left: auto; bottom: auto; translate: none; margin-top: 10px; }
  .bxrf-flip-tabs button { height: 30px; padding: 0 18px; font-size: 11.5px; }
  .bxrf-flip-btn { width: 40px; height: 40px; }
  .bxrf-flip-btn.is-prev, .bxrf-flip-box.is-coa .bxrf-flip-btn.is-prev { left: 4px; }
  .bxrf-flip-btn.is-next, .bxrf-flip-box.is-coa .bxrf-flip-btn.is-next { right: 4px; }
}

/* --- Past Lots (collapsible, under the certificate section) --- */
.bxrf-lots { padding-top: 6px; }
.bxrf-lots-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid #e2e8f0;
  background: none; text-align: left; cursor: pointer; color: inherit;
}
.bxrf-lots-btn h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: #0f172a; }
@media (min-width: 768px) { .bxrf-lots-btn h2 { font-size: 24px; } }
.bxrf-lots-count {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  font-size: 12px; font-weight: 800; color: var(--bxrf-navy-2); background: var(--bxrf-mist);
}
.bxrf-lots-ic {
  margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px;
  background: #f1f5f9; color: #475569; transition: transform .35s var(--bxrf-ease), background-color .2s;
}
.bxrf-lots-btn:hover .bxrf-lots-ic { background: #e2e8f0; }
.bxrf-lots.is-open .bxrf-lots-ic { transform: rotate(180deg); }
.bxrf-lots-panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--bxrf-ease), opacity .3s ease; }
.bxrf-lots.is-open .bxrf-lots-panel { grid-template-rows: 1fr; opacity: 1; }
.bxrf-lots-in { overflow: hidden; }
.bxrf-lots-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 900px) { .bxrf-lots-list { grid-template-columns: 1fr 1fr; } }
.bxrf-lot {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px;
  padding: 12px 12px 12px 14px; border-radius: 16px; background: #fff;
  box-shadow: inset 0 0 0 1px #e5ebf3, 0 6px 16px -14px rgba(11, 21, 48, .4);
}
.bxrf-lot-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bxrf-mist); color: var(--bxrf-blue); }
.bxrf-lot-main { min-width: 0; }
.bxrf-lot-name { margin: 0; font-size: 14.5px; font-weight: 700; color: #0f172a; }
.bxrf-lot-meta { margin: 2px 0 0; font-size: 12px; color: #64748b; }
.bxrf-lot-pur { margin: 0; text-align: right; font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--bxrf-blue); line-height: 1.05; }
.bxrf-lot-pur small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.bxrf-lot-view {
  display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 10px 0 13px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #fff; background: var(--bxrf-navy-2); transition: background-color .2s;
}
.bxrf-lot-view:hover { background: var(--bxrf-blue); }
.bxrf-lot-pi { display: none; font-weight: 700; color: var(--bxrf-blue); }
@media (max-width: 480px) {
  .bxrf-lot { grid-template-columns: auto 1fr auto; }
  .bxrf-lot-pur { display: none; }
  .bxrf-lot-pi { display: inline; }
}

/* Theme certificate cards: navy button like the rest of the site */
.single-product .bx-coa-btn {
  background: linear-gradient(135deg, #213b66, #2c5291) !important; color: #fff !important;
  box-shadow: 0 10px 22px -12px rgba(33, 59, 102, .8); transition: transform .2s var(--bxrf-ease), box-shadow .2s, filter .2s;
}
.single-product .bx-coa-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.bxrf-lots-empty, .bxrf-lots-note { margin: 12px 0 0; font-size: 13px; color: #64748b; }
.bxrf-lots-note { font-size: 12px; margin-bottom: 4px; }

/* --- Sticky add-to-cart bar on phones --- */
.bxrf-buybar {
  position: fixed; z-index: 70; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(42, 106, 208, .14), 0 18px 40px -16px rgba(10, 31, 68, .5);
  transform: translateY(140%); opacity: 0; pointer-events: none;
  transition: transform .45s var(--bxrf-ease), opacity .3s ease;
}
.bxrf-buybar.is-on { transform: none; opacity: 1; pointer-events: auto; }
.bxrf-buybar-info { min-width: 0; flex: 1; }
.bxrf-buybar-name { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 600; color: #475569; }
.bxrf-buybar-price { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--bx-promo, #bf5700); line-height: 1.15; }
.bxrf-buybar-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, var(--bxrf-navy-2), var(--bxrf-blue));
  box-shadow: 0 10px 22px -12px rgba(42, 106, 208, .9);
}
.bxrf-buybar-btn:active { transform: scale(.97); }
@media (min-width: 1024px) { .bxrf-buybar { display: none; } }
#bcx-agent { transition: transform .45s var(--bxrf-ease), opacity .3s ease; }
html.bxrf-bar-on #bcx-agent { transform: translateY(-74px); }
html.bxrf-bar-on body { padding-bottom: 76px; }
/* While the real Add to cart is on a phone screen, the chat bubble steps aside */
html.bxrf-buy-in #bcx-agent:not(.bcx-open) { opacity: 0; pointer-events: none; transform: scale(.85); }

/* ---------- 4. Certificate viewer ----------------------------------- */
html.bxrf-lock, html.bxrf-lock body { overflow: hidden !important; }
html.bxrf-lock #bcx-agent { visibility: hidden !important; }
.bxrf-viewer { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: flex-end; justify-content: center; }
.bxrf-viewer[hidden] { display: none; }
.bxrf-viewer-scrim { position: absolute; inset: 0; background: rgba(6, 14, 32, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .28s ease; }
.bxrf-viewer.is-open .bxrf-viewer-scrim { opacity: 1; }
.bxrf-viewer-sheet {
  position: relative; display: flex; flex-direction: column; width: 100%; max-height: 94%;
  border-radius: 24px 24px 0 0; background: #f6f8fc; color: #0f172a; outline: none; overflow: hidden;
  box-shadow: 0 -20px 60px -20px rgba(6, 14, 32, .5);
  transform: translateY(100%); transition: transform .4s var(--bxrf-ease);
}
.bxrf-viewer.is-open .bxrf-viewer-sheet { transform: none; }
.bxrf-viewer-grab { width: 42px; height: 5px; border-radius: 99px; background: #cdd6e3; margin: 8px auto 0; }
.bxrf-viewer-head { display: flex; align-items: flex-start; gap: 12px; padding: 10px 16px 12px; border-bottom: 1px solid #e5ebf3; background: #fff; }
.bxrf-viewer-titles { flex: 1; min-width: 0; }
.bxrf-viewer-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bxrf-ok); }
.bxrf-viewer-title { margin: 2px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--bxrf-ink); }
.bxrf-viewer-x { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 999px; cursor: pointer; background: #f1f5f9; color: #334155; }
.bxrf-viewer-x:hover { background: #e2e8f0; }
.bxrf-viewer-body { display: flex; flex-direction: column; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.bxrf-viewer-info { padding: 14px 16px 6px; }
.bxrf-viewer-score { display: flex; align-items: baseline; gap: 10px; }
.bxrf-viewer-score[hidden] { display: none; }
.bxrf-viewer-pur { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--bxrf-blue); }
.bxrf-viewer-purlab { margin: 0; font-size: 12px; font-weight: 600; color: var(--bxrf-muted); }
.bxrf-viewer-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; }
.bxrf-viewer-meta > div { padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e5ebf3; min-width: 0; }
.bxrf-viewer-meta dt { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a97ab; }
.bxrf-viewer-meta dd { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: #0f172a; overflow-wrap: anywhere; }
.bxrf-viewer-meta dd a { color: var(--bxrf-blue); text-decoration: none; }
.bxrf-viewer-meta > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bxrf-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.bxrf-copy { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border: 0; border-radius: 8px; cursor: pointer; background: var(--bxrf-mist); color: var(--bxrf-navy-2); }
.bxrf-copy svg + svg, .bxrf-copy.is-done svg:first-child { display: none; }
.bxrf-copy.is-done svg + svg { display: block; color: var(--bxrf-ok); }
.bxrf-viewer-tests { margin-top: 12px; }
.bxrf-viewer-sub { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #475569; }
.bxrf-viewer-tests ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bxrf-viewer-tests li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e5ebf3; font-size: 13px; color: #334155; }
.bxrf-viewer-tests li > svg { flex: none; color: var(--bxrf-ok); }
.bxrf-viewer-tests li span { flex: 1; min-width: 0; }
.bxrf-viewer-tests li b { color: #0f172a; }
.bxrf-viewer-tests li em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--bxrf-ok); background: var(--bxrf-ok-bg); padding: 3px 8px; border-radius: 999px; }
.bxrf-viewer-verify { margin: 10px 0 0; font-size: 12.5px; color: #475569; }
.bxrf-viewer-verify a { color: var(--bxrf-blue); font-weight: 700; }
.bxrf-viewer-actions { display: flex; gap: 8px; margin-top: 14px; }
.bxrf-viewer-actions .bxrf-btn { flex: 1; }
.bxrf-viewer-actions [hidden] { display: none; }
.bxrf-viewer-ruo { margin: 10px 0 0; font-size: 11.5px; color: #8a97ab; }
.bxrf-viewer-docwrap { position: relative; order: -1; padding: 10px 12px 6px; }
.bxrf-viewer-tools {
  position: sticky; top: 8px; z-index: 2; display: flex; align-items: center; gap: 4px; width: max-content; margin: 0 auto 10px; padding: 4px;
  border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px #e2e8f0, 0 8px 20px -12px rgba(11, 21, 48, .4);
}
.bxrf-viewer-tools[hidden] { display: none; }
.bxrf-viewer-tools button { min-width: 34px; height: 32px; padding: 0 10px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; font-size: 16px; font-weight: 700; color: #334155; }
.bxrf-viewer-tools button:hover { background: #f1f5f9; }
.bxrf-viewer-tools .bxrf-viewer-fit { font-size: 12px; }
.bxrf-viewer-zoom { min-width: 46px; text-align: center; font-size: 12px; font-weight: 700; color: #475569; }
.bxrf-viewer-doc { overflow: auto; border-radius: 14px; outline: none; }
.bxrf-viewer-doc .bxrf-pages { display: grid; gap: 12px; width: max-content; margin: 0 auto; }
.bxrf-viewer-doc .bxrf-page { display: block; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #e2e8f0, 0 18px 40px -24px rgba(11, 21, 48, .45); }
.bxrf-viewer-doc.is-zoomed .bxrf-pages { margin: 0; }
.bxrf-skel-page { aspect-ratio: 8.5 / 11; border-radius: 10px; }
.bxrf-viewer-frame { display: block; width: 100%; height: 72vh; border: 0; border-radius: 12px; background: #fff; }
.bxrf-viewer-fallback { display: grid; justify-items: center; gap: 12px; padding: 16px; text-align: center; font-size: 14px; color: #475569; }
.bxrf-viewer-fallback .bxrf-faux { max-width: 260px; aspect-ratio: 8.5 / 11; border-radius: 10px; box-shadow: 0 0 0 1px #e2e8f0; }
@media (min-width: 900px) {
  .bxrf-viewer { align-items: center; padding: 24px; }
  .bxrf-viewer-sheet { max-width: 1080px; max-height: 100%; border-radius: 24px; transform: translateY(24px) scale(.98); opacity: 0; transition: transform .4s var(--bxrf-ease), opacity .25s ease; }
  .bxrf-viewer.is-open .bxrf-viewer-sheet { opacity: 1; }
  .bxrf-viewer-grab { display: none; }
  .bxrf-viewer-head { padding: 16px 20px; }
  .bxrf-viewer-title { font-size: 24px; }
  .bxrf-viewer-body { flex-direction: row; overflow: hidden; min-height: 0; flex: 1; }
  .bxrf-viewer-info { width: 340px; flex: none; padding: 20px; overflow: auto; border-right: 1px solid #e5ebf3; background: #fff; }
  .bxrf-viewer-docwrap { order: 0; flex: 1; min-width: 0; overflow: auto; padding: 14px 20px 24px; }
  .bxrf-viewer-doc { overflow: visible; }
  .bxrf-viewer-pur { font-size: 42px; }
}

/* ---------- 5. COA archive page ------------------------------------ */
.bxrf-coa-on .bxrf-lede { max-width: 520px !important; font-size: clamp(14px, 2vw, 18px) !important; color: #3e4c63 !important; }

/* A slow lab-scanner beam across the intro */
.bxrf-coa-on main > section:first-child::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, transparent 42%, rgba(255, 255, 255, .55) 50%, transparent 58%, transparent 100%) 0 0 / 260% 100% no-repeat;
  animation: bxrf-scan 7s ease-in-out infinite;
}
@keyframes bxrf-scan { 0% { background-position: 130% 0; } 60%, 100% { background-position: -130% 0; } }

/* Live numbers */
.bxrf-coa-stats {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  max-width: 720px; margin: 24px auto 0;
}
.bxrf-live {
  grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 2px;
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #14532d;
  background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px rgba(21, 128, 61, .18);
}
.bxrf-live i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: bxrf-ping 2s ease-out infinite; }
@keyframes bxrf-ping { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } }
.bxrf-coa-stat {
  padding: 14px 10px 12px; border-radius: 18px; text-align: center;
  background: rgba(255, 255, 255, .62); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 16px 34px -24px rgba(10, 31, 68, .6);
}
.bxrf-coa-stat b {
  display: block; font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #0b1530, #2a6ad0); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bxrf-coa-stat span { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 600; color: #475569; }
@media (max-width: 640px) {
  .bxrf-coa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
  .bxrf-coa-stat { padding: 11px 8px 10px; }
}

/* Filters and the test legend */
.bxrf-coa-deck { max-width: 1000px; margin: 0 auto 26px; display: grid; gap: 12px; }
.bxrf-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bxrf-filters button {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #334155; background: #fff; box-shadow: inset 0 0 0 1px #dbe3ef;
  transition: background-color .25s, color .25s, box-shadow .25s, transform .2s var(--bxrf-ease);
}
.bxrf-filters button span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; background: #eef2f8; color: #475569; }
.bxrf-filters button:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--bxrf-blue); }
.bxrf-filters button[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, var(--bxrf-navy-2), var(--bxrf-blue)); box-shadow: 0 10px 22px -12px rgba(42, 106, 208, .9); }
.bxrf-filters button[aria-pressed="true"] span { background: rgba(255, 255, 255, .2); color: #fff; }
@media (max-width: 640px) {
  .bxrf-filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .bxrf-filters::-webkit-scrollbar { display: none; }
  .bxrf-filters button { flex: none; }
}
.bxrf-coa-legend {
  padding: 12px 16px; border-radius: 18px;
  background: linear-gradient(135deg, #f4f8ff, #eaf1fd); box-shadow: inset 0 0 0 1px #dbe6f7;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; text-align: center;
}
.bxrf-coa-legend-h { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bxrf-navy-2); }
.bxrf-coa-legend ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.bxrf-coa-legend li { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #334155; background: #fff; box-shadow: inset 0 0 0 1px #dbe6f7; }
.bxrf-coa-legend-note { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--bxrf-muted); }
@media (max-width: 640px) {
  .bxrf-coa-legend { padding: 10px 12px; gap: 6px; }
  .bxrf-coa-legend li { padding: 3px 8px; font-size: 11px; }
  .bxrf-coa-legend-note { display: none; }
}

/* Cards */
.bxrf-coa-on [data-bx-coa-grid] > [data-name] {
  position: relative; border-radius: 22px !important;
  transition: transform .45s var(--bxrf-ease), box-shadow .45s var(--bxrf-ease), border-color .3s !important;
}
.bxrf-coa-on [data-bx-coa-grid] > [data-name].bxrf-off { display: none !important; }
.bxrf-coa-on [data-bx-coa-grid] > [data-name]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(90, 166, 242, .14), transparent 60%);
  transition: opacity .3s;
}
/* 7x-tested and new-panel certificates stand out: a light runs around the 7x cards' edge, the new
   panel has a blue edge, and both get a tinted top. */
.bxrf-coa-on [data-bx-coa-grid] > [data-name].is-7x {
  isolation: isolate; border-color: transparent !important; background: linear-gradient(180deg, #e9f9ef 0%, #fff 40%) !important;
  box-shadow: 0 0 0 1px rgba(21, 128, 61, .08), 0 28px 50px -30px rgba(21, 128, 61, .65) !important;
}
.bxrf-coa-on [data-bx-coa-grid] > [data-name].is-7x::after {
  content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--bxrf-a), #16a34a 0deg, #86efac 70deg, #15803d 150deg, #bbf7d0 230deg, #22c55e 300deg, #16a34a 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: bxrf-orbit 7s linear infinite;
}
.bxrf-coa-on [data-bx-coa-grid] > [data-name].is-new:not(.is-7x) {
  border-color: rgba(42, 106, 208, .5) !important; background: linear-gradient(180deg, #edf3ff 0%, #fff 40%) !important;
  box-shadow: 0 0 0 1px rgba(42, 106, 208, .08), 0 24px 46px -30px rgba(42, 106, 208, .7) !important;
}
@media (hover: hover) and (pointer: fine) {
  .bxrf-coa-on [data-bx-coa-grid] > [data-name]:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -30px rgba(26, 58, 120, .55) !important; }
  .bxrf-coa-on [data-bx-coa-grid] > [data-name]:hover::before { opacity: 1; }
}
.bxrf-coa-on [data-bx-coa-grid] > [data-name] > div:first-child a { position: relative; overflow: hidden; }
.bxrf-coa-on [data-bx-coa-grid] > [data-name] > div:first-child a::after {
  content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 30%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(120, 190, 255, .55), transparent);
  opacity: 0; transition: opacity .2s;
}
.bxrf-coa-on [data-bx-coa-grid] > [data-name]:hover > div:first-child a::after { opacity: 1; animation: bxrf-scan-v 1.4s ease-in-out infinite; }
@keyframes bxrf-scan-v { from { top: -30%; } to { top: 100%; } }
.bxrf-coa-on [data-bx-coa-grid] > [data-name] > div:first-child a img { transition: transform .5s var(--bxrf-ease); }
.bxrf-coa-on [data-bx-coa-grid] > [data-name]:hover > div:first-child a img { transform: scale(1.08) rotate(-3deg); }
.bxrf-cc-hide-indep > p.mt-3\.5 { display: none !important; }
.bxrf-coa-on [data-bx-coa-grid] > [data-name] h3.truncate { white-space: normal; overflow: visible; line-height: 1.2; }
.bxrf-newtag {
  position: absolute; z-index: 2; top: -10px; left: 18px; height: 22px; padding: 0 10px; border-radius: 999px;
  display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: linear-gradient(135deg, #15803d, #22a35a); box-shadow: 0 8px 16px -8px rgba(21, 128, 61, .9);
}
:not(.is-7x) > .bxrf-newtag { background: linear-gradient(135deg, var(--bxrf-navy-2), var(--bxrf-blue)); box-shadow: 0 8px 16px -8px rgba(42, 106, 208, .9); }
.bxrf-newtag svg { flex: none; margin-right: 5px; }
.bxrf-newtag i { flex: none; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #fff; animation: bxrf-ping 1.8s ease-out infinite; }
@keyframes bxrf-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .75); } 70%, 100% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); } }
/* Now and then a light passes over the 7x tag */
.is-7x > .bxrf-newtag { overflow: hidden; }
.is-7x > .bxrf-newtag::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .65) 50%, transparent 70%) -150% 0 / 200% 100% no-repeat;
  animation: bxrf-tagshine 3.6s ease-in-out infinite;
}
@keyframes bxrf-tagshine { 0%, 55% { background-position: -150% 0; } 100% { background-position: 250% 0; } }

/* Group headings in the certificate grid (default order only) */
.bxrf-cg-group { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 10px 0 -2px; padding: 0; font: inherit; letter-spacing: 0; }
.bxrf-cg-group[hidden] { display: none !important; }
.bxrf-cg-group:first-child { margin-top: 0; }
.bxrf-cg-group-ic {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fff;
  background: linear-gradient(135deg, #15803d, #22c55e); box-shadow: 0 8px 16px -8px rgba(21, 128, 61, .85);
}
.bxrf-cg-group.g1 .bxrf-cg-group-ic { background: linear-gradient(135deg, var(--bxrf-navy-2), var(--bxrf-blue)); box-shadow: 0 8px 16px -8px rgba(42, 106, 208, .9); }
.bxrf-cg-group.g2 .bxrf-cg-group-ic { color: #64748b; background: #eef2f7; box-shadow: inset 0 0 0 1px #dbe3ef; }
.bxrf-cg-group-t { display: flex; flex-direction: column; min-width: 0; }
.bxrf-cg-group-t b { font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--bxrf-ink); }
.bxrf-cg-group-t small { font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--bxrf-muted); }
.bxrf-cg-group::after { content: ""; order: 2; flex: 1 1 24px; height: 1px; min-width: 16px; background: linear-gradient(90deg, #d5dfee, transparent); }
.bxrf-cg-group-n {
  order: 3; flex: none; display: grid; place-items: center; min-width: 28px; height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; color: #15803d; background: #dcfce7;
}
.bxrf-cg-group.g1 .bxrf-cg-group-n { color: var(--bxrf-blue); background: #e3ecfb; }
.bxrf-cg-group.g2 .bxrf-cg-group-n { color: #64748b; background: #eef2f7; }
@media (max-width: 639.98px) {
  .bxrf-cg-group { gap: 9px; margin: 6px 0 -4px; }
  .bxrf-cg-group-ic { width: 30px; height: 30px; border-radius: 10px; }
  .bxrf-cg-group-t b { font-size: 14.5px; }
  .bxrf-cg-group-t small { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .bxrf-coa-on [data-bx-coa-grid] > [data-name].is-7x::after, .bxrf-newtag i, .is-7x > .bxrf-newtag::after { animation: none !important; }
}

/* Purity box with a filling ring */
.bxrf-pbox { position: relative; padding-right: 58px !important; }
.bxrf-ring { position: absolute; right: 10px; top: 50%; width: 40px; height: 40px; translate: 0 -50%; rotate: -90deg; }
.bxrf-ring circle { fill: none; stroke-width: 4; }
.bxrf-ring .bg { stroke: rgba(42, 106, 208, .14); }
.bxrf-ring .fg {
  stroke: var(--bxrf-blue); stroke-linecap: round;
  stroke-dasharray: 113.1; stroke-dashoffset: 113.1;
  transition: stroke-dashoffset 1.6s var(--bxrf-ease) .15s;
}
.bxrf-in .bxrf-ring .fg, [data-name]:not(.bxrf-wait) .bxrf-ring .fg { stroke-dashoffset: calc(113.1 - 113.1 * var(--p) / 100); }
.is-7x .bxrf-ring .fg { stroke: #16a34a; }
.bxrf-pbox [data-count] { font-variant-numeric: tabular-nums; }

/* Lab panel + lot history (same shape on every card) */
.bxrf-cc { margin-top: 14px; padding: 12px; border-radius: 16px; background: #f8fafd; box-shadow: inset 0 0 0 1px #e8eef6; }
.bxrf-cc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.bxrf-cc-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.bxrf-cc-count {
  flex: none; white-space: nowrap;
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--bxrf-navy-2); background: #e4ecfa;
}
.bxrf-cc-count.is-full { color: #fff; background: linear-gradient(135deg, #15803d, #22a35a); box-shadow: 0 6px 14px -8px rgba(21, 128, 61, .8); }
.bxrf-cc-count.is-legacy { color: #64748b; background: #eef2f7; }
.bxrf-cc-tests { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.bxrf-cc-tests li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #1f3b2b; background: #fff; box-shadow: inset 0 0 0 1px #d6ecdd; }
.bxrf-cc-tests li svg { color: var(--bxrf-ok); }
.bxrf-tl { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #dbe3ef; }
.bxrf-tl-h { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.bxrf-tl ol { list-style: none; margin: 0; padding: 0; position: relative; }
.bxrf-tl ol::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--bxrf-blue), #dbe3ef); }
.bxrf-tl li { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 0 6px 22px; min-height: 40px; }
.bxrf-tl li > i { position: absolute; left: 1px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #b8c6dc; }
.bxrf-tl li.is-current > i { background: var(--bxrf-blue); box-shadow: 0 0 0 3px rgba(42, 106, 208, .18); animation: bxrf-dot 2.4s ease-in-out infinite; }
.is-7x .bxrf-tl li.is-current > i { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .2); }
@keyframes bxrf-dot { 50% { box-shadow: 0 0 0 6px rgba(42, 106, 208, .08); } }
.bxrf-tl li.is-first > i { box-shadow: inset 0 0 0 2px #cbd5e1; background: repeating-linear-gradient(45deg, #fff 0 2px, #e2e8f0 2px 4px); }
.bxrf-tl li > div { flex: 1; min-width: 0; }
.bxrf-tl li b { display: block; font-size: 12.5px; color: #0f172a; }
.bxrf-tl li span { display: block; font-size: 11.5px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bxrf-tl li.is-first b { color: #475569; }
.bxrf-tl li em { flex: none; font-style: normal; font-size: 13px; font-weight: 800; color: var(--bxrf-blue); }
.is-7x .bxrf-tl li.is-current em { color: #15803d; }
.bxrf-tl li button { flex: none; height: 28px; padding: 0 11px; border: 0; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 700; color: #fff; background: var(--bxrf-navy-2); transition: background-color .2s; }
.bxrf-tl li button:hover { background: var(--bxrf-blue); }

/* Viewer: archived report kept by the lab */
.bxrf-verify { display: grid; justify-items: center; gap: 10px; max-width: 420px; margin: 24px auto; padding: 26px 22px; border-radius: 20px; text-align: center; background: #fff; box-shadow: 0 0 0 1px #e2e8f0, 0 18px 40px -26px rgba(11, 21, 48, .45); color: var(--bxrf-ok); }
.bxrf-verify p { margin: 0; font-size: 14px; line-height: 1.5; color: #475569; }
.bxrf-verify .bxrf-verify-h { font-size: 18px; font-weight: 800; color: var(--bxrf-ink); }
.bxrf-verify-code { display: inline-flex !important; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-radius: 12px; background: var(--bxrf-mist); }

/* ---------- 6. Sign in, sign up, lost password ---------------------- */
.bxrf-auth-on .bx-login-art { position: relative; overflow: hidden; }
.bxrf-auth-on .bx-login-art::after {
  content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(40% 35% at 30% 30%, rgba(255, 255, 255, .55), transparent 70%), radial-gradient(35% 30% at 75% 70%, rgba(90, 166, 242, .35), transparent 70%);
  animation: bxrf-drift 14s ease-in-out infinite alternate;
}
@keyframes bxrf-drift { to { transform: translate3d(4%, -3%, 0) rotate(6deg); } }
.bxrf-auth-on .bx-login-art > img { position: relative; z-index: 2; animation: bxrf-float 6s ease-in-out infinite !important; }
.bxrf-auth-on .bx-login-art > .bxrf-fx img { max-width: none; max-height: none; }
@media (min-width: 768px) and (min-height: 761px) {
  .bxrf-auth-on .bx-login-art { justify-content: flex-start !important; flex-direction: column; padding-top: 6vh; }
  .bxrf-auth-on .bx-login-art > img { max-height: 44% !important; }
}
@keyframes bxrf-float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
.bxrf-auth-card {
  position: absolute; z-index: 3; left: 50%; bottom: 6%; translate: -50% 0; width: min(380px, 84%);
  padding: 18px 18px 14px; border-radius: 20px; color: #0f172a;
  background: rgba(255, 255, 255, .62); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 24px 50px -28px rgba(10, 31, 68, .55);
}
.bxrf-auth-kicker { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bxrf-blue); }
.bxrf-auth-big { margin: 4px 0 12px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--bxrf-ink); }
.bxrf-auth-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bxrf-auth-card li { display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; align-items: center; }
.bxrf-auth-card li span { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #fff; color: var(--bxrf-blue); box-shadow: 0 4px 10px -6px rgba(10, 31, 68, .4); }
.bxrf-auth-card li b { font-size: 13.5px; color: #0f172a; }
.bxrf-auth-card li small { font-size: 12px; color: #475569; }
@media (max-height: 760px) { .bxrf-auth-card { display: none; } }

.bxrf-auth-band {
  display: none; align-items: center; gap: 12px; margin: 0 0 22px; padding: 14px 16px; border-radius: 20px;
  color: #fff; background: radial-gradient(120% 160% at 0% 0%, #2f74db 0%, #213b66 48%, #0a1f44 100%);
  box-shadow: 0 20px 40px -22px rgba(10, 31, 68, .8), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.bxrf-auth-band img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(10, 31, 68, .25)); animation: bxrf-float 6s ease-in-out infinite; }
.bxrf-auth-band-h { margin: 0; font-size: 14.5px; font-weight: 800; color: #fff; }
.bxrf-auth-band-p { margin: 2px 0 0; font-size: 12px; color: #c9dcff; }
@media (max-width: 767.98px) { .bxrf-auth-band { display: flex; } }

.bxrf-auth-on .bx-login h1 { font-weight: 800 !important; letter-spacing: -.03em !important; color: var(--bxrf-ink); }
.bxrf-auth-on .bx-login .bxrf-sub, .bxrf-auth-on .bx-login .bx-sub { margin: 0 0 30px; font-size: 15px; color: var(--bxrf-muted); }
.bxrf-auth-on .bx-login label:not(.bx-check):not(.bx-consent) { font-size: 14px !important; font-weight: 600; color: #1e293b; }
.bxrf-auth-on .bx-login input[type=text],
.bxrf-auth-on .bx-login input[type=email],
.bxrf-auth-on .bx-login input[type=password],
.bxrf-auth-on .bx-login input[type=tel] {
  border-radius: 14px !important; background-color: #f8fafd !important;
  background-repeat: no-repeat !important; background-position: 16px 50% !important; background-size: 18px 18px !important;
  padding-left: 46px !important; transition: border-color .2s, box-shadow .2s, background-color .2s !important;
}
.bxrf-auth-on .bx-login input:hover { border-color: #c8d4e6 !important; }
.bxrf-auth-on .bx-login input:focus { border-color: var(--bxrf-blue) !important; background-color: #fff !important; box-shadow: 0 0 0 4px rgba(42, 106, 208, .14) !important; }
.bxrf-auth-on .bx-login input[type=email],
.bxrf-auth-on .bx-login input#username { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E") !important; }
.bxrf-auth-on .bx-login input[type=password] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important; }
.bxrf-auth-on .bx-login input[name=first_name],
.bxrf-auth-on .bx-login input[name=last_name] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") !important; }
.bxrf-auth-on .bx-login input[type=tel] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E") !important; }
.bxrf-auth-on .bx-login input[type=checkbox] { accent-color: var(--bxrf-navy-2); width: 18px; height: 18px; }
.bxrf-auth-on .bx-login .bx-login-row a,
.bxrf-auth-on .bx-login .bx-switch a,
.bxrf-auth-on .bx-login .bx-consent a { color: var(--bxrf-blue) !important; font-weight: 600; }
.bxrf-auth-on .bx-login button[type=submit] {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #213b66 0%, #2a6ad0 100%) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 14px 28px -14px rgba(42, 106, 208, .9) !important;
  transition: transform .2s var(--bxrf-ease), box-shadow .2s !important;
}
.bxrf-auth-on .bx-login button[type=submit]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .3) 50%, transparent 75%);
  transform: translateX(-130%); transition: transform .8s var(--bxrf-ease);
}
.bxrf-auth-on .bx-login button[type=submit]:hover { transform: translateY(-1px); }
.bxrf-auth-on .bx-login button[type=submit]:hover::after { transform: translateX(130%); }
.bxrf-auth-on .bx-login button[type=submit].is-loading { color: transparent !important; pointer-events: none; }
.bxrf-auth-on .bx-login button[type=submit].is-loading::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: bxrf-spin .7s linear infinite;
}
@keyframes bxrf-spin { to { transform: rotate(360deg); } }
.bxrf-auth-on .bx-login .bx-switch { margin-top: 26px; padding-top: 20px; border-top: 1px solid #e8edf4; text-align: center; color: var(--bxrf-muted); }

/* Moving light, floating vials and a glowing card for sign in, sign up and reset */
@property --bxrf-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.bxrf-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bxrf-fx i {
  position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; filter: blur(60px); opacity: .75;
  animation: bxrf-blob 16s ease-in-out infinite alternate;
}
.bxrf-fx i.b1 { left: -14%; top: -18%; background: radial-gradient(circle, rgba(90, 166, 242, .85), transparent 65%); }
.bxrf-fx i.b2 { right: -18%; top: 22%; background: radial-gradient(circle, rgba(42, 106, 208, .55), transparent 65%); animation-duration: 19s; animation-delay: -6s; }
.bxrf-fx i.b3 { left: 18%; bottom: -30%; background: radial-gradient(circle, rgba(177, 206, 247, .95), transparent 65%); animation-duration: 22s; animation-delay: -11s; }
@keyframes bxrf-blob {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(8%, 6%, 0) scale(1.12); }
  100% { transform: translate3d(-6%, -4%, 0) scale(.94); }
}
.bxrf-fx b {
  position: absolute; inset: -50%; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .9) 1px, transparent 1.6px), radial-gradient(rgba(42, 106, 208, .35) 1px, transparent 1.6px);
  background-size: 46px 46px, 70px 70px; background-position: 0 0, 23px 31px;
  animation: bxrf-drift-dots 60s linear infinite;
}
@keyframes bxrf-drift-dots { to { transform: translate3d(46px, -140px, 0); } }
.bxrf-fx img {
  position: absolute; width: clamp(64px, 9vw, 120px); height: auto; opacity: .9;
  filter: drop-shadow(0 20px 26px rgba(10, 31, 68, .28));
  translate: calc(var(--px, 0) * var(--d, 10px)) calc(var(--py, 0) * var(--d, 10px));
  transition: translate .6s var(--bxrf-ease);
  animation: bxrf-vfloat 7s ease-in-out infinite;
}
.bxrf-fx img.v1 { left: 6%; top: 14%; rotate: -16deg; --d: 18px; }
.bxrf-fx img.v2 { right: 7%; top: 9%; rotate: 22deg; --d: 26px; width: clamp(54px, 7vw, 96px); animation-delay: -2.4s; }
.bxrf-fx img.v3 { right: 12%; bottom: 10%; rotate: -8deg; --d: 12px; animation-delay: -4.6s; }
@keyframes bxrf-vfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@media (max-width: 767.98px) {
  .bxrf-fx img { width: 54px; opacity: .55; }
  .bxrf-fx img.v1 { left: -4%; top: 4%; }
  .bxrf-fx img.v2 { right: -3%; top: 26%; width: 46px; }
  .bxrf-fx img.v3 { display: none; }
}

/* Animated light running around the card edge */
.bxrf-glow { isolation: isolate; }
.bxrf-glow::before {
  content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--bxrf-a), rgba(42, 106, 208, .1) 0deg, rgba(90, 166, 242, .95) 70deg, rgba(42, 106, 208, .1) 140deg, rgba(42, 106, 208, .1) 220deg, rgba(120, 190, 255, .9) 290deg, rgba(42, 106, 208, .1) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: bxrf-orbit 6s linear infinite;
}
@keyframes bxrf-orbit { to { --bxrf-a: 360deg; } }

/* Reset page: full-bleed light show behind a glass card */
body.woocommerce-lost-password main.site-main { position: relative; overflow: hidden; isolation: isolate; min-height: 72vh; }
body.woocommerce-lost-password main .woocommerce { position: relative; z-index: 1; background: rgba(255, 255, 255, .86) !important; backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.bxrf-reset-ic { animation: bxrf-lockpulse 2.8s ease-in-out infinite; }
@keyframes bxrf-lockpulse { 0%, 100% { box-shadow: 0 12px 24px -12px rgba(42, 106, 208, .9), 0 0 0 0 rgba(42, 106, 208, .35); } 50% { box-shadow: 0 12px 24px -12px rgba(42, 106, 208, .9), 0 0 0 10px rgba(42, 106, 208, 0); } }
.bxrf-reset-ic svg { animation: bxrf-shackle 2.8s ease-in-out infinite; transform-origin: 50% 70%; }
@keyframes bxrf-shackle { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-9deg); } 86% { transform: rotate(6deg); } 94% { transform: rotate(-2deg); } }
.bxrf-reset-h, .bxrf-auth-on .bx-login h1 {
  background: linear-gradient(100deg, #0b1530 0%, #1d3a6b 40%, #2a6ad0 55%, #1d3a6b 70%, #0b1530 100%) 0 50% / 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: bxrf-sheen 8s ease-in-out infinite alternate;
}

/* Sign in / sign up: the same light behind the vial panel and the form */
.bxrf-auth-on .bx-login-panel { position: relative; isolation: isolate; overflow: hidden; }
.bxrf-auth-on .bx-login-panel > .bxrf-fx { opacity: .45; }
.bxrf-auth-on .bx-login-panel > .bxrf-fx img { display: none; }
.bxrf-auth-on .bx-login-inner { position: relative; z-index: 1; }
.bxrf-auth-on .bx-login-art > .bxrf-fx { z-index: 1; }
.bxrf-auth-on .bx-login-art > .bxrf-fx img.v3 { display: none; }
.bxrf-auth-band { position: relative; overflow: hidden; isolation: isolate; }
.bxrf-auth-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%) 0 0 / 250% 100% no-repeat;
  animation: bxrf-scan 5s ease-in-out infinite;
}

/* Lost password and set-new-password pages (the theme leaves these unstyled) */
body.woocommerce-lost-password main.site-main {
  padding: 48px 16px 72px;
  background: linear-gradient(180deg, #b1cef7 0%, #dfeafb 48%, #ffffff 100%);
}
body.woocommerce-lost-password main .woocommerce {
  max-width: 480px; margin: 0 auto; padding: 30px 26px 26px; border-radius: 24px; background: #fff;
  box-shadow: 0 34px 70px -34px rgba(10, 31, 68, .45), 0 0 0 1px rgba(42, 106, 208, .08);
}
.bxrf-reset-ic {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 14px;
  color: #fff; background: linear-gradient(135deg, var(--bxrf-navy-2), var(--bxrf-blue)); box-shadow: 0 12px 24px -12px rgba(42, 106, 208, .9);
}
.bxrf-reset-h { margin: 0 0 6px; font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--bxrf-ink); }
body.woocommerce-lost-password form.woocommerce-ResetPassword { display: flex; flex-direction: column; margin: 0 !important; padding: 0 !important; border: 0 !important; }
body.woocommerce-lost-password form.woocommerce-ResetPassword > p:first-child { margin: 0 0 22px; font-size: 15px; line-height: 1.55; color: var(--bxrf-muted); }
body.woocommerce-lost-password .woocommerce-ResetPassword .form-row { width: 100% !important; float: none !important; margin: 0 0 16px !important; padding: 0 !important; }
body.woocommerce-lost-password .woocommerce-ResetPassword label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #1e293b; }
body.woocommerce-lost-password .woocommerce-ResetPassword label .required { color: #dc2626; text-decoration: none; }
body.woocommerce-lost-password .woocommerce-ResetPassword input.input-text {
  width: 100%; height: 52px; padding: 0 16px 0 46px; border: 1px solid #e2e8f0; border-radius: 14px; outline: none;
  font-size: 16px; color: #0f172a; background: #f8fafd no-repeat 16px 50% / 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
body.woocommerce-lost-password .woocommerce-ResetPassword input[type=password] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
body.woocommerce-lost-password .woocommerce-ResetPassword input.input-text:focus { border-color: var(--bxrf-blue); background-color: #fff; box-shadow: 0 0 0 4px rgba(42, 106, 208, .14); }
body.woocommerce-lost-password .woocommerce-ResetPassword button[type=submit] {
  width: 100%; height: 52px; margin-top: 4px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 16px; font-weight: 700; color: #fff !important;
  background: linear-gradient(135deg, #213b66 0%, #2a6ad0 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 14px 28px -14px rgba(42, 106, 208, .9);
  transition: transform .2s var(--bxrf-ease), box-shadow .2s;
}
body.woocommerce-lost-password .woocommerce-ResetPassword button[type=submit]:hover { transform: translateY(-1px); }
body.woocommerce-lost-password .woocommerce-ResetPassword button[type=submit].is-loading { color: transparent !important; pointer-events: none; position: relative; }
body.woocommerce-lost-password .woocommerce-ResetPassword button[type=submit].is-loading::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: bxrf-spin .7s linear infinite;
}
body.woocommerce-lost-password .woocommerce-message, body.woocommerce-lost-password .woocommerce-info, body.woocommerce-lost-password .woocommerce-error {
  list-style: none; margin: 0 0 18px; padding: 12px 14px; border-radius: 14px; font-size: 14px;
  color: #14532d; background: var(--bxrf-ok-bg); border: 1px solid #bfe5cc;
}
body.woocommerce-lost-password .woocommerce-error { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.bxrf-reset-back { display: block; margin-top: 20px; padding-top: 18px; border-top: 1px solid #e8edf4; text-align: center; font-size: 14px; font-weight: 600; color: var(--bxrf-blue) !important; text-decoration: none !important; }
.bxrf-reset-back:hover { text-decoration: underline !important; }

/* ---------- Apple Pay express + confirm step ------------------------ */
.bxrf-apay {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; padding: 0 18px;
  border: 0; border-radius: 999px; cursor: pointer; color: #fff; background: #000;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .7); transition: transform .2s var(--bxrf-ease), opacity .2s;
}
.bxrf-apay:active { transform: scale(.98); }
.bxrf-apay:disabled { opacity: .35; cursor: not-allowed; }
.bxrf-apay-face { display: inline-flex; align-items: center; gap: 6px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.bxrf-apay-face > span { font-weight: 400; margin-right: 2px; }
.bxrf-apay-face b { font-weight: 600; font-size: 19px; margin-left: -2px; }
.bxrf-apay-face svg { margin-top: -3px; }
/* On Apple devices, Safari draws Apple's own official button */
@supports (-webkit-appearance: -apple-pay-button) {
  .bxrf-apay { -webkit-appearance: -apple-pay-button; -apple-pay-button-style: black; -apple-pay-button-type: plain; padding: 0; }
  .bxrf-apay-drawer { -apple-pay-button-type: check-out; }
  .bxrf-confirm-ok { -apple-pay-button-type: continue; }
  .bxrf-apay-xp, .bxrf-apay-bar { -apple-pay-button-type: buy; }
  .bxrf-apay > .bxrf-apay-face { display: none; }
}

/* Cart drawer: a usual order fits one phone screen. The footer keeps only Total, Apple Pay,
   Checkout and the payment marks; the rewards note sits under the totals in the list. */
.bxrf-earn { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 12px; line-height: 1.35; color: #92400e; text-align: center; }
.bxrf-earn svg { flex: none; color: #d97706; }
.bxrf-earn b { color: #78350f; white-space: nowrap; }
html #cart-drawer .bxc-foot { gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
html #cart-drawer .bxc-totals-foot .bxc-total { font-size: 16.5px; }
html #cart-drawer .bxc-foot .bxc-btn-primary { min-height: 48px; padding: 0 20px; font-size: 15.5px; }
html #cart-drawer .bxrf-apay-drawer { height: 48px; margin: 0; }
html #cart-drawer .bxc-foot .bxc-pay { gap: 4px 9px; font-size: 11px; line-height: 1.2; }
html #cart-drawer .bxc-foot .bxc-visa { font-size: 13.5px; }
html #cart-drawer .bxc-foot .bxc-mc i { width: 15px; height: 15px; }
html #cart-drawer .bxc-foot .bxc-paytag { height: 16px; padding: 0 6px; font-size: 9px; }
html #cart-drawer .bxc-foot .bxc-secure svg { width: 12px; height: 12px; }
@media (max-width: 639.98px), (max-height: 820px) {
  html #cart-drawer > div:first-child { padding-top: 8px; padding-bottom: 8px; }
  html #cart-drawer .bxc-ship { padding: 9px 16px; }
  html #cart-drawer .bxc-ship-msg { font-size: 13.5px; line-height: 1.35; }
  html #cart-drawer .bxc-ship-msg .bxc-truck { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }
  html #cart-drawer .bxc-bar { height: 5px; margin: 6px 0 5px; }
  html #cart-drawer .bxc-ship-eta { font-size: 11.5px; line-height: 1.35; }
  html #close-cart-btn { padding: 4px; }
  html #cart-drawer .bxc-items { padding: 10px 16px 2px; gap: 8px; }
  /* Item: the size chip sits beside the name, so each line holds one row of facts. */
  html #cart-drawer .bxc-item { gap: 10px; padding: 6px 8px 6px 6px; border-radius: 12px; }
  html #cart-drawer .bxc-thumb { width: 56px; height: 56px; border-radius: 9px; }
  html #cart-drawer .bxc-info { flex-flow: row wrap; align-items: center; gap: 6px; padding: 0 24px 0 0; }
  html #cart-drawer .bxc-name { padding-right: 0; font-size: 14.5px; line-height: 1.25; }
  html #cart-drawer .bxc-row { flex: 0 0 calc(100% + 24px); margin: 0 -24px 0 0; }
  html #cart-drawer .bxc-price { font-size: 14.5px; }
  html #cart-drawer .bxc-remove { top: 6px; right: 6px; }
  /* Upsell: one slim row */
  html #cart-drawer .bxc-up-li { margin-top: 0; }
  html #cart-drawer .bxc-upsell { gap: 10px; padding: 6px 10px 6px 6px; border-radius: 12px; }
  html #cart-drawer .bxc-up-thumb { width: 44px; height: 44px; }
  html #cart-drawer .bxc-up-body { gap: 4px; }
  html #cart-drawer .bxc-up-li .bxc-up-top { flex-wrap: nowrap; }
  html #cart-drawer .bxc-up-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
  html #cart-drawer .bxc-badge { flex: none; padding: 2px 7px; font-size: 10px; }
  html #cart-drawer .bxc-up-li .bxc-up-bottom { flex-wrap: nowrap; gap: 8px; }
  html #cart-drawer .bxc-pills button { padding: 3px 8px; font-size: 10.5px; }
  html #cart-drawer .bxc-up-price { font-size: 14px; }
  html #cart-drawer .bxc-add { padding: 5px 12px; font-size: 12.5px; }
  html #cart-drawer .bxc-summary { gap: 6px; padding: 8px 16px 10px; }
  html #cart-drawer .bxc-promo { padding: 6px 8px 6px 38px; border-radius: 11px; }
  html #cart-drawer .bxc-promo::before { left: 10px; font-size: 17px; }
  html #cart-drawer .bxc-promo-title { font-size: 14.5px; line-height: 1.15; }
  html #cart-drawer .bxc-promo-sub { font-size: 9.5px; line-height: 1.3; letter-spacing: .06em; }
  html #cart-drawer .bxc-promo button { padding: 6px 11px; font-size: 10.5px; }
  html #cart-drawer .bxc-code summary { font-size: 12.5px; }
  html #cart-drawer .bxc-summary .bxc-totals { padding-top: 7px; gap: 3px; }
  html #cart-drawer .bxc-summary .bxc-totals div { font-size: 13px; }
}
/* Free 2-Day shipping: a sheen runs along the bar, a knob pulses at its tip, the truck rolls and the
   goal shimmers. Once the order qualifies it all turns green, with a short glow the moment it does. */
html #cart-drawer .bxrf-ship .bxc-bar { position: relative; overflow: visible; background: #dbe7f8; }
html #cart-drawer .bxrf-ship .bxc-bar > span {
  position: relative; min-width: 8px; transition: width 1s var(--bxrf-ease);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent) -60px 0 / 60px 100% no-repeat, linear-gradient(90deg, var(--bxrf-navy-2), var(--bxrf-blue));
  animation: bxrf-sheen 2.6s ease-in-out infinite;
}
html #cart-drawer .bxrf-ship .bxc-bar > span::after {
  content: ""; position: absolute; top: 50%; right: -5px; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2.5px var(--bxrf-blue), 0 0 0 0 rgba(42, 106, 208, .45);
  animation: bxrf-knob 1.8s ease-out infinite;
}
@keyframes bxrf-sheen { 0%, 25% { background-position: -60px 0, 0 0; } 85%, 100% { background-position: calc(100% + 60px) 0, 0 0; } }
@keyframes bxrf-knob { 70%, 100% { box-shadow: 0 0 0 2.5px var(--bxrf-blue), 0 0 0 9px rgba(42, 106, 208, 0); } }
html #cart-drawer .bxrf-ship .bxc-truck { color: var(--bxrf-blue); animation: bxrf-drive 1.4s ease-in-out infinite; }
@keyframes bxrf-drive { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(2px, -1px); } 60% { transform: translate(1px, 0); } }
html #cart-drawer .bxrf-ship .bxc-ship-msg strong:not(.bxc-blue) {
  background: linear-gradient(100deg, var(--bxrf-ink) 0 40%, #5b9cff 50%, var(--bxrf-ink) 60% 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: bxrf-goal 3.6s ease-in-out infinite;
}
@keyframes bxrf-goal { 0%, 30% { background-position: 100% 0; } 75%, 100% { background-position: 0 0; } }
html #cart-drawer .bxrf-ship .bxc-blue { display: inline-block; color: var(--bxrf-blue); }
html #cart-drawer .bxrf-ship .bxc-blue.bxrf-tick { animation: bxrf-tick .55s var(--bxrf-ease); }
@keyframes bxrf-tick { 40% { transform: scale(1.16); } }
html #cart-drawer .bxrf-ship.is-free .bxc-bar > span { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent) -60px 0 / 60px 100% no-repeat, linear-gradient(90deg, #16a34a, #22c55e); }
html #cart-drawer .bxrf-ship.is-free .bxc-bar > span::after { right: 0; box-shadow: 0 0 0 2.5px #16a34a; animation: none; }
html #cart-drawer .bxrf-ship.is-free .bxc-truck { color: #16a34a; }
html #cart-drawer .bxrf-ship.is-free .bxc-ship-msg strong:not(.bxc-blue) { background-image: linear-gradient(100deg, #15803d 0 40%, #4ade80 50%, #15803d 60% 100%); }
html #cart-drawer .bxrf-ship.bxrf-unlock { animation: bxrf-glow 1.4s ease-out; }
html #cart-drawer .bxrf-ship.bxrf-unlock .bxc-ship-msg { animation: bxrf-tick .6s var(--bxrf-ease); }
@keyframes bxrf-glow { 0% { background-color: #dcfce7; } 100% { background-color: transparent; } }

/* Add-ons: mint cards that stand apart from the blue cart items and the sale banner. */
html #cart-drawer .bxc-upsell { border-color: #8fe3c0; background: linear-gradient(135deg, #f1fdf7, #d7f6e8); box-shadow: 0 10px 20px -16px rgba(4, 120, 87, .7); }
html #cart-drawer .bxc-upsell .bxc-up-thumb { background: #fff; box-shadow: inset 0 0 0 1px #c6efdc; }
html #cart-drawer .bxc-upsell .bxc-up-name { color: #064e3b; }
html #cart-drawer .bxc-upsell .bxc-badge { color: #fff; background: #0f9d6b; }
html #cart-drawer .bxc-upsell.bxrf-up2 .bxc-badge { color: #065f46; background: #fff; box-shadow: inset 0 0 0 1px #8fe3c0; }
html #cart-drawer .bxc-upsell .bxc-pills button { background: #fff; color: #065f46; box-shadow: inset 0 0 0 1px #bfead6; }
html #cart-drawer .bxc-upsell .bxc-pills button + button { margin-left: 4px; }
html #cart-drawer .bxc-upsell .bxc-pills { gap: 0; border-radius: 0; overflow: visible; }
html #cart-drawer .bxc-upsell .bxc-pills button { border-radius: 6px; }
html #cart-drawer .bxc-upsell .bxc-pills button.is-active { background: #065f46; color: #fff; box-shadow: none; }
html #cart-drawer .bxc-upsell .bxc-up-price { color: #064e3b; }
html #cart-drawer .bxc-upsell .bxc-add { color: #fff; background: linear-gradient(135deg, #10b981, #047857) !important; border-color: transparent !important; box-shadow: 0 8px 16px -10px rgba(4, 120, 87, .9); transition: transform .2s var(--bxrf-ease), filter .2s; }
html #cart-drawer .bxc-upsell .bxc-add:hover { filter: brightness(1.08); }
html #cart-drawer .bxc-upsell .bxc-add:active { transform: scale(.96); }
html #cart-drawer .bxrf-up2 { animation: bxrf-up-in .45s var(--bxrf-ease) both; }
@keyframes bxrf-up-in { from { opacity: 0; transform: translateX(14px); } }
/* Two add-ons: stacked where there's room, side by side to swipe on phones and short screens. */
html #cart-drawer .bxrf-up-rail { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 639.98px), (max-height: 820px) {
  html #cart-drawer .bxrf-up-rail:has(> .bxc-upsell + .bxc-upsell) {
    flex-direction: row; gap: 8px; margin: 0 -16px; padding: 2px 16px 4px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none;
  }
  html #cart-drawer .bxrf-up-rail::-webkit-scrollbar { display: none; }
  html #cart-drawer .bxrf-up-rail:has(> .bxc-upsell + .bxc-upsell) > .bxc-upsell { flex: 0 0 calc(100% - 30px); scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  html #cart-drawer .bxrf-ship *, html #cart-drawer .bxrf-ship, html #cart-drawer .bxrf-up2 { animation: none !important; }
  html #cart-drawer .bxrf-ship .bxc-bar > span { transition: none; }
}

/* Empty cart drawer: an icon, a short note, four popular products to add, then "Start shopping" */
html #cart-drawer .bxc-empty.bxrf-empty { justify-content: flex-start; padding: 26px 16px 22px; overflow-y: auto; overscroll-behavior: contain; }
.bxrf-empty-art {
  display: grid; place-items: center; flex: none; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; color: #fff;
  background: linear-gradient(135deg, var(--bxrf-navy-2), var(--bxrf-blue)); box-shadow: 0 18px 30px -16px rgba(42, 106, 208, .9);
  animation: bxrf-empty-bob 4s ease-in-out infinite;
}
@keyframes bxrf-empty-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
html #cart-drawer .bxrf-empty .bxc-empty-title { margin: 0 0 4px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--bxrf-ink); }
html #cart-drawer .bxrf-empty .bxc-empty-sub { margin: 0 0 14px; font-size: 13px; color: var(--bxrf-muted); }
.bxrf-empty-list { width: 100%; margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.bxrf-empty-list > li { animation: bxrf-up-in .45s var(--bxrf-ease) both; }
.bxrf-empty-list > li:nth-child(2) { animation-delay: .08s; }
.bxrf-empty-list > li:nth-child(3) { animation-delay: .16s; }
.bxrf-empty-list > li:nth-child(4) { animation-delay: .24s; }
html #cart-drawer .bxrf-empty .bxrf-empty-go {
  align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 46px;
  background: transparent !important; color: var(--bxrf-navy-2) !important; box-shadow: inset 0 0 0 1.5px #c9d8f0;
}
html #cart-drawer .bxrf-empty .bxrf-empty-go:hover { box-shadow: inset 0 0 0 1.5px var(--bxrf-blue); }
@media (prefers-reduced-motion: reduce) {
  .bxrf-empty-art, .bxrf-empty-list > li { animation: none !important; }
}

/* Short phone screens (Safari with its bars showing): drop the two lines that are nice to have. */
@media (max-height: 700px) {
  html #cart-drawer .bxc-foot .bxc-secure, html #cart-drawer .bxrf-earn { display: none; }
}
/* The chat bubble steps aside while the cart is open, so it never covers Checkout. */
html.bxrf-drawer-open #bcx-agent:not(.bcx-open) { opacity: 0; pointer-events: none; transform: scale(.85); }
/* "Your order wasn't placed" sheet (same look as the confirm step) */
.bxrf-notice .bxrf-confirm-sub { margin-bottom: 20px; color: #334155; line-height: 1.55; }
.bxrf-notice-go {
  flex: 1; display: flex; align-items: center; justify-content: center; height: 50px; border-radius: 999px;
  font-size: 15px; font-weight: 700; color: #fff !important; text-decoration: none !important;
  background: linear-gradient(135deg, var(--bxrf-navy-2), var(--bxrf-blue));
}

/* The confirm dialog (bottom sheet on phones, centred card on desktop) */
.bxrf-confirm { position: fixed; inset: 0; z-index: 2147483001; display: flex; align-items: flex-end; justify-content: center; }
.bxrf-confirm[hidden] { display: none; }
.bxrf-confirm-scrim { position: absolute; inset: 0; background: rgba(6, 14, 32, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .22s ease; }
.bxrf-confirm.is-open .bxrf-confirm-scrim { opacity: 1; }
.bxrf-confirm-card {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 92%; overflow: hidden; outline: none;
  padding: 22px 20px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: #fff; color: #0f172a;
  box-shadow: 0 -18px 50px -20px rgba(6, 14, 32, .5);
  transform: translateY(100%); transition: transform .35s var(--bxrf-ease);
}
.bxrf-confirm.is-open .bxrf-confirm-card { transform: none; }
@media (min-width: 640px) {
  .bxrf-confirm { align-items: center; padding: 24px; }
  .bxrf-confirm-card { border-radius: 22px; padding: 26px 26px 22px; transform: translateY(16px) scale(.98); opacity: 0; transition: transform .3s var(--bxrf-ease), opacity .2s ease; }
  .bxrf-confirm.is-open .bxrf-confirm-card { opacity: 1; }
}
.bxrf-confirm h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.bxrf-confirm-sub { margin: 6px 0 16px; font-size: 14px; color: #64748b; }
.bxrf-confirm-row { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: #334155; cursor: pointer; }
.bxrf-confirm-row input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--bxrf-navy-2); cursor: pointer; }
.bxrf-confirm-row strong { color: #0f172a; }
.bxrf-confirm-legal { margin: 4px 0 18px; font-size: 12.5px; line-height: 1.55; color: #94a3b8; }
.bxrf-confirm-legal a { color: #64748b; text-decoration: underline; }
.bxrf-confirm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* The buttons stay in view; only the statements scroll if a screen is very short. */
.bxrf-confirm-actions { flex: none; display: flex; align-items: center; gap: 12px; padding-top: 2px; }
.bxrf-confirm-body + .bxrf-confirm-actions { padding-top: 12px; box-shadow: 0 -1px 0 #eef2f7; }
@media (max-width: 639.98px) {
  .bxrf-confirm-card { padding: 18px 18px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .bxrf-confirm h2 { font-size: 20px; }
  .bxrf-confirm-sub { margin: 4px 0 12px; font-size: 13px; }
  .bxrf-confirm-row { gap: 10px; margin-bottom: 10px; font-size: 13px; line-height: 1.45; }
  .bxrf-confirm-row input { width: 20px; height: 20px; margin-top: 0; }
  .bxrf-confirm-legal { margin: 2px 0 10px; font-size: 11.5px; line-height: 1.45; }
}
.bxrf-confirm-cancel { flex: none; height: 50px; padding: 0 18px; border: 0; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: 15px; font-weight: 600; cursor: pointer; }
.bxrf-confirm-ok { flex: 1; }

/* Checkout: Express Check-Out band */
.bxrf-xp {
  position: relative; margin: 0 0 22px; padding: 16px 16px 14px; border-radius: 20px; background: #fff;
  box-shadow: 0 0 0 1px #e2e8f0, 0 18px 36px -28px rgba(10, 31, 68, .5);
}
.bxrf-xp.is-hot { box-shadow: 0 0 0 2px var(--bxrf-blue), 0 18px 36px -24px rgba(42, 106, 208, .6); animation: bxrf-hot 1.6s var(--bxrf-ease) 2; }
@keyframes bxrf-hot { 50% { box-shadow: 0 0 0 6px rgba(42, 106, 208, .25), 0 18px 36px -24px rgba(42, 106, 208, .6); } }
.bxrf-xp-h { margin: 0; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bxrf-navy-2); }
.bxrf-xp-sub { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 12px; font-size: 12.5px; color: #64748b; white-space: nowrap; }
.bxrf-xp-sub > svg { flex: none; }
.bxrf-xp-sub > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bxrf-xp-or { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 12px; color: #94a3b8; }
.bxrf-xp-or::before, .bxrf-xp-or::after { content: ""; flex: 1; height: 1px; background: #e2e8f0; }
.bxrf-xp-sub b { color: #15803d; }
.bxrf-placing {
  position: fixed; z-index: 2147483002; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); translate: -50% 0;
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: #fff; background: rgba(11, 21, 48, .92);
  box-shadow: 0 18px 40px -16px rgba(6, 14, 32, .7);
}
.bxrf-placing[hidden] { display: none; }
/* While a cart-drawer order is on its way nothing else can be tapped, and the note sits in the middle. */
.bxrf-veil { position: fixed; inset: 0; z-index: 2147483000; background: rgba(6, 14, 32, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.bxrf-veil[hidden] { display: none; }
html.bxrf-paying .bxrf-placing { top: 50%; bottom: auto; translate: -50% -50%; }
/* Confirm step: the email subscription that comes with an order placed from the drawer */
.bxrf-confirm-note { margin: 0 0 12px; padding: 8px 11px; border-radius: 10px; background: #f3f7fe; font-size: 12.5px; line-height: 1.45; color: #334155; }
.bxrf-confirm-note[hidden] { display: none; }
.bxrf-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: bxrf-spin .7s linear infinite; }
.bxrf-xpbar {
  position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  padding: 8px; border-radius: 999px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 18px 40px -16px rgba(10, 31, 68, .5);
  animation: bxrf-rise .45s var(--bxrf-ease) both;
}
.bxrf-xpbar[hidden] { display: none; }
@media (min-width: 1024px) { .bxrf-xpbar { left: auto; right: 24px; width: 380px; } }
html.bxrf-xpbar-on #bcx-agent { transform: translateY(-78px); }

/* ---------- 7. Footer ----------------------------------------------- */
footer.bxrf-foot {
  position: relative; overflow: hidden;
  background: radial-gradient(60% 80% at 12% 0%, rgba(42, 106, 208, .22), transparent 60%), radial-gradient(50% 70% at 100% 100%, rgba(42, 106, 208, .12), transparent 60%), #0a1f44 !important;
}
footer.bxrf-foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(120, 170, 240, .65), transparent);
}
footer.bxrf-foot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%);
}
footer.bxrf-foot > div { position: relative; z-index: 1; }
footer.bxrf-foot .bx-logo--light .bx-logo-name { color: #fff !important; }
footer.bxrf-foot .bx-logo--light .bx-logo-sub { color: #8fb6ee !important; }
footer.bxrf-foot h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px !important; font-weight: 700 !important; letter-spacing: .12em; text-transform: uppercase; color: #cfdcf2 !important;
}
footer.bxrf-foot h3::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #5aa6f2, #2a6ad0); }
footer.bxrf-foot ul a, footer.bxrf-foot a[href^="mailto"] {
  position: relative; display: inline-flex; color: rgba(255, 255, 255, .72) !important;
  transition: color .2s ease, transform .25s var(--bxrf-ease) !important;
}
footer.bxrf-foot ul a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #5aa6f2, rgba(90, 166, 242, 0)); transition: transform .35s var(--bxrf-ease);
}
footer.bxrf-foot ul a:hover, footer.bxrf-foot a[href^="mailto"]:hover { color: #fff !important; transform: translateX(3px); }
footer.bxrf-foot ul a:hover::after { transform: scaleX(1); }
footer.bxrf-foot a[href^="mailto"] svg, footer.bxrf-foot address ~ svg, footer.bxrf-foot .flex.items-start > svg {
  box-sizing: content-box; flex: none; padding: 7px; border-radius: 10px; color: #8fb6ee;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
footer.bxrf-foot span.flex.items-center.text-xs {
  padding: 6px 12px; border-radius: 999px; color: rgba(255, 255, 255, .8) !important;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
footer.bxrf-foot a[href^="mailto"] { display: flex; min-width: 0; overflow-wrap: anywhere; }
footer.bxrf-foot address { min-width: 0; }
@media (min-width: 640px) and (max-width: 1023.98px) {
  footer.bxrf-foot a[href^="mailto"] svg, footer.bxrf-foot .flex.items-start > svg { padding: 0; background: none; box-shadow: none; }
  footer.bxrf-foot a[href^="mailto"] { font-size: 13px; }
}
footer.bxrf-foot .bx-accept { padding-top: 6px; }
footer.bxrf-foot .bx-paycard { transition: transform .25s var(--bxrf-ease); }
footer.bxrf-foot .bx-paycard:hover { transform: translateY(-2px); }
footer.bxrf-foot > div > p:last-of-type, footer.bxrf-foot p.text-xs { letter-spacing: .02em; }

/* ---------- 8. Other pages ------------------------------------------ */

/* About: cards lift, steps get a connecting line */
.bx-about-card, .bx-about-stat { transition: transform .35s var(--bxrf-ease), box-shadow .35s var(--bxrf-ease), border-color .3s !important; }
@media (hover: hover) and (pointer: fine) {
  .bx-about-card:hover, .bx-about-stat:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(26, 58, 120, .5) !important; border-color: rgba(42, 106, 208, .35) !important; }
  .bx-about-card:hover .bx-about-icon { transform: rotate(-8deg) scale(1.08); }
}
.bx-about-icon { transition: transform .35s var(--bxrf-ease); }
.bx-about-stat strong { font-variant-numeric: tabular-nums; background: linear-gradient(100deg, #0b1530, #2a6ad0); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.bx-about-steps { position: relative; }
.bx-about-steps > li { position: relative; transition: transform .35s var(--bxrf-ease), box-shadow .35s var(--bxrf-ease) !important; }
.bx-about-steps > li:hover { transform: translateX(4px); }
.bx-about-num { box-shadow: 0 0 0 5px rgba(42, 106, 208, .12), 0 8px 16px -8px rgba(42, 106, 208, .8); }

/* FAQ: open question is clearly marked */
.bxfaq-item { transition: box-shadow .3s ease, border-color .3s ease, transform .3s var(--bxrf-ease) !important; }
.bxfaq-item:has(.bxfaq-q[aria-expanded="true"]) { border-color: rgba(42, 106, 208, .45) !important; box-shadow: 0 18px 36px -26px rgba(26, 58, 120, .5), inset 3px 0 0 var(--bxrf-blue) !important; }
.bxfaq-q[aria-expanded="true"] { color: var(--bxrf-navy-2) !important; }
.bxfaq-ic { transition: transform .35s var(--bxrf-ease), background-color .25s !important; }
.bxfaq-q[aria-expanded="true"] .bxfaq-ic { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .bxfaq-item:hover { transform: translateY(-2px); } }

/* Contact: cards lift, icon tiles turn blue */
[data-channel-card] { transition: transform .35s var(--bxrf-ease), border-color .3s, box-shadow .3s !important; }
@media (hover: hover) and (pointer: fine) { [data-channel-card]:hover { transform: translateY(-4px); } }
[data-channel-card]:hover > div:first-child { background: linear-gradient(135deg, var(--bxrf-navy-2), var(--bxrf-blue)) !important; color: #fff; }
[data-channel-card]:hover > div:first-child svg { color: #fff !important; stroke: #fff; }

/* Empty cart: black buttons match the site's navy */
.woocommerce-cart main a.bg-\[\#1A1A1A\], .woocommerce-cart main a.bg-black,
.woocommerce-cart main a.bg-\[\#111\], .woocommerce-cart main button.bg-black { background: linear-gradient(135deg, #213b66, #2c5291) !important; border-color: transparent !important; color: #fff !important; }

/* ---------- 9. Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bg-gradient-to-r.bg-clip-text.text-transparent,
  .single-product main > section:first-child h1,
  .bxrf-auth-on .bx-login-art > img, .bxrf-auth-band img, .bxrf-auth-on .bx-login-art::after,
  .bxrf-flip-btn.hint, .bxrf-skel, .bxrf-fx i, .bxrf-fx b, .bxrf-fx img, .bxrf-glow::before, .bxrf-reset-ic, .bxrf-reset-ic svg, .bxrf-reset-h,
  .bxrf-coa-on main > section:first-child::after, .bxrf-live i, .bxrf-tl li.is-current > i, .bxrf-auth-band::after { animation: none !important; }
  .bxrf-r .bxrf-wait { opacity: 1; transform: none; }
  [data-bx-card], [data-bx-card] *, .bxrf-flip-box > img, .bxrf-coa-face, .bxrf-viewer-sheet, .bxrf-buybar, .bxrf-lots-panel { transition-duration: .01ms !important; }
}
@media print { .bxrf-r .bxrf-wait { opacity: 1; transform: none; } .bxrf-buybar, .bxrf-flip-btn, .bxrf-flip-tabs { display: none !important; } }

/* ---------- Half-screen and laptop windows: site chrome, home, shop ---------- */

/* Footer, 768-1023px: beside the logo the Contact column was only ~125-160px and the email broke
   mid-word ("info@biocollexr / esearch.com"). Up to 899px the logo and blurb take their own row
   (as the theme does below 768px); from 900px the link columns keep at least 520px beside them. */
@media (min-width: 768px) and (max-width: 899.98px) {
  footer.bxrf-foot .md\:grid-cols-12 { grid-template-columns: minmax(0, 1fr); }
  footer.bxrf-foot .md\:grid-cols-12 > :is(.md\:col-span-4, .md\:col-span-8) { grid-column: 1 / -1; }
}
@media (min-width: 900px) and (max-width: 1023.98px) {
  footer.bxrf-foot .md\:grid-cols-12 { grid-template-columns: minmax(0, 1fr) minmax(520px, 2fr); }
  footer.bxrf-foot .md\:grid-cols-12 > :is(.md\:col-span-4, .md\:col-span-8) { grid-column: auto; }
}
/* Footer link columns from 640px: Navigation and Legal take the width of their links and the
   spare room goes between the columns, so Contact always fits "info@biocollexresearch.com" on
   one line (it wrapped as "...research.co / m" at 1280px) and the address keeps "Suite C" whole. */
@media (min-width: 640px) {
  footer.bxrf-foot .md\:col-span-8.grid { grid-template-columns: repeat(3, auto); justify-content: space-between; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  footer.bxrf-foot .md\:col-span-8.grid { column-gap: 24px; }
}
/* Footer bottom, from 768px: the trust badges sat on the left beside an empty slot while
   "We Accept" and the copyright under them are centred; all three rows now share the centre. */
@media (min-width: 768px) {
  footer.bxrf-foot .sm\:justify-between > .md\:justify-end:empty { display: none; }
  footer.bxrf-foot .sm\:justify-between:has(> .md\:justify-end:empty),
  footer.bxrf-foot .sm\:justify-between:has(> .md\:justify-end:empty) > :first-child { justify-content: center; }
}

/* Newsletter card, 1024-1179px: a little more room for the text column so the heading stays on
   one line instead of "Subscribe to our / Newsletter", and the line under it wraps evenly
   instead of leaving "updates." alone. */
@media (min-width: 1024px) and (max-width: 1179.98px) {
  main div.rounded-3xl > .grid.lg\:grid-cols-2:has(form.lg\:flex input[type="email"]) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  main div.rounded-3xl > .grid.lg\:grid-cols-2:has(form.lg\:flex input[type="email"]) h2 + p { text-wrap: balance; }
}

/* Home hero, laptops: the headline is sized to its column so it always reads as two lines,
   "Precision Research," / "Verified Every Batch." (four lines at 1024px, "Batch." alone at 1280px). */
@media (min-width: 1024px) {
  .home section:has(> .bx-hero-stage) h1 { font-size: clamp(40px, calc(4.85vw - 6px), 60px); }
}
/* Both hero buttons stay side by side (they stacked below ~1115px): they may shrink a little,
   and from ~1115px they are the theme's 240px again. */
@media (min-width: 1024px) {
  .home section:has(> .bx-hero-stage) a.group.sm\:w-60 { flex: 1 1 0; width: auto; max-width: 240px; }
}
/* The three hero vials ran past the right edge of the window (GHK-Cu cap cut off) below 1440px. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .home .bx-hero-stage > div { scale: 1.2; }
}

/* Home "Our Promise" (640-767px only): three cards side by side instead of three full-width rows
   that were empty on their right half. */
@media (min-width: 640px) and (max-width: 767.98px) {
  .home section.md\:hidden .grid.grid-cols-1.gap-2\.5 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; position: relative; }
  .home section.md\:hidden .grid.grid-cols-1.gap-2\.5 > .relative > .flex { height: 100%; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 14px 16px 26px; }
  .home section.md\:hidden .grid.grid-cols-1.gap-2\.5 p.font-bold { text-wrap: balance; } /* no "?" alone on a line */
  /* The "?" bubble is as wide as the row of cards (as it was as wide as the full-width card),
     not squeezed into one 188px card; its arrow moves over by the card's column, so it still
     points at the "?" (the theme measures the arrow from the card's left edge). */
  .home section.md\:hidden .grid.grid-cols-1.gap-2\.5 > .relative { position: static; }
  .home section.md\:hidden .grid.grid-cols-1.gap-2\.5 > :nth-child(2) .bx-tip::after { left: calc(var(--bx-tip-x, 50%) + (100% - 20px) / 3 + 10px); }
  .home section.md\:hidden .grid.grid-cols-1.gap-2\.5 > :nth-child(3) .bx-tip::after { left: calc(var(--bx-tip-x, 50%) + (100% - 20px) * 2 / 3 + 20px); }
}

/* Home "Featured Products" carousel: the theme shows 8 cards per view from 1024px (6 from 768px,
   4 from 640px), so on laptops and half-screen windows a card was 82-123px wide and clipped its own
   price ("$63.7"). Fewer, wider cards per view; snapping and the arrows are unchanged. Below 768px
   the theme has no arrows, so part of a fourth card stays in view to show that the row scrolls. */
@media (min-width: 640px) and (max-width: 767.98px) { .home [data-bx-card].snap-start { flex-basis: calc((100% - 48px) / 3.35); } }
@media (min-width: 768px) and (max-width: 899.98px) { .home [data-bx-card].snap-start { flex-basis: calc((100% - 32px) / 3); } }
@media (min-width: 900px) and (max-width: 1023.98px) { .home [data-bx-card].snap-start { flex-basis: calc((100% - 48px) / 4); } }
@media (min-width: 1024px) and (max-width: 1279.98px) { .home [data-bx-card].snap-start { flex-basis: calc((100% - 64px) / 5); } }
@media (min-width: 1280px) and (max-width: 1599.98px) { .home [data-bx-card].snap-start { flex-basis: calc((100% - 80px) / 6); } }

/* Shop, 640-1023px: three products per row instead of two giant cards (440x730px at 960px);
   the page was 10,159px tall at 960px against 4,441px at 1280px. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .woocommerce-shop main .grid.grid-cols-2.lg\:grid-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* With three per row from 640px the theme's 20px card padding left 120px for the text at 640px,
   too little for "BACTERIOSTATIC" or "From $85.00 $63.75"; the phone padding (12px) up to 767px. */
@media (min-width: 640px) and (max-width: 767.98px) {
  .woocommerce-shop main .grid.grid-cols-2.lg\:grid-cols-4 [data-bx-card] > .flex-grow { padding-left: 12px; padding-right: 12px; }
}

/* ---------- Product page: half-screen and laptop windows (2.1 audit) ---------- */

/* One-column range (640-1023): the Vial/COA box spanned the window, so the flip arrows sat at the
   window edges, 80-270px away from the vial. The box now wraps the vial plus 24px a side, like on
   phones; the certificate card (as tall as the vial, 8.5:11) still clears the arrows by ~18px.
   Swiping still works: the swipe zone is this box plus 20px. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .single-product .bx-pdp-stage > .bxrf-flip-box { width: auto; padding: 0 24px; }
}

/* Two columns from 1024px: when the vial column is narrower than the vial is tall (1024-1150px
   windows) the certificate card was squeezed to about 247x445. Size it from the width instead so it
   keeps the 8.5:11 page shape. clamp(360px, 58vh, 600px) is the desktop vial height (section 3). */
@media (min-width: 1024px) {
  .single-product .bxrf-hero .bxrf-coa-face {
    height: auto; width: min(calc(100% - 96px), calc(clamp(360px, 58vh, 600px) * 8.5 / 11));
  }
}

/* One-size products (Semax, BAC water): from 1024px a lone, already-selected "10mg" button sat
   under the "Size: 10mg" pill. The theme hides it below 1024px (div:has(> .bx-swatch:only-child));
   do the same here so the buying column reads title, pills, price. */
@media (min-width: 1024px) {
  .single-product .bxrf-hero > .bxrf-hero-sizes:has(.bx-swatch:only-child) { display: none; }
}

/* Short laptop windows (1366x768, 1280x720, 1100x700, 1024x768): the chat bubble in the corner sat
   on the right end of Add to cart. The buying block stops 34px short of it. Taller or wider windows
   already have the button clear of the bubble. */
@media (min-width: 1024px) and (max-width: 1499.98px) and (max-height: 860px) {
  .single-product .bxrf-hero > .bxrf-hero-buy { padding-right: 34px; }
}

/* Sticky "Add to cart" bar on half-screen windows and tablets: a centred pill instead of a
   window-wide strip with the price in one corner and the button in the other. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .bxrf-buybar { left: max(10px, calc(50% - 260px)); right: max(10px, calc(50% - 260px)); }
}

/* "Frequently bought together": the theme fits 6 cards per view from 768px and 8 from 1024px, which
   squeezed each card to 80-120px (prices and names cut off, "Add to cart" on two lines). Fewer,
   wider cards per view; the row still scrolls. 1rem is the row's gap. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .single-product .snap-x > [data-bx-card] { flex-basis: max(136px, calc((100% - 3rem) / 4)); }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .single-product .snap-x > [data-bx-card] { flex-basis: max(136px, calc((100% - 4rem) / 5)); }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .single-product .snap-x > [data-bx-card] { flex-basis: calc((100% - 5rem) / 6); }
}

/* Product notes hidden by productFacts() (the theme styles these lines as flex/grid) */
.single-product #product-description-panel [hidden], .single-product #coa [hidden] { display: none !important; }