/* ==========================================================================
   BETHESDA — site stylesheet
   Layout system: sticky white header + navy announcement bar, pastel gradient
   heroes with floating bottles, alternating white/gray bands with narrow
   centered columns, yellow→green pre-footer CTA band with overlapping
   newsletter card, dark navy footer.
   ========================================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Fraunces:opsz,wght@9..144,600;9..144,900&display=swap');

:root {
  --black: #131315;
  --white: #ffffff;
  --navy: #0a192f;
  --navy-2: #12275c;
  --navy-3: #081736;
  --mint: #e9fce6;
  --sky: #cbe5fc;
  --lavender: #e8e5ff;
  --butter: #fefeca;
  --blush: #f8eaed;
  --pale-green: #e9fae7;
  --emerald: #059669;
  --slate: #4a5568;
  --cool: #a3afb8;
  --ash: #bdc5cc;
  --gray-50: #f7f8f9;
  --gray-100: #f1f2f4;
  --border: #ececef;
  --font-body: "Satoshi", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Satoshi", system-ui, Arial, sans-serif;
  --font-serif: "Marcellus", Georgia, serif;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --max-w: 1440px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--black);
  background: var(--white);
}

img, svg { max-width: 100%; display: block; }

a { color: var(--black); text-decoration: none; }
a:hover { text-decoration: none; }

p a, .prose a, .acc-body a, .notice a, .fda-callout a, .helper a { text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

h1 { font-size: 48px; }
h2 { font-size: 32px; }
h3 { font-size: 20px; }

/* Global container (their .content-container: max-w 1440, px-6) */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* Narrow inner columns — the content itself reads as one centered column */
.mw-xl  { max-width: 576px; margin-left: auto; margin-right: auto; }
.mw-2xl { max-width: 672px; margin-left: auto; margin-right: auto; }
.mw-3xl { max-width: 768px; margin-left: auto; margin-right: auto; }
.mw-4xl { max-width: 896px; margin-left: auto; margin-right: auto; }
.mw-5xl { max-width: 1024px; margin-left: auto; margin-right: auto; }

/* Small uppercase label (kept for checkout/legal pages) */
.label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

.label--gray { color: var(--cool); }

/* Full-bleed section bands: py-16 lg:py-24, alternating white/gray */
.band { padding: 64px 0; }
.band--gray { background: var(--gray-50); }
.band--thin { padding: 24px 0; background: var(--white); border-bottom: 1px solid var(--gray-100); }

/* Centered section header */
.sec-head { text-align: center; margin-bottom: 40px; }
.sec-head h2 { font-size: 32px; margin-bottom: 12px; }
.sec-head .sec-sub { font-size: 18px; color: var(--slate); max-width: 672px; margin: 0 auto; }

/* Legacy section header (checkout / confirmation / legal pages) */
.section-head {
  padding: 8px 0;
  margin: 48px 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.section-head .label {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--black);
}
.section-head .label--gray {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--slate);
}
.section-head a.label--gray:hover { color: var(--black); }

hr.rule { border: none; border-top: 1px solid var(--border); margin: 32px 0; }

/* ------------------------------------------------------------------ */
/* Buttons — black pills                                               */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 13px 28px;
  border: 1px solid var(--black);
  border-radius: 9999px;
  background: var(--black);
  color: var(--white);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, gap 0.15s;
}

.btn:hover { background: #2b2b2f; border-color: #2b2b2f; text-decoration: none; gap: 12px; }

.btn--ghost { background: var(--white); color: var(--black); border-color: #dedede; }
.btn--ghost:hover { background: var(--gray-50); border-color: var(--ash); color: var(--black); }

.btn--sm { padding: 8px 18px; font-size: 13px; }

.btn:disabled {
  border-color: var(--border);
  background: #e3e5e8;
  color: #9aa4ad;
  cursor: not-allowed;
}

.btn--block { display: flex; width: 100%; }

/* Emerald variant (verification gate) */
.btn--emerald { background: var(--emerald); border-color: var(--emerald); }
.btn--emerald:hover:not(:disabled) { background: #047857; border-color: #047857; }

/* ------------------------------------------------------------------ */
/* Header + announcement bar (one sticky stack, bar BELOW header)      */
/* ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-bar {
  background: var(--white);
  border-bottom: 1px solid rgba(236, 236, 239, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: background 0.25s, box-shadow 0.25s;
}

/* frosted-glass header once the page is scrolled */
.site-header.scrolled .header-bar {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.07);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 70px;
  padding: 0 24px;
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Wordmark: lowercase soft-serif stack — "bethesda" with small
   right-justified "labs" underneath */
.logo {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 0.85;
  text-transform: lowercase;
  white-space: nowrap;
}

.logo:hover { text-decoration: none; }

.logo .logo-main {
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -0.015em;
}

.logo .logo-sub {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-top: -1px;
  margin-right: 1px;
  color: var(--slate);
}

/* on dark footer */
.footer-dark .logo { color: var(--white); width: fit-content; margin-top: -8px; }
.footer-dark .logo .logo-sub { color: rgba(255, 255, 255, 0.7); }

.main-nav { display: flex; gap: 4px; }

.main-nav a {
  font-size: 15px;
  font-weight: 500;
  color: rgba(19, 19, 21, 0.8);
  padding: 8px 18px;
  border-radius: 9999px;
  transition: background 0.15s;
}

.main-nav a:hover { background: rgba(0, 0, 0, 0.03); text-decoration: none; color: var(--black); }
.main-nav a.active { background: rgba(0, 0, 0, 0.05); color: var(--black); }

.header-actions { display: flex; align-items: center; gap: 6px; }

.cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.15s;
}

.cart-btn:hover { background: rgba(0, 0, 0, 0.03); }
.cart-btn svg { width: 21px; height: 21px; }

.cart-btn .bubble {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9999px;
  background: var(--black);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-radius: 9999px;
  font-size: 18px;
  cursor: pointer;
}

.nav-toggle:hover { background: rgba(0, 0, 0, 0.03); }

/* Announcement bar — dark navy gradient strip below the header */
.announce {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--navy-3) 0%, var(--navy-2) 50%, var(--navy-3) 100%);
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  padding: 11px 24px;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.announce::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 60px at 50% 0%, rgba(255, 255, 255, 0.12), transparent 70%);
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Hero — pastel gradient band with floating bottles                   */
/* ------------------------------------------------------------------ */

