/**
 * Mosestance Product Gallery Thumbnails v4.0 — Horizontal Scroll Slider
 * v4.0: Single-row horizontal scroll (Amazon style), replaces grid wrap.
 */
.woocommerce div.product div.images .flex-control-thumbs {
    margin-top: 12px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    position: relative !important;
    padding: 0 0 4px 0 !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch !important;
    background: transparent !important;
    /* Remove old centering that conflicts with scroll */
    left: auto !important;
    transform: none !important;
}
.woocommerce div.product div.images .flex-control-thumbs li {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    flex: 0 0 120px !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    list-style: none !important;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
    opacity: 0.5 !important;
    margin: 0 !important;
    border: 3px solid var(--global-palette9, #fff) !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    transition: opacity 0.2s ease, border-color 0.2s ease !important;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
    opacity: 1 !important;
    border-color: var(--global-palette1, #333) !important;
}

/* Tablet */
@media screen and (max-width: 1024px) {
    .woocommerce div.product div.images .flex-control-thumbs {
        gap: 6px !important;
    }
    .woocommerce div.product div.images .flex-control-thumbs li {
        flex: 0 0 95px !important;
        width: 95px !important;
        min-width: 95px !important;
        max-width: 95px !important;
    }
}

/* Mobile */
@media screen and (max-width: 768px) {
    .woocommerce div.product div.images .flex-control-thumbs {
        gap: 4px !important;
        margin-top: 8px !important;
    }
    .woocommerce div.product div.images .flex-control-thumbs li {
        flex: 0 0 85px !important;
        width: 85px !important;
        min-width: 85px !important;
        max-width: 85px !important;
    }
    .woocommerce div.product div.images .flex-control-thumbs li img {
        border-width: 2px !important;
    }
}