.product-viewer { --viewer-accent: var(--w-listening-ink); width: min(1480px, calc(100% - 32px)); height: calc(100dvh - 32px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 14px; background: var(--paper); color: var(--ink); overflow: hidden; }
.product-viewer[open] { display: flex; flex-direction: column; }
.product-viewer::backdrop { background: var(--scrim); backdrop-filter: blur(8px); }
.product-viewer[data-world=pronunciation] { --viewer-accent: var(--w-pronunciation-ink); }
.product-viewer[data-world=speaking] { --viewer-accent: var(--w-speaking-ink); }
.product-viewer[data-world=steps] { --viewer-accent: var(--w-steps-ink); }
.product-viewer[data-world=skarb] { --viewer-accent: var(--w-skarb-ink); }
.viewer-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 21px 28px 16px; }
.viewer-head p { color: var(--viewer-accent); margin: 0 0 4px; }
.viewer-head h2 { margin: 0; }
.viewer-close { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ink-a16); border-radius: 50%; background: transparent; color: var(--ink); font: var(--fw-regular) var(--fs-control-glyph)/1 var(--font-body); cursor: pointer; }
.viewer-tools { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 0 28px 15px; }
.viewer-choices { display: flex; gap: 6px; flex-wrap: wrap; }
.viewer-choices:empty { display: none; }
.viewer-choices button { border: 1px solid var(--ink-a16); border-radius: 30px; background: transparent; color: var(--ink); padding: 9px 14px; min-height: 40px; cursor: pointer; }
.viewer-choices button[aria-pressed=true] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.viewer-zoom { margin-left: auto; display: flex; align-items: center; border: 1px solid var(--ink-a16); border-radius: 30px; overflow: hidden; }
.viewer-zoom button { border: 0; min-width: 42px; min-height: 40px; background: transparent; color: var(--ink); font: var(--fw-medium) var(--fs-control-glyph)/1 var(--font-body); cursor: pointer; }
.viewer-zoom [data-zoom=fit] { padding-inline: 9px; }
.viewer-zoom button:disabled { opacity: .3; cursor: default; }
.viewer-stage { flex: 1; min-height: 130px; overflow: auto; background: var(--cream); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--muted) transparent; touch-action: pan-x pan-y pinch-zoom; }
.viewer-space { display: grid; place-items: center; }
.viewer-frame { position: relative; overflow: hidden; flex: none; border-radius: 7px; box-shadow: var(--shadow-viewer-frame); }
.viewer-frame img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.viewer-frame.is-cropped img { position: absolute; height: auto; max-width: none; }
.product-viewer[data-zoomed=true] .viewer-stage { cursor: grab; }
.product-viewer[data-zoomed=true] .viewer-stage.is-dragging { cursor: grabbing; }
.viewer-caption { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 28px 20px; }
.viewer-caption strong { text-wrap: balance; }
.viewer-caption p { margin: 3px 0 0; color: var(--muted); text-wrap: pretty; }
.viewer-gesture { max-width: 200px; color: var(--viewer-accent); text-align: right; }
@media (max-width: 600px) {
  .product-viewer { width: calc(100% - 12px); height: calc(100dvh - 12px); border-radius: 11px; }
  .viewer-head { padding: 15px 17px 12px; gap: 12px; }
  .viewer-tools { padding: 0 17px 12px; gap: 10px; }
  .viewer-choices { width: 100%; }
  .viewer-choices button { padding-inline: 12px; }
  .viewer-zoom { margin-left: 0; }
  .viewer-caption { padding: 13px 17px 15px; display: block; }
  .viewer-gesture { display: block; max-width: none; margin-top: 7px; text-align: left; }
}

/* ── lane:L-GATE ── */
/* lane:L-GATE:end */

/* ── lane:L-VIS ── */
/* VISUAL-03 · Viewer shell shares dialog shape, shadow and scrim · gates: design:dialog-type */
.product-viewer { border-radius: var(--r-card); box-shadow: var(--shadow-3); }
.product-viewer::backdrop { backdrop-filter: blur(6px); }
/* A11Y-11 · Keep the full-width viewer focus ring inside the scrollport · gates: focus */
.viewer-stage:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
/* lane:L-VIS:end */

/* ── lane:L-ROUTE ── */
/* lane:L-ROUTE:end */

/* ── lane:L-NAV ── */
/* lane:L-NAV:end */

/* ── lane:L-DLG ── */
/* MOBILE-08 · local image gestures and thumb-reachable viewer tools · gates: pointer touch, S */
.viewer-stage { touch-action: pan-x pan-y; }
@media (max-width: 600px) {
  .viewer-stage { order: 1; }
  .viewer-tools { order: 2; padding-top: var(--space-3, 12px); }
  .viewer-caption { order: 3; }
}
/* MOBILE-06 · запасной vh до dvh для просмотрщика · gates: S */
.product-viewer { height: calc(100vh - var(--space-6)); height: calc(100dvh - var(--space-6)); }
@media (max-width: 600px) { .product-viewer { height: calc(100vh - var(--space-3)); height: calc(100dvh - var(--space-3)); } }
/* INNOVATION-05 · просмотрщик появляется без движения страницы · gates: innovation.overlay, A11Y-12:R1,R2,R3,R8 */
@media (prefers-reduced-motion: no-preference) {
  .product-viewer { opacity: 0; transform: scale(.985); transition: opacity var(--dur-overlay) var(--ease-out), transform var(--dur-overlay) var(--ease-out), overlay var(--dur-overlay) allow-discrete, display var(--dur-overlay) allow-discrete; }
  .product-viewer[open] { opacity: 1; transform: none; }
  @starting-style { .product-viewer[open] { opacity: 0; transform: scale(.985); } }
  .product-viewer::backdrop { opacity: 0; transition: opacity var(--dur-overlay) var(--ease-out); }
  .product-viewer[open]::backdrop { opacity: 1; }
  @starting-style { .product-viewer[open]::backdrop { opacity: 0; } }
  .product-viewer[data-instant], .product-viewer[data-instant]::backdrop { transition: none !important; }
}
/* INNOVATION-06 · прогретый экран просмотрщика меняется кроссфейдом · gates: innovation.vt, A11Y-12:R1,R2,R3,R8 */
.product-viewer[open] .viewer-frame { view-transition-name: viewer-frame; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes viewer-frame-out { to { opacity: 0; } }
  @keyframes viewer-frame-in { from { opacity: 0; } }
  ::view-transition-old(viewer-frame) { animation: viewer-frame-out var(--dur-hover) var(--ease-out) both; }
  ::view-transition-new(viewer-frame) { animation: viewer-frame-in var(--dur-hover) var(--ease-out) both; }
}
/* lane:L-DLG:end */

/* ── lane:L-FILM ── */
/* lane:L-FILM:end */

/* ── lane:L-MOT ── */
/* lane:L-MOT:end */

/* ── lane:L-PERF ── */
/* lane:L-PERF:end */