/* ============================================================
   LAVERO — PRODUCT PAGE STYLES (extracted from product.html)
   Keeps Cormorant Garamond / Nunito fonts and product-page token
   overrides — intentionally different from index.html brand spec.
   ============================================================ */

    /* ===================================================
       BRAND TOKENS
       All original nav/footer vars updated to brand spec
    ==================================================== */
    :root {
      --cream:        #F1E7DA;
      --ivory:        #FFF9F2;
      --sand:         #F7EFE4;
      --blush:        #C98B80;
      --rose-soft:    #D19A90;
      --gold:         #B88E4A;
      --green:        #173C34;
      --brown:        #4A3D39;
      --taupe:        #5B4F48;
      --line:         rgba(74,61,57,0.15);
      --surface-shadow: 0 20px 52px rgba(64,54,50,0.08), 0 3px 12px rgba(64,54,50,0.04);
      --surface-shadow-strong: 0 28px 72px rgba(64,54,50,0.12), 0 8px 24px rgba(64,54,50,0.06);
      --surface-fill: linear-gradient(180deg, rgba(255,252,247,0.98) 0%, rgba(255,248,239,0.94) 100%);
      --font-display: 'Cormorant Garamond', Georgia, serif;
      --font-sans:    'Nunito', system-ui, sans-serif;
    }

    /* ===================================================
       RESET & BASE
    ==================================================== */
    *, *::before, *::after { box-sizing: border-box; min-width: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: linear-gradient(180deg, #fdf8f2 0%, #f7efe3 35%, #fdf8f2 100%);
      color: var(--brown);
      font-family: var(--font-sans);
      margin: 0;
      overflow-x: clip;
    }
    img, video { display: block; max-width: 100%; }
    button, input, select { font: inherit; }

    /* ── Screen-reader-only utility ─────────────────── */
    .sr-only {
      border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px;
      overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px;
    }
    /* ── Keyboard focus styles ──────────────────────── */
    :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
    :focus:not(:focus-visible) { outline: none; }
    /* ── Reduced motion ─────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .carousel-track { animation: none; overflow-x: auto; }
      *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
    }

    /* ===================================================
       NAV — UNCHANGED
    ==================================================== */
    .nav-container {
      position: sticky; top: 0; z-index: 100; width: 100%;
      padding: 18px 4.5vw;
      display: flex; align-items: center; justify-content: space-between;
      background: rgba(201,137,126,0.92);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(255,249,240,0.22);
      color: var(--ivory);
    }
    .logo {
      font-family: var(--font-display); font-size: 30px; letter-spacing: 0.22em;
      text-transform: uppercase; color: var(--ivory); text-decoration: none; font-weight: 500;
    }
    .nav-links { display: flex; gap: clamp(14px,2vw,32px); align-items: center; }
    .nav-link {
      color: rgba(255,249,240,0.86); text-decoration: none;
      font: 800 12px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
    }
    .nav-link.active, .nav-link:hover { color: var(--ivory); }
    .lavero-shop-button {
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--gold); border: none; border-radius: 8px;
      color: var(--ivory); text-decoration: none;
      font: 700 11px var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase;
      padding: 10px 18px;
      box-shadow: 0 2px 10px rgba(201, 154, 93, 0.28);
      transition: box-shadow 0.28s ease, transform 0.28s ease;
      -webkit-tap-highlight-color: transparent;
    }
    @media (hover: hover) {
      .lavero-shop-button:hover {
        box-shadow: 0 8px 28px rgba(201, 154, 93, 0.5), 0 3px 8px rgba(64, 54, 50, 0.1);
        transform: translateY(-3px);
      }
    }
    .lavero-shop-button:active { transform: translateY(-1px); }
    .mobile-menu-btn { display: none; font-size: 28px; }
    .cart-badge {
      position: absolute; top: 0; right: -8px;
      background: var(--ivory); color: var(--ink); font-size: 11px; font-weight: bold;
      height: 18px; min-width: 18px; border-radius: 50%;
      display: none; align-items: center; justify-content: center; padding: 0 4px;
    }

    /* ===================================================
       SHARED UTILITIES
    ==================================================== */
    .section { padding: var(--section-py) 5% var(--section-py-b); }
    .sec-inner { max-width: 1240px; margin: 0 auto; width: 100%; }
    .eyebrow {
      display: block; color: var(--gold); font: 700 11px var(--font-sans);
      letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 14px;
    }
    h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.06; margin: 0; }
    h1 { font-size: clamp(36px,4.6vw,62px); }
    h2 { font-size: clamp(32px,4vw,54px); }
    h3 { font-size: clamp(21px,2vw,28px); }
    p { color: var(--taupe); font-size: clamp(15px,1.2vw,17px); line-height: 1.72; margin: 0; }

    .gold-rule { display: block; width: 32px; height: 1px; background: var(--gold); margin: 20px 0; }

    /* ===================================================
       BUTTONS
    ==================================================== */
    .btn-cta {
      display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      background: var(--green); border: none; border-radius: 8px;
      color: var(--ivory); cursor: pointer; font: 700 13px var(--font-sans);
      letter-spacing: 0.14em; min-height: 62px; padding: 0 32px;
      text-decoration: none; text-transform: uppercase;
      box-shadow: 0 18px 36px rgba(23,60,52,0.18);
      transition: box-shadow 0.28s ease, transform 0.28s ease;
    }
    @media (hover: hover) {
      .btn-cta:hover {
        box-shadow: 0 24px 46px rgba(23,60,52,0.24), 0 6px 12px rgba(74,61,57,0.08);
        transform: translateY(-2px);
      }
    }
    .btn-cta:active { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(23,60,52,0.18); }

    /* ── Halo badge ─────────────────────────────── */
    .halo-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(255,249,240,0.86);
      border: 1px solid var(--line-warm);
      border-radius: 999px;
      color: var(--gold);
      font: 700 10px var(--font-sans); letter-spacing: 0.28em;
      padding: 7px 12px; text-transform: uppercase; margin-bottom: 14px;
    }

    /* ── Rating + sold row ──────────────────────── */
    .rating-sold-row {
      display: flex; align-items: center; gap: 12px;
      flex-wrap: wrap; margin-bottom: 16px;
    }
    .rating-sold-row .rating-row { margin-bottom: 0; }
    .sold-divider { color: rgba(74,61,57,0.28); font-size: 18px; line-height: 1; }
    .sold-badge {
      font: 700 13px var(--font-sans); color: var(--brown);
      display: flex; align-items: center; gap: 5px;
    }
    .sold-badge strong { color: var(--brown); font-weight: 800; }

    /* ── Plan card ──────────────────────────────── */
    .plan-grid {
      display: grid; grid-template-columns: 1fr; gap: 10px;
      margin: 0 auto 12px; position: relative;
      width: 100%;
      max-width: 420px;
    }
    .plan-card {
      background: var(--cream); border: 1.5px solid var(--line); border-radius: 12px;
      cursor: default; padding: 14px 18px 15px; text-align: center; position: relative;
      transition: border-color 0.2s ease, background 0.2s ease;
      display: flex; flex-direction: column; align-items: center; gap: 3px;
    }
    .plan-card.is-selected.plan-card--onetime {
      background: rgba(184,142,74,0.06); border-color: var(--gold); border-width: 2px;
    }
    .plan-card-popular {
      position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
      background: var(--gold); color: var(--ivory); border-radius: 20px;
      font: 700 10px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
      padding: 4px 12px; white-space: nowrap;
    }
    .plan-card-label {
      font: 800 10px var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--taupe);
    }
    .plan-card-price {
      font: 800 clamp(30px,3.6vw,38px) var(--font-sans); color: var(--brown); line-height: 1;
    }
    .plan-card-note {
      font: 700 12px/1.35 var(--font-sans); color: var(--taupe);
      max-width: 24rem; margin: 0 auto;
    }

    /* ── Trust badges ───────────────────────────── */
    .trust-badges {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: stretch; justify-content: center;
      gap: 10px; padding: 16px 0 6px;
    }
    .trust-badge {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 8px; text-align: center;
      background: rgba(255,249,240,0.9);
      border: 1px solid var(--line-warm);
      border-radius: 12px;
      min-height: 104px;
      padding: 14px 10px;
    }
    .trust-badge-icon {
      width: 36px; height: 36px; border-radius: 10px;
      background: rgba(184,142,74,0.1); border: 1px solid rgba(184,142,74,0.22);
      display: grid; place-items: center; color: var(--gold);
    }
    .trust-badge-icon svg { width: 18px; height: 18px; }
    .trust-badge span {
      font: 700 12px/1.45 var(--font-sans); color: var(--brown);
    }

    /* ── Product title ──────────────────────────── */
    .product-title { color: var(--brown); font-weight: 400; }

    /* ── Color swatches (legacy — kept for safety) ── */
    .color-swatches {
      display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px;
    }
    .color-swatch {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--cream); border: 1.5px solid var(--line); border-radius: 20px;
      cursor: pointer; font: 600 13px var(--font-sans); color: var(--brown);
      padding: 6px 12px 6px 8px;
      transition: border-color 0.2s ease, background 0.2s ease;
    }
    .color-swatch.is-selected {
      border-color: var(--gold); background: rgba(184,142,74,0.08); border-width: 2px;
    }
    .color-swatch-dot {
      width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
      box-shadow: inset 0 0 0 1px rgba(64,54,50,0.18);
    }

    /* ── Compact color picker dropdown ─────────── */
    .color-picker { position: relative; width: 100%; }
    .color-picker-btn {
      align-items: center; background: var(--cream); border: 1.5px solid var(--line);
      border-radius: 8px; cursor: pointer; display: flex; gap: 10px;
      font: 600 13px var(--font-sans); color: var(--brown);
      padding: 10px 14px; width: 100%;
      transition: border-color 0.2s ease;
    }
    .color-picker-btn:hover { border-color: var(--gold); }
    .color-picker-btn[aria-expanded="true"] { border-color: var(--gold); }
    .color-picker-label { flex: 1; text-align: left; }
    .color-picker-chevron { flex-shrink: 0; transition: transform 0.2s ease; }
    .color-picker-btn[aria-expanded="true"] .color-picker-chevron { transform: rotate(180deg); }
    .color-picker-dropdown {
      background: var(--ivory); border: 1.5px solid var(--line); border-radius: 8px;
      box-shadow: 0 8px 24px rgba(74,61,57,0.12);
      left: 0; overflow: hidden; position: absolute;
      right: 0; top: calc(100% + 5px); z-index: 20;
    }
    .color-picker-option {
      align-items: center; background: none; border: none; cursor: pointer;
      display: flex; font: 600 13px var(--font-sans); color: var(--brown);
      gap: 10px; padding: 10px 14px; text-align: left; width: 100%;
      transition: background 0.15s ease;
    }
    .color-picker-option:hover { background: var(--sand); }
    .color-picker-option.is-selected {
      background: rgba(184,142,74,0.08); color: var(--gold); font-weight: 700;
    }

    /* ── Qty stepper ────────────────────────────── */
    .qty-stepper-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 0 4px;
    }
    .qty-stepper-info { display: flex; flex-direction: column; gap: 2px; }
    .qty-stepper-label {
      font: 600 11px var(--font-sans); letter-spacing: 0.16em;
      text-transform: uppercase; color: var(--brown);
    }
    .qty-stepper-hint { font: 600 11px var(--font-sans); color: var(--taupe); }
    .qty-nudge {
      font: 600 12px var(--font-sans); color: var(--taupe);
      margin: 0 0 12px; line-height: 1.4; font-style: italic;
    }
    .qty-stepper {
      display: flex; align-items: center; gap: 0;
      border: 1.5px solid rgba(74,61,57,0.16); border-radius: 8px; overflow: hidden;
    }
    .qty-btn {
      background: var(--cream); border: none; color: var(--brown);
      cursor: pointer; font: 600 18px var(--font-sans);
      width: 40px; height: 40px; display: grid; place-items: center;
      transition: background 0.15s ease;
    }
    .qty-btn:hover { background: var(--sand); }
    .qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }
    .qty-count {
      font: 700 15px var(--font-sans); color: var(--brown);
      min-width: 36px; text-align: center;
      border-left: 1.5px solid var(--line); border-right: 1.5px solid var(--line);
      padding: 0 4px; line-height: 40px;
    }

    /* ── One-time filter bundle cards ───────────── */
    .filter-bundle-section { display: block; margin-bottom: 18px; }
    .filter-bundle-label {
      font: 600 11px var(--font-sans); letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--brown); margin-bottom: 10px; display: block;
    }
    .filter-bundle-grid {
      display: grid; grid-template-columns: repeat(4,1fr); gap: 10px;
      padding-top: 16px;
    }
    .filter-bundle-card {
      background: rgba(255,250,244,0.96); border: 1.5px solid rgba(74,61,57,0.16); border-radius: 10px;
      cursor: pointer; padding: 12px 6px; text-align: center; position: relative;
      transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }
    .filter-bundle-card.is-selected {
      background: rgba(255,249,240,0.94); border-color: var(--gold); border-width: 2px;
      box-shadow: 0 12px 24px rgba(184,142,74,0.16);
    }
    .filter-bundle-card-days {
      display: block; font: 700 12px var(--font-sans); color: var(--brown); line-height: 1.2;
    }
    .filter-bundle-card-sub {
      display: block; font: 500 11px var(--font-sans); color: var(--taupe); margin-top: 3px;
    }
    .filter-bundle-card-save {
      display: inline-block; background: rgba(184,142,74,0.15); color: var(--gold);
      border-radius: 3px; font: 700 8px var(--font-sans); letter-spacing: 0.06em;
      padding: 2px 5px; text-transform: uppercase; margin-top: 4px;
    }
    .btn-ghost {
      display: inline-flex; align-items: center; justify-content: center;
      background: rgba(255,250,244,0.86); border: 1.5px solid rgba(74,61,57,0.14); border-radius: 8px;
      color: var(--brown); cursor: pointer; font: 700 13px var(--font-sans);
      letter-spacing: 0.14em; min-height: 50px; padding: 0 24px;
      text-decoration: none; text-transform: uppercase;
      transition: border-color 0.2s ease, background 0.2s ease;
    }
    .btn-ghost:hover { border-color: var(--gold); background: rgba(255,249,240,0.98); }

    /* ===================================================
       HERO — GALLERY + BUY PANEL
    ==================================================== */
    .product-wrap {
      display: grid;
      grid-template-columns: minmax(0,1.1fr) minmax(340px,0.9fr);
      gap: clamp(22px,3.6vw,48px);
      max-width: 1300px; margin: 0 auto;
      padding: clamp(32px,4.5vw,60px) 5% clamp(32px,4.5vw,56px);
      align-items: start;
    }
    .gal-col { position: sticky; top: 80px; }
    .gal-main {
      border: 1px solid rgba(255,249,240,0.68);
      border-radius: 16px; overflow: hidden; background: var(--sand); position: relative;
      aspect-ratio: 4/5;
      max-height: min(calc(100vh - 100px), 660px);
      box-shadow: var(--surface-shadow-strong);
    }
    .gal-main img, .gal-main video { width: 100%; height: 100%; object-fit: cover; }
    .gal-image {
      inset: 0;
      opacity: 0;
      position: absolute;
      transition: opacity 0.16s ease;
      visibility: hidden;
    }
    .gal-image.is-active {
      opacity: 1;
      visibility: visible;
    }
    .gal-arrow {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 40px; height: 40px;
      border-radius: 50%;
      border: 1px solid rgba(201, 154, 93, 0.32);
      background: rgba(255, 249, 240, 0.9);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: var(--gold);
      cursor: pointer; display: grid; place-items: center;
      box-shadow: 0 2px 12px rgba(64, 54, 50, 0.1);
      transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
      z-index: 2;
    }
    .gal-arrow:hover {
      background: var(--ivory);
      box-shadow: 0 4px 18px rgba(64, 54, 50, 0.14);
      transform: translateY(-50%) scale(1.06);
    }
    .gal-arrow.prev { left: 12px; }
    .gal-arrow.next { right: 12px; }

    /* Buy panel */
    .buy-panel {
      background: var(--surface-fill);
      border: 1px solid rgba(201,154,93,0.28);
      border-radius: 16px;
      box-shadow: var(--surface-shadow-strong);
      padding: clamp(24px,2.8vw,38px);
    }
    .panel-eyebrow {
      display: block; color: var(--gold); font: 700 10px var(--font-sans);
      letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 10px;
    }
    .product-title { font-size: clamp(34px,3.7vw,52px); margin-bottom: 18px; line-height: 1.02; font-weight: 400; color: var(--brown); }
    .rating-row {
      display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin-bottom: 0;
    }
    .stars { color: var(--gold); font-size: 14px; letter-spacing: 0.1em; }
    .rating-text { font: 700 13px var(--font-sans); color: var(--brown); }
    .price-block {
      border-top: 1px solid var(--line-warm); border-bottom: 1px solid var(--line-warm);
      padding: 20px 0; margin-bottom: 20px;
    }
    .price-main { display: block; font: 800 clamp(48px,5.8vw,62px) var(--font-sans); color: var(--brown); line-height: 1; margin-bottom: 8px; }
    .price-sub { font: 700 12px var(--font-sans); color: var(--taupe); }
    .opt-row { margin-bottom: 16px; }
    .opt-label {
      display: block; font: 600 11px var(--font-sans); letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--taupe); margin-bottom: 8px;
    }
    .color-options { display: grid; gap: 8px; margin-bottom: 12px; }
    .color-option-heading {
      display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
      margin-bottom: 8px;
    }
    .color-option-heading .opt-label { margin-bottom: 0; }
    .color-option-note { color: var(--taupe); font: 700 11px var(--font-sans); }
    .sel-wrap { position: relative; }
    .sel {
      appearance: none; background: rgba(255,250,244,0.96); border: 1px solid rgba(74,61,57,0.16);
      border-radius: 8px; color: var(--brown); cursor: pointer;
      font: 600 15px var(--font-sans); min-height: 50px;
      padding: 0 42px 0 14px; width: 100%; transition: border-color 0.2s ease;
    }
    .sel:focus { outline: none; border-color: var(--blush); }
    .sel-wrap::after {
      content: ""; border-right: 1.5px solid var(--taupe); border-bottom: 1.5px solid var(--taupe);
      height: 7px; width: 7px; pointer-events: none;
      position: absolute; right: 16px; top: 50%; transform: translateY(-64%) rotate(45deg);
    }
    .plan-choice { margin: 0 0 22px; display: grid; gap: 10px; }
    .plan-btn {
      display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 14px;
      background: var(--cream); border: 1.5px solid var(--line); border-radius: 10px;
      cursor: pointer; padding: 16px; text-align: left;
      transition: border-color 0.2s ease, background 0.2s ease;
    }
    .plan-btn[aria-pressed="true"] { background: rgba(23,60,52,0.05); border-color: var(--green); }
    .plan-radio {
      width: 22px; height: 22px; border: 1.5px solid rgba(74,61,57,0.28);
      border-radius: 50%; position: relative; flex-shrink: 0;
    }
    .plan-btn[aria-pressed="true"] .plan-radio { background: var(--green); border-color: var(--green); }
    .plan-btn[aria-pressed="true"] .plan-radio::after {
      content: ""; position: absolute; top: 50%; left: 50%;
      transform: translate(-50%,-50%); width: 8px; height: 8px;
      background: var(--ivory); border-radius: 50%;
    }
    .plan-name { display: block; font: 700 15px var(--font-sans); color: var(--brown); line-height: 1.2; }
    .plan-note { display: block; font: 500 13px var(--font-sans); color: var(--taupe); margin-top: 2px; }
    .plan-badge {
      background: rgba(23,60,52,0.1); border-radius: 5px; color: var(--green);
      font: 700 10px var(--font-sans); letter-spacing: 0.1em; padding: 5px 9px;
      text-transform: uppercase; white-space: nowrap;
    }
    .act-group { display: grid; gap: 8px; margin-bottom: 12px; }
    .act-group .btn-cta { width: 100%; }
    .act-group .btn-ghost { width: 100%; min-height: 56px; }
    .btn-cta[disabled], .btn-ghost[disabled] { cursor: not-allowed; opacity: 0.58; transform: none; }
    .cart-status {
      background: rgba(23,60,52,0.08);
      border: 1px solid rgba(23,60,52,0.18);
      border-radius: 8px;
      color: var(--green);
      display: none;
      font: 700 13px/1.5 var(--font-sans);
      margin: 0 0 14px;
      padding: 12px 14px;
    }
    .cart-status.is-visible { display: block; }
    .trust-line { text-align: center; font: 600 12px var(--font-sans); color: var(--taupe); letter-spacing: 0.03em; }
    /* Buy-panel accordion dropdowns */
    .pdp-accordions { margin-top: 24px; display: grid; gap: 10px; }
    details.pdp-acc {
      background: rgba(255,249,240,0.88);
      border: 1px solid rgba(74,61,57,0.12);
      border-radius: 12px;
      padding: 0 16px;
    }
    .pdp-acc summary {
      cursor: pointer; list-style: none; padding: 15px 0;
      display: flex; justify-content: space-between; align-items: center;
      font: 800 13px var(--font-sans); color: var(--brown);
      letter-spacing: 0.04em; text-transform: uppercase; user-select: none;
    }
    .pdp-acc summary::-webkit-details-marker { display: none; }
    .pdp-acc summary::after {
      content: "+"; font: 300 22px var(--font-sans); color: var(--gold);
      flex-shrink: 0; margin-left: 10px;
    }
    details[open].pdp-acc > summary::after { content: "−"; }
    .pdp-acc-body { padding: 4px 0 18px; }

    /* Intro text inside accordions */
    .pdp-intro {
      font: 600 13px/1.65 var(--font-sans); color: var(--taupe);
      margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(74,61,57,0.08);
    }

    /* How to Use — numbered steps */
    .pdp-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
    .pdp-step { display: flex; align-items: flex-start; gap: 13px; }
    .pdp-step-num {
      flex-shrink: 0; width: 24px; height: 24px; margin-top: 1px;
      background: var(--gold); border-radius: 50%;
      color: var(--ivory); font: 700 11px var(--font-sans);
      display: grid; place-items: center;
    }
    .pdp-step-text { font: 600 13px/1.55 var(--font-sans); color: var(--brown); }

    /* Who Is It For — check items */
    .pdp-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
    .pdp-check { display: flex; align-items: flex-start; gap: 13px; }
    .pdp-check-icon {
      flex-shrink: 0; width: 24px; height: 24px; margin-top: 1px;
      background: var(--gold); border-radius: 50%;
      color: var(--ivory); font: 700 11px var(--font-sans);
      display: grid; place-items: center;
    }
    .pdp-check-text { font: 600 13px/1.55 var(--font-sans); color: var(--brown); }

    /* Benefits — gold circle ✓ + title + description */
    .pdp-benefits-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
    .pdp-benefit-item { display: flex; align-items: flex-start; gap: 13px; }
    .pdp-benefit-icon {
      flex-shrink: 0; width: 24px; height: 24px; margin-top: 1px;
      background: var(--gold); border-radius: 50%;
      color: var(--ivory); font: 700 11px var(--font-sans);
      display: grid; place-items: center;
    }
    .pdp-benefit-body { display: flex; flex-direction: column; gap: 2px; }
    .pdp-benefit-title { font: 700 13px var(--font-sans); color: var(--brown); }
    .pdp-benefit-desc { font: 600 12px/1.5 var(--font-sans); color: var(--taupe); }

    /* ===================================================
       PROOF BAR
    ==================================================== */
    .proof-bar { background: var(--blush); display: grid; grid-template-columns: repeat(4,1fr); }
    .proof-item {
      border-right: 1px solid rgba(255,249,240,0.16); padding: 32px 24px;
      text-align: center; position: relative;
    }
    .proof-item::before {
      content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: 36px; height: 3px; background: rgba(255,249,240,0.55); border-radius: 0 0 3px 3px;
    }
    .proof-item:last-child { border-right: none; }
    .proof-label {
      display: block; font: 700 10px var(--font-sans); letter-spacing: 0.16em;
      text-transform: uppercase; color: rgba(255,249,240,0.6); margin-bottom: 8px;
    }
    .proof-item strong {
      display: block; font-family: var(--font-display); font-weight: 300;
      font-size: clamp(38px,4.5vw,58px); color: var(--ivory); line-height: 1; margin-bottom: 8px;
    }
    .proof-star { font-size: clamp(22px,2.5vw,32px); color: var(--gold); vertical-align: middle; }
    .proof-item span:not(.proof-label):not(.proof-star) {
      font: 500 13px/1.5 var(--font-sans); color: rgba(255,249,240,0.85);
      max-width: 150px; margin: 0 auto; display: block;
    }

    /* ===================================================
       PROBLEM / SOLUTION
    ==================================================== */
    .ps-section { background: var(--sand); }
    .ps-grid {
      display: grid; grid-template-columns: minmax(300px,0.88fr) minmax(0,1.12fr);
      gap: clamp(36px,5vw,72px); align-items: center;
    }
    .ps-frame {
      border-radius: 20px; overflow: hidden; background: var(--cream);
      box-shadow: 0 22px 52px rgba(74,61,57,0.1); aspect-ratio: 3/4;
    }
    .ps-frame img { width: 100%; height: 100%; object-fit: cover; }
    .ps-copy h2 { margin-bottom: 10px; }
    .ps-copy h2 em { font-style: italic; color: var(--rose-soft); }
    .ps-copy > p { margin: 0 0 28px; font-size: clamp(16px,1.35vw,18px); }
    .ps-bullets { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
    .ps-bullet {
      display: flex; align-items: flex-start; gap: 14px;
      background: rgba(255,249,240,0.75); border: 1px solid var(--line);
      border-radius: 12px; padding: 18px;
    }
    .ps-icon {
      flex-shrink: 0; width: 38px; height: 38px;
      background: rgba(184,142,74,0.12); border-radius: 8px;
      display: grid; place-items: center; color: var(--gold);
    }
    .ps-icon svg { width: 20px; height: 20px; }
    .ps-bullet strong { display: block; font: 700 14px var(--font-sans); color: var(--brown); margin-bottom: 2px; }
    .ps-bullet span { font: 500 13px var(--font-sans); color: var(--taupe); line-height: 1.55; }
    .ps-tagline {
      font-family: var(--font-display); font-size: clamp(19px,1.8vw,24px);
      font-style: italic; color: var(--rose-soft); line-height: 1.5;
    }

    /* ===================================================
       BENEFITS
    ==================================================== */
    .benefits-section { background: var(--cream); }
    .guarantee-cert { margin-top: clamp(43px,5vw,64px); }
    .benefits-hd { max-width: 900px; margin-bottom: 48px; }
    .benefits-hd h2 { margin-bottom: 12px; }
    .benefits-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
    .benefit-card {
      background: var(--surface-fill); border: 1px solid rgba(201,154,93,0.22); border-radius: 16px;
      padding: clamp(24px,2.5vw,34px);
      transition: box-shadow 0.25s ease, transform 0.25s ease; cursor: default;
    }
    .benefit-card:hover { box-shadow: var(--surface-shadow); transform: translateY(-3px); }
    .ben-icon {
      width: 50px; height: 50px; background: rgba(184,142,74,0.1); border-radius: 12px;
      display: grid; place-items: center; color: var(--gold); margin-bottom: 20px;
    }
    .ben-icon svg { width: 24px; height: 24px; }
    .benefit-card h3 { font-size: clamp(19px,1.7vw,25px); margin-bottom: 10px; }
    .benefit-card p { font-size: 14px; line-height: 1.65; }

    .product-proof-strip {
      padding: clamp(2rem,3vw,3rem) 0 clamp(1.5rem,2.5vw,2.5rem);
    }
    .product-proof-grid {
      display: grid;
      grid-template-columns: repeat(4,1fr);
      gap: clamp(10px,1.4vw,18px);
      margin: 0;
    }
    .product-proof-grid figure {
      margin: 0;
      aspect-ratio: 4/5;
      border-radius: 12px;
      overflow: hidden;
      background: var(--sand);
      border: 1px solid rgba(201,154,93,0.16);
      box-shadow: var(--surface-shadow);
    }
    .product-proof-grid img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: zoom-in;
      transition: transform 0.25s ease;
    }
    .product-proof-grid img:hover { transform: scale(1.03); }

    /* ===================================================
       REVIEWS / TRUST
    ==================================================== */
    .reviews-section { background: var(--cream); padding-top: clamp(40px,5vw,64px); padding-bottom: clamp(40px,5vw,64px); }
    .reviews-top {
      display: flex; align-items: flex-end; justify-content: center;
      flex-wrap: wrap; gap: 16px; margin-bottom: 24px; text-align: center;
    }
    .rating-big { display: flex; align-items: center; gap: 20px; justify-content: center; }
    .rating-num {
      font-family: var(--font-display); font-size: clamp(72px,9vw,108px); line-height: 1;
      color: var(--brown); font-weight: 300;
    }
    .rating-meta { display: grid; gap: 8px; }
    .stars-lg { color: var(--gold) !important; font-size: 30px; letter-spacing: 0.14em; }
    .rating-meta span:last-child {
      font: 700 18px/1 var(--font-sans); color: var(--brown); letter-spacing: 0.01em;
    }
    .pdp-skeptics-h2 {
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 4vw, 3.8rem);
      font-weight: 400;
      line-height: 1.05;
      color: var(--brown);
      text-align: center;
      display: table;
      margin: 0 auto clamp(1.4rem, 2.2vw, 2rem);
      max-width: 44rem;
      position: relative;
      padding-bottom: 0.8rem;
    }
    .pdp-skeptics-h2::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: -1rem;
      right: -1rem;
      height: 1px;
      background: var(--gold);
      opacity: 0.45;
    }
    .pdp-skeptics-h2__blush { font-style: italic; color: var(--blush); }
    .pdp-skeptics-h2__gold  { font-style: italic; color: var(--gold);  }
    .pdp-stat-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(0.6rem, 1.2vw, 0.9rem);
      max-width: 680px;
      margin: 0 auto clamp(1.4rem, 2.2vw, 2rem);
    }
    .pdp-stat-card {
      background: var(--ivory);
      border: 1px solid rgba(184, 142, 74, 0.45);
      border-radius: 14px;
      padding: clamp(1.2rem, 2vw, 1.8rem) clamp(1.2rem, 2vw, 1.8rem);
      text-align: left;
    }
    .pdp-stat-num {
      font-family: var(--font-display);
      font-size: clamp(2.8rem, 5vw, 4.6rem);
      font-weight: 300;
      color: var(--brown);
      line-height: 1;
      margin: 0 0 0.35rem;
    }
    .pdp-stat-pct {
      font-size: 0.42em;
      color: var(--gold);
      vertical-align: super;
      line-height: 0;
    }
    .pdp-stat-label {
      font-family: var(--font-sans);
      font-size: clamp(0.8rem, 1.05vw, 0.92rem);
      font-weight: 700;
      color: var(--taupe);
      margin: 0;
    }
    .reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
    .rev-card {
      background: var(--surface-fill); border: 1px solid rgba(201,154,93,0.18); border-radius: 14px;
      padding: clamp(22px,2.5vw,30px); display: grid; align-content: start; gap: 14px;
    }
    .rev-top { display: flex; align-items: center; gap: 13px; }
    .rev-top img {
      width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
      flex-shrink: 0; border: 2px solid var(--line);
    }
    .rev-name { font: 700 15px var(--font-sans); color: var(--brown); }
    .rev-loc { font: 500 12px var(--font-sans); color: var(--taupe); }
    .rev-card blockquote { margin: 0; font: 600 15px/1.7 var(--font-sans); color: var(--taupe); font-style: italic; }
    .rev-tag {
      display: inline-flex; border: 1px solid rgba(184,142,74,0.4); border-radius: 5px;
      color: var(--gold); font: 600 11px var(--font-sans); letter-spacing: 0.06em;
      padding: 6px 10px; width: fit-content;
    }
    .verified-chip {
      display: inline-flex; align-items: center; gap: 5px;
      background: rgba(184,142,74,0.1); border-radius: 5px; color: var(--gold);
      font: 700 10px var(--font-sans); letter-spacing: 0.12em; padding: 5px 9px;
      text-transform: uppercase; width: fit-content;
    }

    /* ===================================================
       WHAT'S INCLUDED
    ==================================================== */
    /* Review photo carousel */
    .review-photo-strip {
      background: var(--cream);
      overflow: clip;
      padding: 52px 0;
      width: 100%;
      contain: paint;
    }
    .review-photo-strip-label {
      text-align: center;
      margin-bottom: 28px;
    }
    .review-photo-strip-label span {
      font: 800 11px var(--font-sans);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--taupe);
    }
    .carousel-viewport { overflow: clip; width: 100%; max-width: 100vw; contain: layout paint; }
    .carousel-track {
      display: flex;
      gap: 14px;
      width: max-content;
      animation: carousel-scroll 39s linear infinite;
    }
    @media (hover: hover) and (pointer: fine) {
      .carousel-viewport:hover .carousel-track { animation-play-state: paused; }
    }
    @keyframes carousel-scroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .carousel-track img {
      width: 260px;
      height: 340px;
      object-fit: cover;
      object-position: center top;
      border-radius: 14px;
      flex-shrink: 0;
      display: block;
    }

    .included-section { background: var(--cream); }
    .included-grid {
      display: grid; grid-template-columns: minmax(0,1.1fr) minmax(300px,0.9fr);
      gap: clamp(36px,5vw,72px); align-items: center;
    }
    .included-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
    .inc-item {
      display: flex; align-items: flex-start; gap: 14px;
      background: var(--ivory); border: 1px solid var(--line);
      border-radius: 12px; padding: 18px 20px;
    }
    .inc-check {
      width: 28px; height: 28px; background: rgba(184,142,74,0.14); border-radius: 50%;
      display: grid; place-items: center; color: var(--gold); flex-shrink: 0;
    }
    .inc-check svg { width: 14px; height: 14px; }
    .inc-text strong { display: block; font: 700 14px var(--font-sans); color: var(--brown); margin-bottom: 2px; }
    .inc-text span { font: 500 13px var(--font-sans); color: var(--taupe); line-height: 1.55; }
    .included-img {
      border-radius: 20px; overflow: hidden; background: var(--sand);
      box-shadow: 0 22px 52px rgba(74,61,57,0.09); aspect-ratio: 4/5;
    }
    .included-img img { width: 100%; height: 100%; object-fit: cover; }

    /* ===================================================
       PURCHASE BOX
    ==================================================== */
    .purchase-section { background: var(--sand); }
    .purchase-wrap {
      background: var(--ivory); border: 1px solid var(--line); border-radius: 20px;
      box-shadow: 0 22px 52px rgba(74,61,57,0.07);
      display: grid; grid-template-columns: minmax(260px,0.46fr) minmax(0,0.54fr);
      overflow: hidden;
    }
    .purchase-img { background: var(--cream); }
    .purchase-img img { width: 100%; height: 100%; object-fit: cover; min-height: 440px; }
    .purchase-info { padding: clamp(28px,4vw,52px); display: flex; flex-direction: column; }
    .purchase-info .product-title { font-size: clamp(26px,2.8vw,38px); margin-bottom: 10px; }
    .purchase-info .price-block { margin-bottom: 20px; }
    .purchase-info .opt-row { margin-bottom: 16px; }
    .purchase-info .plan-choice { margin-bottom: 20px; }
    .purchase-actions { margin-top: auto; display: grid; gap: 10px; }
    .purchase-actions .btn-cta { width: 100%; }

    /* ===================================================
       FAQ
    ==================================================== */
    .faq-section { background: var(--cream); }
    .faq-section .sec-inner { max-width: 840px; }
    .faq-list { margin-top: 36px; display: grid; gap: 12px; }
    details.faq-item {
      background: var(--surface-fill);
      border: 1px solid rgba(201,154,93,0.18);
      border-radius: 14px;
      padding: 0 22px;
    }
    .faq-item summary {
      color: var(--brown); cursor: pointer;
      font: 400 clamp(17px,1.6vw,21px) var(--font-display);
      list-style: none; padding: 24px 40px 24px 0; position: relative; line-height: 1.3;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: "+"; font: 300 26px var(--font-sans); color: var(--blush);
      position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    }
    details[open] > summary::after { content: "−"; }
    .faq-item p { max-width: 680px; padding: 0 0 24px; font-size: clamp(15px,1.2vw,17px); color: var(--taupe); }

    /* ===================================================
       FINAL CTA
    ==================================================== */
    .cta-section {
      background: var(--brown) !important; color: var(--ivory);
      text-align: center; padding: clamp(72px,9vw,112px) 5%;
    }
    .cta-section .sec-inner { display: grid; gap: 22px; justify-items: center; max-width: 860px; }
    .cta-section .eyebrow { color: rgba(255,249,240,0.45); }
    .cta-section h2 { color: var(--ivory); max-width: 13ch; }
    .cta-section p { color: rgba(255,249,240,0.68); max-width: 460px; font-size: clamp(15px,1.3vw,17px); }
    .cta-section .btn-cta { min-width: min(400px,100%); }
    .cta-trust { font: 600 13px var(--font-sans); color: rgba(255,249,240,0.45); letter-spacing: 0.04em; line-height: 1.7; text-align: center; }

    /* ===================================================
       EXTENDED REVIEW WALL
    ==================================================== */
    .ext-reviews-section {
      background: var(--sand);
      scroll-margin-top: clamp(5rem, 9vw, 7rem);
    }

    /* ── Header block — centered, mirrors hero badge at larger scale ── */
    .ext-reviews-hd {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      margin-bottom: 52px;
      text-align: center;
    }

    /* Customer Choice badge pill */
    .ext-reviews-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(255, 249, 240, 0.86);
      border: 1px solid var(--line-warm);
      border-radius: 999px;
      padding: 10px 22px;
      box-shadow: 0 2px 14px rgba(184,142,74,0.10);
    }
    .ext-reviews-badge__star {
      display: inline-flex;
      align-items: center;
      color: var(--gold);
      flex-shrink: 0;
    }
    .ext-reviews-badge__title {
      font-family: var(--font-display);
      font-style: italic;
      font-size: clamp(1rem, 1.4vw, 1.15rem);
      font-weight: 700;
      color: var(--gold);
    }
    .ext-reviews-badge__pipe {
      display: block;
      width: 1px;
      height: 1.1rem;
      background: rgba(184,142,74,0.4);
      flex-shrink: 0;
    }
    .ext-reviews-badge__sub {
      font-family: var(--font-sans);
      font-size: clamp(0.72rem, 0.9vw, 0.82rem);
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--taupe);
    }

    /* Big star + score row */
    .ext-reviews-rating {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      justify-content: center;
      flex-wrap: nowrap;
    }
    .ext-reviews-stars {
      color: var(--gold);
      font-size: clamp(1.1rem, 1.8vw, 1.4rem);
      letter-spacing: 0.06em;
      line-height: 1;
    }
    .ext-reviews-score {
      font-family: var(--font-display);
      font-size: clamp(1.1rem, 1.8vw, 1.4rem);
      font-weight: 700;
      color: var(--brown);
      line-height: 1;
    }
    .ext-reviews-sep {
      color: var(--taupe);
      font-size: clamp(1rem, 1.5vw, 1.2rem);
      opacity: 0.45;
      line-height: 1;
    }
    .ext-reviews-count {
      font-family: var(--font-sans);
      font-size: clamp(0.88rem, 1.2vw, 1rem);
      font-weight: 600;
      color: var(--taupe);
    }
    .ext-reviews-masonry {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      align-items: start;
    }
    .ext-reviews-masonry.is-measured {
      grid-auto-rows: 8px;
    }
    .ext-rev-card {
      break-inside: avoid;
      background: var(--surface-fill); border: 1px solid rgba(201,154,93,0.18); border-radius: 16px;
      overflow: hidden; display: block; width: 100%;
    }
    .ext-reviews-masonry.is-measured .ext-rev-card {
      grid-row-end: span var(--rev-row-span, 1);
    }
    .ext-rev-photo img {
      width: 100%; object-fit: cover; display: block;
      aspect-ratio: 4/5; max-height: clamp(18rem, 42vh, 28rem); object-position: top center;
      cursor: zoom-in; transition: transform 0.25s ease;
    }
    .ext-rev-photo img:hover { transform: scale(1.02); }
    .ext-rev-photo { overflow: hidden; }
    /* Lightbox */
    #lb-overlay {
      display: none; position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,0.88); align-items: center; justify-content: center;
      cursor: zoom-out; backdrop-filter: blur(6px);
    }
    #lb-overlay.open { display: flex; }
    #lb-img {
      max-width: 90vw; max-height: 90vh; object-fit: contain;
      border-radius: 10px; box-shadow: 0 24px 64px rgba(0,0,0,0.5);
      cursor: default;
    }
    #lb-close {
      position: fixed; top: 20px; right: 24px;
      background: rgba(255,255,255,0.15); border: none; border-radius: 50%;
      color: #fff; font-size: 26px; width: 44px; height: 44px;
      cursor: pointer; display: grid; place-items: center;
      transition: background 0.2s ease;
    }
    #lb-close:hover { background: rgba(255,255,255,0.3); }
    .ext-rev-body { padding: 20px 22px; }
    .ext-rev-meta {
      display: flex; justify-content: space-between; align-items: baseline;
      margin-bottom: 6px;
    }
    .ext-rev-meta strong { font: 700 15px var(--font-sans); color: var(--brown); }
    .ext-rev-meta time { font: 500 12px var(--font-sans); color: var(--taupe); }
    .ext-rev-stars { color: var(--gold); font-size: 16px; letter-spacing: 0.06em; margin-bottom: 10px; }
    .ext-rev-card p { font: 400 14px/1.68 var(--font-sans); color: var(--taupe); margin: 0; font-style: italic; }
    .ext-rev-verified {
      display: inline-flex; align-items: center; gap: 5px; margin-bottom: 10px;
      background: rgba(23,60,52,0.07); border-radius: 5px; color: var(--green);
      font: 700 10px var(--font-sans); letter-spacing: 0.12em; padding: 4px 9px;
      text-transform: uppercase;
    }

    /* ===================================================
       REVIEW WALL — COLLAPSE / EXPAND
    ==================================================== */
    /* Cards 7–19: hidden by default, revealed on expand */
    .ext-rev-card--hidden {
      display: none;
    }
    .ext-rev-card--hidden.is-visible {
      display: block;
      width: 100%;
      animation: rev-fade-in 320ms ease both;
    }
    @keyframes rev-fade-in {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .ext-rev-card--hidden.is-visible { animation: none; }
    }

    /* Wrap that holds the fade + button, sits below the masonry */
    .ext-reviews-toggle-wrap {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 36px;
    }

    /* Gradient fade that overlays the bottom edge of the card grid */
    .ext-reviews-fade {
      display: block;
      height: 120px;
      margin-bottom: -36px;
      width: 100%;
      background: linear-gradient(to bottom, transparent 0%, var(--sand) 90%);
      pointer-events: none;
      transition: opacity 300ms ease;
    }
    .ext-reviews-fade.is-hidden {
      opacity: 0;
      pointer-events: none;
    }

    /* Toggle button */
    .ext-reviews-toggle-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: transparent;
      border: 1.5px solid var(--gold);
      border-radius: 999px;
      color: var(--brown);
      cursor: pointer;
      font: 700 13px var(--font-sans);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 14px 32px;
      transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
      position: relative;
      z-index: 1;
    }
    .ext-reviews-toggle-btn:hover {
      background: var(--gold);
      color: var(--ivory);
      box-shadow: 0 8px 24px rgba(184,142,74,0.22);
      transform: translateY(-1px);
    }
    .ext-reviews-toggle-btn:active { transform: none; }

    .ext-reviews-toggle-icon {
      transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
      flex-shrink: 0;
    }
    .ext-reviews-toggle-btn[aria-expanded="true"] .ext-reviews-toggle-icon {
      transform: rotate(180deg);
    }

    /* ===================================================
       RESPONSIVE
    ==================================================== */
    @media (max-width: 1100px) {
      .benefits-grid { grid-template-columns: repeat(2,1fr); }
      .reviews-grid  { grid-template-columns: repeat(2,1fr); }
      .ext-reviews-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .pdp-stat-grid { max-width: 100%; }
      .proof-bar     { grid-template-columns: repeat(2,1fr); }
      .proof-item    { border-bottom: 1px solid rgba(255,249,240,0.12); }
      .proof-item:nth-child(odd)    { border-right: 1px solid rgba(255,249,240,0.16); }
      .proof-item:nth-child(even)   { border-right: none; }
      .proof-item:nth-last-child(-n+2) { border-bottom: none; }
    }
    @media (max-width: 860px) {
      .nav-container { padding: 14px 18px; }
      .logo { font-size: 24px; letter-spacing: 0.18em; }
      .nav-links {
        background: rgba(201,137,126,0.98); border: 1px solid rgba(255,249,240,0.22);
        border-radius: 12px; box-shadow: 0 18px 36px rgba(64,54,50,0.14);
        display: none; flex-direction: column; gap: 0; left: 16px; padding: 8px;
        position: absolute; right: 16px; top: calc(100% + 8px);
      }
      .nav-links.is-open  { display: flex; }
      .nav-link { border-radius: 8px; padding: 14px 12px; text-align: center; width: 100%; }
      .mobile-menu-btn { display: grid; }
      .product-wrap { grid-template-columns: 1fr; padding: 24px 16px 48px; gap: 20px; }
      .gal-col { position: static; }
      .gal-main { aspect-ratio: 4/5; border-radius: 16px; }
      .section { padding: var(--section-py) 20px var(--section-py-b); }
      h1 { font-size: clamp(32px,9vw,44px); }
      h2 { font-size: clamp(28px,8.5vw,40px); }
      .ps-grid        { grid-template-columns: 1fr; }
      .ps-frame       { aspect-ratio: 4/3; order: -1; }
      .benefits-grid  { grid-template-columns: 1fr; }
      .product-proof-grid { grid-template-columns: repeat(2,1fr); }
      .reviews-top    { flex-direction: column; align-items: flex-start; }
      .pdp-stat-grid  { grid-template-columns: repeat(2, 1fr); }
      .reviews-grid   { grid-template-columns: 1fr; }
      .ext-reviews-masonry {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .included-grid  { grid-template-columns: 1fr; }
      .included-img   { aspect-ratio: 4/3; order: -1; }
      .purchase-wrap  { grid-template-columns: 1fr; }
      .purchase-img   { display: none; }
      .guarantee-cert { margin-top: 8px; }
    }
    @media (max-width: 560px) {
      .section { padding: var(--section-py) 16px var(--section-py-b); }
      .guarantee-cert { margin-top: 0; }
      .filter-bundle-grid { grid-template-columns: repeat(2,1fr); gap: 6px; }
      /* Mobile centering fixes */
      .benefits-hd { text-align: center; margin-bottom: 32px; }
      .benefits-hd h2, .benefits-hd .eyebrow { text-align: center; }
      .reviews-section .sec-inner > h2,
      .faq-section .sec-inner > h2,
      .included-section .sec-inner > h2 { text-align: center; }
      .pdp-results-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
      .filter-comparison { aspect-ratio: 3/1; }
      .fc-slider { touch-action: none; }
      .proof-bar  { grid-template-columns: 1fr; }
      .proof-item { border-right: none !important; border-bottom: 1px solid rgba(255,249,240,0.12); }
      .proof-item:last-child { border-bottom: none; }
      .ext-reviews-masonry {
        grid-template-columns: 1fr;
      }
    }
  

/* ===================================================
   PRICE ROW — strikethrough + save badge
==================================================== */
.price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.price-original {
  font: 500 15px var(--font-sans);
  color: var(--taupe);
  text-decoration: line-through;
  opacity: 0.45;
}
.price-row .price-main {
  display: inline-block;
  margin-bottom: 0;
}
.price-save {
  font: 700 11px var(--font-sans);
  color: var(--blush);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===================================================
   FILTER BUNDLE — best value badge
==================================================== */
.filter-bundle-best-value {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--ivory);
  border-radius: 4px;
  font: 700 9px var(--font-sans);
  letter-spacing: 0.08em;
  padding: 3px 9px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ===================================================
   MECHANISM RECONNECT — three-column beat
==================================================== */
.mechanism-reconnect {
  background: var(--cream);
  padding: clamp(3.5rem,6vw,5.5rem) 5%;
}
.mechanism-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.mechanism-beat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.mechanism-icon {
  width: 44px;
  height: 44px;
  color: var(--gold);
  display: grid;
  place-items: center;
}
.mechanism-icon svg {
  width: 28px;
  height: 28px;
}
.mechanism-text {
  font: 400 clamp(15px,1.15vw,16px)/1.75 var(--font-sans);
  color: var(--taupe);
  max-width: 22ch;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .mechanism-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .mechanism-beat {
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--line);
  }
  .mechanism-beat:last-child { border-bottom: none; }
  .mechanism-text { max-width: none; }
}

/* ---- next extracted block ---- */

    .water-reality-pdp-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(3rem,6vw,6rem);
      align-items: center;
      max-width: 1100px;
      margin: 0 auto;
    }
    .water-reality-pdp-text p {
      font-size: clamp(1.15rem,1.8vw,1.5rem);
      color: var(--taupe);
      line-height: 1.6;
      margin: 0;
      padding: clamp(1.2rem,2.2vw,1.8rem) 0;
    }
    .water-reality-pdp-text p:first-child { padding-top: 0; }
    .water-reality-pdp-text p:last-child { padding-bottom: 0; }
    .water-reality-pdp-img {
      margin: 0;
      max-width: 480px;
      justify-self: center;
    }
    @media (max-width: 780px) {
      .water-reality-pdp-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }
      .water-reality-pdp-img {
        max-width: 340px;
        margin: 0 auto;
        order: -1;
      }
      .water-reality-pdp-text p {
        text-align: center;
        font-size: clamp(1rem,4.5vw,1.2rem);
      }
    }

