/* MotoConfig — Racing Red Automotive Design System */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600;1,700&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Midnight Graphite + Racing Red Theme */
  --bg-main: #09090B;
  --bg-card: #151214;
  --bg-card-hover: #20191C;
  --bg-elevated: #241D20;

  --accent-primary: #FF4D4D;       /* Racing Red */
  --accent-primary-hover: #FF9A76;
  --accent-primary-glow: rgba(255, 77, 77, 0.4);
  
  --accent-secondary: #F5A524;     /* Warm Amber */
  --accent-secondary-hover: #FFC078;
  --accent-secondary-glow: rgba(245, 165, 36, 0.35);

  --text-main: #F8FAFC;
  --text-muted: #94A3B8;
  --text-dim: #64748B;

  --border-color: #342A2D;
  --border-subtle: rgba(27, 38, 48, 0.9);
  --border-hover: rgba(255, 77, 77, 0.35);
  --border-purple: rgba(245, 165, 36, 0.4);

  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient Subtle Grid and Dual Radial Lighting Background */
.bg-ambient-mesh {
  background-color: var(--bg-main);
  background-image: 
    radial-gradient(circle at 10% 15%, rgba(245, 165, 36, 0.09) 0%, transparent 40%),
    radial-gradient(circle at 90% 25%, rgba(255, 77, 77, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(245, 165, 36, 0.06) 0%, transparent 50%);
}

::selection {
  background: rgba(255, 77, 77, 0.25);
  color: #F8FAFC;
}

/* Custom Minimalist Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #09090B;
}

::-webkit-scrollbar-thumb {
  background: #342A2D;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

.custom-scrollbar::-webkit-scrollbar {
  height: 4px;
}

/* Typography Utilities */
.font-sans {
  font-family: var(--font-sans);
}

.font-mono {
  font-family: var(--font-mono);
}

/* Header & Modern Floating Navbar */
.studio-navbar-container {
  background: rgba(11, 16, 22, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-color);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 1px rgba(255, 255, 255, 0.08);
  border-radius: 1.25rem;
}

/* MotoConfig brand: the Orbit M emblem and a compact two-tone wordmark. */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
  white-space: nowrap;
  text-decoration: none;
}

.brand-logo__mark {
  display: block;
  width: 38px;
  height: 38px;
  flex: none;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.brand-logo__wordmark {
  color: #F5F3EF;
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1;
}

.brand-logo__wordmark > span {
  color: #FF5757;
  font-weight: 700;
}

.brand-logo:hover .brand-logo__mark {
  transform: translateX(2px) rotate(-3deg);
}

.brand-logo:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 5px;
  border-radius: 3px;
}

.brand-logo--footer .brand-logo__mark {
  width: 34px;
  height: 34px;
}

.brand-logo--footer .brand-logo__wordmark {
  font-size: 1.1rem;
}

@media (max-width: 380px) {
  .brand-logo__mark {
    width: 34px;
    height: 34px;
  }

  .brand-logo__wordmark {
    font-size: 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo__mark {
    transition: none;
  }
}

/* Navbar Links */
.nav-link {
  position: relative;
  font-weight: 700;
  font-size: 0.78125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s ease, opacity 0.2s ease;
  padding: 0.4rem 0.25rem;
}

.nav-link:hover {
  color: var(--text-main);
}

.nav-link.active {
  color: var(--accent-primary);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -0.35rem;
  left: 10%;
  width: 80%;
  height: 2.5px;
  background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  border-radius: 9999px;
  box-shadow: 0 0 12px rgba(255, 77, 77, 0.85);
}

/* Studio Pill Badges */
.studio-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  background: rgba(11, 16, 22, 0.85);
  border: 1px solid rgba(255, 77, 77, 0.25);
  color: var(--text-main);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.studio-badge-purple {
  border-color: rgba(245, 165, 36, 0.35);
  background: rgba(245, 165, 36, 0.1);
  color: #DDD6FE;
}

.studio-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background-color: var(--accent-primary);
  box-shadow: 0 0 8px var(--accent-primary);
}

.studio-badge-dot-purple {
  background-color: var(--accent-secondary);
  box-shadow: 0 0 8px var(--accent-secondary);
}

/* Racing red primary action */
.btn-cyan-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #FF4D4D 0%, #E83B46 100%);
  color: #09090B;
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.8rem 1.6rem;
  border-radius: 0.625rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(255, 77, 77, 0.35), 0 0 0 1px rgba(255, 77, 77, 0.2);
}

.btn-cyan-gradient:hover {
  background: linear-gradient(135deg, #FF9A76 0%, #FFC078 100%);
  transform: translateY(-1.5px);
  box-shadow: 0 8px 28px rgba(255, 77, 77, 0.55), 0 0 20px rgba(245, 165, 36, 0.25);
}

.btn-cyan-gradient:active {
  transform: translateY(0);
}

/* Warm amber secondary action */
.btn-purple-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #F5A524 0%, #B92734 100%);
  color: #F8FAFC;
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.8rem 1.6rem;
  border-radius: 0.625rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(245, 165, 36, 0.4);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(245, 165, 36, 0.35);
}

.btn-purple-gradient:hover {
  background: linear-gradient(135deg, #FFC078 0%, #F5A524 100%);
  transform: translateY(-1.5px);
  box-shadow: 0 8px 28px rgba(245, 165, 36, 0.5);
}

/* Secondary Atelier Button (HOW IT WORKS ▶) */
.btn-studio-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  background: rgba(11, 16, 22, 0.75);
  color: var(--text-main);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.8rem 1.6rem;
  border-radius: 0.625rem;
  border: 1px solid var(--border-color);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  backdrop-filter: blur(14px);
  white-space: nowrap;
}

.btn-studio-secondary:hover {
  background: rgba(16, 23, 32, 0.95);
  border-color: var(--accent-primary);
  color: #F8FAFC;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.btn-studio-secondary:active {
  transform: translateY(0);
}

