/* =====================================================================
   TENSONOL — Runviet Health 1.0
   Hand-written vanilla CSS. All design tokens on :root. BEM-ish rv- prefix.
   ===================================================================== */

/* ---------- Fonts ---------- */
/* Self-hosted @font-face declarations.
   The .woff2 files in assets/fonts/ are treated as placeholders for the
   handoff; the browser falls back to the next family in the stack. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-Black.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-BoldItalic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* PRIMARY GREEN (herbal / trust — dominant accent) */
  --color-primary:        #3a5a40;
  --color-primary-hover:  #2f4935;
  --color-primary-deep:   #243c2a;
  --color-primary-bright: #54b94a;
  --color-primary-tint:   #eef5ec;
  --color-primary-soft:   #dbe8dc;
  --color-primary-text:   #315337;
  --color-primary-glow:   rgba(58, 90, 64, 0.14);
  --color-primary-rgb:    58, 90, 64;

  /* CTA SUCCESS GREEN (reserved for primary conversion actions) */
  --color-cta:            #54b94a;
  --color-cta-hover:      #43963c;
  --color-cta-deep:       #3a5a40;
  --color-cta-bright:     #63c859;
  --color-cta-text:       #315337;
  --color-cta-glow:       rgba(var(--color-cta-rgb), 0.18);
  --color-cta-rgb:        84, 185, 74;

  /* PROMO WARM (small sale labels only) */
  --color-promo:          #c76728;
  --color-promo-tint:     #fff5ec;
  /* Readable ink for text sitting ON a warm promo surface. --color-promo itself is only
     ~3.4:1 on --color-gold-tint (fails AA below 18.66px); this is 8.4:1. Static on every
     GEO, like the rest of this group — promo styling must not drift per site. */
  --color-promo-deep:     #7c2d12;

  /* NAVY */
  --color-navy:           #121212;
  --color-navy-soft:      #203426;

  /* NEUTRALS */
  --color-heading:        #121212;
  /* Base fallback; the per-site block in rv_theme_lite_output_css_variables() overrides
     this with the real heading colour's channels so brand tints track each GEO. */
  --color-heading-rgb:    18, 18, 18;
  --color-text:           #121212;
  --color-text-secondary: #475569;
  --color-text-muted:     #64748b;
  --color-text-tertiary:  #94a3b8;
  --color-text-on-dark:   #f8fafc;
  --color-text-on-primary:#ffffff;

  /* SURFACES — white-dominant with faint green tints for rhythm */
  --color-bg:             #ffffff;
  --color-bg-alt:         #fdfdfd;
  --color-bg-warm:        #f9f8f4;
  --color-bg-soft:        #f3f6f8;
  --color-bg-dark:        #203426;

  /* BORDERS */
  --color-border:         #e5e7eb;
  --color-border-warm:    #dbe8dc;
  --color-border-on-dark: rgba(255, 255, 255, 0.12);

  /* ACCENTS */
  --color-gold:           #d4af37;
  --color-gold-soft:      #fbbf24;
  --color-gold-tint:      #fef3c7;

  /* SAGE GREEN (nature / success / verified — used sparingly) */
  --color-leaf:           #4a7a5c;
  --color-leaf-deep:      #2f5a3f;
  --color-leaf-bright:    #6ba47e;
  --color-leaf-tint:      #eef4ef;
  --color-leaf-soft:      #d4e0d8;

  --color-success:        #26a243;
  --color-danger:         #e11d48;

  --color-focus-ring:     var(--color-primary);

  /* Legacy aliases (consolidated from v1.5 override) */
  --rv-green:      var(--color-primary);
  --rv-green-deep: var(--color-primary-deep);

  /* Type — system font stack for all text (consolidated from v1.x overrides) */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-xs: 13px; /* Minimum 13px visible text (design lock v1.6.3) */
  --fs-sm: 14px;
  --fs-md: 15px;
  --fs-base: 16px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: clamp(22px, 2.4vw, 24px);
  --fs-3xl: clamp(20px, 3.2vw, 28px);
  --fs-4xl: clamp(24px, 4.2vw, 36px);
  --fs-5xl: clamp(30px, 5.6vw, 44px);
  --fs-6xl: clamp(36px, 7vw, 56px);

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.6;
  --lh-loose: 1.75;
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.06em;
  --ls-wider:  0.12em;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10:128px;

  /* !important kept: a dead mobile @media :root override (line ~3553) would
     otherwise win and change section spacing. Preserves current rendered result. */
  --section-py:     clamp(40px, 6vw, 80px) !important;
  --container-max:  1200px;
  --container-narrow: 920px;
  --container-px:   clamp(16px, 4vw, 32px);

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl:32px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(10, 25, 47, 0.04);
  --shadow-sm: 0 2px 6px rgba(10, 25, 47, 0.06), 0 1px 2px rgba(10, 25, 47, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(10, 25, 47, 0.12), 0 4px 8px -4px rgba(10, 25, 47, 0.06);
  --shadow-lg: 0 24px 48px -16px rgba(10, 25, 47, 0.18), 0 8px 16px -8px rgba(10, 25, 47, 0.08);
  --shadow-xl: 0 40px 80px -24px rgba(10, 25, 47, 0.24);
  --shadow-cta:       0 8px 20px rgba(var(--color-cta-rgb), 0.18);
  --shadow-cta-hover: 0 10px 24px rgba(var(--color-cta-rgb), 0.22);
  --shadow-card-hover: 0 16px 40px -16px rgba(10, 25, 47, 0.16), 0 4px 12px -4px rgba(10, 25, 47, 0.08);
  --shadow-header-scrolled: 0 4px 16px -4px rgba(10, 25, 47, 0.08);

  /* Motion */
  --d-instant: 100ms;
  --d-fast:    200ms;
  --d-base:    300ms;
  --d-slow:    480ms;
  --e-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --e-in-out:  cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout */
  --tap-target:  48px;
  --button-h:    56px;
  --button-h-lg: 64px;
  --button-h-sm: 44px;
  --input-h:     52px;
  --header-h:    72px;
  --header-h-m:  60px;
  --rv-announce-h: 36px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  /* !important on font/color/background: beats external WP core/plugin stylesheets
     (consolidated from the v1.x override layers — same effective result). */
  font-family: var(--font-body) !important;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text) !important;
  background: var(--color-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-bottom: 0;
}
body.has-sticky-cta { padding-bottom: 84px; }
@media (min-width: 1024px) {
  body.has-sticky-cta { padding-bottom: 0; }
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--color-primary-soft); color: var(--color-primary-text); }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-heading);
}
p { margin: 0; }
em { font-style: italic; color: var(--color-primary); }

/* ---------- Layout helpers ---------- */
.rv-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-px);
}
.rv-container--narrow { max-width: var(--container-narrow); }

.rv-section { padding: var(--section-py) 0; position: relative; }
.rv-section--white { background: var(--color-bg-alt); }
.rv-section--cream { background: var(--color-bg); }
.rv-section--warm  { background: var(--color-bg-warm); }
.rv-section--soft  { background: var(--color-bg-soft); }
.rv-section--dark  {
  background: var(--color-navy);
  color: var(--color-text-on-dark);
}
.rv-section--dark h1, .rv-section--dark h2, .rv-section--dark h3, .rv-section--dark h4 {
  color: var(--color-text-on-dark);
}

/* Section visibility / containment (perf) */
.rv-section[data-cv] {
  content-visibility: auto;
  contain-intrinsic-size: 0 800px;
}

/* ---------- Skip link ---------- */
.rv-skip {
  position: absolute;
  top: -100px; left: 0;
  background: var(--color-navy);
  color: #fff;
  padding: 12px 16px;
  z-index: 1000;
  font-weight: 700;
}
.rv-skip:focus { top: 0; }

/* ---------- Announcement bar (NEW Section 0) ---------- */
.rv-announce {
  background: var(--color-navy);
  color: var(--color-text-on-dark);
  padding: 9px 0;
  text-align: center;
}
@media (min-width: 768px) {
  .rv-announce--sticky-d { position: sticky; top: 0; z-index: 60; }
}
@media (max-width: 767px) {
  .rv-announce--sticky-m { position: sticky; top: 0; z-index: 60; }
}
.rv-announce__text {
  font: 700 var(--fs-xs)/1.4 var(--font-body);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}
.rv-announce__sep { margin: 0 10px; opacity: 0.45; }
@media (max-width: 600px) {
  .rv-announce__text { font-size: 11px; letter-spacing: 0.08em; }
  .rv-announce__sep { margin: 0 6px; }
}

/* ---------- Header ---------- */
.rv-header {
  position: relative;
  z-index: 50;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-fast), box-shadow var(--d-fast), background var(--d-fast);
}
/* Sticky is opt-in per breakpoint. When the announcement bar is also sticky on
   the same breakpoint, the header stacks below it (top = announce height). */
@media (min-width: 768px) {
  .rv-header--sticky-d { position: sticky; top: 0; }
  .rv-announce--sticky-d ~ .rv-header--sticky-d { top: var(--rv-announce-h, 36px); }
}
@media (max-width: 767px) {
  .rv-header--sticky-m { position: sticky; top: 0; }
  .rv-announce--sticky-m ~ .rv-header--sticky-m { top: var(--rv-announce-h, 36px); }
}
.rv-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-header-scrolled);
}
.rv-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.rv-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-width: 0;
}
.rv-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
}
.rv-logo__mark { color: var(--color-primary); width: 28px; height: 28px; }
.rv-logo__image {
  display: block;
  width: auto;
  max-width: min(220px, 48vw);
  max-height: 48px;
  object-fit: contain;
}
.rv-logo__word {
  font: 700 var(--fs-lg)/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-navy);
}
.rv-header__meta {
  display: none;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  padding-left: var(--space-5);
  border-left: 1px solid var(--color-border);
  height: 22px;
}
.rv-header__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rv-header__meta-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--color-text-tertiary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px;
  color: var(--color-text-muted);
}
.rv-header__meta-bullet {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-text-tertiary);
}
.rv-header__cta { display: none; }
@media (min-width: 768px) {
  .rv-header__meta { display: inline-flex; }
  .rv-header__cta  { display: inline-flex; }
}
@media (max-width: 767px) {
  .rv-header { height: var(--header-h-m); }
  .rv-logo__word { font-size: var(--fs-base); }
  .rv-logo__mark { width: 24px; height: 24px; }
  .rv-logo__image { max-height: 38px; max-width: 62vw; }
}

/* ---------- Buttons ---------- */
.rv-btn-primary {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--button-h-lg);
  padding: 14px 32px;
  background: linear-gradient(180deg, var(--color-cta-bright) 0%, var(--color-cta) 55%, var(--color-cta-deep) 100%);
  color: var(--color-text-on-primary);
  font: 700 var(--fs-lg)/1 var(--font-body);
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-cta);
  cursor: pointer;
  transition: transform var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out),
              filter var(--d-fast) var(--e-out);
  overflow: hidden;
  text-align: center;
}
.rv-btn-primary::before {
  content: '';
  position: absolute;
  inset: 1px 4% auto 4%;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.32), transparent);
  border-radius: var(--radius-pill);
  pointer-events: none;
  z-index: -1;
}
.rv-btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.28) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 600ms var(--e-out);
  pointer-events: none;
}
.rv-btn-primary:hover {
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-2px);
  filter: brightness(1.03);
}
.rv-btn-primary:hover::after { transform: translateX(100%); }
.rv-btn-primary:active { transform: translateY(0); }
.rv-btn-primary:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 4px;
}
.rv-btn-primary__icon-trailing {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-cta);
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px;
  transition: transform var(--d-fast) var(--e-out);
}
.rv-btn-primary__icon-trailing svg { width: 16px; height: 16px; }
.rv-btn-primary:hover .rv-btn-primary__icon-trailing { transform: translateX(4px); }
.rv-btn-primary.is-loading { pointer-events: none; opacity: 0.85; }
.rv-btn-primary.is-loading .rv-btn-primary__label::after {
  content: '';
  display: inline-block;
  width: 1em; height: 1em;
  margin-left: 8px;
  vertical-align: -2px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: rv-spin 700ms linear infinite;
}
@keyframes rv-spin { to { transform: rotate(360deg); } }
.rv-btn-primary--full { width: 100%; }
.rv-btn-primary--sm {
  min-height: var(--button-h-sm);
  padding: 8px 18px;
  font-size: var(--fs-md);
}
.rv-btn-primary--sm .rv-btn-primary__icon-trailing { width: 24px; height: 24px; }
.rv-btn-primary--sm .rv-btn-primary__icon-trailing svg { width: 14px; height: 14px; }

/* ---------- Eyebrow ---------- */
.rv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary-text);
  font: 700 var(--fs-sm)/1 var(--font-body);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.rv-eyebrow__leaf { color: var(--color-primary); font-size: 14px; }

/* ---------- Section heading helpers ---------- */
.rv-h2 {
  font: 700 var(--fs-5xl)/1.05 var(--font-display);
  letter-spacing: var(--ls-tight);
  color: var(--color-heading);
}
.rv-h2--center { text-align: center; }
.rv-section-head {
  max-width: 760px;
  margin: 0 auto var(--space-7);
  text-align: center;
}
.rv-section-head--left { margin-inline: 0; text-align: left; }
.rv-lede {
  font-size: var(--fs-lg);
  color: var(--color-text-secondary);
  line-height: var(--lh-base);
  margin-top: var(--space-4);
}

/* ---------- Card base ---------- */
.rv-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out);
  contain: layout style paint;
}
.rv-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

/* ---------- Icon tint circle ---------- */
.rv-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
}
.rv-icon-circle svg { width: 28px; height: 28px; }
.rv-icon-circle--sm { width: 40px; height: 40px; }
.rv-icon-circle--sm svg { width: 20px; height: 20px; }
.rv-icon-circle--lg { width: 72px; height: 72px; }
.rv-icon-circle--lg svg { width: 36px; height: 36px; }
.rv-icon-circle--outline {
  background: transparent;
  border: 1.5px solid var(--color-primary);
}
.rv-icon-circle--dark {
  background: rgba(255,255,255,0.08);
  color: var(--color-primary-bright);
}

/* ---------- Reveal on scroll ---------- */
.rv-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 720ms var(--e-out), transform 720ms var(--e-out);
  will-change: opacity, transform;
}
.rv-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- Hero ---------- */
.rv-hero {
  padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 8vw, 112px);
  position: relative;
  overflow: hidden;
}
.rv-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  .rv-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.rv-hero__content { max-width: 620px; }
.rv-hero__title {
  font: 700 var(--fs-5xl)/1.04 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--color-navy);
  margin-bottom: var(--space-5);
  overflow-wrap: break-word;
  word-break: break-word;
}
.rv-hero__title em {
  color: var(--color-primary);
  font-style: italic;
}
.rv-hero__desc {
  font-size: var(--fs-xl);
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin-bottom: var(--space-6);
}
.rv-hero__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-7);
  display: grid;
  gap: var(--space-3);
}
.rv-hero__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px !important; /* consolidated from redesign layer (= --fs-base) */
  color: var(--color-text);
  font-weight: 500;
}
.rv-hero__bullets svg {
  width: 22px; height: 22px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 1px;
}
.rv-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}
.rv-hero__cta-note {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  max-width: 260px;
}

/* Hero product stage */
.rv-hero__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 540px;
  margin: 0 auto;
}
.rv-hero__halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
    var(--color-bg-soft) 0%,
    var(--color-bg-warm) 55%,
    transparent 80%);
}
.rv-hero__halo::after {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px dashed var(--color-border-warm);
}
.rv-hero__bottle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rv-hero__bottle img {
  width: 72%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(10, 25, 47, 0.25));
}
.rv-hero__badge {
  position: absolute;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--color-primary-bright), var(--color-primary-deep));
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.2);
  transform: rotate(-12deg);
  top: 4%;
  right: 2%;
}
.rv-hero__badge-save { font-size: 10px; opacity: 0.9; }
.rv-hero__badge-num  { font: 800 26px/1 var(--font-display); margin: 4px 0; }
.rv-hero__badge-today{ font-size: 10px; opacity: 0.9; }
.rv-hero__floater {
  position: absolute;
  background: #fff;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-sm);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rv-hero__floater svg { width: 16px; height: 16px; color: var(--color-success); }
.rv-hero__floater--tl { top: 10%; left: -4%; }
.rv-hero__floater--bl { bottom: 8%; left: 2%; color: var(--color-primary-text); }
.rv-hero__floater--bl svg { color: var(--color-primary); }
@media (max-width: 600px) {
  /* hero title/desc font-size here was dead (the ≤767 WELLNESS overrides win) */
  .rv-hero__badge { width: 80px; height: 80px; }
  .rv-hero__floater--tl { left: 0; }
}

/* ---------- Trust strip (4 COD badges) ---------- */
.rv-trust {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: clamp(28px, 3vw, 40px) 0;
}
.rv-trust__head {
  text-align: center;
  margin-bottom: var(--space-6);
}
.rv-trust__title {
  font: 700 var(--fs-2xl)/1.2 var(--font-display);
  color: var(--color-navy);
}
.rv-trust__sub {
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.rv-trust__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 20px);
}
@media (min-width: 768px) {
  .rv-trust__grid { grid-template-columns: repeat(4, 1fr); }
}
.rv-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 12px 10px;
}
.rv-trust__item h4 {
  font: 700 var(--fs-base)/1.3 var(--font-body);
  color: var(--color-navy);
}
.rv-trust__item p {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  max-width: 200px;
}

/* ---------- Pain section (Sec 4) ---------- */
.rv-pain__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 900px) {
  .rv-pain__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.rv-pain__lifestyle {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.rv-pain__lifestyle img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.rv-pain__lifestyle-tag {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-5);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  padding: 14px 20px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: var(--color-navy);
  font-size: var(--fs-base);
  box-shadow: var(--shadow-md);
}
.rv-pain__lifestyle-tag svg { width: 22px; height: 22px; color: var(--color-primary); }
.rv-pain__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 540px) {
  .rv-pain__cards { grid-template-columns: 1fr 1fr; }
}
.rv-pain__card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.rv-pain__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.rv-pain__card-num {
  font: 800 var(--fs-2xl)/1 var(--font-display);
  color: var(--color-primary);
}
.rv-pain__card h3 {
  font: 700 var(--fs-lg)/1.25 var(--font-body);
  color: var(--color-navy);
}
.rv-pain__card p {
  color: var(--color-text-secondary);
  font-size: var(--fs-md);
  line-height: 1.55;
}
.rv-pain__cta-block {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--color-primary-tint);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-lg);
}
.rv-pain__cta-block h3 {
  font: 700 var(--fs-2xl)/1.2 var(--font-display);
  color: var(--color-navy);
  margin-bottom: 10px;
}
.rv-pain__cta-block p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
  font-size: var(--fs-md);
}

/* ---------- Pain vs Desire (Sec 5) ---------- */
.rv-compare {
  background: var(--color-bg-alt);
}
.rv-compare__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-7);
}
@media (min-width: 768px) {
  .rv-compare__columns { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}
.rv-compare__col {
  position: relative;
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.rv-compare__col--before {
  background: var(--color-bg-warm);
  border-color: var(--color-border-warm);
}
.rv-compare__col--after {
  background: linear-gradient(180deg, var(--color-primary-tint), #fff);
  border-color: var(--color-primary-soft);
}
.rv-compare__col h3 {
  font: 700 var(--fs-3xl)/1.15 var(--font-display);
  margin-bottom: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.rv-compare__col--before h3 { color: var(--color-text-secondary); }
.rv-compare__col--after  h3 { color: var(--color-primary-text); }
.rv-compare__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.rv-compare__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-text);
}
.rv-compare__bullet {
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-top: 1px;
}
.rv-compare__bullet svg { width: 14px; height: 14px; }
.rv-compare__col--before .rv-compare__bullet {
  background: #fce4d6;
  color: var(--color-primary-deep);
}
.rv-compare__col--after  .rv-compare__bullet {
  background: var(--color-primary);
  color: #fff;
}
.rv-compare__cta {
  margin-top: var(--space-7);
  text-align: center;
}
.rv-compare__cta-note {
  margin-top: 12px;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ---------- How It Works (Sec 6) ---------- */
.rv-how__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 900px) {
  .rv-how__grid { grid-template-columns: 1.1fr 0.9fr; }
}
.rv-how__steps { display: grid; gap: var(--space-5); }
.rv-how__step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-5);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.rv-how__step:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.rv-how__step-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font: 700 var(--fs-xl)/1 var(--font-display);
  display: inline-flex; align-items: center; justify-content: center;
  align-self: start;
}
.rv-how__step h3 {
  font: 700 var(--fs-xl)/1.25 var(--font-body);
  color: var(--color-navy);
  margin-bottom: 6px;
}
.rv-how__step p { color: var(--color-text-secondary); font-size: var(--fs-md); }
.rv-how__bottle {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-2xl);
  background: radial-gradient(circle at 50% 50%, var(--color-primary-tint), var(--color-bg-warm) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}
.rv-how__bottle img { width: 65%; }

/* ---------- USP grid (Sec 7) ---------- */
.rv-usp__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 600px) { .rv-usp__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){ .rv-usp__grid { grid-template-columns: repeat(4, 1fr); } }
.rv-usp__card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.rv-usp__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.rv-usp__card h3 {
  font: 700 var(--fs-lg)/1.25 var(--font-body);
  color: var(--color-navy);
}
.rv-usp__card p { color: var(--color-text-secondary); font-size: var(--fs-md); }

/* ---------- Promo band (Sec 8) ---------- */
.rv-promo {
  background: linear-gradient(135deg, var(--color-navy) 0%, #11244b 100%);
  color: var(--color-text-on-dark);
  overflow: hidden;
  position: relative;
}
.rv-promo::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto auto;
  width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(var(--color-primary-rgb),0.22), transparent 60%);
  pointer-events: none;
}
.rv-promo__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
  position: relative;
}
@media (min-width: 900px) {
  .rv-promo__grid { grid-template-columns: 0.9fr 1.1fr; }
}
.rv-promo__visual {
  position: relative;
  aspect-ratio: 1;
  max-width: 440px;
  margin: 0 auto;
}
.rv-promo__visual::before {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,61,0.35), transparent 60%);
}
.rv-promo__visual img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.4));
}
.rv-promo__seal {
  position: absolute;
  top: 4%;
  left: -2%;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--color-primary-bright), var(--color-primary-deep));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: var(--shadow-lg);
  transform: rotate(-10deg);
}
.rv-promo__seal span:first-child { font-size: 11px; }
.rv-promo__seal strong { font: 800 30px/1 var(--font-display); margin: 4px 0; }
.rv-promo__seal span:last-child { font-size: 11px; }
.rv-promo__eyebrow {
  color: var(--color-primary-bright);
  font: 700 var(--fs-sm)/1 var(--font-body);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.rv-promo h2 {
  font: 700 var(--fs-4xl)/1.1 var(--font-display);
  color: #fff;
  margin-bottom: var(--space-5);
}
.rv-promo__price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: var(--space-6);
  max-width: 100%;
}
.rv-promo__price-old {
  font-size: var(--fs-lg);
  text-decoration: line-through;
  color: var(--color-text-tertiary);
}
.rv-promo__price-new {
  font: 800 clamp(36px, 4vw, 52px)/1 var(--font-display);
  color: var(--color-primary-bright);
  white-space: nowrap;
}
.rv-promo__price-currency {
  font-size: var(--fs-xl);
  color: var(--color-primary-bright);
  font-weight: 600;
}
.rv-promo__points {
  list-style: none;
  padding: 0; margin: 0 0 var(--space-6);
  display: grid;
  gap: 12px;
}
.rv-promo__points li {
  display: flex; align-items: flex-start; gap: 12px;
  color: rgba(248,250,252,0.88);
  font-size: var(--fs-base);
}
.rv-promo__points svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--color-primary-bright);
  margin-top: 2px;
}
.rv-promo__note {
  margin-top: 12px;
  font-size: var(--fs-sm);
  color: var(--color-text-tertiary);
}

