/* ─────────────────────────────────────────────────────────────────────
   Vitamins & Essentials — page-scoped styles
   Loaded via pageCSS frontmatter on /explore/vitamins-essentials/
   All rules scoped to .hmv-cat
   ──────────────────────────────────────────────────────────────────── */

/* ── RESET ── */
.hmv-cat *, .hmv-cat *::before, .hmv-cat *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

/* ── DESIGN TOKENS ── */
.hmv-cat {
  --c-dark:       #091916;
  --c-green:      #1A3735;
  --c-green-card: #111f1d;
  --c-green-mid:  #415957;
  --c-gold:       #926D1F;
  --c-gold-b:     #b49b65;
  --c-gold-pale:  #dacdb3;
  --c-gold-cream: #f6f3ec;
  --c-cream:      #fdf8f2;
  --c-white:      #FBFBFB;
  --c-divider:    rgba(26,55,53,.08);
  --c-divider-gold: rgba(180,155,101,.15);
  --ff-serif:     'Cormorant Garamond', Georgia, serif;
  --ff-sans:      'Inter', system-ui, sans-serif;
  --fw-light:     300;
  --fw-reg:       400;
  --fw-med:       500;
  --fw-semi:      600;
  --nav-h:        72px;
  --sp-md:  clamp(20px, 3vw, 36px);
  --sp-lg:  clamp(40px, 5.5vw, 64px);
  --sp-xl:  clamp(48px, 7vw, 80px);
  font-family: var(--ff-sans);
  background: var(--c-dark);
  color: var(--c-white);
  overflow-x: hidden;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ── LAYOUT ── */
.hmv-cat .wrap { max-width: 1450px; margin: 0 auto; padding: 0 var(--sp-md); }

/* ── FADE-IN ── */
.hmv-cat .fi { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.hmv-cat .fi.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hmv-cat .fi { opacity: 1; transform: none; transition: none; }
}

/* ── BUTTONS ── */
.hmv-cat .btn-p, .hmv-cat .btn-g {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ff-sans); font-size: 11px; font-weight: var(--fw-semi);
  letter-spacing: .22em; text-transform: uppercase;
  padding: 15px 32px; cursor: pointer; text-decoration: none;
  transition: background .25s, border-color .25s, color .25s, transform .2s;
  white-space: nowrap; border: none; min-height: 48px;
}
.hmv-cat .btn-p { color: var(--c-dark); background: var(--c-gold-b); }
.hmv-cat .btn-p:hover { background: var(--c-gold); color: var(--c-gold-cream); transform: translateY(-2px); }
.hmv-cat .btn-p:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }
.hmv-cat .btn-g { color: var(--c-gold-pale); background: transparent; border: 1px solid rgba(180,155,101,.3); }
.hmv-cat .btn-g:hover { border-color: var(--c-gold-b); color: var(--c-gold-b); }
.hmv-cat .btn-g:focus-visible { outline: 2px solid var(--c-gold-b); outline-offset: 3px; }

/* =========================================================
   VITAMINS HERO — namespaced under .vh-*
   Sourced from reference/vitamins_hero/hero.css (high-fidelity
   design handoff). Tokens reference the .hmv-cat palette so
   the hero shares colours with the rest of the page.
   ========================================================= */
.vh-hero,
.vh-trust{
  --vh-green-900: var(--c-green);
  --vh-gold-600:  var(--c-gold);
  --vh-gold-500:  var(--c-gold-b);
  --vh-gold-300:  var(--c-gold-pale);
  --vh-cream-50:  #f6efe2;   /* hero-only warm cream — intentional */
  --vh-cream-100: #efe6d3;
  --vh-ink-700:   #293828;
  --vh-ink-500:   #3e4a3c;
  font-family: var(--ff-sans);
  color: var(--vh-ink-700);
  -webkit-font-smoothing: antialiased;
}

.vh-hero *,
.vh-trust *{ box-sizing:border-box; }

