/* Authentic screenshots framed in CSS; the source captures remain untouched. */
.screenshot-link { display:block; width:100%; color:inherit; }
.screenshot-crop { position:relative; display:block; overflow:hidden; aspect-ratio:var(--shot-ratio); background:#f1f2ef; }
.screenshot-crop img, .product-page-v2 .product-visual .screenshot-crop img { position:absolute; width:var(--shot-width); max-width:none; height:auto; left:var(--shot-left); top:var(--shot-top); border:0; border-radius:0; }
.screenshot-link:focus-visible { outline:3px solid #e4a444; outline-offset:5px; }

.screenshot-link { position:relative; cursor:zoom-in; }
.screenshot-link::after { content:'Expand ↗'; position:absolute; bottom:10px; right:10px; padding:5px 9px; border-radius:6px; color:#fff; background:#14383de8; font:600 12px/1.4 Inter,sans-serif; box-shadow:0 2px 8px #0002; }
.screenshot-dialog { width:min(1240px,96vw); max-width:96vw; max-height:94dvh; margin:auto; padding:0; border:1px solid #cbd9d7; border-radius:16px; color:#14383d; background:#fff; box-shadow:0 24px 80px #0005; }
.screenshot-dialog::backdrop { background:#092b32cc; }
.screenshot-dialog-header { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid #dce6e3; }
.screenshot-dialog-header h2 { flex:1; margin:0; font-size:1rem; line-height:1.4; }
.screenshot-dialog-header button { flex:none; border:1px solid #cbd9d7; border-radius:8px; padding:8px 12px; color:#14383d; background:#f3f7f6; font:600 .85rem/1.3 Inter,sans-serif; cursor:pointer; }
.screenshot-dialog-header button:focus-visible { outline:3px solid #1f808d; outline-offset:2px; }
.screenshot-dialog-content { overflow:auto; max-height:calc(94dvh - 82px); padding:12px; background:#eef3f2; }
.screenshot-dialog-content > * { width:min(100%,calc((94dvh - 120px) * var(--preview-ratio))); margin-inline:auto; }
.screenshot-dialog-content > img { display:block; height:auto; }
.screenshot-dialog[data-zoom="true"] .screenshot-dialog-content > * { width:max(100%,1200px); }
html:has(.screenshot-dialog[open]) { overflow:hidden; }
@media(max-width:600px) { .screenshot-dialog-header { padding:10px; gap:7px; } .screenshot-dialog-header h2 { font-size:.9rem; } .screenshot-dialog-content { padding:6px; } }