.product-preview { width: 100%; min-width: 0; margin: 0; align-self: center; }
.preview-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .75rem; }
.preview-tabs button { border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-muted, #b9c6d5); font: inherit; font-size: .85rem; padding: .6rem .75rem; cursor: pointer; }
.preview-tabs button[aria-selected="true"] { color: #eaf6ff; border-color: #426078; background: #142537; }
.preview-tabs button:focus-visible, .preview-controls button:focus-visible, .preview-dialog button:focus-visible { outline: 2px solid #8ed2f6; outline-offset: 3px; }
.preview-stage { aspect-ratio: var(--preview-aspect, 4 / 3); border: 1px solid rgba(142, 210, 246, .3); border-radius: 16px; overflow: hidden; background: #07111e; }
.preview-stage video { display: block; width: 100%; height: 100%; object-fit: contain; }
.preview-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .7rem; font-size: .75rem; color: var(--text-muted, #b9c6d5); }
.preview-controls > div { display: flex; gap: .85rem; }
.preview-controls button, .preview-dialog button { border: 0; background: transparent; padding: .25rem 0; font: inherit; color: #c6d9e8; cursor: pointer; text-decoration: underline; text-underline-offset: .2rem; }
.product-preview figcaption { min-height: 2.8em; margin-top: .65rem; font-size: .85rem; line-height: 1.5; }
.preview-dialog { width: min(1100px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); border: 1px solid #426078; border-radius: 16px; padding: 1rem; background: #07111e; color: #eaf6ff; }
.preview-dialog::backdrop { background: #020911df; }
.preview-dialog-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.preview-dialog-header h2 { margin: 0; font: inherit; font-size: .95rem; }
.preview-dialog video { display: block; width: 100%; max-height: calc(100dvh - 11rem); background: #07111e; }
.preview-dialog-footer { display: flex; justify-content: flex-end; margin-top: .8rem; }
@media (max-width: 700px) {
  .preview-stage { aspect-ratio: var(--preview-aspect, 480 / 860); }
  .preview-tabs button { font-size: .82rem; padding: .6rem .65rem; }
  .preview-dialog { padding: .8rem; }
}

.product-preview figcaption, .preview-dialog p { color: var(--landing-muted); font-size: .85rem; line-height: 1.6; }
html:has(.preview-dialog[open]) { overflow: hidden; }