/* ───────── Hero stage ───────── */
.vh-hero{
  position:relative;
  width:100%;
  min-height:460px;
  aspect-ratio: 1500 / 620;
  overflow:hidden;
  background:#efe6d3;
  isolation:isolate;
}
.vh-hero__bg{
  position:absolute; inset:0;
  background-image:url("/explore/images/VitaminsHeroBg.webp");
  background-size:cover;
  background-position:right center;
  z-index:0;
  /* No filter — keep the image rich. The veil shapes which part of
     the image is visible; it shouldn't degrade the image itself. */
}
.vh-hero__veil{
  position:absolute; inset:0;
  /* Cream "negative space" pad for the copy on the left, then a fast
     clean fade to fully transparent by 68% — the right third of the
     hero shows the product photo at full clarity. That asymmetry is
     what reads premium (cf. luxury hero conventions: copy on a clean
     plane, product image fully present in its zone). */
  background:linear-gradient(90deg,
    rgba(246,239,226,.97) 0%,
    rgba(246,239,226,.94) 28%,
    rgba(246,239,226,.55) 46%,
    rgba(246,239,226,.12) 60%,
    rgba(246,239,226,0)   72%);
  z-index:1;
  pointer-events:none;
}
.vh-hero__inner{
  position:relative; z-index:2;
  max-width:1440px; margin:0 auto;
  padding:14px 64px 0;
  height:100%;
  display:flex; flex-direction:column;
}

/* ───── Body grid ───── */
/* align-items: start (not center) so the headline sits at the top of
   the hero rather than floating in the middle of the cream space. */
.vh-hero__body{
  flex:1;
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  align-items:start;
  padding:18px 0 24px;
}
.vh-copy{ max-width:640px; }
.vh-hero__spacer{ height:100%; }

/* ───── Headline ───── */
.vh-title{
  font-family:"Cormorant Garamond", "Cormorant", Garamond, serif;
  font-weight:500;
  font-size:clamp(48px, 5.4vw, 80px);
  line-height:.98;
  letter-spacing:-.01em;
  margin:0;
  color:var(--vh-green-900);
}
.vh-title__line1{ display:block; }
.vh-title__line2{
  display:block;
  color:var(--vh-gold-500);
  font-style:italic;
  font-weight:500;
  letter-spacing:-.005em;
  margin-top:4px;
}
.vh-title__amp{
  font-style:italic;
  font-weight:400;
  margin-right:.06em;
}

.vh-rule{
  width:72px; height:1px;
  background:var(--vh-gold-500);
  opacity:.85;
  margin:20px 0 16px;
}

.vh-lede{
  font-size:17px; line-height:1.5;
  color:var(--vh-ink-500);
  max-width:520px; margin:0 0 26px;
  font-weight:400;
}

/* ───── Feature pills ───── */
.vh-features{
  list-style:none; padding:0;
  display:flex; gap:18px;
  margin:0 0 28px;
  max-width:520px;
}
.vh-feat{
  flex:1 1 0; min-width:0;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.vh-feat__ring{
  width:54px; height:54px;
  border:1.4px solid var(--vh-gold-500);
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--vh-gold-600);
  background:rgba(246,239,226,.35);
  transition:transform .25s ease, background .25s ease;
}
.vh-feat:hover .vh-feat__ring{
  transform:translateY(-2px);
  background:rgba(201,169,96,.18);
}
.vh-feat__lbl{
  font-size:13.5px; line-height:1.25;
  color:var(--vh-ink-700);
  font-weight:500;
}

/* ───── CTA ─────
   Dark green on cream — high contrast against the warm hero+trust band,
   matches the .hq-see-all "Browse all products" button so all primary
   product-entry CTAs read as one system. Hover transitions to gold for
   a moment of warmth on interaction.
   Specificity-locked (.vh-hero a.vh-cta with :link/:visited/:hover) to
   beat the sitewide `a { color: var(--monro-golden-300) }` rule in
   explore-theme.css that was bleeding gold link colour + underline
   through the cream label. */
.vh-hero a.vh-cta,
.vh-hero a.vh-cta:link,
.vh-hero a.vh-cta:visited{
  appearance:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:16px;
  background:var(--c-green);
  color:var(--c-gold-cream);
  padding:16px 30px;
  font-family:inherit;
  font-size:12.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none;
  border-radius:2px;
  transition:background .2s ease, transform .2s ease, box-shadow .25s ease, color .2s ease;
  box-shadow:0 8px 24px -10px rgba(26,55,53,.45);
}
.vh-hero a.vh-cta:hover,
.vh-hero a.vh-cta:focus-visible{
  background:var(--c-gold);
  color:var(--c-gold-cream);
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:0 14px 30px -12px rgba(146,109,31,.55);
}
.vh-hero a.vh-cta:active{ transform:translateY(0); }
.vh-cta__arrow{
  display:inline-block; width:22px; height:1.5px;
  background:currentColor; position:relative;
}
.vh-cta__arrow::after{
  content:""; position:absolute; right:-1px; top:-4px;
  width:9px; height:9px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg);
}