/* ---------- Ingredients (Sec 9) ---------- */
.rv-ing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 600px) { .rv-ing__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .rv-ing__grid { grid-template-columns: 1fr 1fr 1fr; } }
.rv-ing__card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.rv-ing__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.rv-ing__media {
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--color-bg-soft), var(--color-primary-tint));
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.rv-ing__media svg {
  width: 56px; height: 56px;
  color: var(--color-primary);
  opacity: 0.85;
}
.rv-ing__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rv-ing__media--image {
  background: var(--color-bg-soft);
}
.rv-ing__media--image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 17, 31, 0) 45%, rgba(10, 17, 31, 0.18) 100%);
  pointer-events: none;
}
.rv-ing__media-label {
  position: absolute;
  bottom: 10px; left: 14px;
  z-index: 1;
  font: 600 11px/1 var(--font-body);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-primary-text);
  background: rgba(255,255,255,0.85);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
}
.rv-ing__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rv-ing__body h3 {
  font: 700 var(--fs-xl)/1.2 var(--font-display);
  color: var(--color-navy);
}
.rv-ing__body p {
  font-size: var(--fs-md);
  color: var(--color-text-secondary);
}
/* .rv-ing__footer block removed in v4.1 — see ingredients.php. */

/* ---------- Mid CTA band ---------- */
.rv-midcta {
  background: linear-gradient(135deg, var(--color-primary-tint), var(--color-bg-warm));
  border-top: 1px solid var(--color-border-warm);
  border-bottom: 1px solid var(--color-border-warm);
  text-align: center;
  padding: var(--space-8) 0;
}
.rv-midcta h3 {
  font: 700 var(--fs-3xl)/1.15 var(--font-display);
  color: var(--color-navy);
  margin-bottom: 6px;
}
.rv-midcta p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}
.rv-midcta__chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: var(--space-5);
}
.rv-midcta__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--color-navy);
  font-weight: 600;
}
.rv-midcta__chip svg { width: 16px; height: 16px; color: var(--color-primary); }

/* ---------- Usage routine (Sec 10) ---------- */
.rv-usage__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .rv-usage__grid { grid-template-columns: repeat(3, 1fr); }
}
.rv-usage__step {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  position: relative;
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.rv-usage__step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.rv-usage__num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 var(--fs-xl)/1 var(--font-display);
  margin-bottom: var(--space-4);
}
.rv-usage__step h3 {
  font: 700 var(--fs-xl)/1.25 var(--font-body);
  color: var(--color-navy);
  margin-bottom: 8px;
}
.rv-usage__step p { color: var(--color-text-secondary); font-size: var(--fs-md); }
.rv-usage__warning {
  margin-top: var(--space-6);
  background: var(--color-gold-tint);
  border: 1px solid #f0d97a;
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: var(--fs-md);
  color: #6b4f00;
}
.rv-usage__warning svg {
  width: 22px; height: 22px;
  color: #b08400;
  flex-shrink: 0;
  margin-top: 2px;
}
/* Target-audience block ("Đối tượng sử dụng") — soft green panel above the
   gold caution box. Renders only when usage_audience_items has data. */
.rv-usage__audience {
  margin-top: var(--space-6);
  padding: clamp(20px, 3vw, 28px);
  background: var(--color-primary-tint);
  border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-lg);
}
.rv-usage__audience-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font: 700 var(--fs-lg)/1.25 var(--font-body);
  color: var(--color-primary-text);
}
.rv-usage__audience-icon {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  flex-shrink: 0;
}
.rv-usage__audience-intro {
  margin: 0 0 12px;
  color: var(--color-text-secondary);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.rv-usage__audience-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.rv-usage__audience-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-text);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.rv-usage__audience-list svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------- Expert (Sec 11) ---------- */
.rv-expert__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 900px) {
  .rv-expert__grid { grid-template-columns: 1.05fr 0.95fr; }
}
.rv-expert__cards { display: grid; gap: var(--space-4); }
.rv-expert__card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-4);
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.rv-expert__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.rv-expert__card h3 {
  font: 700 var(--fs-lg)/1.25 var(--font-body);
  color: var(--color-navy);
  margin-bottom: 4px;
}
.rv-expert__card p { color: var(--color-text-secondary); font-size: var(--fs-md); }
.rv-expert__panel {
  background: linear-gradient(180deg, var(--color-bg-warm), var(--color-primary-tint));
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: grid;
  gap: var(--space-5);
}
.rv-expert__person {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.rv-expert__avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-deep));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 700 22px var(--font-display);
}
.rv-expert__person h3 {
  font: 700 var(--fs-xl)/1.2 var(--font-body);
  color: var(--color-navy);
  margin-bottom: 2px;
}
.rv-expert__role {
  color: var(--color-primary-text);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.rv-expert__cred {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: 4px;
}
.rv-expert__cred svg { width: 16px; height: 16px; color: var(--color-gold); }
.rv-expert__quote {
  position: relative;
  background: rgba(255,255,255,0.7);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  font: italic 500 var(--fs-lg)/1.5 var(--font-display);
  color: var(--color-navy);
  border-left: 4px solid var(--color-primary);
}
.rv-expert__product {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-4);
  align-items: center;
  background: rgba(255,255,255,0.7);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.rv-expert__product-img {
  width: 96px; height: 96px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--color-bg-soft), var(--color-primary-tint));
  display: flex; align-items: center; justify-content: center;
}
.rv-expert__product-img img { width: 75%; }
.rv-expert__product-name {
  font: 700 14px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-navy);
}
.rv-expert__product-sub {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin: 4px 0 10px;
}
.rv-expert__product-bullets {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 4px;
}
.rv-expert__product-bullets li {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm);
  color: var(--color-text);
  font-weight: 600;
}
.rv-expert__product-bullets svg { width: 14px; height: 14px; color: var(--color-success); }

/* ---------- Before/After Timeline (NEW Sec 12) ---------- */
.rv-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  position: relative;
}
.rv-timeline::before {
  content: '';
  position: absolute;
  top: 56px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: repeating-linear-gradient(90deg,
    var(--color-primary) 0 8px,
    transparent 8px 16px);
  z-index: 0;
}
.rv-timeline__card {
  position: relative;
  z-index: 1;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.rv-timeline__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.rv-timeline__week {
  font: 800 var(--fs-3xl)/1 var(--font-display);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.rv-timeline__title {
  font: 700 var(--fs-lg)/1.3 var(--font-body);
  color: var(--color-navy);
  margin-bottom: var(--space-3);
}
.rv-timeline__quote {
  font: italic 400 var(--fs-md)/1.55 var(--font-body);
  color: var(--color-text-secondary);
}
.rv-timeline__footnote {
  margin-top: var(--space-6);
  text-align: center;
  font: italic var(--fs-sm)/1.5 var(--font-body);
  color: var(--color-text-muted);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .rv-timeline { grid-template-columns: 1fr 1fr; }
  .rv-timeline::before { display: none; }
}
@media (max-width: 540px) {
  .rv-timeline { grid-template-columns: 1fr; }
}

/* ---------- Reviews (Sec 13) ---------- */
.rv-reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .rv-reviews__grid { grid-template-columns: repeat(3, 1fr); }
}
.rv-review {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.rv-review:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.rv-review__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rv-review__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-deep));
  color: #fff;
  display: inline-flex;
  align-items: center; justify-content: center;
  font: 700 var(--fs-base)/1 var(--font-body);
}
.rv-review__name {
  font: 700 var(--fs-base)/1.2 var(--font-body);
  color: var(--color-navy);
}
.rv-review__meta {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.rv-review__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--color-gold-soft);
}
.rv-review__stars svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.rv-review__quote {
  font: 400 var(--fs-base)/1.6 var(--font-body);
  color: var(--color-text);
  font-style: italic;
}
.rv-review__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--color-success);
  font-weight: 700;
  margin-top: auto;
}
.rv-review__badge svg { width: 16px; height: 16px; }
.rv-reviews__note {
  text-align: center;
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* ---------- COD steps (Sec 14) ---------- */
.rv-cod {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.rv-cod__pills {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
@media (min-width: 600px) { .rv-cod__pills { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){ .rv-cod__pills { grid-template-columns: repeat(4, 1fr); } }
.rv-cod__pill {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  position: relative;
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.rv-cod__pill:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.rv-cod__step-num {
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  background: var(--color-navy);
  color: #fff;
  font: 700 14px/1 var(--font-body);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.1em;
}
.rv-cod__pill h3 {
  font: 700 var(--fs-lg)/1.2 var(--font-body);
  color: var(--color-navy);
  margin: var(--space-4) 0 8px;
}
.rv-cod__pill p {
  color: var(--color-text-secondary);
  font-size: var(--fs-md);
}
.rv-cod__badges {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .rv-cod__badges { grid-template-columns: repeat(4, 1fr); }
}
.rv-cod__badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-navy);
}
.rv-cod__badge svg { width: 22px; height: 22px; color: var(--color-primary); flex-shrink: 0; }

/* ---------- Order section (Sec 15) ---------- */
.rv-order {
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-warm) 100%);
}
.rv-order__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 900px) {
  .rv-order__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
.rv-order__summary {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-md);
  position: relative;
}
.rv-order__summary-eyebrow {
  color: var(--color-primary-text);
  font: 700 var(--fs-sm)/1 var(--font-body);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.rv-order__summary h2 {
  font: 700 var(--fs-4xl)/1.1 var(--font-display);
  color: var(--color-navy);
  margin-bottom: 6px;
}
.rv-order__supply {
  color: var(--color-primary-text);
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: 14px;
}
.rv-order__summary-desc {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}
.rv-order__stage {
  position: relative;
  aspect-ratio: 1;
  /* `margin: 0 auto` cancels the parent column's align-items:stretch, so without an explicit
     width the stage shrank to its content (~480px) while the thumb rail filled its 560px —
     which is why the strip always looked wider than the photo. width:100% makes it fill up
     to the cap instead. Shared cap with .rv-order__thumbrail so the two can never drift;
     override --rv-gallery-max on the column to resize both together. */
  width: 100%;
  max-width: var(--rv-gallery-max, 560px);
  margin: 0 auto var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
  /* v4.1: full-bleed marketplace stage. The old "premium frame" (1px border + white→soft
     gradient + inset highlight + 90%-size image) only worked for cut-out product PNGs on
     white; product art is now edge-to-edge 1:1 lifestyle photography, so the 5% inset let
     the stage's white gradient show as a hard frame around the photo. Nothing to frame —
     the image IS the surface, exactly as Shopee/Lazada present it. */
  border-radius: 18px;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.rv-order__stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: opacity;
}
.rv-order__seal {
  position: absolute;
  top: 4%;
  right: 0%;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--color-cta-bright), var(--color-cta-deep));
  color: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: var(--shadow-md);
  transform: rotate(-10deg);
}
.rv-order__seal span:first-child { font-size: 10px; }
.rv-order__seal strong { font: 800 26px/1 var(--font-display); margin: 4px 0; }
.rv-order__seal span:last-child { font-size: 10px; }

/* Product gallery carousel / thumbnail rail */
.rv-order__thumbs {
  --rv-gallery-count: 4;
  --rv-gallery-gap: 10px;
  --rv-gallery-gap-total: 30px;
  --rv-gallery-thumb-min: 64px;
  --rv-gallery-thumb-max: 92px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--rv-gallery-gap);
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
  scroll-padding-inline: 2px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--color-primary-rgb), 0.42) rgba(var(--color-primary-rgb), 0.08);
  -webkit-overflow-scrolling: touch;
}
.rv-order__thumbs::-webkit-scrollbar {
  height: 8px;
}
.rv-order__thumbs::-webkit-scrollbar-track {
  border-radius: var(--radius-pill);
  background: rgba(var(--color-primary-rgb), 0.08);
}
.rv-order__thumbs::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: rgba(var(--color-primary-rgb), 0.38);
}
.rv-gallery--single .rv-order__thumbs {
  display: none;
}
.rv-order__thumb {
  flex: 0 0 clamp(
    var(--rv-gallery-thumb-min),
    calc((100% - var(--rv-gallery-gap-total)) / var(--rv-gallery-count)),
    var(--rv-gallery-thumb-max)
  );
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-bg-soft), var(--color-primary-tint));
  border: 1px solid var(--color-border-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color var(--d-fast), box-shadow var(--d-fast), transform var(--d-fast);
}
.rv-order__thumb:hover {
  border-color: rgba(var(--color-primary-rgb), 0.58);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb),0.08);
  transform: translateY(-1px);
}
.rv-order__thumb.is-active,
.rv-order__thumb[aria-current="true"],
.rv-order__thumb[aria-pressed="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb),0.12);
}
.rv-order__thumb:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}
.rv-order__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.rv-order__thumb svg { width: 28px; height: 28px; color: var(--color-primary); opacity: 0.8; }
/* Order form card — consolidated container (was redefined in 3 layers). */
.rv-order__form-card {
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
  --rv-card-pad: clamp(18px, 4vw, 32px);
  background: #ffffff;
  border: 1px solid rgba(var(--color-primary-rgb), 0.16);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(var(--color-primary-rgb), 0.10);
  padding: var(--rv-card-pad);
}
.rv-order__form-head {
  text-align: center;
  margin-bottom: 20px;
}
.rv-order__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 15px;
  margin: 0 auto 16px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--color-leaf-tint), rgba(255,255,255,0.78));
  border: 1px solid var(--color-leaf-soft);
  color: var(--color-leaf-deep);
  font: 800 var(--fs-sm)/1 var(--font-body);
  box-shadow: 0 10px 26px rgba(47,90,63,0.09);
}
.rv-order__badge svg {
  width: 18px;
  height: 18px;
}
.rv-order__form-head h3 {
  font: 800 clamp(30px, 2.4vw, 36px)/1.02 var(--font-display);
  color: var(--color-navy);
  margin-bottom: 10px;
  letter-spacing: 0;
  text-wrap: balance;
}
.rv-order__form-head p {
  color: var(--color-text-secondary);
  font: 600 16px/1.45 var(--font-body);
  max-width: 39ch;
  margin: 0 auto;
  text-wrap: pretty;
}
.rv-order__notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 16px;
  margin: 0 0 20px;
  background: rgba(238,244,239,0.72);
  border: 1px solid rgba(74,122,92,0.36);
  border-radius: var(--radius-md);
  color: var(--color-leaf-deep);
  font: 700 var(--fs-sm)/1.3 var(--font-body);
  text-align: center;
  text-wrap: balance;
}
.rv-order__notice-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-leaf-deep);
  box-shadow: 0 8px 18px rgba(47,90,63,0.1);
  flex-shrink: 0;
}
.rv-order__notice-icon svg {
  width: 18px;
  height: 18px;
}
.rv-order__price-block {
  display: grid;
  grid-template-columns: minmax(96px, 0.72fr) minmax(0, 1.78fr) minmax(72px, 0.56fr);
  gap: 12px;
  align-items: center;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255,250,245,0.96), rgba(255,244,236,0.76));
  border: 1px solid rgba(212,175,55,0.38);
  border-radius: 22px;
  margin-bottom: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
.rv-order__price-cell {
  min-height: 96px;
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  text-align: center;
  background: rgba(255,255,255,0.7);
  border-radius: 18px;
}
.rv-order__price-cell--sale {
  position: relative;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 10px 26px rgba(179,71,0,0.1), inset 0 0 0 1px rgba(var(--color-primary-rgb),0.12);
}
.rv-order__price-cell--regular .rv-order__price-val {
  font: 800 clamp(14px, 15cqw, 20px)/1 var(--font-body);
  text-decoration: line-through;
  color: var(--color-text-muted);
}
.rv-order__price-cell--sale .rv-order__price-val {
  font: 800 clamp(28px, 16cqw, 40px)/0.92 var(--font-display);
  color: var(--color-primary);
  font-variant-numeric: lining-nums tabular-nums;
}
.rv-order__price-val {
  width: 100%;
  max-width: calc(100% - 2px);
  min-width: 0;
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.08em;
  white-space: nowrap;
  overflow: visible;
}
.rv-order__price-currency {
  flex: 0 0 auto;
  font-size: 0.44em;
  line-height: 1;
}
.rv-order__price-amount {
  flex: 0 1 auto;
  min-width: auto;
  max-width: none;
  overflow: visible;
  line-height: 0.95;
}
.rv-order__price-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 800;
  line-height: 1.2;
}
.rv-order__price-badge {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1;
  width: clamp(74px, 6vw, 88px);
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,0.28), transparent 30%),
    linear-gradient(145deg, #6f9878 0%, var(--color-leaf-deep) 58%, #31583f 100%);
  color: #fff9ed;
  border-radius: 50%;
  min-height: 0;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(255,255,255,0.34);
  font-weight: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  justify-self: center;
  text-align: center;
  text-shadow: 0 1px 1px rgba(25,55,38,0.22);
  box-shadow: 0 14px 26px rgba(47,90,63,0.28), inset 0 1px 0 rgba(255,255,255,0.28);
}
.rv-order__price-badge::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255,249,237,0.46);
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}
.rv-order__price-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 115%, rgba(0,0,0,0.18), transparent 52%);
  pointer-events: none;
  z-index: -1;
}
.rv-order__price-badge strong {
  max-width: 100%;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  font: 800 clamp(24px, 2.35vw, 30px)/0.94 var(--font-display);
  letter-spacing: 0;
}
.rv-order__price-badge span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}
.rv-order__promo-note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--color-text-secondary);
  font: 600 var(--fs-sm)/1.45 var(--font-body);
  text-align: center;
}
.rv-order__form-privacy {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  line-height: 1.45;
}
.rv-order__form-privacy svg { width: 14px; height: 14px; color: var(--color-success); flex-shrink: 0; }
.rv-order__form-privacy strong { color: var(--color-success); }
.rv-order__form-compliance {
  margin-top: var(--space-4);
  text-align: center;
}
.rv-order__form-policy-links {
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.rv-order__form-policy-links a {
  color: var(--color-navy);
  text-decoration: underline;
  transition: color var(--d-fast);
}
.rv-order__form-policy-links a:hover {
  color: var(--color-primary);
}
.rv-order__policy-sep {
  margin-inline: 8px;
  color: var(--color-text-muted);
}
.rv-order__form-disclaimer {
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: var(--space-3) 0 0;
  text-align: justify;
  text-align-last: center;
}

/* ---------- Form fields ---------- */
.rv-field { display: block; margin-bottom: var(--space-4); }
.rv-field__wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--input-h);
  background: var(--color-bg-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.rv-field__icon {
  width: 20px; height: 20px;
  margin-inline: 16px 12px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: color var(--d-fast);
}
.rv-field__input {
  flex: 1;
  height: 100%;
  padding: 18px 16px 8px 0;
  border: 0;
  background: transparent;
  font: 600 16px var(--font-body);
  color: var(--color-text);
  outline: none;
  width: 100%;
  min-width: 0;
}
.rv-field__input::placeholder { color: transparent; }
.rv-field__label {
  position: absolute;
  left: 48px; top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font: 500 16px var(--font-body);
  pointer-events: none;
  background: var(--color-bg-alt);
  padding: 0 4px;
  transition: top var(--d-fast) var(--e-out),
              font-size var(--d-fast),
              color var(--d-fast),
              transform var(--d-fast);
}
.rv-field__input:focus + .rv-field__label,
.rv-field__input:not(:placeholder-shown) + .rv-field__label {
  top: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
}
.rv-field__wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.1);
}
.rv-field__wrap:focus-within .rv-field__icon { color: var(--color-primary); }
.rv-field__wrap--textarea {
  height: auto;
  align-items: flex-start;
  padding-top: 4px;
}
.rv-field__wrap--textarea .rv-field__icon { margin-top: 16px; }
.rv-field__wrap--textarea .rv-field__input {
  height: 90px;
  padding-top: 22px;
  resize: none;
}
.rv-field__wrap--textarea .rv-field__label {
  top: 18px;
  transform: none;
}
.rv-field__wrap--textarea .rv-field__input:focus + .rv-field__label,
.rv-field__wrap--textarea .rv-field__input:not(:placeholder-shown) + .rv-field__label {
  top: 0;
}
.rv-field--error .rv-field__wrap {
  border-color: var(--color-danger);
}
.rv-field__hint {
  display: block;
  margin-top: .35rem;
  font-size: .8125rem;
  line-height: 1.35;
  opacity: .7;
}
.rv-field--error .rv-field__hint { opacity: .55; }

.rv-field__error {
  display: none;
  margin: 6px 0 0 16px;
  font-size: var(--fs-sm);
  color: var(--color-danger);
  font-weight: 600;
}
.rv-field--error .rv-field__error { display: block; }
/* .rv-order__form-card .rv-field* consolidated into the single source in the
   WELLNESS NEST section below. */
.rv-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

/* ---------- FAQ (Sec 16) ---------- */
.rv-faq {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-3);
}
.rv-faq__item {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
.rv-faq__item.is-open {
  border-color: var(--color-primary-soft);
  box-shadow: var(--shadow-sm);
}
.rv-faq__button {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 20px 24px;
  font: 700 var(--fs-lg)/1.4 var(--font-body);
  color: var(--color-navy);
  min-height: 64px;
}
.rv-faq__button:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: -3px;
}
.rv-faq__chev {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform var(--d-base) var(--e-out), background var(--d-base);
}
.rv-faq__chev svg { width: 18px; height: 18px; }
.rv-faq__item.is-open .rv-faq__chev {
  transform: rotate(180deg);
  background: var(--color-primary);
  color: #fff;
}
.rv-faq__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--d-slow) var(--e-out);
}
.rv-faq__panel-inner {
  padding: 0 24px 20px;
  color: var(--color-text-secondary);
  font-size: var(--fs-base);
  line-height: 1.6;
}

