/* PatchBant V1.22.2 - Product detail thumbnail gallery fix */
:root {
    --pb-thumb-size: 78px;
    --pb-thumb-img-size: 66px;
}

.pb-product-detail,
.product-detail,
.product-show,
body {
    overflow-x: hidden;
}

/* Main gallery wrapper: allow thumbnails to breathe instead of being clipped */
.pb-product-gallery,
.pb-product-media,
.pb-product-visual,
.product-gallery,
.product-media,
.product-visual {
    overflow: visible !important;
}

/* Thumbnail strip */
.pb-product-gallery-thumbs,
.pb-product-thumbnails,
.pb-gallery-thumbs,
.product-gallery-thumbs,
.product-thumbnails,
.gallery-thumbs,
.thumbnails-row,
.product-detail-thumbnails {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 104px !important;
    height: auto !important;
    padding: 12px 14px !important;
    margin-top: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.86) !important;
    border: 1px solid rgba(13, 148, 136, .16) !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .06) !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Thumbnail button/item */
.pb-product-gallery-thumbs > *,
.pb-product-thumbnails > *,
.pb-gallery-thumbs > *,
.product-gallery-thumbs > *,
.product-thumbnails > *,
.gallery-thumbs > *,
.thumbnails-row > *,
.product-detail-thumbnails > * {
    flex: 0 0 var(--pb-thumb-size) !important;
    width: var(--pb-thumb-size) !important;
    height: var(--pb-thumb-size) !important;
    max-width: var(--pb-thumb-size) !important;
    max-height: var(--pb-thumb-size) !important;
    min-width: var(--pb-thumb-size) !important;
    min-height: var(--pb-thumb-size) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    background: #ffffff !important;
    overflow: hidden !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.pb-product-gallery-thumbs > *.is-active,
.pb-product-gallery-thumbs > *.active,
.pb-product-thumbnails > *.is-active,
.pb-product-thumbnails > *.active,
.product-gallery-thumbs > *.is-active,
.product-gallery-thumbs > *.active,
.product-thumbnails > *.is-active,
.product-thumbnails > *.active,
.gallery-thumbs > *.is-active,
.gallery-thumbs > *.active {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .18) !important;
}

/* Thumbnail image: shrink inside the thumb frame, never leak outside */
.pb-product-gallery-thumbs img,
.pb-product-thumbnails img,
.pb-gallery-thumbs img,
.product-gallery-thumbs img,
.product-thumbnails img,
.gallery-thumbs img,
.thumbnails-row img,
.product-detail-thumbnails img {
    width: auto !important;
    height: auto !important;
    max-width: var(--pb-thumb-img-size) !important;
    max-height: var(--pb-thumb-img-size) !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 10px !important;
    transform: none !important;
}

/* Main product image remains premium and clickable */
.pb-product-main-image img,
.pb-product-gallery-main img,
.product-gallery-main img,
.product-main-image img,
.pb-product-hero img {
    object-fit: contain !important;
    object-position: center center !important;
}

@media (max-width: 640px) {
    :root {
        --pb-thumb-size: 64px;
        --pb-thumb-img-size: 54px;
    }

    .pb-product-gallery-thumbs,
    .pb-product-thumbnails,
    .pb-gallery-thumbs,
    .product-gallery-thumbs,
    .product-thumbnails,
    .gallery-thumbs,
    .thumbnails-row,
    .product-detail-thumbnails {
        min-height: 84px !important;
        padding: 10px 12px !important;
        gap: 10px !important;
        border-radius: 18px !important;
    }
}