.lemon-product-hover-image {
	display: block;
	overflow: hidden;
	position: relative;
}

.lemon-product-hover-image__img {
	display: block;
	height: auto;
	transition: opacity 180ms ease, transform 220ms ease;
	width: 100%;
}

.lemon-product-hover-image__img--secondary {
	inset: 0;
	object-fit: cover;
	opacity: 0;
	position: absolute;
}

/*
 * Hover is scoped to each product's own image container, never to .product or
 * the link wrapper. Each .lemon-product-hover-image holds exactly one product's
 * two images, so the swap can never leak to other tiles regardless of how the
 * grid (theme or Elementor widget) wraps the products.
 */
.lemon-product-hover-image:hover .lemon-product-hover-image__img--primary,
.lemon-product-hover-image:focus-within .lemon-product-hover-image__img--primary {
	opacity: 0;
}

.lemon-product-hover-image:hover .lemon-product-hover-image__img--secondary,
.lemon-product-hover-image:focus-within .lemon-product-hover-image__img--secondary {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.lemon-product-hover-image__img {
		transition: none;
	}
}