/* -------------------------------------------------------
   PRODUCT DETAIL PAGE — product.css
   Extends the shared style.css design system
------------------------------------------------------- */

/* ── Page Layout ── */
.product-page-main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: calc(var(--hdr-height) + 32px) 24px 80px;
}

/* ── Breadcrumb ── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 48px;
}

.breadcrumb a {
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.breadcrumb a:hover {
    color: var(--accent-secondary);
}

.breadcrumb-sep {
    color: var(--text-muted);
}

/* ── Product Detail Grid ── */
.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    margin-bottom: 100px;
}

/* ── Gallery Section ── */
.gallery-section {
    display: flex;
    gap: 16px;
    position: sticky;
    top: calc(var(--hdr-height) + 24px);
}

.gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

.thumb {
    width: 80px;
    height: 90px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    display: block;
    position: relative;
    transition: var(--transition-fast);
    overflow: hidden;
    padding: 4px;
}

.thumb:hover {
    border-color: var(--border-color-hover);
    background: rgba(255, 255, 255, 0.04);
}

.thumb.active {
    border-color: var(--accent-secondary);
    background: rgba(0, 126, 135, 0.05);
}

.thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}

.thumb-cues {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.thumb-colour-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.78);
    box-shadow: 0 1px 5px rgba(0,0,0,.5);
}

.thumb-colour-dot.black { background: #0b0c10; }
.thumb-colour-dot.white { background: #f5f5f7; border-color: rgba(20,22,28,.55); }

.thumb-role-badge {
    width: 19px;
    height: 19px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: rgba(9,10,14,.88);
    border: 1px solid rgba(255,255,255,.62);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 5px rgba(0,0,0,.45);
}


/* ── Main Gallery Card ── */
.gallery-main {
    flex: 1;
    position: relative;
}

.gallery-badge {
    width: fit-content;
    max-width: calc(100% - 1rem);
    margin: 0 0 .55rem .15rem;
    padding-left: .7rem;
    border-left: 2px solid var(--accent-primary);
    display: inline-flex;
    align-items: baseline;
    gap: .55rem;
    color: var(--text-primary);
}

.gallery-badge[hidden] {
    display: none !important;
}

.gallery-badge strong {
    color: var(--accent-primary);
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    line-height: 1.2;
}

.gallery-badge span {
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.25;
}

@media (max-width: 430px) {
    .gallery-badge {
        margin-bottom: .45rem;
        gap: .45rem;
    }
    .gallery-badge strong,
    .gallery-badge span {
        font-size: .68rem;
    }
}


.gallery-card {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    perspective: 1000px;
    cursor: grab;
    transition: border-color var(--transition-normal);
}

.gallery-card:hover {
    border-color: var(--border-color-hover);
}

.gallery-glare {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.08) 0%, transparent 55%);
    pointer-events: none;
    z-index: 3;
}

.gallery-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
    transition: opacity 180ms ease, transform 220ms ease;
    z-index: 2;
    position: relative;
}

/* Printed samples are full-bleed. Portrait photos crop mainly from the lower excess so the collar and artwork stay in frame. */
.gallery-card.raw-active {
    background: #090a0d;
}
.gallery-card.raw-active .gallery-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    padding: 0;
    filter: none;
}

.gallery-main-img.switching {
    opacity: 0.16;
    transform: scale(0.992);
}

.gallery-main-img.image-pending {
    opacity: 0;
}

.swipe-hint {
    text-align: center;
    font-family: var(--font-ui);
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 12px;
    letter-spacing: 0.05em;
}

/* ── Product Info Section ── */
.product-info-section {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 8px;
}

.product-page-title {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    margin-top: 10px;
}

/* ── Color Options ── */
.color-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.color-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.color-opt:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color-hover);
}

.color-opt.active {
    border-color: var(--accent-primary);
    background: rgba(245, 197, 66, 0.07);
    box-shadow: 0 0 0 1px rgba(245, 197, 66, 0.20);
}

