/* =========================================================
   VIVIE — Home page
   Sizes follow the desktop design file: 1u = 1px of the
   2000px-wide mockup, scaled to the visitor's screen.
   ========================================================= */
:root {
  --u: clamp(0.66px, 0.05vw, 1.25px);

  --ink: #282A21;        /* Espresso Muse */
  --teal: #A7CFCC;       /* Opal Breath */
  --cherry: #742D2A;     /* Cherry Pulse */
  --cream: #FBF6ED;       /* Warm Ivory: header + every section */
  --ink-soft: #3E3F38;
  --muted: #7B7871;
  --line: #CFC8BF;
  --white: #FFFFFF;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Satoshi", "Helvetica Neue", Arial, sans-serif;

  /* Page frame (same proportions as rhodeskin.com) */
  --gutter: max(16px, 2.25vw);          /* side margin for every block */
  --frame-top: max(8px, 0.5vw);         /* space above the announcement bar */
  --bar-h: max(30px, 1.6vw);            /* announcement bar height */
  --frame-gap: max(14px, 1.75vw);       /* gap between bar and hero */
  --radius: max(8px, 0.5vw);            /* hero / header corner radius */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--gutter);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { font-family: var(--serif); font-weight: 400; margin: 0; }
p { margin: 0; }
button { font: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--cherry); outline-offset: 3px; }

/* ---------- Announcement bar ---------- */
.announce {
  margin: var(--frame-top) var(--gutter) 0;
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: center;
  background: var(--ink);
  color: var(--white);
  border-radius: calc(var(--radius) * 0.6);
  font-size: max(11px, calc(20 * var(--u)));
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  margin: var(--frame-gap) var(--gutter) 0;
  height: calc(100svh - var(--frame-top) - var(--bar-h) - var(--frame-gap) - var(--frame-top));
  min-height: 560px;
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--white);
  display: flex;
  flex-direction: column;
}
.hero picture, .hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
}
.hero > *:not(picture) { position: relative; z-index: 2; }

.hero-content {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 0 calc(20 * var(--u)) 12.4%;
}
.hero h1 {
  font-size: calc(90 * var(--u));
  line-height: 1.28;
  font-weight: 400;
}
.hero h1 em { font-style: italic; font-weight: 500; }
.hero-sub { font-size: calc(30 * var(--u)); font-weight: 300; margin-top: calc(24 * var(--u)); }
.hero-note { font-size: calc(23 * var(--u)); font-weight: 300; margin-top: calc(14 * var(--u)); opacity: .92; }

.btn { display: inline-flex; align-items: center; justify-content: center; transition: background .25s, color .25s; }
.btn-light {
  margin-top: calc(45 * var(--u));
  width: calc(365 * var(--u)); height: calc(79 * var(--u));
  border: 2px solid var(--white);
  border-radius: calc(10 * var(--u));
  font-family: var(--sans); font-weight: 700; font-size: calc(22 * var(--u));
}
.btn-light:hover { background: var(--white); color: var(--ink); }

.hero-bottom {
  height: calc(143 * var(--u));
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,.75);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 12.6% 0 12.4%;
}
.trust-icons { display: flex; align-items: center; gap: calc(37 * var(--u)); }
.badge-rx { height: calc(64 * var(--u)); width: auto; }
.badge-hipaa { height: calc(72 * var(--u)); width: auto; }
.badge-licensed { height: calc(74 * var(--u)); width: auto; }
.trust p { font-size: calc(22 * var(--u)); margin-top: calc(10 * var(--u)); }
.payments { display: flex; align-items: center; gap: calc(30 * var(--u)); padding-top: calc(10 * var(--u)); }
.payments-label { font-size: calc(26 * var(--u)); letter-spacing: 0.03em; text-transform: uppercase; }
.payments img { height: calc(66 * var(--u)); width: auto; }

/* ---------- Headers ---------- */
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav-links {
  display: flex; align-items: center; gap: calc(18 * var(--u));
  font-family: var(--serif);
  font-size: max(14px, calc(30 * var(--u)));
  letter-spacing: 0.02em;
}
.nav-left { justify-self: start; }
.nav-right { justify-self: end; }
.nav-links a:hover { opacity: .7; }
.logo { display: block; line-height: 0; }
.logo img { width: auto; }
.nav-toggle, .mobile-menu { display: none; }

/* Transparent header inside the hero */
.hero-header { transition: opacity .3s ease; }
.hero-header .nav { height: calc(108 * var(--u)); min-height: 64px; padding: 0 13.6% 0 12%; }
.hero-header .logo img { height: max(28px, calc(53 * var(--u))); }
.hero-header.is-hidden { opacity: 0; pointer-events: none; }

/* Cream header that slides in on scroll */
.sticky-header {
  position: fixed; z-index: 100;
  top: var(--frame-top); left: var(--gutter); right: var(--gutter);
  background: var(--cream);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(40, 42, 33, .08);
  transform: translateY(calc(-100% - var(--frame-top) - 10px));
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.sticky-header.is-visible { transform: none; }
.sticky-header .nav { height: calc(98 * var(--u)); min-height: 60px; padding: 0 13.6% 0 11%; }
.sticky-header .nav-links { font-size: max(14px, calc(29 * var(--u))); }
.sticky-header .logo img { height: max(26px, calc(50 * var(--u))); }

/* ---------- Sections ---------- */
.section { padding: 0 var(--gutter); margin-top: calc(135 * var(--u)); }
.section-tight { margin-top: calc(68 * var(--u)); }
#shop { margin-top: calc(80 * var(--u)); }
.section-title {
  font-weight: 600;
  font-size: calc(68 * var(--u));
  letter-spacing: 0.005em;
  margin-bottom: calc(50 * var(--u));
}
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #77726B;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--ink-soft);
}

/* Category cards */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(26 * var(--u)); }
.cat-card { position: relative; display: block; overflow: hidden; aspect-ratio: 636 / 740; border-radius: 2px; }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cat-card:hover img { transform: scale(1.03); }
.cat-footer {
  position: absolute; left: 0; right: 0; bottom: calc(66 * var(--u));
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 0 calc(30 * var(--u)) 0 calc(46 * var(--u));
}
.cat-name { font-family: var(--serif); font-size: calc(38 * var(--u)); color: #36352F; }
.cat-footer .pill {
  width: calc(172 * var(--u)); height: calc(52 * var(--u));
  font-family: var(--serif); font-size: calc(26 * var(--u));
}

/* Bundle */
.bundle { display: grid; grid-template-columns: 867fr 1055fr; gap: calc(40 * var(--u)); }
.bundle-img img { width: 100%; height: 100%; object-fit: cover; }
.bundle-card {
  background: var(--cream);
  padding: calc(42 * var(--u)) calc(60 * var(--u)) calc(50 * var(--u)) calc(40 * var(--u));
  display: flex; flex-direction: column; align-items: flex-start;
}
.tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(285 * var(--u)); height: calc(54 * var(--u));
  background: var(--teal); border-radius: calc(12 * var(--u));
  font-family: var(--serif); font-size: calc(30 * var(--u));
}
.bundle-card h2 { font-weight: 600; font-size: calc(62 * var(--u)); margin-top: calc(42 * var(--u)); }
.eyebrow { font-size: calc(26 * var(--u)); color: var(--muted); letter-spacing: 0.01em; margin-top: calc(30 * var(--u)); padding-left: calc(8 * var(--u)); }
.bundle-card h3 { font-size: calc(46 * var(--u)); font-weight: 500; line-height: 1.5; margin-top: calc(34 * var(--u)); max-width: calc(760 * var(--u)); }
.bundle-text { font-size: calc(30 * var(--u)); line-height: 1.5; color: var(--ink-soft); margin-top: calc(6 * var(--u)); max-width: calc(900 * var(--u)); }
.btn-outline {
  margin-top: calc(55 * var(--u));
  width: calc(320 * var(--u)); height: calc(85 * var(--u));
  border: 1px solid #5B5A54; border-radius: calc(12 * var(--u));
  font-family: var(--serif); font-size: calc(32 * var(--u));
}
.btn-outline:hover { background: var(--ink); color: var(--cream); }

/* Products */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(28 * var(--u)); }
.product-card { background: var(--cream); padding: calc(36 * var(--u)) calc(38 * var(--u)) calc(34 * var(--u)); display: flex; flex-direction: column; }
.product-card h3 { font-weight: 600; font-size: calc(80 * var(--u)); line-height: 1; }
.product-img { height: calc(370 * var(--u)); display: flex; align-items: center; justify-content: center; }
.product-img img { width: auto; object-fit: contain; transition: transform .5s ease; }
.p-vial { height: calc(300 * var(--u)); }
.p-spray { height: calc(340 * var(--u)); }
.p-patch { height: calc(250 * var(--u)); }
.product-card:hover .product-img img { transform: translateY(-6px); }
.product-info {
  border-top: 1px solid var(--line);
  padding: calc(26 * var(--u)) calc(12 * var(--u)) 0;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.product-name { font-size: calc(22 * var(--u)); font-weight: 500; }
.product-meta { font-size: calc(19 * var(--u)); font-style: italic; font-weight: 300; color: var(--ink-soft); margin-top: calc(8 * var(--u)); }
.pill-sm { width: calc(125 * var(--u)); height: calc(38 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 300; }

/* What to expect */
.expect { display: grid; grid-template-columns: 1275fr 622fr; gap: calc(28 * var(--u)); }
.expect-card { background: var(--cream); padding: calc(40 * var(--u)) calc(50 * var(--u)) calc(40 * var(--u)); }
.eyebrow-serif { font-family: var(--serif); font-size: calc(36 * var(--u)); letter-spacing: 0.01em; }
.expect-card h2 { font-size: calc(50 * var(--u)); margin-top: calc(40 * var(--u)); }
.timeline { list-style: none; margin: calc(55 * var(--u)) 0 0; padding: 0; width: 84%; }
.timeline li {
  display: grid; grid-template-columns: calc(272 * var(--u)) 1fr;
  border-top: 1px solid var(--line);
  padding: calc(34 * var(--u)) 0 calc(40 * var(--u));
}
.when { font-family: var(--serif); font-style: italic; font-size: calc(22 * var(--u)); letter-spacing: 0.15em; color: var(--ink-soft); padding-top: calc(8 * var(--u)); }
.timeline h4 { font-size: calc(34 * var(--u)); }
.timeline p { font-size: calc(23 * var(--u)); line-height: 1.45; color: var(--ink-soft); margin-top: calc(12 * var(--u)); }
.fine { font-family: var(--serif); font-size: calc(22 * var(--u)); color: var(--muted); margin-top: calc(20 * var(--u)); }
.expect-img { position: relative; }
.expect-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Founder */
#about { margin-top: calc(100 * var(--u)); }
.founder { position: relative; overflow: hidden; aspect-ratio: 1960 / 583; display: grid; place-items: center; border-radius: 2px; }
.founder picture, .founder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.founder::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.14); }
.founder blockquote { position: relative; z-index: 2; margin: 0; padding: 0 calc(180 * var(--u)); text-align: center; color: var(--white); }
.founder blockquote p { font-size: calc(42 * var(--u)); line-height: 1.5; }
.founder cite { display: block; font-style: normal; font-size: calc(32 * var(--u)); margin-top: calc(30 * var(--u)); }