/* ===================================================
   BUY COLUMN — right-side wrapper for sticky scroll zone
==================================================== */
.buy-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ===================================================
   BENEFIT CHIPS — quick claim pills below rating row
==================================================== */
.buy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.buy-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(255,249,240,0.92);
  border: 1px solid var(--line-warm);
  border-radius: 999px;
  color: var(--brown);
  font: 700 11px var(--font-sans);
  padding: 7px 13px;
  white-space: nowrap;
}

/* ===================================================
   PANEL RESULTS — stat bars (sticky scroll zone)
==================================================== */
.panel-results {
  background: var(--surface-fill);
  border: 1px solid rgba(201,154,93,0.24);
  border-radius: 16px;
  box-shadow: var(--surface-shadow);
  padding: clamp(20px,2.2vw,28px) clamp(22px,2.6vw,36px);
}
.panel-section-label {
  font: 800 11px var(--font-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brown);
  margin: 0 0 18px;
}
.panel-stat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.panel-stat { display: flex; flex-direction: column; gap: 6px; }
.panel-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.panel-stat-text { font: 700 13px var(--font-sans); color: var(--brown); }
.panel-stat-pct  { font: 800 13px var(--font-sans); color: var(--gold); }
.panel-stat-bar  {
  height: 5px;
  background: rgba(74,61,57,0.1);
  border-radius: 999px;
  overflow: hidden;
}
.panel-stat-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 999px;
}
.panel-stat-fill--94 { width: 94%; }
.panel-stat-fill--89 { width: 89%; }
.panel-stat-fill--91 { width: 91%; }
.panel-stat-fill--87 { width: 87%; }

