/**
 * Dash Luxury Product — cuadrículas de producto (loops).
 * Fuerza un recorte uniforme (cover) con la proporción --dlp-loop-ratio
 * en TODAS las vistas de grid: tienda, categorías, relacionados y
 * carruseles de inicio (Urna/Elementor), sin tocar el tema.
 *
 * Se activa mediante la clase body.dlp-loops.
 */

:root {
	--dlp-loop-ratio: 4/5;
}

/* ==========================================================================
   1a) URNA: la caja de proporción REAL es .block-inner (la imagen va en
   absoluto dentro). Poner el ratio aquí evita que .block-inner colapse a 0
   —lo que descuadraba la tarjeta y ocultaba imagen/precio en móvil—.
   ========================================================================== */
body.dlp-loops .block-inner {
	aspect-ratio: var(--dlp-loop-ratio, 4/5) !important;
	position: relative !important;
	overflow: hidden !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	padding-bottom: 0 !important; /* anula el truco de ratio del tema */
	background: #f3f3f3;
}

/* La tarjeta es un flex y, al estar la imagen en absoluto (fuera de flujo),
   su ancho lo dictaba el largo del título: nombres cortos = tarjeta angosta.
   Forzamos que el contenido llene el ancho del bloque para que todas las
   miniaturas midan igual y queden alineadas. */
body.dlp-loops .product-block {
	align-items: stretch !important;
}

body.dlp-loops .product-block > .product-content {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	box-sizing: border-box !important;
}

body.dlp-loops .product-content > .block-inner {
	width: 100% !important;
}

body.dlp-loops .block-inner figure.image,
body.dlp-loops .block-inner a.product-image {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	margin: 0 !important;
	overflow: hidden !important;
}

body.dlp-loops .block-inner picture,
body.dlp-loops .block-inner img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center !important;
}

/* ==========================================================================
   1b) Otros temas SIN .block-inner: el propio <a>/<figure> es la caja.
   (Estas reglas quedan anuladas por las de .block-inner en Urna.)
   ========================================================================== */
body.dlp-loops a.product-image,
body.dlp-loops figure.image,
body.dlp-loops .product-image-wrapper,
body.dlp-loops li.product a.woocommerce-LoopProduct-link {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: var(--dlp-loop-ratio, 4/5);
	background: #f3f3f3;
}

body.dlp-loops a.product-image > picture,
body.dlp-loops li.product a.woocommerce-LoopProduct-link > picture {
	display: block;
	width: 100%;
	height: 100%;
}

body.dlp-loops a.product-image picture,
body.dlp-loops a.product-image img,
body.dlp-loops figure.image img,
body.dlp-loops .product-image-wrapper img,
body.dlp-loops li.product a.woocommerce-LoopProduct-link img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center !important;
	margin: 0 !important;
}

/* ==========================================================================
   2) WooCommerce estándar y bloques (sin "caja": la <img> lleva la proporción)
   ========================================================================== */
body.dlp-loops ul.products li.product > a > img,
body.dlp-loops ul.products li.product img.attachment-woocommerce_thumbnail,
body.dlp-loops .wc-block-grid__product-image img,
body.dlp-loops .wp-block-woocommerce-product-image img,
body.dlp-loops .wc-block-components-product-image img {
	aspect-ratio: var(--dlp-loop-ratio, 4/5) !important;
	width: 100% !important;
	height: auto !important;
	object-fit: cover !important;
	object-position: center !important;
}

/* ==========================================================================
   3) Zoom sutil SOLO en cuadrículas estándar de WooCommerce (que no tienen
      efecto de hover propio). En temas con doble imagen (Urna: .image-effect
      + .image-hover, que ya animan con transform propio) NO tocamos transform:
      hacerlo rompía el centrado translateX(-50%) de la imagen hover.
   ========================================================================== */
body.dlp-loops ul.products li.product > a > img {
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

body.dlp-loops ul.products li.product > a:hover > img {
	transform: scale(1.04);
}