/** Shopify CDN: Minification failed

Line 3293:2 Unexpected "{"
Line 3293:3 Expected identifier but found "%"
Line 3294:66 Unterminated string token
Line 3297:73 Unterminated string token
Line 3300:71 Unterminated string token

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:career-logo-slider (INDEX:7) */
.career-logo-slider__wrapper {
        background: #FFFDF9;
    }

    .career-logo-slider__splide {
        max-width: 1000px;
        width: 100%;
        min-height: 41px;
        visibility: visible !important;
    }

    .career-logo-slider__splide.is-initialized,
    .career-logo-slider__splide.is-rendered {
        visibility: visible !important;
    }

    .career-logo-slider__splide .splide__track {
        width: 100%;
    }

    .career-logo-slider__splide .splide__list {
        display: flex;
        align-items: center;
        width: auto;
        margin: 0;
        padding: 0;
    }

    .career-logo-slider__splide:not(.is-initialized) .splide__list {
        gap: 63px;
    }

    @media (max-width: 1023px) {
        .career-logo-slider__splide:not(.is-initialized) .splide__list {
            gap: 60px;
        }
    }

    @media (max-width: 767px) {
        .career-logo-slider__splide:not(.is-initialized) .splide__list {
            gap: 20px;
        }
    }


    .career-logo-slider__slide {
        justify-content:center;
        display:flex;
        width: 205px;
        flex-shrink: 0;
        min-width: 205px;
    }

    .career-logo-slider__slide img {
        height:40px;
        width: 200px;
        object-fit:contain; 
    }

    .career-logo-slider__row {
        display:flex;
        align-items:center;
        max-width: 1096px;
        margin-inline:auto;
        gap:8px;
    }
    
 

    @media (max-width: 767px) {
        .career-logo-slider__slide {
            width: auto;
            min-width: auto;
        }
    }
/* END_SECTION:career-logo-slider */

/* START_SECTION:career-tabs (INDEX:8) */
.career-tabs__wrapper {
            background: #FAF7F1;
        }
        .careers-custom-tabs {
            display: flex;
            justify-content: center;
            gap: 10px;
            width:100%;
            max-width:1200px;
            margin-inline:auto;
            flex-wrap:nowrap;
        }
        .careers-custom-tabs__parent{
            background: #FAF7F1;
        }
        .careers-custom-tab {
            padding: 28px 40px;
            cursor: pointer;
            background: #FFFDF9;
            color: #282828;
            /* font-family: "Lato", serif; */
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            width:100%;
            text-align:center;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .careers-custom-tab.active {
            background: #F2EBE0;
            font-weight: bold;
        }
        .careers-custom-tab-content {
            display: none;
            width:100%;
            padding-inline:16px;
        }

        .careers-custom-tab-content.active {
            display: block;
        }
        .careers-custom-join-btn {
            margin-top: 20px;
            padding: 10px 15px;
            border: 1px solid ;
            background: none;
            cursor: pointer;
        }
        .about-tab-desc{
            max-width: 800px;
            margin:auto;
            text-align: center;
            margin-top:80px;
            margin-bottom: 40px;
            font-size: 18px;
            line-height: 24px;
        }
        .about-tab-desc-2{
            font-size: 18px;
            line-height: 24px;
            text-align: center;
        }
        .about-tab-desc-3{
            font-size: 18px;
            line-height: 24px;
            text-align: center;
            font-style: italic;
            margin-bottom: 35px;
        }
        .about-tab-cta-cont{
            text-align: center;
            padding-bottom: 55px;
        }
        .about-tab-cta-cont a{
            padding: 10px 67px;
            border: 1px solid ;
            text-decoration: none;
            font-weight: 700;
        }
        .promise-tab-desc{
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            line-height: 22px;
            text-transform: capitalize;
            margin-bottom: 35px;
            font-family: "Lato", serif;
        }
        .promise-tab-feat-cont{
            display: flex;
            justify-content: center;
            gap:35px;
        }
        .promise-tab-feat-hdr{
            text-align: center;
            font-size: 24px;
            font-style: normal;
            font-weight: 500;
            line-height: 30px;
        }
        .promise-tab-feat-hdr span {
            /* font-family: "Playfair Display", serif; */
            font-style: italic;
            font-weight: 600;
        }
        .promise-tab-content-wrapper{
            max-width: 1200px;
            margin: auto;
            padding-top: 40px;
        }
        .promise-tab-feat{
            border: 1px solid;
            border-radius: 8px;
            padding: 20px;
        }
        .promise-tab-feat-content{
            margin-top: 40px;
            text-align: center;
            font-size: 14px;
            line-height: 20px;
            max-width: 230px;
        }
        .promise-tab-cta-cont{
            margin-top: 35px;
            text-align: center;
            padding-bottom:50px;
        }
        .promise-tab-cta-cont a{
            padding: 10px 67px;
            border: 1px solid ;
            text-decoration: none;
            font-weight: 700;
        }
        .promise-tab-logo-cont{
            display: flex;
            gap:60px;
            justify-content: center;
            padding-bottom: 50px;
        }
        .promise-tab-logo-cont img{
            max-width:90px;
        }
        .values-tab-content-wrapper{
            max-width: 1200px;
            margin: auto;
            display: flex;
            gap: 60px;
            padding-inline:36px;
            padding: 40px 36px 0px 36px;
        }
        .values-tab-content-col-1{
            font-family: "Playfair Display", serif;
            font-size: 35px;
            font-style: italic;
            /* font-weight: 600; */
            line-height: normal;
            text-transform: capitalize;
        }
        .values-tab-content-col-2{
            display: flex;
            gap: 80px;
            padding: 50px;
        }
        .values-tab-feat-cont{
            margin-bottom: 35px;
        }
        .values-tab-feat-hdr{
            font-family: "Playfair Display", serif;
            font-size: 20px;
            font-style: italic;
            font-weight: 600;
            line-height: normal;
        }
        .values-tab-feat-desc{
            font-size: 16px;
            font-style: normal;
            line-height: normal;
            /* font-family: "Lato", serif; */
            margin-top:10px;
        }
        .news-container {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-top:20px;
        }
        .news-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            width: 300px;
            display: flex;
            flex-direction: column;
            padding:10px;
        }
        .news-card img {
            width: 100%;
            height: auto;
            border-radius: 8px;
        }
        .news-content {
            padding: 16px;
        }
        .news-source {
            font-size: 12px;
            text-transform: uppercase;
            color: #888;
            margin-bottom: 8px;
        }
        .news-title {
            font-size: 18px;
            font-weight:400;
            text-decoration: underline;
            margin-bottom: 8px;
            display: inline-block;
            /* font-family: "Lato", serif; */
        }
        .news-description {
            font-size: 14px;
            color: #444;
        }
        .values-tab-why-work-with-us-wrapper{
          background: #F2EBE0;
          text-align:center;
          padding-top:40px;
          padding-inline:18px;
        }
        .values-tab-why-work-with-us-hdr{
          font-family: "Playfair Display", serif;
          font-size: 27px;
          font-style: italic;
          /* font-weight: 600; */
          line-height: 32px;
        }
        .values-tab-why-work-with-us-desc-1{
          font-size: 16px;
          font-weight: 300;
          line-height: 22px;
          /* font-family: "Lato", serif; */
          max-width:800px;
          margin-left:auto;
          margin-right:auto;
          margin-top:30px;
          margin-bottom:30px;
        }
         .values-tab-why-work-with-us-desc-2{
            font-size: 16px;
            font-weight: 300;
            line-height: 22px;
            /* font-family: "Lato", serif; */
         }

        @media screen and (max-width:998px){
            .careers-custom-tab {
                padding:16px;
            }

            .values-tab-content-wrapper {
                flex-direction:column;
                gap:18px;
                padding: 40px 0px 20px 0px;
            }

            .values-tab-content-col-2 {
                padding:0px;
            }
        }

        @media screen and (max-width:768px){
            .careers-custom-tab {
                padding:16px;
                white-space:nowrap;
            }

            .careers-custom-tabs {
                width:700px;
            }

            .careers-custom-tabs__parent {
                overflow:auto;
            }

            .news-container,
            .promise-tab-feat-cont {
                flex-wrap:wrap;
            }

            .values-tab-content-col-2 {
                gap:36px;
            }

            .about-tab-desc {
                margin-top:0px;
            }

            /* .promise-tab-content-wrapper {
                padding:0;
            } */

            .job-listing__filters-inputs {
                flex-wrap:wrap;
            }
            .values-tab-content-wrapper{
                padding: 40px 0px 20px 0px;
            }
            .about-tab-desc{
                margin-top:40px;
            }
            .news-container{
                margin-top:40px;
            }
        }

        @media screen and (max-width:580px){
            .values-tab-content-col-2 {
                flex-direction: column;
                gap:0px;
            }
        }
/* END_SECTION:career-tabs */

