/**
 * WC Hover Imagen — efecto fade de segunda imagen.
 * Compatible con Astra Free, Elementor (widget Productos) y temas estándar de WooCommerce.
 */

/* Contenedor de la imagen: necesario para superponer la segunda imagen.
   En vez de adivinar la clase del wrapper de cada tema/constructor, se detecta
   automáticamente el elemento que envuelve directamente nuestra segunda imagen,
   para no afectar a otros elementos (iconos de wishlist, vista rápida, etc.)
   que puedan compartir el mismo enlace. */
li.product :is(a, div):has( > img.wchi-second-image ) {
	position: relative;
	display: block;
	overflow: hidden;
}

/* Segunda imagen: superpuesta y oculta por defecto */
li.product .wchi-second-image {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: none;
	margin: 0 !important;
	transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
	z-index: 2;
	pointer-events: none;
}

/* Efecto Zoom: la segunda imagen entra ligeramente ampliada */
li.product .wchi-second-image.wchi-effect-zoom {
	transform: scale(1.1);
}

/* Efecto Deslizamiento: la segunda imagen entra desde la derecha */
li.product .wchi-second-image.wchi-effect-slide {
	transform: translateX(100%);
}

/* Al pasar el ratón: aparece la segunda imagen (cualquier efecto vuelve a su posición natural) */
li.product:hover .wchi-second-image {
	opacity: 1;
	transform: none;
}

/* Suavizar también la imagen principal (fade cruzado) */
li.product img.attachment-woocommerce_thumbnail,
li.product img.woocommerce-placeholder {
	transition: opacity 0.4s ease-in-out;
}

li.product:hover .wchi-second-image ~ img,
li.product a:hover img.attachment-woocommerce_thumbnail {
	opacity: 1; /* la principal permanece debajo; el fade lo hace la superpuesta */
}

/* En pantallas táctiles no hay hover real: desactivar para evitar
   que la imagen quede "pegada" tras un toque */
@media (hover: none) {
	li.product .wchi-second-image {
		display: none;
	}
}