/* First frame must not wait for WooCommerce's gallery JavaScript. */
.single-product .woocommerce-product-gallery--with-images {
    opacity: 1 !important;
}

/* Before FlexSlider wraps the slides, stack them behind the first image.
 * Keep their widths measurable so slider initialization remains reliable.
 * Once the wrapper moves into .flex-viewport these rules stop applying. */
.single-product .woocommerce-product-gallery--with-images > .woocommerce-product-gallery__wrapper {
    position: relative;
}

.single-product .woocommerce-product-gallery--with-images > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image ~ .woocommerce-product-gallery__image {
    position: absolute;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
}

.single-product .woocommerce-product-gallery__image .wp-post-image {
    height: auto;
}

/* WooCommerce creates these nodes in JavaScript, before their images decode. */
.single-product .woocommerce-product-gallery .flex-control-thumbs li > img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
}