/* START_SECTION:pdp-swiper-nba (INDEX:106) */
.pdp-swiper-nba {
    --nba-cream: #f7f4ee; --nba-paper: #fff; --nba-ink: #2f2a24; --nba-muted: #6f6a62;
    --nba-espresso: #3a332c; --nba-accent: #a48776; --nba-brick: #7c2416; --nba-line: #e2ded7;
    --nba-gold: #c8a96e; --nba-next: #a8a29a;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    color: var(--nba-ink); background: var(--nba-paper);
  }
  .pdp-swiper-nba [x-cloak] { display: none !important; }
  .pdp-swiper-nba * { box-sizing: border-box; }

  /* ── layout: stacked (mobile-first), split row from 990px ── */
  .pdp-swiper-nba__split { display: flex; flex-direction: column; }
  /* Hidden by default (mobile) — it's the desktop-only left-hand hero photo;
     re-shown at the 990px breakpoint below where the two-column layout kicks
     in. Mobile has no room for it alongside the step content. */
  .pdp-swiper-nba__media { display: none; }
  .pdp-swiper-nba__media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .pdp-swiper-nba__media-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #3b2f23; padding: 18px; }
  /* Caption sits on a scrim so it stays legible over any hero image. */
  .pdp-swiper-nba__media:has(.pdp-swiper-nba__media-img) .pdp-swiper-nba__media-inner { color: #fff; width: 100%; background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,0) 70%); }
  .pdp-swiper-nba__media-cap { font-size: 11px; letter-spacing: .14em; font-weight: 700; }
  .pdp-swiper-nba__col { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
  .pdp-swiper-nba__scroll { flex: 1; min-height: 0; }
  .pdp-swiper-nba__content { padding: 20px 16px 8px; }
  /* Sticky footer CTA — same idea as pdp-swiper-quantity.liquid's
     fixed/sticky NEXT row: always visible without scrolling to it, on
     both mobile (sticks to the document's bottom) and desktop (sticks to
     the bottom of the bounded, internally-scrolling column below). */
  .pdp-swiper-nba__foot { flex: 0 0 auto; position: sticky; bottom: 0; z-index: 5; padding: 10px 16px 16px; background: var(--nba-cream); border-top: 1px solid var(--nba-line); }

  /* Mobile-only fixed CTA bar (see the comment above its markup for why
     `position: sticky` on `.pdp-swiper-nba__foot` doesn't work here) — off
     by default, only switched on below the desktop breakpoint. */
  .pdp-swiper-nba__mobile-cta { display: none; }
  @media (max-width: 989.98px) {
    .pdp-swiper-nba__foot { display: none; }
    .pdp-swiper-nba__mobile-cta {
      display: block;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 30;
      padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
      background: var(--nba-cream);
      border-top: 1px solid var(--nba-line);
    }
    /* Gutter so the last bit of each step's content — including the
       team grid's bottom row — never sits under the fixed bar. */
    .pdp-swiper-nba__content { padding-bottom: 96px; }
  }
  /* Product cards get their own scrollbar on mobile — same as
     pdp-swiper-quantity.liquid's pdp-swiper__variants-row, which scrolls
     independently of the "how it works" content below it. */
  .pdp-swiper-nba__cards { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; -ms-overflow-style: none; scrollbar-width: none; }
  .pdp-swiper-nba__cards::-webkit-scrollbar { display: none; }

  @media (min-width: 990px) {
    /* Bounded (not just minimum) height so .scroll's overflow-y:auto
       actually creates an internal scroll region instead of just growing
       the whole page — that's what keeps .foot visibly pinned. */
    .pdp-swiper-nba__split { flex-direction: row; align-items: stretch; height: calc(100svh - var(--pdp-nba-desktop-offset, 150px)); min-height: 560px; }
    .pdp-swiper-nba__media { display: flex; position: relative; flex: 1; min-height: 0; align-self: stretch; position: sticky; top: 0; background: linear-gradient(135deg,#cdbfa9,#ad9a82 60%,#7d6a54); align-items: flex-end; justify-content: center; overflow: hidden; }
    .pdp-swiper-nba__col { flex: 1; max-width: 640px; }
    .pdp-swiper-nba__scroll { overflow-y: auto; }
    .pdp-swiper-nba__content { padding: 22px 40px 10px; }
    .pdp-swiper-nba__foot { padding: 12px 40px 20px; }
    /* On desktop the whole column scrolls together as one unit (matching
       the originals' "aside scrolls, cards don't scroll separately"
       behavior) — only mobile gets the cards' own independent scrollbar. */
    .pdp-swiper-nba__cards { max-height: none; overflow: visible; }
  }

  /* ── breadcrumb ── */
  .pdp-swiper-nba__crumb { font-size: 12px; color: var(--nba-muted); margin-bottom: 12px; }
  .pdp-swiper-nba__crumb span { cursor: pointer; }
  .pdp-swiper-nba__crumb b.is-active { color: var(--nba-ink); font-weight: 700; }

  /* ── headings ── */
  .pdp-swiper-nba__h { font-size: 26px; font-weight: 500; line-height: 1.16; margin: 6px 0 10px; }
  .pdp-swiper-nba__lead { font-size: 13.5px; color: #4a443c; margin: 0 0 12px; line-height: 1.5; }
  .pdp-swiper-nba__step-label { font-size: 13.5px; color: var(--nba-ink); margin: 0 0 12px; }
  @media (min-width: 990px) { .pdp-swiper-nba__h { font-size: 32px; } }

  /* ── gift-with-purchase banner ── */
  .pdp-swiper-nba__gwp { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #41382d; background: #faf7f1; border: 1px dashed var(--nba-accent); border-radius: 8px; padding: 9px 11px; margin: 2px 0 14px; line-height: 1.4; }
  .pdp-swiper-nba__gwp b { color: var(--nba-accent); letter-spacing: .03em; }
  .pdp-swiper-nba__gwp-val { color: var(--nba-muted); }

  /* ── cards ── */
  .pdp-swiper-nba__cards { display: flex; flex-direction: column; gap: 0; margin-bottom: 6px; }
  .pdp-swiper-nba__card { border: 1px solid var(--nba-line); background: var(--nba-paper); border-radius: 10px; padding: 14px; margin-bottom: 14px; display: flex; gap: 14px; }
  .pdp-swiper-nba__card.is-selected { border-color: var(--nba-espresso); border-width: 2px; padding: 13px; }
  .pdp-swiper-nba__thumb { width: 88px; height: 88px; border-radius: 4px; background: #f4f4f2; flex: 0 0 88px; display: flex; align-items: center; justify-content: center; font-size: 28px; overflow: hidden; }
  .pdp-swiper-nba__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .pdp-swiper-nba__thumb--sm { width: 60px; height: 60px; flex: 0 0 60px; font-size: 20px; border-radius: 8px; }
  .pdp-swiper-nba__card-body { flex: 1; min-width: 0; }
  .pdp-swiper-nba__featbadge { display: inline-block; background: var(--nba-gold, #c9a44c); color: #2f2a24; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-bottom: 5px; letter-spacing: .03em; }
  .pdp-swiper-nba__card-name { font-weight: 700; font-size: 14.5px; margin: 0 0 4px; line-height: 1.25; }
  .pdp-swiper-nba__card-desc { font-size: 12px; color: var(--nba-muted); margin: 0 0 3px; line-height: 1.4; }
  .pdp-swiper-nba__card-feature { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; }
  .pdp-swiper-nba__card-feature img { width: 16px; height: 16px; flex: 0 0 16px; }
  .pdp-swiper-nba__card-feature p { font-size: 11.5px; color: var(--nba-ink); margin: 0; }
  .pdp-swiper-nba__learn { display: inline-block; font-size: 12px; text-decoration: underline; color: var(--nba-espresso); cursor: pointer; margin: 0 0 4px; }

  /* ── step 1: "how it works" feature-metadata content (below cards) ──
     Ported from pdp-swiper-quantity.liquid's pdp-swiper__feature-metadata-*
     rules — same three section "shapes" (how-it-works / why-aroma360 /
     subscription-perks), matched the same way, off the metafield-provided
     handle substring rather than a fixed class list. */
  .pdp-swiper-nba__fmrow { width: 100%; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--nba-line); display: flex; flex-direction: column; }
  .pdp-swiper-nba__fmsection { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
  .pdp-swiper-nba__fmtitle { margin: 0; font-size: 19px; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; color: var(--nba-ink); }
  .pdp-swiper-nba__fmitem { display: grid; grid-template-columns: 1fr; gap: 8px 12px; width: 100%; }
  .pdp-swiper-nba__fmfeature { display: flex; gap: 12px; align-items: flex-start; }
  .pdp-swiper-nba__fmfigure { object-fit: contain; background: transparent; border-radius: 0; }
  .pdp-swiper-nba__fmheadline { display: block; margin: 0 0 8px; font-weight: 600; font-size: 13px; color: var(--nba-ink); }
  .pdp-swiper-nba__fmdesc { display: block; margin: 0; font-size: 12px; color: var(--nba-muted); line-height: 1.45; }

  /* how-it-works / subscription-perks: icon + text side by side */
  .pdp-swiper-nba__fmsection[class*="how-it-works"] .pdp-swiper-nba__fmfeature,
  .pdp-swiper-nba__fmsection[class*="subscription-perks"] .pdp-swiper-nba__fmfeature { display: flex; flex-direction: row; align-items: center; gap: 16px; }
  .pdp-swiper-nba__fmsection[class*="how-it-works"] .pdp-swiper-nba__fmfigure { flex-shrink: 0; width: 50px; height: 50px; }
  .pdp-swiper-nba__fmsection[class*="how-it-works"] .pdp-swiper-nba__fmheadline { margin: 0; }
  .pdp-swiper-nba__fmsection[class*="subscription-perks"] .pdp-swiper-nba__fmitem { background: #fafafa; padding: 16px; }
  .pdp-swiper-nba__fmsection[class*="subscription-perks"] .pdp-swiper-nba__fmfigure { flex-shrink: 0; width: 24px; height: 24px; }

  /* why-aroma360: horizontal scrolling carousel of bordered cards */
  .pdp-swiper-nba__fmsection[class*="why-aroma360"] { overflow-x: auto; }
  .pdp-swiper-nba__fmsection[class*="why-aroma360"] .pdp-swiper-nba__fmitem { display: flex; flex-wrap: nowrap; gap: 8px; width: 60%; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pdp-swiper-nba__fmsection[class*="why-aroma360"] .pdp-swiper-nba__fmitem::-webkit-scrollbar { display: none; }
  .pdp-swiper-nba__fmsection[class*="why-aroma360"] .pdp-swiper-nba__fmfeature { display: flex; flex-direction: column; flex: 0 0 60%; width: 60%; gap: 6px; border: 1px solid var(--nba-ink); scroll-snap-align: start; }
  .pdp-swiper-nba__fmsection[class*="why-aroma360"] .pdp-swiper-nba__fmtext { padding: 5px; }
  .pdp-swiper-nba__fmsection[class*="why-aroma360"] .pdp-swiper-nba__fmfigure { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
  .pdp-swiper-nba__fmsection[class*="why-aroma360"] .pdp-swiper-nba__fmheadline { text-transform: uppercase; font-size: 14px; }
  .pdp-swiper-nba__priced { margin-top: 8px; }
  .pdp-swiper-nba__free { color: #2f2a24; font-weight: 800; font-size: 13.5px; }
  .pdp-swiper-nba__qtyrow { display: flex; margin-top: 10px; }
  .pdp-swiper-nba__qty { display: inline-flex; align-items: center; border: 1px solid #cfcac2; border-radius: 22px; background: #fff; min-width: 100px; justify-content: space-between; }
  .pdp-swiper-nba__qty button { border: 0; background: none; padding: 6px 14px; color: var(--nba-muted); cursor: pointer; font-size: 15px; }
  .pdp-swiper-nba__qty button:disabled { color: var(--nba-line); cursor: not-allowed; }
  .pdp-swiper-nba__qty span { padding: 6px 6px; font-weight: 700; font-size: 14px; }

  /* ── fineprint ── */
  .pdp-swiper-nba__fineprint { font-size: 12.5px; line-height: 1.55; color: #3f3a33; padding: 4px 0 2px; margin: 4px 0 12px; }
  .pdp-swiper-nba__fineprint:empty { display: none; }
  .pdp-swiper-nba__fineprint--boxed { background: #faf7f1; border: 1px solid var(--nba-line); border-radius: 8px; padding: 10px 11px; font-size: 11.5px; }
  .pdp-swiper-nba__fineprint b { color: #2f2a24; }

  /* ── footer / cta ── */
  .pdp-swiper-nba__foot-helper { text-align: center; font-size: 11.5px; color: var(--nba-muted); margin: 0 0 8px; }
  .pdp-swiper-nba__btnpair { display: flex; gap: 10px; }
  .pdp-swiper-nba__btnpair .pdp-swiper-nba__cta { flex: 1; }
  .pdp-swiper-nba__cta { display: block; width: 100%; background: var(--nba-espresso); color: #fff; border: 0; border-radius: 30px; padding: 14px; font-size: 13.5px; font-weight: 600; letter-spacing: .05em; text-align: center; cursor: pointer; }
  .pdp-swiper-nba__cta:disabled { background: var(--nba-next); cursor: not-allowed; }
  .pdp-swiper-nba__cta--ghost { background: #fff; color: var(--nba-espresso); border: 1px solid var(--nba-espresso); }

  /* ── step 2: team grid ── */
  .pdp-swiper-nba__teamgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 8px; }
  @media (min-width: 990px) { .pdp-swiper-nba__teamgrid { grid-template-columns: repeat(4, 1fr); } }
  .pdp-swiper-nba__teambtn { font-size: 10.5px; line-height: 1.3; padding: 9px 4px 8px; border: 1px solid var(--nba-line); border-radius: 8px; background: var(--nba-paper); color: #41382d; text-align: center; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 5px; }
  .pdp-swiper-nba__teamlogo { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9.5px; font-weight: 800; }
  .pdp-swiper-nba__teambtn.is-selected { background: var(--nba-espresso); border-color: var(--nba-espresso); color: #fff; font-weight: 700; }
  .pdp-swiper-nba__teambtn.is-selected .pdp-swiper-nba__teamlogo { box-shadow: 0 0 0 2px #fff; }
  /* Bottom margin matches the gap between review cards below (10px), plus
     the banner's own padding, so the spacing reads consistently whichever
     step this shows on. */
  .pdp-swiper-nba__pickbanner { display: none; align-items: flex-start; gap: 8px; border-radius: 8px; padding: 9px 11px; font-size: 11px; line-height: 1.45; margin: 12px 0 16px; }
  .pdp-swiper-nba__pickbanner.is-show { display: flex; }
  .pdp-swiper-nba__pickbanner.is-ok { background: #eef3ee; border: 1px solid #2f7d4f; color: #2f6b42; }
  .pdp-swiper-nba__pickbanner.is-substituted { background: #fdf6e0; border: 1px solid #b8860b; color: #7a5c00; }
  .pdp-swiper-nba__pickbanner.is-blocked { background: #fbe9e7; border: 1px solid var(--nba-brick); color: var(--nba-brick); }

  /* ── step 3: review ── */
  .pdp-swiper-nba__revh { font-size: 20px; font-weight: 800; margin: 6px 0 14px; }
  @media (min-width: 990px) { .pdp-swiper-nba__revh { font-size: 26px; } }
  .pdp-swiper-nba__lineitem { display: flex; gap: 12px; border: 1px solid var(--nba-line); background: var(--nba-paper); border-radius: 12px; padding: 12px; margin: 0 0 10px; align-items: center; }
  /* Only this small tag carries the substitution color — the card itself
     stays plain, per request not to over-emphasize the swap. */
  .pdp-swiper-nba__subtag { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #7a5c00; background: #f5e6b8; border-radius: 4px; padding: 2px 6px; margin: 0 0 4px; }
  .pdp-swiper-nba__cbody { flex: 1; min-width: 0; }
  .pdp-swiper-nba__cname { font-weight: 700; font-size: 14px; margin: 0 0 3px; }
  .pdp-swiper-nba__cdesc { font-size: 12px; color: var(--nba-muted); margin: 0 0 3px; }
  .pdp-swiper-nba__cprice { font-size: 13px; margin: 0; }
  .pdp-swiper-nba__cond { font-size: 11px; color: var(--nba-muted); font-weight: 600; }
  .pdp-swiper-nba__due { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--nba-line); padding-top: 12px; margin: 6px 0 0; font-weight: 800; font-size: 15px; }
  .pdp-swiper-nba__agree { display: flex; gap: 8px; align-items: flex-start; font-size: 11px; margin: 14px 0 4px; color: #41382d; }
  .pdp-swiper-nba__tos-link { text-decoration: underline; cursor: pointer; }

  /* ── terms modal ── */
  .pdp-swiper-nba__tmodal { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 99; align-items: center; justify-content: center; padding: 20px; display: flex; }
  .pdp-swiper-nba__tcard { background: #fff; max-width: 420px; width: 100%; max-height: 82vh; overflow-y: auto; border-radius: 6px; padding: 20px 20px 16px; position: relative; color: var(--nba-ink); }
  .pdp-swiper-nba__tx { position: absolute; top: 12px; right: 16px; cursor: pointer; font-size: 18px; color: var(--nba-muted); }
  .pdp-swiper-nba__tclose { background: var(--nba-espresso); color: #fff; border: 0; border-radius: 30px; padding: 11px; width: 100%; font-weight: 600; cursor: pointer; margin-top: 10px; }
  .pdp-swiper-nba__tcard > h3 { font-weight: 700; font-size: 16px; margin: 0 0 10px; }
  /* Typography for the terms copy itself (subscription_terms_content richtext:
     h3 subheadings, p, ul/ol, li) — matches the design's .tp/.tsec sizing,
     which the raw browser defaults on these tags didn't (oversized headings,
     big paragraph margins, default bullet indent). */
  .pdp-swiper-nba__tcopy h3 { font-family: inherit; font-weight: 700; font-size: 12.5px; margin: 14px 0 4px; }
  .pdp-swiper-nba__tcopy h3:first-child { margin-top: 0; }
  .pdp-swiper-nba__tcopy p { font-size: 12.5px; line-height: 1.5; margin: 0 0 12px; }
  .pdp-swiper-nba__tcopy ul, .pdp-swiper-nba__tcopy ol { margin: 0 0 12px; padding-left: 18px; }
  .pdp-swiper-nba__tcopy li { font-size: 12px; line-height: 1.55; margin-bottom: 3px; }

  /* ── learn-more popup (step 1 diffuser cards only) ── */
  .pdp-swiper-nba__learncard { max-width: 480px; padding: 0; overflow-y: auto; }
  .pdp-swiper-nba__learncard .pdp-swiper-nba__tx { z-index: 2; background: #fff; border-radius: 50%; width: 24px; height: 24px; text-align: center; line-height: 24px; top: 10px; right: 10px; }
  .pdp-swiper-nba__learnhero { height: 200px; background: var(--nba-cream); display: flex; align-items: center; justify-content: center; font-size: 56px; color: var(--nba-espresso); }
  /* contain (not cover/stretch) + a real cap on the image's own size —
     these are tall product shots, letting them fill/crop the hero box
     was blowing them up far past their natural size. */
  .pdp-swiper-nba__learnhero img { max-width: 60%; max-height: 160px; width: auto; height: auto; object-fit: contain; }
  .pdp-swiper-nba__learnbody { padding: 16px 18px 6px; }
  .pdp-swiper-nba__learntitle { font-size: 19px; font-weight: 700; margin: 0 0 6px; color: var(--nba-ink); }
  .pdp-swiper-nba__learnrating { margin: 0 0 6px; }
  .pdp-swiper-nba__learndesc { font-size: 12.5px; color: var(--nba-muted); margin: 0 0 12px; line-height: 1.5; }
  .pdp-swiper-nba__learnprice { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--nba-line); }
  .pdp-swiper-nba__learnstrike { color: var(--nba-muted); text-decoration: line-through; font-size: 14px; }
  .pdp-swiper-nba__learnzero { font-size: 15px; font-weight: 800; color: var(--nba-brick); }
  .pdp-swiper-nba__learnchip { background: var(--nba-espresso); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; letter-spacing: .04em; }
  .pdp-swiper-nba__learnfeatures { margin-bottom: 4px; }
  .pdp-swiper-nba__learnfeature { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--nba-ink); margin-bottom: 9px; }
  .pdp-swiper-nba__learnfeature img { width: 15px; height: 15px; flex: 0 0 15px; }
  .pdp-swiper-nba__learnaccordion { border-top: 1px solid var(--nba-line); }
  .pdp-swiper-nba__learnaccordion-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: 0; padding: 13px 0; font-size: 13px; font-weight: 600; color: var(--nba-ink); cursor: pointer; font-family: inherit; }
  .pdp-swiper-nba__learnaccordion-btn svg { transition: transform .15s ease; }
  .pdp-swiper-nba__learnaccordion-btn svg.is-open { transform: rotate(180deg); }
  .pdp-swiper-nba__learnaccordion-body { padding-bottom: 12px; }
  .pdp-swiper-nba__learnaccordion-content { font-size: 12.5px; line-height: 1.6; color: #3f3a33; }
  .pdp-swiper-nba__learnaccordion-content p { margin: 0 0 8px; }
  .pdp-swiper-nba__learncard .pdp-swiper-nba__tclose { margin: 4px 18px 18px; width: calc(100% - 36px); }
/* END_SECTION:pdp-swiper-nba */

/* START_SECTION:pdp-swiper-quantity (INDEX:107) */
/* ═══════════════════════════════════════════════════════════════
     pdp-swiper-quantity — mobile-first stylesheet
     Base = mobile. Desktop overrides at min-width: 768px.
  ═══════════════════════════════════════════════════════════════ */

  /* ── Section shell ── */

  .pdp-swiper-qty {
    height: auto;
    width: 100%;
    padding-right: 1.125rem;
    padding-left: 1.125rem;
    max-width: calc(var(--page-width) + 40px);
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* ── Swiper root + slides ── */

  .pdp-swiper-qty .pdp-swiper__root {
    width: 100%;
  }

  .pdp-swiper-qty .swiper-wrapper {
    min-height: inherit;
  }

  .pdp-swiper-qty .pdp-swiper__slide {
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }

  .pdp-swiper-qty .pdp-swiper__slide--split {
    padding: 0;
  }

  /* ── Split layout (media col + aside) ── */

  .pdp-swiper-qty .pdp-swiper__split {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* Media column: hidden on mobile */
  .pdp-swiper-qty .pdp-swiper__media-col {
    display: none;
  }

  .pdp-swiper-qty .pdp-swiper__media-swiper--fit {
    width: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 100svh; /* mobile: media col is hidden, this value doesn't matter */
  }

  .pdp-swiper-qty .pdp-swiper__media-swiper--fit .swiper-wrapper {
    min-height: inherit;
  }

  .pdp-swiper-qty .pdp-swiper__media-swiper--fit .pdp-swiper__media-slide {
    height: auto;
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
  }

  .pdp-swiper-qty .pdp-swiper__media-slide-inner {
    flex: 1;
    width: 100%;
    min-height: 12rem;
    display: flex;
    align-items: stretch;
    justify-content: center;
  }

  .pdp-swiper-qty .pdp-swiper__media-slide-inner img {
    width: 100%;
    height: 100%;
    min-height: 12rem;
    object-fit: contain;
    display: block;
    max-height: 70vh;
  }

  .pdp-swiper-qty .pdp-swiper__media-placeholder {
    flex: 1;
    min-height: 12rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.06);
  }

  /* ── Aside ── */

  .pdp-swiper-qty .pdp-swiper__aside {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* ── Breadcrumb ── */

  .pdp-swiper-qty .pdp-swiper__steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.3;
    flex-shrink: 0;
  }

  .pdp-swiper-qty .pdp-swiper__step {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    opacity: 0.55;
    text-decoration: none;
    transition: opacity 0.15s ease, font-weight 0.15s ease;
  }

  .pdp-swiper-qty .pdp-swiper__step:hover { opacity: 0.85; }
  .pdp-swiper-qty .pdp-swiper__step.is-active { opacity: 1; font-weight: 700; }

  .pdp-swiper-qty .pdp-swiper__step-sep {
    opacity: 0.45;
    user-select: none;
  }

  /* ── Headline / description / subheadline ── */

  .pdp-swiper-qty .pdp-swiper__headline-row,
  .pdp-swiper-qty .pdp-swiper__description-row,
  .pdp-swiper-qty .pdp-swiper__subheadline-row {
    width: 100%;
    flex-shrink: 0;
  }

  .pdp-swiper-qty .pdp-swiper__step-description {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(var(--colors-text));
    opacity: 0.88;
  }

  .pdp-swiper-qty .pdp-swiper__subheadline {
    margin: 0;
    padding: 1rem 0;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(var(--colors-text));
  }

  /* ── Variants row — scrolls on mobile ── */

  .pdp-swiper-qty .pdp-swiper__variants-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .pdp-swiper-qty .pdp-swiper__variants-row::-webkit-scrollbar { display: none; }

  .pdp-swiper-qty .pdp-swiper__variants-row--empty {
    min-height: 0;
    flex: 0 0 auto;
  }

  /* ── Next row — hidden on mobile (fixed CTA used instead) ── */

  .pdp-swiper-qty .pdp-swiper__next-row {
    width: 100%;
    margin-top: 0.25rem;
    display: none;
  }

  /* ── Mobile fixed CTA ── */

  .pdp-swiper-qty .pdp-swiper__mobile-fixed-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem max(env(safe-area-inset-bottom), 0.75rem);
    background: rgba(var(--colors-background), 0.96);
    backdrop-filter: blur(4px);
    z-index: 100001;
    transform: translateZ(0);
  }

  /* ── Variant cards ── */

  .pdp-swiper-qty .pdp-swiper__variant-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    box-sizing: border-box;
    border-radius: 8px;
    background: rgba(var(--colors-background), 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: default;
    scroll-snap-align: start;
  }

  .pdp-swiper-qty .pdp-swiper__variant-card.pdp-swiper__variant-card--active,
  .pdp-swiper-qty .pdp-swiper__variant-card.pdp-swiper-qty__variant-card--has-qty {
    border-color: rgba(0, 0, 0, 1);
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__media {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    min-width: 100px;
    align-self: stretch;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__details {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
  }

  /* Stacked right column — Step 1 cards */
  .pdp-swiper-qty .pdp-swiper-qty__variant-card__details--stacked {
    flex-direction: column;
    gap: 0.375rem;
    justify-content: flex-start;
  }

  .pdp-swiper-qty .pdp-swiper-qty__card-bottom-row {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.25rem;
  }

  @media screen and (min-width: 768px) {
    .pdp-swiper-qty .pdp-swiper-qty__card-bottom-row {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .pdp-swiper-qty .pdp-swiper-qty__addon-pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .pdp-swiper-qty .pdp-swiper-qty__purchase-toggle {
    display: flex;
    flex-direction: row;
    gap: 0.375rem;
    width: 100%;
    margin-top: 0.375rem;
  }

  .pdp-swiper-qty .pdp-swiper-qty__purchase-toggle-btn {
    flex: 1 1 50%;
    position: relative;
    margin: 0;
    padding: 0.375rem 0.375rem;
    border: 1px solid rgba(69, 57, 43, 0.12);
    border-radius: 4px;
    background: #f2ece6;
    color: #45392b;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .pdp-swiper-qty .pdp-swiper-qty__purchase-toggle-btn.is-active {
    border-color: #45392b;
    background: #e5d9cc;
  }

  .pdp-swiper-qty .pdp-swiper-qty__purchase-best-offer {
    position: absolute;
    top: -0.35rem;
    right: -0.25rem;
    z-index: 1;
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
    background: var(--brand-red-secondary, #c45c4a);
    color: #fff;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
  }

  .pdp-swiper-qty .pdp-swiper-qty__frequency-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  .pdp-swiper-qty .pdp-swiper-qty__frequency-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 1rem 1rem;
    border: 1px solid rgba(69, 57, 43, 0.18);
    border-radius: 10px;
    background: #fff;
    color: #45392b;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .pdp-swiper-qty .pdp-swiper-qty__frequency-option.is-selected {
    background: #f7f1ea;
    border-color: #45392b;
  }

  .pdp-swiper-qty .pdp-swiper-qty__frequency-radio {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border: 1.5px solid rgba(69, 57, 43, 0.45);
    border-radius: 9999px;
    box-sizing: border-box;
    position: relative;
  }

  .pdp-swiper-qty .pdp-swiper-qty__frequency-option.is-selected .pdp-swiper-qty__frequency-radio {
    border-color: #45392b;
  }

  .pdp-swiper-qty .pdp-swiper-qty__frequency-option.is-selected .pdp-swiper-qty__frequency-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background: #45392b;
    transform: translate(-50%, -50%);
  }

  .pdp-swiper-qty .pdp-swiper-qty__frequency-main {
    flex: 1 1 auto;
    min-width: 0;
  }

  .pdp-swiper-qty .pdp-swiper-qty__frequency-label-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
  }

  .pdp-swiper-qty .pdp-swiper-qty__frequency-label {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: #45392b;
  }

  .pdp-swiper-qty .pdp-swiper-qty__frequency-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
  }

  .pdp-swiper-qty .pdp-swiper-qty__frequency-badge--popular {
    background: #e8d9c8;
    color: #45392b;
  }

  .pdp-swiper-qty .pdp-swiper-qty__frequency-badge--save {
    background: #6b2e16;
    color: #fff;
  }

  .pdp-swiper-qty .pdp-swiper-qty__frequency-pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    flex-shrink: 0;
    margin-left: auto;
  }

  .pdp-swiper-qty .pdp-swiper-qty__frequency-price-row {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
  }

  .pdp-swiper-qty .pdp-swiper-qty__frequency-compare {
    font-size: 0.875rem;
    color: rgba(69, 57, 43, 0.55);
  }

  .pdp-swiper-qty .pdp-swiper-qty__frequency-price {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    color: #6b2e16;
  }

  .pdp-swiper-qty .pdp-swiper-qty__frequency-price--ot {
    color: #45392b;
  }

  .pdp-swiper-qty .pdp-swiper-qty__frequency-per {
    font-size: 0.75rem;
    line-height: 1.2;
    color: #6b2e16;
  }

  .pdp-swiper-qty .pdp-swiper-qty__frequency-per--ot {
    color: rgba(69, 57, 43, 0.75);
  }

  .pdp-swiper-qty .pdp-swiper-qty__addon-price-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.375rem;
    white-space: nowrap;
  }

  .pdp-swiper-qty .pdp-swiper-qty__addon-price {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: rgba(var(--colors-heading));
  }

  .pdp-swiper-qty .pdp-swiper-qty__addon-compare {
    font-size: 0.8125rem;
    line-height: 1.2;
    color: rgba(var(--colors-text), 0.5);
    text-decoration: line-through;
  }

  .pdp-swiper-qty .pdp-swiper-qty__addon-save {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: #6b2e16;
    border-radius: 4px;
    padding: 0.2em 0.45em;
    letter-spacing: 0.03em;
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__option-primary {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(var(--colors-heading));
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.25rem;
  }

  /*
    "Inspired by" copy is gated behind an A/B test class on an ancestor — hidden by default.
    Uses a dedicated modifier class (not the shared .pdp-swiper__variant-card__feature class,
    which is also used for unrelated diffuser spec blurbs) so gating doesn't hide other content.
    Matches the ab-test class whether it's on .pdp-swiper-qty itself or a true ancestor of it.
  */
  .pdp-swiper-qty .pdp-swiper__variant-card__feature--inspired,
  .pdp-swiper-qty .pdp-swiper__popup-inspired {
    display: none !important;
  }

  .convert-experiences__inspired-by__ab-test .pdp-swiper__variant-card__feature--inspired {
    display: flex !important;
  }

  .convert-experiences__inspired-by__ab-test .pdp-swiper__popup-inspired {
    display: block !important;
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__feature-icon {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
    flex-shrink: 0;
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__feature-text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.2;
    color: rgba(var(--colors-text), 0.8);
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__scent-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    min-width: 0;
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__scent-profile,
  .pdp-swiper-qty .pdp-swiper__variant-card__scent-moods {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    min-width: 0;
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__scent-profile-item,
  .pdp-swiper-qty .pdp-swiper__variant-card__scent-mood-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__scent-dot {
    width: 0.8125rem;
    height: 0.8125rem;
    border-radius: 9999px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__scent-profile-name,
  .pdp-swiper-qty .pdp-swiper__variant-card__scent-mood-name {
    font-size: 0.8125rem;
    line-height: 1.25;
    color: rgba(var(--colors-text), 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 9rem;
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__scent-notes {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: rgba(var(--colors-text), 0.65);
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__scent-mood-icon {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
    flex-shrink: 0;
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    text-align: left;
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__right-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__prices {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__prices.text-right {
    text-align: left;
  }

  .pdp-swiper-qty .pdp-swiper__variant-card__right .inline-flex {
    justify-content: flex-start;
  }

  /* ── Pricing labels ── */

  .pdp-swiper-qty .pdp-swiper__variant-compare-at s {
    color: rgba(var(--colors-price-sale), 0.58);
  }

  .pdp-swiper-qty .pdp-swiper__variant-current-price {
    color: rgba(var(--colors-price));
    font-weight: 600;
    line-height: 1.2;
  }

  .pdp-swiper-qty .pdp-swiper__variant-single-price span {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(var(--colors-price));
  }

  .pdp-swiper-qty .pdp-swiper__save-label {
    margin-top: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(var(--colors-price));
    color: #fff;
    border-radius: 5px;
    padding: 0.2rem 0.35rem;
  }

  /* ── Due / review rows ── */

  .pdp-swiper-qty .pdp-swiper__review-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
  }

  .pdp-swiper-qty .pdp-swiper__due-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    width: 100%;
    box-sizing: border-box;
  }

  .pdp-swiper-qty .pdp-swiper__due-label {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(var(--colors-heading));
  }

  .pdp-swiper-qty .pdp-swiper__due-value {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(var(--colors-heading));
    text-align: right;
    margin-left: auto;
  }

  .pdp-swiper-qty .pdp-swiper__due-prices {
    text-align: right;
    margin-left: auto;
  }

  .pdp-swiper-qty .pdp-swiper__due-shipping-note {
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
    color: rgba(var(--colors-text), 0.7);
  }

  /* ── Review: bundle grouping ── */

  .pdp-swiper-qty .pdp-swiper__variants-row--review {
    gap: 1.25rem;
    flex: 0 0 auto;
    overflow: visible;
  }

  .pdp-swiper-qty .pdp-swiper-qty__review-bundle {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .pdp-swiper-qty .pdp-swiper-qty__review-bundle:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* ── Review: ship label ── */

  .pdp-swiper-qty .pdp-swiper__review-addon-ship-label {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #000;
    background-color: #d4c1aa;
    border-radius: 4px;
    padding: 0.2em 0.45em;
    margin-top: 0.35rem;
  }

  /* ── Purchase details ── */

  .pdp-swiper-qty .pdp-swiper__purchase-details {
    font-size: 0.875rem;
    line-height: 1.5;
    opacity: 0.75;
    width: 100%;
  }

  /* ── Terms row ── */

  .pdp-swiper-qty .pdp-swiper__terms-row {
    margin-bottom: 0.75rem;
  }

  .pdp-swiper-qty .pdp-swiper-qty__mobile-terms-row {
    margin-bottom: 0.5rem;
  }

  .pdp-swiper-qty .pdp-swiper__terms-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .pdp-swiper-qty .pdp-swiper__terms-checkbox {
    flex-shrink: 0;
    margin-top: 0.2em;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
  }

  .pdp-swiper-qty .pdp-swiper__terms-link {
    display: inline;
    font: inherit;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: #000;
  }

  /* ── Terms modal ── */

  .pdp-swiper__terms-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
    box-sizing: border-box;
  }

  .pdp-swiper__terms-modal-card {
    background: rgba(var(--colors-background), 1);
    border-radius: 0.5rem;
    max-width: 36rem;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 2rem;
    box-sizing: border-box;
    position: relative;
  }

  .pdp-swiper__terms-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: inherit;
    padding: 0.25rem;
  }

  .pdp-swiper__terms-title {
    margin: 0 0 1rem;
    font-size: 1.125rem;
    font-weight: 700;
  }

  .pdp-swiper__terms-body {
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  /* ── Review slide: aside scrolls (no overflow constraint) ── */

  .pdp-swiper-qty .pdp-swiper__slide--review .pdp-swiper__aside {
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* ── Quantity controls ── */

  .pdp-swiper-qty .pdp-swiper-qty__qty-controls {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid rgba(0, 0, 0, 0.3);
    border-radius: 9999px;
    margin-top: 0.5rem;
    transition: border-color 0.15s ease;
  }

  .pdp-swiper-qty .pdp-swiper-qty__qty-controls:has(.pdp-swiper-qty__qty-btn:hover:not(:disabled)) {
    border-color: rgba(0, 0, 0, 0.75);
  }

  .pdp-swiper-qty .pdp-swiper-qty__qty-btn {
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    color: rgba(var(--colors-heading));
    padding: 0;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
  }

  .pdp-swiper-qty .pdp-swiper-qty__qty-btn--dec {
    border-radius: 9999px 0 0 9999px;
  }

  .pdp-swiper-qty .pdp-swiper-qty__qty-btn--inc {
    border-radius: 0 9999px 9999px 0;
  }

  .pdp-swiper-qty .pdp-swiper-qty__qty-btn:disabled {
    opacity: 0.28;
    cursor: not-allowed;
  }

  .pdp-swiper-qty .pdp-swiper-qty__qty-display {
    min-width: 1.75rem;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: rgba(var(--colors-heading));
    line-height: 1;
    padding: 0 0.25rem;
  }

  /* ── Slot swatch rows ── */

  .pdp-swiper-qty .pdp-swiper-qty__slot-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
  }

  .pdp-swiper-qty .pdp-swiper-qty__bundle-unit-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    margin-top: 0.25rem;
  }

  .pdp-swiper-qty .pdp-swiper-qty__bundle-slot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.75rem;
  }

  .pdp-swiper-qty .pdp-swiper-qty__bundle-type-col {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .pdp-swiper-qty .pdp-swiper-qty__bundle-type-label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(var(--colors-text), 0.55);
    line-height: 1.2;
  }

  .pdp-swiper-qty .pdp-swiper-qty__slot-label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(var(--colors-text), 0.55);
    line-height: 1.2;
  }

  .pdp-swiper-qty .pdp-swiper-qty__slot-swatches-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  .pdp-swiper-qty .pdp-swiper-qty__slot-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
  }

  .pdp-swiper-qty .pdp-swiper-qty__slot-color-name {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(var(--colors-text), 0.55);
    line-height: 1.2;
  }

  .pdp-swiper-qty .pdp-swiper-qty__slot-swatch {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.18);
    padding: 0;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .pdp-swiper-qty .pdp-swiper-qty__slot-swatch:hover {
    border-color: rgba(0, 0, 0, 0.5);
  }

  .pdp-swiper-qty .pdp-swiper-qty__slot-swatch.pdp-swiper-qty__slot-swatch--selected {
    border-color: rgba(var(--colors-background), 1);
    box-shadow: 0 0 0 2px rgba(var(--colors-heading));
  }

  /* ── Feature metadata (How it works / Subscription perks / Why Aroma360) ── */

  .pdp-swiper-qty .pdp-swiper__feature-metadata-row {
    width: 100%;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  .pdp-swiper-qty .pdp-swiper__feature-metadata-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0;
  }

  .pdp-swiper-qty :is([class*="why-aroma360"]) {
    overflow-x: scroll;
  }

  .pdp-swiper-qty .pdp-swiper__feature-metadata-section-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--colors-heading));
  }

  .pdp-swiper-qty .pdp-swiper__feature-metadata-item {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0.5rem 0.75rem;
    width: 100%;
  }

  .pdp-swiper-qty :is([class*="why-aroma360"]) .pdp-swiper__feature-metadata-item {
    display: flex;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.5rem;
    width: 60%;
    box-sizing: border-box;
  }

  .pdp-swiper-qty :is([class*="why-aroma360"]) .pdp-swiper__feature-metadata-item::-webkit-scrollbar {
    display: none;
  }

  .pdp-swiper-qty :is([class*="subscription-perks"]) .pdp-swiper__feature-metadata-item {
    background: #fafafa;
    padding: 1rem;
  }

  .pdp-swiper-qty :is([class*="how-it-works"], [class*="subscription-perks"]) .pdp-swiper__feature-metadata-feature {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .pdp-swiper-qty :is([class*="why-aroma360"]) .pdp-swiper__feature-metadata-feature {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc(60% - 0rem);
    width: calc(60% - 0rem);
    flex-shrink: 0;
    scroll-snap-align: start;
    gap: 0.375rem;
    border: 1px solid #000;
    box-sizing: border-box;
  }

  .pdp-swiper-qty :is([class*="why-aroma360"]) .pdp-swiper__feature-metadata-feature .pdp-swiper__feature-metadata-text {
    padding: 0.3rem;
  }

  .pdp-swiper-qty :is([class*="how-it-works"]) .pdp-swiper__feature-metadata-figure {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
  }

  .pdp-swiper-qty :is([class*="why-aroma360"]) .pdp-swiper__feature-metadata-figure {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .pdp-swiper-qty :is([class*="subscription-perks"]) .pdp-swiper__feature-metadata-figure {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
  }

  .pdp-swiper-qty .pdp-swiper__feature-metadata-headline {
    display: block;
    margin: 0 0 8px;
    font-weight: 600;
  }

  .pdp-swiper-qty [class*="how-it-works"] .pdp-swiper__feature-metadata-headline {
    display: block;
    margin: 0;
  }

  .pdp-swiper-qty :is([class*="why-aroma360"]) .pdp-swiper__feature-metadata-headline {
    text-transform: uppercase;
    font-size: 0.9rem;
  }

  .pdp-swiper-qty .pdp-swiper__feature-metadata-desc {
    display: block;
    margin: 0;
  }

  /* ── Stub aside (MVP placeholders) ── */

  .pdp-swiper-qty .pdp-swiper-qty__stub-aside {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pdp-swiper-qty .pdp-swiper-qty__stub-text {
    margin: 0;
    padding: 2rem;
    font-size: 0.9375rem;
    color: rgba(var(--colors-text), 0.5);
    text-align: center;
  }

  /* ═══════════════════════════════════════════════════════════════
     Desktop — min-width: 768px
  ═══════════════════════════════════════════════════════════════ */

  /* ── Mobile: section + swiper grow to fit content, no clipping ── */
  @media screen and (max-width: 767px) {
    .pdp-swiper-qty {
      height: auto;
      max-height: none;
    }

    .pdp-swiper-qty .pdp-swiper__root {
      height: auto !important;
      max-height: none !important;
      overflow-y: visible !important;
    }

    .pdp-swiper-qty .swiper-wrapper {
      height: auto !important;
      max-height: none !important;
      overflow-y: visible !important;
    }

    .pdp-swiper-qty .pdp-swiper__slide {
      height: auto !important;
      max-height: none !important;
      overflow-y: visible !important;
    }

    /* .swiper-wrapper is a flex row with every step's slide sitting side by
       side (Swiper moves the whole row via transform; it doesn't hide/show
       slides individually), and the row is forced to `height: auto` above.
       A flex row's auto height sizes to its TALLEST child — e.g. Step 1
       (long content: qty pickers, "HOW IT WORKS", feature blocks) or a tall
       Step 2 scent step — no matter which step is actually active, leaving a
       large blank gap under shorter steps that follow it. Cap every inactive
       slide to 80vh so none of them can dominate the row's height; the
       active slide always keeps its normal auto height (rule above). */
    .pdp-swiper-qty .swiper-wrapper > .pdp-swiper__slide:not(.swiper-slide-active) {
      height: 80vh !important;
      max-height: 80vh !important;
      overflow: hidden !important;
    }

    .pdp-swiper-qty .pdp-swiper__split {
      overflow-y: visible;
    }

    .pdp-swiper-qty .pdp-swiper__aside {
      max-height: none;
      overflow-y: visible;
      padding-bottom: calc(env(safe-area-inset-bottom) + 5rem);
    }

    .pdp-swiper-qty .pdp-swiper__variants-row {
      overflow-y: visible;
      max-height: none;
      flex: 0 0 auto;
    }
  }

  @media screen and (min-width: 768px) {

    /* Section fills viewport below header */
    .pdp-swiper-qty {
      height: calc(100svh - var(--pdp-desktop-offset, 150px));
      max-height: calc(100svh - var(--pdp-desktop-offset, 150px));
      padding-right: 2.5rem;
      padding-left: 2.5rem;
    }

    /* Root + slides fill section height */
    .pdp-swiper-qty .pdp-swiper__root {
      height: 100%;
      max-height: 100%;
    }

    .pdp-swiper-qty .swiper-wrapper,
    .pdp-swiper-qty .pdp-swiper__slide {
      height: 100%;
      max-height: 100%;
    }

    /* Split becomes a side-by-side row */
    .pdp-swiper-qty .pdp-swiper__split {
      flex-direction: row;
      align-items: stretch;
      height: 100%;
      max-height: 100%;
    }

    /* Media column: visible, 50% */
    .pdp-swiper-qty .pdp-swiper__media-col {
      display: flex;
      flex-direction: column;
      flex: 1 1 50%;
      width: 50%;
      max-width: 50%;
      height: 100%;
      max-height: 100%;
      min-height: 0;
      align-self: stretch;
    }

    .pdp-swiper-qty .pdp-swiper__media-swiper--fit {
      height: calc(100svh - var(--pdp-desktop-offset, 150px));
      max-height: calc(100svh - var(--pdp-desktop-offset, 150px));
      min-height: 0;
    }

    /* Aside: 50%, full height, aside itself scrolls on desktop */
    .pdp-swiper-qty .pdp-swiper__aside {
      flex: 1 1 50%;
      width: 50%;
      max-width: 50%;
      height: 100%;
      max-height: 78vh;
      min-height: 0;
      gap: 1.25rem;
      padding: 2rem;
      overflow-y: auto;
      overflow-x: hidden;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .pdp-swiper-qty .pdp-swiper__aside::-webkit-scrollbar { display: none; }

    /* Hide mobile CTA on desktop */
    .pdp-swiper-qty .pdp-swiper__mobile-fixed-cta {
      display: none;
    }

    /* Variants row: no overflow on desktop (aside scrolls) */
    .pdp-swiper-qty .pdp-swiper__variants-row {
      overflow: visible;
      max-height: none;
      flex: 0 0 auto;
      gap: 0.75rem;
    }

    /* NEXT button: fixed bottom-right matching aside width */
    .pdp-swiper-qty .pdp-swiper__next-row {
      display: block;
      position: fixed;
      right: 0;
      bottom: 0;
      margin-top: 0;
      padding: 0.5rem 1rem;
      background: rgba(var(--colors-background), 1);
      z-index: 9999;
      max-width: 50%;
    }

    /* Prevent fixed NEXT bar from obscuring scrollable aside content */
    .pdp-swiper-qty .pdp-swiper__aside {
      padding-bottom: 5rem;
    }

    .pdp-swiper-qty .pdp-swiper__next-row .product-form__add-button {
      width: 100%;
      min-width: 12rem;
    }

    /* Cards: desktop proportions */
    .pdp-swiper-qty .pdp-swiper__variant-card {
      padding: 0.875rem 1rem;
      gap: 1rem;
    }

    .pdp-swiper-qty .pdp-swiper__variant-card__media {
      width: 124px;
      height: 124px;
      min-width: 124px;
      align-self: auto;
    }

    .pdp-swiper-qty .pdp-swiper__variant-card__details {
      flex-direction: row;
      align-items: flex-start;
      gap: 1rem;
    }

    .pdp-swiper-qty .pdp-swiper-qty__variant-card__details--stacked {
      flex-direction: column;
      align-items: stretch;
      gap: 0.375rem;
    }

    .pdp-swiper-qty .pdp-swiper__variant-card__right {
      align-items: flex-end;
      text-align: right;
      min-width: 7rem;
      min-height: 124px;
      width: auto;
    }

    .pdp-swiper-qty .pdp-swiper__variant-card__right-top {
      align-items: flex-end;
    }

    .pdp-swiper-qty .pdp-swiper__variant-card__prices {
      display: block;
      text-align: right;
    }

    .pdp-swiper-qty .pdp-swiper__variant-card__prices.text-right {
      text-align: right;
    }

    .pdp-swiper-qty .pdp-swiper__variant-card__right .inline-flex {
      justify-content: flex-end;
    }

  }

  /* ── SEE ALL FRAGRANCES button ── */

  .pdp-swiper-qty .pdp-swiper__see-all-fragrances-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 0.75rem;
    padding-top: 0.25rem;
    box-sizing: border-box;
  }

  .pdp-swiper-qty .pdp-swiper__see-all-fragrances {
    font-size: 1.3rem;
    color: rgba(var(--colors-heading));
    line-height: 1.25;
    text-align: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
  }

  /* ── All Scents modal ── */

  .pdp-swiper-qty .pdp-swiper__all-scents-modal,
  .pdp-swiper__all-scents-modal {
    position: fixed;
    inset: 0;
    z-index: 100110;
    background: rgba(0, 0, 0, 0.45);
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
  }

  .pdp-swiper__all-scents-modal[x-cloak] {
    display: none !important;
  }

  .pdp-swiper__all-scents-shell {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(var(--colors-background), 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .pdp-swiper__all-scents-topbar {
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.5rem 1rem 0;
  }

  .pdp-swiper__all-scents-close {
    border: 0;
    background: transparent;
    color: #000;
    cursor: pointer;
    font-size: 1.75rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
  }

  .pdp-swiper__all-scents-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 2rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }

  .pdp-swiper__all-scents-toolbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .pdp-swiper__all-scents-subheadline {
    margin: 0;
    font-size: 0.9375rem;
    color: rgba(var(--colors-text), 0.8);
    line-height: 1.4;
  }

  .pdp-swiper__all-scents-next-bar {
    flex-shrink: 0;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(var(--colors-background), 1);
    display: flex;
    justify-content: center;
  }

  .pdp-swiper__all-scents-next-btn {
    width: min(24rem, 100%);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }

  .pdp-swiper__all-scents-next-bar[x-cloak] {
    display: none !important;
  }

  .pdp-swiper__all-scents-filters-trigger {
    display: none;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 999px;
    background: rgba(var(--colors-background), 1);
    color: rgba(var(--colors-heading));
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
  }

  .pdp-swiper__all-scents-title {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 600;
    color: rgba(var(--colors-heading));
  }

  .pdp-swiper__all-scents-search-wrap {
    width: min(26rem, 50%);
    min-width: 14rem;
  }

  .pdp-swiper__all-scents-search {
    width: 100%;
    height: 2.5rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.22);
    padding: 0 0.9rem;
    font-size: 0.95rem;
    background: #fff;
  }

  .pdp-swiper__all-scents-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
    overflow: hidden;
  }

  .pdp-swiper__all-scents-filters {
    flex: 0 0 20%;
    max-width: 20%;
    min-width: 15rem;
    border-right: 1px solid rgba(0, 0, 0, 0.12);
    padding: 1rem 1rem 1.25rem 1.25rem;
    overflow-y: auto;
  }

  .pdp-swiper__all-scents-filters-backdrop {
    display: none;
  }

  .pdp-swiper__filter-group + .pdp-swiper__filter-group {
    margin-top: 0.85rem;
  }

  .pdp-swiper__filter-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0;
    background: transparent;
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(var(--colors-heading));
    padding: 0.2rem 0;
    cursor: pointer;
  }

  .pdp-swiper__filter-options {
    margin-top: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .pdp-swiper__filter-option {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    color: rgba(var(--colors-text), 0.95);
    cursor: pointer;
  }

  .pdp-swiper__filter-option input[type='checkbox'] {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: rgba(var(--colors-button), 1);
  }

  .pdp-swiper__filter-placeholder {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(var(--colors-text), 0.72);
  }

  .pdp-swiper__all-scents-grid-wrap {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1rem 1.25rem 1.25rem;
    overflow-y: auto;
  }

  .pdp-swiper__all-scents-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
  }

  .pdp-swiper__all-scents-card {
    border: 0;
    border-radius: 0;
    background: rgba(var(--colors-background), 1);
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .pdp-swiper__all-scents-card-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    overflow: hidden;
  }

  .pdp-swiper__all-scents-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .pdp-swiper__all-scents-card-main {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 0;
    align-items: center;
    text-align: center;
  }

  .pdp-swiper__all-scents-card-title {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.3;
    font-weight: 600;
    color: rgba(var(--colors-heading));
    text-align: center;
  }

  .pdp-swiper__all-scents-card-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    flex-wrap: wrap;
  }

  .pdp-swiper__all-scents-price-block {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    align-items: center;
    text-align: center;
    flex: 1 1 auto;
  }

  .pdp-swiper__all-scents-card-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0.15rem;
  }

  .pdp-swiper__all-scents-select-btn {
    padding: 0.7rem 1.15rem;
  }

  .pdp-swiper__all-scents-modal .pdp-swiper__variant-card__scent-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
    width: 100%;
  }

  .pdp-swiper__all-scents-modal .pdp-swiper__variant-card__scent-profile,
  .pdp-swiper__all-scents-modal .pdp-swiper__variant-card__scent-moods {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
  }

  .pdp-swiper__all-scents-modal .pdp-swiper__variant-card__scent-profile-item,
  .pdp-swiper__all-scents-modal .pdp-swiper__variant-card__scent-mood-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }

  .pdp-swiper__all-scents-modal .pdp-swiper__variant-card__scent-dot,
  .pdp-swiper__filter-option .pdp-swiper__variant-card__scent-dot {
    width: 0.8125rem;
    height: 0.8125rem;
    border-radius: 9999px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    box-sizing: border-box;
    background-color: transparent;
    flex-shrink: 0;
  }

  .pdp-swiper__all-scents-modal .pdp-swiper__variant-card__scent-profile-name,
  .pdp-swiper__all-scents-modal .pdp-swiper__variant-card__scent-mood-name {
    font-size: 0.8125rem;
    line-height: 1.25;
    color: rgba(var(--colors-text), 0.86);
  }

  .pdp-swiper__all-scents-modal .pdp-swiper__variant-card__scent-mood-icon,
  .pdp-swiper__filter-option .pdp-swiper__variant-card__scent-mood-icon {
    width: 1.1rem;
    height: 1.1rem;
    object-fit: contain;
    flex-shrink: 0;
  }

  .pdp-swiper__all-scents-modal .pdp-swiper__variant-card__scent-notes {
    margin: 0;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.35;
    color: rgba(var(--colors-text), 0.65);
  }

  @media screen and (max-width: 1280px) {
    .pdp-swiper__all-scents-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media screen and (max-width: 989px) {
    .pdp-swiper__all-scents-toolbar {
      padding: 0.5rem 1rem 0.9rem;
    }
    .pdp-swiper__all-scents-toolbar-top {
      flex-direction: column;
      align-items: stretch;
      gap: 0.5rem;
    }
    .pdp-swiper__all-scents-search-wrap {
      width: 100%;
      min-width: 0;
    }
    .pdp-swiper__all-scents-content {
      position: relative;
    }
    .pdp-swiper__all-scents-filters {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: min(84vw, 22rem);
      max-width: none;
      min-width: 0;
      border-right: 1px solid rgba(0, 0, 0, 0.12);
      border-bottom: 0;
      padding: 1rem;
      background: rgba(var(--colors-background), 1);
      z-index: 100120;
      transform: translateX(-105%);
      transition: transform 0.2s ease;
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
    }
    .pdp-swiper__all-scents-filters.is-open {
      transform: translateX(0);
    }
    .pdp-swiper__all-scents-filters-backdrop {
      position: fixed;
      inset: 0;
      display: block;
      background: rgba(0, 0, 0, 0.35);
      z-index: 100110;
    }
    .pdp-swiper__all-scents-grid-wrap {
      padding: 1rem;
    }
    .pdp-swiper__all-scents-filters-trigger {
      display: inline-flex;
      margin-bottom: 0.75rem;
      width: fit-content;
    }
    .pdp-swiper__all-scents-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .pdp-swiper__variant-card__shipping-note {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.3;
    color: rgba(var(--colors-text), 0.7);
    text-align: right;
  }

  .pdp-swiper__popup-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 0.5rem;
  }

  .pdp-swiper__popup-qty-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(var(--colors-heading));
  }
/* END_SECTION:pdp-swiper-quantity */

/* START_SECTION:pdp-swiper-squeeze (INDEX:108) */
/*
    Palette mapped from the concept's --mocha/--linen/--roots/--eucalyptus
    tokens onto scoped custom properties (kept local to this section rather
    than overriding theme-wide --colors-* — see plan §"Improve rather than
    copy" item 1).
  */
  .pdp-swiper-squeeze {
    --sq-mocha: #45392b;
    --sq-linen: #F5F0EB;
    --sq-roots: #766660;
    --sq-eucalyptus: #6B7768;
    --sq-toffee: #A48776;
    --sq-sand: #D9CCBF;
    --sq-line: rgba(69, 57, 43, .14);
    background: var(--sq-linen);
    color: var(--sq-mocha);
    font-family: 'Lato', sans-serif;
    /* Merchant-editable via the "Section padding — desktop" schema settings above (default matches the original hardcoded 0/90px, expressed in rem). Overridden for mobile below at the 900px breakpoint. */
    padding-top: var(--pdp-padding-top, 0rem);
    padding-bottom: var(--pdp-padding-bottom, 1rem);
  }

  /*
    Why `.pdp-swiper-squeeze__media-wrap`'s `position: sticky` (below) needs
    this: the theme puts a literal `overflow-x-hidden` class on <body> (see
    layout/theme.liquid) to stop horizontal scroll. Setting `overflow-x` to
    anything but `visible` on an element forces the browser to also compute
    its `overflow-y` as `auto`, which makes <body> a scroll container — and
    `position: sticky` sticks relative to the nearest scroll-container
    ancestor, not necessarily the viewport. Body itself never actually
    scrolls internally here (the real page scroll happens on the document),
    so a sticky element measured against body's non-scrolling scroll-box
    just sits static instead of sticking.

    `overflow: clip` gives the same "no horizontal overflow" result without
    registering as a scroll container (that's the documented difference
    between `hidden` and `clip`), which restores normal viewport-relative
    sticky behavior. Scoped to this section's own stylesheet — which only
    ships on pages that render it — via `:has()`, so it doesn't change
    body's behavior anywhere else in the theme. `overflow: clip` needs
    Chrome 90+ / Safari 16+ / Firefox 113+; older browsers just keep the
    non-sticky (but still fully usable) static layout they have today.
  */
  body.overflow-x-hidden:has(.pdp-swiper-squeeze) {
    overflow-x: clip;
  }

  /*
    IMPORTANT: `.pdp-swiper__slide` must stay 100% width with no max-width —
    Swiper.js measures each slide's rendered width to compute the wrapper's
    translate3d offset on slideTo()/slideNext(). Capping the slide itself
    (rather than the content inside it) desyncs that measurement from the
    actual layout — cap width on `.pdp-swiper-squeeze__aside` instead.
  */
  .pdp-swiper-squeeze .pdp-swiper__root,
  .pdp-swiper-squeeze .swiper-wrapper,
  .pdp-swiper-squeeze .pdp-swiper__slide {
    width: 100%;
  }

  /*
    What looked like a stray hairline (and, separately, a "Continue" button
    peeking through) along the right edge of Step 1 was never a border or a
    z-index/overlap bug between sections — it was the literal next slide
    (Step 2), sitting edge-to-edge with zero gap and occasionally visible by
    a sliver at its shared boundary with Step 1. The real fix is the small
    `spaceBetween` gap on the Swiper init itself (see the JS below), which
    inserts real breathing room Swiper accounts for in its own slide-width
    math. This background match + `overflow: hidden` stay only as a cheap
    safety net so that gap (or any remaining subpixel rounding) reads as
    "blends into the linen wash" rather than "visible seam" if it's ever
    not quite wide enough.
  */
  .pdp-swiper-squeeze .pdp-swiper__root {
    overflow: hidden;
  }
  .pdp-swiper-squeeze .pdp-swiper__root,
  .pdp-swiper-squeeze .swiper-wrapper,
  .pdp-swiper-squeeze .pdp-swiper__slide {
    background: var(--sq-linen);
  }

  /*
    `.layout` replaces the old per-slide `.pdp-swiper__split` wrapper — see
    the big comment above the markup for why the media column had to move
    outside the swiper entirely. On steps 2/3 (`.layout--collapsed`) the
    media column animates its width/opacity down to nothing instead of an
    instant display:none swap — see the big comment above the markup for why
    that instant swap was the source of the jank. The gap between columns
    lives on `.swiper-col`'s `margin-left` (not flex `gap`) specifically so
    it can transition away in step with the media column collapsing, rather
    than leaving a fixed empty gap behind once the column is gone.
  */
  .pdp-swiper-squeeze .pdp-swiper-squeeze__layout {
    display: flex;
    align-items: flex-start;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.25rem;
    box-sizing: border-box;
  }
  .pdp-swiper-squeeze .pdp-swiper-squeeze__swiper-col {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    margin-left: 2.5rem;
    /* Matches the root Swiper's `speed: 300` (see the JS init) so the column widening finishes in step with the slide transform, not ahead of or behind it. */
    transition: margin-left .3s ease;
  }
  .pdp-swiper-squeeze .pdp-swiper-squeeze__layout--collapsed .pdp-swiper-squeeze__swiper-col {
    margin-left: 0;
  }

  /*
    Sticky positioning lives on the wrapper (not `.pdp-swiper__media-col`
    itself) so the reactive stat bar rendered as its sibling scrolls together
    with the image as one sticky unit.
  */
  .pdp-swiper-squeeze .pdp-swiper-squeeze__media-wrap {
    flex: 0 0 42%;
    max-width: 42%;
    opacity: 1;
    position: sticky;
    /* Same duration as `.swiper-col`'s margin-left above, so both finish together. */
    transition: flex-basis .3s ease, max-width .3s ease, opacity .3s ease;
    /*
      The theme's fixed header (`.header-group-container`) is ~127px tall.
      This used to be `--pdp-desktop-offset - 60px` (≈90px with the default
      150px setting) — 37px LESS than the real header height, so the sticky
      element pinned partially underneath the fixed header instead of clear
      below it, and only looked properly "stuck" once scroll had carried it
      further down. Using the offset directly (no subtraction) clears the
      header, so it locks into its final visible position immediately.
    */
    top: var(--pdp-desktop-offset, 150px);
  }
  .pdp-swiper-squeeze .pdp-swiper-squeeze__layout--collapsed .pdp-swiper-squeeze__media-wrap {
    flex-basis: 0%;
    max-width: 0%;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .pdp-swiper-squeeze .pdp-swiper__media-swiper--fit,
  .pdp-swiper-squeeze .pdp-swiper__media-slide-inner {
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(160deg, #EDE4DA 0%, var(--sq-sand) 100%);
  }

  /*
    Fixed aspect-ratio instead of a content-driven (`height: auto`) box.

    Previous attempt: `align-items: flex-start` on `.swiper-wrapper`. That
    stopped SHORTER slides from being stretched to match a taller sibling,
    but didn't fix the actual bug — `.swiper-wrapper` is a flex ROW holding
    every variant's slide side by side (not just the visible one), and a
    flex row's cross-axis size is always the max of every child's hypothetical
    size, regardless of `align-items` (that property only controls how
    children are positioned WITHIN that computed height, not what determines
    it). So the row — and the container sized to `height: auto` around it —
    stayed exactly as tall as the tallest slide (e.g. the "Whole Home + Car
    Set" photo, which isn't square like the others), leaving the gradient
    background exposed below shorter/square images. That's the tan
    (`#dfd3c6`-ish) dead space that was reported.

    Fixing it means the container's height can't be allowed to depend on
    Swiper's internal row at all — giving it a fixed `aspect-ratio` and
    stretching every slide to fill that fixed box (`height: 100%` +
    `object-fit: cover`) decouples the two entirely.
  */
  .pdp-swiper-squeeze .pdp-swiper__media-swiper--fit {
    aspect-ratio: 1 / 1;
  }
  .pdp-swiper-squeeze .pdp-swiper__media-swiper--fit .swiper-wrapper {
    align-items: stretch;
  }
  .pdp-swiper-squeeze .pdp-swiper__media-swiper--fit,
  .pdp-swiper-squeeze .pdp-swiper__media-swiper--fit .swiper-wrapper,
  .pdp-swiper-squeeze .pdp-swiper__media-slide,
  .pdp-swiper-squeeze .pdp-swiper__media-slide-inner {
    height: 100%;
  }

  .pdp-swiper-squeeze .pdp-swiper__media-slide-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Reactive stat bar under the media image — mirrors the concept's `.vis-props`. */
  .pdp-swiper-squeeze__vis-props {
    display: flex;
    margin-top: 1rem;
    border: 1px solid var(--sq-line);
    border-radius: 14px;
    background: #fff;
  }
  .pdp-swiper-squeeze__vis-props div {
    flex: 1;
    text-align: center;
    padding: .875rem .5rem;
    font-size: .75rem;
    color: var(--sq-roots);
  }
  .pdp-swiper-squeeze__vis-props div + div {
    border-left: 1px solid var(--sq-line);
  }
  .pdp-swiper-squeeze__vis-props b {
    display: block;
    color: var(--sq-mocha);
    font-size: .8125rem;
    margin-bottom: .15rem;
  }

  /*
    Step 1 skeleton loader — shown until step1Ready (every image inside
    data-pdp-step1-media has loaded; see preloadStep1Media()). Plain shimmer
    boxes shaped like the real media image / stat bar / cards / sumbox they
    stand in for, so swapping to real content doesn't jump the layout.
    Deliberately NOT gated behind x-cloak (unlike the real content it stands
    in for) — it needs to be visible from first paint, before Alpine has even
    booted, which is the whole point of having a skeleton at all.
  */
  .pdp-swiper-squeeze__skel {
    position: relative;
    overflow: hidden;
    background: var(--sq-sand);
    border-radius: 8px;
  }
  .pdp-swiper-squeeze__skel:after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    animation: pdp-squeeze-shimmer 1.4s ease-in-out infinite;
  }
  @keyframes pdp-squeeze-shimmer {
    100% { transform: translateX(100%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .pdp-swiper-squeeze__skel:after { animation: none; }
  }

  /* Matches the real media box's aspect-ratio (see the media-swiper--fit note below) so the skeleton→real swap doesn't jump the layout. */
  .pdp-swiper-squeeze__skel-media-img { border-radius: 18px; aspect-ratio: 1 / 1; }
  .pdp-swiper-squeeze__skel-vis-props { display: flex; gap: .75rem; margin-top: 1rem; }
  .pdp-swiper-squeeze__skel-vis-props .pdp-swiper-squeeze__skel { flex: 1; height: 54px; border-radius: 14px; }
  @media (max-width: 900px) {
    .pdp-swiper-squeeze__skel-media-img { aspect-ratio: 4 / 3; }
  }

  /* Matches the base card rule's specificity (see the --sel note above it) so cursor/pointer-events actually override. */
  .pdp-swiper-squeeze .pdp-swiper-squeeze__skel-card { pointer-events: none; cursor: default; }
  .pdp-swiper-squeeze__skel-card-thumb { width: 56px; height: 64px; flex: none; border-radius: 10px; }
  .pdp-swiper-squeeze__skel-card-meat { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
  .pdp-swiper-squeeze__skel-line { height: .9rem; border-radius: 5px; }
  .pdp-swiper-squeeze__skel-line--title { width: 55%; height: 1rem; }
  .pdp-swiper-squeeze__skel-line--sub { width: 80%; }
  .pdp-swiper-squeeze__skel-card-pr { width: 52px; height: 1.5rem; flex: none; border-radius: 999px; }
  /* Two-class selector to reliably beat the base .sumbox padding rule regardless of source order. */
  .pdp-swiper-squeeze__sumbox.pdp-swiper-squeeze__skel-sumbox { display: flex; flex-direction: column; padding: 1.125rem; }

  /*
    `margin: 0 auto` centers the aside on steps 2/3, where `.swiper-col` is
    the only column in `.layout` (media-wrap hidden) and therefore wider than
    the aside's own 640px cap — without it the aside would hug the left edge
    instead of sitting centered like the design. On Step 1, `.swiper-col`'s
    own width is close enough to 640px already (it's splitting the row with
    the 42%-wide media column) that this has no visible effect there.
  */
  .pdp-swiper-squeeze__aside {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 640px;
    margin: 0 auto;
    padding: 2rem 0 2.5rem;
  }

  /*
    Step 2 only — matches Step 1's overall two-column footprint (media col +
    aside) instead of the 640px single-column reading width Steps 1/3 use, so
    the scent picker has real room for its 2-up card grid instead of being
    squeezed into a narrow centered column.
  */
  .pdp-swiper-squeeze__aside--wide {
    max-width: 100%;
    margin: 0;
  }

  /*
    Scent options span the full grid width (both columns); perks/CTA sit
    below them, confined to the left column only, leaving column 2 empty at
    that row (matches the design — perks/CTA are NOT a side-by-side rail
    next to the scent grid, they're a left-aligned block underneath it).
  */
  .pdp-swiper-squeeze__step2-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: 1.5rem 2.5rem;
    margin-top: 1.5rem;
  }
  .pdp-swiper-squeeze__step2-scent { grid-column: 1 / -1; min-width: 0; }
  .pdp-swiper-squeeze__step2-perks { grid-column: 1 / 2; min-width: 0; }
  /* Perks card + CTA stick to the top of their column rather than stretching full-height. */
  .pdp-swiper-squeeze__step2-perks .pdp-swiper-squeeze__perks { margin-top: 0; }

  @media (max-width: 900px) {
    /* Mobile padding uses its own schema settings — see "Section padding — mobile". */
    .pdp-swiper-squeeze {
      padding-top: var(--pdp-padding-top-mobile, 0rem);
      padding-bottom: var(--pdp-padding-bottom-mobile, 1rem);
    }
    .pdp-swiper-squeeze .pdp-swiper-squeeze__layout {
      flex-direction: column;
      gap: 1rem;
    }
    .pdp-swiper-squeeze .pdp-swiper-squeeze__media-wrap {
      flex: 0 0 auto;
      max-width: 100%;
      width: 100%;
      position: static;
      opacity: 1;
    }
    /*
      Mobile stacks in a column (via `.layout`'s own `gap` above), so the
      desktop-only `.swiper-col` left margin — and the collapse animation
      that transitions it — aren't relevant here; zero it unconditionally.
    */
    .pdp-swiper-squeeze .pdp-swiper-squeeze__swiper-col {
      margin-left: 0;
    }
    .pdp-swiper-squeeze .pdp-swiper__media-swiper--fit {
      aspect-ratio: 4 / 3;
    }
    .pdp-swiper-squeeze__vis-props {
      display: none;
    }
    .pdp-swiper-squeeze__aside {
      max-width: 100%;
    }
    .pdp-swiper-squeeze__step2-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    .pdp-swiper-squeeze__step2-perks { grid-column: 1 / -1; }
  }

  /*
    Sticky top bar (design's `<header>`) standing in for the theme's global
    header — hidden on this template (see layout/theme.liquid's
    `template.suffix` gate) — so this is what actually occupies the top of
    the viewport. Rendered once via pdp-swiper-squeeze-header.liquid rather
    than duplicated per step snippet, but functionally identical to before:
    the same [data-pdp-step] click-to-jump + is-active/is-done classes
    driven by syncSqueezeStepState() in the plain-JS swiper glue.
  */
  .pdp-swiper-squeeze__hd {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(245, 240, 235, .96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sq-line);
  }
  .pdp-swiper-squeeze__hd-in {
    max-width: 1180px;
    margin: 0 auto;
    padding: .875rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
  }
  .pdp-swiper-squeeze__logo {
    font-weight: 900;
    letter-spacing: .32em;
    font-size: .9375rem;
    color: var(--sq-mocha);
    text-decoration: none;
    white-space: nowrap;
  }
  .pdp-swiper-squeeze__steps {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sq-roots);
  }
  .pdp-swiper-squeeze__step {
    display: flex;
    align-items: center;
    gap: .375rem;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }
  .pdp-swiper-squeeze__step-dot {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 1px solid var(--sq-roots);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .625rem;
    font-weight: 700;
    flex: none;
  }
  .pdp-swiper-squeeze__step.is-active { color: var(--sq-mocha); font-weight: 700; }
  .pdp-swiper-squeeze__step.is-active .pdp-swiper-squeeze__step-dot {
    background: var(--sq-mocha);
    border-color: var(--sq-mocha);
    color: var(--sq-linen);
  }
  .pdp-swiper-squeeze__step.is-done .pdp-swiper-squeeze__step-dot {
    background: var(--sq-eucalyptus);
    border-color: var(--sq-eucalyptus);
    color: var(--sq-linen);
  }
  .pdp-swiper-squeeze__step-sep { width: 1.375rem; height: 1px; background: var(--sq-line); flex: none; }
  .pdp-swiper-squeeze__hd-right {
    font-size: .6875rem;
    letter-spacing: .08em;
    color: var(--sq-roots);
    display: flex;
    align-items: center;
    gap: .375rem;
    white-space: nowrap;
  }
  @media (max-width: 760px) {
    .pdp-swiper-squeeze__step-lbl { display: none; }
    .pdp-swiper-squeeze__hd-right { display: none; }
    .pdp-swiper-squeeze__hd-in { padding: .75rem 1rem; }
    /*
      Space between the sticky header and the content below it — previously
      added as bottom padding on `.hd-in`, which only made the header itself
      taller (padding is inside the header's own box, above its bottom
      border) rather than creating a gap between the header and whatever
      comes after it. `margin-bottom` on the header itself actually pushes
      the next element down.
    */
    .pdp-swiper-squeeze__hd { margin-bottom: .5rem; }
  }

  .pdp-swiper-squeeze__eyebrow { font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sq-toffee); font-weight: 700; margin-bottom: .5rem; }

  /* Steps 2/3 only — back-to-previous-step link (design's back control). */
  .pdp-swiper-squeeze__back {
    display: inline-flex; align-items: center; gap: .375rem;
    font-size: .8125rem; font-weight: 700; color: var(--sq-roots);
    background: none; border: 0; padding: 0; margin-bottom: 1rem; cursor: pointer;
  }
  .pdp-swiper-squeeze__back:hover { color: var(--sq-mocha); }
  .pdp-swiper-squeeze__h1 { font-family: 'Playfair Display', serif; font-weight: 500; font-size: 2rem; line-height: 1.1; margin-bottom: .5rem; }
  .pdp-swiper-squeeze__sub { font-size: .9375rem; color: var(--sq-roots); margin-bottom: 1.25rem; max-width: 46ch; }

  /* Trust row (design's `.trust`) — hardcoded rating/units-sold line. */
  .pdp-swiper-squeeze__trust {
    display: flex; flex-wrap: wrap; gap: .5rem 1.125rem; align-items: center;
    font-size: .8125rem; color: var(--sq-roots); margin-bottom: 2.25rem;
  }
  .pdp-swiper-squeeze__trust b { color: var(--sq-mocha); }
  .pdp-swiper-squeeze__trust-stars { color: #F0B429; letter-spacing: 2px; font-size: .875rem; }

  /* Step 1 device cards — single-select, no qty */
  .pdp-swiper-squeeze__cards { display: flex; flex-direction: column; gap: .75rem; }
  /*
    Color set explicitly (not inherited) and scoped under `.pdp-swiper-squeeze`
    for specificity: the theme has a global `[role="button"]` rule (styled for
    solid dark buttons elsewhere) that otherwise overrides text to a near-white
    tone here, since these cards use role="button" for keyboard accessibility.
  */
  .pdp-swiper-squeeze .pdp-swiper-squeeze__card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: #fff;
    color: var(--sq-mocha);
    border: 1.5px solid var(--sq-line);
    border-radius: 14px;
    padding: 1rem 1.125rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
  }
  /*
    Specificity must match-or-beat the base `.pdp-swiper-squeeze .pdp-swiper-squeeze__card`
    rule above (which sets the `border` shorthand, incl. border-color) — otherwise the
    base rule's border-color wins over this one and only the box-shadow shows.
  */
  .pdp-swiper-squeeze .pdp-swiper-squeeze__card--sel {
    border-color: var(--sq-eucalyptus);
    border-width: 2px;
    box-shadow: 0 6px 22px rgba(107,119,104,.18);
  }
  .pdp-swiper-squeeze__card-thumb { width: 56px; height: 64px; object-fit: contain; flex: none; background: var(--sq-linen); border-radius: 10px; padding: 6px; }
  .pdp-swiper-squeeze__card-meat { flex: 1; min-width: 0; }
  .pdp-swiper-squeeze__card-nm { font-weight: 700; font-size: 1rem; }
  .pdp-swiper-squeeze__card-ds { font-size: .8125rem; color: var(--sq-roots); display: block; margin-top: .2rem; }
  .pdp-swiper-squeeze__card-pr { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
  .pdp-swiper-squeeze__card-was { font-size: .8125rem; color: var(--sq-roots); text-decoration: line-through; }
  .pdp-swiper-squeeze__free { display: inline-block; background: var(--sq-eucalyptus); color: var(--sq-linen); font-weight: 900; font-size: .6875rem; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; }

  /* Bundle ("Whole Home + Car Set") card — same base card styling, plus a
     "Best Value" tag (design's `.cardtag`/.tag.val`) since it has no color
     swatch row to fill that space. Extra top padding makes room for the tag. */
  .pdp-swiper-squeeze__card--bundle { border-color: var(--sq-toffee); padding-top: 1.5rem; }
  .pdp-swiper-squeeze__card-tag {
    position: absolute; top: -.625rem; left: 1rem; z-index: 2;
    background: var(--sq-toffee); color: #fff; font-size: .625rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px; box-shadow: 0 2px 8px rgba(69,57,43,.12);
  }

  /* Qty stepper — lives only in the .sumbox confirmation, not on cards. */
  .pdp-swiper-squeeze__qty { display: flex; align-items: center; border: 1px solid var(--sq-line); border-radius: 999px; overflow: hidden; }
  .pdp-swiper-squeeze__qty-btn { width: 28px; height: 28px; background: #fff; border: 0; font-size: 1rem; color: var(--sq-mocha); cursor: pointer; }
  .pdp-swiper-squeeze__qty-btn:disabled { color: var(--sq-sand); cursor: not-allowed; }
  .pdp-swiper-squeeze__qty-val { width: 24px; text-align: center; font-weight: 700; font-size: .8125rem; }

  /*
    Swatches render as bare <button> elements from the shared
    pdp-swiper-layer2-swatches.liquid snippet (no wrapping container of its
    own) — wrap + force a row layout, and give them explicit sizing since
    this section has no equivalent of pdp-swiper.liquid's own
    `.pdp-swiper .pdp-swiper__variant-card__swatches .swatch-*` rules
    (different scope, different wrapper class) that would otherwise size them.
  */
  .pdp-swiper-squeeze__swatch-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
  }
  .pdp-swiper-squeeze__swatch-row .color-watches {
    display: inline-block;
    flex: none;
    margin: 0;
    background-size: cover;
  }
  .pdp-swiper-squeeze__swatch-row .color-watches.swatch-small { width: 0.8rem; height: 0.8rem; }
  .pdp-swiper-squeeze__swatch-row .color-watches.swatch-medium { width: 1.6rem; height: 1.6rem; }
  .pdp-swiper-squeeze__swatch-row .color-watches.swatch-large { width: 30.4px; height: 30.4px; }
  .pdp-swiper-squeeze__swatch-row .color-watches.pdp-swiper__swatch--selected {
    box-shadow: 0 0 0 2px var(--sq-eucalyptus);
  }
  /* Reactive color name (design's `.avl em`) — sits right of the swatches via the row's existing flex layout. */
  .pdp-swiper-squeeze__swatch-color-nm {
    font-style: normal;
    font-size: .71875rem;
    font-weight: 700;
    color: var(--sq-mocha);
    margin-left: .25rem;
  }

  /* "Your Selection" reactive confirmation box (design's `.sumbox`). */
  .pdp-swiper-squeeze__sumbox { margin-top: 1.25rem; background: #fff; border: 1px solid var(--sq-line); border-radius: 14px; padding: 0 1.125rem 1.125rem; overflow: hidden; }
  .pdp-swiper-squeeze__sumtitle { background: var(--sq-eucalyptus); color: var(--sq-linen); font-size: .6875rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; margin: 0 -1.125rem 1rem; padding: .625rem 1.125rem; }
  .pdp-swiper-squeeze__sumempty { font-size: .8125rem; color: var(--sq-roots); padding: .5rem 0; margin: 0; }
  .pdp-swiper-squeeze__sumrow { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .4rem 0; }
  .pdp-swiper-squeeze__sumrow + .pdp-swiper-squeeze__sumrow { border-top: 1px solid var(--sq-line); }
  .pdp-swiper-squeeze__sumrow-nm { font-weight: 700; font-size: .9375rem; }
  .pdp-swiper-squeeze__sumrow-ds { font-size: .75rem; color: var(--sq-roots); }
  .pdp-swiper-squeeze__sumrow-pr { text-align: right; display: flex; align-items: center; gap: .4rem; }
  .pdp-swiper-squeeze__sumrow-was { font-size: .8125rem; color: var(--sq-roots); text-decoration: line-through; }

  .pdp-swiper-squeeze__cta {
    display: block; width: 100%; background: var(--sq-mocha); color: var(--sq-linen); border: none; border-radius: 999px;
    padding: 1rem; font-size: .875rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; margin-top: 1rem; cursor: pointer;
  }
  .pdp-swiper-squeeze__cta:disabled { background: var(--sq-sand); color: #fff; cursor: not-allowed; }
  .pdp-swiper-squeeze__cta-sub { text-align: center; font-size: .75rem; color: var(--sq-roots); margin-top: .5rem; }

  /* Step 2: "for your [device] · [color]" reactive row + change-color swatches. */
  .pdp-swiper-squeeze__finsum {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .8125rem;
    color: var(--sq-roots);
    margin: 0 0 .875rem;
  }
  .pdp-swiper-squeeze__finsum b { color: var(--sq-mocha); font-weight: 700; }
  .pdp-swiper-squeeze__finsum-swatches { display: inline-flex; align-items: center; gap: .4rem; padding-left: .2rem; }
  .pdp-swiper-squeeze__finsum-swatch {
    width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(69,57,43,.28);
  }
  .pdp-swiper-squeeze__finsum-swatch--sel {
    box-shadow: inset 0 0 0 1px rgba(69,57,43,.28), 0 0 0 2px var(--sq-eucalyptus);
  }
  /* "Change" link next to the shared color row — reveals per-unit color rows below, scent stays shared. */
  .pdp-swiper-squeeze__change-link {
    font-size: .75rem; color: var(--sq-eucalyptus); font-weight: 700; text-decoration: underline;
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  /* No card/background treatment here on purpose — plain rows, left-aligned label → swatches → color name, matching the shared finsum row's own flow. */
  .pdp-swiper-squeeze__unit-colors {
    display: flex; flex-direction: column; gap: .5rem;
    margin: 0 0 .875rem;
  }
  /* Title stacked above its swatch row (device name on its own line, swatches + color name inline underneath) rather than all on one line. */
  .pdp-swiper-squeeze__unit-color-row { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; font-size: .8125rem; color: var(--sq-roots); }
  .pdp-swiper-squeeze__unit-color-label { font-weight: 700; color: var(--sq-mocha); flex: none; }

  /* Step 2: same/each toggle (design's `.seg`) */
  .pdp-swiper-squeeze__seg {
    display: inline-flex; border: 1px solid var(--sq-line); border-radius: 999px; background: #fff; overflow: hidden; margin: .125rem 0 .875rem;
  }
  .pdp-swiper-squeeze__seg-btn { border: none; background: transparent; padding: .5625rem 1.125rem; font-size: .78125rem; font-weight: 700; color: var(--sq-roots); cursor: pointer; }
  .pdp-swiper-squeeze__seg-btn--on { background: var(--sq-mocha); color: var(--sq-linen); }

  /* Step 2: "choose for each" per-unit slots */
  .pdp-swiper-squeeze__units { display: flex; flex-direction: column; gap: 1.5rem; }
  .pdp-swiper-squeeze__unit + .pdp-swiper-squeeze__unit { padding-top: 1.5rem; border-top: 1px solid var(--sq-line); }
  .pdp-swiper-squeeze__unit-h { display: flex; align-items: center; gap: .625rem; margin-bottom: .75rem; }
  /*
    "Choose for each" swatch row only — left-padded so it visually aligns
    under the unit number/title text above it instead of hugging the edge
    (the "same scent for all" finsum above the shared grid doesn't need this,
    it has no numbered header to align under).
  */
  .pdp-swiper-squeeze__unit .pdp-swiper-squeeze__finsum { padding-left: .25rem; }
  .pdp-swiper-squeeze__unit-h-tt { font-size: 1.125rem; font-weight: 700; }
  .pdp-swiper-squeeze__unit-n {
    width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--sq-mocha); color: var(--sq-linen);
    font-size: .75rem; font-weight: 900; display: flex; align-items: center; justify-content: center; flex: none;
  }
  .pdp-swiper-squeeze__unit-n--ok { background: var(--sq-eucalyptus); }

  /* Step 2: scent list (single-select) */
  .pdp-swiper-squeeze__scent-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .625rem; }
  @media (max-width: 640px) { .pdp-swiper-squeeze__scent-grid { grid-template-columns: 1fr; } }

  /* Same explicit-color note as .pdp-swiper-squeeze__card above — role="button" here too. */
  .pdp-swiper-squeeze .pdp-swiper-squeeze__scent {
    position: relative; display: flex; align-items: flex-start; gap: .75rem; background: #fff; color: var(--sq-mocha); border: 1.5px solid var(--sq-line);
    border-radius: 12px; padding: .75rem .875rem; width: 100%; text-align: left; cursor: pointer;
  }
  /* Same specificity note as .pdp-swiper-squeeze__card--sel above. */
  .pdp-swiper-squeeze .pdp-swiper-squeeze__scent--sel { border-color: var(--sq-eucalyptus); border-width: 2px; }
  /*
    Small circular badge (rather than a bare glyph) so it reads as a control,
    not stray text — and sized/inset so it clears the price column below it
    (see .scent-right's padding-top) instead of sitting on top of it.
  */
  .pdp-swiper-squeeze__scent-chk {
    position: absolute; top: .5rem; right: .5rem; width: 1.125rem; height: 1.125rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--sq-eucalyptus); color: var(--sq-linen); border-radius: 50%;
    font-size: .625rem; font-weight: 900; line-height: 1;
  }
  /*
    Wrapper does the clipping (fixed size + overflow:hidden); the <img>
    inside is scaled up past that box via transform, cropping away the
    baked-in whitespace margin around the bottle in the source photo
    without touching the actual image file. Bumped up from the old 28×48
    box too — these were reported as too small on their own, separate from
    the dead-space issue.
  */
  .pdp-swiper-squeeze__scent-img-wrap { width: 44px; height: 64px; overflow: hidden; border-radius: 6px; flex: none; display: block; }
  .pdp-swiper-squeeze__scent-img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.35); transform-origin: center; display: block; }
  .pdp-swiper-squeeze__scent-sm { flex: 1; min-width: 0; }
  .pdp-swiper-squeeze__scent-nm { font-weight: 700; font-size: .875rem; display: block; }
  .pdp-swiper-squeeze__scent-insp { font-size: .6875rem; color: var(--sq-toffee); font-weight: 700; display: none; margin-top: .1rem; }
  .pdp-swiper-squeeze__chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
  .pdp-swiper-squeeze__chip { font-size: .625rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--sq-linen); color: var(--sq-roots); display: inline-flex; align-items: center; gap: 3px; }
  .pdp-swiper-squeeze__chip-dot { width: 6px; height: 6px; border-radius: 50%; }
  /*
    padding-top clears the .scent-chk badge's corner reservation at all times
    (not just when selected) so the price never shifts position on select —
    it's just sitting in already-reserved space instead of jumping down.
  */
  .pdp-swiper-squeeze__scent-right { flex: none; text-align: right; padding-top: 1.25rem; }
  .pdp-swiper-squeeze__scent-mo { font-size: .8125rem; font-weight: 900; display: block; }
  .pdp-swiper-squeeze__scent-waz { font-size: .6875rem; color: var(--sq-roots); text-decoration: line-through; display: block; }

  .pdp-swiper-squeeze__perks { margin: 1.25rem 0 0; background: #fff; border: 1px solid var(--sq-line); border-radius: 14px; padding: 1rem 1.125rem; }
  .pdp-swiper-squeeze__perks h3 { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .5rem; }
  .pdp-swiper-squeeze__perks li { list-style: none; font-size: .8125rem; color: var(--sq-roots); padding: .2rem 0; display: flex; gap: .5rem; }
  .pdp-swiper-squeeze__perks li:before { content: "\2713"; color: var(--sq-eucalyptus); font-weight: 900; }

  /*
    Step 3: review — one card per physical unit (see the big comment above
    the markup for why nothing is grouped/stacked).

    Grid (not flex) so mobile can regroup image/meta/price without any
    wrapper divs or DOM reordering — `grid-area` placement is independent of
    source order, unlike a flex `display:contents` trick (which was tried
    first here and abandoned: it can't pull two non-adjacent children, like
    the image and the price, into the same visual column without actually
    reordering the DOM). See the mobile override further down for the
    regrouped layout.
  */
  .pdp-swiper-squeeze__rv-items { display: flex; flex-direction: column; gap: .625rem; }
  .pdp-swiper-squeeze__rv-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "combo meta pr";
    align-items: center;
    gap: .875rem;
    background: #fff;
    border: 1px solid var(--sq-line);
    border-radius: 14px;
    padding: .75rem 1rem;
  }

  /*
    Composite "bundle" thumbnail — diffuser + oil images placed side by side
    at matching size (each roughly square) inside one shared linen-tinted
    box, so together they read as a single rectangular product shot rather
    than two separate icons. Presentational only (see the doc comment above
    the markup): this never touches the actual line items, it just visually
    implies "these two ship together" the way the design's review card does.
  */
  .pdp-swiper-squeeze__rv-combo {
    grid-area: combo;
    display: flex; align-items: center; justify-content: center;
    background: var(--sq-linen); border-radius: 10px; padding: .375rem; gap: .25rem;
  }
  .pdp-swiper-squeeze__rv-combo-device,
  .pdp-swiper-squeeze__rv-combo-oil {
    width: 44px; height: 44px; object-fit: contain; display: block;
  }
  .pdp-swiper-squeeze__rv-meat { grid-area: meta; min-width: 0; padding-left: .375rem; }
  .pdp-swiper-squeeze__rv-nm { font-weight: 700; font-size: .9375rem; display: block; }
  .pdp-swiper-squeeze__rv-ds { font-size: .8125rem; color: var(--sq-roots); display: block; margin-top: .2rem; }
  .pdp-swiper-squeeze__rv-actions { display: flex; gap: .75rem; margin-top: .3rem; }
  .pdp-swiper-squeeze__swap { font-size: .75rem; color: var(--sq-eucalyptus); font-weight: 700; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
  .pdp-swiper-squeeze__rm { font-size: .75rem; color: var(--sq-roots); font-weight: 700; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
  .pdp-swiper-squeeze__rv-pr { grid-area: pr; text-align: right; }
  .pdp-swiper-squeeze__freetxt { font-size: .625rem; font-weight: 900; letter-spacing: .05em; color: var(--sq-eucalyptus); border: 1px solid var(--sq-eucalyptus); padding: 1px 6px; border-radius: 999px; display: block; margin-bottom: .3rem; }
  .pdp-swiper-squeeze__setrow-was { font-size: .75rem; color: var(--sq-roots); text-decoration: line-through; display: block; }
  .pdp-swiper-squeeze__setrow-now { font-weight: 900; font-size: .875rem; }

  /* "Complete your set" (design's `.ups`/`.ups-row`/`.addbtn`) — dashed
     card offering whichever real devices aren't already in the customer's
     selection, one last time before checkout. */
  .pdp-swiper-squeeze__ups { margin: 1rem 0 .25rem; background: #fff; border: 1.5px dashed var(--sq-toffee); border-radius: 14px; padding: 1rem 1.125rem; }
  .pdp-swiper-squeeze__ups-h { font-size: .9375rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
  .pdp-swiper-squeeze__ups-cap { font-size: .78125rem; color: var(--sq-roots); margin: .2rem 0 .375rem; }
  .pdp-swiper-squeeze__ups-row { display: flex; align-items: center; gap: .75rem; padding: .625rem 0; }
  .pdp-swiper-squeeze__ups-row + .pdp-swiper-squeeze__ups-row { border-top: 1px solid var(--sq-line); }
  .pdp-swiper-squeeze__ups-thumb { width: 40px; height: 46px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--sq-linen); border-radius: 8px; object-fit: contain; }
  .pdp-swiper-squeeze__ups-nm { font-weight: 700; font-size: .875rem; display: block; }
  .pdp-swiper-squeeze__ups-ds { font-size: .71875rem; color: var(--sq-roots); display: block; margin-top: .125rem; }
  .pdp-swiper-squeeze__ups-was { font-size: .75rem; color: var(--sq-roots); text-decoration: line-through; }
  .pdp-swiper-squeeze__ups-addbtn {
    margin-left: auto; border: 1.5px solid var(--sq-mocha); background: #fff; color: var(--sq-mocha); font-weight: 900;
    font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; padding: .5625rem 1.125rem; border-radius: 999px;
    flex: none; cursor: pointer; transition: all .15s;
  }
  .pdp-swiper-squeeze__ups-addbtn:hover { background: var(--sq-mocha); color: var(--sq-linen); }
  @media (max-width: 760px) {
    .pdp-swiper-squeeze__ups-row { flex-wrap: wrap; }
    .pdp-swiper-squeeze__ups-row > span:nth-of-type(2) { flex: 1; min-width: 0; }
    .pdp-swiper-squeeze__ups-addbtn { flex: 1 0 100%; margin-left: 0; margin-top: .375rem; padding: .75rem; text-align: center; }
  }

  .pdp-swiper-squeeze__due-row { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem .25rem .35rem; border-top: 1px solid var(--sq-line); margin-top: 1rem; }
  .pdp-swiper-squeeze__due-label { font-size: 1rem; font-weight: 700; }
  .pdp-swiper-squeeze__due-prices b { font-size: 1.25rem; font-weight: 900; }
  .pdp-swiper-squeeze__due-was { color: var(--sq-roots); text-decoration: line-through; font-size: .8125rem; margin-right: .5rem; }

  .pdp-swiper-squeeze__bullets { margin: .875rem 0 1.125rem; padding: 1rem 1.125rem; background: #fff; border: 1px solid var(--sq-line); border-radius: 12px; }
  .pdp-swiper-squeeze__bullets li { list-style: none; font-size: .8125rem; color: var(--sq-roots); padding: .25rem 0; display: flex; gap: .5rem; }
  .pdp-swiper-squeeze__bullets li:before { content: "\2713"; color: var(--sq-eucalyptus); font-weight: 900; }

  .pdp-swiper-squeeze__purchase-details { font-size: .875rem; line-height: 1.5; color: var(--sq-roots); margin-bottom: 1rem; }

  .pdp-swiper-squeeze__tc { display: flex; gap: .5rem; align-items: flex-start; font-size: .8125rem; color: var(--sq-roots); margin-bottom: .875rem; cursor: pointer; }
  .pdp-swiper-squeeze__tc input { width: 18px; height: 18px; accent-color: var(--sq-eucalyptus); margin-top: 1px; }
  .pdp-swiper-squeeze__terms-link { background: none; border: 0; padding: 0; color: var(--sq-mocha); text-decoration: underline; cursor: pointer; font: inherit; }

  .pdp-swiper-squeeze__terms-modal { position: fixed; inset: 0; z-index: 100100; background: rgba(0,0,0,.5); padding: 1rem; display: flex; align-items: center; justify-content: center; }
  .pdp-swiper-squeeze__terms-modal[x-cloak] { display: none !important; }
  {%
    # `x-teleport="body"` moves this modal's markup out from under
    # `.pdp-swiper-squeeze` (which defines `--sq-mocha` and sets
    # `color: var(--sq-mocha)`) to be a direct child of <body> instead — so
    # it was silently falling back to the theme's default body text color
    # instead of mocha, and the close button (no color of its own, just
    # inheriting) ended up reading as invisible/background-colored. The
    # custom property itself is also out of scope once teleported (it's
    # only defined on `.pdp-swiper-squeeze` and its descendants), so this
    # uses the literal hex value rather than var(--sq-mocha) — a var()
    # reference here would just resolve to nothing in the teleported DOM
    # location.
  %}
  .pdp-swiper-squeeze__terms-modal-card { position: relative; width: min(40rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; background: #F5F0EB; color: #45392B; border-radius: 8px; padding: 1.5rem 1.5rem 1.75rem; }
  .pdp-swiper-squeeze__terms-close { position: absolute; right: .75rem; top: .6rem; border: 0; background: transparent; color: #45392B; font-size: 1.5rem; cursor: pointer; }
  .pdp-swiper-squeeze__terms-title { margin: 0 1.75rem .9rem 0; font-size: 1.25rem; }
  .pdp-swiper-squeeze__terms-body { font-size: .875rem; line-height: 1.5; color: var(--sq-roots); }

  /* Sticky mobile bar — the ONLY way to advance/add-to-cart on mobile (see the `.pdp-swiper-squeeze__cta` mobile hide-rule below); the in-page CTAs stay the only path on desktop. */
  .pdp-swiper-squeeze__bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; background: transparent; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); z-index: 60; }
  /* Mocha (--sq-mocha / #45392b), not eucalyptus — the sticky mobile bar's CTA
     matches the desktop in-page CTA (.pdp-swiper-squeeze__cta), which is mocha. */
  .pdp-swiper-squeeze__bar-cta { display: block; width: 100%; background: var(--sq-mocha); color: var(--sq-linen); border: 0; border-radius: 999px; padding: .875rem; font-size: .8125rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
  .pdp-swiper-squeeze__bar-cta:disabled { opacity: .55; cursor: not-allowed; }
  /* Matches .bar-cta's own box (padding .875rem + text) so swapping skeleton→real button doesn't jump the bar's height. */
  .pdp-swiper-squeeze__bar-skel { height: 46px; border-radius: 999px; }
  @media (max-width: 900px) {
    .pdp-swiper-squeeze__bar { display: block; }
    /*
      Mobile relies entirely on the sticky bar above for Continue/Add to
      Cart — showing both it AND each step's own in-page button would be
      redundant (and the in-page one isn't reachable behind the fixed bar
      anyway on short viewports). `barContinueDisabled()` mirrors the exact
      same gating those in-page buttons used, so nothing is lost by hiding them.
    */
    .pdp-swiper-squeeze__cta,
    .pdp-swiper-squeeze__cta-sub {
      display: none;
    }

    /*
      Review card, mobile only: regroups the same 3 grid items (combo/meta/pr
      — see the base .rv-card rule) into 2 columns instead of the desktop
      row-of-3 — column 1 is the metadata alone, column 2 stacks the image
      on top of the price (matches the design). Repeating "pr" as its own
      row rather than merging it into "combo" is what stacks them instead of
      sitting side by side; repeating "meta" in both rows is what spans it
      down the full height of column 1.
    */
    .pdp-swiper-squeeze__rv-card {
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "meta combo"
        "meta pr";
      row-gap: .5rem;
    }
    .pdp-swiper-squeeze__rv-combo {
      justify-self: center;
    }
    .pdp-swiper-squeeze__rv-pr {
      text-align: center;
    }
  }

  [x-cloak] { display: none !important; }
/* END_SECTION:pdp-swiper-squeeze */

/* START_SECTION:pdp-swiper (INDEX:109) */
.pdp-swiper {
    width: 100%;
    height: calc(100svh - 150px);
     padding-right: 2.5rem;
    padding-left: 2.5rem;
    max-width: calc(var(--page-width) + 40px); 
     margin: 0 auto;
     max-height: calc(100svh - 150px);
     
  }

  .pdp-swiper .pdp-swiper__root {
    width: 100%;
    max-height: calc(100svh - 150px);
  }

  .pdp-swiper .swiper-wrapper {
    min-height: inherit;

  } 

  .pdp-swiper .pdp-swiper__slide {
    width: 100%;
    min-height: inherit;
    height: auto;
    box-sizing: border-box;
  
  }

  .pdp-swiper .pdp-swiper__slide--split {
    padding: 0;
       /* max-width: calc(var(--page-width) + 40px); */
      /* margin: 0 auto; */
  }

  .pdp-swiper .pdp-swiper__split {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: inherit;
  }

  .pdp-swiper .pdp-swiper__media-col {
    flex: 1;
    min-height: 0;
    width: 100%;
    /* display: flex; */
    flex-direction: column;
  }

  .pdp-swiper__popup-scent-row {
    display: flex;
    gap: 1rem;
  }

  .pdp-swiper .pdp-swiper__media-swiper--fit {
    width: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 100svh;
  }

  .pdp-swiper .pdp-swiper__media-swiper--fit .swiper-wrapper {
    min-height: inherit;
  }

  .pdp-swiper .pdp-swiper__media-swiper--fit .pdp-swiper__media-slide {
    height: auto;
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
  }

  .pdp-swiper .pdp-swiper__media-slide-inner {
    flex: 1;
    width: 100%;
    min-height: 12rem;
    display: flex;
    align-items: stretch;
    justify-content: center;
  }

  .pdp-swiper .pdp-swiper__media-slide-inner img {
    width: 100%;
    height: 100%;
    min-height: 12rem;
    object-fit: cover;
    display: block;
  }

  .pdp-swiper .pdp-swiper__media-placeholder {
    flex: 1;
    min-height: 12rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.06);
  }

  .pdp-swiper .pdp-swiper__aside {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.25rem;
    padding: 1.25rem;
    box-sizing: border-box;
    /* max-height: 100svh; */
    overflow: hidden;
  }

  /* Review step: fixed two cards — no inner scroll; aside grows with content */
  .pdp-swiper .pdp-swiper__slide--review .pdp-swiper__aside {
    overflow: visible;
    max-height: none;
  }

  .pdp-swiper .pdp-swiper__variants-row--empty {
    min-height: 0;
    flex: 0 0 auto;
  }

  .pdp-swiper .pdp-swiper__next-row {
    width: 100%;
    margin-top: 0.25rem;
  }

  .pdp-swiper .pdp-swiper__mobile-fixed-cta {
    display: none;
  }

  /* Match main PDP add-to-cart: full width on small screens; allow natural width on larger */
  @media screen and (min-width: 750px) {
    .pdp-swiper .pdp-swiper__next-row .product-form__add-button {
      width: 100%;
      min-width: 12rem;
    }
  }

  /* Swapped vs default theme: compare-at uses sale accent; current price uses muted body (sizes bumped) */
  .pdp-swiper .pdp-swiper__variant-compare-at s {
    color: rgba(var(--colors-price-sale), 0.58);
  }

  .pdp-swiper .pdp-swiper__variant-current-price {
    color: rgba(var(--colors-price));
    font-weight: 600;
    line-height: 1.2;
  }

  .pdp-swiper .pdp-swiper__save-label {
    margin-top: 0.3rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(var(--colors-price));
    color: #fff;
    border-radius: 5px;
    padding: 0.25rem;
  }

  /* Same visual as `.pdp-swiper__variant-current-price` when only one price line (no compare-at) */
  .pdp-swiper .pdp-swiper__variant-single-price span {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(var(--colors-price));
  }

  .pdp-swiper .pdp-swiper__steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.3;
  }

  .pdp-swiper .pdp-swiper__step {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    opacity: 0.55;
    text-decoration: none;
    transition: opacity 0.15s ease, font-weight 0.15s ease;
  }

  .pdp-swiper .pdp-swiper__step:hover {
    opacity: 0.85;
  }

  .pdp-swiper .pdp-swiper__step.is-active {
    opacity: 1;
    font-weight: 700;
  }

  .pdp-swiper .pdp-swiper__step-sep {
    opacity: 0.45;
    user-select: none;
  }

  .pdp-swiper .pdp-swiper__headline-row {
    width: 100%;
  }

  .pdp-swiper .pdp-swiper__description-row {
    width: 100%;
    margin-top: 0.375rem;
  }

  .pdp-swiper .pdp-swiper__step-description {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(var(--colors-text));
    opacity: 0.88;
  }

  .pdp-swiper .pdp-swiper__subheadline-row {
    width: 100%;
    margin-top: 0.5rem;
  }

  .pdp-swiper .pdp-swiper__subheadline {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(var(--colors-text));
  }

  .pdp-swiper .pdp-swiper__step-label {
    margin-top: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(var(--colors-heading));
  }

  .pdp-swiper .pdp-swiper__variants-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    /* flex: 1 1 auto; */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    cursor: grab;
  }

  /* Hide scrollbar for Chromium browsers */
  .pdp-swiper .pdp-swiper__variants-row::-webkit-scrollbar {
    display: none;
  }

  .pdp-swiper .pdp-swiper__variants-row.is-grabbing {
    cursor: grabbing;
  }

  .pdp-swiper .pdp-swiper__variant-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.875rem 1rem;
    box-sizing: border-box;
    border-radius: 8px;
    background: rgba(var(--colors-background), 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
    scroll-snap-align: start;
  }

  .pdp-swiper .pdp-swiper__variant-card.pdp-swiper__variant-card--active {
    border-color: rgba(0, 0, 0, 1);
  }

  /* Mobile: More compact cards to show more at once */
  @media screen and (max-width: 749px) {
    .pdp-swiper .pdp-swiper__variant-card {
      padding: 0.625rem 0.75rem;
      gap: 0.75rem;
    }

    .pdp-swiper .pdp-swiper__variant-card__media {
      width: 100px;
      height: 100px;
      min-width: 100px;
    }

    .pdp-swiper .pdp-swiper__variant-card__img {
      width: 100px;
      height: 100px;
    }

    .pdp-swiper .pdp-swiper__variants-row {
      gap: 0.5rem;
      overflow-y: unset;
    }
  }

  /* Image (left) + details block (body + price column); on mobile details stacks vertically */
  .pdp-swiper .pdp-swiper__variant-card__details {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex: 1;
    min-width: 0;
  }

  .pdp-swiper .pdp-swiper__variant-card__media {
    flex-shrink: 0;
    width: 124px;
    height: 124px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
  }

  .pdp-swiper .pdp-swiper__variant-card__img {
    width: 124px;
    height: 124px;
    object-fit: cover;
    display: block;
  }

  .pdp-swiper .pdp-swiper__variant-card__img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pdp-swiper .pdp-swiper__variant-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
  }

  .pdp-swiper .pdp-swiper__variant-card__option-primary {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(var(--colors-heading));
  }

  .pdp-swiper .pdp-swiper__variant-card__feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.25rem;
  }

  .pdp-swiper .pdp-swiper__variant-card__feature-icon {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
    flex-shrink: 0;
  }

  .pdp-swiper .pdp-swiper__variant-card__feature-text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.2;
    color: rgba(var(--colors-text), 0.8);
  }

  .pdp-swiper .pdp-swiper__variant-card__scent-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
    row-gap: 0.45rem;
    min-width: 0;
  }

  .pdp-swiper .pdp-swiper__variant-card__scent-profile {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    min-width: 0;
  }

  .pdp-swiper .pdp-swiper__variant-card__scent-profile-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
  }

  .pdp-swiper .pdp-swiper__variant-card__scent-dot {
    width: 0.8125rem;
    height: 0.8125rem;
    border-radius: 9999px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
  }

  .pdp-swiper .pdp-swiper__variant-card__scent-profile-name {
    font-size: 0.8125rem;
    line-height: 1.25;
    color: rgba(var(--colors-text), 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 9rem;
  }

  .pdp-swiper .pdp-swiper__variant-card__scent-moods {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    min-width: 0;
  }

  .pdp-swiper .pdp-swiper__variant-card__scent-mood-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
  }

  .pdp-swiper .pdp-swiper__variant-card__scent-mood-icon {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
    flex-shrink: 0;
  }

  .pdp-swiper .pdp-swiper__variant-card__scent-mood-name {
    font-size: 0.8125rem;
    line-height: 1.25;
    color: rgba(var(--colors-text), 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 9rem;
  }

  .pdp-swiper .pdp-swiper__variant-card__swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
  }

  /* 20% smaller than theme defaults in this section only */
  .pdp-swiper .pdp-swiper__variant-card__swatches .swatch-small {
    width: 0.8rem;
    height: 0.8rem;
  }

  .pdp-swiper .pdp-swiper__variant-card__swatches .swatch-medium {
    width: 1.6rem;
    height: 1.6rem;
  }

  .pdp-swiper .pdp-swiper__variant-card__swatches .swatch-large {
    width: 30.4px;
    height: 30.4px;
  }

  /* Mirrors `.input-radio:checked + .color-watches` in theme.css (no background reset — swatches use inline `background`). */
  .pdp-swiper .color-watches.pdp-swiper__swatch--selected {
    position: relative;
    border-color: rgb(var(--background-color), 1);
    --tw-shadow: 0 0 0 2px rgba(var(--colors-heading));
    --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
    box-shadow:
      var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
      var(--tw-shadow);
    transition-duration: 100ms;
  }

  .pdp-swiper .pdp-swiper__variant-card__swatches .color-watches {
    cursor: pointer;
  }

  .pdp-swiper .pdp-swiper__variant-card__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
    text-align: right;
    min-width: 7rem;
    min-height: 124px;
  }

  .pdp-swiper .pdp-swiper__variant-card__right-top {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
  }

  .pdp-swiper .pdp-swiper__review-addon-ship-label {
    align-self: flex-end;
    margin-top: 0.35rem;
    padding: 0.25rem 0.5rem;
    background: #d4c1aa;
    color: rgba(var(--colors-text));
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .pdp-swiper .pdp-swiper__variant-card__prices {
    width: 100%;
  }

  .pdp-swiper .pdp-swiper__variant-card__learn {
    margin-top: 0;
    align-self: flex-end;
  }

  .pdp-swiper .pdp-swiper__see-all-fragrances-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 0.75rem;
    padding-top: 0.25rem;
    box-sizing: border-box;
  }

  /* Same as Learn More (link text-sm underline) at ~2× type size */
  .pdp-swiper .pdp-swiper__see-all-fragrances {
    font-size: 1.3rem;
    color: rgba(var(--colors-heading));
    line-height: 1.25;
    text-align: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
  }

  .pdp-swiper .pdp-swiper__variant-card--review {
    cursor: default;
  }

  .pdp-swiper .pdp-swiper__variants-row--review {
    gap: 0.75rem;
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
    overscroll-behavior: auto;
  }

  .pdp-swiper .pdp-swiper__due-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    width: 100%;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
  }

  .pdp-swiper .pdp-swiper__due-label {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(var(--colors-heading));
  }

  .pdp-swiper .pdp-swiper__due-prices {
    text-align: right;
    margin-left: auto;
  }

  .pdp-swiper .pdp-swiper__purchase-details {
    width: 100%;
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(var(--colors-text), 0.9);
    margin-bottom: 2rem;
  }

  .pdp-swiper .pdp-swiper__purchase-details.rte :first-child {
    margin-top: 0;
  }

  .pdp-swiper .pdp-swiper__purchase-details.rte :last-child {
    margin-bottom: 0;
  }

  .pdp-swiper [x-cloak] {
    display: none !important;
  }

  .pdp-swiper .pdp-swiper__terms-row {
    width: 100%;
    margin: 1rem 0;
    display: flex;
    justify-content: center;
  }

  .pdp-swiper .pdp-swiper__terms-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: rgba(var(--colors-text), 0.95);
    cursor: pointer;
  }

  .pdp-swiper .pdp-swiper__terms-checkbox {
    margin-top: 0.15rem;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    accent-color: rgba(var(--colors-button), 1);
  }

  .pdp-swiper .pdp-swiper__terms-text {
    display: inline;
  }

  .pdp-swiper .pdp-swiper__terms-link {
    display: inline;
    margin-left: 0.2rem;
    color: inherit;
  }

  /* Teleported to body (see x-teleport) — not nested under .pdp-swiper, so no ancestor selector. */
  .pdp-swiper__terms-modal {
    position: fixed;
    inset: 0;
    z-index: 100100;
    box-sizing: border-box;
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pdp-swiper__terms-modal[x-cloak] {
    display: none !important;
  }

  .pdp-swiper__terms-modal-card {
    position: relative;
    box-sizing: border-box;
    width: min(44rem, 100%);
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    background: #F5F0EB;
    border-radius: 8px;
    padding: 1.5rem 1.5rem 1.75rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  }

  .pdp-swiper__terms-close {
    position: absolute;
    right: 0.75rem;
    top: 0.6rem;
    border: 0;
    background: transparent;
    color: #000;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 400;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
  }

  .pdp-swiper__terms-close:hover,
  .pdp-swiper__terms-close:focus-visible {
    color: #000;
  }

  .pdp-swiper__terms-title {
    margin: 0 1.75rem 0.9rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(var(--colors-heading));
  }

  .pdp-swiper__terms-body {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(var(--colors-text), 0.92);
  }

  .pdp-swiper__terms-body.rte :first-child {
    margin-top: 0;
  }

  .pdp-swiper__terms-body.rte :last-child {
    margin-bottom: 0;
  }

  .pdp-swiper__all-scents-modal {
    position: fixed;
    inset: 0;
    z-index: 100110;
    background: rgba(0, 0, 0, 0.45);
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
  }

  .pdp-swiper__all-scents-modal[x-cloak] {
    display: none !important;
  }

  .pdp-swiper__all-scents-shell {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(var(--colors-background), 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .pdp-swiper__all-scents-topbar {
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.5rem 1rem 0;
  }

  .pdp-swiper__all-scents-close {
    border: 0;
    background: transparent;
    color: #000;
    cursor: pointer;
    font-size: 1.75rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
  }

  .pdp-swiper__all-scents-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 2rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }

  .pdp-swiper__all-scents-filters-trigger {
    display: none;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 999px;
    background: rgba(var(--colors-background), 1);
    color: rgba(var(--colors-heading));
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
  }

  .pdp-swiper__all-scents-title {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 600;
    color: rgba(var(--colors-heading));
  }

  .pdp-swiper__all-scents-search-wrap {
    width: min(26rem, 50%);
    min-width: 14rem;
  }

  .pdp-swiper__all-scents-search {
    width: 100%;
    height: 2.5rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.22);
    padding: 0 0.9rem;
    font-size: 0.95rem;
    background: #fff;
  }

  .pdp-swiper__all-scents-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
    overflow: hidden;
  }

  .pdp-swiper__all-scents-filters {
    flex: 0 0 20%;
    max-width: 20%;
    min-width: 15rem;
    border-right: 1px solid rgba(0, 0, 0, 0.12);
    padding: 1rem 1rem 1.25rem 1.25rem;
    overflow-y: auto;
  }

  .pdp-swiper__all-scents-filters-backdrop {
    display: none;
  }

  .pdp-swiper__filter-group + .pdp-swiper__filter-group {
    margin-top: 0.85rem;
  }

  .pdp-swiper__filter-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0;
    background: transparent;
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(var(--colors-heading));
    padding: 0.2rem 0;
    cursor: pointer;
  }

  .pdp-swiper__filter-options {
    margin-top: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .pdp-swiper__filter-option {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    color: rgba(var(--colors-text), 0.95);
    cursor: pointer;
  }

  .pdp-swiper__filter-option input[type='checkbox'] {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: rgba(var(--colors-button), 1);
  }

  .pdp-swiper__filter-placeholder {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(var(--colors-text), 0.72);
  }

  .pdp-swiper__all-scents-grid-wrap {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1rem 1.25rem 1.25rem;
    overflow-y: auto;
  }

  .pdp-swiper__all-scents-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
  }

  .pdp-swiper__all-scents-card {
    border: 0;
    border-radius: 0;
    background: rgba(var(--colors-background), 1);
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .pdp-swiper__all-scents-card-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    overflow: hidden;
  }

  .pdp-swiper__all-scents-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .pdp-swiper__all-scents-card-main {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 0;
    align-items: center;
    text-align: center;
  }

  .pdp-swiper__all-scents-card-title {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.3;
    font-weight: 600;
    color: rgba(var(--colors-heading));
    text-align: center;
  }

  .pdp-swiper__all-scents-card-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    flex-wrap: wrap;
  }

  .pdp-swiper__all-scents-price-block {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    align-items: center;
    text-align: center;
    flex: 1 1 auto;
  }

  .pdp-swiper__all-scents-card-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0.15rem;
  }

  .pdp-swiper__all-scents-select-btn {
    padding: 0.7rem 1.15rem;
  }

  .pdp-swiper__all-scents-modal .pdp-swiper__variant-compare-at s {
    color: rgba(var(--colors-price-sale), 0.58);
  }

  .pdp-swiper__all-scents-modal .pdp-swiper__variant-current-price {
    color: rgba(var(--colors-price));
    font-weight: 600;
    line-height: 1.2;
  }

  .pdp-swiper__all-scents-modal .pdp-swiper__variant-single-price span {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(var(--colors-price));
  }

  /* Modal is teleported outside `.pdp-swiper`; restyle scent row pieces locally. */
  .pdp-swiper__all-scents-modal .pdp-swiper__variant-card__scent-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
    width: 100%;
  }

  .pdp-swiper__all-scents-modal .pdp-swiper__variant-card__scent-profile,
  .pdp-swiper__all-scents-modal .pdp-swiper__variant-card__scent-moods {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
  }

  .pdp-swiper__all-scents-modal .pdp-swiper__variant-card__scent-profile-item,
  .pdp-swiper__all-scents-modal .pdp-swiper__variant-card__scent-mood-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }

  .pdp-swiper__all-scents-modal .pdp-swiper__variant-card__scent-dot {
    width: 0.8125rem;
    height: 0.8125rem;
    border-radius: 9999px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    box-sizing: border-box;
    background-color: transparent;
    flex-shrink: 0;
  }

  .pdp-swiper__all-scents-modal .pdp-swiper__variant-card__scent-profile-name,
  .pdp-swiper__all-scents-modal .pdp-swiper__variant-card__scent-mood-name {
    font-size: 0.8125rem;
    line-height: 1.25;
    color: rgba(var(--colors-text), 0.86);
  }

  .pdp-swiper__all-scents-modal .pdp-swiper__variant-card__scent-mood-icon {
    width: 1.1rem;
    height: 1.1rem;
    object-fit: contain;
    flex-shrink: 0;
  }

  .pdp-swiper__filter-option .pdp-swiper__variant-card__scent-dot {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 9999px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    box-sizing: border-box;
    background-color: transparent;
    flex-shrink: 0;
  }

  .pdp-swiper__filter-option .pdp-swiper__variant-card__scent-mood-icon {
    width: 1.2rem;
    height: 1.2rem;
    object-fit: contain;
    flex-shrink: 0;
  }

  @media screen and (max-width: 1280px) {
    .pdp-swiper__all-scents-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media screen and (max-width: 989px) {
    .pdp-swiper {
      padding-left: 1.125rem;
      padding-right: 1.125rem;
    }
    .pdp-swiper__all-scents-toolbar {
      padding: 0.5rem 1rem 0.9rem;
      align-items: stretch;
      flex-direction: column;
      gap: 0.5rem;
    }

    .pdp-swiper__all-scents-search-wrap {
      width: 100%;
      min-width: 0;
    }

    .pdp-swiper__all-scents-content {
      position: relative;
    }

    .pdp-swiper__all-scents-filters {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: min(84vw, 22rem);
      max-width: none;
      min-width: 0;
      border-right: 1px solid rgba(0, 0, 0, 0.12);
      border-bottom: 0;
      padding: 1rem;
      background: rgba(var(--colors-background), 1);
      z-index: 100120;
      transform: translateX(-105%);
      transition: transform 0.2s ease;
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
    }

    .pdp-swiper__all-scents-filters.is-open {
      transform: translateX(0);
    }

    .pdp-swiper__all-scents-filters-backdrop {
      position: fixed;
      inset: 0;
      display: block;
      background: rgba(0, 0, 0, 0.35);
      z-index: 100110;
    }

    .pdp-swiper__all-scents-grid-wrap {
      padding: 1rem;
    }

    .pdp-swiper__all-scents-filters-trigger {
      display: inline-flex;
      margin-bottom: 0.75rem;
      width: fit-content;
    }

    .pdp-swiper__all-scents-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Mobile: hide hero media column; variant card = [image | details column] with details = body then prices stacked */
  @media screen and (max-width: 989px) {
    .pdp-swiper {
      height: auto;
      max-height: none;
    }
    .pdp-swiper .pdp-swiper__root {
      height: auto;
      max-height: none;
    }
    .pdp-swiper .pdp-swiper__media-col {
      display: none;
    }

    .pdp-swiper .pdp-swiper__aside {
      width: 100%;
      max-height: none;
      overflow: visible;
      flex: 1 1 auto;
      gap: 0.75rem;
      padding-left: 0.625rem;
      padding-right: 0.625rem;
      padding-bottom: calc(env(safe-area-inset-bottom) + 2.5rem);
    }

    .pdp-swiper .pdp-swiper__next-row {
      display: none !important;
    }

    .pdp-swiper .pdp-swiper__mobile-fixed-cta {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      display: block;
      width: 100%;
      box-sizing: border-box;
      padding: 0.75rem 1rem max(env(safe-area-inset-bottom), 0.75rem);
      background: rgba(var(--colors-background), 0.96);
      backdrop-filter: blur(4px);
      z-index: 100001;
      transform: translateZ(0);
    }

    .pdp-swiper .pdp-swiper__mobile-fixed-next,
    .pdp-swiper .pdp-swiper__mobile-fixed-atc,
    .pdp-swiper .pdp-swiper__mobile-fixed-terms {
      display: none;
    }

    .pdp-swiper[data-active-step="2"] .pdp-swiper__mobile-fixed-terms {
      display: flex;
      margin-bottom: 1rem;
      margin-top: 0.5rem;
      justify-content: center;
    }

    .pdp-swiper[data-active-step="2"] .pdp-swiper__mobile-fixed-atc {
      display: block;
    }

    .pdp-swiper:not([data-active-step="2"]) .pdp-swiper__mobile-fixed-next {
      display: block;
    }

    .pdp-swiper .pdp-swiper__variant-card {
      flex-direction: row;
      align-items: flex-start;
    }

    .pdp-swiper .pdp-swiper__variant-card__media {
      align-self: stretch;
      height: auto;
    }

    .pdp-swiper .pdp-swiper__variant-card__img,
    .pdp-swiper .pdp-swiper__variant-card__img--placeholder {
      height: 100%;
      min-height: 100%;
      object-fit: cover;
    }

    .pdp-swiper .pdp-swiper__variant-card__details {
      flex-direction: column;
      align-items: stretch;
      gap: 0.75rem;
    }

    .pdp-swiper .pdp-swiper__variant-card__right {
      width: 100%;
      min-width: 0;
      min-height: 0;
      align-items: stretch;
      text-align: left;
    }

    .pdp-swiper .pdp-swiper__variant-card__right-top {
      align-items: flex-start;
      width: 100%;
    }

    .pdp-swiper .pdp-swiper__variant-card__prices {
      width: 100%;
      text-align: left;
      display: flex;
      align-items: baseline;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 0.35rem 0.45rem;
    }

    .pdp-swiper .pdp-swiper__variant-card__prices.text-right {
      text-align: left;
    }

    .pdp-swiper .pdp-swiper__variant-card__prices .pdp-swiper__save-label {
      margin-top: 0;
      display: inline-block;
    }

    .pdp-swiper .pdp-swiper__variant-card__right .inline-flex {
      justify-content: flex-start;
    }

    .pdp-swiper .pdp-swiper__variant-card__learn {
      align-self: flex-start;
    }

    .pdp-swiper .pdp-swiper__review-addon-ship-label {
      align-self: flex-start;
    }
  }

  @media screen and (min-width: 990px) {
    /* Fills viewport below header + announcement; offset is --pdp-desktop-offset on the section (default 150px). */
    .pdp-swiper {
      height: calc(100svh - var(--pdp-desktop-offset, 150px));
      max-height: calc(100svh - var(--pdp-desktop-offset, 150px));
    }

    .pdp-swiper .pdp-swiper__root {
      height: 100%;
      max-height: 100%;
    }

    .pdp-swiper .swiper-wrapper,
    .pdp-swiper .pdp-swiper__slide {
      height: 100%;
      max-height: 100%;
    }

    .pdp-swiper .pdp-swiper__media-swiper--fit {
      height: calc(100svh - 150px);
      max-height: calc(100svh - 150px);
      min-height: 0;
    }

    .pdp-swiper .pdp-swiper__split {
      flex-direction: row;
      align-items: stretch;
      height: 100%;
      max-height: 100%;
    }

    .pdp-swiper .pdp-swiper__media-col {
      flex: 1 1 50%;
      width: 50%;
      max-width: 50%;
      height: 100%;
      max-height: 100%;
      min-height: 0;
      align-self: stretch;
      /* display: flex; */
      flex-direction: column;
    }

    .pdp-swiper .pdp-swiper__aside {
      flex: 1 1 50%;
      width: 50%;
      max-width: 50%;
      height: 100%;
      min-height: 0;
      position: relative;
      justify-content: flex-start;
      padding: 2rem;
      padding-bottom: 6.5rem;
      max-height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .pdp-swiper .pdp-swiper__aside::-webkit-scrollbar {
      display: none;
    }

    .pdp-swiper .pdp-swiper__slide--review .pdp-swiper__aside {
      max-height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .pdp-swiper .pdp-swiper__variants-row {
      overflow: visible;
      max-height: none;
      flex: 0 0 auto;
    }

    .pdp-swiper .pdp-swiper__next-row {
      position: fixed;
      right: 0;
      bottom: 0;
      margin-top: 0;
      padding: 0.5rem 1rem;
      background: rgba(var(--colors-background), 1);
      z-index: 5;
      max-width: 50%;
    }

    .pdp-swiper .pdp-swiper__steps {
      font-size: 1rem;
    }
  }

  /* Variant popup overlay */
  .pdp-swiper__popup-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483647;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
  }

  .pdp-swiper__popup {
    position: relative;
    background: #fff;
    border-radius: 0.5rem;
    max-width: 90%;
    width: 100%;
    height: 90vh;
    padding-bottom: 3rem;
    overflow-y: auto;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  }

  .pdp-swiper__popup-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    background: #fff;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  }

  /* Two-column layout */
  .pdp-swiper__popup-layout {
    display: flex;
    flex-direction: column;
  }

  .pdp-swiper__popup-media {
    background: #f5f0eb;
    display: block;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    min-height: 16rem;
  }

  .pdp-swiper__popup-image {
    width: 100%;
    max-width: 320px;
    height: auto;
    object-fit: contain;
  }

  .pdp-swiper__popup-details {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    /* overflow-y: auto; */
  }

  .pdp-swiper__popup-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.2;
  }

  /* Rating */
  .pdp-swiper__popup-rating {
    font-size: 0.85rem;
  }

  /* Review Summary */
  .pdp-swiper__review-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* margin-bottom: 1rem; */
    font-size: 0.9rem;
  }

  .pdp-swiper__stars {
    display: inline-flex;
    align-items: center;
  }

  .pdp-swiper__star {
    width: 1.2rem;
    height: 1.2rem;
    color: #e8e1d9;
    transition: color 0.2s;
  }

  .pdp-swiper__star--filled {
    color: #B19E86;
  }

  .review-count {
    color: #666;
    font-size: 0.85rem;
    font-weight: 500;
  }

  /* Price row */
  .pdp-swiper__popup-price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .pdp-swiper__popup-compare-price {
    text-decoration: line-through;
    opacity: 0.5;
    font-size: 1.2rem;
  }

  .pdp-swiper__popup-current-price {
    font-size: 1.2rem;
    font-weight: 600;
    color: #6B2E16;
  }

  .pdp-swiper__popup-free-badge {
    display: inline-block;
    background: #6B2E16;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2em 0.5em;
    border-radius: 3px;
    text-transform: uppercase;
  }

  .pdp-swiper__popup-save-badge {
    display: inline-block;
    background: #6B2E16;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2em 0.5em;
    border-radius: 3px;
    text-transform: uppercase;
  }

  .pdp-swiper__popup-inspired {
    font-size: 0.9rem;
    font-style: italic;
    color: #666;
    margin: 0.5rem 0;
  }

  .pdp-swiper__popup-inspired-text {
    margin: 0;
  }

  .pdp-swiper__popup-description {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #cdc9c9;
  }

  .pdp-swiper__popup-description-content {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  /* Features */
  .pdp-swiper__popup-features {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    border-bottom: 1px solid #cdc9c9;
    border-top: 1px solid #cdc9c9;
    padding: 0.80rem 0;
  }

  .pdp-swiper__popup-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .pdp-swiper__popup-feature-icon {
    flex-shrink: 0;
    opacity: 0.7;
  }

  .pdp-swiper__popup-feature-text {
    font-size: 0.85rem;
  }

  /* Swatches */
  .pdp-swiper__popup-swatches-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .pdp-swiper__popup-swatches-label {
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0;
  }

  .pdp-swiper__popup-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .pdp-swiper__popup-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid#8e8e8e;
    padding: 0;
    cursor: pointer;
    transition: border-color 150ms ease;
    background-size: cover;
    background-position: center;
  }

  .pdp-swiper__popup-swatch:hover {
    border-color: rgba(0, 0, 0, 0.3);
  }

  .pdp-swiper__popup-swatch--active {
    border-color: #000;
  }

  /* Scent profile and moods row */
  .pdp-swiper__popup-scent-rosw {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
  }

  .pdp-swiper__popup-scent-section {
    display: flex;
    gap: 1rem;
    /* flex: 1; */
  }

  .pdp-swiper__popup-scent-profile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .pdp-swiper__popup-scent-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
  }

  .pdp-swiper__popup-scent-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .pdp-swiper__popup-scent-moods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .pdp-swiper__popup-scent-mood-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
  }

  .pdp-swiper__popup-scent-mood-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  /* How to set it up */
  .pdp-swiper__popup-how-to {
    font-size: 0.85rem;
  }

  .pdp-swiper__popup-how-to #how-to-set-it-up-trigger {
    cursor: pointer;
    text-decoration: underline;
    font-style: italic;
  }

  /* Select device button */
  .pdp-swiper__popup-select-btn {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    font-size: 0.9rem;
  }

  /* Accordion */
  .pdp-swiper__popup-accordion {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
  }

  .pdp-swiper__popup-accordion-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 0;
    background: none;
    color: #000;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
  }

  .pdp-swiper__popup-accordion-icon {
    transition: transform 200ms ease;
  }

  .pdp-swiper__popup-accordion-icon--open {
    transform: rotate(180deg);
  }

  .pdp-swiper__popup-accordion-body {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  .pdp-swiper__popup-accordion-content {
    padding: 0.75rem 0;
    font-size: 0.85rem;
    line-height: 1.6;
  }

  /* Desktop: side-by-side layout */
  @media screen and (min-width: 768px) {
    .pdp-swiper__popup-layout {
      flex-direction: row;
    }

    .pdp-swiper__popup-media {
      flex: 0 0 45%;
      min-height: auto;
      border-radius: 0.5rem 0 0 0.5rem;
    }

    .pdp-swiper__popup-details {
      flex: 1;
      max-height: 100%;
      /* max-height: 90vh; */
    }

    .pdp-swiper__popup-image {
      max-width: 100%;
    }
  }

  /* Popup transitions */
  .pdp-swiper__popup-transition-enter {
    transition: opacity 200ms ease-out;
  }
  .pdp-swiper__popup-transition-enter-start {
    opacity: 0;
  }
  .pdp-swiper__popup-transition-enter-end {
    opacity: 1;
  }
  .pdp-swiper__popup-transition-leave {
    transition: opacity 150ms ease-in;
  }
  .pdp-swiper__popup-transition-leave-start {
    opacity: 1;
  }
  .pdp-swiper__popup-transition-leave-end {
    opacity: 0;
  }

  .pdp-swiper__popup-sections {
    width: 100%;
  }
  .pdp-swiper__popup-sections:empty {
    display: none;
  }

  /* Feature Metadata */
  .pdp-swiper .pdp-swiper__feature-metadata-row {
    width: 100%;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0;
    box-sizing: border-box;
  }

  .pdp-swiper .pdp-swiper__feature-metadata-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0;
  }


  .pdp-swiper :is([class*="why-aroma360"]) {
    overflow-x: scroll;
  }


  .pdp-swiper .pdp-swiper__feature-metadata-section-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 400;
    font-family: "Lato" sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--colors-heading));
  }

  .pdp-swiper .pdp-swiper__feature-metadata-item {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0.5rem 0.75rem;
    width: 100%;
  }

  .pdp-swiper :is([class*="why-aroma360"]) .pdp-swiper__feature-metadata-item {
    display: flex;
    flex-wrap: nowrap;
    /* overflow-x: auto; */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
  }

  .pdp-swiper :is([class*="why-aroma360"]) .pdp-swiper__feature-metadata-item::-webkit-scrollbar {
    display: none;
  }

  .pdp-swiper :is([class*="subscription-perks"]) .pdp-swiper__feature-metadata-item {
    background: #fafafa;
    padding: 1rem;
  }

  .pdp-swiper :is([class*="how-it-works"],[class*="subscription-perks"]) .pdp-swiper__feature-metadata-feature {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }



  .pdp-swiper :is([class*="why-aroma360"]) .pdp-swiper__feature-metadata-feature {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc(60% - 0rem);
    width: calc(60% - 0rem);
    flex-shrink: 0;
    scroll-snap-align: start;
    gap: 0.375rem;
    border: 1px solid #000;
    box-sizing: border-box;
  }

  @media screen and (min-width: 1024px) {
    .pdp-swiper :is([class*="why-aroma360"]) .pdp-swiper__feature-metadata-feature {
      flex: 0 0 calc(50% - 5rem);
      width: calc(50% - 5rem);
      gap: 0.375rem;
    }
  }

  .pdp-swiper :is([class*="why-aroma360"]) .pdp-swiper__feature-metadata-feature .pdp-swiper__feature-metadata-text {
    padding: 0.3rem;
  }

  
  .pdp-swiper :is([class*="how-it-works"]) .pdp-swiper__feature-metadata-figure {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
  }

  .pdp-swiper :is([class*="why-aroma360"]) .pdp-swiper__feature-metadata-figure {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .pdp-swiper :is([class*="subscription-perks"]) .pdp-swiper__feature-metadata-figure {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
  }

  .pdp-swiper .pdp-swiper__feature-metadata-headline {
    display: block;
    margin: 0 0 8px;
    font-weight: 600;
  }

  .pdp-swiper [class*="how-it-works"] .pdp-swiper__feature-metadata-headline {
    display: block;
    margin: 0;
  }
  
  .pdp-swiper :is([class*="why-aroma360"]) .pdp-swiper__feature-metadata-headline  {
    text-transform: uppercase;
    font-size: 0.9rem;
  }

  .pdp-swiper .pdp-swiper__feature-metadata-desc {
    display: block;
    margin: 0;
  }

  .pdp-swiper .pdp-swiper__feature-metadata-divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin: 0;
    width: 100%;
  }
/* END_SECTION:pdp-swiper */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:product-block-how-it-works (INDEX:401) */
.product-block-hiw {
    width: 100%;
    padding: 1em 0;
    border-top: 1px solid #e8e1d9;
    font-family: 'Lato', sans-serif;
  }

  .product-block-hiw__heading {
    margin: 0 0 1.25rem;
    font-size: 1.375rem;
    font-weight: 300;
    color: #45392b;
  }

  .product-block-hiw__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
  }

  .product-block-hiw__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  .product-block-hiw__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e8e1d9;
    background: #F5F0EB;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-block-hiw__icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  .product-block-hiw__icon--step {
    font-size: 0.875rem;
    font-weight: 700;
    color: #45392b;
  }

  .product-block-hiw__text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.25rem;
  }

  .product-block-hiw__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #45392b;
    line-height: 1.3;
  }

  .product-block-hiw__desc {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #766660;
  }
/* END_SNIPPET:product-block-how-it-works */

/* START_SNIPPET:product-block-single-card (INDEX:402) */
.product-block-single-card {
    width: 100%;
    border: 1px solid #e8e1d9;
    border-radius: 6px;
    padding: 1rem;
    font-family: 'Lato', sans-serif;
    background: #fff;
    box-sizing: border-box;
    padding-bottom: 2em;
  }

  .product-block-single-card__inner {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 14px;
    align-items: start;
  }

  .product-block-single-card__media {
    width: 72px;
    height: 72px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: #F5F0EB;
  }

  .product-block-single-card__img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    display: block;
  }

  .product-block-single-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }

  .product-block-single-card__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #45392b;
    line-height: 1.3;
  }

  .product-block-single-card__inspired,
  .product-block-single-card__notes {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #766660;
  }

  .product-block-single-card__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .product-block-single-card__prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
  }

  .product-block-single-card__compare {
    font-size: 0.8125rem;
    color: #888078;
    text-decoration: line-through;
  }

  .product-block-single-card__price {
    font-size: 0.875rem;
    font-weight: 700;
    color: #B85C38;
  }

  .product-block-single-card__badge {
    display: inline-block;
    background: #45392b;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 2px 8px;
    border-radius: 3px;
  }

  @media screen and (max-width: 767px) {
    .product-block-single-card__inner {
      grid-template-columns: 44px 1fr auto;
      gap: 0.625rem;
    }

    .product-block-single-card__media {
      width: 44px;
      height: 44px;
    }

    .product-block-single-card__img {
      width: 44px;
      height: 44px;
    }

    .product-block-single-card__title {
      font-size: 0.8125rem;
    }

    .product-block-single-card__inspired,
    .product-block-single-card__notes {
      font-size: 0.6875rem;
    }

    .product-block-single-card__price {
      font-size: 0.8125rem;
    }

    .product-block-single-card__compare {
      font-size: 0.75rem;
    }
  }
