/* WearSlabs: product picture zoom (zoom.js), hoodie and binder pages */
/* the magnifier on the picture: tap to zoom on phones, the keyboard way in on desktop */
.zm-hint { position: absolute; right: 10px; bottom: 10px; z-index: 6; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(10,11,16,.48); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: zoom-in; opacity: .82; transition: opacity .2s; }
.zm-hint svg { width: 18px; height: 18px; }
.zm-hint:hover, .zm-hint:focus-visible { opacity: 1; }
.zm-hint:focus-visible { outline: 2px solid var(--accent, #fff); outline-offset: 2px; }
.zm-hint[hidden] { display: none; }
/* hoodie: smaller, in the empty top corner beside the hood, off the sleeve */
.pdp__stage .zm-hint { top: 8px; bottom: auto; right: 8px; width: 32px; height: 32px; }
.pdp__stage .zm-hint svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .zm:not(.zm-off) { cursor: zoom-in; }
  .zm-on .zm-hint { opacity: 0; }
}
/* hover zoom: the frame goes flat and clips, the layer scales (stamps and text ride along), no bob, no shine */
.zm-on { overflow: hidden; transition: transform .25s ease; }
.zm-layer { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.zm-on .zm-layer { animation: none; }
.zm-on .holo__shine, .zm-on .holo__glare { opacity: 0 !important; }

/* fullscreen viewer */
html.zv-open { overflow: hidden; }
.zv { position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; overscroll-behavior: contain; color: #fff; background: rgba(7,8,12,var(--fade, 1)); }
.zv::backdrop { background: transparent; }
.zv:not([open]) { display: none; }
.zv__track { display: flex; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .32s cubic-bezier(.2,.7,.2,1); }
.zv__slide { position: relative; flex: 0 0 100%; height: 100%; display: grid; place-items: center; overflow: hidden; transition: transform .25s ease; }
.zv.drag .zv__track, .zv.drag .zv__slide { transition: none; }
.zv__box { position: relative; container-type: inline-size; transform-origin: 50% 50%; }
.zv__box.anim { transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.zv__box > img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; pointer-events: none; }
.zv__box img { -webkit-user-drag: none; }
.zv .pdp__float { animation: none; }
.zv__spin { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); border-top-color: #fff; animation: zvSpin .8s linear infinite; }
@keyframes zvSpin { to { transform: rotate(360deg); } }
.zv__err { color: rgba(255,255,255,.7); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.zv__x { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 2; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
.zv__x:hover { background: rgba(255,255,255,.16); }
.zv__x svg, .zv__nav svg { width: 20px; height: 20px; }
.zv__cap { position: absolute; top: max(24px, calc(env(safe-area-inset-top) + 12px)); left: max(16px, env(safe-area-inset-left)); right: 72px; z-index: 2; margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.zv__dots { position: absolute; left: 50%; bottom: max(20px, calc(env(safe-area-inset-bottom) + 8px)); translate: -50% 0; z-index: 2; display: flex; gap: 7px; pointer-events: none; }
.zv__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.3); transition: background .2s; }
.zv__dots i.on { background: #fff; }
.zv__nav { display: none; }
.zv:focus { outline: none; }
.zv button:focus-visible { outline: 2px solid var(--accent, #fff); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .zv.multi .zv__nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
  .zv__nav--prev { left: 20px; } .zv__nav--next { right: 20px; }
  .zv__nav:hover { background: rgba(255,255,255,.14); }
  .zv__nav:disabled { opacity: .3; cursor: default; }
  .zv__track { cursor: zoom-out; }
  .zv__box { cursor: zoom-in; }
  .zv.is-zoomed .zv__box { cursor: grab; }
  .zv.is-zoomed .zv__track { cursor: grab; }
}
@media (prefers-reduced-motion: reduce) {
  .zm-on, .zm-layer, .zv__track, .zv__slide, .zv__box.anim { transition: none; }
}