/* ---------- Final-CTA band ---------- */
.rv-final-cta {
  background: var(--color-navy);
  color: var(--color-text-on-dark);
  text-align: center;
  padding: var(--space-9) 0;
}
.rv-final-cta h2 {
  color: #fff;
  font: 700 var(--fs-4xl)/1.1 var(--font-display);
  margin-bottom: var(--space-4);
}
.rv-final-cta p {
  color: rgba(248,250,252,0.78);
  margin-bottom: var(--space-6);
  font-size: var(--fs-lg);
}

/* ---------- Footer (EXPAND Sec 17) ---------- */
.rv-footer {
  position: relative;
  background: var(--color-navy);
  color: var(--color-text-on-dark);
  padding: var(--space-9) 0 var(--space-6);
}
.rv-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-cta), transparent);
}
.rv-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 880px) {
  .rv-footer__top { grid-template-columns: 1.4fr 1fr; gap: var(--space-9); }
}
.rv-footer__brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  margin-bottom: var(--space-4);
}
.rv-footer__brand-image {
  display: block;
  width: auto;
  max-width: 220px;
  max-height: 54px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.rv-footer__brand-logo svg { width: 30px; height: 30px; color: #fff; }
.rv-footer__brand-logo span {
  font: 700 var(--fs-xl)/1 var(--font-body);
  letter-spacing: 0.14em;
  color: #fff;
}
.rv-footer__tagline {
  font: 600 var(--fs-lg)/1.4 var(--font-body);
  color: #fff;
  margin-bottom: 12px;
}
.rv-footer__brand-statement {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-md);
  line-height: 1.65;
  max-width: 460px;
}
.rv-footer__contact-group {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
@media (min-width: 880px) {
  .rv-footer__contact-group { padding-left: var(--space-6); }
}
.rv-footer__contact {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rv-footer__contact-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-cta);
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rv-footer__contact-icon svg { width: 20px; height: 20px; }
.rv-footer__contact-label {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.rv-footer__contact-val {
  display: inline-block;
  font-size: var(--fs-base);
  color: #fff;
  font-weight: 600;
  margin-top: 3px;
  transition: color var(--d-fast);
}
a.rv-footer__contact-val:hover { color: var(--color-cta); }
.rv-footer__contact-val--text { font-weight: 500; line-height: 1.5; }
.rv-footer__trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-6) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 600px) {
  .rv-footer__trust { grid-template-columns: repeat(3, 1fr); }
}
.rv-footer__seal {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  background: var(--color-bg, #ffffff);
  color: var(--color-navy);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  transition: transform var(--d-fast), box-shadow var(--d-fast);
}
.rv-footer__seal:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}
.rv-footer__seal-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(var(--color-cta-rgb), 0.16);
  color: var(--color-cta);
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rv-footer__seal-icon svg { width: 20px; height: 20px; }
.rv-footer__seal-text {
  font-size: var(--fs-sm);
  font-weight: 700;
}
.rv-footer__bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-top: var(--space-6);
  align-items: center;
}
@media (min-width: 880px) {
  .rv-footer__bottom { grid-template-columns: 1fr auto; }
}
.rv-footer__copy {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.6);
}
.rv-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
@media (min-width: 880px) {
  .rv-footer__links { justify-content: flex-end; }
}
.rv-footer__links--policy {
  grid-column: 1 / -1;
  justify-content: flex-start;
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.rv-footer__links a {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
  transition: color var(--d-fast);
}
.rv-footer__links a:hover { color: #fff; }
.rv-footer__links--policy a { color: rgba(255, 255, 255, 0.6); font-weight: 500; }
.rv-footer__links--policy a:hover { color: #fff; }
.rv-footer__disclaimer {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.55);
  font: italic var(--fs-xs)/1.6 var(--font-body);
  margin-top: var(--space-3);
  max-width: 980px;
}

/* ---------- Sticky mobile CTA ---------- */
.rv-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--color-border);
  transform: translateY(120%);
  transition: transform var(--d-base) var(--e-out);
}
.rv-sticky-cta.is-visible { transform: translateY(0); }
.rv-sticky-cta .rv-btn-primary { width: 100%; }
@media (min-width: 1024px) {
  .rv-sticky-cta { display: none; }
}

/* ---------- Image lazy fade ---------- */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 250ms var(--e-out);
}
img[loading="lazy"].is-loaded,
img[loading="lazy"][data-loaded="true"] {
  opacity: 1;
}

/* ---------- Placeholder visuals (until real assets land) ---------- */
.rv-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    135deg,
    var(--color-bg-soft) 0,
    var(--color-bg-soft) 14px,
    var(--color-primary-tint) 14px,
    var(--color-primary-tint) 28px
  );
  color: var(--color-primary-text);
  font: 600 12px/1.3 ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 12px;
}
.rv-bottle-art {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =====================================================================
   v2 PREMIUM POLISH — additive
   ===================================================================== */

/* ---------- Keyframes ---------- */
@keyframes rv-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}
@keyframes rv-pulse-glow {
  0%,100% { box-shadow: 0 8px 30px rgba(var(--color-cta-rgb), 0.30), inset 0 1px 0 rgba(255,255,255,0.25); }
  50%     { box-shadow: 0 14px 44px rgba(var(--color-cta-rgb), 0.55), inset 0 1px 0 rgba(255,255,255,0.30); }
}
@keyframes rv-pulse-dot {
  0%   { transform: scale(0.92); opacity: 0.95; }
  100% { transform: scale(1.8);  opacity: 0; }
}
@keyframes rv-shine-x {
  0%   { transform: translateX(-160%); }
  60%,100% { transform: translateX(160%); }
}
@keyframes rv-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes rv-toast-in {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes rv-toast-out {
  from { transform: translateY(0);     opacity: 1; }
  to   { transform: translateY(40%);   opacity: 0; }
}
@keyframes rv-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Scroll progress bar ---------- */
.rv-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  z-index: 100;
  pointer-events: none;
}
.rv-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary-bright), var(--color-primary));
  transition: width 100ms linear;
}

/* ---------- Announcement bar marquee variant ---------- */
.rv-announce--marquee { padding: 0; overflow: hidden; }
.rv-announce--marquee .rv-container { padding: 0; max-width: none; }
.rv-marquee {
  display: flex;
  align-items: center;
  height: 36px;
  overflow: hidden;
  position: relative;
}
.rv-marquee::before,
.rv-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 1;
  pointer-events: none;
}
.rv-marquee::before { left: 0;  background: linear-gradient(90deg, var(--color-navy), transparent); }
.rv-marquee::after  { right: 0; background: linear-gradient(270deg, var(--color-navy), transparent); }
.rv-marquee__track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  animation: rv-marquee var(--rv-marq-dur, 24s) linear infinite;
}
/* Fixed trailing margin = even spacing; items are duplicated enough (in PHP) to
   fill > 2x the viewport, so the -50% loop tiles seamlessly with no gap. */
.rv-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: var(--rv-marq-gap, 44px);
  font: 700 var(--fs-xs)/1 var(--font-body);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  flex-shrink: 0;
}
.rv-marquee__item svg {
  width: 14px; height: 14px;
  /* CTA colour (not accent): the bar background is the primary colour, and some
     sites set accent = primary, which would make an accent-coloured icon vanish. */
  color: var(--color-cta);
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .rv-marquee__track { animation: none; }
}

/* ---------- Authority strip (NEW) ---------- */
/* Product detail strip — premium spec sheet: centered eyebrow + even card grid
   (replaces the old ragged space-between row that misaligned on desktop). */
.rv-authority {
  background: linear-gradient(180deg, var(--color-bg-warm), var(--color-bg-alt));
  border-top: 1px solid var(--color-border-warm);
  border-bottom: 1px solid var(--color-border);
  padding: clamp(28px, 4vw, 46px) 0;
}
.rv-authority__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vw, 28px);
}
.rv-authority__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font: 700 13px/1 var(--font-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary-text);
  text-align: center;
}
.rv-authority__label::before,
.rv-authority__label::after {
  content: '';
  flex: 1 1 0;
  max-width: 84px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border-warm));
}
.rv-authority__label::after {
  background: linear-gradient(90deg, var(--color-border-warm), transparent);
}
.rv-authority__marks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) {
  .rv-authority__marks { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (min-width: 900px) {
  .rv-authority__marks { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
.rv-authority__mark {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--color-border-warm);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(10, 25, 47, 0.03);
  font: 600 14px/1.35 var(--font-body);
  color: var(--color-navy);
  text-align: left;
  transition: border-color var(--d-fast), box-shadow var(--d-fast), transform var(--d-fast);
}
.rv-authority__mark:hover {
  border-color: var(--color-primary-soft);
  box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.08);
  transform: translateY(-1px);
}
.rv-authority__mark svg {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 9px;
  background: var(--color-primary-tint);
  border-radius: 50%;
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb), 0.14);
}

/* ---------- Hero v2: rating widget + price preview + scarcity ---------- */
.rv-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
}
.rv-hero__rating-stars {
  display: inline-flex;
  gap: 1px;
  color: var(--color-gold-soft);
}
.rv-hero__rating-stars svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.rv-hero__rating-num { font-weight: 800; color: var(--color-navy); }
.rv-hero__rating-count { color: var(--color-text-muted); font-weight: 600; }

.rv-hero__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin: var(--space-5) 0 var(--space-5);
}
.rv-hero__price-old {
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-weight: 600;
}
.rv-hero__price-new {
  font: 700 clamp(34px, 4.4vw, 48px)/1 var(--font-display);
  color: var(--color-primary);
}
.rv-hero__price-suffix {
  font: 600 var(--fs-md)/1 var(--font-body);
  color: var(--color-text-secondary);
}
.rv-hero__price-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-pill);
  font: 800 11px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rv-hero__scarcity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(var(--color-primary-rgb),0.08);
  border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-primary-text);
  margin-top: var(--space-5);
}
.rv-hero__scarcity-dot {
  position: relative;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}
.rv-hero__scarcity-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: rv-pulse-dot 1.8s ease-out infinite;
}
.rv-hero__scarcity strong { color: var(--color-primary); font-weight: 800; }

.rv-hero__bottle img {
  animation: rv-float 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .rv-hero__bottle img { animation: none; }
}
.rv-hero__badge { animation: rv-pulse-glow 3.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .rv-hero__badge { animation: none; }
}

/* Strong CTA aura */
.rv-btn-primary--aura::before,
.rv-btn-primary--aura::after {
  z-index: -1;
}
.rv-btn-primary--aura {
  position: relative;
}
.rv-btn-primary--aura > .rv-aura {
  position: absolute;
  inset: -6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255,122,61,0.7), rgba(179,71,0,0.7));
  filter: blur(16px);
  opacity: 0.55;
  z-index: -2;
  pointer-events: none;
}

/* ---------- Aggregate rating header (Reviews) ---------- */
.rv-rating-aggregate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin: 0 auto var(--space-6);
  max-width: 460px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.rv-rating-aggregate__top {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.rv-rating-aggregate__num {
  font: 800 var(--fs-4xl)/1 var(--font-display);
  color: var(--color-navy);
}
.rv-rating-aggregate__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--color-gold-soft);
}
.rv-rating-aggregate__stars svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.rv-rating-aggregate__count {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  font-weight: 600;
}
.rv-rating-aggregate__count strong { color: var(--color-navy); font-weight: 800; }

/* ---------- Compare arrow divider ---------- */
.rv-compare__arrow {
  display: none;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  z-index: 2;
}
.rv-compare__arrow svg { width: 24px; height: 24px; }
.rv-compare__columns { position: relative; }
@media (min-width: 768px) {
  .rv-compare__arrow { display: inline-flex; }
}
.rv-compare__col--before {
  filter: saturate(0.6);
  opacity: 0.92;
}

/* ---------- Section title kicker ---------- */
.rv-kicker {
  position: relative;
  display: inline-block;
  font: 700 var(--fs-sm)/1 var(--font-body);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-primary-text);
  margin-bottom: 14px;
  padding-left: 36px;
}
.rv-kicker::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 28px; height: 1px;
  background: var(--color-primary);
}

/* ---------- Numbered tile (USP variant) ---------- */
.rv-usp__num {
  font: 800 var(--fs-3xl)/1 var(--font-display);
  color: var(--color-primary-soft);
  margin-bottom: 4px;
}
.rv-usp__card { position: relative; overflow: hidden; }
.rv-usp__card::before {
  content: '';
  position: absolute;
  inset: auto -40% -60% auto;
  width: 220px; height: 220px;
  background: radial-gradient(circle, var(--color-primary-tint), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-base) var(--e-out);
}
.rv-usp__card:hover::before { opacity: 1; }

/* ---------- How-it-works connector line ---------- */
.rv-how__steps { position: relative; }
.rv-how__steps::before {
  content: '';
  position: absolute;
  left: 27px; top: 24px; bottom: 24px;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--color-primary-soft) 0 6px, transparent 6px 12px);
  z-index: 0;
}
.rv-how__step { position: relative; z-index: 1; }

/* ---------- Ingredients v2: bigger media tile ---------- */
.rv-ing__media--rich {
  aspect-ratio: 4/3;
  position: relative;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), transparent 50%),
    linear-gradient(135deg, var(--color-bg-soft), var(--color-primary-tint));
}
.rv-ing__media--rich::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg,
    transparent 0 14px,
    rgba(var(--color-primary-rgb),0.05) 14px 15px);
  pointer-events: none;
}
.rv-ing__media svg { width: 64px; height: 64px; }

/* ---------- Expert: floating signature ---------- */
.rv-expert__panel { position: relative; }
.rv-expert__signature {
  position: absolute;
  top: var(--space-5); right: var(--space-5);
  font: italic 700 var(--fs-md)/1 var(--font-display);
  color: var(--color-primary);
  opacity: 0.4;
  transform: rotate(-6deg);
  pointer-events: none;
}

/* ---------- Timeline v2: subtle dot ---------- */
.rv-timeline__card { position: relative; padding-top: calc(var(--space-6) + 8px); }
.rv-timeline__card::before {
  content: '';
  position: absolute;
  top: 47px; left: 50%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 4px solid var(--color-bg);
  z-index: 3;
}
@media (max-width: 900px) {
  .rv-timeline__card::before { display: none; }
}

/* ---------- Final-CTA: editorial composition ---------- */
.rv-final-cta { position: relative; overflow: hidden; }
.rv-final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(var(--color-primary-rgb),0.18), transparent 50%),
    radial-gradient(circle at 80% 60%, rgba(var(--color-primary-rgb),0.10), transparent 50%);
  pointer-events: none;
}
.rv-final-cta__inner {
  position: relative;
  z-index: 1;
}
.rv-final-cta__chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: var(--space-6);
}
.rv-final-cta__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  color: rgba(255,255,255,0.85);
  font-weight: 700;
}
.rv-final-cta__chip svg { width: 18px; height: 18px; color: var(--color-primary-bright); }
.rv-final-cta__chip-sep { color: rgba(255,255,255,0.35); }

/* ---------- Order form polish ---------- */
.rv-order__stock {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-leaf-tint);
  border: 1px dashed var(--color-leaf-soft);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0 var(--space-5);
  font-size: var(--fs-sm);
  color: var(--color-leaf-deep);
  font-weight: 600;
}
.rv-order__stock-dot {
  position: relative;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-leaf-bright);
  flex-shrink: 0;
}
.rv-order__stock-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--color-leaf-bright);
  animation: rv-pulse-dot 1.8s ease-out infinite;
}
.rv-order__stock strong { font-weight: 800; color: var(--color-leaf-deep); }

/* Order trust row — SINGLE consolidated source. Clean 2×2 cards at every width.
   (The original layered 4-column gold-gradient design was fully overridden by
   the v1.x redesign's !important rules; only the effective result is kept.)
   !important retained: it overrides the generic/legacy layered trust rules. */
.rv-order__mini-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  background: none;
  border: none;
}
.rv-order__trust-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 12px 14px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  font: 700 13px/1.18 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-navy);
  text-align: left;
}
.rv-order__trust-item::before,
.rv-order__trust-item::after { display: none; }
.rv-order__trust-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-tint);
  box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb), 0.18);
  color: var(--color-primary);
}
.rv-order__trust-icon svg {
  width: 18px;
  height: 18px;
  color: var(--color-leaf-deep);
  flex-shrink: 0;
}
.rv-order__trust-label {
  display: block;
  max-width: none;
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: normal;
  font: 700 13px/1.2 var(--font-body);
  color: var(--color-navy);
}
.rv-order-form .rv-btn-primary--full {
  min-height: 66px;
  margin-top: var(--space-3);
  font: 800 var(--fs-lg)/1.1 var(--font-body);
  box-shadow: 0 18px 38px rgba(var(--color-cta-rgb),0.26), 0 4px 0 rgba(var(--color-cta-rgb),0.2);
}

/* ---------- Recently-ordered toast ---------- */
.rv-toast {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 55;
  max-width: 320px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 12px 14px 12px 12px;
  display: none;
  align-items: center;
  gap: 12px;
  animation: rv-toast-in 360ms var(--e-out);
}
.rv-toast.is-leaving { animation: rv-toast-out 240ms var(--e-out) forwards; }
.rv-toast.is-visible { display: flex; }
.rv-toast__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-deep));
  color: #fff;
  display: inline-flex;
  align-items: center; justify-content: center;
  font: 700 13px var(--font-body);
  flex-shrink: 0;
}
.rv-toast__body { font-size: var(--fs-sm); line-height: 1.4; color: var(--color-text); }
.rv-toast__body strong { color: var(--color-navy); font-weight: 700; }
.rv-toast__body small {
  display: block;
  color: var(--color-text-muted);
  font-size: 11px;
  margin-top: 2px;
}
.rv-toast__close {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  color: var(--color-text-tertiary);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 16px;
  line-height: 1;
}
.rv-toast__close:hover { color: var(--color-text); }
@media (max-width: 767px) {
  .rv-toast { display: none !important; } /* don't compete with sticky CTA on mobile */
}

/* ---------- Stagger reveal helper ---------- */
.rv-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--e-out), transform 600ms var(--e-out);
}
.rv-stagger.is-revealed > * {
  opacity: 1;
  transform: none;
}
.rv-stagger.is-revealed > *:nth-child(1) { transition-delay: 60ms; }
.rv-stagger.is-revealed > *:nth-child(2) { transition-delay: 140ms; }
.rv-stagger.is-revealed > *:nth-child(3) { transition-delay: 220ms; }
.rv-stagger.is-revealed > *:nth-child(4) { transition-delay: 300ms; }
.rv-stagger.is-revealed > *:nth-child(5) { transition-delay: 380ms; }
.rv-stagger.is-revealed > *:nth-child(6) { transition-delay: 460ms; }

/* ---------- Section dividers ---------- */
.rv-divider-wave {
  position: relative;
  height: 80px;
  margin-top: -80px;
  pointer-events: none;
  z-index: 1;
}

/* ---------- Reduced motion (extended) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .rv-reveal { opacity: 1; transform: none; }
  .rv-stagger > * { opacity: 1; transform: none; }
}

/* =====================================================================
   v3 — Sage green accents + Pain/COD redesign + mobile polish
   ===================================================================== */

/* ---------- Eyebrow leaf icon (SVG, controlled color) ---------- */
.rv-eyebrow__icon {
  width: 14px;
  height: 14px;
  color: var(--color-leaf);
  flex-shrink: 0;
}

/* ---------- Hero bullets → green check ---------- */
.rv-hero__bullets svg {
  color: var(--color-leaf);
}

/* ---------- Compare: green-tinted "After" column ---------- */
.rv-compare__col--after {
  background: linear-gradient(180deg, var(--color-leaf-tint), #fff);
  border-color: var(--color-leaf-soft);
}
.rv-compare__col--after h3 { color: var(--color-leaf-deep); }
.rv-compare__col--after .rv-compare__bullet {
  background: var(--color-leaf);
  color: #fff;
}
.rv-compare__col--after h3 .rv-icon-circle {
  background: var(--color-leaf) !important;
  color: #fff !important;
}

/* ---------- Authority strip: select icons green ---------- */
.rv-authority__mark--leaf svg { color: var(--color-leaf); }

/* ---------- Verified Customer badge: deeper sage ---------- */
.rv-review__badge { color: var(--color-leaf-deep); }

/* ---------- Ingredient botanical cards: green media tint ---------- */
/* Icon-only ingredient cards: compact branded header instead of a big empty panel. */
.rv-ing__media--leaf {
  aspect-ratio: auto;
  min-height: 0;
  flex-direction: column;
  gap: 14px;
  padding: 28px 20px 22px;
  background: linear-gradient(180deg, var(--color-primary-tint), var(--color-bg-alt));
  border-bottom: 1px solid var(--color-border);
}
.rv-ing__media--leaf svg {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
  opacity: 1;
  background: #fff;
  padding: 15px;
  box-sizing: content-box;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.16),
              inset 0 0 0 1px rgba(var(--color-primary-rgb), 0.10);
}
.rv-ing__media--leaf .rv-ing__media-label {
  position: static;
  padding: 0;
  background: transparent;
  color: var(--color-primary-text);
}

/* ---------- Hero rating widget: warmer ---------- */
.rv-hero__rating {
  background: rgba(255,255,255,0.78);
}

/* ---------- USP: subtle green tint on Balanced Wellness card icon ---------- */
.rv-icon-circle--leaf {
  background: var(--color-leaf-tint);
  color: var(--color-leaf-deep);
}

/* =====================================================================
   PAIN SECTION REDESIGN (v3)
   Layout: centered header → split (image | 2×2 cards) → full-width CTA band
   ===================================================================== */
.rv-pain__header {
  max-width: 780px;
  margin: 0 auto var(--space-7);
  text-align: center;
}
.rv-pain__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
@media (min-width: 900px) {
  .rv-pain__split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); }
}
.rv-pain__visual {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  min-height: 420px;
}
.rv-pain__visual img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.rv-pain__visual-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-7) var(--space-5) var(--space-5);
  background: linear-gradient(180deg, transparent, rgba(15,29,59,0.55) 70%, rgba(15,29,59,0.78));
  color: #fff;
}
.rv-pain__visual-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  font: 700 var(--fs-sm)/1 var(--font-body);
  color: var(--color-navy);
}
.rv-pain__visual-tag svg { width: 16px; height: 16px; color: var(--color-leaf-deep); }
.rv-pain__visual-quote {
  display: block;
  margin-top: 12px;
  font: italic 600 var(--fs-lg)/1.35 var(--font-display);
  color: #fff;
  max-width: 320px;
}