.hero {
  position: relative;
  width: 100%;
  min-height: 60vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero--sm { min-height: 44vh; }

.hero-bg { position: absolute; inset: 0; }

/* gradient variants (per page) */
.hero-bg--sky      { background: linear-gradient(180deg, rgba(203, 229, 252, 0.7) 0%, rgba(203, 229, 252, 0.35) 100%); }
.hero-bg--lavender { background: linear-gradient(180deg, rgba(232, 229, 255, 0.7) 0%, rgba(203, 229, 252, 0.45) 100%); }
.hero-bg--blue     { background: linear-gradient(180deg, rgba(219, 234, 254, 0.7) 0%, rgba(191, 219, 254, 0.5) 100%); }
.hero-bg--green    { background: linear-gradient(180deg, rgba(233, 252, 230, 0.75) 0%, rgba(209, 250, 229, 0.45) 100%); }
.hero-bg--amber    { background: linear-gradient(180deg, rgba(254, 243, 199, 0.6) 0%, rgba(253, 230, 138, 0.4) 100%); }
.hero-bg--violet   { background: linear-gradient(180deg, rgba(237, 233, 254, 0.7) 0%, rgba(221, 214, 254, 0.5) 100%); }

/* full-bleed background photo hero */
.hero-bg--photo { overflow: hidden; }
.hero-bg--photo .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* soft light scrim so centered dark text stays legible over the photo */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  background: radial-gradient(ellipse 40% 74% at 50% 48%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.34) 46%, transparent 72%);
}

/* Store page: white hero text over an earthy scrim that blends with the sandy
   banner (warm brown, kept light so it doesn't read as a dark overlay) */
.page-store .hero-scrim {
  /* narrow so it stays in the central sand gap and never darkens the vials */
  background: radial-gradient(ellipse 34% 80% at 50% 50%, rgba(74, 50, 32, 0.42) 0%, rgba(74, 50, 32, 0.18) 52%, transparent 82%);
}
.page-store .hero--photo .hero-content h1 { color: #fff; }
.page-store .hero--photo .hero-content .sub { color: rgba(255, 255, 255, 0.9); }

/* Phones: swap to the portrait banner and stack the white text above the vials */
@media (max-width: 700px) {
  .page-store .hero--photo.hero--sm {
    aspect-ratio: 768 / 1376;
    max-height: none;
    min-height: 0;
    align-items: flex-start;
  }
  .page-store .hero--photo .hero-content {
    max-width: none;
    padding: 40px 28px 0;
  }
  /* no scrim on mobile — text sits on the open sand at the top */
  .page-store .hero-scrim { background: none; }
}

/* photo hero: show the whole banner uncropped (its own aspect ratio),
   and keep the text narrow so it sits in the gap between the vials */
.hero--photo.hero--sm {
  min-height: 0;
  height: auto;
  width: auto;
  aspect-ratio: 1920 / 600; /* between the full banner and the tighter original crop */
  max-height: 450px;
  /* rounded, inset photo window like the home-page photo panels */
  margin: 20px clamp(16px, 3vw, 48px) 4px;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.hero--photo .hero-content {
  max-width: 440px;
  padding: 24px;
}

.hero--photo .hero-content h1 { font-size: clamp(28px, 3.6vw, 46px); }
.hero--photo .hero-content .sub { font-size: clamp(14px, 1.5vw, 17px); }

@media (max-width: 700px) {
  /* the center gap is too small at phone widths — fall back to a cropped
     center crop so text has room over the sand */
  .hero--photo.hero--sm { aspect-ratio: auto; min-height: 300px; }
  .hero--photo .hero-photo { object-position: center; }
}

/* floating bottle layer: four %-positioned slots framing the text */
.hero-bottles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.hero-bottles .hb { position: absolute; }
.hero-bottles .hb svg, .hero-bottles .hb img { width: 100%; height: auto; filter: drop-shadow(0 25px 45px rgba(2, 44, 34, 0.15)); }

.hero-bottles .hb { will-change: translate; }
.hb-1 { left: 4%;  top: 12%;    width: 11%; transform: rotate(-6deg);  animation: float-delayed 7s ease-in-out infinite 1s; }
.hb-2 { right: 5%; top: 18%;    width: 9%;  transform: rotate(14deg);  animation: float 6s ease-in-out infinite; z-index: 10; }
.hb-3 { left: 12%; bottom: 10%; width: 10%; transform: rotate(-10deg); animation: float-slow 8s ease-in-out infinite; }
.hb-4 { right: 8%; bottom: 5%;  width: 8%;  transform: rotate(18deg);  animation: float 6.5s ease-in-out infinite 0.5s; }

/* GPU-composited float: `translate` composes with the wrappers' rotate() */
@keyframes float        { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes float-slow   { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes float-delayed{ 0%, 100% { translate: 0 0; } 50% { translate: 0 -18px; } }

.hero-content {
  position: relative;
  z-index: 20;
  text-align: center;
  max-width: 768px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  backdrop-filter: blur(4px);
  margin-bottom: 24px;
}

.badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #22c55e;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.hero h1 {
  font-size: clamp(40px, 6.5vw, 72px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

.hero .sub {
  font-size: clamp(18px, 2vw, 23px);
  color: rgba(19, 19, 21, 0.7);
  max-width: 672px;
  margin: 0 auto 32px;
}

.hero .sub:last-child { margin-bottom: 0; }

.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(0, 0, 0, 0.4);
  animation: bounce 1.6s infinite;
  z-index: 20;
  font-size: 20px;
  pointer-events: none;
}

@keyframes bounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 8px; } }

/* ------------------------------------------------------------------ */
/* Split hero (homepage): text left on white, bottle collage right     */
/* ------------------------------------------------------------------ */

.split-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
  overflow-x: clip;
}

.sh-copy {
  position: relative;
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 5vw 72px 6vw;
  overflow: hidden;
}

.sh-copy h1 {
  font-size: clamp(40px, 4.4vw, 66px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}

.sh-copy .sub {
  font-size: 19px;
  color: var(--slate);
  max-width: 520px;
  margin-bottom: 36px;
}

.sh-copy .btn { align-self: flex-start; }

/* photo panel — keeps the photo's own aspect ratio (no fill bars),
   sized to fit the viewport, rounded on all four corners, inset from
   the right edge */
.sh-art {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1008 / 1040;
  height: min(calc(100vh - 170px), 700px);
  align-self: center;
  justify-self: end;
  border-radius: var(--r-xl);
  margin: 24px 48px 24px 0;
  background: #85a8c0; /* only visible in the no-photo fallback state */
}

.sh-art .b { position: absolute; pointer-events: none; user-select: none; }
.sh-art .b svg, .sh-art .b img { width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(2, 44, 34, 0.18)); }

/* real product photo fills the ratio-matched window exactly */
.sh-art .sh-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateY(5%) scale(1.4); /* zoomed in, nudged lower; edges clipped by the panel */
}