/* Hero Feature Cards (4 Cards at Bottom of Hero) */
.hero-feature-card {
  background: rgba(11, 16, 22, 0.85);
  border: 1px solid var(--border-color);
  border-radius: 1.25rem;
  padding: 1.35rem 1.45rem;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.hero-feature-card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(255, 77, 77, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 20px rgba(245, 165, 36, 0.12);
}

.hero-feature-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  background: rgba(255, 77, 77, 0.08);
  border: 1px solid rgba(255, 77, 77, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.hero-feature-icon-purple {
  background: rgba(245, 165, 36, 0.1);
  border-color: rgba(245, 165, 36, 0.3);
  color: #FF9A76;
}

.hero-feature-card:hover .hero-feature-icon {
  background: rgba(255, 77, 77, 0.16);
  border-color: var(--accent-primary);
  transform: scale(1.06);
  box-shadow: 0 0 16px rgba(255, 77, 77, 0.35);
}

.hero-feature-card:hover .hero-feature-icon-purple {
  background: rgba(245, 165, 36, 0.2);
  border-color: var(--accent-secondary);
  box-shadow: 0 0 16px rgba(245, 165, 36, 0.35);
}

/* General Modern Studio Card */
.studio-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 1.25rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(255, 77, 77, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 77, 77, 0.15), 0 0 40px rgba(245, 165, 36, 0.12);
}

.studio-card-purple:hover {
  border-color: rgba(245, 165, 36, 0.45);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(245, 165, 36, 0.2);
}

.studio-card-active {
  background: var(--bg-card-hover);
  border-color: var(--accent-primary);
  box-shadow: 0 0 24px rgba(255, 77, 77, 0.25), 0 0 0 1px var(--accent-primary);
}

/* Photography Studio Stage Effects */
.studio-stage-bg {
  background: radial-gradient(circle at 74% 44%, rgba(255, 77, 77, 0.10) 0%, rgba(255, 77, 77, 0.035) 36%, #130F10 61%, #09090B 100%);
}

.studio-overhead-softbox {
  position: absolute;
  top: -6%;
  right: 14%;
  width: 580px;
  height: 420px;
  background: radial-gradient(ellipse at center, rgba(255, 77, 77, 0.10) 0%, rgba(255, 77, 77, 0.025) 45%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}

.studio-vertical-light-strip {
  position: absolute;
  top: 10%;
  right: 3.5%;
  width: 3.5px;
  height: 60%;
  background: linear-gradient(180deg, transparent 0%, rgba(245, 165, 36, 0.7) 30%, rgba(255, 77, 77, 0.9) 50%, rgba(245, 165, 36, 0.7) 70%, transparent 100%);
  filter: blur(1px);
  box-shadow: 0 0 22px rgba(255, 77, 77, 0.7);
  pointer-events: none;
}

.studio-floor-ground-shadow {
  position: absolute;
  bottom: 6%;
  left: 10%;
  right: 6%;
  height: 42px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.6) 55%, transparent 80%);
  filter: blur(14px);
  pointer-events: none;
}

.studio-floor-light-ring {
  position: absolute;
  bottom: 11%;
  left: 20%;
  width: 500px;
  height: 145px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 77, 77, 0.35);
  box-shadow: 0 0 24px rgba(255, 77, 77, 0.45), inset 0 0 18px rgba(245, 165, 36, 0.3);
  transform: rotateX(72deg);
  pointer-events: none;
}

/* Immersive homepage hero: a single calm background scene keeps the copy legible and the bike artifact-free. */
.hero-immersive {
  height: 100dvh;
  min-height: 100svh;
  background: #09090B;
  isolation: isolate;
}

.hero-immersive-image,
.hero-immersive-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-immersive-image {
  z-index: -2;
  background: #09090B url('../assets/images/hero-racing-red-studio.webp') right center / cover no-repeat;
}

.hero-immersive-overlay {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(5, 7, 10, 0.98) 0%, rgba(5, 7, 10, 0.91) 31%, rgba(5, 7, 10, 0.49) 55%, rgba(5, 7, 10, 0.08) 78%),
    linear-gradient(0deg, rgba(5, 7, 10, 0.46) 0%, transparent 42%);
}

.hero-immersive-content {
  display: flex;
  min-height: 100%;
  align-items: center;
}

.hero-immersive-copy {
  max-width: 710px;
  padding: 116px 0 52px;
}

.hero-immersive h1 {
  margin: 0 0 1.35rem;
  color: #F8FAFC;
  font-size: clamp(3.5rem, 6.5vw, 6.625rem);
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 0.98;
}

.hero-immersive h1 span {
  background: linear-gradient(90deg, #FF4D4D 0%, #FF9A76 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (min-width: 769px) {
  .hero-immersive h1 span { white-space: nowrap; }
}

.hero-immersive-intro {
  max-width: 570px;
  margin: 0;
  color: #B1C0CC;
  font-size: clamp(1.05rem, 1.55vw, 1.2rem);
  line-height: 1.65;
}

.hero-immersive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}

.hero-immersive-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: 16px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  padding: 0.9rem 1.35rem;
  text-transform: uppercase;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.hero-immersive-button:hover { transform: translateY(-2px); }

