/* ==========================================================================
   BioraX theme for OpenCart 4
   --------------------------------------------------------------------------
   Restyles OpenCart's default Bootstrap 5 markup in the BioraX brand.
   Loaded last in common/header.twig, so plain class selectors win over
   Bootstrap without needing !important.

   Lives under extension/ocmod/ (with the template overrides) so OpenCart
   upgrades, which overwrite the rest of the web root, never touch it.

   The design tokens below are the brand's single source: rebrand by editing
   the token block, not the rules.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  --canvas:        #f5f2ed;
  --canvas-2:      #ede9e2;
  --panel:         #e6e2da;
  --panel-2:       #ddd9d0;

  --ink:           #0e1312;
  --ink-muted:     #4d5552;
  --ink-faint:     #8a918e;

  --accent:        #0927f2;
  --accent-bright: #304af5;
  --accent-deep:   #e9f0ff;

  --line:          rgba(14, 19, 18, 0.12);
  --line-strong:   rgba(14, 19, 18, 0.22);

  --radius:        16px;
  --radius-sm:     10px;
  --pill:          1000px;

  --gutter:        clamp(1.25rem, 4vw, 2.5rem);
  --expo:          cubic-bezier(0.16, 1, 0.3, 1);

  --font-sans:     'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:  'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:     'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The parent site defaults to light and offers a toggle. Honour a viewer's
   OS preference here, and the same data-theme hook if it is ever wired up. */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas:      #0b0e0f;
    --canvas-2:    #0e1315;
    --panel:       #14191b;
    --panel-2:     #1a2124;
    --ink:         #f4f2ed;
    --ink-muted:   #a7adaa;
    --ink-faint:   #6b726f;
    --accent-bright: #4a68ff;
    --line:        rgba(244, 242, 237, 0.10);
    --line-strong: rgba(244, 242, 237, 0.20);
  }
}
html[data-theme="dark"] {
  --canvas: #0b0e0f;   --canvas-2: #0e1315;
  --panel: #14191b;    --panel-2: #1a2124;
  --ink: #f4f2ed;      --ink-muted: #a7adaa;  --ink-faint: #6b726f;
  --accent-bright: #4a68ff;
  --line: rgba(244, 242, 237, 0.10);
  --line-strong: rgba(244, 242, 237, 0.20);
}
html[data-theme="light"] {
  --canvas: #f5f2ed;   --canvas-2: #ede9e2;
  --panel: #e6e2da;    --panel-2: #ddd9d0;
  --ink: #0e1312;      --ink-muted: #4d5552;  --ink-faint: #8a918e;
  --accent-bright: #304af5;
  --line: rgba(14, 19, 18, 0.12);
  --line-strong: rgba(14, 19, 18, 0.22);
}

/* ----------------------------------------------------------------- base -- */
body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  height: auto;
  min-height: 100%;
}

/* ---------------------------------------------------------------------------
   Undo OpenCart's legacy sticky-footer hack.

   The default sheet does:
     #container { position: absolute; min-height: 100%; margin-bottom: 300px; }
     footer     { position: absolute; bottom: -1px; }

   That takes the footer out of normal flow and pins it to #container's bottom,
   so page content does not push it down — it simply overlaps whenever content
   reaches into the last footer-height pixels. It also hard-codes a 300px
   footer, and ours is taller.

   Replaced with a flex column: #container fills at least the viewport, <main>
   absorbs the slack, and the footer sits in normal flow at the end.
   --------------------------------------------------------------------------- */
html { height: 100%; }

#container {
  position: static;
  min-height: 100vh;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
#container > main { flex: 1 0 auto; }

footer {
  position: static;
  bottom: auto;
  width: auto;
  flex: 0 0 auto;
}

/* Part of the same hack: the default sheet pads the content columns by 400px
   (730px under 576px) purely to keep text clear of the pinned footer. With the
   footer back in flow that is just dead space — footer's own margin-top spaces
   it now. */
#content,
#column-left,
#column-right { padding-bottom: 0; }

#container > .container,
#content > .container,
main > .container,
.container {
  max-width: 1200px;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

a { color: var(--accent); text-decoration: none; transition: color .3s var(--expo); }
a:hover { color: var(--accent-bright); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1rem + 4.4vw, 4.25rem); line-height: 1.02; }
h2 { font-size: clamp(1.6rem, 1rem + 2vw, 2.5rem); line-height: 1.1; }
h3 { font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); line-height: 1.25; }
p  { color: var(--ink-muted); }

hr { border-color: var(--line); opacity: 1; }

::selection { background: var(--accent); color: var(--accent-deep); }

/* --------------------------------------------------------------- top bar -- */
/* Typography matches the main site's navbar — Geist sans at 14px, normal case.
   This bar used to be mono/uppercase/0.66rem, which read as a different
   typeface next to the rest of the site: mono is an accent the main site
   spends only on the PHR Portal link, never on navigation. */
nav#top {
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: normal;
  text-transform: none;
}
nav#top .container { padding-top: .7rem; padding-bottom: .7rem; }

/* Brand row: wordmark | main nav | store actions */
.biorax-topbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.biorax-topbar__links { margin-left: auto; }
.biorax-topbar__links .list-inline { margin: 0; }
nav#top,
nav#top a,
nav#top .btn-link,
nav#top .dropdown-toggle { color: var(--ink-faint); }
nav#top a:hover,
nav#top .btn-link:hover { color: var(--ink); }
nav#top .btn { border: 0; padding: 0 .35rem; font: inherit; letter-spacing: inherit; }
nav#top .list-inline-item { vertical-align: middle; }
/* stylesheet.css sizes these at 1.1em inside a 40px line box. Left alone that
   lands at 15.4px on a bar sized for 14px, so neutralise both and match the
   main site's 14px/20px. The bar's height comes from .container's padding. */
#top .list-inline-item > a,
#top .list-inline-item .dropdown > a {
  font-size: 1em;
  line-height: 1.25rem;
  padding: .25rem 0;
}

/* ------------------------------------------------------- primary nav -- */
/* Mirrors apps/web/resources/views/partials/navbar.blade.php: muted links that
   go solid on hover, an accent pill CTA, and the store's own tools kept
   visually quieter so there is only ever one menu to read. */
/* The wrap also carries Bootstrap's .collapse for the mobile toggle, and
   `.collapse:not(.show) { display: none }` is two classes — it outranks a bare
   .biorax-mainnav__wrap however late this file loads. Every display rule for this
   element is therefore qualified with nav#top to win on specificity. */
nav#top .biorax-mainnav__wrap {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: auto;
}
.biorax-mainnav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
nav#top .biorax-mainnav a { color: var(--ink-muted); transition: color .3s var(--expo); }
nav#top .biorax-mainnav a:hover { color: var(--ink); }
/* "Shop" is the page you are on — the main site has no equivalent state
   because its Shop link always points off-site. */
