.uoph-gallery-lightbox[hidden] { display: none; }
.uoph-gallery-lightbox {
    --uoph-overlay-duration: 220ms;
    --uoph-overlay-easing: cubic-bezier(0.2, 0, 0, 1);
    position: fixed; z-index: 100000; inset: 0;
    inline-size: 100dvw !important; block-size: 100dvh !important;
    margin: 0 !important; padding: 0 !important;
    color: #fff; background: rgb(8 8 8 / 96%);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--uoph-overlay-duration) var(--uoph-overlay-easing), visibility 0s linear var(--uoph-overlay-duration);
}
.uoph-gallery-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.uoph-gallery-lightbox *, .uoph-gallery-lightbox *::before, .uoph-gallery-lightbox *::after { box-sizing: border-box; }
.uoph-gallery-lightbox__close {
    position: fixed !important; z-index: 2; inset-block-start: max(1rem, env(safe-area-inset-top));
    inset-inline-end: max(1rem, env(safe-area-inset-right));
}
@media (hover: hover) and (pointer: fine) {
    .uoph-gallery-lightbox button.uoph-gallery-lightbox__close:hover { transform: rotate(90deg) !important; }
}
.uoph-gallery-lightbox__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: 100dvw;
    inline-size: 100%; block-size: 100%; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior: contain; scroll-behavior: smooth; scroll-snap-type: inline mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y;
    cursor: grab; opacity: 0; transform: scale(.96);
    transition: opacity var(--uoph-overlay-duration) var(--uoph-overlay-easing), transform var(--uoph-overlay-duration) var(--uoph-overlay-easing);
}
.uoph-gallery-lightbox.is-open .uoph-gallery-lightbox__track { opacity: 1; transform: scale(1); }
.uoph-gallery-lightbox__track.is-positioning { scroll-behavior: auto !important; scroll-snap-type: none !important; }
.uoph-gallery-lightbox__track::-webkit-scrollbar { display: none; }
.uoph-gallery-lightbox__track.is-dragging { scroll-behavior: auto; scroll-snap-type: none; cursor: grabbing; user-select: none; }
.uoph-gallery-lightbox__item {
    display: grid; place-items: center; inline-size: 100dvw; block-size: 100%;
    padding: 0; scroll-snap-align: center; scroll-snap-stop: always;
    /* Safari/WebKit repaint workaround for overflow:auto with parent transform/opacity animation. */
    transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.uoph-gallery-lightbox__picture { display: block; inline-size: 100dvw; block-size: 100dvh; overflow: hidden; }
.uoph-gallery-lightbox .uoph-gallery-lightbox__image {
    position: static !important; inset: auto !important;
    display: block !important; inline-size: 100dvw !important; block-size: 100dvh !important;
    width: 100dvw !important; height: 100dvh !important;
    max-inline-size: none !important; max-block-size: none !important;
    max-width: none !important; max-height: none !important;
    object-fit: cover !important; object-position: center !important; transform: none !important;
}
.uoph-gallery-lightbox__dots {
    position: fixed; z-index: 2; inset-block-end: max(1.25rem, env(safe-area-inset-bottom));
    inset-inline-start: 50%; display: flex; align-items: center; justify-content: center;
    gap: .2rem; translate: -50% 0;
}
html body .uoph-gallery-lightbox button.uoph-gallery-lightbox__action.uoph-pill-action--lightbox {
    position: fixed;
    z-index: 2;
    inset-block-end: max(3.5rem, calc(env(safe-area-inset-bottom) + 2.25rem));
    inset-inline-start: 50%;
    border: 0 !important;
    color: #191816 !important;
    background: #fff !important;
    translate: -50% 0;
}
body.uoph-gallery-lightbox-open { overflow: hidden !important; }
@media (prefers-reduced-motion: reduce) {
    .uoph-gallery-lightbox, .uoph-gallery-lightbox__track {
        transition: none !important;
    }
    .uoph-gallery-lightbox__track { scroll-behavior: auto; }
}