/**
 * Product gallery on phones.
 *
 * Split out of the parked mobile-shop branch so it can go live on its own.
 */



/**
 *   PRODUCT GALLERY
 *   ---------------
 *   On phones the gallery becomes a row of images the shopper swipes through,
 *   edge to edge, with the next one peeking in from the right so it is clear
 *   there is more to see, and no thumbnails underneath.
 *
 *   This is plain native scrolling with scroll snap: FlexSlider and the zoom
 *   are switched off at this width by inc/functions/mobile-gallery.php, because
 *   FlexSlider swallows the touch gestures and lays the slides out itself.
 *   PhotoSwipe stays on, so tapping an image still opens the lightbox.
 */
@media ( max-width: 767px ) {

    /* Out of the theme's gutters, to the full width of the screen. The
       margins resolve against .product, which is centred in the viewport, and
       max-width lifts the site-wide 100% cap that would hold it at that width. */
    .woocommerce div.product div.images.woocommerce-product-gallery {
        width: 100vw;
        max-width: none;
        margin-right: calc( 50% - 50vw );
        margin-bottom: 0.5em;
        margin-left: calc( 50% - 50vw );
        padding: 0;
    }

    .woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
        display: flex;
        gap: 4px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .woocommerce div.product div.images .woocommerce-product-gallery__wrapper::-webkit-scrollbar {
        display: none;
    }

    /* !important: woocommerce.css sizes every image after the first at 25%
       with .woocommerce div.product div.images
       .woocommerce-product-gallery__image:nth-child(n+2), which outranks this. */
    .woocommerce div.product div.images .woocommerce-product-gallery__image {
        flex: 0 0 80%;
        width: 80% !important;
        scroll-snap-align: start;
    }

    /* A product with a single image has nothing to peek at. */
    .woocommerce div.product div.images .woocommerce-product-gallery__image:only-child {
        flex-basis: 100%;
        width: 100% !important;
    }

    /* The inline stylesheet the site loads gives these object-fit: contain
       and a 600px cap, which would letterbox them inside the slide. */
    .woocommerce.single-product div.product div.images .woocommerce-product-gallery__image img {
        max-height: none;
        object-fit: cover;
    }

    /* Room for the fullscreen button, which sits over the first image. */
    .woocommerce div.product div.images .woocommerce-product-gallery__trigger {
        top: 10px;
        right: 10px;
        z-index: 2;
    }

    /* The dots js/theme.mobile-gallery.js adds under the images: one per image,
       the one showing filled in, the rest the same pink faded out. */
    .nvm-gallery-dots {
        display: flex;
        justify-content: center;
    }

    .nvm-gallery-dots__dot {
        position: relative;
        width: 8px;
        height: 8px;
        margin: 14px 5px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background-color: rgba( var( --nvm-pink ), 0.35 );
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    /* A finger-sized target around an 8px dot. */
    .nvm-gallery-dots__dot::after {
        position: absolute;
        inset: -14px -7px;
        content: "";
    }

    .nvm-gallery-dots__dot.is-active {
        background-color: var( --nvm-theme-color-pink );
    }

}


@media ( max-width: 767px ) and ( prefers-reduced-motion: reduce ) {

    .nvm-gallery-dots__dot {
        transition: none;
    }

}