/*
 * WC Featured Product Video
 * Version 1.0.1
 *
 * Isolation guarantee:
 * Every selector is scoped under body.single-product AND the native
 * .woocommerce-product-gallery container. No shop/archive/product-card selector
 * is targeted by this stylesheet.
 */

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image.wcfpv-has-video {
	position: relative;
	overflow: hidden;
}

/*
 * Keep the native featured image in the DOM so WooCommerce/Elementor gallery
 * sizing, thumbnails and JS keep working, but hide it visually under the video.
 */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image.wcfpv-has-video > a {
	visibility: hidden;
	pointer-events: none;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image.wcfpv-has-video .wcfpv-video {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	background: transparent;
}

.single-product .wcfpv-shortcode-wrap {
	position: relative;
	width: 100%;
}

.single-product .wcfpv-shortcode-wrap .wcfpv-video {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

/*
 * Variation-image compatibility (v1.1.0)
 *
 * When WooCommerce selects a variation that has its own explicitly assigned
 * image, its native variation script updates the first gallery image. This
 * state temporarily reveals that native image and hides/pauses our video.
 * Selecting a variation with no own image (or resetting the form) restores
 * the featured video.
 */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image.wcfpv-has-video.wcfpv-show-variation-image > a {
	visibility: visible;
	pointer-events: auto;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image.wcfpv-has-video.wcfpv-show-variation-image .wcfpv-video {
	display: none;
}