/**
 * Author: Rafael Silva
 * Version: 2.1
 *
 * PDP — galeria **nativa** WooCommerce (.woocommerce-product-gallery + FlexSlider).
 * CommerceKit (#commercegurus-pdp-gallery): **não** estilizar aqui — o plugin injeta CSS
 * conforme o admin; regras com !important/aspect-ratio no main swiper quebravam layout,
 * miniaturas e opções do CommerceKit.
 */

/* Thumbs à frente na stack (não altera tamanhos do admin). */
@media (min-width: 771px) {
	#commercegurus-pdp-gallery.cg-layout-vertical-left .cg-thumb-swiper,
	#commercegurus-pdp-gallery.cg-layout-vertical-right .cg-thumb-swiper {
		position: relative;
		z-index: 2;
	}
}

/*
 * Galeria clássica Woo — caixa 4:5 e altura máxima (sem CommerceKit ou markup antigo).
 */
.single-product .product .woocommerce-product-gallery {
	--joog-pdp-gallery-max-h: 450px;
	box-sizing: border-box;
	width: min(100%, calc(var(--joog-pdp-gallery-max-h) * 4 / 5));
	max-width: 100%;
	max-height: var(--joog-pdp-gallery-max-h);
	aspect-ratio: 4 / 5;
	margin-inline: auto;
}

@media (min-width: 993px) {
	.single-product .product .woocommerce-product-gallery {
		--joog-pdp-gallery-max-h: 785px;
	}
}

.single-product .product .woocommerce-product-gallery .flex-viewport,
.single-product .product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	width: 100% !important;
	max-height: min(var(--joog-pdp-gallery-max-h), 100%);
}

.single-product .product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
.single-product .product .woocommerce-product-gallery .flex-viewport .slides img {
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: var(--joog-pdp-gallery-max-h) !important;
	object-fit: contain;
	object-position: center;
	margin-inline: auto;
	display: block;
}