/**
 * SEIK Product Gallery Video Enhancements (SEIK Flatsome Style)
 *
 * 1. Keeps the main product <img> in normal document flow (position: relative, height: auto)
 *    so the gallery slide and Flickity viewport NEVER collapse or hide the product photo.
 * 2. Frames the video overlay (.fvp-video-wrap / .fvp-video) in full vertical portrait
 *    (width: 100%, height: 100%, object-fit: cover), cropping out any 16:9 blurred sidebars.
 * 3. Preserves native Flickity horizontal touch swiping and suppresses browser long-press
 *    image callout menus so Instagram-style hold-to-play works cleanly.
 * 4. Styles the Video/Photo toggle and Volume button in authentic SEIK Flatsome style:
 *    monochromatic #000000 / #ffffff, 1px solid #000000 borders, 0px border-radius,
 *    SEIK-font 400 typography, and crisp thin-stroke line icons.
 *
 * @package SeikTheme
 */

/* ==========================================================================
   1. Gallery Container, Touch Swipe & Long-Press Support
   ========================================================================== */
.woocommerce-product-gallery .fvp-featured-item-wrap {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	overflow: hidden !important;
	border-radius: 0 !important;
	-webkit-touch-callout: none !important;
	-webkit-user-select: none !important;
	user-select: none !important;
	touch-action: pan-y pinch-zoom !important;
}

.woocommerce-product-gallery .fvp-featured-item-wrap > img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	-webkit-touch-callout: none !important;
	-webkit-user-select: none !important;
	user-select: none !important;
	-webkit-user-drag: none !important;
	pointer-events: auto !important;
}

/* Video overlay sits strictly on top of the in-flow <img> with pointer-events: none so Flickity swipes pass through */
.woocommerce-product-gallery .fvp-featured-item-wrap .fvp-video-wrap {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 4 !important;
	overflow: hidden !important;
	border-radius: 0 !important;
	transition: opacity 0.28s ease !important;
	pointer-events: none !important;
}

.woocommerce-product-gallery .fvp-featured-item-wrap .fvp-video-wrap:not(.seik-video-visible) {
	opacity: 0 !important;
	visibility: hidden !important;
}

