/**
 * Keeps the product gallery viewport one fixed size while the shopper clicks
 * through the thumbnails.
 *
 * The imported catalog mixes aspect ratios: the main shot is usually 860x980
 * while gallery shots run 2437x2560, 1257x2560, 1032x2000 and so on.
 * WooCommerce scales the single-product size to a fixed width and lets the
 * height follow, so every slide came out a different height and FlexSlider
 * resized its viewport on each switch — the whole summary column jumped.
 *
 * Fixing the frame and fitting images inside it costs some empty space around
 * the narrow ones, which is the right trade for garment photography: cropping
 * to fill would cut the sleeves or hem off exactly the tall shots that show
 * the product best.
 */

/*
 * Every selector below is scoped to `.woocommerce-product-gallery`: the theme
 * reuses the `woocommerce-product-gallery__image` class on the thumbnail link
 * of each card in shop loops, carousels and related-product rows, which are
 * sized by their own rules and must not be reframed here.
 *
 * 860x980 — the ratio of the catalog's main product shots.
 */
.woocommerce-product-gallery .woocommerce-product-gallery__image {
    aspect-ratio: 860 / 980;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image > a {
    display: block;
    height: 100%;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image > a > img,
.woocommerce-product-gallery .woocommerce-product-gallery__image > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*
 * FlexSlider measures the active slide and writes the result onto the viewport
 * as an inline height. With every slide the same height that measurement stops
 * changing, but it still runs before the images load — pinning the ratio here
 * too keeps the frame from settling into place a moment after the page paints.
 */
.woocommerce-product-gallery--with-images .flex-viewport {
    aspect-ratio: 860 / 980;
    height: auto !important;
}