/* Keep the server-rendered canvas and the enhanced thumbnail rail the same
 * height. FlexSlider inserts its rail asynchronously, sometimes after paint. */
.woocommerce div.product .klima-product-gallery-column .woocommerce-product-gallery {
	--klima-stable-thumb: 70px;
	--klima-stable-rail: 100px;
}

/* FlexSlider creates the viewport/loop clones synchronously, but assigns the
 * slide widths 100 ms later. Mirror that geometry for this intermediate frame
 * without overriding the wrapper width or transform calculated by the slider. */
.woocommerce div.product .klima-product-gallery-column .flex-viewport {
	container-type: inline-size;
}

.woocommerce div.product .klima-product-gallery-column .flex-viewport
	.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not([style*="float"]) {
	width: 100cqw !important;
	float: left !important;
	display: block !important;
}

.woocommerce div.product .klima-product-gallery-column .woocommerce-product-gallery
	.flex-control-thumbs {
	height: var(--klima-stable-rail);
	min-height: var(--klima-stable-rail);
	box-sizing: border-box;
	grid-auto-columns: calc(var(--klima-stable-thumb) + 2px);
	align-items: start;
}

.woocommerce div.product .klima-product-gallery-column .flex-control-thumbs li {
	height: calc(var(--klima-stable-thumb) + 2px);
	box-sizing: border-box;
}

.woocommerce div.product .klima-product-gallery-column .flex-control-thumbs img {
	width: 100%;
	height: var(--klima-stable-thumb);
}

.woocommerce div.product .klima-product-gallery-column
	.woocommerce-product-gallery:not(:has(.flex-control-thumbs)):has(
		.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image ~ .woocommerce-product-gallery__image
	)::after {
	content: "";
	display: block;
	height: var(--klima-stable-rail);
	margin-top: 12px;
}

@media (max-width: 640px) {
	.woocommerce div.product .klima-product-gallery-column .woocommerce-product-gallery {
		--klima-stable-thumb: 60px;
		--klima-stable-rail: 90px;
	}
}