/** Shopify CDN: Minification failed

Line 2467:2 Unexpected "{"
Line 2467:3 Expected identifier but found "%"
Line 2469:2 Unexpected "{"
Line 2469:3 Expected identifier but found "%"
Line 2471:2 Unexpected "{"
Line 2471:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:pvra-benefit-showcase (INDEX:51) */
.pvra-showcase__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
  }
  .pvra-showcase__grid--image-right .pvra-showcase__media {
    order: 2;
  }

  /* Aspect-ratio lives on the container so the img's width/height attributes
     can't fix the height and break the square. */
  .pvra-showcase__media {
    aspect-ratio: 1 / 1;
    border-radius: 2rem;
    overflow: hidden;
  }
  .pvra-showcase__media img,
  .pvra-showcase__media .pvra-showcase__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Uses the theme's .h1 for size/weight so it matches every other section heading;
     this rule only sets colour, casing and spacing. */
  .pvra-showcase__heading {
    text-transform: none;
    color: var(--color-pvra-dark-blue);
    margin: 0 0 1.6rem;
  }
  .pvra-showcase__sub {
    font-size: 1.9rem;
    line-height: 1.4;
    color: var(--color-pvra-text);
    margin: 0 0 3.6rem;
    max-width: 46rem;
  }

  .pvra-showcase__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.2rem 3.6rem;
  }
  .pvra-showcase__icon {
    display: block;
    font-size: 3.4rem;
    line-height: 1;
    margin-bottom: 1.2rem;
  }
  .pvra-showcase__pillar-title {
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 1.2;
    color: var(--color-pvra-dark-blue);
    margin: 0 0 0.6rem;
  }
  .pvra-showcase__pillar-text {
    font-size: 1.5rem;
    line-height: 1.45;
    color: var(--color-pvra-text);
    margin: 0;
  }

  @media screen and (max-width: 989px) {
    .pvra-showcase__grid {
      grid-template-columns: 1fr;
      gap: 3.2rem;
    }
    .pvra-showcase__grid--image-right .pvra-showcase__media {
      order: 0;
    }
    .pvra-showcase__media {
      aspect-ratio: 16 / 10;
    }
  }
  @media screen and (max-width: 479px) {
    .pvra-showcase__pillars {
      grid-template-columns: 1fr;
      gap: 2.4rem;
    }
  }
/* END_SECTION:pvra-benefit-showcase */

/* START_SECTION:pvra-deep-relief-steps (INDEX:60) */
.pvra-3s {
    padding-top: var(--s-pt, 44px);
    padding-bottom: var(--s-pb, 44px);
    background: var(--s-bg, #ffffff);
  }

  .pvra-3s__heading {
    text-align: center;
    color: var(--color-pvra-dark-blue);
    margin: 0 0 3.6rem;
  }
  .pvra-3s__heading em,
  .pvra-3s__heading i {
    color: var(--color-pvra-blue);
    font-style: normal;
  }

  .pvra-3s__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    align-items: start;
  }

  .pvra-3s__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 1.2rem;
    margin-bottom: 1.6rem;
  }

  .pvra-3s__title {
    font-family: var(--font-heading-family);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--color-pvra-dark-blue);
    margin: 0 0 0.8rem;
    line-height: 1.25;
  }
  .pvra-3s__kicker {
    margin: 0 0 0.4rem;
    color: var(--color-pvra-blue);
    font-family: var(--font-heading-family);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .pvra-3s__body {
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--color-pvra-text);
    margin: 0;
  }

  @media screen and (min-width: 750px) {
    .pvra-3s__grid {
      gap: 2rem;
    }
    .pvra-3s__title { font-size: 1.6rem; }
    .pvra-3s__body { font-size: 1.3rem; line-height: 1.55; }
  }

  @media screen and (min-width: 990px) {
    .pvra-3s__grid {
      gap: 2.4rem;
    }
    .pvra-3s__title { font-size: 1.9rem; }
    .pvra-3s__body { font-size: 1.5rem; }
  }

  /* Mobile only (<750px). Additive - the desktop rules above use min-width, so
     this block never applies at >=750px and desktop is unchanged.
     One step per row: each step is a large full-width square video with the
     title and body stacked underneath (matches pvra-steamer-steps). */
  @media screen and (max-width: 749px) {
    .pvra-3s__grid {
      grid-template-columns: 1fr;
      gap: 4rem;
    }
    .pvra-3s__step {
      display: block;
    }
    .pvra-3s__img {
      width: 100%;
      aspect-ratio: 1 / 1;
      margin-bottom: 1.6rem;
    }
    .pvra-3s__title {
      font-size: 1.9rem;
      margin: 0 0 0.6rem;
    }
    .pvra-3s__body {
      font-size: 1.5rem;
      line-height: 1.55;
    }
  }
/* END_SECTION:pvra-deep-relief-steps */

/* START_SECTION:pvra-listicle-objection (INDEX:75) */
/* Explicit fallback background/text for the no-scheme-selected case.
     Without this, a blank color_scheme applies no scheme class at all,
     and the section silently inherits whatever the surrounding page
     background happens to be at that scroll position — which can leave
     this section's (always-dark) text unreadable if it lands somewhere
     with a dark ambient background. Scheme classes (.color-scheme-N)
     override this when a scheme is explicitly selected. */
  .pvra-listicle-objection {
    background: #ffffff;
    color: #1a1f35;
  }

  /* Scoped as a descendant selector so this max-width reliably beats the
     shared .page-width class also on this element, which sets its own
     (much wider) max-width at equal specificity. */
  .pvra-listicle-objection .pvra-listicle-objection__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
  }

  .pvra-listicle-objection__heading {
    color: var(--color-pvra-dark-blue);
    margin: 0 0 3.2rem;
  }

  .pvra-listicle-objection__card {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
  }
  .pvra-listicle-objection__card + .pvra-listicle-objection__card {
    margin-top: 3.2rem;
    padding-top: 3.2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  /* The objection, in the reader's own voice — set apart typographically
     (italic, quote-like) so it reads as "here's the honest pushback",
     not as a section subheading. */
  .pvra-listicle-objection__question {
    font-family: var(--font-heading-family);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.8rem, 2.4vw, 2.2rem);
    line-height: 1.4;
    color: var(--color-pvra-text);
    margin: 0;
  }
  .pvra-listicle-objection__question::before { content: '\201C'; }
  .pvra-listicle-objection__question::after  { content: '\201D'; }

  .pvra-listicle-objection__answer {
    line-height: 1.6;
    color: var(--color-pvra-text);
    text-align: left;
  }
  .pvra-listicle-objection__answer p { margin: 0 0 1rem; }
  .pvra-listicle-objection__answer p:last-child { margin: 0; }

  @media (max-width: 749px) {
    .pvra-listicle-objection__heading { margin-bottom: 2.4rem; }
    .pvra-listicle-objection__question { font-size: 1.8rem; }
  }
/* END_SECTION:pvra-listicle-objection */

