/* One viewer for photographs, comparisons and charts throughout the site. */
[data-media-preview]{cursor:zoom-in}
[data-media-preview]:focus-visible{outline:3px solid var(--focus);outline-offset:5px}
body.media-preview-open{overflow:hidden}
.media-preview{width:min(1320px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:20px;border:0;border-radius:14px;background:#fff;color:var(--ink);overflow:auto}
.media-preview::backdrop{background:rgba(12,24,16,.78)}
.media-preview-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.media-preview-header h2{font:400 26px/1.2 var(--font-heading);color:var(--product-deep,var(--ink));margin:0}
.media-preview-actions{display:flex;align-items:center;gap:12px;flex:none}
.media-preview-actions button{min-height:44px;border:1px solid var(--rule);border-radius:8px;background:var(--pale);color:var(--product-deep,var(--ink));font:600 14px/1.3 var(--font-body);cursor:pointer}
.media-preview-actions button:hover{background:var(--product-highlight,var(--lime))}
.media-preview-actions button:disabled{opacity:.55;cursor:wait}
.media-preview-zoom{padding:10px 14px}
.media-preview-close{width:44px;display:grid;place-items:center;padding:0}
.media-preview-media{overflow:auto;overscroll-behavior:contain}
.media-preview-stage{position:relative;margin-inline:auto}
.media-preview-stage>img,.media-preview-stage>svg{display:block;width:100%;height:100%;object-fit:contain;border-radius:0}
.media-preview-stage.is-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.media-preview-stage.is-pair>img{min-width:0}
.media-preview-media.is-zoomed .media-preview-stage{margin-inline:0}
.media-preview-caption{margin:10px 0 0;max-width:none;font:400 12px/1.4 var(--font-body);text-align:center;color:var(--product-deep,var(--ink))}
.media-preview-status{margin:12px 0 0;font-size:14px}
@media(max-width:760px){.media-preview{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:16px}.media-preview-header{align-items:flex-start;gap:12px}.media-preview-header h2{font-size:20px}.media-preview-actions{gap:8px}.media-preview-zoom{padding:8px;font-size:12px}}