/* =====================================================
   VEGA PRODUCT GALLERY ZOOM
   ===================================================== */


/* Main product image interaction */

.single-product
.woocommerce-product-gallery__image > a {
    position: relative !important;

    cursor:
        zoom-in !important;

    overflow:
        hidden !important;
}


.single-product
.woocommerce-product-gallery__image
img:not(.zoomImg) {
    transition:
        transform .16s ease-out;

    will-change:
        transform;
}


/* Desktop fallback hover zoom */

@media (
    hover: hover
)
and (
    pointer: fine
) {

    .single-product
    .woocommerce-product-gallery__image
    img.vega-hover-zoomed {
        transform:
            scale(1.7) !important;
    }
}


/*
 * Native Woo zoom image should never
 * block our tap/click interaction.
 */

.single-product
.woocommerce-product-gallery
.zoomImg {
    pointer-events:
        none !important;
}


/* =====================================================
   FULLSCREEN LIGHTBOX
   ===================================================== */

body.vega-product-lightbox-open {
    overflow:
        hidden !important;
}


.vega-product-lightbox {
    position:
        fixed;

    inset: 0;

    z-index:
        2147483300;

    display:
        grid;

    place-items:
        center;

    opacity: 0;

    pointer-events:
        none;

    transition:
        opacity .2s ease;
}


.vega-product-lightbox[hidden] {
    display:
        none !important;
}


.vega-product-lightbox.is-open {
    opacity: 1;

    pointer-events:
        auto;
}


.vega-product-lightbox__backdrop {
    position:
        absolute;

    inset: 0;

    background:
        rgba(
            10,
            13,
            11,
            .92
        );

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.vega-product-lightbox__stage {
    position:
        relative;

    z-index: 2;

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;
}


.vega-product-lightbox__top {
    position:
        absolute;

    top:
        max(
            14px,
            env(
                safe-area-inset-top
            )
        );

    left: 16px;
    right: 16px;

    z-index: 5;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.vega-product-lightbox__counter {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        52px;

    height:
        34px;

    padding:
        0 12px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .13
        );

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            .09
        );

    color:
        #fff;

    font-size:
        11px;

    font-weight:
        800;
}


.vega-product-lightbox__close {
    display:
        grid;

    place-items:
        center;

    width:
        42px;

    height:
        42px;

    padding: 0;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .14
        );

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .1
        );

    color:
        #fff;

    font-size:
        29px;

    font-weight:
        300;

    cursor:
        pointer;
}


.vega-product-lightbox__image-wrap {
    position:
        relative;

    width:
        min(
            90vw,
            1100px
        );

    height:
        min(
            82vh,
            900px
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        auto;

    touch-action:
        pan-x pan-y;
}


.vega-product-lightbox__image {
    display:
        block;

    max-width:
        100%;

    max-height:
        100%;

    width:
        auto;

    height:
        auto;

    object-fit:
        contain;

    transform:
        scale(1);

    transition:
        transform .22s ease;

    transform-origin:
        center center;

    cursor:
        zoom-in;

    user-select:
        none;

    -webkit-user-drag:
        none;
}


.vega-product-lightbox__image.is-zoomed {
    transform:
        scale(2);

    cursor:
        zoom-out;
}


.vega-product-lightbox__hint {
    position:
        absolute;

    bottom:
        13px;

    left:
        50%;

    transform:
        translateX(-50%);

    padding:
        6px 10px;

    border-radius:
        999px;

    background:
        rgba(
            0,
            0,
            0,
            .54
        );

    color:
        rgba(
            255,
            255,
            255,
            .88
        );

    font-size:
        9px;

    white-space:
        nowrap;

    pointer-events:
        none;
}


.vega-product-lightbox__nav {
    position:
        absolute;

    z-index: 5;

    top: 50%;

    transform:
        translateY(-50%);

    display:
        grid;

    place-items:
        center;

    width:
        46px;

    height:
        54px;

    padding: 0;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .14
        );

    border-radius:
        14px;

    background:
        rgba(
            255,
            255,
            255,
            .09
        );

    color:
        #fff;

    font-size:
        34px;

    line-height: 1;

    cursor:
        pointer;
}


.vega-product-lightbox__prev {
    left: 18px;
}


.vega-product-lightbox__next {
    right: 18px;
}


/* MOBILE */

@media (
    max-width: 767px
) {

    .single-product
    .woocommerce-product-gallery__image > a {
        cursor:
            pointer !important;
    }


    .vega-product-lightbox__image-wrap {
        width:
            100vw;

        height:
            78vh;

        padding:
            12px;
    }


    .vega-product-lightbox__nav {
        width:
            38px;

        height:
            46px;

        border-radius:
            12px;

        font-size:
            29px;
    }


    .vega-product-lightbox__prev {
        left: 8px;
    }


    .vega-product-lightbox__next {
        right: 8px;
    }
}