/* ===================================================
   PANEL INCLUDED — what's in the box
==================================================== */
.panel-included {
  background: var(--surface-fill);
  border: 1px solid rgba(201,154,93,0.24);
  border-radius: 16px;
  box-shadow: var(--surface-shadow);
  padding: clamp(20px,2.2vw,28px) clamp(22px,2.6vw,36px);
}
.panel-included-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.panel-included-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font: 700 13px/1.45 var(--font-sans);
  color: var(--brown);
}
.panel-included-check {
  color: var(--gold);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ===================================================
   GUARANTEE CERT — inline styles extracted to CSS
==================================================== */
.guarantee-cert {
  background: transparent;
  padding: clamp(2rem,3.5vw,3rem) 4.5vw;
}
.guarantee-cert-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(1.8rem,3vw,2.6rem) clamp(1.2rem,3vw,2.4rem);
  background: var(--surface-fill);
  border: 1px solid rgba(201,154,93,0.24);
  border-radius: 18px;
  box-shadow: var(--surface-shadow);
}
.guarantee-cert-eyebrow {
  font: 800 0.72rem var(--font-sans);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brown);
  margin: 0 0 1rem;
}
.guarantee-cert-headline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.8rem,3vw,2.9rem);
  color: var(--brown);
  margin: 0 0 0.9rem;
  line-height: 1.08;
}
.guarantee-cert-headline em {
  color: var(--blush);
  font-style: inherit;
}
.guarantee-cert-body {
  font: 700 clamp(0.92rem,1.25vw,1.04rem)/1.6 var(--font-sans);
  color: var(--taupe);
  margin: 0 auto;
  max-width: 36rem;
}

