/**
 * Fits the product picture inside its frame instead of filling it.
 *
 * The frame a catalogue card asks for differs per surface — 570x739 in the
 * shop, 270x270 in a homepage carousel — so [product-image-fit.php] writes each
 * card's own `aspect-ratio` and `object-fit` inline, next to the file it swaps
 * in. What is left here is what does not vary: the box the framed image is
 * measured against, and the gallery's thumbnail strip, whose size WooCommerce
 * does hold still.
 *
 * Every selector is scoped to `.product-item` or `.woocommerce-product-gallery`:
 * `thumb-link` and `primary-thumb` are reused by banners and shortcodes that
 * size themselves, and must not be reframed here.
 */

/*
 * The theme leaves the picture column shrink-to-fit, which was fine while the
 * image carried its own intrinsic width. An image that now fills its frame has
 * to be measured against something, so the column takes the width the grid
 * already allots it.
 */
.product-item .product-thumb {
    display: block;
}

.product-item .thumb-link {
    display: block;
}

.product-item .thumb-link > figure {
    margin: 0;
}

/*
 * `height: auto` next to the inline `aspect-ratio` is what holds the frame
 * open. Without the pair the box collapses onto the shape of whichever file was
 * served and the cards in a row stop lining up — which is what cropping the
 * size was doing for the theme in the first place. The custom property is the
 * fallback for a card rendered outside the filter's bracket.
 */
.product-item .thumb-link > figure > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--siggi-loop-thumb-ratio, 570 / 739);
    object-fit: contain;
}

/*
 * The gallery's own thumbnail strip, framed the same way. The slider the strip
 * runs inside measures its slides, so a fixed ratio here also stops it settling
 * into place a moment after the pictures load.
 */
.woocommerce-product-gallery .flex-control-thumbs img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--siggi-gallery-thumb-ratio, 79 / 100);
    object-fit: contain;
}