@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("/fonts/libre-franklin-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-latin.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
/* Brand accent colours, 2026-09-02.
   The captured design used the source brand's pinks; VitaRoja's bottle and logo
   are red. #B81820 is sampled straight from logo-vitaroja.webp, where it is the
   dominant hue; #C8262E is that hue lifted, standing in for the lighter pink.
   Changing the shade later is an edit to these two lines and nothing else.
   The pale pinks #ECDCE6 and #FFF2FA are section/text backgrounds and were
   deliberately left alone. */
:root {
  --vr-red: #B81820;
  --vr-red-light: #C8262E;
}

html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; }
img { max-width: 100%; }
[data-runtime-hidden="true"] { display: none !important; }
.runtime-cart-open { overflow: hidden; }
/* Project-owned mini-cart. Local only: it shows what the visitor picked and
   nothing else — the checkout button stays inert until phase 5 wires a real
   commerce adapter. Redesigned 2026-09-03, then given a second, more
   deliberately "chula" pass the same day at the owner's request: rounded
   panel, soft shadows and colour chips throughout rather than flat borders,
   a visual 3-step progress toward the best pack alongside the upsell copy.
   Still built to read as trustworthy right where someone is about to pay,
   and to nudge whichever pack is short of the best one toward it (see
   fillCart's upsell wiring in app.js). */
