/* PRODUCT GALLERY */
.product-gallery-wrapper{max-width:600px;margin:0 auto 30px;background:#fff;padding:10px;border-radius:var(--radius);box-shadow:0 2px 10px rgba(0,0,0,.05);position:relative;transition:.3s;}
.gallery-top{width:100%;height:400px;border:1px solid #eee;border-radius:var(--radius);margin-bottom:10px;overflow:hidden;background:#fff;}
.gallery-top .swiper-slide{background:#fff;display:flex;justify-content:center;align-items:center;cursor:grab;position:relative;width:100%;height:100%;}
.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;}
.gallery-top .swiper-slide img{height:100%;object-fit:contain;object-position:center;}
.video-wrapper{width:100%;height:100%;background:#000;display:flex;align-items:center;justify-content:center;}
.video-wrapper iframe{width:100%;height:100%;border:0;}
.btn-fullscreen-toggle{position:absolute;top:10px;right:10px;width:36px;height:36px;background:rgba(255,255,255,.8);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:50;color:#333;transition:.2s;box-shadow:0 2px 5px rgba(0,0,0,.1);}
.btn-fullscreen-toggle:hover{background:var(--primary);color:#fff;}
.gallery-btn-prev,.gallery-btn-next{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;background:rgba(255,255,255,.8);border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;z-index:20;cursor:pointer;color:#555;transition:.3s;opacity:0;visibility:hidden;}
.product-gallery-wrapper:hover .gallery-btn-prev,.product-gallery-wrapper:hover .gallery-btn-next{opacity:1;visibility:visible;}
.gallery-btn-prev:hover,.gallery-btn-next:hover{background:var(--primary);color:#fff;}
.gallery-btn-prev{left:10px;}
.gallery-btn-next{right:10px;}
.gallery-thumbs-container{border:1px solid #eee;border-radius:var(--radius);padding:5px;background:#fff;width:100%;}
.gallery-thumbs{height:80px;padding:0;}
.gallery-thumbs .swiper-slide{width:20%;height:100%;opacity:.6;cursor:pointer;transition:.3s;}
.gallery-thumbs .swiper-slide-thumb-active{opacity:1;}
.thumb-content{width:100%;height:100%;border:2px solid transparent;border-radius:4px;overflow:hidden;position:relative;background:#fff;}
.gallery-thumbs .swiper-slide-thumb-active .thumb-content{border-color:var(--primary);}
.thumb-content img{width:100%;height:100%;object-fit:cover;}
.video-thumb-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:20px;text-shadow:0 0 5px rgba(0,0,0,.5);}

/* FULLSCREEN */
.product-gallery-wrapper.is-fullscreen{position:fixed;inset:0;width:100%;height:100%;max-width:none;margin:0;padding:0;background:#000;z-index:9999;border-radius:0;display:flex;flex-direction:column;}
.is-fullscreen .gallery-top{height:calc(100% - 120px);border:0;border-radius:0;margin:0;background:#000;}
.is-fullscreen .gallery-top .swiper-slide{background:#000;cursor:grab;}
.is-fullscreen .btn-fullscreen-toggle{background:rgba(255,255,255,.2);color:#fff;top:20px;right:20px;}
.is-fullscreen .gallery-btn-prev,.is-fullscreen .gallery-btn-next{background:rgba(255,255,255,.2);color:#fff;opacity:1;visibility:visible;width:50px;height:50px;}
.is-fullscreen .gallery-thumbs-container{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(20,20,20,.9);border:1px solid #444;width:100%;max-width:600px;padding:5px;}
.is-fullscreen .gallery-thumbs{height:80px;background:transparent;}
.is-fullscreen .gallery-thumbs .swiper-slide{opacity:.5;}
.is-fullscreen .gallery-thumbs .swiper-slide-thumb-active{opacity:1;}
.is-fullscreen .thumb-content{background:#333;}

/* MOBILE */
@media(max-width:767px){
.product-gallery-wrapper{width:100%!important;max-width:100%!important;margin:0 auto 20px!important;padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important;}
.gallery-top{width:100%!important;aspect-ratio:1/1;height:auto!important;border:0;border-radius:0;}
.gallery-btn-prev,.gallery-btn-next{display:none!important;}
.btn-fullscreen-toggle{top:10px;right:10px;width:32px;height:32px;background:rgba(0,0,0,.4);color:#fff;}
.gallery-top .swiper-slide img{width:100%!important;height:100%!important;object-fit:contain;object-position:center;}
}
