/* ─── Product page (PDP) styles — ported from demo-product-page-v2.html.
   Loaded only on single product pages. Nav/footer live in layout.css. */

    /* ─── PRODUCT MAIN ───────────────────────────────────── */
    /* The section is as tall as the purchase column; the gallery pins while
       the purchase panel scrolls with the page, releasing at its bottom. */
    #pdp-main {
      display: grid;
      grid-template-columns: 65fr 35fr;
      min-height: 100vh;
      position: relative;
      align-items: start;
    }

    #pdp-gallery {
      position: sticky;
      top: calc(var(--bar-h) + var(--nav-h));
      height: calc(100vh - var(--bar-h) - var(--nav-h));
      overflow: hidden;
      background: var(--off);
    }

    /* ─── GALLERY UI ─────────────────────────────── */
    #pdp-gallery-main {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Photo badges — trust seals etc, ACF-editable overlays instead of
       being composited into the photo file itself (see photo_badges). */
    .pdp-photo-badge {
      position: absolute;
      z-index: 4;
      width: 84px; height: 84px;
      display: block;
    }
    .pdp-photo-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .pdp-photo-badge.pos-top-left { top: 20px; left: 20px; }
    .pdp-photo-badge.pos-top-right { top: 20px; right: 20px; }
    .pdp-photo-badge.pos-bottom-left { bottom: 20px; left: 20px; }
    .pdp-photo-badge.pos-bottom-right { bottom: 20px; right: 20px; }

    #pdp-gallery-active-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 48px 56px 48px 96px;
      transition: opacity 0.2s ease;
    }

    #pdp-gallery-thumbs {
      position: absolute;
      top: 50%;
      left: 16px;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 8px;
      z-index: 10;
      max-height: calc(100% - 80px);
      overflow-y: auto;
      scrollbar-width: none;
      padding: 4px;
    }
    #pdp-gallery-thumbs::-webkit-scrollbar { display: none; }

    .pdp-thumb {
      width: 60px;
      height: 60px;
      border-radius: var(--radius-sm);
      border: 2px solid transparent;
      overflow: hidden;
      cursor: pointer;
      background: var(--white);
      box-shadow: 0 1px 6px rgba(0,0,0,0.10);
      transition: border-color 0.15s, opacity 0.15s, transform 0.15s;
      opacity: 0.5;
      flex-shrink: 0;
    }
    .pdp-thumb:hover { opacity: 0.85; border-color: var(--steel-xl); transform: scale(1.06); }
    .pdp-thumb.active { border-color: var(--black); opacity: 1; }
    .pdp-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

    .pdp-gallery-arrow {
      position: absolute;
      bottom: 24px;
      width: 42px;
      height: 42px;
      background: rgba(255,255,255,0.92);
      border: 1px solid var(--border);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: background 0.2s, border-color 0.2s, transform 0.15s;
      box-shadow: 0 2px 10px rgba(0,0,0,0.10);
    }
    .pdp-gallery-arrow:hover { background: var(--white); border-color: var(--steel-xl); transform: scale(1.06); }
    .pdp-gallery-arrow svg { width: 16px; height: 16px; color: var(--text); }
    #pdp-gallery-prev { right: 76px; }
    #pdp-gallery-next { right: 20px; }

    #pdp-gallery-dots {
      position: absolute;
      bottom: 5px;   /* was 14px — the 24px hit areas below centre on the same line */
      left: 50%;
      transform: translateX(-50%);
      display: none;
      gap: 0;        /* spacing now comes from each 24px hit area */
      z-index: 10;
    }
    /* 24px touch target (WCAG 2.5.8) around the same 6px visual dot. */
    .pdp-gallery-dot {
      position: relative;
      width: 24px; height: 24px;
      background: none;
      border: none; padding: 0; cursor: pointer;
      flex-shrink: 0;
    }
    .pdp-gallery-dot::before {
      content: "";
      position: absolute; top: 50%; left: 50%;
      width: 6px; height: 6px;
      margin: -3px 0 0 -3px;
      border-radius: 50%;
      background: rgba(0,0,0,0.22);
      transition: background 0.2s, transform 0.2s;
    }
    .pdp-gallery-dot.active::before {
      background: var(--black);
      transform: scale(1.4);
    }
    @media (max-width: 900px) {
      #pdp-gallery-dots { display: flex; }
      #pdp-gallery-prev { right: auto; left: 16px; bottom: 10px; }
      #pdp-gallery-next { right: 16px; bottom: 10px; }
    }

    /* ─── SECTION SUB-NAV ────────────────────────── */
    #pdp-section-nav {
      position: fixed;
      top: calc(var(--bar-h) + var(--nav-h));
      left: 0; right: 0;
      z-index: 90;
      height: var(--pdp-subnav-h);
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border-lt);
      box-shadow: 0 2px 16px rgba(0,0,0,0.06);
      transform: translateY(-100%);
      transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
      pointer-events: none;
    }
    #pdp-section-nav.visible {
      transform: translateY(0);
      pointer-events: auto;
    }
    .pdp-sec-nav-inner {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 40px; /* matches .nav-inner so both bars line up */
      height: 100%;
      display: flex;
      align-items: center;
    }
    /* No horizontal scroll here — links that don't fit are dropped by
       pdp.js (measured against this wrapper's real width), not scrolled
       or wrapped. min-width:0 lets it actually shrink below its content
       size instead of forcing .pdp-sec-nav-right off the right edge. */
    .pdp-sec-nav-links {
      display: flex;
      align-items: center;
      min-width: 0;
      overflow: hidden;
      flex: 1 1 auto;
      height: 100%;
    }
    .pdp-sec-nav-link {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: var(--ls-cta);
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
      padding: 0 20px;
      height: 100%;
      display: flex;
      align-items: center;
      border-bottom: 2px solid transparent;
      transition: color 0.2s, border-color 0.2s;
      white-space: nowrap;
    }
    .pdp-sec-nav-link:hover { color: var(--text); }
    .pdp-sec-nav-link.active { color: var(--text); border-bottom-color: var(--black); }

    /* scroll offset for section links when sub-nav is visible */
    #pdp-features, #pdp-video, #pdp-specs, #pdp-scroll-seq,
    #pdp-compare, #pdp-reviews, #pdp-faq {
      scroll-margin-top: calc(var(--bar-h) + var(--nav-h) + var(--pdp-subnav-h) + 4px);
    }

    /* Right panel — flows with the page; the sticky gallery pins beside it
       until this column's bottom passes, then the section scrolls away. */
    #pdp-purchase {
      min-height: calc(100vh - var(--bar-h) - var(--nav-h));
      min-width: 0; /* grid items default to min-width:auto — without this,
        an unscrolled .addon-scroll row (now often 6-8 cards, was 4) forces
        this column past its 35fr share and squeezes the gallery down to a
        sliver instead of actually scrolling within its allotted width. */
      padding: 40px 40px 48px;
      border-left: 1px solid var(--border-lt);
      background: var(--white);
    }

    .pdp-brand-tag {
      font-size: 10px; font-weight: 700;
      letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
      color: var(--steel); margin-bottom: 10px;
    }

    .pdp-preorder-badge {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-body);
      font-size: 11px; font-weight: 700;
      letter-spacing: var(--ls-cta); text-transform: uppercase;
      background: var(--copper); color: var(--white);
      padding: 7px 14px; border-radius: var(--radius-pill);
      margin-bottom: 16px;
    }
    .pdp-preorder-badge span {
      font-weight: 500; text-transform: none; letter-spacing: normal;
      padding-left: 8px; border-left: 1px solid rgba(255,255,255,0.4);
    }

    .pdp-name {
      font-family: var(--font-display);
      font-size: 52px; font-weight: 600;
      letter-spacing: 0.01em; line-height: 0.95;
      color: var(--text); margin-bottom: 8px;
    }

    .pdp-subtitle {
      font-size: 15px; color: var(--muted);
      margin-bottom: 20px;
    }

    .pdp-price-row {
      display: flex; align-items: baseline; gap: 12px;
      margin-bottom: 8px;
    }

    .pdp-price-sale {
      font-size: 34px; font-weight: 800;
      color: var(--text); letter-spacing: -0.01em;
    }
    .pdp-price-sale sup { font-size: 0.55em; font-weight: 600; vertical-align: super; }

    .pdp-price-was {
      font-size: 15px; color: var(--muted);
      text-decoration: line-through;
    }

    .pdp-save-badge {
      display: inline-flex; align-items: center;
      font-size: 11px; font-weight: 700;
      letter-spacing: var(--ls-label); text-transform: uppercase;
      background: var(--copper); color: var(--white);
      padding: 4px 10px; border-radius: var(--radius-xs);
      margin-bottom: 14px;
    }

    .pdp-rating {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 24px;
    }

    .pdp-stars { color: #f5a623; font-size: 16px; letter-spacing: 1px; }
    .pdp-rating-score { font-size: 13px; font-weight: 700; color: var(--text); }
    .pdp-rating-count { font-size: 13px; color: var(--muted); }
    .pdp-rating-count a { color: var(--steel); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.2s; }
    .pdp-rating-count a:hover { text-decoration-color: var(--steel); }

    .pdp-divider { height: 1px; background: var(--border-lt); margin: 20px 0; }

    .pdp-specs-strip {
      display: flex; align-items: center;
      gap: 0; margin: 0 0 4px;
      border: 1px solid var(--border-lt);
      border-radius: var(--radius-sm); overflow: hidden;
    }

    .pdp-spec-item {
      flex: 1;
      display: flex; flex-direction: column; align-items: center;
      gap: 5px; padding: 12px 8px;
      border-right: 1px solid var(--border-lt);
    }
    .pdp-spec-item:last-child { border-right: none; }

    .pdp-spec-icon { width: 18px; height: 18px; color: var(--steel); }
    .pdp-spec-label { font-size: 10px; font-weight: 600; color: var(--muted); text-align: center; letter-spacing: var(--ls-label); }

    /* ─── ADDON CAROUSEL ─────────────────────────────────── */
    .addon-section-head { margin-bottom: 12px; }
    .addon-section-label {
      font-size: 10px; font-weight: 700;
      letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
      color: var(--muted);
    }

    /* View All Add-Ons + scroll arrows share one line, arrows at bottom right */
    .addon-footer {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    /* Trackpad/touch users can already swipe the strip natively — these
       arrows are for anyone on a plain mouse with no other way to move it. */
    .addon-scroll-nav { display: flex; gap: 6px; flex-shrink: 0; }
    .addon-scroll-arrow {
      width: 26px; height: 26px;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: var(--white);
      color: var(--text);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
    }
    .addon-scroll-arrow:hover { background: var(--black); color: var(--white); border-color: var(--black); }
    .addon-scroll-arrow svg { width: 13px; height: 13px; }

    .addon-pills {
      display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
    }

    .addon-pill {
      font-family: var(--font-body);
      padding: 5px 12px; border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      background: none; color: var(--muted);
      font-size: 12px; font-weight: 500;
      cursor: pointer; transition: all 0.15s;
      white-space: nowrap;
    }
    .addon-pill.active {
      background: var(--black); color: var(--white);
      border-color: var(--black);
    }
    .addon-pill:not(.active):hover {
      border-color: var(--steel-xl); color: var(--text);
    }

    .addon-scroll {
      display: flex; gap: 10px;
      overflow-x: auto; padding-bottom: 6px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .addon-scroll::-webkit-scrollbar { display: none; }

    .addon-card-sm {
      flex-shrink: 0; width: 130px;
      background: var(--off);
      border: 1px solid var(--border-lt);
      border-radius: var(--radius-md);
      padding: 10px;
      cursor: pointer;
      transition: border-color 0.15s;
      position: relative;
      text-align: left;
    }
    .addon-card-sm:hover { border-color: var(--steel-xl); }
    .addon-card-sm.selected { border-color: var(--copper); }
    .addon-card-sm.selected::after {
      content: '✓';
      position: absolute; top: 7px; right: 7px;
      background: var(--copper); color: #fff;
      width: 17px; height: 17px;
      border-radius: 50%; font-size: 10px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      line-height: 17px; text-align: center;
    }

    .addon-img-sm {
      aspect-ratio: 1;
      background: var(--light);
      border-radius: var(--radius-sm);
      margin-bottom: 8px;
      overflow: hidden;
    }
    .addon-img-sm img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }

    .addon-name-sm {
      font-size: 11px; font-weight: 600;
      color: var(--text); line-height: 1.3;
      margin-bottom: 3px;
    }
    .addon-price-sm {
      font-size: 12px; font-weight: 700;
      color: var(--copper);
    }

    /* Quantity stepper — only rendered for add-ons flagged "sold by
       quantity" (e.g. flooring tiles); hidden until the card is selected. */
    .addon-qty {
      display: none;
      align-items: center; justify-content: space-between;
      margin-top: 8px; padding-top: 8px;
      border-top: 1px solid var(--border-lt);
    }
    .addon-card-sm.selected .addon-qty,
    .addon-card-lg.selected .addon-qty { display: flex; }
    .addon-qty-btn {
      width: 20px; height: 20px;
      display: flex; align-items: center; justify-content: center;
      border: 1px solid var(--border); border-radius: 50%;
      font-size: 13px; font-weight: 700; color: var(--text);
      cursor: pointer; transition: all 0.15s; user-select: none;
    }
    .addon-qty-btn:hover { background: var(--black); color: var(--white); border-color: var(--black); }
    .addon-qty-val { font-size: 12px; font-weight: 700; color: var(--text); min-width: 16px; text-align: center; }

    .addon-viewall-btn {
      background: none; border: none;
      color: var(--copper);
      font-family: var(--font-body);
      font-size: 12px; font-weight: 700;
      cursor: pointer; padding: 10px 0 0;
      letter-spacing: var(--ls-label);
      display: block;
    }
    .addon-viewall-btn:hover { text-decoration: underline; }

    /* ─── CHECKOUT BUTTON ────────────────────────────────── */
    .pdp-btn-checkout {
      display: flex; align-items: center; justify-content: center;
      width: 100%; height: 52px;
      background: var(--black); color: var(--white);
      font-family: var(--font-body);
      font-size: 13px; font-weight: 700;
      letter-spacing: var(--ls-cta); text-transform: uppercase;
      border: none; border-radius: var(--radius-sm);
      cursor: pointer; transition: background 0.2s;
      margin-bottom: 10px;
    }
    .pdp-btn-checkout:hover { background: var(--steel-dk); }
    .pdp-btn-checkout:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }
    .pdp-btn-checkout:disabled:hover { background: var(--border); }

    /* ─── VARIABLE PRODUCT SELECTOR ─────────────── */
    .pdp-variations { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
    .pdp-variation-pill {
      font-family: var(--font-body);
      font-size: 12px; font-weight: 700;
      letter-spacing: var(--ls-label);
      color: var(--text);
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 16px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .pdp-variation-pill:hover { border-color: var(--steel-lt); }
    .pdp-variation-pill.selected { border-color: var(--steel-dk); background: var(--off); color: var(--steel-dk); }
    .pdp-variation-hint { font-size: 12px; color: var(--muted); margin: 0 0 14px; }
    .pdp-variation-hint.is-selected { display: none; }

    .pdp-assurance {
      font-size: 12px; color: var(--muted);
      text-align: center; margin-top: 4px; line-height: 1.7;
    }

    .pdp-trust {
      display: grid; grid-template-columns: repeat(2, 1fr);
      gap: 8px; margin-top: 16px;
    }

    .pdp-trust-item {
      display: flex; align-items: center;
      gap: 10px; padding: 12px;
      background: var(--off); border-radius: var(--radius-sm);
    }

    .pdp-trust-icon { width: 20px; height: 20px; color: var(--steel); flex-shrink: 0; }
    .pdp-trust-label { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: var(--ls-label); line-height: 1.35; }

    /* ─── SPEC TAGS (beside rating) ─────────────── */
    .pdp-spec-tags {
      display: flex; gap: 6px; flex-wrap: wrap;
      margin-top: 12px; margin-bottom: 24px;
    }
    .pdp-spec-tag {
      font-size: 10px; font-weight: 700;
      letter-spacing: var(--ls-cta); text-transform: uppercase;
      color: var(--steel);
      background: var(--off);
      border: 1px solid var(--border-lt);
      padding: 5px 10px; border-radius: var(--radius-xs);
    }

    /* ─── BNPL SECTION ───────────────────────────── */
    .pdp-bnpl { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
    .pdp-bnpl-item {
      display: flex; align-items: center; gap: 10px;
      font-size: 12px; color: var(--muted); line-height: 1.5;
    }
    .pdp-bnpl-badge {
      font-size: 10px; font-weight: 900;
      letter-spacing: -0.01em;
      padding: 4px 9px; border-radius: var(--radius-xs);
      flex-shrink: 0; white-space: nowrap;
    }
    .pdp-bnpl-ap  { background: #b2fce4; color: #1a1a1a; }
    .pdp-bnpl-zip { background: #aa8fff; color: #fff; }
    .pdp-bnpl-item strong { color: var(--text); font-weight: 600; }
    .pdp-bnpl-fine { font-size: 10px; color: var(--muted); margin-top: 6px; line-height: 1.6; }

    /* ─── PAYMENT ICONS ──────────────────────────── */
    .pdp-payment-row {
      display: flex; align-items: center; gap: 10px;
      flex-wrap: wrap; margin-top: 14px;
    }
    .pdp-payment-label {
      font-size: 10px; font-weight: 600;
      letter-spacing: var(--ls-cta); text-transform: uppercase;
      color: var(--muted); flex-shrink: 0;
    }
    .pdp-payment-cards { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
    .pay-card {
      height: 22px; padding: 0 6px;
      border: 1px solid var(--border-lt);
      border-radius: var(--radius-xs); background: var(--white);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.07);
    }
    .pay-card-dark { background: #1a1a1a; border-color: #1a1a1a; }
    .pay-card-zip  { background: #aa8fff; border-color: #aa8fff; }
    .pay-card-ap   { background: #b2fce4; border-color: #b2fce4; }

    /* ─── SECTION NAV RIGHT SIDE ─────────────────── */
    .pdp-sec-nav-right {
      margin-left: auto; flex-shrink: 0;
      display: flex; align-items: center; gap: 14px;
      padding-left: 20px;
      border-left: 1px solid var(--border-lt);
    }
    .pdp-sec-nav-price {
      font-size: 17px; font-weight: 800;
      color: var(--text); letter-spacing: -0.01em; white-space: nowrap;
    }
    .pdp-sec-nav-price sup { font-size: 0.58em; font-weight: 700; vertical-align: super; }
    .pdp-sec-nav-price s { font-size: 12px; font-weight: 400; color: var(--muted); text-decoration: line-through; margin-left: 4px; }
    .pdp-sec-nav-cta {
      font-family: var(--font-body);
      font-size: 11px; font-weight: 700;
      letter-spacing: var(--ls-cta); text-transform: uppercase;
      background: var(--black); color: var(--white);
      border: none; border-radius: var(--radius-xs);
      padding: 8px 18px; cursor: pointer;
      transition: background 0.2s; white-space: nowrap;
    }
    .pdp-sec-nav-cta:hover { background: var(--steel-dk); }

    /* ─── SECTION SHARED ─────────────────────────────────── */
    .section-eyebrow {
      font-family: var(--font-body);
      font-size: 11px; font-weight: 700;
      letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
      color: var(--steel); margin-bottom: 12px;
    }

    .section-title {
      font-family: var(--font-display);
      font-size: clamp(26px, 3.4vw, 46px);
      font-weight: 600; letter-spacing: 0.01em; line-height: 1.08;
      color: var(--text); margin-bottom: 0;
    }

    /* ─── FEATURE VIDEO CAROUSEL ─────────────────────────── */
    #pdp-features {
      padding: 88px 0;
      background: var(--off);
      border-top: 1px solid var(--border-lt);
    }

    .features-header {
      padding: 0 80px;
      margin-bottom: 40px;
      max-width: var(--max);
      margin-left: auto;
      margin-right: auto;
    }

    .feature-track {
      display: flex;
      gap: 16px;
      padding: 8px 80px 24px;
      overflow-x: auto;
      scrollbar-width: none;
      /* .features-header above is capped at --max and centred — this
         wasn't, so past 1440px-wide screens the tiles kept hugging the
         true left edge of the viewport while the heading above them
         stayed centred, and the whole row read as flush-left with a
         growing gap of dead space on the right the wider the screen got. */
      max-width: var(--max);
      margin-left: auto;
      margin-right: auto;
    }
    .feature-track::-webkit-scrollbar { display: none; }

    .feature-tile {
      flex: 0 0 300px;
      border-radius: var(--radius-md);
      overflow: hidden;
      background: var(--black);
      position: relative;
      aspect-ratio: 9/14;
      cursor: pointer;
      will-change: transform;
    }

    .feature-video-thumb {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .feature-tile:hover .feature-video-thumb { transform: scale(1.04); }

    .feature-play {
      position: absolute;
      bottom: 56px; right: 16px;
      width: 36px; height: 36px;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 50%;
      backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center;
      transition: all 0.2s;
      z-index: 2;
    }
    .feature-tile:hover .feature-play { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.5); }
    .feature-play svg { width: 12px; height: 12px; fill: rgba(255,255,255,0.75); margin-left: 2px; }

    .feature-tile-overlay {
      position: absolute; inset: 0;
      /* Stop pushed up from 55% to 62% — the snippet + Read more line
         below the tile name need more of a dark backing than just the
         product/name pair did. */
      background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.04) 62%);
      pointer-events: none;
    }

    .feature-tile-info {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 22px 20px;
      z-index: 2;
    }

    .feature-tile-product {
      font-family: var(--font-body);
      font-size: 10px; font-weight: 700;
      letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
      color: var(--steel-lt); margin-bottom: 5px;
    }
    .feature-tile-name {
      font-family: var(--font-body);
      font-size: 17px; font-weight: 700;
      color: var(--white); line-height: 1.2;
    }

    /* Short taste of the detail copy, always visible — the old "Tap to
       explore" pill only appeared on :hover, which never fires on touch,
       so on mobile there was no cue at all that a tile expands into more
       content. A snippet + a permanent "Read more" line works on every
       input type and gives a reason to tap, not just a hint that you can. */
    .feature-tile-snippet {
      font-size: 12.5px; line-height: 1.4;
      color: rgba(255,255,255,0.72);
      margin-top: 6px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .feature-tile-readmore {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 11px; font-weight: 700;
      letter-spacing: var(--ls-cta); text-transform: uppercase;
      color: var(--white);
      margin-top: 10px;
      transition: gap 0.2s;
    }
    .feature-tile-readmore svg { width: 12px; height: 12px; }
    .feature-tile:hover .feature-tile-readmore { gap: 7px; }

    /* ─── FEATURE HERO EXPAND ───────────────────────────── */
    .feature-tile { transition: opacity 0.3s, transform 0.3s; }
    /* Once a tile is open the fixed hero + backdrop cover the whole strip, so
       the tiles have no business being visible. Leaving them even faintly on
       (they bled through the 0.72 backdrop, and briefly stacked above the
       hero mid-morph) read as a tile "stuck over the top". Hide the lot. */
    .feature-track.has-active .feature-tile { opacity: 0; pointer-events: none; }

    /* Backdrop */
    #feat-backdrop {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0);
      -webkit-backdrop-filter: blur(3px) saturate(0.9);
      backdrop-filter: blur(3px) saturate(0.9);
      z-index: 399;
      cursor: pointer;
    }

    /* The expanding hero card */
    #feat-hero {
      display: none;
      position: fixed;
      top: 0; left: 0;
      z-index: 400;
      border-radius: var(--radius-md);
      overflow: hidden;
      background: var(--black);
      box-shadow: 0 32px 100px rgba(0,0,0,0.55);
      will-change: transform;
    }

    /* Media box fills the whole card as it expands, then pdp.js animates its
       width down to the left 54% while the content panel slides into the
       right 46% — the video appears to "draw into" its column. object-fit
       recomposes against the box's real width the whole way, so the subject
       stays centred (an earlier clip-path-only version composed cover against
       the full 100% and cropped the subject into the hidden half). */
    #feat-hero-media {
      position: absolute;
      top: 0; left: 0; bottom: 0;
      width: 100%;
      overflow: hidden;
    }
    #feat-hero-media video,
    #feat-hero-media img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: center;
      display: block;
      will-change: transform;
    }
    /* Static product photos aren't shot/composed for edge-to-edge cover the
       way the feature videos are — cover was cropping them hard (often to
       just a close-up sliver). Show the whole photo on the black backing
       instead. Video keeps cover above. */
    #feat-hero-media img {
      object-fit: contain;
      background: var(--black);
    }
    /* Desktop resting split: media left 54%, content panel right 46%. Mobile
       stacks the content below, so the media keeps the full width. */
    @media (min-width: 901px) {
      #feat-hero-media { width: 54%; }
    }
    #feat-hero-media video[hidden],
    #feat-hero-media img[hidden] { display: none; }
    /* Gradient that emerges as content panel slides in */
    #feat-hero-media::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.6) 100%);
      pointer-events: none;
    }

    /* Right-side content panel */
    #feat-hero-content {
      position: absolute;
      top: 0; right: 0; bottom: 0;
      width: 46%;
      background: var(--steel-dk);
      padding: 52px 44px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow-y: auto;
    }

    #feat-hero-close {
      position: absolute;
      top: 18px; right: 18px;
      width: 40px; height: 40px;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 50%; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.7); z-index: 2;
      transition: background 0.2s;
    }
    #feat-hero-close:hover { background: rgba(255,255,255,0.2); }
    #feat-hero-close svg { width: 14px; height: 14px; }

    .feat-hero-nav {
      position: absolute;
      top: 50%; transform: translateY(-50%);
      width: 44px; height: 44px;
      background: rgba(0,0,0,0.35);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 50%; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.85); z-index: 2;
      backdrop-filter: blur(8px);
      transition: background 0.2s, transform 0.2s;
    }
    .feat-hero-nav:hover { background: rgba(0,0,0,0.6); transform: translateY(-50%) scale(1.08); }
    .feat-hero-nav svg { width: 18px; height: 18px; }
    #feat-hero-prev { left: 16px; }
    #feat-hero-next { right: 16px; }

    .feat-hero-eyebrow {
      font-size: 10px; font-weight: 700;
      letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
      color: var(--copper); margin-bottom: 14px;
    }
    .feat-hero-title {
      font-family: var(--font-display);
      font-size: clamp(20px, 2.2vw, 34px);
      font-weight: 600; letter-spacing: 0.01em; line-height: 1.1;
      color: var(--white); margin-bottom: 18px;
    }
    .feat-hero-desc {
      font-size: 14px; line-height: 1.8;
      color: rgba(255,255,255,0.5);
      margin-bottom: 28px;
    }
    .feat-hero-specs {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 0 20px; margin-bottom: 28px;
      padding-bottom: 28px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .feat-spec-item { padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.07); }
    .feat-spec-label {
      font-size: 9px; font-weight: 700;
      letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
      color: rgba(255,255,255,0.3); margin-bottom: 3px;
    }
    .feat-spec-value { font-size: 13px; font-weight: 600; color: var(--white); }

    .feat-hero-attach-label {
      font-size: 9px; font-weight: 700;
      letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
      color: rgba(255,255,255,0.3); margin-bottom: 10px;
    }
    .feat-hero-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .feat-hero-tag {
      font-size: 11px; font-weight: 600;
      color: rgba(255,255,255,0.65);
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: var(--radius-pill); padding: 5px 12px;
    }

    @media (max-width: 900px) {
      #feat-hero { border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; }
      #feat-hero-content {
        position: static; width: 100%;
        padding: 32px 24px 40px;
        top: auto; right: auto; bottom: auto;
      }
      #feat-hero-media {
        position: relative;
        width: 100%; height: 52vw;
        flex-shrink: 0;
      }
      #feat-hero { display: none; flex-direction: column; overflow-y: auto; }

      /* .feat-hero-nav's top:50% (see base rule) centers on #feat-hero's
         own box — fine on desktop where that box IS the media area, but
         on mobile #feat-hero is the whole scrollable panel (media +
         text), so 50% landed the arrows in the middle of the copy
         instead. Re-anchor to the middle of just the media strip
         (height: 52vw, so half of that) and shrink them a touch so they
         read as photo controls, not a content overlay. */
      .feat-hero-nav { top: 26vw; width: 38px; height: 38px; }
      .feat-hero-nav svg { width: 15px; height: 15px; }
    }

    /* ─── FEATURE LIGHTBOX ───────────────────────────────── */
    #feat-lightbox {
      display: none;
      position: fixed; inset: 0;
      z-index: 500;
      background: rgba(0,0,0,0.92);
      align-items: center;
      justify-content: center;
    }
    #feat-lightbox.open { display: flex; }

    #feat-lb-close {
      position: absolute; top: 20px; right: 24px;
      width: 44px; height: 44px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 50%; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--white); font-size: 18px;
      transition: background 0.2s;
    }
    #feat-lb-close:hover { background: rgba(255,255,255,0.18); }

    #feat-lb-vid {
      max-width: 90vw; max-height: 85vh;
      border-radius: var(--radius-sm);
    }

    /* ─── SPECS ──────────────────────────────────────────── */
    #pdp-specs {
      background: var(--white);
      padding: 88px 80px;
      border-top: 1px solid var(--border-lt);
    }

    .pdp-specs-inner {
      max-width: var(--max); margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1.4fr;
      gap: 80px; align-items: start;
    }

    .pdp-specs-intro .section-title { margin-bottom: 16px; }
    .pdp-specs-intro p { font-size: 15px; color: var(--muted); line-height: 1.75; margin-top: 16px; }

    .pdp-spec-row {
      display: grid; grid-template-columns: 1fr 1.2fr;
      gap: 16px; padding: 16px 0;
      border-bottom: 1px solid var(--border-lt);
    }
    .pdp-spec-row:first-child { border-top: 1px solid var(--border-lt); }

    .pdp-spec-key { font-size: 13px; font-weight: 600; color: var(--muted); }
    .pdp-spec-val { font-size: 13px; font-weight: 500; color: var(--text); }

    /* ─── SCROLL VIDEO ───────────────────────────────────── */
    /* Autoplaying video showcase — scrolls normally (scrub removed). */
    #pdp-scroll-seq { position: relative; background: var(--black); }
    .pdp-seq-stage { position: relative; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
    #pdp-seq-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .pdp-seq-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, transparent 35%, transparent 65%, rgba(0,0,0,0.5) 100%); pointer-events: none; }
    .pdp-seq-content { position: relative; z-index: 2; width: 100%; padding: 0 80px; max-width: var(--max); margin: 0 auto; }
    .pdp-seq-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--steel-lt); margin-bottom: 16px; }
    .pdp-seq-heading { font-family: var(--font-display); font-size: clamp(32px, 5vw, 66px); font-weight: 600; letter-spacing: 0.01em; color: var(--white); line-height: 1.0; max-width: 560px; }
    @media (max-width: 900px) {
      .pdp-seq-content { padding: 0 24px; }
      .pdp-seq-stage { height: 70svh; }
    }

    /* ─── COMPARE ────────────────────────────────────────── */
    #pdp-compare {
      background: var(--off);
      padding: 88px 80px;
    }

    .pdp-compare-inner { max-width: var(--max); margin: 0 auto; overscroll-behavior-x: contain; }
    .pdp-compare-header { text-align: center; margin-bottom: 48px; }
    .pdp-compare-header .section-title { margin-top: 10px; }

    .pdp-compare-table {
      width: 100%;
      /* table-layout:auto (the default) sizes each column to its widest
         cell's content — with a native <select> in the header whose
         rendered width follows whichever product name is currently
         selected, every column ends up a different, content-dependent
         width instead of an even grid. Fixed layout + an explicit first-
         column width makes every column deterministic regardless of what's
         selected or how long any spec value is. */
      table-layout: fixed;
      border-collapse: collapse;
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: 0 0 0 1px var(--border);
    }

    .pdp-compare-table thead th:first-child,
    .pdp-compare-table tbody td:first-child {
      width: 180px;
    }

    .pdp-compare-table thead th {
      padding: 20px 24px;
      font-family: var(--font-body);
      font-size: 13px; font-weight: 700;
      letter-spacing: var(--ls-label); text-transform: uppercase;
      background: var(--white);
      border-bottom: 1px solid var(--border-lt);
      text-align: left;
    }

    .pdp-compare-table thead th:first-child { color: var(--muted); font-size: 11px; }
    .pdp-compare-table thead .col-alfa { background: var(--steel-dk); color: var(--white); }

    .pdp-compare-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.5); }
    .pdp-compare-table tbody tr:nth-child(odd)  { background: var(--white); }
    .pdp-compare-table .col-alfa-cell { background: rgba(50,64,80,0.06); }

    .pdp-compare-table td {
      padding: 16px 24px;
      font-size: 14px;
      border-bottom: 1px solid var(--border-lt);
      overflow-wrap: break-word;
    }
    .pdp-compare-table td:first-child { font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: var(--ls-cta); }
    .pdp-compare-table tbody tr:last-child td { border-bottom: none; }

    .check { color: var(--steel-dk); font-weight: 700; font-size: 16px; }
    .cross  { color: var(--border); font-size: 18px; font-weight: 300; }

    .pdp-compare-cta {
      text-align: center; margin-top: 32px;
      font-size: 14px; color: var(--muted);
    }
    .pdp-compare-cta a { color: var(--steel); font-weight: 600; }
    .pdp-compare-cta a:hover { text-decoration: underline; }

    /* Compare dropdown */
    .compare-col-label {
      font-size: 9px; font-weight: 700;
      letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
      color: var(--muted); margin-bottom: 8px;
      display: block;
    }
    .col-other .compare-col-label { color: var(--muted); }

    .compare-select-wrap {
      display: flex; align-items: center; gap: 6px;
      width: 100%; box-sizing: border-box;
      padding: 7px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--white);
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    }
    .compare-select-wrap:hover {
      border-color: var(--steel-xl);
      box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    }

    .compare-select {
      font-family: var(--font-body);
      font-size: 13px; font-weight: 700;
      letter-spacing: var(--ls-label);
      border: none; background: transparent;
      color: var(--text); cursor: pointer;
      padding: 0; appearance: none;
      -webkit-appearance: none;
      outline: none;
      width: 100%; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .compare-chevron {
      width: 14px; height: 14px;
      color: var(--muted); flex-shrink: 0;
      pointer-events: none;
      transition: color 0.15s;
    }
    .compare-select-wrap:hover .compare-chevron { color: var(--steel); }

    /* Gallery video thumbnails */
    .pdp-thumb-video { background: var(--black); position: relative; }
    .pdp-thumb-video video {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .pdp-thumb-video .thumb-play-wrap {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.22);
    }
    .pdp-thumb-video .thumb-play-wrap svg { width: 14px; height: 14px; color: rgba(255,255,255,0.9); }
    #pdp-gallery-active-vid {
      width: 100%; height: 100%;
      object-fit: contain;
      padding: 0;
      display: none;
    }

    /* ─── REVIEW VIDEOS ──────────────────────────────────── */
    #pdp-review-videos { padding: 88px 0; background: var(--off); }
    .pdp-rv-header { max-width: var(--max); margin: 0 auto 48px; padding: 0 80px; }
    .pdp-rv-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; max-width: var(--max); margin: 0 auto; padding: 0 80px; }
    .rv-card { background: var(--white); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-lt); cursor: pointer; transition: box-shadow 0.25s, transform 0.25s; text-align: left; display: block; width: 100%; padding: 0; }
    .rv-card:hover { box-shadow: 0 8px 40px rgba(0,0,0,0.10); transform: translateY(-3px); }
    .rv-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--black); }
    .rv-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; display: block; }
    .rv-card:hover .rv-thumb img { transform: scale(1.04); }
    .rv-thumb-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.55) 100%); }
    .rv-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; background: rgba(255,255,255,0.92); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
    .rv-card:hover .rv-play { background: var(--white); transform: translate(-50%,-50%) scale(1.1); }
    .rv-play svg { width: 18px; height: 18px; fill: var(--black); margin-left: 3px; }
    .rv-duration { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.75); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: var(--radius-xs); }
    .rv-info { padding: 18px 20px 20px; }
    .rv-channel { font-size: 10px; font-weight: 700; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--copper); margin-bottom: 6px; }
    .rv-title { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.35; margin-bottom: 10px; }
    .rv-quote { font-size: 13px; color: var(--muted); line-height: 1.65; font-style: italic; border-left: 2px solid var(--border); padding-left: 12px; }
    @media (max-width: 900px) { .pdp-rv-header, .pdp-rv-grid { padding-left: 20px; padding-right: 20px; } .pdp-rv-grid { grid-template-columns: 1fr; gap: 16px; } }

    /* ─── PRODUCT VIDEO ──────────────────────────────────── */
    #pdp-video { padding: 88px 80px; background: var(--black); }
    .pdp-video-inner { max-width: var(--max); margin: 0 auto; }
    .pdp-video-header { text-align: center; max-width: 640px; margin: 0 auto 40px; }
    #pdp-video .section-eyebrow { color: var(--copper); }
    #pdp-video .section-title { color: var(--white); }
    .pdp-video-desc { font-size: 15px; color: rgba(255,255,255,0.65); line-height: 1.7; margin-top: 12px; }

    .pdp-video-poster {
      position: relative; display: block; width: 100%;
      /* Wider than 16:9 on purpose — this section is capped by the page's
         own --max content width (1440px), so a 16:9 ratio plus a fixed
         max-height fought each other at wide viewports (width stays 100%,
         only height gets clamped, distorting the crop). A flatter,
         cinematic-banner ratio reads as substantial without dominating the
         page vertically, and stays proportionate at every width. */
      aspect-ratio: 21/9;
      border-radius: var(--radius-md); overflow: hidden;
      cursor: pointer; padding: 0; border: none; background: var(--black);
    }
    .pdp-video-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
    .pdp-video-poster:hover img { transform: scale(1.03); }
    .pdp-video-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.1) 55%, rgba(0,0,0,0.55) 100%);
      transition: background 0.25s;
    }
    .pdp-video-poster:hover .pdp-video-overlay { background: rgba(0,0,0,0.35); }
    .pdp-video-play {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
      width: 84px; height: 84px;
      background: rgba(255,255,255,0.95);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.2s, transform 0.2s;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    }
    .pdp-video-poster:hover .pdp-video-play { background: var(--copper); transform: translate(-50%,-50%) scale(1.08); }
    .pdp-video-play svg { width: 28px; height: 28px; fill: var(--black); margin-left: 4px; transition: fill 0.2s; }
    .pdp-video-poster:hover .pdp-video-play svg { fill: var(--white); }
    .pdp-video-duration {
      position: absolute; bottom: 18px; right: 18px;
      background: rgba(0,0,0,0.65); color: var(--white);
      font-family: var(--font-body); font-size: 11px; font-weight: 700;
      letter-spacing: var(--ls-cta); text-transform: uppercase;
      padding: 6px 12px; border-radius: var(--radius-pill);
    }
    @media (max-width: 900px) {
      #pdp-video { padding: 60px 20px; }
      /* 21:9 gets uncomfortably short at phone widths — back to a normal
         video ratio so the poster/play button stay a sensible tap target. */
      .pdp-video-poster { aspect-ratio: 16/9; }
      .pdp-video-play { width: 64px; height: 64px; }
      .pdp-video-play svg { width: 22px; height: 22px; }
    }

    /* ─── REVIEWS ────────────────────────────────────────── */
    #pdp-reviews {
      background: var(--white);
      padding: 88px 80px;
      border-top: 1px solid var(--border-lt);
    }

    .pdp-reviews-inner { max-width: var(--max); margin: 0 auto; }
    .pdp-reviews-header { text-align: center; margin-bottom: 48px; }
    .pdp-reviews-header .section-title { margin-top: 10px; margin-bottom: 32px; }

    .pdp-rating-summary {
      display: flex; align-items: center; justify-content: center;
      gap: 48px; flex-wrap: wrap;
    }

    .pdp-rating-big { text-align: center; }
    .pdp-rating-big .num { font-size: 72px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); line-height: 1; }
    .pdp-rating-big .stars { color: #f5a623; font-size: 22px; letter-spacing: 3px; margin: 6px 0; }
    .pdp-rating-big .count { font-size: 13px; color: var(--muted); }

    .pdp-rating-bars { display: flex; flex-direction: column; gap: 8px; }
    .pdp-rating-bar-row { display: flex; align-items: center; gap: 12px; }
    .pdp-rating-bar-label { font-size: 12px; color: var(--muted); width: 20px; text-align: right; }
    .pdp-rating-bar-track { width: 200px; height: 6px; background: var(--border-lt); border-radius: var(--radius-xs); overflow: hidden; }
    .pdp-rating-bar-fill { height: 100%; background: var(--steel); border-radius: var(--radius-xs); }
    .pdp-rating-bar-pct { font-size: 12px; color: var(--muted); width: 32px; }

    .pdp-review-cards {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 24px; margin-top: 48px;
    }

    .pdp-review-card {
      background: var(--off); border-radius: var(--radius-md);
      padding: 28px; display: flex; flex-direction: column; gap: 16px;
    }

    .pdp-review-stars { color: #f5a623; font-size: 14px; letter-spacing: 1px; }
    .pdp-review-text { font-size: 14px; color: var(--text); line-height: 1.75; }
    .pdp-review-meta { margin-top: auto; }
    .pdp-review-name { font-size: 13px; font-weight: 700; color: var(--text); }
    .pdp-review-location { font-size: 12px; color: var(--muted); margin-top: 2px; }
    .pdp-review-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
    .pdp-review-date { font-size: 11px; color: var(--muted); }
    .pdp-verified-badge {
      font-size: 10px; font-weight: 700; letter-spacing: var(--ls-label);
      text-transform: uppercase; color: var(--steel);
      background: rgba(77,96,112,0.1); padding: 3px 8px; border-radius: var(--radius-xs);
    }

    /* ─── FAQ ────────────────────────────────────────────── */
    #pdp-faq {
      background: var(--off);
      padding: 88px 80px;
    }

    .pdp-faq-inner { max-width: 760px; margin: 0 auto; }
    .pdp-faq-header { text-align: center; margin-bottom: 48px; }
    .pdp-faq-header .section-title { margin-top: 10px; }

    .faq-item {
      background: var(--white);
      border: 1px solid var(--border-lt);
      border-radius: var(--radius-sm);
      margin-bottom: 8px;
      overflow: hidden;
    }

    .faq-question {
      display: flex; align-items: center; justify-content: space-between;
      padding: 20px 24px;
      font-size: 15px; font-weight: 600; color: var(--text);
      cursor: pointer; user-select: none;
      transition: color 0.2s;
    }
    .faq-question:hover { color: var(--steel-dk); }

    .faq-icon {
      width: 20px; height: 20px; flex-shrink: 0; color: var(--muted);
      transition: transform 0.3s ease;
    }
    .faq-item.open .faq-icon { transform: rotate(45deg); }

    /* Height is set inline by pdp.js (measured from scrollHeight) — there
       was no open-state rule here at all before, so the icon rotated but
       the answer never actually expanded. transition needs a real px
       value on both ends; it can't animate to/from height:auto. */
    .faq-answer { height: 0; overflow: hidden; transition: height 0.3s ease; }
    .faq-answer-inner {
      padding: 16px 24px 20px;
      font-size: 14px; color: var(--muted); line-height: 1.75;
      border-top: 1px solid var(--border-lt);
    }

    /* ─── WHAT'S INCLUDED ────────────────────────────────── */
    #pdp-included {
      background: var(--white);
      padding: 88px 80px;
      border-top: 1px solid var(--border-lt);
    }

    .pdp-included-inner { max-width: var(--max); margin: 0 auto; }
    .pdp-included-header { text-align: center; margin-bottom: 20px; }

    /* Nav row matches the reviews carousel's exact pattern (right-aligned
       circular arrows above the track), shown only once there are enough
       items to actually need scrolling — see $is_carousel in render.php. */
    .pdp-included-nav { display: flex; gap: 8px; justify-content: flex-end; max-width: var(--max); margin: 0 auto 14px; }
    .pdp-included-arrow {
      width: 40px; height: 40px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--white);
      color: var(--text);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.2s;
    }
    .pdp-included-arrow:hover { background: var(--black); color: var(--white); border-color: var(--black); }
    .pdp-included-arrow svg { width: 18px; height: 18px; }

    .pdp-included-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    /* Carousel mode (>3 items — up to 20+ attachments don't fit a static
       grid) — same peeking-card scroll strip as reviews/add-ons. */
    .pdp-included-grid.is-carousel {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      scrollbar-width: none;
      padding-bottom: 4px;
    }
    .pdp-included-grid.is-carousel::-webkit-scrollbar { display: none; }
    .pdp-included-grid.is-carousel .pdp-included-item {
      flex: 0 0 min(280px, 78vw);
    }

    .pdp-included-item {
      background: var(--white);
      border: 1px solid var(--border-lt);
      border-radius: var(--radius-md);
      overflow: hidden; /* keeps has-image's flush top photo inside the rounded corners */
      padding: 36px 32px;
      display: flex; flex-direction: column; gap: 14px;
    }

    .pdp-included-icon {
      width: 40px; height: 40px;
      background: var(--off); border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
    }
    .pdp-included-icon svg { width: 20px; height: 20px; color: var(--steel-dk); }
    .pdp-included-name { font-size: 15px; font-weight: 700; color: var(--text); }
    .pdp-included-desc { font-size: 13px; color: var(--muted); line-height: 1.6; }

    /* Photo variant — a real product shot instead of the small icon badge
       needs a proper frame, not a 40px square, so it gets its own layout:
       full-width image on top, text below, more breathing room than the
       compact icon tiles. */
    .pdp-included-item.has-image { padding: 0 0 28px; gap: 16px; }
    .pdp-included-media {
      width: 100%;
      aspect-ratio: 4 / 3;
      background: var(--off);
      overflow: hidden;
    }
    .pdp-included-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
    .pdp-included-item.has-image:hover .pdp-included-media img { transform: scale(1.04); }
    .pdp-included-item.has-image .pdp-included-name,
    .pdp-included-item.has-image .pdp-included-desc { padding: 0 28px; }
    .pdp-included-item.has-image .pdp-included-name { margin-top: 4px; }

    /* ─── RELATED ────────────────────────────────────────── */
    #pdp-related {
      background: var(--white);
      padding: 88px 0 88px;
      border-top: 1px solid var(--border-lt);
    }

    /* Unlike the other PDP carousels (reviews, included), this section has
       no shared -inner wrapper capping both header and track at --max — so
       past 1440px both hugged the true left edge instead of the centred
       column everything else on the page uses. Each needs its own cap. */
    .pdp-related-header { padding: 0 80px; margin-bottom: 32px; max-width: var(--max); margin-left: auto; margin-right: auto; }
    .pdp-related-header .section-title { margin-top: 10px; }

    .pdp-related-track {
      display: flex; gap: 20px;
      padding: 8px 80px 16px;
      overflow-x: auto;
      max-width: var(--max);
      margin-left: auto;
      margin-right: auto;
    }
    .pdp-related-track::-webkit-scrollbar { display: none; }

    .pdp-related-card {
      flex: 0 0 260px;
      border: 1px solid var(--border-lt);
      border-radius: var(--radius-md); overflow: hidden;
      transition: box-shadow 0.25s, transform 0.25s;
    }
    .pdp-related-card a { display: block; color: inherit; text-decoration: none; }
    .pdp-related-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.08); transform: translateY(-3px); }

    .pdp-related-img {
      aspect-ratio: 1; background: var(--off);
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
    }
    .pdp-related-img img { max-height: 160px; object-fit: contain; }

    .pdp-related-info { padding: 16px 16px 0; }
    .pdp-related-foot { padding: 12px 16px 16px; }
    .pdp-related-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
    .pdp-related-price { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
    .pdp-related-price sup { font-size: 0.65em; font-weight: 600; vertical-align: super; }
    .pdp-related-btn {
      display: block; width: 100%;
      font-family: var(--font-body);
      font-size: 12px; font-weight: 700;
      letter-spacing: var(--ls-cta); text-transform: uppercase;
      padding: 10px; text-align: center;
      background: var(--off); color: var(--text);
      border: 1px solid var(--border); border-radius: var(--radius-xs);
      cursor: pointer; transition: background 0.2s, border-color 0.2s;
    }
    .pdp-related-btn:hover { background: var(--light); border-color: var(--steel-xl); }

    /* ─── ADDON MODAL ────────────────────────────────────── */
    #addon-modal {
      display: none;
      position: fixed; inset: 0;
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    #addon-modal.open { display: flex; }

    #addon-modal-overlay {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0.5);
      backdrop-filter: blur(4px);
    }

    #addon-modal-box {
      position: relative; z-index: 1;
      background: var(--white);
      border-radius: var(--radius-lg);
      width: 100%; max-width: 780px;
      max-height: 90vh;
      display: flex; flex-direction: column;
      box-shadow: 0 32px 80px rgba(0,0,0,0.18);
      overflow: hidden;
    }

    #addon-modal-header {
      display: flex; align-items: flex-start; justify-content: space-between;
      padding: 28px 28px 20px;
      border-bottom: 1px solid var(--border-lt);
      flex-shrink: 0;
    }
    #addon-modal-header h3 {
      font-size: 20px; font-weight: 800; color: var(--text);
      letter-spacing: -0.01em; margin-bottom: 4px;
    }
    #addon-modal-header p { font-size: 13px; color: var(--muted); }

    #addon-modal-close {
      width: 36px; height: 36px;
      background: var(--off); border: 1px solid var(--border-lt);
      border-radius: 50%; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; color: var(--muted);
      transition: all 0.2s; flex-shrink: 0; margin-left: 16px;
    }
    #addon-modal-close:hover { background: var(--light); color: var(--text); }

    #addon-modal-pills {
      padding: 16px 28px 0;
      display: flex; gap: 6px; flex-wrap: wrap;
      flex-shrink: 0;
      border-bottom: 1px solid var(--border-lt);
      padding-bottom: 16px;
    }
    #addon-modal-pills .addon-pills { margin-bottom: 0; }

    #addon-modal-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      padding: 24px 28px;
      overflow-y: auto;
      flex: 1;
    }

    .addon-card-lg {
      background: var(--off);
      border: 1px solid var(--border-lt);
      border-radius: var(--radius-md);
      padding: 14px;
      cursor: pointer;
      transition: border-color 0.15s;
      position: relative;
      text-align: left;
    }
    .addon-card-lg:hover { border-color: var(--steel-xl); }
    .addon-card-lg.selected { border-color: var(--copper); background: #fdf7f3; }
    .addon-card-lg.selected::after {
      content: '✓';
      position: absolute; top: 10px; right: 10px;
      background: var(--copper); color: #fff;
      width: 20px; height: 20px;
      border-radius: 50%; font-size: 11px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      line-height: 20px; text-align: center;
    }

    .addon-img-lg {
      width: 100%; aspect-ratio: 1;
      background: var(--light);
      border-radius: var(--radius-sm); margin-bottom: 10px;
      overflow: hidden;
    }
    .addon-img-lg img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
    .addon-name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
    .addon-name-lg { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.4; }
    .addon-price-lg { font-size: 13px; font-weight: 700; color: var(--copper); }

    /* Info icon: hover/focus on desktop, tap-to-toggle on touch (pdp.js) —
       keeps the tile uncluttered while surfacing the product's short
       description on demand. The tooltip itself is a single element
       appended to <body> and positioned by pdp.js, not CSS :hover — both
       the inline strip and the modal grid clip position:absolute children
       once you scroll past the first row, which was hiding it entirely for
       anything not in the top row/first card. */
    .addon-info { flex-shrink: 0; display: inline-flex; color: var(--steel-xl); cursor: help; transition: color 0.15s; }
    .addon-info:hover, .addon-info.is-active { color: var(--copper); }
    .addon-info svg { width: 15px; height: 15px; }

    /* Compact strip cards: icon pinned top-left (top-right is the selected
       checkmark badge) with a light backing so it reads over photos. */
    .addon-card-sm .addon-info {
      position: absolute; top: 6px; left: 6px; z-index: 2;
      width: 19px; height: 19px;
      background: rgba(255,255,255,0.9);
      border-radius: 50%;
      align-items: center; justify-content: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    }
    .addon-card-sm .addon-info svg { width: 11px; height: 11px; }

    /* Shared floating tooltip (one instance, appended to <body> and
       repositioned per-icon by pdp.js) — position: fixed so it's never
       subject to any ancestor's overflow clipping. */
    .addon-tooltip {
      position: fixed;
      width: 220px; max-width: 70vw;
      background: var(--black); color: var(--white);
      font-family: var(--font-body);
      font-size: 12px; font-weight: 400; line-height: 1.55;
      padding: 10px 13px; border-radius: 8px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.28);
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity 0.15s ease;
      z-index: 3000;
      text-align: left;
    }
    .addon-tooltip.is-visible { opacity: 1; visibility: visible; }
    .addon-tooltip.pos-top { transform: translateY(-100%); }

    #addon-modal-footer {
      display: flex; align-items: center; justify-content: space-between;
      padding: 20px 28px;
      border-top: 1px solid var(--border-lt);
      flex-shrink: 0;
      background: var(--white);
    }

    #addon-modal-summary {
      font-size: 14px; color: var(--muted);
    }
    #addon-modal-summary strong { color: var(--text); }

    #addon-modal-cta {
      font-family: var(--font-body);
      font-size: 13px; font-weight: 700;
      letter-spacing: var(--ls-cta); text-transform: uppercase;
      background: var(--black); color: var(--white);
      border: none; border-radius: var(--radius-sm);
      padding: 14px 28px; cursor: pointer;
      transition: background 0.2s;
    }
    #addon-modal-cta:hover { background: var(--steel-dk); }


    /* ─── LIVE CHAT ──────────────────────────────────────── */
    #live-chat-btn {
      position: fixed;
      bottom: 28px; right: 28px;
      z-index: 800;
      width: 52px; height: 52px;
      background: var(--steel-dk);
      border: none; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(0,0,0,0.22);
      transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    }
    #live-chat-btn:hover { background: var(--black); transform: scale(1.08); box-shadow: 0 6px 28px rgba(0,0,0,0.28); }
    #live-chat-btn svg { width: 22px; height: 22px; color: #fff; }
    #live-chat-btn .chat-badge {
      position: absolute; top: -2px; right: -2px;
      width: 14px; height: 14px;
      background: var(--copper); border-radius: 50%;
      border: 2px solid var(--white);
    }

    #live-chat-panel {
      position: fixed;
      bottom: 92px; right: 28px;
      z-index: 800;
      width: 300px;
      background: var(--white);
      border-radius: var(--radius-md);
      box-shadow: 0 12px 48px rgba(0,0,0,0.18);
      border: 1px solid var(--border-lt);
      overflow: hidden;
      transform: translateY(12px) scale(0.97);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), opacity 0.2s;
      transform-origin: bottom right;
    }
    #live-chat-panel.open {
      transform: translateY(0) scale(1);
      opacity: 1;
      pointer-events: auto;
    }
    .chat-panel-header {
      background: var(--steel-dk);
      padding: 18px 20px;
      display: flex; align-items: center; gap: 12px;
    }
    .chat-panel-avatar {
      width: 36px; height: 36px;
      background: var(--steel-lt);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .chat-panel-avatar svg { width: 18px; height: 18px; color: #fff; }
    .chat-panel-title { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2; }
    .chat-panel-status { font-size: 11px; color: rgba(255,255,255,0.55); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
    .chat-panel-status::before { content: ''; width: 7px; height: 7px; background: #4cd97b; border-radius: 50%; display: block; }
    .chat-panel-body { padding: 20px; }
    .chat-panel-body p { font-size: 13px; color: var(--muted); line-height: 1.65; margin-bottom: 16px; }
    .chat-panel-cta {
      display: block; width: 100%; text-align: center;
      font-family: var(--font-body);
      font-size: 13px; font-weight: 700; letter-spacing: var(--ls-cta); text-transform: uppercase;
      background: var(--black); color: var(--white);
      border: none; border-radius: var(--radius-sm); padding: 13px;
      cursor: pointer; transition: background 0.2s; text-decoration: none;
    }
    .chat-panel-cta:hover { background: var(--steel-dk); }
    .chat-panel-close {
      position: absolute; top: 14px; right: 16px;
      background: none; border: none; color: rgba(255,255,255,0.5);
      font-size: 16px; cursor: pointer; padding: 4px;
      transition: color 0.2s; line-height: 1;
    }
    .chat-panel-close:hover { color: #fff; }

    @media (max-width: 900px) {
      #live-chat-btn { bottom: 20px; right: 20px; width: 46px; height: 46px; }
      #live-chat-btn svg { width: 20px; height: 20px; }
      #live-chat-panel { bottom: 78px; right: 20px; width: calc(100vw - 40px); max-width: 300px; }
    }

    /* ─── TOAST ──────────────────────────────────────────── */
    #pdp-toast {
      position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%);
      background: var(--steel-dk); color: var(--white);
      padding: 14px 28px; border-radius: var(--radius-sm);
      font-size: 14px; font-weight: 600; letter-spacing: var(--ls-label);
      box-shadow: 0 8px 32px rgba(0,0,0,0.2);
      z-index: 9999; pointer-events: none;
      opacity: 0;
    }

    /* ─── RESPONSIVE ─────────────────────────────────────── */
    @media (max-width: 1200px) {
      #addon-modal-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 1024px) {
      /* nav + footer responsive handled globally in layout.css */
      #pdp-specs, #pdp-reviews, #pdp-faq, #pdp-compare, #pdp-related, #pdp-included { padding-left: 40px; padding-right: 40px; }
      .pdp-related-header { padding: 0 40px; }
      .pdp-related-track { padding-left: 40px; }
      .features-header { padding: 0 40px; }
      .feature-track { padding: 8px 40px 20px; }
      #pdp-purchase { padding: 32px 28px 40px; }
      #pdp-features { padding-left: 0; }
      .pdp-sec-nav-inner { padding: 0 24px; } /* matches .nav-inner's own 1024px breakpoint */
    }

    @media (max-width: 900px) {
      /* nav responsive (hamburger etc.) handled globally in layout.css */
      #pdp-main { height: auto; grid-template-columns: 1fr; max-width: 100%; }
      /* Grid children default to min-width:auto — wide content (add-on
         scroller) would otherwise stretch the track past the screen. */
      #pdp-main > * { min-width: 0; }
      /* clip, not hidden — hidden would compute overflow-y to auto and make
         the purchase panel its own vertical scroller around the add-ons. */
      #pdp-purchase { max-width: 100%; overflow-x: clip; }
      .addon-scroll { max-width: 100%; }
      /* relative, not static — the prev/next arrows and dots are
         position:absolute and need #pdp-gallery as their containing block.
         static breaks that, letting them escape and land ~1200px down the
         page instead of pinned to the gallery's corners. */
      #pdp-gallery {
        position: relative; top: 0; /* cancel the desktop sticky rule's top offset —
          it still applies to position:relative and was shoving the whole gallery
          down 134px with nothing filling the gap it left behind */
        width: 100%; height: 80vw; max-height: 65vh; overflow: hidden;
      }
      #pdp-purchase { min-height: 0; }
      #pdp-gallery-main { width: 100%; max-width: 100%; }
      #pdp-gallery-active-img { padding: 20px; min-width: 0; max-width: 100%; }
      #pdp-gallery-active-vid { min-width: 0; max-width: 100%; }
      #pdp-gallery-thumbs { display: none; }
      #pdp-gallery-prev { right: 68px; bottom: 16px; }
      #pdp-gallery-next { right: 16px; bottom: 16px; }
      .pdp-photo-badge { width: 56px; height: 56px; }
      .pdp-photo-badge.pos-top-left, .pdp-photo-badge.pos-top-right { top: 12px; }
      .pdp-photo-badge.pos-bottom-left, .pdp-photo-badge.pos-bottom-right { bottom: 12px; }
      .pdp-photo-badge.pos-top-left, .pdp-photo-badge.pos-bottom-left { left: 12px; }
      .pdp-photo-badge.pos-top-right, .pdp-photo-badge.pos-bottom-right { right: 12px; }
      .pdp-sec-nav-inner { padding: 0 24px; } /* .nav-inner doesn't redefine padding at this breakpoint either — stays 24px from the 1024px rule */

      /* Compare table: scroll horizontally rather than overflow page */
      .pdp-compare-inner { overflow-x: auto; -webkit-overflow-scrolling: touch;}
      .pdp-compare-table { min-width: 520px; }
      #pdp-purchase {
        position: static; height: auto;
        border-left: none; border-top: 1px solid var(--border-lt);
        padding: 32px 24px 48px;
      }
      .pdp-trust { grid-template-columns: repeat(2, 1fr); }

      .pdp-specs-inner { grid-template-columns: 1fr; gap: 40px; }
      .pdp-review-cards { grid-template-columns: 1fr; }
      .pdp-included-grid { grid-template-columns: 1fr 1fr; }
      #pdp-specs, #pdp-reviews, #pdp-faq, #pdp-compare, #pdp-included { padding: 60px 24px; }
      .pdp-related-header, .pdp-related-track { padding-left: 24px; }
      .pdp-related-track { scroll-padding-left: 24px; }
      .pdp-rating-summary { flex-direction: column; gap: 28px; }

      .features-header { padding: 0 24px; }
      .feature-track { padding: 8px 24px 20px; gap: 12px; scroll-padding-left: 24px; }
      .feature-tile { flex: 0 0 72vw; }

      #addon-modal-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 480px) {
      .pdp-included-grid { grid-template-columns: 1fr; }
      .pdp-review-cards { grid-template-columns: 1fr; }
      #addon-modal-grid { grid-template-columns: 1fr 1fr; }
    }

/* ─── Install option (purchase panel) ─────────────────────── */

.pdp-install {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-bottom: 18px;
  transition: border-color 0.15s, background 0.15s;
}
.pdp-install:hover { border-color: var(--steel-lt); }
.pdp-install:has(input:checked) { border-color: var(--steel-lt); background: var(--off); }

.pdp-install input { position: absolute; opacity: 0; pointer-events: none; }

.pdp-install-box {
  flex: 0 0 14px;
  height: 14px;
  margin-top: 2px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xs);
  position: relative;
  transition: all 0.15s;
}
.pdp-install:has(input:checked) .pdp-install-box {
  background: var(--steel-dk);
  border-color: var(--steel-dk);
}
.pdp-install:has(input:checked) .pdp-install-box::after {
  content: "";
  position: absolute;
  left: 3px; top: -0.5px;
  width: 4px; height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.pdp-install-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.pdp-install-price { color: var(--muted); font-weight: 400; margin-left: 6px; white-space: nowrap; }
.pdp-install-note {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
}

/* ─── Price match ─────────────────────────────────────────── */

.pdp-price-match-link {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--steel);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pdp-price-match-link:hover { color: var(--copper); }

#price-match-modal { position: fixed; inset: 0; z-index: 1200; }
#price-match-modal[hidden] { display: none; }
#price-match-modal .pm-overlay { position: absolute; inset: 0; background: rgba(12, 14, 16, 0.55); }
#price-match-modal .pm-box {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px;
}
#price-match-modal h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  margin: 0 32px 6px 0;
}
#price-match-modal .pm-sub { font-size: 13.5px; color: var(--muted); margin: 0 0 18px; line-height: 1.6; }
#price-match-modal .pm-close {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--off);
  border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  color: var(--muted);
}
#price-match-modal .pm-close:hover { background: var(--light); color: var(--text); }

