/* Vehicle configuration panel — scoped to the showroom model details. */
.model-details {
  min-width: 0;
  padding: 32px;
  border: 1px solid #e0e7f0;
  border-radius: 24px;
  background: #fff;
  color: #12223c;
  box-shadow: 0 16px 48px #12223c0a;
  gap: 24px;
}
.model-details .eyebrow {
  width: fit-content;
  margin: 0 0 18px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #edf4ff;
  color: #1763ce;
  font-size: 10px;
  letter-spacing: .14em;
}
.model-details .eyebrow::before { width: 5px; height: 5px; border-radius: 50%; }
.model-details h3 {
  margin: 0;
  color: #12223c;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.12;
  letter-spacing: -.045em;
}
.model-details .model-price {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
  padding: 22px 24px;
  border: 0;
  border-radius: 14px;
  background: #102641;
  color: #fff;
  font-size: clamp(26px, 2.5vw, 34px);
  font-weight: 750;
  letter-spacing: -.035em;
  box-shadow: inset 4px 0 #398bff;
}
.model-details .model-price::before {
  content: 'YOUR NEXT DRIVE';
  color: #9bb5d5;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .2em;
}
.model-details .model-note { margin-top: 14px; color: #62748a; font-size: 13px; line-height: 1.65; }
.model-details .feature-list { margin: 22px 0 0; gap: 12px; }
.model-details .feature-list li {
  gap: 11px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #42536b;
  font-size: 12px;
  line-height: 1.65;
  align-items: flex-start;
}
.model-details .feature-list li::before {
  content: '✓';
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border-radius: 50%;
  background: #eaf5f0;
  color: #278064;
  font-size: 11px;
  font-weight: 800;
}
.model-details .variant-block { margin-top: 25px; padding: 22px 0 0; border: 0; border-top: 1px solid #e6ecf3; border-radius: 0; background: transparent; }
.model-details .variant-head { gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.model-details .variant-title { font-size: 10px; font-weight: 750; color: #53677f; letter-spacing: .12em; }
.model-details .variant-compare-btn { padding: 8px 0; border: 0; border-radius: 4px; background: transparent; color: #1763ce; font-size: 11px; }
.model-details .variant-compare-btn::after { content: ' ↗'; margin-left: 4px; }
.model-details .variant-compare-btn:hover { color: #102641; background: transparent; }
.model-details .variant-grid { gap: 10px; }
.model-details .variant-card {
  position: relative;
  min-height: 110px;
  padding: 18px 14px;
  border: 1px solid #dfe6ef;
  border-radius: 12px;
  background: #f8fafc;
  color: #12223c;
  font-family: inherit;
  box-shadow: none;
}
.model-details .variant-card span { padding-right: 15px; color: #65778e; font-size: 11px; line-height: 1.5; }
.model-details .variant-card strong { margin-top: 12px; color: #12223c; font-size: 21px; font-weight: 750; letter-spacing: -.035em; }
.model-details .variant-card::after { content: ''; position: absolute; top: 15px; right: 12px; width: 12px; height: 12px; border: 1px solid #cad5e3; border-radius: 50%; }
.model-details .variant-card:hover { border-color: #8ab6f5; background: #f2f7ff; }
.model-details .variant-card[aria-pressed='true'] { border-color: #2474e5; background: #edf4ff; box-shadow: inset 0 0 0 1px #2474e5; transform: none; }
.model-details .variant-card[aria-pressed='true']::after { border-color: #2474e5; background: #2474e5; box-shadow: inset 0 0 0 3px #edf4ff; }
.model-details .variant-card[aria-pressed='true'] strong { color: #1763ce; }
.model-details .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.model-details .hero-actions .btn { min-width: 0; padding: 14px 10px; border-radius: 10px; font-size: 11px; text-align: center; }
.model-details .hero-actions .btn-quiet { background: #fff; color: #243c5d; border: 1px solid #d7e1ed; }
.model-details button:focus-visible,.model-details a:focus-visible { outline: 3px solid #77adfa; outline-offset: 4px; }
@media (max-width: 600px) {
  .model-details { padding: 24px 20px; border-radius: 18px; }
  .model-details .model-price { padding: 20px; }
  .model-details .variant-card { padding: 16px 12px; }
  .model-details .variant-card strong { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .model-details button,.model-details a { transition: none; transform: none; }
}