.rv-pain__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-self: stretch;
}
@media (min-width: 540px) {
  .rv-pain__cards { grid-template-columns: 1fr 1fr; }
}
.rv-pain__card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
  position: relative;
  overflow: hidden;
}
.rv-pain__card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--color-primary-bright), var(--color-primary-deep));
  opacity: 0;
  transition: opacity var(--d-base) var(--e-out);
}
.rv-pain__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-primary-soft);
}
.rv-pain__card:hover::before { opacity: 1; }
.rv-pain__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rv-pain__card-num {
  font: 800 22px/1 var(--font-display);
  color: var(--color-primary);
  flex-shrink: 0;
}
.rv-pain__card-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.rv-pain__card-icon svg { width: 18px; height: 18px; }
.rv-pain__card h3 {
  font: 700 var(--fs-lg)/1.25 var(--font-body);
  color: var(--color-navy);
}
.rv-pain__card p {
  color: var(--color-text-secondary);
  font-size: var(--fs-md);
  line-height: 1.55;
}

/* Full-width sage CTA band */
.rv-pain__cta-band {
  margin-top: var(--space-7);
  background:
    radial-gradient(circle at 90% 50%, rgba(74,122,92,0.18), transparent 60%),
    linear-gradient(135deg, var(--color-leaf-deep) 0%, var(--color-leaf) 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.rv-pain__cta-band::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto auto;
  width: 320px; height: 320px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.18);
  pointer-events: none;
}
.rv-pain__cta-band::after {
  content: '';
  position: absolute;
  inset: -50% -20% auto auto;
  width: 420px; height: 420px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.10);
  pointer-events: none;
}
@media (min-width: 768px) {
  .rv-pain__cta-band { grid-template-columns: 1.4fr auto; gap: var(--space-7); }
}
.rv-pain__cta-text { position: relative; z-index: 1; }
.rv-pain__cta-text h3 {
  font: 700 var(--fs-3xl)/1.15 var(--font-display);
  color: #fff;
  margin-bottom: 8px;
}
.rv-pain__cta-text h3 em {
  color: #fff;
  font-style: italic;
  border-bottom: 2px solid rgba(255,255,255,0.4);
  padding-bottom: 2px;
}
.rv-pain__cta-text p {
  color: rgba(255,255,255,0.82);
  font-size: var(--fs-md);
  max-width: 520px;
}
.rv-pain__cta-action {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .rv-pain__cta-action { align-items: flex-end; }
}
.rv-pain__cta-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.78);
}
.rv-pain__cta-note svg { width: 14px; height: 14px; color: var(--color-leaf-bright); }

/* =====================================================================
   COD SECTION REDESIGN (v3)
   Adds dashed orange connector between the 4 pills + pill-shaped trust row
   ===================================================================== */
.rv-cod__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  position: relative;
  margin-top: var(--space-7);
}
@media (min-width: 600px) { .rv-cod__steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .rv-cod__steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
  .rv-cod__steps::before {
    content: '';
    position: absolute;
    top: 122px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: repeating-linear-gradient(90deg,
      var(--color-primary) 0 8px, transparent 8px 16px);
    z-index: 0;
  }
}
.rv-cod__step {
  position: relative;
  z-index: 1;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rv-cod__step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.rv-cod__step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 12px/1 var(--font-body);
  letter-spacing: 0.12em;
  color: #fff;
  background: linear-gradient(180deg, var(--color-primary-bright), var(--color-primary-deep));
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-5);
  box-shadow: 0 4px 12px -2px rgba(var(--color-primary-rgb), 0.35);
}
.rv-cod__step-icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, #fff, transparent 70%),
    var(--color-primary-tint);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--color-primary-soft);
  margin-bottom: var(--space-4);
}
.rv-cod__step-icon svg { width: 30px; height: 30px; }
.rv-cod__step h3 {
  font: 700 var(--fs-lg)/1.2 var(--font-body);
  color: var(--color-navy);
  margin-bottom: 8px;
}
.rv-cod__step p {
  color: var(--color-text-secondary);
  font-size: var(--fs-md);
  line-height: 1.55;
}

/* Pill-shaped trust badges below */
.rv-cod__chips {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.rv-cod__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font: 700 var(--fs-sm)/1 var(--font-body);
  color: var(--color-navy);
  box-shadow: var(--shadow-xs);
  transition: transform var(--d-fast) var(--e-out), border-color var(--d-fast);
}
.rv-cod__chip:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary-soft);
}
.rv-cod__chip svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.rv-cod__chip--orange svg { color: var(--color-primary); }
.rv-cod__chip--green  svg { color: var(--color-leaf-deep); }

/* Deprecate old COD classes (still styled, but new markup uses rv-cod__steps) */
.rv-cod__pills,
.rv-cod__pill,
.rv-cod__badges,
.rv-cod__badge { /* Reserved COD badge alias. */ }

/* =====================================================================
   MOBILE POLISH (v3)
   ===================================================================== */
@media (max-width: 767px) {
  :root {
    --section-py: clamp(56px, 12vw, 88px);
  }
  /* Tighter hero on mobile */
  .rv-hero { padding: 28px 0 56px; }
  /* (dead .rv-hero__title / __bullets li overrides removed; the ≤767 WELLNESS
     title clamp + base 16px bullets win) */
  .rv-hero__desc { font-size: var(--fs-base); }
  .rv-hero__rating { font-size: 12px; padding: 6px 12px; }
  .rv-hero__rating-stars svg { width: 14px; height: 14px; }
  .rv-hero__price-row { gap: 10px; }
  .rv-hero__price-new { font-size: 38px; }
  .rv-hero__cta-row { width: 100%; }
  .rv-hero__cta-row .rv-btn-primary { width: 100%; }
  .rv-hero__cta-note { max-width: none; text-align: center; }
  .rv-hero__scarcity { width: 100%; font-size: var(--fs-sm); }

  /* Trust strip */
  /* Trust-strip mobile — premium single panel with hairline-divided rows.
     Deliberately distinct from the Detail Produk card-grid above it: one panel
     (not separate cards), square icon tiles (not round chips), title + sub. */
  .rv-trust { padding: var(--space-6) 0; }
  .rv-trust__title { font-size: var(--fs-xl); }
  .rv-trust__head { margin-bottom: var(--space-5); }
  .rv-trust__sub {
    max-width: 320px;
    margin-inline: auto;
    line-height: 1.35;
  }
  .rv-trust__grid {
    max-width: 460px;
    margin-inline: auto;
    grid-template-columns: 1fr;
    gap: 0;
    background: #ffffff;
    border: 1px solid var(--color-border-warm);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(var(--color-primary-rgb), 0.06);
    overflow: hidden;
  }
  .rv-trust__item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "icon text";
    column-gap: 15px;
    row-gap: 3px;
    align-items: center;
    padding: 16px 18px;
    text-align: left;
    border-bottom: 1px solid var(--color-border-warm);
  }
  .rv-trust__item:last-child { border-bottom: 0; }
  .rv-trust__item .rv-icon-circle {
    grid-area: icon;
    align-self: center;
    width: 50px;
    height: 50px;
    margin: 0;
    border-radius: 15px;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb), 0.14);
  }
  .rv-trust__item .rv-icon-circle svg {
    width: 24px;
    height: 24px;
  }
  .rv-trust__item h4 {
    grid-area: title;
    align-self: end;
    min-height: 0;
    margin: 0;
    font: 700 16px/1.25 var(--font-body);
    color: var(--color-primary-text);
  }
  .rv-trust__item p {
    grid-area: text;
    align-self: start;
    max-width: none;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-muted);
  }

  /* Section heads */
  .rv-h2 { font-size: clamp(28px, 7vw, 36px); }
  .rv-section-head { margin-bottom: var(--space-5); }
  .rv-lede { font-size: var(--fs-base); }

  /* Cards */
  .rv-card,
  .rv-pain__card,
  .rv-usp__card,
  .rv-ing__body,
  .rv-cod__step,
  .rv-review { padding: var(--space-5); }
  .rv-pain__cta-band { padding: var(--space-5); }

  /* Compare arrow hidden in mobile (cols stack) */
  .rv-compare__arrow { display: none !important; }
  .rv-compare__col { padding: var(--space-5); }

  /* Promo band */
  .rv-promo h2 { font-size: var(--fs-3xl); }
  .rv-promo__price-new { font-size: clamp(32px, 8vw, 40px); }
  .rv-promo__visual { max-width: 280px; }

  /* Ingredients */

  /* Reviews */
  .rv-rating-aggregate { padding: var(--space-4) var(--space-5); }

  /* COD */
  .rv-cod .rv-container {
    padding-inline: var(--container-px);
  }
  .rv-cod__steps { gap: var(--space-4); }
  .rv-cod__steps {
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
    grid-template-columns: 1fr;
  }
  .rv-cod__step {
    display: grid;
    grid-template-columns: 58px minmax(108px, 0.82fr) minmax(0, 1.18fr);
    grid-template-areas:
      "badge badge badge"
      "icon title text";
    column-gap: clamp(12px, 2.8vw, 18px);
    row-gap: 12px;
    align-items: center;
    text-align: left;
    padding: 18px clamp(16px, 4vw, 22px);
  }
  .rv-cod__step-badge {
    grid-area: badge;
    justify-self: start;
    display: inline-flex;
    margin: 0;
    padding: 5px 12px;
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .rv-cod__step-icon {
    grid-area: icon;
    width: 58px;
    height: 58px;
    margin: 0;
  }
  .rv-cod__step-icon svg {
    width: 25px;
    height: 25px;
  }
  .rv-cod__step h3 {
    grid-area: title;
    margin: 0;
    font: 800 16px/1.22 var(--font-body);
    max-width: 10.5ch;
    letter-spacing: 0;
  }
  .rv-cod__step p {
    grid-area: text;
    margin: 0;
    font: 500 16px/1.36 var(--font-body);
    letter-spacing: 0;
  }
  .rv-cod__chips { gap: 6px; }
  .rv-cod__chip { padding: 8px 14px 8px 10px; font-size: 12px; }

  /* Order section */
  .rv-order__summary,
  .rv-order__form-card { padding: var(--space-5); }
  .rv-order__form-head h3 { font-size: clamp(26px, 7.4vw, 32px); }
  .rv-order__form-head p { font-size: var(--fs-base); }
  .rv-order__badge { min-height: 38px; padding-inline: 14px; font-size: var(--fs-sm); }
  .rv-order__notice {
    justify-content: flex-start;
    text-align: left;
    font-size: var(--fs-sm);
  }
  .rv-order__price-block {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: 10px;
    padding: 12px;
  }
  .rv-order__price-cell { min-height: 78px; padding: 10px 7px; }
  .rv-order__price-label { font-size: 10px; }
  .rv-order__price-cell--regular {
    grid-column: 1;
    grid-row: 1;
  }
  .rv-order__price-cell--sale {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: min(100%, 272px);
  }
  .rv-order__price-cell--regular .rv-order__price-val { font-size: clamp(13px, 14cqw, 18px); }
  .rv-order__price-cell--sale .rv-order__price-val { font-size: clamp(25px, 15cqw, 34px); }
  .rv-order__price-cell--sale .rv-order__price-currency { font-size: 0.42em; }
  .rv-order__price-badge {
    grid-column: 2;
    grid-row: 1;
    width: clamp(74px, 22vw, 86px);
    aspect-ratio: 1;
    min-height: 0;
    flex-direction: column;
    gap: 2px;
    border-radius: 50%;
    justify-self: center;
  }
  .rv-order__price-badge strong { font-size: clamp(23px, 6.8vw, 28px); }
  .rv-order__price-badge span { font-size: 9px; }
  .rv-order-form .rv-btn-primary--full {
    min-height: 56px;
    padding-inline: 18px;
  }
  .rv-order__stage { max-width: min(100%, 340px); }
  .rv-order__thumbs {
    --rv-gallery-thumb-min: 72px;
    --rv-gallery-thumb-max: 108px;
    margin-inline: calc(var(--space-5) * -0.25);
    padding-inline: calc(var(--space-5) * 0.25);
  }
  .rv-order__seal { width: 80px; height: 80px; }
  .rv-order__seal strong { font-size: 22px; }
  /* Mobile trust-row rules removed: the base 2×2 !important design + the mobile
     override below win at every width, so these were dead. */

  /* Expert quote */
  .rv-expert__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
  .rv-expert__cards {
    min-width: 0;
  }
  .rv-expert__panel {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: var(--space-5);
  }
  .rv-expert__person {
    align-items: flex-start;
  }
  .rv-expert__avatar {
    width: 64px;
    height: 64px;
    font-size: 20px;
    flex-shrink: 0;
  }
  .rv-expert__quote {
    width: 100%;
    margin-inline: 0;
    padding: var(--space-4);
    font-size: var(--fs-base);
    line-height: 1.55;
  }
  .rv-expert__signature {
    right: var(--space-4);
    max-width: 46%;
    text-align: right;
  }

  /* FAQ */
  .rv-faq__button { padding: 16px 18px; font-size: var(--fs-base); min-height: 56px; }
  .rv-faq__panel-inner { padding: 0 18px 16px; font-size: var(--fs-md); }
  .rv-faq__chev { width: 32px; height: 32px; }
  .rv-faq__chev svg { width: 16px; height: 16px; }

  /* Final CTA */
  .rv-final-cta { padding: var(--space-8) 0; }
  .rv-final-cta h2 { font-size: var(--fs-3xl); }
  .rv-final-cta__chips { gap: 10px 16px; }
  .rv-final-cta__chip { font-size: 14px; }
  .rv-final-cta__chip-sep { display: none; }

  /* Footer */
  .rv-footer { padding: var(--space-7) 0 var(--space-5); }

  /* Sticky mobile CTA — full-bleed, comfortable tap target */
  .rv-sticky-cta {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .rv-sticky-cta .rv-btn-primary {
    min-height: 56px;
    font-size: var(--fs-base);
    padding: 12px 20px;
  }
  /* Strong contrast over light backgrounds */
  .rv-sticky-cta {
    background: rgba(255,255,255,0.98);
    box-shadow: 0 -6px 24px -8px rgba(10, 25, 47, 0.18);
  }

  /* Reveal less aggressive on mobile */
  .rv-reveal { transform: translateY(16px); }
}

/* Very small screens */
@media (max-width: 380px) {
  .rv-hero__price-new { font-size: 32px; }
  /* (.rv-hero__title 30px here was dead — the ≤767 WELLNESS clamp wins) */
  .rv-pain__cards { grid-template-columns: 1fr; }
  .rv-cod__step {
    grid-template-columns: 48px minmax(84px, 0.82fr) minmax(0, 1.18fr);
    column-gap: 9px;
    padding: 16px 12px;
  }
  .rv-cod__step-icon { width: 48px; height: 48px; }
  .rv-cod__step h3 { font-size: 15px; max-width: 9ch; }
  .rv-cod__step p { font-size: 15px; line-height: 1.34; }
  .rv-order__price-block { grid-template-columns: minmax(0, 0.8fr) minmax(78px, 1fr); }
  .rv-order__price-cell--regular { grid-column: 1; grid-row: 1; }
  .rv-order__price-cell--sale { grid-column: 1 / -1; grid-row: 2; width: min(100%, 260px); }
  .rv-order__price-badge { grid-column: 2; grid-row: 1; width: 78px; }
  .rv-order__price-cell--sale .rv-order__price-val { font-size: clamp(28px, 16cqw, 36px); }
  /* (dead ≤380px trust overrides removed — the 2×2 !important design wins) */
}

/* =====================================================================
   Product typography normalization — fixed role-based sizes
   ===================================================================== */
@media (min-width: 768px) {
  .rv-hero__title {
    font: 700 clamp(42px, 5vw, 60px)/1.04 var(--font-display);
    letter-spacing: 0;
  }

  .rv-h2 {
    font: 700 clamp(34px, 4vw, 48px)/1.05 var(--font-display);
    letter-spacing: 0;
  }

  .rv-order__form-head h3 {
    font: 800 clamp(30px, 3vw, 36px)/1.02 var(--font-display);
    letter-spacing: 0;
  }

  .rv-trust__title,
  .rv-trust__item h4,
  .rv-pain__card h3,
  .rv-compare__col h3,
  .rv-how__step h3,
  .rv-usp__card h3,
  .rv-ing__body h3,
  .rv-usage__step h3,
  .rv-expert__card h3,
  .rv-cod__pill h3,
  .rv-timeline__title,
  .rv-review__name,
  .rv-cod__step h3,
  .rv-order__summary h2,
  .rv-faq__button {
    font: 800 18px/1.25 var(--font-body);
    letter-spacing: 0;
  }

  .rv-hero__desc,
  .rv-hero__bullets li,
  .rv-lede,
  .rv-trust__item p,
  .rv-pain__card p,
  .rv-compare__list li,
  .rv-how__step p,
  .rv-usp__card p,
  .rv-ing__body p,
  .rv-usage__step p,
  .rv-expert__card p,
  .rv-cod__pill p,
  .rv-timeline__quote,
  .rv-review__quote,
  .rv-cod__step p,
  .rv-order__form-head p,
  .rv-order__notice,
  .rv-order__summary-desc,
  .rv-final-cta p,
  .rv-faq__panel-inner {
    font: 500 16px/1.6 var(--font-body);
  }

  .rv-trust__sub,
  .rv-hero__rating,
  .rv-hero__rating-count,
  .rv-hero__cta-note,
  .rv-hero__price-suffix,
  .rv-hero__scarcity,
  .rv-order__summary-eyebrow,
  .rv-order__supply,
  .rv-review__meta,
  .rv-review__badge,
  .rv-reviews__note,
  .rv-rating-aggregate__count,
  .rv-midcta__chip,
  .rv-cod__chip,
  .rv-cod__badge,
  .rv-final-cta__chip,
  .rv-order__form-privacy,
  .rv-order__trust-item,
  .rv-order__badge {
    font: 700 13px/1.35 var(--font-body);
  }

  .rv-eyebrow,
  .rv-kicker,
  .rv-pain__card-num,
  .rv-usp__num,
  .rv-usage__num,
  .rv-cod__step-num,
  .rv-hero__badge-save,
  .rv-hero__badge-today,
  .rv-order__seal span,
  .rv-order__price-label,
  .rv-order__price-badge span,
  .rv-cod__step-badge {
    font: 800 11px/1 var(--font-body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .rv-order__price-block {
    grid-template-columns: minmax(92px, 0.56fr) minmax(0, 2.16fr) minmax(82px, 0.5fr);
  }

  .rv-order__price-val {
    max-width: 100%;
    overflow: visible;
    white-space: nowrap;
  }

  .rv-order__price-amount {
    min-width: 0;
    overflow: visible;
  }

  .rv-order__price-cell--regular .rv-order__price-val {
    font: 800 clamp(14px, min(1.25vw, 12cqw), 17px)/1 var(--font-body);
  }

  .rv-order__price-cell--sale .rv-order__price-val {
    font: 800 clamp(36px, min(3vw, 12cqw), 44px)/0.95 var(--font-display);
  }

  .rv-order__price-currency {
    font-size: 0.56em;
  }
}

@media (max-width: 767px) {
  .rv-h2 {
    font: 700 clamp(28px, 7vw, 36px)/1.05 var(--font-display);
    letter-spacing: 0;
  }

  .rv-order__form-head h3 {
    font: 800 clamp(26px, 7vw, 32px)/1.02 var(--font-display);
    letter-spacing: 0;
  }

  .rv-trust__title,
  .rv-trust__item h4,
  .rv-pain__card h3,
  .rv-compare__col h3,
  .rv-how__step h3,
  .rv-usp__card h3,
  .rv-ing__body h3,
  .rv-usage__step h3,
  .rv-expert__card h3,
  .rv-cod__pill h3,
  .rv-timeline__title,
  .rv-review__name,
  .rv-cod__step h3,
  .rv-order__summary h2,
  .rv-faq__button {
    font: 800 16px/1.25 var(--font-body);
    letter-spacing: 0;
  }

  .rv-hero__desc,
  .rv-hero__bullets li,
  .rv-lede,
  .rv-trust__item p,
  .rv-pain__card p,
  .rv-compare__list li,
  .rv-how__step p,
  .rv-usp__card p,
  .rv-ing__body p,
  .rv-usage__step p,
  .rv-expert__card p,
  .rv-cod__pill p,
  .rv-timeline__quote,
  .rv-review__quote,
  .rv-cod__step p,
  .rv-order__form-head p,
  .rv-order__notice,
  .rv-order__summary-desc,
  .rv-final-cta p,
  .rv-faq__panel-inner {
    font: 500 16px/1.6 var(--font-body);
  }

  .rv-trust__sub,
  .rv-hero__rating,
  .rv-hero__rating-count,
  .rv-hero__cta-note,
  .rv-hero__price-suffix,
  .rv-hero__scarcity,
  .rv-order__summary-eyebrow,
  .rv-order__supply,
  .rv-review__meta,
  .rv-review__badge,
  .rv-reviews__note,
  .rv-rating-aggregate__count,
  .rv-midcta__chip,
  .rv-cod__chip,
  .rv-cod__badge,
  .rv-final-cta__chip,
  .rv-order__form-privacy,
  .rv-order__trust-item,
  .rv-order__badge {
    font: 700 13px/1.35 var(--font-body);
  }

  .rv-eyebrow,
  .rv-kicker,
  .rv-pain__card-num,
  .rv-usp__num,
  .rv-usage__num,
  .rv-cod__step-num,
  .rv-hero__badge-save,
  .rv-hero__badge-today,
  .rv-order__seal span,
  .rv-order__price-label,
  .rv-order__price-badge span,
  .rv-cod__step-badge {
    font: 800 11px/1 var(--font-body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .rv-order__price-val {
    max-width: 100%;
    overflow: visible;
    white-space: nowrap;
  }

  .rv-order__price-amount {
    min-width: 0;
    overflow: visible;
  }

  .rv-order__price-label {
    font-size: 11px;
    line-height: 1;
  }

  .rv-order__price-cell--regular .rv-order__price-val {
    font: 800 clamp(15px, min(4.2vw, 16cqw), 18px)/1 var(--font-body);
  }

  .rv-field__label,
  .rv-field__input,
  .rv-order__form-card .rv-field__label,
  .rv-order__form-card .rv-field__input {
    font: 700 16px/1.2 var(--font-body);
  }

  .rv-order-form .rv-btn-primary--full,
  .rv-sticky-cta .rv-btn-primary {
    font: 800 16px/1.3 var(--font-body);
  }

  .rv-order__price-cell--sale .rv-order__price-val {
    font: 800 clamp(30px, min(8vw, 15cqw), 40px)/0.95 var(--font-display);
  }

  .rv-order__price-currency {
    font-size: 0.56em;
  }
}

@media (max-width: 380px) {
  .rv-order__price-block {
    column-gap: 8px;
  }

  .rv-trust__item h4,
  .rv-pain__card h3,
  .rv-compare__col h3,
  .rv-how__step h3,
  .rv-usp__card h3,
  .rv-ing__body h3,
  .rv-usage__step h3,
  .rv-expert__card h3,
  .rv-cod__pill h3,
  .rv-timeline__title,
  .rv-review__name,
  .rv-cod__step h3,
  .rv-order__summary h2,
  .rv-faq__button {
    font-size: 15px;
  }

  .rv-trust__item p,
  .rv-pain__card p,
  .rv-compare__list li,
  .rv-how__step p,
  .rv-usp__card p,
  .rv-ing__body p,
  .rv-usage__step p,
  .rv-expert__card p,
  .rv-cod__pill p,
  .rv-timeline__quote,
  .rv-review__quote,
  .rv-cod__step p,
  .rv-order__form-head p,
  .rv-order__notice,
  .rv-order__summary-desc,
  .rv-final-cta p,
  .rv-faq__panel-inner {
    font-size: 15px;
  }

  .rv-field__label,
  .rv-field__input,
  .rv-order__form-card .rv-field__label,
  .rv-order__form-card .rv-field__input,
  .rv-order-form .rv-btn-primary--full,
  .rv-sticky-cta .rv-btn-primary {
    font-size: 16px;
  }

  .rv-order__price-cell--sale .rv-order__price-val {
    font-size: clamp(28px, 8vw, 34px);
  }
}

/* =====================================================================
   v4 — Premium header navigation
   ===================================================================== */
.rv-header__inner {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
}
.rv-header__right {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-end;
}

/* Nav: centered list */
.rv-nav {
  display: none;
  justify-content: center;
}
@media (min-width: 900px) {
  .rv-nav { display: flex; }
}
.rv-nav__list {
  display: inline-flex;
  align-items: center;
  list-style: none;
  margin: 0; padding: 0;
  gap: clamp(18px, 2.4vw, 34px);
}
.rv-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 2px;
  font: 600 var(--fs-md)/1 var(--font-body);
  color: var(--color-text-secondary);
  letter-spacing: 0.01em;
  transition: color var(--d-fast) var(--e-out);
}
.rv-nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary-bright), var(--color-primary));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--d-base) var(--e-out);
}
.rv-nav__link:hover,
.rv-nav__link:focus-visible,
.rv-nav__link.is-active {
  color: var(--color-navy);
}
.rv-nav__link:hover::after,
.rv-nav__link:focus-visible::after,
.rv-nav__link.is-active::after {
  transform: scaleX(1);
}
.rv-nav__link:focus-visible {
  outline: none;
}

