/* =====================================================================
   v5 product design system — grey page, white section cards, small
   left-aligned section labels.

   Everything is scoped under `.rv-v5`, the body class added only when
   rv_design_v5 is on and only on a health_product page. Nothing here can reach
   a page the flag was not switched on for, and switching it off restores the
   4.x look with no deploy. main.css is never edited.
   ===================================================================== */

.rv-v5 {
  --v5-page-bg: #F4F6F4;
  --v5-card-bg: #FFFFFF;
  --v5-card-border: rgba(15, 32, 24, 0.08);
  --v5-radius: 16px;
  --v5-gap: 12px;
  --v5-pad-x: 16px;
  --v5-pad-y: 20px;
}

.rv-v5 .rv-main { background: var(--v5-page-bg); }

/* ---------- Sections become cards ----------
   The section keeps its id and its aria-labelledby (both are live Google Ads
   sitelink targets); only the chrome moves onto the inner container. */
.rv-v5 .rv-main > .rv-section {
  padding: 0;
  margin: 0 var(--v5-gap) var(--v5-gap);
  background: transparent !important;
  border: 0;
}
.rv-v5 .rv-main > .rv-section > .rv-container {
  width: auto;
  max-width: none;
  padding: var(--v5-pad-y) var(--v5-pad-x);
  background: var(--v5-card-bg);
  border: 1px solid var(--v5-card-border);
  border-radius: var(--v5-radius);
}
.rv-v5 .rv-main > .rv-section:last-of-type { margin-bottom: var(--v5-gap); }

/* The hero is the page's own header, not a card. */
.rv-v5 .rv-main > .rv-hero {
  margin: 0;
  background: transparent !important;
}
.rv-v5 .rv-main > .rv-hero > .rv-container {
  padding: 0;
  background: none;
  border: 0;
}

/* ---------- Section head: icon + short label, left aligned ---------- */
.rv-v5 .rv-section-head--v5 {
  max-width: none;
  margin: 0 0 16px;
  text-align: left;
}
.rv-v5 .rv-v5-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 800 19px/1.25 var(--font-body);
  letter-spacing: -0.01em;
  color: var(--color-primary-text);
}
.rv-v5 .rv-v5-label__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(var(--color-primary-rgb), 0.10);
  color: var(--color-primary);
}
.rv-v5 .rv-v5-label__icon svg { width: 17px; height: 17px; }