/* ---- next extracted block ---- */

    .filter-comparison {
      --position: 50%;
      position: relative;
      overflow: hidden;
      aspect-ratio: 40 / 9;
      width: 100%;
      max-width: 980px;
      margin: 0 auto;
      box-shadow: none;
    }
    .filter-comparison .fc-img {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: contain;
    }
    .filter-comparison .fc-after { z-index: 1; }
    .filter-comparison .fc-before {
      z-index: 2;
      clip-path: inset(0 calc(100% - var(--position)) 0 0);
    }
    .filter-comparison .fc-slider {
      position: absolute;
      inset: 0;
      cursor: ew-resize;
      opacity: 0;
      z-index: 4;
      width: 100%; height: 100%;
      margin: 0;
    }
    .filter-comparison .fc-line {
      position: absolute;
      top: 0; bottom: 0;
      left: var(--position);
      width: 2px;
      background: var(--gold);
      opacity: 0.72;
      transform: translateX(-50%);
      z-index: 3;
      pointer-events: none;
    }
    .filter-comparison .fc-button {
      position: absolute;
      top: 50%;
      left: var(--position);
      transform: translate(-50%, -50%);
      width: 2.65rem; height: 2.65rem;
      background: rgba(255,249,240,0.96);
      border: 1px solid rgba(64,54,50,0.14);
      border-radius: 50%;
      display: grid;
      place-items: center;
      box-shadow: 0 10px 24px rgba(64,54,50,0.18);
      z-index: 3;
      pointer-events: none;
      font-weight: 900;
      font-size: 0.8rem;
      letter-spacing: -1px;
      color: var(--gold);
    }
  

