/* ========================================
   REVENUEFLOWS v5 — SHARED BASE
   Minimal reset + container + typography base.
   Each template provides its own FULL design CSS.
   ======================================== */

/* --- SCOPE WRAPPER --- */
.rf-scope {
  position: relative;
  isolation: isolate;
  z-index: 1;
  box-sizing: border-box;
  font-size:calc(16px * var(--rf-text-scale,1))!important;
  line-height: 1.6;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.rf-scope *,
.rf-scope *::before,
.rf-scope *::after {
  box-sizing: border-box;
}

/* --- ELEMENT RESETS --- */
.rf-scope img {
  max-width: 100%;
  height: auto;
  display: block;
}

.rf-scope button {
  cursor: pointer;
  border: none;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* ── EDITABLE-SPAN WEIGHT TRANSPARENCY (root-cause fix, 2026-07-30) ──
   v4 templates put button/CTA text directly in the element as a bare text
   node; v5 wraps every editable text in <span data-rf-path> for click-to-edit.
   Jagan's canonical CSS contains an intentional universal reset
   (.rf-scope *{font-weight:400}) that can't touch v4's bare text nodes but
   DOES hit v5's wrapper spans — so an 800-weight button rendered a 400-weight
   label (un-bold ATC/CTAs, found via computed-style harness). This rule makes
   the wrapper spans weight-transparent, restoring v4 semantics: the span
   always shows its parent's weight, exactly like a text node. Specificity
   (0,2,0) beats the universal reset (0,1,0); any explicit heavier selector
   still wins. */
.rf-scope [data-rf-path] {
  font-weight: inherit;
}

/* Same v4 semantics for BUTTON labels specifically: pipeline-generated pages
   emit the ATC/CTA label as a plain <span> (no data-rf-path), which the
   universal reset crushed to 400 while imported pages rendered 800 (found on
   Pharma Hermetic generations, 2026-07-31). Any child of a CTA inherits the
   button's weight — exactly how v4's bare text nodes behave. */
.rf-scope .cta-btn *,
.rf-scope button * {
  font-weight: inherit;
}

.rf-scope a {
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.rf-scope h1,
.rf-scope h2,
.rf-scope h3,
.rf-scope h4 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

/* --- BASE LAYOUT --- */
.rf-container {
  max-width: var(--rf-container, 1280px);
  margin: 0 auto;
  padding: 0 16px;
  width: 100%;
}

.rf-section {
  padding: 60px 0;
}

/* --- SCROLL REVEAL --- */
.rf-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.rf-reveal.active,
.rf-reveal.rf-active {
  opacity: 1;
  transform: translateY(0);
}

/* ── Bundle cards (v4 parity: Kanis-style variant-bound bundles; built by interactivity.js) ── */
.rf-scope .bundle-wrap{width:100%;margin:0 0 20px}
.rf-scope .bundle-label{font-size:calc(12px * var(--rf-text-scale,1));font-weight:700;margin:0 0 12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dark,#1E293B);padding-left:4px}
.rf-scope .bundle-cards{display:flex;flex-direction:column;gap:10px}
.rf-scope .bundle-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:14px 16px;border:2px solid var(--color-border,#E2E8F0);border-radius:10px;background:var(--white,#fff);cursor:pointer;transition:all .2s;position:relative;gap:14px;min-height:68px;box-sizing:border-box}
.rf-scope .bundle-card.has-badge{margin-top:8px}
.rf-scope .bundle-card:hover{border-color:var(--brand-accent,#10B981)}
.rf-scope .bundle-card.active{border-color:var(--brand-primary,#064E3B);background:var(--brand-accent-light,rgba(16,185,129,.06));box-shadow:0 2px 10px rgba(0,0,0,.04)}
.rf-scope .bundle-card input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.rf-scope .bundle-card-radio-wrap{display:flex;align-items:center}
.rf-scope .bundle-card-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--color-border,#E2E8F0);position:relative;transition:all .2s;flex-shrink:0}
.rf-scope .bundle-card.active .bundle-card-radio{border-color:var(--brand-primary,#064E3B);background:var(--brand-primary,#064E3B)}
.rf-scope .bundle-card.active .bundle-card-radio::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:#fff}
.rf-scope .bundle-card-name-col{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.rf-scope .bundle-card-name{font-size:calc(16px * var(--rf-text-scale,1));font-weight:800;color:var(--text-dark,#1E293B);letter-spacing:.15px;line-height:1.15}
.rf-scope .bundle-card-per{font-size:calc(12px * var(--rf-text-scale,1));color:var(--text-muted,#64748B);font-weight:500;line-height:1}
.rf-scope .bundle-card-price-col{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;text-align:right}
.rf-scope .bundle-card-save{background:var(--brand-primary,#064E3B);color:#fff;font-size:calc(10px * var(--rf-text-scale,1));font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:3px 8px;border-radius:4px;line-height:1.2}
.rf-scope .bundle-card-price{font-size:calc(17px * var(--rf-text-scale,1));font-weight:800;color:var(--text-dark,#1E293B);line-height:1}
.rf-scope .bundle-card-badge{position:absolute;top:-11px;left:14px;background:var(--brand-primary,#064E3B);color:#fff;font-size:calc(10px * var(--rf-text-scale,1));font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:4px;z-index:2}
.rf-scope .bundle-card-badge.best{background:var(--text-dark,#1A1A1A);color:#fff}

/* Variant-updated price display — interactivity.js re-renders #rfPriceDisplay on
   variant change with these generic classes; style them so the price stays
   spaced/legible across all templates (not just the classmap price-* classes). */
.rf-scope #rfPriceDisplay{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rf-scope #rfPriceDisplay .current-price{font-size:calc(32px * var(--rf-text-scale,1));font-weight:800;color:var(--text-dark,#1E293B)}
.rf-scope #rfPriceDisplay .original-price{font-size:calc(16px * var(--rf-text-scale,1));color:var(--text-muted,#64748B);text-decoration:line-through;font-weight:400}
.rf-scope #rfPriceDisplay .discount-badge{background:var(--brand-primary,#064E3B);color:#fff;font-size:calc(11px * var(--rf-text-scale,1));font-weight:800;padding:4px 10px;border-radius:6px}

/* Sold-out option values (interactivity.js flags values with no available variant) */
.rf-scope .size-btn.rf-soldout,.rf-scope .color-swatch.rf-soldout{opacity:.45;cursor:not-allowed;background:#F2F0ED;border-color:var(--color-border,#E2E8F0);color:var(--text-muted,#64748B);pointer-events:none;text-decoration:line-through}
.rf-scope .size-btn.rf-soldout:hover,.rf-scope .color-swatch.rf-soldout:hover{border-color:var(--color-border,#E2E8F0)}
.rf-scope .rf-soldout-label{display:block;text-decoration:none;font-size:calc(10px * var(--rf-text-scale,1));font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#dc2626;margin-top:3px;line-height:1}
/* Notify-me stores (interactivity.js 4e): sold-out values stay clickable so the restock form is reachable.
   Klaviyo's injected back-in-stock button is hidden: OUR button opens its form (one button, our design). */
.rf-scope #klaviyo-bis-button-container{display:none!important}
/* Notify mode shows a dedicated #rfNotifyBtn twin; the real ATC is hidden so Klaviyo/Kaching can't fight over it (Jagan 2026-09-15) */
.rf-scope.rf-notify-mode #rfAddToCart{display:none!important}
/* Notify mode (a sold-out variant is selected on a notify-me store): the buy box shows ONE thing — the Notify button. Bundles step aside. */
.rf-scope.rf-notify-mode kaching-bundle,.rf-scope.rf-notify-mode kaching-bundles-block,.rf-scope.rf-notify-mode .kaching-bundles,.rf-scope.rf-notify-mode [class*="kaching-bundles"],.rf-scope.rf-notify-mode .rf-kaching-placeholder,.rf-scope.rf-notify-mode #rfBundleCards,.rf-scope.rf-notify-mode .rf-bundle-cards{display:none!important}
.rf-scope .size-btn.rf-soldout.rf-soldout-notify,.rf-scope .color-swatch.rf-soldout.rf-soldout-notify{pointer-events:auto;cursor:pointer;opacity:.7}
.rf-scope .size-btn.rf-soldout.rf-soldout-notify.active,.rf-scope .color-swatch.rf-soldout.rf-soldout-notify.active{opacity:1;border-color:var(--text-dark,#1E293B);color:var(--text-dark,#1E293B)}

/* Announcement bar (App Embed positions it above #rf-root; own .rf-scope so vars
   cascade. Double-class selector so it beats any equal-specificity .rf-scope rule.) */
.rf-scope.rf-announcement-bar{background:var(--brand-primary,#0D0F2C);color:#fff;text-align:center;font-size:calc(13px * var(--rf-text-scale,1));font-weight:600;letter-spacing:.3px;padding:10px 16px;line-height:1.35}
.rf-scope.rf-announcement-bar a{color:#fff;text-decoration:underline}

/* ========================================
   PHASE 13 — LANDING PAGE STRUCTURE
   Structural layout ONLY for the 10 landing sections.
   Neutral fallbacks; template skins own colors/typography.
   ======================================== */

/* ── Opt-in popup (modal overlay + card; opened by RFFunnel) ── */
.rf-scope .rf-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;opacity:1 !important;transform:none !important}
.rf-scope .rf-popup-overlay[hidden]{display:none !important}
.rf-scope .rf-popup-card{background:var(--white,#fff);border-radius:8px;max-width:480px;width:100%;padding:36px 32px;position:relative;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.rf-scope .rf-popup-close{position:absolute;top:10px;right:14px;background:none;border:none;font-size:calc(26px * var(--rf-text-scale,1));line-height:1;color:var(--text-muted,#64748B)}
.rf-scope .rf-popup-headline{margin-bottom:8px}
.rf-scope .rf-popup-subtext{margin-bottom:20px}
.rf-scope .rf-popup-input{display:block;width:100%;padding:14px;border:1px solid var(--color-border,#ccc);border-radius:4px;font-size:calc(16px * var(--rf-text-scale,1));margin-bottom:12px;font-family:inherit}
.rf-scope .rf-popup-input.rf-invalid{border-color:#dc2626}
.rf-scope .rf-popup-field-error{color:#dc2626;font-size:calc(13px * var(--rf-text-scale,1));text-align:left;margin:-8px 0 10px}
.rf-scope .rf-popup-field-error[hidden]{display:none}
.rf-scope .rf-popup-submit{display:block;width:100%;padding:16px;font-size:calc(17px * var(--rf-text-scale,1))}
.rf-scope .rf-popup-consent{font-size:calc(12px * var(--rf-text-scale,1));margin-top:12px;color:var(--text-muted,#64748B)}

/* ── Opt-in popup — EDITOR MODE (Phase 15 F1) ──
   The dashboard preview bridge toggles body.rf-editor-mode (rf-set-mode
   message). In editor mode the popup renders EXPANDED INLINE — non-modal,
   overlay disabled — so every field is visible and click-to-edit via its
   data-rf-path. body.rf-editor-mode never exists on the storefront, so live
   behavior (hidden until RFFunnel opens it) is untouched. Both selector
   forms (body wraps .rf-scope / body IS the scope) mirror tiara/style.css. */
body.rf-editor-mode .rf-scope .rf-popup-overlay[hidden],
body.rf-editor-mode.rf-scope .rf-popup-overlay[hidden]{display:flex !important}
body.rf-editor-mode .rf-scope .rf-popup-overlay,
body.rf-editor-mode.rf-scope .rf-popup-overlay{position:static;inset:auto;background:none;z-index:auto;padding:36px 20px}
body.rf-editor-mode .rf-scope .rf-popup-card,
body.rf-editor-mode.rf-scope .rf-popup-card{border:2px dashed var(--color-border,#CBD5E1);box-shadow:0 6px 24px rgba(0,0,0,.08)}
body.rf-editor-mode .rf-scope .rf-popup-card::before,
body.rf-editor-mode.rf-scope .rf-popup-card::before{content:"Opt-in popup \2014 expanded for editing (hidden on the live page until a CTA opens it)";display:block;font-size:calc(11px * var(--rf-text-scale,1));font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted,#64748B);margin-bottom:14px}
body.rf-editor-mode .rf-scope .rf-popup-close,
body.rf-editor-mode.rf-scope .rf-popup-close{display:none}

/* ── Empty image slots (Phase 15 F1) — shared SVG placeholder ──
   Sections render RFUtils.placeholderImg() (inline SVG data-URI) into empty
   image slots with this class — editor preview AND storefront. The SVG
   carries its own pattern + glyph; this rule only guarantees sane sizing. */
.rf-scope img.rf-img-placeholder{width:100%;min-height:120px;object-fit:cover;background:#EEF0F3}

/* ── LP hero (carousel + copy 2-col; stacks <820px) ── */
.rf-scope .rf-lp-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;margin-top:28px}
.rf-scope .rf-lp-carousel{position:relative;border-radius:6px;overflow:hidden}
.rf-scope .rf-lp-slide{display:none}
.rf-scope .rf-lp-slide.active{display:block}
.rf-scope .rf-lp-slide-img{width:100%;object-fit:cover}
.rf-scope .rf-lp-slide-label{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.65);color:#fff;font-weight:600;font-size:calc(15px * var(--rf-text-scale,1));text-align:center;padding:8px}
.rf-scope .rf-lp-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.85);border:1px solid var(--color-border,#E2E8F0);width:36px;height:36px;border-radius:50%;font-size:calc(18px * var(--rf-text-scale,1));display:flex;align-items:center;justify-content:center;z-index:2}
.rf-scope .rf-lp-prev{left:10px}
.rf-scope .rf-lp-next{right:10px}
.rf-scope .rf-lp-carousel-dots{position:absolute;top:10px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:2}
.rf-scope .rf-lp-checklist{list-style:none;margin:0 0 20px;padding:0}
.rf-scope .rf-lp-check-item{padding-left:26px;position:relative;margin-bottom:5px}
.rf-scope .rf-lp-check-item::before{content:"\2714";position:absolute;left:0;font-weight:700}

/* ── Listicle (image LEFT / text RIGHT rows; image-first stack <768px) ── */
.rf-scope .rf-listicle-item{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:36px 0}
.rf-scope .rf-listicle-img img{width:100%;object-fit:cover;border-radius:14px}
.rf-scope .rf-listicle-punch{display:block;margin-top:12px;font-weight:800}

/* ── Offer stack / summary / next steps ── */
.rf-scope .rf-offer-stack-box{max-width:720px;margin:0 auto;text-align:center}
.rf-scope .rf-offer-items{list-style:none;margin:0 0 16px;padding:0}
.rf-scope .rf-offer-item{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--color-border,#E2E8F0)}
.rf-scope .rf-offer-price-row{display:flex;align-items:baseline;justify-content:center;gap:12px;margin:14px 0}
.rf-scope .rf-offer-anchor{opacity:.6}
.rf-scope .rf-offer-price{font-size:calc(28px * var(--rf-text-scale,1));font-weight:800}
.rf-scope .rf-summary-card{max-width:640px;margin:0 auto}
.rf-scope .rf-summary-img{max-width:280px;margin:0 auto 18px}
.rf-scope .rf-summary-box{border-radius:4px;padding:14px 16px;background:var(--surface-light,#F5F8FF)}
.rf-scope .rf-summary-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--color-border,#E2E8F0)}
.rf-scope .rf-summary-row:last-child{border-bottom:none}
.rf-scope .rf-summary-total{font-weight:700}
.rf-scope .rf-next-steps-grid{display:grid;grid-template-columns:1fr;gap:34px;max-width:760px;margin:0 auto}
.rf-scope .rf-next-step-bar{display:flex;gap:10px;align-items:baseline;justify-content:center;text-align:center;padding:16px 20px;font-weight:700}
.rf-scope .rf-next-step-box{border:1px solid var(--color-border,#E2E8F0);border-top:none;padding:26px 30px}
.rf-scope .rf-next-step-link{display:block;max-width:560px;margin:22px auto;text-align:center;padding:15px 26px;border-radius:4px}

/* ── Checkout CTA (trust row + countdown slot + big button) ── */
.rf-scope .rf-checkout-cta-inner{max-width:640px;margin:0 auto;text-align:center}
.rf-scope .rf-checkout-trust{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin:14px 0}
.rf-scope .rf-checkout-countdown-display{display:flex;justify-content:center;gap:24px;margin:14px 0}
.rf-scope .rf-checkout-countdown-block b{display:block;font-size:calc(28px * var(--rf-text-scale,1))}
.rf-scope .rf-checkout-cta-btn{display:block;width:100%;padding:17px;font-size:calc(19px * var(--rf-text-scale,1));margin-top:14px}

/* ── Buy box (2026-07-24 — landing pages sell the parent product) ──
   Mobile-first: full-width 52px touch targets; the two CTAs go side-by-side
   only from 560px up. Skins recolor via cta-btn + their style.css. */
.rf-scope .rf-buybox-box{max-width:560px;margin:0 auto;padding:24px 20px;border:1px solid var(--color-border,#E2E8F0);border-radius:10px;background:var(--white,#fff)}
.rf-scope .rf-buybox-title{font-size:calc(22px * var(--rf-text-scale,1));margin-bottom:6px}
.rf-scope .rf-buybox-price-row{display:flex;align-items:baseline;gap:10px;margin:6px 0 14px}
.rf-scope .rf-buybox-price{font-size:calc(26px * var(--rf-text-scale,1));font-weight:800}
.rf-scope .rf-buybox-compare{font-size:calc(16px * var(--rf-text-scale,1));color:var(--text-muted,#64748B);text-decoration:line-through}
.rf-scope .rf-buybox-compare[hidden]{display:none}
.rf-scope .rf-buybox-options{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.rf-scope .rf-buybox-option{display:block}
.rf-scope .rf-buybox-option-label{display:block;font-size:calc(12px * var(--rf-text-scale,1));font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:5px;color:var(--text-muted,#64748B)}
.rf-scope .rf-buybox-select{display:block;width:100%;min-height:48px;padding:10px 14px;font-size:calc(16px * var(--rf-text-scale,1));border:1px solid var(--color-border,#CBD5E1);border-radius:8px;background:var(--white,#fff);appearance:auto;-webkit-appearance:menulist}
.rf-scope .rf-buybox-qty{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.rf-scope .rf-buybox-qty-label{font-size:calc(12px * var(--rf-text-scale,1));font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted,#64748B)}
.rf-scope .rf-buybox-qty-stepper{display:flex;align-items:stretch;border:1px solid var(--color-border,#CBD5E1);border-radius:8px;overflow:hidden}
.rf-scope .rf-buybox-qty-btn{width:48px;min-height:48px;font-size:calc(20px * var(--rf-text-scale,1));font-weight:700;background:var(--surface-light,#F5F8FF);border:none}
.rf-scope .rf-buybox-qty-input{width:56px;text-align:center;font-size:calc(16px * var(--rf-text-scale,1));font-weight:700;border:none;background:var(--white,#fff);-moz-appearance:textfield}
.rf-scope .rf-buybox-qty-input::-webkit-inner-spin-button,.rf-scope .rf-buybox-qty-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.rf-scope .rf-buybox-actions{display:flex;flex-direction:column;gap:10px}
.rf-scope .rf-buybox-atc-btn,.rf-scope .rf-buybox-buy-btn{display:block;width:100%;min-height:52px;padding:15px 20px;font-size:calc(17px * var(--rf-text-scale,1));font-weight:800;border-radius:8px}
.rf-scope .rf-buybox-atc-btn[disabled],.rf-scope .rf-buybox-buy-btn[disabled]{opacity:.5;cursor:not-allowed}
.rf-scope .rf-buybox-status{margin-top:10px;font-size:calc(13px * var(--rf-text-scale,1));font-weight:700;color:#dc2626;text-align:center}
.rf-scope .rf-buybox-status[hidden]{display:none}
@media (min-width:560px){
  .rf-scope .rf-buybox-actions{flex-direction:row}
  .rf-scope .rf-buybox-actions .rf-buybox-atc-btn,.rf-scope .rf-buybox-actions .rf-buybox-buy-btn{flex:1}
}
/* Live pages: the editor hint never shows; an unconfigured buy box (no
   product handle, no baked variants) disappears entirely. */
.rf-scope .rf-buybox-note{display:none}
.rf-scope .rf-buybox.rf-buybox-unconfigured{display:none}
/* Editor preview (body.rf-editor-mode — same bridge as the opt-in popup):
   dashed "live data" hint shows, and the unconfigured box renders as a
   setup card so the merchant can see + configure it. */
body.rf-editor-mode .rf-scope .rf-buybox-note,
body.rf-editor-mode.rf-scope .rf-buybox-note{display:block;border:2px dashed var(--color-border,#CBD5E1);border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:calc(11px * var(--rf-text-scale,1));font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted,#64748B)}
body.rf-editor-mode .rf-scope .rf-buybox.rf-buybox-unconfigured,
body.rf-editor-mode.rf-scope .rf-buybox.rf-buybox-unconfigured{display:block}

/* ── Social share buttons ── */
.rf-scope .rf-share-buttons{display:flex;flex-direction:column;gap:14px;max-width:560px;margin:0 auto}
.rf-scope .rf-share-btn{display:block;text-align:center;padding:15px 26px;border-radius:4px}

/* ── Advertorial masthead (announcement bar + narrow article column) ── */
.rf-scope .rf-adv-bar{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 16px;text-align:center;font-size:calc(13.5px * var(--rf-text-scale,1));font-weight:600;background:var(--brand-primary,#0D0F2C);color:#fff}
.rf-scope .rf-adv-pill{flex:none;padding:6px 14px;border-radius:999px;font-size:calc(12px * var(--rf-text-scale,1));font-weight:700;text-transform:uppercase;white-space:nowrap;background:rgba(255,255,255,.18)}
.rf-scope .rf-adv-article{max-width:720px;margin:0 auto;padding:48px 20px 8px}
.rf-scope .rf-adv-meta{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0;font-size:calc(13.5px * var(--rf-text-scale,1));opacity:.75}
.rf-scope .rf-adv-opener,.rf-scope .rf-adv-transition{font-weight:700}
.rf-scope .rf-adv-opener,.rf-scope .rf-adv-body-para,.rf-scope .rf-adv-transition{margin-bottom:16px}

/* ── Landing mobile stacking ── */
@media (max-width:820px){
  .rf-scope .rf-lp-hero-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
  .rf-scope .rf-listicle-item{grid-template-columns:1fr;gap:18px;padding:28px 0}
  .rf-scope .rf-listicle-img{order:-1}
  .rf-scope .rf-adv-bar{flex-direction:column;gap:8px}
}

/* ════════════════════════════════════════════════════════════════════════
   🛡️  ISOLATION ENFORCEMENT — ALWAYS-ON, THEME-PROOF (v4 parity, hardened)
   ════════════════════════════════════════════════════════════════════════
   WHY THIS EXISTS
   RevenueFlows pages render in LIGHT DOM inside the merchant's theme (so the
   store's own header + footer stay intact and the page keeps full SEO / AI
   discoverability). The trade-off: the theme's CSS can try to leak into our
   content. A heavily-customised theme (e.g. `.template-product h1{color:…
   !important}`, specificity ~0,3,1) BEATS a template rule written as
   `.rf-scope h1{…!important}` (specificity ~0,2,1) — because when BOTH are
   `!important`, HIGHER SPECIFICITY WINS. That is exactly what broke a live
   store: our headings inherited the theme's purple colour + wrong font.

   HOW THIS IS UNBREAKABLE
   Every rule below is scoped under `#rf-root.rf-scope` — an ID (100) + class
   (10) = specificity ~1,1,x (~121). No Shopify theme ever targets our
   `#rf-root` id, so no theme rule can reach this specificity. Combined with
   `!important`, RevenueFlows ALWAYS wins the cascade — on ANY theme, forever.
   Values are var-driven, so the template / per-page config still owns the
   DESIGN (colours, fonts); this layer only guarantees OUR values render.
   The store header/footer live OUTSIDE #rf-root and are never touched.

   PROPAGATION
   Shipped in shared base.css on the CDN (…/v5/shared/base.css), loaded on
   every page of every store. One `upload-templates` push + CDN purge reaches
   EVERY installed store instantly — no per-app extension redeploy needed.
   (See installer/GOLDEN-CONFIG.md → the "3 render layers" section.)
   ════════════════════════════════════════════════════════════════════════ */

/* 1 — DETERMINISTIC WIDTH.  Break out of whatever container the theme puts
   #MainContent in (full-bleed OR narrow-capped) to true viewport width; RF
   then re-centres its own content via .rf-container / section max-widths, so
   the layout is identical regardless of the host theme's page-width setting.
   Also sets the inherited baseline font + text colour for the whole page. */
#rf-root.rf-scope{
  --rf-iso-v:3;                          /* sentinel: confirms this block applied */
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding-left:0 !important;
  padding-right:0 !important;
  overflow-x:clip;                       /* guard against 100vw scrollbar overflow */
  color:var(--text-body, var(--body, var(--text-dark, #333))) !important;
  font-family:var(--sans, var(--font-body, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif)) !important;
}

/* 2 — HEADINGS win their font + colour over any theme element rule. */
#rf-root.rf-scope h1,#rf-root.rf-scope h2,#rf-root.rf-scope h3,#rf-root.rf-scope h4,
#rf-root.rf-scope h5,#rf-root.rf-scope h6,
#rf-root.rf-scope .section-heading,#rf-root.rf-scope .section-title,
#rf-root.rf-scope .product-title{
  font-family:var(--serif, var(--font-heading, Georgia,"Times New Roman",serif)) !important;
  color:var(--text-heading, var(--heading-color, var(--brown-dark, var(--text-dark, #1a1a1a)))) !important;
}

/* 2b — DARK SECTIONS keep their light text. The colour armor above carries ID
   specificity and was crushing template rules like `.final-cta
   .section-heading{color:#FFF!important}` — dark-navy background with
   near-black headings on the live/share render, while the editor (#rf-app,
   no armor) looked correct (found on Viales, 2026-07-31). Same ID
   specificity, declared later, scoped to the known dark blocks. */
#rf-root.rf-scope .final-cta h1,#rf-root.rf-scope .final-cta h2,
#rf-root.rf-scope .final-cta h3,#rf-root.rf-scope .final-cta .section-heading,
#rf-root.rf-scope .urgency h1,#rf-root.rf-scope .urgency h2,
#rf-root.rf-scope .urgency h3,#rf-root.rf-scope .urgency .section-heading,
#rf-root.rf-scope .rf-dark-rhythm>section:nth-of-type(3n+2) h1,
#rf-root.rf-scope .rf-dark-rhythm>section:nth-of-type(3n+2) h2,
#rf-root.rf-scope .rf-dark-rhythm>section:nth-of-type(3n+2) h3,
#rf-root.rf-scope .rf-dark-rhythm>section:nth-of-type(3n+2) .section-heading{
  color:#FFFFFF !important;
}

/* 3 — BODY-TEXT + control elements keep the RF sans font (so a theme can't
   leak a font onto them). Colour is deliberately NOT forced here — template
   muted / accent classes (on the element, higher specificity) still win, and
   the inherited baseline from rule 1 covers the default. */
#rf-root.rf-scope p,#rf-root.rf-scope li,#rf-root.rf-scope span,
#rf-root.rf-scope a,#rf-root.rf-scope button,#rf-root.rf-scope input,
#rf-root.rf-scope select,#rf-root.rf-scope textarea,#rf-root.rf-scope label,
#rf-root.rf-scope td,#rf-root.rf-scope th,#rf-root.rf-scope blockquote{
  font-family:var(--sans, var(--font-body, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif)) !important;
}

/* ── RF Bundles v2 additions (2026-08-04): pack units, set rows, strike price ── */
.rf-scope .bundle-card-price s{color:var(--text-muted,#94A3B8);font-weight:600;font-size:calc(13px * var(--rf-text-scale,1));margin-left:4px}
.rf-scope .bundle-card-units{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;margin-top:4px;padding-top:12px;border-top:1px dashed var(--color-border,#E2E8F0)}
.rf-scope .bundle-units-label{font-size:calc(11px * var(--rf-text-scale,1));font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted,#64748B)}
.rf-scope .bundle-unit{display:flex;align-items:center;gap:10px}
.rf-scope .bundle-unit-img{width:40px;height:40px;flex-shrink:0;border-radius:8px;object-fit:cover;background:var(--brand-light,#F1F5F9);border:1px solid var(--color-border,#E2E8F0)}
.rf-scope .bundle-unit-no{flex-shrink:0;min-width:22px;font-size:calc(12px * var(--rf-text-scale,1));font-weight:800;color:var(--text-muted,#64748B)}
.rf-scope .bundle-unit-select{flex:1;min-width:0;padding:11px 12px;border:1.5px solid var(--color-border,#E2E8F0);border-radius:10px;font-size:calc(14px * var(--rf-text-scale,1));font-weight:700;color:var(--text-dark,#1E293B);background:var(--white,#fff);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.rf-scope .bundle-unit-select:focus{outline:none;border-color:var(--brand-primary,#059669)}
.rf-scope .bundle-card-radio.rf-check{border-radius:6px}
.rf-scope .bundle-card.active .bundle-card-radio.rf-check::after{width:10px;height:6px;border-radius:0;background:none;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translate(-50%,-65%) rotate(-45deg)}
.rf-scope .bundle-card-thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0}
.rf-scope .bundle-card.rf-set-item{grid-template-columns:auto auto 1fr auto}
.rf-scope .bundle-card.rf-set-main{cursor:default}
.rf-scope .rf-set-total{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--brand-accent-light,rgba(16,185,129,.06));border:1.5px solid var(--color-border,#E2E8F0);border-radius:10px;font-size:calc(15px * var(--rf-text-scale,1));font-weight:800;color:var(--text-dark,#1E293B)}
.rf-scope .rf-set-total s{color:var(--text-muted,#94A3B8);font-weight:600;font-size:calc(13px * var(--rf-text-scale,1));margin-left:6px}

/* ── RF Cart drawer (rfcd- namespace; appended to <body>, outside .rf-scope) ── */
body.rfcd-lock{overflow:hidden}
.rfcd-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:2147483000}
.rfcd-overlay.open{opacity:1;pointer-events:auto}
.rfcd-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:#fff;z-index:2147483001;display:flex;flex-direction:column;transform:translateX(102%);transition:transform .3s cubic-bezier(.22,.8,.3,1);box-shadow:-8px 0 32px rgba(0,0,0,.14);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1E293B}
.rfcd-drawer.open{transform:translateX(0)}
.rfcd-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #E2E8F0}
.rfcd-title{font-size:calc(17px * var(--rf-text-scale,1));font-weight:800;letter-spacing:.2px}
.rfcd-close{background:none;border:none;font-size:calc(26px * var(--rf-text-scale,1));line-height:1;cursor:pointer;color:#64748B;padding:2px 6px}
.rfcd-ship{padding:12px 20px;border-bottom:1px solid #E2E8F0;background:#F8FAFC}
.rfcd-ship-msg{font-size:calc(13px * var(--rf-text-scale,1));margin-bottom:8px}
.rfcd-ship-track{height:6px;border-radius:999px;background:#E2E8F0;overflow:hidden}
.rfcd-ship-fill{height:100%;border-radius:999px;background:var(--brand-primary,#059669);transition:width .35s}
.rfcd-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0}
.rfcd-items{padding:8px 20px}
.rfcd-empty{padding:40px 0;text-align:center;color:#64748B;font-size:calc(14px * var(--rf-text-scale,1))}
.rfcd-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #F1F5F9;align-items:flex-start}
.rfcd-item-img{width:64px;height:64px;border-radius:10px;object-fit:cover;background:#F1F5F9;flex-shrink:0}
.rfcd-item-mid{flex:1;min-width:0}
.rfcd-item-title{font-size:calc(14px * var(--rf-text-scale,1));font-weight:700;line-height:1.3;margin-bottom:2px}
.rfcd-item-var{font-size:calc(12px * var(--rf-text-scale,1));color:#64748B;margin-bottom:6px}
.rfcd-item-price{font-size:calc(14px * var(--rf-text-scale,1));font-weight:800;white-space:nowrap}
.rfcd-qty{display:inline-flex;align-items:center;gap:0;border:1.5px solid #E2E8F0;border-radius:8px;overflow:hidden}
.rfcd-qbtn{width:28px;height:28px;border:none;background:#fff;font-size:calc(15px * var(--rf-text-scale,1));cursor:pointer;color:#1E293B;line-height:1}
.rfcd-qbtn:hover{background:#F1F5F9}
.rfcd-qval{min-width:26px;text-align:center;font-size:calc(13px * var(--rf-text-scale,1));font-weight:700}
.rfcd-remove{border:none;background:none;color:#94A3B8;font-size:calc(11px * var(--rf-text-scale,1));cursor:pointer;margin-left:10px;text-decoration:underline}
.rfcd-upsells{padding:12px 20px;border-top:1px solid #E2E8F0;background:#F8FAFC}
.rfcd-upsell-label{font-size:calc(11px * var(--rf-text-scale,1));font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#64748B;margin-bottom:8px}
.rfcd-upsell{display:flex;gap:12px;align-items:center;padding:8px 0}
.rfcd-upsell .rfcd-item-img{width:48px;height:48px}
.rfcd-upsell-add{border:1.5px solid var(--brand-primary,#059669);color:var(--brand-primary,#059669);background:#fff;border-radius:8px;padding:6px 14px;font-size:calc(12px * var(--rf-text-scale,1));font-weight:800;cursor:pointer}
.rfcd-upsell-add:hover{background:var(--brand-primary,#059669);color:#fff}
.rfcd-foot{padding:14px 20px 18px;border-top:1px solid #E2E8F0}
.rfcd-note{font-size:calc(12px * var(--rf-text-scale,1));color:#64748B;margin-bottom:8px;text-align:center}
.rfcd-subtotal{display:flex;justify-content:space-between;font-size:calc(15px * var(--rf-text-scale,1));font-weight:800;margin-bottom:12px}
.rfcd-checkout{width:100%;padding:15px 16px;border:none;border-radius:12px;background:var(--brand-primary,#059669);color:#fff;font-size:calc(15px * var(--rf-text-scale,1));font-weight:800;letter-spacing:.3px;cursor:pointer}
.rfcd-checkout:hover{filter:brightness(1.06)}
.rfcd-viewcart{display:block;text-align:center;margin-top:10px;font-size:calc(12px * var(--rf-text-scale,1));color:#64748B;text-decoration:underline}

/* ── RF Cart v2 (Kaching parity, 2026-08-05): announce/timer, gift, addons, note, discount, icons ── */
.rfcd-announce{display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 16px;background:#0D0F2C;color:#fff;font-size:calc(12px * var(--rf-text-scale,1));font-weight:600;text-align:center;flex-wrap:wrap}
.rfcd-timer b{font-variant-numeric:tabular-nums;color:#FFD166}
.rfcd-gift-badge{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:4px;background:var(--brand-primary,#059669);color:#fff;font-size:calc(9px * var(--rf-text-scale,1));font-weight:800;letter-spacing:.5px;vertical-align:1px}
.rfcd-addons{padding:12px 20px;border-top:1px solid #E2E8F0;background:#FBFCFE}
.rfcd-sec-label{font-size:calc(10px * var(--rf-text-scale,1));font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#64748B;margin-bottom:8px}
.rfcd-addon-img{width:34px;height:34px;border-radius:7px;object-fit:cover;flex-shrink:0;background:#F1F5F9}
.rfcd-addon{display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer}
.rfcd-addon input{width:16px;height:16px;accent-color:var(--brand-primary,#059669);flex-shrink:0}
.rfcd-addon-label{flex:1;font-size:calc(13px * var(--rf-text-scale,1));font-weight:600;color:#1E293B;min-width:0}
.rfcd-addon-price{font-size:calc(12px * var(--rf-text-scale,1));font-weight:700;color:#64748B;white-space:nowrap}
.rfcd-ordernote{width:100%;padding:9px 12px;border:1.5px solid #E2E8F0;border-radius:10px;font-size:calc(13px * var(--rf-text-scale,1));font-family:inherit;resize:vertical;margin-bottom:10px;box-sizing:border-box}
.rfcd-discount{display:flex;gap:8px;margin-bottom:6px}
.rfcd-discount input{flex:1;min-width:0;padding:9px 12px;border:1.5px solid #E2E8F0;border-radius:10px;font-size:calc(13px * var(--rf-text-scale,1));text-transform:uppercase}
.rfcd-discount button{padding:9px 16px;border:none;border-radius:10px;background:#1E293B;color:#fff;font-size:calc(12px * var(--rf-text-scale,1));font-weight:800;cursor:pointer}
.rfcd-discount-msg{font-size:calc(11px * var(--rf-text-scale,1));color:#059669;font-weight:600;margin-bottom:8px}
.rfcd-custom{font-size:calc(12px * var(--rf-text-scale,1));color:#64748B;margin-bottom:8px}
.rfcd-payicons{display:flex;justify-content:center;gap:6px;margin-top:10px;flex-wrap:wrap}
.rfcd-payicons svg{height:22px;width:auto}

/* ═══ FOUNDER / BRAND STORY (styled 2026-08-12 — was unstyled) ═══ */
.rf-scope .founder-section{padding:64px 40px}
.rf-scope .founder-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start;max-width:1000px;margin:0 auto}
.rf-scope .founder-image img{width:100%;border-radius:16px;object-fit:cover;aspect-ratio:4/5}
.rf-scope .founder-label{display:inline-block;font-size:calc(13px * var(--rf-text-scale,1));font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--terra,#0D6E5F);margin:0 0 10px;line-height:1}
.rf-scope .founder-heading{font-family:var(--serif,inherit);font-size:calc(clamp(24px,3vw,34px) * var(--rf-text-scale,1));font-weight:700;line-height:1.2;color:var(--heading-color,var(--brown-dark,#222));margin:0 0 12px}
.rf-scope .founder-name p{font-weight:700;font-size:calc(16px * var(--rf-text-scale,1));margin:0 0 16px;color:var(--brown-mid,#555)}
.rf-scope .founder-content>p,.rf-scope .founder-text-block{font-size:calc(17px * var(--rf-text-scale,1));line-height:1.75;color:var(--brown-mid,#444);margin:0 0 14px}
.rf-scope .founder-quote{border-left:4px solid var(--terra,#0D6E5F);padding:8px 0 8px 18px;font-size:calc(19px * var(--rf-text-scale,1));font-style:italic;line-height:1.6;margin:18px 0 0}
@media (max-width:768px){.rf-scope .founder-grid{grid-template-columns:1fr;gap:24px}.rf-scope .founder-image img{aspect-ratio:1/1}}

/* ═══ INGREDIENTS / CLINICAL EVIDENCE (styled 2026-08-12 — was unstyled) ═══ */
.rf-scope .ingredients-section{padding:64px 40px}
.rf-scope .ingredients-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:28px auto 0}
.rf-scope .ingredient-card{background:var(--white,#fff);border:1px solid var(--card-border,#E8E4DE);border-radius:16px;padding:28px 22px;text-align:center;transition:transform .2s,box-shadow .2s}
.rf-scope .ingredient-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.06)}
.rf-scope .ingredient-icon{display:block;margin:0 auto 14px;width:56px;height:56px;object-fit:contain;font-size:calc(40px * var(--rf-text-scale,1));line-height:56px}
.rf-scope .ingredient-card h3,.rf-scope .ingredient-name{font-size:calc(18px * var(--rf-text-scale,1));font-weight:700;margin:0 0 8px}
.rf-scope .ingredient-card p{font-size:calc(15px * var(--rf-text-scale,1));line-height:1.6;color:var(--brown-mid,#555);margin:0}
.rf-scope .ingredients-badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0 0}
.rf-scope .ingredient-badge-item{background:color-mix(in srgb,var(--terra,#0D6E5F) 10%,#fff);color:var(--terra,#0D6E5F);border:1px solid color-mix(in srgb,var(--terra,#0D6E5F) 25%,#fff);border-radius:999px;padding:6px 16px;font-size:calc(13px * var(--rf-text-scale,1));font-weight:700}
@media (max-width:768px){.rf-scope .ingredients-grid{grid-template-columns:1fr}}

/* ═══ PRESS BAR + AWARD CARDS (styled 2026-08-12 — was unstyled) ═══ */
.rf-scope .press-bar-section{padding:48px 40px}
.rf-scope .press-bar-inner{text-align:center}
.rf-scope .press-bar-label{display:block;font-size:calc(13px * var(--rf-text-scale,1));font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brown-mid,#888);margin-bottom:18px}
.rf-scope .press-bar-logos{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:center}
.rf-scope .press-bar-logo{height:44px;width:auto;max-width:160px;object-fit:contain}
.rf-scope .press-award-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:28px auto 0}
.rf-scope .press-award-card{background:var(--white,#fff);border:1px solid var(--card-border,#E8E4DE);border-radius:16px;padding:28px 20px;text-align:center;transition:transform .2s,box-shadow .2s}
.rf-scope .press-award-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.06)}
.rf-scope .press-award-img{display:block;margin:0 auto 16px;height:96px;width:auto;max-width:80%;object-fit:contain}
.rf-scope .press-award-title{font-size:calc(17px * var(--rf-text-scale,1));font-weight:700;margin:0 0 4px}
.rf-scope .press-award-subtitle{font-size:calc(14px * var(--rf-text-scale,1));color:var(--brown-mid,#777);margin:0}
@media (max-width:768px){.rf-scope .press-award-grid{grid-template-columns:1fr}}

/* ═══ IMAGE GRID / CAROUSEL (built 2026-08-12) ═══ */
.rf-scope .image-grid-section{padding:56px 40px}
.rf-scope .image-grid-grid{display:grid;gap:16px;max-width:1040px;margin:24px auto 0}
.rf-scope .image-grid-cell{text-align:center}
.rf-scope .image-grid-img{width:100%;border-radius:16px;object-fit:cover;display:block}
.rf-scope .image-grid-caption{font-size:calc(14px * var(--rf-text-scale,1));color:var(--brown-mid,#777);margin:8px 0 0}
.rf-scope .image-grid-carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:24px 4px 8px;-webkit-overflow-scrolling:touch;max-width:1040px;margin:0 auto}
.rf-scope .image-grid-carousel .image-grid-cell{flex:0 0 72%;scroll-snap-align:center}
.rf-scope .image-grid-carousel .image-grid-img{aspect-ratio:4/3}
@media (min-width:769px){.rf-scope .image-grid-carousel .image-grid-cell{flex:0 0 32%}}
@media (max-width:768px){
  .rf-scope .image-grid-grid{grid-template-columns:1fr!important}
  /* Mobile rhythm (Jagan 2026-08-12): the new sections had ZERO side padding
     on phones — images touched the screen edges. 16px sides matches the
     template's own sections (.pain/.split use 52px/48px 16px). */
  .rf-scope .image-grid-section{padding:44px 16px}
  .rf-scope .founder-section{padding:48px 16px}
  .rf-scope .ingredients-section{padding:48px 16px}
  .rf-scope .press-bar-section{padding:40px 16px}
}

/* ═══ SHARED SECTION HEADER (2026-08-12) — founder/ingredients/press-bar/image-grid
   use RFUtils.sectionHeader (.section-header > .badge + h2 + p), which had NO
   styling in rf-default → tiny left-aligned headlines. Match the template's
   section-heading look: serif, clamp size, centered. ═══ */
.rf-scope .section-header{text-align:center;max-width:860px;margin:0 auto 28px}
.rf-scope .section-header .badge{display:inline-block;background:color-mix(in srgb,var(--terra,#0D6E5F) 10%,#fff);color:var(--terra,#0D6E5F);border:1px solid color-mix(in srgb,var(--terra,#0D6E5F) 25%,#fff);border-radius:999px;padding:6px 16px;font-size:calc(13px * var(--rf-text-scale,1));font-weight:700;margin-bottom:14px}
.rf-scope .section-header h2{font-family:var(--serif,inherit);font-size:calc(clamp(28px,3.5vw,40px) * var(--rf-text-scale,1));font-weight:700;line-height:1.2;color:var(--heading-color,var(--brown-dark,#222));margin:0 0 10px;text-align:center}
.rf-scope .section-header p{font-size:calc(17px * var(--rf-text-scale,1));line-height:1.6;color:var(--brown-mid,#555);margin:0;text-align:center}

/* ═══ IMAGE CAROUSEL chrome (2026-08-12): arrows both sides, auto-advance,
   NO visible scrollbar. ═══ */
.rf-scope .image-grid-carousel-shell{display:flex;align-items:center;gap:10px;max-width:1100px;margin:0 auto}
.rf-scope .image-grid-carousel{flex:1;scrollbar-width:none;-ms-overflow-style:none}
.rf-scope .image-grid-carousel::-webkit-scrollbar{display:none;height:0}
.rf-scope .image-grid-arrow{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:1px solid var(--card-border,#E8E4DE);background:var(--white,#fff);color:var(--brown-dark,#333);font-size:calc(26px * var(--rf-text-scale,1));line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.rf-scope .image-grid-arrow:hover{transform:scale(1.06);box-shadow:0 6px 18px rgba(0,0,0,.10)}
.rf-scope .image-grid-grid{margin-left:auto;margin-right:auto}
@media (max-width:768px){.rf-scope .image-grid-arrow{flex-basis:36px;width:36px;height:36px;font-size:calc(20px * var(--rf-text-scale,1))}}

/* ─── Review widgets: ONE REVIEW PER ROW (Jagan 2026-09-06) ─────────────────
   Review apps mount inside our .review-widget-embed. Their default masonry /
   multi-column grids are hard to read; every app's list is forced into a single
   readable column on desktop and mobile. Scoped to our section only. */
/* Stamped (Macy masonry: inline absolute positioning + calc widths) */
.rf-scope .review-widget-embed .stamped-reviews{position:static!important;height:auto!important;display:flex!important;flex-direction:column;gap:14px}
.rf-scope .review-widget-embed .stamped-review{position:static!important;width:100%!important;left:auto!important;top:auto!important;margin:0!important;box-sizing:border-box;display:grid;grid-template-columns:max-content 1fr;column-gap:18px;row-gap:6px;align-items:start;padding:18px 20px;background:#fff;border:1px solid var(--card-border,#E9E9E9);border-radius:14px;text-align:left}
.rf-scope .review-widget-embed .stamped-review>*{grid-column:2;min-width:0}
.rf-scope .review-widget-embed .stamped-review>.stamped-review-image{grid-column:1;grid-row:1/span 6;margin:0}
.rf-scope .review-widget-embed .stamped-review>.stamped-review-image img{width:110px;height:110px!important;object-fit:cover;border-radius:10px;margin:0!important}
.rf-scope .review-widget-embed .stamped-review>.stamped-review-header{order:-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rf-scope .review-widget-embed .stamped-review>.stamped-review-content-wrapper{padding:0!important}
.rf-scope .review-widget-embed .stamped-review .stamped-review-header-title{font-size:calc(17px * var(--rf-text-scale,1));line-height:1.3;margin:6px 0 4px}
.rf-scope .review-widget-embed .stamped-review .stamped-review-content-body{font-size:calc(16px * var(--rf-text-scale,1));line-height:1.55}
.rf-scope .review-widget-embed .stamped-review .created{font-size:calc(13px * var(--rf-text-scale,1));opacity:.7}
@media (max-width:640px){
  .rf-scope .review-widget-embed .stamped-review{grid-template-columns:1fr;padding:16px}
  .rf-scope .review-widget-embed .stamped-review>*{grid-column:1}
  .rf-scope .review-widget-embed .stamped-review>.stamped-review-image{grid-row:auto;order:1}
  .rf-scope .review-widget-embed .stamped-review>.stamped-review-image img{width:100%;height:auto!important;max-height:280px}
}
/* Judge.me / Loox / Yotpo grids → single column too */
.rf-scope .review-widget-embed .jdgm-rev-widg__reviews .jdgm-rev{width:100%!important;display:block}
.rf-scope .review-widget-embed #looxReviews .loox-reviews-default{column-count:1!important;columns:1!important}
.rf-scope .review-widget-embed .yotpo .yotpo-reviews .yotpo-review{width:100%!important}