/* Galería de la ficha: diapositiva de vídeo. Ver includes/shop/na-galeria-producto.php. */

/* Al 85 %: el acercamiento del vídeo termina con el producto llenando el 92-100 % del
 * cuadro, y las fotos van recortadas a un 85 %. Así los dos se ven del mismo tamaño. */
.woocommerce-product-gallery .na-gal-video {
	background: #fff;
}

.woocommerce-product-gallery .na-gal-video video {
	display: block;
	width: 85%;
	margin: 7.5% auto;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
}

/* Zoom por foto (--na-zoom lo pone el PHP en cada <img>). */
.woocommerce-product-gallery .woocommerce-product-gallery__image {
	overflow: hidden;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image img[style*="--na-zoom"] {
	transform: scale( var( --na-zoom, 1 ) );
}

/* Miniatura del vídeo: icono de reproducir encima. */
.woocommerce-product-gallery .flex-control-thumbs li.na-gal-thumb-video {
	position: relative;
}

.woocommerce-product-gallery .flex-control-thumbs li.na-gal-thumb-video::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34%;
	aspect-ratio: 1 / 1;
	transform: translate( -50%, -50% );
	border-radius: 50%;
	background:
		no-repeat 58% 50% / 42% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z' fill='%23fff'/%3E%3C/svg%3E"),
		rgba( 0, 40, 66, .72 );
	pointer-events: none;
}