.rv-v5 .rv-v5-lede {
  margin: 10px 0 0;
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.5;
  /* One line of pitch, not a paragraph — the section body carries the detail. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rv-v5 .rv-v5-lede em { color: var(--color-primary); font-style: italic; }

/* ---------- Tighter inner cards ---------- */
.rv-v5 .rv-usp__card,
.rv-v5 .rv-usage__step,
.rv-v5 .rv-cod__step,
.rv-v5 .rv-ing__card {
  padding: 16px 14px;
  border-radius: 13px;
  box-shadow: none;
}
.rv-v5 .rv-usp__grid,
.rv-v5 .rv-usage__grid,
.rv-v5 .rv-cod__steps,
.rv-v5 .rv-ing__grid { gap: 10px; }

.rv-v5 .rv-icon-circle {
  width: 38px;
  height: 38px;
}
.rv-v5 .rv-icon-circle svg { width: 18px; height: 18px; }

/* The big outline numerals belonged to the full-bleed layout; inside a compact
   card they crowd the text they were meant to index. */
.rv-v5 .rv-usp__num { display: none; }

/* ---------- FAQ ---------- */
.rv-v5 .rv-faq { gap: 8px; }
.rv-v5 .rv-faq__item { border-radius: 12px; }
.rv-v5 .rv-faq__button { padding: 14px 14px; font-size: 15px; }

/* ---------- Registration proof ---------- */
.rv-v5 .rv-registration__card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.rv-v5 .rv-registration__seal {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(var(--color-primary-rgb), 0.10);
  color: var(--color-primary);
}
.rv-v5 .rv-registration__seal svg { width: 24px; height: 24px; }
.rv-v5 .rv-registration__body { flex: 1 1 200px; min-width: 0; }
.rv-v5 .rv-registration__title {
  margin: 0;
  font: 800 17px/1.3 var(--font-body);
  color: var(--color-heading);
}
.rv-v5 .rv-registration__number {
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-primary-text);
}
.rv-v5 .rv-registration__note {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.rv-v5 .rv-registration__madein {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.rv-v5 .rv-registration__madein svg { width: 15px; height: 15px; }

/* ---------- References: collapsed by default (plan §2.1) ---------- */

/* ---------- Desktop ---------- */
@media (min-width: 768px) {
  .rv-v5 {
    --v5-gap: 16px;
    --v5-pad-x: 28px;
    --v5-pad-y: 28px;
    --v5-radius: 20px;
  }
  .rv-v5 .rv-main > .rv-section {
    margin-inline: auto;
    margin-bottom: var(--v5-gap);
    max-width: 1100px;
  }
  .rv-v5 .rv-v5-label { font-size: 22px; }
  .rv-v5 .rv-v5-label__icon { width: 34px; height: 34px; }
}

/* =====================================================================
   Phase 3 — compaction.

   Measured on dobravita.com/products/uro-active at 390px before any of this:
   ingredient card 828px each (of which 340px was an empty media block for a
   product with no ingredient photos), review 437px, COD step 341px, the
   standalone trust strip 840px. The page was 14,535px — 17 screens of scrolling
   for roughly 12,000 characters of copy.

   Nothing below removes data. The ingredient and review cards are re-laid-out,
   and reviews past the third are collapsed behind a button.
   ===================================================================== */

/* ---------- Ingredients: media beside the text, not above it ---------- */
.rv-v5 .rv-ing__grid { gap: 8px; }

.rv-v5 .rv-ing__card {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: start;
  gap: 14px;
  padding: 14px;
}

.rv-v5 .rv-ing__media {
  width: 84px;
  height: 84px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.rv-v5 .rv-ing__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rv-v5 .rv-ing__media > svg { width: 30px; height: 30px; }
/* The label sat under a 340px-tall media panel; at 84px there is no room for it
   and the ingredient title says the same thing one line to the right. */
.rv-v5 .rv-ing__media-label { display: none; }

.rv-v5 .rv-ing__body { min-width: 0; }
.rv-v5 .rv-ing__body h3 {
  margin: 0 0 5px;
  font: 800 16px/1.3 var(--font-body);
  color: var(--color-heading);
}
.rv-v5 .rv-ing__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* ---------- Reviews: tighter cards, first three only ---------- */
.rv-v5 .rv-reviews__grid { gap: 8px; }
.rv-v5 .rv-review { padding: 14px; border-radius: 13px; }
.rv-v5 .rv-review__head { margin-bottom: 8px; }
.rv-v5 .rv-review__avatar { width: 38px; height: 38px; font-size: 13px; }
.rv-v5 .rv-review__quote {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
}
.rv-v5 .rv-review__badge { margin-top: 8px; font-size: 12px; }

/* Progressive disclosure. CSS cannot read an attribute value into nth-child, so
   the default rule hides everything from the 4th item (reviews, §11) and the
   opt-in variant puts items 4 and 5 back for the longer list (FAQ, §13). */
.rv-v5 [data-rv-more]:not(.is-expanded) > *:nth-child(n+4) { display: none; }
.rv-v5 [data-rv-more][data-rv-more-from="5"]:not(.is-expanded) > *:nth-child(4),
.rv-v5 [data-rv-more][data-rv-more-from="5"]:not(.is-expanded) > *:nth-child(5) { display: block; }
/* v7 §03 — recognition shows four before it collapses, not three. */
.rv-v5 [data-rv-more][data-rv-more-from="4"]:not(.is-expanded) > *:nth-child(4) { display: flex; }

.rv-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 13px 16px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-primary-text);
  font: 700 15px/1 var(--font-body);
  cursor: pointer;
}
.rv-more:hover { background: var(--color-bg-soft); }
.rv-more svg { width: 17px; height: 17px; transition: transform 180ms ease; }
.rv-more[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- COD steps ---------- */
.rv-v5 .rv-cod__step { padding: 14px; }
.rv-v5 .rv-cod__step h3 { font-size: 15px; margin-bottom: 4px; }
.rv-v5 .rv-cod__step p { font-size: 14px; line-height: 1.5; }
.rv-v5 .rv-cod__step-icon { width: 34px; height: 34px; }
.rv-v5 .rv-cod__step-icon svg { width: 17px; height: 17px; }
.rv-v5 .rv-cod__steps { gap: 8px; }

/* ---------- Usage ---------- */
.rv-v5 .rv-usage__step { padding: 14px; }
.rv-v5 .rv-usage__step h3 { font-size: 15px; }
.rv-v5 .rv-usage__step p { font-size: 14px; line-height: 1.5; }
.rv-v5 .rv-usage__num { width: 30px; height: 30px; font-size: 14px; }

/* ---------- Trust strip: same three promises the hero already made ---------- */
.rv-v5 .rv-trust { padding-block: 22px; }
.rv-v5 .rv-trust__grid { gap: 8px; }
.rv-v5 .rv-trust__item { padding: 12px; }
.rv-v5 .rv-trust__item h4 { font-size: 14px; margin-bottom: 2px; }
.rv-v5 .rv-trust__item p { font-size: 13px; line-height: 1.45; }
.rv-v5 .rv-trust .rv-icon-circle { width: 34px; height: 34px; }

/* ---------- USP cards ---------- */
.rv-v5 .rv-usp__card h3 { font-size: 15px; margin-bottom: 4px; }
.rv-v5 .rv-usp__card p { font-size: 14px; line-height: 1.5; }

/* ---------- Line clamps: REMOVED in v6 ----------------------------------
   v4.6.2 clamped usp / cod / usage / trust copy to buy back page height. The
   design brief §0 is explicit: "COMPRESS THE UI, NOT THE INFORMATION" — and the
   clamps were cutting sales copy mid-sentence with no way to read the rest.

   The height they bought (~1.5 screens) is given back deliberately. Scan speed
   now comes from hierarchy — section label, visual device, then full copy — not
   from truncation. The only survivor is the section lede, which is a one-line
   summary by definition rather than a trimmed paragraph.
   ------------------------------------------------------------------------ */

/* ---------- Leftovers found by measuring the live page at 4.6.2 ---------- */

/* main.css sets this with higher specificity, so the earlier `display:none`
   never applied and the numeral kept 21px per card. */
.rv-v5 .rv-usp__card > .rv-usp__num { display: none !important; }

/* The usage section measured 1498px: 555 grid + 445 audience + 338 warning.
   The audience list is a plain "who this is for" enumeration — it does not need
   card chrome per row. */
.rv-v5 .rv-usage__audience { margin-top: 14px; padding: 14px; }
.rv-v5 .rv-usage__audience h3,
.rv-v5 .rv-usage__audience > p { font-size: 15px; margin-bottom: 6px; }
.rv-v5 .rv-usage__audience li {
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.45;
}

/* The usage warning is a safety notice. Tightened, never clamped: truncating a
   contraindication mid-sentence is not a layout decision anyone gets to make. */
.rv-v5 .rv-usage__warning {
  margin-top: 12px;
  padding: 14px;
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- v5 hero (operator ruling C6) --------------------------------
   The 4.x hero opened with a 77-character SEO sentence set in Georgia across
   three lines. The mockup opens with the product name, big and sans, and lets a
   two-line positioning sentence carry the keyword.
   ------------------------------------------------------------------------ */
.rv-v5 .rv-hero__headrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.rv-v5 .rv-hero__name {
  margin: 0;
  font: 800 clamp(38px, 10.5vw, 54px)/1.03 var(--font-body);
  letter-spacing: -0.03em;
  color: var(--color-heading);
  overflow-wrap: break-word;
}
.rv-v5 .rv-hero__name-suffix {
  display: block;
  margin-top: 2px;
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}
.rv-v5 .rv-hero__badge-round {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3px;
  flex-shrink: 0;
  width: 86px;
  height: 86px;
  padding: 8px;
  border-radius: 50%;
  background: rgba(var(--color-primary-rgb), 0.09);
  color: var(--color-primary-text);
  text-align: center;
}
.rv-v5 .rv-hero__badge-round svg { width: 18px; height: 18px; color: var(--color-primary); }
.rv-v5 .rv-hero__badge-round small { font-size: 11px; font-weight: 800; line-height: 1.2; }

.rv-v5 .rv-hero__desc {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* The rating pill was a bordered, blurred capsule; the mockup states it as plain
   text so the product name is the only strong thing above the gallery. */
.rv-v5 .rv-hero__rating {
  padding: 0;
  background: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  margin-bottom: 10px;
}

/* ---------- Ingredients: description gets the full card width -----------
   The first pass put the 84px image beside the text, which left the copy a
   156px column — 397 characters became roughly twenty lines, so a 3-line clamp
   was hiding most of what each extract actually does. An ingredient list whose
   descriptions are cut after one clause is not worth having.

   Image and name share the top row; the description spans both columns beneath
   at ~304px, roughly double the width, and runs unclamped.
   ------------------------------------------------------------------------ */
.rv-v5 .rv-ing__card {
  grid-template-columns: 64px 1fr;
  grid-template-areas:
    "media title"
    "text  text";
  column-gap: 12px;
  row-gap: 10px;
  align-items: center;
}
.rv-v5 .rv-ing__media {
  grid-area: media;
  width: 64px;
  height: 64px;
}
.rv-v5 .rv-ing__media > svg { width: 26px; height: 26px; }

/* display:contents lets the h3 and p sit directly on the card grid, so the
   description can span a column the wrapper would otherwise have boxed it into. */
.rv-v5 .rv-ing__body { display: contents; }
.rv-v5 .rv-ing__body h3 { grid-area: title; align-self: center; margin: 0; }
.rv-v5 .rv-ing__body p {
  grid-area: text;
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

/* ---------- Consultation sheet ------------------------------------------ */

.rv-consult__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.rv-consult__note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--color-primary); }

.rv-consult__alt,
.rv-consult__secondary {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 13px;
  background: none;
  border: 0;
  color: var(--color-primary-text);
  font: 700 15px/1 var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rv-consult__secondary {
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  text-decoration: none;
}

/* ---------- Consultation: confirmation state ---------- */
.rv-consult__done-head { text-align: center; padding-top: 8px; }
.rv-consult__check {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #ffffff;
}
.rv-consult__check svg { width: 32px; height: 32px; stroke-width: 3; }
.rv-consult__done-sub {
  margin: 8px 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.rv-consult__steps { list-style: none; margin: 0 0 16px; padding: 0; }
.rv-consult__step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
}
.rv-consult__step-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--v5-card-border);
  background: rgba(var(--color-primary-rgb), 0.07);
  color: var(--color-primary);
}
.rv-consult__step-icon svg { width: 18px; height: 18px; }
.rv-consult__step-body { min-width: 0; }
.rv-consult__step-body strong {
  display: block;
  font: 700 15px/1.3 var(--font-body);
  color: var(--color-primary-text);
}
.rv-consult__step-body small {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-secondary);
}

.rv-consult__info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  padding: 13px;
  border-radius: 12px;
  background: var(--color-bg-soft);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.rv-consult__info svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-primary); }

