/**
 * Lifestyle hover swap.
 *
 * The main product <img> defines the box (whatever size/ratio the theme renders
 * its cards at). The lifestyle <img> is layered on top and uses object-fit:cover
 * so it always fills that exact footprint — square or not — without distortion.
 * That means cropping is handled at display time: a non-square lifestyle photo is
 * centre-cropped to match the main thumbnail rather than stretching the card.
 */

.acvs-image-swap {
	position: relative;
	display: block;
	overflow: hidden;
}

/* Keep the main image as the layout-defining element. We deliberately do NOT
   force width/height here so a theme's own image sizing (e.g. fixed-ratio
   object-fit cards) is preserved when the swap span wraps it. */
.acvs-image-swap > img:first-child {
	display: block;
}

.acvs-lifestyle-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

/* Reveal on hover of the card, the wrapping link, or the image itself. The
   anchor selector keeps it working on custom themes whose card container is not
   li.product (the swap span and its parent <a> are always present). */
li.product:hover .acvs-lifestyle-image,
.wc-block-grid__product:hover .acvs-lifestyle-image,
a:hover .acvs-image-swap .acvs-lifestyle-image,
.acvs-image-swap:hover .acvs-lifestyle-image {
	opacity: 1;
}

/* Respect users who prefer no motion: instant swap, no fade. */
@media (prefers-reduced-motion: reduce) {
	.acvs-lifestyle-image {
		transition: none;
	}
}