/*
 * Product hover media
 *
 * The overlay (.dtew-hover) sits on top of the product's main image and is
 * invisible until the visitor hovers. It never intercepts clicks
 * (pointer-events: none), so the image link and any lightbox keep working.
 *
 * Specificity is kept low so Elementor and theme rules can still override.
 */

.dtew-has-hover {
	position: relative;
}

/* Loop thumbnails are wrapped in a span; make it behave like the image. */
.dtew-has-hover--loop {
	display: block;
}

.dtew-hover {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	overflow: hidden;
	/* Follow the host's rounded corners now that the host may not clip. */
	border-radius: inherit;
}

.dtew-hover img,
.dtew-hover video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.25s ease;
}

/* The fallback image only matters for reduced-motion visitors (below). */
.dtew-hover__img--fallback {
	display: none;
}

/*
 * Touch screens have no hover, and a :hover rule on them can "stick" after
 * a tap, so everything is scoped to devices that can really hover.
 */
@media (hover: hover) {
	/* Second image: pure CSS crossfade. */
	.dtew-has-hover:hover .dtew-hover--image .dtew-hover__img,
	.dtew-has-hover:focus-within .dtew-hover--image .dtew-hover__img {
		opacity: 1;
	}

	/* Video: only fades in once frames are actually playing (the script
	   adds .is-playing), so a slow connection never shows a black box. */
	.dtew-has-hover.is-playing .dtew-hover__video {
		opacity: 1;
	}
}

/* Visitors who prefer reduced motion get the second image instead of the
   video, if one was uploaded. */
