/* Thumbnail visibility is responsive and scoped to the Elementor widget. */
.elementor-widget-wd_single_product_gallery .woocommerce-product-gallery.wd-has-thumb:is(.thumbs-position-bottom, .thumbs-position-left) > .wd-gallery-thumb {
	display: var(--b2io-thumbnails-display, block) !important;
}
.elementor-widget-wd_single_product_gallery .thumbs-position-left.wd-has-thumb > .wd-gallery-images {
	max-width: var(--b2io-gallery-main-width, calc(100% - var(--wd-thumbs-width, 132px)));
}
/* Preserve the direct-image geometry expected by WoodMart's vertical carousel. */
.elementor-widget-wd_single_product_gallery .wd-gallery-thumb picture.woodmart-child-gallery-image {
	display: contents;
}
/* Horizontal slides must not inherit Swiper's percentage-height chain.
 * An explicit square crop gives mixed portrait/landscape sources equal height. */
.elementor-widget-wd_single_product_gallery .thumbs-position-bottom .wd-gallery-thumb,
.elementor-widget-wd_single_product_gallery .thumbs-position-bottom .wd-gallery-thumb :is(.wd-carousel, .wd-carousel-wrap, .wd-carousel-item) {
	height: auto !important;
	min-height: 0;
}
.elementor-widget-wd_single_product_gallery .thumbs-position-bottom .wd-gallery-thumb .wd-carousel-item img {
	display: block;
	width: 100%;
	height: auto !important;
	min-height: 0;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center;
}
@media (max-width: 1024px) {
	.elementor-widget-wd_single_product_gallery .thumbs-position-left.wd-thumbs-wrap.wd-has-thumb > .wd-gallery-images {
		max-width: 100%;
	}
	.elementor-widget-wd_single_product_gallery .thumbs-position-left.wd-thumbs-wrap .wd-gallery-thumb,
	.elementor-widget-wd_single_product_gallery .thumbs-position-left.wd-thumbs-wrap .wd-gallery-thumb :is(.wd-carousel, .wd-carousel-wrap, .wd-carousel-item) {
		height: auto !important;
		min-height: 0;
	}
	.elementor-widget-wd_single_product_gallery .thumbs-position-left.wd-thumbs-wrap .wd-gallery-thumb .wd-carousel-item img {
		display: block;
		width: 100%;
		height: auto !important;
		min-height: 0;
		aspect-ratio: 1;
		object-fit: cover;
		object-position: center;
	}
}

/* Auto slides have no column width: do not resolve 100% against their
 * intrinsic flex size. Retain the thumbnail width emitted by WooCommerce.
 * Fixed-column slides and the vertical left carousel keep their own sizing. */
@media (min-width: 1025px) {
	.elementor-widget-wd_single_product_gallery .thumbs-position-bottom .wd-gallery-thumb [style*="col-lg:auto"] .wd-carousel-item img {
		width: var(--b2io-thumbnail-width, 150px);
	}
}
@media (min-width: 769px) and (max-width: 1024px) {
	.elementor-widget-wd_single_product_gallery :is(.thumbs-position-bottom, .thumbs-position-left.wd-thumbs-wrap) .wd-gallery-thumb [style*="col-md:auto"] .wd-carousel-item img {
		width: var(--b2io-thumbnail-width, 150px);
	}
}
@media (max-width: 768.98px) {
	.elementor-widget-wd_single_product_gallery :is(.thumbs-position-bottom, .thumbs-position-left.wd-thumbs-wrap) .wd-gallery-thumb [style*="col-sm:auto"] .wd-carousel-item img {
		width: var(--b2io-mobile-thumbnail-width, 128px);
	}
}

/*
 * Keep the product hero and purchase controls in the initial layout pass.
 * Later Elementor sections retain their DOM and SEO content, while browsers
 * may skip style/layout work until a section approaches the viewport.
 */
@supports (content-visibility: auto) {
	.single-product main#main-content .site-content > .elementor > .e-parent:nth-child(n + 3) {
		content-visibility: auto;
		contain-intrinsic-block-size: auto 900px;
	}

	.single-product .footer-container {
		content-visibility: auto;
		contain-intrinsic-block-size: auto 700px;
	}
}

/*
 * The responsive product template disables the mobile gallery animation in
 * Elementor, but WoodMart still prints its generic wd-animation classes.
 * Those classes hold the complete gallery at opacity:0 until imagesLoaded
 * finishes. The gallery is the product LCP, so it must be paintable from the
 * first frame and must not depend on the animation runtime.
 */
.single-product .elementor-widget-wd_single_product_gallery.wd-animation {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	--wd-transform-perspective: 0;
	--wd-transform-rotateX: 0;
	--wd-transform-rotateY: 0;
	--wd-transform-rotateZ: 0;
	--wd-transform-translateX: 0;
	--wd-transform-translateY: 0;
	--wd-transform-scaleX: 1;
	--wd-transform-scaleY: 1;
}