/* Keep the alternate image in the same box as the product's main image. */
.products li.product .woocommerce-loop-product__link,
.products li.product .woocommerce-LoopProduct-link {
		position: relative;
		display: block;
		overflow: hidden;
}

.products li.product .wcpi-product-hover-image {
		position: absolute;
		inset: 0;
		z-index: 2;
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		object-fit: cover;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 420ms ease-in-out, visibility 420ms ease-in-out;
}

/* Hover works for mouse/trackpad; focus-within also covers keyboard users. */
.products li.product:focus-within .wcpi-product-hover-image {
		opacity: 1;
		visibility: visible;
}

@media (hover: hover) {
	.products li.product:hover .wcpi-product-hover-image {
			opacity: 1;
			visibility: visible;
	}
}

@media (prefers-reduced-motion: reduce) {
	.products li.product .wcpi-product-hover-image {
			transition: none;
		}
}