/* Keep the popup proportional to the viewport, including when browser zoom changes. */
html.charsoo-gallery-open {
    overflow: hidden;
}

.single-product .product-image-gallery.open-lightbox {
    box-sizing: border-box;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: max(48px, 6vh) 4vw max(12px, 2vh);
    display: grid;
    grid-template-rows: minmax(0, 1fr) clamp(48px, 10vh, 96px);
    justify-items: center;
    align-items: stretch;
    gap: 2vh;
    overflow: hidden;
}

.single-product .product-image-gallery.open-lightbox .main-product-slider {
    width: min(92vw, 120vh);
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    margin: 0;
}

.single-product .product-image-gallery.open-lightbox .main-product-slider .swiper-slide {
    height: 100%;
    overflow: hidden;
}

.single-product .product-image-gallery.open-lightbox .main-product-slider img {
    display: block;
    width: 100%;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.single-product .product-image-gallery.open-lightbox .thumbnail-product-slider {
    display: block;
    width: min(92vw, 90vh);
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
}

.single-product .product-image-gallery.open-lightbox .thumbnail-product-slider img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: white;
}

.single-product .product-image-gallery.open-lightbox .close-lightbox {
    top: max(4px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 1;
    z-index: 20;
}

.single-product .product-image-gallery.open-lightbox .swiper-button-next,
.single-product .product-image-gallery.open-lightbox .swiper-button-prev {
    display: flex;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
}

.single-product .product-image-gallery.open-lightbox .product-video .video,
.single-product .product-image-gallery.open-lightbox .plyr,
.single-product .product-image-gallery.open-lightbox .plyr__video-wrapper,
.single-product .product-image-gallery.open-lightbox video {
    height: 100%;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
}