/* A quiet, full-screen canvas keeps the artwork itself in focus. */
[data-image-zoom]{cursor:zoom-in}
[data-image-zoom]:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.image-zoom{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#fff;color:#000;overflow:hidden;overscroll-behavior:contain;cursor:default}
.image-zoom::backdrop{background:transparent}
.image-zoom-art{position:absolute;transform-origin:0 0;will-change:transform;touch-action:pan-y pinch-zoom}
.image-zoom-art>img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.image-zoom-art>.media-crop{width:100%;height:100%;margin:0}
.image-zoom-navigation{position:absolute;inset:56px 0;z-index:1;pointer-events:none}
.image-zoom-navigation[hidden]{display:none}
.image-zoom-navigation-button{position:absolute;top:0;bottom:0;width:calc(100% / 3);padding:0;border:0;background:transparent;pointer-events:auto;cursor:default}
.image-zoom-navigation-button[data-direction=prev]{left:0}
.image-zoom-navigation-button[data-direction=next]{right:0}
.image-zoom-navigation-button>span,.image-zoom-cursor>span{display:block;width:40px;height:40px;border-radius:50%;background:#000}
.image-zoom-navigation-button>span{margin:auto;opacity:0}
.image-zoom-navigation-button:focus-visible{outline:2px solid #000;outline-offset:-4px}
.image-zoom-navigation-button:focus-visible>span{opacity:1}
.image-zoom-cursor{position:absolute;top:0;left:0;z-index:3;pointer-events:none;visibility:hidden}
.image-zoom-cursor>span{margin:-20px 0 0 -20px;opacity:0;transform:scale(.75);transition:opacity 120ms ease,transform 120ms ease}
.image-zoom-cursor.is-visible{visibility:visible}
.image-zoom-cursor.is-visible>span{opacity:1;transform:scale(1)}
.image-zoom[data-motion] .image-zoom-navigation{visibility:hidden}
.image-zoom-close{position:absolute;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));z-index:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#eee;color:#000;font:inherit;font-size:13px;cursor:pointer}
.image-zoom-close span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.image-zoom-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.image-zoom-close:focus-visible{outline:2px solid #000;outline-offset:2px}
.image-zoom-dots{position:absolute;bottom:max(8px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;justify-content:center;flex-wrap:wrap;max-width:90%;cursor:default}
.image-zoom-dots[hidden]{display:none}
.image-zoom-dots button{display:grid;place-items:center;width:24px;height:28px;padding:0;border:0;background:transparent;cursor:pointer}
.image-zoom-dots button::after{content:'';width:7px;height:7px;border-radius:50%;background:#ccc}
.image-zoom-dots button[aria-current=true]::after{background:#111}
.image-zoom-dots button:focus-visible{outline:2px solid #000;outline-offset:-2px}
@media(hover:hover) and (pointer:fine){.image-zoom-navigation-button:hover{cursor:none}}
@media(hover:none),(pointer:coarse){.image-zoom-navigation,.image-zoom-cursor{display:none}}
@media(prefers-reduced-motion:reduce){.image-zoom-art{will-change:auto}.image-zoom-cursor>span{transition:none}}
