/* ============================================================
   HOMTO.PL
   GALERIA PRODUKTU - WERSJA STABILNA
   Miniatury po lewej + duże zdjęcie po prawej
   ============================================================ */


/* ============================================================
   1. GŁÓWNY KONTENER GALERII
   ============================================================ */

.images-container.homto-gallery-active {
    display: grid !important;

    grid-template-columns: 90px minmax(0, 1fr) !important;

    column-gap: 20px !important;

    width: 100% !important;

    max-width: 100% !important;

    position: relative !important;

    box-sizing: border-box !important;

    align-items: start !important;
}


/* ============================================================
   2. GŁÓWNE ZDJĘCIE
   ============================================================ */

.images-container.homto-gallery-active .product-cover {
    grid-column: 2 !important;
    grid-row: 1 !important;

    position: relative !important;

    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    height: 560px !important;

    min-height: 560px !important;

    max-height: 560px !important;

    padding: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    overflow: visible !important;

    opacity: 1 !important;

    visibility: visible !important;
}


/* ============================================================
   3. DUŻE ZDJĘCIE #zoom_product
   ============================================================ */

.images-container.homto-gallery-active
.product-cover
#zoom_product {

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    position: relative !important;

    width: 100% !important;

    height: 540px !important;

    max-width: 600px !important;

    max-height: 540px !important;

    margin: 0 auto !important;

    padding: 0 !important;

    object-fit: contain !important;

    object-position: center center !important;

    box-sizing: border-box !important;

    z-index: 5 !important;
}


/* ============================================================
   4. MINIATURY
   ============================================================ */

.images-container.homto-gallery-active
#thumb-gallery {

    grid-column: 1 !important;
    grid-row: 1 !important;

    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: 90px !important;

    max-width: 90px !important;

    height: 560px !important;

    max-height: 560px !important;

    margin: 0 !important;

    padding: 0 !important;

    display: block !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    box-sizing: border-box !important;

    z-index: 20 !important;
}


/* ============================================================
   5. MINIATURY - SCROLLBAR
   ============================================================ */

.images-container.homto-gallery-active
#thumb-gallery::-webkit-scrollbar {

    width: 4px !important;
}

.images-container.homto-gallery-active
#thumb-gallery::-webkit-scrollbar-track {

    background: transparent !important;
}

.images-container.homto-gallery-active
#thumb-gallery::-webkit-scrollbar-thumb {

    background: #bdbdbd !important;

    border-radius: 10px !important;
}


/* ============================================================
   6. MINIATURY - POJEDYNCZY ELEMENT
   ============================================================ */

.images-container.homto-gallery-active
#thumb-gallery
.thumb-container {

    width: 82px !important;

    min-width: 82px !important;

    max-width: 82px !important;

    height: 82px !important;

    min-height: 82px !important;

    max-height: 82px !important;

    margin: 0 0 10px 0 !important;

    padding: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    float: none !important;

    box-sizing: border-box !important;

    transform: none !important;
}


/* ============================================================
   7. ZDJĘCIA MINIATUR
   ============================================================ */

.images-container.homto-gallery-active
#thumb-gallery
.thumb-container
img.thumb {

    display: block !important;

    width: 80px !important;

    height: 80px !important;

    max-width: 80px !important;

    max-height: 80px !important;

    margin: 0 !important;

    padding: 0 !important;

    object-fit: contain !important;

    object-position: center center !important;

    background: #fff !important;

    border: 1px solid #e3e3e3 !important;

    border-radius: 7px !important;

    box-sizing: border-box !important;
}


/* ============================================================
   8. AKTYWNA MINIATURA
   ============================================================ */

.images-container.homto-gallery-active
#thumb-gallery
.thumb-container.active
img.thumb,

.images-container.homto-gallery-active
#thumb-gallery
.thumb-container
img.thumb.selected {

    border: 2px solid #111 !important;
}


/* ============================================================
   9. SLICK - WYŁĄCZENIE ROZJEŻDŻANIA
   ============================================================ */

.images-container.homto-gallery-active
#thumb-gallery
.slick-list {

    width: 100% !important;

    height: auto !important;

    overflow: visible !important;
}


.images-container.homto-gallery-active
#thumb-gallery
.slick-track {

    display: block !important;

    width: 100% !important;

    height: auto !important;

    transform: none !important;
}


.images-container.homto-gallery-active
#thumb-gallery
.slick-slide {

    display: block !important;

    float: none !important;

    width: 82px !important;

    height: 82px !important;

    margin: 0 0 10px 0 !important;

    transform: none !important;
}


/* ============================================================
   10. USUNIĘCIE DOMYŚLNYCH STRZAŁEK
   ============================================================ */

