/* Category → make → model → year search.
 *
 * Two layouts of one component: a stacked card for the home page hero, and a
 * single row for the Available cars bar. Kept in its own file so the shipped
 * style.css stays untouched; all colours and fonts are the design's own tokens.
 */

.csform{ display:flex; }
.csfield{ position:relative; }

.csfield label{
  display:block; margin-bottom:7px;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-dim);
}
.csfield.is-off label{ color:#5a606b; }

.csfield select{
  width:100%; font:inherit;
  background:var(--bg-4);
  border:1px solid var(--line-2);
  color:#fff;
  transition:border-color .15s, background .15s;
}
.csfield select:hover:enabled{ border-color:var(--chrome-3); }
.csfield select:focus{ outline:2px solid var(--red-hi); outline-offset:-2px; }
.csfield select:disabled{
  background:#15171c; border-color:var(--line); color:#5a606b; cursor:not-allowed;
}

.csgo{ cursor:pointer; }

/* ---------- card: the hero ---------- */

.csform--card{ flex-direction:column; gap:18px; }
.csform--card .csfield{ padding-left:38px; }

/* 01 / 02 / 03 / 04 down the left edge — the site already numbers its files. */
.csform--card .csfield::before{
  content:attr(data-step);
  position:absolute; left:0; top:26px;
  font-family:var(--f-mono); font-size:.74rem; font-weight:500;
  color:var(--red-hi); letter-spacing:.04em;
}
.csform--card .csfield::after{
  content:""; position:absolute; left:9px; top:44px; bottom:-18px; width:1px;
  background:var(--line);
}
.csform--card .csfield:last-of-type::after{ display:none; }
.csform--card .csfield.is-off::before{ color:var(--line-2); }

.csform--card select{ font-size:1rem; padding:14px 16px; }
.csform--card .csgo{ width:100%; text-align:center; margin-top:6px; padding-block:16px; font-size:1.12rem; }

/* ---------- bar: Available cars ---------- */

.csform--bar{ flex-wrap:wrap; align-items:flex-end; gap:12px; }
.csform--bar .csfield{ flex:1 1 190px; min-width:0; }
.csform--bar select{ font-size:.92rem; padding:11px 14px; }
.csform--bar .csgo{ padding:11px 26px; font-size:1rem; }

/* ---------- hero card shell ---------- */

.herosearch{
  width:100%;
  background:linear-gradient(180deg, rgba(26,28,33,.97) 0%, rgba(11,11,13,.97) 100%);
  border:1px solid var(--line-2);
  box-shadow:0 40px 80px -40px #000, 0 0 0 1px rgba(0,0,0,.6);
  backdrop-filter:blur(3px);
  position:relative;
  overflow:hidden;
}
.herosearch::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--red) 0%, var(--red-hi) 45%, var(--red-deep) 100%);
}
.herosearch .panel__head{ padding:24px 32px 20px; border-bottom:1px solid var(--line); }
.herosearch .panel__head h3{ font-size:1.24rem; letter-spacing:.03em; }
.herosearch .panel__body{ padding:30px 32px 32px; }
.herosearch .hint{
  margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line);
  font-size:.82rem; line-height:1.55; color:var(--text-dim);
}

.hscount{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-dim);
}
.hscount b{ color:#fff; font-weight:500; }

.hero .wrap{display:grid;grid-template-columns: minmax(0,1fr) 515px;gap:52px;/* align-items:center; */padding: 40px 0;}

/* ---------- the results summary above the grid ---------- */

.csresult{
  /* the stylesheet caps every <p> at 70ch; this line spans the grid */
  max-width:none;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding-bottom:26px;padding-top:26px; border-bottom:1px solid var(--line); margin-bottom:32px;
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-dim);
}
.csresult b{ color:#fff; font-weight:500; }
.csresult .push{ margin-left:auto; }
.csresult a{ color:var(--red-hi); text-decoration:none; border-bottom:1px solid transparent; }
.csresult a:hover{ border-bottom-color:var(--red-hi); }

/* A 510px card needs more room beside the headline than a 430px one did. */
@media (max-width:1160px){
  .hero .wrap{ grid-template-columns:1fr; gap:40px; }
  .herosearch{ max-width:620px; }
}
@media (max-width:700px){
  .csform--bar .csfield{ flex:1 1 100%; }
  .csform--bar .csgo{ width:100%; text-align:center; }
}
@media (max-width:560px){
  .herosearch .panel__head{ padding:18px 20px 14px; }
  .herosearch .panel__body{ padding:20px; }
}