/* ---- next extracted block ---- */

    .hair-comparison {
      --position: 50%;
      position: relative;
      overflow: hidden;
      border-radius: 16px;
      aspect-ratio: 1 / 1;
      width: 100%;
      max-width: min(640px, 62vh);
      margin: 0 auto;
      box-shadow: 0 20px 50px rgba(64,54,50,0.16);
    }
    .hair-comparison .hc-img {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .hair-comparison .hc-after  { z-index: 1; }
    .hair-comparison .hc-before {
      z-index: 2;
      clip-path: inset(0 calc(100% - var(--position)) 0 0);
    }
    .hair-comparison .hc-slider {
      position: absolute;
      inset: 0;
      cursor: ew-resize;
      opacity: 0;
      z-index: 4;
      width: 100%; height: 100%;
      margin: 0;
    }
    .hair-comparison .hc-line {
      position: absolute;
      top: 0; bottom: 0;
      left: var(--position);
      width: 2px;
      background: var(--gold);
      transform: translateX(-50%);
      z-index: 3;
      pointer-events: none;
    }
    .hair-comparison .hc-button {
      position: absolute;
      top: 50%; left: var(--position);
      transform: translate(-50%, -50%);
      width: 3rem; height: 3rem;
      background: rgba(255,249,240,0.96);
      border: 1px solid rgba(64,54,50,0.14);
      border-radius: 50%;
      display: grid; place-items: center;
      box-shadow: 0 10px 24px rgba(64,54,50,0.18);
      z-index: 3; pointer-events: none;
      font-weight: 900; font-size: 0.8rem;
      letter-spacing: -1px; color: var(--gold);
    }
    @media (max-width: 640px) {
      .hair-comparison { max-width: 100%; border-radius: 12px; }
    }


/* ===================================================
   MECHANISM — step numbering
==================================================== */
.mechanism-hd {
  text-align: center;
  margin-bottom: clamp(1.6rem,2.8vw,2.4rem);
}
.mechanism-step-num {
  display: block;
  font: 700 10px var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.7;
  margin-bottom: 0.7rem;
}

/* ===================================================
   FILTER COMPARISON SECTION — extracted from inline styles
==================================================== */
.filter-compare-section {
  background: var(--cream);
  border-top: 1px solid rgba(184, 142, 74, 0.2);
  padding: clamp(5rem,7.2vw,7.3rem) 4.5vw clamp(4.6rem,6.4vw,6.4rem);
}
.filter-compare-section .sec-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}
.eyebrow--ruled {
  border-bottom: 1px solid var(--gold);
  display: block;
  width: fit-content;
  padding-bottom: 0.55rem;
  margin: 0 auto 0.9rem;
  filter: none;
}
.filter-compare-h2 {
  font-size: clamp(2.45rem, 4.1vw, 4.35rem);
  font-weight: 500;
  line-height: 1.06;
  max-width: 50rem;
  display: table;
  margin: 0 auto clamp(1.7rem, 2.8vw, 2.4rem);
  position: relative;
  padding-bottom: 0.9rem;
}
.filter-compare-h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -1rem;
  right: -1rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.45;
}
.filter-compare-h2 em {
  font-style: italic;
  font-weight: 700;
  color: var(--blush);
}
.filter-compare-body {
  color: var(--taupe);
  max-width: 46rem;
  margin: 0 auto clamp(2.2rem, 3.5vw, 3.2rem);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.7;
}
.filter-compare-section .filter-rule {
  display: block;
  width: min(34rem, 100%);
  margin: 0 auto clamp(2rem, 3.5vw, 3rem);
  border: none;
  border-top: 1px solid rgba(184, 142, 74, 0.3);
}
.filter-compare-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(2.3rem, 3.8vw, 3.4rem);
  padding: 0.9rem 2.4rem;
  min-height: 3rem;
  background: var(--gold);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(0.88rem, 1.1vw, 1rem);
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-button);
  text-decoration: none;
  transition: background 200ms ease, transform 200ms ease;
}
.filter-compare-cta:hover { background: var(--brown); transform: translateY(-2px); }

