.product-gallery{max-width:600px; 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;justify-content:center;flex-wrap:wrap}
.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}
}