/* ------------------------------------------------------------------ */
/* Guarantee split section: bottles left, benefit bars right           */
/* ------------------------------------------------------------------ */

.guarantee {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow-x: clip;
}

/* rounded panel inset from the left edge, matching the hero photo
   window treatment; bottles overhang its bottom edge */
.g-art {
  position: relative;
  overflow: visible;
  min-height: 480px;
  border-radius: var(--r-xl);
  margin: 32px 0 32px 48px;
  background: linear-gradient(160deg, #f7e9ef 0%, var(--lavender) 100%);
}

.g-art .g-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.g-art .b { position: absolute; pointer-events: none; user-select: none; will-change: translate; animation: float 7s ease-in-out infinite; }
.g-art .b + .b { animation: float-slow 9s ease-in-out infinite 0.8s; }
.g-art .b:nth-child(3) { animation: float-delayed 8s ease-in-out infinite 0.4s; }
.g-art .b svg, .g-art .b img { width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(2, 44, 34, 0.18)); }

.g-copy {
  padding: 84px 6vw 84px 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.g-copy h2 { font-size: clamp(28px, 2.6vw, 38px); margin-bottom: 14px; }
.g-copy .sub { color: var(--slate); font-size: 17px; max-width: 520px; }

/* benefit rows: frosted-glass floating cards bleeding left across the
   column boundary onto the photo panel */
.g-item {
  position: relative;              /* paints above the positioned .g-art */
  display: flex;
  align-items: stretch;
  margin: 18px 0 0 calc(-5vw - 34px);
  max-width: 720px;
  border-radius: 20px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.38);
  /* fine grain over the frost = textured glass */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 24px 48px rgba(15, 35, 55, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -12px 24px rgba(255, 255, 255, 0.18);
}

.g-item:first-of-type { margin-top: 36px; }

.g-tab { display: none; }

.g-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  background: transparent;
  padding: 20px 26px;
}

.g-row .gi {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
}

.g-row .gi svg { width: 24px; height: 24px; }

.g-row h3 { font-size: 17px; }
.g-row p { font-size: 14px; color: var(--slate); }

/* ------------------------------------------------------------------ */
/* Product carousel (featured)                                         */
/* ------------------------------------------------------------------ */

.carousel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 28px;
}

.carousel-head h2 { font-size: clamp(28px, 2.6vw, 38px); font-weight: 700; }
.carousel-head .sub { color: var(--slate); font-size: 15px; margin-top: 4px; }

.carousel { position: relative; }

/* white edge fades — cards slide underneath; toggled by scroll position */
.carousel::before,
.carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 14px;
  width: 56px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}

.carousel::before { left: 0; background: linear-gradient(90deg, var(--white) 0%, transparent 100%); }
.carousel::after { right: 0; background: linear-gradient(270deg, var(--white) 0%, transparent 100%); }

.carousel.fade-l::before { opacity: 1; }
.carousel.fade-r::after { opacity: 1; }

.car-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 14px;
  scrollbar-width: none;
}

.car-track::-webkit-scrollbar { display: none; }

.car-btn {
  position: absolute;
  top: 38%;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: var(--white);
  border: 1px solid #dedede;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
  transition: background 0.15s;
}

.car-btn:hover { background: var(--gray-50); }
.car-btn--l { left: -14px; }
.car-btn--r { right: -14px; }

.pcard {
  flex: 0 0 300px;
  scroll-snap-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
}

.pcard:hover { box-shadow: var(--shadow-md); }
.pcard[data-card] { cursor: pointer; }

.pcard-img {
  background: var(--art-bg, var(--gray-100));
  padding: 34px 0 28px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.pcard-img:has(> img) { padding: 0; }
.pcard-img > img { width: 100%; height: 320px; object-fit: cover; }

.pcard-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }

.pcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pcard-top h3 { font-size: 19px; }
.pcard-top h3 a:hover { color: var(--slate); }

.pcard-price { text-align: right; flex-shrink: 0; }
.pcard-price small { display: block; font-size: 12px; color: var(--cool); font-weight: 400; }
.pcard-price strong { font-size: 19px; font-weight: 700; }

.pcard-cat { font-size: 13px; color: var(--slate); margin: 4px 0 18px; }

.pcard-btns { display: flex; gap: 10px; margin-top: auto; }
.pcard-btns .btn { flex: 1; padding: 10px 12px; font-size: 13.5px; }

/* ------------------------------------------------------------------ */
/* Product grid                                                        */
/* ------------------------------------------------------------------ */

/* custom clear (×) button — black, replaces the browser default */
.store-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 15px;
  width: 15px;
  background: #131315;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}

.store-search {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.store-search input {
  width: 100%;
  max-width: 440px;
  border: 1px solid #dedede;
  border-radius: 9999px;
  background: var(--white);
  padding: 12px 22px;
  font-family: var(--font-body);
  font-size: 14.5px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.store-search input:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(19, 19, 21, 0.08);
}

.grid-empty { text-align: center; color: var(--cool); padding: 48px 0; grid-column: 1 / -1; }

.filters {
  display: flex;
  flex-wrap: nowrap;              /* one row, never wrap (no lone "Circadian" row) */
  /* "safe center": centered when the whole row fits, falls back to left-start
     (so it scrolls cleanly) when it doesn't — no clipped first chip. */
  justify-content: safe center;
  gap: 5px;
  /* break out of the .wrap max-width to use the full screen width so all 8
     category tabs fit on one row on desktop */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 0 16px 4px;
  margin-bottom: 36px;
  overflow-x: auto;
  scrollbar-width: none;         /* hide the scrollbar (Firefox) */
}

.filters::-webkit-scrollbar { display: none; }  /* hide the scrollbar (WebKit) */

.filters button {
  flex: 0 0 auto;               /* keep each chip on the row, don't shrink */
  white-space: nowrap;
  background: var(--white);
  border: 1px solid #dedede;
  border-radius: 9999px;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--slate);
  cursor: pointer;
  transition: all 0.15s;
}

.filters button:hover { border-color: var(--ash); color: var(--black); }
.filters button.active { background: var(--black); border-color: var(--black); color: var(--white); }

.grid {
  display: grid;
  /* fixed 300px columns — identical width to the featured slider cards;
     4 per row on desktop, centered */
  grid-template-columns: repeat(auto-fit, 300px);
  justify-content: center;
  gap: 28px 36px;
}

