/* WC MP4 Product Gallery v1.6.1 */
.wc-mp4-gallery-active .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
    aspect-ratio: var(--wc-mp4-gallery-ratio, 1 / 1);
    overflow: hidden;
    background: #fff;
}

.wc-mp4-gallery-active .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image > a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.wc-mp4-gallery-active .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image > a > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wc-mp4-gallery-slide {
    width: 100%;
    margin: 0;
}

.wc-mp4-video-wrap {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 1px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
}

.wc-mp4-video-fallback,
.wc-mp4-product-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wc-mp4-video-fallback {
    z-index: 1;
    background: #fff;
    transition: opacity .16s ease;
}

.wc-mp4-product-video {
    z-index: 2;
    background: #000;
    opacity: 0;
    transition: opacity .16s ease;
}

.wc-mp4-video-wrap.has-preview .wc-mp4-product-video,
.wc-mp4-video-wrap.is-playing .wc-mp4-product-video {
    opacity: 1;
}

.wc-mp4-video-wrap.has-preview .wc-mp4-video-fallback,
.wc-mp4-video-wrap.is-playing .wc-mp4-video-fallback {
    opacity: 0;
    pointer-events: none;
}

/* Keep all gallery thumbnails equal size. The JS replaces the video thumbnail
   with a real frame captured from the MP4 after the page becomes idle. */
.wc-mp4-gallery-active .woocommerce-product-gallery .flex-control-thumbs li {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.wc-mp4-gallery-active .woocommerce-product-gallery .flex-control-thumbs img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Make MP4 thumbnails unmistakably videos while keeping the real captured frame. */
.wc-mp4-gallery-active .woocommerce-product-gallery .flex-control-thumbs li.wc-mp4-video-thumb {
    position: relative;
}

.wc-mp4-gallery-active .woocommerce-product-gallery .flex-control-thumbs li.wc-mp4-video-thumb::after {
    content: attr(data-video-label);
    position: absolute;
    right: 7px;
    bottom: 7px;
    z-index: 5;
    padding: 4px 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .78);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    pointer-events: none;
}

.wc-mp4-gallery-active .woocommerce-product-gallery .flex-control-thumbs li.wc-mp4-video-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .28);
    pointer-events: none;
}


/* v1.6.1: Never show a custom/theme play overlay on the main video area.
   Native <video controls> remain untouched because browser controls live in
   the video element's shadow UI, not as children of this wrapper. */
.wc-mp4-gallery-active .wc-mp4-video-wrap::before,
.wc-mp4-gallery-active .wc-mp4-video-wrap::after,
.wc-mp4-gallery-active .wc-mp4-gallery-slide::before,
.wc-mp4-gallery-active .wc-mp4-gallery-slide::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide any play-overlay element injected by a theme/gallery add-on inside
   our own MP4 slide, while keeping the fallback image and video itself. */
.wc-mp4-gallery-active .wc-mp4-video-wrap > :not(.wc-mp4-video-fallback):not(.wc-mp4-product-video),
.wc-mp4-gallery-active .wc-mp4-gallery-slide [class*="play-button"],
.wc-mp4-gallery-active .wc-mp4-gallery-slide [class*="play_button"],
.wc-mp4-gallery-active .wc-mp4-gallery-slide [class*="video-play"],
.wc-mp4-gallery-active .wc-mp4-gallery-slide [class*="video_play"],
.wc-mp4-gallery-active .wc-mp4-gallery-slide [class*="play-icon"],
.wc-mp4-gallery-active .wc-mp4-gallery-slide [class*="play_icon"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}