.product-photo-zoom { cursor: zoom-in; }
.product-photo-zoom:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.product-photo-dialog { position: fixed; inset: 0; margin: auto; border: 1px solid var(--border, #243049); border-radius: 14px; padding: 0; width: min(760px, 94vw); max-width: 94vw; max-height: 92vh; overflow: hidden; background: var(--bg-1, #0a0e1a); color: var(--text, #e8edf5); box-shadow: 0 20px 80px #0009; }
.product-photo-dialog::backdrop { background: rgba(0,0,0,.78); }
.photo-toolbar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border, #243049); }
.photo-toolbar span { flex: 1; color: var(--text-dim, #9aa7bd); font-size: 12px; }
.photo-toolbar button { border-radius: 8px; background: var(--bg-3, #1a2236); color: var(--text, #e8edf5); height: 40px; padding: 0 12px; }
.photo-toolbar .photo-close { width: 40px; padding: 0; font-size: 28px; }
.photo-toolbar button:focus-visible { outline: 2px solid var(--accent); }
.photo-stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: min(650px, 72vh); overflow: hidden; touch-action: none; user-select: none; }
.product-photo-dialog img { display: block; flex: 0 0 auto; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; }
.product-photo-dialog img[hidden], .product-photo-dialog p[hidden] { display: none; }
.photo-stage.is-zoomed { cursor: grab; }
.photo-stage.is-dragging { cursor: grabbing; }
.product-photo-dialog p { padding: 20px; color: var(--text-dim); }