/* =========================================
   BASE
========================================= */

.product-gallery {
    display: none;
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 999999;
    opacity: 0;
    transition: .35s ease;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


    .product-gallery.active {
        opacity: 1;
    }


/* =========================================
   TOP BAR
========================================= */


.gallery-top-bar {
    position: fixed;
    top: 25px;
    left: 35px;
    right: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 99999999;
}



.gallery-size {
    background: #111;
    color: #fff;
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 15px;
}



/* DOWNLOAD */

.gallery-download {
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: #e71c24;
    color: #fff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s ease;
}



    .gallery-download:hover {
        background: #ba121b;
        transform: scale(1.1);
    }




/* CLOSE */

.gallery-close {
    position: fixed;
    top: 25px;
    right: 35px;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: #e71c24;
    color: white;
    font-size: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999999;
    transition: .3s ease;
}



    .gallery-close:hover {
        background: #ba121b;
        transform: rotate(90deg) scale(1.1);
    }




/* =========================================
 MAIN IMAGE
========================================= */


.gallery-content {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-25px);
}



.gallery-main-image {
    max-width: 85%;
    max-height: 82%;
    object-fit: contain;
    border-radius: 12px;
}





/* =========================================
 ARROWS
========================================= */


.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
    border: none;
    border-radius: 50%;
    background: #fff;
    font-size: 32px;
    cursor: pointer;
    z-index: 999999;
    box-shadow: 0 5px 20px rgba(0,0,0,.15);
    transition: .3s ease;
}



    .gallery-arrow:hover {
        background: #e71c24;
        color: #fff;
        transform: translateY(-50%) scale(1.12);
    }



.gallery-prev {
    left: 20px;
}


.gallery-next {
    right: 20px;
}





/* =========================================
 THUMBNAILS
========================================= */


.gallery-thumb-wrapper {
    position: absolute;
    bottom: 20px;
    width: 900px;
    max-width: 90%;
}



.gallery-thumbnails {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
}



    .gallery-thumbnails::-webkit-scrollbar {
        height: 5px;
    }


    .gallery-thumbnails::-webkit-scrollbar-thumb {
        background: #aaa;
        border-radius: 20px;
    }




.thumb-item {
    flex: 0 0 calc((100% - 60px)/6);
}



.gallery-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    opacity: .55;
    border: 2px solid transparent;
    transition: .3s ease;
}





    .gallery-thumb:hover {
        opacity: 1;
        transform: translateY(-5px);
    }



    .gallery-thumb.active {
        opacity: 1;
        border-color: #e71c24;
        transform: translateY(-6px) scale(1.05);
    }


/* ==========================
       IMAGE ZOOM
    ========================== */

.gallery-main-image {
    transition: transform .2s ease;
    user-select: none;
    -webkit-user-drag: none;
}

    .gallery-main-image.zoomed {
        cursor: grab;
    }

    .gallery-main-image.dragging {
        cursor: grabbing;
    }



/* Fullscreen Zoom Mode */
.product-gallery.fullscreen .gallery-thumb-wrapper,
.product-gallery.fullscreen .gallery-top-bar,
.product-gallery.fullscreen .gallery-arrow {
    display: none !important;
}

.product-gallery.fullscreen .gallery-content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-gallery.fullscreen .gallery-main-image {
    max-width: 70vw;
    max-height: 70vh;
    object-fit: contain;
    cursor: grab;
}


/* =========================================
         MOBILE S 320
        ========================================= */


@media(max-width:320px) {

    .gallery-top-bar {
        top: 8px;
        left: 8px;
        right: 45px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        z-index: 99999999;
    }

    .gallery-size {
        font-size: 10px;
        padding: 5px 8px;
        white-space: nowrap;
    }


    .gallery-main-image {
        max-width: 95%;
        max-height: 75%;
    }


    .gallery-thumb-wrapper {
        width: 95%;
        bottom: 10px;
    }



    .thumb-item {
        flex: 0 0 calc((100% - 16px)/3);
    }


    .gallery-close {
        width: 32px;
        height: 32px;
        top: 8px;
        right: 8px;
        font-size: 20px;
    }



    .gallery-download {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }


        .gallery-download svg {
            width: 14px;
            height: 14px;
        }
    /* ✅ ARROW BUTTONS COMPLETELY HIDDEN ✅ */
    .gallery-arrow {
        display: none !important;
    }
}


/* =========================================
       MOBILE M 375
    ========================================= */

@media (min-width:321px) and (max-width:376px) {


    .gallery-top-bar {
        top: 10px;
        left: 10px;
        right: 55px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }



    .gallery-download {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }


        .gallery-download svg {
            width: 15px;
            height: 15px;
        }



    .gallery-close {
        position: fixed;
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }



    .gallery-size {
        font-size: 11px;
        padding: 6px 10px;
    }



    .thumb-item {
        flex: 0 0 calc((100% - 16px) / 3);
    }



    .gallery-arrow {
        display: none !important;
    }
}




/* =========================================
       MOBILE L 425
       ========================================= */

@media (min-width: 376px) and (max-width: 426px) {

    .thumb-item {
        flex: 0 0 calc((100% - 16px) / 3);
    }
    /* ✅ Arrow buttons hide */
    .gallery-arrow,
    .gallery-arrow-prev,
    .gallery-arrow-next,
    button.gallery-arrow,
    div.gallery-arrow,
    .gallery-navigation .gallery-arrow,
    .gallery-nav .gallery-arrow,
    [class*="gallery-arrow"],
    .arrow-btn,
    .nav-arrow,
    .gallery-prev,
    .gallery-next,
    .swiper-button-prev,
    .swiper-button-next,
    .slick-arrow,
    .slick-prev,
    .slick-next {
        display: none !important;
    }
}




/* =========================================
       TABLET 768
    ========================================= */

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

    .gallery-content {
        height: 60vh;
        transform: translateY(-35px);
    }


    .gallery-main-image {
        max-width: 85%;
        max-height: 78%;
    }


    .gallery-thumb-wrapper {
        width: 520px;
        max-width: 85%;
    }


    .gallery-thumbnails {
        gap: 8px;
        padding: 6px;
    }


    .thumb-item {
        flex: 0 0 calc((100% - 56px)/6);
    }


    .gallery-thumb {
        border-radius: 6px;
    }
}






/* =========================================
 LAPTOP 1024
========================================= */

@media(min-width:769px) and (max-width:1200px) {

    .gallery-content {
        height: 65vh;
    }

    .gallery-main-image {
        max-width: 82%;
        max-height: 82%;
    }

    .gallery-thumb-wrapper {
        width: 650px;
    }

    .thumb-item {
        flex: 0 0 calc((100% - 72px)/7);
    }
}



/* =========================================
 LAPTOP L 1440
========================================= */

@media(min-width:1201px) and (max-width:1800px) {

    .gallery-content {
        height: 70vh;
        transform: translateY(-35px);
    }

    .gallery-thumb-wrapper {
        width: 750px;
    }

    .thumb-item {
        flex: 0 0 calc((100% - 72px)/7);
    }
}



/* =========================================
 4K 2560
========================================= */

@media(min-width:1801px) {

    .gallery-content {
        height: 75vh;
        transform: translateY(-45px);
    }

    .gallery-main-image {
        max-width: 75%;
        max-height: 80%;
    }

    .gallery-thumb-wrapper {
        width: 850px;
    }

    .thumb-item {
        flex: 0 0 calc((100% - 84px)/8);
    }
}