/* 🎬 Vídeo do produto dentro da galeria — o visual do Mercado Livre.
 *
 * A miniatura entra no meio das outras, com um selo de play para o cliente
 * saber que ali tem vídeo antes de clicar. O palco fica por cima da foto, e só
 * aparece quando escolhido.
 */

/* o vídeo, por cima da área da foto.
 *
 * 🐛 ERA `display:none` ATÉ O HOVER, E ERA O DEFEITO (1.10.3). O Chrome **não
 * carrega mídia dentro de `display:none`**: o vídeo ficava em `HAVE_NOTHING`
 * para sempre, com 0×0 de tamanho, e o `play()` não tinha o que tocar. Levei
 * três versões para achar porque eu media o `paused` (que virava `false`) em
 * vez do tempo andando.
 *
 * O elemento agora fica SEMPRE renderizado — só invisível. `pointer-events:
 * none` impede que ele roube o clique da foto enquanto está escondido. */
.sn-video-palco {
	position: absolute;
	inset: 0;
	z-index: 5;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}

.sn-video-palco.sn-video-ligado {
	opacity: 1;
	pointer-events: auto;
}

.sn-video-palco video {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* a miniatura, no mesmo tamanho das fotos */
.flex-control-thumbs li.sn-video-thumb {
	position: relative;
}

.flex-control-thumbs li.sn-video-thumb button {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: block;
	width: 100%;
	line-height: 0;
}

.flex-control-thumbs li.sn-video-thumb img {
	width: 100%;
	height: auto;
	display: block;
	opacity: .75;
	transition: opacity .15s ease;
}

.flex-control-thumbs li.sn-video-thumb:hover img {
	opacity: 1;
}

/* 📌 FIXADO: o cliente clicou, e o vídeo fica no ar mesmo com o mouse longe.
 * Sem esta marca ele não sabe que pode afastar o mouse — que era exatamente a
 * queixa: *"consigo ver somente a metade do vídeo"*. */
.flex-control-thumbs li.sn-video-thumb.sn-video-fixado img {
	opacity: 1;
	outline: 2px solid #1a6a3a;
	outline-offset: -2px;
}

.flex-control-thumbs li.sn-video-thumb.sn-video-fixado .sn-video-selo {
	background: #1a6a3a;
}

/* o selo de play — o que faz o cliente saber que é vídeo sem clicar */
.sn-video-selo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .62);
	color: #fff;
	font-size: 14px;
	line-height: 34px;
	text-align: center;
	pointer-events: none;
	padding-left: 3px;   /* o triângulo ▶ nasce torto no meio do círculo */
	box-sizing: border-box;
}

/* 📱 no celular o dedo não "passa por cima": o toque é o que abre, e o selo
   precisa ser grande o bastante para acertar. */
@media (max-width: 768px) {
	.sn-video-selo {
		width: 28px;
		height: 28px;
		line-height: 28px;
		font-size: 12px;
	}
}