/* =====================================================================
   v6 — visual storytelling. Design brief: preserve information depth,
   upgrade hierarchy. Nothing here truncates copy.
   ===================================================================== */

/* ---------- Hero quick benefits (scan layer, §3) ---------- */
.rv-v5 .rv-hero__quick {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.rv-v5 .rv-hero__quick-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-text);
}
.rv-v5 .rv-hero__quick-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-primary);
}

/* ---------- Product facts (§4) ---------- */
.rv-v5 .rv-facts__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.rv-v5 .rv-facts__card {
  padding: 14px 12px;
  border: 1px solid var(--v5-card-border);
  border-radius: 13px;
  background: var(--color-bg-soft);
}
.rv-v5 .rv-facts__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  border-radius: 9px;
  background: rgba(var(--color-primary-rgb), 0.10);
  color: var(--color-primary);
}
.rv-v5 .rv-facts__icon svg { width: 17px; height: 17px; }
.rv-v5 .rv-facts__label {
  margin: 0 0 3px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.rv-v5 .rv-facts__value {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text);
}

/* ---------- Benefits: scan strip + editorial detail (§5) ---------- */
/* A scan layer you have to drag sideways is not a scan layer. The first version
   was a one-row horizontal scroller, which on Polish titles ("Ostatnie krople
   przestają parzyć") showed one and a half chips and hid the rest — the reader had
   no idea the other benefits existed, which is the exact opposite of the job.
   Wrapped grid instead: two rows, everything visible at a glance. */
