.wx-wmvg-slide {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.wx-wmvg-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--wx-wmvg-gallery-height, 440px);
    max-height: 520px;
    min-height: 280px;
    overflow: hidden;
    background: #000;
}

.wx-wmvg-video,
.wx-wmvg-iframe {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    border: 0;
    object-fit: contain;
    background: #000;
}

/* WoodMart'ın kendi küçük galeri alanı kullanılıyorsa video öğesini görünür tutar. */
.woocommerce-product-gallery .wd-gallery-thumb.wx-wmvg-thumb-ready,
.woocommerce-product-gallery .woocommerce-product-gallery__thumbnails.wx-wmvg-thumb-ready,
.woocommerce-product-gallery .flex-control-thumbs.wx-wmvg-thumb-ready {
    visibility: visible !important;
    opacity: 1 !important;
}

.wx-wmvg-video-thumb,
.wx-wmvg-custom-thumb {
    position: relative !important;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    background: #f7f7f7;
}

.wx-wmvg-thumb-media,
.wx-wmvg-custom-thumb__image {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wx-wmvg-thumb-video,
.wx-wmvg-thumb-image,
.wx-wmvg-custom-thumb__image {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    pointer-events: none;
    background: #111;
}

/* Tema küçük görselleri hiç oluşturmuyorsa masaüstünde solda kesin görünen galeri şeridi. */
@media (min-width: 768px) {
    .wx-wmvg-custom-thumbs-layout {
        display: grid !important;
        grid-template-columns: 74px minmax(0, 1fr);
        grid-template-rows: auto;
        align-items: start;
        gap: 12px;
        width: 100%;
    }

    .wx-wmvg-custom-thumbs-layout > .wx-wmvg-custom-thumbs {
        grid-column: 1;
        grid-row: 1;
        width: 74px;
        margin: 0;
    }

    .wx-wmvg-custom-thumbs-layout > .wd-gallery-images,
    .wx-wmvg-custom-thumbs-layout > .woocommerce-product-gallery__wrapper {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    .wx-wmvg-custom-thumbs__track {
        flex-direction: column;
        max-height: var(--wx-wmvg-gallery-height, 520px);
        overflow-x: hidden;
        overflow-y: auto;
        padding: 1px 4px 1px 1px;
    }
}

.wx-wmvg-custom-thumbs {
    clear: both;
    max-width: 100%;
    padding: 0;
}

.wx-wmvg-custom-thumbs.is-hidden {
    display: none !important;
}

.wx-wmvg-custom-thumbs.is-visible,
.wx-wmvg-custom-thumbs:not(.is-hidden) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.wx-wmvg-custom-thumbs__track {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.wx-wmvg-custom-thumb {
    display: block;
    flex: 0 0 74px;
    width: 74px;
    height: 74px;
    min-width: 74px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 4px;
    appearance: none;
    box-shadow: none;
}

.wx-wmvg-custom-thumb:hover,
.wx-wmvg-custom-thumb:focus-visible,
.wx-wmvg-custom-thumb.wx-wmvg-thumb-active {
    border-color: currentColor;
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

/* Video küçük görselinde ayrıca oynatma butonu veya overlay yoktur. */
.wx-wmvg-custom-thumb .wx-wmvg-thumb-media,
.wx-wmvg-generated-thumb .wx-wmvg-thumb-media {
    width: 100%;
    height: 100%;
}

@media (max-width: 767px) {
    .wx-wmvg-stage {
        height: var(--wx-wmvg-gallery-height, 300px);
        max-height: 380px;
        min-height: 220px;
    }

    .wx-wmvg-custom-thumbs-layout {
        display: block !important;
        width: 100%;
    }

    .wx-wmvg-custom-thumbs {
        width: 100%;
        margin: 10px 0 0;
    }

    .wx-wmvg-custom-thumbs__track {
        flex-direction: row;
        gap: 7px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 1px 5px;
    }

    .wx-wmvg-custom-thumb {
        flex-basis: 64px;
        width: 64px;
        height: 64px;
        min-width: 64px;
    }
}