/* START_SECTION:pvra-listicle-offer-break (INDEX:76) */
.pvra-listicle-offer-break {
    background: var(--color-pvra-light-blue);
  }

  /* Scoped as a descendant selector (not just .pvra-listicle-offer-break__inner)
     so this max-width reliably beats the shared .page-width class also on
     this element, which sets its own (much wider) max-width at equal
     specificity. */
  .pvra-listicle-offer-break .pvra-listicle-offer-break__inner {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
  }

  .pvra-listicle-offer-break__badge {
    display: inline-block;
    margin: 0;
    padding: 0.5rem 1.4rem;
    border-radius: 999px;
    background: var(--color-pvra-dark-blue);
    color: #ffffff;
    font-family: var(--font-heading-family);
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .pvra-listicle-offer-break__heading {
    color: var(--color-pvra-dark-blue);
    margin: 0;
  }

  .pvra-listicle-offer-break__subheading {
    color: var(--color-pvra-text);
    line-height: 1.5;
    margin: 0;
    max-width: 44ch;
  }

  .pvra-listicle-offer-break__cta {
    margin-top: 0.4rem;
  }

  .pvra-listicle-offer-break__fine-print {
    color: var(--color-pvra-text);
    opacity: 0.7;
    font-size: 1.3rem;
    margin: 0;
  }

  @media (max-width: 749px) {
    .pvra-listicle-offer-break__badge { font-size: 1.2rem; }
  }
/* END_SECTION:pvra-listicle-offer-break */

/* START_SECTION:pvra-listicle-reasons (INDEX:77) */
/* ---------- Reason layout (all viewports) ---------- */
  .pvra-listicle__reason  { box-sizing: border-box; }

  /* Specificity note: .pvra-listicle__inner also carries the shared
     .page-width class (for its side padding). .page-width's own
     max-width would otherwise win ties against a same-specificity
     single-class rule here, so every max-width override in this file
     is scoped as `.pvra-listicle .pvra-listicle__inner` to reliably
     beat it regardless of stylesheet load order. */
  .pvra-listicle .pvra-listicle__inner {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
  }

  /* Heading inherits Dawn .h1 typography (4rem desktop / 3rem mobile)
     so it matches the hero and the rest of the site. Only colour and
     alignment are overridden here. */
  /* Scoped with the section class (0,2,0) on purpose: these headings also
     carry Dawn's .h1 typography class, and pvra-custom.css has a site-wide
     `h1, h2, ..., .h1, ... { font-weight: 500 }` rule that ties on
     specificity (0,1,0) and loads after this section's stylesheet — a bare
     .pvra-listicle__heading rule loses the tie and the weight silently
     stays 500. */
  .pvra-listicle .pvra-listicle__heading {
    color: var(--color-pvra-dark-blue);
    font-weight: 700;
    margin: 0;
    text-align: left;
  }
  /* Progress bar — replaces the old stacked "01" numeral. Fill width is
     set inline per-block (num/total_reasons), so this only handles the
     track/fill/label chrome. Desktop-only, same as the numeral it
     replaces (hidden on mobile below, where inline "1. Heading" numbering
     via a CSS counter is used instead — see the mobile section further
     down). */
  /* Full width of the text column on purpose. An earlier 14rem cap left
     the track ~111px wide, so reason 1's 1/7 fill rendered as ~16px of
     colour — technically correct but too small to read as progress at
     all. At full column width that same 1/7 is ~60px and obvious. */
  .pvra-listicle__progress {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    align-self: stretch;
    width: 100%;
  }
  .pvra-listicle__progress-track {
    flex: 1 1 auto;
    height: 0.9rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }
  /* Each bar starts at the PREVIOUS reason's fill and animates up to its
     own when it scrolls into view, so the bar visibly advances down the
     page (reason 3 fills 2/7 -> 3/7) rather than every bar rendering
     pre-filled and static. JS below adds .is-visible; without JS the
     fill stays at the previous value, so a no-JS reader still sees a
     sensible partial bar rather than an empty one. */
  /* display:block and the two-class selector are both load-bearing:
     base.css has `a:empty, ul:empty, ..., div:empty { display: none }`,
     and this fill div is empty by design, so a bare
     .pvra-listicle__progress-fill rule (0,1,0) loses to div:empty
     (0,1,1) and the bar renders with no colour at all no matter what
     width is set. */
  .pvra-listicle__progress .pvra-listicle__progress-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--color-pvra-blue);
    width: var(--pvra-fill-from, 0%);
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .pvra-listicle__progress.is-visible .pvra-listicle__progress-fill {
    width: var(--pvra-fill-to, 0%);
  }
  @media (prefers-reduced-motion: reduce) {
    .pvra-listicle__progress-fill { transition: none; }
  }
  .pvra-listicle__progress-label {
    flex: 0 0 auto;
    color: var(--color-pvra-blue);
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    white-space: nowrap;
  }

  .pvra-listicle__media {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 5 / 4;
    border-radius: 1.6rem;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
  }
  .pvra-listicle__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Body inherits Dawn's base body sizing so heading + copy match the
     hero and the rest of the site. */
  .pvra-listicle__body {
    line-height: 1.55;
    color: var(--color-pvra-text);
    text-align: left;
    max-width: 60ch;
  }
  .pvra-listicle__body p { margin: 0 0 1rem; }
  .pvra-listicle__body p:last-child { margin: 0; }

  .pvra-listicle__cta {
    display: flex;
    justify-content: center;
  }
  .pvra-listicle__cta:empty { display: none; }

  /* Next-reason link: underlined text in brand blue, not a button */
  .pvra-listicle__next {
    color: var(--color-pvra-blue);
    text-decoration: underline;
    text-underline-offset: 0.3rem;
    text-decoration-thickness: 1px;
    font-family: var(--font-body-family);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.4;
    background: transparent;
    border: 0;
    padding: 0.4rem 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .pvra-listicle__next:hover { opacity: 0.75; }
  .pvra-listicle__next span { margin-left: 0.4rem; }

  /* ---------- Mobile (≤749px) — flatten the text wrapper so the image
     can sit between heading and body in source order on small screens. */
  @media (max-width: 749px) {
    .pvra-listicle__text    { display: contents; }
    /* Order: image → heading → copy for each reason. */
    .pvra-listicle__media   { order: 1; }
    .pvra-listicle__heading { order: 2; }
    .pvra-listicle__body    { order: 3; }
    .pvra-listicle__cta     { order: 4; }
    .pvra-listicle__progress { order: 0; }
  }

  /* ---------- Mobile (≤749px) — inline numbered headings ("1. Heading")
     in the article/listicle style, replacing the desktop progress bar
     above. A CSS counter drives the numbering so no markup changes and
     desktop is untouched. */
  @media (max-width: 749px) {
    .pvra-listicle { counter-reset: pvra-reason var(--pvra-listicle-counter-start, 0); }
    .pvra-listicle__reason { counter-increment: pvra-reason; }
    .pvra-listicle__progress { display: none; }
    .pvra-listicle__heading::before {
      content: counter(pvra-reason) ". ";
      color: inherit;
    }
  }

  /* ---------- Mobile (≤749px) ----------
     Sections size to their content with consistent vertical padding —
     no forced full-viewport height now that the navigation is sticky. */
  @media (max-width: 749px) {
    .pvra-listicle__reason {
      padding: 3.2rem 0;
    }
    .pvra-listicle__inner {
      gap: 1.6rem;
    }
    .pvra-listicle__media {
      max-width: 100%;
      aspect-ratio: 1 / 1;
    }
    .pvra-listicle__body { line-height: 1.5; }
  }

  /* ---------- Desktop (≥990px) — image-left/text-right two-column ----------
     Equal-width columns, both bigger than the reference's own 375px/
     ~420px split (per explicit request — the reference proportions were
     a starting point, not a hard requirement). max-width raised from
     850px to 1000px and the split changed from a fixed 375px image
     column back to an even 1fr/1fr, so image and text are the same
     (larger) width.
     padding: 0 here is deliberate — .pvra-listicle__inner still carries the
     shared .page-width class (needed below 990px as the only mobile/tablet
     side gutter), whose own padding would otherwise silently eat 105px out
     of this max-width on top of it. Not needed at this breakpoint since
     max-width + margin:auto already center it. */
  @media (min-width: 990px) {
    .pvra-listicle__reason {
      padding: 8rem 0;
    }
    .pvra-listicle .pvra-listicle__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas: 'media text';
      gap: 4rem;
      align-items: center;
      max-width: 1000px;
      padding: 0;
      text-align: left;
    }
    .pvra-listicle__text {
      grid-area: text;
      display: flex;
      flex-direction: column;
      gap: 1.6rem;
    }
    .pvra-listicle__media {
      grid-area: media;
      max-width: none;
      width: 100%;
      aspect-ratio: 1 / 1;
    }
    .pvra-listicle__body {
      margin: 0;
      line-height: 1.6;
    }
  }

  /* No scroll-snap — navigation between reasons is driven by the
     "Next reason ↓" anchor links, which smooth-scroll via the
     html { scroll-behavior: smooth } rule in pvra-custom.css. */

  /* ---------- Sticky CTA bar (mobile only) ----------
     Appears once the user scrolls past the hero, stays pinned to the
     bottom of the viewport across all reasons. JS toggles `is-visible`.
     Hidden on tablet+ since desktop has enough room for the embedded
     buy section without needing a persistent CTA. */
  .pvra-listicle-sticky[hidden] { display: none; }
  @media (min-width: 750px) {
    .pvra-listicle-sticky { display: none !important; }
  }
  .pvra-listicle-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--color-pvra-dark-blue);
    color: #ffffff;
    padding: 1.2rem 1.6rem;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }
  .pvra-listicle-sticky.is-visible {
    transform: translateY(0);
  }
  .pvra-listicle-sticky__inner {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
  }
  .pvra-listicle-sticky__text {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.3rem, 1.5vw, 1.5rem);
    font-weight: 500;
    line-height: 1.3;
    flex: 1 1 auto;
  }
  /* Override the global brand-button rule (a.button.button--primary)
     in pvra-custom.css which forces ~96px horizontal padding. */
  .pvra-listicle-sticky a.button.button--primary,
  .pvra-listicle-sticky a.pvra-listicle-sticky__cta {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 1rem 1.8rem !important;
    font-size: 1.4rem !important;
    letter-spacing: 0.04em !important;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
  }
  .pvra-listicle-sticky .pvra-listicle-sticky__cta::before,
  .pvra-listicle-sticky .pvra-listicle-sticky__cta::after {
    display: none !important;
  }
  .pvra-listicle-sticky__cta-label {
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .pvra-listicle-sticky__cta-sub {
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
    margin-top: 0.2rem;
  }
  @media (max-width: 749px) {
    .pvra-listicle-sticky__text {
      font-size: 1.3rem;
    }
    .pvra-listicle-sticky__cta {
      padding: 1rem 1.6rem !important;
    }
  }
/* END_SECTION:pvra-listicle-reasons */

/* START_SECTION:pvra-moment-cards (INDEX:80) */
.pvra-mc {
    background: var(--mc-bg, #ffffff);
    padding-top: var(--mc-pt, 40px);
    padding-bottom: var(--mc-pb, 40px);
  }

  /* 1fr auto 1fr truly centres the heading in the container while the nav
     stays hard right — the empty first column balances the nav's width. */
  .pvra-mc__head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 2rem;
    margin-bottom: 2.8rem;
  }
  .pvra-mc__head-text {
    grid-column: 2;
    text-align: center;
  }
  .pvra-mc__eyebrow {
    margin: 0 0 0.8rem;
    font-family: var(--font-heading-family);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-pvra-blue);
  }
  .pvra-mc__heading {
    margin: 0;
    color: var(--color-pvra-dark-blue);
  }
  .pvra-mc__heading em,
  .pvra-mc__heading i {
    color: var(--color-pvra-blue);
    font-style: normal;
  }

  /* Nav now sits below the cards (moved out of the header). Only shown on
     mobile - hidden at >=750px by the rule further down. */
  .pvra-mc__nav { display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; }

  @media screen and (max-width: 749px) {
    .pvra-mc__head { grid-template-columns: 1fr; }
    .pvra-mc__head-text { grid-column: 1; justify-self: center; }
  }
  .pvra-mc__arrow {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: transparent;
    color: var(--color-pvra-dark-blue);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .pvra-mc__arrow:hover {
    background: var(--color-pvra-dark-blue);
    color: #fff;
    border-color: var(--color-pvra-dark-blue);
  }
  .pvra-mc__arrow svg { width: 2rem; height: 2rem; }

  .pvra-mc__scroller {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -0.4rem;
  }
  .pvra-mc__scroller::-webkit-scrollbar { display: none; }
  .pvra-mc__track {
    display: flex;
    gap: 1.8rem;
    padding: 0.4rem;
  }

  .pvra-mc__card {
    position: relative;
    flex: 0 0 82%;
    scroll-snap-align: start;
    aspect-ratio: 3 / 4;
    border-radius: 2rem;
    overflow: hidden;
    background: #d9d5cf;
  }
  .pvra-mc__media,
  .pvra-mc__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .pvra-mc__media img { object-fit: cover; display: block; }
  .pvra-mc__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.28) 42%, rgba(0, 0, 0, 0) 66%);
    pointer-events: none;
  }

  .pvra-mc__badge {
    position: absolute;
    top: 1.6rem;
    left: 1.6rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.3rem;
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.55);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
    backdrop-filter: blur(6px);
  }
  .pvra-mc__badge-icon { display: inline-flex; }
  .pvra-mc__badge-icon svg { width: 1.5rem; height: 1.5rem; }

  .pvra-mc__content {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 2.6rem;
    color: #fff;
  }
  .pvra-mc__card-heading {
    margin: 0 0 1.2rem;
    font-family: var(--font-heading-family);
    font-weight: 400;
    line-height: 1.08;
    font-size: clamp(1.8rem, 1.7vw, 2.2rem);
    color: #fff;
  }
  .pvra-mc__quote {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
  }
  .pvra-mc__quote::before { content: "\201C"; }
  .pvra-mc__quote::after { content: "\201D"; }
  .pvra-mc__attr {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    /* Matches .pvra-mc__quote — attribution reads as part of the quote, not a
       dimmed footnote. */
    color: rgba(255, 255, 255, 0.9);
  }

  @media screen and (min-width: 750px) {
    .pvra-mc__card { flex: 0 0 calc((100% - 3.6rem) / 3); }
    /* Three cards fill the row exactly, so there is nothing to scroll to. */
    .pvra-mc__nav { display: none; }
  }
