.photo-viewer:not([open]) { display: none; }
.photo-viewer[open] { position: fixed; inset: 0; display: block; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #0b1017; color: #fff; overflow: hidden; }
.photo-viewer-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; height: 100%; min-width: 0; background: #0b1017; color: #fff; }
.photo-viewer::backdrop { background: #0b1017; }
.photo-viewer-header { display: flex; gap: 8px; align-items: center; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); border-bottom: 1px solid #ffffff25; }
.photo-viewer-header h2 { flex: 1; min-width: 0; margin: 0; font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.photo-viewer-header a { color: #fff; font-size: .8rem; text-align: center; max-width: 120px; min-height: 44px; display: flex; align-items: center; }
.photo-viewer button { flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 0 6px; border: 1px solid #ffffff45; border-radius: 10px; background: #1c2735; color: #fff; cursor: pointer; font: inherit; }
.photo-viewer button:hover { background: #31435a; }
.photo-viewer button:focus-visible, .photo-viewer a:focus-visible { outline: 3px solid #ffab66; outline-offset: 2px; }
.photo-viewer button:disabled { opacity: .4; cursor: default; }
.photo-viewer [hidden] { display: none !important; }
.photo-viewer [data-photo-close] { font-size: 1.6rem; }
.photo-viewer-stage { position: relative; min-height: 0; overflow: hidden; direction: ltr; touch-action: none; cursor: grab; user-select: none; }
.photo-viewer-stage:active { cursor: grabbing; }
.photo-viewer-stage img { position: absolute; top: 0; left: 0; max-width: none; max-height: none; transform-origin: 0 0; pointer-events: none; user-select: none; }
.photo-viewer-message { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; padding: 24px; text-align: center; color: #fff; }
.photo-viewer-footer { padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); text-align: center; border-top: 1px solid #ffffff25; }
.photo-viewer-controls { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 4px; }
.photo-viewer-controls [data-photo-fit] { flex: 0 1 130px; min-width: 0; padding-inline: 6px; font-size: .8rem; }
.photo-viewer-controls [data-photo-in], .photo-viewer-controls [data-photo-out] { font-size: 1.4rem; }
.photo-viewer-footer > span { display: inline-block; margin-inline: 8px; font-size: .8rem; color: #ccd8e6; }
.photo-viewer-footer p { margin: 3px 0 0; font-size: .75rem; color: #ccd8e6; }
@media (max-height: 480px) { .photo-viewer-footer p { display: none; } .photo-viewer-footer { padding-block: 4px; } .photo-viewer-header { padding-block: 4px; } }

img[data-photo-src] { cursor: zoom-in; }
img[data-photo-src]:focus-visible { outline: 3px solid var(--accent,#ed6b14); outline-offset: -3px; }
/* Raise the picture above the title's stretched navigation link, while leaving favourite/cart controls above it. */
.product-media img[data-photo-src] { position: relative; z-index: 2; }
.home-photo-open { display: inline-flex; align-items: center; gap:.4rem; min-height:44px; color:inherit; text-decoration:underline; text-underline-offset:.25em; }