.images-container.homto-gallery-active
#thumb-gallery
.slick-prev,

.images-container.homto-gallery-active
#thumb-gallery
.slick-next,

.images-container.homto-gallery-active
.arrows-product-fake {

    display: none !important;

    visibility: hidden !important;
}


/* ============================================================
   11. LICZNIK ZDJĘĆ
   ============================================================ */

.images-container.homto-gallery-active
.homto-gallery-container {

    position: absolute !important;

    right: 15px !important;

    bottom: 15px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: auto !important;

    min-width: 58px !important;

    height: 30px !important;

    padding: 4px 12px !important;

    white-space: nowrap !important;

    background: rgba(0,0,0,.65) !important;

    color: #fff !important;

    border-radius: 20px !important;

    font-size: 14px !important;

    line-height: 20px !important;

    z-index: 50 !important;

    box-sizing: border-box !important;
}


.images-container.homto-gallery-active
.homto-gallery-container * {

    white-space: nowrap !important;

    display: inline !important;
}


/* ============================================================
   12. DODATKOWE ELEMENTY NIE MOGĄ ROZBIJAĆ GALERII
   ============================================================ */

.images-container.homto-gallery-active
.layer {

    position: absolute !important;

    z-index: 40 !important;
}


/* ============================================================
   13. DESKTOP
   ============================================================ */

@media (min-width: 1200px) {

    .images-container.homto-gallery-active {

        grid-template-columns: 90px minmax(0, 1fr) !important;

        column-gap: 20px !important;
    }


    .images-container.homto-gallery-active
    #thumb-gallery {

        width: 90px !important;

        height: 560px !important;

        max-height: 560px !important;
    }


    .images-container.homto-gallery-active
    .product-cover {

        height: 560px !important;

        min-height: 560px !important;
    }


    .images-container.homto-gallery-active
    .product-cover
    #zoom_product {

        height: 540px !important;

        max-height: 540px !important;

        max-width: 600px !important;
    }
}


/* ============================================================
   14. TABLET
   ============================================================ */

@media (min-width: 768px) and (max-width: 1199px) {

    .images-container.homto-gallery-active {

        grid-template-columns: 75px minmax(0, 1fr) !important;

        column-gap: 15px !important;
    }


    .images-container.homto-gallery-active
    #thumb-gallery {

        width: 75px !important;

        max-width: 75px !important;

        height: 460px !important;

        max-height: 460px !important;
    }


    .images-container.homto-gallery-active
    #thumb-gallery
    .thumb-container {

        width: 68px !important;

        min-width: 68px !important;

        height: 68px !important;

        min-height: 68px !important;
    }


    .images-container.homto-gallery-active
    #thumb-gallery
    .thumb-container
    img.thumb {

        width: 66px !important;

        height: 66px !important;
    }


    .images-container.homto-gallery-active
    .product-cover {

        height: 460px !important;

        min-height: 460px !important;
    }


    .images-container.homto-gallery-active
    .product-cover
    #zoom_product {

        height: 440px !important;

        max-height: 440px !important;
    }
}


/* ============================================================
   15. TELEFON
   ============================================================ */

@media (max-width: 767px) {

    .images-container.homto-gallery-active {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        gap: 10px !important;
    }


    .images-container.homto-gallery-active
    .product-cover {

        order: 1 !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;
    }


    .images-container.homto-gallery-active
    .product-cover
    #zoom_product {

        width: 100% !important;

        height: auto !important;

        max-width: 100% !important;

        max-height: none !important;
    }


    .images-container.homto-gallery-active
    #thumb-gallery {

        order: 2 !important;

        position: relative !important;

        width: 100% !important;

        max-width: 100% !important;

        height: 82px !important;

        max-height: 82px !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;
    }


    .images-container.homto-gallery-active
    #thumb-gallery
    .slick-track {

        display: flex !important;

        flex-direction: row !important;

        width: max-content !important;
    }


    .images-container.homto-gallery-active
    #thumb-gallery
    .slick-slide {

        flex: 0 0 70px !important;

        width: 70px !important;

        height: 70px !important;

        margin-right: 8px !important;

        margin-bottom: 0 !important;
    }


    .images-container.homto-gallery-active
    #thumb-gallery
    .thumb-container {

        width: 70px !important;

        min-width: 70px !important;

        height: 70px !important;

        min-height: 70px !important;

        margin-right: 8px !important;

        margin-bottom: 0 !important;
    }


    .images-container.homto-gallery-active
    #thumb-gallery
    .thumb-container
    img.thumb {

        width: 68px !important;

        height: 68px !important;
    }


    .images-container.homto-gallery-active
    .homto-gallery-container {

        right: 10px !important;

        bottom: 10px !important;
    }
}