.product-gallery{max-width:600px;margin:20px auto;padding:0;border-radius:5px}
.main-image-container{position:relative;margin-bottom:15px}
.main-image{padding:10px;text-align:center;max-height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:pan-y}
.main-image img{max-width:100%;max-height:100%;transition:opacity .3s ease;user-select:none}
.main-image img.fade-out{opacity:0}
.nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:60px;color:#fff;border:none;border-radius:4px;font-size:20px;cursor:pointer;z-index:10;background-color:transparent;transition:opacity .3s}
.nav-btn:hover{opacity:.8;background-color:rgba(0,0,0,.5)}
.prev-btn{left:10px}
.next-btn{right:10px}
.thumbnail-list{display:flex;gap:10px; }
.thumbnail{width:80px;height:80px;object-fit:cover;border:2px solid transparent;cursor:pointer;transition:all .3s}
.thumbnail:hover{border-color:#ccc}
.thumbnail.active{border-color:#3498db;box-shadow:0 2px 5px rgba(0,0,0,.1)}
@media (max-width:768px){
.product-gallery{padding:0;margin:0}
.nav-btn{width:30px;height:50px;font-size:16px}
.main-image{max-height:100%}
.thumbnail{width:60px;height:60px}
}
.thumbnail-container{width:100%;overflow-x:auto;padding-bottom:10px;-webkit-overflow-scrolling:touch}
 
.thumbnail-list{display:inline-flex;gap:10px;padding:5px 0;min-width:100%}
.thumbnail{width:80px;height:80px;object-fit:cover;border:2px solid transparent;cursor:pointer;transition:all .3s;flex-shrink:0}

 .thumbnail-list img{
    border:2px solid transparent;
 }