/* TP Product Image Flipper for WooCommerce - Static Site Fix */

/* The .tp-image-wrapper holds two images: primary (.tp-image) and hover (.tp-image-hover).
   The figure.ws-product-empty-bg is used as a placeholder for layout sizing.
   We need to:
   1. Make .tp-image-wrapper a positioned container for the overlay
   2. Hide .tp-image-hover by default and show on hover
   3. Hide the redundant figure.ws-product-empty-bg (it duplicates the primary image)
*/

.tp-image-wrapper {
	position: relative;
	overflow: hidden;
	display: block;
}

.tp-image-wrapper .tp-image {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.3s ease;
}

.tp-image-wrapper .tp-image-hover {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.woocommerce-LoopProduct-link:hover .tp-image-wrapper .tp-image-hover,
.woocommerce-LoopProduct-link:focus .tp-image-wrapper .tp-image-hover {
	opacity: 1;
}

/* Hide the redundant figure placeholder image — layout is handled by .tp-image */
figure.ws-product-empty-bg {
	display: none;
}