/* FAQ */
#faq { margin-top: calc(55 * var(--u)); }
.faq {
  background: var(--cream);
  display: grid; grid-template-columns: calc(490 * var(--u)) 1fr; gap: calc(80 * var(--u));
  padding: calc(128 * var(--u)) calc(75 * var(--u)) calc(118 * var(--u)) calc(80 * var(--u));
}
.eyebrow-serif.small { font-size: calc(24 * var(--u)); letter-spacing: 0.02em; margin-top: calc(28 * var(--u)); }
.faq-intro h2 { font-size: calc(52 * var(--u)); margin-top: calc(40 * var(--u)); }
.faq-intro p:last-child { font-family: var(--serif); font-size: calc(24 * var(--u)); line-height: 1.45; margin-top: calc(35 * var(--u)); max-width: calc(360 * var(--u)); }
.faq-list { border-top: 1px solid #B9B2A8; }
.faq-list details { border-bottom: 1px solid #B9B2A8; }
.faq-list summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--serif); font-size: calc(33 * var(--u));
  padding: calc(22 * var(--u)) calc(28 * var(--u)) calc(22 * var(--u)) calc(4 * var(--u));
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: var(--sans); font-size: calc(32 * var(--u)); font-weight: 300; transition: transform .25s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { font-size: calc(24 * var(--u)); line-height: 1.6; color: var(--ink-soft); padding: 0 calc(80 * var(--u)) calc(26 * var(--u)) calc(4 * var(--u)); max-width: calc(1100 * var(--u)); }

.promise { text-align: center; font-family: var(--serif); font-size: calc(36 * var(--u)); padding: calc(96 * var(--u)) 16px calc(70 * var(--u)); }

/* Footer */
.footer { background: var(--cream); margin: 0 var(--gutter); padding: calc(80 * var(--u)) calc(110 * var(--u)) calc(30 * var(--u)) calc(50 * var(--u)); }
.footer-top { display: grid; grid-template-columns: 523fr 296fr 363fr 310fr 350fr; }
.logo-foot img { width: calc(330 * var(--u)); }
.footer-brand p { font-family: var(--serif); font-size: calc(24 * var(--u)); line-height: 1.35; max-width: calc(330 * var(--u)); margin: calc(62 * var(--u)) 0 0 calc(10 * var(--u)); }
.socials { display: flex; gap: calc(40 * var(--u)); margin-top: calc(45 * var(--u)); padding-left: calc(60 * var(--u)); }
.socials svg { width: calc(50 * var(--u)); height: calc(50 * var(--u)); }
.socials a:hover { color: var(--cherry); }
.footer-col { display: flex; flex-direction: column; gap: calc(28 * var(--u)); font-family: var(--serif); font-size: calc(24 * var(--u)); }
.footer-col h5 { font-weight: 600; font-size: calc(30 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.footer-col a:hover { color: var(--cherry); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom {
  border-top: 1px solid var(--line);
  margin-top: calc(110 * var(--u));
  padding-top: calc(55 * var(--u));
  display: grid; grid-template-columns: calc(840 * var(--u)) 1fr;
  font-family: var(--serif); font-size: calc(20 * var(--u)); line-height: 1.4;
}

.scroller-wrap { position: relative; }
.scroll-next { display: none; }

/* ---------- Small laptops / tablets ---------- */
@media (max-width: 1100px) {
  .hero h1 { font-size: 58px; }
  .hero-sub { font-size: 20px; }
  .btn-light { width: 260px; height: 56px; font-size: 16px; }
  .hero-note { font-size: 14px; }
  .hero-bottom { height: auto; padding-top: 14px; padding-bottom: 14px; }
  .trust p, .payments-label { font-size: 13px; }
  .badge-rx { height: 40px; } .badge-hipaa { height: 44px; } .badge-licensed { height: 46px; }
  .payments img { height: 40px; }
  .hero-header .nav, .sticky-header .nav { padding: 0 6%; }
  .expect { grid-template-columns: 1fr; }
  .expect-img { height: 480px; }
  .timeline { width: 100%; }
  .footer-top { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .socials { padding-left: 10px; }
  .footer-bottom { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  body { padding-bottom: 16px; }
  .announce { font-size: 11px; }

  .hero { min-height: 600px; text-align: center; }
  .hero-content { align-items: center; justify-content: flex-start; padding: 5svh 20px 20px; }
  .hero h1 { font-size: 42px; }
  .hero h1 br { display: none; }
  .hero-sub { font-size: 17px; margin-top: 12px; }
  .btn-light { width: 100%; max-width: 340px; height: 52px; margin-top: 22px; font-size: 15px; }
  .hero-note { font-size: 13px; }
  .hero-bottom { flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
  .trust-icons { justify-content: center; gap: 22px; }
  .badge-rx { height: 34px; } .badge-hipaa { height: 38px; } .badge-licensed { height: 40px; }
  .trust p { font-size: 11px; }
  .payments { flex-direction: column; gap: 8px; padding-top: 0; }
  .payments-label { font-size: 11px; }
  .payments img { height: 32px; }

  .hero-header .nav, .sticky-header .nav { height: 60px; min-height: 0; padding: 0 16px; }
  .nav-left, .hide-mobile { display: none; }
  .hero-header .nav-links, .sticky-header .nav-links { font-size: 15px; }
  .nav-right { grid-column: 3; }
  .logo { grid-column: 2; grid-row: 1; }
  .hero-header .logo img, .sticky-header .logo img { height: 26px; }
  .nav-toggle {
    display: flex; flex-direction: column; gap: 5px; justify-self: start;
    grid-column: 1; grid-row: 1;
    background: none; border: 0; padding: 6px 0; color: inherit; cursor: pointer;
  }
  .nav-toggle span { display: block; width: 24px; height: 2px; background: currentColor; transition: transform .25s, opacity .25s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-menu { display: flex; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height .35s ease; }
  .mobile-menu.open { max-height: 300px; }
  .mobile-menu a { font-family: var(--serif); font-size: 19px; padding: 14px 18px; border-top: 1px solid var(--line); }

  .section, .section-tight, #shop, #about, #faq { margin-top: 28px; }
  .section-title { font-size: 26px; margin-bottom: 14px; }

  .scroller { display: grid; grid-auto-flow: column; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .scroller::-webkit-scrollbar { display: none; }
  .scroller > * { scroll-snap-align: start; }
  .cat-grid, .product-grid { grid-template-columns: none; grid-auto-columns: 44%; gap: 10px; }
  .scroll-next {
    display: grid; place-items: center;
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50%; border: 0;
    background: rgba(255,255,255,.95); box-shadow: 0 2px 10px rgba(0,0,0,.12);
    font-size: 24px; line-height: 1; color: var(--ink); cursor: pointer; padding-bottom: 3px;
  }
  .cat-footer { bottom: 14px; padding: 0 8px; }
  .cat-name { font-size: 12px; }
  .cat-footer .pill { width: auto; height: auto; padding: 2px 10px; font-size: 10px; }

  .bundle { grid-template-columns: 1fr; gap: 0; background: var(--cream); padding: 16px; margin-left: var(--gutter); margin-right: var(--gutter); }
  .bundle-img img { aspect-ratio: 1.15; }
  .bundle-card { padding: 18px 0 4px; }
  .tag { width: auto; height: auto; padding: 4px 26px; font-size: 15px; border-radius: 8px; }
  .bundle-card h2 { font-size: 26px; margin-top: 14px; }
  .eyebrow { font-size: 12px; margin-top: 10px; padding-left: 0; }
  .bundle-card h3 { font-size: 19px; margin-top: 18px; }
  .bundle-text { font-size: 14px; }
  .btn-outline { width: 100%; height: 46px; margin-top: 22px; font-family: var(--sans); font-weight: 700; font-size: 14px; border-radius: 6px; }

  .product-card { padding: 12px; }
  .product-card h3 { font-size: 30px; }
  .product-img { height: 150px; }
  .p-vial { height: 120px; } .p-spray { height: 136px; } .p-patch { height: 100px; }
  .product-info { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 0 0; }
  .product-name { font-size: 12px; }
  .product-meta { font-size: 10px; }
  .pill-sm { align-self: flex-end; width: auto; height: auto; padding: 2px 12px; font-size: 10px; }

  .expect-img { display: none; }
  .expect-card { padding: 22px 18px; }
  .eyebrow-serif { font-size: 13px; }
  .expect-card h2 { font-size: 26px; margin-top: 12px; }
  .timeline { margin-top: 20px; }
  .timeline li { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .when { font-size: 13px; letter-spacing: 0.04em; padding-top: 0; }
  .timeline h4 { font-size: 19px; }
  .timeline p { font-size: 14px; }
  .fine { font-size: 12px; }

  .founder { aspect-ratio: 1743 / 1116; }
  .founder blockquote { padding: 0 18px; }
  .founder blockquote p { font-size: 17px; }
  .founder cite { font-size: 14px; margin-top: 12px; }

  .faq { grid-template-columns: 1fr; gap: 18px; padding: 28px 20px; }
  .eyebrow-serif.small { font-size: 12px; margin-top: 0; }
  .faq-intro h2 { font-size: 26px; margin-top: 12px; }
  .faq-intro p:last-child { font-size: 14px; margin-top: 12px; max-width: none; }
  .faq-list summary { font-size: 17px; padding: 14px 4px; }
  .faq-list summary::after { font-size: 20px; }
  .faq-list details p { font-size: 14px; padding: 0 8px 16px 4px; }

  .promise { font-size: 13px; padding: 30px 12px; }

  .footer { padding: 30px 22px 20px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .logo-foot img { width: 150px; }
  .footer-brand p { font-size: 14px; margin: 16px 0 0; max-width: 34ch; }
  .socials { padding-left: 0; gap: 24px; margin-top: 18px; }
  .socials svg { width: 26px; height: 26px; }
  .footer-col { font-size: 13px; gap: 10px; }
  .footer-col h5 { font-size: 14px; margin-bottom: 4px; }
  .footer-bottom { grid-template-columns: 1fr; gap: 10px; font-size: 11px; margin-top: 26px; padding-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* =========================================================
   CATEGORY PAGES (well-aging.html and future categories)
   ========================================================= */
.cat-inset { padding-left: calc(var(--gutter) + 30 * var(--u)); padding-right: calc(var(--gutter) + 30 * var(--u)); }

/* Hero: text sits bottom-left, no trust strip */
.hero-cat .hero-img { object-position: center 35%; }
.hero-cat .hero-content { justify-content: flex-end; padding: 0 0 calc(72 * var(--u)) 2.5%; }
.hero-cat .hero-sub { font-size: calc(36 * var(--u)); font-weight: 400; margin-top: calc(14 * var(--u)); }
.hero-cat .btn-light { width: calc(465 * var(--u)); height: calc(75 * var(--u)); margin-top: calc(28 * var(--u)); font-size: calc(28 * var(--u)); }

/* Shared small buttons */
.btn-outline-sm {
  width: calc(382 * var(--u)); height: calc(62 * var(--u)); min-height: 42px;
  border: 1.5px solid var(--ink); border-radius: calc(10 * var(--u));
  font-family: var(--sans); font-weight: 700; font-size: max(13px, calc(22 * var(--u)));
}
.btn-outline-sm:hover { background: var(--ink); color: var(--cream); }
.btn-dark {
  width: 100%; height: calc(84 * var(--u)); min-height: 44px;
  background: var(--ink); color: var(--white);
  border-radius: calc(14 * var(--u));
  font-family: var(--sans); font-size: max(14px, calc(28 * var(--u)));
}
.btn-dark:hover { background: var(--teal); color: var(--ink); }

/* Intro */
.cat-page #bundles { margin-top: calc(80 * var(--u)); }
.cat-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: calc(76 * var(--u)); }
.cat-title { font-size: calc(58 * var(--u)); font-weight: 400; letter-spacing: 0.005em; }
.cat-lede { font-size: calc(30 * var(--u)); line-height: 1.55; color: var(--muted); margin-top: calc(40 * var(--u)); }

/* Bundles */
.bundle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--u)); }
.bundle-item { background: var(--cream); display: flex; flex-direction: column; }
.bundle-photo { aspect-ratio: 585 / 412; overflow: hidden; }
.bundle-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bundle-item:hover .bundle-photo img { transform: scale(1.03); }
.bundle-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: calc(28 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)) calc(38 * var(--u)); }
.tag-sm { width: calc(264 * var(--u)); height: calc(52 * var(--u)); font-size: calc(30 * var(--u)); border-radius: calc(12 * var(--u)); }
.bundle-body h3 { font-family: var(--sans); font-weight: 400; font-size: calc(46 * var(--u)); margin-top: calc(28 * var(--u)); }
.bundle-mix { font-size: calc(28 * var(--u)); color: var(--ink-soft); margin-top: calc(22 * var(--u)); }
.bundle-desc { font-size: calc(25 * var(--u)); line-height: 1.5; color: var(--muted); margin-top: calc(22 * var(--u)); min-height: 3em; }
.bundle-price {
  align-self: stretch;
  display: flex; align-items: baseline; gap: calc(16 * var(--u));
  border-top: 1px solid var(--line);
  margin-top: calc(28 * var(--u)); padding-top: calc(12 * var(--u)); margin-bottom: calc(20 * var(--u));
}
.bundle-price strong { font-family: var(--serif); font-weight: 400; font-size: calc(52 * var(--u)); font-variant-numeric: tabular-nums; }
.bundle-price span { font-size: calc(28 * var(--u)); color: var(--muted); }
.elig { align-self: center; font-family: var(--serif); font-size: max(11px, calc(14 * var(--u))); text-decoration: underline; text-underline-offset: 2px; margin-top: calc(22 * var(--u)); }

/* OR divider */
.or-divider { display: flex; align-items: center; gap: calc(28 * var(--u)); margin-top: calc(70 * var(--u)); font-family: var(--serif); font-size: calc(30 * var(--u)); }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1.5px; background: var(--ink); }

/* Treatments */
.cat-page #treatments { margin-top: calc(70 * var(--u)); }
.treat-title { font-size: calc(62 * var(--u)); padding-left: calc(20 * var(--u)); }
.filters { display: flex; align-items: center; gap: calc(18 * var(--u)); margin: calc(60 * var(--u)) 0 calc(90 * var(--u)); padding-left: calc(20 * var(--u)); flex-wrap: wrap; }
.filter-icon { width: calc(52 * var(--u)); height: calc(52 * var(--u)); min-width: 22px; min-height: 22px; margin-right: calc(10 * var(--u)); }
.chip {
  height: calc(48 * var(--u)); min-height: 30px; padding: 0 calc(38 * var(--u));
  background: #F6F0EA; border: 1px solid #E6DED4; border-radius: 999px;
  font-family: var(--serif); font-size: max(13px, calc(28 * var(--u))); color: var(--ink-soft);
  cursor: pointer; transition: background .2s, border-color .2s;
}
.chip:hover { border-color: var(--ink-soft); }
.chip.is-active { background: var(--teal); border: 1.5px solid var(--ink); color: var(--ink); }

.treat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(56 * var(--u)) calc(40 * var(--u)); padding-left: calc(20 * var(--u)); }
.treat-card {
  background: var(--cream);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(22 * var(--u));
}
.treat-card[hidden] { display: none; }
.chip-tag {
  background: var(--teal); border: 1px solid #6E8F8C; border-radius: 999px;
  padding: calc(4 * var(--u)) calc(30 * var(--u));
  font-family: var(--serif); font-size: max(11px, calc(22 * var(--u)));
}
.treat-card h3 { font-size: calc(36 * var(--u)); margin-top: calc(18 * var(--u)); }
.treat-form { font-size: calc(26 * var(--u)); margin-top: calc(10 * var(--u)); }
.treat-img { height: calc(470 * var(--u)); width: 100%; display: flex; align-items: center; justify-content: center; }
.treat-img img { width: auto; max-width: 78%; object-fit: contain; transition: transform .5s ease; }
.treat-img .shape-vial { height: calc(420 * var(--u)); }
.treat-img .shape-spray { height: calc(430 * var(--u)); }
.treat-img .shape-bottle { height: calc(400 * var(--u)); }
.treat-img .shape-jar { height: calc(310 * var(--u)); }
.treat-card:hover .treat-img img { transform: translateY(-6px); }
.btn-start {
  width: calc(294 * var(--u)); height: calc(68 * var(--u)); min-height: 40px;
  background: var(--ink); color: var(--white); border-radius: calc(8 * var(--u));
  font-family: var(--sans); font-weight: 700; font-size: max(13px, calc(26 * var(--u)));
  margin-top: calc(10 * var(--u));
}
.treat-card:hover .btn-start, .btn-start:focus-visible { background: var(--teal); color: var(--white); }

/* How it works */
.how-card { background: var(--cream); padding: calc(40 * var(--u)) calc(60 * var(--u)) calc(58 * var(--u)); text-align: center; display: flex; flex-direction: column; align-items: center; }
.how-eyebrow { font-family: var(--serif); color: #8FC0BC; font-size: calc(24 * var(--u)); letter-spacing: 0.02em; }
.how-card h2 { font-size: calc(46 * var(--u)); margin-top: calc(22 * var(--u)); }
.how-sub { font-family: var(--serif); font-size: calc(21 * var(--u)); margin-top: calc(26 * var(--u)); }
.steps { list-style: none; margin: calc(56 * var(--u)) 0 calc(62 * var(--u)); padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(30 * var(--u)); width: 100%; }
.steps li { display: flex; flex-direction: column; align-items: center; }
.step-num { width: calc(98 * var(--u)); height: calc(98 * var(--u)); min-width: 44px; min-height: 44px; border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: max(13px, calc(22 * var(--u))); }
.steps h4 { font-size: calc(22 * var(--u)); line-height: 1.4; margin-top: calc(28 * var(--u)); min-height: 2.8em; padding-bottom: calc(14 * var(--u)); border-bottom: 1px solid var(--line); width: calc(230 * var(--u)); max-width: 100%; }
.steps p { font-family: var(--serif); font-size: calc(21 * var(--u)); line-height: 1.45; margin-top: calc(18 * var(--u)); }
.cat-page .how { margin-top: calc(110 * var(--u)); }
.cat-page #faq { margin-top: calc(46 * var(--u)); }

@media (max-width: 1100px) {
  .hero-cat .hero-sub { font-size: 20px; }
  .hero-cat .btn-light { width: 300px; height: 56px; font-size: 16px; }
  .cat-title { font-size: 30px; } .cat-lede { font-size: 16px; }
  .bundle-body h3 { font-size: 24px; } .bundle-mix { font-size: 15px; } .bundle-desc { font-size: 14px; }
  .bundle-price strong { font-size: 28px; } .bundle-price span { font-size: 15px; }
  .tag-sm { width: auto; height: auto; padding: 4px 22px; font-size: 16px; }
  .treat-title { font-size: 32px; }
  .treat-card h3 { font-size: 20px; } .treat-form { font-size: 14px; }
  .how-card h2 { font-size: 28px; } .how-sub, .steps p { font-size: 14px; } .steps h4 { font-size: 13px; width: auto; }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
}

@media (max-width: 767px) {
  .cat-inset { padding-left: var(--gutter); padding-right: var(--gutter); }
  .hero-cat .hero-content { justify-content: flex-end; align-items: flex-start; text-align: left; padding: 0 20px 28px; }
  .hero-cat .hero h1 br, .hero-cat h1 br { display: block; }
  .hero-cat .hero-sub { font-size: 18px; }
  .hero-cat .btn-light { width: 100%; max-width: 300px; height: 50px; font-size: 16px; margin-top: 18px; }

  .cat-intro { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 22px; }
  .cat-title { font-size: 21px; }
  .cat-lede { font-size: 13px; margin-top: 10px; }
  .cat-lede br { display: none; }
  .btn-outline-sm { align-self: flex-end; width: 170px; height: 38px; min-height: 0; font-size: 12px; border-radius: 6px; }

  .bundle-grid { grid-template-columns: none; grid-auto-columns: 74%; gap: 12px; }
  .bundle-body { padding: 14px 16px 16px; }
  .tag-sm { font-size: 13px; padding: 3px 20px; border-radius: 8px; }
  .bundle-body h3 { font-size: 19px; margin-top: 12px; }
  .bundle-mix { font-size: 12px; margin-top: 8px; }
  .bundle-desc { font-size: 11px; margin-top: 8px; }
  .bundle-price { margin-top: 12px; padding-top: 8px; margin-bottom: 10px; }
  .bundle-price strong { font-size: 22px; } .bundle-price span { font-size: 12px; }
  .btn-dark { height: 40px; min-height: 0; font-size: 13px; border-radius: 20px; }
  .elig { font-size: 9px; margin-top: 10px; }

  .or-divider { margin-top: 28px; font-size: 12px; gap: 14px; }
  .or-divider::before, .or-divider::after { height: 1px; }
  .cat-page #treatments { margin-top: 18px; }
  .treat-title { font-size: 24px; padding-left: 0; }
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 18px calc(-1 * var(--gutter)) 24px; padding: 2px var(--gutter); gap: 8px; }
  .filters::-webkit-scrollbar { display: none; }
  .chip { flex-shrink: 0; min-height: 26px; height: 26px; padding: 0 14px; font-size: 11px; }
  .filter-icon { flex-shrink: 0; }
  .treat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding-left: 0; }
  .treat-card { padding: 12px 10px 14px; }
  .chip-tag { font-size: 10px; padding: 2px 12px; }
  .treat-card h3 { font-size: 17px; margin-top: 8px; }
  .treat-form { font-size: 12px; margin-top: 4px; }
  .treat-img { height: 190px; }
  .treat-img .shape-vial, .treat-img .shape-spray { height: 170px; }
  .treat-img .shape-bottle { height: 160px; } .treat-img .shape-jar { height: 110px; }
  .btn-start { width: 82%; height: 38px; min-height: 0; font-size: 12px; border-radius: 6px; }

  .cat-page .how { margin-top: 32px; }
  .how-card { padding: 26px 16px 28px; }
  .how-eyebrow { font-size: 12px; }
  .how-card h2 { font-size: 24px; max-width: 12em; }
  .how-sub { font-size: 13px; margin-top: 12px; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; margin: 26px 0 28px; }
  .steps li:last-child { grid-column: 1 / -1; max-width: 50%; justify-self: center; }
  .step-num { width: 52px; height: 52px; font-size: 13px; }
  .steps h4 { font-size: 12px; margin-top: 12px; padding-bottom: 8px; min-height: 0; }
  .steps p { font-size: 12.5px; margin-top: 10px; }
  .how-card .btn-outline-sm { align-self: stretch; width: auto; height: 44px; font-size: 14px; }
}

/* ---------- Theme: Cherry Pulse (Intimacy & Desire) ---------- */
.theme-cherry .chip { background: var(--cream); border: 1px solid var(--cherry); color: var(--cherry); }
.theme-cherry .chip:hover { background: #F3E6E3; }
.theme-cherry .chip.is-active { background: var(--cherry); border-color: var(--cherry); color: var(--white); }
.theme-cherry .chip-tag { background: var(--cherry); border-color: var(--cherry); color: var(--white); }
.theme-cherry .chip-tag-outline { background: var(--cream); border-color: #C9A9A6; color: var(--cherry); }
.theme-cherry .treat-card:hover .btn-start, .theme-cherry .btn-start:focus-visible { background: var(--cherry); color: var(--white); }
.theme-cherry .how-eyebrow { color: var(--cherry); }
.theme-cherry#treatments, .cat-page.theme-cherry #treatments { margin-top: calc(90 * var(--u)); }
.theme-cherry .treat-title { font-size: calc(66 * var(--u)); }
@media (max-width: 767px) {
  .theme-cherry .treat-title { font-size: 24px; }
  .cat-page.theme-cherry #treatments { margin-top: 32px; }
}

/* =========================================================
   SHOP / ABOUT MENUS (inside the cream header)
   Motion modelled on rhodeskin.com: the panel grows open,
   content rises in sequence, the tab line glides and panes slide.
   ========================================================= */
:root { --ease-menu: cubic-bezier(.65, 0, .35, 1); --ease-out: cubic-bezier(.22, 1, .36, 1); }
.nav-trigger { background: none; border: 0; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; position: relative; }
.nav-trigger::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.nav-trigger:hover::after, .nav-trigger.is-open::after { transform: scaleX(1); }
.nav-trigger.is-open { font-weight: 600; }
.sticky-header { transition: transform .5s var(--ease-out), box-shadow .5s ease; }
.sticky-header.menu-open { box-shadow: 0 18px 50px rgba(40, 42, 33, .16); }

/* Backdrop */
.menu-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(40, 42, 33, .28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.menu-scrim.is-visible { opacity: 1; visibility: visible; transition: opacity .5s ease; }

/* Panel: grid-rows trick animates to the content's natural height */
.mega { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-menu); }
.mega.is-open { grid-template-rows: 1fr; }
.mega-inner { min-height: 0; overflow: hidden; }
.mega-body {
  max-height: calc(100svh - var(--frame-top) * 2 - 110px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: calc(6 * var(--u)) calc(60 * var(--u)) calc(40 * var(--u));
  display: flex; flex-direction: column; align-items: center;
}
.mega-body::-webkit-scrollbar { display: none; }

/* Content rises in once the panel has started opening */
.mega-tabs, .mega-viewport .pill-btn, .mega-links-phone, .about-wrap, .mega-about > .mega-inner .pill-btn {
  opacity: 0; transform: translateY(12px);
  transition: opacity .35s ease, transform .5s var(--ease-out);
}
.mega.is-open .mega-tabs, .mega.is-open .mega-viewport .pill-btn, .mega.is-open .mega-links-phone, .mega.is-open .about-wrap, .mega.is-open.mega-about .pill-btn {
  opacity: 1; transform: none; transition-delay: .18s;
}
.mega.is-open .mega-viewport .pill-btn, .mega.is-open.mega-about .pill-btn { transition-delay: .42s; }
.mp-card, .mc-tile, .mb-card { opacity: 0; transform: translateY(18px); transition: opacity .4s ease, transform .6s var(--ease-out), box-shadow .3s ease; }
.mega.is-open .mega-pane.is-active .mp-card, .mega.is-open .mega-pane.is-active .mc-tile, .mega.is-open .mega-pane.is-active .mb-card { opacity: 1; transform: none; }
.mega.is-open .mega-pane.is-active :is(.mp-card, .mc-tile, .mb-card):nth-child(1) { transition-delay: .22s; }
.mega.is-open .mega-pane.is-active :is(.mp-card, .mc-tile, .mb-card):nth-child(2) { transition-delay: .28s; }
.mega.is-open .mega-pane.is-active :is(.mp-card, .mc-tile, .mb-card):nth-child(3) { transition-delay: .34s; }
.mega.is-open .mega-pane.is-active :is(.mp-card, .mc-tile, .mb-card):nth-child(4) { transition-delay: .40s; }
.mega.is-switching .mega-pane.is-active :is(.mp-card, .mc-tile, .mb-card) { transition-delay: 0s !important; }

/* Tabs with a gliding underline */
.mega-tabs { position: relative; display: flex; justify-content: center; gap: calc(130 * var(--u)); margin-bottom: calc(36 * var(--u)); }
.mega-tab {
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font-family: var(--sans); font-weight: 300; font-size: max(15px, calc(32 * var(--u)));
  padding: 0 calc(8 * var(--u)) calc(10 * var(--u)); transition: color .3s ease;
}
.mega-tab:hover, .mega-tab.is-active { color: var(--ink); }
.mega-ink { position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0; background: var(--ink); transition: transform .55s var(--ease-menu), width .55s var(--ease-menu); }

/* Sliding panes */
.mega-viewport { width: 100%; overflow: hidden; transition: height .55s var(--ease-menu); }
.mega-track { display: flex; align-items: flex-start; transition: transform .6s var(--ease-menu); will-change: transform; }
.mega-pane { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: calc(24 * var(--u)); padding-bottom: 4px; }

.pill-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: calc(280 * var(--u)); height: max(34px, calc(52 * var(--u))); padding: 0 24px;
  border: 1px solid var(--ink); border-radius: 999px;
  font-family: var(--serif); font-size: max(12px, calc(20 * var(--u)));
  transition: background .25s, color .25s, opacity .35s ease, transform .5s var(--ease-out);
}
.pill-btn:hover { background: var(--ink); color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  .mega, .mega-track, .mega-viewport, .mega-ink, .menu-scrim { transition: none !important; }
  .mp-card, .mc-tile, .mb-card, .mega-tabs, .about-wrap, .pill-btn, .mega-links-phone { transition: none !important; transform: none !important; }
}

/* Most requested */
.mp-grid { display: grid; grid-template-columns: repeat(4, calc(400 * var(--u))); gap: calc(30 * var(--u)); }
.mp-card { position: relative; background: #FFFEFB; border-radius: calc(6 * var(--u)); display: flex; flex-direction: column; padding: calc(26 * var(--u)) calc(28 * var(--u)) calc(26 * var(--u)); }
.mp-card:hover, .mb-card:hover { box-shadow: 0 10px 28px rgba(40, 42, 33, .09); }
.mp-card:hover .mp-img img { transform: translateY(-4px); }
.mp-img img { transition: transform .5s var(--ease-out); }
.mp-img { height: calc(300 * var(--u)); display: flex; align-items: center; justify-content: center; }
.mp-img img { height: 88%; width: auto; }
.mp-text { display: flex; flex-direction: column; gap: calc(12 * var(--u)); margin-top: calc(20 * var(--u)); }
.mp-name { font-style: italic; font-size: max(13px, calc(25 * var(--u))); }
.mp-desc { font-style: italic; font-weight: 300; font-size: max(11px, calc(19 * var(--u))); color: var(--muted); line-height: 1.4; }
.mp-badge { display: none; }

/* By category */
.mc-grid { display: grid; grid-template-columns: repeat(3, calc(360 * var(--u))); gap: calc(66 * var(--u)); }
.mc-tile { position: relative; aspect-ratio: 360 / 432; overflow: hidden; border-radius: 2px; display: flex; align-items: flex-end; justify-content: center; }
.mc-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mc-tile:hover img { transform: scale(1.04); }
.mc-text { position: relative; z-index: 1; text-align: center; padding: 0 12px calc(40 * var(--u)); }
.mc-name { font-family: var(--serif); color: var(--white); font-size: max(18px, calc(42 * var(--u))); line-height: 1.3; text-shadow: 0 1px 12px rgba(60, 50, 40, .35); }
.mc-desc { display: none; }

/* Bundles */
.mb-grid { display: grid; grid-template-columns: repeat(3, calc(400 * var(--u))); gap: calc(30 * var(--u)); }
.mb-card { background: #FFFEFB; border-radius: calc(6 * var(--u)); padding: calc(18 * var(--u)); display: flex; flex-direction: column; }
.mb-img { aspect-ratio: 364 / 322; overflow: hidden; }
.mb-img img { width: 100%; height: 100%; object-fit: cover; }
.mb-text { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(20 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)); }
.mb-name { font-style: italic; font-size: max(13px, calc(25 * var(--u))); }
.mb-desc { font-style: italic; font-weight: 300; font-size: max(11px, calc(19 * var(--u))); color: var(--muted); line-height: 1.4; }

/* About */
.mega-about .mega-body { gap: calc(44 * var(--u)); padding-top: calc(30 * var(--u)); }
.about-wrap { display: grid; grid-template-columns: 1fr calc(1010 * var(--u)); align-items: center; gap: calc(60 * var(--u)); width: 100%; max-width: calc(1800 * var(--u)); }
.about-wrap img { width: 100%; aspect-ratio: 1010 / 460; object-fit: cover; }
.mega-links { display: flex; flex-direction: column; gap: calc(44 * var(--u)); padding-left: calc(100 * var(--u)); }
.mega-links a { font-size: max(15px, calc(34 * var(--u))); width: fit-content; }
.mega-links a:hover { color: var(--cherry); }
.mega-links-phone { display: none; }

/* Menopause page extras */
.treat-lede { font-size: calc(26 * var(--u)); line-height: 1.55; color: var(--muted); margin-top: calc(28 * var(--u)); padding-left: calc(20 * var(--u)); max-width: calc(1700 * var(--u)); }
.treat-img .shape-tall { height: calc(410 * var(--u)); }
.cat-page.theme-cherry .filters { margin-top: calc(44 * var(--u)); }

@media (max-width: 1100px) {
  .mp-grid, .mb-grid { grid-template-columns: repeat(2, minmax(0, 260px)); }
  .mc-grid { grid-template-columns: repeat(3, minmax(0, 220px)); gap: 20px; }
  .mega-tabs { gap: 48px; }
  .about-wrap { grid-template-columns: 1fr 1.6fr; }
  .mega-links { padding-left: 20px; }
  .treat-lede { font-size: 14px; }
}

@media (max-width: 767px) {
  .mega-body { padding: 4px 16px 22px; align-items: stretch; max-height: calc(100svh - 76px); }
  .sticky-header.menu-open { border-radius: 0 0 var(--radius) var(--radius); }
  .mega-tabs { gap: 0; justify-content: space-between; margin-bottom: 16px; }
  .mega-ink { height: 1px; }
  .mega-tab { font-size: 15px; padding: 0 4px 6px; }
  .mega-pane { align-items: stretch; gap: 10px; }
  .pill-btn { align-self: center; min-width: 170px; height: 30px; font-size: 11px; margin-top: 6px; }

  .mp-grid, .mc-grid, .mb-grid { grid-template-columns: 1fr; gap: 8px; }
  .mp-card { flex-direction: row; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 4px; }
  .mp-img { height: 54px; width: 36px; flex-shrink: 0; }
  .mp-img img { height: 100%; }
  .mp-text { margin-top: 0; gap: 4px; flex: 1; }
  .mp-name { font-style: normal; font-family: var(--serif); text-transform: uppercase; font-size: 12px; letter-spacing: 0.02em; }
  .mp-desc { font-style: normal; font-size: 10.5px; }
  .mp-badge { display: inline-block; align-self: flex-start; background: var(--ink-soft); color: var(--white); border-radius: 999px; padding: 1px 10px; font-family: var(--serif); font-size: 9px; white-space: nowrap; }

  .mc-tile { aspect-ratio: auto; height: 92px; justify-content: flex-start; align-items: center; }
  .mc-text { text-align: left; padding: 0 20px; display: flex; flex-direction: column; gap: 4px; }
  .mc-name { color: var(--ink); text-shadow: none; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
  .mc-desc { display: block; font-size: 10.5px; color: var(--ink-soft); max-width: 24ch; }

  .mb-card { flex-direction: row-reverse; padding: 0; align-items: stretch; overflow: hidden; border-radius: 4px; }
  .mb-img { width: 42%; aspect-ratio: auto; flex-shrink: 0; }
  .mb-text { justify-content: center; padding: 14px 16px; gap: 6px; flex: 1; }
  .mb-name { font-style: normal; font-family: var(--serif); text-transform: uppercase; font-size: 12px; font-weight: 600; }
  .mb-desc { font-size: 10.5px; }

  .mega-links-phone { display: flex; padding: 18px 2px; margin-top: 16px; gap: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .mega-links-phone a { font-size: 15px; }

  .treat-lede { font-size: 12.5px; padding-left: 0; margin-top: 10px; }
  .treat-img .shape-tall { height: 160px; }
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.about-page .section { margin-top: calc(56 * var(--u)); }
.about-page #founder { margin-top: calc(56 * var(--u)); }
.hero-about .hero-img { object-position: center 40%; }
.hero-about .hero-content { padding-bottom: calc(80 * var(--u)); }
.eyebrow-caps { font-family: var(--serif); font-size: max(12px, calc(22 * var(--u))); letter-spacing: 0.04em; }

/* Founder note */
.note-card { background: var(--cream); text-align: center; padding: calc(70 * var(--u)) calc(60 * var(--u)) calc(64 * var(--u)); border-radius: calc(4 * var(--u)); }
.note-eyebrow { font-family: var(--serif); font-size: max(12px, calc(22 * var(--u))); letter-spacing: 0.06em; }
.note-card blockquote { margin: calc(40 * var(--u)) auto 0; max-width: 30em; font-family: var(--serif); font-size: max(18px, calc(40 * var(--u))); line-height: 1.45; text-wrap: balance; }
.note-sign { font-family: "Homemade Apple", "Brush Script MT", cursive; font-size: max(16px, calc(30 * var(--u))); color: var(--ink-soft); margin-top: calc(44 * var(--u)); }
.note-role { font-size: max(10px, calc(15 * var(--u))); letter-spacing: 0.14em; color: var(--muted); margin-top: calc(10 * var(--u)); }

/* Story switchers (image + cream card, hover a label to switch) */
.switcher { display: grid; grid-template-columns: 865fr 1052fr; gap: calc(40 * var(--u)); align-items: stretch; }
.sw-media { position: relative; overflow: hidden; border-radius: calc(4 * var(--u)); aspect-ratio: 865 / 760; }
.sw-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s ease, transform 1.2s var(--ease-out); }
.sw-media img.is-active { opacity: 1; transform: none; }
.sw-card { background: var(--cream); border-radius: calc(4 * var(--u)); padding: calc(60 * var(--u)) calc(90 * var(--u)) calc(60 * var(--u)) calc(52 * var(--u)); display: flex; flex-direction: column; justify-content: center; }
.sw-item { position: relative; }
.sw-item + .sw-item::before { content: ""; position: absolute; top: 0; left: 0; width: min(100%, calc(760 * var(--u))); height: 1px; background: #A9A39A; }
.sw-label {
  display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: max(12px, calc(24 * var(--u))); letter-spacing: 0.02em; color: var(--muted);
  padding: calc(28 * var(--u)) 0; max-height: 120px; overflow: hidden;
  transition: color .3s ease, max-height .55s var(--ease-menu), padding .55s var(--ease-menu), opacity .35s ease;
}
.sw-label:hover { color: var(--ink); }
.sw-item.is-active .sw-label { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; pointer-events: none; }
.sw-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-menu); }
.sw-item.is-active .sw-body { grid-template-rows: 1fr; }
.sw-body-inner { min-height: 0; overflow: hidden; opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .5s var(--ease-out); }
.sw-item.is-active .sw-body-inner { opacity: 1; transform: none; transition-delay: .18s; }
.sw-body-inner h2 { font-weight: 600; font-size: max(26px, calc(62 * var(--u))); padding-top: calc(30 * var(--u)); }
.sw-body-inner p { font-size: max(14px, calc(26 * var(--u))); line-height: 1.5; max-width: 38em; margin-top: calc(26 * var(--u)); }
.sw-item:last-child .sw-body-inner { padding-bottom: calc(10 * var(--u)); }
.sw-item:not(:last-child) .sw-body-inner { padding-bottom: calc(36 * var(--u)); }
.btn-line {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(420 * var(--u)); min-width: 180px; height: calc(78 * var(--u)); min-height: 40px; margin-top: calc(32 * var(--u));
  border: 1.5px solid var(--ink); border-radius: calc(14 * var(--u));
  font-family: var(--serif); font-size: max(14px, calc(26 * var(--u)));
  transition: background .25s, color .25s;
}
.btn-line:hover { background: var(--ink); color: var(--cream); }

/* Banner */
.banner { position: relative; overflow: hidden; border-radius: calc(4 * var(--u)); aspect-ratio: 2400 / 1192; }
.banner img { width: 100%; height: 100%; object-fit: cover; }
.banner-text { position: absolute; left: 7%; top: 50%; transform: translateY(-50%); color: var(--white); font-family: var(--serif); font-weight: 600; font-size: max(22px, calc(80 * var(--u))); line-height: 1.22; letter-spacing: 0.01em; }
.banner-text em { font-style: normal; font-weight: 600; text-transform: none; }

/* Science */
.sci-card { background: var(--cream); border-radius: calc(4 * var(--u)); padding: calc(64 * var(--u)) calc(70 * var(--u)) calc(50 * var(--u)); }
.sci-card h2 { font-weight: 600; font-size: max(24px, calc(56 * var(--u))); }
.sci-lede { font-size: max(14px, calc(26 * var(--u))); line-height: 1.5; margin-top: calc(22 * var(--u)); max-width: 46em; }
.sci-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(40 * var(--u)) calc(34 * var(--u)); margin-top: calc(50 * var(--u)); }
.sci-img { aspect-ratio: 1; background: #FFFEFB; display: flex; align-items: center; justify-content: center; }
.sci-img img { height: 82%; width: auto; transition: transform .5s var(--ease-out); }
.sci-item:hover .sci-img img { transform: translateY(-5px); }
.sci-item h3 { font-size: max(14px, calc(26 * var(--u))); letter-spacing: 0.1em; font-weight: 500; margin-top: calc(30 * var(--u)); }
.sci-item p { font-size: max(13px, calc(22 * var(--u))); line-height: 1.5; color: var(--ink-soft); margin-top: calc(14 * var(--u)); }
.sci-fine { text-align: center; font-size: max(11px, calc(17 * var(--u))); color: var(--ink-soft); margin-top: calc(50 * var(--u)); }

/* Providers */
.prov-card { background: var(--cream); border-radius: calc(4 * var(--u)); padding: calc(64 * var(--u)) calc(60 * var(--u)) calc(80 * var(--u)); text-align: center; }
.prov-card h2 { font-weight: 600; font-size: max(24px, calc(56 * var(--u))); margin-top: calc(26 * var(--u)); }
.prov-lede { font-size: max(14px, calc(26 * var(--u))); line-height: 1.5; max-width: 34em; margin: calc(22 * var(--u)) auto 0; }
.prov-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(40 * var(--u)); max-width: calc(1100 * var(--u)); margin: calc(50 * var(--u)) auto 0; }
.prov img { width: 100%; aspect-ratio: 405 / 440; object-fit: cover; object-position: top; border-radius: 2px; }
.prov h3 { font-size: max(13px, calc(22 * var(--u))); letter-spacing: 0.1em; font-weight: 600; margin-top: calc(28 * var(--u)); }
.prov p { font-size: max(12px, calc(19 * var(--u))); color: var(--ink-soft); line-height: 1.5; margin-top: calc(10 * var(--u)); }

/* Pharmacies + Where to find us */
.info-pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(40 * var(--u)); }
.info-card { background: var(--cream); border-radius: calc(4 * var(--u)); padding: calc(70 * var(--u)) calc(70 * var(--u)) calc(80 * var(--u)); scroll-margin-top: 120px; }
.info-card h2 { font-weight: 600; font-size: max(24px, calc(50 * var(--u))); line-height: 1.3; margin-top: calc(26 * var(--u)); }
.info-card > p:not(.eyebrow-caps) { font-size: max(14px, calc(25 * var(--u))); line-height: 1.5; margin-top: calc(24 * var(--u)); max-width: 34em; }
.info-card .info-link a { text-decoration: underline; text-underline-offset: 3px; }
#providers { scroll-margin-top: 120px; }

@media (max-width: 767px) {
  .about-page .section, .about-page #founder { margin-top: 20px; }
  .hero-about .hero-content { padding-bottom: 28px; }
  .note-card { padding: 30px 22px 26px; }
  .note-card blockquote { margin-top: 16px; font-size: 17px; }
  .note-sign { margin-top: 22px; font-size: 15px; }

  .switcher { grid-template-columns: 1fr; gap: 0; }
  .sw-media { aspect-ratio: 1; border-radius: 4px 4px 0 0; }
  .sw-card { padding: 26px 22px 24px; border-radius: 0 0 4px 4px; justify-content: flex-start; }
  .sw-body-inner h2 { font-size: 28px; padding-top: 10px; }
  .sw-body-inner p { font-size: 14px; margin-top: 12px; }
  .sw-item:not(:last-child) .sw-body-inner { padding-bottom: 22px; }
  .sw-label { font-size: 12.5px; padding: 16px 0; }
  .sw-item + .sw-item::before { width: 78%; }
  .btn-line { width: auto; padding: 0 60px; height: 40px; font-size: 15px; border-radius: 10px; margin-top: 16px; }

  .banner { aspect-ratio: 1.3; }
  .banner img { object-position: 70% center; }
  .banner-text { top: 12%; transform: none; left: 6%; font-size: 24px; }

  .sci-card { padding: 28px 20px 24px; }
  .sci-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; margin-top: 22px; }
  .sci-item h3 { margin-top: 14px; }
  .sci-fine { margin-top: 24px; }

  .prov-card { padding: 30px 14px 34px; }
  .prov-grid { gap: 12px; margin-top: 22px; }
  .prov h3 { font-size: 11px; margin-top: 12px; }
  .prov p { font-size: 11px; }

  .info-pair { grid-template-columns: 1fr; gap: 20px; }
  .info-card { padding: 34px 24px 40px; }
}

/* Menu category tiles: texture at rest, photo fades in on hover */
.mc-tile .mc-photo { opacity: 0; transform: scale(1.06); transition: opacity .55s ease, transform .9s var(--ease-out); z-index: 1; }
.mc-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(30,24,18,0) 45%, rgba(30,24,18,.38) 100%); opacity: 0; transition: opacity .55s ease; pointer-events: none; }
.mc-tile:hover .mc-photo, .mc-tile:focus-visible .mc-photo { opacity: 1; transform: none; }
.mc-tile:hover::after, .mc-tile:focus-visible::after { opacity: 1; }
.mc-text { z-index: 2; }
@media (max-width: 767px) { .mc-tile .mc-photo, .mc-tile::after { display: none; } }

/* About hero: headline and button on the right (desktop) */
@media (min-width: 768px) {
  .hero-right .hero-content { align-items: flex-end; text-align: right; padding-left: 0; padding-right: 5%; }
  .hero-right .hero-img { object-position: 30% 40%; }
}

/* =========================================================
   ALL PRODUCTS PAGE
   ========================================================= */
.hero-banner { height: auto; min-height: 0; color: var(--ink); background: var(--cream); }
.hero-banner .hero-header { background: var(--cream); }
.hero-banner .hero-header .logo img { filter: brightness(.165); }
.banner-media { position: relative; overflow: hidden; aspect-ratio: 2.9; }
/* Smaller, rhode-sized header bar on this page */
.hero-banner .hero-header .nav { height: calc(80 * var(--u)); min-height: 56px; }
.hero-banner .hero-header .nav-links { font-size: max(13px, calc(24 * var(--u))); }
.hero-banner .hero-header .logo img { height: max(22px, calc(40 * var(--u))); }
.banner-media .hero-img { object-position: center 30%; }
.banner-media h1 { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; padding: 0 20px; color: var(--white); font-size: max(17px, calc(36 * var(--u))); font-weight: 400; text-shadow: 0 1px 18px rgba(0,0,0,.25); }
.page-products #bundles { margin-top: calc(70 * var(--u)); }
.page-products .chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }
.page-products .treat-lede { margin-bottom: 0; }
.page-products .filters { margin-top: calc(44 * var(--u)); row-gap: calc(18 * var(--u)); }
/* Menopause + sexual health cards use Cherry Pulse */
.card-cherry .chip-tag { background: var(--cherry); border-color: var(--cherry); color: var(--white); }
.card-cherry-outline .chip-tag { background: var(--cream); border-color: #C9A9A6; color: var(--cherry); }
.card-cherry:hover .btn-start, .card-cherry .btn-start:focus-visible { background: var(--cherry); color: var(--white); }
@media (max-width: 767px) {
  .banner-media { aspect-ratio: 1.45; }
  .banner-media h1 { font-size: 16px; }
  .hero-banner .hero-header .nav { height: 56px; }
  .hero-banner .hero-header .logo img { height: 24px; }
  .hero-banner .hero-header .nav-links { font-size: 14px; }
}

/* =========================================================
   YOU MAY ALSO EXPLORE (category pages)
   ========================================================= */
.explore-more { margin-top: calc(90 * var(--u)); }
.explore-title { font-weight: 600; font-size: max(24px, calc(56 * var(--u))); margin-bottom: calc(40 * var(--u)); }
.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(26 * var(--u)); }
.ex-card .cat-name { color: var(--ink); }
@media (max-width: 767px) {
  .explore-more { margin-top: 36px; }
  .explore-title { margin-bottom: 14px; }
  .explore-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* =========================================================
   LEGAL PAGES
   ========================================================= */
.legal-page { padding: 0 var(--gutter); margin-top: calc(56 * var(--u)); }
.legal-card { background: var(--cream); border-radius: calc(4 * var(--u)); padding: calc(80 * var(--u)) max(22px, 8%) calc(100 * var(--u)); }
.legal-card > h1 { font-weight: 600; font-size: max(30px, calc(72 * var(--u))); margin-top: calc(20 * var(--u)); }
.legal-toc { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: calc(34 * var(--u)); }
.legal-toc a { border: 1px solid var(--ink); border-radius: 999px; padding: 6px 22px; font-family: var(--serif); font-size: max(13px, calc(22 * var(--u))); transition: background .2s, color .2s; }
.legal-toc a:hover { background: var(--ink); color: var(--cream); }
.legal-body { max-width: 760px; margin-top: calc(40 * var(--u)); font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.legal-body h2 { font-weight: 600; font-size: clamp(20px, 1.6vw, 26px); color: var(--ink); margin: 2.4em 0 .6em; scroll-margin-top: 120px; }
.legal-body h3 { font-weight: 600; font-size: clamp(17px, 1.3vw, 20px); color: var(--ink); margin: 1.8em 0 .5em; }
.legal-body p { margin: 0 0 1em; }
.legal-body ul, .legal-body ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.legal-body li { margin-bottom: .35em; }
.legal-body a { color: var(--cherry); text-decoration: underline; text-underline-offset: 3px; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body > p:first-child { color: var(--muted); }
.legal-part { scroll-margin-top: 120px; }
.legal-part + .legal-part { border-top: 1px solid var(--line); margin-top: 3em; padding-top: 2.4em; }
.legal-part-title { font-size: clamp(26px, 2.4vw, 40px) !important; margin-top: 0 !important; }
@media (max-width: 767px) {
  .legal-page { margin-top: 20px; }
  .legal-card { padding: 30px 20px 40px; }
  .legal-body { font-size: 15px; }
}

/* =========================================================
   PHONE POLISH (round 2)
   ========================================================= */
/* Grids never let long words push columns uneven */
.sci-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega-pane { padding-bottom: 14px; }

@keyframes heroRise { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }

@media (max-width: 767px) {
  /* Home hero: compact block that rises into the sky above the heads */
  .hero:not(.hero-cat) .hero-content { padding: 2.5svh 22px 0; animation: heroRise 1.1s cubic-bezier(.22, 1, .36, 1) .25s both; }
  .hero:not(.hero-cat) h1 { font-size: 36px; line-height: 1.15; }
  .hero:not(.hero-cat) .hero-sub { font-size: 15px; margin-top: 10px; }
  .hero:not(.hero-cat) .btn-light { height: 46px; margin-top: 16px; max-width: 300px; }
  .hero:not(.hero-cat) .hero-note { font-size: 12px; margin-top: 8px; }

  /* Menu tabs: three equal columns, centred, short labels */
  .mega-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; justify-content: stretch; margin-bottom: 18px; }
  .mega-tab { font-size: 15px; padding: 0 0 9px; text-align: center; white-space: nowrap; }
  .tab-by { display: none; }
  .mega-ink { height: 1.5px; }

  /* Menu buttons: never clipped */
  .pill-btn { height: 38px; min-width: 190px; font-size: 13px; margin-top: 8px; }

  /* About: show the photo above each switcher card */
  .sw-media { align-self: start; aspect-ratio: auto; height: 92vw; max-height: 460px; }

  /* Science-backed: equal columns and tidy headings */
  .sci-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .sci-item h3 { font-size: 13px; letter-spacing: .06em; overflow-wrap: anywhere; }
  .sci-item p { font-size: 13px; }
  .treat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .hero .hero-content { animation: none !important; } }

/* Menu panes: stacked in one cell so the panel always fits its tallest pane (nothing is clipped) */
.mega-viewport { height: auto !important; overflow: hidden; transition: none; }
.mega-track { display: grid; transform: none !important; }
.mega-pane { grid-area: 1 / 1; transition: transform .6s var(--ease-menu), opacity .45s ease; }
.mega-pane:not(.is-active) { opacity: 0; visibility: hidden; pointer-events: none; transition: transform .6s var(--ease-menu), opacity .3s ease, visibility 0s linear .6s; }

@media (max-width: 767px) {
  /* Home hero: headline at the top, button + note sitting just above the line */
  .hero:not(.hero-cat) .hero-content { padding-bottom: 20px; }
  .hero:not(.hero-cat) .btn-light { margin-top: auto; }
}

@media (max-width: 767px) {
  /* Home hero, phone: one-line headline, small button just above the line, one-row badge strip */
  .hero:not(.hero-cat) .hero-content { padding: 22px 16px 14px; }
  .hero:not(.hero-cat) h1 { font-size: clamp(25px, 8.2vw, 34px); white-space: nowrap; line-height: 1.2; }
  .hero:not(.hero-cat) .hero-sub { font-size: 14px; margin-top: 12px; }
  .hero:not(.hero-cat) .btn-light { width: 46%; min-width: 170px; max-width: 220px; height: 34px; font-size: 14px; border-width: 1px; border-radius: 6px; }
  .hero:not(.hero-cat) .hero-note { font-size: 9.5px; margin-top: 4px; opacity: .85; }

  .hero:not(.hero-cat) .hero-bottom {
    flex-direction: row; justify-content: space-between; align-items: center; text-align: left;
    margin: 0 16px; padding: 12px 0 14px; gap: 10px;
  }
  .hero:not(.hero-cat) .trust p { display: none; }
  .hero:not(.hero-cat) .trust-icons { gap: 16px; justify-content: flex-start; margin: 0; }
  .hero:not(.hero-cat) .badge-rx { height: 34px; }
  .hero:not(.hero-cat) .badge-hipaa { height: 36px; }
  .hero:not(.hero-cat) .badge-licensed { height: 40px; }
  .hero:not(.hero-cat) .payments { flex-direction: column; align-items: flex-end; gap: 6px; padding: 0; }
  .hero:not(.hero-cat) .payments-label { width: auto; text-transform: none; font-size: 11.5px; letter-spacing: .01em; margin: 0; text-align: right; }
  .hero:not(.hero-cat) .payments img { height: 22px; }
}

/* Menu call-to-action lives below the sliding panes, with room underneath */
.mega-cta { align-self: center; margin: calc(26 * var(--u)) 0 calc(10 * var(--u)); opacity: 0; transform: translateY(12px); }
.mega.is-open .mega-cta { opacity: 1; transform: none; transition-delay: .42s; }
@media (max-width: 767px) {
  .mega-cta { margin: 18px 0 22px; height: 40px; min-width: 200px; flex-shrink: 0; }
  .mega-links-phone { margin-top: 0; }
}

/* =========================================================
   Round 3: pinned shipping bar, scrollable menu, no shrinking
   ========================================================= */
/* Free-shipping bar stays at the top; the cream header docks just below it */
.announce { position: sticky; top: var(--frame-top); z-index: 110; }
.sticky-header { top: calc(var(--frame-top) + var(--bar-h) + 6px); transform: translateY(calc(-100% - var(--frame-top) - var(--bar-h) - 24px)); }
.sticky-header.is-visible { transform: none; }

/* Menu content never squashes; the panel scrolls instead */
.mega-body > * { flex-shrink: 0; }
.mega-body { max-height: calc(100svh - var(--frame-top) * 2 - var(--bar-h) - 6px - max(60px, calc(98 * var(--u))) - 12px); -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) {
  .announce { font-size: 11px; }
  .mega-body { max-height: calc(100svh - var(--frame-top) - var(--bar-h) - 6px - 60px - 16px); padding-bottom: 8px; }
}

/* =========================================================
   Round 4
   ========================================================= */
/* Treatment cards reached from a link: land below the header and glow briefly */
.treat-card { scroll-margin-top: 170px; }
.treat-card:target { animation: cardGlow 2.4s ease .3s; }
@keyframes cardGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(167,207,204,0); } 25%, 60% { box-shadow: 0 0 0 3px var(--teal); } }
a.sci-item { display: block; color: inherit; }
a.sci-item:hover h3 { text-decoration: underline; text-underline-offset: 4px; }

/* Menu tabs stay pinned while the dropdown scrolls */
.mega-tabs { position: sticky; top: 0; z-index: 3; background: var(--cream); padding-top: 6px; }

@media (max-width: 767px) {

  /* Phone menu, rhode-style: full-height sheet, compact rows, caps links */
  .sticky-header.menu-open .mega-body { min-height: calc(100svh - var(--frame-top) - var(--bar-h) - 6px - 60px - 16px); }
  .mega-tabs { margin: 0 -16px 14px; padding: 8px 16px 0; }
  .mp-card, .mb-card { box-shadow: none; }
  .mega-links-phone { gap: 0; padding: 6px 2px; border-bottom: 0; }
  .mega-links-phone a { font-family: var(--serif); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .mega-links-phone a:last-child { border-bottom: 0; }
}

/* =========================================================
   All Products — phone, matched to the phone design
   (a scaled-down version of the desktop layout)
   ========================================================= */
@media (max-width: 767px) {
  .hero-banner .banner-media { aspect-ratio: 2.9; }
  .hero-banner .banner-media .hero-img { object-position: center 28%; }
  .hero-banner .banner-media h1 { white-space: nowrap; font-size: clamp(11px, 3.5vw, 15px); line-height: 1.2; padding: 0 8px; }

  .page-products #bundles { margin-top: 18px; }
  .page-products .cat-intro { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
  .page-products .cat-title { font-size: clamp(14px, 4.3vw, 18px); white-space: nowrap; }
  .page-products .cat-lede { font-size: 10px; line-height: 1.5; margin-top: 8px; }
  .page-products .cat-lede br { display: inline; }
  .page-products .cat-intro .btn-outline-sm { flex-shrink: 0; align-self: flex-end; width: 26vw; min-width: 92px; height: 26px; font-size: 10px; border-radius: 5px; border-width: 1px; }

  .page-products .bundle-grid { grid-auto-columns: 38%; gap: 8px; }
  .page-products .bundle-body { padding: 8px 9px 10px; }
  .page-products .tag-sm { font-size: 9px; padding: 2px 12px; border-radius: 6px; }
  .page-products .bundle-body h3 { font-size: 13px; margin-top: 7px; }
  .page-products .bundle-mix { font-size: 9px; margin-top: 4px; }
  .page-products .bundle-desc { font-size: 8.5px; margin-top: 4px; min-height: 0; }
  .page-products .bundle-price { margin-top: 7px; padding-top: 5px; margin-bottom: 6px; gap: 5px; }
  .page-products .bundle-price strong { font-size: 16px; }
  .page-products .bundle-price span { font-size: 9px; }
  .page-products .btn-dark { height: 26px; font-size: 9.5px; border-radius: 13px; }
  .page-products .elig { font-size: 7px; margin-top: 5px; }
  .page-products .scroll-next { width: 26px; height: 26px; font-size: 18px; top: 58%; }
}

@media (max-width: 767px) {
  /* Pinned tabs cover everything scrolling beneath them */
  .mega-body { padding-top: 0; }
  .mega-tabs { top: 0; margin-top: 0; padding-top: 12px; box-shadow: 0 6px 8px -6px rgba(40,42,33,.08); }
  .mega-links-phone a { width: 100%; }
}

/* =========================================================
   Round 5
   ========================================================= */
:root { --page: #FFFEFB; }
html, body { background: var(--page); }
html, body { overflow-x: clip; }

@media (max-width: 767px) {
  /* All Products intro: text shrinks to fit so the button stays inside the page */
  .page-products .cat-intro > div { flex: 1; min-width: 0; }
  .page-products .cat-title { font-size: clamp(12px, 4vw, 17px); }
  .page-products .cat-lede { font-size: 9.5px; }
  .page-products .cat-lede br { display: none; }
  .page-products .cat-intro .btn-outline-sm { width: 24vw; min-width: 84px; }

  /* "You may Also Explore" on one line */
  .explore-title { font-size: clamp(20px, 6.6vw, 28px); white-space: nowrap; }
}

/* =========================================================
   Round 6
   ========================================================= */
@media (max-width: 767px) {
  /* Home: bigger category titles */
  #shop .cat-footer { flex-direction: column; align-items: flex-start; gap: 8px; bottom: 14px; padding: 0 12px; }
  #shop .cat-name { font-size: 18px; line-height: 1.2; }
  #shop .cat-footer .pill { font-size: 11px; padding: 3px 14px; }

  /* Bundles: bigger cards, about one and a half visible */
  .bundle-grid, .page-products .bundle-grid { grid-auto-columns: 66%; gap: 10px; }
  .page-products .bundle-body { padding: 14px 16px 16px; }
  .page-products .tag-sm { font-size: 13px; padding: 3px 18px; border-radius: 8px; }
  .page-products .bundle-body h3 { font-size: 19px; margin-top: 12px; }
  .page-products .bundle-mix { font-size: 12px; margin-top: 8px; }
  .page-products .bundle-desc { font-size: 11.5px; margin-top: 8px; }
  .page-products .bundle-price { margin-top: auto; padding-top: 8px; margin-bottom: 10px; }
  .page-products .bundle-price strong { font-size: 22px; }
  .page-products .bundle-price span { font-size: 12px; }
  .page-products .btn-dark { height: 40px; font-size: 13px; border-radius: 20px; }
  .page-products .elig { font-size: 9px; margin-top: 10px; }
  .page-products .scroll-next { width: 34px; height: 34px; font-size: 22px; top: 50%; }

  /* Footer: stacked design */
  .footer { padding: 32px 26px 26px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .footer-brand { grid-column: 1 / -1; padding-bottom: 26px; border-bottom: 1px solid #BDB6AC; }
  .logo-foot { display: block; padding-bottom: 22px; border-bottom: 1px solid #BDB6AC; }
  .logo-foot img { width: 100%; }
  .footer-brand p { font-size: 15px; line-height: 1.45; margin: 22px 0 0; max-width: 30em; }
  .socials { padding-left: 0; gap: 26px; margin-top: 24px; }
  .socials svg { width: 30px; height: 30px; }
  .footer-col { font-size: 15px; gap: 14px; }
  .footer-col h5 { font-size: 19px; margin-bottom: 8px; }
  .footer-bottom { margin-top: 36px; padding-top: 18px; border-top: 1px solid #BDB6AC; font-size: 12px; gap: 8px; }
}

/* Round 7: bigger descriptions on the desire / renew / balance cards */
.product-meta { font-size: max(13px, calc(23 * var(--u))); }
.product-name { font-size: max(14px, calc(24 * var(--u))); }
@media (max-width: 767px) { .product-meta { font-size: 12.5px; line-height: 1.35; } .product-name { font-size: 14px; } }

/* Round 8 (phone) */
@media (max-width: 767px) {
  /* Home hero: button + note sit right under the subtitle again */
  .hero:not(.hero-cat) .btn-light { margin-top: 22px; }
  /* Bike banner: shift the photo so her face clears the headline */
  .banner img { object-position: 8% center; }
}

/* Round 9: About menu links draw an underline the length of the text on hover (desktop) */
.mega-about .mega-links a { position: relative; padding-bottom: 6px; }
.mega-about .mega-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.mega-about .mega-links a:hover::after, .mega-about .mega-links a:focus-visible::after { transform: scaleX(1); }
.mega-about .mega-links a:hover { color: inherit; }

/* Cookie consent banner */
.cookie-banner {
  position: fixed; z-index: 200;
  left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0px) + 12px);
  width: min(880px, calc(100% - 2 * var(--gutter)));
  transform: translate(-50%, calc(100% + 40px)); opacity: 0;
  transition: transform .6s var(--ease-out), opacity .4s ease;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 16px 50px rgba(40, 42, 33, .18);
  padding: 22px 26px;
  display: flex; align-items: center; gap: 28px;
}
.cookie-banner.is-visible { transform: translate(-50%, 0); opacity: 1; }
.cookie-title { font-family: var(--serif); font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.cookie-text p:not(.cookie-title) { font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.cookie-text a { color: var(--cherry); text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn {
  height: 44px; padding: 0 22px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  font-family: var(--sans); font-weight: 700; font-size: 14px; transition: background .2s, color .2s;
}
.cookie-reject { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }
.cookie-reject:hover { background: var(--ink); color: var(--cream); }
.cookie-accept { background: var(--ink); border: 1.5px solid var(--ink); color: var(--white); }
.cookie-accept:hover { background: var(--teal); border-color: var(--teal); color: var(--ink); }
@media (max-width: 767px) {
  .cookie-banner { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 18px; }
  .cookie-actions { flex-direction: column-reverse; }
  .cookie-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cookie-banner { transition: none; } }

/* Round 11: footer links get the same drawn underline as the About menu */
.footer-col a { position: relative; align-self: flex-start; padding-bottom: 4px; }
.footer-col a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.footer-col a:hover, .footer-col a:focus-visible { color: inherit; text-decoration: none; }
.footer-col a:hover::after, .footer-col a:focus-visible::after { transform: scaleX(1); }

/* =========================================================
   PRODUCT PAGE (rhode-style): nad-injection.html
   ========================================================= */
.pdp .section { margin-top: calc(90 * var(--u)); }
.pdp .pdp-hero { margin-top: calc(40 * var(--u)); }

/* Hero: gallery left, sticky info right */
.pdp-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: calc(70 * var(--u)); align-items: start; }
.pdp-gallery { display: grid; grid-template-columns: calc(110 * var(--u)) minmax(0, 1fr); gap: calc(20 * var(--u)); position: sticky; top: calc(var(--frame-top) + var(--bar-h) + 120px); }
.pdp-thumbs { display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.pdp-thumb { padding: 0; border: 1px solid transparent; border-radius: 6px; background: var(--cream); aspect-ratio: 1; overflow: hidden; cursor: pointer; transition: border-color .2s; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb:first-child img { object-fit: contain; padding: 10%; }
.pdp-thumb.is-active, .pdp-thumb:hover { border-color: var(--ink); }
.pdp-stage { position: relative; aspect-ratio: 1 / 1.08; background: var(--cream); border-radius: calc(8 * var(--u)); overflow: hidden; }
.pdp-shot { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s ease; }
.pdp-shot.is-active { opacity: 1; }
.pdp-shot img { width: 100%; height: 100%; object-fit: cover; }
.pdp-shot-product img { object-fit: contain; padding: 12% 18%; }
.pdp-dots { display: none; }

.pdp-info { position: sticky; top: calc(var(--frame-top) + var(--bar-h) + 120px); padding-top: calc(10 * var(--u)); }
.pdp-crumbs { display: flex; gap: 8px; font-size: max(12px, calc(18 * var(--u))); color: var(--muted); margin-bottom: calc(34 * var(--u)); }
.pdp-crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pdp-info h1 { font-weight: 600; font-size: max(34px, calc(84 * var(--u))); line-height: 1.05; margin-top: calc(22 * var(--u)); }
.pdp-lede { font-size: max(16px, calc(28 * var(--u))); line-height: 1.5; margin-top: calc(26 * var(--u)); max-width: 30em; }
.pdp-rx { display: flex; align-items: center; gap: 10px; font-size: max(13px, calc(20 * var(--u))); color: var(--muted); margin-top: calc(20 * var(--u)); }
.pdp-rx-mark { font-family: var(--serif); font-size: 13px; border: 1px solid currentColor; border-radius: 3px; padding: 1px 5px; color: var(--ink); }
.pdp-cta { margin-top: calc(36 * var(--u)); height: max(52px, calc(78 * var(--u))); font-weight: 700; }
.pdp-perks { list-style: none; padding: 0; margin: calc(16 * var(--u)) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: max(12px, calc(18 * var(--u))); color: var(--ink-soft); }
.pdp-perks li::before { content: "✓"; margin-right: 6px; color: #6E9F9B; }
.pdp-details { margin-top: calc(40 * var(--u)); border-top: 1px solid var(--line); }
.pdp-details details { border-bottom: 1px solid var(--line); }
.pdp-details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: calc(20 * var(--u)) 0; font-family: var(--serif); font-size: max(13px, calc(20 * var(--u))); letter-spacing: .1em; text-transform: uppercase; }
.pdp-details summary::-webkit-details-marker { display: none; }
.pdp-details summary::after { content: "+"; font-family: var(--sans); font-size: 20px; font-weight: 300; transition: transform .25s; }
.pdp-details details[open] summary::after { transform: rotate(45deg); }
.pdp-details details p { font-size: max(14px, calc(22 * var(--u))); color: var(--ink-soft); padding-bottom: calc(22 * var(--u)); }

/* Why NAD+: image + text split */
.pdp-split { display: grid; grid-template-columns: 1fr 1fr; gap: calc(40 * var(--u)); align-items: stretch; }
.pdp-split-img { border-radius: calc(8 * var(--u)); overflow: hidden; min-height: 420px; }
.pdp-split-img img { width: 100%; height: 100%; object-fit: cover; }
.pdp-split-text { background: var(--cream); border-radius: calc(8 * var(--u)); padding: calc(80 * var(--u)) calc(80 * var(--u)); display: flex; flex-direction: column; justify-content: center; }
.pdp h2 { font-weight: 600; font-size: max(28px, calc(60 * var(--u))); line-height: 1.15; margin: calc(22 * var(--u)) 0 calc(26 * var(--u)); text-wrap: balance; }
.pdp-split-text > p:not(.eyebrow-caps), .pdp-science-text > p:not(.eyebrow-caps) { font-size: max(15px, calc(25 * var(--u))); line-height: 1.6; color: var(--ink-soft); max-width: 34em; margin-bottom: 1em; }
.pdp-facts { margin: calc(24 * var(--u)) 0 0; border-top: 1px solid var(--line); }
.pdp-facts div { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 16px; padding: calc(16 * var(--u)) 0; border-bottom: 1px solid var(--line); }
.pdp-facts dt { font-family: var(--serif); font-size: max(12px, calc(18 * var(--u))); letter-spacing: .1em; text-transform: uppercase; }
.pdp-facts dd { margin: 0; font-size: max(14px, calc(22 * var(--u))); }

/* The science: dark band */
.pdp-science { background: var(--ink); color: var(--cream); border-radius: calc(8 * var(--u)); display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: calc(40 * var(--u)); padding: calc(100 * var(--u)) calc(110 * var(--u)); overflow: hidden; }
.pdp-science .eyebrow-caps { color: var(--teal); }
.pdp-science-text > p:not(.eyebrow-caps) { color: rgba(249, 244, 239, .82); }
.pdp-science-text em { font-style: italic; color: var(--cream); }
.pdp-science-img { display: grid; place-items: center; }
.pdp-science-img img { height: calc(560 * var(--u)); min-height: 260px; width: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.35)); }

/* What it may support */
.pdp-support { text-align: center; }
.pdp-support h2 { margin-bottom: calc(50 * var(--u)); }
.support-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(24 * var(--u)); text-align: left; }
.support-grid article { background: var(--cream); border-radius: calc(8 * var(--u)); padding: calc(40 * var(--u)) calc(36 * var(--u)) calc(46 * var(--u)); transition: transform .4s var(--ease-out); }
.support-grid article:hover { transform: translateY(-4px); }
.support-num { font-family: var(--serif); font-size: max(13px, calc(20 * var(--u))); color: #6E9F9B; }
.support-grid h3 { font-weight: 600; font-size: max(20px, calc(34 * var(--u))); margin-top: calc(60 * var(--u)); padding-bottom: calc(16 * var(--u)); border-bottom: 1px solid var(--line); }
.support-grid p { font-size: max(14px, calc(22 * var(--u))); line-height: 1.55; color: var(--ink-soft); margin-top: calc(16 * var(--u)); }
.pdp-fine { font-size: max(12px, calc(18 * var(--u))); color: var(--muted); margin: calc(34 * var(--u)) auto 0; max-width: 62em; }

.pdp-bar { display: none; }

@media (max-width: 1100px) {
  .pdp-hero { grid-template-columns: 1fr; }
  .pdp-gallery, .pdp-info { position: static; }
  .support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp-science { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .pdp .section, .pdp .pdp-hero { margin-top: 18px; }
  .pdp .pdp-hero { margin-top: 12px; gap: 22px; }
  .pdp-gallery { grid-template-columns: 1fr; }
  .pdp-thumbs { display: none; }
  .pdp-stage { aspect-ratio: 1; touch-action: pan-y; }
  .pdp-dots { display: flex; gap: 6px; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; }
  .pdp-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(40,42,33,.25); transition: background .2s, width .2s; }
  .pdp-dots span.is-active { background: var(--ink); width: 18px; border-radius: 3px; }
  .pdp-crumbs { font-size: 12px; margin-bottom: 14px; }
  .pdp-info h1 { font-size: 34px; margin-top: 12px; }
  .pdp-lede { font-size: 15px; margin-top: 12px; }
  .pdp-rx { font-size: 12px; margin-top: 12px; }
  .pdp-cta { margin-top: 20px; height: 50px; font-size: 15px; border-radius: 10px; }
  .pdp-perks { font-size: 11.5px; margin-top: 12px; }
  .pdp-details { margin-top: 22px; }
  .pdp-details summary { font-size: 13px; padding: 15px 0; }
  .pdp-details details p { font-size: 14px; padding-bottom: 15px; }

  .pdp-split { grid-template-columns: 1fr; gap: 0; }
  .pdp-split-img { min-height: 0; aspect-ratio: 1.1; border-radius: 6px 6px 0 0; }
  .pdp-split-text { padding: 28px 22px 30px; border-radius: 0 0 6px 6px; }
  .pdp h2 { font-size: 27px; margin: 10px 0 14px; }
  .pdp-split-text > p:not(.eyebrow-caps), .pdp-science-text > p:not(.eyebrow-caps) { font-size: 14.5px; }
  .pdp-facts div { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .pdp-facts dt { font-size: 11px; }
  .pdp-facts dd { font-size: 14px; }

  .pdp-science { padding: 32px 22px 12px; gap: 10px; border-radius: 6px; }
  .pdp-science-img img { height: 240px; min-height: 0; }

  .pdp-support h2 { margin-bottom: 20px; }
  .support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .support-grid article { padding: 18px 14px 20px; border-radius: 6px; }
  .support-grid h3 { font-size: 17px; margin-top: 24px; padding-bottom: 10px; }
  .support-grid p { font-size: 12.5px; margin-top: 10px; }
  .pdp-fine { font-size: 11px; margin-top: 18px; }

  /* Sticky buy bar */
  .pdp-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: fixed; z-index: 95; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px));
    background: var(--cream); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(40,42,33,.16); padding: 10px 10px 10px 16px;
    transform: translateY(160%); transition: transform .45s var(--ease-out);
  }
  .pdp-bar.is-visible { transform: none; }
  .pdp-bar-name { font-family: var(--serif); font-weight: 600; font-size: 16px; }
  .pdp-bar-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
  .pdp-bar .btn-dark { width: auto; min-height: 0; height: 42px; padding: 0 22px; font-size: 14px; font-weight: 700; border-radius: 9px; flex-shrink: 0; }
  body:has(.pdp) { padding-bottom: 90px; }
}

/* Round 12: product page — single image, roomier sides, light science band */
.pdp .pdp-hero { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: max(var(--gutter), 4vw); padding-right: max(var(--gutter), 4vw); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(90 * var(--u)); }
.pdp-gallery { display: block; }
.pdp-stage { display: grid; place-items: center; aspect-ratio: 1 / 1.05; }
.pdp-stage img { width: auto; height: 78%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(40,42,33,.12)); }
.pdp-science { background: var(--cream); color: var(--ink); }
.pdp-science .eyebrow-caps { color: var(--ink); }
.pdp-science-text > p:not(.eyebrow-caps) { color: var(--ink-soft); }
.pdp-science-text em { color: var(--ink); }
.pdp-science-img img { filter: drop-shadow(0 24px 30px rgba(40,42,33,.14)); }
@media (max-width: 767px) {
  .pdp .pdp-hero { padding-left: var(--gutter); padding-right: var(--gutter); }
  .pdp-stage img { height: 74%; }
}

/* Round 12: home Shop by Category — big title with a full-width Shop pill underneath */
#shop .cat-footer { flex-direction: column; align-items: stretch; gap: calc(22 * var(--u)); bottom: calc(52 * var(--u)); padding: 0 calc(36 * var(--u)); }
#shop .cat-name { font-weight: 600; font-size: calc(46 * var(--u)); color: #4E4C47; line-height: 1.15; }
#shop .cat-footer .pill { width: 100%; height: calc(44 * var(--u)); min-height: 30px; font-size: max(13px, calc(24 * var(--u))); border-color: #4E4C47; color: #2F2E2A; background: transparent; }
@media (max-width: 767px) {
  #shop .cat-footer { gap: 8px; bottom: 14px; padding: 0 10px; }
  #shop .cat-name { font-size: 18px; }
  #shop .cat-footer .pill { height: 26px; min-height: 0; font-size: 11px; padding: 0; }
}

/* Round 13: home category cards — Shop pill fills charcoal on hover */
#shop .cat-footer .pill { transition: background .3s ease, color .3s ease, border-color .3s ease; }
#shop .cat-card:hover .pill, #shop .cat-card:focus-visible .pill { background: #525150; border-color: #3E3D3A; color: var(--white); }

/* Round 14: shipping bar flips to cream once you scroll */
.announce { transition: background .4s ease, color .4s ease, box-shadow .4s ease; }
.announce.is-scrolled { background: var(--cream); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 4px 14px rgba(40, 42, 33, .06); }

/* Round 15: "You may Also Explore" cards match the home category cards */
.explore-more .cat-footer { flex-direction: column; align-items: stretch; gap: calc(22 * var(--u)); bottom: calc(52 * var(--u)); padding: 0 calc(36 * var(--u)); }
.explore-more .cat-name { font-weight: 600; font-size: calc(46 * var(--u)); color: #4E4C47; line-height: 1.15; }
.explore-more .cat-footer .pill { width: 100%; height: calc(44 * var(--u)); min-height: 30px; font-size: max(13px, calc(24 * var(--u))); border-color: #4E4C47; color: #2F2E2A; background: transparent; transition: background .3s ease, color .3s ease, border-color .3s ease; }
.explore-more .cat-card:hover .pill, .explore-more .cat-card:focus-visible .pill { background: #525150; border-color: #3E3D3A; color: var(--white); }
@media (max-width: 767px) {
  .explore-more .cat-footer { gap: 8px; bottom: 14px; padding: 0 10px; }
  .explore-more .cat-name { font-size: 18px; }
  .explore-more .cat-footer .pill { height: 26px; min-height: 0; font-size: 11px; padding: 0; }
}

/* Round 15: "You may Also Explore" cards match the home category cards */
.explore-more .cat-footer { flex-direction: column; align-items: stretch; gap: calc(22 * var(--u)); bottom: calc(52 * var(--u)); padding: 0 calc(36 * var(--u)); }
.explore-more .cat-name { font-weight: 600; font-size: calc(46 * var(--u)); color: #4E4C47; line-height: 1.15; }
.explore-more .cat-footer .pill { width: 100%; height: calc(44 * var(--u)); min-height: 30px; font-size: max(13px, calc(24 * var(--u))); border-color: #4E4C47; color: #2F2E2A; background: transparent; transition: background .3s ease, color .3s ease, border-color .3s ease; }
.explore-more .cat-card:hover .pill, .explore-more .cat-card:focus-visible .pill { background: #525150; border-color: #3E3D3A; color: var(--white); }
@media (max-width: 767px) {
  .explore-more .cat-footer { gap: 8px; bottom: 14px; padding: 0 10px; }
  .explore-more .cat-name { font-size: 18px; }
  .explore-more .cat-footer .pill { height: 26px; min-height: 0; font-size: 11px; padding: 0; }
}

/* Round 16: product page hero — matched to the mockup */
.pdp .pdp-hero { max-width: none; padding-left: var(--gutter); padding-right: var(--gutter); grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: calc(90 * var(--u)); align-items: start; }
.pdp-gallery, .pdp-info { position: static; }
.pdp-stage { aspect-ratio: 1 / 1.08; border-radius: 2px; }
.pdp-stage img { height: 84%; filter: none; }
.pdp-info { padding-top: 0; max-width: calc(880 * var(--u)); }
.pdp-chip { display: inline-block; border: 1px solid var(--ink); border-radius: 12px; padding: calc(5 * var(--u)) calc(38 * var(--u)); font-family: var(--serif); font-size: max(13px, calc(26 * var(--u))); background: var(--cream); }
.pdp-info h1 { font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: max(30px, calc(62 * var(--u))); margin-top: calc(34 * var(--u)); padding-left: 4px; }
.pdp-lede { color: var(--muted); font-size: max(16px, calc(30 * var(--u))); margin-top: calc(22 * var(--u)); max-width: 26em; }
.pdp-rx { align-items: flex-start; gap: calc(16 * var(--u)); color: var(--muted); font-size: max(13px, calc(25 * var(--u))); margin-top: calc(40 * var(--u)); max-width: 30em; }
.pdp-rx-mark { flex-shrink: 0; font-size: max(12px, calc(22 * var(--u))); padding: 2px 10px; border-radius: 2px; margin-top: 4px; }
.pdp-cta {
  display: flex; align-items: center; justify-content: center; width: 100%;
  margin-top: calc(28 * var(--u)); height: max(50px, calc(104 * var(--u)));
  border: 1.5px solid var(--ink); border-radius: calc(16 * var(--u)); background: transparent;
  font-family: var(--serif); font-weight: 400; font-size: max(17px, calc(40 * var(--u))); color: var(--ink);
  transition: background .25s, color .25s;
}
.pdp-cta:hover { background: var(--ink); color: var(--cream); }
.pdp-details { margin: calc(66 * var(--u)) calc(70 * var(--u)) 0 calc(36 * var(--u)); }
.pdp-details summary { font-size: max(12px, calc(24 * var(--u))); padding: calc(28 * var(--u)) 0 calc(14 * var(--u)); }
.pdp-details summary::after { content: "+"; font-size: 16px; }
.pdp-details details[open] summary::after { content: "×"; transform: none; }
.pdp-details details p { font-size: max(14px, calc(25 * var(--u))); color: var(--ink-soft); padding-bottom: calc(28 * var(--u)); }
@media (max-width: 1100px) {
  .pdp .pdp-hero { grid-template-columns: 1fr; }
  .pdp-details { margin-left: 0; margin-right: 0; }
}
@media (max-width: 767px) {
  .pdp .pdp-hero { gap: 22px; }
  .pdp-chip { font-size: 13px; padding: 3px 18px; }
  .pdp-info h1 { font-size: 28px; margin-top: 16px; padding-left: 0; }
  .pdp-lede { font-size: 15px; }
  .pdp-rx { font-size: 12.5px; margin-top: 18px; }
  .pdp-cta { height: 52px; font-size: 18px; border-radius: 10px; margin-top: 18px; }
  .pdp-details { margin-top: 26px; }
  .pdp-details summary { font-size: 12px; padding: 16px 0 8px; }
  .pdp-details details p { font-size: 14px; padding-bottom: 16px; }
}

/* Round 17: product page colors */
:root { --ivory: #FBF6ED; }
.pdp-stage { background: var(--ivory); }
.pdp-cta { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.pdp-cta:hover { background: var(--ivory); color: var(--ink); border-color: var(--ink); }
.pdp-cta:hover { background: var(--teal); color: var(--ink); border-color: var(--teal); }

/* Round 18: Benefits + How to use */
.pdp-howto { margin-top: calc(34 * var(--u)); padding-top: calc(30 * var(--u)); border-top: 1px solid var(--line); }
.pdp-howto h3 { font-family: var(--serif); font-weight: 400; font-size: max(13px, calc(22 * var(--u))); letter-spacing: .1em; text-transform: uppercase; margin-bottom: calc(18 * var(--u)); }
.pdp-howto p { font-size: max(15px, calc(25 * var(--u))); line-height: 1.6; color: var(--ink-soft); max-width: 34em; margin-bottom: .8em; }
@media (max-width: 767px) { .pdp-howto { margin-top: 20px; padding-top: 18px; } .pdp-howto h3 { font-size: 12px; } .pdp-howto p { font-size: 14.5px; } }
.pdp-details-split { margin: calc(20 * var(--u)) 0 0; }
.pdp-details-split details p { max-width: 34em; line-height: 1.6; padding-bottom: calc(14 * var(--u)); }
.pdp-details-split details p:last-child { padding-bottom: calc(30 * var(--u)); }

/* Round 19: product split — the photo keeps its size when rows expand */
.pdp-split { align-items: start; }
.pdp-split-img { min-height: 0; aspect-ratio: 1088 / 1190; }
.pdp-split-text { align-self: stretch; justify-content: flex-start; }
@media (max-width: 767px) { .pdp-split-img { aspect-ratio: 1088 / 1190; } }

/* Round 20: phone — product image eases smaller after load, pulling the info up */
@keyframes pdpShrink { from { height: calc(100vw - 2 * var(--gutter)); } to { height: 62vw; } }
@media (max-width: 767px) {
  .pdp-stage { aspect-ratio: auto; height: 62vw; animation: pdpShrink 1s cubic-bezier(.76, 0, .24, 1) .7s both; }
  .pdp-stage img { height: 82%; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .pdp-stage { animation: none; } }

/* Round 21: vial always fits whole inside the card */
.pdp-stage { position: relative; }
.pdp-stage img { position: absolute; inset: 0; margin: auto; width: 100%; height: 84%; object-fit: contain; }
@media (max-width: 767px) { .pdp-stage img { height: 86%; } }

/* Round 22: product page — $0 today + payment logos under the button */
.pdp-pay { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 18px; margin-top: calc(20 * var(--u)); }
.pdp-pay p { font-size: max(13px, calc(22 * var(--u))); color: var(--ink-soft); }
.pdp-pay strong { color: var(--ink); font-weight: 700; }
.pdp-pay-logos { display: flex; align-items: center; gap: 12px; }
.pdp-pay-logos img { width: auto; display: block; }
.pay-klarna { height: 22px; }
.pay-affirm { height: 20px; }
.pay-amazon { height: 20px; }
@media (max-width: 767px) { .pdp-pay { margin-top: 12px; gap: 8px 14px; } .pdp-pay p { font-size: 12.5px; } .pay-klarna { height: 19px; } .pay-affirm, .pay-amazon { height: 17px; } }

/* Round 23: vial card lines up with the photo below; payment icons */
.pdp .pdp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(40 * var(--u)); }
.pdp-info { padding-left: calc(50 * var(--u)); }
.pdp-pay-img { height: 30px; width: auto; display: block; }
@media (max-width: 1100px) { .pdp-info { padding-left: 0; } }
@media (max-width: 767px) { .pdp-pay-img { height: 26px; } }

/* Round 24: Start Now + Learn More side by side on treatment cards */
.treat-actions { display: flex; gap: calc(18 * var(--u)); justify-content: center; width: 100%; margin-top: calc(10 * var(--u)); }
.treat-actions .btn-start { margin-top: 0; }
.btn-learn {
  width: calc(294 * var(--u)); height: calc(68 * var(--u)); min-height: 40px;
  border: 1px solid var(--ink); border-radius: calc(8 * var(--u)); background: #FBFBF7; color: var(--ink);
  font-family: var(--sans); font-weight: 400; font-size: max(13px, calc(26 * var(--u)));
  transition: background .25s, color .25s;
}
.btn-learn:hover { background: var(--ink); color: var(--white); }
.treat-actions .btn-start { font-weight: 400; }
@media (max-width: 767px) {
  .treat-actions { gap: 6px; }
  .treat-actions .btn-start, .btn-learn { width: 50%; height: 36px; min-height: 0; font-size: 11.5px; border-radius: 6px; padding: 0 4px; }
}

/* Round 25: product page plan picker */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pdp-plans { border: 0; padding: 0; margin: calc(34 * var(--u)) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(16 * var(--u)); }
.pdp-plan { position: relative; cursor: pointer; }
.pdp-plan input { position: absolute; opacity: 0; pointer-events: none; }
.pdp-plan-body {
  display: flex; flex-direction: column; gap: calc(8 * var(--u));
  padding: calc(22 * var(--u)) calc(26 * var(--u));
  border: 1px solid var(--line); border-radius: calc(12 * var(--u)); background: var(--ivory, #FBF6ED);
  transition: border-color .2s, box-shadow .2s;
}
.pdp-plan:hover .pdp-plan-body { border-color: var(--ink-soft); }
.pdp-plan input:checked + .pdp-plan-body { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pdp-plan input:focus-visible + .pdp-plan-body { outline: 2px solid var(--cherry); outline-offset: 3px; }
.pdp-plan-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--serif); font-size: max(13px, calc(22 * var(--u))); letter-spacing: .08em; text-transform: uppercase; }
.pdp-save { font-style: normal; font-family: var(--sans); font-size: max(11px, calc(17 * var(--u))); letter-spacing: 0; text-transform: none; background: var(--teal); border-radius: 999px; padding: 2px 10px; }
.pdp-plan-price { font-family: var(--serif); font-size: max(24px, calc(46 * var(--u))); font-variant-numeric: tabular-nums; }
.pdp-plan-price small { font-family: var(--sans); font-size: max(12px, calc(20 * var(--u))); color: var(--muted); margin-left: 3px; }
.pdp-plans + .pdp-cta { margin-top: calc(20 * var(--u)); }
@media (max-width: 767px) {
  .pdp-plans { gap: 8px; margin-top: 18px; }
  .pdp-plan-body { padding: 12px 14px; gap: 4px; border-radius: 10px; }
  .pdp-plan-name { font-size: 11.5px; gap: 6px; }
  .pdp-save { font-size: 10px; padding: 1px 8px; }
  .pdp-plan-price { font-size: 22px; }
  .pdp-plan-price small { font-size: 11px; }
}

/* Round 26: desktop product hero fits in one screen */
@media (min-width: 1101px) {
  .pdp .pdp-hero { --hu: min(var(--u), 0.085vh); margin-top: calc(24 * var(--hu)); align-items: start; }
  .pdp-stage { aspect-ratio: auto; height: min(calc((100vw - 2 * var(--gutter)) / 2 * 1.08), calc(100vh - 180px)); min-height: 440px; }
  .pdp-stage img { height: 86%; }
  .pdp-info { max-width: calc(760 * var(--u)); align-self: center; }
  .pdp-chip { font-size: max(12px, calc(20 * var(--hu))); padding: calc(4 * var(--hu)) calc(28 * var(--hu)); border-radius: 10px; }
  .pdp-info h1 { font-size: max(28px, calc(52 * var(--hu))); margin-top: calc(20 * var(--hu)); }
  .pdp-lede { font-size: max(15px, calc(23 * var(--hu))); margin-top: calc(12 * var(--hu)); line-height: 1.45; }
  .pdp-rx { font-size: max(12px, calc(19 * var(--hu))); margin-top: calc(18 * var(--hu)); gap: 12px; }
  .pdp-rx-mark { font-size: 12px; padding: 1px 7px; margin-top: 2px; }
  .pdp-plans { margin-top: calc(24 * var(--hu)); gap: calc(12 * var(--hu)); }
  .pdp-plan-body { padding: calc(14 * var(--hu)) calc(20 * var(--hu)); gap: calc(4 * var(--hu)); border-radius: 10px; }
  .pdp-plan-name { font-size: max(11px, calc(17 * var(--hu))); }
  .pdp-save { font-size: max(10px, calc(14 * var(--hu))); padding: 1px 8px; }
  .pdp-plan-price { font-size: max(20px, calc(34 * var(--hu))); }
  .pdp-plan-price small { font-size: max(11px, calc(16 * var(--hu))); }
  .pdp-plans + .pdp-cta, .pdp-cta { margin-top: calc(14 * var(--hu)); height: max(46px, calc(72 * var(--hu))); font-size: max(16px, calc(28 * var(--hu))); border-radius: 10px; }
  .pdp-pay { margin-top: calc(12 * var(--hu)); }
  .pdp-pay p { font-size: max(12px, calc(18 * var(--hu))); }
  .pdp-pay-img { height: max(22px, calc(26 * var(--hu))); }
  .pdp-info > .pdp-details:not(.pdp-details-split) { margin: calc(26 * var(--hu)) 0 0; }
  .pdp-info > .pdp-details summary { font-size: max(11px, calc(17 * var(--hu))); padding: calc(16 * var(--hu)) 0 calc(10 * var(--hu)); }
  .pdp-info > .pdp-details details p { font-size: max(13px, calc(19 * var(--hu))); padding-bottom: calc(16 * var(--hu)); }
}

/* Round 27: tighter gap under the shipping bar; smaller vial card; Opal Breath tag */
.hero-legal { margin-top: 6px; }
.pdp-chip { background: var(--teal); border-color: var(--teal); }
@media (min-width: 1101px) {
  .pdp .pdp-hero { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: calc(110 * var(--u)); margin-top: calc(18 * var(--hu)); }
  .pdp-stage { height: min(calc((100vw - 2 * var(--gutter)) * 0.4), calc(100vh - 170px)); min-height: 420px; }
  .pdp-stage img { height: 80%; }
  .pdp-info { max-width: calc(820 * var(--u)); padding-left: 0; }
  .pdp-info h1 { font-size: max(30px, calc(58 * var(--hu))); }
  .pdp-lede { font-size: max(16px, calc(25 * var(--hu))); }
  .pdp-rx { font-size: max(12px, calc(20 * var(--hu))); }
}

/* Round 28: framed product hero: photo card + warm ivory info panel */
.pdp-stage { background: var(--ivory); border-radius: calc(20 * var(--u)); aspect-ratio: 1 / 1; height: auto; min-height: 0; }
.pdp-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.pdp-info { background: var(--ivory); border-radius: calc(20 * var(--u)); padding: calc(36 * var(--u)) calc(44 * var(--u)) calc(40 * var(--u)); }
.pdp-rx { max-width: none; }
.pdp-plan-body { background: #FFFEFB; }
@media (min-width: 1101px) {
  .pdp .pdp-hero { max-width: 1640px; margin-left: auto; margin-right: auto; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: calc(28 * var(--u)); align-items: start; }
  .pdp-stage { height: auto; width: min(100%, calc(100vh - 150px)); min-height: 0; }
  .pdp-info { max-width: none; align-self: start; padding-left: calc(48 * var(--u)); padding-right: calc(48 * var(--u)); }
  .pdp-rx { white-space: nowrap; align-items: center; }
  .pdp-rx-mark { margin-top: 0; }
  .pdp-info > .pdp-details:not(.pdp-details-split) { margin-bottom: 0; }
}
@keyframes pdpShrinkSq { from { width: 100%; } to { width: 70%; } }
@media (max-width: 1100px) {
  .pdp-info { padding: 22px 20px 24px; border-radius: 14px; }
  .pdp-stage { border-radius: 14px; }
}
@media (max-width: 767px) {
  .pdp-gallery { display: block; }
  .pdp-stage { aspect-ratio: 1 / 1; height: auto; margin: 0 auto; animation: pdpShrinkSq 1s cubic-bezier(.76, 0, .24, 1) .7s both; }
  .pdp-stage img { height: 100%; }
  .pdp-rx { white-space: normal; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .pdp-stage { animation: none; } }
@media (min-width: 1101px) {
  .pdp .pdp-hero { align-items: stretch; }
  .pdp-info { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .pdp-info > .pdp-chip { align-self: flex-start; }
}
@media (max-width: 1100px) { .pdp .pdp-hero { grid-template-columns: minmax(0, 1fr); } }

/* Round 29: hero columns match the split section below */
@media (min-width: 1101px) {
  .pdp .pdp-hero { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(40 * var(--u)); }
  .pdp-stage { width: 100%; }
}

/* Round 30: Good for list; photo stays put while the open panel scrolls */
.pdp-goodfor { margin: 0; padding-bottom: calc(16 * var(--u)); }
.pdp-goodfor > div { padding: calc(10 * var(--u)) 0; }
.pdp-goodfor dt { font-family: var(--serif); font-size: max(11px, calc(16 * var(--u))); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.pdp-goodfor dd { margin: 4px 0 0; font-size: max(13px, calc(19 * var(--u))); line-height: 1.55; color: var(--ink-soft); }
@media (min-width: 1101px) {
  .pdp-gallery { position: relative; top: auto; align-self: stretch; display: block; }
  .pdp-stage { position: sticky; top: calc(var(--frame-top) + var(--bar-h) + 6px + max(60px, calc(98 * var(--u))) + 8px); }
  .pdp .pdp-hero { margin-top: calc(18 * var(--hu) + 10px); }
}
@media (max-width: 767px) { .pdp-goodfor dt { font-size: 11px; } .pdp-goodfor dd { font-size: 13.5px; } }

/* Round 31: phone photo fills the section width; plan cards line up */
.pdp-plan { display: flex; }
.pdp-plan-body { flex: 1; }
@media (max-width: 767px) {
  .pdp-stage { width: 100%; animation: none; }
  .pdp-plan-name { flex-wrap: nowrap; }
  .pdp-save { position: absolute; top: 0; right: 10px; transform: translateY(-50%); white-space: nowrap; }
}

/* Round 32: product pages that use the product cut-out instead of a photo */
.pdp-stage.is-cutout img { object-fit: contain; inset: 12% 10%; width: 80%; height: 76%; mix-blend-mode: multiply; filter: drop-shadow(0 24px 28px rgba(40, 42, 33, .12)); }
/* Start Now + Learn More share the card width instead of stretching the grid */
.treat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.treat-actions { padding: 0 calc(20 * var(--u)); }
.treat-actions .btn-start, .treat-actions .btn-learn { flex: 1 1 0; width: auto; min-width: 0; max-width: calc(294 * var(--u)); }
@media (max-width: 1100px) { .treat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .treat-actions { padding: 0; } .treat-actions .btn-start, .treat-actions .btn-learn { max-width: none; } }

/* Round 33: billing line under each plan price; single-plan products */
.pdp-plan-bill { font-size: max(11px, calc(15 * var(--u))); color: var(--muted); }
.pdp-plans.is-single { grid-template-columns: 1fr; }
.pdp-plan-note { font-size: max(11px, calc(15 * var(--u))); color: var(--muted); margin-top: 8px; }
@media (min-width: 1101px) {
  .pdp-plan-bill, .pdp-plan-note { font-size: max(11px, calc(15 * var(--hu))); }
}
@media (max-width: 767px) { .pdp-plan-bill { font-size: 10.5px; } .pdp-plan-note { font-size: 11px; } }

/* Round 34: quarterly offer line */
.pdp-plan-offer { margin-top: calc(6 * var(--u)); padding-top: calc(8 * var(--u)); border-top: 1px dashed var(--line); font-size: max(11px, calc(15 * var(--u))); font-weight: 700; color: var(--cherry); line-height: 1.35; }
@media (min-width: 1101px) { .pdp-plan-offer { font-size: max(11px, calc(15 * var(--hu))); margin-top: calc(6 * var(--hu)); padding-top: calc(8 * var(--hu)); } }
@media (max-width: 767px) { .pdp-plan-offer { font-size: 10.5px; margin-top: 4px; padding-top: 6px; } }
/* offer now replaces the billing line */
.pdp-plan-offer { margin-top: 0; padding-top: 0; border-top: 0; }

/* Round 35: bundle "Includes" list, price note, bundle card buttons */
.pdp-includes { margin-top: calc(22 * var(--u)); }
.pdp-includes-title { font-family: var(--serif); font-size: max(11px, calc(16 * var(--u))); letter-spacing: .1em; text-transform: uppercase; }
.pdp-includes ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-includes li a, .pdp-includes li { font-size: max(12px, calc(17 * var(--u))); }
.pdp-includes li { border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; background: #FFFEFB; }
.pdp-includes li a { color: var(--ink); text-decoration: none; }
.pdp-includes li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pdp-includes + .pdp-plans { margin-top: calc(16 * var(--u)); }
.pdp-price-note { margin-top: calc(24 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)); border: 1px solid var(--line); border-radius: 10px; background: #FFFEFB; font-family: var(--serif); font-size: max(14px, calc(22 * var(--u))); }
.pdp-price-note + .pdp-cta { margin-top: calc(14 * var(--u)); }
.bundle-actions { display: flex; gap: 10px; width: 100%; }
.bundle-actions .btn { flex: 1 1 0; min-width: 0; width: auto; }
@media (min-width: 1101px) {
  .pdp-includes { margin-top: calc(20 * var(--hu)); }
  .pdp-includes li, .pdp-includes li a { font-size: max(12px, calc(16 * var(--hu))); }
}
@media (max-width: 767px) {
  .pdp-includes li, .pdp-includes li a { font-size: 12px; }
  .pdp-price-note { font-size: 14px; padding: 12px 14px; }
  .bundle-actions { gap: 6px; }
}
.bundle-actions { margin-top: calc(18 * var(--u)); }
.bundle-actions .btn { margin-top: 0; height: max(44px, calc(64 * var(--u))); min-height: 0; padding: 0 10px; white-space: nowrap; font-size: max(13px, calc(22 * var(--u))); border-radius: calc(8 * var(--u)); }
@media (max-width: 767px) { .bundle-actions .btn, .page-products .bundle-actions .btn { height: 36px; min-height: 0; font-size: 10.5px; padding: 0 4px; border-radius: 6px; } }

/* Round 36: product-page tag matches the shop card tags */
.pdp-chip { background: var(--teal); border: 1px solid #6E8F8C; border-radius: 999px; color: var(--ink); }
.pdp-chip.is-cherry { background: var(--cherry); border-color: var(--cherry); color: var(--white); }
.pdp-chip.is-cherry-outline { background: var(--cream); border-color: #C9A9A6; color: var(--cherry); }
/* Save tag follows the page's tag colour on Menopause and Sexual Health pages */
.pdp-info:has(.pdp-chip.is-cherry) .pdp-save { background: var(--cherry); color: var(--white); }
.pdp-info:has(.pdp-chip.is-cherry-outline) .pdp-save { background: var(--cream); color: var(--cherry); box-shadow: inset 0 0 0 1px #C9A9A6; }

/* Round 37: Suggested for you */
.pdp-suggest h2 { text-align: center; margin-bottom: calc(40 * var(--u)); }
.pdp-suggest .suggest-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(24 * var(--u)); padding-left: 0; }
.pdp-suggest .treat-card h3 { font-size: max(18px, calc(32 * var(--u))); }
.pdp-suggest .treat-img { height: calc(380 * var(--u)); }
.pdp-suggest .treat-img img { max-height: 88%; }
.pdp-suggest .treat-actions { padding: 0 calc(12 * var(--u)); gap: calc(10 * var(--u)); }
.pdp-suggest .treat-actions .btn { font-size: max(12px, calc(20 * var(--u))); }
@media (max-width: 1100px) { .pdp-suggest .suggest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .pdp-suggest h2 { margin-bottom: 16px; }
  .pdp-suggest .suggest-grid { gap: 10px; }
  .pdp-suggest .treat-img { height: 170px; }
  .pdp-suggest .treat-actions .btn { font-size: 11px; }
}

/* Round 38: bundle science panel shows the whole set */
.pdp-science-img.is-group img { width: 100%; max-width: calc(620 * var(--u)); height: auto; min-height: 0; mix-blend-mode: multiply; filter: none; }
@media (max-width: 767px) { .pdp-science-img.is-group img { max-width: 300px; height: auto; } }

/* Round 39: shop tabs: Category centred under the logo, the others either side */
@media (min-width: 768px) {
  .mega-tabs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: calc(90 * var(--u)); justify-content: stretch; }
  .mega-tab:nth-child(1) { justify-self: end; }
  .mega-tab:nth-child(2) { justify-self: center; }
  .mega-tab:nth-child(3) { justify-self: start; }
}
/* The logo sits slightly left of centre (header padding is 11% left / 13.6% right), so nudge the tabs to match */
@media (min-width: 1101px) { .mega-tabs { padding-right: calc(0.026 * (100vw - 2 * var(--gutter))); } }

/* Round 40: phone cards: Start Now on top, Learn More underneath, pinned to the card bottom */
@media (max-width: 767px) {
  .treat-card { display: flex; flex-direction: column; }
  .treat-actions, .pdp-suggest .treat-actions { flex-direction: column; gap: 6px; margin-top: auto; padding: 0; }
  .treat-actions .btn-start, .treat-actions .btn-learn { width: 100%; max-width: none; flex: 0 0 auto; }
  .bundle-actions { flex-direction: column; gap: 6px; }
  .bundle-actions .btn { flex: 0 0 auto; width: 100%; }
}

/* Round 41: second-section text sits in the middle of its card */
.pdp-split-text { justify-content: center; }

/* Round 42: home hero text + button on the right (desktop), over the open sky */
@media (min-width: 768px) {
  .hero-home-right .hero-content { align-items: flex-start; padding-right: 0; padding-left: calc(86.4% - max(360px, calc(560 * var(--u)))); }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .hero-home-right .hero-img { object-position: 74% 50%; }
  .hero-home-right .hero-content { padding-left: calc(94% - 340px); }
}
/* Round 43: home hero: text back on the left, photo framed so she sits right of centre */
@media (min-width: 768px) { .hero-home .hero-img { object-position: 35% 30%; } }

/* Round 44: home hero: tighter under the shipping bar; text further right; bottom row spread to the edges */
.hero-home-right { margin-top: 6px; height: calc(100svh - var(--frame-top) - var(--bar-h) - 6px - var(--frame-top)); }
@media (min-width: 1101px) {
  .hero-home-right .hero-content { padding-left: calc(94% - max(360px, calc(560 * var(--u)))); }
  .hero-home-right .hero-bottom { padding-left: 5%; padding-right: 5%; }
}
/* Round 45: home hero text back on the left (aligned with SHOP), closer photo framed so she sits right of centre */
@media (min-width: 768px) {
  .hero-home-right .hero-content { padding-left: 12.4%; }
  .hero-home-right .hero-img { object-position: 22% 30%; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .hero-home-right .hero-content { padding-left: 8%; }
  .hero-home-right .hero-img { object-position: 12% 30%; }
}

/* Round 46: card opened from a link glows in Espresso Muse, not Opal Breath */
@keyframes cardGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(40,42,33,0); } 25%, 60% { box-shadow: 0 0 0 2px var(--ink); } }

/* Round 47: more breathing room at the sides; softer footer logo */
@media (min-width: 768px) { :root { --gutter: max(24px, 4vw); } }
@media (min-width: 1101px) { :root { --gutter: max(32px, 6.5vw); } }
.logo-foot img { opacity: .72; }

/* Round 48: shipping bar, headers and hero frames stay near full width; page content keeps the wider side margins */
:root { --frame-gutter: max(16px, 2.25vw); }
.announce { margin-left: var(--frame-gutter); margin-right: var(--frame-gutter); }
.hero { margin-left: var(--frame-gutter); margin-right: var(--frame-gutter); }
.sticky-header { left: var(--frame-gutter); right: var(--frame-gutter); }

/* Round 49 */
/* Build Your Own Bundle: thin line under the eyebrow */
.bundle-card .eyebrow { padding-bottom: calc(18 * var(--u)); border-bottom: 1px solid var(--muted); padding-right: calc(8 * var(--u)); }
.bundle-card h3 { margin-top: calc(22 * var(--u)); }
/* Home hero headline: tighter lines */
.hero h1 { line-height: 1.12; letter-spacing: -1.11px; }
/* Footer logo back to full strength */
.logo-foot img { opacity: 1; }
/* Same small gap under the shipping bar on every page */
.hero { margin-top: 6px; height: calc(100svh - var(--frame-top) - var(--bar-h) - 6px - var(--frame-top)); }
.hero-banner { height: auto; }
/* Softer, rounder corners everywhere (15px) */
:root { --radius: 10px; }
.announce, .sticky-header, .hero,
.bundle-img, .bundle-card, .bundle-item, .bundle-photo, .product-card, .cat-card, .treat-card,
.banner, .banner-media, .founder, .info-card, .note-card, .legal-card, .expect-card, .expect-img, .how-card,
.mb-card, .mb-img, .mc-tile, .mp-card, .mp-img, .prov-card, .prov img, .sci-card, .sci-img, .sw-card, .sw-media,
.pdp-stage, .pdp-info, .pdp-split-img, .pdp-split-text, .pdp-science, .support-grid article, .pdp-price-note {
  border-radius: 10px;
}
.bundle-img, .bundle-item, .bundle-photo, .cat-card, .banner, .banner-media, .expect-img, .mb-img, .mc-tile, .mp-img, .sci-img, .sw-media, .pdp-stage, .pdp-split-img { overflow: hidden; }
.bundle-img img, .banner-media img, .expect-img img, .sw-media img { border-radius: inherit; }
@media (max-width: 767px) {
  .pdp-split-img { border-radius: 10px 10px 0 0; }
  .pdp-split-text { border-radius: 0 0 10px 10px; }
}

/* Filter menu: the filter icon opens a list of every option */
.filter-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; margin-right: calc(10 * var(--u)); cursor: pointer; color: var(--ink); flex-shrink: 0; }
.filter-toggle .filter-icon { margin-right: 0; }
.filter-toggle:hover { opacity: .7; }
.filter-menu { position: absolute; z-index: 60; top: calc(100% + 10px); left: 0; min-width: 240px; background: #FFFEFB; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 34px rgba(40,42,33,.12); padding: 8px; display: none; }
.filter-menu.is-open { display: block; }
.filter-menu button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; background: none; border: 0; border-radius: 10px; padding: 11px 14px; font-family: var(--serif); font-size: 16px; color: var(--ink); text-align: left; cursor: pointer; }
.filter-menu button:hover { background: var(--cream); }
.filter-menu button.is-active { background: var(--cream); font-weight: 600; }
.filter-menu button.is-active::after { content: "✓"; font-family: var(--sans); font-size: 14px; }
.filters-wrap { position: relative; }

/* Round 50: corners 10px; about switchers stack on phone keep rounded edges */
.announce { border-radius: 10px; }
@media (max-width: 767px) { .sw-media { border-radius: 10px 10px 0 0; } .sw-card { border-radius: 0 0 10px 10px; } }

/* Round 51: about switchers: photo always fills its own column (no overlap); no animation while measuring */
.switcher > * { min-width: 0; }
@media (min-width: 768px) {
  .sw-media { aspect-ratio: auto; width: 100%; height: auto; min-height: 420px; align-self: stretch; }
}
.sw-measuring *, .sw-measuring *::before { transition: none !important; }

/* Round 52: FAQ note + links; About menu lined up with the header (links under SHOP, photo ends under LOGIN) */
.faq-list details a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.faq-list details p + p { margin-top: .7em; }
.faq-note { font-size: max(12px, calc(19 * var(--u))); color: var(--muted); line-height: 1.55; margin-top: calc(34 * var(--u)); }
@media (min-width: 768px) {
  .mega-about .about-wrap { max-width: none; padding-left: var(--about-l, 0px); padding-right: var(--about-r, 0px); grid-template-columns: 1fr 1.9fr; }
}

/* Round 53: about contact details; smaller bundle tags */
.info-contact { font-size: max(14px, calc(24 * var(--u))); line-height: 1.7; color: var(--ink-soft); margin-top: calc(22 * var(--u)); }
.info-contact strong { color: var(--ink); font-weight: 600; }
.info-contact a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.tag-sm { width: auto; height: auto; padding: calc(5 * var(--u)) calc(26 * var(--u)); font-size: max(12px, calc(22 * var(--u))); border-radius: calc(10 * var(--u)); }
@media (max-width: 767px) { .tag-sm, .page-products .tag-sm { font-size: 11px; padding: 2px 14px; border-radius: 6px; } }

/* Round 54: Shop menu bundles: product cut-outs on white */
.mb-img { background: #FFFFFF; }
.mb-img img { object-fit: contain; }
.mb-card { background: #FFFFFF; }

/* Round 55: provider practice details under the provider photos */
.prov-practice { text-align: center; font-size: max(14px, calc(24 * var(--u))); line-height: 1.7; color: var(--ink-soft); margin-top: calc(50 * var(--u)); }
.prov-practice strong { color: var(--ink); font-weight: 600; }
.prov-practice a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { .prov-practice { margin-top: 24px; font-size: 14px; } }
.prov-practice { font-size: max(12px, calc(19 * var(--u))); line-height: 1.6; }
@media (max-width: 767px) { .prov-practice { font-size: 12.5px; } }

/* Round 56: legal pages use the full card width */
.legal-body, .legal-body p, .legal-body ul, .legal-body ol, .legal-body h2, .legal-body h3 { max-width: none; }

/* Round 57: trust badges all the same height */
.trust-icons img, .hero:not(.hero-cat) .trust-icons img { height: max(40px, calc(66 * var(--u))); width: auto; }
@media (max-width: 1100px) { .trust-icons img, .hero:not(.hero-cat) .trust-icons img { height: 42px; } }
@media (max-width: 767px) { .trust-icons img, .hero:not(.hero-cat) .trust-icons img { height: 36px; } }

/* Round 58: phone about switchers compact enough to hold in place while tabs switch */
@media (max-width: 767px) {
  .switcher .sw-media { max-height: none; min-height: 0; aspect-ratio: auto; width: 100%; }
  .switcher .sw-card { padding: 16px 18px 18px; }
  .switcher .sw-label { padding: 11px 0; font-size: 11.5px; }
  .switcher .sw-body-inner h2 { font-size: 22px; padding-top: 4px; }
  .switcher .sw-body-inner p { font-size: 13px; line-height: 1.45; margin-top: 8px; }
  .switcher .sw-body-inner .btn, .switcher .sw-body-inner a[class*="btn"] { margin-top: 12px; height: 40px; min-height: 0; font-size: 14px; }
  .switcher .sw-item:not(:last-child) .sw-body-inner { padding-bottom: 14px; }
}
/* Banner: show her face on phone, clear of the text */
@media (max-width: 767px) { .banner img { object-position: 76% center; } .banner-text { font-size: 18px; left: 5%; top: 9%; max-width: 44%; } }
@media (max-width: 767px) { .switcher { grid-template-rows: auto 1fr; } .switcher .sw-card { align-self: stretch; } }