/* Shared product images. The native modal top layer keeps site controls behind it. */
html.product-image-open { overflow:hidden; scroll-behavior:auto!important; }
.product-lightbox { --image-ink:#f5f5f2; --image-muted:#b9c2bb; --image-line:#ffffff26; color:var(--image-ink); background:#171e1b; border:1px solid var(--image-line); border-radius:20px; padding:0; margin:auto; width:min(1320px,96vw); height:min(1000px,92vh); height:min(1000px,92dvh); max-width:96vw; max-height:96dvh; overflow:hidden; box-shadow:0 24px 100px #0007; font-family:var(--font-body,sans-serif); }
.product-lightbox[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; animation:product-image-enter .18s ease-out; }
.product-lightbox::backdrop { background:#101713dc; backdrop-filter:blur(12px); }
.product-lightbox__bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--image-line); }
.product-lightbox .product-lightbox__bar h2 { margin:0; color:var(--image-ink); font:550 1rem/1.3 var(--font-body,sans-serif); letter-spacing:0; }
.product-lightbox button { appearance:none; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-width:44px; min-height:44px; border:1px solid var(--image-line); border-radius:24px; padding:8px 14px; color:var(--image-ink); background:#ffffff09; font:500 .875rem/1.3 var(--font-body,sans-serif); cursor:pointer; transition:background .16s; }
.product-lightbox button:hover { background:#ffffff1c; }
.product-lightbox button:focus-visible { outline:3px solid #d8bd6d; outline-offset:3px; }
.product-lightbox button:disabled { opacity:.4; cursor:default; }
.product-lightbox [hidden] { display:none!important; }
.product-lightbox [data-image-close] { padding:0; font-size:1.75rem; }
.product-lightbox__stage { min-height:0; overflow:auto; overscroll-behavior:contain; padding:12px; position:relative; }
.product-lightbox__stage:focus-visible { outline:2px solid #d8bd6d; outline-offset:-3px; }
.product-lightbox__picture { height:100%; min-height:0; display:flex; }
.product-lightbox__picture img { display:block; flex-shrink:0; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; margin:auto; border-radius:6px; }
.product-lightbox.is-zoomed .product-lightbox__picture { width:max-content; min-width:100%; height:max-content; min-height:100%; }
.product-lightbox.is-zoomed .product-lightbox__picture img { max-width:none; max-height:none; border-radius:0; }
.product-lightbox__status { position:absolute; inset:45% 12px auto; text-align:center; color:var(--image-muted); pointer-events:none; margin:0; }
.product-lightbox__status:empty { display:none; }
.product-lightbox [data-image-retry] { position:absolute; top:60%; left:50%; transform:translateX(-50%); }
.product-lightbox__footer { border-top:1px solid var(--image-line); padding:12px 20px max(14px,env(safe-area-inset-bottom)); }
.product-lightbox__caption { color:var(--image-muted); font-size:.8125rem; line-height:1.5; text-align:center; margin:0 auto 10px; max-width:90ch; max-height:4.5em; overflow:auto; }
.product-lightbox__controls { display:flex; align-items:center; justify-content:center; gap:10px; }
.product-lightbox__count { min-width:46px; text-align:center; color:var(--image-muted); font-variant-numeric:tabular-nums; font-size:.8125rem; }
.product-lightbox [data-image-prev],.product-lightbox [data-image-next] { padding:0; font-size:1.3rem; }
.product-lightbox [data-image-zoom] { margin-left:8px; }
@media(max-width:699px) { .product-lightbox { width:calc(100vw - 16px); max-width:calc(100vw - 16px); height:calc(100dvh - 24px); max-height:calc(100dvh - 24px); border-radius:16px; }.product-lightbox__bar { padding:8px 12px; }.product-lightbox__stage { padding:8px; }.product-lightbox__footer { padding-inline:10px; }.product-lightbox__controls { gap:6px; }.product-lightbox [data-image-zoom] { margin-left:4px; } }
@keyframes product-image-enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .product-lightbox[open] { animation:none; }.product-lightbox button { transition:none; } }