/*
 * Author: Rafael Silva
 * Version: 1.4
 *
 * Listagem de produtos: caixa visual uniforme (até 250×250), proporção preservada, sem distorção.
 */

/*
 * Desktop: ul.products é flex no Shoptimizer — float é ignorado; flex: 0 0 <largura> evita encolher
 * (flex-shrink) e alinha com o N de colunas do WooCommerce (evita “uma coluna a menos” só no visual).
 */
@media (min-width: 993px) {
	body.joog-custom-header ul.products.columns-1 li.product {
		flex: 0 0 100% !important;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0;
		margin-right: 0 !important;
	}
	body.joog-custom-header ul.products.columns-2 li.product {
		flex: 0 0 49.9% !important;
		float: none !important;
		width: 49.9% !important;
		max-width: 49.9% !important;
		min-width: 0;
	}
	body.joog-custom-header ul.products.columns-3 li.product {
		flex: 0 0 33.3053% !important;
		float: none !important;
		width: 33.3053% !important;
		max-width: 33.3053% !important;
		min-width: 0;
	}
	body.joog-custom-header ul.products.columns-4 li.product {
		flex: 0 0 24.97% !important;
		float: none !important;
		width: 24.97% !important;
		max-width: 24.97% !important;
		min-width: 0;
	}
	body.joog-custom-header ul.products.columns-5 li.product {
		flex: 0 0 19.98% !important;
		float: none !important;
		width: 19.98% !important;
		max-width: 19.98% !important;
		min-width: 0;
	}
	body.joog-custom-header ul.products.columns-6 li.product {
		flex: 0 0 16.647% !important;
		float: none !important;
		width: 16.647% !important;
		max-width: 16.647% !important;
		min-width: 0;
	}
}

/* --- WooCommerce loop (Shoptimizer / Elementor grid) --- */
body.joog-custom-header ul.products li.product:not(.product-category) .woocommerce-image__wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 250px;
	min-height: 250px;
	box-sizing: border-box;
}

body.joog-custom-header ul.products li.product:not(.product-category) .woocommerce-image__wrapper > .woocommerce-LoopProduct-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/*
 * Só a miniatura principal — NÃO aplicar a img.gallery-image: o Shoptimizer no hover
 * define height/object-fit na segunda foto; uma regra genérica "wrapper img" ganha à do tema
 * e a primeira imagem fica opacity:0 → área em branco.
 */
body.joog-custom-header ul.products li.product:not(.product-category) .woocommerce-image__wrapper img:not(.gallery-image) {
	width: auto;
	height: auto;
	max-width: min(250px, 100%);
	max-height: 250px;
	object-fit: contain;
}

body.joog-custom-header ul.products li.product:not(.product-category) .woocommerce-image__wrapper picture:not(.gallery-image) {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: min(250px, 100%);
	max-height: 250px;
}

body.joog-custom-header ul.products li.product:not(.product-category) .woocommerce-image__wrapper picture:not(.gallery-image) img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 250px;
	object-fit: contain;
}

/* Carrossel mobile Shoptimizer: manter proporção dentro da área */
@media (max-width: 992px) {
	body.joog-custom-header ul.products li.product:not(.product-category) .shoptimizer-plp-carousel-container img,
	body.joog-custom-header ul.products li.product:not(.product-category) .shoptimizer-plp-carousel-container picture {
		object-fit: contain;
	}
}

/* --- Blocos WooCommerce (Hand-picked products, etc.) --- */
body.joog-custom-header .wc-block-grid__product .wc-block-grid__product-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 250px;
	min-height: 250px;
	box-sizing: border-box;
}

body.joog-custom-header .wc-block-grid__product .wc-block-grid__product-image img {
	width: auto;
	height: auto;
	max-width: min(250px, 100%);
	max-height: 250px;
	object-fit: contain;
}