/* LOT 3F — preview-only reference-fidelity layer (newnew.bio-medx.com).
   Inert unless <html class="lot3f"> is present, which layout.tsx only emits when the web
   runtime env BIOMEDX_LOT3F=1. Production never sets it, so this file is never linked there.
   Never edit styles.css for LOT 3F parity: add scoped rules here under `html.lot3f`.

   PHASE 2 — width system.
   Reference (bio-medx-premium CSS, :root --container: 1240px):
     .section-shell { width: min(var(--container), calc(100% - 48px)); }
     header/hero    { padding-inline: max(24px, calc((100vw - var(--container)) / 2)); }
   i.e. usable content = min(1240px, 100% - 48px), no inner padding.
   Target consumers all pair `max-width: var(--container-max)` with `padding-inline: var(--gutter)`
   (23 declarations in styles.css), so box = 1240 + 2*24 and gutter = 24 gives the same content
   width at every viewport (1240 at >=1288px, viewport - 48px below).
   Reference @media (max-width: 820px) { .section-shell { width: min(100% - 40px, var(--container)) } }
   -> 20px side margin. (Reference also uses 18px/14px for some components <=520px, e.g. forms,
   .ct-guide: those are per-family deltas, not part of the global width system.) */
html.lot3f {
  --container-max: 1288px;
  --gutter: 24px;
}

@media (max-width: 820px) {
  html.lot3f {
    --gutter: 20px;
  }
}

/* WhatsApp float, small phones: reference @media (max-width: 520px) turns the pill into a round, icon-only
   button (56px, label visually hidden but kept in the DOM; the link keeps its aria-label and href).
   Desktop/tablet pill is untouched. Lives here (not styles.css) so production stays identical. */
@media (max-width: 520px) {
  html.lot3f .whatsapp-contact {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: 56px;
    min-height: 56px;
    justify-content: center;
    gap: 0;
    padding: 9px;
  }
  html.lot3f .whatsapp-contact__icon { width: 38px; height: 38px; }
  html.lot3f .whatsapp-contact > span:not(.whatsapp-contact__icon) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* styles.css (shared with prod, untouched) sets an 18px line-height on every select/option; the reference
   leaves the UA default. Measured on the catalogue toolbar (lockstep CSS diff). */
html.lot3f .rf-scope select,
html.lot3f .rf-scope option { line-height: normal; }
/* styles.css also forces appearance:none + a custom chevron on every select; the reference keeps the native control. */
html.lot3f .rf-scope select { -webkit-appearance: auto; appearance: auto; background-image: none; }