/**
 * Dynamic Product Image for Elementor
 * Frontend Styles
 *
 * @package DynamicProductImage
 * @version 1.0.0
 *
 * Architecture:
 *  - All transitions use CSS custom properties set via PHP inline style.
 *  - Only compositor properties (opacity, transform, clip-path) are animated.
 *  - prefers-reduced-motion: all transitions are disabled.
 *  - No !important used except for reduced-motion override.
 */

/* =============================================================================
   Base wrapper
   ============================================================================= */

.dpi-product-image {
	display: block;
	width: 100%;
}

.dpi-image-wrapper {
	position: relative;
	display: inline-block;
	width: 100%;
	overflow: hidden;
	/* CSS custom properties with safe fallbacks */
	--dpi-duration: 400ms;
	--dpi-easing:   ease;
	--dpi-zoom:     1.08;
}

.dpi-image-link {
	display: block;
	width: 100%;
	line-height: 0;
}

/* Images */
.dpi-image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* When aspect-ratio is set, images fill the container */
.dpi-image-wrapper[style*="aspect-ratio"] .dpi-image {
	position: absolute;
	inset: 0;
	height: 100%;
	object-fit: cover;
}

/* =============================================================================
   Hover image — hidden by default
   ============================================================================= */

.dpi-image--hover {
	position: absolute;
	inset: 0;
	height: 100%;
	object-fit: cover;
	will-change: opacity, transform;
}

/* =============================================================================
   Effect: Fade (default)
   ============================================================================= */

.dpi-effect--fade .dpi-image--hover {
	opacity: 0;
	transition: opacity var(--dpi-duration) var(--dpi-easing);
}

.dpi-effect--fade .dpi-image-wrapper:hover .dpi-image--hover,
.dpi-effect--fade .dpi-image-wrapper.dpi-touch-hover .dpi-image--hover {
	opacity: 1;
}

/* =============================================================================
   Effect: Zoom Fade
   ============================================================================= */

.dpi-effect--zoom-fade .dpi-image--hover {
	opacity: 0;
	transform: scale( var(--dpi-zoom) );
	transition:
		opacity   var(--dpi-duration) var(--dpi-easing),
		transform var(--dpi-duration) var(--dpi-easing);
}

.dpi-effect--zoom-fade .dpi-image-wrapper:hover .dpi-image--hover,
.dpi-effect--zoom-fade .dpi-image-wrapper.dpi-touch-hover .dpi-image--hover {
	opacity: 1;
	transform: scale(1);
}

/* =============================================================================
   Effect: Slide (left → right reveal)
   ============================================================================= */

.dpi-effect--slide .dpi-image--hover {
	transform: translateX(100%);
	transition: transform var(--dpi-duration) var(--dpi-easing);
}

.dpi-effect--slide .dpi-image-wrapper:hover .dpi-image--hover,
.dpi-effect--slide .dpi-image-wrapper.dpi-touch-hover .dpi-image--hover {
	transform: translateX(0);
}

/* =============================================================================
   Effect: Reveal (clip-path wipe)
   ============================================================================= */

.dpi-effect--reveal .dpi-image--hover {
	clip-path: inset(0 100% 0 0);
	transition: clip-path var(--dpi-duration) var(--dpi-easing);
}

.dpi-effect--reveal .dpi-image-wrapper:hover .dpi-image--hover,
.dpi-effect--reveal .dpi-image-wrapper.dpi-touch-hover .dpi-image--hover {
	clip-path: inset(0 0% 0 0);
}

/* =============================================================================
   Effect: Crossfade (primary fades out, hover fades in simultaneously)
   ============================================================================= */

.dpi-effect--crossfade .dpi-image--primary {
	transition: opacity var(--dpi-duration) var(--dpi-easing);
}

.dpi-effect--crossfade .dpi-image--hover {
	opacity: 0;
	transition: opacity var(--dpi-duration) var(--dpi-easing);
}

.dpi-effect--crossfade .dpi-image-wrapper:hover .dpi-image--primary,
.dpi-effect--crossfade .dpi-image-wrapper.dpi-touch-hover .dpi-image--primary {
	opacity: 0;
}

.dpi-effect--crossfade .dpi-image-wrapper:hover .dpi-image--hover,
.dpi-effect--crossfade .dpi-image-wrapper.dpi-touch-hover .dpi-image--hover {
	opacity: 1;
}

/* =============================================================================
   Keyboard focus — same visual as hover (accessibility)
   ============================================================================= */

.dpi-effect--fade .dpi-image-wrapper:focus-within .dpi-image--hover,
.dpi-effect--zoom-fade .dpi-image-wrapper:focus-within .dpi-image--hover,
.dpi-effect--slide .dpi-image-wrapper:focus-within .dpi-image--hover,
.dpi-effect--reveal .dpi-image-wrapper:focus-within .dpi-image--hover,
.dpi-effect--crossfade .dpi-image-wrapper:focus-within .dpi-image--hover {
	opacity: 1;
	transform: none;
	clip-path: none;
}

.dpi-effect--crossfade .dpi-image-wrapper:focus-within .dpi-image--primary {
	opacity: 0;
}

/* Focus outline on the link */
.dpi-image-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* =============================================================================
   Reduced motion — disable all transitions
   ============================================================================= */

@media ( prefers-reduced-motion: reduce ) {
	.dpi-image--hover,
	.dpi-image--primary,
	.dpi-image-wrapper::after {
		transition: none !important;
		animation: none !important;
	}
}

/* =============================================================================
   Touch devices — only tap-activated hover shown
   Hide pointer-based hover feedback for pure touch
   ============================================================================= */

/* Touch class is added by JS on first touchstart */
.dpi-touch-device .dpi-image-wrapper:hover .dpi-image--hover {
	opacity: 0;
	transform: initial;
	clip-path: initial;
}

.dpi-touch-device .dpi-effect--crossfade .dpi-image-wrapper:hover .dpi-image--primary {
	opacity: 1;
}

/* .dpi-touch-hover is added/removed by JS on tap */
.dpi-touch-device .dpi-image-wrapper.dpi-touch-hover .dpi-image--hover {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
}

.dpi-touch-device .dpi-effect--crossfade .dpi-image-wrapper.dpi-touch-hover .dpi-image--primary {
	opacity: 0 !important;
}

/* =============================================================================
   Editor placeholder
   ============================================================================= */

.dpi-editor-placeholder {
	box-sizing: border-box;
}


/* =============================================================================
   Discount Badge Widget
   ============================================================================= */

.dpi-discount-badge-wrap {
	display: block;
}

.dpi-discount-badge {
	display: inline-block;
	background-color: #e86464;
	color: #ffffff;
	padding: 4px 10px;
	border-radius: 4px;
	font-weight: 700;
	line-height: 1.4;
	vertical-align: middle;
	white-space: nowrap;
}