/* END_SECTION:pvra-moment-cards */

/* START_SECTION:pvra-numbered-reasons (INDEX:81) */
.pvra-nr {
    padding-top: var(--nr-pt, 40px);
    padding-bottom: var(--nr-pb, 52px);
    background: var(--nr-bg, #ffffff);
  }

  .pvra-nr__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .pvra-nr__layout--no-media {
    max-width: 860px;
    margin: 0 auto;
  }

  .pvra-nr__heading {
    text-align: left;
    color: var(--color-pvra-dark-blue);
    margin: 0 0 3.2rem;
  }
  .pvra-nr__heading em,
  .pvra-nr__heading i {
    color: var(--color-pvra-blue);
    font-style: normal;
  }

  .pvra-nr__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2.6rem;
  }

  .pvra-nr__item {
    display: grid;
    grid-template-columns: 3.2rem 1fr;
    gap: 1.6rem;
    align-items: start;
  }

  .pvra-nr__num {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: var(--color-pvra-blue);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0.1rem;
  }

  .pvra-nr__title {
    font-family: var(--font-heading-family);
    font-weight: 600;
    font-size: 1.7rem;
    color: var(--color-pvra-dark-blue);
    margin: 0 0 0.5rem;
    line-height: 1.3;
  }

  /* Body copy matches the theme's global body size (1.5rem), which scales with the
     global body-scale setting via html { font-size: calc(--font-body-scale * 62.5%) }. */
  .pvra-nr__body {
    font-size: 1.5rem;
    line-height: 1.55;
    color: var(--color-pvra-text);
    margin: 0;
  }

  .pvra-nr__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 1.2rem;
  }

  @media screen and (max-width: 989px) {
    .pvra-nr__heading { text-align: center; }
    .pvra-nr__media { margin-top: 0.8rem; }
    .pvra-nr--mobile-image-first .pvra-nr__media { order: -1; margin-top: 0; }
  }

  @media screen and (min-width: 990px) {
    .pvra-nr__layout {
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: start;
    }
    .pvra-nr__media {
      position: sticky;
      top: 2rem;
    }
  }
/* END_SECTION:pvra-numbered-reasons */

/* START_SECTION:pvra-pain-points (INDEX:84) */
.pvra-pp {
    padding-top: var(--pp-pt, 40px);
    padding-bottom: var(--pp-pb, 52px);
    background: var(--pp-bg, #ffffff);
  }

  .pvra-pp__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
  }
  .pvra-pp__layout--no-media {
    max-width: 820px;
    margin: 0 auto;
  }

  .pvra-pp__heading {
    text-align: left;
    color: var(--color-pvra-dark-blue);
    margin: 0 0 3.2rem;
  }
  .pvra-pp__heading em,
  .pvra-pp__heading i {
    color: var(--color-pvra-blue);
    font-style: normal;
  }

  .pvra-pp__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .pvra-pp__item {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1.6rem;
    align-items: start;
  }

  .pvra-pp__cross {
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e02424;
    margin-top: 0.2rem;
    flex-shrink: 0;
  }
  .pvra-pp__cross svg {
    width: 100%;
    height: 100%;
  }

  /* Body copy inherits the theme's global body size (1.5rem), which scales with
     the global body-scale setting via html { font-size: calc(--font-body-scale * 62.5%) }. */
  .pvra-pp__text {
    font-size: 1.5rem;
    line-height: 1.55;
    color: var(--color-pvra-text);
    margin: 0;
  }

  .pvra-pp__media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1.2rem;
  }

  @media screen and (max-width: 989px) {
    .pvra-pp__heading { text-align: center; }
    .pvra-pp__media { margin-top: 0.8rem; }
  }

  @media screen and (min-width: 990px) {
    .pvra-pp__layout {
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
    }
  }

  /* Mobile only (<750px): image above the list. The DOM order is content then
     media (so on desktop the image sits on the right); on a phone's single
     column that puts the image below the list. `.pvra-pp__layout` is a grid, so
     order flips the media to the top. Additive, min-width rules unaffected. */
  @media screen and (max-width: 749px) {
    .pvra-pp__media {
      order: -1;
      margin-top: 0;
      margin-bottom: 1.6rem;
    }
  }
/* END_SECTION:pvra-pain-points */