.rv-v5 .rv-usp__scan {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
.rv-v5 .rv-usp__scan-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--v5-card-border);
  border-radius: 11px;
  background: var(--color-bg-soft);
  color: var(--color-primary-text);
  font: 700 14px/1.35 var(--font-body);
  text-decoration: none;
}
.rv-v5 .rv-usp__scan-link svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-primary); }

.rv-v5 .rv-usp__story { display: grid; gap: 10px; }
.rv-v5 .rv-usp__block {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 16px 14px;
  border: 1px solid var(--v5-card-border);
  border-radius: 13px;
  scroll-margin-top: 76px;
}
.rv-v5 .rv-usp__index {
  margin: 0;
  font: 800 15px/1 var(--font-body);
  color: var(--color-primary);
  opacity: 0.55;
}
.rv-v5 .rv-usp__block-body h3 {
  margin: 10px 0 6px;
  font: 800 17px/1.3 var(--font-body);
  color: var(--color-heading);
}
.rv-v5 .rv-usp__block-body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .rv-v5 .rv-facts__grid { grid-template-columns: repeat(4, 1fr); }
  .rv-v5 .rv-usp__story { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .rv-v5 .rv-usp__scan { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- v6 Phase 2 ---------------------------------------------------- */

/* Formula map (§6B).
   First attempt was a 1fr/20px/1fr row: both columns ended up ~140px, long role
   names wrapped to four lines, and the result read as a cramped table rather than
   a map. Now each role is its own card — icon + role as a heading, the verified
   ingredients as chips underneath — so the eye gets "this role, these extracts"
   in one movement instead of tracking across a narrow arrow. */
.rv-v5 .rv-formula__map { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rv-v5 .rv-formula__card {
  padding: 15px 14px;
  border: 1px solid var(--v5-card-border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.05), transparent 70%);
}
.rv-v5 .rv-formula__role {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 11px;
  font: 800 16px/1.35 var(--font-body);
  color: var(--color-heading);
}
.rv-v5 .rv-formula__role-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #ffffff;
}
.rv-v5 .rv-formula__role-icon svg { width: 15px; height: 15px; }
.rv-v5 .rv-formula__chips {
  list-style: none;
  margin: 0;
  padding: 0 0 0 35px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rv-v5 .rv-formula__chip {
  padding: 6px 11px;
  border: 1px solid rgba(var(--color-primary-rgb), 0.3);
  border-radius: var(--radius-pill);
  background: #ffffff;
  font: 600 13px/1.3 var(--font-body);
  color: var(--color-primary-text);
}

/* How the formula works (§7).
   The extracts converge into one statement, so the layout says that: a labelled
   cluster, a connector, then the synthesis in a tinted card. The plain pill row
   with "+" separators read as a list of parts, not as parts working together. */
.rv-v5 .rv-howformula__flow { position: relative; text-align: center; padding-bottom: 26px; }
.rv-v5 .rv-howformula__count {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.rv-v5 .rv-howformula__nodes {
  list-style: none;
  margin: 0;
  padding: 14px 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  border: 1px dashed rgba(var(--color-primary-rgb), 0.35);
  border-radius: 14px;
  background: rgba(var(--color-primary-rgb), 0.04);
}
.rv-v5 .rv-howformula__node {
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  border: 1px solid var(--v5-card-border);
  font: 700 13px/1 var(--font-body);
  color: var(--color-primary-text);
}
/* Connector from the cluster down into the conclusion. */
.rv-v5 .rv-howformula__join {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 24px;
  transform: translateX(-50%);
  background: rgba(var(--color-primary-rgb), 0.35);
}
.rv-v5 .rv-howformula__join::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 9px;
  height: 9px;
  transform: translate(-50%, 45%) rotate(45deg);
  border-right: 2px solid rgba(var(--color-primary-rgb), 0.35);
  border-bottom: 2px solid rgba(var(--color-primary-rgb), 0.35);
}
.rv-v5 .rv-howformula__out {
  padding: 16px 15px;
  border: 1px solid rgba(var(--color-primary-rgb), 0.22);
  border-radius: 14px;
  background: rgba(var(--color-primary-rgb), 0.06);
}
.rv-v5 .rv-howformula__summary {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
}

/* Usage timeline (§8) — a rail behind numbered markers. */
.rv-v5 .rv-timeline { list-style: none; margin: 0; padding: 0; }
.rv-v5 .rv-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding-bottom: 18px;
}
.rv-v5 .rv-timeline__item:last-child { padding-bottom: 0; }
.rv-v5 .rv-timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 36px;
  bottom: 4px;
  width: 2px;
  background: var(--v5-card-border);
}
.rv-v5 .rv-timeline__marker {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #ffffff;
  font: 800 15px/1 var(--font-body);
  z-index: 1;
}
.rv-v5 .rv-timeline__body h3 {
  margin: 6px 0 5px;
  font: 800 16px/1.3 var(--font-body);
  color: var(--color-heading);
}
.rv-v5 .rv-timeline__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

