/*
 * CloudZoom – AtmoStore overrides
 * Keeps thumbnails in a horizontal row on mobile portrait
 * after the slick carousel is destroyed.
 */

@media (max-width: 768px) and (orientation: portrait) {

    /* Thumbnail strip: horizontal scroll row */
    .sevenspikes-cloudzoom-gallery .picture-thumbs,
    .sevenspikes-cloudzoom-gallery .picture-thumbs.in-carousel {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding: 8px 0;
        margin: 0;
        /* hide scrollbar but keep functionality */
        scrollbar-width: none;
    }

    .sevenspikes-cloudzoom-gallery .picture-thumbs::-webkit-scrollbar {
        display: none;
    }

    /* Carousel wrapper: also needs to flex when unslicked */
    .sevenspikes-cloudzoom-gallery #picture-thumbs-carousel {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding: 4px 0;
        scrollbar-width: none;
    }

    .sevenspikes-cloudzoom-gallery #picture-thumbs-carousel::-webkit-scrollbar {
        display: none;
    }

    /* Each thumbnail item: fixed width, no shrink */
    .sevenspikes-cloudzoom-gallery .picture-thumbs-item {
        flex: 0 0 70px;
        width: 70px;
    }

    /* Thumbnail anchor and image */
    .sevenspikes-cloudzoom-gallery .picture-thumbs a.cloudzoom-gallery,
    .sevenspikes-cloudzoom-gallery .picture-thumbs .thumb-item {
        display: block;
        width: 70px;
        padding: 0;
    }

    .sevenspikes-cloudzoom-gallery .picture-thumbs a.cloudzoom-gallery img,
    .sevenspikes-cloudzoom-gallery .picture-thumbs .cloud-zoom-gallery-img {
        width: 70px;
        height: 70px;
        object-fit: contain;
        display: block;
    }

    /* Hide slick arrows on portrait mobile – not needed with scroll */
    .sevenspikes-cloudzoom-gallery .picture-thumbs .slick-prev,
    .sevenspikes-cloudzoom-gallery .picture-thumbs .slick-next {
        display: none !important;
    }
}