/* ==========================================================================
   LERP – Video de fondo en página de producto (Flatsome)
   Solo se carga en fichas de producto que tienen video.
   ========================================================================== */

body.lerpmx-has-bgvideo {
	/* Valores por defecto. Se cambian en WooCommerce › Ajustes › Productos ›
	   Video de fondo (el PHP imprime estas mismas variables después de este archivo). */
	--lerpmx-overlay: rgba(255, 255, 255, 0.15); /* velo sobre el video (0 = sin velo) */
	--lerpmx-card-bg: rgba(255, 255, 255, 0.82); /* fondo de las tarjetas de info */
	--lerpmx-card-blur: 12px;                     /* desenfoque tipo "vidrio" */
	--lerpmx-card-radius: 14px;
	--lerpmx-card-radius-m: 10px;                 /* esquinas en móvil */
	--lerpmx-fade: 0.6s;                          /* duración del cambio de video */
}

/* 1) Capa de video fija al viewport: no se desplaza con el scroll ---------- */
.lerpmx-bgvideo {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh; /* evita saltos en móvil al ocultarse la barra del navegador */
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.lerpmx-bgvideo video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Alineación: viene de los ajustes (por defecto centrado horizontal, arriba) */
	object-position: var(--lerpmx-pos, center top);
	opacity: 0;
	transition: opacity var(--lerpmx-fade) ease;
}

@media (max-width: 849px) {
	.lerpmx-bgvideo video {
		object-position: var(--lerpmx-pos-m, var(--lerpmx-pos, center top));
	}
}

.lerpmx-bgvideo video.is-active {
	opacity: 1;
}

.lerpmx-bgvideo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--lerpmx-overlay);
}

/* Oculta el botón de "play" de iOS cuando el autoplay está bloqueado (modo ahorro) */
.lerpmx-bgvideo video::-webkit-media-controls-start-playback-button {
	display: none !important;
	-webkit-appearance: none;
}

/* 2) Página encima del video y con fondo transparente ---------------------- */
/* Sin z-index: la capa del video va antes de #wrapper en el HTML, así que la
   página ya se pinta encima. Un z-index aquí encerraría al header (z 1001) por
   debajo del velo de Flatsome (.ux-body-overlay, z 29) y el menú desplegable
   parpadearía al pasar el ratón. */
body.lerpmx-has-bgvideo #wrapper {
	position: relative;
}

body.lerpmx-has-bgvideo #wrapper,
body.lerpmx-has-bgvideo #main,
body.lerpmx-has-bgvideo .shop-container,
body.lerpmx-has-bgvideo .product-container,
body.lerpmx-has-bgvideo .product-main,
body.lerpmx-has-bgvideo .product-footer {
	background: transparent !important;
}

/* 3) Tarjetas legibles sobre el video (efecto vidrio) ---------------------- */
body.lerpmx-has-bgvideo .product-main .product-info,
body.lerpmx-has-bgvideo .product-footer .woocommerce-tabs,
body.lerpmx-has-bgvideo .product-footer .product-section {
	background: var(--lerpmx-card-bg);
	-webkit-backdrop-filter: blur(var(--lerpmx-card-blur));
	backdrop-filter: blur(var(--lerpmx-card-blur));
	border-radius: var(--lerpmx-card-radius);
	border-top: 0;
	padding: 24px 28px !important;
}

body.lerpmx-has-bgvideo .product-footer .product-section {
	margin-top: 24px;
}

body.lerpmx-has-bgvideo .product-footer {
	padding-bottom: 40px;
}

@media (max-width: 849px) {
	body.lerpmx-has-bgvideo .product-main .product-info,
	body.lerpmx-has-bgvideo .product-footer .woocommerce-tabs,
	body.lerpmx-has-bgvideo .product-footer .product-section {
		padding: 18px 16px !important;
		border-radius: var(--lerpmx-card-radius-m);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lerpmx-bgvideo video {
		transition: none;
	}
}