/**
 * Frontend Styles for WooCommerce Product Preview Videos
 */

/* The wrapper must act as a precise bounding box without shifting the layout */
.kfx-preview-wrapper {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: inherit;
	width: 100%;
	/* We rely on the image height to dictate the container height automatically to prevent CLS */
}

/* The native product image acts as the layout anchor */
.kfx-preview-wrapper img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: opacity var(--kfx-fade-duration, 300ms) ease;
	/* Force GPU Acceleration */
	transform: translateZ(0);
	backface-visibility: hidden;
}

/* The video element is absolute, covering the wrapper entirely */
.kfx-preview-wrapper video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 2;
	opacity: 0;
	transition: opacity var(--kfx-fade-duration, 300ms) ease;
	/* Let hover events pass through directly to the wrapper */
	pointer-events: none; 
	/* Force GPU Acceleration */
	transform: translateZ(0);
	backface-visibility: hidden;
	border-radius: inherit;
}

/* Active State: applied by JS after the hover delay */
.kfx-preview-wrapper.kfx-video-active img {
	opacity: 0;
}

.kfx-preview-wrapper.kfx-video-active video {
	opacity: 1;
}