/* HomeKit: preserve the final gallery footprint before FlexSlider initializes.
   The two square thumbnails occupy one row of the existing four-column grid. */
body.ttd-design.product-page .ttd-homekit-gallery.woocommerce-product-gallery {
    padding-bottom: calc((100% - 30px) / 4);
}

/* Before initialization, only the main slide participates in page layout.
   FlexSlider moves this figure inside .flex-viewport, ending these rules. */
body.ttd-design.product-page .ttd-homekit-gallery > .woocommerce-product-gallery__wrapper {
    width: 100%;
    aspect-ratio: 1000 / 667;
    overflow: hidden;
}
body.ttd-design.product-page .ttd-homekit-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child) {
    display: none;
}
body.ttd-design.product-page .ttd-homekit-gallery .wp-post-image {
    aspect-ratio: auto 1000 / 667;
}

/* Inserting the controls must not push the introduction down a second time.
   Keep their existing size, gap, and visual position after initialization. */
body.ttd-design.product-page .ttd-homekit-gallery > .flex-control-thumbs {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
}
body.ttd-design.product-page .ttd-homekit-gallery > .flex-control-thumbs img {
    aspect-ratio: 1;
}