/* INTWB PDP Engine: show the main product photo immediately.
   WooCommerce keeps the gallery at opacity 0 until its script runs on document ready,
   which on a busy product page delayed the largest paint by ~4 s on mobile.
   Before the slider starts: show only the first photo and reserve the exact height of
   the thumbnail row the slider will add (4 per row, theme gaps), so nothing that is
   already on screen moves when the slider takes over. */

body.single-product .woocommerce-product-gallery {
    opacity: 1 !important;
}

body.single-product .woocommerce-product-gallery:not(:has(.flex-viewport)):has(.woocommerce-product-gallery__image:nth-child(2)) {
    --pdpe-gap: clamp(10px, 1.2vw, 16px);
    --pdpe-rows: 1;
    /* ol.flex-control-thumbs: 14px top margin + 8px bottom padding, 8px side padding, 4 per row */
    padding-bottom: calc(22px + var(--pdpe-rows) * ((100% - 16px - 3 * var(--pdpe-gap)) / 4) + (var(--pdpe-rows) - 1) * var(--pdpe-gap)) !important;
}

body.single-product .woocommerce-product-gallery:not(:has(.flex-viewport)):has(.woocommerce-product-gallery__image:nth-child(5)) {
    --pdpe-rows: 2;
}

body.single-product .woocommerce-product-gallery:not(:has(.flex-viewport)):has(.woocommerce-product-gallery__image:nth-child(9)) {
    --pdpe-rows: 3;
}

body.single-product .woocommerce-product-gallery:not(:has(.flex-viewport)):has(.woocommerce-product-gallery__image:nth-child(13)) {
    --pdpe-rows: 4;
}

/* 1.3.3: FlexSlider builds the slide strip (and the thumbnail row) first and only sizes the
   slides ~100 ms later (~0.5 s on a throttled phone). In between every slide is as wide as the
   whole strip (the first photo rendered ~5,000 px tall), which pushed the buy box off screen
   and back: ~0.36 layout shift on every product page. Until a slide has FlexSlider's inline
   float, keep showing only the first photo at full width. */
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image:not(:first-child):not([style*="float"]) {
    display: none !important;
}

body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image:first-child:not([style*="float"]) {
    width: 100% !important;
    margin: 0 !important;
}

body.single-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper:not(:has(> .woocommerce-product-gallery__image[style*="float"])) {
    width: 100% !important;
    transform: none !important;
}

@media (max-width: 767px) {
    body.single-product .woocommerce-product-gallery:not(:has(.flex-viewport)):has(.woocommerce-product-gallery__image:nth-child(2)) {
        --pdpe-gap: 8px;
    }
}