@import url('./assets/vendor/photoswipe/photoswipe.css');
/* One hairline around the complete interface, without affecting its geometry. */
.viewer.photoswipe-viewer .viewer-shell::after { content: ''; position: absolute; inset: 0; z-index: 6; border: 1px solid rgba(255, 255, 255, 0.12); pointer-events: none; }
.viewer.photoswipe-viewer .viewer-image { position: relative; }
.viewer.photoswipe-viewer .viewer-image > img { visibility: hidden; }
.viewer.photoswipe-viewer .pswp { position: absolute; inset: 25px; width: auto; height: auto; z-index: 1; --pswp-bg: #000; }
.viewer.photoswipe-viewer .pswp__top-bar { display: none; }
.viewer.photoswipe-viewer .pswp:focus { outline: none; }
/* Two aligned 44px controls; only their opacity changes. */
.viewer.photoswipe-viewer .viewer-close,
.viewer.photoswipe-viewer .focus-toggle { position: absolute; top: 12px; z-index: 5; width: 44px; height: 44px; padding: 11px; margin: 0; border: 0; background: transparent; color: #fff; display: grid; place-items: center; }
.viewer.photoswipe-viewer .viewer-close { right: 16px; }
.viewer.photoswipe-viewer .focus-toggle { right: 64px; }
.viewer.photoswipe-viewer .viewer-close svg,
.viewer.photoswipe-viewer .focus-toggle svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.viewer.photoswipe-viewer .viewer-close:focus-visible,
.viewer.photoswipe-viewer .focus-toggle:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
 .viewer.photoswipe-viewer .viewer-close, .viewer.photoswipe-viewer .focus-toggle { opacity: .55; transition: opacity 180ms ease; }
 .viewer.photoswipe-viewer.controls-active .viewer-close, .viewer.photoswipe-viewer.controls-active .focus-toggle,
 .viewer.photoswipe-viewer .viewer-close:hover, .viewer.photoswipe-viewer .focus-toggle:hover,
 .viewer.photoswipe-viewer .viewer-close:focus-visible, .viewer.photoswipe-viewer .focus-toggle:focus-visible,
 .viewer.photoswipe-viewer .viewer-close:active, .viewer.photoswipe-viewer .focus-toggle:active { opacity: 1; }
}
.viewer.photoswipe-viewer.is-focus { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; overflow: hidden; }
.viewer.photoswipe-viewer.is-focus .viewer-shell { display: block; height: 100dvh; }
.viewer.photoswipe-viewer.is-focus .viewer-info { display: none; }
.viewer.photoswipe-viewer.is-focus .viewer-image { width: 100%; height: 100%; padding: 0; }
.viewer.photoswipe-viewer.is-focus .pswp { inset: 45px 12px 60px; }
.viewer.photoswipe-viewer.is-focus .viewer-controls { position: absolute; z-index: 4; bottom: 8px; left: 20px; right: 20px; margin: 0; padding: 0; border: 0; pointer-events: none; }
.viewer.photoswipe-viewer.is-focus .viewer-controls button { pointer-events: auto; background: #0009; }
.viewer.photoswipe-viewer.is-focus .viewer-close { position: absolute; top: 12px; right: 16px; margin: 0; }
.viewer.photoswipe-viewer .viewer-info { animation: viewer-info-reveal .16s ease-out; }
@keyframes viewer-info-reveal { from { opacity: .25; } to { opacity: 1; } }
@media(max-width:700px) { .viewer.photoswipe-viewer .pswp { inset: 40px 10px 10px; } .viewer.photoswipe-viewer.is-focus .pswp { inset: 45px 10px 60px; } }
@media(prefers-reduced-motion:reduce) { .viewer.photoswipe-viewer .viewer-info { animation: none; } }

/* Fullscreen the shell so image, counter and both controls stay together. */
.viewer.photoswipe-viewer .viewer-shell:fullscreen { width: 100vw; height: 100dvh; background: #000; }
.viewer.photoswipe-viewer .viewer-shell:fullscreen::after { display: none; }