/* START_SECTION:pvra-pressure-banner (INDEX:85) */
.pvra-pbanner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--pvra-pbanner-height, 72vh);
    overflow: hidden;
    isolation: isolate;
  }

  .pvra-pbanner__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .pvra-pbanner__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pvra-pbanner-focal, 50%) center;
  }

  /* Pale photography + white type needs help. Navy tint matched to the dark-section
     palette in pvra-stat-feature, heavier top and bottom so the type block sits in
     the calmest part of the frame.

     This is a ::after rather than a child div on purpose: Dawn's base.css carries
     `div:empty { display: none }`, which silently hides an empty scrim element. */
  .pvra-pbanner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(
        180deg,
        rgba(10, 20, 36, 0.42) 0%,
        rgba(10, 20, 36, 0) 34%,
        rgba(10, 20, 36, 0) 66%,
        rgba(10, 20, 36, 0.46) 100%
      ),
      rgba(10, 20, 36, var(--pvra-pbanner-scrim, 0.58));
  }

  .pvra-pbanner__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 8rem 2.4rem;
  }
  .pvra-pbanner__content {
    max-width: 92rem;
    margin: 0 auto;
    text-align: center;
  }

  /* Type colour follows the house two-tone heading: base + accent on the <em>.
     On light sections that reads dark-blue + blue; over this photograph the base
     goes white, and the accent stays --color-pvra-blue so it matches the reviews
     heading directly below. Weight is deliberately not set here — pvra-custom.css
     owns heading weight globally (`font-weight: 500 !important` on h1–h6), so any
     value set here would be dead code. */
  .pvra-pbanner__heading {
    margin: 0;
    font-family: var(--font-heading-family);
    font-size: clamp(3rem, 4.6vw, 6.4rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: #ffffff;
    text-wrap: balance;
    text-shadow: 0 1px 24px rgba(10, 20, 36, 0.34);
  }
  .pvra-pbanner__heading em {
    font-style: normal;
    color: var(--color-pvra-blue);
  }

  .pvra-pbanner__body {
    max-width: 54rem;
    margin: 2.8rem auto 0;
    font-size: 1.6rem;
    line-height: 1.62;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 1px 18px rgba(10, 20, 36, 0.42);
  }
  .pvra-pbanner__body p { margin: 0 0 1.2rem; }
  .pvra-pbanner__body p:last-child { margin-bottom: 0; }

  @media screen and (max-width: 989px) {
    .pvra-pbanner {
      min-height: var(--pvra-pbanner-height-mobile, 66vh);
    }
    .pvra-pbanner__inner {
      padding: 6rem 2rem;
    }
    .pvra-pbanner__body {
      margin-top: 2rem;
      font-size: 1.5rem;
    }
  }
/* END_SECTION:pvra-pressure-banner */

/* START_SECTION:pvra-relief-tabs (INDEX:86) */
.pvra-rt {
    background: var(--rt-bg, #ffffff);
    padding-top: var(--rt-pt, 40px);
    padding-bottom: var(--rt-pb, 40px);
  }

  .pvra-rt__eyebrow {
    margin: 0 0 1rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-pvra-blue, #4a7cff);
  }
  .pvra-rt__heading {
    margin: 0 0 1.2rem;
    font-family: var(--font-heading-family);
    font-weight: 700;
    line-height: 1.02;
    font-size: clamp(3.2rem, 5vw, 5rem);
  }
  .pvra-rt__subhead {
    margin: 0 0 2.8rem;
    max-width: 52rem;
    font-size: 1.6rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.6);
  }

  /* Pills */
  .pvra-rt__pills {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.6rem;
    scrollbar-width: none;
    margin-bottom: 3rem;
  }
  .pvra-rt__pills::-webkit-scrollbar { display: none; }
  .pvra-rt__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    flex: 0 0 auto;
    padding: 1.1rem 2rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    color: #1a1f35;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }
  .pvra-rt__pill:hover { border-color: rgba(0, 0, 0, 0.35); }
  .pvra-rt__pill.is-active {
    background: #111318;
    color: #fff;
    border-color: #111318;
  }
  .pvra-rt__pill-icon { display: inline-flex; }
  .pvra-rt__pill-icon svg { width: 1.8rem; height: 1.8rem; }

  /* Carousel */
  .pvra-rt__scroller {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pvra-rt__scroller::-webkit-scrollbar { display: none; }
  .pvra-rt__track {
    display: flex;
    gap: 2rem;
    padding-inline: var(--rt-gutter, 1.5rem);
  }
  .pvra-rt__card {
    flex: 0 0 min(112rem, 88vw);
    scroll-snap-align: start;
    scroll-margin-left: var(--rt-gutter, 1.5rem);
    display: grid;
    grid-template-columns: 1fr;
    background: #f4f4f2;
    border-radius: 2.4rem;
    overflow: hidden;
  }

  .pvra-rt__media {
    position: relative;
    min-height: 26rem;
    aspect-ratio: 4 / 3;
  }
  .pvra-rt__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pvra-rt__badge {
    position: absolute;
    top: 1.6rem;
    left: 1.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #1a1f35;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    backdrop-filter: blur(4px);
  }
  .pvra-rt__badge-icon { display: inline-flex; }
  .pvra-rt__badge-icon svg { width: 1.6rem; height: 1.6rem; }

  .pvra-rt__body {
    padding: 3.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .pvra-rt__card-eyebrow {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.45);
  }
  .pvra-rt__card-heading {
    margin: 0 0 1.4rem;
    font-family: var(--font-heading-family);
    font-weight: 700;
    line-height: 1.05;
    font-size: clamp(2.8rem, 3.4vw, 4rem);
    color: #111318;
  }
  .pvra-rt__card-desc {
    margin: 0 0 2rem;
    font-size: 1.6rem;
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.62);
  }
  .pvra-rt__checks {
    list-style: none;
    margin: 0 0 2.4rem;
    padding: 0;
    display: grid;
    gap: 1.1rem;
  }
  .pvra-rt__checks li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.55rem;
    line-height: 1.35;
    color: #1a1f35;
  }
  .pvra-rt__check {
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    color: var(--color-pvra-blue, #4a7cff);
  }
  .pvra-rt__card-close {
    margin: 0;
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: 1.9rem;
    color: #111318;
  }

  @media screen and (min-width: 750px) {
    .pvra-rt__card { grid-template-columns: 42% 1fr; }
    .pvra-rt__media { aspect-ratio: auto; height: 100%; }
    .pvra-rt__body { padding: 4.4rem; }
  }
/* END_SECTION:pvra-relief-tabs */

/* START_SECTION:pvra-scent-panel (INDEX:89) */
.pvra-scent-panel {
    color: var(--color-pvra-dark-blue);
  }
  /* The coloured fill is now a contained, rounded box that sits inside
     .page-width (so it never reaches the screen edge — the page-width gutter
     is the outer margin). The box owns the inner padding; the grid just lays
     out content within it. */
  .pvra-scent-panel__box {
    background: var(--pvra-panel-bg, #E5F0FC);
    border-radius: 2.8rem;
    padding: 5.2rem;
    overflow: hidden;
  }
  .pvra-scent-panel__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4.8rem;
  }
  .pvra-scent-panel__grid--image-left .pvra-scent-panel__content { order: 2; }
  .pvra-scent-panel__grid--image-left .pvra-scent-panel__media { order: 1; }

  .pvra-scent-panel__eyebrow {
    font-family: var(--font-heading-family);
    /* 1.5rem is the house eyebrow size (pvra-mc, pvra-stat-feature) */
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-pvra-blue);
    margin: 0 0 1rem;
  }
  /* Pack name | scent, inline on one row. */
  .pvra-scent-panel__eyebrow-sep {
    display: inline-block;
    margin: 0 0.5rem;
    font-weight: 400;
    opacity: 0.55;
  }
  /* Scent takes the darker tint of the panel colour (see --pvra-scent-accent). */
  .pvra-scent-panel__eyebrow-scent {
    color: var(--pvra-scent-accent, var(--color-pvra-dark-blue));
  }

  .pvra-scent-panel .pvra-scent-panel__heading {
    margin: 0 0 2.4rem;
    color: var(--color-pvra-dark-blue);
  }

  .pvra-scent-panel__chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
  }
  /* Icon to the left of the label. */
  .pvra-scent-panel__chip {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: var(--pvra-chip-fill, #ffffff);
    border-radius: 1.2rem;
    padding: 1.4rem 1.6rem;
  }
  .pvra-scent-panel__chip-icon { flex: 0 0 auto; display: inline-flex; }
  .pvra-scent-panel__chip-icon svg {
    width: 5rem;
    height: 5rem;
    color: var(--pvra-scent-accent, var(--color-pvra-blue));
  }
  /* Asset icons (SVG files in /assets). These carry their own fill, so unlike the
     inline set they don't tint with --pvra-scent-accent. */
  .pvra-scent-panel__chip-icon img {
    width: 5rem;
    height: 5rem;
    display: block;
    object-fit: contain;
  }
  .pvra-scent-panel__chip-label {
    font-family: var(--font-heading-family);
    font-weight: 600;
    font-size: 1.45rem;
    line-height: 1.25;
    color: var(--pvra-scent-accent, var(--color-pvra-blue));
  }

  /* Body copy — one continuous block below the chips. */
  .pvra-scent-panel__lead {
    margin: 3.6rem 0 0;
    font-size: 1.55rem;
    line-height: 1.6;
    color: var(--color-pvra-text);
  }
  .pvra-scent-panel__lead p { margin: 0 0 1.2rem; }
  .pvra-scent-panel__lead p:last-child { margin-bottom: 0; }

  /* Source citation — sits quietly under the copy. */
  .pvra-scent-panel__footnote {
    margin: 1.4rem 0 0;
    font-size: 1.2rem;
    line-height: 1.4;
    color: #5a5f68; /* the theme's secondary/caption grey */
  }

  /* Small uppercase accent introducing the copy. */
  .pvra-scent-panel__triad {
    margin: 2.8rem 0 0;
    font-family: var(--font-heading-family);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pvra-scent-accent, var(--color-pvra-blue));
  }

  /* Contained rounded square with space around it — does not bleed to the panel edge.
     The box keeps its size; the image inside is scaled down (contain) and centred on
     white so there's padding around the packet without changing the box dimensions. */
  .pvra-scent-panel__media {
    aspect-ratio: 1 / 1;
    border-radius: 1.6rem;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pvra-scent-panel__media img,
  .pvra-scent-panel__media .pvra-scent-panel__placeholder {
    width: 78%;
    height: 78%;
    object-fit: contain;
    display: block;
  }

  @media screen and (max-width: 989px) {
    .pvra-scent-panel__box {
      border-radius: 2rem;
      padding: 3.2rem 2rem;
    }
    .pvra-scent-panel__grid,
    .pvra-scent-panel__grid--image-left {
      grid-template-columns: 1fr;
      gap: 3.2rem;
    }
    .pvra-scent-panel__content,
    .pvra-scent-panel__grid--image-left .pvra-scent-panel__content { order: 2; }
    .pvra-scent-panel__media,
    .pvra-scent-panel__grid--image-left .pvra-scent-panel__media {
      order: 1;
      aspect-ratio: 16 / 10;
    }
  }
  /* Phones: benefit chips become a 2×2 grid of centred cards (icon on top,
     label below), and the packet image goes square. Desktop (>=990) keeps the
     side-by-side layout with icon-left chips; tablet (750–989) is unchanged. */
  @media screen and (max-width: 749px) {
    /* Stay 2-up at every phone width (was single-column below 480).
       grid-auto-rows: 1fr equalises both rows to the tallest, so all four cards
       are the same size regardless of 1- vs 2-line labels. */
    .pvra-scent-panel__chips {
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 1fr;
    }
    .pvra-scent-panel__chip {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 0.8rem;
      padding: 2rem 1.2rem;
    }
    .pvra-scent-panel__chip-label { text-align: center; }
    /* Slightly larger icons in the stacked cards (5rem on desktop). */
    .pvra-scent-panel__chip-icon svg,
    .pvra-scent-panel__chip-icon img {
      width: 6rem;
      height: 6rem;
    }

    /* Square image above each panel (overrides the 16/10 set at <=989). */
    .pvra-scent-panel__media,
    .pvra-scent-panel__grid--image-left .pvra-scent-panel__media {
      aspect-ratio: 1 / 1;
    }
  }
/* END_SECTION:pvra-scent-panel */

/* START_SECTION:pvra-split-steps (INDEX:93) */
/* Full-bleed: the split runs edge-to-edge, so no .page-width wrapper here. */
  .pvra-ss__inner {
    display: grid;
    grid-template-columns: 1fr;
  }

  .pvra-ss__media {
    background: #f2f1ed;
    min-height: 32rem;
  }
  .pvra-ss__media img,
  .pvra-ss__media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .pvra-ss__panel {
    background: var(--pvra-ss-bg, #E5F0FC);
    display: flex;
    align-items: center;
  }
  .pvra-ss__panel-inner {
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    padding: clamp(4rem, 7vw, 8rem) clamp(2.4rem, 5vw, 6rem);
  }

  .pvra-ss__heading {
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: clamp(2.6rem, 3.4vw, 3.8rem);
    line-height: 1.15;
    color: var(--color-pvra-dark-blue);
    margin: 0 0 clamp(3rem, 4vw, 4.5rem);
  }
  .pvra-ss__heading em,
  .pvra-ss__heading i {
    color: var(--color-pvra-blue);
    font-style: normal;
  }

  .pvra-ss__step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: clamp(1.6rem, 2.5vw, 3rem);
    align-items: start;
    margin-bottom: clamp(3rem, 4vw, 4.4rem);
  }
  .pvra-ss__step:last-child { margin-bottom: 0; }

  /* Helvetica Now Display ships 100/200/250/300/400/500/700/900 — there is NO 600.
     CSS rounds a requested 600 UP to 700, so anything set to 600 here renders
     Bold. Only use weights that actually exist in the family. */
  .pvra-ss__num {
    font-family: var(--font-heading-family);
    font-weight: 400;
    font-size: clamp(1.5rem, 1.7vw, 1.8rem);
    line-height: 1.35;
    color: rgba(26, 31, 53, 0.32);
    font-variant-numeric: tabular-nums;
    /* nudge the number onto the heading's optical baseline */
    padding-top: 0.15em;
  }

  .pvra-ss__step-title {
    font-family: var(--font-heading-family);
    font-weight: 500;
    font-size: clamp(1.8rem, 1.9vw, 2.1rem);
    line-height: 1.3;
    color: var(--color-pvra-dark-blue);
    margin: 0 0 0.6rem;
  }

  .pvra-ss__step-text {
    font-size: 1.6rem;
    line-height: 1.55;
    color: #5a5f68;
    margin: 0;
    max-width: 46rem;
  }

  /* Unnumbered aside — aligns with the number column, like the reference. */
  .pvra-ss__note {
    font-size: 1.4rem;
    line-height: 1.5;
    color: #6b7280;
    margin: 0 0 clamp(3rem, 4vw, 4.4rem);
  }

  @media screen and (min-width: 990px) {
    .pvra-ss__inner {
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
    }
    .pvra-ss__media { min-height: 0; }
    /* Media on the right: swap the visual order without touching DOM order,
       so the steps still read first for screen readers and on mobile. */
    .pvra-ss__inner--media-right .pvra-ss__media { order: 2; }
    .pvra-ss__inner--media-right .pvra-ss__panel { order: 1; }
  }

  @media screen and (max-width: 989px) {
    .pvra-ss__media {
      aspect-ratio: 4 / 3;
      min-height: 0;
    }
  }
/* END_SECTION:pvra-split-steps */

/* START_SECTION:pvra-story-carousel (INDEX:95) */
.pvra-sc { background: var(--pvra-sc-bg, #ffffff); }

  /* Size comes from Dawn's `.h1` on the element (same as pvra-science-cascade),
     so the house heading scale has ONE owner — don't set font-size here. */
  .pvra-sc__heading {
    color: var(--color-pvra-dark-blue);
    text-align: center;
    margin: 0 0 1.6rem;
  }
  .pvra-sc__heading em,
  .pvra-sc__heading i { color: var(--color-pvra-blue); font-style: normal; }

  /* Body size/colour taken from the scent-panel sections (Morning Energy Lift). */
  .pvra-sc__intro {
    font-size: 1.55rem;
    line-height: 1.6;
    color: var(--color-pvra-text);
    max-width: 72rem;
    text-align: center;
    margin: 0 auto clamp(2.8rem, 4vw, 4rem);
  }
  .pvra-sc__intro p { margin: 0; }

  /* Native horizontal scroll + snap: swipe and keyboard work without JS. */
  .pvra-sc__track {
    display: flex;
    gap: clamp(2rem, 4vw, 4rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    outline-offset: 4px;
  }
  .pvra-sc__track::-webkit-scrollbar { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .pvra-sc__track { scroll-behavior: auto; }
  }

  .pvra-sc__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 3vw, 3.2rem);
    align-items: start;
    /* Slides stretch to the tallest one; without this, grid distributes that
       extra height into the auto rows and opens a gap under the image. */
    align-content: start;
  }

  .pvra-sc__media {
    position: relative;
    background: #f2f1ed;
    border-radius: 1.6rem;
    overflow: hidden;
    aspect-ratio: 4 / 3;
  }
  /* Absolutely positioned so the image contributes NO intrinsic height. On
     desktop the row height is then driven by the copy column, which is what
     keeps the arrows flush under the text (a `height:100%` img against an
     auto-height row resolves to `auto` and imposes its own square height). */
  .pvra-sc__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Matches .pvra-scent-panel__eyebrow (Morning Energy Lift et al):
     1.5rem / 700 / brand blue / uppercase / 0.16em tracking. */
  .pvra-sc__step {
    display: block;
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-pvra-blue);
    font-variant-numeric: tabular-nums;
    margin-bottom: 1.2rem;
  }

  /* Helvetica Now Display has NO 600 — CSS rounds 600 up to 700 (Bold).
     Stick to weights that exist: 400 / 500 / 700. */
  .pvra-sc__slide-title {
    font-family: var(--font-heading-family);
    font-weight: 500;
    font-size: clamp(2rem, 2.2vw, 2.4rem);
    line-height: 1.25;
    color: var(--color-pvra-dark-blue);
    margin: 0 0 1rem;
  }
  .pvra-sc__body {
    display: flex;
    flex-direction: column;
  }
  .pvra-sc__slide-text {
    font-size: 1.55rem;
    line-height: 1.6;
    color: var(--color-pvra-text);
    margin: 0;
    max-width: 52rem;
  }
  .pvra-sc__slide-text p { margin: 0 0 1rem; }
  .pvra-sc__slide-text p:last-child { margin-bottom: 0; }

  /* Closing line under the carousel — centred like the intro. */
  .pvra-sc__outro {
    font-size: 1.55rem;
    line-height: 1.6;
    color: var(--color-pvra-text);
    max-width: 72rem;
    text-align: center;
    margin: clamp(2.8rem, 4vw, 4rem) auto 0;
  }
  .pvra-sc__outro p { margin: 0; }

  /* Mirrors the slide's column setup so the button + arrows land under the copy. */
  .pvra-sc__under {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    margin-top: 0;          /* flush with the copy above — no gap */
  }

  .pvra-sc__controls {
    display: flex;
    align-items: center;
    gap: clamp(1.6rem, 3vw, 3rem);
    margin-top: 0;
  }

  .pvra-sc__arrow {
    flex: 0 0 auto;
    width: 4.4rem;
    height: 4.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--color-pvra-dark-blue);
    transition: opacity 0.2s ease;
  }
  .pvra-sc__arrow svg { width: 2.6rem; height: 2.6rem; }
  .pvra-sc__arrow:disabled { opacity: 0.25; cursor: default; }
  .pvra-sc__arrow:not(:disabled):hover { opacity: 0.6; }

  .pvra-sc__progress {
    flex: 1 1 auto;
    height: 3px;
    border-radius: 999px;
    background: rgba(26, 31, 53, 0.14);
    overflow: hidden;
  }
  /* A fixed-width segment that JUMPS along the track (one slide per step),
     rather than a fill that grows from the left. Because the segment is
     exactly 1/count wide, translateX(i * 100%) lands it on slide i. */
  .pvra-sc__progress-fill {
    display: block;
    height: 100%;
    width: calc(100% / var(--pvra-sc-count, 1));
    border-radius: 999px;
    background: var(--color-pvra-dark-blue);
    transform: translateX(0);
    transition: transform 0.35s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .pvra-sc__progress-fill { transition: none; }
  }

  /* One centred CTA under the whole carousel (not per-slide).
     Appearance comes from Dawn's .button.button--primary — no font/colour
     overrides here, so it matches the theme's other CTAs (e.g. "Try It Now"). */
  .pvra-sc__cta {
    margin-top: 3.6rem;
    text-align: center;
  }

  @media screen and (min-width: 750px) {
    .pvra-sc__slide {
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
    }
    .pvra-sc__body { justify-content: flex-start; }
    /* No aspect-ratio on desktop: the image takes its height from the copy
       column, so the track ends where the copy ends and the arrows sit flush. */
    /* 3:2 on desktop — about two-thirds the height of a square at the same
       width. Copy is top-aligned with it. */
    .pvra-sc__media { aspect-ratio: 3 / 2; }
    /* Same two columns as a slide, so the right cell lines up under the copy. */
    .pvra-sc__under { grid-template-columns: 1fr 1fr; }
    /* Column 2 directly — an empty spacer div would be killed by Dawn's
       `div:empty { display: none }` in base.css (specificity 0,1,1). */
    .pvra-sc__under-main { grid-column: 2; }
  }
