/* MB Product Video PRO 2.4.3 — video integrado en la galería de WooCommerce + tarjeta TikTok */
/* Selectores reforzados con !important y con el prefijo .et_pb_wc_* que usa Divi en sus
   páginas de producto/tienda: Divi 5 aplica sus propios estilos de galería con bastante
   especificidad (flexbox, tamaños fijos por JS), así que sin esto el marco del video
   podía perder el alto/ancho calculado o quedar detrás de las miniaturas de Divi. */
.mbpvpro-gallery-video,
.et_pb_wc_gallery .mbpvpro-gallery-video,
.et_pb_shop .mbpvpro-gallery-video{
 position:relative!important;display:block!important;overflow:hidden!important;
 background:#000!important;border-radius:12px!important;width:100%!important;height:auto!important;
 float:none!important;
}
/* IMPORTANTE: NO forzar height:100%!important aquí — con un height definido, el
   navegador ignora "aspect-ratio" por completo y en su lugar el marco copia el alto de
   su contenedor padre (que WooCommerce a veces fija en píxeles según el tamaño real de
   las fotos del producto), dando un video gigante y estirado. "aspect-ratio" necesita
   que el alto quede en auto para poder calcularlo a partir del ancho. */
.mbpvpro-gallery-video .mbpvpro-gallery-video-frame{position:relative!important;width:100%!important;height:auto!important;min-height:320px;max-height:640px;aspect-ratio:1/1;overflow:hidden;background:#000}
.mbpvpro-gallery-video.vertical .mbpvpro-gallery-video-frame{aspect-ratio:9/16;max-height:560px}
.mbpvpro-gallery-video.horizontal .mbpvpro-gallery-video-frame{aspect-ratio:16/9;max-height:420px}
.mbpvpro-gallery-video iframe{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important}
.woocommerce-product-gallery .mbpvpro-gallery-video{cursor:pointer}

/* Evita que el zoom/lightbox de WooCommerce (PhotoSwipe) o de Divi intente abrir el
   video como si fuera una imagen ampliable. */
.mbpvpro-gallery-video,
.mbpvpro-gallery-video *{cursor:pointer}
.mbpvpro-gallery-video.mbpvpro-no-zoom{pointer-events:auto}
@media(max-width:767px){
 .mbpvpro-gallery-video .mbpvpro-gallery-video-frame{min-height:0}
}

/* TikTok en ubicación "gallery": la tarjeta vive FUERA del slider de fotos por
   completo (es hermana de .woocommerce-product-gallery__wrapper, movida ahí por JS),
   así que FlexSlider nunca la ve, la mide ni la reordena — esto es justamente lo que
   evita que se repitan los problemas de versiones anteriores (zoom roto, tamaño
   gigante, recorte descentrado, renderizado partido a la mitad). Solo necesita verse
   bien apilada arriba de las fotos, con su propio ancho y un margen para separarla
   del slider de abajo. */
.mbpvpro-tiktok-above-gallery{position:relative;display:block;width:100%;margin:0 0 12px;border-radius:12px;overflow:hidden}
.mbpvpro-tiktok-above-gallery .mbpvpro-video.mbpvpro-tiktok{max-width:100%}
.mbpvpro-tiktok-above-gallery .mbpvpro-frame{border-radius:12px}

/* --- TikTok --- */
/* Standalone TikTok card (summary / before-cart / after-cart / shortcode locations):
   a compact, centered card. */
.mbpvpro-video.mbpvpro-tiktok{max-width:320px;margin:0 auto}
.mbpvpro-video.mbpvpro-tiktok .mbpvpro-frame{position:relative;aspect-ratio:9/16;min-height:280px;max-height:600px;overflow:hidden;background:#000;border-radius:12px}

/* Click-to-play cover: TikTok's real thumbnail + a play button, styled like the rest
   of the store instead of TikTok's own busy player chrome. */
.mbpvpro-tiktok-cover{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;border:0;padding:0;margin:0;background:#000;display:block;appearance:none;text-decoration:none}
.mbpvpro-tiktok-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease,filter .3s ease}
.mbpvpro-tiktok-cover:hover img,.mbpvpro-tiktok-cover:focus-visible img{transform:scale(1.04);filter:brightness(.82)}
.mbpvpro-tiktok-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;pointer-events:none}
.mbpvpro-tiktok-badge{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:700;letter-spacing:.03em;padding:3px 9px;border-radius:20px;pointer-events:none}

/* Once clicked, TikTok's real player replaces the cover — force it to fill the frame
   the same reliable way the YouTube iframe above does. */
.mbpvpro-video.mbpvpro-tiktok .mbpvpro-frame .tiktok-embed{position:absolute!important;inset:0!important;margin:0!important;max-width:none!important;min-width:0!important;width:100%!important;height:100%!important}
.mbpvpro-video.mbpvpro-tiktok .mbpvpro-frame .tiktok-embed iframe{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important}

.mbpvpro-tiktok-fallback{display:flex;align-items:center;justify-content:center;min-height:280px;width:100%;background:#000;color:#fff;text-decoration:none;font-weight:600;border-radius:12px}

/* Botón "VER AHORA": antes era un enlace de texto discreto y pasaba desapercibido.
   Ahora es un botón sólido con los colores de marca de TikTok (rosa/cian), grande y
   con sombra, para que se note como una acción real en cualquier ubicación (galería,
   antes/después del carrito, resumen o shortcode). */
.mbpvpro-tiktok-link{text-align:center;margin:10px 0 0}
.mbpvpro-tiktok-link a{
 display:inline-flex;align-items:center;gap:6px;
 background:linear-gradient(90deg,#FE2C55,#25F4EE);
 color:#fff;text-decoration:none!important;font-weight:700;font-size:.95em;
 padding:10px 22px;border-radius:30px;letter-spacing:.02em;
 box-shadow:0 3px 8px rgba(0,0,0,.18);transition:transform .15s ease,box-shadow .15s ease;
}
.mbpvpro-tiktok-link a:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(0,0,0,.25);color:#fff}
/* En el resumen del producto (junto a título/precio) va alineado a la izquierda. */
.summary > .mbpvpro-tiktok-link{text-align:left;margin:0 0 14px}