.color-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* ── Related Products Section ── */
.related-section {
    border-top: 1px solid var(--border-color);
    padding-top: 80px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .gallery-section {
        position: static;
    }

    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .gallery-thumbs {
        flex-direction: row;
    }

    .gallery-section {
        flex-direction: column;
    }

    .thumb {
        width: 68px;
        height: 76px;
    }

    .related-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

/* Rebuilt product-page additions */
.single-gallery {
    display: block;
}

.product-actions-stack {
    display: grid;
    gap: 12px;
}


.product-assurance-grid {
    margin-bottom: 100px;
}

.related-title {
    font-size: clamp(24px, 3.5vw, 36px);
}

.related-card-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.related-view-label {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    opacity: 0;
    transform: translateY(10px);
    transition: var(--transition-normal);
}

.related-card-link:hover .related-view-label,
.related-card-link:focus-visible .related-view-label {
    opacity: 1;
    transform: translateY(0);
}

.product-checkout-link {
    display: block;
    text-align: center;
}

@media (max-width: 768px) {
    .related-view-label {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Live stock and availability request */
.size-btn.out-of-stock {
    border-color: rgba(255, 90, 79, 0.5);
    color: var(--text-muted);
    background:
        linear-gradient(135deg, transparent 47%, rgba(255, 90, 79, 0.65) 48%, rgba(255, 90, 79, 0.65) 52%, transparent 53%),
        rgba(255, 90, 79, 0.05);
}

.size-btn.out-of-stock.active {
    border-color: var(--coral, #ff5a4f);
    color: var(--text-primary);
    box-shadow: 0 0 0 1px rgba(255, 90, 79, 0.22);
}

#add-to-cart-btn[hidden] {
    display: none !important;
}

.availability-request-panel {
    padding: 20px;
    border: 1px solid rgba(255, 90, 79, 0.42);
    border-radius: 16px;
    background: rgba(255, 90, 79, 0.07);
}

.availability-request-tag {
    display: block;
    margin-bottom: 6px;
    color: #ff948a;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.availability-request-panel h2 {
    margin: 0 0 8px;
    font-size: 22px;
}

.availability-request-panel > p {
    margin: 0 0 16px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.availability-request-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.availability-request-fields label {
    display: grid;
    gap: 6px;
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
}

.availability-request-fields input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    outline: none;
    background: rgba(0, 0, 0, 0.24);
    color: var(--text-primary);
    font: inherit;
}

.availability-request-fields input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(245, 197, 66, 0.12);
}

.availability-request-message {
    min-height: 20px;
    margin: 10px 0 0 !important;
    color: var(--accent-primary) !important;
    font-family: var(--font-ui);
    font-size: 11px !important;
    font-weight: 700;
}

@media (max-width: 600px) {
    .availability-request-fields {
        grid-template-columns: 1fr;
    }
}

/* =======================================================
   v5.9.18 — PRODUCT IMAGE FRAME
   Matches the full-frame Web 2 image presentation without
   altering product-page controls or ordering behaviour.
======================================================= */
.gallery-card {
    aspect-ratio: 1 / 1.08;
    background: #0b0d0f;
}

.gallery-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: none;
}

.thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: none;
}


/* v5.10.7 — product sharing sits directly beneath the primary purchase action. */
.product-secondary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.product-secondary-actions .btn {
    width: 100%;
    min-height: 52px;
    padding: 14px 18px;
}

.info-card-link p strong {
    color: var(--text-primary);
    font-weight: 700;
}

@media (max-width: 600px) {
    .product-secondary-actions {
        grid-template-columns: 1fr;
    }
}


