.battery-gallery{
max-width:700px;
margin-bottom:40px;
}

#battery-main-img{
transition: opacity 0.2s ease;
}

.battery-main-image{
position:relative;
}

/* .battery-prev,
.battery-next{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.5);
color:white;
border:none;
font-size:24px;
padding:10px;
cursor:pointer;
z-index:10;
} */

/* .battery-prev{ left:10px; }
.battery-next{ right:10px; }

.battery-prev:hover,
.battery-next:hover{
background:black;
} */

.battery-main-image img{
width:100%;
border:1px solid rgb(229,230,234);
border-radius:12px;
cursor:pointer;
}

.battery-thumbnails{
display:flex;
gap:15px;
margin-top:12px;
flex-wrap:wrap;
}

.battery-thumbnails img{
cursor:pointer;
border:2px solid rgb(229,230,234);
border-radius:12px;
padding:3px;
width:80px;
opacity:0.7;
transition:0.2s;
}

.battery-thumbnails img.active{
opacity:1;
border:2px solid rgb(0,42,92);
border-radius:12px;
}

.battery-thumbnails img:hover{
opacity:1;
/* border:3px solid rgb(0,42,92); */
border-radius:12px;
}


#battery-lightbox{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
justify-content:center;
align-items:center;
z-index:9999;
}

#battery-lightbox img{
max-width:90%;
max-height:90%;
}


.zoom-container{
position:relative;
overflow:hidden;
cursor:zoom-in;
}



@media (max-width: 768px) {

.zoom-container img{
width:100%!important;
transition:transform 0.1s ease;
}
	
}

.zoom-container img{
width:95%;
max-width:546px;
transition:transform 0.1s ease;
}

.zoom-container.zoomed img{
transform:scale(2);
}


.battery-lightbox{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.battery-lightbox img{
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    border-radius: 8px;
}

.battery-close{
    position:absolute;
    top:20px;
    right:30px;
    font-size:42px;
    color:#fff;
    cursor:pointer;
    user-select:none;
}

.battery-prev,
.battery-next{
    position:absolute;
    top:50%;
    transform:translateY(-10%);
    background:none;
    /* background:rgba(255,255,255,.2); */
    color:#fff;
    border:none;
    font-size:42px;
    width:60px;
    /* height:60px; */
    cursor:pointer;
    border-radius:50%;
}

.battery-prev{
    left:20px;
}

.battery-next{
    right:20px;
}

.battery-prev:hover,
.battery-next:hover{
    background:none!important;
    background-color:transparent!important;
    box-shadow:none!important;
}

.battery-thumbs-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 546px;
    justify-content: center;
}

.battery-thumbnails {
    display: flex;
    flex-wrap: nowrap!important;
    gap: 10px;
    overflow: hidden;
    width: 260px;
    scroll-behavior: smooth;
} 

.battery-thumb {
    flex: 0 0 80px;
    width: 80px;
}