/**
 * Insias Product Hover Image - Frontend Styles
 *
 * Designed for WooCommerce, Astra Theme, and Elementor Pro Loop Grid.
 */

:root {
	--iphi-duration: 250ms;
	--iphi-easing: ease-in-out;
}

/* Image Wrapper: Preserves natural dimensions and prevents any layout shift */
.iphi-image-wrapper {
	position: relative !important;
	display: block !important;
	overflow: hidden !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
	box-sizing: border-box !important;
	border-radius: inherit;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

/* Primary Image / Picture inside wrapper */
.iphi-image-wrapper > img:not(.iphi-secondary-image),
.iphi-image-wrapper > picture,
.iphi-image-wrapper > picture > img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	border-radius: inherit;
	vertical-align: middle;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Secondary Hover Image: Absolute overlay on top of primary image */
.iphi-secondary-image {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: inherit;
	pointer-events: none !important; /* Clicks pass straight through to link or card */
	box-sizing: border-box !important;
	z-index: 2 !important;
	will-change: opacity, transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Object Fit Variations */
.iphi-fit-cover .iphi-secondary-image {
	object-fit: cover !important;
}

.iphi-fit-contain .iphi-secondary-image {
	object-fit: contain !important;
}

.iphi-fit-fill .iphi-secondary-image {
	object-fit: fill !important;
}

/* -------------------------------------------------------------
   Hover Effect: Fade (Default)
   ------------------------------------------------------------- */
.iphi-effect-fade .iphi-secondary-image {
	opacity: 0;
	transition: opacity var(--iphi-duration, 250ms) var(--iphi-easing, ease-in-out);
}

.iphi-image-wrapper:hover .iphi-effect-fade .iphi-secondary-image,
.iphi-effect-fade:hover .iphi-secondary-image,
li.product:hover .iphi-effect-fade .iphi-secondary-image,
.product.type-product:hover .iphi-effect-fade .iphi-secondary-image,
.woocommerce-loop-product:hover .iphi-effect-fade .iphi-secondary-image,
.e-loop-item:hover .iphi-effect-fade .iphi-secondary-image,
.elementor-widget-woocommerce-products .product:hover .iphi-effect-fade .iphi-secondary-image,
.ast-woocommerce-container .product:hover .iphi-effect-fade .iphi-secondary-image,
.wc-block-grid__product:hover .iphi-effect-fade .iphi-secondary-image,
.iphi-image-wrapper.iphi-active .iphi-effect-fade .iphi-secondary-image {
	opacity: 1;
}

/* -------------------------------------------------------------
   Hover Effect: Instant
   ------------------------------------------------------------- */
.iphi-effect-instant .iphi-secondary-image {
	opacity: 0;
	visibility: hidden;
	transition: none !important;
}

.iphi-image-wrapper:hover .iphi-effect-instant .iphi-secondary-image,
.iphi-effect-instant:hover .iphi-secondary-image,
li.product:hover .iphi-effect-instant .iphi-secondary-image,
.product.type-product:hover .iphi-effect-instant .iphi-secondary-image,
.woocommerce-loop-product:hover .iphi-effect-instant .iphi-secondary-image,
.e-loop-item:hover .iphi-effect-instant .iphi-secondary-image,
.elementor-widget-woocommerce-products .product:hover .iphi-effect-instant .iphi-secondary-image,
.ast-woocommerce-container .product:hover .iphi-effect-instant .iphi-secondary-image,
.wc-block-grid__product:hover .iphi-effect-instant .iphi-secondary-image,
.iphi-image-wrapper.iphi-active .iphi-effect-instant .iphi-secondary-image {
	opacity: 1;
	visibility: visible;
}

/* -------------------------------------------------------------
   Hover Effect: Zoom
   ------------------------------------------------------------- */
.iphi-effect-zoom .iphi-secondary-image {
	opacity: 0;
	transform: scale(1.08);
	transition: opacity var(--iphi-duration, 250ms) var(--iphi-easing, ease-in-out),
	            transform var(--iphi-duration, 250ms) var(--iphi-easing, ease-in-out);
}

.iphi-image-wrapper:hover .iphi-effect-zoom .iphi-secondary-image,
.iphi-effect-zoom:hover .iphi-secondary-image,
li.product:hover .iphi-effect-zoom .iphi-secondary-image,
.product.type-product:hover .iphi-effect-zoom .iphi-secondary-image,
.woocommerce-loop-product:hover .iphi-effect-zoom .iphi-secondary-image,
.e-loop-item:hover .iphi-effect-zoom .iphi-secondary-image,
.elementor-widget-woocommerce-products .product:hover .iphi-effect-zoom .iphi-secondary-image,
.ast-woocommerce-container .product:hover .iphi-effect-zoom .iphi-secondary-image,
.wc-block-grid__product:hover .iphi-effect-zoom .iphi-secondary-image,
.iphi-image-wrapper.iphi-active .iphi-effect-zoom .iphi-secondary-image {
	opacity: 1;
	transform: scale(1);
}

/* -------------------------------------------------------------
   Hover Effect: Slide
   ------------------------------------------------------------- */
.iphi-effect-slide .iphi-secondary-image {
	opacity: 0;
	transform: translateX(100%);
	transition: opacity var(--iphi-duration, 250ms) var(--iphi-easing, ease-in-out),
	            transform var(--iphi-duration, 250ms) var(--iphi-easing, ease-in-out);
}

.iphi-image-wrapper:hover .iphi-effect-slide .iphi-secondary-image,
.iphi-effect-slide:hover .iphi-secondary-image,
li.product:hover .iphi-effect-slide .iphi-secondary-image,
.product.type-product:hover .iphi-effect-slide .iphi-secondary-image,
.woocommerce-loop-product:hover .iphi-effect-slide .iphi-secondary-image,
.e-loop-item:hover .iphi-effect-slide .iphi-secondary-image,
.elementor-widget-woocommerce-products .product:hover .iphi-effect-slide .iphi-secondary-image,
.ast-woocommerce-container .product:hover .iphi-effect-slide .iphi-secondary-image,
.wc-block-grid__product:hover .iphi-effect-slide .iphi-secondary-image,
.iphi-image-wrapper.iphi-active .iphi-effect-slide .iphi-secondary-image {
	opacity: 1;
	transform: translateX(0);
}

/* -------------------------------------------------------------
   Mobile & Touch Safe Behavior
   ------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
	/* If mobile hover is disabled */
	body.iphi-mobile-disabled .iphi-secondary-image {
		display: none !important;
	}

	/* Optional mobile switch button when mobile hover is enabled */
	.iphi-mobile-switch {
		position: absolute;
		bottom: 8px;
		right: 8px;
		z-index: 10;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.9);
		border: 1px solid rgba(0, 0, 0, 0.1);
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		pointer-events: auto;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
		transition: background 0.2s, transform 0.2s;
	}

	.iphi-mobile-switch:active {
		transform: scale(0.92);
		background: #ffffff;
	}

	.iphi-mobile-switch svg {
		width: 16px;
		height: 16px;
		fill: currentColor;
	}
}

/* Ensure badges, quick view, and variation buttons remain above hover image */
.woocommerce-badges,
.onsale,
.ast-onsale-card,
.ast-quick-view-trigger,
.yith-wcqv-button,
.tinv-wraper,
.woocommerce span.onsale {
	z-index: 5 !important;
}