/**
 * Product video slide — poster + play overlay inside the WooCommerce gallery,
 * and a play badge on the matching thumbnail. Matches the previous
 * VideographyWP look (red YouTube-style glyph) for zero visual regression.
 */

.hs-product-video-slide {
	position: relative;
}

/* The poster is a CSS background (not an <img>) so WooCommerce excludes this
   slide from its lightbox — see product-video.php. 16:9 matches the YouTube
   poster, so the box is the same height the <img> produced before. */
.hs-product-video-slide__play {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: #000;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	cursor: pointer;
}

.hs-product-video-slide__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 48px;
	transform: translate( -50%, -50% );
	pointer-events: none;
	filter: drop-shadow( 0 2px 6px rgba( 0, 0, 0, 0.3 ) );
	transition: transform 0.2s ease;
}

.hs-product-video-slide__icon-bg {
	fill: #ff0000;
}

.hs-product-video-slide__play:hover .hs-product-video-slide__icon,
.hs-product-video-slide__play:focus-visible .hs-product-video-slide__icon {
	transform: translate( -50%, -50% ) scale( 1.08 );
}

.hs-product-video-slide__play:focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary, #4aa3df);
	outline-offset: 3px;
}

.hs-product-video-slide__iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* The video thumbnail uses YouTube's 16:9 image; crop it to a square so it
   fills the strip box like the (square) product thumbnails instead of sitting
   half-height. */
.flex-control-thumbs li.hs-product-video-thumb img {
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
}

/* Small red play badge on the matching thumbnail (thumbnail image stays
   visible) — like the previous in-strip video indicator. */
.flex-control-thumbs li.hs-product-video-thumb {
	position: relative;
}

/* Red YouTube-style rounded-rect button. */
.flex-control-thumbs li.hs-product-video-thumb::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 22px;
	transform: translate( -50%, -50% );
	background: #ff0000;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.35 );
	pointer-events: none;
}

/* White play triangle. */
.flex-control-thumbs li.hs-product-video-thumb::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	transform: translate( -35%, -50% );
	border-style: solid;
	border-width: 5px 0 5px 9px;
	border-color: transparent transparent transparent #fff;
	pointer-events: none;
}