/* Option A: "Showroom". Taken from the business card: matte black, brushed
   silver, Montserrat. The slant of the monogram's strokes shapes the price tags. */

.theme-a {
  --bg: #151517;
  --surface: #1D1D20;
  --raised: #252529;
  --text: #ECEBEF;
  --soft: #A3A2AA;
  --rule: #2E2E33;
  --silver: linear-gradient(100deg, #F4F3F5 0%, #D5D4D9 45%, #A19FA7 100%);
  --focus: #9EC1FF;
  background: var(--bg);
  color: var(--text);
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}
.theme-a a { color: var(--text); }
.theme-a a:hover { color: #FFFFFF; }

/* Headings: the wordmark's weight and spacing, never expanded Archivo */
.theme-a .h1, .theme-a .h2, .theme-a .h3, .theme-a .hero-title, .theme-a .vehicle-title,
.theme-a .card-title, .theme-a .footer-h, .theme-a .hero-car-name, .theme-a .bigphone {
  font-family: "Montserrat", sans-serif; font-stretch: 100%; letter-spacing: -.005em;
}
.theme-a .h1 { font-weight: 700; }
.theme-a .h2 { font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.theme-a .h3 { font-weight: 650; }
.theme-a .lede { color: var(--soft); }

/* Bars */
.theme-a .notice { background: #2A2A2F; color: var(--text); font-weight: 500; }
.theme-a .masthead { background: #0F0F11; border-bottom: 1px solid var(--rule); }
.theme-a .masthead-row { min-height: 84px; }
.theme-a .logo-mark { width: 52px; height: 37px; }
.theme-a .mainnav a { font-weight: 500; letter-spacing: .02em; }
.theme-a .mainnav a[aria-current] { box-shadow: inset 0 -2px 0 #D5D4D9; }
.theme-a .callbtn { background: var(--silver); color: #151517; font-weight: 650; border-radius: 3px; }
.theme-a .callbtn:hover { background: #FFFFFF; color: #151517; }

/* Buttons: brushed silver primary, hairline secondary */
.theme-a .btn { border-radius: 3px; font-weight: 600; letter-spacing: .01em; }
.theme-a .btn-yellow, .theme-a .btn-blue { background: var(--silver); color: #151517; border: 0; }
.theme-a .btn-yellow:hover, .theme-a .btn-blue:hover { background: #FFFFFF; color: #151517; }
.theme-a .btn-ghost, .theme-a .btn-line { background: transparent; color: var(--text); border: 1px solid #6C6B72; }
.theme-a .btn-ghost:hover, .theme-a .btn-line:hover { border-color: var(--text); background: rgba(255,255,255,.04); color: #FFFFFF; }

/* Price tag: a parallelogram cut at the monogram's angle */
.theme-a .tag {
  font-family: "Montserrat", sans-serif; font-weight: 700; letter-spacing: -.01em;
  background: var(--silver); color: #151517; transform: none; box-shadow: none;
  padding: .32em .9em .3em; clip-path: polygon(.5em 0, 100% 0, calc(100% - .5em) 100%, 0 100%);
}
.theme-a .tag-call { font-weight: 650; }

/* Hero: copy beside the car under a showroom light, so the car, its name and
   price all show on first load. Stacked and centred on phones. */
.theme-a .hero {
  background: radial-gradient(120% 70% at 50% 0%, #2B2B30 0%, #151517 62%);
  color: var(--text); padding-top: clamp(28px, 3.5vw, 56px);
}
.theme-a .hero-grid { align-items: center; }
.theme-a .hero-copy { padding-bottom: 64px; }
.theme-a .hero-title {
  font-weight: 650; text-transform: uppercase; letter-spacing: .06em; line-height: 1.08;
  font-size: clamp(1.9rem, 3.4vw, 3rem); max-width: 16ch;
  background: var(--silver); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.theme-a .hero-text { color: var(--soft); max-width: 40ch; }
.theme-a .hero-where a { color: var(--soft); }
.theme-a .hero-car { margin-bottom: -64px; }
.theme-a .hero-car img { border-radius: 4px 4px 0 0; aspect-ratio: 16 / 9; }
.theme-a .hero-car-label { background: #1D1D20; border: 1px solid var(--rule); border-top: 0; color: var(--soft); border-radius: 0 0 4px 4px; }
.theme-a .hero-car-name { color: var(--text); font-weight: 650; }
.theme-a .hero-car .tag { left: auto; right: 22px; bottom: 76px; font-size: clamp(1.4rem, 3vw, 2.2rem); animation: none; }
@media (max-width: 860px) {
  .theme-a .hero-grid { justify-items: center; text-align: center; gap: 36px; }
  .theme-a .hero-copy { padding-bottom: 0; display: flex; flex-direction: column; align-items: center; }
  .theme-a .hero-text { margin-left: auto; margin-right: auto; }
  .theme-a .hero-actions { justify-content: center; }
  .theme-a .hero-car { width: 100%; }
}

/* Quick filters and cards */
.theme-a .chip { border: 1px solid #4A4A50; color: var(--text); font-weight: 500; border-radius: 3px; }
.theme-a .chip:hover { background: var(--text); color: #151517; border-color: var(--text); }
.theme-a .more { color: var(--soft); font-weight: 600; }
.theme-a .card-photo img, .theme-a .nophoto { border-radius: 3px; background: var(--surface); }
.theme-a .nophoto { color: var(--soft); }
.theme-a .card-photo .tag { left: auto; right: 0; bottom: -16px; font-size: 1.15rem; }
.theme-a .card-title { font-weight: 650; font-size: 1.12rem; }
.theme-a .card-trim, .theme-a .facts { color: var(--soft); }
.theme-a .facts li:not(:last-child)::after { background: #55545B; }
.theme-a .is-sold .tag { background: #3A3A3F; color: var(--soft); }
.theme-a .stamp { font-family: "Montserrat", sans-serif; font-stretch: 100%; font-weight: 700; transform: none; border-radius: 2px; letter-spacing: .14em; font-size: .8rem; }
.theme-a .stamp-pending { background: #ECEBEF; color: #151517; }
.theme-a .empty { background: var(--surface); }

/* Visit and map */
.theme-a .visit { background: #0F0F11; border-top: 1px solid var(--rule); }
.theme-a .map { border: 1px solid var(--rule); border-radius: 3px; background: var(--surface); }
.theme-a .map iframe { filter: grayscale(.2); }
.theme-a .hours li, .theme-a .visit-addr { color: var(--text); }

/* Inventory filters and forms */
.theme-a .filters { border-bottom-color: var(--rule); }
.theme-a input, .theme-a select, .theme-a textarea { background-color: var(--surface); color: var(--text); border: 1px solid #3E3E44; border-radius: 3px; }
.theme-a select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ECEBEF' stroke-width='2' fill='none'/%3E%3C/svg%3E"); }
.theme-a input:focus, .theme-a select:focus, .theme-a textarea:focus { border-color: #D5D4D9; outline: 2px solid rgba(213,212,217,.25); }
.theme-a .hint, .theme-a .field small { color: var(--soft); }
.theme-a .clear { color: var(--soft); }

/* Vehicle page */
.theme-a .crumbs, .theme-a .crumbs a { color: var(--soft); }
.theme-a .gallery-main { background: var(--surface); border-radius: 3px; }
.theme-a .gbtn { background: transparent; color: var(--text); border: 1px solid #4A4A50; border-radius: 3px; }
.theme-a .gbtn:hover { background: var(--raised); }
.theme-a .thumb.is-on img, .theme-a .thumb:hover img { outline-color: #D5D4D9; }
.theme-a .vehicle-title { font-weight: 700; }
.theme-a .vt-year { color: var(--soft); font-weight: 500; }
.theme-a .vt-trim, .theme-a .price-note, .theme-a .visit-small { color: var(--soft); }
.theme-a .vehicle-price .tag { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.theme-a .keyfacts { border-top: 1px solid #55545B; }
.theme-a .keyfacts li { border-bottom-color: var(--rule); font-weight: 600; }
.theme-a .keyfacts span { color: var(--soft); }
.theme-a .block { border-top: 1px solid #55545B; }
.theme-a .features li::before { border-color: #D5D4D9; }
.theme-a .specs div { border-bottom-color: var(--rule); }
.theme-a .specs dt { color: var(--soft); }
.theme-a .sold-note { background: var(--surface); }
.theme-a .stickybar { background: #0F0F11; border-top: 1px solid var(--rule); }
.theme-a .status-pending { background: #ECEBEF; color: #151517; }

/* About and contact */
.theme-a .about-facts { border-top: 1px solid #55545B; }
.theme-a .contact-card, .theme-a .offer { color: var(--text); background: var(--surface); border-top: 2px solid #D5D4D9; border-radius: 3px; }
.theme-a .bigphone { color: var(--text); font-weight: 650; }
.theme-a .credits li { border-bottom-color: var(--rule); }

/* Footer */
.theme-a .footer { background: #0F0F11; border-top: 1px solid var(--rule); color: var(--soft); }
.theme-a .footer a { color: var(--text); }
.theme-a .footer-fine { border-top-color: var(--rule); color: #8A8990; }
.theme-a .quick { padding-top: 112px; }
.theme-a .hero-car-label { text-align: left; }