/* END_SECTION:pvra-story-carousel */

/* START_SECTION:pvra-three-steps (INDEX:97) */
.pvra-3s {
    padding-top: var(--s-pt, 44px);
    padding-bottom: var(--s-pb, 44px);
    background: var(--s-bg, #ffffff);
  }

  .pvra-3s__heading {
    text-align: center;
    color: var(--color-pvra-dark-blue);
    margin: 0 0 3.6rem;
  }
  .pvra-3s__heading em,
  .pvra-3s__heading i {
    color: var(--color-pvra-blue);
    font-style: normal;
  }

  .pvra-3s__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    align-items: start;
  }

  .pvra-3s__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 1.2rem;
    margin-bottom: 1.6rem;
  }

  .pvra-3s__title {
    font-family: var(--font-heading-family);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--color-pvra-dark-blue);
    margin: 0 0 0.8rem;
    line-height: 1.25;
  }
  .pvra-3s__kicker {
    margin: 0 0 0.4rem;
    color: var(--color-pvra-blue);
    font-family: var(--font-heading-family);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .pvra-3s__body {
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--color-pvra-text);
    margin: 0;
  }

  @media screen and (min-width: 750px) {
    .pvra-3s__grid {
      gap: 2rem;
    }
    .pvra-3s__title { font-size: 1.6rem; }
    .pvra-3s__body { font-size: 1.3rem; line-height: 1.55; }
  }

  @media screen and (min-width: 990px) {
    .pvra-3s__grid {
      gap: 2.4rem;
    }
    .pvra-3s__title { font-size: 1.9rem; }
    .pvra-3s__body { font-size: 1.5rem; }
  }

  /* Mobile only (<750px). Additive - the desktop rules above use min-width, so
     this block never applies at >=750px and desktop is unchanged.
     One step per row: each step is a large full-width square video with the
     title and body stacked underneath (matches pvra-steamer-steps). */
  @media screen and (max-width: 749px) {
    .pvra-3s__grid {
      grid-template-columns: 1fr;
      gap: 4rem;
    }
    .pvra-3s__step {
      display: block;
    }
    .pvra-3s__img {
      width: 100%;
      aspect-ratio: 1 / 1;
      margin-bottom: 1.6rem;
    }
    .pvra-3s__title {
      font-size: 1.9rem;
      margin: 0 0 0.6rem;
    }
    .pvra-3s__body {
      font-size: 1.5rem;
      line-height: 1.55;
    }
  }