/* ===================================================
   RESULTS GRID — 3 before/after comparison cards
==================================================== */
.pdp-results-section {
  background: var(--cream);
  border-top: 1px solid rgba(184, 142, 74, 0.18);
  padding-top: clamp(5rem, 7.2vw, 7.3rem);
  padding-bottom: clamp(4.6rem, 6.4vw, 6.4rem);
}
.pdp-results-section .sec-inner {
  text-align: center;
  max-width: 1160px;
  margin: 0 auto;
}
.pdp-results-section h2 {
  display: table;
  position: relative;
  max-width: 46rem;
  margin: 0 auto clamp(2.3rem, 3.8vw, 3.4rem);
  padding-bottom: 0.9rem;
  font-size: clamp(2.45rem, 4.1vw, 4.35rem);
  font-weight: 500;
  line-height: 1.04;
}
.pdp-results-section h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -1rem;
  right: -1rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.45;
}
.pdp-results-section h2 em {
  font-style: italic;
  font-weight: 700;
  color: var(--blush);
}
.pdp-results-body {
  color: var(--taupe);
  max-width: 46rem;
  margin: 0 auto clamp(2.3rem, 3.8vw, 3.4rem);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.7;
}
.pdp-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
}
.pdp-result-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(74, 61, 57, 0.1);
  box-shadow: none;
  background: rgba(255, 249, 240, 0.36);
  padding: var(--space-2);
}
.pdp-bc {
  --position: 50%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  width: 100%;
  border-radius: calc(var(--radius) - 4px);
}
.pdp-bc__img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.pdp-bc__after  { z-index: 1; }
.pdp-bc__before {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--position)) 0 0);
}
.pdp-bc__slider {
  position: absolute;
  inset: 0;
  cursor: ew-resize;
  opacity: 0;
  z-index: 4;
  width: 100%; height: 100%;
  margin: 0;
}
.pdp-bc__line {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--position);
  width: 2px;
  background: var(--gold);
  opacity: 0.72;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}
