body.single-product {
    --store-gallery-thumb: 64px;
    --store-gallery-gap: 8px;
}
@media (max-width: 740px) {
    body.single-product {
        --store-gallery-thumb: 48px;
        --store-gallery-gap: 6px;
    }
}

body.single-product :is(.woocommerce-product-gallery, .vs-gallery, .product-gallery, .sen-woo-gallery) {
    min-width: 0;
    max-width: 100%;
}

body.single-product :is(.woocommerce-product-gallery .flex-control-thumbs,
    .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] > ol,
    .woocommerce-product-gallery .brand-thumbnails, .vs-gallery .vs-gallery-thumbs,
    .product-gallery .product-thumbs, .sen-woo-gallery .sen-gallery-controls) {
    box-sizing: border-box;
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: var(--store-gallery-gap) !important;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    margin: 10px 0 0 !important;
    padding: 1px 1px 4px !important;
    overflow: auto hidden !important;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}

body.single-product :is(.woocommerce-product-gallery .flex-control-thumbs > li,
    .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] > ol > li,
    .woocommerce-product-gallery .brand-thumbnails > button, .vs-gallery .vs-gallery-thumbs > button,
    .product-gallery .product-thumbs > button, .sen-woo-gallery .sen-gallery-controls > button) {
    box-sizing: border-box;
    float: none !important;
    flex: 0 0 var(--store-gallery-thumb) !important;
    width: var(--store-gallery-thumb) !important;
    min-width: var(--store-gallery-thumb) !important;
    max-width: var(--store-gallery-thumb) !important;
    margin: 0 !important;
    scroll-snap-align: start;
}

body.single-product :is(.woocommerce-product-gallery .flex-control-thumbs > li,
    .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] > ol > li,
    .woocommerce-product-gallery .brand-thumbnails > button, .product-gallery .product-thumbs > button) {
    height: var(--store-gallery-thumb) !important;
}

body.single-product :is(.woocommerce-product-gallery .flex-control-thumbs,
    .woocommerce-product-gallery .flexy-pills[data-type="thumbs"],
    .woocommerce-product-gallery .brand-thumbnails, .vs-gallery .vs-gallery-thumbs,
    .product-gallery .product-thumbs) img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: var(--store-gallery-thumb);
    object-fit: contain !important;
}

body.single-product .vs-gallery .vs-gallery-thumbs > button {
    height: var(--store-gallery-thumb);
}
body.single-product .vs-gallery .vs-gallery-thumbs button[data-photo] > span {
    display: none;
}

body.single-product .sen-woo-gallery .sen-gallery-controls {
    grid-column: 1 / -1;
    grid-row: 2;
}

body.single-product .sen-woo-gallery .sen-gallery-controls > button {
    min-height: calc(var(--store-gallery-thumb) + 32px);
}
body.single-product .sen-woo-gallery .sen-thumb-frame {
    box-sizing: border-box;
    width: 100%;
    height: var(--store-gallery-thumb);
}

body.single-product .product-gallery.horizontal-style .thumbnail-item {
    width: var(--store-gallery-thumb) !important;
    height: var(--store-gallery-thumb) !important;
}

/* Keep the original WooCommerce zoom overlay and native variation hooks. */
body.single-product.storefront-gallery-studio .woocommerce-product-gallery .flex-viewport,
body.single-product.storefront-gallery-studio .woocommerce-product-gallery__image {
    background: #fff;
}

body.single-product.storefront-gallery-studio .woocommerce-product-gallery__image img:not(.zoomImg),
body.single-product .brand-thumbnails ~ .gallery-hint {
    min-width: 0;
}

body.single-product .woocommerce-product-gallery:has(.brand-thumbnails) .wp-post-image,
body.single-product.storefront-gallery-studio .woocommerce-product-gallery__image img:not(.zoomImg) {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    object-position: center;
}
@media (max-width: 740px) {
    body.single-product .woocommerce-product-gallery:has(.brand-thumbnails) .wp-post-image,
    body.single-product.storefront-gallery-studio .woocommerce-product-gallery__image img:not(.zoomImg) {
        max-height: 360px;
    }
}