/* OMNIX BIOSCIENCE — CANADA. Pink accent for hover/selected states (retune here). */
:root {
  --brand: #2c6f7b;        /* logo teal (sampled #4e99a6, darkened for contrast) */
  --brand-deep: #21545d;   /* button hover */
  --brand-dark: #353e4b;   /* logo charcoal */
  --brand-light: #62a9b5;
  --brand-tint: #edf7f9;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --surface: #f8fafc;
  --highlight: #d1ebef;    /* SELECTED-STATE teal highlight */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; color: var(--ink); background: #fff; line-height: 1.5; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* Header */
.topbar { background: var(--brand-dark); color: #fff; text-align: center; font-size: 14px; padding: 8px 16px; }
header.site { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--line); }
.nav-row { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { font-weight: 800; font-size: 21px; letter-spacing: -0.5px; color: var(--brand-dark); }
.logo span { color: var(--brand); }
nav.main { display: flex; gap: 24px; }
nav.main a { font-size: 15px; font-weight: 500; color: var(--ink); }
nav.main a:hover, nav.main a.active { color: var(--brand); }
.cart-link { position: relative; padding: 8px; display: inline-flex; }
.cart-count { position: absolute; top: -2px; right: -2px; background: var(--brand); color: #fff; font-size: 12px; border-radius: 50%; width: 18px; height: 18px; display: none; align-items: center; justify-content: center; }
.cart-count.show { display: flex; }
.menu-btn { display: none; background: none; border: 0; font-size: 24px; cursor: pointer; color: var(--brand-dark); padding: 6px 8px; line-height: 1; }
/* Checkout on a phone: one column, summary under the form. The page sets the
   two-column grid inline, so this needs !important to win. (2 Oct 2026) */
@media (max-width: 760px) {
  #cogrid { grid-template-columns: 1fr !important; gap: 28px !important; }
  #cogrid .form .two { grid-template-columns: 1fr 1fr; }
  .reqform .two { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  nav.main { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; gap: 0; padding: 8px 16px; }
  nav.main.open { display: flex; }
  nav.main a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .menu-btn { display: block; }
}

/* Hero */
/* Hero — two layouts on purpose.
   DESKTOP is the original and stays exactly as it was: copy ranged left over
   the vial lineup, the photo washed back by a left-to-right white gradient.
   It works because a wide screen has a left and a right to put them in.
   MOBILE doesn't. There the same overlay put the headline straight on the
   glass, so the phone stacks instead: centred copy on clean ground, product
   in a band underneath at full strength. Nothing overlaps at either size.

   Cost of doing it this way: a phone still downloads the desktop background
   (88KB) to then hide it. Not worth a second request or a <picture> element
   to avoid at that size. */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fdfdfd 0%, #f7f8fc 55%, #eef1f8 100%); }
/* The image is held to the SAME 1100px column as the text, not bled to the
   window edge. Pinned right with `inset: 0`, the vials sat hard against the
   screen while the headline stopped at the content column — 426px of dead
   space on the left and 38px on the right at 1920, and 746 vs 51 at 2560. The
   whole hero read as shoved to one side, because it was.
   Matching the column gives equal margins at any width and puts the vials
   directly beside the copy instead of a screen-width away from it. */
.hero img.bg {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1100px;   /* == .wrap */
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
/* The veil has to sit on the SAME column as the photo it is veiling. Left at
   `inset: 0` it spanned the whole window, so it whitened the empty space to
   the left of the column but not the space to the right — measurably
   different colours either side (#ffffff vs #f9f9fc) and the reason the hero
   still looked weighted to one side after the image was centred. */
.hero .shade {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1100px;   /* == .wrap, == .hero img.bg */
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.97) 6%, rgba(255,255,255,0.88) 42%, rgba(255,255,255,0) 78%);
}
/* 16px of side padding, which the original omitted — .hero .inner is two
   classes to .wrap's one, so its padding shorthand was zeroing the horizontal
   value and letting text reach the edge on any window under 1100px. */
.hero .inner { position: relative; padding: 110px 16px; }
.hero .hero-logo { height: 92px; width: auto; display: block; margin-bottom: 24px; }
.hero h1 { font-size: 46px; line-height: 1.1; font-weight: 800; letter-spacing: -1px; color: var(--brand-dark); max-width: 560px; }
.hero p { margin-top: 16px; font-size: 19px; color: var(--muted); max-width: 480px; }
.hero .btn { margin-top: 24px; }
.hero-band { display: none; }

@media (max-width: 760px) {
  .hero { background: linear-gradient(180deg, var(--brand-tint) 0%, #f6fafb 46%, #fdfdfe 100%); text-align: center; }
  .hero img.bg, .hero .shade { display: none; }
  .hero .inner { padding: 34px 16px 26px; }
  .hero .hero-logo { height: 56px; margin: 0 auto 16px; }
  .hero h1 { font-size: 25px; letter-spacing: -0.3px; max-width: none; }
  .hero p { font-size: 16px; margin: 12px auto 0; max-width: none; }
  .hero .btn { margin-top: 18px; }
  /* 5.08:1 asset in a shorter box, so `cover` crops the sides evenly and the
     five vials stay whole and centred at every phone width. */
  .hero-band { display: block; height: 168px; overflow: hidden; }
  .hero-band img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
}

/* Buttons */
.btn { display: inline-block; font-weight: 700; font-size: 15px; border-radius: 8px; padding: 12px 24px; cursor: pointer; border: 2px solid transparent; transition: all .15s; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-deep); }
.btn-outline { border-color: var(--brand); color: var(--brand); background: #fff; }
.btn-outline:hover { background: var(--brand-tint); }
.btn:disabled, .btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
/* Stock badges: one green, one amber. Status colours, not brand colours. */
/* Plain text, no fill: it sits under the price and speaks for itself. */
.stockbadge { display: inline-block; font-size: 15px; font-weight: 700; line-height: 1.3; vertical-align: middle; }
.stockbadge.in { color: #1f7a4d; }
.stockbadge.oos { color: var(--brand-dark); }
.pd .shipnote .stockbadge { margin-top: 6px; }
.card .imgbox { position: relative; }
.reqbox { margin-top: 14px; }
.reqform { margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); display: grid; gap: 10px; max-width: 520px; }
.reqform label { display: block; font-size: 13px; font-weight: 600; color: var(--brand-dark); margin-bottom: 4px; }
.reqline { font-size: 14px; color: var(--muted); margin: 0; }
.reqline.ok { color: #1f7a4d; font-weight: 600; }
.card .onorder { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 4px 10px; background: #fff; color: var(--brand-dark); border: 1px solid var(--line); }
.btn-sm { padding: 8px 16px; font-size: 14px; }

/* Sections */
section.pad { padding: 64px 0; }
h2.sec { font-size: 26px; font-weight: 800; color: var(--brand-dark); text-align: center; margin-bottom: 32px; }
.pillars { background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%); }
.pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.pillar { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px 24px; text-align: center; transition: border-color .15s, box-shadow .15s, transform .15s; }
.pillar:hover { border-color: var(--brand-light); box-shadow: 0 6px 20px rgba(44,111,123,.10); transform: translateY(-2px); }
/* Emoji, not an SVG in a tinted tile — a colour emoji inside a teal square
   reads as two competing shapes; on its own it just reads as the icon. */
.pillar .icon { font-size: 34px; line-height: 1; margin: 0 auto 14px; }
.pillar h3 { color: var(--brand-dark); font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.pillar p { font-size: 15px; color: var(--muted); line-height: 1.5; }

/* Product grid & cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s; }
.card:hover { box-shadow: 0 4px 16px rgba(15,23,42,.08); border-color: var(--brand-light); }
.card .imgbox { aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; }
.card .imgbox img { object-fit: contain; width: 100%; height: 100%; }
.card .body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; position: relative; background: #fff; }
.badge { display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--brand); background: var(--brand-tint); border-radius: 99px; padding: 3px 10px; }
.card .name { font-weight: 600; font-size: 16px; line-height: 1.35; }
.card .name:hover { text-decoration: underline; }
.card .row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 8px; }
.price { font-weight: 700; color: var(--brand-dark); }
.price small { font-size: 12px; font-weight: 500; color: var(--muted); }

/* Filters (selected-state highlight preserved) */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chip { font-size: 14px; font-weight: 500; border: 1px solid var(--line); border-radius: 99px; padding: 7px 14px; cursor: pointer; background: #fff; transition: all .15s; }
.chip:hover { border-color: var(--brand-light); }
.chip.selected { border-color: var(--brand); background: var(--highlight); box-shadow: 0 0 0 2px var(--brand); color: var(--brand-dark); font-weight: 700; }
.search { width: 100%; max-width: 340px; font-size: 15px; border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px; margin-bottom: 16px; font-family: inherit; }
.search:focus, .input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--highlight); }

/* Product page */
.pd { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 48px 16px; align-items: start; }
@media (max-width: 800px) { .pd { grid-template-columns: 1fr; } }
.pd .imgbox { border: 1px solid var(--line); border-radius: 12px; background: #fff; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 12px; overflow: hidden; }
.pd .imgbox img { object-fit: contain; width: 100%; height: 100%; }
.pd h1 { font-size: 30px; font-weight: 800; color: var(--brand-dark); margin: 10px 0 0; }
.pd .bigprice { font-size: 26px; font-weight: 700; color: var(--brand); margin-top: 14px; }
.pd .shipnote { font-size: 14px; color: var(--muted); margin-top: 4px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.qty button { width: 38px; height: 42px; border: 0; background: #fff; font-size: 19px; cursor: pointer; }
.qty button:hover { background: var(--surface); }
.qty span { width: 40px; text-align: center; font-weight: 600; }
.buyrow { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; align-items: center; }
.pd h2 { font-size: 17px; font-weight: 700; color: var(--brand-dark); margin: 24px 0 8px; }
.pd ul { padding-left: 20px; font-size: 15px; color: var(--muted); }
.pd p.desc { font-size: 15px; color: var(--muted); margin-top: 8px; }
.ruo { margin-top: 28px; background: var(--surface); border-radius: 10px; padding: 16px; font-size: 13px; color: var(--muted); }

/* Cart / checkout */
table.cart { width: 100%; border-collapse: collapse; font-size: 15px; }
table.cart th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 10px 8px; border-bottom: 2px solid var(--line); }
table.cart td { padding: 14px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.cart img { width: 56px; height: 56px; object-fit: contain; background: var(--surface); border-radius: 8px; }
.rm { color: #dc2626; background: none; border: 0; cursor: pointer; font-size: 14px; }
.totals { margin-top: 20px; max-width: 340px; margin-left: auto; font-size: 15px; }
.totals .line { display: flex; justify-content: space-between; padding: 6px 0; }
.totals .grand { font-weight: 800; font-size: 19px; color: var(--brand-dark); border-top: 2px solid var(--line); margin-top: 6px; padding-top: 12px; }
.form { display: grid; gap: 14px; max-width: 560px; }
.form label { font-size: 14px; font-weight: 600; color: var(--brand-dark); display: block; margin-bottom: 4px; }
.input { width: 100%; font-size: 15px; border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px; font-family: inherit; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } }

/* Payment method cards (selected highlight preserved) */
.paycards { display: grid; gap: 10px; }
.paycard { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: all .15s; }
.paycard:hover { border-color: var(--brand-light); }
.paycard.selected { border-color: var(--brand); background: var(--highlight); box-shadow: 0 0 0 2px var(--brand); }
.paycard .t { font-weight: 700; font-size: 15px; color: var(--brand-dark); }
.paycard .d { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Payment instructions */
.paybox { border: 2px solid var(--brand); border-radius: 12px; padding: 20px; background: var(--brand-tint); margin-top: 20px; }
.paybox h3 { color: var(--brand-dark); font-size: 17px; margin-bottom: 8px; }
.paybox code { display: block; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 14px; word-break: break-all; margin: 6px 0 12px; }
.copybtn { font-size: 13px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--brand); color: var(--brand); background: #fff; cursor: pointer; }
.copybtn:hover { background: var(--brand-tint); }

/* Payment box (thank-you) */
.paybox .payamt { font-size: 16px; margin-bottom: 10px; }
.paybox .paylabel { font-size: 14px; font-weight: 600; color: var(--brand-dark); margin-bottom: 2px; }
.paybox code { font-size: 17px; font-weight: 600; color: var(--brand-dark); }
.paybox .paynote { font-size: 14px; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.secbox { margin-top: 14px; background: #fff; border: 2px solid var(--brand); border-radius: 10px; padding: 14px 16px; display: grid; gap: 10px; }
.secrow { display: flex; flex-direction: column; gap: 2px; }
.seclabel { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.secval { font-size: 21px; font-weight: 700; color: var(--brand-dark); line-height: 1.3; }
@media (max-width: 520px) { .secval { font-size: 19px; } }

/* FAQ */
.faq-item { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.faq-item button.q { width: 100%; text-align: left; background: #fff; border: 0; padding: 16px; font-size: 16px; font-weight: 600; color: var(--brand-dark); cursor: pointer; display: flex; justify-content: space-between; font-family: inherit; }
.faq-item .a { display: none; padding: 0 16px 16px; font-size: 15px; color: var(--muted); }
.faq-item.open .a { display: block; }
.faq-item.open button.q { background: var(--brand-tint); }

/* Footer */
/* Footer.
   Two bugs here, both now fixed.

   1. `footer .cols` is two selectors to `.wrap`'s one, so its own
      `padding: 48px 0` overrode the 16px of side padding the wrap provides.
      On desktop that is invisible — the wrap is a 1100px column centred in a
      wider window — but on a phone the wrap IS the viewport, so every line sat
      flush against both edges. Same bug the hero had. `.fine` had it too.

   2. The `2fr 1fr 1fr` split gave the brand column a 518px track while the
      paragraph inside it was capped at 300px, leaving a ~470px hole between
      the tagline and "Shop" on a wide screen.

   Centred now: brand block on its own row, the two link groups side by side
   underneath. There is no leftover space to distribute, so it holds together
   at 360px and at 2560px without a breakpoint doing the work. */
footer.site { background: var(--brand-dark); color: #cbd5e1; margin-top: 64px; }

footer .cols {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  align-items: start;
  text-align: center;
  column-gap: 80px;
  padding: 48px 16px 40px;
}
footer .cols > div:first-child {
  grid-column: 1 / -1;
  max-width: 560px;
  margin: 0 auto 34px;
}
/* logo-footer.png is the same dark wordmark with a transparent background, so
   it disappears against this panel — hence the white plate. Centred and given
   room, it reads as a badge rather than a sticker stuck on at the corner. */
footer .cols > div:first-child img {
  display: block;
  height: 68px; width: auto;
  margin: 0 auto 18px;
  background: #fff;
  border-radius: 10px;
  padding: 11px 24px;
}
footer .cols > div:first-child p { font-size: 14.5px; line-height: 1.65; }
footer h4 { color: #fff; font-size: 15px; margin-bottom: 12px; }
footer a { display: block; font-size: 14px; padding: 4px 0; color: #cbd5e1; }
footer a:hover { color: #fff; }

footer .fine {
  border-top: 1px solid rgba(255,255,255,.15);
  padding: 22px 16px 30px;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  max-width: 820px;   /* a narrower measure than the 1100 wrap — legal copy set
                         the full column width is a wall nobody reads */
}

@media (max-width: 480px) {
  footer .cols { column-gap: 28px; }
  footer h4 { font-size: 14px; }
  footer a { font-size: 13px; }
}

/* Age gate */
.gate-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.75); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.gate { background: #fff; border-radius: 16px; max-width: 420px; width: 100%; padding: 32px; text-align: center; }
.gate h2 { color: var(--brand-dark); font-size: 23px; margin-bottom: 8px; }
.gate p { font-size: 15px; color: var(--muted); margin-bottom: 18px; }
.gate .dob { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.gate .dob input { width: 80px; text-align: center; font-size: 17px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-family: inherit; }
.gate .err { color: #dc2626; font-size: 14px; margin-top: 10px; display: none; }

/* Toast */
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--brand-dark); color: #fff; font-size: 15px; padding: 12px 22px; border-radius: 99px; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 90; }
#toast.show { opacity: 1; }


/* v2 — merged product cards */
.cat-label { font-size: 12px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--brand); }
.card .blurb { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dosechip { font-size: 12px; font-weight: 600; color: var(--brand-dark); background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px; }
.dosechip.oos { opacity: .45; text-decoration: line-through; }

/* v2 — shop category sections */
.catsec { margin-top: 48px; }
.catsec:first-of-type { margin-top: 8px; }
.catsec h2 { font-size: 26px; font-weight: 800; color: var(--brand-dark); letter-spacing: -0.5px; }
.catsec p.catsub { font-size: 15px; color: var(--muted); margin: 4px 0 20px; }

/* v2 — variant selector on product page (selected-state highlight preserved) */
.variants { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.variant {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 18px; cursor: pointer;
  text-align: center; transition: all .15s; background: #fff; min-width: 92px;
}
.variant:hover { border-color: var(--brand-light); }
.variant.selected { border-color: var(--brand); background: var(--highlight); box-shadow: 0 0 0 2px var(--brand); }
.variant .vd { font-weight: 700; font-size: 15px; color: var(--brand-dark); }
.variant .vp { font-size: 13px; color: var(--muted); margin-top: 2px; }
.variant.oos { opacity: .45; cursor: not-allowed; }

/* v2 — promo code */
.promo-row { display: flex; gap: 8px; }
.promo-row .input { flex: 1; }
.promo-msg { font-size: 13px; margin-top: 6px; display: none; }
.promo-msg.ok { color: #16a34a; display: block; }
.promo-msg.bad { color: #dc2626; display: block; }
.totals .disc { color: #16a34a; }


/* CA — shop sidebar category layout */
.shoplayout { display: grid; grid-template-columns: 230px 1fr; gap: 36px; align-items: start; }
.sidenav { position: sticky; top: 96px; border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #fff; }
.sidenav h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); padding: 8px 10px 6px; }
.sidenav button { display: block; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 8px; padding: 9px 12px; font-size: 14.5px; font-weight: 500; color: var(--ink); cursor: pointer; font-family: inherit; transition: all .15s; }
.sidenav button:hover { background: var(--brand-tint); color: var(--brand); }
.sidenav button.selected { background: var(--highlight); border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); color: var(--brand-dark); font-weight: 700; }
.sidenav button small { color: var(--muted); font-weight: 400; float: right; }
.sidenav button.selected small { color: var(--brand); }
@media (max-width: 860px) { .shoplayout { grid-template-columns: 1fr; } .sidenav { position: static; display: flex; flex-wrap: wrap; gap: 6px; } .sidenav h3 { display: none; } .sidenav button { width: auto; border: 1px solid var(--line); border-radius: 99px; } .sidenav button small { display: none; } }


/* v3 — centered logo header (like the original Omnix site) */
.nav-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 96px; gap: 16px; }
.nav-grid nav.main { justify-self: start; }
.logo-center { justify-self: center; }
.logo-center img { height: 64px; width: auto; display: block; }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 8px; }
@media (max-width: 860px) {
  /* Three outer columns so the logo sits on the true centre of the bar rather
     than wherever the menu button and cart leave room. nav.main is absolutely
     positioned (it is the dropdown), so the items in flow are menu | logo |
     cart — one on each side, logo in the middle. */
  .nav-grid { min-height: 68px; grid-template-columns: 1fr auto 1fr; }
  .nav-grid .menu-btn { justify-self: start; }
  .logo-center img { height: 44px; }
  .nav-grid nav.main { position: absolute; top: 100%; left: 0; right: 0; }
}

/* v3 — promo banner */
/* Promo bar. Bigger than the general type bump gives it — this is the one
   line on the page whose whole job is to be noticed, and at 14.5px in a pale
   tint it was reading as a system notice rather than an offer. Deeper padding
   and a solid tint separate it from the header above it. */
.promobar {
  background: var(--highlight);
  color: var(--brand-dark);
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .1px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--brand-light);
}
@media (max-width: 560px) { .promobar { font-size: 15.5px; padding: 13px 16px; line-height: 1.4; } }
.promobar b { color: var(--brand); letter-spacing: .5px; }

/* v3 — larger product grid tiles */
.grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* v3.1 — larger product imagery + tidy card row */
.card .imgbox img { transform: scale(1.15); }
.card:hover .imgbox img { transform: scale(1.2); transition: transform .25s; }
.card .row .btn { white-space: nowrap; }
.card .price { font-size: 15px; line-height: 1.3; }
.pd .imgbox img { transform: scale(1.06); }

/* header search (all pages) */
.hdr-search input {
  width: 190px; font-size: 14.5px; border: 1px solid var(--line); border-radius: 99px;
  padding: 9px 16px; font-family: inherit; background: var(--surface); transition: all .15s;
}
.hdr-search input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 2px var(--highlight); width: 230px; }
@media (max-width: 1080px) { .hdr-search input { width: 130px; } .hdr-search input:focus { width: 160px; } }

/* Second product shot — the vial without its box.
   Nothing here activates until a variant carries an `image2`. Add the file to
   images/products/ and the field to data/catalog.json and both the card hover
   and the product-page thumbnails start working; no markup changes needed.

   Naming to use: the existing SKU plus "-vial", e.g.
     bpc-157-5-mg.jpg          (vial + box, already there)
     bpc-157-5-mg-vial.jpg     (vial only, to shoot)
   Same 900x900 square on white as the current set, or they will not sit
   evenly beside each other in the grid. */
.card .imgbox { position: relative; }
.card .imgbox img.alt {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .22s ease;
}
.card:hover .imgbox img.alt { opacity: 1; }

/* Product page: thumbnail strip under the main image. */
.pd-media { display: flex; flex-direction: column; gap: 12px; }
.pthumbs { display: flex; gap: 10px; }
.pthumb {
  width: 74px; height: 74px; padding: 4px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer; line-height: 0;
  transition: border-color .15s, box-shadow .15s;
}
.pthumb img { width: 100%; height: 100%; object-fit: contain; }
.pthumb:hover { border-color: var(--brand-light); }
.pthumb.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--highlight); }

/* Predictive search dropdown.
   Everything runs off DATA.products, which every page already loads for the
   cart and the cards — so there is no request to make and results appear on
   the keystroke. Positioned against the form, which is why the form is
   position:relative below. */
.hdr-search { position: relative; }
.ac {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; max-height: 62vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,23,42,.14);
  z-index: 60; padding: 6px;
}
.ac-row {
  display: grid; grid-template-columns: 42px 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px; border-radius: 8px;
  color: var(--ink); text-decoration: none;
}
/* .on is the keyboard cursor, :hover the mouse — same highlight for both, so
   the two ways of picking a row look identical. */
.ac-row:hover, .ac-row.on { background: var(--brand-tint); }
.ac-row img, .ac-noimg {
  width: 42px; height: 42px; border-radius: 6px;
  object-fit: contain; background: #fff; border: 1px solid var(--line);
}
.ac-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ac-name { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.ac-name b { color: var(--brand); }
.ac-cat {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-price { font-size: 13.5px; font-weight: 700; color: var(--brand-dark); white-space: nowrap; }
.ac-empty { padding: 14px 10px; font-size: 14px; color: var(--muted); text-align: center; }

/* Magnifier button — mobile only. */
.search-btn {
  display: none; background: none; border: 0; padding: 8px;
  cursor: pointer; color: var(--brand-dark); line-height: 0;
}

@media (max-width: 860px) {
  .search-btn { display: inline-flex; align-items: center; }

  /* The input drops out of the bar and becomes a panel under it. Absolute
     against header.site, which is already positioned (sticky), so the panel
     travels with the header when the page scrolls. */
  .hdr-search {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 20px rgba(15,23,42,.07);
    padding: 12px 16px 14px;
  }
  .hdr-search.open { display: block; }

  /* 16px is not a style choice: iOS Safari zooms the whole page in when a
     focused input's text is smaller than that, and the zoom does not undo
     itself when the field blurs. */
  .hdr-search input,
  .hdr-search input:focus { width: 100%; font-size: 17px; }

  /* In the panel the list flows under the input rather than floating, so it
     can use the full width and scroll inside the panel. */
  .ac {
    position: static; width: auto; margin-top: 10px;
    max-height: 58vh; box-shadow: none; border-radius: 10px;
  }
  .ac-row { padding: 10px 8px; }
  .ac-row img, .ac-noimg { width: 46px; height: 46px; }
  .ac-name { font-size: 15px; }
}

/* DoseIQ hand-off panel */
.dq-panel { margin-top: 24px; border: 1px solid var(--brand-light); background: var(--brand-tint); border-radius: 12px; padding: 18px 20px; }
.dq-panel .dq-t { font-weight: 800; font-size: 16px; color: var(--brand-dark); margin-bottom: 6px; }
.dq-panel p { font-size: 14.5px; color: var(--muted); margin-bottom: 14px; }
.dq-panel .dq-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; }

/* ------------------------------------------------------------------ mobile
   Two products per row on a phone, and short enough cards that four are on
   screen at once. The desktop grid is auto-fill/minmax(250px), which on a
   390px-wide phone resolves to ONE column — every product a full screen tall,
   and a customer scrolling past six things they might have bought.

   Everything here is subtraction: the category label and the blurb go (the
   name says it), the button becomes a slim full-width bar instead of sitting
   beside the price, and type steps down one notch. The image stays square —
   it is the thing being sold and the only reason to stop scrolling. */
@media (max-width: 700px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  .card { border-radius: 10px; }
  .card .body { padding: 10px 10px 12px; gap: 6px; }
  .card .cat-label,
  .card .blurb { display: none; }

  /* Two lines, then ellipsis. Without the clamp a long blend name pushes one
     card taller than its neighbour and the row below goes ragged. */
  .card .name {
    font-size: 14px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card .chips { gap: 4px; }
  .card .dosechip { font-size: 11px; padding: 1px 6px; }

  .card .row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 4px;
  }
  .card .price { font-size: 15px; font-weight: 700; }
  .card .row .btn {
    width: 100%;
    text-align: center;
    padding: 8px 6px;
    font-size: 13px;
    border-radius: 7px;
  }

  /* Trust row: 2x2 rather than four stacked full-width cards. */
  .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pillar { padding: 18px 12px; border-radius: 12px; }
  .pillar .icon { font-size: 28px; margin-bottom: 10px; }
  .pillar h3 { font-size: 15px; margin-bottom: 4px; }
  .pillar p { font-size: 13.5px; line-height: 1.4; }

  /* Section headings were sized for a 1100px column. */
  h2.sec { font-size: 21px; margin-bottom: 14px; }
  .pad { padding: 32px 0; }
}

/* Very narrow phones (SE, older Androids). Still two up — one column is the
   thing being fixed — just tighter. */
@media (max-width: 380px) {
  .grid { gap: 8px; }
  .card .body { padding: 8px; }
  .card .name { font-size: 13.5px; }
  .card .price { font-size: 14px; }
}

/* Shop page on a phone: the category headings and the space above them were
   sized for desktop, which made the shop feel heavier than the home page even
   with the same two-up product grid. Match the home page's section heading. */
@media (max-width: 700px) {
  .catsec { margin-top: 32px; }
  .catsec h2 { font-size: 21px; }
  .catsec p.catsub { font-size: 14px; margin: 2px 0 12px; }
  .search { margin-bottom: 12px; }
}

/* Back-to-products links on product, cart and checkout pages (20 Sep 2026). */
.shopback { font-size: 14px; margin: 10px 0 0; }
.shopback a { color: var(--brand); font-weight: 600; text-decoration: none; }
.shopback a:hover { text-decoration: underline; }
#toast.show { pointer-events: auto; }
#toast a { color: #fff; text-decoration: underline; font-weight: 600; }

/* ==================================================================
   PLATINUM — 13 Oct 2026.
   Everything for the Platinum look lives below this line, on top of the
   rules above. To go back to the old look, delete from here to the end
   (or restore tag before-platinum-2026-10-13). Build-doc:
   AI-Workspace/20 Build-Docs/2026-10-13 — Omnix — Platinum site restyle.md
   ================================================================== */
:root {
  --porcelain: #F3F5F4;   /* page */
  --mist: #E6EBEC;        /* product stage */
  --mist-deep: #D3DBDD;
  --ink: #101C22;         /* text, buttons, dark bands */
  --platinum: #C3CCCF;    /* hairlines and type on ink */
  --muted: #5A676D;
  --line: #DCE2E3;
  --surface: #F8FAF9;
  --brand: #1F5A63;       /* Omnix teal, darkened — the one accent */
  --brand-deep: #17454C;
  --brand-dark: #101C22;
  --brand-light: #8FB3B9;
  --brand-tint: #E8F0F1;
  --highlight: #DCE8EA;
  --display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --body: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
body { font-family: var(--body); background: var(--porcelain); color: var(--ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; }

/* Bars and header */
.topbar { background: var(--ink); color: var(--platinum); font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; padding: 9px 16px; }
header.site { background: rgba(243,245,244,.92); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--line); }
nav.main a { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
nav.main a:hover, nav.main a.active { color: var(--brand); }
.logo-center img { height: 56px; }
@media (max-width: 860px) { .logo-center img { height: 40px; } }
@media (max-width: 760px) { nav.main { background: var(--porcelain); } }
.hdr-search input { background: #fff; border-radius: 4px; font-size: 14px; }
.cart-count { background: var(--ink); }
.promobar { background: transparent; color: var(--muted); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; padding: 9px 16px; }
.promobar b { color: var(--ink); font-weight: 500; letter-spacing: .12em; }
@media (max-width: 560px) { .promobar { font-size: 11px; padding: 8px 16px; } }

/* Buttons: ink, squared, tracked capitals */
.btn { border-radius: 3px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 14px 26px; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--brand); }
.btn-outline { border: 1px solid var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-sm { padding: 9px 14px; font-size: 11px; }
.input, .search, .gate .dob input, .qty { border-radius: 3px; }

/* Headings */
h2.sec { font-family: var(--display); font-weight: 400; font-size: 38px; letter-spacing: -.01em; color: var(--ink); margin-bottom: 10px; }
.sec-eyebrow, .eyebrow { display: block; text-align: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.sec-sub { text-align: center; color: var(--muted); max-width: 560px; margin: 0 auto 36px; font-size: 15.5px; }
.catsec h2, .pd h1 { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; color: var(--ink); }
.catsec h2 { font-size: 32px; }
.pd h1 { font-size: 40px; line-height: 1.1; }
.pd h2 { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
.pd .bigprice { color: var(--ink); font-weight: 600; font-size: 28px; }
.cat-label { font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: .16em; color: var(--brand); }

/* Product stage. The current photos are on pure white; multiply blends that
   white into the mist so the vial stands on a soft grey stage instead of in a
   white box. REMOVE the three mix-blend-mode lines once the new Platinum
   photos (which carry their own background) are in. */
.card .imgbox, .pd .imgbox, .pthumb, table.cart img, .ac-row img { background: var(--mist); }
.card .imgbox { background: radial-gradient(120% 90% at 50% 30%, #F1F4F4 0%, var(--mist) 55%, var(--mist-deep) 100%); }
.pd .imgbox { background: radial-gradient(120% 90% at 50% 30%, #F1F4F4 0%, var(--mist) 55%, var(--mist-deep) 100%); border: 0; border-radius: 4px; }
.pthumb { border-radius: 3px; }

/* Vial first, box on hover — the mirrored box reflection is no longer the
   first thing a customer sees. Only applies where a vial-only shot exists. */
.card .imgbox:has(img.alt) img:not(.alt) { opacity: 0; transition: opacity .22s ease; }
.card .imgbox:has(img.alt) img.alt { opacity: 1; }
.card:hover .imgbox:has(img.alt) img:not(.alt) { opacity: 1; }
.card:hover .imgbox:has(img.alt) img.alt { opacity: 0; }

/* Cards */
.card { border-radius: 4px; border: 1px solid var(--line); background: #fff; }
.card:hover { box-shadow: 0 14px 30px -18px rgba(16,28,34,.35); border-color: var(--mist-deep); }
.card .body { background: #fff; }
.card .name { font-weight: 700; font-size: 15.5px; letter-spacing: .01em; }
.card .name:hover { text-decoration: none; color: var(--brand); }
.price { color: var(--ink); font-weight: 600; }
.dosechip { font-family: var(--mono); font-weight: 500; font-size: 11px; border-radius: 2px; background: var(--porcelain); color: var(--ink); }
.badge { border-radius: 2px; }

/* Chips, filters, sidebar, variants: squarer and quieter */
.chip { border-radius: 2px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: #fff; padding: 9px 14px; }
.chip:hover { border-color: var(--ink); }
.chip.selected, .variant.selected, .paycard.selected, .sidenav button.selected { box-shadow: 0 0 0 1px var(--brand); }
.sidenav { border-radius: 4px; }
.sidenav button { border-radius: 2px; }
.variant { border-radius: 3px; background: #fff; }
.variant .vd { font-family: var(--mono); font-weight: 500; }
.paycard, .reqform, .faq-item, .paybox, .secbox, .ruo, .dq-panel { border-radius: 4px; }
.ruo { background: var(--mist); }
.faq-item { background: #fff; }

/* Hero — one vial, lit, beside the copy */
.hero { background: var(--porcelain); }
.hero img.bg, .hero .shade, .hero .hero-logo, .hero-band { display: none; }
.hero .inner { padding: 0 16px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; min-height: 560px; }
.hero .copy { padding: 72px 0; }
.hero .copy .eyebrow { text-align: left; }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: 58px; line-height: 1.04; letter-spacing: -.015em; color: var(--ink); max-width: 560px; }
.hero p { font-size: 17.5px; color: var(--muted); max-width: 470px; margin-top: 20px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .ctas .btn { margin-top: 0; }
.hero .proofline { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hero .proofline span::before { content: ""; display: inline-block; width: 6px; height: 6px; border: 1px solid var(--brand); transform: rotate(45deg); margin-right: 9px; vertical-align: 1px; }
.hero .stage { position: relative; align-self: stretch; display: grid; place-items: center; background: radial-gradient(70% 60% at 55% 38%, #FBFCFC 0%, var(--mist) 58%, var(--mist-deep) 100%); overflow: hidden; }
.hero .stage::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(184,195,198,.35) 100%); border-top: 1px solid rgba(255,255,255,.7); }
.hero .stage::after { content: ""; position: absolute; left: 50%; bottom: 25%; width: 46%; height: 26px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(16,28,34,.32), rgba(16,28,34,0)); }
.hero .stage img { position: relative; z-index: 1; width: 78%; max-width: 440px; mix-blend-mode: multiply; margin-bottom: 7%; }
.hero .stage .lotnote { position: absolute; z-index: 2; right: 18px; bottom: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 860px) {
  .hero { text-align: left; background: var(--porcelain); }
  .hero .inner { grid-template-columns: 1fr; gap: 0; min-height: 0; padding: 0; }
  .hero .copy { padding: 36px 16px 28px; }
  .hero h1 { font-size: 36px; }
  .hero p { font-size: 16px; margin: 14px 0 0; }
  .hero .ctas { margin-top: 22px; }
  .hero .ctas .btn { flex: 1; text-align: center; }
  .hero .proofline { margin-top: 22px; font-size: 10.5px; }
  .hero .stage { height: 360px; order: -1; }
  .hero .stage img { width: auto; height: 92%; margin-bottom: 4%; }
}

/* Trust row: line icons on a hairline grid instead of emoji cards */
.pillars { background: var(--porcelain); }
.pillar-grid { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pillar { background: transparent; border: 0; border-radius: 0; text-align: left; padding: 30px 26px; border-left: 1px solid var(--line); }
.pillar:first-child { border-left: 0; }
.pillar:hover { box-shadow: none; transform: none; }
.pillar .icon { font-size: 0; width: 30px; height: 30px; margin: 0 0 16px; color: var(--brand); }
.pillar .icon svg { width: 30px; height: 30px; display: block; }
.pillar h3 { font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--ink); }
.pillar p { font-size: 14.5px; }
@media (max-width: 700px) {
  .pillar { padding: 20px 14px; border-left: 0; border-top: 1px solid var(--line); }
  .pillar:nth-child(-n+2) { border-top: 0; }
  .pillar:nth-child(even) { border-left: 1px solid var(--line); }
  .pillar .icon { width: 26px; height: 26px; margin-bottom: 10px; }
  .pillar .icon svg { width: 26px; height: 26px; }
}

/* Proof band — dark ink, platinum type */
.proof { background: var(--ink); color: var(--platinum); padding: 80px 0; }
.proof .eyebrow { color: var(--brand-light); }
.proof h2.sec { color: #fff; }
.proof .sec-sub { color: #9AA8AD; }
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(195,204,207,.22); }
.proof-grid > div { padding: 28px 28px 8px; border-left: 1px solid rgba(195,204,207,.22); display: grid; gap: 10px; align-content: start; }
.proof-grid > div:first-child { border-left: 0; padding-left: 0; }
.proof-grid .k { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-light); }
.proof-grid h3 { font-family: var(--display); font-weight: 400; font-size: 26px; color: #fff; line-height: 1.15; }
.proof-grid p { font-size: 14.5px; line-height: 1.6; color: #A9B5B9; max-width: 34ch; }
@media (max-width: 760px) {
  .proof { padding: 52px 0; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-grid > div { border-left: 0; padding: 22px 0 6px; border-top: 1px solid rgba(195,204,207,.22); }
  .proof-grid > div:first-child { border-top: 0; }
  .proof-grid h3 { font-size: 23px; }
}

/* Footer: ink, monochrome logo */
footer.site { background: var(--ink); color: #A9B5B9; margin-top: 0; }
footer .cols > div:first-child img { background: none; padding: 0; height: 58px; filter: brightness(0) invert(1); opacity: .92; }
footer h4 { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--platinum); }
footer a { color: #A9B5B9; }
footer .fine { border-top-color: rgba(195,204,207,.18); color: #8796A0; }
section.pad + footer.site, .proof + footer.site { margin-top: 0; }
main + footer.site, .wrap + footer.site { margin-top: 64px; }

/* Age gate and toast */
.gate-overlay { background: rgba(16,28,34,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.gate { border-radius: 4px; background: var(--porcelain); }
.gate h2 { font-family: var(--display); font-weight: 400; font-size: 30px; color: var(--ink); }
#toast { background: var(--ink); border-radius: 3px; }
.dq-panel { background: #fff; border-color: var(--line); }
.dq-panel .dq-t { font-weight: 700; color: var(--ink); }
/* hero stage sizing (vial stands on the floor line) */
nav.main a { white-space: nowrap; }
nav.main { gap: 20px; }
@media (max-width: 1080px) { nav.main { gap: 14px; } nav.main a { font-size: 12px; letter-spacing: .06em; } }
.hero .inner { min-height: 0; }
.hero .stage { display: flex; align-items: flex-end; justify-content: center; height: 600px; }
.hero .stage::before { height: 12%; }
.hero .stage::after { bottom: 9%; width: 34%; }
.hero .stage img { width: auto; height: 86%; max-width: none; margin-bottom: 2%; }
@media (max-width: 860px) {
  .hero .stage { height: 380px; }
  .hero .stage img { height: 90%; width: auto; margin-bottom: 1%; }
}
section.pillars { padding-top: 16px; }
.proof + footer.site .cols { border-top: 1px solid rgba(195,204,207,.14); }
@media (max-width: 560px) {
  .topbar { font-size: 10px; letter-spacing: .08em; }
  h2.sec { font-size: 30px; }
  .catsec h2 { font-size: 26px; }
  .pd h1 { font-size: 34px; }
}
.proof-cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.proof-cta a { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #fff; border-bottom: 1px solid var(--brand-light); padding-bottom: 4px; }
.proof-cta a:hover { color: var(--brand-light); }
@media (max-width: 760px) { .proof-grid p { max-width: 60ch; } }

/* Headline weight, 14 Oct 2026 — owner found the thin Bodoni hard to read.
   Heavier weight plus a small optical size: the small-size cut of Bodoni Moda
   has much thicker hairlines, so hyphens and thin strokes stay visible. */
h2.sec, .catsec h2, .pd h1, .hero h1, .gate h2, .proof-grid h3 {
  font-weight: 600;
  font-variation-settings: "opsz" 18;
  letter-spacing: 0;
}
.hero h1 { font-weight: 650; }

/* Real Platinum photos, 14 Oct 2026: the pictures carry their own studio
   background now, so no blending; the hero photo fills its stage. */
.hero .stage::before, .hero .stage::after { display: none; }
.hero .stage { display: block; padding: 0; background: #E6EBEC; }
.hero .stage img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 70%; margin: 0; mix-blend-mode: normal; }
@media (max-width: 860px) { .hero .stage img { width: 100%; height: 100%; margin: 0; } }
/* Narrow screens: size the stage to the photo so the whole vial and plinth
   always show (vial top sits at ~25% of the photo, plinth base at ~91%). */
@media (max-width: 860px) {
  .hero .stage { height: auto; aspect-ratio: 1200 / 980; }
  .hero .stage img { object-position: center 77%; }
}

/* Country bar (offer the other country's store; never a redirect) */
.geobar { position: relative; background: var(--mist); color: var(--ink); text-align: center; font-size: 13.5px; padding: 10px 44px; border-bottom: 1px solid var(--line); }
.geobar a { color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; }
.geobar button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 8px; }

/* US site (omnixbioscience.com), generated by tools/make-us-site.py.
   US stock is separate and there is no US backend yet: hide stock lines and
   the stock-request box until it exists. */
.stockbadge, #pstock, #reqbox, .card .onorder { display: none !important; }