.cps-gallery-wrapper{
    display:flex;
    gap:20px;
    align-items:flex-start;
}

/* THUMBNAILS */

.cps-thumbnails{
    width:90px;
    display:flex;
    flex-direction:column;
    gap:15px;
}

.cps-thumb{
    width:100%;
    border:2px solid #ddd;
    border-radius:10px;
    cursor:pointer;
    transition:0.3s;
    background:#fff;
    padding:5px;
}

.cps-thumb:hover{
    border-color:#0d7c3e;
    transform:scale(1.05);
}

/* MAIN IMAGE */

.cps-main-area{
    flex:1;
    background:#fff;
    border-radius:20px;
    padding:25px;
    position:relative;
    box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

#cps-main-image{
    width:100%;
    max-height:700px;
    object-fit:contain;
    transition:0.4s;
}

#cps-main-image:hover{
    transform:scale(1.02);
}

/* BUTTON */

.cps-zoom-btn{
    margin-top:20px;
    padding:14px 24px;
    border:none;
    background:#0d7c3e;
    color:#fff;
    border-radius:12px;
    cursor:pointer;
    font-size:15px;
}

/* POPUP */

.cps-popup-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.92);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999999;
}

#cps-popup-image{
    max-width:90%;
    max-height:90%;
    border-radius:20px;
}

.cps-close-popup{
    position:absolute;
    top:30px;
    right:40px;
    color:#fff;
    font-size:50px;
    cursor:pointer;
}

/* MOBILE */

@media(max-width:768px){

    .cps-gallery-wrapper{
        flex-direction:column-reverse;
    }

    .cps-thumbnails{
        width:100%;
        flex-direction:row;
    }

    .cps-thumb{
        width:70px;
    }
}