/* Keep CommerceKit product-gallery videos centered in the gallery frame. */
.single-product .cg-main-swiper .swiper-slide.swiper-slide-video {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}

.single-product .cg-main-swiper .swiper-slide.swiper-slide-video > .swiper-slide-imglink.cgkit-video {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-product .cg-main-swiper .cgkit-video-wrap {
    width: 100%;
    height: 100% !important;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-product .cg-main-swiper .cgkit-video-wrap video {
    width: 100%;
    height: auto !important;
    object-fit: contain;
    object-position: center center;
}

/* The lightbox reuses the poster image next to the video. Keep the poster
 * in the regular gallery, but hide it in the fullscreen lightbox. */
.single-product .pswp__scroll-wrap .cgkit-video-wrap > img.pdp-img {
    display: none !important;
}

/* Keep the optional gallery expansion control compact and outside the
 * image area so it does not cover the last visible slide. */
.single-product #commercegurus-pdp-gallery .cg-main-swiper .load-more-images {
    bottom: -2rem;
    padding: 7px 18px;
    font-size: 12px;
    line-height: 1.2;
}

/* In grid mode the button is intentionally placed below the last row. The
 * grid is not used as a sliding viewport, so allowing this one container to
 * overflow does not expose neighbouring Swiper slides. */
@media (min-width: 771px) {
    .single-product #commercegurus-pdp-gallery.cg-grid-layout .cg-main-swiper {
        overflow: visible;
    }
}

/* CommerceKit hides slides after the first grid batch on mobile. That is
 * suitable for a static grid, but it also removes those slides from the
 * mobile Swiper, so they cannot be reached by swiping. Keep the complete
 * variation gallery available in the mobile carousel. */
@media (max-width: 770px) {
    .single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-wrapper > .swiper-slide.more-images {
        display: block !important;
    }

    .single-product #commercegurus-pdp-gallery .cg-main-swiper .load-more-images {
        display: none !important;
    }
}