/**
 * Product Video Gallery — frontend.
 *
 * Everything here is additive: it never redeclares the theme's .sp-thumb
 * or .sp-main-img-wrap rules (sizing, borders, spacing, active state all
 * still come from the theme's own single-product.php styles). This file
 * only styles the two new elements the plugin introduces: the play-icon
 * badge on a video thumbnail, and the video player stage.
 */

.pvg-video-thumb {
	position: relative;
	cursor: pointer;
	background: #000;
}

.pvg-video-thumb:focus-visible {
	outline: 2px solid var( --primary-brown, #6b4226 );
	outline-offset: 2px;
}

.pvg-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.55 );
	pointer-events: none;
}

.pvg-play-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 54%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent #fff;
	transform: translate( -50%, -50% );
}

.pvg-video-stage {
	display: none;
	width: 100%;
	height: 100%;
	background: #000;
}

.pvg-video-stage.pvg-active {
	display: block;
}

.pvg-video-stage iframe,
.pvg-video-stage video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	background: #000;
}

/* Matches the theme's mobile main-image fix (single-product.php): below
   768px the gallery box is short and full-width, so cover would crop the
   sides off a portrait self-hosted video the same way it did the product
   photo. contain letterboxes instead of cropping; the iframe is left on
   cover since YouTube already letterboxes its own player internally. */
@media ( max-width: 768px ) {
	.pvg-video-stage video {
		object-fit: contain;
	}
}