/* END_SNIPPET:product-block-single-card */

/* START_SNIPPET:product-block-sub-atc (INDEX:403) */
.product-block-sub-atc {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 1.25rem;
    font-family: 'Lato', sans-serif;
    padding-bottom: 1em;
  }

  .product-block-sub-atc__terms-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #45392b;
  }

  .product-block-sub-atc__terms-checkbox {
    margin-top: 0.1rem;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    accent-color: #45392b;
    cursor: pointer;
  }

  .product-block-sub-atc__terms-text {
    display: inline;
  }

  .product-block-sub-atc__terms-link {
    margin-left: 0.2rem;
    color: inherit;
    text-decoration: underline;
  }

  .product-block-sub-atc__action-row {
    padding-top: 8px;
    display: flex;
    align-items: stretch;
    gap: 0.625rem;
  }

  .product-block-sub-atc__btn {
    flex: 1 1 auto;
    height: 56px;
    background: #45392b;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: none;
    border-radius: 80px;
    cursor: pointer;
    transition: opacity 0.2s;
  }

  .product-block-sub-atc__btn:hover:not(:disabled) {
    opacity: 0.88;
  }

  .product-block-sub-atc__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .product-block-sub-atc__quantity-wrap {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    border: 1px solid #e8e1d9;
    border-radius: 80px;
    overflow: hidden;
  }

  .product-block-sub-atc__qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #45392b;
    flex-shrink: 0;
  }

  .product-block-sub-atc__qty-btn:hover {
    background: rgba(69, 57, 43, 0.06);
  }

  .product-block-sub-atc__qty-input {
    width: 2.5rem;
    border: none;
    border-left: 1px solid #e8e1d9;
    border-right: 1px solid #e8e1d9;
    text-align: center;
    font-size: 0.9375rem;
    font-family: inherit;
    color: #45392b;
    background: transparent;
    -moz-appearance: textfield;
  }

  .product-block-sub-atc__qty-input::-webkit-inner-spin-button,
  .product-block-sub-atc__qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }
/* END_SNIPPET:product-block-sub-atc */

/* START_SNIPPET:product-block-subscription-perks (INDEX:404) */
.product-block-perks {
    width: 100%;
    padding: 1em 0;
    border-top: 1px solid #e8e1d9;
    font-family: 'Lato', sans-serif;
  }

  .product-block-perks__heading {
    margin: 0 0 1.25rem;
    font-size: 1.375rem;
    font-weight: 300;
    color: #45392b;
  }

  .product-block-perks__list {
    list-style: none;
    margin: 0;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #F5F0EB;
    border-radius: 6px;
  }

  .product-block-perks__item {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .product-block-perks__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-block-perks__icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  .product-block-perks__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }

  .product-block-perks__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #45392b;
    line-height: 1.3;
  }

  .product-block-perks__desc {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #766660;
  }
/* END_SNIPPET:product-block-subscription-perks */

/* START_SNIPPET:product-block-why-aroma (INDEX:405) */
.product-block-aroma {
    width: 100%;
    padding: 1em 0;
    border-top: 1px solid #e8e1d9;
    font-family: 'Lato', sans-serif;
  }

  .product-block-aroma__heading {
    margin: 0 0 1.25rem;
    font-size: 1.375rem;
    font-weight: 300;
    color: #45392b;
  }

  .product-block-aroma__track-wrap {
    overflow-x: visible;
  }

  .product-block-aroma__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .product-block-aroma__card {
    border: 1px solid #e8e1d9;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-sizing: border-box;
    background: #fff;
  }

  @media screen and (min-width: 768px) {
    .product-block-aroma__track-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      margin-left: calc(-1 * var(--container-gutter, 1.25rem));
      margin-right: calc(-1 * var(--container-gutter, 1.25rem));
      padding-left: var(--container-gutter, 1.25rem);
      padding-right: var(--container-gutter, 1.25rem);
    }

    .product-block-aroma__track-wrap::-webkit-scrollbar {
      display: none;
    }

    .product-block-aroma__track {
      flex-direction: row;
      flex-wrap: nowrap;
      padding: 0 var(--container-gutter, 1.25rem) 0.5rem 0;
      scroll-snap-type: x mandatory;
    }

    .product-block-aroma__card {
      flex: 0 0 calc(45% - 0.75rem);
      scroll-snap-align: start;
    }
  }

  @media screen and (min-width: 1000px) {
    .product-block-aroma__card {
      flex: 0 0 calc(38% - 0.75rem);
    }
  }

  .product-block-aroma__media {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    background: #c8b9a8;
  }

  .product-block-aroma__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .product-block-aroma__text {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .product-block-aroma__title {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #45392b;
  }

  .product-block-aroma__desc {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #45392b;
  }
/* END_SNIPPET:product-block-why-aroma */