/* shop card: same structure/proportions as the featured slider card —
   full-bleed photo on top, padded body below */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, margin-top 0.2s;
}

.card:hover { box-shadow: var(--shadow-md); }

.card-art {
  border-radius: 0;
  padding: 22px 0 18px;
  margin-bottom: 8px;
  background: linear-gradient(145deg, var(--art-bg, var(--gray-100)) 0%, #ffffff 100%);
  overflow: hidden;
}
.card-art svg, .card-art img { margin: 0 auto; }

/* real photos fill their tile edge-to-edge, pcard proportions (300:320) */
.card-art:has(> img) { padding: 0; }
.card-art > img { width: 100%; aspect-ratio: 300 / 320; height: auto; object-fit: cover; }

/* body spacing matches the featured card (18px 20px) */
/* whole card is clickable to the product page */
.card { cursor: pointer; transition: box-shadow 0.18s ease, transform 0.18s ease; }
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card a, .card button { cursor: pointer; }

/* inline size picker: a small panel that slides up from the bottom of the
   product photo (ascend-style) — covers only the lower part of the image
   and never grows the card */
.card-art, .pcard-img { position: relative; display: block; }
.card-art > img, .pcard-img > img { display: block; }
.variant-pop {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  max-height: calc(100% - 20px);
  z-index: 5;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(15, 35, 55, 0.18);
  overflow-y: auto;
  animation: vp-in 0.2s ease;
  cursor: default;
  text-align: left;
}
.variant-pop[hidden] { display: none; }
@keyframes vp-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.vp-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cool);
}
.vp-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--slate);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.vp-close:hover { border-color: var(--navy); color: var(--navy); }
.vp-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.vp-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 9999px;
  background: var(--white);
  font-size: 12.5px;
  font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.vp-opt:hover:not(:disabled) { border-color: var(--navy); background: var(--gray-100); }
.vp-opt .vp-price { color: var(--slate); font-weight: 400; }
.vp-opt.is-sold {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: line-through;
}
.vp-opt.is-sold .vp-price { text-decoration: none; }

/* sold-out size buttons on the product detail page */
.variants button.is-sold {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* volume-discount tier chips (product page) */
.bulk-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 10px;
}
.bulk-tiers button {
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  background: #e9ecef;
  border: 1px solid #e9ecef;
  border-radius: 9999px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bulk-tiers button:hover { background: #dde1e6; border-color: #dde1e6; }
.bulk-tiers button.hit {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
}

/* CoA badge (product page) */
.coa-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 4px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--gray-100);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.coa-badge:hover { border-color: var(--navy); box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,0.06)); }
.coa-check {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.coa-badge strong { display: block; font-size: 13.5px; }
.coa-badge small { display: block; font-size: 12px; color: var(--slate); }
.coa-arrow { margin-left: auto; color: var(--slate); }

/* category chip counts (store filters) */
.filters .cat-count {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 9999px;
  background: rgba(19, 19, 21, 0.08);
  font-size: 11.5px;
  text-align: center;
}
.filters button.active .cat-count { background: rgba(255, 255, 255, 0.22); }

/* sticky add-to-cart bar: mobile product pages only */
.sticky-add { display: none; }
@media (max-width: 720px) {
  .sticky-add {
    display: flex;
    align-items: center;
    gap: 14px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--white);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .sticky-add .sa-info { min-width: 0; flex: 1; }
  .sticky-add .sa-info strong {
    display: block;
    font-size: 14.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sticky-add .sa-info span { font-size: 12.5px; color: var(--slate); }
  .sticky-add .btn { flex-shrink: 0; padding: 11px 22px; }
  /* keep page content clear of the bar */
  [data-product] { padding-bottom: 90px; }
}

.card .num {
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cool);
  padding: 0 20px;
}

.card h3 { font-size: 19px; padding: 0 20px; }
.card h3 a:hover { color: var(--slate); }

.card .desc { font-size: 13.5px; color: var(--slate); min-height: 40px; padding: 0 20px; }

.card .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 12px 20px 20px;
}

.card .price { font-weight: 600; font-size: 17px; }
.card .price small { color: var(--cool); font-weight: 400; font-size: 12px; }

/* ------------------------------------------------------------------ */
/* Product detail                                                      */
/* ------------------------------------------------------------------ */

.pd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding: 40px 0 56px;
}

.pd-art {
  border-radius: var(--r-2xl);
  background: linear-gradient(155deg, var(--art-bg, var(--gray-100)) 0%, #ffffff 90%);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  overflow: hidden;
}

.pd-art > img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; }

.pd h1 { font-size: 40px; margin: 6px 0 4px; }
.pd .price { font-size: 24px; font-weight: 600; margin: 16px 0; }
.pd .desc { color: var(--slate); margin-bottom: 24px; }

.variants { display: flex; gap: 8px; margin: 10px 0 24px; }

.variants button {
  border: 1px solid #dedede;
  background: var(--white);
  border-radius: 9999px;
  padding: 9px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.variants button:hover { border-color: var(--ash); }
.variants button.active { border-color: var(--black); background: var(--black); color: var(--white); }

.qty-row { display: flex; gap: 12px; margin-bottom: 28px; }

.qty { display: flex; border: 1px solid #dedede; border-radius: 9999px; overflow: hidden; }
.qty button { width: 42px; background: var(--white); border: none; font-size: 16px; cursor: pointer; }
.qty button:hover { background: var(--gray-50); }
.qty input {
  width: 48px;
  border: none;
  text-align: center;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
}
.qty input:focus { outline: none; }

.spec-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  margin: 12px 0 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.spec-table tr:nth-child(odd) td { background: var(--gray-50); }
.spec-table td { padding: 11px 16px; }
.spec-table td:first-child {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  width: 40%;
}

/* ------------------------------------------------------------------ */
/* Cards, tiles, icon circles                                          */
/* ------------------------------------------------------------------ */

/* value props grid */
.props {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.props > div {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
}

.band--gray .props > div { border-color: var(--gray-100); }

.props .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--lavender), var(--sky));
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--black);
}

.props h3 { font-size: 17px; margin: 14px 0 6px; }
.props p { font-size: 13.5px; color: var(--slate); }