.hero-immersive-button-primary {
  background: linear-gradient(135deg, #FF4D4D 0%, #E83B46 100%);
  box-shadow: 0 12px 28px rgba(255, 77, 77, 0.24);
  color: #06131A;
}

.hero-immersive-button-primary:hover { box-shadow: 0 16px 35px rgba(255, 77, 77, 0.38); }

.hero-immersive-button-secondary {
  border-color: rgba(212, 229, 237, 0.23);
  background: rgba(10, 18, 23, 0.7);
  color: #F8FAFC;
  backdrop-filter: blur(10px);
}

.hero-immersive-button-secondary:hover {
  border-color: rgba(255, 77, 77, 0.75);
  background: rgba(17, 34, 42, 0.88);
}

@media (max-width: 1024px) {
  .hero-immersive { height: auto; min-height: max(760px, 100svh); }
  .hero-immersive-content { min-height: max(760px, 100svh); align-items: flex-start; }
  .hero-immersive-image {
    top: auto;
    height: 49%;
    background-size: auto 90%;
    background-position: right bottom;
  }
  .hero-immersive-overlay {
    background: linear-gradient(180deg, #09090B 0%, rgba(9, 9, 11, 0.97) 39%, rgba(9, 9, 11, 0.22) 68%, rgba(9, 9, 11, 0.08) 100%);
  }
  .hero-immersive-copy { max-width: 100%; padding: 110px 0 0; }
  .hero-immersive h1 { font-size: clamp(2.75rem, 10vw, 4.75rem); }
}

/* Floating Dock Toolbar */
.config-toolbar-dock {
  background: rgba(11, 16, 22, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 20px rgba(245, 165, 36, 0.1);
  border-radius: 1.25rem;
}

.config-drawer-panel {
  background: rgba(14, 21, 30, 0.96);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--border-color);
  box-shadow: 0 30px 65px rgba(0, 0, 0, 0.75);
  border-radius: 1.25rem;
}

/* The dedicated configurator keeps the motorcycle visible while users make choices. */
.configurator-page {
  min-height: 100vh;
  padding: 112px 24px 80px;
  background: radial-gradient(ellipse 65% 55% at 72% 22%, rgba(120, 26, 34, .11), transparent 75%), #09090b;
}

.configurator-wrap { max-width: 1440px; margin: 0 auto; }
.configurator-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.configurator-back { display: inline-flex; align-items: center; gap: 8px; color: #a9adb8; font-size: 13px; font-weight: 600; text-decoration: none; margin-bottom: 14px; }
.configurator-back:hover { color: #fff; }
.configurator-back svg { width: 15px; height: 15px; }
.configurator-eyebrow { color: #ff6262; font-size: 11px; font-weight: 800; letter-spacing: .18em; margin: 0 0 6px; }
.configurator-heading h1 { color: #f8fafc; font-size: clamp(28px, 3.1vw, 42px); line-height: 1.16; font-weight: 800; letter-spacing: -.045em; margin: 0; }
.configurator-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 440px); gap: 24px; align-items: start; }
.configurator-preview-column { min-width: 0; position: sticky; top: 104px; }
.configurator-stage { border: 1px solid #303035; border-radius: 24px; overflow: hidden; background: #0d0d10; box-shadow: 0 22px 60px rgba(0, 0, 0, .23); }
.configurator-canvas { position: relative; width: 100%; height: clamp(490px, 68vh, 680px); overflow: hidden; }
.configurator-canvas canvas { display: block; }
.configurator-viewbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid #29292f; background: #111114; }
.configurator-camera-views { display: flex; gap: 3px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.configurator-camera-views::-webkit-scrollbar { display: none; }
.cam-preset-btn { flex: 0 0 auto; padding: 9px 11px; border-radius: 9px; color: #a8adb8; font-size: 11px; font-weight: 700; white-space: nowrap; transition: background .2s, color .2s; }
.cam-preset-btn:hover { color: #fff; background: #252529; }
.cam-preset-btn.is-active { color: #fff; background: #323036; }
.configurator-image-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; border: 1px solid #3a3a40; border-radius: 10px; color: #e8e8eb; padding: 9px 12px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.configurator-image-button:hover { border-color: #ff6565; color: #fff; }
.configurator-image-button svg { width: 14px; height: 14px; }
.configurator-controls { display: flex; flex-direction: column; min-width: 0; background: #151517; border: 1px solid #333338; border-radius: 24px; box-shadow: 0 22px 60px rgba(0, 0, 0, .23); }
.configurator-controls-heading { padding: 24px 24px 18px; }
.configurator-controls-heading span { color: #ff6868; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.configurator-controls-heading h2 { margin: 5px 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -.035em; }
.configurator-controls-heading p { color: #a5aab4; font-size: 13px; line-height: 1.5; margin: 0; }
.configurator-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 20px 20px; border-bottom: 1px solid #303035; }
.config-tab-btn { min-width: 0; min-height: 42px; padding: 9px 7px; border: 1px solid #3b3d44; border-radius: 11px; background: #222329; color: #d0d2d8; font-size: 12px; font-weight: 750; text-align: center; transition: background .2s, border-color .2s, color .2s; }
.config-tab-btn:hover { border-color: #777078; color: #fff; }
.config-tab-btn.is-active { border-color: #ff5959; background: rgba(255, 77, 77, .16); color: #fff; box-shadow: inset 3px 0 0 #ff4d4d; }
.config-tab-btn:focus-visible { outline: 2px solid #ff7777; outline-offset: 2px; }
.configurator-option-scroll { padding: 22px 20px 24px; }
.configurator-option-content { min-width: 0; }
.configurator-option-content .grid { grid-template-columns: minmax(0, 1fr); }
.configurator-option-content .grid:has(.paint-finish-opt) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.configurator-option-content .paint-color-opt, .configurator-option-content .part-select-btn, .configurator-option-content .panel-bike-card, .configurator-option-content .paint-finish-opt { min-height: 62px; }
.configurator-option-content .paint-color-opt .truncate, .configurator-option-content .panel-bike-card .truncate { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.35; }
.configurator-option-content .paint-color-opt .text-xs, .configurator-option-content .part-select-btn .text-xs, .configurator-option-content .panel-bike-card .text-xs { font-size: 13px; }
.configurator-option-content .paint-color-opt:focus-visible, .configurator-option-content .part-select-btn:focus-visible, .configurator-option-content .paint-finish-opt:focus-visible, .configurator-option-content .panel-bike-card:focus-visible { outline: 2px solid #ff7777; outline-offset: 2px; }
.configurator-scenes { display: flex; flex-wrap: wrap; gap: 6px; }
.studio-env-btn { padding: 8px 10px; border: 1px solid #3b3b42; border-radius: 8px; background: #222226; color: #c1c4cb; font-size: 11px; font-weight: 700; }
.studio-env-btn:hover { color: #fff; border-color: #a45a5e; }
.studio-env-btn.is-active { color: #fff; background: #473034; border-color: #ff5959; }
.configurator-rpm { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: #9ba0ab; font-size: 11px; }
.configurator-rpm-track { display: inline-block; flex: 1; height: 5px; background: #39393e; border-radius: 99px; overflow: hidden; }
.configurator-rpm-track > span { display: block; height: 100%; background: #ff5959; border-radius: inherit; }

@media (max-width: 1050px) {
  .configurator-layout { grid-template-columns: minmax(0, 1fr); }
  .configurator-preview-column { position: static; }
  .configurator-option-content .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .configurator-option-content .grid:has(.panel-bike-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .configurator-page { padding: 104px 15px 48px; }
  .configurator-heading { margin-bottom: 20px; }
  .configurator-back { margin-bottom: 16px; }
  .configurator-heading h1 { font-size: 30px; }
  .configurator-layout { gap: 14px; }
  .configurator-stage { border-radius: 18px; }
  .configurator-canvas { height: 350px; }
  .configurator-viewbar { padding: 9px; }
  .cam-preset-btn { padding: 8px; }
  .configurator-image-button { padding: 9px; }
  .configurator-image-button span { display: none; }
  .configurator-controls { border-radius: 18px; }
  .configurator-option-content .grid, .configurator-option-content .grid:has(.panel-bike-card) { grid-template-columns: minmax(0, 1fr); }
  .configurator-option-content .grid:has(.paint-finish-opt) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The studio uses the site's racing palette around a white product-viewing surface. */
.configurator-body { background: var(--bg-main); color: var(--text-main); }
.configurator-body .configurator-page { min-height: 100dvh; padding: 11px 18px; background: radial-gradient(ellipse 72% 75% at 82% 18%, rgba(255, 77, 77, .10), transparent 74%), radial-gradient(ellipse 44% 56% at 0% 100%, rgba(245, 165, 36, .035), transparent 75%), var(--bg-main); }
.configurator-body .configurator-wrap { max-width: none; }
.configurator-body .configurator-layout { display: grid; grid-template-columns: clamp(340px, 25vw, 470px) minmax(0, 1fr); gap: 18px; align-items: stretch; height: calc(100dvh - 22px); min-height: 620px; }
.configurator-body .configurator-controls { min-height: 0; border: 1px solid #292c30; border-radius: 20px; background: #0c0e10; box-shadow: 0 20px 56px rgba(0, 0, 0, .38); overflow: hidden; }
.configurator-body .configurator-controls-heading { position: relative; isolation: isolate; flex: 0 0 216px; overflow: hidden; padding: 33px 29px 18px; border-bottom: 1px solid #292c30; background: #0c0e10; }
.configurator-body .configurator-back { position: absolute; top: 14px; right: 18px; z-index: 2; margin: 0; color: var(--text-muted); font-size: 11px; }
.configurator-body .configurator-back:hover { color: #fff; }
.configurator-bike-thumb { position: absolute; z-index: -1; right: 12px; top: 24px; width: 58%; height: 170px; object-fit: contain; opacity: .16; filter: grayscale(100%); pointer-events: none; }
.configurator-body .configurator-controls-heading h1 { margin: 0; color: var(--text-main); font-size: clamp(27px, 2vw, 36px); font-weight: 850; line-height: 1; letter-spacing: -.055em; text-transform: uppercase; }
.configurator-body .configurator-controls-heading p { margin: 10px 0 28px; color: var(--text-muted); font-size: 11px; font-weight: 800; letter-spacing: .2em; line-height: 1.2; text-transform: uppercase; }
.configurator-current-bike { position: relative; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 37px; padding: 7px 14px; border: 1px solid #3a3d41; border-radius: 99px; background: rgba(5, 6, 7, .88); box-shadow: 0 4px 15px rgba(0,0,0,.18); color: #f8fafc; font-size: 10px; font-weight: 800; letter-spacing: .09em; line-height: 1.3; text-transform: uppercase; }
.configurator-current-bike #studio-active-bike-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.configurator-body .configurator-accent-rule { display: block; width: 50px; height: 2px; margin-top: 20px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); }
.configurator-menu { min-height: 0; overflow-y: auto; padding: 28px 24px 22px; flex: 1 1 auto; background: #0c0e10; scrollbar-color: #494d51 transparent; }
.configurator-body .configurator-tabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px; padding: 0; border: 0; }
.configurator-body .config-tab-btn { display: flex; align-items: center; gap: 18px; width: 100%; min-height: 79px; padding: 12px 15px; border: 1px solid #303338; border-radius: 19px; background: #191b1e; color: var(--text-main); box-shadow: none; font-size: 14px; font-weight: 800; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.configurator-body .config-tab-btn:hover,
.configurator-body .config-tab-btn.is-active { border-color: var(--accent-primary); background: #222426; color: #fff; box-shadow: inset 3px 0 0 var(--accent-primary); }
.configurator-body .config-tab-icon { display: grid; place-items: center; flex: 0 0 53px; width: 53px; height: 53px; border: 1px solid #373b40; border-radius: 14px; background: #24272a; color: #ff7777; }
.configurator-body .config-tab-icon svg { width: 24px; height: 24px; stroke-width: 1.8; }
.configurator-body .config-tab-chevron { width: 17px; height: 17px; margin-left: auto; color: var(--text-muted); }
.configurator-body .configurator-camera-views { flex-wrap: wrap; overflow: visible; }
.configurator-body .cam-preset-btn,
.configurator-body .studio-env-btn { color: #d7d2d4; background: var(--bg-card-hover); border: 1px solid var(--border-color); }
.configurator-body .cam-preset-btn:hover,
.configurator-body .studio-env-btn:hover { color: #fff; border-color: var(--accent-primary); }
.configurator-body .cam-preset-btn.is-active,
.configurator-body .studio-env-btn.is-active { color: #fff; background: #48272e; border-color: var(--accent-primary); }
.configurator-spin-control { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.configurator-spin-control button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-card-hover); color: var(--text-main); font-size: 11px; font-weight: 800; }
.configurator-spin-control button:hover,
.configurator-spin-control button.is-active { border-color: var(--accent-primary); background: #48272e; color: #fff; }
.configurator-spin-control button svg { width: 15px; height: 15px; }
.configurator-spin-control > span { color: var(--text-muted); font-size: 11px; }
.configurator-body .configurator-rpm { color: var(--text-muted); }
.configurator-body .configurator-rpm-track { background: #4c343a; }
.configurator-body .configurator-tool-panel { display: grid; gap: 16px; }
.configurator-body .configurator-tool-panel > p { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.configurator-body .configurator-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.configurator-body .configurator-tool-option,
.configurator-body .configurator-sound-actions button { display: flex; align-items: center; justify-content: flex-start; gap: 11px; min-width: 0; min-height: 64px; padding: 13px 14px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-card-hover); color: var(--text-main); font-size: 12px; font-weight: 750; line-height: 1.25; text-align: left; }
.configurator-body .configurator-tool-option svg,
.configurator-body .configurator-sound-actions button svg { flex: 0 0 auto; width: 19px; height: 19px; color: #ff7777; stroke-width: 1.9; }
.configurator-body .configurator-tool-option:hover,
.configurator-body .configurator-sound-actions button:hover { border-color: var(--accent-primary) !important; background: #382329 !important; }
.configurator-body .configurator-tool-option.is-active,
.configurator-body .configurator-tool-option[aria-pressed="true"],
.configurator-body .configurator-sound-actions button.is-active,
.configurator-body .configurator-sound-actions button[aria-pressed="true"] { border-color: var(--accent-primary) !important; background: #48272e !important; box-shadow: inset 3px 0 0 var(--accent-primary); }
.configurator-body .configurator-tool-option:focus-visible,
.configurator-body .configurator-sound-actions button:focus-visible { outline: 2px solid #ff7777; outline-offset: 2px; }
.configurator-body .configurator-sound-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.configurator-body .configurator-sound-actions button:disabled,
.configurator-body .configurator-sound-actions button:disabled:hover { opacity: .48; cursor: not-allowed; border-color: var(--border-color) !important; background: var(--bg-card-hover) !important; box-shadow: none; }
.configurator-body .configurator-tool-panel .configurator-rpm { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 0; padding: 17px; border: 1px solid var(--border-color); border-radius: 14px; background: #20191c; color: var(--text-main); font-size: 12px; font-weight: 750; }
.configurator-body .configurator-tool-panel .configurator-rpm-track { width: 100%; height: 8px; background: #4c343a; }
.configurator-body .configurator-tool-panel .configurator-rpm-track > span { background: linear-gradient(90deg, #ed424a, #f59942); }
.configurator-body .configurator-preview-column { position: static; min-width: 0; min-height: 0; }
.configurator-body .configurator-stage { display: flex; flex-direction: column; width: 100%; height: 100%; border: 1px solid var(--border-color); border-radius: 20px; background: #11161b; box-shadow: 0 20px 56px rgba(0, 0, 0, .38); overflow: hidden; }
.configurator-body .configurator-canvas { flex: 1 1 auto; min-height: 0; width: 100%; height: auto; background: #11161b; }
.configurator-model-loading { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: #11161b; opacity: 1; transition: opacity .28s ease; }
.configurator-model-loading[hidden] { display: none !important; }
.configurator-model-loading.is-complete { opacity: 0; pointer-events: none; }
.configurator-model-loading-image { width: min(68%, 760px); max-height: 65%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,.5)); }
.configurator-model-loading-caption { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 11px; min-width: min(90%, 340px); color: #d9dfe4; font-size: 12px; font-weight: 650; text-align: center; white-space: nowrap; }
.configurator-model-loading-spinner { flex: 0 0 auto; width: 16px; height: 16px; border: 2px solid #59616b; border-top-color: #ef424a; border-radius: 50%; animation: studio-loader-spin .8s linear infinite; }
.configurator-model-loading-track { position: absolute; top: 30px; left: 0; width: 100%; height: 3px; overflow: hidden; border-radius: 5px; background: #3a4149; }
.configurator-model-loading-track > span { display: block; height: 100%; width: 8%; border-radius: inherit; background: #ef424a; transition: width .2s ease; }
.configurator-model-loading.is-error .configurator-model-loading-spinner,
.configurator-model-loading.is-error .configurator-model-loading-track { display: none; }
.configurator-model-loading.is-error .configurator-model-loading-caption { flex-wrap: wrap; white-space: normal; }
.configurator-model-loading.is-error #studio-loader-retry { display: inline-flex; margin-left: 4px; padding: 7px 12px; border: 1px solid #ef424a; border-radius: 8px; color: #ff777d; font-size: 11px; font-weight: 800; }
.configurator-model-loading #studio-loader-retry[hidden] { display: none !important; }
@keyframes studio-loader-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .configurator-body .configurator-page { padding: 12px; }
  .configurator-body .configurator-layout { grid-template-columns: minmax(0,1fr); height: auto; min-height: 0; }
  .configurator-body .configurator-preview-column { order: -1; height: auto; min-height: 320px; }
  .configurator-body .configurator-stage { height: auto; }
  .configurator-body .configurator-canvas { flex: none; height: min(55vh, 480px); min-height: 320px; }
  .configurator-body .configurator-controls { min-height: 590px; }
  .configurator-body .configurator-menu { overflow: visible; }
}

@media (max-width: 600px) {
  .configurator-body .configurator-page { padding: 8px; }
  .configurator-body .configurator-layout { gap: 10px; }
  .configurator-body .configurator-preview-column { min-height: 315px; }
  .configurator-body .configurator-canvas { height: 315px; min-height: 315px; }
  .configurator-body .configurator-controls-heading { flex-basis: 185px; padding: 32px 20px 14px; }
  .configurator-body .configurator-controls-heading h1 { font-size: 27px; }
  .configurator-body .configurator-controls-heading p { margin-bottom: 20px; }
  .configurator-body #studio-active-bike-kind { display: none; }
  .configurator-body .configurator-menu { padding: 18px; }
  .configurator-body .config-tab-btn { min-height: 68px; padding: 8px 12px; font-size: 12px; }
  .configurator-body .config-tab-icon { flex-basis: 46px; width: 46px; height: 46px; }
  .configurator-body .configurator-tabs { gap: 9px; }
  .configurator-model-loading-image { width: 85%; max-height: 60%; }
  .configurator-model-loading-caption { bottom: 20px; font-size: 11px; }
}

/* Paint & Finish: a transparent tray at the bottom of the 3D garage. */
.paint-finish-overlay[hidden] { display: none !important; }
.paint-finish-overlay {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  width: 100%;
  padding: 0 14px 14px;
  background: transparent;
}
.paint-overlay-dialog {
  width: 100%;
  max-height: min(55vh, 410px);
  overflow-y: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #f7f8fa;
  animation: paint-overlay-enter .22s ease-out both;
}
.paint-overlay-header { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 0 3px 10px; }
.paint-overlay-icon { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid rgba(232, 47, 60, .48); border-radius: 14px; background: rgba(24, 28, 34, .8); color: #ff626a; }
.paint-overlay-icon svg { width: 27px; height: 27px; stroke-width: 1.7; }
.paint-overlay-heading { min-width: 0; }
.paint-overlay-heading h2 { margin: 0; color: #f7f8fa; font-size: clamp(20px, 2vw, 28px); font-weight: 900; letter-spacing: .09em; line-height: 1.08; text-transform: uppercase; }
.paint-overlay-heading p { margin: 5px 0 0; color: #b3bbc4; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.paint-overlay-close { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; margin-left: auto; border: 1px solid rgba(220, 228, 235, .27); border-radius: 14px; background: rgba(24, 28, 34, .8); color: #f7f8fa; transition: background .18s ease, border-color .18s ease; }
.paint-overlay-close:hover { border-color: #e53b43; background: rgba(255, 77, 77, .14); }
.paint-overlay-close svg { width: 23px; height: 23px; }
.paint-overlay-content { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr); gap: 10px; padding-top: 0; }
.paint-glass-panel { min-width: 0; padding: 13px; border: 1px solid #e1e1e4; border-radius: 18px; background: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .08); }
.paint-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 25px; margin-bottom: 10px; }
.paint-panel-heading h3 { margin: 0; color: #d73542; font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.paint-panel-heading > span { overflow: hidden; color: #62656c; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-align: right; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.paint-finish-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.paint-finish-choice { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 57px; padding: 7px 8px; border: 1px solid #dedfe2; border-radius: 13px; background: #f7f7f8; color: #202126; text-align: left; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.paint-finish-choice:hover { transform: translateY(-1px); border-color: #c8c9ce; background: #f0f0f2; }
.paint-finish-choice.is-selected { border-color: #e74752; background: #fff0f1; box-shadow: inset 0 0 0 1px rgba(231, 71, 82, .2); }
.paint-finish-orb { flex: 0 0 25px; width: 25px; height: 25px; border: 1px solid #aeb4ba; border-radius: 50%; box-shadow: inset -5px -7px 10px rgba(0, 0, 0, .35), 0 1px 4px rgba(0, 0, 0, .22); }
.paint-finish-orb--gloss { background: radial-gradient(circle at 28% 22%, #fff, #7ba8c7 18%, #244363 49%, #0b1525 85%); }
.paint-finish-orb--matte { background: radial-gradient(circle at 28% 22%, #9cb8ca, #405d70 42%, #17232d 86%); }
.paint-finish-orb--metallic { background: repeating-linear-gradient(135deg, rgba(255,255,255,.2) 0 2px, transparent 2px 5px), radial-gradient(circle at 24% 18%, #8ec2df, #21517c 58%, #102030); }
.paint-finish-orb--chrome { background: linear-gradient(145deg, #17212a 8%, #f5f7f7 33%, #7b858d 48%, #131a1f 68%, #c8d0d4 92%); }
.paint-finish-orb--satin { background: linear-gradient(135deg, #799aab, #2f4a5b 56%, #19242b); }
.paint-finish-orb--carbon { background: repeating-linear-gradient(45deg, #111519 0 3px, #343a3e 3px 5px, #141a20 5px 8px); }
.paint-finish-orb--pearl { background: radial-gradient(circle at 25% 20%, #fff, #b5c9d9 37%, #697d96 70%, #263b54); }
.paint-finish-orb--candy { background: radial-gradient(circle at 25% 20%, #ffd0d9, #a72d52 35%, #330b24 76%); }
.paint-finish-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.paint-finish-copy strong { overflow: hidden; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.paint-colour-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; }
.paint-colour-choice { position: relative; min-width: 0; min-height: 57px; border: 1px solid rgba(28, 30, 35, .28); border-radius: 13px; background: radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .55), transparent 38%), var(--paint-swatch); box-shadow: inset 0 -9px 14px rgba(0, 0, 0, .14), 0 2px 7px rgba(0, 0, 0, .16); transition: transform .18s ease, box-shadow .18s ease; }
.paint-colour-choice:hover { transform: translateY(-2px); box-shadow: inset 0 -9px 14px rgba(0,0,0,.14), 0 5px 14px rgba(0,0,0,.32); }
.paint-colour-choice.is-selected { outline: 2px solid #ff5960; outline-offset: 2px; }
.paint-colour-original { display: grid; place-items: end center; padding-bottom: 7px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 5px, transparent 5px 11px), radial-gradient(circle at 28% 14%, #9ca6af, #343d48 31%, #0e1219 72%); }
.paint-colour-original-mark { color: #fff; font-family: var(--font-mono); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-shadow: 0 1px 3px #000; }
.paint-overlay-dialog button:focus-visible { outline: 3px solid #ff5960; outline-offset: 3px; }

/* Only Paint & Finish uses smoked glass; the swatches stay fully saturated. */
#paint-finish-overlay .paint-glass-panel { border-color: rgba(225, 233, 241, .19); background: linear-gradient(135deg, rgba(42, 48, 56, .66), rgba(16, 20, 25, .72)); box-shadow: 0 16px 36px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(16px) saturate(125%); backdrop-filter: blur(16px) saturate(125%); }
#paint-finish-overlay .paint-panel-heading h3 { color: #ff737c; }
#paint-finish-overlay .paint-panel-heading > span { color: #d9e0e5; }
#paint-finish-overlay .paint-finish-choice { border-color: rgba(226, 234, 242, .18); background: rgba(54, 60, 68, .54); color: #f5f7fa; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#paint-finish-overlay .paint-finish-choice:hover { border-color: rgba(242, 247, 252, .36); background: rgba(72, 79, 88, .72); }
#paint-finish-overlay .paint-finish-choice.is-selected { border-color: #ff626b; background: rgba(141, 43, 54, .54); box-shadow: inset 0 0 0 1px rgba(255, 98, 107, .18); }
#paint-finish-overlay .paint-finish-copy strong { color: #f5f7fa; }
#paint-finish-overlay .paint-colour-choice { border-color: rgba(226, 234, 242, .26); }

/* Rim colours sit in a smoked-glass tray; metallic swatches remain opaque. */
.wheels-overlay-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
#wheels-overlay .wheels-panel { border-color: rgba(225, 233, 241, .19); background: linear-gradient(135deg, rgba(42, 48, 56, .66), rgba(16, 20, 25, .72)); box-shadow: 0 16px 36px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(16px) saturate(125%); backdrop-filter: blur(16px) saturate(125%); }
#wheels-overlay .paint-panel-heading h3 { color: #ff737c; }
#wheels-overlay .paint-panel-heading > span { color: #d9e0e5; }
.wheels-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.wheels-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; min-height: 78px; padding: 8px; border: 1px solid #dedfe2; border-radius: 13px; background: #f7f7f8; color: #202126; text-align: left; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.wheels-choice:hover { transform: translateY(-2px); border-color: #c8c9ce; background: #f0f0f2; }
.wheels-choice.is-selected { border-color: #e74752; background: #fff0f1; box-shadow: inset 0 0 0 1px rgba(231, 71, 82, .2); }
.wheels-choice-top { display: flex; align-items: center; gap: 7px; width: 100%; min-width: 0; }
.wheels-choice-rim { position: relative; display: block; flex: 0 0 32px; width: 32px; height: 32px; border: 5px solid #17191d; border-radius: 50%; background: repeating-conic-gradient(from 6deg, var(--wheel-rim-color) 0deg 13deg, #24272d 13deg 45deg); box-shadow: inset 0 0 0 1px #555a60, 0 2px 5px rgba(0,0,0,.22); }
.wheels-choice-rim::after { content: ''; position: absolute; inset: 8px; border: 1px solid var(--wheel-rim-color); border-radius: 50%; background: #17191d; }
.wheels-choice-brand { overflow: hidden; color: #d73542; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.wheels-choice-name { display: -webkit-box; overflow: hidden; color: #242428; font-size: 10px; font-weight: 750; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wheels-colour-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 7px; }
.wheels-colour-choice { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 58px; padding: 7px; border: 1px solid rgba(226, 234, 242, .18); border-radius: 13px; background: rgba(54, 60, 68, .54); color: #f5f7fa; text-align: left; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.wheels-colour-choice:hover { transform: translateY(-2px); border-color: rgba(242, 247, 252, .36); background: rgba(72, 79, 88, .72); }
.wheels-colour-choice.is-selected { border-color: #ff626b; background: rgba(141, 43, 54, .54); box-shadow: inset 0 0 0 1px rgba(255, 98, 107, .18); }
.wheels-colour-choice > span:last-child { min-width: 0; color: #f5f7fa; font-size: 10px; font-weight: 800; line-height: 1.2; }
.wheels-colour-swatch { display: block; flex: 0 0 29px; width: 29px; height: 29px; border: 1px solid rgba(24, 24, 28, .3); border-radius: 50%; background: linear-gradient(145deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.16) 25%, transparent 47%), var(--wheel-colour); box-shadow: inset -5px -7px 9px rgba(0,0,0,.22), inset 2px 2px 3px rgba(255,255,255,.38), 0 1px 3px rgba(0,0,0,.2); }
.wheels-colour-swatch--original { background: repeating-conic-gradient(#abb0b7 0 28deg, #3b4049 28deg 55deg); }
.wheels-colour-choice[data-wheel-colour="matte-black"] .wheels-colour-swatch { background: #202124; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.honda-metallic-rims .wheels-colour-choice[data-wheel-colour="matte-black"] .wheels-colour-swatch { background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.11) 26%, transparent 48%), var(--wheel-colour); box-shadow: inset -5px -7px 9px rgba(0,0,0,.22), inset 2px 2px 3px rgba(255,255,255,.38), 0 1px 3px rgba(0,0,0,.2); }
/* Exhaust options share the garage-bottom tray used by Paint & Finish. */
.exhaust-overlay-content { display: grid; grid-template-columns: minmax(0, 1fr); }
.exhaust-overlay .exhaust-panel { border-color: rgba(225, 233, 241, .19); background: linear-gradient(135deg, rgba(42, 48, 56, .66), rgba(16, 20, 25, .72)); box-shadow: 0 16px 36px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(16px) saturate(125%); backdrop-filter: blur(16px) saturate(125%); }
.exhaust-overlay .paint-panel-heading h3 { color: #ff737c; }
.exhaust-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.exhaust-choice { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 74px; padding: 10px; border: 1px solid rgba(226, 234, 242, .18); border-radius: 13px; background: rgba(54, 60, 68, .54); color: #f5f7fa; text-align: left; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.exhaust-choice:hover { transform: translateY(-1px); border-color: rgba(242, 247, 252, .36); background: rgba(72, 79, 88, .72); }
.exhaust-choice.is-selected { border-color: #ff626b; background: rgba(141, 43, 54, .54); box-shadow: inset 0 0 0 1px rgba(255, 98, 107, .18); }
.exhaust-choice-icon { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid rgba(226, 234, 242, .16); border-radius: 11px; background: rgba(15, 19, 25, .48); color: #ff8a91; }
.exhaust-choice.is-selected .exhaust-choice-icon { border-color: rgba(255, 157, 165, .5); background: rgba(255, 77, 89, .19); color: #ffabb0; }
.exhaust-choice-icon svg { width: 19px; height: 19px; stroke-width: 1.8; }
.exhaust-choice-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.exhaust-choice-copy small { overflow: hidden; color: #ff858d; font-size: 9px; font-weight: 850; letter-spacing: .11em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.exhaust-choice-copy strong { display: -webkit-box; overflow: hidden; color: #f5f7fa; font-size: 11px; font-weight: 800; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.exhaust-choice-check { display: none; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; margin-left: auto; border-radius: 50%; background: #e74752; color: #fff; }
.exhaust-choice.is-selected .exhaust-choice-check { display: grid; }
.exhaust-choice-check svg { width: 13px; height: 13px; stroke-width: 3; }
/* Lighting uses the same garage-bottom tray, with direct light controls and glow colours. */
.lighting-overlay-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lighting-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.lighting-control { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 54px; padding: 7px 9px; border: 1px solid #dedfe2; border-radius: 13px; background: #f7f7f8; color: #242428; text-align: left; cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.lighting-control:hover { transform: translateY(-1px); border-color: #c8c9ce; background: #f0f0f2; }
.lighting-control[aria-pressed="true"] { border-color: #e74752; background: #fff0f1; box-shadow: inset 0 0 0 1px rgba(231, 71, 82, .2); }
.lighting-control > span:nth-child(2) { overflow: hidden; min-width: 0; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.lighting-control::after { flex: 0 0 auto; margin-left: auto; color: #777b82; content: 'Off'; font-family: var(--font-mono); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.lighting-control[aria-pressed="true"]::after { color: #d73542; content: 'On'; }
.lighting-control-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid #dedfe2; border-radius: 10px; background: #fff; color: #50535a; }
.lighting-control-icon svg { width: 18px; height: 18px; stroke-width: 2; }
.lighting-control[aria-pressed="true"] .lighting-control-icon { border-color: #f3bec3; background: #ffe2e5; color: #d73542; }
.lighting-underglow-toggle { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 43px; margin-bottom: 10px; padding: 7px 11px; border: 1px solid #dedfe2; border-radius: 11px; background: #f7f7f8; color: #242428; font-size: 11px; font-weight: 800; text-align: left; cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.lighting-underglow-toggle:hover { border-color: #c8c9ce; background: #f0f0f2; }
.lighting-underglow-toggle[aria-pressed="true"] { border-color: #e74752; background: #fff0f1; color: #b82935; }
.lighting-underglow-toggle svg { width: 17px; height: 17px; }
.lighting-underglow-toggle::after { margin-left: auto; content: 'Off'; color: #777b82; font-family: var(--font-mono); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.lighting-underglow-toggle[aria-pressed="true"]::after { content: 'On'; color: #d73542; }
.lighting-underglow-colours { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; }
.lighting-underglow-swatch { position: relative; display: grid; place-items: center; min-width: 0; min-height: 44px; padding: 0; border: 1px solid #d9dade; border-radius: 11px; background: #f7f7f8; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.lighting-underglow-swatch::before { display: block; width: 24px; height: 24px; border: 1px solid rgba(0, 0, 0, .18); border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .9), transparent 32%), var(--underglow-colour, #ff4650); box-shadow: 0 0 11px var(--underglow-colour, #ff4650), inset -3px -4px 6px rgba(0, 0, 0, .18); content: ''; }
.lighting-underglow-swatch:hover { transform: translateY(-2px); border-color: #c8c9ce; }
.lighting-underglow-swatch.is-selected,
.lighting-underglow-swatch[aria-pressed="true"] { border-color: #e74752; box-shadow: inset 0 0 0 1px rgba(231, 71, 82, .22); }
.lighting-underglow-swatch:disabled { cursor: not-allowed; opacity: .5; }
/* Lighting controls use the same smoked glass as the paint, rim, and exhaust trays. */
#lighting-overlay .paint-glass-panel { border-color: rgba(225, 233, 241, .19); background: linear-gradient(135deg, rgba(42, 48, 56, .66), rgba(16, 20, 25, .72)); box-shadow: 0 16px 36px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(16px) saturate(125%); backdrop-filter: blur(16px) saturate(125%); }
#lighting-overlay .paint-panel-heading h3 { color: #ff737c; }
#lighting-overlay .paint-panel-heading > span { color: #d9e0e5; }
#lighting-overlay .lighting-control,
#lighting-overlay .lighting-underglow-toggle,
#lighting-overlay .lighting-underglow-swatch { border-color: rgba(226, 234, 242, .18); background: rgba(54, 60, 68, .54); color: #f5f7fa; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#lighting-overlay .lighting-control:hover,
#lighting-overlay .lighting-underglow-toggle:hover,
#lighting-overlay .lighting-underglow-swatch:hover { border-color: rgba(242, 247, 252, .36); background: rgba(72, 79, 88, .72); }
#lighting-overlay .lighting-control[aria-pressed="true"],
#lighting-overlay .lighting-underglow-toggle[aria-pressed="true"] { border-color: #ff626b; background: rgba(141, 43, 54, .54); color: #f5f7fa; box-shadow: inset 0 0 0 1px rgba(255, 98, 107, .18); }
#lighting-overlay .lighting-control::after,
#lighting-overlay .lighting-underglow-toggle::after { color: #d9e0e5; }
#lighting-overlay .lighting-control[aria-pressed="true"]::after,
#lighting-overlay .lighting-underglow-toggle[aria-pressed="true"]::after { color: #ffadb3; }
#lighting-overlay .lighting-control-icon { border-color: rgba(226, 234, 242, .16); background: rgba(15, 19, 25, .48); color: #e4eaf0; }
#lighting-overlay .lighting-control[aria-pressed="true"] .lighting-control-icon { border-color: rgba(255, 157, 165, .5); background: rgba(255, 77, 89, .19); color: #ffadb3; }
#lighting-overlay .lighting-underglow-swatch.is-selected,
#lighting-overlay .lighting-underglow-swatch[aria-pressed="true"] { border-color: #ff626b; box-shadow: inset 0 0 0 1px rgba(255, 98, 107, .22); }
/* Brake colours sit in the garage tray so the bike stays visible while editing. */
.brakes-overlay-content { display: grid; grid-template-columns: minmax(0, 1fr); }
.brakes-colour-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; }
.brakes-colour-choice { position: relative; display: grid; place-items: center; min-width: 0; min-height: 60px; padding: 0; border: 1px solid rgba(28, 30, 35, .28); border-radius: 13px; background: radial-gradient(circle at 30% 17%, rgba(255, 255, 255, .68), transparent 39%), linear-gradient(150deg, rgba(255, 255, 255, .12), transparent 45%, rgba(0, 0, 0, .18)), var(--brake-colour, #e22632); box-shadow: inset 0 -8px 12px rgba(0, 0, 0, .15), 0 2px 7px rgba(0, 0, 0, .14); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.brakes-colour-choice:hover { transform: translateY(-2px); box-shadow: inset 0 -8px 12px rgba(0, 0, 0, .15), 0 5px 14px rgba(0, 0, 0, .22); }
.brakes-colour-choice.is-selected,
.brakes-colour-choice[aria-pressed="true"] { outline: 2px solid #ff5960; outline-offset: 2px; }
.brakes-colour-choice--original { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 5px, transparent 5px 11px), radial-gradient(circle at 30% 17%, #a9afb6, #353c44 37%, #12161c 77%); }
.brakes-colour-original-mark { color: #fff; font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-shadow: 0 1px 3px #000; }
#brakes-overlay .brakes-panel { border-color: rgba(225, 233, 241, .19); background: linear-gradient(135deg, rgba(42, 48, 56, .66), rgba(16, 20, 25, .72)); box-shadow: 0 16px 36px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(16px) saturate(125%); backdrop-filter: blur(16px) saturate(125%); }
#brakes-overlay .paint-panel-heading h3 { color: #ff737c; }
#brakes-overlay .brakes-colour-choice { border-color: rgba(226, 234, 242, .26); }

/* Suspension uses the same smoked-glass garage tray as the other colour controls. */
.suspension-overlay-content { display: grid; grid-template-columns: minmax(0, 1fr); }
.suspension-colour-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; }
.suspension-colour-choice { position: relative; display: grid; place-items: center; min-width: 0; min-height: 60px; padding: 0; border: 1px solid rgba(226, 234, 242, .26); border-radius: 13px; background: radial-gradient(circle at 30% 17%, rgba(255, 255, 255, .68), transparent 39%), linear-gradient(150deg, rgba(255, 255, 255, .12), transparent 45%, rgba(0, 0, 0, .18)), var(--suspension-colour, #d19a2f); box-shadow: inset 0 -8px 12px rgba(0, 0, 0, .15), 0 2px 7px rgba(0, 0, 0, .14); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.suspension-colour-choice:hover { transform: translateY(-2px); box-shadow: inset 0 -8px 12px rgba(0, 0, 0, .15), 0 5px 14px rgba(0, 0, 0, .22); }
.suspension-colour-choice.is-selected,
.suspension-colour-choice[aria-pressed="true"] { outline: 2px solid #ff5960; outline-offset: 2px; }
.suspension-colour-choice--original { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 5px, transparent 5px 11px), radial-gradient(circle at 30% 17%, #a9afb6, #353c44 37%, #12161c 77%); }
.suspension-colour-original-mark { color: #fff; font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-shadow: 0 1px 3px #000; }
#suspension-overlay .suspension-panel { border-color: rgba(225, 233, 241, .19); background: linear-gradient(135deg, rgba(42, 48, 56, .66), rgba(16, 20, 25, .72)); box-shadow: 0 16px 36px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(16px) saturate(125%); backdrop-filter: blur(16px) saturate(125%); }
#suspension-overlay .paint-panel-heading h3 { color: #ff737c; }
#suspension-overlay .paint-panel-heading > span { color: #d9e0e5; }

/* Mirrors, plates, camera, and sound share a smoked-glass tray beneath the 3D bike. */
.garage-options-overlay-content { min-width: 0; padding: 13px; border: 1px solid rgba(225, 233, 241, .19); border-radius: 18px; background: linear-gradient(135deg, rgba(42, 48, 56, .66), rgba(16, 20, 25, .72)); box-shadow: 0 16px 36px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(16px) saturate(125%); backdrop-filter: blur(16px) saturate(125%); }
.garage-options-overlay .configurator-option-content { min-width: 0; }
.garage-part-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.garage-part-choice { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 70px; padding: 10px; border: 1px solid rgba(226, 234, 242, .18); border-radius: 13px; background: rgba(54, 60, 68, .54); color: #f5f7fa; text-align: left; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.garage-part-choice:hover { transform: translateY(-1px); border-color: rgba(242, 247, 252, .36); background: rgba(72, 79, 88, .72); }
.garage-part-choice.is-selected,
.garage-part-choice[aria-pressed="true"] { border-color: #ff626b; background: rgba(141, 43, 54, .54); box-shadow: inset 0 0 0 1px rgba(255, 98, 107, .18); }
.garage-part-choice-icon { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid rgba(226, 234, 242, .16); border-radius: 11px; background: rgba(15, 19, 25, .48); color: #ff8a91; }
.garage-part-choice-icon svg { width: 19px; height: 19px; stroke-width: 1.8; }
.garage-part-choice.is-selected .garage-part-choice-icon { border-color: rgba(255, 157, 165, .5); background: rgba(255, 77, 89, .19); color: #ffabb0; }
.garage-part-choice-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.garage-part-choice-copy small { overflow: hidden; color: #ff858d; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.garage-part-choice-copy strong { display: -webkit-box; overflow: hidden; color: #f5f7fa; font-size: 11px; font-weight: 800; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.garage-part-choice-price { flex: 0 0 auto; margin-left: auto; color: #d0d8e0; font-family: var(--font-mono); font-size: 10px; font-weight: 800; white-space: nowrap; }
.configurator-body .garage-options-overlay .configurator-tool-panel { gap: 10px; }
.configurator-body .garage-options-overlay .configurator-tool-panel > p { margin: 0; color: #ff737c; font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.configurator-body .garage-options-overlay .configurator-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.configurator-body .garage-options-overlay .configurator-tool-option { justify-content: flex-start; min-height: 56px; padding: 10px 12px; border: 1px solid rgba(226, 234, 242, .18); border-radius: 13px; background: rgba(54, 60, 68, .54); color: #f5f7fa; font-size: 11px; font-weight: 800; text-align: left; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.configurator-body .garage-options-overlay .configurator-tool-option svg { width: 19px; height: 19px; color: #ff858d; }
.configurator-body .garage-options-overlay .configurator-tool-option:hover { border-color: rgba(242, 247, 252, .36) !important; background: rgba(72, 79, 88, .72) !important; color: #f5f7fa; }
.configurator-body .garage-options-overlay .configurator-tool-option.is-active,
.configurator-body .garage-options-overlay .configurator-tool-option[aria-pressed="true"] { border-color: #ff626b !important; background: rgba(141, 43, 54, .54) !important; color: #f5f7fa; box-shadow: inset 0 0 0 1px rgba(255, 98, 107, .18); }
.configurator-body .garage-options-overlay .configurator-tool-option:focus-visible,
.garage-options-overlay .garage-part-choice:focus-visible { outline: 3px solid #ff5960; outline-offset: 2px; }
.configurator-body .garage-options-overlay .configurator-tool-panel--sound { grid-template-columns: minmax(0, 1fr) minmax(190px, .72fr); align-items: stretch; }
.configurator-body .garage-options-overlay .configurator-tool-panel--sound > p { grid-column: 1 / -1; }
.configurator-body .garage-options-overlay .configurator-sound-actions { gap: 8px; }
.configurator-body .garage-options-overlay .configurator-sound-actions button:disabled,
.configurator-body .garage-options-overlay .configurator-sound-actions button:disabled:hover { border-color: rgba(226, 234, 242, .18) !important; background: rgba(54, 60, 68, .54) !important; opacity: .55; }
.configurator-body .garage-options-overlay .configurator-tool-panel .configurator-rpm { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 56px; margin: 0; padding: 10px 14px; border: 1px solid rgba(226, 234, 242, .18); border-radius: 13px; background: rgba(54, 60, 68, .54); color: #f5f7fa; font-family: var(--font-mono); font-size: 11px; font-weight: 800; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.configurator-body .garage-options-overlay .configurator-tool-panel .configurator-rpm-track { width: 100%; height: 7px; background: rgba(10, 14, 20, .68); }
.configurator-body .garage-options-overlay .configurator-tool-panel .configurator-rpm-track > span { background: linear-gradient(90deg, #ed424a, #f59942); }
@keyframes paint-overlay-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 901px) and (max-width: 1250px) {
  .paint-finish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paint-colour-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wheels-overlay-content { grid-template-columns: minmax(0, 1fr); }
  .wheels-colour-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .exhaust-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lighting-underglow-colours { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .brakes-colour-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .suspension-colour-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .garage-part-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .paint-overlay-dialog { max-height: none; overflow: visible; }
  .garage-part-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .paint-overlay-content { grid-template-columns: minmax(0, 1fr); }
  .wheels-overlay-content { grid-template-columns: minmax(0, 1fr); }
  .wheels-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wheels-colour-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .exhaust-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lighting-overlay-content { grid-template-columns: minmax(0, 1fr); }
  .brakes-colour-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .suspension-colour-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .configurator-body .garage-options-overlay .configurator-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .configurator-body .garage-options-overlay .configurator-tool-panel--sound { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .paint-finish-overlay { padding: 0 8px 10px; }
  .paint-overlay-header { gap: 10px; min-height: 55px; padding-bottom: 10px; }
  .paint-overlay-icon { flex-basis: 42px; width: 42px; height: 42px; border-radius: 12px; }
  .paint-overlay-icon svg { width: 22px; height: 22px; }
  .paint-overlay-heading h2 { font-size: 19px; letter-spacing: .07em; }
  .paint-overlay-heading p { font-size: 8px; letter-spacing: .16em; }
  .paint-overlay-close { flex-basis: 42px; width: 42px; height: 42px; border-radius: 12px; }
  .paint-glass-panel { padding: 11px; }
  .garage-options-overlay-content { padding: 11px; }
  .paint-panel-heading h3 { font-size: 9px; letter-spacing: .15em; }
  .paint-panel-heading > span { font-size: 9px; }
  .paint-finish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paint-colour-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .paint-colour-choice { min-height: 54px; }
  .wheels-choice { min-height: 72px; }
  .wheels-colour-choice { flex-direction: column; align-items: center; justify-content: center; min-height: 67px; gap: 4px; padding: 5px; text-align: center; }
  .wheels-colour-choice > span:last-child { font-size: 9px; }
  .exhaust-choice-grid { grid-template-columns: minmax(0, 1fr); }
  .exhaust-choice { min-height: 65px; }
  .lighting-control { min-height: 51px; padding: 6px; }
  .lighting-control-icon { flex-basis: 30px; width: 30px; height: 30px; }
  .lighting-control > span:nth-child(2) { font-size: 10px; }
  .lighting-underglow-colours { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .brakes-colour-choice { min-height: 54px; }
  .suspension-colour-choice { min-height: 54px; }
  .garage-part-grid { grid-template-columns: minmax(0, 1fr); }
  .garage-part-choice { min-height: 62px; }
}
@media (prefers-reduced-motion: reduce) { .paint-overlay-dialog { animation: none; } }

.toast-item {
  transform: translateY(16px);
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-item.show {
  transform: translateY(0);
  opacity: 1;
}

/* Modern Keyframe Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Subtle Gradient Text Accent */
.text-gradient-cyan-purple {
  background: linear-gradient(135deg, #FF4D4D 0%, #FF9A76 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}