/**
 * Mobile Product Gallery Enhancement v10
 * Nadpisuje CommerceKit dots na thumbnails
 * Używa native CSS scroll dla drag
 */

/* ============================================
   BADGE W SUMMARY
   ============================================ */
.aura-badges-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.aura-badges-row .ckit-badge_wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    position: static !important;
}

.aura-badges-row .onsale,
.aura-badges-row .ckit-badge {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
    border-radius: 4px !important;
    margin: 0 !important;
}

.aura-badges-row .onsale {
    background-color: #EA580C !important;
    color: #fff !important;
}

/* ============================================
   MOBILE GALLERY (max-width: 767px)
   ============================================ */
@media only screen and (max-width: 767px) {

    /* Wrapper główny - BEZ PADDINGU */
    body.single-product #commercegurus-pdp-gallery-wrapper {
        padding: 0 !important;
        margin-bottom: 20px !important;
    }

    /* Główna galeria - zaokrąglone rogi */
    body.single-product .cg-main-swiper {
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    body.single-product .cg-main-swiper .swiper-slide img {
        border-radius: 8px !important;
    }

    /* Strzałki nawigacji */
    body.single-product .cg-main-swiper .swiper-button-next,
    body.single-product .cg-main-swiper .swiper-button-prev {
        display: flex !important;
        width: 28px !important;
        height: 28px !important;
        background: rgba(255,255,255,0.9) !important;
        border-radius: 6px !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
        color: #333 !important;
        --swiper-navigation-size: 12px;
    }

    body.single-product .cg-main-swiper .swiper-button-next { right: 12px !important; }
    body.single-product .cg-main-swiper .swiper-button-prev { left: 12px !important; }
    body.single-product .cg-main-swiper .swiper-button-disabled { opacity: 0.3 !important; }

    /* MINIATURKI 60x60px */
    body.single-product .cg-thumb-swiper {
        margin-top: 12px !important;
        padding: 0 16px !important;
    }

    body.single-product .cg-thumb-swiper .swiper-slide,
    body.single-product .cg-layout-horizontal .cg-thumb-swiper .swiper-slide {
        width: 60px !important;
        height: 60px !important;
        max-width: 60px !important;
        aspect-ratio: 1/1 !important;
        border-radius: 5px !important;
        overflow: hidden !important;
        opacity: 0.5 !important;
        border: 2px solid transparent !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        padding: 0 !important;
        background-color: transparent !important;
        margin-right: 8px !important;
    }

    body.single-product .cg-thumb-swiper .swiper-slide.swiper-slide-thumb-active {
        opacity: 1 !important;
        border-color: #3f880b !important;
    }

    body.single-product .cg-thumb-swiper .swiper-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 5px !important;
    }
}

/* ============================================
   THUMBNAILS - NADPISANIE KROPEK NA MINIATURKI
   Media query 770px - TAK JAK COMMERCEKIT
   Używa NATIVE CSS SCROLL zamiast Swiper transforms
   ============================================ */
@media only screen and (max-width: 770px) {

    /* Kontener - NATIVE HORIZONTAL SCROLL */
    body.single-product .ckit-mobile-pdp-gallery-active .swiper-container.cg-thumb-swiper {
        margin-top: 12px !important;
        padding: 0 8px !important;
        height: 70px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Wrapper - FLEX NOWRAP = JEDNA LINIA */
    body.single-product .ckit-mobile-pdp-gallery-active .swiper-container.cg-thumb-swiper .swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        height: 100% !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* MINIATURKI - stały rozmiar 60x60 */
    body.single-product .ckit-mobile-pdp-gallery-active .swiper-container.cg-thumb-swiper .swiper-wrapper .swiper-slide {
        flex: 0 0 60px !important;
        width: 60px !important;
        height: 60px !important;
        max-width: 60px !important;
        min-width: 60px !important;
        background: transparent !important;
        border-radius: 8px !important;
        opacity: 0.5 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 2px solid transparent !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    /* Aktywna miniaturka - zielona ramka */
    body.single-product .ckit-mobile-pdp-gallery-active .swiper-container.cg-thumb-swiper .swiper-wrapper .swiper-slide.swiper-slide-thumb-active {
        opacity: 1 !important;
        border-color: #3f880b !important;
    }

    /* POKAŻ OBRAZKI - nadpisanie display:none */
    body.single-product .ckit-mobile-pdp-gallery-active .swiper-container.cg-thumb-swiper .swiper-wrapper .swiper-slide > * {
        display: block !important;
    }

    body.single-product .ckit-mobile-pdp-gallery-active .swiper-container.cg-thumb-swiper .swiper-wrapper .swiper-slide img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 6px !important;
    }

    /* Ukryj scrollbar ale zachowaj scroll */
    body.single-product .ckit-mobile-pdp-gallery-active .swiper-container.cg-thumb-swiper::-webkit-scrollbar {
        display: none !important;
    }
    body.single-product .ckit-mobile-pdp-gallery-active .swiper-container.cg-thumb-swiper {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }

    /* Ukryj ikonę play na miniaturkach */
    body.single-product .ckit-mobile-pdp-gallery-active .cg-thumb-swiper .cgkit-play {
        display: none !important;
    }
}