/* SDG tweaks: the product photos keep their final size from the first paint (gallery_steady). Astra's horizontal
 * slider layout: WooCommerce's FlexSlider for the photos, Astra's FlexSlider for the thumbnail row below them.
 * Measured on the live product pages (21 Oct 2026, Pixel 7): before the sliders start, every photo and every
 * thumbnail stood one under another at full size (the gallery 3,460 px tall), and each slider then left its slides
 * without a width for 100 ms (FlexSlider's setup waits one tick before it measures: 20,098 px, then 5,012 px). The
 * details under the photos were pushed out of the screen and back, Google's layout shift 0.13 to 0.19 on phones
 * (more than 0.1 fails). Here the first photo and one row of four thumbnails show from the start, and while a slider
 * starts its slides already stand side by side at the width it then gives them. FlexSlider's own inline widths take
 * over as before; nothing changes once the sliders run. The widths come from the gallery's own width (a size
 * container), so they are right on phones, tablets and computers. */
.single-product div.product.ast-product-gallery-layout-horizontal-slider .woocommerce-product-gallery{container-type:inline-size}
/* with the size settled the photos need not hide until the slider runs (WooCommerce writes opacity:0 on the gallery and
   lifts it when the slider starts, after the page's scripts: the photo showed about 4 s after it had arrived) */
.single-product div.product.ast-product-gallery-layout-horizontal-slider .woocommerce-product-gallery{opacity:1!important}
/* the photos: before the slider only the first, as wide as the gallery, with WooCommerce's 1em under its slider;
   while it starts, side by side */
.single-product div.product.ast-product-gallery-layout-horizontal-slider .woocommerce-product-gallery:has(>.ast-single-product-thumbnails)>.woocommerce-product-gallery__wrapper{margin-bottom:1em} /* one photo: no slider, no gap */
.single-product div.product.ast-product-gallery-layout-horizontal-slider .woocommerce-product-gallery>.woocommerce-product-gallery__wrapper>.woocommerce-product-gallery__image:nth-child(n+2){display:none}
.single-product div.product.ast-product-gallery-layout-horizontal-slider .woocommerce-product-gallery>.woocommerce-product-gallery__wrapper>.woocommerce-product-gallery__image img{width:100%;height:auto}
.single-product div.product.ast-product-gallery-layout-horizontal-slider .woocommerce-product-gallery>.flex-viewport .woocommerce-product-gallery__image{float:left;width:100cqw}
/* the thumbnails: one row of four (Astra's 15 px apart), before and while their slider starts */
.single-product div.product.ast-product-gallery-layout-horizontal-slider .ast-single-product-thumbnails .ast-woocommerce-product-gallery__image{float:left;width:calc((100cqw - 45px) / 4);margin-right:15px}
.single-product div.product.ast-product-gallery-layout-horizontal-slider .ast-single-product-thumbnails>.woocommerce-product-gallery-thumbnails__wrapper{display:flow-root}
.single-product div.product.ast-product-gallery-layout-horizontal-slider .ast-single-product-thumbnails>.woocommerce-product-gallery-thumbnails__wrapper>.ast-woocommerce-product-gallery__image:nth-child(4n){margin-right:0}
.single-product div.product.ast-product-gallery-layout-horizontal-slider .ast-single-product-thumbnails>.woocommerce-product-gallery-thumbnails__wrapper>.ast-woocommerce-product-gallery__image:nth-child(n+5){display:none}