/*
 * ============================================================================
 * Fix: panel del hover en el listado de productos (descripción corta)
 * ============================================================================
 *
 * PROBLEMA
 * El recuadro blanco del hover (.product-content-fade) no tiene forma de saber
 * cuánto mide la descripción: lo estiraba un JS del tema padre que mide el alto
 * del .product-footer UNA sola vez, en document.ready:
 *
 *     machic/assets/js/custom/productHover.js:23
 *     outerHeight += self.outerHeight();
 *     contentBlock.css( 'marginBottom', -outerHeight );
 *
 * No hay recálculo en window.load, ni en resize, ni cuando cargan las fuentes.
 * Por eso cualquier cambio de layout posterior al DOM ready dejaba el recuadro
 * con el alto viejo y la descripción quedaba afuera, encima de la fila de abajo
 * (el .product-footer no tiene fondo propio). Los disparadores habituales:
 *   - las imágenes del loop no traen width/height -> la barra de scroll aparece
 *     recién cuando cargan -> la grilla se angosta -> el texto rompe una línea
 *     más (por eso pasaba con caché fría y no con caché tibia);
 *   - las fuentes Typekit (font-display:auto) llegan después del ready;
 *   - redimensionar la ventana o cambiar el zoom.
 *
 * SOLUCIÓN
 * Que el propio .product-footer pinte el panel (fondo, borde, sombra y esquinas
 * inferiores). Así se adapta solo al alto real del texto, sin depender de
 * ninguna medición: el bug no puede volver por timing. Se anula el margen que
 * sigue aplicando el JS para que no quede un borde doble.
 *
 * No se tocó ningún archivo del tema padre.
 * ============================================================================
 */

@media (min-width: 601px) {

	/* 1) El recuadro blanco deja de estirarse por JS (anula el style inline). */
	.products .product-content-fade {
		margin-bottom: 0 !important;
	}

	/* 2) El footer del hover se pinta a sí mismo, con el alto real del texto.
	      Los -10px de cada lado y el radio de 8px son los mismos valores que
	      usa .product-content-fade, para que se vea como un solo panel; los
	      10px de padding compensan el ensanchado y mantienen el texto alineado
	      con el contenido de la tarjeta. */
	.products:not(.list-view-products) .product .product-footer {
		left: -10px;
		right: -10px;
		padding-left: 10px;
		padding-right: 10px;
		background-color: var(--color-background, #fff);
		border: 1px solid var(--color-product-fade-border, #e0e5ea);
		border-radius: 0 0 8px 8px;
		box-shadow: 0 14px 24px -12px rgba(62, 68, 90, 0.18);
	}
}

/* 3) Contextos donde el .product-footer NO es un overlay (el tema lo pone en
      position:relative): ahí no corresponde panel y se deja como estaba. */
.product-carousel .product-footer,
.disable-hover .product-footer {
	left: 0 !important;
	right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	background: none !important;
	border-left: 0 !important;
	border-right: 0 !important;
	border-bottom: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}