/* Picture viewer: the set's screenshots, opened large over the store's navy, one at a time on a strip that slides with
   the finger (a swipe can start anywhere, the arrows and the screen edge included). Each picture in its own shape,
   with small corners: as big as the screen allows, but never more than twice the picture's real size (--nw, its width
   in pixels), so small screenshots don't turn blocky; a Blu-Ray screenshot without the black bars of its file
   (.is-boxed). Slim arrows at the sides, a "3 / 24" count, a round close button. Built by "Picture viewer". */
.pv { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 32, 56, .94); touch-action: none; user-select: none; -webkit-user-select: none; overscroll-behavior: contain; }
.pv[hidden] { display: none; }
html.pv-open { overflow: hidden; }
.pv__stage { position: absolute; inset: 0; overflow: hidden; }
.pv__track { display: flex; height: 100%; will-change: transform; }
.pv__slide { flex: 0 0 100%; box-sizing: border-box; display: grid; place-items: center; margin: 0; padding: max(60px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(60px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.pv__img { display: block; width: min(100%, 1280px, calc((100vh - 120px) * var(--ar, 1.3333)), calc(var(--nw, 100000) * 2px)); width: min(100%, 1280px, calc((100dvh - 120px) * var(--ar, 1.3333)), calc(var(--nw, 100000) * 2px)); height: auto; aspect-ratio: var(--ar, auto); max-width: 100%; border-radius: 4px; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); -webkit-user-drag: none; }
.pv__img.is-boxed { object-fit: cover; }
.pv__count { position: absolute; z-index: 2; top: max(26px, env(safe-area-inset-top, 0px)); left: max(20px, env(safe-area-inset-left, 0px)); margin: 0; color: rgba(255, 255, 255, .85); font: 600 14px/1 var(--f-text, system-ui, sans-serif); letter-spacing: .02em; }

/* arrows: slim white chevrons at the sides, each a full-height strip easy to hit */
.pv__prev, .pv__next { position: absolute; z-index: 2; top: 0; bottom: 0; display: flex; align-items: center; width: 56px; margin: 0; padding: 0; border: 0; background: none; color: #FFFFFF; cursor: pointer; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.pv__prev { left: max(0px, env(safe-area-inset-left, 0px)); justify-content: flex-start; padding-left: 6px; }
.pv__next { right: max(0px, env(safe-area-inset-right, 0px)); justify-content: flex-end; padding-right: 6px; }
.pv__next svg { transform: scaleX(-1); }
.pv__prev svg, .pv__next svg { display: block; width: 30px; height: 30px; }
.pv__prev:focus-visible, .pv__next:focus-visible { outline: 3px solid #3E8FCF; outline-offset: -3px; }
@media (hover: hover) { .pv__prev:hover, .pv__next:hover { opacity: .8; } }
/* at the first / last picture the arrow is hidden but still takes the tap (a bounce), so the tap can't close the viewer */
.pv__prev.is-off, .pv__next.is-off { opacity: 0; cursor: default; }
.pv--one .pv__prev, .pv--one .pv__next, .pv--one .pv__count { display: none; }

.pv__close { position: absolute; z-index: 3; top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #FFFFFF; color: #00385F; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.pv__close:focus-visible { outline: 3px solid #3E8FCF; outline-offset: 3px; }
.pv__close svg { display: block; }
@media (min-width: 1024px) { .pv__prev, .pv__next { width: 88px; } .pv__prev { padding-left: 24px; } .pv__next { padding-right: 24px; } .pv__slide { padding-inline: 96px; } }