nav#top .biorax-mainnav a.is-current { color: var(--ink); }

/* Store utilities: icon-first, mono labels, one step quieter than the nav. */
.biorax-mainnav--store {
  gap: 1rem;
  padding-left: 1.75rem;
  border-left: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
nav#top .biorax-mainnav--store a { color: var(--ink-faint); }
nav#top .biorax-mainnav--store a:hover { color: var(--ink); }
.biorax-mainnav__label { display: none; }

.biorax-mainnav__actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; }

/* PHR — outlined accent pill, same as the main site's navbar button. */
nav#top .biorax-mainnav__phr {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  border: 1px solid rgba(9, 39, 242, .4);
  border-radius: var(--pill);
  padding: .5rem 1rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  transition: background .3s var(--expo);
}
nav#top .biorax-mainnav__phr:hover { background: rgba(9, 39, 242, .1); color: var(--accent); }
.biorax-mainnav__phr svg { width: .75rem; height: .75rem; }

/* CTA — the filled accent pill from .biorax-cta__btn at navbar scale. */
nav#top .biorax-mainnav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--accent-deep);
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  padding: .625rem 1.25rem;
  box-shadow: 0 0 0 1px rgba(9, 39, 242, .35), 0 18px 44px -20px rgba(9, 39, 242, .75);
  transition: transform .3s var(--expo), background .3s var(--expo);
}
nav#top .biorax-mainnav__cta:hover { background: var(--accent-bright); color: var(--accent-deep); transform: translateY(-2px); }

/* Hamburger — hidden once the full nav fits. */
.biorax-mainnav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.biorax-mainnav__toggle svg { width: 1.5rem; height: 1.5rem; }

/* Below the desktop breakpoint the nav collapses behind the hamburger and
   stacks full width. Bootstrap's .collapse handles the toggling; these rules
   only decide what "shown" looks like. */
@media (max-width: 991.98px) {
  .biorax-mainnav__toggle { display: inline-flex; }
  nav#top .biorax-mainnav__wrap {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    width: 100%;
    margin-left: 0;
    padding-top: .75rem;
  }
  /* Bootstrap toggles .show; .collapsing is the mid-animation state, which
     would otherwise fall back to display:none and make the panel jump. */
  nav#top .biorax-mainnav__wrap.show,
  nav#top .biorax-mainnav__wrap.collapsing { display: flex; }
  .biorax-mainnav { flex-direction: column; align-items: stretch; gap: 0; }
  .biorax-mainnav a { display: block; padding: .5rem 0; font-size: 1rem; }
  .biorax-mainnav--store {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: .75rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .biorax-mainnav--store a { padding: .25rem 0; }
  .biorax-mainnav__label { display: inline; margin-left: .4rem; }
  .biorax-mainnav__actions {
    flex-wrap: wrap;
    gap: .75rem;
    margin-left: 0;
    padding-top: .75rem;
    border-top: 1px solid var(--line);
  }
  .biorax-mainnav__cta { flex: 1 1 100%; padding: .75rem 1.25rem; }
}

/* Theme toggle — mirrors the main site's navbar button */
.biorax-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color .3s var(--expo), border-color .3s var(--expo);
}
.biorax-theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
.biorax-theme-toggle svg { width: .875rem; height: .875rem; }

/* Dark is the default, so the moon shows and the sun hides until data-theme
   flips. */
.theme-icon-light { display: none; }
html[data-theme="light"] .theme-icon-dark  { display: none; }
html[data-theme="light"] .theme-icon-light { display: block; }
@media (prefers-color-scheme: light) {
  html:not([data-theme]) .theme-icon-dark  { display: none; }
  html:not([data-theme]) .theme-icon-light { display: block; }
}

/* ---------------------------------------------------------------- header -- */
header {
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  padding: 1.25rem 0;
}
/* Header layout: search left, cart pushed right. The wordmark now lives one
   row up, in the top bar. */
.biorax-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.biorax-header__search { flex: 1 1 260px; max-width: 420px; }
.biorax-header__cart   { margin-left: auto; flex: 0 0 auto; }

@media (max-width: 575.98px) {
  .biorax-header { gap: 1rem; }
  .biorax-header__search { flex-basis: 100%; max-width: none; }
}

/* Wordmark — inline SVG ported from the main site. currentColor tracks the
   theme; the accent-blue arms of the X are baked into the markup. */
#logo { flex: 0 0 auto; line-height: 0; }
#logo h1 { margin: 0; }
/* nav#top a (0,1,2) mutes every link in the bar, so the wordmark has to match
   that specificity or it renders in --ink-faint. */
#logo a,
nav#top #logo a,
nav#top #logo a:hover { display: inline-block; color: var(--ink); }
/* Sits in the compact top bar, so smaller than a standalone brand row */
#logo svg { height: 24px; width: auto; display: block; }
#logo img { max-height: 34px; width: auto; }

/* search */
#search { border-radius: var(--pill); overflow: hidden; border: 1px solid var(--line); background: var(--canvas-2); }
#search .form-control,
#search .btn {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ink);
}
#search .form-control { padding: .7rem 1.1rem; font-size: .9rem; }
#search .form-control::placeholder { color: var(--ink-faint); }
#search .btn { color: var(--ink-muted); padding-inline: 1rem; }
#search .btn:hover { color: var(--accent); }
#search:focus-within { border-color: var(--accent); }

/* cart button — markup is .btn.btn-lg.btn-dark.dropdown-toggle inside #cart */
#cart .btn-dark,
#cart > .btn {
  background: var(--accent);
  border: 0;
  color: var(--accent-deep);
  border-radius: var(--pill);
  padding: .75rem 1.4rem;
  font-size: .85rem;
  font-weight: 500;
  box-shadow: 0 0 0 1px rgba(9, 39, 242, .35), 0 18px 44px -20px rgba(9, 39, 242, .75);
  transition: transform .3s var(--expo), background .3s var(--expo);
}
#cart .btn-dark:hover,
#cart .btn-dark:focus,
#cart > .btn:hover { background: var(--accent-bright); color: var(--accent-deep); transform: translateY(-1px); }
#cart .dropdown-menu { background: var(--canvas-2); border: 1px solid var(--line); border-radius: var(--radius); }

/* ------------------------------------------------------------------ menu -- */
/* Category nav — a flat pill filter row.
   The default sheet paints #menu with a gradient, border and white link text,
   so every one of those has to be explicitly undone. */
