/* Reserve the final gallery geometry before Carousel creates its viewport/thumbs. */
.single-product .ui-gallery-product__carousel #myCarousel-default {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 30px;
    height: calc(100svh - var(--headerH) - 1.59204vw - 50px);
    min-height: calc(100svh - var(--headerH) - 1.59204vw - 50px);
    max-height: calc(100svh - var(--headerH) - 1.59204vw - 50px);
}
.single-product .ui-gallery-product__carousel #myCarousel-default .f-carousel__viewport {
    height: 100%;
}
.single-product .ui-gallery-product__carousel > .f-thumbs {
    grid-column: 1;
    grid-row: 1;
}
/* Keep every slide measurable during init; display:none corrupts Carousel geometry. */
.single-product #myCarousel-default:not(.is-enabled) {
    display: grid;
}
.single-product #myCarousel-default:not(.is-enabled) .f-carousel__slide {
    grid-area: 1 / 1;
    height: 100%;
    width: 100%;
}
.single-product #myCarousel-default:not(.is-enabled) .f-carousel__slide:not(:first-child) {
    visibility: hidden;
    pointer-events: none;
}
@media (max-width: 768px) {
    .single-product .ui-gallery-product__carousel #myCarousel-default {
        grid-column: 1;
        height: max(265px, 40svh);
        min-height: max(265px, 40svh);
        max-height: max(265px, 40svh);
    }
    .single-product .ui-gallery-product__carousel #myCarousel-default .f-carousel__slide img {
        min-height: 0;
        max-height: 100%;
        object-fit: contain;
    }
}