/* ===========================
   Custom Product Gallery Slider
   Styles
=========================== */

/* Product Gallery */
.custom-product-gallery{
    display:flex;
    gap:30px;
    align-items:flex-start;
}

/* ===========================
   Thumbnails
=========================== */
.gallery-thumbs{
    display:flex;
    flex-direction:column;
    gap:15px;
    max-height:600px;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:0;
    scrollbar-width:none;      /* Firefox */
    -ms-overflow-style:none;   /* IE/Edge */
}

.gallery-thumbs::-webkit-scrollbar{
    display:none;              /* Chrome/Safari/Edge (Chromium) */
}

.gallery-thumbs .thumb{
    width:100px;
    height:130px;
    object-fit:cover;
    background:#fff;
    border:2px solid #e8e8e8;
    border-radius:14px;
    padding:6px;
    cursor:pointer;
    transition:all .3s ease;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.gallery-thumbs .thumb:hover{
    border-color:#90bf3e;
    transform:translateY(-4px);
    box-shadow:0 12px 25px rgba(144,191,62,.25);
}

.gallery-thumbs .thumb.active{
    border-color:#0067b2;
    box-shadow:0 0 0 4px rgba(0,103,178,.12);
}

/* ===========================
   Main Image / Slider
=========================== */

.main-image{
    flex:1;
}

.image-box{
    position:relative;
    background:#fff;
    border:1px solid #edf2f5;
    border-radius:20px;
    padding:25px;
    text-align:center;
    overflow:hidden;
    transition:.35s ease;
    box-shadow:
        0 10px 30px rgba(0,0,0,.06),
        0 2px 8px rgba(0,0,0,.04);
}

.image-box:hover{
    box-shadow:
        0 18px 45px rgba(0,103,178,.12),
        0 5px 15px rgba(0,0,0,.06);
}

.main-image img{
    width:100%;
    max-width:650px;
    display:block;
    margin:auto;
    transition:transform .4s ease, opacity .15s ease;
    border-radius:15px;
}

.image-box:hover img{
    transform:scale(1.04);
}

.image-box{
    background:
        radial-gradient(circle at top right, rgba(144,191,62,.08), transparent 40%),
        radial-gradient(circle at bottom left, rgba(0,103,178,.08), transparent 45%),
        #fff;
}

.main-image:hover img{
    transform:scale(1.05);
}

/* ===========================
   Slider Arrows
=========================== */

.cpg-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border-radius:50%;
    border:none;
    background:#fff;
    color:#0067b2;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    transition:all .25s ease;
    z-index:2;
}

.cpg-arrow:hover{
    background:#0067b2;
    color:#fff;
    box-shadow:0 8px 22px rgba(0,103,178,.3);
}

.cpg-prev{ left:14px; }
.cpg-next{ right:14px; }

/* ===========================
   Dots (position indicator)
=========================== */

.cpg-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:14px;
}

.cpg-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#e0e6ea;
    cursor:pointer;
    transition:all .25s ease;
}

.cpg-dot:hover{
    background:#90bf3e;
}

.cpg-dot.active{
    background:#0067b2;
    transform:scale(1.25);
}

/* ===========================
   Responsive
=========================== */

@media (max-width:991px){

    .custom-product-gallery{
        gap:20px;
    }

    .gallery-thumbs .thumb{
        width:75px;
        height:75px;
    }

}

@media (max-width:767px){

    .custom-product-gallery{
        flex-direction:column;
    }

    .main-image{
        order:1;
        width:100%;
    }

    .gallery-thumbs{
        order:2;
        flex-direction:row;
        justify-content:center;
        flex-wrap:wrap;
        gap:12px;
        margin-top:20px;
        max-height:none;
        overflow:visible;
        padding-right:0;
    }

    .gallery-thumbs .thumb{
        width:70px;
        height:70px;
    }

    .image-box{
        padding:18px;
        border-radius:16px;
    }

    .cpg-arrow{
        width:36px;
        height:36px;
    }

    .cpg-prev{ left:8px; }
    .cpg-next{ right:8px; }

}

@media (max-width:480px){

    .gallery-thumbs .thumb{
        width:60px;
        height:60px;
        padding:4px;
    }

    .image-box{
        padding:12px;
    }

}