.props > div:nth-child(4n+1) .num { background: linear-gradient(135deg, var(--mint), #ffffff); }
.props > div:nth-child(4n+2) .num { background: linear-gradient(135deg, var(--sky), #ffffff); }
.props > div:nth-child(4n+3) .num { background: linear-gradient(135deg, var(--lavender), #ffffff); }
.props > div:nth-child(4n+4) .num { background: linear-gradient(135deg, var(--butter), #ffffff); }

/* About page: neutral gray coins instead of the pastel accents */
.page-about .props > div:nth-child(n) .num { background: var(--gray-100); }

/* membership / pricing tier cards */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tier {
  position: relative;
  background: var(--white);
  border: 1px solid #dedede;
  border-radius: var(--r-2xl);
  padding: 36px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.tier--featured { border: 2px solid var(--black); box-shadow: var(--shadow-lg); }

.tier-tag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--black);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 9999px;
  white-space: nowrap;
}

.tier h3 { font-size: 21px; margin-bottom: 8px; }
.tier .tier-price { font-size: 34px; font-weight: 700; line-height: 1.1; }
.tier .tier-cap { font-size: 13px; color: var(--cool); margin-bottom: 18px; }

.tier ul { list-style: none; text-align: left; margin: 0 0 26px; }
.tier li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--slate);
  padding: 6px 0;
}
.tier li::before {
  content: "✓";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: var(--mint);
  color: #047857;
  font-size: 11px;
  font-weight: 700;
}

.tier .btn { margin-top: auto; }

@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }

/* numbered black circles (3-step rows) */
.step-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: var(--black);
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
  margin: 0 auto 16px;
}

/* large gradient icon circle (CTA cards) */
.icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #eff6ff, #eef2ff);
  margin: 0 auto 20px;
  font-family: var(--font-serif);
  font-size: 24px;
}

/* frosted / textured green glass disk */
.icon-circle--glass {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(125% 120% at 30% 22%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.08) 32%, rgba(255,255,255,0) 56%),
    radial-gradient(110% 110% at 72% 88%, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(150deg, #4a6647 0%, #3c5539 55%, #2f4530 100%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.55),
    inset 0 -7px 13px rgba(0,0,0,0.28),
    inset 0 2px 7px rgba(255,255,255,0.14),
    0 8px 18px rgba(30,50,28,0.35);
}
/* glossy top sheen */
.icon-circle--glass::before {
  content: "";
  position: absolute;
  top: -18%; left: -10%;
  width: 120%; height: 58%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,0.5), rgba(255,255,255,0) 72%);
  pointer-events: none;
}
/* fine ribbed-glass texture */
.icon-circle--glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 2px, rgba(0,0,0,0.05) 2px 4px);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.icon-circle--glass > * { position: relative; z-index: 2; }

/* big white CTA card (gray bands) */
.cta-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-sm);
  padding: 40px;
  text-align: center;
}

.cta-card h3 { font-size: 24px; margin-bottom: 12px; }
.cta-card > p { color: var(--slate); margin-bottom: 24px; }

/* gradient quick-link card */
.quick-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(90deg, #eff6ff, #eef2ff);
  border: 1px solid #dbeafe;
  border-radius: var(--r-lg);
  padding: 20px 22px;
  transition: box-shadow 0.2s;
}

.quick-card:hover { box-shadow: var(--shadow-md); text-decoration: none; }
.quick-card .qc-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 18px;
  color: #2563eb;
}
.quick-card .qc-body { flex: 1; }
.quick-card h3 { font-size: 16px; margin-bottom: 2px; }
.quick-card p { font-size: 13.5px; color: var(--slate); }
.quick-card .qc-chev { color: var(--cool); font-size: 18px; }

/* ------------------------------------------------------------------ */
/* Accordions (FAQ) — white rounded cards                              */
/* ------------------------------------------------------------------ */

details.acc {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
  overflow: hidden;
}

details.acc summary {
  list-style: none;
  cursor: pointer;
  padding: 19px 24px;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: background 0.15s;
}

details.acc summary:hover { background: var(--gray-50); }
details.acc summary::-webkit-details-marker { display: none; }

details.acc summary::after {
  content: "▾";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9999px;
  background: var(--gray-100);
  color: var(--slate);
  font-size: 13px;
  transition: transform 0.2s;
}

details.acc[open] summary::after { transform: rotate(180deg); }

details.acc .acc-body { padding: 0 24px 20px; color: var(--slate); font-size: 15px; }

/* FAQ category group heading (left-aligned) */
.faq-group { margin-bottom: 48px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group h2 { font-size: 24px; margin-bottom: 20px; }

/* ------------------------------------------------------------------ */
/* Forms                                                               */
/* ------------------------------------------------------------------ */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }

.field { text-align: left; }

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 7px;
}

.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid #dedede;
  border-radius: var(--r-md);
  background: var(--white);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--black);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(19, 19, 21, 0.08);
}

.field .err { display: none; font-size: 12.5px; color: #e11d48; margin-top: 5px; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #e11d48; }
.field.invalid .err { display: block; }

.notice {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--gray-50);
  padding: 22px 26px;
  margin: 24px 0;
  font-size: 14.5px;
}

/* ------------------------------------------------------------------ */
/* Utility page (track order)                                          */
/* ------------------------------------------------------------------ */

.utility-band { background: var(--gray-50); min-height: 80vh; padding: 48px 0 80px; }

.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--r-lg);
  background: var(--black);
  color: var(--white);
  font-size: 24px;
  margin-bottom: 20px;
}

.panel-card {
  background: var(--white);
  border: 1px solid #e3e5e8;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.tab-bar { display: flex; border-bottom: 1px solid #e3e5e8; }
.tab-bar button {
  flex: 1;
  padding: 13px 8px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--cool);
  cursor: pointer;
}
.tab-bar button.active { color: var(--black); border-bottom-color: var(--black); }

.panel-card form { padding: 24px; }
.panel-card .field { margin-bottom: 16px; }
.panel-card input { height: 48px; }

.helper { text-align: center; font-size: 14px; color: var(--cool); margin-top: 32px; }

/* Track order status */
.status-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 24px 0;
}
.status-steps > div {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
}
.status-steps .label { display: block; margin-bottom: 4px; color: var(--ash); }
.status-steps > div.done { border-color: var(--black); }
.status-steps > div.done .label { color: var(--black); }
.status-steps > div.done::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-bottom: 8px;
  border-radius: 9999px;
  background: var(--mint);
  color: var(--black);
  font-size: 11px;
}
.status-steps .date { font-size: 12.5px; color: var(--cool); }

/* ------------------------------------------------------------------ */
/* Cart drawer                                                         */
/* ------------------------------------------------------------------ */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(19, 19, 21, 0.4);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 94vw;
  background: var(--white);
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  transform: translateX(105%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
}

body.drawer-open .drawer { transform: translateX(0); }
body.drawer-open .drawer-overlay { opacity: 1; pointer-events: auto; }

.drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 26px;
  border-bottom: 1px solid var(--border);
}

