/* ============================================
   Product Detail Page Styles
   ============================================ */

/* --- Breadcrumb --- */
.breadcrumb {
    padding: calc(var(--nav-height) + 24px) 0 12px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}
.breadcrumb a { transition: color 0.2s; }
.breadcrumb a:hover { color: var(--color-text); }
.breadcrumb span { margin: 0 8px; }
.breadcrumb .current { color: var(--color-text); }

/* --- PDP Hero Layout --- */
.pdp-hero {
    padding: 24px 0 clamp(60px, 8vw, 100px);
}
.pdp-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
}

/* Sticky gallery on desktop: the product image follows scroll so the
   white space below it (caused by the gallery being shorter than the
   info column) gets filled while the user reads through finish picker,
   feature icons, temperature pills, etc. Sticky releases naturally when
   .pdp-layout's bottom passes the gallery's bottom — i.e. when the
   right column's spec-icon row ends, exactly the stopping point the
   design calls for.

   Position: sticky here is buttery-smooth because the browser composites
   it directly — no scroll listener, no JS, no jank. align-items:start
   on .pdp-layout (above) keeps the gallery cell at its natural height
   instead of stretching to fill the row, which is the precondition for
   sticky to have any room to move within its containing block.

   Body override below: the site-wide `body { overflow-x: hidden }` rule
   in styles.css silently promotes overflow-y to `auto`, which makes the
   body a scroll container and breaks position:sticky on descendants
   (sticky tracks the body's scroll, not the viewport's). Switching to
   `overflow-x: clip` on PDPs only hides horizontal overflow WITHOUT
   creating a scroll container, so sticky binds to the viewport as
   intended. Scoped to body[data-product-key] so other pages keep their
   existing behaviour untouched.

   Desktop-only. On mobile (≤768px) the layout collapses to a single
   column and sticky would just freeze the image hovering over the info
   content — wrong UX. */
body[data-product-key] {
    overflow-x: clip;
}
@media (min-width: 769px) {
    .pdp-gallery {
        position: sticky;
        top: 100px;
    }
}

/* --- Gallery --- */
.pdp-gallery-main {
    aspect-ratio: 1;
    /* Uniform white backdrop so the tap always renders on a clean rectangle,
       regardless of whether the underlying PNG is truly transparent or has a
       white background baked in. */
    background: #fff;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
}