/* ───── Trust strip ─────
   Cream-on-cream — matches the hero's #efe6d3 base so the two read as
   one continuous warm-cream zone rather than a hero + dark band split.
   A faint gold hairline along the top defines the strip as a separate
   row without breaking the colour flow. */
.vh-trust{
  background:var(--vh-cream-100);
  color:var(--vh-ink-700);
  border-top:1px solid rgba(146,109,31,.18);
}
.vh-trust__inner{
  max-width:1440px; margin:0 auto;
  padding:22px 64px;
  display:grid; grid-template-columns:repeat(4, 1fr);
}
.vh-trust__item{
  display:flex; align-items:center; gap:18px;
  padding:0 8px;
  position:relative;
}
.vh-trust__item + .vh-trust__item::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px;
  width:1px; background:rgba(146,109,31,.22);
}
.vh-trust__icon{
  width:48px; height:48px;
  display:grid; place-items:center;
  color:var(--c-gold);
  flex:0 0 48px;
}
.vh-trust__txt{ display:flex; flex-direction:column; gap:4px; }
.vh-trust__kicker{
  font-family:var(--ff-sans);
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--c-gold); font-weight:600;
}
.vh-trust__sub{
  font-family:var(--ff-sans);
  font-size:13px; color:var(--vh-ink-500); font-weight:var(--fw-light);
}

/* ───── Responsive ─────
   Two breakpoints:
   1100px → tablet: single-col body, smaller title, trust strip 2-col
   640px  → phone:  tighter padding, 2×2 features, full-width CTA, trust
                    strip 1-col, smaller title floor (36 not 48). */
@media (max-width:1100px){
  .vh-hero{ aspect-ratio:auto; min-height:auto; }
  .vh-hero__inner{ padding:24px 28px 0; }
  .vh-hero__body{ grid-template-columns:1fr; padding:24px 0 32px; }
  .vh-hero__bg{ opacity:.55; }
  .vh-title{ font-size:clamp(44px, 8.5vw, 72px); }
  .vh-features{ flex-wrap:wrap; gap:18px; }
  .vh-trust__inner{ grid-template-columns:repeat(2,1fr); row-gap:18px; padding:22px 28px; }
}

@media (max-width:640px){
  .vh-hero__inner{ padding:18px 20px 0; }
  .vh-hero__body{ padding:14px 0 26px; }
  .vh-title{ font-size:clamp(36px, 10.5vw, 52px); line-height:1.0; }
  .vh-lede{ font-size:15.5px; margin-bottom:22px; }
  /* 2×2 feature grid (was a 4-item flex row that wrapped unevenly). */
  .vh-features{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px 18px;
    max-width:100%;
    margin-bottom:24px;
  }
  .vh-feat{ flex-direction:row; align-items:center; justify-content:flex-start; text-align:left; gap:12px; }
  .vh-feat__ring{ width:44px; height:44px; flex:0 0 44px; }
  .vh-feat__ring svg{ width:22px; height:22px; }
  .vh-feat__lbl{ font-size:12.5px; }
  /* Full-width CTA so the long "START WITH THE ESSENTIALS" label can't
     overflow the viewport. Tighten letter-spacing for the same reason. */
  .vh-hero a.vh-cta,
  .vh-hero a.vh-cta:link,
  .vh-hero a.vh-cta:visited{
    display:flex;
    width:100%;
    justify-content:center;
    padding:15px 20px;
    font-size:11.5px;
    letter-spacing:.18em;
    gap:14px;
  }
  /* Trust strip stacks single-column with tighter padding so each item
     gets enough horizontal room for icon + text on phones. */
  .vh-trust__inner{
    grid-template-columns:1fr;
    row-gap:14px;
    padding:18px 20px;
  }
  .vh-trust__item{ padding:0; }
  .vh-trust__item + .vh-trust__item::before{ display:none; }
  .vh-trust__icon{ width:40px; height:40px; flex:0 0 40px; }
  .vh-trust__icon svg{ width:30px; height:30px; }
  .vh-trust__kicker{ font-size:10.5px; letter-spacing:.22em; }
  .vh-trust__sub{ font-size:12.5px; }
}