.drawer-head .label {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--black);
}

.drawer-head button {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
.drawer-head button:hover { background: var(--gray-50); }

.drawer-items { flex: 1; overflow-y: auto; padding: 8px 26px; }

.ci { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); }

.ci-art {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: linear-gradient(145deg, var(--art-bg, var(--gray-100)), #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  overflow: hidden;
}

.ci-art:has(> img) { padding: 0; }
/* fill the whole 64x64 thumbnail, zoomed into the vial (no empty top/bottom) */
.ci-art > img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.35); }

/* Neutral gray placeholder behind product photos so image load-in looks clean.
   Photos are opaque and cover their tile, so the gray only shows for the split
   second before each image paints. (The accent-color no-photo fallback tiles,
   which have no <img>, are left untouched.) */
.pcard-img:has(> img),
.card-art:has(> img),
.ci-art:has(> img),
.pd-art:has(> img),
.qv-art,
.hero-bg--photo { background: var(--gray-100); }
.ci-info { flex: 1; }
.ci-info h4 { font-size: 15px; font-weight: 600; }
.ci-info .variant { font-size: 13px; color: var(--slate); }
.ci-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.ci .qty button { width: 30px; font-size: 14px; }
.ci .qty input { width: 34px; font-size: 13px; }
.ci .rm { background: none; border: none; font-size: 12px; font-weight: 500; color: var(--cool); cursor: pointer; }
.ci .rm:hover { color: var(--black); text-decoration: underline; }

.drawer-foot { border-top: 1px solid var(--border); padding: 20px 26px 26px; }
.drawer-foot .subtotal { display: flex; justify-content: space-between; font-weight: 600; font-size: 17px; margin-bottom: 6px; }
.drawer-foot .fine { font-size: 12.5px; color: var(--cool); margin-bottom: 16px; }

.cart-empty { text-align: center; padding: 64px 0; color: var(--cool); }

/* ------------------------------------------------------------------ */
/* Checkout                                                            */
/* ------------------------------------------------------------------ */

.checkout-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; max-width: 1024px; margin: 0 auto; }

.summary {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 26px;
  background: var(--gray-50);
}
.summary .li { display: flex; justify-content: space-between; font-size: 14px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.summary .tot { display: flex; justify-content: space-between; font-weight: 600; font-size: 17px; padding-top: 16px; }

/* ------------------------------------------------------------------ */
/* Verification gate — full-viewport with rising bottles               */
/* ------------------------------------------------------------------ */

.gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #f7f6f3;
  overflow-y: auto;
  display: none;
}

body.gated .gate { display: block; }
body.gated { overflow: hidden; }

/* bottles drifting upward from below the fold */
.gate-vials {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.gate-vials .gv {
  position: absolute;
  bottom: -30%;
  animation: drift-up linear infinite;
}

.gate-vials .gv svg, .gate-vials .gv img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 25px 45px rgba(2, 44, 34, 0.18));
}

@keyframes drift-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-175vh); }
}

.gate-col {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}

.gate-logo { margin-bottom: 24px; font-size: 28px; }

.gate-card {
  width: 100%;
  max-width: 512px;
  /* frosted textured glass — same recipe as the guarantee cards */
  background-color: rgba(255, 255, 255, 0.55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 24px;
  box-shadow:
    0 24px 48px rgba(15, 35, 55, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  padding: 32px;
  text-align: left;
}

.gate-card h2 { font-size: 28px; letter-spacing: -0.02em; color: var(--navy); }

.gate-card .gate-sub { color: var(--slate); font-size: 14.5px; margin-top: 8px; }

.gate-checks { display: flex; flex-direction: column; gap: 14px; margin: 24px 0; }

.gate-checks label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  color: #1e293b;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.gate-checks label:hover { border-color: var(--navy); background: rgba(255, 255, 255, 0.75); }
.gate-checks label:has(input:checked) { border-color: var(--navy); background: rgba(130, 163, 190, 0.18); }
.gate-checks input { margin-top: 4px; accent-color: var(--navy); }

.gate-fine { font-size: 11.5px; color: #64748b; margin-top: 20px; }
.gate-fine a { text-decoration: underline; }

.gate-exit {
  display: block;
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
  color: #64748b;
}
.gate-exit a { text-decoration: underline; }
.gate-exit a:hover { color: var(--black); }

/* ------------------------------------------------------------------ */
/* Pre-footer: CTA band + overlapping newsletter card                  */
/* ------------------------------------------------------------------ */

.prefooter { position: relative; overflow-x: clip; margin-top: 96px; }

.cta-band {
  position: relative;
  width: 100%;
  padding: 48px 0 110px;
  background: linear-gradient(180deg, var(--butter) 0%, var(--pale-green) 100%);
}

.cta-band .cta-inner {
  position: relative;
  z-index: 20;
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
  padding: 0 48px;
}

.cta-band h2 {
  font-size: clamp(22px, 3.2vw, 36px);
  line-height: 1.35;
  margin-bottom: 28px;
}

/* animated gradient underline on the key phrase */
.cta-band .hl { position: relative; white-space: nowrap; }
.cta-band .hl::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 5px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #a3e635, #22c55e);
  transform-origin: left;
  animation: underline-reveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes underline-reveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* corner bottles bleeding off the band edges */
.cta-bottle { position: absolute; pointer-events: none; user-select: none; }
.cta-bottle svg, .cta-bottle img { width: 100%; height: auto; filter: drop-shadow(0 20px 35px rgba(2, 44, 34, 0.18)); }
.cta-bottle--l { left: clamp(-15px, 3vw, 75px); top: -28px; width: clamp(55px, 7vw, 100px); transform: rotate(18deg); z-index: 10; }
.cta-bottle--r { right: clamp(-20px, 3.5vw, 80px); bottom: -60px; width: clamp(60px, 7.6vw, 110px); transform: rotate(-8deg); z-index: 70; }

/* newsletter strip: signup left, wordmark right */
.newsletter { position: relative; z-index: 30; padding-bottom: 48px; }

.newsletter-panel {
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 40px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.newsletter-panel .nl-text { flex: 1; min-width: 240px; max-width: 480px; }
.newsletter-panel h3 { font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -0.02em; margin-bottom: 6px; }
.newsletter-panel .nl-sub { font-size: 14.5px; color: var(--slate); margin-bottom: 20px; }

/* bethesda labs wordmark on the right */
.nl-logo { flex-shrink: 0; }
.nl-logo:hover { text-decoration: none; }
.nl-logo .logo-main { font-size: clamp(44px, 6vw, 68px); }
.nl-logo .logo-sub { font-size: clamp(15px, 1.6vw, 20px); margin-top: 0; }

.newsletter form {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  max-width: 440px;
  min-width: 280px;
  background: var(--white);
  border: 1px solid #dedede;
  border-radius: 9999px;
  padding: 5px;
  box-shadow: var(--shadow-sm);
}

.newsletter input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 9px 18px;
  font-family: var(--font-body);
  font-size: 14.5px;
}
.newsletter input:focus { outline: none; }

.newsletter form .btn { padding: 9px 22px; font-size: 14px; }

/* ------------------------------------------------------------------ */
/* Footer — dark navy                                                  */
/* ------------------------------------------------------------------ */

.footer-dark {
  /* dusty slate blue — sampled from the hero hand-photo backdrop, nudged slightly darker */
  background: #677f96;
  color: #ffffff;
}

.footer-wordmark {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 900;
  text-transform: lowercase;
  text-align: center;
  font-size: clamp(130px, 24vw, 480px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.14);
  height: 0.66em;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  /* eased multi-stop fade; a plain 2-stop mask bands visibly at this size */
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.94) 18%,
    rgba(0, 0, 0, 0.82) 32%,
    rgba(0, 0, 0, 0.64) 46%,
    rgba(0, 0, 0, 0.44) 60%,
    rgba(0, 0, 0, 0.26) 73%,
    rgba(0, 0, 0, 0.12) 85%,
    rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.94) 18%,
    rgba(0, 0, 0, 0.82) 32%,
    rgba(0, 0, 0, 0.64) 46%,
    rgba(0, 0, 0, 0.44) 60%,
    rgba(0, 0, 0, 0.26) 73%,
    rgba(0, 0, 0, 0.12) 85%,
    rgba(0, 0, 0, 0) 100%);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px 32px;
  /* keep the .wrap side gutter (24px) — otherwise the columns sit flush to
     the screen edges on mobile */
  padding: 72px 24px 56px;
}