/* Caution panel (§9) — amber, titled, never a footnote and never clamped. */
.rv-v5 .rv-caution {
  margin-top: 18px;
  padding: 15px;
  border: 1px solid #E8C77A;
  border-left: 3px solid #D89B2C;
  border-radius: 12px;
  background: #FDF7EC;
}
.rv-v5 .rv-caution__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
  font: 800 14px/1.3 var(--font-body);
  color: #8A5A10;
}
.rv-v5 .rv-caution__title svg { width: 17px; height: 17px; flex-shrink: 0; }
.rv-v5 .rv-caution__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #6B4A14;
}

/* Suitability panel (§9) — the green counterpart to the amber caution. */
.rv-v5 .rv-usage__audience {
  margin-top: 18px;
  padding: 15px;
  border: 1px solid rgba(var(--color-primary-rgb), 0.28);
  border-left: 3px solid var(--color-primary);
  border-radius: 12px;
  background: rgba(var(--color-primary-rgb), 0.05);
}

/* Why order here (§10) */
.rv-v5 .rv-whychoose__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.rv-v5 .rv-whychoose__card {
  padding: 15px 14px;
  border: 1px solid var(--v5-card-border);
  border-radius: 13px;
}
.rv-v5 .rv-whychoose__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 9px;
  border-radius: 10px;
  background: rgba(var(--color-primary-rgb), 0.10);
  color: var(--color-primary);
}
.rv-v5 .rv-whychoose__icon svg { width: 17px; height: 17px; }
.rv-v5 .rv-whychoose__card h3 {
  margin: 0 0 5px;
  font: 800 16px/1.3 var(--font-body);
  color: var(--color-heading);
}
.rv-v5 .rv-whychoose__card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .rv-v5 .rv-whychoose__grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .rv-v5 .rv-formula__map { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- v6 Phase 3 ---------------------------------------------------- */

/* Reviews (§11). Warmer cards, initials avatars only — never a photoreal face
   presented as a real customer. No rating distribution bar: the product carries
   1,110 reviews in aggregate but ships 5 review bodies, so a histogram drawn from
   5 samples sitting next to "1,110" would imply data that does not exist. */
.rv-v5 .rv-rating-aggregate {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--v5-card-border);
  border-radius: 13px;
  background: var(--color-bg-soft);
}
.rv-v5 .rv-rating-aggregate__top { display: flex; align-items: center; gap: 9px; }
.rv-v5 .rv-rating-aggregate__num { font: 800 30px/1 var(--font-body); color: var(--color-heading); }
.rv-v5 .rv-rating-aggregate__count { margin: 0; font-size: 13px; line-height: 1.4; color: var(--color-text-secondary); }
.rv-v5 .rv-review__avatar {
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary-text);
  font-weight: 800;
}
.rv-v5 .rv-review__badge { color: var(--color-primary-text); font-weight: 700; }

