html.gallery-viewer-open { overflow: hidden; }
.gallery-viewer { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #0B1519; color: var(--cms-on-dark, #fff); }
.gallery-viewer[open] { display: flex; flex-direction: column; }
.gallery-viewer::backdrop { background: #0B1519; }
.gallery-viewer [hidden] { display: none; }
.gallery-viewer-bar { display: flex; align-items: center; gap: 20px; padding: 12px 16px 12px 24px; font-size: 14px; color: var(--cms-on-dark-muted, #d3dce0); }
.gallery-viewer-counter { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gallery-viewer-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-viewer-download { padding: 9px 18px; font-weight: 600; color: var(--cms-ink, #0b1519); background: var(--cms-on-dark, #fff); }
.gallery-viewer-download:hover, .gallery-viewer-download:focus { color: var(--cms-ink, #0b1519); background: var(--cms-blue-pale, #e4f2f8); text-decoration: none; }
.gallery-viewer-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 72px 24px; }
.gallery-viewer-image { display: block; max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
.gallery-viewer-feedback { max-width: 30rem; padding: 24px; text-align: center; }
.gallery-viewer-retry { min-height: 44px; padding: 9px 18px; border: 0; background: var(--cms-on-dark, #fff); color: var(--cms-ink, #0b1519); font: inherit; font-weight: 600; cursor: pointer; }
.gallery-viewer-retry:hover { background: var(--cms-blue-pale, #e4f2f8); }
.gallery-viewer-close, .gallery-viewer-step { position: relative; flex-shrink: 0; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; color: var(--cms-on-dark, #fff); cursor: pointer; }
.gallery-viewer-close:hover, .gallery-viewer-step:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.gallery-viewer-close:focus-visible, .gallery-viewer-step:focus-visible, .gallery-viewer-download:focus-visible, .gallery-viewer-retry:focus-visible { outline: 2px solid var(--cms-blue-light, #72caff); outline-offset: 2px; }
.gallery-viewer-close::before, .gallery-viewer-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 2px; background: currentColor; }
.gallery-viewer-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.gallery-viewer-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.gallery-viewer-step { position: absolute; top: 50%; width: 56px; height: 72px; margin-top: -48px; }
.gallery-viewer-previous { left: 8px; }
.gallery-viewer-next { right: 8px; }
.gallery-viewer-step::before { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; }
.gallery-viewer-previous::before { transform: translate(-30%, -50%) rotate(-45deg); }
.gallery-viewer-next::before { transform: translate(-70%, -50%) rotate(135deg); }
.gallery-viewer-step:disabled { opacity: .25; cursor: default; }
@media (max-width: 767px) {
    .gallery-viewer-bar { gap: 12px; padding: calc(8px + env(safe-area-inset-top)) 8px 8px 16px; }
    .gallery-viewer-name { display: none; }
    .gallery-viewer-counter { flex: 1 1 auto; }
    .gallery-viewer-stage { padding: 0 0 calc(72px + env(safe-area-inset-bottom)); }
    .gallery-viewer-step { top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); margin-top: 0; height: 56px; }
    .gallery-viewer-previous { left: 16px; }
    .gallery-viewer-next { right: 16px; }
}