/* Two real image layers share one stable frame; no layout animation. */
.product-story figure.product-media { min-width:0; }
.product-media-stage { display:block; width:min(100%,var(--mr-image-width,100%)); max-width:100%; aspect-ratio:var(--mr-image-ratio,1); margin-inline:auto; position:relative; isolation:isolate; }
.product-story#tagging .product-media-stage { aspect-ratio:var(--mr-image-ratio,3 / 1); }
.product-media-art-layer,.product-media-screen-layer { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; width:100%; height:100%; transition:opacity var(--product-media-fade,2000ms) cubic-bezier(.4,0,.2,1); }
.product-story figure.product-media .product-media-art-layer img { display:block; width:100% !important; height:100% !important; max-height:100%; aspect-ratio:auto !important; object-fit:contain; }
.product-story#tagging figure.product-media .product-media-art-layer img { object-fit:cover; }
.product-media-screen-layer { opacity:0; pointer-events:none; padding:12px; }
.product-story figure.product-media .product-media-screen-layer img { display:block; width:100% !important; height:auto !important; max-height:100%; aspect-ratio:auto !important; object-fit:contain; mix-blend-mode:normal; border:1px solid var(--line); border-radius:7px; background:#fff; box-shadow:0 10px 28px rgb(32 63 53 / 7%); }
.product-media.is-screen .product-media-art-layer { opacity:0; pointer-events:none; }
.product-media.is-screen .product-media-screen-layer { opacity:1; pointer-events:auto; }
.product-media [hidden] { display:none !important; }
.product-media-controls { display:flex; align-items:center; justify-content:center; gap:9px; min-height:30px; margin:12px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.product-media-controls button { border:0; background:transparent; color:inherit; font:inherit; padding:5px 2px; cursor:pointer; border-radius:2px; }
.product-media-controls button[aria-pressed="true"] { color:var(--text); text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--accent); }
.product-media-controls button:disabled { opacity:.45; cursor:default; }
.product-media-controls button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.product-media-controls .product-media-pause { min-width:24px; margin-left:3px; }
.product-media-controls .product-media-zoom { margin-left:10px; }
.product-media-caption { margin:4px 0 0 !important; text-align:center; color:var(--muted); font-size:10px; line-height:1.6; }
.product-media-status:empty { display:none; }
.product-media-status { display:block; color:var(--muted); font-size:11px; text-align:center; }
.product-media-lightbox { padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--text); width:max-content; max-width:96vw; max-height:94svh; }
.product-media-lightbox::backdrop { background:rgb(20 38 31 / 70%); }
.product-media-lightbox header { display:flex; gap:20px; justify-content:space-between; align-items:center; margin-bottom:14px; }
.product-media-lightbox h2 { margin:0; font-size:16px; font-weight:500; }
.product-media-lightbox button { color:inherit; background:transparent; border:1px solid var(--line); border-radius:4px; padding:8px 12px; font:inherit; cursor:pointer; }
.product-media-lightbox img { display:block; width:auto; height:auto; max-width:min(90vw,1400px); max-height:78svh; object-fit:contain; }
@media(max-width:767px){.product-media-screen-layer{padding:5px}.product-media-controls{gap:8px;flex-wrap:wrap}.product-media-controls .product-media-zoom{margin-left:4px}.product-media-lightbox{padding:12px}.product-story#tagging .product-media-stage{aspect-ratio:var(--mr-image-ratio,1)}}
@media(prefers-reduced-motion:reduce){.product-media-art-layer,.product-media-screen-layer{transition:none}}
@media print{.product-media-controls,.product-media-caption,.product-media-lightbox{display:none!important}.product-media-stage{aspect-ratio:1}.product-media-art-layer{opacity:1!important}.product-media-screen-layer{display:none!important}}

/* Keep the artwork area free of captions; the screenshot itself opens the viewer. */
.product-media-image-button { display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }
.product-media-image-button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.product-media .product-media-controls,.product-media .product-media-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.product-media .product-media-controls:focus-within { position:relative; width:auto; height:auto; margin:8px 0 0; padding:4px; overflow:visible; clip-path:none; white-space:normal; }