/* END_SECTION:pvra-three-steps */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:pvra-asset-gallery (INDEX:136) */
.pvra-ag {
    position: relative;
  }
  .pvra-ag__stage {
    position: relative;
  }
  .pvra-ag__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    border-radius: var(--media-radius, 16px);
    background: #f4f5f7;
  }
  .pvra-ag__track::-webkit-scrollbar {
    display: none;
  }
  .pvra-ag__track:focus-visible {
    outline: 2px solid var(--color-pvra-dark-blue, #1a1f35);
    outline-offset: 3px;
  }
  .pvra-ag__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    aspect-ratio: 1 / 1;
  }
  .pvra-ag__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pvra-ag__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-pvra-dark-blue, #1a1f35);
    box-shadow: 0 2px 10px rgba(26, 31, 53, 0.15);
    cursor: pointer;
  }
  .pvra-ag__arrow svg {
    width: 2rem;
    height: 2rem;
  }
  .pvra-ag__arrow--prev { left: 1.2rem; }
  .pvra-ag__arrow--next { right: 1.2rem; }
  .pvra-ag__arrow:focus-visible {
    outline: 2px solid var(--color-pvra-dark-blue, #1a1f35);
    outline-offset: 2px;
  }
  .pvra-ag__counter {
    position: absolute;
    right: 1.2rem;
    bottom: 1.2rem;
    margin: 0;
    padding: 0.3rem 1rem;
    border-radius: 2rem;
    background: rgba(26, 31, 53, 0.7);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.5;
    letter-spacing: 0.04rem;
  }
  .pvra-ag__thumbs {
    display: flex;
    gap: 0.8rem;
    margin: 1rem 0 0;
    padding: 0.2rem;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pvra-ag__thumbs::-webkit-scrollbar {
    display: none;
  }
  .pvra-ag__thumb {
    display: block;
    flex: 0 0 auto;
    width: 7.2rem;
    height: 7.2rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 0.8rem;
    overflow: hidden;
    background: #f4f5f7;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s, border-color 0.15s;
  }
  .pvra-ag__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pvra-ag__slide video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pvra-ag__thumb { position: relative; }
  .pvra-ag__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    pointer-events: none;
  }
  .pvra-ag__play svg {
    width: 2.6rem;
    height: 2.6rem;
    padding: 0.5rem;
    border-radius: 50%;
    background: rgba(26, 31, 53, 0.55);
  }
  .pvra-ag__thumb.is-active,
  .pvra-ag__thumb:hover {
    opacity: 1;
  }
  .pvra-ag__thumb.is-active {
    border-color: var(--color-pvra-dark-blue, #1a1f35);
  }
  .pvra-ag__thumb:focus-visible {
    outline: 2px solid var(--color-pvra-dark-blue, #1a1f35);
    outline-offset: 2px;
  }
  @media screen and (min-width: 750px) {
    .pvra-ag__counter { display: none; }
    .pvra-ag__thumb { width: 8.8rem; height: 8.8rem; }
  }
  @media screen and (max-width: 749px) {
    /* Match the 16px gap Dawn's gallery leaves above the rating on mobile. */
    .pvra-ag { margin-bottom: 1.2rem; }
    .pvra-ag__arrow { width: 3.6rem; height: 3.6rem; }
    .pvra-ag__arrow svg { width: 1.7rem; height: 1.7rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pvra-ag__track { scroll-behavior: auto; }
  }
/* END_SNIPPET:pvra-asset-gallery */

/* START_SNIPPET:pvra-bogo-selector (INDEX:138) */
/* ============================================================
   PVRA Two Selectors — Stacked BOGO cards.
   Note: --pvra-ring and --pvra-compare custom properties are set
   inline on the root div from snippet params.
   ============================================================ */

#pvra-two-selectors-pvra-bogo {
  --pvra-black: var(--color-pvra-dark-blue);
  --pvra-card-bg: #ffffff;
  --pvra-card-active-bg: var(--color-pvra-light-blue);
  --pvra-card-border: #d6dae0;
  --pvra-card-border-active: var(--color-pvra-dark-blue);
  --pvra-radius: 1.0rem;
  --pvra-title: 1.8rem;
  max-width: 100%;
  margin: 1.2rem 0 1.6rem 0 !important;
  padding: 0 !important;
  width: 100%;
}

/* Section starts hidden until JS places it */
#pvra-two-selectors-pvra-bogo:not(.pvra-visible) {
  display: none;
}

/* ---------- Helper text ---------- */
#pvra-two-selectors-pvra-bogo .pvra-helper-text {
  font-family: var(--font-body-family);
  font-size: 1.4rem;
  font-weight: 600;
  color: rgb(var(--color-foreground));
  margin: 0 0 0.8rem;
  line-height: 1.3;
}

/* ---------- Group (stacked) ---------- */
#pvra-two-selectors-pvra-bogo .pvra-group {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  border: 0;
  margin: 0;
  padding: 0;
}

/* ---------- Card ---------- */
#pvra-two-selectors-pvra-bogo .pvra-card {
  position: relative;
  background: #ffffff;
  border: 0;
  border-radius: var(--pvra-radius);
  padding: 0;
  cursor: pointer;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

#pvra-two-selectors-pvra-bogo .pvra-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid #d6dae0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  transition: border-color 0.2s ease;
}

#pvra-two-selectors-pvra-bogo .pvra-card.is-active::after {
  border-color: var(--color-pvra-dark-blue);
}

/* Header (title + price) — white */
#pvra-two-selectors-pvra-bogo .pvra-card__header {
  padding: 1.4rem 1.6rem;
  background: #ffffff;
}

/* Bottom wrap (bullets + color picker) — light blue */
#pvra-two-selectors-pvra-bogo .pvra-card__bottom {
  background: var(--color-pvra-light-blue);
  padding: 1.4rem 1.6rem;
}

/* Hide the entire bottom (bullets + color picker) on unselected cards */
#pvra-two-selectors-pvra-bogo .pvra-card:not(.is-active) .pvra-card__bottom {
  max-height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.2s ease, padding 0.2s ease, opacity 0.2s ease;
}
#pvra-two-selectors-pvra-bogo .pvra-card.is-active .pvra-card__bottom {
  max-height: 80rem;
  transition: max-height 0.3s ease, padding 0.2s ease, opacity 0.2s ease 0.05s;
}
/* Also: no bullets means no extra spacing above color picker */
#pvra-two-selectors-pvra-bogo .pvra-card__bullets:empty {
  display: none;
}

