/* MB Product Video PRO 2.4.3 — video integrado en la galería de WooCommerce + tarjeta TikTok */
.mbpvpro-gallery-video{position:relative!important;display:block!important;overflow:hidden;background:#000;border-radius:12px}
.mbpvpro-gallery-video .mbpvpro-gallery-video-frame{position:relative;width:100%;height:100%;min-height:320px;aspect-ratio:1/1;overflow:hidden;background:#000}
.mbpvpro-gallery-video.vertical .mbpvpro-gallery-video-frame{aspect-ratio:9/16}
.mbpvpro-gallery-video.horizontal .mbpvpro-gallery-video-frame{aspect-ratio:16/9}
.mbpvpro-gallery-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.woocommerce-product-gallery .mbpvpro-gallery-video{cursor:pointer}
@media(max-width:767px){
 .mbpvpro-gallery-video .mbpvpro-gallery-video-frame{min-height:0}
}

/* --- 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}

/* Gallery-cover TikTok video: fills the same column the product photos use, so the
   product data lays out to the right exactly like it does with a normal photo. The
   gallery box gets a forced 9:16 ratio (matching TikTok's shape) so it keeps a real
   height once the photo wrapper it was originally sized around is hidden. */
.woocommerce-product-gallery.mbpvpro-has-tiktok-cover{position:relative;aspect-ratio:9/16}
.woocommerce-product-gallery.mbpvpro-has-tiktok-cover .woocommerce-product-gallery__wrapper{position:relative;height:100%}
.mbpvpro-tiktok-gallery-cover{position:absolute;inset:0;width:100%;height:100%}
.mbpvpro-tiktok-gallery-cover .mbpvpro-video.mbpvpro-tiktok{max-width:none;width:100%;height:100%;margin:0}
.mbpvpro-tiktok-gallery-cover .mbpvpro-video.mbpvpro-tiktok .mbpvpro-frame{position:absolute;inset:0;aspect-ratio:auto;width:100%;height:100%;min-height:0;max-height:none;border-radius:12px}
.mbpvpro-tiktok-gallery-cover .mbpvpro-tiktok-link{display:none}

/* 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}
.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}
.mbpvpro-tiktok-link{text-align:center;margin:6px 0 0}
.mbpvpro-tiktok-link a{color:inherit;text-decoration:none;font-size:.85em;opacity:.75}
.mbpvpro-tiktok-link a:hover{opacity:1;text-decoration:underline}