/* Dashboard-managed product mockups */
.gallery-thumbs[hidden] { display: none !important; }
.gallery-thumbs { max-height: 590px; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
.thumb { flex: 0 0 auto; }
@media (max-width: 600px) {
    .gallery-thumbs { width: 100%; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 0 0 4px; scroll-snap-type: x proximity; }
    .thumb { scroll-snap-align: start; }
}


.product-colour-group {
    margin-top: 24px;
}

.product-colour-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.product-colour-option {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 112px;
    padding: 11px 14px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    color: #d8d5cd;
    text-decoration: none;
    background: rgba(255,255,255,.025);
    font: inherit;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.product-colour-option:hover,
.product-colour-option:focus-visible {
    border-color: rgba(255,202,48,.72);
    color: #fff;
}

.product-colour-option.active {
    border-color: #ffca30;
    color: #ffca30;
    background: rgba(255,202,48,.08);
}

.product-colour-swatch {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.4);
    box-shadow: 0 0 0 1px rgba(0,0,0,.42);
}

@media (max-width: 520px) {
    .product-colour-option {
        flex: 1 1 120px;
        justify-content: center;
    }
}



/* Explicit order selection summary */
.product-selection-summary { display:grid; gap:5px; margin:18px 0 12px; padding:14px 16px; border:1px solid rgba(245,197,66,.42); border-radius:12px; background:rgba(245,197,66,.065); }
.product-selection-kicker { font-family:var(--font-ui); font-size:10px; font-weight:800; letter-spacing:.14em; color:var(--accent-primary); }
.product-selection-summary strong { font-family:var(--font-heading); font-size:16px; line-height:1.3; }
.product-selection-summary small { color:var(--text-secondary); font-size:11px; line-height:1.45; }

/* exact arrow + swipe-cue placement from the approved reference. */
.frontback-viewer[hidden] { display: none !important; }
.frontback-viewer {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    background: #0b0d0f;
}

/* The swipe cue sits ON the product image, not in a separate black sidebar. */
.frontback-side-gutter {
    position: absolute;
    left: 8px;
    top: 50%;
    z-index: 5;
    width: 56px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    pointer-events: none;
}
.frontback-reference-cue {
    width: 52px;
    display: grid;
    justify-items: center;
    gap: 3px;
    text-align: center;
    color: #082a50;
    font: 700 7px/1.12 var(--font-ui);
    letter-spacing: 0;
    text-transform: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-3px);
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}
.frontback-reference-cue.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.frontback-reference-cue[hidden] { display: none !important; }
.frontback-reference-cue-icon {
    display: block;
    width: 42px;
    height: auto;
}

.frontback-scroll {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x pan-y;
    cursor: grab;
    background: transparent;
}
.frontback-scroll::-webkit-scrollbar { display: none; }
.frontback-scroll.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }

.frontback-track {
    position: relative;
    display: flex;
    height: 100%;
    width: 200%;
    min-width: 200%;
    overflow: hidden;
}
.frontback-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.frontback-snap {
    position: relative;
    z-index: 1;
    flex: 0 0 50%;
    width: 50%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    pointer-events: none;
}

/* Main mockup: a small solid tapered arrow at the middle-right edge. */
.gallery-reference-next {
    position: absolute;
    right: 2px;
    top: 50%;
    z-index: 7;
    width: 58px;
    height: 58px;
    padding: 0;
    border: 0;
    background: transparent;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, visibility .16s ease;
    -webkit-tap-highlight-color: transparent;
}
.gallery-reference-next[hidden] { display: none !important; }
.gallery-card:hover .gallery-reference-next:not([hidden]),
.gallery-card:focus-within .gallery-reference-next:not([hidden]) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.gallery-reference-next-line {
    width: 44px;
    height: 14px;
    background: rgba(21,24,27,.92);
    display: block;
    clip-path: polygon(0 48%, 78% 43%, 78% 12%, 100% 50%, 78% 88%, 78% 57%, 0 52%);
    transition: opacity .14s ease, transform .14s ease;
}
.gallery-reference-next:hover .gallery-reference-next-line,
.gallery-reference-next:focus-visible .gallery-reference-next-line {
    opacity: .68;
    transform: translateX(1px);
}
.gallery-reference-next:focus-visible { outline: 1px dashed rgba(0,115,126,.7); outline-offset: -7px; }