.footer-cols .brand-col { grid-column: span 2; display: flex; flex-direction: column; gap: 16px; }

.footer-cols .logo { color: var(--white); }

.footer-cols h4 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 16px;
}

.footer-cols ul { list-style: none; }
.footer-cols li { margin-bottom: 10px; }
.footer-cols a { font-size: 14px; color: rgba(255, 255, 255, 0.9); }
.footer-cols a:hover { color: var(--white); }
.footer-cols .about { font-size: 13.5px; color: rgba(255, 255, 255, 0.85); max-width: 300px; }

.socials { display: flex; gap: 10px; margin-top: 6px; }
.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-serif);
  font-size: 13px;
  transition: background 0.15s;
}
.socials a:hover { background: rgba(255, 255, 255, 0.12); }

.fda-callout {
  border-left: 4px solid #fbbf24;
  border-radius: 6px;
  background: rgba(251, 191, 36, 0.12);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.22);
  padding: 18px 22px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 24px;
}
.fda-callout .fda-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fde68a;
  margin-bottom: 6px;
}
.fda-callout a { color: #fcd34d; }

.pay-row {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.pay-row .pay-mark {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.footer-base {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px 0 32px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.footer-base .base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.trust-row { display: flex; gap: 18px; flex-wrap: wrap; }
.trust-row span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, 0.85); }

/* ------------------------------------------------------------------ */
/* Toast                                                               */
/* ------------------------------------------------------------------ */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 90px);
  background: var(--black);
  color: var(--white);
  padding: 13px 28px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 300;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.toast.show { transform: translate(-50%, 0); }

/* ------------------------------------------------------------------ */
/* Page scaffolding (legal / utility pages without a full hero)        */
/* ------------------------------------------------------------------ */

.page-title { padding: 56px 0 8px; text-align: center; }
.page-title h1 { font-size: 44px; letter-spacing: -0.025em; }
.page-title p.sub { color: var(--slate); margin-top: 10px; max-width: 560px; margin-left: auto; margin-right: auto; }
.page-title .label--gray { color: var(--slate); }

.prose { max-width: 768px; margin: 0 auto; padding-bottom: 40px; }
.prose h2 { margin: 36px 0 12px; font-size: 24px; }
.prose p { margin-bottom: 14px; color: var(--slate); }
.prose ul { margin: 0 0 14px 20px; color: var(--slate); }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--black); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

/* CoA / data table */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--white);
}
.data-table th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  background: var(--gray-50);
  border-bottom: 1px solid var(--border);
  padding: 13px 16px;
}
.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--gray-50); }

/* ------------------------------------------------------------------ */
/* Legal disclaimer grid (homepage)                                    */
/* ------------------------------------------------------------------ */

.legal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.legal-item {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}

.legal-item h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15.5px;
  margin-bottom: 7px;
}

.legal-item h3::before {
  content: "✓";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: var(--mint);
  color: #047857;
  font-size: 12px;
  font-weight: 700;
}

.legal-item p { font-size: 13.5px; color: var(--slate); line-height: 1.45; }

@media (max-width: 700px) {
  .legal-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* Quality-you-can-verify split (homepage): content left, photo right  */
/* ------------------------------------------------------------------ */

/* tighter vertical rhythm so the whole section fits one screen */
.band.qv { padding: 48px 0; }

.qv-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}

.qv-main h2 { font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 10px; }

.qv-sub { font-size: 16px; color: var(--slate); max-width: 560px; margin-bottom: 18px; }

/* inline stat row with hairline dividers, ruled off from the tabs */
.qv-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.qv-stats > div { display: flex; align-items: center; gap: 10px; }

.qv-stats strong {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.qv-stats span { font-size: 13px; color: var(--slate); line-height: 1.3; max-width: 84px; }

.qv-div { width: 1px; height: 32px; background: var(--border); margin: 0 8px; }

/* the rectangle holding the 7 quality checks — 2-column grid keeps it
   compact; the 7th card spans the full width to balance the odd count */
.qv-dock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
  margin-bottom: 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}

/* each check: a frosted-glass rounded card — name stacked over its
   explanation; same neutral glass as the other cards */
.qv-oval {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 16px;
  border-radius: var(--r-md);
  background-color: rgba(255, 255, 255, 0.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -8px 18px rgba(255, 255, 255, 0.2),
    0 4px 12px rgba(15, 35, 55, 0.05);
}

.qv-oval-name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--black);
}

.qv-oval-text {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--slate);
}

@media (max-width: 560px) {
  .qv-dock { grid-template-columns: 1fr; }
  .qv-oval:first-child { grid-column: auto; }
}

.qv-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
.qv-fine { font-size: 13px; color: var(--cool); }

