/* Fleet product viewers. Scoped to the fleet; no global theme changes. */
.fleet-viewer {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 480px;
  color: #e5e2e1;
  background: radial-gradient(ellipse at 48% 40%, #343638 0%, #1c1e20 50%, #111213 100%);
  display: flex;
  flex-direction: column;
}
.fleet-viewer__stage { position: relative; flex: 1; min-height: 360px; }
.fleet-viewer model-viewer { display: block; width: 100%; height: 100%; min-height: 360px; position: absolute; inset: 0; --poster-color: transparent; --progress-bar-color: #eec44b; }
.fleet-viewer:not([data-state="ready"]) model-viewer { opacity: 0; pointer-events: none; }
.fleet-viewer__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.fleet-viewer[data-state="ready"] .fleet-viewer__photo { opacity: 0; pointer-events: none; }
.fleet-viewer__top { position: absolute; inset: 22px 22px auto; z-index: 2; display: flex; justify-content: space-between; gap: 14px; align-items: start; pointer-events: none; }
.fleet-viewer__badge { padding: 7px 10px; border: 1px solid #ffffff30; color: #eec44b; background: #131313cc; font-size: .75rem; letter-spacing: .11em; border-radius: 4px; }
.fleet-viewer__indicator { font-size: .75rem; color: #c7cbce; padding: 7px 0; letter-spacing: .08em; }
.fleet-viewer__indicator::before { content: ''; display: inline-block; width: 6px; height: 6px; background: #eec44b; border-radius: 50%; margin-inline-end: 7px; }
.fleet-viewer__bottom { z-index: 2; position: relative; padding: 12px 20px 20px; background: linear-gradient(transparent, #111213aa); }
.fleet-viewer__controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fleet-viewer button { appearance: none; min-width: 44px; min-height: 44px; display: inline-flex; justify-content: center; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid #ffffff26; border-radius: 5px; background: #17191bd9; color: #e5e2e1; font: inherit; font-size: .875rem; cursor: pointer; transition: background .18s, border-color .18s; }
.fleet-viewer button:hover { border-color: #eec44b80; background: #303134; }
.fleet-viewer button:focus-visible, .fleet-viewer model-viewer:focus-visible { outline: 2px solid #f2d478; outline-offset: 4px; }
.fleet-viewer button:disabled { opacity: .45; cursor: wait; }
.fleet-viewer button[aria-pressed="true"] { color: #f2d478; border-color: #eec44b90; background: #54451644; }
.fleet-viewer button svg { width: 19px; height: 19px; flex: 0 0 auto; }
.fleet-viewer__variants { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 10px; }
.fleet-viewer__variants button { font-size: .8125rem; }
.fleet-viewer__hint { font-size: .8125rem; line-height: 1.6; color: #b8bcbf; margin: 11px 0 0; max-width: 50ch; }
.fleet-viewer__note { font-size: .75rem; line-height: 1.6; color: #a7aaae; margin: 5px 0 0; }
.fleet-viewer__status { position: absolute; inset: auto 22px 18px; padding: 10px 14px; background: #131313ed; border: 1px solid #ffffff20; border-radius: 4px; font-size: .8125rem; line-height: 1.5; z-index: 3; }
.fleet-viewer[data-state="ready"] .fleet-viewer__status { display: none; }
.fleet-viewer [hidden] { display: none !important; }
.fleet-viewer:fullscreen, .fleet-viewer.is-expanded { min-height: 100dvh; width: 100%; background: radial-gradient(ellipse at 50% 40%, #343638, #111213 80%); }
.fleet-viewer:fullscreen .fleet-viewer__stage, .fleet-viewer.is-expanded .fleet-viewer__stage { min-height: 55dvh; }
.fleet-viewer.is-expanded { position: fixed; inset: 0; z-index: 99999; height: 100dvh; overflow-y: auto; }
.fleet-viewer__close { position: absolute; top: 18px; right: 20px; z-index: 5; }
.fleet-viewer:fullscreen .fleet-viewer__indicator, .fleet-viewer.is-expanded .fleet-viewer__indicator { margin-inline-end: 56px; }
.fleet-viewer:fullscreen .fleet-viewer__bottom, .fleet-viewer.is-expanded .fleet-viewer__bottom { align-self: center; width: min(100%, 700px); }
.fleet-viewer__noscript { padding: 14px; background: #161819; font-size: .875rem; }
@media (min-width: 1024px) { .fleet-viewer { min-height: 560px; } }
@media (max-width: 480px) { .fleet-viewer__top { inset: 16px 16px auto; } .fleet-viewer__bottom { padding: 10px 14px 18px; } .fleet-viewer__controls { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .fleet-viewer *, .fleet-viewer *::before { transition: none !important; } }