/* compact themed media selector inspired by the approved capsule reference. */
.gallery-stage-dots {
    width: max-content;
    max-width: calc(100% - 24px);
    min-height: 42px;
    margin: 8px auto 0;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    position: relative;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    background: rgba(10,12,15,.96);
    box-shadow: 0 8px 20px rgba(0,0,0,.28), 0 0 0 1px rgba(0,126,135,.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.gallery-stage-dots[hidden] { display: none !important; }
.gallery-stage-dot {
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    color: rgba(188,192,195,.52);
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
    -webkit-tap-highlight-color: transparent;
}
.gallery-stage-dot:hover {
    color: rgba(229,233,234,.82);
    background: rgba(255,255,255,.035);
}
.gallery-stage-dot.active {
    color: #eef4f4;
    background: rgba(33,40,44,.96);
    border-color: rgba(53,185,193,.34);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 0 12px rgba(0,126,135,.10);
}
.gallery-stage-dot:active { transform: scale(.96); }
.gallery-stage-dot:focus-visible {
    outline: 1px solid rgba(53,185,193,.82);
    outline-offset: 2px;
}
.gallery-stage-icon {
    width: 19px;
    height: 19px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.gallery-stage-dot.active .gallery-stage-icon { stroke-width: 1.75; }

/* The user's reference has no explanatory sentence under the dots. */
.swipe-hint { display: none; }

@media (max-width: 600px) {
    .frontback-side-gutter { left: 5px; width: 50px; }
    .frontback-scroll { width: 100%; }
    .frontback-reference-cue { width: 46px; font-size: 6.5px; gap: 2px; }
    .frontback-reference-cue-icon { width: 36px; }
    .gallery-reference-next { right: 0; width: 54px; height: 54px; }
    .gallery-reference-next-line { width: 38px; height: 12px; }
    .gallery-stage-dots { min-height: 40px; margin-top: 6px; padding: 4px; gap: 2px; }
    .gallery-stage-dot { width: 32px; height: 32px; flex-basis: 32px; border-radius: 50%; }
    .gallery-stage-icon { width: 18px; height: 18px; }
}

/* capsule is permanent; supporting cues stay contextual. */
@media (hover: none), (pointer: coarse) {
    /* On touch devices the capsule + swipe gesture are enough. */
    .gallery-reference-next { display: none !important; }
}


/* v5.10.17 — mobile related-product cards
   Keep the two-column shopping grid, but give it the full viewport width and
   remove desktop-only detail that makes narrow cards collapse. */
@media (max-width: 600px) {
    .related-section {
        padding-top: 52px;
        width: calc(100vw - 24px);
        margin-left: calc(50% - 50vw + 12px);
        margin-right: calc(50% - 50vw + 12px);
    }

    .related-section .section-header {
        padding-inline: 6px;
    }

    .related-title {
        font-size: clamp(24px, 8vw, 30px);
        line-height: 0.98;
    }

    .related-grid {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 26px;
    }

    .related-grid .collection-card {
        min-width: 0;
        width: 100%;
        border-radius: 14px;
    }

    .related-grid .card-image-wrapper {
        aspect-ratio: 1 / 1.08;
    }

    .related-grid .related-view-label {
        display: none;
    }

    .related-grid .card-info-stacked {
        display: block;
        min-width: 0;
        padding: 12px 12px 13px;
    }

    .related-grid .card-info-stacked > div:first-child {
        min-width: 0;
        width: 100%;
    }

    .related-grid .card-title {
        min-width: 0;
        font-size: 14px;
        line-height: 1.28;
        font-weight: 650;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .related-grid .card-meta {
        display: none;
    }

    .related-grid .card-price {
        margin-top: 7px;
        font-size: 13px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .related-grid .collection-card:hover {
        transform: none;
    }
}


/* product Add to Cart helper is structurally outside the action button */
.product-cart-note {
    margin: -2px 0 2px;
    text-align: center;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.005em;
    opacity: 0.78;
}

@media (max-width: 430px) {
    #add-to-cart-btn {
        min-height: 62px;
    }
    #add-to-cart-btn .btn-copy {
        display: inline-flex;
        align-items: center;
    }
    .product-cart-note {
        width: min(100%, 24rem);
        margin: -3px auto 3px;
        padding: 0 0.75rem;
        font-size: 0.7rem;
    }
}

/* mobile mockup rail + contextual selected-product floater */
.product-selection-floater[hidden] { display: none !important; }
.product-selection-floater { display: none; }

@media (max-width: 768px) {
    .gallery-section,
    .gallery-main {
        min-width: 0;
        width: 100%;
    }

    .gallery-thumbs {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0 16px;
        padding: 0 16px 6px 0;
        scrollbar-width: none;
    }

    .gallery-thumbs::-webkit-scrollbar { display: none; }
    .gallery-thumbs .thumb {
        flex: 0 0 68px;
        width: 68px;
        height: 76px;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }
    .gallery-thumbs .thumb:last-child { margin-right: 2px; }

    .product-selection-floater {
        position: fixed;
        top: calc(var(--hdr-height, 72px) + 10px);
        right: max(10px, env(safe-area-inset-right));
        z-index: 145;
        width: 82px;
        padding: 5px;
        border: 1px solid rgba(0, 163, 177, .62);
        border-radius: 13px;
        background: rgba(8, 10, 12, .94);
        box-shadow: 0 12px 30px rgba(0,0,0,.42);
        backdrop-filter: blur(9px);
        -webkit-backdrop-filter: blur(9px);
        cursor: pointer;
        opacity: 0;
        transform: translateY(-8px) scale(.96);
        transition: opacity .18s ease, transform .18s ease;
    }
    .product-selection-floater.is-visible {
        display: grid;
        gap: 4px;
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    .product-selection-floater img {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 5;
        height: auto;
        object-fit: contain;
        object-position: center;
        border-radius: 9px;
        background: #111318;
    }
    .product-selection-floater span {
        display: block;
        overflow: hidden;
        color: var(--accent-primary);
        font-family: var(--font-ui);
        font-size: 8px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: .05em;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-selection-floater { transition: none; }
}

/* final mobile interaction hardening */
@media (max-width: 768px) {
    /* Horizontal thumbnail swiping must not trap normal vertical page scrolling. */
    .gallery-thumbs { touch-action: pan-x pan-y; }
    .gallery-thumbs .thumb:last-child { scroll-snap-align: end; margin-right: 0; }
}

@media (max-width: 390px) {
    .product-selection-floater {
        width: 72px;
        right: max(8px, env(safe-area-inset-right));
        padding: 4px;
        border-radius: 11px;
    }
    .product-selection-floater img { border-radius: 7px; }
    .product-selection-floater span { font-size: 7px; }
}


@media (max-width: 600px) {
    .product-selection-floater span {
        white-space: normal;
        text-overflow: clip;
        overflow: visible;
        line-height: 1.25;
    }
}

/* exact-product TikTok trust proof */
.product-tiktok-proof[hidden] { display: none !important; }
.product-tiktok-proof {
    width: min(100%, 420px);
    margin: 10px auto 0;
    padding: 11px 13px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(100,215,215,.28);
    border-radius: 14px;
    color: var(--text-primary);
    background: rgba(0,126,135,.055);
    text-decoration: none;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.product-tiktok-proof:hover {
    border-color: rgba(100,215,215,.54);
    background: rgba(0,126,135,.095);
    transform: translateY(-1px);
}
.product-tiktok-proof > span { min-width: 0; display: grid; gap: 2px; }
.product-tiktok-proof strong {
    font-family: var(--font-ui);
    font-size: .68rem;
    letter-spacing: .055em;
    line-height: 1.3;
}
.product-tiktok-proof small {
    color: var(--text-secondary);
    font-size: .66rem;
    line-height: 1.35;
}
.product-tiktok-icon {
    width: 1.45rem;
    height: 1.45rem;
    fill: none;
    stroke: var(--accent-secondary, #64d7d7);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.product-tiktok-proof > .ui-icon { color: var(--text-secondary); }
@media (max-width: 430px) {
    .product-tiktok-proof { padding: 10px 11px; gap: 9px; }
    .product-tiktok-proof strong { font-size: .64rem; }
    .product-tiktok-proof small { font-size: .62rem; }
}