#menu.biorax-nav {
  background: var(--canvas);
  background-image: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  min-height: 0;
  padding: .9rem 0;
  margin-bottom: 0;
  display: block;
}
.biorax-nav__pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Mirrors: rounded-pill border border-line px-4 py-2 text-sm text-ink-muted */
#menu .biorax-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: .5rem 1rem;
  font-size: .875rem;
  line-height: 1.3;
  color: var(--ink-muted);
  text-shadow: none;
  background-color: transparent;
  white-space: nowrap;
  transition: color .3s var(--expo), border-color .3s var(--expo), background-color .3s var(--expo);
}
#menu .biorax-pill:hover,
#menu .biorax-pill:focus-visible { color: var(--ink); background-color: transparent; }
/* active state: border-teal/60 bg-teal/10 text-teal */
#menu .biorax-pill.is-active {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background-color: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}

/* ------------------------------------------------------------ breadcrumb -- */
/* the default sheet gives this a border, radius and tertiary background */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 1.75rem 0 0;
  margin: 0 0 .5rem;
}
.breadcrumb > li.breadcrumb-item { padding: 0 .65rem 0 0; text-shadow: none; position: static; }
/* kill the default sheet's CSS-triangle separators */
.breadcrumb > li.breadcrumb-item::after { display: none !important; content: none !important; }
.breadcrumb > li.breadcrumb-item + li.breadcrumb-item::before {
  content: "/";
  color: var(--ink-faint);
  padding-right: .65rem;
  float: none;
}
.breadcrumb i { font-size: .8rem; }
.breadcrumb a { color: var(--ink-faint); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ink-faint); }
.breadcrumb-item.active { color: var(--ink-muted); }

/* page heading */
#content h1,
#content h2:first-of-type { margin-top: .75rem; margin-bottom: 1.25rem; }

/* =====================================================  PRODUCT CARD  ===== */
/* Square image on canvas-2, panel content block beneath, hairline border,
   lift on hover.                                                            */

#product-list { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }

.product-thumb {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel) 40%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .3s var(--expo), border-color .3s var(--expo);
}
.product-thumb:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.product-thumb .image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--canvas-2);
}
.product-thumb .image a { display: block; height: 100%; }
.product-thumb .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--expo);
}
.product-thumb:hover .image img { transform: scale(1.05); }

.product-thumb .content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1.25rem;
  gap: .35rem;
}
/* default sheet: .description has padding:15px and margin-bottom:45px to clear
   the absolutely-positioned button row we un-pin below */
.product-thumb .description {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1 1 auto;
  padding: 0;
  margin-bottom: 0;
}

.product-thumb h4 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
}
.product-thumb h4 a { color: var(--ink); }
.product-thumb:hover h4 a { color: var(--ink); }

.product-thumb .description p {
  font-size: .85rem;
  color: var(--ink-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-thumb .price {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--ink);
  margin-top: auto;
  padding-top: .75rem;
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.product-thumb .price-new { color: var(--ink); }
.product-thumb .price-old { color: var(--ink-faint); text-decoration: line-through; font-size: .75rem; }
.product-thumb .price-tax { display: none; }

/* rating */
.product-thumb .rating { font-size: .72rem; color: var(--accent); }
.rating .fa-stack { width: 1em; height: 1em; line-height: 1; }

/* Action row — kept functional but quiet, so it does not fight the card.
   The default sheet pins this with position:absolute;width:100%, which escapes
   .content's padding and overflows the card. Un-pin it and flow it normally. */
.product-thumb form { margin: 0; }
.product-thumb .button {
  position: static;
  width: auto;
  bottom: auto;
  display: flex;
  gap: .4rem;
  padding-top: .85rem;
  margin-top: .15rem;
  border-top: 1px solid var(--line);
}
.product-thumb .button button,
.product-thumb .button button + button {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background-color: transparent;
  color: var(--ink-muted);
  font-size: .74rem;
  transition: all .3s var(--expo);
}
.product-thumb .button button:first-child {
  flex: 1 1 auto;
  width: auto;
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-deep);
}
.product-thumb .button button:first-child:hover {
  background-color: var(--accent-bright);
  border-color: var(--accent-bright);
  color: var(--accent-deep);
}
.product-thumb .button button:hover {
  background-color: transparent;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* list view */
.product-list .product-thumb { flex-direction: row; }
.product-list .product-thumb .image { flex: 0 0 34%; aspect-ratio: auto; }

/* ------------------------------------------------------------- controls -- */
/* category toolbar: sort / limit / grid-list toggle -> pill filters */
#content .btn-group .btn,
.btn-light,
.btn-outline-secondary,
.btn-secondary {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  color: var(--ink-muted);
  font-size: .82rem;
  padding: .5rem 1.05rem;
  transition: all .3s var(--expo);
}
#content .btn-group .btn:hover,
.btn-light:hover,
.btn-outline-secondary:hover,
.btn-secondary:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--accent);
}
#content .btn-group .btn.active,
.btn-check:checked + .btn {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--accent);
}

.btn-primary {
  background: var(--accent);
  border: 0;
  border-radius: var(--pill);
  color: var(--accent-deep);
  font-weight: 500;
  padding: .8rem 1.75rem;
  box-shadow: 0 0 0 1px rgba(9, 39, 242, .35), 0 18px 44px -20px rgba(9, 39, 242, .75);
  transition: transform .3s var(--expo), background .3s var(--expo);
}
.btn-primary:hover,
.btn-primary:focus { background: var(--accent-bright); color: var(--accent-deep); transform: translateY(-1px); }

.btn-danger { border-radius: var(--pill); }

/* form controls */
.form-control, .form-select, .input-group-text, textarea {
  background: var(--canvas-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: .65rem .9rem;
  font-size: .9rem;
}
.form-control:focus, .form-select:focus, textarea:focus {
  background: var(--canvas-2);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(9, 39, 242, .12);
  color: var(--ink);
}
.form-control::placeholder { color: var(--ink-faint); }
.form-label, legend { color: var(--ink-muted); font-size: .82rem; font-weight: 500; }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* --------------------------------------------------------- product page -- */
#product .thumbnails,
.thumbnails { list-style: none; padding: 0; display: flex; gap: .6rem; flex-wrap: wrap; }
.thumbnails img,
#product-image img {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--canvas-2);
}
#product h1 { font-size: clamp(1.8rem, 1rem + 2.4vw, 2.75rem); }

.list-unstyled.price,
#product .price,
.product-price {
  font-family: var(--font-mono);
  color: var(--ink);
}
/* Product page hero price is a bare <h2><span class="price-new">, so it would
   otherwise inherit the Fraunces heading rule. Prices are mono everywhere. */
