.product-gallery { max-width:100%; margin:auto; position:relative; }
.main-image {
    width:100%; aspect-ratio:1/1; border:1px solid #ddd; border-radius:0;
    overflow:hidden; position:relative; background:#f9f9f9; cursor:crosshair;
}
.main-img-visible {
    width:100%; height:100%; object-fit:contain; display:block !important;
    position:relative; z-index:1;
}
.slides-container { position:absolute; inset:0; z-index:2; display:none; }
.slides-container.active { display:block; }
#slides {
    display:flex; height:100%; transition:transform .4s ease-in-out;
    will-change:transform; user-select:none; -webkit-user-select:none;
}
#slides.no-transition { transition:none !important; }
#slides.dragging { transition:none !important; }
.slide-item { flex-shrink:0; width:100%; height:100%; position:relative; }
.slide-item img {
    width:100%; height:100%; object-fit:contain; pointer-events:none;
    user-select:none; -webkit-user-select:none; display:block;
}
.thumbnails { display:flex; gap:10px; margin-top:15px; justify-content:center; flex-wrap:wrap; }
.thumbnails img {
    width:70px; height:70px; object-fit:cover; border:1px solid transparent;
    cursor:pointer; transition:.3s;
}
.thumbnails img.active, .thumbnails img:hover { border-color:#ef5f1f; transform:scale(1.05); }
@media(max-width:768px){
    .thumbnails{display:none!important;}
    .main-image{cursor:default;}
    .mobile-indicator{
        position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
        z-index:3; display:flex; gap:8px;
    }
    .mobile-indicator span{
        width:10px; height:10px; background:rgba(255,255,255,.5);
        border-radius:50%; cursor:pointer;
    }
    .mobile-indicator span.active{ background:#ef5f1f; }
}
#main-image-container{ touch-action:pan-y; }