#price-match-modal .pm-form label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
#price-match-modal .pm-form input[type="text"],
#price-match-modal .pm-form input[type="email"],
#price-match-modal .pm-form input[type="url"],
#price-match-modal .pm-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  background: var(--white);
}
#price-match-modal .pm-form input:focus,
#price-match-modal .pm-form textarea:focus {
  outline: none;
  border-color: var(--steel-dk);
}
#price-match-modal .pm-form textarea { resize: vertical; min-height: 72px; }
#price-match-modal .pm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }
#price-match-modal .pm-submit {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 50px;
  margin-top: 4px;
  background: var(--black); color: var(--white);
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700;
  letter-spacing: var(--ls-cta); text-transform: uppercase;
  border: none; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s;
}
#price-match-modal .pm-submit:hover { background: var(--steel-dk); }

/* ─── AR viewer ───────────────────────────────────────────── */

.pdp-ar-btn {
  position: absolute;
  bottom: 18px;
  right: 18px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}
.pdp-ar-btn:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.pdp-ar-btn svg { width: 16px; height: 16px; }

#pdp-ar-modal { position: fixed; inset: 0; z-index: 1200; }
#pdp-ar-modal[hidden] { display: none; }
#pdp-ar-modal .pdp-ar-overlay { position: absolute; inset: 0; background: rgba(12, 14, 16, 0.6); }
#pdp-ar-modal .pdp-ar-box {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(860px, calc(100vw - 32px));
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 20px;
}
#pdp-ar-modal .pdp-ar-stage { height: min(62vh, 560px); border-radius: var(--radius-md); background: var(--off); overflow: hidden; }
#pdp-ar-modal model-viewer { width: 100%; height: 100%; }
#pdp-ar-modal .pdp-ar-hint { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
#pdp-ar-modal .pdp-ar-close {
  position: absolute;
  top: -14px; right: -14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--black);
  color: var(--white);
  font-size: 15px;
  cursor: pointer;
}