h2:has(> .price-new),
h2 > .price-new,
h2.price, .price h2 {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.price-old { color: var(--ink-faint); text-decoration: line-through; font-family: var(--font-mono); }
.list-unstyled > li { color: var(--ink-muted); font-size: .9rem; }

.nav-tabs {
  border-bottom: 1px solid var(--line);
  gap: .25rem;
}
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: .85rem 1.1rem;
  background: transparent;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: transparent;
}
.tab-content { padding-top: 1.5rem; color: var(--ink-muted); }

/* ------------------------------------------------------------ list group -- */
/* Sidebar category list: a clean hairline-separated list, not stacked boxes. */
.list-group { border-radius: 0; }
.list-group-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0 !important;
  color: var(--ink-muted);
  font-size: .9rem;
  padding: .75rem .25rem;
}
.list-group-item:last-child { border-bottom: 0; }
.list-group-item.active,
.list-group-item:hover { background: transparent; color: var(--accent); border-color: var(--line); }

/* "Product Compare" sits in the toolbar — quiet outline pill, not a slab */
#compare-total {
  display: inline-flex !important;
  align-items: center;
  gap: .45rem;
  width: auto;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  box-shadow: none;
  color: var(--ink-muted);
  font-size: .82rem;
  font-weight: 400;
  padding: .5rem 1.05rem;
  white-space: nowrap;
}
#compare-total:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--accent);
  transform: none;
}

/* ---------------------------------------------------------------- cards -- */
.card {
  background: color-mix(in srgb, var(--panel) 40%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: .9rem 1.25rem;
}
.card-body { padding: 1.25rem; }

/* --------------------------------------------------------------- tables -- */
.table { color: var(--ink); border-color: var(--line); }
.table > :not(caption) > * > * {
  background: transparent;
  border-bottom-color: var(--line);
  padding: .9rem .75rem;
}
.table thead th {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  border-bottom: 1px solid var(--line-strong);
}
.table-hover > tbody > tr:hover > * { background: color-mix(in srgb, var(--panel) 45%, transparent); }
.table img { border-radius: var(--radius-sm); border: 1px solid var(--line); }

/* ----------------------------------------------------------- pagination -- */
.pagination { gap: .3rem; }
.page-link {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--pill) !important;
  color: var(--ink-muted);
  min-width: 38px;
  text-align: center;
  font-size: .85rem;
  padding: .45rem .7rem;
}
.page-link:hover { background: transparent; border-color: var(--accent); color: var(--accent); }
.page-item.active .page-link {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}

/* --------------------------------------------------------------- alerts -- */
.alert {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--canvas-2);
  color: var(--ink);
  font-size: .9rem;
}
.alert-success { border-color: color-mix(in srgb, #3d6b4f 45%, transparent); }
.alert-danger  { border-color: color-mix(in srgb, #a63d40 45%, transparent); }

/* --------------------------------------------------------------- footer -- */
footer {
  background: var(--canvas-2);
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  margin-top: 5rem;
  padding: 4rem 0 2.5rem;
}
footer h5 {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}
footer a { color: var(--ink-muted); font-size: .875rem; }
footer a:hover { color: var(--ink); }
footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .625rem; }

.biorax-footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) {
  .biorax-footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; }
}
.biorax-footer__col { display: flex; flex-direction: column; gap: 1rem; }

.biorax-footer__logo {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.biorax-footer__logo:hover { color: var(--ink); }
.biorax-footer__tagline { max-width: 20rem; font-size: .875rem; line-height: 1.7; color: var(--ink-muted); margin: 0; }

.biorax-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink-muted);
  transition: color .3s var(--expo), border-color .3s var(--expo);
}
.biorax-footer__social:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.biorax-footer__social svg { width: 1rem; height: 1rem; }

.biorax-footer__contact li { display: flex; align-items: flex-start; gap: .625rem; font-size: .875rem; }
.biorax-footer__contact a { display: inline-flex; align-items: center; gap: .625rem; }
.biorax-footer__contact svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--accent); }
.biorax-footer__address { color: var(--ink-muted); }
.biorax-footer__address svg { margin-top: .15rem; }

.biorax-footer__rule {
  height: 1px;
  width: 100%;
  margin: 2.5rem 0;
  background: linear-gradient(to right, transparent, var(--line-strong), transparent);
}

.biorax-footer__bottom { display: flex; flex-direction: column; gap: 1.5rem; }
.biorax-footer__disclaimer {
  max-width: 62rem;
  font-size: .75rem;
  line-height: 1.7;
  color: var(--ink-faint);
  margin: 0;
}
.biorax-footer__legal { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 576px) {
  .biorax-footer__legal { flex-direction: row; align-items: center; justify-content: space-between; }
}
.biorax-footer__legal p {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--ink-faint);
  margin: 0;
}
.biorax-footer__legal ul { flex-direction: row; gap: 1.5rem; }
.biorax-footer__legal a { font-size: .75rem; }

/* -------------------------------------------------------------- carousel -- */
.carousel, .swiper, #carousel {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--canvas-2);
}

/* ------------------------------------------------------------ misc bits -- */
.img-thumbnail { background: var(--canvas-2); border-color: var(--line); border-radius: var(--radius-sm); }
.dropdown-menu { background: var(--canvas-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); }
.dropdown-item { color: var(--ink-muted); }
.dropdown-item:hover { background: var(--panel); color: var(--ink); }
.modal-content { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); }
.modal-header, .modal-footer { border-color: var(--line); }
.tooltip-inner { background: var(--ink); color: var(--canvas); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; }

/* Section headings above module product rows ("Featured", "Latest", ...) */
#content > h3,
#content .row > h3 {
  font-family: var(--font-display);
  font-weight: 300;
  margin: 3rem 0 1.5rem;
}

/* ====================================================================
   HOMEPAGE — layout, typography scale, animations, component classes
   Mirrors apps/web/resources/css/app.css so both sites share one
   design language without pulling in Tailwind.
   ==================================================================== */

/* Color + easing aliases matching the Laravel --color-* convention */
:root {
  --color-canvas:      var(--canvas);
  --color-canvas-2:    var(--canvas-2);
  --color-ink:         var(--ink);
  --color-ink-muted:   var(--ink-muted);
  --color-ink-faint:   var(--ink-faint);
  --color-accent:      var(--accent);
  --color-accent-bright: var(--accent-bright);
  --color-accent-deep: var(--accent-deep);
  --color-line:        var(--line);
  --color-line-strong: var(--line-strong);
  --ease-expo:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:         cubic-bezier(0.33, 1, 0.68, 1);
}