.pdp-bc__handle {
  position: absolute;
  top: 50%; left: var(--position);
  transform: translate(-50%, -50%);
  width: 2.6rem; height: 2.6rem;
  background: rgba(255, 249, 240, 0.96);
  border: 1px solid rgba(184, 142, 74, 0.35);
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 1px 0 rgba(255, 249, 240, 0.9), 0 10px 22px rgba(64, 54, 50, 0.12);
  z-index: 3; pointer-events: none;
  font-weight: 900; font-size: 0.75rem;
  letter-spacing: -1px; color: var(--gold);
}
.pdp-bc__tag {
  display: none;
}
.pdp-bc__tag--before { left: 0.75rem; }
.pdp-bc__tag--after  { right: 0.75rem; }
.pdp-results-disclaimer {
  margin: clamp(2rem, 3.2vw, 2.8rem) auto 0;
  max-width: 42rem;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  color: var(--taupe);
  opacity: 0.7;
  line-height: 1.5;
  font-style: italic;
}

@media (max-width: 780px) {
  .pdp-results-section {
    padding-top: clamp(4rem, 12vw, 5rem);
    padding-bottom: clamp(3.8rem, 11vw, 4.8rem);
  }

  .pdp-results-section h2 {
    font-size: clamp(2rem, 9vw, 3rem);
    max-width: min(100%, 18ch);
  }

  .pdp-results-grid {
    display: flex;
    gap: var(--space-3);
    margin: 0;
    max-width: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0 0 var(--space-3);
    scroll-padding-inline: var(--section-px);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .pdp-results-grid::-webkit-scrollbar {
    display: none;
  }

  .pdp-result-card {
    flex: 0 0 min(82vw, 360px);
    scroll-snap-align: center;
    background: rgba(255, 249, 240, 0.58);
    border-color: rgba(184, 142, 74, 0.18);
    padding: var(--space-2);
  }
}

/* ===================================================
   PDP INSTALL + COMPARISON — product-page fit
==================================================== */
.pdp-page .install-ease {
  background: var(--cream);
  border-top: 1px solid rgba(184, 142, 74, 0.18);
  padding-top: clamp(5rem, 7.2vw, 7.3rem);
  padding-bottom: clamp(4.6rem, 6.4vw, 6.4rem);
}

.pdp-page .install-ease__grid {
  align-items: center;
  gap: clamp(2.4rem, 4.5vw, 4.8rem);
}

.pdp-page .install-ease__img {
  border: 1px solid rgba(74, 61, 57, 0.1);
  border-radius: var(--radius);
  box-shadow: none;
  background: rgba(255, 249, 240, 0.36);
  padding: var(--space-2);
  min-height: clamp(24rem, 48vw, 34rem);
}

.pdp-page .install-ease__img img {
  border-radius: calc(var(--radius) - 4px);
}

.pdp-page .install-ease__text {
  justify-content: center;
}

.pdp-page .install-ease__eyebrow,
.pdp-page .comparison-section .eyebrow {
  font-family: var(--font-sans);
  color: var(--gold);
  margin-bottom: clamp(1rem, 1.6vw, 1.4rem);
}

.pdp-page .install-ease__title,
.pdp-page .comparison-title {
  display: table;
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 4vw, 4rem);
  font-weight: 500;
  line-height: 1.04;
  color: var(--brown);
  padding-bottom: 0.9rem;
}

.pdp-page .install-ease__title {
  margin: 0 0 clamp(2rem, 3.4vw, 3rem);
}

.pdp-page .comparison-title {
  margin: 0 auto clamp(2.3rem, 3.8vw, 3.4rem);
  text-align: center;
}

.pdp-page .install-ease__title::after,
.pdp-page .comparison-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -1rem;
  right: -1rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.45;
}

.pdp-page .install-ease__title em,
.pdp-page .comparison-title em {
  font-style: italic;
  font-weight: 700;
  color: var(--blush);
}

.pdp-page .install-ease__list {
  gap: 0;
  border-top: 1px solid rgba(184, 142, 74, 0.22);
  border-bottom: 1px solid rgba(184, 142, 74, 0.22);
}

.pdp-page .install-ease__item {
  padding: clamp(1rem, 1.8vw, 1.45rem) 0;
  border-top: 0;
}

.pdp-page .install-ease__item + .install-ease__item {
  border-top: 1px solid rgba(74, 61, 57, 0.11);
}

.pdp-page .install-ease__item:last-child {
  border-bottom: 0;
}

.pdp-page .install-ease__icon {
  width: 38px;
  height: 38px;
  background: rgba(184, 142, 74, 0.1);
  border: 1px solid rgba(201, 154, 93, 0.22);
  border-radius: var(--radius-pill);
}

.pdp-page .install-ease__label {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.15vw, 1.02rem);
  font-weight: 800;
  color: var(--brown);
}

.pdp-page .install-ease__sub {
  font-family: var(--font-sans);
  font-size: clamp(0.86rem, 1vw, 0.94rem);
  color: var(--taupe);
}

.pdp-page .comparison {
  background: var(--sand);
  border-top: 1px solid rgba(184, 142, 74, 0.18);
  padding-top: clamp(5rem, 7.2vw, 7.3rem);
  padding-bottom: clamp(4.6rem, 6.4vw, 6.4rem);
}

.pdp-page .comparison .section-inner {
  max-width: 1160px;
}

.pdp-page .comparison-table-shell {
  background: rgba(255, 249, 240, 0.54);
  border: 1px solid rgba(74, 61, 57, 0.1);
  border-radius: var(--radius);
  box-shadow: none;
  padding: var(--space-2);
}

.pdp-page .comparison-col-labels {
  margin: 0 0 var(--space-2);
}

.pdp-page .comparison-col-head {
  font-family: var(--font-sans);
}

.pdp-page .comparison-section .comparison-col-head--lavero {
  border-radius: var(--radius-pill);
}

.pdp-page .comparison-table {
  font-family: var(--font-sans);
  background: rgba(255, 249, 240, 0.56);
  border-radius: calc(var(--radius) - 4px);
}

.pdp-page .comparison-table th[scope="row"] {
  color: var(--brown);
  letter-spacing: 0.08em;
}

