/* Original product pixels remain intact. HTML provides the walkthrough controls. */
.hero-opening .pa-stage { height: auto; aspect-ratio: 1.75; background: #13141b; }
.pa-layer:not(.is-active) { pointer-events: none; visibility: hidden; }
.pa-layer.is-active { visibility: visible; }
.product-preview { position: relative; width: 100%; height: 100%; overflow: hidden; background: #13141b; }
.product-preview > img, .product-preview > video, .pa-layer > img, .pa-layer > video { display: block; width: 100%; height: 100%; object-fit: contain !important; object-position: center; }
[data-product-preview] { aspect-ratio: 1.75; min-width: 0; overflow: hidden; }
.pillar-media .product-preview > img { height: 100%; aspect-ratio: auto; object-fit: contain; }
.ps-mini-open { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; color: #fff; cursor: zoom-in; }
.ps-mini-open > span { position: absolute; bottom: 12px; right: 12px; padding: 7px 10px; border-radius: 6px; background: #16161fe8; font: 12px Inter,sans-serif; opacity: 0; }
.ps-mini-open:hover > span, .ps-mini-open:focus-visible > span { opacity: 1; }
.ps-cycle { border: 1px solid #415067; background: transparent; color: #c8d3e2; border-radius: 5px; padding: 4px 10px; font: 500 12px/1.5 Inter,sans-serif; cursor: pointer; }
.pa-frame-top .ps-cycle:first-of-type { margin-left: auto; }
.ps-original-dialog { width: min(1600px,96vw); max-width: 96vw; max-height: 94dvh; padding: 0; background: #171d29; color: #e3edfb; border: 1px solid #53617a; border-radius: 10px; margin: auto; }
.ps-original-dialog::backdrop { background: #060b16dc; }
.ps-original-dialog > header { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid #3f4e66; font: 14px/1.5 Inter,sans-serif; }
.ps-original-dialog header > div { margin-right: auto; }
.ps-original-dialog header span { display: block; font-size: 11px; color: #9eafc9; }
.ps-original-dialog button { color: #c8dcf7; background: #2d3c53; border: 1px solid #576f90; border-radius: 5px; padding: 7px 10px; cursor: pointer; }
.ps-original-media { overflow: auto; max-height: calc(94dvh - 75px); background: #111722; }
.ps-original-media img, .ps-original-media video { display: block; width: 100%; height: auto; max-height: calc(94dvh - 75px); object-fit: contain; margin: auto; }
.ps-native-size .ps-original-media img { width: auto; max-width: none; max-height: none; }
.ps-mini-open:focus-visible, .ps-cycle:focus-visible, .ps-original-dialog button:focus-visible { outline: 2px solid #7dd3fc; outline-offset: -3px; }
.pa-case-strip { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 19px 22px; background: #121923; border-top: 1px solid #30394a; }
.pa-case-strip > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.pa-case-eyebrow { color: #9dbf85; font-size: 11px; }
.pa-case-strip strong { font-size: 14px; color: #e3e9f3; }
.pa-case-strip p { width: 100%; font-size: 12px; color: #99a8bb; margin: 0; }
#pa-case-position { color: #9ba9bc; font-size: 11px; white-space: nowrap; }
.pa-case-progress { height: 2px; background: #293142; overflow: hidden; }
.pa-case-progress > span { display: block; height: 100%; background: #a6cf7b; width: var(--case-start); animation: ps-case-progress 4s linear forwards; }
.pa-case-progress[data-paused="true"] > span { animation-play-state: paused; }
@keyframes ps-case-progress { from { width: var(--case-start); } to { width: var(--case-end); } }
@media (max-width: 640px) { .pa-case-strip { padding: 14px 12px; flex-wrap: wrap; gap: 8px; } .hero-opening .pa-frame-top { gap: 9px; padding: 10px 12px; flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .pa-case-progress > span, .pa-layer { animation: none; transition: none; } }