/* "What's Included:" label above the bullet list */
#pvra-two-selectors-pvra-bogo .pvra-card__bullets-label {
  margin: 0 0 0.5rem;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-pvra-dark-blue);
}

/* Bullet list */
#pvra-two-selectors-pvra-bogo .pvra-card__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#pvra-two-selectors-pvra-bogo .pvra-card__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--color-pvra-text);
}
#pvra-two-selectors-pvra-bogo .pvra-card__bullets svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  color: var(--color-pvra-dark-blue);
  margin-top: 0.25rem;
}

/* Hidden radio */
#pvra-two-selectors-pvra-bogo .pvra-radio {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Card header (title + price) ---------- */
#pvra-two-selectors-pvra-bogo .pvra-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
}


#pvra-two-selectors-pvra-bogo .pvra-card__radio {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 2px solid var(--pvra-card-border);
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.2s ease;
}

#pvra-two-selectors-pvra-bogo .pvra-card.is-active .pvra-card__radio {
  border-color: var(--color-pvra-dark-blue);
}

#pvra-two-selectors-pvra-bogo .pvra-card.is-active .pvra-card__radio::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border-radius: 50%;
  background: var(--color-pvra-dark-blue);
}

#pvra-two-selectors-pvra-bogo .pvra-card__titleblock {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}

#pvra-two-selectors-pvra-bogo .pvra-card__title {
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: var(--pvra-title);
  line-height: 1.1;
  color: var(--pvra-black);
}

#pvra-two-selectors-pvra-bogo .pvra-card__save {
  width: 100%;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.25;
  color: #16a34a;
}

#pvra-two-selectors-pvra-bogo .pvra-card__desc {
  width: 100%;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.3;
  color: #6b7280;
}

#pvra-two-selectors-pvra-bogo .pvra-card:not(.is-active) .pvra-card__title,
#pvra-two-selectors-pvra-bogo .pvra-card:not(.is-active) .pvra-card__save {
  font-weight: 400;
}

/* Pill badge next to title ("50% off 2nd Mat") */
#pvra-two-selectors-pvra-bogo .pvra-pill {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  background: #e6e7eb;
  color: #6b7280;
  padding: 0.4rem 0.9rem;
  border-radius: 0.6rem;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Active state: pill turns red */
#pvra-two-selectors-pvra-bogo .pvra-card.is-active .pvra-pill {
  background: #FEE2E2;
  color: #DC2626;
}

/* Price block (right aligned) */
#pvra-two-selectors-pvra-bogo .pvra-card__priceblock {
  text-align: right;
  flex-shrink: 0;
}

#pvra-two-selectors-pvra-bogo .pvra-card__priceline {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.6rem;
  white-space: nowrap;
  line-height: 1.1;
}

#pvra-two-selectors-pvra-bogo .pvra-price-now {
  color: var(--pvra-black);
  font-size: 1.8rem;
  font-weight: 700;
}

#pvra-two-selectors-pvra-bogo .pvra-price-compare {
  color: var(--pvra-compare);
  text-decoration: line-through;
  text-decoration-thickness: 0.15rem;
  font-size: 1.4rem;
  font-weight: 600;
}

#pvra-two-selectors-pvra-bogo .pvra-card__per {
  font-size: 1.1rem;
  color: rgba(26, 31, 53, 0.55);
  font-weight: 400;
  margin-top: 0.2rem;
  line-height: 1.1;
}

/* ---------- Ribbon ("MOST POPULAR") ---------- */
#pvra-two-selectors-pvra-bogo .pvra-ribbon {
  position: relative;
  display: block;
  width: 100%;
  background: var(--color-pvra-dark-blue);
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.7rem 1rem;
  white-space: nowrap;
  line-height: 1;
  box-sizing: border-box;
}

#pvra-two-selectors-pvra-bogo .pvra-card:has(.pvra-ribbon) {
  margin-top: 0;
}

/* ---------- Body (dropdowns) — only shown on active card ---------- */
#pvra-two-selectors-pvra-bogo .pvra-card__body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.2s ease;
}

#pvra-two-selectors-pvra-bogo .pvra-card.is-active .pvra-card__body {
  max-height: 30rem;
  opacity: 1;
  margin-top: 0.8rem;
}
/* When there are no bullets above it, the color body is the box's first child.
   Drop the extra margin-top so "Select color(s)" sits at the box's own top padding —
   symmetric with the bottom padding under the "Sorry…" note, and identical across
   every color card (1 Mat, Buy 2). Bulleted cards keep the margin for separation. */
#pvra-two-selectors-pvra-bogo .pvra-card.is-active .pvra-card__body:first-child {
  margin-top: 0;
}

/* Benefit icons row (Buy 2 card) — white section under the price, shown when active */
#pvra-two-selectors-pvra-bogo .pvra-card__features {
  display: none;
  position: relative;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 1.6rem 0.2rem 0.8rem;
}
/* Buy 2 card: the icons live in the white section above the light-blue box.
   The light-blue box itself keeps the SAME internal spacing as every other card
   (1 Mat, Bundle) — default box padding + body margin — so "Select colors" and the
   bottom "Sorry…" note sit identically across cards. No per-card overrides here. */
/* Faint divider above the icons — inset from both ends (absolute, so it isn't a flex item) */
#pvra-two-selectors-pvra-bogo .pvra-card__features::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2rem;
  right: 2rem;
  height: 1px;
  background: rgba(0, 0, 0, 0.09);
}
#pvra-two-selectors-pvra-bogo .pvra-card.is-active .pvra-card__features {
  display: flex;
}
#pvra-two-selectors-pvra-bogo .pvra-feature {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.7rem;
}
#pvra-two-selectors-pvra-bogo .pvra-feature__icon {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 0.5rem;
  background: #f1f1ef;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pvra-black, #1a1f35);
  flex: 0 0 auto;
}
#pvra-two-selectors-pvra-bogo .pvra-feature__icon svg {
  width: 2rem;
  height: 2rem;
}
#pvra-two-selectors-pvra-bogo .pvra-feature__label {
  font-size: 1.1rem;
  line-height: 1.3;
  {% if template.suffix contains 'deep-foot' %}
  color: var(--color-pvra-dark-blue, #1a1f35);
  {% else %}
  color: var(--color-pvra-text, #1a1f35);
  {% endif %}
}

/* "Color" label above the dropdowns */
#pvra-two-selectors-pvra-bogo .pvra-inline-label {
  display: block;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-pvra-text);
  margin: 0 0 0.3rem;
  line-height: 1;
}

#pvra-two-selectors-pvra-bogo .pvra-dropdowns {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Row: thumbnail + narrow dropdown */
#pvra-two-selectors-pvra-bogo .pvra-dropdown-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* Thumbnail tile showing selected mat */
#pvra-two-selectors-pvra-bogo .pvra-thumb {
  display: block !important; /* override Dawn's div:empty { display:none } */
  flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  background: #ffffff;
  border: 1px solid #d6dae0;
  border-radius: 0.5rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#pvra-two-selectors-pvra-bogo .pvra-dropdown {
  position: relative;
  flex: 0 0 12rem;
  min-width: 0;
}

#pvra-two-selectors-pvra-bogo .pvra-color-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: #ffffff;
  border: 1px solid #d6dae0;
  border-radius: 0.5rem;
  padding: 0.7rem 2.6rem 0.7rem 1rem;
  font-family: var(--font-body-family);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--pvra-black);
  cursor: pointer;
  line-height: 1.2;
  height: 3.2rem;
}

#pvra-two-selectors-pvra-bogo .pvra-color-select:focus {
  outline: none;
  border-color: var(--pvra-black);
}

/* Chevron */
#pvra-two-selectors-pvra-bogo .pvra-dropdown::after {
  content: '';
  position: absolute;
  right: 1.4rem;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  border-right: 2px solid var(--pvra-black);
  border-bottom: 2px solid var(--pvra-black);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Out-of-stock color — red outline on the dropdown + red note underneath */
#pvra-two-selectors-pvra-bogo .pvra-dropdown.pvra-oos .pvra-color-select {
  border-color: #e02424;
  box-shadow: 0 0 0 1px #e02424;
  color: #e02424;
}
#pvra-two-selectors-pvra-bogo .pvra-dropdown.pvra-oos::after {
  border-color: #e02424;
}
/* Outline sits INSIDE the thumb (border + inset shadow) so it's never clipped by the
   card body's overflow:hidden (used for the expand animation). */
#pvra-two-selectors-pvra-bogo .pvra-dropdown.pvra-oos ~ .pvra-thumb,
#pvra-two-selectors-pvra-bogo .pvra-dropdown-row:has(.pvra-oos) .pvra-thumb {
  border-color: #e02424;
  box-shadow: inset 0 0 0 1.5px #e02424;
}
#pvra-two-selectors-pvra-bogo .pvra-oos-note {
  margin: 1rem 0 0;
  color: #e02424 !important;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.4;
}
#pvra-two-selectors-pvra-bogo .pvra-oos-note[hidden] { display: none; }

/* Mobile */
@media (max-width: 749px) {
  #pvra-two-selectors-pvra-bogo { --pvra-title: 1.6rem; }
  #pvra-two-selectors-pvra-bogo .pvra-card__header,
  #pvra-two-selectors-pvra-bogo .pvra-card__bottom { padding: 1.3rem 1.4rem; }
  #pvra-two-selectors-pvra-bogo .pvra-price-now { font-size: 1.6rem; }
  #pvra-two-selectors-pvra-bogo .pvra-ribbon { font-size: 1.2rem; padding: 0.7rem 1rem; }
}
/* END_SNIPPET:pvra-bogo-selector */