/* Wide centred container used by homepage sections */
.container-site {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Consistent vertical breathing room for page sections */
.py-section { padding-top: clamp(4rem, 8vw, 6.5rem); padding-bottom: clamp(4rem, 8vw, 6.5rem); }

/* Typography scale */
.text-hero    { font-size: clamp(3rem, 8vw, 6rem);   line-height: 0.98; font-family: var(--font-display); font-weight: 300; }
.text-display { font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1.05; font-family: var(--font-display); font-weight: 300; }
.text-h3      { font-size: clamp(1.15rem, 2vw, 1.4rem); font-family: var(--font-display); font-weight: 300; line-height: 1.25; }

/* Font-family utilities */
.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }
.font-sans    { font-family: var(--font-sans); }

/* Colour utilities */
.text-ink       { color: var(--ink); }
.text-ink-muted { color: var(--ink-muted); }
.text-ink-faint { color: var(--ink-faint); }
.text-accent    { color: var(--accent); }
.bg-canvas-2    { background: var(--canvas-2); }
.bg-panel       { background: var(--panel); }

/* Border utilities */
.border-line        { border-color: var(--line) !important; }
.border-line-strong { border-color: var(--line-strong) !important; }

/* Horizontal rule */
.rule {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line-strong), transparent);
}

/* Pill border-radius */
.rounded-pill-custom { border-radius: var(--pill); }

/* Card radii */
.rounded-xl  { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }

/* Accent glow — the blue aura used as decorative background element */
.aura {
  background: radial-gradient(ellipse at center, rgba(9,39,242,0.28) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
  position: absolute;
}

/* Slow floating drift used on the biosignature container */
@keyframes bx-drift {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-14px); }
  100% { transform: translateY(0); }
}
.drift { animation: bx-drift 11s var(--ease-soft) infinite; }

/* Orbit ring rotation on the biosignature SVG */
@keyframes bx-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.orbit { animation: bx-orbit 36s linear infinite; }

/* Biosignature scan sweep */
@keyframes bs-scan {
  0%   { transform: translateY(0);     opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(446px); opacity: 0; }
}
.bs-scan { animation: bs-scan 5s ease-in-out infinite; }

/* Biosignature node pulse rings */
@keyframes bs-pulse {
  0%   { r: 5px;  opacity: 0.55; }
  70%  { opacity: 0; }
  100% { r: 20px; opacity: 0; }
}
.bs-pulse { animation: bs-pulse 2.6s var(--ease-soft) infinite; }

/* Scroll-reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease-expo), transform 0.7s var(--ease-expo); }
.reveal.visible { opacity: 1; transform: none; }

/* ---- Homepage hero ---- */
.bx-hero { position: relative; overflow: hidden; padding: clamp(7rem,14vw,10rem) 0 clamp(4rem,8vw,7rem); background: var(--canvas) !important; }

/* Two-column hero grid: text left, biosignature right */
.bx-hero__grid {
  display: grid;
  align-items: center;
  gap: 3rem;
}
@media (min-width: 992px) {
  .bx-hero__grid { grid-template-columns: 1fr 1.2fr; gap: 3.5rem; }
  .bx-hero__grid > * { min-width: 0; }
}

/* Goal chip row — horizontal scroll, no scrollbar */
.bx-goal-chips {
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.bx-goal-chips::-webkit-scrollbar { display: none; }

.bx-goal-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-shrink: 0;
  width: 7rem;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 40%, transparent);
  padding: 0.75rem;
  text-decoration: none;
  transition: transform 0.3s var(--ease-expo), border-color 0.3s, background 0.3s;
  color: var(--ink);
}
.bx-goal-chip:hover { transform: translateY(-4px); border-color: rgba(9,39,242,0.5); background: var(--panel); color: var(--ink); text-decoration: none; }
.bx-goal-chip__icon {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  background: var(--canvas);
  color: var(--ink-muted);
  transition: color 0.3s, border-color 0.3s;
}
.bx-goal-chip:hover .bx-goal-chip__icon { color: var(--accent); border-color: rgba(9,39,242,0.4); }
.bx-goal-chip__label { font-size: 0.75rem; font-weight: 500; line-height: 1.3; color: var(--ink); }

/* ---- Metrics bar ---- */
.bx-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--canvas-2);
}
@media (min-width: 768px) { .bx-metrics { grid-template-columns: repeat(4, 1fr); } }
.bx-metric {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 2.5rem 1.5rem;
}
.bx-metric + .bx-metric { border-left: 1px solid var(--line); }
@media (max-width: 767px) {
  .bx-metric:nth-child(n+3) { border-top: 1px solid var(--line); }
  .bx-metric:nth-child(odd) { border-left: none; }
}
.bx-metric__value { font-family: var(--font-display); font-size: clamp(2rem,5vw,3rem); font-weight: 300; color: var(--ink); }
.bx-metric__label { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-muted); }

/* ---- Condition cards ---- */
.bx-conditions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 3.5rem; }
@media (min-width: 576px) { .bx-conditions { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 992px) { .bx-conditions { grid-template-columns: repeat(5, 1fr); } }

.bx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 40%, transparent);
  padding: 1.25rem;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.3s var(--ease-expo), border-color 0.3s, background 0.3s;
  height: 100%;
}
.bx-card:hover { transform: translateY(-4px); border-color: rgba(9,39,242,0.5); background: var(--panel); color: var(--ink); text-decoration: none; }
.bx-card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  background: var(--canvas);
  color: var(--ink-muted);
  flex-shrink: 0;
  transition: color 0.3s, border-color 0.3s;
}
.bx-card:hover .bx-card__icon { color: var(--accent); border-color: rgba(9,39,242,0.4); }
.bx-card__title { font-weight: 500; color: var(--ink); font-size: 0.9rem; }
.bx-card__body  { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-muted); }
.bx-card__badge { position: absolute; top: 0.75rem; right: 0.75rem; font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); }

/* Step cards (How it works) */
.bx-steps { display: grid; gap: 1.25rem; margin-top: 3.5rem; }
@media (min-width: 576px) { .bx-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .bx-steps { grid-template-columns: repeat(4, 1fr); } }

.bx-step {
  display: flex; flex-direction: column; gap: 1.25rem;
  border-radius: 1rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 40%, transparent);
  padding: 1.5rem;
  height: 100%;
}
.bx-step__head { display: flex; align-items: center; justify-content: space-between; }
.bx-step__icon-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  background: var(--canvas);
  color: var(--accent);
}
.bx-step__index { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-faint); }
.bx-step__title { font-family: var(--font-display); font-weight: 300; font-size: 1.15rem; line-height: 1.25; color: var(--ink); }
.bx-step__body  { font-size: 0.8125rem; line-height: 1.6; color: var(--ink-muted); flex: 1; }
.bx-step__badge { display: inline-flex; align-items: center; border-radius: var(--pill); background: rgba(9,39,242,0.1); padding: 0.25rem 0.75rem; font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }

