/* fullscreen photo viewer · 2026-10-17 */
html.vxg-lock,html.vxg-lock body{overflow:hidden!important;overscroll-behavior:none}
body.vx .product-item-detail-slider-images-container{cursor:zoom-in!important;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
body.vx .product-item-detail-slider-container.popup{position:relative!important}
.vxg{--vxg-bg:1;position:fixed;inset:0;z-index:30000;display:flex;flex-direction:column;background:rgba(11,18,32,var(--vxg-bg));opacity:0;transition:opacity .22s ease;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-family:var(--font,system-ui)}
.vxg[hidden]{display:none!important}
.vxg.is-on{opacity:1}
.vxg__top{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;justify-content:center;height:64px;padding:env(safe-area-inset-top) 16px 0;pointer-events:none}
.vxg__cnt{color:rgba(255,255,255,.82);font-size:14px;font-weight:600;letter-spacing:.02em}
.vxg__x{pointer-events:auto;position:absolute;right:14px;top:calc(12px + env(safe-area-inset-top));width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.vxg__x:hover{background:rgba(255,255,255,.26)}
.vxg__x svg,.vxg__nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vxg__nav{position:absolute;top:50%;z-index:3;width:52px;height:52px;margin-top:-26px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:none;place-items:center;cursor:pointer;transition:background .2s,opacity .2s}
.vxg__nav:hover{background:rgba(255,255,255,.28)}
.vxg__nav--l{left:20px}.vxg__nav--r{right:20px}
.vxg.is-single .vxg__nav,.vxg.is-single .vxg__thumbs{display:none!important}
.vxg.is-zoomed .vxg__nav,.vxg.is-zoomed .vxg__thumbs{opacity:0;pointer-events:none}
.vxg__stage{position:relative;flex:1;min-height:0;overflow:hidden;will-change:transform}
.vxg__track{display:flex;height:100%;will-change:transform}
.vxg__slide{flex:0 0 100vw;width:100vw;height:100%;display:flex;align-items:center;justify-content:center;padding:60px 12px 12px;box-sizing:border-box;overflow:hidden}
.vxg__media{max-width:100%;max-height:100%;object-fit:contain;display:block;transform-origin:center center;will-change:transform;-webkit-user-drag:none;border-radius:4px}
.vxg.is-zoomed .vxg__stage{cursor:grab}
img.vxg__media{cursor:zoom-in}
.vxg.is-zoomed img.vxg__media{cursor:grab}
video.vxg__media{width:auto;background:#000;border-radius:12px}
.vxg__thumbs{flex:0 0 auto;display:flex;justify-content:center;gap:8px;padding:8px 16px calc(14px + env(safe-area-inset-bottom));overflow-x:auto;scrollbar-width:none;transition:opacity .2s}
.vxg__thumbs::-webkit-scrollbar{display:none}
.vxg__th{position:relative;flex:0 0 46px;width:46px;height:60px;padding:0;border:1.5px solid rgba(255,255,255,.25);border-radius:9px;overflow:hidden;background:#1b2436;cursor:pointer;transition:border-color .2s,box-shadow .2s;opacity:.75}
.vxg__th img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;pointer-events:none}
.vxg__th span{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,18,32,.45);color:#fff;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.vxg__th.on{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3);opacity:1}
@media (hover:hover) and (pointer:fine){
 .vxg__nav{display:grid}
 .vxg__slide{padding:70px 90px 12px}
 .vxg__th{flex-basis:56px;width:56px;height:74px}
}