.pdp-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CSS Product Render */
.pdp-tap-render {
    position: relative;
    width: 160px;
    height: 280px;
}
.pdp-tap-body {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 180px;
    background: linear-gradient(90deg, #d0d0d0, #e8e8e8, #d0d0d0);
    border-radius: 12px 12px 0 0;
    transition: background 0.5s var(--ease-out);
}
.pdp-tap-neck {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d8d8d8, #e8e8e8);
    transition: background 0.5s var(--ease-out);
}
.pdp-tap-spout {
    position: absolute;
    top: 28px;
    left: calc(50% + 10px);
    width: 70px;
    height: 16px;
    background: linear-gradient(180deg, #e0e0e0, #c8c8c8);
    border-radius: 0 8px 8px 0;
    transition: background 0.5s var(--ease-out);
}
.pdp-tap-spout::after {
    content: '';
    position: absolute;
    right: -2px;
    bottom: -20px;
    width: 12px;
    height: 20px;
    background: linear-gradient(180deg, #c8c8c8, #d8d8d8);
    border-radius: 0 0 6px 6px;
    transition: background 0.5s var(--ease-out);
}
.pdp-tap-base {
    position: absolute;
    bottom: 38px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 14px;
    background: linear-gradient(90deg, #c0c0c0, #d8d8d8, #c0c0c0);
    border-radius: 3px;
    transition: background 0.5s var(--ease-out);
}
.pdp-tap-ring {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #bbb, #ddd, #bbb);
    transition: background 0.5s var(--ease-out);
}
.pdp-tap-highlight {
    position: absolute;
    bottom: 70px;
    left: calc(50% - 4px);
    width: 4px;
    height: 100px;
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
}

/* Finish variants for PDP tap */
.pdp-image-placeholder[data-finish="matte-black"] .pdp-tap-body { background: linear-gradient(90deg, #222, #333, #222); }
.pdp-image-placeholder[data-finish="matte-black"] .pdp-tap-neck { background: linear-gradient(135deg, #252525, #333); }
.pdp-image-placeholder[data-finish="matte-black"] .pdp-tap-spout { background: linear-gradient(180deg, #2a2a2a, #1a1a1a); }
.pdp-image-placeholder[data-finish="matte-black"] .pdp-tap-spout::after { background: linear-gradient(180deg, #1a1a1a, #252525); }
.pdp-image-placeholder[data-finish="matte-black"] .pdp-tap-base { background: linear-gradient(90deg, #1a1a1a, #2a2a2a, #1a1a1a); }
.pdp-image-placeholder[data-finish="matte-black"] .pdp-tap-ring { background: linear-gradient(90deg, #1a1a1a, #2a2a2a, #1a1a1a); }

.pdp-image-placeholder[data-finish="brushed-brass"] .pdp-tap-body { background: linear-gradient(90deg, #b8944f, #d4b87a, #b8944f); }
.pdp-image-placeholder[data-finish="brushed-brass"] .pdp-tap-neck { background: linear-gradient(135deg, #b08840, #c4a265); }
.pdp-image-placeholder[data-finish="brushed-brass"] .pdp-tap-spout { background: linear-gradient(180deg, #c4a265, #a8843e); }
.pdp-image-placeholder[data-finish="brushed-brass"] .pdp-tap-spout::after { background: linear-gradient(180deg, #a8843e, #b8944f); }
.pdp-image-placeholder[data-finish="brushed-brass"] .pdp-tap-base { background: linear-gradient(90deg, #a8843e, #c4a265, #a8843e); }
.pdp-image-placeholder[data-finish="brushed-brass"] .pdp-tap-ring { background: linear-gradient(90deg, #a8843e, #c4a265, #a8843e); }

.pdp-image-placeholder[data-finish="gunmetal"] .pdp-tap-body { background: linear-gradient(90deg, #3d4245, #555a5e, #3d4245); }
.pdp-image-placeholder[data-finish="gunmetal"] .pdp-tap-neck { background: linear-gradient(135deg, #383d40, #4a5055); }
.pdp-image-placeholder[data-finish="gunmetal"] .pdp-tap-spout { background: linear-gradient(180deg, #4a5055, #353a3e); }
.pdp-image-placeholder[data-finish="gunmetal"] .pdp-tap-spout::after { background: linear-gradient(180deg, #353a3e, #424850); }
.pdp-image-placeholder[data-finish="gunmetal"] .pdp-tap-base { background: linear-gradient(90deg, #353a3e, #4a5055, #353a3e); }
.pdp-image-placeholder[data-finish="gunmetal"] .pdp-tap-ring { background: linear-gradient(90deg, #353a3e, #4a5055, #353a3e); }

.pdp-image-placeholder[data-finish="brushed-nickel"] .pdp-tap-body { background: linear-gradient(90deg, #a8a29e, #c5c0b8, #a8a29e); }
.pdp-image-placeholder[data-finish="brushed-nickel"] .pdp-tap-neck { background: linear-gradient(135deg, #a09a94, #b8b2aa); }
.pdp-image-placeholder[data-finish="brushed-nickel"] .pdp-tap-spout { background: linear-gradient(180deg, #b8b2aa, #9a948e); }
.pdp-image-placeholder[data-finish="brushed-nickel"] .pdp-tap-spout::after { background: linear-gradient(180deg, #9a948e, #a8a29e); }
.pdp-image-placeholder[data-finish="brushed-nickel"] .pdp-tap-base { background: linear-gradient(90deg, #9a948e, #b8b2aa, #9a948e); }
.pdp-image-placeholder[data-finish="brushed-nickel"] .pdp-tap-ring { background: linear-gradient(90deg, #9a948e, #b8b2aa, #9a948e); }

/* Real product images */
.pdp-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 24px;
    transition: opacity 0.4s var(--ease-out);
}
.pdp-thumb-real {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdp-gallery-thumbs {
    display: flex;
    gap: 12px;
}
.pdp-thumb {
    width: 72px;
    height: 72px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    transition: border-color 0.3s;
    cursor: pointer;
}
.pdp-thumb.active { border-color: var(--color-text); }
.pdp-thumb:hover { border-color: var(--color-text-muted); }
.pdp-thumb-img { width: 100%; height: 100%; }

/* --- Product Info --- */
.pdp-badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius);
    margin-bottom: 16px;
}
.pdp-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 400;
    margin-bottom: 8px;
}
.pdp-category {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: 20px;
}
.pdp-price {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 8px;
}
.pdp-sku {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 32px;
}
.pdp-sku span {
    color: var(--color-text-secondary);
    font-weight: 500;
}
.pdp-price-note {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 8px;
}

/* Option Groups */
.pdp-option {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--color-border-light);
}
.pdp-option-label {
    display: block;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    margin-bottom: 14px;
    letter-spacing: 0.03em;
}
.pdp-option-label strong { color: var(--color-text); }

/* ─── Water Function Selector (Ambient ⇄ Chilled) ──────────────
   Two side-by-side card buttons that let the user pick the water
   variant before choosing a finish. Selected state mirrors the
   finish swatch's accent ring for visual continuity. */
.pdp-water-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.pdp-water-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    padding: 14px 16px;
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    font-family: inherit;
}
.pdp-water-btn:hover {
    border-color: var(--color-text-secondary);
}
.pdp-water-btn.active {
    border-color: var(--color-accent);
    background: var(--color-surface);
}
.pdp-water-btn-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
}
.pdp-water-btn-desc {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-top: 2px;
}
.pdp-water-btn-base {
    margin-top: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-accent);
    letter-spacing: 0.02em;
}
@media (max-width: 600px) {
    .pdp-water-options { grid-template-columns: 1fr; }
}

.pdp-finish-options {
    display: flex;
    gap: 10px;
}
/* 44×44 minimum to meet Apple HIG / Material touch-target guidelines.
   Padding bumped to 5px (44 - 2×5 = 34) so the inner swatch visual size
   stays the same as the previous 40-with-3-padding design. The growth
   in hit area is invisible to sighted users on desktop but meaningful
   on mobile where finish selection is high-intent. */
.pdp-finish {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    padding: 5px;
    border: 2px solid transparent;
    transition: border-color 0.3s;
    cursor: pointer;
}
.pdp-finish span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.pdp-finish.active { border-color: var(--color-text); }
.pdp-finish:hover { border-color: var(--color-text-muted); }

/* Feature Icons */
.pdp-features-icons {
    display: flex;
    gap: 24px;
}
.pdp-feature-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.pdp-feature-icon svg {
    width: 32px;
    height: 32px;
    color: var(--color-accent);
}
.pdp-feature-icon span {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.03em;
}
.pdp-feature-icon small {
    font-size: 0.62rem;
    color: var(--color-text-muted);
    font-weight: 400;
}
.pdp-feature-icon--muted svg { color: var(--color-text-muted); }

/* Radio Options */
.pdp-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pdp-radio {
    cursor: pointer;
    display: block;
}
.pdp-radio input { display: none; }
.pdp-radio-box {
    display: block;
    padding: 16px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: all 0.3s;
}
.pdp-radio input:checked + .pdp-radio-box {
    border-color: var(--color-text);
    background: var(--color-bg);
}
.pdp-radio-box strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 2px;
}
.pdp-radio-box small {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

/* Actions */
.pdp-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}
.pdp-add-to-cart,
.pdp-find-retailer {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Meta */
.pdp-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pdp-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}
.pdp-meta-item svg { color: var(--color-accent); flex-shrink: 0; }

/* --- PDP Spec Consultant Callout --- */
.pdp-spec-callout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    background: var(--color-accent-light);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius);
    margin: 24px 0;
}
.pdp-spec-callout-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    color: var(--color-accent);
}
.pdp-spec-callout-body { flex: 1; min-width: 0; }
.pdp-spec-callout-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-accent);
    line-height: 1.3;
    margin: 0 0 6px;
}
.pdp-spec-callout-text {
    font-size: 0.85rem;
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
}
.pdp-spec-callout-text a {
    color: var(--color-accent);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    white-space: nowrap;
}
.pdp-spec-callout-text a:hover { opacity: 0.7; }

/* --- PDP Trust Badges --- */
/* Inherits the homepage `.trust-badge` styling for consistency.
   This container just supplies spacing & a divider rule above. */
.pdp-trust-badges {
    display: flex;
    gap: 20px 28px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border-light);
    flex-wrap: wrap;
}
.pdp-trust-badges .trust-badge svg,
.pdp-trust-badges .trust-badge .trust-badge-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px;
    max-width: 26px;
    color: var(--color-accent);
}
.pdp-trust-badges .trust-badge-logo {
    width: 28px;
    height: 28px;
}
.pdp-trust-badges .trust-badge span {
    font-size: 0.72rem;
}

/* --- Tabs --- */
.pdp-details {
    padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 120px);
    border-top: 1px solid var(--color-border-light);
}
.pdp-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 40px;
}
.pdp-tab {
    padding: 16px 24px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
    margin-bottom: -1px;
}
.pdp-tab:hover { color: var(--color-text); }
.pdp-tab.active {
    color: var(--color-text);
    border-bottom-color: var(--color-text);
}

.pdp-tab-content {
    display: none;
}
.pdp-tab-content.active {
    display: block;
    animation: fadeUp 0.5s var(--ease-out);
}

/* Benefits */
.pdp-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.pdp-benefit {
    display: flex;
    gap: 20px;
}
.pdp-benefit-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    color: var(--color-accent);
}
.pdp-benefit-icon svg { width: 100%; height: 100%; }
.pdp-benefit h3 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 8px;
}
.pdp-benefit p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* Specs */
.pdp-spec-table {
    width: 100%;
    max-width: 700px;
    border-collapse: collapse;
}
.pdp-spec-table tr { border-bottom: 1px solid var(--color-border-light); }
.pdp-spec-table td {
    padding: 14px 0;
    font-size: 0.88rem;
    vertical-align: top;
}
.pdp-spec-table td:first-child {
    font-weight: 500;
    width: 200px;
    color: var(--color-text);
}
.pdp-spec-table td:last-child {
    color: var(--color-text-secondary);
}

/* Downloads */
.pdp-downloads {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.pdp-download-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: all 0.3s;
}
.pdp-download-item:hover {
    border-color: var(--color-accent);
    background: var(--color-bg);
}
.pdp-download-icon {
    width: 32px;
    height: 32px;
    color: var(--color-accent);
    flex-shrink: 0;
}
.pdp-download-icon svg { width: 100%; height: 100%; }
.pdp-download-item strong {
    display: block;
    font-size: 0.88rem;
    margin-bottom: 2px;
}
.pdp-download-item small {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Reviews */
.pdp-reviews-summary {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--color-border-light);
}
.pdp-rating-big {
    display: flex;
    align-items: center;
    gap: 16px;
}
.pdp-rating-number {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 400;
}
.pdp-stars {
    color: var(--color-accent);
    font-size: 1.2rem;
    letter-spacing: 2px;
}
.pdp-rating-count {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}
.pdp-review {
    padding: 24px 0;
    border-bottom: 1px solid var(--color-border-light);
}
.pdp-review-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}
.pdp-review-stars {
    color: var(--color-accent);
    font-size: 0.9rem;
    letter-spacing: 2px;
}
.pdp-review-date {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
.pdp-review h4 {
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 8px;
}
.pdp-review p {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 8px;
}
.pdp-review-author {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Related Products */
.pdp-related {
    padding: clamp(60px, 8vw, 100px) 0;
    background: var(--color-bg);
}
.products-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Temperature Range */
.pdp-temp-range {
    padding: 8px 0;
}
.pdp-temp-bar {
    position: relative;
    margin-bottom: 12px;
}
.pdp-temp-fill {
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent-light), #c0392b);
    border-radius: 2px;
    margin-bottom: 10px;
}
.pdp-temp-markers {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
}
.pdp-temp-note {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* --- Lightbox --- */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s var(--ease-out);
    cursor: pointer;
}
.lightbox-overlay.active {
    opacity: 1;
}
.lightbox-image {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius);
    cursor: default;
    transition: opacity 0.3s;
}
.lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    z-index: 10;
}
.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    z-index: 10;
}
.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}
.lightbox-prev {
    left: 24px;
}
.lightbox-next {
    right: 24px;
}
.lightbox-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    z-index: 10;
}
.pdp-gallery-main {
    cursor: zoom-in;
}

/* --- Compatibility list (filter cartridge PDP) --- */
.pdp-compat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.pdp-compat-list li {
    position: relative;
    padding: 10px 14px 10px 36px;
    background: var(--color-bg-soft, #faf8f5);
    border: 1px solid var(--color-border, #ece7e0);
    border-radius: var(--radius);
    font-size: 0.92rem;
    color: var(--color-text);
}
.pdp-compat-list li::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    background: var(--color-accent);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .pdp-benefits { grid-template-columns: 1fr; }
    .products-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .pdp-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .pdp-gallery-main { aspect-ratio: 4/3; }
    .pdp-actions { flex-direction: column; }
    .pdp-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .pdp-tab { white-space: nowrap; padding: 14px 16px; }
    /* Default mobile behaviour for 4-icon PDPs (flagship-4in1, signature-4in1).
       Flex-wrap fits 4 icons cleanly across the typical mobile width.
       At tablet widths (600-768px) the 5-icon PDPs ALSO use this rule —
       all 5 icon blocks (~85px each) + 4 × 16px gaps = ~489px, which
       fits comfortably in the ~560px container at a 600px viewport, so
       no wrapping occurs and you get the desired 5-in-a-row layout. */
    .pdp-features-icons { flex-wrap: wrap; gap: 16px; }
    .products-grid--3 { grid-template-columns: 1fr; }
}

/* Phone-only (≤599px): force the 5-icon PDPs (flagship-pullout,
   signature-pullout, product/Signature 5-in-1) into a 3+2 grid because
   5 icons in a single row don't fit at narrow phone widths and would
   produce an ugly 4+1 wrap.

   At 600px+ (large phones landscape, tablets, desktop) this rule does
   NOT apply — the icons fall back to the default flex layout above and
   sit comfortably in a single row of 5.

   Three equal-width columns with per-column alignment:
   - Column 1 items (positions 1, 4) → left edge → flush with the
     "Water Functions" heading above
   - Column 2 items (positions 2, 5) → centre → visually balanced
   - Column 3 items (position 3) → right edge → flush with the right
     edge of the "Adjustable Boiling Temperature" graphic below
   The bottom row's two icons inherit columns 1 and 2 by DOM order, so
   they stay vertically aligned with the top row.

   :has() targets only containers with 5 or more children, so the
   4-icon PDPs above still use the flex-wrap path. ~95% browser
   support; old Firefox falls back to the orphan layout (no worse than
   today). */
@media (max-width: 599px) {
    .pdp-features-icons:has(> :nth-child(5)) {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 16px;
        row-gap: 22px;
        padding-top: 14px;
    }
    .pdp-features-icons:has(> :nth-child(5)) > :nth-child(3n+1) {
        justify-self: start;
    }
    .pdp-features-icons:has(> :nth-child(5)) > :nth-child(3n+2) {
        justify-self: center;
    }
    .pdp-features-icons:has(> :nth-child(5)) > :nth-child(3n) {
        justify-self: end;
    }
}