.spinner {
  --spinner-bg: #292929;
  --spinner-fade: 350ms;
  --spinner-container: 1200px;
  --spinner-views-top: clamp(88px, 12vh, 140px);

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--spinner-bg);
  color: #fff;
}

.spinner [hidden] {
  display: none !important;
}

/* ---- Full-window photo, fading through #292929 ---- */

.spinner .spinner__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--spinner-bg);
  touch-action: pan-y;
}

.spinner .spinner__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transition: opacity var(--spinner-fade) ease;
  user-select: none;
  -webkit-user-drag: none;
}

/* Nothing to show yet (still loading, or no photo found): just the dark stage. */
.spinner .spinner__image:not([src]),
.spinner.is-loading .spinner__image {
  opacity: 0;
}

.spinner .spinner__image.is-fading {
  opacity: 0;
}

/* ---- Previous / next ---- */

.spinner .spinner__nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(41, 41, 41, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.spinner .spinner__nav:hover {
  background: rgba(41, 41, 41, 0.85);
}

.spinner .spinner__nav svg {
  width: 22px;
  height: 22px;
}

.spinner .spinner__nav--prev {
  left: 0.75rem;
}

.spinner .spinner__nav--next {
  right: 0.75rem;
}

/* ---- Arrow circle + Front / Side / Rear (upper left) ---- */

.spinner .spinner__views {
  position: absolute;
  z-index: 2;
  top: var(--spinner-views-top);
  left: max(1rem, calc((100% - var(--spinner-container)) / 2 + 1.75rem));
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  height: 100px;
  justify-content: center;
}

.spinner .spinner__spin {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

.spinner .spinner__spin-icon {
  display: block;
  width: 40px;
  height: 40px;
  transition: transform 600ms cubic-bezier(0.45, 0.05, 0.25, 1);
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.5));
}

.spinner .spinner__arrows {
  display: block;
  width: 100%;
  height: 100%;
}

/* 3 arrows only when Front, Side and Rear all exist; otherwise 2. */
.spinner .spinner__views[data-arrows="3"] .spinner__arrows--2,
.spinner .spinner__views:not([data-arrows="3"]) .spinner__arrows--3 {
  display: none;
}

/* Stacked: Front, Side, Rear one under the other, next to the circle. */
.spinner .spinner__view-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The current view is full white; the others are dimmed. No underline. */
.spinner .spinner__view-btn {
  margin: 0;
  padding: 0.1rem 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.2;
  text-align: left;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 200ms ease;
}

.spinner .spinner__view-btn:hover,
.spinner .spinner__view-btn.is-active {
  opacity: 1;
}

/* ---- Exterior bar ---- */