/* Header CTA visibility */
.rv-header__cta { display: none; }
@media (min-width: 900px) {
  .rv-header__cta { display: inline-flex; }
}

/* Burger */
.rv-nav__burger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 12px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: transparent;
  transition: background var(--d-fast);
}
.rv-nav__burger:hover { background: var(--color-primary-tint); }
.rv-nav__burger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
@media (min-width: 900px) {
  .rv-nav__burger { display: none; }
}
.rv-nav__burger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--color-navy);
  border-radius: 2px;
  transition: transform var(--d-base) var(--e-out), opacity var(--d-fast) var(--e-out);
  transform-origin: center;
}
.rv-nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rv-nav__burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.rv-nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer (mobile) */
.rv-nav__drawer {
  position: fixed;
  top: var(--header-h-m);
  left: 0; right: 0;
  z-index: 49;
  background: #fff;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 24px 48px -16px rgba(10, 25, 47, 0.16);
  padding: var(--space-5) var(--container-px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--d-base) var(--e-out), opacity var(--d-base) var(--e-out);
  max-height: calc(100vh - var(--header-h-m));
  overflow-y: auto;
}
.rv-nav__drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 900px) {
  .rv-nav__drawer { display: none; }
  .rv-nav__overlay { display: none; }
}
.rv-nav__drawer-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 2px;
}
.rv-nav__drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  font: 700 var(--fs-lg)/1 var(--font-body);
  color: var(--color-navy);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background var(--d-fast), border-color var(--d-fast), color var(--d-fast);
}
.rv-nav__drawer-link::after {
  content: '\2192';
  color: var(--color-text-tertiary);
  transition: transform var(--d-fast), color var(--d-fast);
}
.rv-nav__drawer-link svg {
  width: 18px; height: 18px;
  color: var(--color-text-tertiary);
  transition: transform var(--d-fast), color var(--d-fast);
}
.rv-nav__drawer-link:hover,
.rv-nav__drawer-link:focus-visible {
  background: var(--color-primary-tint);
  border-color: var(--color-primary-soft);
  color: var(--color-primary-text);
}
.rv-nav__drawer-link:hover::after,
.rv-nav__drawer-link:focus-visible::after {
  color: var(--color-primary);
  transform: translateX(2px);
}
.rv-nav__drawer-link:hover svg,
.rv-nav__drawer-link:focus-visible svg {
  color: var(--color-primary);
  transform: translateX(2px);
}
.rv-nav__drawer-cta {
  margin-top: 6px;
}
.rv-nav__drawer-foot {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
.rv-nav__drawer-foot p { line-height: 1.4; }
.rv-nav__drawer-foot strong {
  color: var(--color-navy);
  display: block;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  margin-bottom: 4px;
}

/* Overlay (mobile) */
.rv-nav__overlay {
  position: fixed;
  top: var(--header-h-m); left: 0; right: 0; bottom: 0;
  z-index: 48;
  background: rgba(10, 25, 47, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-base) var(--e-out);
}
.rv-nav__overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Body lock when drawer open */
body.is-nav-open { overflow: hidden; }

/* Header layout tweak for desktop — center nav neatly */
@media (min-width: 900px) {
  .rv-header__inner {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  }
  .rv-nav { display: flex; justify-content: center; }
}

/* Header logo: subtle hover */
.rv-logo {
  transition: opacity var(--d-fast);
}
.rv-logo:hover { opacity: 0.85; }

/* ---------- Runviet site shell pages ---------- */
.rv-shell-page { background: var(--color-bg); }
.rv-shell-hero-section {
  padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 8vw, 112px);
  background: linear-gradient(180deg, var(--color-bg-warm) 0%, var(--color-bg) 100%);
  overflow: hidden;
}
.rv-shell-hero {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.rv-shell-hero--split {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  text-align: left;
}
@media (min-width: 900px) {
  .rv-shell-hero--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}
.rv-shell-hero__content { max-width: 620px; }
.rv-shell-title {
  font: 700 var(--fs-6xl)/1.02 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--color-navy);
}
.rv-shell-title em {
  color: var(--color-primary);
  font-style: italic;
}
.rv-shell-lede {
  max-width: 760px;
  margin: var(--space-5) auto 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-xl);
  line-height: 1.55;
}
.rv-shell-hero--split .rv-shell-lede { margin-inline: 0; }
.rv-shell-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.rv-shell-hero--split .rv-shell-actions { justify-content: flex-start; }
.rv-shell-link-btn,
.rv-shell-text-link {
  min-height: var(--button-h-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary-text);
  font-weight: 800;
}
.rv-shell-link-btn svg,
.rv-shell-text-link svg { width: 16px; height: 16px; }
.rv-shell-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: var(--space-5);
}
.rv-shell-hero--split .rv-shell-meta { justify-content: flex-start; }
.rv-shell-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.rv-shell-meta svg { width: 16px; height: 16px; color: var(--color-primary); }
.rv-shell-hero__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 540px;
  margin: 0 auto;
}
.rv-shell-hero__product {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rv-shell-hero__product img {
  width: 72%;
  height: auto;
  max-height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(10, 25, 47, 0.25));
}
.rv-shell-hero__placeholder {
  width: 42%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}
.rv-shell-hero__placeholder svg { width: 46%; height: 46%; }
.rv-shell-hero__badge {
  position: absolute;
  top: 4%;
  right: 2%;
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--color-primary-bright), var(--color-primary-deep));
  color: #fff;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.2);
  transform: rotate(-12deg);
}
.rv-shell-hero__badge strong {
  font: 800 24px/1 var(--font-display);
  letter-spacing: 0.08em;
}
.rv-shell-trust-strip { padding: var(--space-7) 0; }
.rv-shell-product-grid,
.rv-shell-step-grid {
  display: grid;
  gap: var(--space-5);
}
.rv-shell-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rv-shell-product {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.rv-shell-product__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-bg-warm);
  border-bottom: 1px solid var(--color-border-warm);
}
.rv-shell-product__halo {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--color-primary-tint), transparent 70%);
}
.rv-shell-product__media img {
  position: relative;
  z-index: 1;
  width: 76%;
  height: 76%;
  object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(10, 25, 47, 0.18));
}
.rv-shell-product__placeholder {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.rv-shell-product__placeholder svg { width: 38px; height: 38px; }
.rv-shell-product__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--color-primary-bright), var(--color-primary-deep));
  color: #fff;
  font: 800 var(--fs-sm)/1 var(--font-body);
  letter-spacing: 0.08em;
  box-shadow: var(--shadow-md);
  transform: rotate(-10deg);
}
.rv-shell-product__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}
.rv-shell-product__eyebrow,
.rv-shell-contact__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary-text);
  font: 800 var(--fs-xs)/1 var(--font-body);
  text-transform: uppercase;
}
.rv-shell-product__eyebrow svg,
.rv-shell-contact__kicker svg { width: 15px; height: 15px; }
.rv-shell-product h3 {
  font: 700 var(--fs-2xl)/1.15 var(--font-display);
  letter-spacing: 0;
}
.rv-shell-product__sub,
.rv-shell-step p,
.rv-shell-legal-card p,
.rv-shell-legal-card li,
.rv-shell-contact p,
.rv-ty-next p,
.rv-ty-disclaimer { color: var(--color-text-secondary); }
.rv-shell-product__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-4);
}
.rv-shell-product__price {
  color: var(--color-primary);
  font: 800 var(--fs-3xl)/1 var(--font-display);
}
.rv-shell-product__cta { flex-shrink: 0; }
.rv-shell-empty {
  display: grid;
  place-items: center;
  gap: var(--space-3);
  padding: clamp(32px, 6vw, 64px);
  text-align: center;
  background: var(--color-bg-warm);
  border: 1px dashed var(--color-border-warm);
  border-radius: var(--radius-xl);
}
.rv-shell-empty > span {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-primary);
  background: var(--color-bg-alt);
  box-shadow: var(--shadow-sm);
}
.rv-shell-empty svg { width: 34px; height: 34px; }
.rv-shell-empty h2,
.rv-shell-empty h3 {
  margin: 0;
  font: 700 var(--fs-3xl)/1.15 var(--font-display);
  letter-spacing: 0;
}
.rv-shell-empty p {
  max-width: 520px;
  color: var(--color-text-secondary);
}
.rv-shell-step-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rv-shell-step {
  position: relative;
  padding: var(--space-6) var(--space-5);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.rv-shell-step__num {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-text-on-dark);
  font-size: var(--fs-sm);
  font-weight: 900;
}
.rv-shell-step h3 {
  margin: var(--space-4) 0 var(--space-2);
  font: 800 var(--fs-lg)/1.2 var(--font-body);
  letter-spacing: 0;
}
.rv-shell-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-7);
  align-items: center;
}
.rv-shell-copy-card,
.rv-shell-legal-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.rv-shell-copy-card { padding: var(--space-7); }
.rv-shell-copy-card p + p { margin-top: var(--space-4); }
.rv-shell-copy-card .rv-shell-text-link { margin-top: var(--space-5); }
.rv-shell-faq-list {
  display: grid;
  gap: var(--space-3);
}
.rv-shell-faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  box-shadow: var(--shadow-xs);
}
.rv-shell-faq-item summary {
  min-height: var(--tap-target);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  color: var(--color-navy);
  font-weight: 900;
  cursor: pointer;
}
.rv-shell-faq-item summary::-webkit-details-marker { display: none; }
.rv-shell-faq-item summary svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
  transition: transform var(--d-fast) var(--e-out);
}
.rv-shell-faq-item[open] summary svg { transform: rotate(180deg); }
.rv-shell-faq-item p {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-text-secondary);
}
.rv-shell-legal-card { padding: clamp(28px, 5vw, 64px); }
.rv-shell-legal-card h2 {
  margin: var(--space-6) 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-warm);
  font: 700 var(--fs-2xl)/1.2 var(--font-display);
  letter-spacing: 0;
}
.rv-shell-legal-card h2:first-child { margin-top: 0; }
.rv-shell-legal-card p + p,
.rv-shell-legal-card p + ul,
.rv-shell-legal-card ul + p { margin-top: var(--space-4); }
.rv-shell-legal-card ul {
  margin: 0;
  padding-left: 1.25rem;
}
.rv-shell-legal-card li + li { margin-top: 8px; }
.rv-shell-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.rv-shell-mini-grid article {
  padding: var(--space-5);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-lg);
  background: var(--color-bg-warm);
}
.rv-shell-mini-grid svg {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
}
.rv-shell-mini-grid h2 {
  margin-top: var(--space-3);
  padding: 0;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 900;
}
.rv-shell-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-6);
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  background: var(--color-navy);
  color: var(--color-text-on-dark);
  box-shadow: var(--shadow-md);
}
.rv-shell-contact h2 {
  margin: var(--space-2) 0 var(--space-2);
  color: var(--color-text-on-dark);
  font: 700 var(--fs-3xl)/1.15 var(--font-display);
  letter-spacing: 0;
}
.rv-shell-contact p { color: rgba(248, 250, 252, 0.76); }
.rv-shell-disclaimer {
  max-width: 860px;
  margin: var(--space-6) auto 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-lg);
  background: var(--color-bg-warm);
  color: var(--color-text-secondary);
  text-align: center;
}
.rv-shell-products-after-reviews { margin-top: var(--space-8); }
.rv-shell-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-6);
}
.rv-shell-pagination .page-numbers {
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  font-weight: 800;
}
.rv-shell-pagination .current {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-primary);
}
.rv-ty-grid { align-items: stretch; }
.rv-ty-title {
  font: 700 var(--fs-5xl)/1.05 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--color-navy);
  margin-bottom: var(--space-4);
}
.rv-ty-stage { max-width: 320px; margin-bottom: var(--space-5); }
.rv-ty-stage .rv-shell-hero__placeholder {
  width: 44%;
  color: var(--color-success);
}
.rv-ty-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-6) 0;
  text-align: left;
}
.rv-ty-summary div {
  padding: var(--space-4);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-md);
  background: var(--color-bg-warm);
}
.rv-ty-summary dt {
  margin: 0 0 4px;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.rv-ty-summary dd {
  margin: 0;
  color: var(--color-navy);
  font-weight: 900;
  overflow-wrap: anywhere;
}
.rv-ty-next {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
  text-align: left;
}
.rv-ty-next article {
  padding: var(--space-5);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-lg);
  background: var(--color-bg-warm);
}
.rv-ty-next svg {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
}
.rv-ty-next h2 {
  margin: var(--space-3) 0 var(--space-2);
  font: 800 var(--fs-lg)/1.25 var(--font-body);
  letter-spacing: 0;
}
.rv-ty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.rv-ty-disclaimer {
  max-width: 720px;
  margin: var(--space-5) auto 0;
  font-size: var(--fs-sm);
}

@media (max-width: 1024px) {
  .rv-shell-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rv-shell-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rv-shell-split {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}
@media (max-width: 700px) {
  .rv-shell-hero,
  .rv-shell-hero--split {
    text-align: left;
  }
  .rv-shell-actions,
  .rv-shell-meta {
    justify-content: flex-start;
  }
  .rv-shell-actions .rv-btn-primary,
  .rv-ty-actions .rv-btn-primary {
    width: 100%;
  }
  .rv-shell-step-grid,
  .rv-shell-product-grid,
  .rv-shell-mini-grid,
  .rv-shell-contact,
  .rv-ty-summary,
  .rv-ty-next {
    grid-template-columns: 1fr;
  }
  .rv-shell-product__foot {
    align-items: flex-start;
    flex-direction: column;
  }
  .rv-shell-product__cta { width: 100%; }
  .rv-shell-contact {
    text-align: left;
  }
}

/* WordPress template compatibility */
.rv-main { min-height: 40vh; }
.rv-page-legal { padding: var(--section-py) 0; background: var(--color-bg-alt); }
.rv-page-legal__article, .ty-card { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: clamp(28px, 5vw, 56px); }
.rv-page-legal__title, .ty-h1 { font: 700 var(--fs-4xl)/1.1 var(--font-display); color: var(--color-navy); margin-bottom: var(--space-5); }
.rv-page-legal__content { color: var(--color-text-secondary); }
.rv-page-legal__content > * + * { margin-top: 1em; }
.rv-thank-you { min-height: 80vh; display: flex; align-items: center; padding: var(--section-py) 0; }
.rv-thank-you__details { margin: 0 0 24px; color: var(--color-text-secondary); }
.rv-footer__legal-list { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; padding: 0; margin: 0; }
.rv-icon { width: 1em; height: 1em; }
.rv-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Site shell v2: AI Studio visual port ---------- */
.rv-shell-ai {
  background: var(--color-bg);
  color: var(--color-text);
}
.rv-shell-ai :where(a) { text-decoration: none; }
.rv-shell-ai-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 0 clamp(76px, 8vw, 116px);
  background:
    radial-gradient(circle at 82% 20%, rgba(var(--color-primary-rgb), 0.08), transparent 30%),
    linear-gradient(180deg, var(--color-bg-warm) 0%, var(--color-bg) 100%);
}
.rv-shell-ai-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 960px) {
  .rv-shell-ai-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.8fr);
  }
}
.rv-shell-ai-hero__copy { max-width: 660px; }
.rv-shell-ai-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-5);
  color: var(--color-primary-text);
  font: 800 var(--fs-sm)/1.1 var(--font-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.rv-shell-ai-eyebrow svg {
  width: 16px;
  height: 16px;
  color: var(--color-leaf);
}
.rv-shell-ai-hero__title,
.rv-shell-ai-head h1,
.rv-shell-ai-head h2,
.rv-shell-ai-legal__header h1,
.rv-shell-ai-thankyou__card h1 {
  color: var(--color-navy);
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.rv-shell-ai-hero__title {
  margin: 0 0 var(--space-5);
  font-size: clamp(42px, 6vw, 68px);
  line-height: 1.04;
}
.rv-shell-ai-hero__lede {
  max-width: 620px;
  margin: 0 0 var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--fs-lg);
  line-height: 1.65;
}
.rv-shell-ai-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.rv-shell-ai-actions--center { justify-content: center; }
.rv-shell-ai-link,
.rv-shell-ai-secondary {
  min-height: var(--button-h-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font-weight: 800;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
}
.rv-shell-ai-link:hover,
.rv-shell-ai-secondary:hover { color: var(--color-primary); }
.rv-shell-ai-link svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}
.rv-shell-ai-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.rv-shell-ai-note svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
}
.rv-shell-ai-commitment {
  position: relative;
  padding: clamp(28px, 4vw, 44px);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.rv-shell-ai-commitment::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle, var(--color-primary-tint), transparent 65%);
  filter: blur(18px);
}
.rv-shell-ai-commitment h2 {
  margin: 0 0 var(--space-6);
  color: var(--color-navy);
  font: 700 var(--fs-2xl)/1.18 var(--font-display);
}
.rv-shell-ai-commitment ul {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rv-shell-ai-commitment li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.rv-shell-ai-check {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--color-primary);
}
.rv-shell-ai-check svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.5px;
}
.rv-shell-ai-commitment strong {
  display: block;
  color: var(--color-navy);
  font-size: var(--fs-lg);
  line-height: 1.25;
}
.rv-shell-ai-commitment small {
  display: block;
  margin-top: 5px;
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.rv-shell-ai-trust {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--space-7) * -1);
  padding-bottom: var(--space-7);
}
.rv-shell-ai-trust__panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 760px) {
  .rv-shell-ai-trust__panel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.rv-shell-ai-trust__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}