/* ─── Reviews: photo strip, card photos, form ─────────────── */

.pdp-review-photos {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 28px;
}
.pdp-review-photo img {
  width: 88px; height: 88px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  transition: transform 0.2s;
}
.pdp-review-photo:hover img { transform: scale(1.05); }

.pdp-review-card-photos { display: flex; gap: 8px; margin: 10px 0 2px; }
.pdp-review-card-photos img {
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.pdp-reviews-empty { color: var(--muted); font-size: 14px; }

.pdp-review-form-wrap { margin-top: 28px; }

.pdp-review-form-toggle {
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  padding: 14px 26px;
  cursor: pointer;
  transition: background 0.2s;
}
.pdp-review-form-toggle:hover { background: var(--steel-dk); }

.pdp-review-form {
  margin-top: 18px;
  max-width: 560px;
  background: var(--off);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-md);
  padding: 24px;
}
.pdp-review-form label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.pdp-review-form input[type="text"],
.pdp-review-form input[type="email"],
.pdp-review-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  background: var(--white);
}
.pdp-review-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* star picker: radios reversed in source so ~ selects earlier siblings */
.pdp-review-rating { border: none; padding: 0; margin: 0 0 14px; }
.pdp-review-rating legend {
  font-size: 12px; font-weight: 700; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.pdp-review-rating input { position: absolute; opacity: 0; pointer-events: none; }
.pdp-review-rating label {
  display: inline-block;
  font-size: 26px;
  color: var(--steel-xl);
  cursor: pointer;
  margin: 0 2px 0 0;
  transition: color 0.1s;
}
.pdp-review-rating input:checked ~ label,
.pdp-review-rating label:hover,
.pdp-review-rating label:hover ~ label { color: var(--copper); }

.pdp-review-photos-input input { margin-top: 6px; font-size: 13px; }

.pdp-review-submit {
  width: 100%;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  padding: 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.pdp-review-submit:hover { background: var(--copper); }

.pdp-review-form-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

@media (max-width: 640px) { .pdp-review-form-row { grid-template-columns: 1fr; gap: 0; } }

/* ─── BNPL text line + payment methods line (no fake badges) ── */

.pdp-bnpl-line {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}
.pdp-bnpl-fine-inline { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }

#bfa-payment-messaging { margin: 0 0 18px; }

.pdp-payment-line {
  margin: 18px 0 0;
  font-size: 12px;
  letter-spacing: var(--ls-label);
  color: var(--muted);
}

.pdp-payment-icons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.pdp-payment-icons::-webkit-scrollbar { display: none; }
.pdp-payment-icons img { height: 30px; width: auto; flex: 0 0 auto; }

/* ─── Reviews carousel (>3 reviews) ───────────────────────── */

.pdp-review-nav { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 14px; }
.pdp-review-arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.pdp-review-arrow:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.pdp-review-arrow svg { width: 18px; height: 18px; }

.pdp-review-cards.is-carousel {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.pdp-review-cards.is-carousel::-webkit-scrollbar { display: none; }
.pdp-review-cards.is-carousel .pdp-review-card {
  flex: 0 0 min(340px, 82vw);
}

/* ─── "Explore More" / "Recently Viewed" — auto carousels appended after
   every product's own content (template-parts/pdp/other-products.php,
   recently-viewed.php). Reuse the product-carousel block's own
   .products-header/.carousel-* classes; this just gives the wrapping
   <section> the same treatment #products gets when it's an actual block. */
.pdp-carousel-section { padding: 88px 0; background: var(--white); }
.pdp-carousel-section + .pdp-carousel-section { padding-top: 0; }

/* ─── Add-on quick view (opened from an add-on card's ⓘ icon) ─────── */
#addon-quickview { position: fixed; inset: 0; z-index: 1300; }
#addon-quickview[hidden] { display: none; }
#addon-quickview .aqv-overlay { position: absolute; inset: 0; background: rgba(12, 14, 16, 0.55); }
#addon-quickview .aqv-box {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(480px, 92vw);
  margin: 12vh auto 0;
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
}
#addon-quickview .aqv-img {
  flex: 0 0 40%;
  background: var(--off);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
#addon-quickview .aqv-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
#addon-quickview .aqv-info { flex: 1; min-width: 0; padding: 28px 24px; }
#addon-quickview h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: 0 0 8px; line-height: 1.15; }
#addon-quickview .aqv-price { font-size: 16px; font-weight: 700; color: var(--copper); margin: 0 0 12px; }
#addon-quickview .aqv-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 0 20px; }
#addon-quickview .aqv-full-link {
  display: inline-flex;
  font-size: 12px; font-weight: 700;
  letter-spacing: var(--ls-cta); text-transform: uppercase;
  color: var(--white);
  background: var(--black);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  transition: background 0.2s;
}
#addon-quickview .aqv-full-link:hover { background: var(--steel-dk); }
#addon-quickview .aqv-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.85); border: none; border-radius: 50%;
  font-size: 13px; color: var(--muted); cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
#addon-quickview .aqv-close:hover { background: var(--light); color: var(--text); }
@media (max-width: 560px) {
  #addon-quickview .aqv-box { flex-direction: column; margin-top: 8vh; width: min(400px, 92vw); }
  #addon-quickview .aqv-img { flex-basis: auto; height: 180px; }
}