/* Proof stat cards */
.bx-stats { display: grid; gap: 1.5rem; margin-top: 3.5rem; }
@media (min-width: 576px) { .bx-stats { grid-template-columns: repeat(3, 1fr); } }
.bx-stat {
  border-radius: 1rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 40%, transparent);
  padding: 1.75rem;
  height: 100%;
}
.bx-stat__value { font-family: var(--font-display); font-size: clamp(2.5rem,5vw,3.5rem); font-weight: 300; color: var(--accent); }
.bx-stat__label { margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-muted); }

/* Differentiator cards */
.bx-diffs { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 768px) { .bx-diffs { grid-template-columns: repeat(3, 1fr); } }
.bx-diff {
  display: flex; flex-direction: column; gap: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 40%, transparent);
  padding: 1.75rem;
  height: 100%;
}

/* Biomarker panel — two-column */
.bx-bio-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 992px) { .bx-bio-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.bx-bio-panel {
  position: relative; overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 40%, transparent);
  padding: 2rem;
}
.bx-bio-row {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 0.5rem 0;
}
.bx-bio-row:last-child { border-bottom: none; }
.bx-bio-row__label { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-muted); }
.bx-bio-row__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(9,39,242,0.6); }

/* Left-border feature list */
.bx-feature-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.bx-feature-list li {
  display: flex; flex-direction: column; gap: 0.25rem;
  border-left: 2px solid rgba(9,39,242,0.3);
  padding-left: 1rem;
}
.bx-feature-list li strong { font-weight: 500; color: var(--ink); }
.bx-feature-list li span   { font-size: 0.8125rem; line-height: 1.6; color: var(--ink-muted); max-width: 28rem; }

/* FAQ accordion (no Alpine dependency fallback) */
.bx-faq { display: grid; gap: 3rem; }
@media (min-width: 992px) { .bx-faq { grid-template-columns: 0.8fr 1.2fr; gap: 4rem; } }
.bx-faq__list { display: flex; flex-direction: column; }
.bx-faq__item { border-bottom: 1px solid var(--line); }
.bx-faq__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.25rem 0;
  background: none; border: none; cursor: pointer; text-align: left;
  color: var(--ink); font-weight: 500; font-size: inherit;
}
.bx-faq__btn svg { flex-shrink: 0; color: var(--ink-muted); transition: transform 0.3s var(--ease-expo); }
.bx-faq__btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.bx-faq__answer {
  font-size: 0.875rem; line-height: 1.7; color: var(--ink-muted);
  padding-bottom: 1.25rem;
  display: none;
}
.bx-faq__answer.open { display: block; }

/* Final CTA dark band */
.bx-cta-band {
  position: relative; overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid rgba(9,39,242,0.2);
  padding: clamp(4rem, 8vw, 6rem) clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  background: linear-gradient(to bottom, #14191b, #0e1315);
}

/* CTA button variants */
.bx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: var(--pill);
  padding: 0.875rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background 0.3s, transform 0.3s var(--ease-expo), border-color 0.3s;
  cursor: pointer;
  border: none;
}
.bx-btn:hover { transform: translateY(-2px); text-decoration: none; }
.bx-btn-primary {
  background: var(--accent);
  color: var(--accent-deep);
  box-shadow: 0 0 0 1px rgba(9,39,242,0.35), 0 18px 44px -20px rgba(9,39,242,0.75);
}
.bx-btn-primary:hover { background: var(--accent-bright); color: var(--accent-deep); }
.bx-btn-outline {
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: transparent;
}
.bx-btn-outline:hover { border-color: rgba(9,39,242,0.6); }

/* Section heading block */
.bx-section-head { display: flex; flex-direction: column; gap: 1rem; }
.bx-eyebrow { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .product-thumb:hover { transform: none; }
  .product-thumb:hover .image img { transform: none; }
}

/* ========================================================================
   MENU DROPDOWN — Conditions sub-menu
======================================================================== */

.biorax-nav__item { position: relative; }

.biorax-pill__chevron {
  display: inline-block;
  width: 12px; height: 12px;
  margin-left: 4px;
  vertical-align: middle;
  transition: transform 0.2s;
}
.biorax-pill--dropdown[aria-expanded="true"] .biorax-pill__chevron { transform: rotate(180deg); }

.biorax-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.5rem;
  z-index: 200;
  box-shadow: 0 16px 40px -8px rgba(0,0,0,0.45);
}
.biorax-dropdown.is-open { display: block; }

.biorax-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.biorax-dropdown__item {
  display: block;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
}
.biorax-dropdown__item:hover {
  background: rgba(9,39,242,0.08);
  color: var(--accent);
  text-decoration: none;
}

/* ========================================================================
   CONDITIONS INDEX PAGE — /conditions
======================================================================== */

.bx-conditions-index { min-height: 100vh; }

.bx-cond-hero {
  padding: 6rem 0 4rem;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.bx-cond-hero__h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 1rem 0;
}
.bx-cond-hero__sub {
  max-width: 54ch;
  margin: 0 auto;
  color: var(--ink-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.bx-cond-grid-section { padding: 4rem 0; }

.bx-cond-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) { .bx-cond-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bx-cond-grid { grid-template-columns: 1fr; } }

.bx-cond-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.bx-cond-card:hover {
  border-color: rgba(9,39,242,0.4);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.4);
  text-decoration: none;
  color: var(--ink);
}

.bx-cond-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: rgba(9,39,242,0.08);
  border-radius: 10px;
  color: var(--accent);
}
.bx-cond-card__icon svg { width: 22px; height: 22px; }

.bx-cond-card__name {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.bx-cond-card__tagline {
  font-size: 0.875rem;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.bx-cond-card__cta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-transform: uppercase;
  margin-top: auto;
}

.bx-cond-bottom-cta {
  padding: 4rem 0 6rem;
  text-align: center;
  border-top: 1px solid var(--line);
}
.bx-cond-bottom-cta__text {
  color: var(--ink-muted);
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
}

/* ========================================================================
   CONDITION DETAIL PAGE — /conditions/<slug>
======================================================================== */

.bx-condition-detail { min-height: 100vh; }

.bx-cond-detail-hero {
  padding: 5rem 0 4rem;
  border-bottom: 1px solid var(--line);
}
.bx-cond-detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.5rem;
}
.bx-cond-detail-breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.bx-cond-detail-breadcrumb a:hover { color: var(--accent); }
.bx-cond-detail-breadcrumb span[aria-hidden] { opacity: 0.4; }