/* ---------------------------------------------------------------- UGC photo strip
 * (v4.33.0) Customer-style photos of the product in hand, looping slowly under the
 * reviews head — see template-parts/sections/ugc-strip.php. It bleeds to the card's
 * edge (negative --v5-pad-x) so the band reads as a window onto a longer row, and a
 * soft mask on both ends hides the tiles entering and leaving. Tiles carry their
 * gutter as margin, not flex gap, so the half-track is an exact multiple and the
 * -50% translate loops without a jump.
 */
.rv-v5 .rv-ugc {
  overflow: hidden;
  margin: 0 calc(-1 * var(--v5-pad-x)) 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.rv-v5 .rv-ugc__track {
  display: flex;
  width: max-content;
  padding-left: 6px;
  animation: rv-ugc-scroll var(--rv-ugc-dur, 40s) linear infinite;
  will-change: transform;
}
.rv-v5 .rv-ugc:hover .rv-ugc__track { animation-play-state: paused; }
.rv-v5 .rv-ugc__tile { display: block; background-repeat: no-repeat; }
.rv-v5 .rv-ugc__img {
  flex: 0 0 auto;
  width: 148px;
  height: 148px;
  margin-right: 6px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--color-bg-soft);
}
@keyframes rv-ugc-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 768px) {
  .rv-v5 .rv-ugc { margin-bottom: 20px; }
  .rv-v5 .rv-ugc__img { width: 200px; height: 200px; border-radius: 14px; }
}
/* Same rule as the trust ticker: a band that never stops is a band some people cannot
   read past. Without motion it is a plain row the reader swipes. */