.pdp-page .comparison-table td:nth-child(2) {
  background: rgba(184, 142, 74, 0.08);
  border-left: 1px solid rgba(201, 154, 93, 0.24);
  color: var(--brown);
}

.pdp-page .comparison-table td:nth-child(3) {
  border-left: 1px solid rgba(74, 61, 57, 0.1);
}

@media (max-width: 780px) {
  .pdp-page .install-ease,
  .pdp-page .comparison {
    padding-top: clamp(4rem, 12vw, 5rem);
    padding-bottom: clamp(3.8rem, 11vw, 4.8rem);
  }

  .pdp-page .install-ease__grid {
    gap: var(--space-8);
  }

  .pdp-page .install-ease__img {
    height: auto;
    min-height: clamp(20rem, 64vw, 26rem);
  }

  .pdp-page .install-ease__text {
    align-items: center;
    text-align: center;
  }

  .pdp-page .install-ease__eyebrow,
  .pdp-page .comparison-section .eyebrow {
    margin-left: auto;
    margin-right: auto;
  }

  .pdp-page .install-ease__title,
  .pdp-page .comparison-title {
    display: block;
    width: fit-content;
    max-width: min(100%, 18ch);
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1.95rem, 8.2vw, 2.65rem);
    line-height: 1.06;
    text-align: center;
  }

  .pdp-page .comparison-title {
    max-width: min(100%, 22ch);
  }

  .pdp-page .install-ease__title::after,
  .pdp-page .comparison-title::after {
    left: 50%;
    right: auto;
    width: min(100%, 10rem);
    transform: translateX(-50%);
  }

  .pdp-page .comparison-mobile-only {
    box-shadow: none;
    border-radius: var(--radius);
    background: rgba(255, 249, 240, 0.58);
    border: 1px solid rgba(184, 142, 74, 0.18);
    padding: var(--space-2);
  }

  .pdp-page .comparison-mobile-only table {
    border-radius: calc(var(--radius) - 4px);
    overflow: hidden;
  }
}

/* ===================================================
   REVIEWS — disclaimer
==================================================== */
.reviews-disclaimer {
  font-size: 12px;
  color: var(--taupe);
  margin: -10px 0 20px;
}

/* ===================================================
   GUARANTEE CERTIFICATE
==================================================== */
.pdp-cert-wrap {
  background: radial-gradient(ellipse 80% 60% at center, rgba(184, 142, 74, 0.1) 0%, transparent 70%), var(--brown);
  border-top: 3px solid rgba(184, 142, 74, 0.55);
  border-bottom: 3px solid rgba(184, 142, 74, 0.55);
  padding: clamp(2.5rem, 5vw, 4rem) 5%;
}

.pdp-cert {
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(2rem, 3.5vw, 2.8rem) clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(184, 142, 74, 0.45);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(184, 142, 74, 0.12);
  position: relative;
  text-align: center;
  overflow: hidden;
}

.pdp-cert__rule {
  position: absolute;
  left: 5%;
  right: 5%;
  height: 1px;
  background: rgba(184, 142, 74, 0.6);
  height: 2px;
}

.pdp-cert__rule--top  { top: clamp(0.7rem, 1.2vw, 1rem); }
.pdp-cert__rule--bottom { bottom: clamp(0.7rem, 1.2vw, 1rem); }

.pdp-cert__label {
  font-family: var(--font-sans);
  font-size: clamp(0.88rem, 1.2vw, 1.05rem);
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--gold);
  opacity: 1;
  margin: 0 0 clamp(1rem, 1.6vw, 1.4rem);
}

.pdp-cert__head {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  color: var(--ivory);
  margin: 0 0 clamp(0.9rem, 1.6vw, 1.4rem);
  line-height: 1.05;
}


.pdp-cert__accent { color: var(--blush); }

.pdp-cert__sub {
  font-family: var(--font-sans);
  font-size: clamp(0.88rem, 1.3vw, 1.05rem);
  font-weight: 500;
  font-size: clamp(0.96rem, 1.4vw, 1.15rem);
  font-weight: 600;
  color: rgba(255, 249, 240, 0.88);
  max-width: 62rem;
  margin: 0 auto;
  line-height: 1.55;
}

/* ===================================================
   PDP DEPTH PASS — warm physical surfaces, not SaaS gloss
==================================================== */
.rev-card,
.inc-item,
.included-img,
details.faq-item,
.ext-rev-card,
.purchase-wrap,
.panel-results,
.panel-included,
.guarantee-cert-inner,
.pdp-cert {
  transform: translateZ(0);
}

.pdp-result-card,
.rev-card,
.inc-item,
.included-img,
details.faq-item,
.ext-rev-card,
.purchase-wrap,
.panel-results,
.panel-included,
.guarantee-cert-inner {
  position: relative;
  box-shadow: 0 1px 0 rgba(255, 249, 240, 0.74), 0 18px 46px rgba(64, 54, 50, 0.075);
}

.rev-card::after,
.inc-item::after,
.included-img::after,
details.faq-item::after,
.ext-rev-card::after,
.purchase-wrap::after,
.panel-results::after,
.panel-included::after,
.guarantee-cert-inner::after,
.pdp-cert::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 249, 240, 0.72);
}

.included-img {
  box-shadow: var(--shadow-lift);
}

.pdp-result-card,
.pdp-result-card::after {
  box-shadow: none;
}

.filter-comparison,
.filter-comparison::after {
  box-shadow: none;
}

.filter-compare-section {
  box-shadow: inset 0 1px 0 rgba(255, 249, 240, 0.72), inset 0 -1px 0 rgba(184, 142, 74, 0.16);
}

.reviews-section,
.included-section,
.faq-section,
.pdp-results-section {
  box-shadow: inset 0 1px 0 rgba(255, 249, 240, 0.58);
}

.review-photo-strip {
  box-shadow: inset 0 1px 0 rgba(255, 249, 240, 0.62), inset 0 -1px 0 rgba(184, 142, 74, 0.12);
}

.carousel-track img {
  box-shadow: 0 16px 36px rgba(64, 54, 50, 0.12);
}

.pdp-bc__handle,
.filter-comparison .fc-button {
  box-shadow: 0 1px 0 rgba(255, 249, 240, 0.9), 0 14px 30px rgba(64, 54, 50, 0.22);
}

.filter-compare-cta,
.cta-section .btn-cta {
  box-shadow: 0 16px 32px rgba(184, 142, 74, 0.22), 0 3px 8px rgba(64, 54, 50, 0.1);
}

.cta-section {
  box-shadow: inset 0 2px 0 rgba(184, 142, 74, 0.24), inset 0 28px 80px rgba(0, 0, 0, 0.16);
}

.pdp-cert {
  box-shadow: 0 28px 84px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(184, 142, 74, 0.16), inset 0 1px 0 rgba(255, 249, 240, 0.08);
}

/* ===================================================
   PDP LOWER-PAGE COLOR RHYTHM
==================================================== */
.pdp-page .filter-compare-section,
.pdp-page .install-ease,
.pdp-page .fair-question,
.pdp-page .faq-section {
  background: var(--cream);
}

.pdp-page .pdp-results-section,
.pdp-page .comparison,
.pdp-page .review-photo-strip,
.pdp-page .ext-reviews-section {
  background: var(--sand);
}

.pdp-page .filter-compare-section,
.pdp-page .pdp-results-section,
.pdp-page .install-ease,
.pdp-page .comparison,
.pdp-page .fair-question,
.pdp-page .review-photo-strip,
.pdp-page .faq-section,
.pdp-page .ext-reviews-section {
  border-top: 1px solid rgba(184, 142, 74, 0.16);
}

.pdp-page .filter-compare-section,
.pdp-page .install-ease,
.pdp-page .fair-question,
.pdp-page .faq-section {
  box-shadow: inset 0 1px 0 rgba(255, 249, 240, 0.72);
}

.pdp-page .pdp-results-section,
.pdp-page .comparison,
.pdp-page .review-photo-strip,
.pdp-page .ext-reviews-section {
  box-shadow: inset 0 1px 0 rgba(255, 249, 240, 0.48), inset 0 -1px 0 rgba(184, 142, 74, 0.1);
}

.pdp-page .fair-question__card {
  background: rgba(255, 249, 240, 0.64);
  box-shadow: 0 1px 0 rgba(255, 249, 240, 0.78), 0 16px 42px rgba(64, 54, 50, 0.07);
}

.pdp-page .review-photo-strip {
  padding-top: clamp(3.2rem, 5vw, 4.5rem);
  padding-bottom: clamp(3.2rem, 5vw, 4.5rem);
}

.pdp-page .final-cta {
  background: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .filter-compare-cta,
  .cta-section .btn-cta,
  .rev-card,
  .inc-item,
  details.faq-item,
  .ext-rev-card {
    transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
  }

  .rev-card:hover,
  .inc-item:hover,
  details.faq-item:hover,
  .ext-rev-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 0 rgba(255, 249, 240, 0.82), 0 24px 58px rgba(64, 54, 50, 0.11);
  }

  .filter-compare-cta:hover,
  .cta-section .btn-cta:hover {
    box-shadow: 0 20px 42px rgba(184, 142, 74, 0.28), 0 5px 14px rgba(64, 54, 50, 0.13);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .filter-compare-section,
    .pdp-results-section,
    .reviews-section,
    .included-section,
    .review-photo-strip,
    .faq-section,
    .ext-reviews-section,
    .cta-section,
    .pdp-cert-wrap {
      animation: pdp-section-rise both ease-out;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
  }
}

@keyframes pdp-section-rise {
  from {
    opacity: 0.82;
    transform: translateY(var(--space-5));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}