.spinner .spinner__bar {
  position: relative;
  z-index: 2;
  flex: none;
  background: rgba(41, 41, 41, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Phone: title on top, then the scheme name over the thumbnails. */
.spinner .spinner__bar-inner {
  display: grid;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem 0;
  max-width: var(--spinner-container);
  margin: 0 auto;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  grid-template-columns: 1fr 1fr;
}

.spinner .spinner__bar-title {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  padding-right: 1rem;
  border-right: 1px solid rgba(255, 255, 255, 0.85);
  min-height: 40px;
}

.spinner .spinner__bar-schemes {
  display: contents;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.spinner .spinner__scheme-name {
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 300;
  line-height: 1.2;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding-left: 1rem;
  text-align: left;
}

.spinner .spinner__thumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-column: 1 / -1;
  grid-row: 2;
}

.spinner .spinner__thumb {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 200ms ease;
  clip-path: polygon(0 0, 80% 0, 100% 100%, 20% 100%);
}

.spinner .spinner__thumb img {
  display: block;
  width: auto;
  max-width: none;
  height: 44px;
}

.spinner .spinner__thumb-text {
  display: block;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  line-height: 1.2;
}

.spinner .spinner__thumb:hover,
.spinner .spinner__thumb.is-active {
  opacity: 1;
}
.spinner .spinner__scheme-main,
.spinner .spinner__scheme-sub {
  display: block;
}

.spinner .spinner__scheme-sub {
  margin-top: 0.15rem;
  font-size: 12px;
  line-height: 1.3;
}
.spinner .spinner__thumbs li:has(.spinner__thumb:focus-visible) {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* ---- Footer: bottom of the flow; its own look is the theme's ---- */

.spinner .footer-360-orange {
  position: relative;
  z-index: 2;
  flex: none;
}

/* ---- Keyboard focus ---- */

.spinner .spinner__nav:focus-visible,
.spinner .spinner__spin:focus-visible,
.spinner .spinner__view-btn:focus-visible,
.spinner .spinner__thumb:focus-visible {
  opacity: 1;
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* Very narrow phones: keep "EXTERIOR" inside its half. */
@media (max-width: 340px) {
  .spinner .spinner__bar-title {
    font-size: 1.2rem;
  }
}

/* ---- Tablet and up ---- */

@media (min-width: 768px) {
  .spinner .spinner__spin-icon {
    width: 58px;
    height: 58px;
  }

  .spinner .spinner__views {
    gap: 0.9rem;
  }

  .spinner .spinner__view-btn {
    font-size: 1.25rem;
  }

  .spinner .spinner__nav {
    width: 52px;
    height: 52px;
    margin-top: -26px;
  }

  .spinner .spinner__nav--prev {
    left: 1.5rem;
  }

  .spinner .spinner__nav--next {
    right: 1.5rem;
  }

  .spinner .spinner__bar-inner {
    flex-direction: row;
    justify-content: center;
    gap: 1.5rem;
    min-height: 88px;
    padding: 0.9rem 1.5rem;
  }

  /* Thin divider between EXTERIOR and the scheme block, as in the mockup. */
  .spinner .spinner__bar-schemes {
    flex-direction: row;
    gap: 1.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.85);
  }

  /* Fixed width so the thumbnails don't shift when the name changes. */
  .spinner .spinner__scheme-name {
    min-width: 15rem;
    text-align: left;
  }

  .spinner .spinner__thumbs {
    justify-content: flex-start;
  }

  .spinner .spinner__thumb img {
    height: 52px;
  }
}

@media (min-width: 1024px) {
  .spinner .spinner__bar-inner {
    display: grid;
    grid-template-columns: 33% 20% 1fr;
    align-items: center;
    gap: 0;
    max-width: none;
    margin: 0;
    padding: 0.9rem 0;
  }

  /* Let the name and the thumbnails sit directly in the three columns. */
  .spinner .spinner__bar-schemes {
    display: contents;
  }

  /* The bar is this column's right edge, so it is as tall as the whole row. */
  .spinner .spinner__bar-title {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: stretch;
    padding-right: 1.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.85);
  }

  .spinner .spinner__scheme-name {
    min-width: 0;
    padding-left: 1.5rem;
    text-align: left;
  }

  .spinner .spinner__thumbs {
    padding-right: 1.5rem;
  }
}

/* ---- Reduced motion: swap instantly instead of fading ---- */

@media (prefers-reduced-motion: reduce) {
  .spinner {
    --spinner-fade: 1ms;
  }

  .spinner .spinner__spin-icon,
  .spinner .spinner__view-btn,
  .spinner .spinner__nav,
  .spinner .spinner__thumb {
    transition: none;
  }
}





/* ---- Fade to dark with a layer over the photo, not by fading the photo ----
   The photo itself now stays fully opaque the whole time (some phones draw odd
   boxes around the buttons while an image's opacity is animating). Instead a
   flat #292929 layer fades in over the photo and back out. It sits under the
   buttons, so they are never covered. The look is the same as before. */
.spinner .spinner__image.is-fading {
  opacity: 1;
}

.spinner .spinner__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(41 41 41 / 0);
  transition: background-color var(--spinner-fade) ease;
  pointer-events: none;
}

.spinner .spinner__stage:has(.spinner__image.is-fading)::after {
  background-color: rgb(41 41 41 / 1);
}

/* ---- Thumbnails back on the same row as "EXTERIOR" and the name (tablet and desktop) ----
   The phone layout now lives in the base rules, and it places the thumbnails on
   row 2 of a grid. These rules undo that above 768px. Phones are not touched.
   The extra ".spinner__bar" in each selector makes these win whatever order the
   stylesheets load in. */

/* Tablet (768px to 1023px): EXTERIOR | name + thumbnails, in one row */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .spinner .spinner__bar .spinner__bar-inner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    max-width: none;
    min-height: 88px;
    padding: 0.9rem 1.5rem;
  }

  .spinner .spinner__bar .spinner__bar-title {
    display: block;
    flex: none;               /* never squeezed narrower than the word */
    min-width: auto;
    align-self: auto;
    min-height: 0;
    padding-right: 0;
    border-right: 0;
    white-space: nowrap;
  }

  .spinner .spinner__bar .spinner__bar-schemes {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.85);
  }

  .spinner .spinner__bar .spinner__scheme-name {
    min-width: 15rem;
    padding-left: 0;
  }

  .spinner .spinner__bar .spinner__thumbs {
    justify-content: flex-start;
  }
}

/* Desktop (1024px and up): EXTERIOR | name | thumbnails, all on one row */
@media (min-width: 1024px) {
  .spinner .spinner__bar .spinner__bar-title,
  .spinner .spinner__bar .spinner__scheme-name,
  .spinner .spinner__bar .spinner__thumbs {
    grid-row: auto;
    grid-column: auto;
  }
}