@media (prefers-reduced-motion: reduce) {
  .rv-v5 .rv-ugc {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .rv-v5 .rv-ugc__track { animation: none; will-change: auto; }
  .rv-v5 .rv-ugc__img { scroll-snap-align: start; }
}

/* Closing offer (§15) — the whole offer restated once, no countdown. */
.rv-v5 .rv-closing__card {
  text-align: center;
  padding: 22px 16px;
  border: 1px solid rgba(var(--color-primary-rgb), 0.22);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.07), transparent 60%);
}
.rv-v5 .rv-closing__image { width: 128px; height: 128px; object-fit: contain; margin-bottom: 8px; }
.rv-v5 .rv-closing__name {
  margin: 0 0 8px;
  font: 800 22px/1.2 var(--font-body);
  color: var(--color-heading);
}
.rv-v5 .rv-closing__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 8px;
}
.rv-v5 .rv-closing__now { font: 800 clamp(34px, 9vw, 44px)/1 var(--font-body); color: var(--color-heading); }
.rv-v5 .rv-closing__was { font-size: 18px; font-weight: 600; color: var(--color-text-muted); }
.rv-v5 .rv-closing__urgency {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-text);
}
.rv-v5 .rv-closing__chips {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 7px;
  text-align: left;
}
.rv-v5 .rv-closing__chips li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--color-text);
}
.rv-v5 .rv-closing__chips svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--color-primary); }

/* ------------------------------------------------------------------ v7 §03
 * Problem Recognition.
 *
 * No card chrome per row on purpose: the buyer should scan five lines and see his
 * own week, not read a spec table. Rows are flex so the check mark stays on the
 * first line when the text wraps, which it does at 390px on most of them.
 */
.rv-v5 .rv-recognition__intro {
    margin: 0 0 18px;
    color: var(--color-text-soft);
    font-size: 15px;
    line-height: 1.55;
}

.rv-v5 .rv-recognition__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.rv-v5 .rv-recognition__item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
}

.rv-v5 .rv-recognition__mark {
    flex: 0 0 auto;
    display: inline-flex;
    margin-top: 2px;
    color: var(--color-accent);
}

.rv-v5 .rv-recognition__mark svg { width: 19px; height: 19px; }

.rv-v5 .rv-recognition__reframe {
    margin: 20px 0 0;
    padding: 14px 16px;
    border-left: 3px solid var(--color-accent);
    background: var(--color-bg-soft);
    border-radius: 0 10px 10px 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text);
}

/* v7 §05 — the formula's logic, above the map that details it. */
.rv-v5 .rv-formula__thesis {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
}

/* ---------------------------------------------------------------- Trust ticker
 * A band between sections. It sits outside the section-card rhythm on purpose: full
 * bleed, no card chrome, so it reads as a divider rather than as another block of
 * content competing for attention.
 */
