/* Shared visual type scale. Loaded last on every page so component styles
   cannot silently introduce a different heading or paragraph size. */
:root {
  --type-h1: 5rem;
  --type-h2: 3.5rem;
  --type-h4: 1.5rem;
  --type-p: 1rem;
  --type-caption: .75rem;
}
html { font-size: 100%; }
/* Range cards sit on the shared red background, regardless of flavour tone. */
.range .range-card { color: var(--cream); }
body h1 {
  font-size: var(--type-h1) !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
}
body h2 {
  font-size: var(--type-h2) !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em !important;
}
body h3, body h4,
.footer-copy h2, .shop-card h2, .selection-row h2,
.selection-summary h2, .selection-empty h2, .legal-content h2,
.stockist-search h2 {
  font-size: var(--type-h4) !important;
  line-height: 1.2 !important;
  letter-spacing: -.015em !important;
}
body p, .panel-copy ul, .lineup-copy ul, .flavour-notes ul,
.product-lifestyle ul {
  font-size: var(--type-p) !important;
  line-height: 1.65 !important;
}
/* Metadata is consistently smaller than body copy, regardless of page. */
body .overline, body .small-copy, body .form-note, body .dialog-note,
body .lineup-note, body .shop-note, body .draft-notice,
.footer-copy .signup-note, .footer-bottom p, .product-fact-grid > p,
.shop-toolbar p, .stockist-search .empty-state, .shop-card p,
.hero-facts, .hero-facts span, .legal-links {
  font-size: var(--type-caption) !important;
  line-height: 1.6 !important;
}
body .overline { letter-spacing: .12em !important; }
/* Allow the shared scale to wrap naturally inside cards and narrow columns. */
/* Horizontal scrollers clip vertical overflow too. Reserve space for the
   bottle's upward hover tilt, without moving the cards or captions down. */
.range-track {
  padding-top: 48px;
  margin-top: -38px;
  /* Keep this a horizontal scroller: vertical gestures belong to the page. */
  overflow-y: hidden;
  overscroll-behavior: auto;
  touch-action: pan-x pan-y pinch-zoom;
}
.range-card h3, .shop-card h2, .selection-row h2,
.footer-copy h2 { overflow-wrap: anywhere; }
.range-card p { max-width: none; padding-right: 20px; }
.range-arrow { bottom: 25px; }
.shop-card h2 { min-height: 0; }
.shop-card { display: flex; flex-direction: column; }
.shop-card > .button { align-self: flex-start; margin-top: auto; }
.story-card { max-width: 660px; }
.footer-main { grid-template-columns: 1fr .8fr 1.6fr; }
.hero-facts {
  padding: 25px 6% 19px;
  border-top: 1px solid #fff9e924;
  border-bottom: 1px solid #fff9e914;
  letter-spacing: 0;
}
.hero-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 960px;
  margin: 0 auto 17px;
  padding: 0;
  list-style: none;
}
.hero-benefits li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 3px 18px;
  min-height: 32px;
}
.hero-benefits li + li { border-left: 1px solid #fff9e933; }
.hero-benefits svg {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--pink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-benefits strong { font-size: var(--type-p); font-weight: 600; line-height: 1.3; }
.hero-benefits sup { font-size: .65em; margin-left: 2px; }
.hero-benefits-note {
  display: block;
  max-width: 560px;
  margin: auto;
  color: #fff9e9ba;
  font-size: var(--type-caption);
  line-height: 1.6;
}
@media (max-width: 700px) {
  :root { --type-h1: 3.5rem; --type-h2: 2.5rem; --type-h4: 1.25rem; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .hero-facts { padding: 22px 5% 17px; }
  .hero-benefits { margin-bottom: 16px; }
  .hero-benefits li { flex-direction: column; justify-content: flex-start; gap: 9px; padding: 0 9px; }
  .hero-benefits strong { font-size: var(--type-caption); max-width: 105px; }
  .hero-benefits svg { width: 23px; height: 23px; }
  .hero-benefits-note { max-width: 330px; }
}
/* Flavour palettes follow the supplied bottle labels and drink colours. */
.tone-guava {
  --tone: #ed8cab;
  --pattern: radial-gradient(ellipse at 80% 30%, #f5aec455 0 16%, transparent 16.2%), radial-gradient(ellipse at 14% 82%, #dc608e33 0 22%, transparent 22.2%), radial-gradient(ellipse at 20% 10%, #f8bccf44 0 17%, transparent 17.2%);
}
.tone-apple {
  --tone: #d3d8a0;
  --pattern: url("/assets/nvoc-brand-backdrop.svg");
}
.tone-berry {
  --tone: #b72d24;
  --pattern: radial-gradient(circle at 20% 70%, #cc453333 0 19%, transparent 19.2%), radial-gradient(circle at 82% 20%, #93251f33 0 24%, transparent 24.2%), radial-gradient(circle at 12% 3%, #d2503e22 0 12%, transparent 12.2%);
}
.tone-mango {
  --tone: #f3cf25;
  --pattern: url("/assets/nvoc-brand-backdrop.svg");
}
.flavour-panel.tone-guava, .flavour-panel.tone-apple,
.detail-hero.tone-guava, .detail-hero.tone-apple,
.product-overview.tone-guava, .product-overview.tone-apple,
.shop-card.tone-guava, .shop-card.tone-apple { color: var(--ink); }

/* The fixed selection bar sizes its own status line. Without this the shared
   paragraph scale wins and the bar's height jumps as the message changes. */
.selection-bar .selection-status { font-size: 14px !important; line-height: 1.5 !important; }
@media (max-width: 700px) {
  .selection-bar .selection-status { font-size: 12px !important; line-height: 1.4 !important; }
}

/* Shared outline benefit icons, matching the hero bar. */
.intro-benefits > span { display:flex; flex:1; flex-direction:column; align-items:center; gap:10px; max-width:140px; text-align:center; }
.intro-benefits svg { display:block; width:25px; height:25px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.intro-benefits strong { font:inherit; }
@media(max-width:700px) { .intro-benefits { gap:14px; } .intro-benefits svg { width:23px; height:23px; } }