/* ── STAT BAR ── */
.hmv-cat .stat-bar { background: var(--c-white); padding: var(--sp-lg) 0; border-bottom: 1px solid var(--c-divider); }
.hmv-cat .stat-bar-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 900px) { .hmv-cat .stat-bar-inner { grid-template-columns: repeat(4, 1fr); } }
.hmv-cat .stat-tile { background: var(--c-white); border: 1px solid var(--c-divider); border-top: 3px solid var(--c-gold-b); border-radius: 0 0 8px 8px; padding: clamp(16px,3vw,22px) 16px; text-align: center; }
.hmv-cat .stat-num { font-family: var(--ff-serif); font-size: clamp(28px,4vw,38px); font-weight: var(--fw-light); color: var(--c-green); line-height: 1; margin-bottom: 8px; }
.hmv-cat .stat-lbl { font-family: var(--ff-sans); font-size: 9px; font-weight: var(--fw-med); letter-spacing: .12em; text-transform: uppercase; color: var(--c-green-mid); line-height: 1.6; }

/* ── SECTION HEADER SYSTEM (shared)
   Unified eyebrow + title pattern so every major section reads with the
   same visual rhythm. Eyebrow: 10px wide-tracked all-caps in gold with a
   short leading rule. Title: Cormorant light, green, with a gold italic
   accent on the em. Apply via .section-eyebrow + .section-title, or via
   the older .vit-grid-eyebrow + .vit-grid-title hooks (aliased below). */
.hmv-cat .section-eyebrow {
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: var(--fw-semi);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hmv-cat .section-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--c-gold);
  flex-shrink: 0;
}
.hmv-cat .section-title {
  font-family: var(--ff-serif);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: var(--fw-light);
  line-height: 1.1;
  letter-spacing: -.005em;
  margin-bottom: 14px;
  color: var(--c-green);
}
.hmv-cat .section-title em { font-style: italic; color: var(--c-gold); }
.hmv-cat .section-sub {
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--c-green-mid);
  max-width: 620px;
  margin: 0;
}

/* ── PRODUCTS SECTION ── */
.hmv-cat .products-section { padding: var(--sp-xl) 0; background: var(--c-dark); }

/* Product grids — extracted from inline <style> blocks */
.hmv-cat .vit-g2 { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 1100px; margin-left: auto; margin-right: auto; }
@media (min-width: 640px) { .hmv-cat .vit-g2 { grid-template-columns: repeat(2, 1fr); } }
.hmv-cat .vit-g2 .pc-img { aspect-ratio: 16/10; max-height: 340px; }
@media (min-width: 900px) { .hmv-cat .vit-g2 .pc-img { aspect-ratio: 3/2; max-height: 300px; } }
.hmv-cat .d3-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .hmv-cat .d3-grid { grid-template-columns: repeat(4, 1fr); } }

.hmv-cat .prod-card { background: var(--c-green-card); border: 1px solid rgba(180,155,101,.14); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color .25s, transform .25s; }
.hmv-cat .prod-card:hover { border-color: rgba(180,155,101,.4); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.hmv-cat .prod-card:focus-visible { outline: 2px solid var(--c-gold-b); outline-offset: 3px; }

.hmv-cat .pc-img { aspect-ratio: 4/3; overflow: hidden; position: relative; background: var(--c-green); }
.hmv-cat .pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; opacity: 1; }
.hmv-cat .prod-card:hover .pc-img img { transform: scale(1.04); }

