/**
 *
 *   Product gallery on tablets and desktops
 *   =======================================
 *
 *   One tidy row of equal, square thumbnails under the main image: the one
 *   showing framed in pink, the rest faded until hovered. Phones use the swipe
 *   gallery in css/theme.mobile-gallery.css instead, which has no thumbnails.
 *
 *   style.css gives every thumbnail "margin-right: 20px !important" on top of
 *   woocommerce.css's 25% width, so four no longer fit a row and the floats
 *   broke the rows apart. A grid with a gap replaces both.
 *
 */
@media ( min-width: 768px ) {

    .woocommerce div.product div.images .flex-control-thumbs {
        display: grid;
        grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
        gap: 12px;
        margin: 16px 0 0 !important;
        padding: 0;
    }

    .woocommerce div.product div.images .flex-control-thumbs li {
        float: none;
        width: auto;
        margin: 0 !important;
    }

    /* !important: style.css sets every gallery image to 80% wide on large
       screens, and an inline rule caps them at 600px with object-fit contain. */
    .woocommerce.single-product div.product div.images .flex-control-thumbs li img {
        width: 100% !important;
        height: auto;
        max-height: none;
        aspect-ratio: 1;
        object-fit: cover;
        border: 2px solid transparent;
        border-radius: 6px;
        opacity: 0.55;
        transition: opacity 0.2s ease, border-color 0.2s ease;
    }

    .woocommerce div.product div.images .flex-control-thumbs li img:hover {
        opacity: 1;
    }

    .woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
        border-color: var( --nvm-theme-color-pink, #f897c2 );
        opacity: 1;
    }

    /* The main image fills its column instead of sitting at 80% with white
       strips either side. The inline 600px height cap is raised a little so a
       square image is as wide as the thumbnail row under it. */
    .woocommerce.single-product div.product div.images .flex-viewport img {
        width: 100% !important;
        max-height: 660px;
        border-radius: 6px;
    }

}

@media ( min-width: 768px ) and ( prefers-reduced-motion: reduce ) {

    .woocommerce div.product div.images .flex-control-thumbs li img {
        transition: none;
    }

}