/* Static wheel switcher (v2: 80px minimum thumb so eight options fit one row in the 712px column) — used only on vehicle pages that carry a
   [data-switcher] block (paired with ba-v2.js). The before/after slider styles
   stay in guides-v3.css; this file adds only the switcher and render-figure. */

.switcher-stage{position:relative;aspect-ratio:1184/864;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-2);box-shadow:var(--shadow);margin:22px 0 14px;background:var(--bg-2)}
.switcher-stage img{display:block;width:100%;height:100%;object-fit:cover;margin:0}
.switcher-badge{position:absolute;top:14px;right:14px;z-index:2;padding:6px 13px;border-radius:999px;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);background:rgba(10,12,15,.66);border:1px solid rgba(0,255,204,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none}

/* A grid that fits as many thumbs per row as the column allows (7 in the
   760px prose column) instead of a fixed width that left one orphan thumb on
   its own row; 4 per row on phones (see the media query below). */
.switcher-thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;margin:0 0 12px;padding:0}
.switcher-thumbs button{-webkit-appearance:none;appearance:none;background:var(--card);border:2px solid var(--border-2);border-radius:var(--radius-sm);padding:6px;width:auto;min-width:0;color:var(--muted);font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color .18s,transform .18s}
.switcher-thumbs button img{width:100%;height:auto;aspect-ratio:1;border-radius:10px;object-fit:cover;display:block}
.switcher-thumbs button span{display:block;text-align:center;line-height:1.25;max-width:100%}
.switcher-thumbs button:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.switcher-thumbs button[aria-checked="true"]{border-color:var(--accent);color:var(--text);box-shadow:0 0 0 3px var(--accent-dim)}
.switcher-thumbs button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.switcher-caption{margin:0 0 22px;color:var(--muted-2);font-size:.86rem;line-height:1.55;text-align:center}

/* real-render figure that replaces the generic phone mock in "Popular … looks" */
.fig-render{margin:22px 0}
.fig-render img{display:block;width:100%;border-radius:var(--radius);border:1px solid var(--border-2)}
.fig-render figcaption{text-align:center;color:var(--muted-2);font-size:.86rem;margin-top:10px}

@media (max-width:560px){
  .switcher-thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion: reduce){
  .switcher-thumbs button{transition:none}
  .switcher-thumbs button:hover{transform:none}
}