/* SAF Handmade — горизонтальна стрічка мініатюр WooCommerce */

/* Контейнер мініатюр */
.single-product .woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    width: 100% !important;
    max-width: 100%;
    margin: 14px 0 0 !important;
    padding: 0 0 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    list-style: none !important;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #777 transparent;
}
.single-product .woocommerce-product-gallery__trigger {
    left: 10px !important;
    right: auto !important;
    top: 10px !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
    box-sizing: border-box !important;
    border: 2px solid transparent !important;
    opacity: .5 !important;
    transition: opacity .25s ease, border-color .25s ease;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
    opacity: 1 !important;
    border-color: #fff !important; /* змініть на свій колір */
}

/* Забезпечити правильне позиціонування */
.single-product .woocommerce-product-gallery {
    position: relative;
}
/* Кожна мініатюра — фіксованої ширини, без перенесення на новий рядок */
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
    float: none !important;
    flex: 0 0 88px !important;
    width: 88px !important;
    max-width: 88px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Зображення мініатюр */
.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
    display: block;
    width: 100% !important;
    height: 88px !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center;
    cursor: pointer;
    opacity: .75;
    transition: opacity .2s ease, outline-color .2s ease;
}

/* Активна мініатюра та наведення */
.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
    opacity: 1;
}

/* Стилізація смуги прокручування для Chrome / Safari */
.single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
    height: 5px;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-track {
    background: transparent;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb {
    background: #777;
    border-radius: 10px;
}

/* Мобільна версія */
@media (max-width: 767px) {
    .single-product .woocommerce-product-gallery .flex-control-thumbs {
        gap: 8px;
        margin-top: 10px !important;
        padding-bottom: 6px !important;
    }

    .single-product .woocommerce-product-gallery .flex-control-thumbs li {
        flex: 0 0 64px !important;
        width: 64px !important;
        max-width: 64px !important;
    }

    .single-product .woocommerce-product-gallery .flex-control-thumbs li img {
        height: 64px !important;
    }
    
    .mob-menu-header-holder .mobmenu-close,
    .mob-menu-header-holder .mobmenu-search,
    .mob-menu-header-holder .mobmenu-fullscreen {
        left: 10px !important;
        right: auto !important;
    }

    .mob-menu-header-holder {
        text-align: left !important;
    }
    
   button.pswp__button.pswp__button--close {
    float: right;
    margin-right: 30%;
} 


 .single-product .woocommerce-product-gallery__trigger {
        left: 10px !important;
        right: auto !important;
        top: 10px !important;
        z-index: 99 !important;
    }


 .single-product .woocommerce-product-gallery {
        overflow: visible !important;
    }

    .single-product .woocommerce-product-gallery .flex-control-thumbs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        max-width: 100% !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        gap: 10px !important;
        padding: 0 0 10px !important;
        margin-top: 12px !important;

        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y !important;

        scrollbar-width: thin;
        scrollbar-color: #777 transparent;
    }

    /* Фіксована ширина кожної фотографії */
    .single-product .woocommerce-product-gallery
    .flex-control-thumbs li {
        float: none !important;
        flex: 0 0 88px !important;
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        margin: 0 !important;
    }

    /* Мініатюри */
    .single-product .woocommerce-product-gallery
    .flex-control-thumbs li img {
        display: block !important;
        width: 88px !important;
        height: 88px !important;
        object-fit: cover !important;
        cursor: pointer;
    }

    /* Видима смуга прокрутки */
    .single-product .woocommerce-product-gallery
    .flex-control-thumbs::-webkit-scrollbar {
        height: 4px;
    }

    .single-product .woocommerce-product-gallery
    .flex-control-thumbs::-webkit-scrollbar-thumb {
        background: #777;
        border-radius: 10px;
    }


   .single-product .woocommerce-product-gallery
    .flex-control-thumbs {
        touch-action: pan-x pan-y !important;
        overscroll-behavior-x: contain !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }


}