/* Elementor adds padding to its containers, including columns reserved for the gallery. */
.elementor-widget-wd_single_product_gallery,
.elementor-widget-wd_single_product_gallery > .elementor-widget-container,
.e-con:has(> .elementor-widget-wd_single_product_gallery):not(:has(> .elementor-element:not(.elementor-widget-wd_single_product_gallery))),
.e-con:has(> .e-con-inner > .elementor-widget-wd_single_product_gallery):not(:has(> .e-con-inner > .elementor-element:not(.elementor-widget-wd_single_product_gallery))),
.e-con > .e-con-inner:has(> .elementor-widget-wd_single_product_gallery):not(:has(> .elementor-element:not(.elementor-widget-wd_single_product_gallery))) {
	padding: 0 !important;
}

.b2io-unified-gallery {
	--ug-thumb-gap: min(10px, 2%);
	--ug-thumb-basis: var(--ug-thumb-basis-desktop, 25%);
	--ug-max-width: var(--ug-max-width-desktop, 100%);
	--ug-max-height: var(--ug-max-height-desktop, 100cqw);
	container-type: inline-size;
	width: 100%;
	min-width: 0;
	max-width: min(100%, var(--ug-max-width));
}
.elementor-widget-wd_single_product_gallery:has(> .b2io-unified-gallery),
.elementor-widget-wd_single_product_gallery > .elementor-widget-container:has(> .b2io-unified-gallery) {
	height: auto;
	min-height: var(--ug-content-height, 0px);
}
.b2io-ug-main { position: relative; min-width: 0; }
.b2io-ug-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; direction: ltr; border-radius: var(--ug-image-radius, 3px); }
.b2io-ug-track::-webkit-scrollbar, .b2io-ug-thumbs::-webkit-scrollbar { display: none; }
.b2io-ug-slide { display: block; flex: 0 0 100%; min-width: 0; height: min(100cqw, var(--ug-max-height)); scroll-snap-align: start; aspect-ratio: 1; overflow: hidden; background: var(--wd-main-bgcolor, #fff); }
.b2io-ug-slide picture, .b2io-ug-slide img { display: block; width: 100%; height: 100%; }
.b2io-ug-slide img { object-fit: cover; }
.b2io-ug-thumbs { display: var(--b2io-unified-thumbnails-display, flex); gap: var(--ug-thumb-gap); overflow-x: auto; scrollbar-width: none; margin-top: 12px; direction: ltr; }
.b2io-ug-thumbs button { flex: 0 0 var(--ug-thumb-basis); box-sizing: border-box; min-width: 0; height: auto; padding: 2px; border: 1px solid transparent; border-radius: var(--ug-image-radius, 3px); background: transparent; }
@media (hover: hover) {
	.b2io-ug-thumbs button:hover { border-color: var(--ug-thumbnail-border-hover, var(--wd-primary-color, #333)); }
}
.b2io-ug-thumbs button[aria-current="true"] { border-color: var(--ug-thumbnail-border-active, var(--wd-primary-color, #333)); }
.b2io-ug-thumbs picture, .b2io-ug-thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.b2io-unified-gallery :is(.b2io-ug-slide, .b2io-ug-thumbs) img { border-radius: var(--ug-image-radius, 3px); }
.b2io-ug-main > button { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #222; font: 32px/1 sans-serif; box-shadow: 0 2px 8px #0001; z-index: 2; }
.b2io-ug-prev { left: 10px; }
.b2io-ug-next { right: 10px; }
.b2io-ug-main > button:disabled { opacity: .3; cursor: default; }
.b2io-ug-count { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 5px 11px; border-radius: 20px; background: rgba(0,0,0,.65); color: #fff; font-size: 12px; line-height: 1.5; pointer-events: none; direction: ltr; font-variant-numeric: tabular-nums; }
.b2io-unified-gallery :is(button, a, .b2io-ug-track):focus-visible { outline: 2px solid var(--wd-primary-color, #333); outline-offset: -2px; }
html:has(.b2io-ug-dialog:modal) {
	overflow: hidden;
	scrollbar-gutter: auto;
}
.b2io-ug-dialog {
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: max(52px, calc(env(safe-area-inset-top) + 48px)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
	border: 0;
	overflow: hidden;
	overscroll-behavior: none;
	background: transparent;
}
.b2io-ug-dialog[open] {
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	place-items: center;
}
.b2io-ug-dialog::backdrop { background: rgb(0 0 0 / 90%); }
.b2io-ug-dialog > img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.b2io-ug-dialog > .b2io-ug-close {
	position: absolute;
	top: max(4px, env(safe-area-inset-top));
	right: max(4px, env(safe-area-inset-right));
	width: 44px;
	height: 44px;
	min-width: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: #fff;
	font: 32px/1 sans-serif;
}
.b2io-ug-dialog > .b2io-ug-close:focus-visible { outline-color: #fff; }

@media (max-width: 1024px) {
	.b2io-unified-gallery {
		--ug-thumb-basis: var(--ug-thumb-basis-tablet, 25%);
		--ug-max-width: var(--ug-max-width-tablet, var(--ug-max-width-desktop, 100%));
		--ug-max-height: var(--ug-max-height-tablet, var(--ug-max-height-desktop, 100cqw));
	}
}
@media (max-width: 768px) {
	.b2io-unified-gallery {
		--ug-thumb-basis: var(--ug-thumb-basis-mobile, calc(100% / 3));
		--ug-max-width: var(--ug-max-width-mobile, var(--ug-max-width-tablet, var(--ug-max-width-desktop, 100%)));
		--ug-max-height: var(--ug-max-height-mobile, var(--ug-max-height-tablet, var(--ug-max-height-desktop, 100cqw)));
	}
}
/* Use native sticky and only correct an enclosing container that ends before this one. */
.elementor-widget-wd_single_product_gallery.woodmart-child-gallery-sticky-yes {
	position: sticky;
	top: calc(var(--wd-gallery-sticky-offset, 20px) + var(--wp-admin--admin-bar--height, 0px));
	translate: 0 var(--woodmart-child-gallery-sticky-y, 0px);
	transition-property: none !important;
	align-self: flex-start;
	height: fit-content;
	flex-grow: 0;
}

/* An explicit off state also clears positioning left by an editor refresh. */
.elementor-widget-wd_single_product_gallery.woodmart-child-gallery-sticky-no {
	position: relative !important;
	top: auto !important;
	translate: none !important;
}

/* Used only while measuring its original flow position, before the next paint. */
.elementor-widget-wd_single_product_gallery.woodmart-child-gallery-sticky-measure {
	position: relative !important;
	top: auto !important;
	translate: none !important;
}

/* 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;
}