.bx-cond-detail-hero__h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0.75rem 0 2rem;
}
.bx-cond-detail-hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Admin description content */
.bx-cond-detail-body { padding: 4rem 0; }
.bx-cond-detail-content {
  max-width: 72ch;
}
.bx-cond-detail-content p { color: var(--ink-muted); line-height: 1.75; margin-bottom: 1.25rem; }
.bx-cond-detail-content p.bx-condition__lead {
  font-size: 1.15rem;
  color: var(--ink);
  font-weight: 400;
  border-left: 2px solid var(--accent);
  padding-left: 1.25rem;
}
.bx-cond-detail-content h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2.5rem 0 0.75rem;
}
.bx-cond-detail-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bx-cond-detail-content ul li {
  padding-left: 1.25rem;
  position: relative;
  color: var(--ink-muted);
  line-height: 1.6;
  font-size: 0.95rem;
}
.bx-cond-detail-content ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 0.8rem;
}

/* Metrics strip on detail page */
.bx-cond-detail-metrics {
  padding: 3rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* CTA band on detail page */
.bx-cond-detail-cta { padding: 5rem 0 6rem; }
.bx-cta-band {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 3.5rem;
  text-align: center;
}
.bx-cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1rem;
}
.bx-cta-band p { color: var(--ink-muted); max-width: 52ch; margin: 0 auto 2rem; line-height: 1.6; }
.bx-cta-band__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.bx-cta-band__fine {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0.6;
}

/* ==========================================================================
   CONDITION DETAIL PAGE  (.bx-cdp)
   Dark-themed rich condition pages.
   Design reference: biofit-v2-review.pages.dev/condition/weight-loss
   ========================================================================== */

/* ── Design tokens (scoped inside .bx-cdp) ─────────────────────────────── */
.bx-cdp {
  --cdp-bg:        #121613;
  --cdp-bg-bone:   #1a201b;
  --cdp-bg-dark:   #16231c;
  --cdp-text:      #eef1ec;
  --cdp-muted:     #9aad9b;
  --cdp-border:    rgba(238, 241, 236, 0.12);
  --cdp-serif:     "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --cdp-sans:      -apple-system, "system-ui", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --cdp-radius:    14px;
  --cdp-max:       1080px;

  background: var(--cdp-bg);
  color: var(--cdp-text);
  font-family: var(--cdp-sans);
}

/* shared wrapper */
.bx-cdp-wrap {
  max-width: var(--cdp-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* shared eyebrow label */
.bx-cdp-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cdp-muted);
  margin: 0 0 20px;
}

/* shared section heading */
.bx-cdp-section-h2 {
  font-family: var(--cdp-serif);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--cdp-text);
  margin: 0 0 28px;
}

/* ── 1. HERO ────────────────────────────────────────────────────────────── */
.bx-cdp-hero {
  position: relative;
  width: 100%;
  min-height: 68vh;
  background-color: #0d1a0f;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}
.bx-cdp-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,.65) 100%);
}
.bx-cdp-hero__content {
  position: relative;
  z-index: 1;
  padding: 60px 32px;
  max-width: var(--cdp-max);
  margin: 0 auto;
  width: 100%;
}
.bx-cdp-hero .bx-cdp-eyebrow {
  color: rgba(238,241,236,.7);
  margin-bottom: 14px;
}
.bx-cdp-hero__h1 {
  font-family: var(--cdp-serif);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}

/* ── 2. STATS ───────────────────────────────────────────────────────────── */
.bx-cdp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cdp-border);
  border-top: 1px solid var(--cdp-border);
  border-bottom: 1px solid var(--cdp-border);
}
.bx-cdp-stat {
  background: var(--cdp-bg);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.bx-cdp-stat__num {
  font-family: var(--cdp-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  color: var(--cdp-text);
  line-height: 1;
}
.bx-cdp-stat__label {
  font-size: 0.82rem;
  color: var(--cdp-muted);
  line-height: 1.4;
  max-width: 140px;
}

/* ── 3. APPROACH ────────────────────────────────────────────────────────── */
.bx-cdp-approach {
  padding: 80px 0;
  border-bottom: 1px solid var(--cdp-border);
}
.bx-cdp-approach__lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--cdp-muted);
  max-width: 640px;
  margin: 0 0 52px;
}

/* approach cards — 2-up on tablet, 3-up on desktop */
.bx-cdp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.bx-cdp-card {
  background: var(--cdp-bg-bone);
  border: 1px solid var(--cdp-border);
  border-radius: var(--cdp-radius);
  padding: 28px 24px;
}
.bx-cdp-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cdp-text);
  margin: 0 0 12px;
}
.bx-cdp-card__body {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--cdp-muted);
  margin: 0;
}

/* ── 4 & 7. QUOTE IMAGES ────────────────────────────────────────────────── */
.bx-cdp-quote-fig {
  position: relative;
  margin: 0;
  line-height: 0;
}
.bx-cdp-quote-fig__img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
  filter: brightness(0.6);
}
.bx-cdp-quote-fig__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  font-family: var(--cdp-serif);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 400;
  font-style: italic;
  color: #fff;
  text-align: center;
  line-height: 1.4;
}

/* ── 5. JOURNEY STEPS ───────────────────────────────────────────────────── */
.bx-cdp-journey {
  background: var(--cdp-bg-bone);
  padding: 80px 0;
  border-top: 1px solid var(--cdp-border);
  border-bottom: 1px solid var(--cdp-border);
}
.bx-cdp-steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 40px;
  margin-top: 8px;
}
.bx-cdp-step {
  display: flex;
  gap: 20px;
}
.bx-cdp-step__num {
  font-family: var(--cdp-serif);
  font-size: 0.85rem;
  color: var(--cdp-muted);
  flex-shrink: 0;
  padding-top: 3px;
}
.bx-cdp-step__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cdp-text);
  margin: 0 0 10px;
}
.bx-cdp-step__body {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--cdp-muted);
  margin: 0;
}

/* ── 6. ADD-ONS ─────────────────────────────────────────────────────────── */
.bx-cdp-addons {
  padding: 80px 0;
  border-bottom: 1px solid var(--cdp-border);
}
.bx-cdp-addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.bx-cdp-addon-card {
  background: var(--cdp-bg-bone);
  border: 1px solid var(--cdp-border);
  border-radius: var(--cdp-radius);
  padding: 28px 24px;
}
.bx-cdp-addon-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cdp-text);
  margin: 0 0 12px;
}
.bx-cdp-addon-card__body {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--cdp-muted);
  margin: 0;
}

/* ── 8. CTA ─────────────────────────────────────────────────────────────── */
.bx-cdp-cta {
  background: var(--cdp-bg-dark);
  padding: 80px 0;
  border-top: 1px solid var(--cdp-border);
  border-bottom: 1px solid var(--cdp-border);
}
.bx-cdp-cta__inner {
  text-align: center;
}
.bx-cdp-cta__h2 {
  font-family: var(--cdp-serif);
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 400;
  color: var(--cdp-text);
  margin: 0 0 36px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.bx-cdp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* buttons */
.bx-cdp-btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: opacity 0.18s;
}
.bx-cdp-btn:hover { opacity: 0.82; text-decoration: none; }
.bx-cdp-btn--primary {
  background: var(--cdp-text);
  color: var(--cdp-bg);
}
.bx-cdp-btn--ghost {
  background: transparent;
  color: var(--cdp-text);
  border: 1px solid rgba(238,241,236,.4);
}