.woocommerce-product-gallery .fvp-featured-item-wrap .fvp-video-wrap.seik-video-visible {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Full-frame portrait video (crops blurred 16:9 sidebars, fills entire product image box) */
.woocommerce-product-gallery .fvp-featured-item-wrap .fvp-video,
.woocommerce-product-gallery .fvp-featured-item-wrap .fvp-video-wrap iframe,
.woocommerce-product-gallery .fvp-featured-item-wrap .fvp-video-wrap .fvp-direct-iframe {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 100% !important;
	min-height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center center !important;
	transform: none !important;
	display: block !important;
	border: 0 !important;
	border-radius: 0 !important;
	pointer-events: none !important;
}

/* ==========================================================================
   2. Eliminate Duplicate Close / Control Boxes (Desktop & Mobile)
   ========================================================================== */
.mfp-iframe-holder .mfp-iframe-scaler .mfp-close,
.mfp-iframe-scaler div.mfp-close {
	display: none !important;
}

.has-product-video .mfp-iframe-holder .mfp-content {
	max-width: 420px !important;
}
.has-product-video .mfp-iframe-scaler {
	padding-top: 177.77% !important;
}

.woocommerce-product-gallery .fvp-controls,
.woocommerce-product-gallery .fvp-contr-btn,
.woocommerce-product-gallery .fvp-lightbox-icon,
.woocommerce-product-gallery .fvp-link-icon,
.woocommerce-product-gallery .fvp-product-icon,
.woocommerce-product-gallery .fvp-blocker {
	display: none !important;
}

.woocommerce-product-gallery:has(.fvp-featured-item-wrap) .button.open-video.product-video-popup {
	display: none !important;
}

/* ==========================================================================
   3. SEIK Minimalist Line Icons (Video Toggle & Volume Button)
   ========================================================================== */
/* Volume toggle button — pure minimalist white line icon, no frame, no blur */
.woocommerce-product-gallery .fvp-featured-item-wrap .fvp-product-volume-btn {
	position: absolute !important;
	bottom: 12px !important;
	right: 12px !important;
	top: auto !important;
	left: auto !important;
	z-index: 25 !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transition: opacity 0.2s ease, transform 0.15s ease !important;
}

.woocommerce-product-gallery .fvp-featured-item-wrap.fvp-featured-item-active .fvp-product-volume-btn,
.woocommerce-product-gallery .fvp-featured-item-wrap.seik-video-playing .fvp-product-volume-btn {
	opacity: 1 !important;
	pointer-events: auto !important;
}

.woocommerce-product-gallery .fvp-featured-item-wrap .fvp-product-volume-btn:hover,
.woocommerce-product-gallery .fvp-featured-item-wrap .fvp-product-volume-btn:active {
	background: transparent !important;
	transform: scale(1.08);
}

.woocommerce-product-gallery .fvp-featured-item-wrap .fvp-product-volume-btn svg {
	width: 22px !important;
	height: 22px !important;
	display: block !important;
	stroke: #ffffff !important;
	fill: none !important;
	pointer-events: none !important;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
}

.woocommerce-product-gallery .fvp-featured-item-wrap .fvp-product-volume-btn img.fvp-volume-icon {
	display: none !important;
}

.woocommerce-product-gallery .fvp-featured-item-wrap .fvp-product-volume-btn:not(.is-unmuted) .seik-vol-icon-mute {
	display: block !important;
}
.woocommerce-product-gallery .fvp-featured-item-wrap .fvp-product-volume-btn:not(.is-unmuted) .seik-vol-icon-unmute {
	display: none !important;
}
.woocommerce-product-gallery .fvp-featured-item-wrap .fvp-product-volume-btn.is-unmuted .seik-vol-icon-mute {
	display: none !important;
}
.woocommerce-product-gallery .fvp-featured-item-wrap .fvp-product-volume-btn.is-unmuted .seik-vol-icon-unmute {
	display: block !important;
}

/* Mobile Video toggle button — pure minimalist white line icon, no frame, no blur */
.seik-mobile-video-pill {
	display: none;
}

@media (max-width: 849px) {
	.woocommerce-product-gallery .fvp-featured-item-wrap .seik-mobile-video-pill {
		position: absolute !important;
		bottom: 12px !important;
		left: 12px !important;
		z-index: 25 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 0 !important;
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		min-height: 36px !important;
		padding: 0 !important;
		margin: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		cursor: pointer !important;
		user-select: none !important;
		-webkit-tap-highlight-color: transparent !important;
		transition: transform 0.15s ease, opacity 0.2s ease !important;
	}

	.woocommerce-product-gallery .fvp-featured-item-wrap .seik-mobile-video-pill:hover,
	.woocommerce-product-gallery .fvp-featured-item-wrap .seik-mobile-video-pill:active,
	.woocommerce-product-gallery .fvp-featured-item-wrap.seik-longpress-active .seik-mobile-video-pill {
		background: transparent !important;
		transform: scale(1.08);
	}

	.woocommerce-product-gallery .fvp-featured-item-wrap .seik-mobile-video-pill .seik-pill-label {
		display: none !important;
	}

	.woocommerce-product-gallery .fvp-featured-item-wrap .seik-mobile-video-pill .seik-pill-icon {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		line-height: 0 !important;
	}

	.woocommerce-product-gallery .fvp-featured-item-wrap .seik-mobile-video-pill svg {
		width: 22px !important;
		height: 22px !important;
		display: block !important;
		stroke: #ffffff !important;
		fill: none !important;
		flex-shrink: 0 !important;
		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
	}
}