.rv-shell-ai-trust__item > span {
  color: var(--color-primary);
}
.rv-shell-ai-trust__item svg {
  width: 32px;
  height: 32px;
}
.rv-shell-ai-trust__item h2 {
  margin: 0 0 4px;
  color: var(--color-navy);
  font: 800 var(--fs-sm)/1.2 var(--font-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.rv-shell-ai-trust__item p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.rv-shell-ai-section {
  padding: var(--section-py) 0;
  background: var(--color-bg);
}
.rv-shell-ai-section--white {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.rv-shell-ai-section--cream { background: var(--color-bg); }
.rv-shell-ai-narrow { max-width: var(--container-narrow); }
.rv-shell-ai-head {
  max-width: 760px;
  margin: 0 auto var(--space-8);
  text-align: center;
}
.rv-shell-ai-head h1,
.rv-shell-ai-head h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.08;
}
.rv-shell-ai-head p:not(.rv-shell-ai-eyebrow) {
  max-width: 640px;
  margin: var(--space-4) auto 0;
  color: var(--color-text-secondary);
}
.rv-shell-ai-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 760px) {
  .rv-shell-ai-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rv-shell-ai-product {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--space-5);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.rv-shell-ai-product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.rv-shell-ai-product__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--space-5);
  overflow: hidden;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
}
.rv-shell-ai-product__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-3);
}
.rv-shell-ai-product__placeholder {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.rv-shell-ai-product__placeholder svg {
  width: 36px;
  height: 36px;
}
.rv-shell-ai-product__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
}
.rv-shell-ai-product__badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0 0 var(--space-3);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font: 800 var(--fs-xs)/1.1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rv-shell-ai-product h3 {
  margin: 0 0 var(--space-2);
  color: var(--color-navy);
  font: 700 var(--fs-xl)/1.2 var(--font-display);
}
.rv-shell-ai-product__sub {
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.rv-shell-ai-product__foot {
  width: 100%;
  display: grid;
  gap: var(--space-3);
  margin-top: auto;
}
.rv-shell-ai-product__price {
  margin: 0;
  color: var(--color-navy);
  font: 800 var(--fs-2xl)/1 var(--font-display);
}
.rv-shell-ai-product__cta {
  width: 100%;
  border-radius: var(--radius-md);
}
.rv-shell-ai-steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 860px) {
  .rv-shell-ai-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .rv-shell-ai-steps::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 7%;
    right: 7%;
    height: 2px;
    background: var(--color-primary-tint);
  }
}
.rv-shell-ai-step {
  position: relative;
  z-index: 1;
}
.rv-shell-ai-step > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-weight: 900;
}
.rv-shell-ai-step h3 {
  margin: 0 0 var(--space-2);
  color: var(--color-navy);
  font: 800 var(--fs-lg)/1.25 var(--font-body);
}
.rv-shell-ai-step p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
}
.rv-shell-ai-info {
  padding: var(--section-py) 0;
  background: var(--color-navy);
  color: var(--color-text-on-dark);
}
.rv-shell-ai-info__head {
  max-width: 760px;
  margin: 0 auto var(--space-8);
  text-align: center;
}
.rv-shell-ai-info__head h2 {
  margin: 0 0 var(--space-5);
  color: var(--color-text-on-dark);
  font: 700 clamp(32px, 4vw, 48px)/1.1 var(--font-display);
  letter-spacing: -0.02em;
}
.rv-shell-ai-info__head p {
  margin: 0 auto;
  max-width: 700px;
  color: rgba(248, 250, 252, 0.7);
  font-size: var(--fs-lg);
}
.rv-shell-ai-info__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 760px) {
  .rv-shell-ai-info__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rv-shell-ai-info__grid article {
  padding: var(--space-6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.05);
  text-align: center;
}
.rv-shell-ai-info__grid svg {
  width: 32px;
  height: 32px;
  margin: 0 auto var(--space-4);
  color: var(--color-primary-bright);
}
.rv-shell-ai-info__grid h3 {
  margin: 0 0 var(--space-2);
  color: var(--color-text-on-dark);
  font: 800 var(--fs-lg)/1.2 var(--font-body);
}
.rv-shell-ai-info__grid p {
  margin: 0;
  color: rgba(248, 250, 252, 0.68);
  font-size: var(--fs-sm);
}
.rv-shell-ai-faq {
  display: grid;
  gap: var(--space-4);
}
.rv-shell-ai-faq__item,
.rv-shell-ai-empty,
.rv-shell-ai-legal__card,
.rv-shell-ai-thankyou__card,
.rv-shell-ai-review {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.rv-shell-ai-faq__item {
  padding: var(--space-5);
}
.rv-shell-ai-faq__item h3 {
  margin: 0 0 var(--space-3);
  color: var(--color-navy);
  font: 800 var(--fs-lg)/1.25 var(--font-body);
}
.rv-shell-ai-faq__item p {
  margin: 0;
  color: var(--color-text-secondary);
}
.rv-shell-ai-empty {
  display: grid;
  place-items: center;
  gap: var(--space-3);
  padding: clamp(32px, 6vw, 64px);
  text-align: center;
  background: var(--color-bg-warm);
  border-style: dashed;
  border-color: var(--color-border-warm);
}
.rv-shell-ai-empty > span {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-primary);
  background: var(--color-bg-alt);
  box-shadow: var(--shadow-sm);
}
.rv-shell-ai-empty svg {
  width: 34px;
  height: 34px;
}
.rv-shell-ai-empty h2 {
  margin: 0;
  color: var(--color-navy);
  font: 700 var(--fs-3xl)/1.15 var(--font-display);
}
.rv-shell-ai-empty p {
  max-width: 540px;
  margin: 0;
  color: var(--color-text-secondary);
}
.rv-shell-ai-legal {
  padding: var(--space-8) 0 var(--section-py);
  background: var(--color-bg);
}
.rv-shell-ai-legal__layout {
  max-width: var(--container-narrow);
}
.rv-shell-ai-legal__header {
  padding: var(--space-7) 0 var(--space-6);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.rv-shell-ai-legal__header h1 {
  margin: 0 0 var(--space-3);
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.08;
}
.rv-shell-ai-legal__header p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.rv-shell-ai-legal__card {
  margin-top: var(--space-6);
  padding: clamp(28px, 5vw, 56px);
}
.rv-shell-ai-legal__card h2 {
  margin: var(--space-7) 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-navy);
  font: 700 var(--fs-2xl)/1.2 var(--font-display);
}
.rv-shell-ai-legal__card h2:first-child { margin-top: 0; }
.rv-shell-ai-legal__card p,
.rv-shell-ai-legal__card li {
  color: var(--color-text-secondary);
}
.rv-shell-ai-legal__card p { margin: 0 0 var(--space-4); }
.rv-shell-ai-legal__card ul {
  margin: 0 0 var(--space-4);
  padding-left: 1.35rem;
  list-style: disc;
}
.rv-shell-ai-legal__card li + li { margin-top: 8px; }
.rv-shell-ai-callout {
  margin-top: var(--space-7);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.rv-shell-ai-callout h3 {
  margin: 0 0 var(--space-2);
  color: var(--color-navy);
  font: 800 var(--fs-lg)/1.2 var(--font-body);
}
.rv-shell-ai-callout p { margin: 0; }
.rv-shell-ai-thankyou__wrap {
  max-width: 760px;
}
.rv-shell-ai-thankyou__card {
  padding: clamp(28px, 5vw, 56px);
  text-align: center;
}
.rv-shell-ai-success-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin: 0 auto var(--space-5);
  border-radius: 50%;
  background: var(--color-leaf-tint);
  color: var(--color-success);
}
.rv-shell-ai-success-icon svg {
  width: 34px;
  height: 34px;
  stroke-width: 2.5px;
}
.rv-shell-ai-thankyou__card h1 {
  max-width: 620px;
  margin: 0 auto var(--space-4);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
}
.rv-shell-ai-thankyou__lede {
  max-width: 540px;
  margin: 0 auto var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--fs-lg);
}
.rv-shell-ai-order-summary {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  text-align: left;
}
.rv-shell-ai-order-summary h2 {
  margin: 0 0 var(--space-4);
  text-align: center;
  color: var(--color-navy);
  font: 800 var(--fs-lg)/1.2 var(--font-body);
}
.rv-shell-ai-order-summary dl { margin: 0; }
.rv-shell-ai-order-summary div {
  display: grid;
  grid-template-columns: minmax(120px, 0.75fr) minmax(0, 1.25fr);
  gap: var(--space-3);
  padding: 13px 0;
  border-bottom: 1px solid var(--color-border);
}
.rv-shell-ai-order-summary div:last-child { border-bottom: 0; }
.rv-shell-ai-order-summary dt {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
}
.rv-shell-ai-order-summary dd {
  margin: 0;
  color: var(--color-navy);
  font-size: var(--fs-sm);
  font-weight: 800;
  text-align: right;
  overflow-wrap: anywhere;
}
.rv-shell-ai-next {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: var(--space-6) 0;
  text-align: left;
}
@media (min-width: 760px) {
  .rv-shell-ai-next { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rv-shell-ai-next svg {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
}
.rv-shell-ai-next h2 {
  margin: var(--space-3) 0 var(--space-2);
  color: var(--color-navy);
  font: 800 var(--fs-sm)/1.25 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rv-shell-ai-next p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
}
.rv-shell-ai-reminder {
  margin: var(--space-6) 0;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-primary-tint);
  text-align: left;
}
.rv-shell-ai-reminder p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-2);
  color: var(--color-primary-text);
}
.rv-shell-ai-reminder svg {
  width: 16px;
  height: 16px;
}
.rv-shell-ai-reminder ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
}
.rv-shell-ai-review-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 760px) {
  .rv-shell-ai-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .rv-shell-ai-review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rv-shell-ai-disclaimer {
  max-width: 720px;
  margin: var(--space-5) auto 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary-tint);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
}
.rv-shell-ai-review {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--space-6);
}
.rv-shell-ai-review__stars {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-4);
  color: var(--color-gold-soft);
}
.rv-shell-ai-review__stars svg {
  width: 18px;
  height: 18px;
}
.rv-shell-ai-review blockquote {
  margin: 0 0 var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.rv-shell-ai-review__person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.rv-shell-ai-review__person > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-primary);
  font-weight: 900;
}
.rv-shell-ai-review__person h2 {
  margin: 0;
  color: var(--color-navy);
  font: 800 var(--fs-sm)/1.2 var(--font-body);
}
.rv-shell-ai-review__person p {
  margin: 3px 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}
.rv-shell-ai-review__link {
  display: inline-flex;
  margin-top: var(--space-4);
  color: var(--color-primary);
  font-weight: 800;
}
.rv-404 {
  background: var(--color-bg);
  color: var(--color-text);
}
.rv-404__hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 84px);
  background:
    radial-gradient(circle at 78% 16%, rgba(var(--color-primary-rgb), 0.1), transparent 31%),
    radial-gradient(circle at 12% 78%, rgba(86, 122, 94, 0.12), transparent 28%),
    linear-gradient(180deg, var(--color-bg-warm) 0%, var(--color-bg) 100%);
}
.rv-404__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 940px) {
  .rv-404__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.72fr);
  }
}
.rv-404__copy {
  max-width: 700px;
}
.rv-404__copy h1 {
  max-width: 760px;
  margin: 0 0 var(--space-5);
  color: var(--color-navy);
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 70px);
  line-height: 1.02;
  letter-spacing: 0;
}
.rv-404__lede {
  max-width: 620px;
  margin: 0 0 var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--fs-lg);
  line-height: 1.65;
}
.rv-404__panel {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-2xl);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.88), rgba(255, 247, 237, 0.76)),
    var(--color-bg-card);
  box-shadow: var(--shadow-card);
}
.rv-404__panel::before {
  content: "";
  position: absolute;
  inset: auto -18% -36% 22%;
  height: 220px;
  border-radius: 999px;
  background: rgba(var(--color-primary-rgb), 0.1);
  filter: blur(18px);
  pointer-events: none;
}
.rv-404__code {
  position: relative;
  width: min(100%, 280px);
  aspect-ratio: 1.32;
  display: grid;
  place-items: center;
  margin: 0 auto var(--space-6);
  border: 1px solid rgba(var(--color-primary-rgb), 0.16);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.92), transparent 48%),
    linear-gradient(145deg, rgba(255, 229, 204, 0.72), rgba(223, 232, 221, 0.92));
  color: var(--color-navy);
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 104px);
  font-weight: 800;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.rv-404__panel h2 {
  position: relative;
  margin: 0 0 var(--space-4);
  color: var(--color-navy);
  font: 800 var(--fs-2xl)/1.12 var(--font-display);
}
.rv-404__search {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 48px;
  min-height: 56px;
  overflow: hidden;
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
}
.rv-404__search input {
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0 0 0 20px;
  color: var(--color-text);
  font: 700 var(--fs-base)/1 var(--font-body);
  outline: 0;
}
.rv-404__search input::placeholder {
  color: var(--color-text-muted);
  font-weight: 700;
}
.rv-404__search button {
  display: grid;
  place-items: center;
  margin: 5px;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
}
.rv-404__search button svg {
  width: 18px;
  height: 18px;
}
.rv-404__quick-links {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-5);
}
.rv-404__quick-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.66);
  color: var(--color-text-secondary);
  font-weight: 800;
}
.rv-404__quick-links a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary-soft);
}
.rv-404__trust {
  padding: 0 0 var(--section-py);
  background: var(--color-bg);
}
.rv-404__trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 820px) {
  .rv-404__trust-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.rv-404__trust-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-soft);
}
.rv-404__trust-card > span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-primary-cream);
  color: var(--color-primary);
}
.rv-404__trust-card svg {
  width: 24px;
  height: 24px;
}
.rv-404__trust-card h2 {
  margin: 0 0 4px;
  color: var(--color-navy);
  font-size: var(--fs-lg);
  line-height: 1.2;
}
.rv-404__trust-card p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
@media (max-width: 700px) {
  .rv-shell-ai-hero {
    padding-top: var(--space-7);
  }
  .rv-shell-ai-hero__title { font-size: clamp(36px, 11vw, 44px); }
  .rv-shell-ai-actions,
  .rv-shell-ai-actions .rv-btn-primary,
  .rv-shell-ai-secondary { width: 100%; }
  .rv-shell-ai-actions .rv-btn-primary,
  .rv-shell-ai-secondary { justify-content: center; }
  .rv-shell-ai-trust { margin-top: calc(var(--space-5) * -1); }
  .rv-shell-ai-trust__panel { padding: var(--space-5); }
  .rv-shell-ai-trust__item {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .rv-shell-ai-legal { padding-top: var(--space-5); }
  .rv-shell-ai-order-summary div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .rv-shell-ai-order-summary dd { text-align: left; }
  .rv-404__hero {
    padding-top: var(--space-7);
  }
  .rv-404__copy h1 {
    font-size: clamp(36px, 11vw, 46px);
  }
  .rv-404__panel {
    padding: var(--space-5);
  }
  .rv-404__search {
    grid-template-columns: 1fr 46px;
  }
  .rv-404__quick-links a,
  .rv-404__trust-card {
    width: 100%;
  }
}

/* ---------- Merged Top Purchase Section Styles ---------- */
/* Top-purchase container + grid — consolidated (was redefined across 3 layers). */
.rv-top-purchase {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  background: var(--color-bg-warm);
  border-bottom: 1px solid var(--color-border-warm);
}
.rv-top-purchase__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
@media (min-width: 900px) {
  .rv-top-purchase__grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}
.rv-top-purchase__left {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}
.rv-top-purchase__right {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 100px;
  min-width: 0;
}
.rv-top-purchase__rating-badge {
  position: absolute;
  top: 4%;
  left: 0%;
  padding: 8px 14px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 var(--fs-sm)/1 var(--font-body);
  color: var(--color-navy);
  box-shadow: var(--shadow-sm);
  z-index: 10;
}
.rv-top-purchase__rating-badge svg {
  width: 16px;
  height: 16px;
  fill: var(--color-gold-soft);
  stroke: none;
}

/* Product summary card on top of form */
.rv-top-purchase__summary-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-bg-alt);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: var(--radius-lg);
  padding: 12px;
  margin-top: 12px;
  text-align: left;
}
.rv-top-purchase__summary-img-wrap {
  width: 72px;
  height: 72px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rv-top-purchase__summary-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.rv-top-purchase__summary-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rv-top-purchase__summary-info h4 {
  font: 700 16px/1.2 var(--font-body);
  color: var(--color-navy);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rv-top-purchase__summary-pricing {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.rv-top-purchase__price-new {
  font: 800 var(--fs-lg)/1 var(--font-display);
  color: var(--color-primary);
}
.rv-top-purchase__price-old {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.rv-top-purchase__price-save {
  font-size: 10px;
  font-weight: 800;
  color: var(--color-leaf-deep);
  background: var(--color-leaf-tint);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.rv-top-purchase__summary-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.rv-top-purchase__stars {
  display: inline-flex;
  gap: 1px;
  color: var(--color-gold-soft);
}
.rv-top-purchase__stars svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  stroke: none;
}

/* Form CTA subtext */
.rv-order__form-subtext {
  text-align: center;
  margin: 8px 0 16px;
  font: 700 var(--fs-sm)/1.2 var(--font-body);
  color: var(--color-leaf-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ---------- Redesign and Simplification Overrides ---------- */
/* :root token overrides consolidated into the base :root block (top of file). */

/* Page body styling consolidated into the base `body` rule (top of file). */

/* Sections backgrounds simplification */
.rv-section {
  background-color: var(--color-bg) !important;
}
.rv-section--white {
  background-color: var(--color-bg) !important;
}
.rv-cod, .rv-faq {
  background-color: var(--color-bg-alt) !important;
}
/* .rv-top-purchase + summary-card consolidated into their base rules above. */

/* .rv-hero__bullets li font-size consolidated into the base hero rule. */

/* Reviews and cards adjustments */
.rv-review {
  background: #ffffff !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  box-shadow: none !important;
  border-radius: var(--radius-md) !important;
}
.rv-review:hover {
  transform: none !important;
  box-shadow: 0 4px 12px rgba(10, 25, 47, 0.05) !important;
}

/* Form input adjustments */
.rv-field__input {
  font-size: 16px; /* Prevent iOS zoom */
}
.rv-field__label {
  font-size: 15px;
}

/* CTA and disclaimer font tweaks */
.rv-btn-primary__label {
  font-size: 17px !important;
}
.rv-order__form-disclaimer {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--color-text-secondary) !important;
  margin: 0 0 6px 0 !important;
  text-align: center !important;
}
.rv-order__form-agreement {
  font-size: 13px !important;
  color: var(--color-text-muted) !important;
  margin: 0 !important;
  text-align: center !important;
}
.rv-order__form-agreement a {
  color: var(--color-navy) !important;
  text-decoration: underline !important;
  transition: color var(--d-fast);
}
.rv-order__form-agreement a:hover {
  color: var(--color-primary) !important;
}
.rv-order__form-privacy {
  font-size: 13px !important;
}

/* Notice box styling — soft blue info tint */
.rv-order__notice {
  background: rgba(var(--color-primary-rgb), 0.06) !important;
  border: 1px solid rgba(var(--color-primary-rgb), 0.20) !important;
  color: var(--color-primary-text) !important;
}
.rv-order__notice-icon {
  color: var(--color-primary) !important;
  box-shadow: 0 6px 16px rgba(var(--color-primary-rgb), 0.12) !important;
}

/* ---------- Mobile top purchase section optimization overrides ---------- */
@media (max-width: 767px) {
  /* Mobile gallery (stage + thumbs) consolidated into the WELLNESS NEST mobile
     block below — the last-winning copy. See "Mobile product gallery" there. */

  /* Mobile form card fix */
  .rv-order__form-card {
    --rv-card-pad: 18px;
    padding: 18px; /* Target padding: 18-22px */
    border-radius: 20px;
  }
  .rv-order__form-head {
    margin-bottom: 12px !important;
  }
  /* Only the live mobile-specific field deltas remain here; sizing that the
     base/WELLNESS rules already win was dead and has been removed. */
  .rv-order__form-card .rv-field__input {
    padding-top: 14px;
    padding-bottom: 4px;
  }
  .rv-order__form-card .rv-field__wrap--textarea .rv-field__icon {
    margin-top: 10px;
  }
  .rv-order__form-card .rv-field__wrap--textarea .rv-field__label {
    top: 12px;
  }

  /* Product summary card: compact */
  .rv-top-purchase__summary-card {
    padding: 8px 10px;
    gap: 12px;
    margin-top: 8px;
  }
  .rv-top-purchase__summary-img-wrap {
    width: 60px; /* Product image inside summary: 56-68px mobile */
    height: 60px;
  }

  /* Mobile CTA text button */
  .rv-order__form-card button[type="submit"] {
    height: 60px; /* Button height: 58-64px */
    font-size: 18px; /* Button main text: 18px */
    padding: 0 16px;
  }
  .rv-order__form-card button[type="submit"] .rv-btn-primary__label {
    font-size: 18px;
    font-weight: 700;
  }
  
  /* Hide arrow on very small mobile if crowded */
  @media (max-width: 380px) {
    .rv-order__form-card button[type="submit"] .rv-btn-primary__icon-trailing {
      display: none;
    }
  }

  /* Spacing */
  .rv-order__form-subtext {
    margin: 6px 0 10px !important; /* Reduce gap between CTA, COD subtext, privacy line, trust row */
  }
  .rv-order__form-privacy {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    font-size: 13px !important;
  }

  /* Trust row under form: 2x2 grid */
  .rv-order__mini-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border: none;
    background: none;
    padding: 0;
    margin-top: 10px;
    margin-bottom: 12px;
  }
  .rv-order__trust-item {
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 8px;
    background: var(--color-bg-alt);
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    text-align: left;
  }
  .rv-order__trust-item::after,
  .rv-order__trust-item::before {
    display: none; /* Remove any border lines or pseudoelements */
  }
  .rv-order__trust-icon {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .rv-order__trust-icon svg {
    width: 16px;
    height: 16px;
  }
  .rv-order__trust-label {
    font-size: 13px; /* Use 13-14px label */
    font-weight: 600;
    color: var(--color-navy);
    line-height: 1.2;
    max-width: none; /* Remove tight max-width constraint */
  }

  /* Policy and disclaimers */
  .rv-order__form-compliance {
    margin-top: 12px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.1) !important;
    padding-top: 10px !important;
  }
  .rv-order__form-disclaimer {
    font-size: 13px !important; /* Helper/disclaimer: 13-14px. No text below 13px. */
    margin: 0 0 6px 0 !important;
    text-align: center !important;
    color: var(--color-text-secondary) !important;
  }
  .rv-order__form-agreement {
    font-size: 13px !important;
    color: var(--color-text-muted) !important;
    margin: 0 !important;
    text-align: center !important;
  }
  .rv-order__form-agreement a {
    color: var(--color-navy) !important;
    text-decoration: underline !important;
  }
}

/* =====================================================================
   PREMIUM POLISH (v1.4) — mobile-first top-purchase + trust refinements.
   Placed last so it wins the cascade over the layered mobile blocks above.
   ===================================================================== */

/* Drop the decorative dashed halo ring (read as AI-generated). */
.rv-hero__halo::after { display: none; }

@media (max-width: 767px) {
  /* Compact the top section so the order form is reachable sooner. */
  /* (grid gap set by the WELLNESS mobile block below — this copy was dead) */
  .rv-top-purchase__right { position: static; top: auto; }
  .rv-hero__title { font-size: clamp(30px, 7.4vw, 33px); line-height: 1.12; }
  .rv-hero__desc { margin-bottom: var(--space-4); }
  .rv-hero__bullets { margin-bottom: var(--space-5); }

  /* Drop the empty halo behind the product image. */
  .rv-top-purchase__left .rv-hero__halo { display: none !important; }
  /* Mobile gallery stage consolidated into the WELLNESS NEST mobile block below. */

  /* Floating rating sticker is redundant with the rating row above it. */
  .rv-top-purchase__rating-badge { display: none; }

  /* Save seal: a touch smaller and calmer on the compact image. */
  .rv-order__seal { width: 72px !important; height: 72px !important; }
  .rv-order__seal strong { font-size: 20px !important; }

  /* Trust cards align to the same gutter as the inputs (not full-bleed). */
  .rv-order__mini-trust { margin-inline: 0; }
}

/* =====================================================================
   ORDER REDESIGN (v1.5) — two-card buy layout (price card + form card).
   Herbal green with a restrained warm promo accent.
   ===================================================================== */
/* --rv-green / --rv-green-deep aliases consolidated into the base :root block. */

.rv-buy { display: flex; flex-direction: column; gap: 20px; }

/* ---- Product / price card ---- */
.rv-buy-card {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 32px) clamp(20px, 2.6vw, 28px);
  box-shadow: 0 18px 48px -22px rgba(10,25,47,0.16), 0 2px 6px rgba(10,25,47,0.04);
  text-align: center;
}
.rv-buy__promo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  margin: 0 auto 4px;
  border-radius: var(--radius-pill);
  background: rgba(var(--color-cta-rgb), 0.10);
  color: var(--color-cta);
  font: 800 13px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rv-buy__promo svg { width: 16px; height: 16px; }
.rv-buy__name {
  margin: 14px 0 0;
  font: 800 clamp(30px, 7vw, 46px)/1.02 var(--font-body);
  letter-spacing: -0.02em;
  color: var(--rv-green-deep);
}
.rv-buy__tagline {
  margin: 8px 0 0;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--color-text-muted);
}
.rv-buy__price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(16px, 2.2vw, 22px);
}
.rv-buy__save {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  padding-right: 18px;
  border-right: 1px solid var(--color-border);
  color: var(--rv-green);
  font-weight: 800;
}
.rv-buy__save span { font-size: clamp(15px, 1.6vw, 18px); }
.rv-buy__save strong { font-size: clamp(15px, 1.6vw, 18px); }
.rv-buy__price-main { text-align: left; }
.rv-buy__price-now {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--color-cta);
  font-weight: 800;
  line-height: 1;
}
.rv-buy__cur { font-size: clamp(22px, 3.4vw, 30px); }
.rv-buy__amt { font-size: clamp(38px, 9vw, 58px); letter-spacing: -0.02em; }
.rv-buy__price-was {
  margin-top: 2px;
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.rv-buy__cod {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: clamp(16px, 2.2vw, 22px);
  background: #f4f7f5;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
}
.rv-buy__cod-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  text-align: left;
  font: 700 14px/1.25 var(--font-body);
  color: var(--color-navy);
}
.rv-buy__cod-item + .rv-buy__cod-item { border-left: 1px solid var(--color-border); }
.rv-buy__cod-item svg { width: 26px; height: 26px; color: var(--rv-green); flex-shrink: 0; }