/* ── 9. RELATED CONDITIONS ──────────────────────────────────────────────── */
.bx-cdp-related {
  padding: 80px 0 0;
}
.bx-cdp-related > .bx-cdp-wrap {
  margin-bottom: 40px;
}
.bx-cdp-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.bx-cdp-rel-card {
  position: relative;
  display: block;
  background-color: #1a201b;
  background-size: cover;
  background-position: center;
  aspect-ratio: 1 / 0.85;
  text-decoration: none;
  overflow: hidden;
}
.bx-cdp-rel-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.15) 60%);
  transition: opacity 0.22s;
}
.bx-cdp-rel-card:hover .bx-cdp-rel-card__overlay { opacity: 0.75; }
.bx-cdp-rel-card__name {
  position: absolute;
  bottom: 24px;
  left: 24px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  z-index: 1;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .bx-cdp-stats {
    grid-template-columns: 1fr;
  }
  .bx-cdp-hero__content {
    padding: 40px 20px;
  }
  .bx-cdp-approach,
  .bx-cdp-journey,
  .bx-cdp-addons,
  .bx-cdp-cta,
  .bx-cdp-related {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .bx-cdp-related-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Registration (B2C + professional) ──────────────────────────────────── */
.bx-register h1 { margin-bottom: .5rem; }
.bx-register__lead { max-width: 44rem; color: var(--ink-muted); line-height: 1.65; }
.bx-register__pro-hint { color: var(--ink-muted); }
.bx-register__pro-hint a { color: var(--accent); }

/* UAE DS contact-number pattern: fixed country code, separate national input */
.bx-phone { max-width: 22rem; }
.bx-phone__code {
  font-family: var(--font-mono);
  font-size: .875rem;
  color: var(--ink-muted);
  background: var(--canvas-2);
  border: 1px solid var(--line);
}

/* Segment cards — doctor / clinic */
.bx-segment { margin-bottom: 1.5rem; }
.bx-segment__cards { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; max-width: 44rem; }
.bx-segment__card { display: block; cursor: pointer; }
.bx-segment__card input { position: absolute; opacity: 0; pointer-events: none; }
.bx-segment__body {
  display: block;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas-2);
  transition: border-color .3s var(--expo), background-color .3s var(--expo);
}
.bx-segment__card input:checked + .bx-segment__body {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.bx-segment__card input:focus-visible + .bx-segment__body {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.bx-segment__name { display: block; font-weight: 600; color: var(--ink); }
.bx-segment__desc { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--ink-muted); line-height: 1.5; }

/* Per-segment field groups + approval notice */
.bx-group-fields__hint { max-width: 44rem; }
.bx-group-fields__hint a { color: var(--accent); }
.bx-upload-name { margin-left: .5rem; }
.bx-register__notice {
  max-width: 44rem;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--ink-muted);
  font-size: .875rem;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .bx-segment__cards { grid-template-columns: 1fr; }
}

/* ============================================================
   Dose-calculator flyout (header, every page)
   Markup in common/header.twig, engine in bx-dose-calc.js.
   ============================================================ */
.bx-dosecalc-li { position: relative; display: flex; align-items: center; gap: 2px; }
.bx-dosecalc-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--ink-muted); cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.bx-dosecalc-toggle:hover { border-color: var(--line-strong); color: var(--ink); }
.bx-dosecalc-toggle svg { width: 16px; height: 16px; }
.bx-dosecalc-flyout {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: 300px; z-index: 1050;
  background: var(--canvas); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.35);
  padding: 16px;
}
.bx-dosecalc-flyout__title { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 10px; color: var(--ink); }
.bx-dosecalc-flyout label { display: block; font-size: 0.72rem; font-weight: 600; color: var(--ink-muted); margin-top: 10px; }
.bx-dosecalc-flyout label:first-of-type { margin-top: 0; }
.bx-dosecalc-flyout input, .bx-dosecalc-flyout select {
  width: 100%; margin-top: 4px; padding: 8px 10px; font-size: 0.9rem;
  color: var(--ink); background: var(--canvas-2);
  border: 1px solid var(--line); border-radius: 6px;
}
.bx-dosecalc-flyout input:focus-visible, .bx-dosecalc-flyout select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bx-dosecalc-flyout__row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; }
.bx-dosecalc-flyout__results { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.bx-dosecalc-flyout__results > div { background: var(--panel); border-radius: 6px; padding: 8px 10px; }
.bx-dosecalc-flyout__results .lbl { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.bx-dosecalc-flyout__results .val { display: block; font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--ink); margin-top: 2px; }
.bx-dosecalc-flyout__warn {
  margin: 10px 0 0; font-size: 0.72rem; line-height: 1.45;
  color: #8a5a1e; background: rgba(212, 160, 66, 0.12);
  border: 1px solid rgba(212, 160, 66, 0.4); border-radius: 6px; padding: 8px 10px;
}
html[data-theme="dark"] .bx-dosecalc-flyout__warn { color: #e2b96a; }
.bx-dosecalc-flyout__note { margin: 10px 0 0; font-size: 0.68rem; line-height: 1.5; color: var(--ink-faint); }
.bx-dosecalc-flyout__note a { color: var(--accent); }

/* Inside the collapsed mobile nav the panel flows in place instead of
   floating (an absolute panel would clip against the collapse container). */
@media (max-width: 991.98px) {
  .bx-dosecalc-li { flex-wrap: wrap; }
  .bx-dosecalc-flyout { position: static; transform: none; width: 100%; margin-top: 8px; }
}

/* ---------------------------------------------------------------- header --
   The nav stays put while the page scrolls, matching the home page, whose
   site-nav is already sticky in biofit-home.css. Without this the menu
   scrolls away on shop and condition pages and the two halves of the site
   behave differently. */
nav#top {
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* ------------------------------------------------------- product listing --
   A bigger cart glyph on the product card. The button is core markup
   (catalog/view/template/product/thumb.twig) which the deploy's core-edit
   guard will not let us touch, so the size is set here instead. Only the
   first button — the cart — grows; wishlist and compare stay secondary. */
.product-thumb .button button:first-child {
  height: 40px;
  font-size: 1.05rem;
}
.product-thumb .button button:first-child i {
  font-size: 1.15rem;
  line-height: 1;
}