.hmv-cat .pc-badge { position: absolute; top: 12px; left: 12px; font-family: var(--ff-sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; padding: 5px 10px; font-weight: var(--fw-semi); }
.hmv-cat .pc-badge.featured { background: var(--c-gold-b); color: var(--c-dark); }
.hmv-cat .pc-badge.new { background: rgba(180,155,101,.15); color: var(--c-gold-b); border: 1px solid rgba(180,155,101,.25); }

.hmv-cat .pc-body { flex: 1; padding: 20px 20px 14px; }
.hmv-cat .pc-cat { font-family: var(--ff-sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--c-gold-b); opacity: .7; margin-bottom: 8px; }
.hmv-cat .pc-name { font-family: var(--ff-serif); font-size: clamp(16px,1.8vw,18px); font-weight: var(--fw-med); color: var(--c-gold-cream); line-height: 1.25; margin-bottom: 8px; }
.hmv-cat .pc-desc { font-family: var(--ff-sans); font-size: 12px; font-weight: var(--fw-light); line-height: 1.75; color: rgba(218,205,179,.75); }

.hmv-cat .pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid rgba(180,155,101,.15); margin-top: auto; }
.hmv-cat .pc-member-tag { font-family: var(--ff-sans); font-size: 10px; font-weight: var(--fw-med); letter-spacing: .18em; text-transform: uppercase; color: var(--c-gold-b); opacity: .75; }
.hmv-cat .pc-action { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ff-sans); font-size: 9px; font-weight: var(--fw-semi); letter-spacing: .2em; text-transform: uppercase; padding: 9px 18px; min-height: 36px; background: var(--c-gold-b); color: var(--c-dark); white-space: nowrap; flex-shrink: 0; transition: background .2s; pointer-events: none; }
.hmv-cat .prod-card:hover .pc-action { background: var(--c-gold); }

/* ── D3 CONTEXT GRID ── */
.hmv-cat .d3-cell { padding: clamp(18px,3vw,28px) clamp(16px,2.5vw,24px); border-right: 1px solid var(--c-divider); border-bottom: 1px solid var(--c-divider); }
.hmv-cat .d3-cell:nth-child(2n) { border-right: none; }
@media (min-width: 700px) {
  .hmv-cat .d3-cell { border-right: 1px solid var(--c-divider); border-bottom: none; }
  .hmv-cat .d3-cell:last-child { border-right: none; }
}
.hmv-cat .d3-cell-title { font-family: var(--ff-serif); font-size: 28px; font-weight: var(--fw-light); color: var(--c-gold); margin-bottom: 6px; }
.hmv-cat .d3-cell-label { font-family: var(--ff-sans); font-size: 10px; font-weight: var(--fw-semi); letter-spacing: .14em; text-transform: uppercase; color: var(--c-green-mid); margin-bottom: 10px; }
.hmv-cat .d3-cell-body { font-family: var(--ff-sans); font-size: 12.5px; font-weight: var(--fw-light); line-height: 1.7; color: var(--c-green-mid); }

/* ── RELATED ── */
.hmv-cat .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.hmv-cat .related-card { display: flex; flex-direction: column; gap: 6px; padding: clamp(14px,2vw,16px) 18px; background: #f7fcf9; border: 1px solid var(--c-divider); border-left: 3px solid var(--c-gold-b); border-radius: 0 6px 6px 0; text-decoration: none; transition: background .15s, transform .15s; }
.hmv-cat .related-card:hover { background: #eef7f2; transform: translateY(-2px); }
.hmv-cat .related-card:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }
.hmv-cat .related-label { font-family: var(--ff-sans); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--c-gold-b); }
.hmv-cat .related-name { font-family: var(--ff-serif); font-size: 16px; font-weight: var(--fw-reg); color: var(--c-green); line-height: 1.3; }
.hmv-cat .related-desc { font-family: var(--ff-sans); font-size: 12px; font-weight: var(--fw-light); color: var(--c-green-mid); line-height: 1.5; }
.hmv-cat .related-cta-row { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 10px; font-family: var(--ff-sans); font-size: 9px; font-weight: var(--fw-semi); letter-spacing: .16em; text-transform: uppercase; color: var(--c-white); background: var(--c-green); border: 1px solid var(--c-green); padding: 10px 14px; min-height: 40px; transition: background .2s, border-color .2s; }
.hmv-cat .related-card:hover .related-cta-row { background: var(--c-gold); border-color: var(--c-gold); }
.hmv-cat .related-cta-row svg { flex-shrink: 0; transition: transform .2s; }
.hmv-cat .related-card:hover .related-cta-row svg { transform: translateX(3px); }