/* START_SNIPPET:pvra-guarantee-line (INDEX:139) */
.pvra-gline {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin: 1.8rem 0;
  }
  .pvra-gline__badge {
    flex: 0 0 auto;
    width: 6.6rem;
    height: 6.6rem;
  }
  .pvra-gline__text {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.45;
    color: var(--color-pvra-text);
  }
  .pvra-gline__text strong {
    color: var(--color-pvra-dark-blue);
    font-weight: 700;
  }
/* END_SNIPPET:pvra-guarantee-line */

/* START_SNIPPET:pvra-rating-badge (INDEX:143) */
.pvra-rating {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.2rem;
    flex-wrap: wrap;
  }
  .pvra-rating__stars { display: inline-flex; gap: 0; }
  .pvra-rating__star + .pvra-rating__star { margin-left: -0.5rem; }
  .pvra-rating__star { width: 2.4rem; height: 2.4rem; fill: #F7CB62; display: block; flex: 0 0 auto; }
  .pvra-rating__text {
    font-size: 1.6rem;
    line-height: 1;
    color: #000;
  }
  .pvra-rating__text strong { font-weight: 700; }
  .pvra-rating__muted { color: #000; font-weight: 400; }
/* END_SNIPPET:pvra-rating-badge */

/* START_SNIPPET:pvra-review-card (INDEX:145) */
/* Let the gallery flow (not sticky) so the review card sits directly beneath the images. */
  .product__media-wrapper .product__column-sticky {
    position: static !important;
  }

  .pvra-rc {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    margin-top: 2rem;
    padding: 2rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1.6rem;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  }
  .pvra-rc__media {
    flex: 0 0 auto;
    width: 12rem;
    height: 12rem;
    border-radius: 1.2rem;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
  }
  .pvra-rc__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pvra-rc__body {
    flex: 1 1 auto;
    min-width: 0;
  }
  .pvra-rc__quote {
    margin: 0 0 1.2rem;
    font-size: 1.3rem;
    line-height: 1.5;
    color: #4b5563;
  }
  .pvra-rc__quote strong {
    color: var(--color-pvra-dark-blue);
    font-weight: 700;
  }
  .pvra-rc__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
  }
  .pvra-rc__name {
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--color-pvra-dark-blue);
  }
  .pvra-rc__verified { width: 1.7rem; height: 1.7rem; flex-shrink: 0; }
  .pvra-rc__label {
    font-size: 1.35rem;
    color: #6b7280;
  }
  .pvra-rc__stars {
    display: inline-flex;
    gap: 0.3rem;
    margin-left: auto;
  }
  .pvra-rc__star {
    width: 1.6rem;
    height: 1.6rem;
    background: #00b67a;
    border-radius: 0.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .pvra-rc__star svg { width: 1.15rem; height: 1.15rem; }

  /* Mobile: small image in a fixed left column, the text column stays to the
     right of the image (aligned to its right edge, never wrapping underneath).
     Stars sit on the top row; name + verified on the bottom row. Desktop layout
     (flex row, stars in the footer) is untouched. The star element is lifted to
     the top of the body by the script below. */
  @media screen and (max-width: 749px) {
    .pvra-rc {
      align-items: flex-start;
      gap: 1.1rem;
      padding: 1.5rem;
    }
    .pvra-rc__media {
      width: 7rem;
      height: 7rem;
    }
    .pvra-rc__stars {
      margin: 0 0 1rem;
      width: auto;
    }
    .pvra-rc__foot {
      margin-top: 0.6rem;
      row-gap: 0.4rem;
    }
  }
/* END_SNIPPET:pvra-review-card */

/* START_SNIPPET:pvra-shipping-note (INDEX:146) */
.pvra-shipping-note {
    text-align: center;
    font-family: var(--font-body-family);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    margin: 0.8rem 0 1.6rem;
    color: var(--color-pvra-dark-blue);
  }
  /* As a direct buy-box block, beat Dawn's `.product__info-container > *`
     1.5rem margins so the note hugs the Add to cart button like it did when
     it lived inside buy-buttons.liquid (margins collapse with neighbours). */
  .product__info-container > .pvra-shipping-note {
    margin: -1.5rem 0 2.5rem;
  }
  .pvra-shipping-note strong {
    font-weight: 700;
  }
/* END_SNIPPET:pvra-shipping-note */

/* START_SNIPPET:pvra-tiered-selector (INDEX:147) */
#pvra-tiered-pvra-tiered {
  max-width: 100%;
  margin: 1.2rem 0 1.6rem 0 !important;
  padding: 0 !important;
  width: 100%;
}

#pvra-tiered-pvra-tiered .pvra-tiered__helper {
  font-family: var(--font-body-family);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-pvra-dark-blue);
  margin: 0 0 1.2rem;
  line-height: 1.3;
}

#pvra-tiered-pvra-tiered .pvra-tiered__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

#pvra-tiered-pvra-tiered .pvra-tiered__tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: pointer;
  user-select: none;
}

#pvra-tiered-pvra-tiered .pvra-tiered__pill {
  align-self: center;
  margin-bottom: 0.7rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: #e6e7eb;
  color: var(--color-pvra-text);
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.3;
}
#pvra-tiered-pvra-tiered .pvra-tiered__pill--empty {
  visibility: hidden;
}

#pvra-tiered-pvra-tiered .pvra-tiered__box {
  flex: 1;
  border: 1.5px solid #d6dae0;
  border-radius: 1rem;
  padding: 1.6rem 0.8rem 1.4rem;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

#pvra-tiered-pvra-tiered .pvra-tiered__icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  color: var(--color-pvra-dark-blue);
  margin-bottom: 0.9rem;
}
#pvra-tiered-pvra-tiered .pvra-tiered__icon {
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
}

#pvra-tiered-pvra-tiered .pvra-tiered__qty {
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--color-pvra-dark-blue);
  margin-bottom: 0.4rem;
}

#pvra-tiered-pvra-tiered .pvra-tiered__each {
  font-size: 1.2rem;
  color: var(--color-pvra-text);
}

/* Selected tile — filled dark navy */
#pvra-tiered-pvra-tiered .pvra-tiered__tile.is-active .pvra-tiered__box {
  background: var(--color-pvra-dark-blue);
  border-color: var(--color-pvra-dark-blue);
}
#pvra-tiered-pvra-tiered .pvra-tiered__tile.is-active .pvra-tiered__icons,
#pvra-tiered-pvra-tiered .pvra-tiered__tile.is-active .pvra-tiered__qty {
  color: #ffffff;
}
#pvra-tiered-pvra-tiered .pvra-tiered__tile.is-active .pvra-tiered__each {
  color: rgba(255, 255, 255, 0.75);
}

#pvra-tiered-pvra-tiered .pvra-tiered__tile:not(.is-active):hover .pvra-tiered__box {
  border-color: var(--color-pvra-blue);
}

/* ---------- Color panel ---------- */
#pvra-tiered-pvra-tiered .pvra-tiered__colorpanel {
  margin-top: 1.6rem;
}
#pvra-tiered-pvra-tiered .pvra-tiered__color-label {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-pvra-text);
  margin: 0 0 0.6rem;
  line-height: 1;
}
#pvra-tiered-pvra-tiered .pvra-tiered__dropdowns {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
#pvra-tiered-pvra-tiered .pvra-tiered__dropdown-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
#pvra-tiered-pvra-tiered .pvra-tiered__dropdown-row[hidden] {
  display: none;
}
#pvra-tiered-pvra-tiered .pvra-tiered__thumb {
  display: block !important;
  flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  background: #ffffff;
  border: 1px solid #d6dae0;
  border-radius: 0.5rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#pvra-tiered-pvra-tiered .pvra-tiered__dropdown {
  position: relative;
  flex: 0 0 14rem;
  min-width: 0;
}
#pvra-tiered-pvra-tiered .pvra-tiered__color-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: #ffffff;
  border: 1px solid #d6dae0;
  border-radius: 0.5rem;
  padding: 0.7rem 2.6rem 0.7rem 1rem;
  font-family: var(--font-body-family);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--color-pvra-dark-blue);
  cursor: pointer;
  line-height: 1.2;
  height: 3.2rem;
}
#pvra-tiered-pvra-tiered .pvra-tiered__color-select:focus {
  outline: none;
  border-color: var(--color-pvra-dark-blue);
}
#pvra-tiered-pvra-tiered .pvra-tiered__dropdown::after {
  content: '';
  position: absolute;
  right: 1.4rem;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  border-right: 2px solid var(--color-pvra-dark-blue);
  border-bottom: 2px solid var(--color-pvra-dark-blue);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
#pvra-tiered-pvra-tiered .pvra-tiered__dropdown--oos .pvra-tiered__color-select {
  border-color: #e02424;
  box-shadow: 0 0 0 1px #e02424;
  color: #e02424;
}
#pvra-tiered-pvra-tiered .pvra-tiered__dropdown--oos::after {
  border-color: #e02424;
}

@media (max-width: 749px) {
  #pvra-tiered-pvra-tiered .pvra-tiered__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }
  #pvra-tiered-pvra-tiered .pvra-tiered__qty { font-size: 1.4rem; }
  #pvra-tiered-pvra-tiered .pvra-tiered__box { padding: 1.4rem 0.6rem 1.2rem; }
}
/* END_SNIPPET:pvra-tiered-selector */