/* Product screenshot figures + shared enlarge dialog (used by Astro routes and source-HTML routes). */
.shot{margin:var(--s8,32px) 0 0;max-width:820px;}
.shot-open{display:block;width:100%;padding:0;margin:0;border:1px solid var(--rule,#D8DEE6);border-radius:var(--radius,8px);
  background:var(--surface,#F4F6F9);cursor:zoom-in;overflow:hidden;position:relative;font:inherit;color:inherit;}
.shot-open img{display:block;width:100%;height:auto;}
.shot-open:hover{border-color:var(--rule-strong,#9BA6B2);}
.shot-open:focus-visible{outline:2px solid var(--primary,#0C69C0);outline-offset:3px;}
.shot-hint{position:absolute;right:var(--s2,8px);bottom:var(--s2,8px);font-family:var(--mono,monospace);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;background:#0A0C0F;color:#FFFFFF;padding:5px 8px;border-radius:4px;opacity:.86;}
.shot figcaption{margin-top:var(--s3,12px);color:var(--ink-2,#4A5563);font-size:14px;line-height:1.55;max-width:70ch;}
.shot figcaption .k{display:block;font-family:var(--mono,monospace);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--primary,#0C69C0);margin-bottom:var(--s1,4px);}
.shot-pair{display:grid;gap:var(--s8,32px);}
.shot-dialog{padding:0;border:0;background:transparent;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;margin:0;}
.shot-dialog::backdrop{background:rgba(10,12,15,.82);}
.shot-dialog[open]{display:flex;flex-direction:column;}
.shot-bar{display:flex;align-items:center;gap:var(--s4,16px);padding:10px 16px;background:#0A0C0F;color:#FFFFFF;flex:none;}
.shot-bar p{margin:0;font-size:13.5px;line-height:1.4;flex:1;min-width:0;}
.shot-close{flex:none;font:500 13px/1 var(--sans,sans-serif);color:#FFFFFF;background:transparent;border:1px solid rgba(255,255,255,.4);
  border-radius:var(--radius,8px);padding:8px 12px;cursor:pointer;}
.shot-close:hover{border-color:#FFFFFF;}
.shot-close:focus-visible{outline:2px solid #7FB6EC;outline-offset:2px;}
.shot-stage{flex:1;overflow:auto;display:flex;padding:16px;}
.shot-stage img{margin:auto;display:block;max-width:100%;height:auto;border-radius:6px;background:#FFFFFF;}