/**
 * Mobile Product Gallery Enhancement v9
 * Tylko mobile (max-width: 767px)
 *
 * WAŻNE: Nie blokuje Swiper - bez transform: none
 */

/* ============================================
   BADGE W SUMMARY - JEDNA LINIA (nad tytułem)
   Wrapper: .aura-badges-row
   Kolejność: [Promocja!] [Dla dzieci] [Black week]
   ============================================ */

/* Wrapper - FLEXBOX w jednej linii */
.aura-badges-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

/* CommerceKit wrapper wewnątrz naszego wrappera - też flex row */
.aura-badges-row .ckit-badge_wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    position: static !important;
}

/* Wspólny styl dla WSZYSTKICH badge - jednolity rozmiar */
.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;
    line-height: 1.3 !important;
    text-transform: none !important;
    opacity: 1 !important;
    margin: 0 !important;
}

/* Badge PROMOCJA! - pomarańczowy kolor */
.aura-badges-row .onsale {
    background-color: #EA580C !important;
    color: #fff !important;
}

@media only screen and (max-width: 767px) {

    /* ============================================
       1. GŁÓWNA GALERIA
       ============================================ */

    #commercegurus-pdp-gallery-wrapper {
        margin-bottom: 20px !important;
    }

    #commercegurus-pdp-gallery {
        padding: 0 !important;
        padding-bottom: 20px !important;
    }

    #commercegurus-pdp-gallery .swiper-container.cg-main-swiper {
        border-radius: 12px;
        overflow: hidden;
    }

    #commercegurus-pdp-gallery .cg-main-swiper .swiper-slide img {
        border-radius: 8px;
    }

    /* ============================================
       2. STRZAŁKI - KWADRATOWE ZAOKRĄGLONE
       ============================================ */

    #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next,
    #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !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;
    }

    #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next {
        right: 12px !important;
    }

    #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev {
        left: 12px !important;
    }

    #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-disabled {
        opacity: 0.3 !important;
    }

    /* ============================================
       3. THUMBNAILS - 60x60px
       Pozwalamy Swiper działać normalnie
       ============================================ */

    #commercegurus-pdp-gallery .cg-thumb-swiper {
        margin-top: 12px !important;
        padding: 0 12px !important;
        height: auto !important;
    }

    /* Miniaturki - 60x60px z border-radius */
    #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide {
        width: 60px !important;
        height: 60px !important;
        opacity: 0.6 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        border: 2px solid transparent !important;
        transition: opacity 0.2s, border-color 0.2s !important;
        cursor: pointer !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 4px !important;
    }

    /* Obrazki w miniaturkach */
    #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 6px !important;
    }

    /* Aktywna miniaturka - zielona ramka */
    #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide.swiper-slide-thumb-active {
        opacity: 1 !important;
        border-color: #3f880b !important;
    }

    /* Ukryj ikonę play na miniaturkach */
    #commercegurus-pdp-gallery .cg-thumb-swiper .cgkit-play {
        display: none !important;
    }

}