@media (prefers-reduced-motion: reduce) {
	.dtew-hover__video {
		display: none;
	}

	.dtew-hover__img--fallback {
		display: block;
	}

	.dtew-hover img,
	.dtew-hover video {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) and (hover: hover) {
	.dtew-has-hover:hover .dtew-hover--video .dtew-hover__img--fallback,
	.dtew-has-hover:focus-within .dtew-hover--video .dtew-hover__img--fallback {
		opacity: 1;
	}
}

/* ==========================================================================
 * Keep the main image visible, shrunk into a corner
 *
 * The host gets .dtew-has-hover--keep plus three data attributes (position,
 * animation, speed) and two inline variables (--dtew-main-scale, --dtew-bleed)
 * from PHP. The main image is lifted above the overlay and animated with a
 * transform only (no layout changes), anchored at the chosen corner.
 * ========================================================================== */

.dtew-has-hover--keep {
	--dtew-main-scale: 0.35;
	--dtew-bleed-x: 0px;
	--dtew-bleed-y: 0px;
	--dtew-z: 20;
	--dtew-origin: 100% 100%;
	--dtew-tx: 1;
	--dtew-ty: 1;
	--dtew-main-time: 0.45s;
	--dtew-main-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dtew-has-hover--keep[data-dtew-pos="bl"] { --dtew-origin: 0% 100%;   --dtew-tx: -1; --dtew-ty: 1; }
.dtew-has-hover--keep[data-dtew-pos="bc"] { --dtew-origin: 50% 100%;  --dtew-tx: 0;  --dtew-ty: 1; }
.dtew-has-hover--keep[data-dtew-pos="tr"] { --dtew-origin: 100% 0%;   --dtew-tx: 1;  --dtew-ty: -1; }
.dtew-has-hover--keep[data-dtew-pos="tl"] { --dtew-origin: 0% 0%;     --dtew-tx: -1; --dtew-ty: -1; }

.dtew-has-hover--keep[data-dtew-anim="springy"] { --dtew-main-ease: cubic-bezier(0.34, 1.56, 0.64, 1); }

.dtew-has-hover--keep[data-dtew-speed="fast"] { --dtew-main-time: 0.25s; }
.dtew-has-hover--keep[data-dtew-speed="slow"] { --dtew-main-time: 0.8s; }

/* The main image rides above the overlay so it can float over it. */
.dtew-has-hover--keep .dtew-hover {
	z-index: 1;
}

.dtew-has-hover--keep img:not(.dtew-hover__img):not(.zoomImg) {
	position: relative;
	z-index: 2;
	transform-origin: var(--dtew-origin);
	transition: transform var(--dtew-main-time) var(--dtew-main-ease);
	will-change: transform;
}

/* Overhang: let the shrunk image poke out of the frame. */
/* Doubled class + !important: themes and custom CSS commonly put
   overflow:hidden (for rounded corners) on the gallery image wrapper, which
   would clip the overhang and make the z-index look ignored. */
.dtew-has-hover.dtew-has-hover--bleed {
	overflow: visible !important;
	/* A number (not auto) so the layer change can be delayed below. */
	z-index: 0;
	/* On the way out, keep the raised layer until the shrink-back finishes,
	   so the image doesn't dip behind neighbours mid-animation. */
	transition: z-index 0s var(--dtew-main-time, 0.45s);
}

.woocommerce-product-gallery:has(.dtew-has-hover--bleed),
.woocommerce-product-gallery:has(.dtew-has-hover--bleed) .flex-viewport,
.woocommerce-product-gallery:has(.dtew-has-hover--bleed) .woocommerce-product-gallery__wrapper,
li.product:has(.dtew-has-hover--bleed) {
	overflow: visible !important;
}

/* A hovered loop item that gains a transform (e.g. a lift-on-hover card)
   becomes its own layer; keep it above its neighbours so the overhang shows. */
li.product:has(.dtew-has-hover--bleed:hover) {
	position: relative;
	z-index: 10;
}

@media (hover: hover) {
	/* Shrunk state. Image effect: while hovered. Video effect: once playing,
	   so a slow or failed video never leaves the product shrunk and empty. */
	.dtew-has-hover--keep.dtew-has-hover--image:hover img:not(.dtew-hover__img):not(.zoomImg),
	.dtew-has-hover--keep.dtew-has-hover--image:focus-within img:not(.dtew-hover__img):not(.zoomImg),
	.dtew-has-hover--keep.dtew-has-hover--video.is-playing img:not(.dtew-hover__img):not(.zoomImg) {
		transform:
			translate(
				calc(var(--dtew-bleed-x, 0px) * var(--dtew-tx)),
				calc(var(--dtew-bleed-y, 0px) * var(--dtew-ty))
			)
			scale(var(--dtew-main-scale, 0.35));
	}

	/* Float above neighbouring products while overhanging. */
	.dtew-has-hover.dtew-has-hover--bleed:hover,
	.dtew-has-hover.dtew-has-hover--bleed:focus-within,
	.dtew-has-hover.dtew-has-hover--bleed.is-playing {
		z-index: var(--dtew-z, 20);
		/* Applies instantly on the way in. */
		transition: z-index 0s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dtew-has-hover--keep img:not(.dtew-hover__img):not(.zoomImg) {
		transition: none;
		will-change: auto;
	}
}

/* Reduced motion plays no video, so a video product that has a fallback
   image shrinks on plain hover, like the image effect. */
@media (prefers-reduced-motion: reduce) and (hover: hover) {
	.dtew-has-hover--keep.dtew-has-hover--video.dtew-has-hover--fallback:hover img:not(.dtew-hover__img):not(.zoomImg),
	.dtew-has-hover--keep.dtew-has-hover--video.dtew-has-hover--fallback:focus-within img:not(.dtew-hover__img):not(.zoomImg) {
		transform:
			translate(
				calc(var(--dtew-bleed-x, 0px) * var(--dtew-tx)),
				calc(var(--dtew-bleed-y, 0px) * var(--dtew-ty))
			)
			scale(var(--dtew-main-scale, 0.35));
	}
}

/* ==========================================================================
 * Play badge: a small icon on video products so visitors know the image
 * does something. Sits in the top-right corner, or top-left when the shrunk
 * image is parked on the right. Fades out once the video is playing.
 * ========================================================================== */

.dtew-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(24, 63, 52, 0.82);
	color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.dtew-badge svg {
	display: block;
	width: 13px;
	height: 13px;
	margin-left: 2px; /* optically centre the triangle */
}

.dtew-has-hover--keep[data-dtew-pos="tr"] .dtew-badge,
.dtew-has-hover--keep[data-dtew-pos="br"] .dtew-badge {
	right: auto;
	left: 10px;
}

.dtew-has-hover.is-playing .dtew-badge {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.dtew-badge {
		transition: none;
	}
}