.vr-cart { position: fixed; inset: 0; z-index: 500; visibility: hidden; opacity: 0; transition: opacity .25s ease; }
.vr-cart[data-open="true"] { visibility: visible; opacity: 1; }
.vr-cart__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.vr-cart__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(430px, 100%);
  background: #fff; box-shadow: -12px 0 40px rgba(0, 0, 0, .2); border-radius: 20px 0 0 20px;
  overflow: hidden; transform: translateX(100%); transition: transform .32s cubic-bezier(.22, 1, .36, 1);
  display: flex; flex-direction: column;
  /* body sets no font-family at all, so any text inside the cart that forgot
     its own font-family (found 2026-09-04: .vr-cart__meta, __ship,
     __progressLabel, __trustItem, __note all had) fell back to the
     browser's serif default instead of quietly inheriting Montserrat.
     Set once here, at the root of the cart, rather than repeated on every
     rule — the safer fix against the same gap opening again on the next
     addition. */
  font-family: "Montserrat", sans-serif;
}
.vr-cart[data-open="true"] .vr-cart__panel { transform: translateX(0); }
.vr-cart__head {
  display: flex; align-items: center; justify-content: space-between; column-gap: 12px;
  padding: 20px 22px; background: linear-gradient(180deg, #fff 0%, #fdfafa 100%); border-bottom: 1px solid #f0e6e7;
}
.vr-cart__title {
  display: flex; align-items: center; column-gap: 10px; margin: 0;
  font-family: "Montserrat", sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -.32px; color: #000;
}
.vr-cart__titleIcon {
  flex: 0 0 auto; width: 20px; height: 20px; padding: 7px; box-sizing: content-box;
  color: var(--vr-red); background: rgba(184, 24, 32, .1); border-radius: 50%;
}
.vr-cart__close {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  background: #f4f4f4; border: 0; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer;
  color: #666; transition: background .15s ease, color .15s ease;
}
.vr-cart__close:hover { background: var(--vr-red); color: #fff; }
.vr-cart__body { padding: 20px 22px 4px; overflow: auto; flex: 1; }
.vr-cart__row {
  box-sizing: border-box; display: flex; gap: 14px; align-items: center; width: 100%;
  padding: 14px; background: #fbfbfb; border: 1px solid #f0f0f0; border-radius: 14px;
}
/* No quantity badge on the photo, at the owner's request: the pack image
   and the name already say how many bottles are in it. */
.vr-cart__img {
  display: block; flex: 0 0 auto; width: 68px; height: 68px; object-fit: contain; background: #fff;
  border-radius: 10px; border: 1px solid #eee; box-shadow: 0 4px 10px rgba(0, 0, 0, .06);
}
.vr-cart__info { flex: 1 1 auto; min-width: 0; }
.vr-cart__name { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -.32px; color: #000; }
.vr-cart__meta { font-size: 13px; color: #666; margin-top: 3px; }
.vr-cart__ship {
  display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px;
  background: rgba(19, 93, 75, .1); font-size: 11px; font-weight: 700; color: #135d4b;
}
.vr-cart__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; row-gap: 8px; }
.vr-cart__linePrice { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 15px; color: #000; }
/* The trash icon and the stepper both change *which pack* is selected —
   there is only ever one line, the pack the visitor picked, so "removing"
   it closes the cart rather than leaving an empty-cart state this
   single-product page has no other use for. +/- step between the three
   pack tiers (see app.js), disabled at each end rather than allowed to
   go past 1 or 3. */
.vr-cart__remove {
  display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  padding: 0; border: 0; background: none; color: #135d4b; cursor: pointer; opacity: .8;
}
.vr-cart__remove:hover { opacity: 1; }
.vr-cart__remove svg { width: 15px; height: 15px; }
.vr-cart__stepper {
  display: flex; align-items: center; column-gap: 2px; background: #f2f2f2; border-radius: 8px; padding: 3px;
}
.vr-cart__stepButton {
  display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border: 0; border-radius: 6px; background: #fff; color: #333; font-size: 15px; font-weight: 600;
  line-height: 1; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); transition: opacity .15s ease;
}
.vr-cart__stepButton:hover { background: #fdf2f2; color: var(--vr-red); }
.vr-cart__stepButton:disabled { background: transparent; box-shadow: none; color: #ccc; cursor: default; }
.vr-cart__stepValue {
  min-width: 26px; text-align: center; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 700; color: #000;
}
/* The upsell box: a soft brand-tinted gradient and an icon chip, since this
   is meant to read as an offer worth noticing, not a plain callout. Hidden
   entirely on the top pack via .vr-cart__upsellButton[hidden] — the
   reassurance line and the now-full progress bar still show. */
.vr-cart__upsell {
  margin-top: 14px; padding: 16px; background: linear-gradient(155deg, rgba(184, 24, 32, .08), rgba(184, 24, 32, .02));
  border: 1px solid rgba(184, 24, 32, .16); border-radius: 14px;
}
.vr-cart__upsellHead { display: flex; align-items: center; column-gap: 10px; }
.vr-cart__upsellIcon {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 6px;
  color: var(--vr-red); background: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(184, 24, 32, .18);
}
/* Neither icon's own <svg> carries a width/height attribute (only a
   viewBox), so without this it has no intrinsic size to fall back on
   inside a flex container — invisible on real iOS Safari even though
   Chromium's own flex layout papers over it. The same class of bug this
   project already hit once on .vr-cart__cta's lock icon. */
.vr-cart__upsellIcon svg { width: 16px; height: 16px; }
/* The top pack gets a green check instead of the red gift icon — a
   confirmation, not another offer. */
.vr-cart__upsellIcon--done { color: #135d4b; box-shadow: 0 2px 6px rgba(19, 93, 75, .18); }
.vr-cart__upsellIcon[hidden] { display: none; }
.vr-cart__upsellTitle { flex: 1 1 auto; font-family: "Montserrat", sans-serif; font-size: 14.5px; font-weight: 700; letter-spacing: -.32px; color: #000; }
.vr-cart__upsellDelta { flex: 0 0 auto; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 700; color: var(--vr-red); }
.vr-cart__upsellText {
  margin: 8px 0 0; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 500;
  line-height: 145%; letter-spacing: -.32px; color: #444;
}
.vr-cart__progress { display: flex; align-items: center; column-gap: 5px; margin: 12px 0 0; }
.vr-cart__progressStep { flex: 1 1 0; height: 5px; border-radius: 999px; background: rgba(184, 24, 32, .14); transition: background .25s ease; }
.vr-cart__progressStep.is-filled { background: var(--vr-red); }
.vr-cart__progressLabel { margin: 6px 0 0; font-size: 11.5px; font-weight: 600; color: #888; }
.vr-cart__upsellButton {
  display: block; width: 100%; margin-top: 12px; padding: 12px;
  border: 0; border-radius: 10px; background: var(--vr-red); color: #fff; font-family: "Montserrat", sans-serif;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.32px; text-align: center; cursor: pointer;
  box-shadow: 0 4px 12px rgba(184, 24, 32, .28); transition: transform .15s ease, box-shadow .15s ease;
}
.vr-cart__upsellButton:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(184, 24, 32, .36); }
.vr-cart__upsellButton[hidden] { display: none; }
.vr-cart__breakdown { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #e5e5e5; }
.vr-cart__breakdownRow {
  display: flex; justify-content: space-between; font-family: "Montserrat", sans-serif; font-size: 13.5px;
  color: #666; margin-top: 8px;
}
.vr-cart__breakdownRow:first-child { margin-top: 0; }
.vr-cart__shippingCost.is-free { color: #135d4b; font-weight: 700; }
.vr-cart__total {
  display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid #eee; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 19px; color: #000;
}
.vr-cart__foot { padding: 16px 22px 22px; background: #fff; box-shadow: 0 -6px 16px rgba(0, 0, 0, .04); }
.vr-cart__cta {
  display: flex; align-items: center; justify-content: center; column-gap: 8px; width: 100%; padding: 16px;
  border: 0; border-radius: 10px; background: var(--vr-red); color: #fff; font-family: "Montserrat", sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: -.32px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(184, 24, 32, .3); transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.vr-cart__cta svg { flex: 0 0 auto; width: 14px; height: 14px; }
.vr-cart__cta:hover { background: var(--vr-red-light); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(184, 24, 32, .38); }
.vr-cart__trust { display: flex; align-items: center; justify-content: center; column-gap: 10px; margin-top: 14px; }
.vr-cart__trustItem {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; column-gap: 6px;
  padding: 9px 6px; background: #f6f9f8; border-radius: 10px; font-size: 11.5px; font-weight: 700; color: #294540;
}
.vr-cart__trustIcon {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  background: rgba(19, 93, 75, .12); border-radius: 50%; color: #135d4b;
}
.vr-cart__trustIcon svg { width: 12px; height: 12px; }
.vr-cart__note { margin: 12px 0 0; font-size: 12px; color: #999; text-align: center; }
.vr-cart__syncError {
  margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: #fdf2f2; color: var(--vr-red);
  font-family: "Montserrat", sans-serif; font-size: 12.5px; font-weight: 600; text-align: center;
}
.vr-cart__syncError[hidden] { display: none; }
.runtime-cart-open { overflow: hidden; }

/* ── Section: announcement ─────────────────────────────────────────────
   Adopted in phase 3. Reproduces the measured rendering of the captured
   utility bar: 38px tall at desktop, 28px at mobile, #135D4B ground, the
   message centred in a 1100px column. Only the first message shows; the
   slider that rotated them was dropped in phase 2. The owner settled on a
   single message in phase 4, so announcement.json now holds only that one,
   but the rule stays generic in case a second message is approved later. */
.vr-announcement { background: #135d4b; }
.vr-announcement__inner { box-sizing: border-box; max-width: 1160px; margin: 0 auto; padding: 0 30px; }
.vr-announcement__rail { display: flex; overflow: hidden; }
.vr-announcement__message {
  box-sizing: border-box; flex: 0 0 100%; margin: 0; padding: 6px 0;
  font-family: "Montserrat", sans-serif; font-size: 12px; font-weight: 600;
  line-height: 16px; letter-spacing: .5px; text-transform: uppercase;
  text-align: center; color: #fff;
}
.vr-announcement__message:not(:first-child) { display: none; }
@media (min-width: 750px) {
  .vr-announcement__message { font-size: 14px; line-height: 18px; padding: 10px 0; }
}

/* ── Section: header ───────────────────────────────────────────────────
   Adopted in phase 3. Reproduces the measured captured header: sticky,
   #f1f2f2 ground, 103px tall at desktop with the logo centred, 60px on
   mobile with the logo centred in its column and the menu button right.
   The captured mobile rule dimmed the logo with filter: brightness(.5);
   it is deliberately not reproduced, since it washes out the owner's own
   mark. See VALIDATION.md.

   Owner-requested, 2026-09-04: the mobile hamburger menu is removed —
   every link inside it (nav links, social icons) was still "#", never
   given a real destination, so it opened to a dead end. Desktop already
   showed nothing but the centred logo (the nav was removed there in an
   earlier pass); this makes mobile match rather than carrying a menu
   button that leads nowhere. A real one can be built later against real
   destinations, not restored from this dead one. */
.vr-header { background: #f1f2f2; }
.vr-header__inner {
  box-sizing: border-box; display: flex; justify-content: center; align-items: center;
  max-width: 1200px; margin: 0 auto; padding: 10px 30px;
}
.vr-header__logo {
  display: flex; align-items: center; justify-content: center; height: 37px; text-decoration: none;
}
.vr-header__logo img { display: block; width: 90px; height: auto; object-fit: contain; }

@media (min-width: 990px) {
  .vr-header__inner { padding: 20px 40px; }
  .vr-header__logo { height: 63px; }
  .vr-header__logo img { width: 200px; }
}


/* ── Section: footer ───────────────────────────────────────────────────
   Adopted in phase 3. The capture carried the same link list twice — a
   desktop-only block and a mobile-only accordion — rendered differently at
   each width. One list now serves both, with the two renderings expressed
   in CSS from measurements: 14px sentence-case left-aligned heading and a
   stacked list on mobile, 18px uppercase centred heading and an inline row
   on desktop. */
.vr-footer { background: #f1f2f2; padding: 15px 0; }
/* The odd bottom padding is measured, not chosen: it is what makes the adopted
   footer end exactly where the captured one did. */
.vr-footer__inner { box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 15px 15px 11px; }
.vr-footer__heading {
  margin: 0; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 600;
  line-height: 18.2px; color: #000; text-align: left; text-transform: none;
}
.vr-footer__nav { margin: 15px 0 0; padding: 0 0 0 6px; list-style: none; text-align: left; }
.vr-footer__nav li { line-height: 0; }
.vr-footer__link {
  display: inline-block; padding: 0 0 5px; font-family: "Montserrat", sans-serif;
  font-size: 16px; font-weight: 500; line-height: 22.4px; color: #000; text-decoration: none;
}
.vr-footer__copyright {
  margin: 48px 0 0; font-family: "Montserrat", sans-serif; font-size: 14px;
  line-height: 17px; color: #000; text-align: center;
}
.vr-footer__disclaimer {
  margin: 29px auto 0; font-family: "Montserrat", sans-serif; font-size: 10px;
  line-height: 18px; color: #000; text-align: center;
}
@media (min-width: 750px) {
  .vr-footer { padding: 20px 0; }
  .vr-footer__inner { max-width: 760px; padding: 0 0 10px; }
  .vr-footer__heading { margin: 0 0 20px; font-size: 18px; line-height: 25px; text-transform: uppercase; text-align: center; }
  /* font-size: 0 removes the whitespace between the inline-block items, which
     otherwise pushed the row 1px past its 760px column and wrapped it. */
  .vr-footer__nav { margin: 0; padding: 0 0 5px; font-size: 0; text-align: center; }
  .vr-footer__nav li { display: inline-block; margin: 0 10px; }
  .vr-footer__copyright { margin-top: 83px; }
  .vr-footer__disclaimer { margin-top: 14px; max-width: 600px; }
}

/* ── Footer/legal pages (contacto, política de privacidad, términos,
   política de reembolsos) — project-authored, 2026-09-04, not adopted
   from the reference. Shares the site's header/footer chrome and type
   scale (Montserrat, the accordion body's 16px/130% for running text) so
   these pages read as part of the same store rather than a bolted-on
   template.

   Redesigned the same day at the owner's request ("un diseño plano") —
   a coloured hero band, the intro as a callout card (the same red-tint
   gradient .vr-cart__upsell already uses, so it reads as this brand's
   own pattern rather than a new one), and each section as its own
   numbered card instead of black text on white behind a thin rule. */
.vr-legal__hero { background: #fff2fa; padding: 32px 20px 40px; }
.vr-legal__heroInner { box-sizing: border-box; max-width: 700px; margin: 0 auto; }
.vr-legal__back {
  display: inline-flex; align-items: center; column-gap: 6px; margin: 0 0 18px; font-family: "Montserrat", sans-serif;
  font-size: 14px; font-weight: 700; color: var(--vr-red); text-decoration: none;
}
.vr-legal__back:hover { text-decoration: underline; }
.vr-legal__heading {
  margin: 0; font-family: "Montserrat", sans-serif; font-size: 30px; font-weight: 700;
  line-height: 1.15; letter-spacing: -.5px; color: #000;
}
.vr-legal__updated {
  display: inline-block; margin: 14px 0 0; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, .06);
  font-family: "Montserrat", sans-serif; font-size: 12.5px; font-weight: 600; color: #555;
}
.vr-legal { background: #fff; padding: 44px 20px 60px; }
.vr-legal__inner { box-sizing: border-box; max-width: 700px; margin: 0 auto; }
.vr-legal__intro {
  margin: 0; padding: 18px 20px; background: linear-gradient(155deg, rgba(184, 24, 32, .08), rgba(184, 24, 32, .02));
  border: 1px solid rgba(184, 24, 32, .16); border-radius: 14px;
  font-family: "Montserrat", sans-serif; font-size: 16.5px; font-weight: 500; line-height: 1.5; color: #000;
}
.vr-legal__emailButton {
  display: inline-flex; align-items: center; column-gap: 10px; margin: 20px 0 0; padding: 14px 24px; border-radius: 999px;
  background: var(--vr-red); font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 700;
  color: #fff; text-decoration: none; box-shadow: 0 8px 20px rgba(184, 24, 32, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.vr-legal__emailButton:hover { background: var(--vr-red-light); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(184, 24, 32, .34); }
.vr-legal__emailButton svg { width: 18px; height: 18px; flex: 0 0 auto; }
.vr-legal__section {
  display: flex; column-gap: 14px; margin-top: 20px; padding: 22px; background: #fbfbfb;
  border: 1px solid #ececec; border-radius: 16px;
}
.vr-legal__section:first-of-type { margin-top: 32px; }
.vr-legal__sectionNumber {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--vr-red); color: #fff; font-family: "Montserrat", sans-serif;
  font-size: 14px; font-weight: 700;
}
.vr-legal__sectionHeading {
  margin: 4px 0 10px; font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 700;
  line-height: 1.3; color: #000;
}
.vr-legal__sectionBody {
  margin: 0; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 400;
  line-height: 1.55; color: #333; white-space: pre-line;
}
@media (min-width: 750px) {
  .vr-legal__hero { padding: 56px 20px 56px; }
  .vr-legal { padding: 24px 20px 80px; }
  .vr-legal__heading { font-size: 40px; }
  .vr-legal__intro { padding: 22px 26px; font-size: 18px; }
  .vr-legal__section { padding: 26px 28px; }
  .vr-legal__sectionHeading { font-size: 20px; }
}

/* ── product-page block: comparison graphic ────────────────────────────
   Adopted in phase 3. Measured from the captured block: white ground,
   60px/20px padding at desktop and 30px/20px below 750, the square image
   centred and capped at 700px. */
.vr-comparison { background: #fff; padding: 30px 20px; }
/* Two classes deep on purpose: the captured `.__pf img` rule is (0,1,1) and
   would otherwise cap this image at the container width. */
.vr-comparison .vr-comparison__image { display: block; width: 100%; max-width: 700px; height: auto; margin: 0 auto; }
@media (min-width: 750px) { .vr-comparison { padding: 60px 20px; } }

/* ── product-page block: FAQ ───────────────────────────────────────────
   Adopted in phase 3, reproducing the measured captured block. Note the
   letter-spacing on every text rule: the captured body sets 0.6px, which
   any adopted element inherits unless it says otherwise, and each of these
   overrides it with its own negative value. Omitting them made the same
   question 255px wide against the capture's 229px and cost the block 77px
   of height on the first attempt. */
.vr-faq { background: #fff; padding: 0 20px 30px; }
/* margin: 0 auto is load-bearing, not decorative, on this and every other
   `__inner` container capped at 1328px in this file: without it the block
   sits flush left above 1328px wide. Invisible at every width this project
   measures at (1280 and under, all narrower than the cap), which is exactly
   how eight of these shipped without it — found only when the owner opened
   the page in an actual wide browser window. See VALIDATION.md, 2026-09-03. */
.vr-faq__inner { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; max-width: 1328px; margin: 0 auto; }
.vr-faq__eyebrow {
  width: 100%; margin: 0 0 10px; font-family: "Montserrat", sans-serif; font-size: 16px;
  font-weight: 600; line-height: 20.8px; letter-spacing: -.32px; color: #135d4b; text-align: left;
}
.vr-faq__heading {
  width: 100%; margin: 0; font-family: "Montserrat", sans-serif; font-size: 26px;
  font-weight: 600; line-height: 33.8px; letter-spacing: -.96px; color: #000; text-align: left;
}
/* Two columns of three, as the capture had them — not a wrapping list, which
   would reorder the questions. They stack on mobile with the measured 12px
   between groups, and the same 12px sits between items at both widths. */
.vr-faq__columns { display: flex; flex-direction: column; gap: 14px; width: 100%; margin: 24px 0 0; }
.vr-faq__column { display: flex; flex-direction: column; gap: 11.75px; flex: 1 1 0; }
.vr-faq__item { border: 1px solid #e3e3e3; border-radius: 2px; }
.vr-faq__summary { display: block; cursor: pointer; list-style: none; }
.vr-faq__summary::-webkit-details-marker { display: none; }
/* Same captured widget as the product-summary accordion (Accordion3), used a
   second time here — two-level summary/header structure, icon absolutely
   positioned on the right of a relatively-positioned header, and a
   grid-template-rows transition that needs app.js to hold `open` true
   through the close, for the same reason the accordion does: native
   <details> hides its body the instant `open` goes false, with no frame to
   transition from. */
.vr-faq__header { box-sizing: border-box; position: relative; display: block; width: 100%; padding: 20px; font-size: 16px; line-height: 20.8px; }
.vr-faq__icons {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: block; width: auto; height: 14px;
}
.vr-faq__icon { display: block; width: auto; height: 100%; fill: currentcolor; }
.vr-faq__item .vr-faq__icon--minus { display: none; }
.vr-faq__item.is-open .vr-faq__icon--plus { display: none; }
.vr-faq__item.is-open .vr-faq__icon--minus { display: block; }
.vr-faq__question {
  display: block; margin-right: 10px; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 600;
  line-height: normal; letter-spacing: -.4px; color: #000;
}
.vr-faq__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s; }
.vr-faq__item.is-open > .vr-faq__body { grid-template-rows: 1fr; }
.vr-faq__bodyInner { overflow: hidden; }
.vr-faq__answer {
  margin: 0; padding: 0 20px 20px; font-family: "Montserrat", sans-serif; font-size: 15px;
  font-weight: 400; line-height: 19.5px; letter-spacing: -.32px; color: #000; white-space: pre-line;
}
@media (min-width: 750px) {
  .vr-faq { padding: 0 20px 60px; }
  .vr-faq__eyebrow, .vr-faq__heading { text-align: center; }
  .vr-faq__heading { font-size: 32px; line-height: 41.6px; }
  .vr-faq__columns { flex-direction: row; align-items: flex-start; gap: 0 40px; margin-top: 40px; }
  .vr-faq__column { gap: 17px; }
  .vr-faq__header { padding: 27px 18px; font-size: 20px; line-height: 26px; }
  .vr-faq__question { font-size: 20px; }
  .vr-faq__answer { padding: 0 18px 18px; font-size: 18px; line-height: 23.4px; }
}

/* ── product-page block: bottom reviews ────────────────────────────────
   Adopted in phase 3 from measurements. letter-spacing is written out on
   every text rule: the captured body sets 0.6px and would otherwise be
   inherited. The card title is a plain sentence, bold on the element, so
   the content string carries no markup. */
.vr-reviews { background: #fff; padding: 0 20px 30px; }
.vr-reviews__inner { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; max-width: 1328px; margin: 0 auto; }
.vr-reviews__eyebrow {
  width: 100%; margin: 0 0 10px; font-family: "Montserrat", sans-serif; font-size: 16px;
  font-weight: 600; line-height: 20.8px; letter-spacing: -.32px; color: #135d4b; text-align: left;
}
.vr-reviews__heading {
  width: 100%; margin: 0; font-family: "Montserrat", sans-serif; font-size: 26px;
  font-weight: 600; line-height: 33.8px; letter-spacing: -.96px; color: #000; text-align: left;
}
.vr-reviews__rating { display: flex; align-items: center; gap: 12px; width: 100%; margin: 16px 0 0; justify-content: flex-start; }
.vr-reviews .vr-reviews__stars { width: 104px; height: 18.2px; flex: 0 0 auto; }
.vr-reviews__ratingText {
  margin: 0; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 400;
  line-height: 18.2px; letter-spacing: -.32px; color: #000;
}
/* The captured row carries a padding-top on top of its margin: 24px on
   mobile, 40px at desktop. Without it the block runs 41px short. */
.vr-reviews__row { display: flex; flex-direction: column; gap: 24px; width: 100%; margin: 24px 0 0; padding: 24px 0 0; }
.vr-reviews__card { display: flex; flex-direction: column; }
.vr-reviews__title {
  margin: 0 0 12px; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 700;
  line-height: 16.9px; letter-spacing: -.32px; color: #000;
}
.vr-reviews__score { display: flex; align-items: center; gap: 8px; }
.vr-reviews .vr-reviews__cardStars { width: 80px; height: 14px; flex: 0 0 auto; }
.vr-reviews__scoreText {
  margin: 0; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 500;
  line-height: 15.4px; letter-spacing: normal; color: #000;
}
.vr-reviews__body {
  margin: 12px 0 0; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 400;
  line-height: 16.9px; letter-spacing: -.32px; color: #000;
}
.vr-reviews__attr { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; }
.vr-reviews .vr-reviews__avatar { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 2px; object-fit: cover; }
.vr-reviews__author {
  margin: 0; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 400;
  line-height: 16.9px; letter-spacing: -.32px; color: #000;
}
.vr-reviews__more {
  margin: 24px 0 0; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 600;
  line-height: 15px; letter-spacing: -.4px; color: #000; text-decoration: underline; cursor: pointer;
}
@media (min-width: 750px) {
  .vr-reviews { padding: 0 20px 60px; }
  .vr-reviews__eyebrow, .vr-reviews__heading { text-align: center; }
  .vr-reviews__heading { font-size: 32px; line-height: 41.6px; }
  .vr-reviews__rating { justify-content: center; }
  .vr-reviews__ratingText { font-size: 16px; line-height: 20.8px; }
  .vr-reviews__row { flex-direction: row; gap: 20px; margin-top: 40px; padding-top: 40px; }
  .vr-reviews__card { flex: 1 1 0; }
  .vr-reviews__title { font-size: 16px; line-height: 20.8px; }
  .vr-reviews__scoreText { font-size: 16px; line-height: 17.6px; }
  .vr-reviews__body { font-size: 16px; line-height: 20.8px; }
  .vr-reviews__author { font-size: 16px; line-height: 20.8px; }
  .vr-reviews .vr-reviews__avatar { width: 30px; height: 30px; flex: 0 0 30px; }
  .vr-reviews__more { margin: 40px auto 0; font-size: 20px; line-height: 22px; }
}

/* ── product-page block: cholesterol progression ───────────────────────
   Adopted in phase 3 from measurements. Each card is an image strip at
   about 39.4% of its width with the text beside it, vertically centred;
   at desktop the three cards stretch to the tallest, so the strips grow
   with them. letter-spacing is written out on every text rule. */
.vr-prog { background: #fff; padding: 60px 20px 40px; }
.vr-prog__inner { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; max-width: 1328px; margin: 0 auto; }
.vr-prog__heading {
  width: 100%; margin: 0; font-family: "Montserrat", sans-serif; font-size: 26px;
  font-weight: 600; line-height: 33.8px; letter-spacing: -.96px; color: #000; text-align: center;
}
.vr-prog__row { display: flex; flex-direction: column; gap: 20px; width: 100%; margin: 30px 0 0; align-items: stretch; }
.vr-prog__card { display: flex; flex-direction: row; align-items: center; border-radius: 5px; }
.vr-prog .vr-prog__image {
  flex: 0 0 39.4%; width: 39.4%; align-self: stretch; height: auto;
  object-fit: cover; border-radius: 5px 0 0 5px;
}
.vr-prog__text { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; min-width: 0; padding: 18px 20px; }
.vr-prog__stage {
  margin: 0; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 400;
  line-height: 16.9px; letter-spacing: -.32px; text-transform: uppercase; color: #135d4b;
}
.vr-prog__title {
  margin: 8px 0 0; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 600;
  line-height: 20.8px; letter-spacing: -.32px; color: #000;
}
.vr-prog__body {
  margin: 8px 0 0; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 400;
  line-height: 18.2px; letter-spacing: -.32px; color: #000; white-space: pre-line;
}
@media (min-width: 750px) {
  .vr-prog { padding: 60px 20px; }
  .vr-prog__heading { font-size: 32px; line-height: 41.6px; }
  .vr-prog__row { flex-direction: row; gap: 20px; margin-top: 40px; }
  .vr-prog__card { flex: 1 1 0; }
  /* align-self only: flex: 0 0 auto here made the column take its content
     width and pushed the document to 2927px. */
  .vr-prog__text { align-self: center; padding: 24px 26px; }
  .vr-prog__stage { font-size: 16px; line-height: 20.8px; }
  .vr-prog__title { margin-top: 11px; font-size: 20px; line-height: 26px; }
  .vr-prog__body { margin-top: 11px; font-size: 17px; line-height: 22.1px; }
}

/* ── product-page block: cholesterol + beetroot extract ────────────────
   Adopted in phase 3 from measurements. Three details cost two earlier
   attempts and are written out here: the bottle needs the image's own
   translateY as well as the wrapper's negative margin; the third benefit
   carries a 10px bottom margin that sets its row's height; and the four
   benefits reproduce as one wrapping row, since the capture's nested
   pairs resolve to the same widths. */
.vr-chol { background: #ecdce6; padding: 30px 20px 40px; }
.vr-chol__inner { box-sizing: border-box; display: flex; flex-direction: column; max-width: 1328px; margin: 0 auto; }
.vr-chol__top { display: flex; flex-direction: column; align-items: center; row-gap: 30px; }
.vr-chol .vr-chol__hero { width: 100%; height: auto; object-fit: cover; border-radius: 4px; }
.vr-chol__topText { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.vr-chol__heading {
  margin: 0; font-family: "Montserrat", sans-serif; font-size: 26px; font-weight: 600;
  line-height: 33.8px; letter-spacing: -.96px; color: #000; text-align: left;
}
.vr-chol__lede {
  margin: 20px 0 0; font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 400;
  line-height: 19.5px; letter-spacing: -.32px; color: #000;
}
.vr-chol__bullets { display: flex; flex-direction: column; gap: 16px; width: 100%; margin: 20px 0 0; padding: 0; list-style: none; }
.vr-chol__bullet { display: flex; align-items: flex-start; gap: 14px; }
.vr-chol .vr-chol__check { flex: 0 0 21px; width: 21px; height: 21px; }
.vr-chol__bulletText {
  font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 400;
  line-height: 19.5px; letter-spacing: -.32px; color: #000;
}
.vr-chol__card {
  display: flex; flex-direction: column; align-items: flex-start;
  margin: 30px 0 0; padding: 30px 22px 0; background: #fff2fa; border-radius: 4px;
}
.vr-chol__cardText { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.vr-chol__eyebrow {
  width: 100%; margin: 0 0 10px; font-family: "Montserrat", sans-serif; font-size: 15px;
  font-weight: 500; line-height: 19.5px; letter-spacing: -.32px; color: #000; text-align: center;
}
.vr-chol__subheading {
  width: 100%; margin: 0; font-family: "Montserrat", sans-serif; font-size: 26px; font-weight: 600;
  line-height: 33.8px; letter-spacing: -.96px; color: #000; text-align: center;
}
.vr-chol__lede2 {
  width: 100%; margin: 20px 0 0; font-family: "Montserrat", sans-serif; font-size: 15px;
  font-weight: 400; line-height: 19.5px; letter-spacing: -.32px; color: #000; text-align: center;
}
.vr-chol__benefits { display: flex; flex-wrap: wrap; column-gap: 26px; row-gap: 54px; width: 100%; margin: 26px 0 0; }
.vr-chol__benefit { display: flex; flex-direction: column; flex: 0 0 calc(50% - 13px); }
/* The capture puts a 10px bottom margin on this one item, and that is what
   makes its row 117px rather than 107px. */
.vr-chol__benefit:nth-child(3) { margin-bottom: 10px; }
/* 36px, not the first icon's intrinsic 37px: the capture renders three of the
   four at 36 and stretches the odd one, so 36 is what sets the row. */
.vr-chol .vr-chol__benefitIcon { display: block; width: 36px; height: 36px; margin: 0 auto; }
.vr-chol__benefitLabel {
  width: 100%; margin: 16px 0 0; font-family: "Montserrat", sans-serif; font-size: 14px;
  font-weight: 400; line-height: 18.2px; letter-spacing: -.32px; color: #000;
  text-align: center; white-space: pre-line;
}
.vr-chol__bottleWrap { width: 100%; margin: -60px 0 0; }
.vr-chol .vr-chol__bottle { width: 100%; height: auto; object-fit: cover; transform: translateY(75px); }
@media (min-width: 750px) {
  .vr-chol { padding: 60px 20px; }
  .vr-chol__top { flex-direction: row; align-items: center; column-gap: 70px; row-gap: 0; }
  .vr-chol .vr-chol__hero { flex: 0 0 542px; width: 542px; }
  .vr-chol__heading { font-size: 32px; line-height: 41.6px; }
  .vr-chol__lede, .vr-chol__bulletText { font-size: 16px; line-height: 20.8px; }
  .vr-chol__card { flex-direction: row; align-items: flex-start; column-gap: 80px; margin-top: 60px; padding: 50px 73px 33px 66px; }
  .vr-chol__cardText { flex: 1 1 auto; min-width: 0; }
  .vr-chol__eyebrow, .vr-chol__subheading, .vr-chol__lede2 { text-align: left; }
  .vr-chol__eyebrow { font-size: 16px; line-height: 20.8px; }
  .vr-chol__subheading { font-size: 32px; line-height: 41.6px; }
  .vr-chol__lede2 { font-size: 16px; line-height: 20.8px; }
  .vr-chol__benefits { flex-wrap: nowrap; column-gap: 44px; margin-top: 40px; }
  .vr-chol__benefit { flex: 1 1 0; }
  .vr-chol__benefitLabel { font-size: 16px; line-height: 20.8px; }
  .vr-chol__bottleWrap { flex: 0 0 440px; width: 440px; margin: -147.92px 0 0; }
  .vr-chol .vr-chol__bottle { transform: translateY(62px); }
}

/* ── product-page block: LDL protection timeline ───────────────────────
   Adopted in phase 3 from measurements. Two things are worth stating
   before anyone simplifies them:

   The breakpoint here is 1024.5px, not the 750px the blocks above use.
   That is where the capture actually switches: below it the four stages
   stack and carry a single red pill reading "<week> <title>", above it
   they sit in a row and the week becomes a plain 20px line with the
   title in its own pill. Both forms are the same two content strings,
   so the markup holds one label and the CSS decides how it reads.

   The connector line is drawn twice on purpose. `::before` is the grey
   track and `::after` the red fill painted over it, which is why only
   `::after` changes when a stage becomes active. */
.vr-timeline { background: #ecdce6; padding: 30px 20px; }
.vr-timeline__inner { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; max-width: 1328px; margin: 0 auto; }
.vr-timeline__heading {
  align-self: stretch; margin: 0; font-family: "Montserrat", sans-serif; font-size: 26px;
  font-weight: 600; line-height: 33.8px; letter-spacing: -.96px; color: #000; text-align: center;
}
.vr-timeline__track {
  display: flex; flex-direction: column; align-items: flex-start;
  row-gap: 48px; column-gap: 38px; width: 100%; margin: 30px 0 0; padding: 0; list-style: none;
}
/* The stage is the positioning context for its own rail, and it carries
   the 14px rhythm the capture kept in a separate inner column. */
.vr-timeline__stage {
  position: relative; box-sizing: border-box; display: flex; flex-direction: column;
  align-items: flex-start; row-gap: 14px; align-self: stretch; padding-left: 25px;
}
.vr-timeline__rail { position: absolute; top: 8px; left: 0; width: 1px; height: 100%; }
.vr-timeline__dot {
  box-sizing: border-box; position: relative; display: block; width: 11px; height: 11px;
  border: 4px solid #fff; border-radius: 2px; background: var(--vr-red-light);
}
.vr-timeline__stage:not(:last-child) .vr-timeline__rail::before,
.vr-timeline__stage:not(:last-child) .vr-timeline__rail::after {
  content: ""; position: absolute; left: 5px; bottom: -43px; z-index: 1;
  width: 1px; height: calc(100% + 26px); background: #000; opacity: .1; transition: opacity .3s;
}
.vr-timeline__stage.is-active .vr-timeline__rail::after {
  opacity: 1; background: var(--vr-red-light); animation: 1s forwards vr-timeline-fill;
}
.vr-timeline__stage.is-active .vr-timeline__dot { border-color: var(--vr-red-light); }
@keyframes vr-timeline-fill { 0% { opacity: .1; width: 0; } 100% { opacity: 1; width: 100%; } }
.vr-timeline__label {
  margin: 0; padding: 6px 10px 5px; border-radius: 2px; background: var(--vr-red-light);
  font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 400;
  line-height: 100%; letter-spacing: -.32px; color: #fff; text-align: left;
}
/* The separator between the two strings, not a word of copy: the capture
   sets a non-breaking space so the week never ends a line on its own. It
   hangs off the title, not the week — as a bold character it measured
   0.3px wider and tipped stage 2's pill, which fits its line by 0.16px,
   onto a second line and the page 13px taller. */
.vr-timeline__title::before { content: "\00a0"; }
.vr-timeline__week { font-weight: 700; color: #f8e71c; }
.vr-timeline__body {
  align-self: stretch; margin: 0; font-family: "Montserrat", sans-serif; font-size: 15px;
  font-weight: 400; line-height: 19.5px; letter-spacing: -.32px; color: #000; text-align: left;
}
.vr-timeline__points { display: flex; flex-direction: column; align-self: stretch; row-gap: 16px; margin: 0; padding: 0; list-style: none; }
.vr-timeline__point { display: flex; flex-direction: row; align-items: center; align-self: stretch; column-gap: 8px; }
.vr-timeline .vr-timeline__pointIcon { flex: 0 0 14px; width: 14px; height: 14px; object-fit: cover; }
.vr-timeline__pointText {
  width: fit-content; font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 500;
  line-height: 19.5px; letter-spacing: -.32px; color: #000;
}
.vr-timeline__guarantee {
  box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start;
  row-gap: 8px; width: 100%; max-width: 706px; margin: 30px auto 0; padding: 12px;
  border: 1px solid #cbddd6; border-radius: 2px;
  background: linear-gradient(270deg, #f5faf7 0, #f5faf7 100%);
}
.vr-timeline__guaranteeRow { display: flex; flex-direction: row; align-items: center; align-self: stretch; column-gap: 8px; }
.vr-timeline .vr-timeline__guaranteeIcon { flex: 0 0 21px; width: 21px; height: 21px; object-fit: cover; }
.vr-timeline__guaranteeTitle {
  align-self: stretch; width: fit-content; margin: 0; font-family: "Montserrat", sans-serif; font-size: 16px;
  font-weight: 600; line-height: 20.8px; letter-spacing: -.32px; color: #000;
}
.vr-timeline__guaranteeBody {
  align-self: stretch; margin: 0; font-family: "Montserrat", sans-serif; font-size: 14px;
  font-weight: 400; line-height: 18.2px; letter-spacing: -.32px; color: #000; text-align: left;
}
/* The capture's body copy is 15px below 767.5px and 16px above it, so the
   tablet tier is not simply the mobile one at a different padding. The
   pill's line box is written as 100% rather than 13px for the same
   reason: at 16px it has to grow with the type. */
@media (min-width: 767.5px) and (max-width: 1024.4999px) {
  .vr-timeline { padding: 40px 20px; }
  .vr-timeline__label { padding: 5px 10px; font-size: 16px; }
  .vr-timeline__body, .vr-timeline__pointText { font-size: 16px; line-height: 20.8px; }
}
@media (min-width: 1024.5px) {
  .vr-timeline { padding: 60px 20px; }
  .vr-timeline__heading { font-size: 32px; line-height: 41.6px; }
  .vr-timeline__track { flex-direction: row; row-gap: 0; margin-top: 72px; }
  .vr-timeline__stage { flex: 1 1 0; align-self: auto; padding-left: 0; }
  .vr-timeline__rail { top: -32px; width: 100%; height: auto; }
  .vr-timeline__dot { width: 16px; height: 16px; border-width: 6px; }
  .vr-timeline__stage:not(:last-child) .vr-timeline__rail::before,
  .vr-timeline__stage:not(:last-child) .vr-timeline__rail::after {
    left: 25px; bottom: 8px; width: 100%; height: 1px;
  }
  /* Above 1024.5px the pill splits: the label becomes a plain column and
     only the title keeps the red ground. */
  .vr-timeline__label {
    display: flex; flex-direction: column; align-items: flex-start; align-self: stretch;
    row-gap: 14px; padding: 0; border-radius: 0; background: none;
  }
  .vr-timeline__title::before { content: none; }
  .vr-timeline__week { align-self: stretch; font-size: 20px; font-weight: 400; line-height: 26px; color: #000; }
  .vr-timeline__title {
    padding: 7.5px 10px; border-radius: 2px; background: var(--vr-red-light);
    font-size: 16px; line-height: 100%; color: #fff;
  }
  .vr-timeline__body { font-size: 16px; line-height: 20.8px; }
  .vr-timeline__pointText { flex: 1 1 0; width: auto; font-size: 16px; line-height: 20.8px; }
  .vr-timeline__guarantee { margin-top: 54px; padding: 24px; row-gap: 8px; }
  .vr-timeline__guaranteeTitle { flex: 1 1 0; align-self: auto; width: auto; font-size: 20px; line-height: 26px; }
  .vr-timeline__guaranteeBody { font-size: 16px; line-height: 20.8px; }
}

/* ── product-page block: reported results ──────────────────────────────
   Adopted in phase 3 from measurements at 1280, 900, 390 and 320. Line
   heights are written the way the capture writes them — relative where
   the font size changes between tiers — because the type here is 15px
   below 767.5px and 16px above it, and a resolved px line box would be
   wrong on one side of that.

   The three survey figures come from src/content/socialProof.json, and
   each one sits with the claim it belongs to. src/app.js reads the
   figure's own text as its animation target, so it has to stay text. */
.vr-results { background: #fff; padding: 30px 20px; }
.vr-results__inner { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; max-width: 1328px; margin: 0 auto; }
.vr-results__card {
  align-self: stretch; display: flex; flex-direction: column; align-items: flex-start;
  padding: 0 0 30px; background: #ecdce6; border-radius: 4px;
}
/* column-reverse, so one DOM order gives the photo above the copy on a
   phone and beside it on a desktop. */
.vr-results__top { align-self: stretch; display: flex; flex-direction: column-reverse; align-items: flex-start; row-gap: 20px; }
.vr-results__intro { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; padding: 0 16px; }
.vr-results__heading {
  align-self: stretch; margin: 0; font-family: "Montserrat", sans-serif; font-size: 26px;
  font-weight: 600; line-height: 1.3em; letter-spacing: -.96px; color: #000; text-align: left;
}
.vr-results__lede {
  align-self: stretch; margin: 8px 0 0; font-family: "Montserrat", sans-serif; font-size: 15px;
  font-weight: 400; line-height: 130%; letter-spacing: -.32px; color: #000; text-align: left;
}
.vr-results__stats { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; row-gap: 36px; margin: 24px 0 0; }
.vr-results__stat { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; }
.vr-results__figure {
  align-self: stretch; margin: 0; font-family: "Montserrat", sans-serif; font-size: 48px;
  font-weight: 600; line-height: 28px; letter-spacing: -1.44px; color: var(--vr-red-light);
}
.vr-results__statTitle {
  align-self: stretch; max-width: 100%; margin: 12px 0 0; font-family: "Montserrat", sans-serif;
  font-size: 20px; font-weight: 600; line-height: 1.3em; letter-spacing: -.6px; color: #000;
}
.vr-results__statBody {
  align-self: stretch; margin: 11px 0 0; font-family: "Montserrat", sans-serif; font-size: 15px;
  font-weight: 400; line-height: 130%; letter-spacing: -.32px; color: #000; text-align: left;
}
.vr-results__feature { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; max-width: 415px; }
.vr-results .vr-results__featureImage {
  align-self: stretch; width: 100%; height: auto; aspect-ratio: 1.0401002506265664;
  object-fit: cover; border-radius: 4px 4px 0 0;
}
/* The bottles are lifted out of flow on a phone and overlap the card
   above them, which is why this row is the positioning context and
   carries a 135px top margin to make room for them. */
.vr-results__bottom {
  position: relative; align-self: stretch; display: flex; flex-direction: column;
  align-items: flex-start; margin: 135px 0 0; padding: 0 16px;
}
.vr-results__bottleWrap {
  position: absolute; top: -111px; right: 15px; width: 207px; max-width: 207px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.vr-results .vr-results__bottle { align-self: stretch; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.vr-results__guarantee { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; margin: 45px 0 0; }
.vr-results .vr-results__guaranteeIcon { width: 51px; height: 65px; margin: 0 0 16px; aspect-ratio: .7846153846153846; object-fit: cover; }
.vr-results__guaranteeTitle {
  align-self: stretch; margin: 0; font-family: "Montserrat", sans-serif; font-size: 30px;
  font-weight: 600; line-height: 130%; letter-spacing: -1.2px; color: var(--vr-red-light);
}
.vr-results__guaranteeSub {
  align-self: stretch; margin: 6px 0 0; font-family: "Montserrat", sans-serif; font-size: 20px;
  font-weight: 600; line-height: 130%; letter-spacing: -.72px; color: #000;
}
.vr-results__guaranteeBody {
  align-self: stretch; margin: 16px 0 0; font-family: "Montserrat", sans-serif; font-size: 15px;
  font-weight: 400; line-height: 130%; letter-spacing: -.32px; color: #000; text-align: left;
}
.vr-results__points { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; row-gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.vr-results__point { display: flex; flex-direction: row; align-items: center; column-gap: 8px; }
.vr-results .vr-results__pointIcon { flex: 0 0 16px; width: 16px; height: 16px; object-fit: cover; }
.vr-results__pointText {
  width: fit-content; font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 500;
  line-height: 130%; letter-spacing: -.32px; color: #000;
}
@media (min-width: 767.5px) {
  .vr-results__lede, .vr-results__statBody, .vr-results__guaranteeBody, .vr-results__pointText { font-size: 16px; }
  .vr-results__guaranteeSub { font-size: 24px; }
}
@media (min-width: 767.5px) and (max-width: 1024.4999px) {
  .vr-results { padding: 40px 20px; }
  .vr-results__intro, .vr-results__bottom { padding: 0 23px; }
  .vr-results__bottom { margin-top: 143px; }
  .vr-results__guarantee { margin-top: 0; }
  .vr-results__guaranteeTitle { font-size: 36px; line-height: 1.2em; }
  .vr-results__point { align-self: stretch; }
  /* The photo runs the full card width in this tier only; the 415px cap
     is the desktop column's, and it does not apply here. */
  .vr-results__feature { max-width: 100%; }
}
@media (min-width: 1024.5px) {
  .vr-results { padding: 60px 20px; }
  .vr-results__card { padding: 60px 45px 50px; }
  .vr-results__top { flex-direction: row; column-gap: 11px; row-gap: 0; }
  .vr-results__intro { flex: 1 1 0; align-self: auto; padding: 0; }
  .vr-results__heading { margin-top: 16px; font-size: 32px; }
  .vr-results__stats { flex-direction: row; column-gap: 16px; row-gap: 0; margin-top: 36px; }
  .vr-results__stat { flex: 1 1 0; align-self: auto; }
  /* 202px on the outer two and 100% on the middle one is what the
     capture does, and it is what sets each column's height. */
  .vr-results__statTitle { max-width: 202px; }
  .vr-results__stat:nth-child(2) .vr-results__statTitle { max-width: 100%; }
  .vr-results__feature { flex: 1 1 0; align-self: auto; }
  .vr-results .vr-results__featureImage { border-radius: 0; }
  .vr-results__bottom { flex-direction: row; column-gap: 103px; margin-top: 75px; padding: 0; }
  .vr-results__bottleWrap { position: static; flex: 1 1 0; width: auto; margin-top: -60px; max-width: 396px; }
  .vr-results__guarantee { flex: 1 1 0; align-self: auto; margin-top: 0; }
  .vr-results__guaranteeTitle { font-size: 40px; }
  .vr-results__points { flex-direction: row; align-items: center; row-gap: 0; margin-top: 20px; }
  .vr-results__point { flex: 1 1 0; }
  .vr-results__pointText { flex: 1 1 0; width: auto; }
}

/* ── product-page block: review carousel ───────────────────────────────
   Adopted in phase 3 from measurements at 1280, 900, 390 and 320. This
   block had two stylesheets behind it — the captured Swiper bundle and
   an inline block written on top of it — and none of it applies any
   more: the rules below are everything those two contributed to what
   the page renders, under this project's names.

   The capture switches on two different boundaries and they are kept
   apart on purpose. The card's own type and padding change at 1023px,
   the panel's padding and heading at 1024.5px, and the stars and the
   rating line at 767.5px. Merging them would be wrong for the widths
   between.

   Both arrows carry the same right-pointing chevron; the capture does
   not flip the previous one, and this reproduces that. */
.vr-revs { background: #fff; padding: 0 20px 30px; }
.vr-revs__inner { position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; max-width: 1328px; margin: 0 auto; }
.vr-revs__panel {
  position: relative; box-sizing: border-box; align-self: stretch; display: flex;
  flex-direction: column; align-items: flex-start;
  padding: 30px 8px 30px 17px; background: #ecdce6; border-radius: 4px;
}
.vr-revs__heading {
  align-self: stretch; margin: 0 0 16px; font-family: "Montserrat", sans-serif; font-size: 26px;
  font-weight: 600; line-height: 1.3em; letter-spacing: -.96px; color: #000; text-align: center;
}
.vr-revs__rating { position: relative; align-self: stretch; display: flex; flex-direction: row; justify-content: center; align-items: center; column-gap: 8px; }
.vr-revs .vr-revs__stars { width: 75px; max-width: 75px; height: auto; aspect-ratio: 6.5625; object-fit: cover; }
.vr-revs__ratingText {
  margin: 0; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 600;
  line-height: 1.1em; letter-spacing: -.32px; color: #000; text-align: center;
}
/* The nav sits inside the clipped viewport, as the capture has it. */
.vr-revs__viewport { position: relative; align-self: stretch; overflow: hidden; margin: 40px 0 0; }
.vr-revs__track { display: flex; flex-direction: row; align-items: stretch; column-gap: 12px; margin: 0; padding: 0; list-style: none; }
.vr-revs__slide {
  position: relative; box-sizing: border-box; flex: 0 0 auto; display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-start; padding: 14px; background: #fff; border-radius: 2px;
}
.vr-revs__quote { align-self: stretch; }
.vr-revs__title {
  margin: 0; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 600;
  line-height: 1em; letter-spacing: -.54px; color: #000;
}
.vr-revs__score { display: flex; flex-direction: row; align-items: center; column-gap: 8px; margin: 12px 0 0; }
.vr-revs .vr-revs__scoreIcon { width: 80px; height: 14px; }
/* Positive tracking, and measured rather than assumed: the captured body
   sets 0.6px and this element never overrode it. */
.vr-revs__scoreValue {
  font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 500;
  line-height: 1.1em; letter-spacing: .6px; color: #000;
}
.vr-revs__body {
  margin: 12px 0 0; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 400;
  line-height: 130%; letter-spacing: -.32px; color: #000; white-space: pre-line;
}
.vr-revs__author { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; column-gap: 10px; margin: 16px 0 0; }
.vr-revs__authorName {
  font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 600;
  line-height: 130%; letter-spacing: -.32px; color: #000;
}
.vr-revs__nav { margin: 40px 0 0; }
.vr-revs__pagination { display: flex; flex-direction: row; justify-content: center; align-items: center; }
.vr-revs__bullet {
  box-sizing: border-box; width: 46px; height: 2px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: var(--vr-red); opacity: .2; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.vr-revs__bullet.is-active { opacity: 1; }
.vr-revs__arrows { display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; column-gap: 16px; margin: 24px 0 0; }
.vr-revs__arrow {
  box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: 0; padding: 0; border: 1px solid #000; border-radius: 50%;
  background: none; color: #000; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.vr-revs__arrow.is-disabled { opacity: .35; cursor: auto; pointer-events: none; }
.vr-revs .vr-revs__arrowIcon { width: 16px; height: 16px; }
.vr-revs__arrowIcon path { fill: #000; }
/* Both buttons share one right-pointing path, same as the capture; the
   reference rotates the icon 180deg on the prev button alone (Swiper's own
   base CSS, dropped with the rest of the vendor bundle) rather than shipping
   a mirrored path. */
.vr-revs__prev .vr-revs__arrowIcon { transform: rotate(180deg); }
@media (min-width: 767.5px) {
  .vr-revs .vr-revs__stars { width: 107px; max-width: 107px; }
  .vr-revs__ratingText { font-size: 16px; }
}
@media (min-width: 767.5px) and (max-width: 1024.4999px) {
  .vr-revs { padding-bottom: 40px; }
  .vr-revs__panel { padding: 30px 23px; }
}
/* The card's own tier, and it starts half a pixel before the panel's. */
@media (min-width: 1023.5px) {
  .vr-revs__track { column-gap: 16px; }
  .vr-revs__slide { padding: 16px 15px; }
  .vr-revs__title { font-size: 18px; }
  .vr-revs__scoreValue { font-size: 16px; }
  .vr-revs__body { font-size: 16px; }
  .vr-revs__author { margin-top: 12px; }
  .vr-revs__authorName { font-size: 14px; }
  .vr-revs__bullet { width: 78px; }
  .vr-revs__arrows { margin-top: 20px; }
}
@media (min-width: 1024.5px) {
  .vr-revs { padding-bottom: 60px; }
  .vr-revs__panel { padding: 64px 32px 60px 52px; }
  .vr-revs__heading { font-size: 32px; }
}

/* ── product-page block: product gallery ───────────────────────────────
   Adopted in phase 3, and the one place in this phase where the page
   deliberately changes. The capture froze `width: 609px` on every slide
   — the value Swiper computed on the machine the page was saved from —
   and the script that recomputed it is permanently dropped, so the
   photo was cropped at every width: 93% visible at 1280, 61% at 390 and
   49% at 320, with no way to reach the other seven on a phone.

   The numbers below are the source's own, read off the reference with
   its Swiper alive: 1 slide per view from 1024px and 1.15 under it,
   12px apart, square; thumbnails 6 per view, 10px apart, square, hidden
   under 1023.5px. Sizing is done by src/app.js from the container, so
   nothing is frozen again. Positions clamp rather than loop — the
   source loops, this project does not, and that is settled. */
.vr-gallery {
  position: relative; box-sizing: border-box; align-self: stretch;
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; max-width: 100%; padding-left: 20px;
}
.vr-gallery__viewport { position: relative; align-self: stretch; width: 100%; overflow: hidden; }
.vr-gallery__track { display: flex; flex-direction: row; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.vr-gallery__slide { flex: 0 0 auto; }
.vr-gallery .vr-gallery__image { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.vr-gallery__thumbs { display: none; }
.vr-gallery__thumbViewport { overflow: hidden; }
.vr-gallery__thumbTrack { display: flex; flex-direction: row; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.vr-gallery__thumb { flex: 0 0 auto; }
.vr-gallery__thumbButton { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.vr-gallery .vr-gallery__thumbImage {
  box-sizing: border-box; display: block; width: 100%; height: auto;
  aspect-ratio: 1; object-fit: cover; border-radius: 5px;
}
/* The selected thumbnail is the dimmed one with the grey border. That
   is the capture's design, not an inversion to tidy up. */
.vr-gallery__thumb.is-selected .vr-gallery__thumbImage { border: 2px solid #dadada; opacity: .6; }
.vr-gallery__arrow {
  position: absolute; bottom: 22px; z-index: 10; box-sizing: border-box;
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; line-height: 1;
  border: 2px solid #081c08; border-radius: 50%; background: #fff; color: #000;
  cursor: pointer; transition: .35s; -webkit-appearance: none; appearance: none;
}
.vr-gallery__thumbPrev { left: -20px; }
.vr-gallery__thumbNext { right: -20px; }
/* The capture hides a disabled thumbnail arrow outright rather than
   fading it, and with clamping instead of looping that is what the ends
   of the rail look like. */
.vr-gallery__arrow.is-disabled { display: none; }
.vr-gallery .vr-gallery__arrowIcon { width: auto; height: 15px; }
.vr-gallery__arrowIcon path { fill: currentColor; }
.vr-gallery__thumbPrev .vr-gallery__arrowIcon { transform: scaleX(-1); }
@media (min-width: 767.5px) {
  .vr-gallery { padding-left: 0; }
}
@media (min-width: 1023.5px) {
  .vr-gallery__thumbs { position: relative; display: block; align-self: stretch; width: 100%; margin-top: 8px; }
  .vr-gallery__arrow { display: flex; }
  .vr-gallery__arrow.is-disabled { display: none; }
}
@media (min-width: 1024.5px) {
  .vr-gallery { flex: 1 1 0; align-self: auto; width: calc(48.5% - 35px); max-width: calc(48.5% - 35px); }
}

/* ── product-page block: product summary head ──────────────────────────
   Adopted in phase 3. The rating line and the four benefit lines each
   pair a bold label with a sentence, and each is two content strings so
   neither half is a fragment. The punctuation between them is CSS, not
   copy — and it is not uniform, because the capture is not uniform:
   the first line separates with a non-breaking space, the second and
   fourth with a plain one, and the third has no space before its dash
   and two after it. That last one reads as a typo and is reproduced
   rather than quietly corrected; it is the owner's copy to fix. */
.vr-summary__rating { display: flex; flex-direction: row; align-items: center; align-self: stretch; column-gap: 12px; margin: 0 0 12px; }
.vr-summary__stars { width: 104px; max-width: 100%; height: auto; aspect-ratio: 5.7142857142857; object-fit: cover; }
.vr-summary__ratingText {
  margin: 0; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 400;
  line-height: 130%; letter-spacing: -.32px; color: #000; text-align: left;
}
/* 500, not the browser default 700: a captured rule sets every <b> in
   this block to 500, and 700 measured 2.94px wider on the rating line. */
.vr-summary__verdict { font-weight: 500; }
.vr-summary__title {
  align-self: stretch; margin: 0 0 12px; font-family: "Montserrat", sans-serif; font-size: 24px;
  font-weight: 600; line-height: 130%; letter-spacing: -1.2px; color: #000;
}
.vr-summary__lede {
  align-self: stretch; margin: 0; font-family: "Montserrat", sans-serif; font-size: 15px;
  font-weight: 400; line-height: 130%; letter-spacing: -.32px; color: #000;
}
.vr-summary__benefits {
  box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start;
  row-gap: 16px; width: 100%; max-width: 482px; margin: 20px 0 0; padding: 10px;
  list-style: none; background: rgba(236, 220, 230, .35); border-radius: 2px;
}
.vr-summary__benefit { display: flex; flex-direction: row; align-items: center; align-self: stretch; column-gap: 8px; }
.vr-summary__benefitIcon { flex: 0 0 16px; width: 16px; height: 16px; object-fit: cover; }
.vr-summary__benefitText {
  width: fit-content; margin: 0; font-family: "Montserrat", sans-serif; font-size: 15px;
  font-weight: 400; line-height: 130%; letter-spacing: -.32px; color: #000;
}
.vr-summary__benefitLabel { font-weight: 500; }
.vr-summary__benefitLabel::after { content: " - "; }
.vr-summary__benefit:first-child .vr-summary__benefitLabel::after { content: "\00a0- "; }
.vr-summary__benefit:nth-child(3) .vr-summary__benefitLabel::after { content: "-\00a0 "; }
@media (min-width: 767.5px) {
  .vr-summary__title { font-size: 30px; }
  .vr-summary__lede, .vr-summary__benefitText { font-size: 16px; }
  .vr-summary__benefits { padding: 16px; }
}
@media (min-width: 1024.5px) {
  .vr-summary__ratingText { font-size: 16px; }
  .vr-summary__title { font-size: 40px; }
  .vr-summary__benefitText { flex: 1 1 0; width: auto; }
}

/* ── product-page block: pack selector ─────────────────────────────────
   Adopted in phase 3. This was the kaching-bundles widget with a layer
   of this project's own rules written on top of it on 2026-09-02; both
   are gone and what follows is everything the pair rendered.

   The card box moves between two elements by tier, and that is not
   decoration. Below 768px the capture paints the filled, ringed box
   around the title, subtitle and photo only, and the price block sits
   below it on the page background; from 768px the box wraps all four.
   The capture achieved that by shipping the price block twice and
   hiding one copy; here there is one copy, and `__option` or `__box`
   carries the box depending on the width.

   The save badge's red is #e8323c, a third red that the 2026-09-02
   recolour deliberately left alone. It is not --vr-red. */
.vr-packs { align-self: stretch; width: 100%; margin: 20px 0 0; }
.vr-packs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; align-items: stretch; }
.vr-packs__card { display: flex; flex-direction: column; justify-content: flex-end; }
.vr-packs__badge {
  box-sizing: border-box; display: flex; flex-direction: row; align-items: center; justify-content: center;
  min-height: 20px; padding: 3px 8px; border: 1px solid transparent; border-radius: 4px 4px 0 0;
  font-family: "Montserrat", sans-serif; font-size: 11px; font-weight: 600; line-height: 11px;
  letter-spacing: .6px; text-align: center;
}
/* The first card has no badge, and an empty one must not reserve space. */
.vr-packs__badge:empty { display: none; }
.vr-packs__badge[data-tone="popular"] { background: var(--vr-red); border-color: var(--vr-red); color: #fff; }
.vr-packs__badge[data-tone="value"] { background: #e3f3ec; border-color: #e3f3ec; color: #020d08; }
/* flex: 1 1 auto is what makes the first card, which has no badge, fill the
   row height instead of packing to the bottom and leaving 26px empty. */
.vr-packs__option {
  position: relative; box-sizing: border-box; flex: 1 1 auto; display: flex; flex-direction: column;
  align-items: center; row-gap: 0; padding: 0;
}
.vr-packs__radio { position: absolute; width: 0; height: 0; opacity: 0; margin: 3px 3px 0 5px; pointer-events: none; }
/* The label is the hit area for the whole card, which is why it is empty
   and carries the accessible name. */
.vr-packs__hit { position: absolute; inset: 0; z-index: 1; display: block; cursor: pointer; }
/* Below 768px the box and the price block share whatever the tallest card
   in the row leaves over, half each, and each keeps its own share at its
   own bottom edge. The capture got that from two sibling flex items with
   flex: 1 1 auto; this is the same arithmetic with one fewer element. */
.vr-packs__box {
  box-sizing: border-box; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; width: 100%; padding: 13px 8px; background: #fff; border-radius: 4px;
}
.vr-packs__card:has(.vr-packs__badge:not(:empty)) .vr-packs__box { border-radius: 0 0 4px 4px; }
.vr-packs__card:has(.vr-packs__radio:checked) .vr-packs__box {
  background: rgba(236, 220, 230, .3); box-shadow: inset 0 0 0 1px var(--vr-red);
}
.vr-packs__title {
  display: block; width: 100%; margin: 0; font-family: "Montserrat", sans-serif; font-size: 14px;
  font-weight: 600; line-height: 130%; letter-spacing: -.32px; color: #000; text-align: center;
}
.vr-packs__subtitle {
  display: block; width: 100%; margin: 4px 0 0; font-family: "Montserrat", sans-serif; font-size: 11px;
  font-weight: 600; line-height: 130%; letter-spacing: -.32px; color: #666; text-align: center;
  white-space: pre-line;
}
.vr-packs .vr-packs__image { display: block; flex: 0 0 auto; width: auto; max-height: 74px; margin: 8px auto; object-fit: contain; }
.vr-packs__prices { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; }
.vr-packs__save {
  box-sizing: border-box; display: flex; align-items: center; justify-content: center; margin: 9px 0 0; padding: 4px 5px;
  border-radius: 4px; background: #e8323c; font-family: "Montserrat", sans-serif; font-size: 11px;
  font-weight: 700; line-height: 11px; letter-spacing: -.32px; color: #fff; text-align: center;
}
.vr-packs__price {
  display: block; width: 100%; margin: 9px 0 0; font-family: "Montserrat", sans-serif; font-size: 15px;
  font-weight: 700; line-height: 15px; letter-spacing: -.32px; color: #000; text-align: center;
}
.vr-packs__unit {
  display: block; width: 100%; margin: 7px 0 0; font-family: "Montserrat", sans-serif; font-size: 12px;
  font-weight: 600; line-height: 110%; letter-spacing: -.32px; color: #888; text-align: center;
}
.vr-packs__shipping {
  display: block; width: 100%; margin: 7px 0 0; font-family: "Montserrat", sans-serif; font-size: 11px;
  font-weight: 600; line-height: 120%; letter-spacing: -.32px; color: #666; text-align: center;
}
.vr-packs__shipping[data-tone="free"] { color: var(--vr-red); }
.vr-packs__shipping[data-tone="best"] { color: #135d4b; }
@media (min-width: 768px) {
  .vr-packs__grid { gap: 16px; }
  .vr-packs__badge { min-height: 26px; height: 26px; padding: 4px 12px; font-size: 13.5px; line-height: 13.5px; }
  /* From here the box is the option, so it wraps the prices too. */
  .vr-packs__option { padding: 12px; background: #fff; border-radius: 4px; }
  .vr-packs__card:has(.vr-packs__badge:not(:empty)) .vr-packs__option { border-radius: 0 0 4px 4px; }
  .vr-packs__card:has(.vr-packs__radio:checked) .vr-packs__option {
    background: rgba(236, 220, 230, .3); box-shadow: inset 0 0 0 1px var(--vr-red);
  }
  /* From 768px the option itself grows, and its slack falls below the
     prices, so neither child takes a share. */
  .vr-packs__box { flex: 0 0 auto; width: 100%; padding: 0; background: none; border-radius: 0; }
  .vr-packs__card:has(.vr-packs__badge:not(:empty)) .vr-packs__box { border-radius: 0; }
  .vr-packs__card:has(.vr-packs__radio:checked) .vr-packs__box { background: none; box-shadow: none; }
  .vr-packs__title { font-size: 15px; }
  .vr-packs__subtitle { font-size: 12px; }
  .vr-packs .vr-packs__image { max-height: 62px; }
  /* A block with the capture's own font, and the badge inline-flex inside
     it, because the 2.29px under the badge is the line box's descent
     below an inline-level box — not a margin anyone wrote. */
  .vr-packs__prices {
    flex: 0 0 auto; display: block; align-items: flex-start;
    font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 600; line-height: 28.8px; letter-spacing: .6px;
  }
  .vr-packs__save { display: inline-flex; width: 100%; padding: 4.5px; }
  .vr-packs__unit { font-size: 13px; }
  .vr-packs__shipping { font-size: 12px; }
}

/* ── product-page block: limited-time-offer divider ────────────────────
   Adopted in phase 3. Visible below 767.5px only — that is the
   capture's own design, not this project's addition, and the owner
   confirmed keeping it mobile-only on 2026-09-03. The two rules split
   whatever width the centred text leaves over, evenly; flex: 1 1 0
   gets the same result as the capture's own algebra (equal basis,
   equal shrink) without reproducing it line for line. */
.vr-offer { align-self: stretch; display: flex; align-items: center; margin: 20px 0 0; }
.vr-offer::before, .vr-offer::after { content: ""; flex: 1 1 0; border-top: 2px solid rgba(0, 0, 0, .75); }
.vr-offer__text {
  flex: 0 0 auto; padding: 0 16px; font-family: "Montserrat", sans-serif; font-size: 18px;
  font-weight: 600; letter-spacing: -.32px; line-height: 26px; color: #000; white-space: nowrap;
}
@media (min-width: 767.5px) { .vr-offer { display: none; } }

/* ── product-page block: stock line, add-to-cart, reassurance ──────────
   Adopted in phase 3. The captured button carried vendor data
   attributes (`data-checkout`, `data-soldout`, `data-adding`,
   `data-added`, `data-product-id`) and a `<kaching-bundle>` custom
   element right before it; nothing in this project ever read any of
   them, and phase 5's real commerce adapter defines its own contract,
   so all of it is dropped rather than carried forward unused. The
   button keeps the class app.js's click handler already looks for. */
.vr-summary__stock {
  align-self: stretch; display: flex; flex-direction: row; align-items: center; justify-content: center;
  column-gap: 8px; margin: 20px 0 0; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 500;
  line-height: 130%; letter-spacing: -.32px; color: #000; text-align: left;
}
.vr-summary__stockIcon { width: 13px; height: 13px; object-fit: cover; }
/* min-height is a captured, deliberate dimension at every tier — 69px
   below 1024.5px and 88px above it — not something derived from the
   text, so it is written explicitly rather than left to padding and
   line-height to produce by accident. */
.vr-summary__addToCart {
  box-sizing: border-box; align-self: stretch; width: 100%; min-height: 69px; margin: 10px 0 0; padding: 14.5px 20px;
  display: flex; align-items: center; justify-content: center; column-gap: 10px;
  border: 2px solid var(--vr-red); border-radius: 4px; background: var(--vr-red);
  font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 600; line-height: 26px;
  letter-spacing: -.72px; color: #fff; text-align: center; text-transform: uppercase; cursor: pointer;
}
/* The captured rule turns the background transparent and the text the
   brand colour on hover (the border stays, so it reads as an outline
   button) — reproduced with the project's own red token in place of
   the source's pink. */
.vr-summary__addToCart:hover { background: transparent; color: var(--vr-red); }
/* Owner-requested loading state, 2026-09-03: white background, brand-
   coloured text and a spinning ring while app.js holds the button in
   its "adding" state before the cart opens. */
.vr-summary__addToCart.is-adding { background: #fff; color: var(--vr-red); }
.vr-summary__addToCartSpinner {
  display: none; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentcolor; border-top-color: transparent; animation: vr-spin .7s linear infinite;
}
.vr-summary__addToCart.is-adding .vr-summary__addToCartSpinner { display: block; }
@keyframes vr-spin { to { transform: rotate(360deg); } }
/* column-gap is 12px below 767.5px and 16px above it in the capture —
   a difference small enough to miss, and exactly the width that was
   pushing the reassurance text's own fit-content wrap to a narrower
   line below the reference's. */
.vr-summary__reassurance {
  align-self: stretch; display: flex; flex-direction: row; align-items: center; justify-content: center;
  column-gap: 12px; margin: 5px 0 0;
}
@media (min-width: 767.5px) {
  .vr-summary__reassurance { column-gap: 16px; }
}
/* The pipe is a real sibling span, not a pseudo-element on the first
   item — the capture ships it that way, as its own flex child of the
   row, and gluing it to one item instead inflates that item's own box
   and sets the row's height from the pipe's default line-height. */
.vr-summary__reassuranceItem { display: flex; flex-direction: row; align-items: center; column-gap: 8px; }
.vr-summary__separator {
  font-family: "Montserrat", sans-serif; font-size: 19px; font-weight: 500;
  line-height: 130%; letter-spacing: -.32px; color: #000;
}
/* This slot was 12px SVG icons before the owner's 2026-09-02 emoji swap,
   and became SVG icons again on 2026-09-03 at the owner's request — the
   captured 12px/16px sizing this rule already measured is unchanged
   either way, only the emoji glyph swapped for two hand-drawn icons
   (heart, shield-check) coloured with the project's own red token
   instead of relying on emoji's fixed colour. */
.vr-summary__reassuranceEmoji { display: block; flex: 0 0 12px; width: 12px; height: 12px; line-height: 1; text-align: center; color: var(--vr-red); }
.vr-summary__reassuranceEmoji svg { display: block; width: 100%; height: 100%; }
@media (min-width: 767.5px) {
  .vr-summary__reassuranceEmoji { flex-basis: 16px; width: 16px; }
}
/* width: fit-content, the convention this file uses for every text span
   that sits beside an icon in a row: without it a block-level flex item
   with no other width constraint takes the row's leftover space rather
   than hugging its own text, which is what put the pipe 4-5px further
   right than the reference at every mobile width. */
.vr-summary__reassuranceText {
  width: fit-content; font-family: "Montserrat", sans-serif; font-size: 11px; font-weight: 400; line-height: 130%;
  letter-spacing: -.32px; color: rgba(0, 0, 0, .65);
}
/* The stock line and reassurance text are 14px/11px below 767.5px and
   16px/13px above it — a size that changes at the tier boundary, same
   as the reasoning recorded on the timeline block: read only from the
   block's own rules, it looks fixed. */
@media (min-width: 767.5px) {
  .vr-summary__addToCart { font-size: 18px; }
  .vr-summary__stock { font-size: 16px; }
  .vr-summary__reassuranceText { font-size: 13px; }
}
@media (min-width: 1024.5px) {
  .vr-summary__addToCart { min-height: 88px; font-size: 24px; }
}

/* ── product-page block: shipping/payment trust row and guarantee ──────
   Adopted in phase 3. Two boxes: a grey card with the shipping/payment
   line and the payment-icon strip, and a pink guarantee card whose
   title is the shared `product.guarantee.title` the timeline and
   results blocks already read — one string stated in three places on
   the page, not three copies.

   The "." between the two trust labels is captured copy, not a border
   or generated content — the same convention as the reassurance row's
   "|", a plain sibling span.

   The payment-icon strip was measured as a fixed 307.92px and written
   that way, on the assumption that the page's own `overflow-x: clip`
   would absorb the ~28px it overflows its 280px container by at 320px.
   It doesn't: `overflow-x: clip` on `body` doesn't stop `<html>`'s own
   scrollWidth from growing, and a fresh measurement of the reference —
   fonts settled, re-checked directly rather than trusted from the
   first pass — shows it isn't fixed-width at all. The real rule
   (`.__pf.__pf_k6M5Ym2F .pf-93_`) sets `align-self: stretch`, no
   `width`, so the image fills its flex column's content box and is
   simply capped at 308px, matching the fixed figure everywhere the
   container is wider than that and shrinking under it at 320px, where
   the reference measures 320 for `document.documentElement.scrollWidth`
   — no page-level overflow. */
.vr-summary__shipping {
  box-sizing: border-box; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start;
  row-gap: 10px; margin: 20px 0 0; padding: 15px; background: #f9f9f9; border-radius: 2px;
}
.vr-summary__shippingRow {
  align-self: stretch; display: flex; flex-direction: row; align-items: center; justify-content: center; column-gap: 16px;
}
.vr-summary__shippingItem { display: flex; flex-direction: row; align-items: center; column-gap: 8px; }
.vr-summary__shippingIcon { width: 13px; height: 13px; object-fit: cover; aspect-ratio: 1; }
.vr-summary__shippingIcon--wide { aspect-ratio: 1.3; height: auto; }
.vr-summary__shippingLabel {
  width: fit-content; font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 500;
  line-height: 130%; letter-spacing: -.32px; color: #000;
}
.vr-summary__shippingSeparator {
  font-family: "Montserrat", sans-serif; font-size: 20px; font-weight: 500; line-height: 20px;
  letter-spacing: -.32px; color: #000;
}
/* Two classes, not one: the captured .__pf img { max-width: 100% } rule
   (still live — .__pf still wraps this whole section) is a class plus a
   type selector, specificity (0,1,1), and a bare single class here would
   lose to it below 308px. align-self: stretch needs the win regardless of
   width, so the two-class compound stays. */
.vr-summary__shipping .vr-summary__payIcons { align-self: stretch; max-width: 308px; height: auto; aspect-ratio: 15.7155; object-fit: cover; }
.vr-summary__guarantee {
  box-sizing: border-box; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start;
  margin: 20px 0 0; padding: 15px; background: rgba(236, 220, 230, .35);
}
.vr-summary__guaranteeRow { align-self: stretch; display: flex; flex-direction: row; align-items: center; column-gap: 8px; }
.vr-summary__guaranteeIcon { width: 15px; height: 19px; object-fit: cover; aspect-ratio: .7894736842105263; }
.vr-summary__guaranteeTitle {
  width: fit-content; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 600;
  line-height: 130%; letter-spacing: -.32px; color: #000;
}
.vr-summary__guaranteeBody {
  align-self: stretch; margin: 8px 0 0; font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 400;
  line-height: 130%; letter-spacing: -.32px; color: #000; text-align: left;
}
@media (min-width: 767.5px) {
  .vr-summary__shipping { padding: 18px; }
  .vr-summary__guarantee { padding: 24px; }
  .vr-summary__guaranteeTitle { font-size: 20px; }
  .vr-summary__guaranteeBody { font-size: 16px; }
}

/* ── product-page block: description/results/guarantee/shipping accordion
   Adopted in phase 3. This is a different disclosure mechanism from the
   FAQ block above: the FAQ opens and closes purely on native <details>
   state, but this one needs a closing *animation*, and native details
   has none — the browser removes the content the instant `open` goes
   false. app.js keeps `open` true through the 300ms collapse and only
   clears it afterwards; the .is-open class (not the [open] attribute)
   drives both the grid-collapse transition and the icon swap, since
   during a close the two are out of sync on purpose. */
.vr-summary__accordion { align-self: stretch; width: 100%; margin: 20px 0 0; }
.vr-summary__accordionItem { border: 1px solid #e3e3e3; border-radius: 2px; }
.vr-summary__accordionItem:not(:first-child) { margin-top: 12px; }
/* Two levels, not one: the capture wraps a padded, positioned div
   inside a bare <summary>, and collapsing that into a single padded
   <summary> measured 1.5px short per item — display: list-item on the
   <summary> itself (kept, not overridden to block) contributes that
   sliver via its own line box even with the marker glyph hidden. */
.vr-summary__summary { cursor: pointer; list-style: none; }
.vr-summary__summary::-webkit-details-marker { display: none; }
.vr-summary__accordionHeader { box-sizing: border-box; position: relative; display: block; width: 100%; padding: 20px; }
.vr-summary__accordionTitle {
  display: block; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 600;
  line-height: normal; letter-spacing: -.4px; color: #000; text-align: left; margin-right: 10px;
}
.vr-summary__accordionIcon {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: block; width: auto; height: 14px;
}
.vr-summary__accordionIcon svg { display: block; width: auto; height: 100%; fill: currentcolor; }
.vr-summary__accordionIcon--minus { display: none; }
.vr-summary__accordionItem.is-open .vr-summary__accordionIcon--plus { display: none; }
.vr-summary__accordionItem.is-open .vr-summary__accordionIcon--minus { display: block; }
.vr-summary__accordionBody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s; margin-top: -12px; }
.vr-summary__accordionItem.is-open > .vr-summary__accordionBody { grid-template-rows: 1fr; }
.vr-summary__accordionBodyInner { overflow: hidden; }
.vr-summary__accordionText {
  margin: 0; padding: 0 20px; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 400;
  line-height: 20.8px; letter-spacing: -.32px; color: #000; white-space: pre-line;
}
.vr-summary__accordionText:first-child { padding-top: 20px; }
/* Missed when this block was adopted: :first-child's own padding-top was
   measured, but the closing padding-bottom the reference gives its last
   paragraph never was — invisible in "Descripción" and "Los resultados",
   where a list with its own bottom padding always closes the panel, and
   only visible in "Garantía de 90 días" and "Envíos y devoluciones",
   which end directly in text. */
.vr-summary__accordionText:last-child { padding-bottom: 20px; }
.vr-summary__accordionText--spaced { margin-top: 12px; }
.vr-summary__accordionPoints, .vr-summary__accordionWeeks {
  display: flex; flex-direction: column; row-gap: 16px; width: 100%; margin: 20px 0 0; padding: 0 20px 20px;
  list-style: none;
}
.vr-summary__accordionPoint { display: flex; flex-direction: row; align-items: center; column-gap: 8px; }
.vr-summary__accordionPointIcon { flex: 0 0 16px; width: 16px; height: 16px; object-fit: cover; }
.vr-summary__accordionPointText {
  margin: 0; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 400;
  line-height: 20.8px; letter-spacing: -.32px; color: #000;
}
.vr-summary__accordionWeek { display: flex; flex-direction: row; align-items: center; column-gap: 8px; }
.vr-summary__accordionWeekIcon { flex: 0 0 16px; width: 16px; height: 16px; object-fit: cover; align-self: flex-start; margin-top: 2px; }
.vr-summary__accordionWeekCol { display: flex; flex-direction: column; row-gap: 5px; }
.vr-summary__accordionWeekLabel {
  margin: 0; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 600;
  line-height: 20.8px; letter-spacing: -.32px; color: #000;
}
.vr-summary__accordionWeekText {
  margin: 0; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 400;
  line-height: 20.8px; letter-spacing: -.32px; color: #000;
}
@media (min-width: 1024.5px) {
  .vr-summary__accordionItem:not(:first-child) { margin-top: 17px; }
  .vr-summary__accordionHeader { padding: 27px 18px; }
  .vr-summary__accordionTitle { font-size: 20px; letter-spacing: -.4px; }
  .vr-summary__accordionText, .vr-summary__accordionPointText, .vr-summary__accordionWeekLabel, .vr-summary__accordionWeekText { padding-left: 18px; padding-right: 18px; }
  .vr-summary__accordionText:first-child { padding-top: 27px; }
  .vr-summary__accordionText:last-child { padding-bottom: 27px; }
  .vr-summary__accordionPoints, .vr-summary__accordionWeeks { padding: 0 18px 27px; }
}

/* ── product-page block: product-summary outer shell ────────────────────
   Adopted in phase 3, last of all ten inner blocks. This section and
   the .__pf/.pf-8_/.pf-9_ wrapper shared by every other adopted block
   were never touched while each inner piece was adopted one at a time
   — the captured section id, pf-9668, survived until now purely as an
   ancestor nobody had reason to open. The shared wrapper measured
   display:block, full width, zero margin/padding at every child, so it
   is removed outright rather than reproduced; nothing depended on it. */
/* Three tiers on the section's own padding, not one — 20px/0/30px below
   767.5px (each of gallery and column self-pads its own 20px sides, so
   the section stays full-bleed), 30px/20px/40px from 767.5 to 1024.4999
   (the section provides the 20px sides instead, so the column's own
   padding drops to zero), 60px/20px uniform from 1024.5 up, where the
   row switches on and the two columns' own calc() widths plus
   space-between produce the gap. */
.vr-summary { padding: 20px 0 30px; background: #fff; }
.vr-summary__layout { display: flex; flex-direction: column; align-items: flex-start; row-gap: 23px; max-width: 1328px; margin: 0 auto; }
.vr-summary__column {
  box-sizing: border-box; align-self: stretch; width: 100%; max-width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; padding: 0 20px;
}
@media (min-width: 767.5px) {
  .vr-summary { padding: 30px 20px 40px; }
  .vr-summary__column { padding: 0; }
}
@media (min-width: 1024.5px) {
  .vr-summary { padding: 60px 20px; }
  .vr-summary__layout { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .vr-summary__column { align-self: auto; flex: 1 1 0; width: calc(51.5% - 35px); max-width: calc(51.5% - 35px); }
}