/* ── FAQ ── */
.hmv-cat .faq-section { background: #f5f9f7; padding: var(--sp-xl) 0; }
.hmv-cat .faq-item { border-bottom: 1px solid rgba(26,55,53,.1); }
.hmv-cat .faq-item:first-of-type { border-top: 1px solid rgba(26,55,53,.1); }
.hmv-cat .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--ff-sans); font-size: clamp(14px,1.2vw,15px); font-weight: var(--fw-reg); color: var(--c-green); line-height: 1.4; -webkit-tap-highlight-color: transparent; min-height: 48px; }
.hmv-cat .faq-item summary::-webkit-details-marker { display: none; }
.hmv-cat .faq-item summary:hover { color: var(--c-green-mid); }
.hmv-cat .faq-icon { width: 24px; min-width: 24px; height: 24px; border: 1px solid rgba(26,55,53,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .25s; background: #fff; }
.hmv-cat .faq-icon svg { width: 9px; height: 9px; stroke: var(--c-green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.hmv-cat details[open].faq-item .faq-icon { background: var(--c-green); border-color: var(--c-green); }
.hmv-cat details[open].faq-item .faq-icon svg { stroke: #fff; transform: rotate(45deg); }
.hmv-cat .faq-body { font-family: var(--ff-sans); font-size: 14px; font-weight: var(--fw-light); line-height: 1.9; color: var(--c-green-mid); padding: 0 0 20px; max-width: 640px; overflow-wrap: break-word; word-break: break-word; }

/* ── CTA ── */
.hmv-cat .join-section { background: var(--c-green); padding: var(--sp-xl) 0; text-align: center; position: relative; overflow: hidden; }
.hmv-cat .join-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(600px,90vw); height: 280px; background: radial-gradient(ellipse, rgba(180,155,101,.12) 0%, transparent 70%); pointer-events: none; }
.hmv-cat .join-section h2 { font-family: var(--ff-serif); font-size: clamp(28px,4.5vw,54px); font-weight: var(--fw-light); color: var(--c-gold-cream); margin-bottom: 14px; line-height: 1.08; }
.hmv-cat .join-section h2 em { font-style: italic; color: var(--c-gold-b); }
.hmv-cat .join-section p { font-family: var(--ff-sans); font-size: clamp(13px,1.2vw,14px); font-weight: var(--fw-light); color: rgba(218,205,179,.65); max-width: 460px; margin: 0 auto 36px; line-height: 1.85; }
.hmv-cat .join-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 479px) { .hmv-cat .join-btns { flex-direction: column; } .hmv-cat .join-btns .btn-p, .hmv-cat .join-btns .btn-g { width: 100%; justify-content: center; } }

/* ── E-E-A-T & DISCLAIMER ── */
.hmv-cat .eeat-bar { background: #f5f9f7; border-top: 1px solid var(--c-divider); border-bottom: 1px solid var(--c-divider); padding: 16px 0; }
.hmv-cat .eeat-inner { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.hmv-cat .eeat-reviewer { display: flex; align-items: center; gap: 11px; }
.hmv-cat .eeat-avatar { width: 32px; min-width: 32px; height: 32px; border: 1px solid var(--c-divider); background: #e6f4ed; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.hmv-cat .eeat-avatar svg { width: 14px; height: 14px; stroke: var(--c-green-mid); fill: none; stroke-width: 1.5; stroke-linecap: round; }
.hmv-cat .eeat-name { font-family: var(--ff-sans); font-size: 9px; font-weight: var(--fw-med); letter-spacing: .18em; text-transform: uppercase; color: var(--c-green-mid); margin-bottom: 2px; }
.hmv-cat .eeat-title { font-size: 12.5px; font-weight: var(--fw-reg); color: var(--c-green); line-height: 1.3; }
.hmv-cat .eeat-links { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hmv-cat .eeat-links a { font-family: var(--ff-sans); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gold); text-decoration: none; transition: opacity .2s; }
.hmv-cat .eeat-links a:hover { opacity: .7; }
.hmv-cat .disclaimer-bar { background: #f5f9f7; border-top: 1px solid var(--c-divider); padding: 24px 0; }
.hmv-cat .disclaimer-bar p { font-family: var(--ff-sans); font-size: 11px; font-weight: var(--fw-light); color: var(--c-green-mid); line-height: 1.9; max-width: 920px; }
.hmv-cat .disclaimer-bar strong { color: var(--c-green); font-weight: var(--fw-med); }

/* ── MEMBER-ONLY CALLOUT (shared layout, themed below) ── */
.hmv-cat .vit-callout {
  margin-top: 24px;
  padding: clamp(16px,3vw,22px) clamp(16px,3vw,28px);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hmv-cat .vit-callout-icon { flex-shrink: 0; color: var(--c-gold); }
.hmv-cat .vit-callout-text { flex: 1; min-width: 240px; }
.hmv-cat .vit-callout-eyebrow {
  font-family: var(--ff-sans);
  font-size: 9px;
  font-weight: var(--fw-semi);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.hmv-cat .vit-callout-body {
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: var(--fw-light);
  line-height: 1.7;
}
.hmv-cat .vit-callout-btn {
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: var(--fw-semi);
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 12px 22px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  transition: background .25s, color .25s, transform .2s;
}
.hmv-cat .vit-callout-btn:hover { transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════════
   LIGHT-THEME PRODUCT LISTING (.products-section--light)
   Mobile-first 1 → 2 → 4 column grid on a soft mint backdrop, white
   cards with subtle border + hover lift, dark-green text + gold
   accents. Standardised card height via flex; descriptions trimmed
   to a 3-line clamp so all cards stay visually uniform regardless
   of copy length.
   ═══════════════════════════════════════════════════════════════════ */

.hmv-cat .products-section--light {
  background: #f5f9f7;
  color: var(--c-green);
}
.hmv-cat .products-section--light .wrap { max-width: 1280px; }

/* Section header — alias the .vit-grid-* hooks to the shared
   .section-eyebrow / .section-title system (defined further up).
   Same eyebrow line, same title size, same sub style — keeps the
   Products header visually grouped with D3 Context, FAQ and Join. */
.hmv-cat .products-section--light .vit-grid-head {
  margin-bottom: clamp(24px,3vw,36px);
  max-width: 720px;
}
.hmv-cat .products-section--light .vit-grid-eyebrow {
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: var(--fw-semi);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hmv-cat .products-section--light .vit-grid-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--c-gold);
  flex-shrink: 0;
}
.hmv-cat .products-section--light .vit-grid-title {
  font-family: var(--ff-serif);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: var(--fw-light);
  color: var(--c-green);
  line-height: 1.1;
  letter-spacing: -.005em;
  margin-bottom: 14px;
}
.hmv-cat .products-section--light .vit-grid-title em {
  font-style: italic;
  color: var(--c-gold);
}
.hmv-cat .products-section--light .vit-grid-sub {
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: rgba(26,55,53,.68);
  max-width: 620px;
}

/* MOBILE-FIRST 1 → 2 → 4 GRID */
.hmv-cat .products-section--light .vit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (min-width: 560px) {
  .hmv-cat .products-section--light .vit-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (min-width: 980px) {
  .hmv-cat .products-section--light .vit-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }
}

/* CARD — uniform height via flex, white surface, gold-top accent */
.hmv-cat .products-section--light .prod-card {
  background: #ffffff;
  border: 1px solid rgba(26,55,53,.08);
  border-top: 2px solid transparent;
  box-shadow: 0 4px 18px rgba(26,55,53,.04);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, border-top-color .3s ease;
}
.hmv-cat .products-section--light .prod-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 42px rgba(26,55,53,.1);
  border-color: rgba(146,109,31,.32);
  border-top-color: var(--c-gold);
}
.hmv-cat .products-section--light .prod-card:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}

/* IMAGE — fixed aspect for uniform card heights */
.hmv-cat .products-section--light .pc-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
  background: linear-gradient(160deg, #eef2ec 0%, #d8ddd5 100%);
}
.hmv-cat .products-section--light .pc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.hmv-cat .products-section--light .prod-card:hover .pc-img img { transform: scale(1.04); }

.hmv-cat .products-section--light .pc-badge {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--ff-sans);
  font-size: 9.5px;
  font-weight: var(--fw-semi);
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 5px 10px;
  z-index: 2;
}
.hmv-cat .products-section--light .pc-badge.featured {
  background: var(--c-gold);
  color: #ffffff;
}

/* BODY — flex:1 so all cards push their foot to the bottom */
.hmv-cat .products-section--light .pc-body {
  flex: 1;
  padding: 18px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hmv-cat .products-section--light .pc-cat {
  font-family: var(--ff-sans);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 2px;
}
.hmv-cat .products-section--light .pc-name {
  font-family: var(--ff-serif);
  font-size: clamp(17px,1.5vw,20px);
  font-weight: var(--fw-reg);
  color: var(--c-green);
  line-height: 1.25;
  letter-spacing: -.005em;
  /* min-height keeps cards uniform when names wrap to different line counts */
  min-height: 2.5em;
  display: flex;
  align-items: flex-start;
}
.hmv-cat .products-section--light .pc-desc {
  font-family: var(--ff-sans);
  font-size: 12.5px;
  font-weight: var(--fw-light);
  line-height: 1.65;
  color: rgba(26,55,53,.65);
  /* line-clamp keeps every card the same height regardless of copy length */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* FOOTER */
.hmv-cat .products-section--light .pc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px 14px;
  border-top: 1px solid rgba(146,109,31,.18);
  margin-top: auto;
}
.hmv-cat .products-section--light .pc-member-tag {
  font-family: var(--ff-sans);
  font-size: 9.5px;
  font-weight: var(--fw-semi);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-gold);
}
/* Price — sans, semi-bold, dark green for legibility. The small "USD"
   prefix in lighter gold sits inline as a quiet currency marker so the
   number itself is the visual anchor. */
.hmv-cat .products-section--light .pc-price {
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: var(--fw-semi);
  color: var(--c-green);
  letter-spacing: -.005em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.hmv-cat .products-section--light .pc-price-cur {
  font-size: 10px;
  font-weight: var(--fw-semi);
  letter-spacing: .14em;
  color: var(--c-gold);
  text-transform: uppercase;
}
.hmv-cat .products-section--light .pc-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-sans);
  font-size: 9.5px;
  font-weight: var(--fw-semi);
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 8px 14px;
  min-height: 34px;
  background: var(--c-green);
  color: var(--c-gold-cream);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .25s, gap .25s;
  pointer-events: none;
}
.hmv-cat .products-section--light .prod-card:hover .pc-action {
  background: var(--c-gold);
  gap: 10px;
}

/* MEMBER-ONLY CALLOUT — bottom strip, light variant */
.hmv-cat .products-section--light .vit-callout {
  background: #ffffff;
  border: 1px solid rgba(146,109,31,.22);
  border-left: 3px solid var(--c-gold);
  box-shadow: 0 4px 18px rgba(26,55,53,.04);
}
.hmv-cat .products-section--light .vit-callout-eyebrow {
  color: var(--c-gold);
  opacity: 1;
}
.hmv-cat .products-section--light .vit-callout-body {
  color: rgba(26,55,53,.7);
}
.hmv-cat .products-section--light .vit-callout-btn {
  background: var(--c-gold);
  color: #ffffff;
  border-color: transparent;
}
.hmv-cat .products-section--light .vit-callout-btn:hover {
  background: var(--c-green);
}

/* ═══════════════════════════════════════════════════════════════════
   D3 CONTEXT SECTION (.d3-context)
   The vitamin-D explainer that frames the product grid. Moved above
   the products from its old position between Products and FAQ so the
   education leads the catalogue rather than trailing it.
   Replaces a previous inline-style block — class-based for theming.
   ═══════════════════════════════════════════════════════════════════ */
.hmv-cat .d3-context {
  background: #fff;
  padding: var(--sp-xl) 0;
}
/* .d3-context__eyebrow / __title hooks are redundant — the shared
   .section-eyebrow + .section-title pattern already sets gold eyebrow,
   green title and gold italic accent. Only the lede needs its own rule
   (tighter line-height + narrower max-width for the lat/UVB explainer). */
.hmv-cat .d3-context__lede {
  font-family: var(--ff-sans);
  font-size: clamp(13px, 1.2vw, 14px);
  font-weight: var(--fw-light);
  line-height: 1.9;
  color: var(--c-green-mid);
  max-width: 580px;
  margin-top: 8px;
}
.hmv-cat .d3-context__grid-wrap {
  border: 1px solid var(--c-divider);
  overflow: hidden;
  margin-top: 40px;
}
.hmv-cat .d3-cell--last { border-bottom: none; }

/* Highlight the two D3 SKU names inside the merged member-gate callout
   below the product grid. (.vit-callout-body sits on a white card, so a
   stronger ink colour reads as semantic emphasis without going gold.) */
.hmv-cat .products-section--light .vit-callout-body strong {
  color: var(--c-green);
  font-weight: var(--fw-semi);
}