.rv-v5 .rv-ticker {
  overflow: hidden;
  margin: 0 0 var(--v5-gap);
  padding: 11px 0;
  background: var(--rv-primary);
  color: #FFFFFF;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.rv-v5 .rv-ticker--b { background: var(--rv-accent); }
.rv-v5 .rv-ticker__track {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  animation: rv-tick var(--rv-tick-dur, 40s) linear infinite;
}
.rv-v5 .rv-ticker__item {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rv-v5 .rv-ticker__sep { opacity: 0.55; font-size: 11px; }
@keyframes rv-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* A band that never stops moving is a band someone with vestibular sensitivity cannot
   read past. */
@media (prefers-reduced-motion: reduce) {
  .rv-v5 .rv-ticker__track { animation: none; }
}

/* ---------------------------------------------------------- Benefit cards
 * The number carries the sequence, so the icon was doing nothing — all four rendered
 * the same generic check, and the pair of markers pushed the heading and body into a
 * different column from the number. One marker, one text column, everything on one
 * left edge.
 */
.rv-v5 .rv-usp__card {
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 12px;
  align-content: start;
}
.rv-v5 .rv-usp__card .rv-usp__num {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--rv-accent);
  font-variant-numeric: tabular-nums;
}
.rv-v5 .rv-usp__card h3 { grid-column: 2; grid-row: 1; }
.rv-v5 .rv-usp__card p  { grid-column: 2; grid-row: 2; }

/* ---------------------------------------------------------- Closing offer
 * The packshot was 128px in a card that is now capped at 560px, so it read as a
 * thumbnail sitting above the price rather than as the product being bought.
 */
.rv-v5 .rv-closing__image { width: 168px; height: 168px; margin-bottom: 14px; }
@media (min-width: 768px) {
  .rv-v5 .rv-closing__image { width: 200px; height: 200px; }
}

/* ---------------------------------------------------------- Timeline on desktop
 * main.css still carries the v3 timeline: a four-column grid with a dashed connector
 * pinned at top:56px. v5 rebuilt the item as a horizontal row with its own vertical
 * rail but never touched the parent, so on a wide screen the page drew BOTH — a stub
 * of vertical rail under every marker and a dashed line straight through the body text,
 * because 56px was measured against a marker size that no longer exists.
 *
 * Below 1024px main.css already collapses the grid to one column, which is why only
 * desktop was wrong.
 *
 * Four columns is the right shape for four short steps, so it stays. The item stacks
 * instead of sitting side by side, the vertical rail is dropped, and the connector is
 * redrawn at the centre of the marker it is supposed to join.
 */
@media (min-width: 1024px) {
  .rv-v5 .rv-timeline__item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: 0;
  }
  /* The vertical rail belongs to the stacked layout only. */
  .rv-v5 .rv-timeline__item:not(:last-child)::before { content: none; }

  .rv-v5 .rv-timeline { position: relative; }
  .rv-v5 .rv-timeline::before {
    /* 17px = half the 34px marker, so the line meets the dots instead of the sentences. */
    top: 17px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: repeating-linear-gradient(90deg,
      rgba(var(--color-primary-rgb), 0.45) 0 6px, transparent 6px 14px);
  }
}

/* The benefit block lost its icon, so the heading no longer needs to clear one — that
   10px top margin was spacing it away from a circle that is gone, and it left the title
   sitting a line below the 01/02 index it belongs to. */
.rv-v5 .rv-usp__block-body > h3 { margin-top: 0; }

/* ---------------------------------------------------------- Product facts, centred
 * Icon in a soft disc, label above the value, a short rule underneath. The rule is the
 * part that makes the grid read as a set rather than six loose boxes — it repeats at a
 * fixed width regardless of how long the value is, so the eye finds a baseline.
 *
 * Two columns on mobile, three on desktop. Six facts then fall as 2x3 and 3x2, which is
 * why facts_items is capped at six: seven leaves an orphan on both.
 */
.rv-v5 .rv-facts__grid { gap: 10px; }
.rv-v5 .rv-facts__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: 20px 12px 18px;
  background: var(--color-bg-alt);
}
.rv-v5 .rv-facts__icon {
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rv-accent) 10%, transparent);
  color: var(--rv-accent);
}
.rv-v5 .rv-facts__icon svg { width: 24px; height: 24px; }
.rv-v5 .rv-facts__label {
  margin: 0 0 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--rv-accent);
}
.rv-v5 .rv-facts__value {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text);
}
/* The baseline rule. A pseudo-element rather than a border, so it keeps its own width
   instead of stretching to the card. */
.rv-v5 .rv-facts__card::after {
  content: "";
  width: 28px;
  height: 2px;
  margin-top: 14px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--rv-accent) 45%, transparent);
}
@media (min-width: 768px) {
  .rv-v5 .rv-facts__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .rv-v5 .rv-facts__card { padding: 26px 16px 22px; }
  .rv-v5 .rv-facts__icon { width: 60px; height: 60px; }
  .rv-v5 .rv-facts__icon svg { width: 27px; height: 27px; }
  .rv-v5 .rv-facts__value { font-size: 15px; }
}