/* ---- Form card head ---- */
.rv-formhead { text-align: center; margin-bottom: 18px; }
.rv-formhead__title {
  font: 800 clamp(22px, 2.6vw, 28px)/1.15 var(--font-body);
  color: var(--rv-green-deep);
}
.rv-formhead__sub {
  margin-top: 6px;
  font-size: 15px;
  color: var(--color-text-muted);
}

/* Form fields consolidated into the single source in the WELLNESS NEST section. */

/* ---- Trust row foundation; v1.6 restacks this as four equal cards ---- */
.rv-trust3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  margin-top: 16px;
}
.rv-trust3__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 8px;
  font: 700 13px/1.2 var(--font-body);
  color: var(--color-navy);
  text-align: center;
}
.rv-trust3__item + .rv-trust3__item { border-left: 1px solid var(--color-border); }
.rv-trust3__item svg { width: 20px; height: 20px; color: var(--rv-green); flex-shrink: 0; }

/* ---- Disclaimer box ---- */
.rv-discbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  background: #f6f8f7;
  border: 1px solid var(--color-border);
  border-radius: 14px;
}
.rv-discbox__icon { flex-shrink: 0; line-height: 0; margin-top: 1px; }
.rv-discbox__icon svg { width: 22px; height: 22px; color: var(--rv-green); }
.rv-discbox__text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.rv-discbox__text a {
  color: var(--rv-green);
  font-weight: 700;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .rv-buy { gap: 16px; }
  .rv-buy__price { gap: 14px; }
  .rv-buy__cod-item { padding: 12px 12px; font-size: 13px; }
  .rv-trust3__item { font-size: 12px; gap: 6px; padding: 0 4px; }
  .rv-trust3__item svg { width: 18px; height: 18px; }
}

/* =====================================================================
   WELLNESS NEST ADAPTATION (v1.6)
   Premium natural-wellness polish for the COD product purchase flow.
   Kept last to consolidate the earlier layered product-template rules.
   ===================================================================== */
/* :root token overrides (bg colors, CTA shadows) consolidated into the base :root block. */

/* body color/background consolidated into the base `body` rule (top of file). */

.rv-section--warm { background: var(--color-bg-warm) !important; }
.rv-section--soft,
.rv-cod,
.rv-faq { background: var(--color-bg-soft) !important; }

/* Flat success-green buttons replace the older glossy orange treatment. */
.rv-btn-primary {
  min-height: 56px;
  padding: 14px 28px;
  background: var(--color-cta) !important;
  border: 1px solid rgba(49, 124, 43, 0.18);
  box-shadow: var(--shadow-cta) !important;
  text-shadow: none;
  transition: background-color var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
}
.rv-btn-primary::before,
.rv-btn-primary::after { display: none; }
.rv-btn-primary:hover {
  background: var(--color-cta-hover) !important;
  box-shadow: var(--shadow-cta-hover) !important;
  filter: none;
  transform: translateY(-1px);
}
.rv-btn-primary:active {
  background: var(--color-cta-deep) !important;
  transform: translateY(0);
}
.rv-btn-primary__icon-trailing {
  width: 28px;
  height: 28px;
  color: var(--color-cta-deep);
  background: rgba(255, 255, 255, 0.88);
}

/* .rv-top-purchase + grid gap consolidated into their base rules above. */
/* v4.1: these two used to re-dress the stage for cut-out product PNGs — a brand-tinted
   radial behind the bottle and a drop-shadow to lift it off the surface. Against a
   full-bleed 1:1 photo the radial is covered anyway and the drop-shadow paints a dark
   halo around the photo's own straight edges. Both off; the halo div goes with them. */
.rv-top-purchase__left .rv-order__stage {
  background: var(--color-bg-alt);
}
.rv-top-purchase__left .rv-order__stage img {
  filter: none;
}
.rv-top-purchase__left .rv-hero__halo {
  display: none;
}
.rv-order__seal {
  background: var(--color-primary);
  box-shadow: 0 10px 22px rgba(var(--color-primary-rgb), 0.16);
}
.rv-order__thumb {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
}

.rv-buy-card {
  background: #ffffff !important;
  border: 1px solid rgba(var(--color-primary-rgb), 0.16) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 30px rgba(var(--color-primary-rgb), 0.10) !important;
}
.rv-buy__promo {
  color: var(--color-promo);
  background: var(--color-promo-tint);
}
.rv-buy__price-now { color: var(--color-primary); }
.rv-buy__cod {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
}

/* ---- Order form fields — SINGLE consolidated base source ----
   Merged from the base block + v1.5 (ORDER REDESIGN) + v1.6 (WELLNESS NEST)
   layers; each property is the last-winning value of those layers. !important
   retained: these beat the generic .rv-field base rules and external styles. */
.rv-order__form-card .rv-field { margin-bottom: 14px; }
.rv-order__form-card .rv-field__wrap {
  min-height: 54px;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg-alt);
  box-shadow: none;
}
.rv-order__form-card .rv-field__wrap--textarea,
.rv-order__form-card .rv-field__wrap--textarea .rv-field__input {
  min-height: 104px;
  height: 104px;
}
.rv-order__form-card .rv-field__icon {
  width: 22px;
  height: 22px;
  padding: 0;
  margin-inline: 18px 14px;
  background: none;
  box-shadow: none;
  border-radius: 0;
  color: var(--rv-green);
}
.rv-order__form-card .rv-field__label {
  left: 54px;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
}
.rv-order__form-card .rv-field__input {
  min-height: 54px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy);
  padding-right: 18px;
}
.rv-order__form-card .rv-field__wrap:focus-within {
  border-color: var(--color-cta);
  box-shadow: 0 0 0 3px rgba(var(--color-cta-rgb), 0.14);
}
.rv-order__form-card .rv-field__wrap:focus-within .rv-field__icon { color: var(--rv-green); }
.rv-order__form-card .rv-field__input:focus + .rv-field__label,
.rv-order__form-card .rv-field__input:not(:placeholder-shown) + .rv-field__label {
  color: var(--rv-green);
  font-size: 13px;
}
.rv-order__form-card .rv-field--error .rv-field__wrap { border-color: var(--color-danger); }

.rv-order__form-subtext {
  margin: 8px 0 0;
  color: var(--color-primary-text);
  font-size: 14px;
}
.rv-order__form-subtext svg {
  width: 18px;
  height: 18px;
}

/* Short labels and equal cards keep the mobile trust area calm and scannable. */
.rv-trust3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.rv-trust3__item {
  justify-content: flex-start;
  gap: 9px;
  min-height: 46px;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-size: 13px;
  text-align: left;
}
.rv-trust3__item + .rv-trust3__item { border-left: 1px solid var(--color-border); }
.rv-trust3__item svg {
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 50%;
  background: var(--color-primary-tint);
  color: var(--color-primary);
}
.rv-discbox {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--color-bg-soft);
  border-color: var(--color-border);
}
.rv-discbox__text { font-size: 13px; }

.rv-sticky-cta {
  background: rgba(253, 253, 253, 0.96);
  border-top-color: var(--color-border);
  box-shadow: 0 -8px 22px rgba(var(--color-primary-rgb), 0.08);
}

@media (max-width: 767px) {
  .rv-top-purchase {
    padding-top: 28px;
    padding-bottom: 36px;
  }
  .rv-top-purchase__grid { gap: 24px; }

  /* ---- Mobile product gallery — SINGLE authoritative source ----
     Full-bleed edge-to-edge 1:1 square image (marketplace-app look).
     kept intentionally: this is the protected v1.6.x behavior
     (PLAN §3.3) and must beat any gallery-JS inline styles. */
  .rv-top-purchase__left .rv-order__stage {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-bottom: 12px !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
  }
  .rv-top-purchase__left .rv-order__stage img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    max-width: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    filter: none !important;
  }
  .rv-order__seal { display: none; }
  /* Thumbnail row: scrollable strip, padded tiles. */
  .rv-top-purchase__left .rv-order__thumbs {
    padding: 2px 2px 8px !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }
  .rv-top-purchase__left .rv-order__thumb {
    flex: 0 0 60px !important;
    width: 60px !important;
    height: 60px !important;
    padding: 0 !important;
    border-radius: var(--radius-md) !important;
    aspect-ratio: 1 !important;
  }
  .rv-top-purchase__left .rv-order__thumb img {
    width: 100% !important;
    height: 100% !important;
    /* cover, matching desktop + the full-bleed main image — 1:1 art fills with no inset */
    object-fit: cover !important;
  }
  .rv-buy-card,
  .rv-order__form-card {
    border-radius: 18px !important;
    box-shadow: 0 8px 22px rgba(var(--color-primary-rgb), 0.09) !important;
  }
  .rv-buy__name { font-size: clamp(28px, 8vw, 34px); }
  .rv-buy__price { gap: 12px; }
  .rv-buy__save { padding-right: 12px; }
  .rv-buy__cod-item {
    align-items: flex-start;
    gap: 8px;
    padding: 11px 10px;
    font-size: 13px;
  }
  .rv-buy__cod-item svg {
    width: 22px;
    height: 22px;
  }
  .rv-order__form-card { padding: 18px; }
  .rv-order__form-card .rv-field__wrap {
    min-height: 54px;
  }
  .rv-order__form-card .rv-field__input {
    min-height: 54px;
  }
  .rv-order__form-card button[type="submit"] {
    min-height: 56px;
    height: 56px;
  }
  .rv-trust3__item {
    min-height: 44px;
    padding: 8px 9px;
    font-size: 13px;
  }
  .rv-trust3__item svg {
    width: 26px;
    height: 26px;
  }

  /* Product-template mobile text floor: no visible utility label below 13px. */
  .rv-announce__text,
  .rv-hero__rating,
  .rv-hero__rating-count,
  .rv-ing__media-label,
  .rv-authority__label,
  .rv-authority__mark,
  .rv-review__meta,
  .rv-review__badge,
  .rv-reviews__note,
  .rv-cod__step-badge,
  .rv-cod__chip,
  .rv-order__price-label,
  .rv-top-purchase__price-save {
    font-size: 13px;
  }
}

/* =====================================================================
   LOWER FLOW NORMALIZATION (v1.6.1)
   Align COD, FAQ, final CTA, and trust sections with the calmer purchase UI.
   ===================================================================== */
.rv-main > .rv-section {
  padding-block: clamp(48px, 5vw, 72px);
}
.rv-main > .rv-section .rv-section-head {
  max-width: 720px;
  margin-bottom: clamp(28px, 3vw, 40px);
}
.rv-main > .rv-section .rv-eyebrow {
  margin-bottom: 14px;
  color: var(--color-primary-text);
}
.rv-main > .rv-section .rv-h2 {
  color: var(--color-text);
  font: 800 clamp(30px, 3.4vw, 40px)/1.12 var(--font-body);
  letter-spacing: -0.025em;
}
.rv-main > .rv-section .rv-h2 em {
  color: var(--color-primary) !important;
}

/* .rv-trust (trust-strip) rules consolidated into the base trust block (top of file). */

.rv-main > .rv-cod {
  padding-bottom: clamp(34px, 3vw, 44px);
  background: var(--color-bg-soft) !important;
  border-color: var(--color-border);
}
.rv-cod .rv-section-head { margin-bottom: 0; }
.rv-cod__steps {
  gap: 16px;
  margin-top: 28px;
}
.rv-cod__steps::before { display: none; }
.rv-cod__step {
  padding: 22px 18px;
  background: #ffffff;
  border-color: var(--color-border);
  border-radius: 16px;
  box-shadow: none;
}
.rv-cod__step:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.08);
}
.rv-cod__step-badge {
  margin-bottom: 16px;
  background: var(--color-primary);
  box-shadow: none;
}
.rv-cod__step-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  background: var(--color-primary-tint);
  border-color: var(--color-primary-soft);
}
.rv-cod__step-icon svg {
  width: 26px;
  height: 26px;
}
.rv-cod__chips {
  gap: 8px;
  margin-top: 24px;
}
.rv-cod__chip {
  padding: 10px 15px 10px 12px;
  background: #ffffff;
  border-color: var(--color-border);
  box-shadow: none;
  color: var(--color-text);
  font-size: 14px;
}
.rv-cod__chip:hover {
  border-color: var(--color-primary-soft);
  transform: translateY(-1px);
}
.rv-cod__chip svg,
.rv-cod__chip--orange svg,
.rv-cod__chip--green svg {
  color: var(--color-primary) !important;
}

.rv-main > section[aria-labelledby="faq-title"] {
  padding-top: clamp(40px, 4vw, 52px);
  padding-bottom: clamp(48px, 5vw, 68px);
  background: var(--color-bg) !important;
}
section[aria-labelledby="faq-title"] .rv-section-head {
  margin-bottom: 28px;
}
.rv-faq {
  gap: 10px;
  background: transparent !important;
}
.rv-faq__item {
  background: #ffffff;
  border-color: var(--color-border);
  border-radius: 14px;
  box-shadow: none;
}
.rv-faq__item.is-open {
  border-color: var(--color-primary-soft);
  box-shadow: 0 6px 16px rgba(var(--color-primary-rgb), 0.07);
}
.rv-faq__button {
  min-height: 60px;
  padding: 18px 20px;
  color: var(--color-text);
  font-size: clamp(16px, 1.5vw, 18px);
}
.rv-faq__chev {
  width: 34px;
  height: 34px;
  background: var(--color-primary-tint);
  color: var(--color-primary);
}

.rv-final-cta {
  padding-block: clamp(56px, 6vw, 80px);
  background: var(--color-navy);
}
.rv-final-cta::before { opacity: 0.45; }
.rv-btn-primary--aura > .rv-aura { display: none; }
.rv-footer { background: var(--color-navy); }

@media (max-width: 767px) {
  .rv-main > .rv-section {
    padding-block: 44px;
  }
  .rv-main > .rv-section .rv-section-head {
    margin-bottom: 24px;
  }
  .rv-main > .rv-section .rv-h2 {
    font-size: clamp(28px, 7vw, 32px);
    line-height: 1.14;
  }
  .rv-cod__steps {
    gap: 12px;
    margin-top: 22px;
  }
  .rv-cod__step {
    padding: 16px;
  }
  .rv-cod__chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
  }
  .rv-cod__chip:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-content: center;
  }
  .rv-cod__chip {
    justify-content: flex-start;
    min-height: 42px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.25;
  }
  .rv-main > .rv-cod {
    padding-bottom: 32px;
  }
  .rv-main > section[aria-labelledby="faq-title"] {
    padding-top: 36px;
    padding-bottom: 44px;
  }
  section[aria-labelledby="faq-title"] .rv-section-head {
    margin-bottom: 22px;
  }
  .rv-faq__button {
    min-height: 56px;
    padding: 15px 16px;
    font-size: 16px;
  }
  .rv-faq__chev {
    width: 32px;
    height: 32px;
  }
}

/* =====================================================================
   DESIGN LOCK (v1.6.3) — keep visible product-template text at 13px minimum.
   (--fs-xs is locked at 13px in the base :root; the rule below enforces the
   floor on specific visible elements regardless of token usage.)
   ===================================================================== */
.rv-announce__text,
.rv-eyebrow,
.rv-hero__rating,
.rv-hero__rating-count,
.rv-ing__media-label,
.rv-authority__label,
.rv-cod__step-badge,
.rv-order__seal span,
.rv-promo__seal span,
.rv-hero__badge-save,
.rv-hero__badge-today,
.rv-order__price-label,
.rv-order__price-badge span,
.rv-top-purchase__price-save {
  font-size: 13px;
}

/* =====================================================================
   OPTIONAL REFERENCES — compact ingredient citations after Ingredients.
   ===================================================================== */
.rv-references {
  background: var(--color-bg-soft) !important;
  border-block: 1px solid var(--color-border);
}
.rv-references__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.rv-reference {
  padding: 18px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}
.rv-reference__claim {
  margin-bottom: 9px;
  color: var(--color-primary-text);
  font: 800 13px/1.2 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rv-reference__title {
  color: var(--color-text);
  font: 800 18px/1.32 var(--font-body);
}
.rv-reference__title a,
.rv-reference__meta a {
  color: inherit;
  text-decoration: none;
}
.rv-reference__title a:hover,
.rv-reference__meta a:hover {
  color: var(--color-primary);
}
.rv-reference__meta {
  margin-top: 7px;
  color: var(--color-primary-text);
  font: 700 14px/1.4 var(--font-body);
}
.rv-reference__summary {
  margin-top: 10px;
  color: var(--color-text-secondary);
  font: 500 15px/1.58 var(--font-body);
}
.rv-reference__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  color: var(--color-primary-text);
  font: 800 14px/1.2 var(--font-body);
  text-decoration: none;
}
.rv-reference__link:hover { color: var(--color-primary); }
.rv-reference__link svg { width: 16px; height: 16px; }

@media (min-width: 768px) {
  .rv-references__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .rv-reference { padding: 20px; }
}