/* proof photo panel — ratio-matched window so the photo fits exactly,
   uncropped and unscaled (same idiom as the hero photo window) */
.qv-art {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 960 / 1431; /* native ratio of the home-page vial render */
  height: min(760px, calc(100vh - 140px));
  justify-self: center;
  align-self: center;
  box-shadow: var(--shadow-md);
}

.qv-art > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* frosted textured glass — same material as the guarantee benefit cards */
.qv-chip,
.qv-proof {
  background-color: rgba(255, 255, 255, 0.38);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 24px 48px rgba(15, 35, 55, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -12px 24px rgba(255, 255, 255, 0.18);
}

/* floating purity chip — top right */
.qv-chip {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 20px;
  padding: 10px 14px;
}

.qv-chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--navy);
}

.qv-chip-icon svg { width: 14px; height: 14px; }

.qv-chip strong { display: block; font-size: 13.5px; line-height: 1.2; }
.qv-chip small { display: block; font-size: 11.5px; color: var(--slate); line-height: 1.3; }

/* "see the proof" overlay bar — bottom of the photo, links to the CoA page */
.qv-proof {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 20px;
  padding: 14px 18px;
  transition: background-color 0.2s;
}

.qv-proof:hover { background-color: rgba(255, 255, 255, 0.52); text-decoration: none; }

.qv-proof strong { display: block; font-size: 15px; line-height: 1.25; }
.qv-proof small { display: block; font-size: 12.5px; color: var(--slate); }

.qv-proof-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--navy);
  font-size: 16px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.qv-proof:hover .qv-proof-arrow { background: var(--black); color: var(--white); }

@media (max-width: 900px) {
  .qv-grid { grid-template-columns: 1fr; gap: 32px; }
  /* width-driven on mobile: the base rule's fixed height made the 4/3 ratio
     compute a huge width (≈900px). Reset height so width fills the column.
     Use the photo's native portrait ratio so the whole vial shows and the
     "see the proof" card lands on the leaves below the vial, not over it. */
  .qv-art { order: -1; min-height: 0; height: auto; width: 100%; aspect-ratio: 960 / 1431; }
}

@media (max-width: 560px) {
  .qv-stats { gap: 12px; }
  .qv-div { margin: 0 2px; }
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 1024px) {
  .band { padding: 96px 0; }
  .sec-head h2 { font-size: 40px; }
  .announce { font-size: 14px; }
}

@media (max-width: 900px) {
  .split-hero { grid-template-columns: 1fr; min-height: 0; }
  .sh-art { height: auto; justify-self: stretch; margin: 0 16px 24px; border-radius: var(--r-lg); }
  .sh-copy { padding: 56px 24px 48px; }
  /* Bethesda standard on mobile: heading spans the top, then a shrunken photo
     on the left with the three cards stacked to the right of it */
  .guarantee {
    display: grid;
    grid-template-columns: 38% 1fr;
    column-gap: 12px;
    padding: 40px 14px 12px;
  }
  .g-copy { display: contents; }               /* hoist heading + cards into the grid */
  .g-copy > h2 { grid-column: 1 / -1; grid-row: 1; font-size: 22px; margin-bottom: 6px; }
  .g-copy > .sub { grid-column: 1 / -1; grid-row: 2; font-size: 13px; margin-bottom: 14px; }
  .g-art {
    grid-column: 1;
    grid-row: 3 / span 3;         /* as tall as the three stacked cards */
    min-height: 0;
    margin: 0;
    border-radius: var(--r-xl);
    align-self: stretch;
  }
  .g-item {
    grid-column: 2;
    margin: 0 0 10px 0;           /* no negative bleed — sits beside the photo */
    max-width: none;
    border-radius: 14px;
  }
  .g-item:first-of-type { margin-top: 0; }
  .g-row { padding: 12px 14px; gap: 10px; }
  .g-row p { display: none; }                  /* title only — keeps cards compact */
  .g-row .gi { width: 40px; height: 40px; }
  .g-row .gi svg { width: 18px; height: 18px; }
  .g-row h3 { font-size: 13px; line-height: 1.2; }
  .car-btn { display: none; }
  .pcard { flex-basis: 260px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .props { grid-template-columns: repeat(2, 1fr); }
  .pd, .two-col, .checkout-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); padding: 56px 24px 40px; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px 18px;
  }
  .main-nav a { padding: 12px 16px; font-size: 15px; }
  body.nav-open .main-nav { display: flex; }
  .nav-toggle { display: flex; }
  .hero { min-height: 52vh; }
  .newsletter-panel { padding: 28px 24px; }
}

@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .status-steps { grid-template-columns: 1fr 1fr; }
  h1, .page-title h1 { font-size: 32px; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .footer-cols .brand-col { grid-column: span 2; }
  .gate-card { padding: 24px 20px; }
  .cta-band .cta-inner { padding: 0 24px; }
}

/* ================================================================== */
/* Mobile UX fixes — 2026-07-19 (TODO #33-35)                          */
/* ================================================================== */

/* #1 — Kill stray horizontal page scroll on small screens (a section /
   image spilling past the viewport). overflow-x:clip clips the overflow
   WITHOUT creating a scroll container, so position:sticky keeps working,
   and it's a no-op on desktop where there's nothing to clip. */
html, body { overflow-x: clip; }

@media (max-width: 700px) {
  /* #2 — iOS Safari auto-zooms when a focused input's font-size is < 16px.
     Bump form controls to 16px on phones so tapping a field no longer zooms
     (desktop is untouched — this only applies at <=700px). */
  input, select, textarea { font-size: 16px; }

  /* #3 — Larger finger-friendly tap targets on phones */
  .footer-cols li { margin-bottom: 2px; }
  .footer-cols a { display: inline-block; padding: 9px 0; }  /* ~40px tap height */
  .ci .qty button { width: 38px; height: 38px; font-size: 16px; }  /* cart drawer +/- */
  .qty button { min-height: 44px; }  /* product page +/- */

  /* carousel edge fades are 110px each — far too wide on a narrow phone
     (they cover the cards). Shrink to a subtle hint on mobile. */
  .carousel::before, .carousel::after { width: 20px; }

  /* footer wordmark min is 130px — wider than a phone, so it overflowed/got
     cut off. Let it scale with the viewport so it fits. */
  .footer-wordmark { font-size: 22vw; }
}

/* #4 — carousel already hides its scrollbar (.car-track scrollbar-width:none)
   and uses scroll-snap; smooth the programmatic scroll from the arrow buttons. */
.car-track { scroll-behavior: smooth; }