/* Reserva de espacio para los cinco accesos visuales de /tienda/. */
body.page-id-6748 .et_pb_main_blurb_image,
body.page-id-6748 .et_pb_main_blurb_image .et_pb_image_wrap {
	display: block;
	width: 100%;
	aspect-ratio: 1024 / 865;
	overflow: hidden;
}

body.page-id-6748 .et_pb_main_blurb_image img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

/* Las animaciones de entrada de Divi retrasaban artificialmente el LCP. */
body.page-id-6748 .et_pb_main_blurb_image .et-waypoint {
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
}

/* Franja decorativa del encabezado: 2.560 x 66 px. */
img.wp-image-6652 {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1280 / 33;
}

.et_pb_image_wrap:has(> img.wp-image-6652) {
	display: block;
	width: 100%;
	aspect-ratio: 1280 / 33;
	overflow: hidden;
}

/*
 * WooCommerce dibuja la galería con opacity:0 y sin altura hasta que termina
 * FlexSlider. La proporción se inyecta desde los metadatos de cada producto.
 */
body.single-product .woocommerce-product-gallery {
	position: relative;
	box-sizing: border-box;
}

body.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper,
body.single-product .woocommerce-product-gallery .flex-viewport {
	width: 100%;
	aspect-ratio: var(--msc-product-image-ratio, 1 / 1);
	overflow: hidden;
}

body.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	position: relative;
	margin: 0;
}

/* Antes de inicializar FlexSlider sólo la primera diapositiva ocupa espacio. */
body.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
	aspect-ratio: inherit;
}

body.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child) {
	position: absolute;
	inset: 0;
}

/*
 * FlexSlider ensancha el wrapper al 400% y calcula una altura inline a partir
 * de él. Sacarlo del flujo evita que esa anchura infle la galería en móvil.
 */
body.single-product .woocommerce-product-gallery .flex-viewport {
	position: relative !important;
	height: auto !important;
	container-type: inline-size;
}

body.single-product .woocommerce-product-gallery .flex-viewport > .woocommerce-product-gallery__wrapper {
	position: absolute !important;
	top: 0;
	left: 0;
	height: 100%;
	aspect-ratio: auto;
}

body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery__image > a {
	display: flex !important;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}

/* FlexSlider ensancha el wrapper al 400%; cada diapositiva usa el viewport. */
body.single-product .woocommerce-product-gallery .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
	width: 100cqi;
}

body.single-product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
}

/* La tipografia final del titulo no espera a la hoja dinamica de Divi. */
body.single-product .et_pb_wc_title_0_tb_body h1 {
	margin: 0 !important;
	padding: 0 !important;
	color: #8c756a !important;
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
	font-size: clamp(34px, 3vw, 44px) !important;
	font-weight: 700 !important;
	line-height: 1em !important;
	hyphens: none !important;
	overflow-wrap: normal !important;
	word-break: normal !important;
}

/* Reserva el carril antes de que FlexSlider genere las miniaturas. */
body.single-product.msc-product-has-gallery .woocommerce-product-gallery {
	--msc-gallery-thumb-size: 72px;
	padding-bottom: calc(var(--msc-gallery-thumb-size) + 12px);
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	height: var(--msc-gallery-thumb-size, 72px);
	margin: 0 !important;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs li,
body.single-product .woocommerce-product-gallery .flex-control-thumbs li:nth-of-type(4n) {
	flex: 0 0 var(--msc-gallery-thumb-size, 72px);
	width: var(--msc-gallery-thumb-size, 72px) !important;
	height: var(--msc-gallery-thumb-size, 72px);
	margin: 0 !important;
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Los productos relacionados mantienen una cuadrícula estable mientras cargan. */
body.single-product .related.products ul.products li.product a img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Reserva la cuadricula del catalogo antes de aplicar los estilos tardios de Divi. */
body.tax-product_cat ul.products li.product a img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

body.tax-product_cat ul.products li.product {
	float: left !important;
	clear: none !important;
	width: 20.875% !important;
	margin-right: 5.5% !important;
	margin-left: 0 !important;
}

body.tax-product_cat ul.products li.product:nth-child(4n) {
	margin-right: 0 !important;
}

body.tax-product_cat ul.products li.product:nth-child(4n + 1) {
	clear: both !important;
}

@media (max-width: 980px) {
	body.tax-product_cat ul.products li.product {
		width: 48% !important;
		margin-right: 4% !important;
	}

	body.tax-product_cat ul.products li.product:nth-child(2n) {
		float: right !important;
		clear: none !important;
		margin-right: 0 !important;
	}

	body.tax-product_cat ul.products li.product:nth-child(2n + 1) {
		float: left !important;
		clear: both !important;
		margin-right: 4% !important;
	}
}

@media (max-width: 767px) {
	body.single-product.msc-product-has-gallery .woocommerce-product-gallery {
		--msc-gallery-thumb-size: 58px;
	}
}

@supports not (aspect-ratio: 1 / 1) {
	body.page-id-6748 .et_pb_main_blurb_image,
	body.single-product .woocommerce-product-gallery__wrapper {
		min-height: 280px;
	}
}