/* ── Customer comments (lightweight social-proof feed) ───────────────── */
/* Customer comments — ecom-style review cards + a (cosmetic) comment form. */
.rv-comments__head {
  margin-bottom: clamp(12px, 2vw, 18px);
}
.rv-comments__heading {
  margin: 0;
  font: 700 var(--fs-xl)/1.2 var(--font-body);
  color: var(--color-navy);
}
.rv-comments__count {
  margin-left: 4px;
  color: var(--color-text-muted);
  font-weight: 600;
}
.rv-comments {
  list-style: none;
  margin: 0 0 clamp(20px, 3vw, 28px);
  padding: 0;
  border-top: 1px solid var(--color-border-warm);
}
.rv-comment {
  display: flex;
  gap: 14px;
  padding: clamp(16px, 2.4vw, 20px) 2px;
  border-bottom: 1px solid var(--color-border-warm);
}
.rv-comment__avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 var(--fs-sm)/1 var(--font-body);
  color: #fff;
  background: linear-gradient(135deg, hsl(var(--rv-cmt-hue, 210) 45% 55%), hsl(var(--rv-cmt-hue, 210) 45% 42%));
}
.rv-comment__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rv-comment__stars {
  display: inline-flex;
  gap: 1px;
}
.rv-comment__star { display: inline-flex; color: var(--color-gold-soft); }
.rv-comment__star.is-empty { color: var(--color-border); }
.rv-comment__stars svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.rv-comment__text {
  margin: 0;
  font: 400 var(--fs-base)/1.6 var(--font-body);
  color: var(--color-text);
}
.rv-comment__byline {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.rv-comment__name {
  font-weight: 600;
}
.rv-comment__meta::before {
  content: "·";
  margin: 0 7px;
}
.rv-comment__helpful {
  flex: 0 0 auto;
  align-self: flex-start;
  color: var(--color-text-muted);
  opacity: 0.6;
}
.rv-comment__helpful svg { width: 18px; height: 18px; }

/* ---- Comment form (front-end only; submission shows a pending note) ---- */
.rv-comment-form {
  margin-top: clamp(20px, 3vw, 28px);
  padding: clamp(18px, 3vw, 24px);
  background: linear-gradient(180deg, var(--color-bg-warm), #ffffff);
  border: 1px solid var(--color-border-warm);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(var(--color-primary-rgb), 0.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rv-comment-form__title {
  margin: 0;
  font: 700 var(--fs-lg)/1.2 var(--font-body);
  color: var(--color-navy);
}
.rv-comment-form__rating {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-self: flex-start;
  gap: 2px;
}
.rv-comment-form__rating-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.rv-comment-form__star {
  display: inline-flex;
  padding: 2px;
  cursor: pointer;
  color: var(--color-border);
  transition: color var(--d-fast);
}
.rv-comment-form__star svg { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.rv-comment-form__rating-input:checked ~ .rv-comment-form__star,
.rv-comment-form__star:hover,
.rv-comment-form__star:hover ~ .rv-comment-form__star {
  color: var(--color-gold-soft);
}
.rv-comment-form__rating-input:focus-visible + .rv-comment-form__star {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.rv-comment-form__input,
.rv-comment-form__textarea {
  width: 100%;
  font: 400 16px/1.5 var(--font-body);
  color: var(--color-navy);
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.rv-comment-form__textarea {
  resize: vertical;
  min-height: 84px;
}
.rv-comment-form__input:focus,
.rv-comment-form__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}
.rv-comment-form__textarea.is-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}
.rv-comment-form__submit {
  align-self: flex-start;
  font: 700 15px/1 var(--font-body);
  color: #fff;
  background: var(--color-cta);
  border: 0;
  border-radius: 12px;
  padding: 13px 26px;
  cursor: pointer;
  transition: background var(--d-fast), transform var(--d-fast);
}
.rv-comment-form__submit:hover {
  background: var(--color-cta-hover);
  transform: translateY(-1px);
}
.rv-comment-form__submit:active { transform: translateY(0); }
.rv-comment-form__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  font: 600 var(--fs-sm)/1.4 var(--font-body);
  color: var(--color-primary-text);
  background: var(--color-primary-tint);
  border: 1px solid var(--color-primary-soft);
  border-radius: 12px;
}
.rv-comment-form__note svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
  flex-shrink: 0;
}
/* The pending note (and fields hidden on submit) carry the [hidden] attribute;
   the class rules above set `display`, which would otherwise override the UA
   `[hidden]` rule and leak the note on page load. Scope a reset so [hidden] wins. */
.rv-comment-form [hidden] { display: none; }

/* ── Homepage "load more" products ───────────────────────────────────── */
.rv-shell-ai-product--hidden { display: none; }
.rv-shell-ai-loadmore {
  display: flex;
  justify-content: center;
  margin-top: var(--space-7);
}
.rv-shell-ai-loadmore [hidden] { display: none; }

/* =====================================================================
   PRODUCT GALLERY — premium polish (overflow-safe).
   Placed last to win the cascade for look-and-feel (sizes still come
   from the breakpoint blocks above). Pairs with min-width:0 on the
   top-purchase columns that fixes mobile horizontal overflow.
   ===================================================================== */

/* Keep the thumbnail rail contained inside its column so it scrolls
   horizontally instead of widening the layout. (.rv-top-purchase__left
   max-width:100% now lives in the base rule.) */
.rv-order__thumbs {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  padding-bottom: 12px;
}

/* Main framed stage consolidated into the base `.rv-order__stage` (top of file). */

/* Thumbnails: full-bleed 1:1 tiles matching the full-bleed main image (Shopee/Lazada).
   The old white tile + 7px padding boxed a cut-out PNG on white; product art is now 1:1
   photography that runs to the edge, so the padding read as a white frame around every
   coloured shot and clashed with the edge-to-edge main image. overflow:hidden clips the
   photo to the tile's radius; the image covers the tile with no inset. */
.rv-order__thumb {
  overflow: hidden;
  background: var(--color-bg-alt, #fdfdfd);
  border: 1px solid var(--color-border-warm);
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.06);
  scroll-snap-align: center;
  transition:
    border-color var(--d-fast),
    box-shadow var(--d-fast),
    transform var(--d-fast);
}
.rv-order__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.rv-order__thumb:hover {
  border-color: rgba(var(--color-primary-rgb), 0.5);
  box-shadow: 0 6px 16px rgba(var(--color-primary-rgb), 0.14);
  transform: translateY(-2px);
}
.rv-order__thumb.is-active,
.rv-order__thumb[aria-current="true"],
.rv-order__thumb[aria-pressed="true"] {
  border-color: var(--color-primary);
  box-shadow:
    0 0 0 2px rgba(var(--color-primary-rgb), 0.18),
    0 8px 18px rgba(var(--color-primary-rgb), 0.16);
  transform: translateY(-1px);
}

/* ==========================================================================
   v3.8 order column redesign — one card, price lives per package row.
   Reference pattern: bold price + struck original + SAVE % pill.
   ========================================================================== */

/* Gallery badge row (replaces the round seal) */
.rv-order__badges {
  position: absolute;
  top: 5%; right: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}
.rv-order__badge {
  font-weight: 800;
  font-size: clamp(11px, 1.3vw, 13px);
  letter-spacing: 0.01em;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  color: #fff;
}
.rv-order__badge--save { background: var(--color-promo, #c76728); }
.rv-order__badge--ladder { background: var(--color-cta, #54b94a); }

/* Form header rating (single rating source in the column) */
.rv-formhead__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 700;
  color: var(--color-text-secondary, #475569);
}
.rv-formhead__star { width: 16px; height: 16px; color: var(--color-promo, #c76728); flex: 0 0 auto; }

/* Step headings */
.rv-step {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 8px;
  font-weight: 800;
  font-size: clamp(14px, 1.6vw, 16px);
  color: var(--color-heading, #121212);
}
.rv-step--fields { margin: 18px 0 10px; }

.rv-pkgs {
  border: 0;
  margin: 0 0 4px;
  padding: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* Option row — border stays 2px in every state so selecting never shifts layout. */
.rv-pkg {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  border: 2px solid var(--color-border, #e3e6e3);
  border-radius: 14px;
  padding: 11px 12px;
  cursor: pointer;
  background: var(--color-bg, #fff);
  transition: border-color .15s ease, background .15s ease;
}
.rv-pkg:hover { border-color: var(--color-cta, #54b94a); }
.rv-pkg.is-selected {
  border-color: var(--color-cta, #54b94a);
  background: var(--color-primary-tint, #eef5ec);
}

/* Custom radio with check icon */
.rv-pkg__radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.rv-pkg__mark {
  width: 22px; height: 22px; flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--color-border, #e3e6e3);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.rv-pkg__mark svg {
  width: 13px; height: 13px; color: #fff;
  opacity: 0; transform: scale(.6);
  transition: opacity .12s ease, transform .12s ease;
}
.rv-pkg__radio:checked + .rv-pkg__mark { background: var(--color-cta, #54b94a); border-color: var(--color-cta, #54b94a); }
.rv-pkg__radio:checked + .rv-pkg__mark svg { opacity: 1; transform: scale(1); }
.rv-pkg__radio:focus-visible + .rv-pkg__mark { outline: 2px solid var(--color-cta, #54b94a); outline-offset: 2px; }

/* Left: qty + benefit badge + row-1 shipping note */
.rv-pkg__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rv-pkg__qty {
  font-weight: 700;
  font-size: clamp(15px, 1.7vw, 17px);
  color: var(--color-heading, #121212);
  line-height: 1.25;
}
.rv-pkg__badge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary-deep, #243c2a);
  background: var(--color-primary-soft, #dbe8dc);
  border-radius: 6px;
  padding: 2px 7px;
  line-height: 1.5;
}
.rv-pkg__note { font-size: 11px; line-height: 1.35; color: var(--color-text-muted, #64748b); }

/* Right: bold price, struck original + SAVE pill, per-unit */
.rv-pkg__side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.rv-pkg__price {
  font-weight: 800;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.15;
  color: var(--color-heading, #121212);
  white-space: nowrap;
}
.rv-pkg__wasrow { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.rv-pkg__was { font-size: 12px; color: var(--color-text-muted, #64748b); white-space: nowrap; }
.rv-pkg__save {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--color-cta, #54b94a);
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.5;
  white-space: nowrap;
}
.rv-pkg__per { font-size: 11px; color: var(--color-text-muted, #64748b); white-space: nowrap; }

/* "Most popular" pill — on the card border, top-right */
.rv-pkg__pill {
  position: absolute;
  top: -9px; right: 12px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--color-cta, #54b94a);
  border-radius: 999px;
  padding: 2px 9px;
  line-height: 1.6;
  white-space: nowrap;
}

/* Order total */
.rv-pkgs__summary {
  margin: 10px 0 2px;
  text-align: center;
  font-weight: 800;
  font-size: clamp(14px, 3.7vw, 17px);
  color: var(--color-primary-deep, #243c2a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* One-line trust strip below the CTA (only trust element in the column) */
.rv-trustline {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 12px 0 0;
  font-size: 13px; font-weight: 700; line-height: 1.35;
  text-align: center;
  color: var(--color-primary-text, #315337);
}
.rv-trustline svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* One-line disclaimer */
.rv-disc1 {
  margin: 8px 0 0;
  text-align: center;
  font-size: 12px; line-height: 1.45;
  color: var(--color-text-muted, #64748b);
}
.rv-disc1 a { color: var(--color-primary-text, #315337); text-decoration: underline; }

/* Address: single row by default, grows with content */
.rv-field__wrap--textarea .rv-field__input[data-rv-autogrow] {
  height: 58px; min-height: 58px; max-height: 190px;
  overflow-y: hidden; resize: none;
}

/* One card in the column now */
.rv-buy { gap: 0; }
.rv-order__form-card { --rv-card-pad: clamp(15px, 3.2vw, 26px); }

@media (min-width: 1024px) {
  .rv-top-purchase__right { top: 24px; }
}

/* v3.9: shipping-confirmed-on-call line (only for packages that exclude the fee) */
.rv-pkgs__shipconfirm {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 4px 0 0;
  font-size: 12px; line-height: 1.4; text-align: center;
  color: var(--color-text-secondary, #475569);
}
.rv-pkgs__shipconfirm svg { width: 14px; height: 14px; flex: 0 0 auto; }
.rv-pkgs__shipconfirm.is-hidden { display: none; }

/* ==========================================================================
   v4.1 GALLERY — marketplace pattern (Shopee/Lazada).
   Prev/next sit ON the image and only appear on hover, so a resting page stays clean.
   They are hidden for coarse pointers: touch users already swipe, and a permanently
   parked button over the product art is worse than no button.
   ========================================================================== */
.rv-gallery-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  color: var(--color-heading, #121212);
  cursor: pointer;
  opacity: 0;
  box-shadow: 0 2px 10px rgba(10, 25, 47, 0.16);
  transition: opacity var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.rv-gallery-nav--prev { left: 10px; }
.rv-gallery-nav--next { right: 10px; }
.rv-gallery-nav svg { width: 20px; height: 20px; }
.rv-order__stage:hover .rv-gallery-nav { opacity: 1; }
.rv-gallery-nav:hover { background: #fff; }
/* Keyboard users never trigger :hover — never trap focus on an invisible control. */
.rv-gallery-nav:focus-visible {
  opacity: 1;
  outline: 2px solid var(--color-focus-ring, #3a5a40);
  outline-offset: 2px;
}
@media (hover: none), (pointer: coarse) {
  .rv-gallery-nav { display: none; }
}

/* ---- Thumbnail rail: strip + scrollers, as on a marketplace PDP ---- */
/* Mirrors .rv-order__stage's max-width + centring. The stage caps at 560px and centres,
   but the rail took the full column (616px on desktop), so the thumbnails hung ~28px past
   the main image on each side — the strip read as belonging to the page, not to the photo.
   Below 560px the column is the smaller constraint, so this is a no-op on mobile, where the
   stage is full-bleed 100vw anyway. */
.rv-order__thumbrail {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: var(--rv-gallery-max, 560px);
  margin-inline: auto;
  min-width: 0;
}
/* The rail now shares a flex row with the scrollers, so this wrapper owns the horizontal
   box — two inherited declarations have to be neutralised inside it:
   1. `width: 100%` made the rail claim the whole row and rely on flex-shrink to squeeze back
      past the buttons. `flex: 1 1 auto` + `width: auto` states "take what's left" directly.
   2. The mobile rule pairs `margin-inline: -6px` with `padding-inline: 6px` so the scroll box
      bleeds into the gutter at net-zero visual shift — but
      `.rv-top-purchase__left .rv-order__thumbs { padding: 2px 2px 8px !important }` overrides
      the shorthand and drops the compensating padding, leaving the negative margin bare. The
      strip then hangs 6px past the column on BOTH sides (visible once the scrollers are gone
      on touch). Zero it here rather than unpick that !important, which the ladder layout
      still depends on. */
.rv-order__thumbrail .rv-order__thumbs {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin-inline: 0;
}
.rv-thumbs-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 50%;
  background: #fff;
  color: var(--color-heading, #121212);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--e-out);
}
.rv-thumbs-nav:hover { border-color: var(--color-primary, #3a5a40); }
.rv-thumbs-nav svg { width: 15px; height: 15px; }
/* JS sets [hidden] when the strip fits; the class rules above would otherwise win. */
.rv-thumbs-nav[hidden] { display: none; }
/* Touch drags the strip directly — arrows would only steal width from the thumbs. */
@media (hover: none), (pointer: coarse) {
  .rv-thumbs-nav { display: none; }
}

/* ==========================================================================
   v4.1 FORM V2 — single price + promo box (rv_form_mode = single).
   New, dedicated classes only: the ladder rules above are untouched and keep
   rendering byte-for-byte when rv_form_mode = ladder (default).
   Ref: geo-packs/shared/THEME_SPEC_FORM_V2_SINGLE_PRICE.md §2; visual base = Form Mau 3,
   chip row wording from Mau 2.
   ========================================================================== */

/* COLOUR CONTRACT for this block — the per-site override in
   rv_theme_lite_output_css_variables() re-points the brand tokens, so:
     --color-heading  = the site's brand dark (ID teal / MY green / TH navy). This is
                        the mockup's "dark green" for names, prices, icons and labels.
     --color-primary  = accent_color ?: cta_color — on a site with no accent_color this
                        is the CTA ORANGE, NOT the brand colour. Never use it for the
                        price/name here, and never derive brand tints from
                        --color-primary-rgb (peach on vitalklik). Use --color-heading-rgb.
     --color-promo    = static warm orange on every GEO — the right token for the discount
                        pill (matches .rv-order__badge--save, and TH's CTA is green so
                        --color-cta would render a green "save" pill there).
     --color-cta      = the site's CTA. Used for the Total amount so it reads as one
                        colour story with the button underneath it, as in the mockup. */

/* ---- Product card: media + name + today badge + price/strike/pill ---- */
.rv-single-product {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  margin: 0 0 12px;
  background: rgba(var(--color-heading-rgb), 0.04);
  border: 1px solid rgba(var(--color-heading-rgb), 0.10);
  border-radius: var(--radius-lg, 20px);
}
/* Media box + soft brand halo — same radial idiom as .rv-order__stage.
   Product images are authored 1:1, so the box is square and the art fills it edge to edge.
   It is sized to ~a third of the card (was 96px ≈ 21%, which left the image marooned in
   whitespace) and is the tallest thing in the row, so it — not the text — sets the card
   height and the info column centres against it.
   `object-fit: contain` is the safety net for any off-spec upload: a non-square image is
   letterboxed rather than cropped (never crop a product shot). Do NOT restore
   `display:grid` here — a grid row is content-sized, so an off-spec image's height:100%
   became cyclic and the row silently took the IMAGE's ratio instead of 1:1 (measured: a
   100x150 upload stretched the box to 108x162). A plain block keeps aspect-ratio authoritative. */
.rv-single-product__media {
  flex: 0 0 auto;
  display: block;
  width: 150px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md, 14px);
  background: radial-gradient(circle at 50% 56%, rgba(var(--color-heading-rgb), 0.14), transparent 70%);
}
.rv-single-product__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.rv-single-product__info { flex: 1 1 auto; min-width: 0; }
.rv-single-product__name {
  margin: 0 0 6px;
  font: 800 clamp(18px, 2vw, 21px)/1.15 var(--font-body);
  letter-spacing: -0.01em;
  color: var(--color-heading, #121212);
}
.rv-single-product__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 8px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: rgba(var(--color-heading-rgb), 0.08);
  color: var(--color-heading, #121212);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}
.rv-single-product__badge svg { width: 12px; height: 12px; flex: 0 0 auto; }
/* Price owns its own line (flex-basis:100%); the strike + save pill share the line under
   it, as in Mẫu 3. On a 390px phone the info column is ~161px and ID's worst case
   ("Rp 780.000" + "Hemat 50%") needs ~155px — the sizes below keep ~6px of slack. If a
   longer price ever exceeds it the pill simply drops to its own line: degraded, not broken. */
.rv-single-product__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0;
}
.rv-single-product__price {
  flex-basis: 100%;
  font: 800 clamp(36px, 4.5vw, 45px)/1 var(--font-body);
  letter-spacing: -0.02em;
  color: var(--color-heading, #121212);
  white-space: nowrap;
}
.rv-single-product__strike {
  font-size: 18px;
  color: var(--color-text-muted, #64748b);
  white-space: nowrap;
}
.rv-single-product__pill {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background: var(--color-promo, #c76728);
  border-radius: 999px;
  padding: 3px 12px;
  line-height: 1.6;
  white-space: nowrap;
}

/* ---- Flash-sale countdown box (sits under the product card) ----
   Warm/promo palette on purpose, NOT the brand tokens: this is a sale device, and it must
   look identical on all three GEOs (TH's --color-cta is green — a green flash-sale box
   would read as anything but urgency). --color-promo-deep carries the text: --color-promo
   itself is only ~3.4:1 on this tint and fails AA below 18.66px. */
.rv-single-flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #fffaf3, var(--color-promo-tint, #fff5ec));
  border: 1px solid rgba(199, 103, 40, 0.28);
  border-radius: var(--radius-lg, 20px);
}
.rv-single-flash__title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  min-width: 0;
  font: 800 clamp(15px, 1.8vw, 17px)/1.2 var(--font-body);
  color: var(--color-promo-deep, #7c2d12);
}
.rv-single-flash__bolt {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--color-promo, #c76728);
}
.rv-single-flash__clock {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  flex: 0 0 auto;
}
.rv-single-flash__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 38px;
}
.rv-single-flash__num {
  display: block;
  width: 100%;
  padding: 4px 5px;
  border-radius: var(--radius-sm, 10px);
  background: #fff;
  border: 1px solid rgba(199, 103, 40, 0.18);
  color: var(--color-promo, #c76728);
  font: 800 clamp(17px, 2.2vw, 20px)/1.15 var(--font-body);
  text-align: center;
  /* Digits must not reflow the box as they change (1 vs 8 differ in width). */
  font-variant-numeric: tabular-nums;
}
.rv-single-flash__lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #64748b);
  text-transform: uppercase;
  white-space: nowrap;
}
.rv-single-flash__sep {
  font: 800 16px/1 var(--font-body);
  color: var(--color-promo, #c76728);
  /* Align the colon with the digit boxes, not the labels below them. */
  padding-top: 6px;
}

/* v4.2: continuous "flash" blink, once a second, forever (operator call) — scoped to the
   icon + text only, NOT the box (the box keeps its static background/border) and NOT the
   countdown clock (the digits must read as a stable, trustworthy number — the ticking value
   itself is the only thing that should change there, not its opacity).
   .rv-single-flash__title already wraps the bolt icon + label as one element, so one
   selector covers both. .rv-single-promo has no such wrapper (icon and note are siblings),
   so both get the animation directly — same keyframe/timing keeps them visually in sync. */
@keyframes rv-flash-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.rv-single-flash__title,
.rv-single-promo__icon,
.rv-single-promo__note {
  animation: rv-flash-blink 1s ease-in-out infinite;
}

/* ---- Trust row (Mẫu 3): ONE card, three equal cells, hairline dividers — same idiom as
   .rv-buy__cod. Dividers come from a 1px grid gap letting the card background show through,
   which keeps them crisp without per-cell border bookkeeping.
   Mẫu 3 sets the icon beside the text, but its artboard is ~2x the real column: a third of
   the live 328px mobile column is ~109px, leaving only ~63px next to a 22px icon — every
   label would wrap mid-phrase ("Produk / original"). Stacking the icon centres each cell and
   frees the full ~98px, so all three labels hold one line on a real phone. ---- */
.rv-single-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  background: var(--color-border, #e5e7eb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 14px);
  overflow: hidden;
}
.rv-single-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 11px 5px;
  text-align: center;
  background: var(--color-bg-alt, #fdfdfd);
}
.rv-single-trust__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: var(--color-heading, #121212);
}
.rv-single-trust__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-single-trust__label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-heading, #121212);
}
.rv-single-trust__sub {
  font-size: 11px;
  line-height: 1.3;
  color: var(--color-text-muted, #64748b);
}

/* ---- "Delivery details" section label above the fields (per Mẫu 3) ---- */
.rv-single-fieldshead {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font: 800 clamp(15px, 1.7vw, 16px)/1.2 var(--font-body);
  color: var(--color-heading, #121212);
}
.rv-single-fieldshead svg {
  width: 30px;
  height: 30px;
  padding: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-heading, #121212);
  color: #fff;
}

/* ---- Total line, directly above the CTA ---- */
.rv-single-total {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 3px;
  justify-content: center;
  margin: 2px 0 12px;
  text-align: center;
}
.rv-single-total__label {
  font: 700 15px/1.3 var(--font-body);
  color: var(--color-heading, #121212);
}
.rv-single-total__amount {
  font: 800 clamp(20px, 2.6vw, 24px)/1.2 var(--font-body);
  letter-spacing: -0.01em;
  color: var(--color-cta, #54b94a);
}
.rv-single-total__note {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  color: var(--color-text-secondary, #475569);
}
.rv-single-total__note svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* ---- Reassurance notes below the CTA. Full sentences, so they read as a left-aligned
   stack (the marketplace pattern) rather than the centred chip row this replaced —
   centring wrapped sentences produces ragged, hard-to-scan text. ---- */
.rv-single-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.rv-single-notes__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-secondary, #475569);
}
.rv-single-notes__item svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  /* Optical align to the first text line rather than the flex box top. */
  margin-top: 1px;
  color: var(--color-heading, #121212);
}
.rv-single-notes__link {
  color: var(--color-heading, #121212);
  font-weight: 700;
  text-decoration: underline;
}

/* ---- Promo box (own card below the form card, per Mẫu 3) ---- */
/* One line of copy now that the expiry is gone, so centre the note against the icon
   instead of top-aligning a two-line stack. __body / __deadline removed with it. */
.rv-single-promo {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  padding: 13px 16px;
  background: linear-gradient(180deg, #fffaf0, var(--color-gold-tint, #fef3c7));
  border: 1px solid var(--color-gold-soft, #fbbf24);
  border-radius: var(--radius-lg, 20px);
}
.rv-single-promo__icon {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: var(--color-promo, #c76728);
}
.rv-single-promo__note {
  margin: 0;
  min-width: 0;
  font: 800 14px/1.4 var(--font-body);
  /* Deliberately NOT a brand token: --color-heading/--color-navy are site-overridden and
     a mid-tone brand colour (vitalklik's teal) only reaches ~4.5:1 on this amber. */
  color: var(--color-promo-deep, #7c2d12);
}

/* ---- Single-mode order CTA: uppercase label + a slow, steady pulse (operator call).
   Scoped to this one button via .rv-single-cta — NOT a change to the base .rv-btn-primary,
   which the hero CTA, sticky CTA, header CTA and every other button on the site also use.
   Same ring idiom as the flash box above, just slower (2.4s vs 1s) so the CTA doesn't compete
   with the countdown for attention — it should feel calmer, not more urgent. */
.rv-single-cta .rv-btn-primary__label {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
@keyframes rv-cta-ring {
  0%   { box-shadow: var(--shadow-cta), 0 0 0 0 rgba(var(--color-cta-rgb), 0.5); }
  70%  { box-shadow: var(--shadow-cta), 0 0 0 12px rgba(var(--color-cta-rgb), 0); }
  100% { box-shadow: var(--shadow-cta), 0 0 0 0 rgba(var(--color-cta-rgb), 0); }
}
.rv-single-cta {
  animation: rv-cta-ring 2.4s ease-out infinite;
}
/* The animation drives box-shadow every frame, so it already overrides the static
   `box-shadow: var(--shadow-cta) !important` from the WELLNESS NEST layer without needing
   !important of its own — but :hover/:active there also set box-shadow !important on
   interaction, which would otherwise freeze the ring at whatever frame the pointer landed
   on. Pause on interaction instead: reads as intentional (the button is "listening"),
   not a glitch. */
.rv-single-cta:hover,
.rv-single-cta:active,
.rv-single-cta:focus-visible {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .rv-single-flash__title,
  .rv-single-promo__icon,
  .rv-single-promo__note,
  .rv-single-cta {
    animation: none;
  }
}

@media (max-width: 767px) {
  .rv-single-product { padding: 11px; gap: 10px; }
  .rv-single-product__media { width: 124px; }
  .rv-single-flash { padding: 11px; gap: 8px; }
  .rv-single-flash__unit { min-width: 34px; }
  .rv-single-trust__item { padding: 10px 5px; }
  .rv-single-promo { padding: 13px; gap: 10px; }
}