/* cl-finder.css: where the kit's vehicle picker sits and how small it gets on a phone (PICKER-BRIEF, Greg 2026-10-30),
   with partials/finder_row.html, finder_bar.html, finder_car.html and cl-finder.js. The picker's own look is the
   kit's band.css; these rules only place it and, in the landing row, fit its four controls on one line.
   - A landing page under 980px: the kit's band at the top (.msd-wide) and the home's hero finder hide, and the row
     under the H1 shows: Year, Make, Model and Go on one 44px line, or the picked vehicle and Change.
   - A listing under 980px: the 48px bar, the kit's band under it only while it is open (.is-open; open without a
     script). At 980px and wider the bar is gone and the band is the kit's.
   - A product page: the picked vehicle's line, at every width. */
@layer base, kit, site;

@layer site {

.msd-row, .msd-drop__bar { display: none; }

/* a product page's vehicle line: under the header, before the H1 */
.msd-car { margin: 0; background: var(--site-band); color: var(--site-fg); border-bottom: 1px solid var(--site-line); }
.msd-car__in { display: flex; align-items: center; gap: 6px; max-width: var(--parts-max); min-height: 44px; margin: 0 auto; padding: 2px var(--parts-gut); font: 400 15px/1.3 var(--site-font-body); }
.msd-car strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.msd-car a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; color: inherit; text-decoration: underline; }

@media (max-width: 979.98px) {
  /* a landing page: the row instead of the band */
  .msd-wide, .msd-hero__finder { display: none; }
  .msd-row { display: block; margin: 12px 0 0; }
  .msd-hero .msd-row { margin-top: 12px; }
  .msd-row .kit-band { z-index: 20; background: transparent; color: inherit; border: 0; }
  .msd-row .msd-row__form { height: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .msd-row .kit-ymm-field { flex: 1 1 0; min-width: 0; }
  .msd-row .kit-ymm-field--year { flex: 0 0 84px; }
  .msd-row .msd-row__form:not(.has-make) .kit-ymm-field--model { display: block; }
  .msd-row .kit-ymm-field--submodel { display: none; }
  .msd-row .msd-row__form { flex-wrap: nowrap; }
  .msd-row select, .msd-row .kit-ymm-field__button { height: 44px; padding: 0 22px 0 8px; font-size: 16px; line-height: 42px; }
  .msd-row .kit-ymm-field__button::after { right: 9px; }
  .msd-row .kit-ymm-field__panel { min-width: 200px; }
  .msd-row .kit-ymm-field--model .kit-ymm-field__panel { left: auto; right: 0; }
  .msd-row .kit-band__go { flex: 0 0 52px; min-width: 0; height: 44px; padding: 0; }
  .msd-row__car { display: flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; font: 400 16px/1.3 var(--site-font-body); }
  .msd-row__car strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
  .msd-row__change { flex: none; min-height: 40px; margin: 0; padding: 0 4px; background: none; color: inherit; border: 0; font: inherit; text-decoration: underline; cursor: pointer; }
  .msd-row__band.is-set .msd-row__form:not([hidden]) { margin-top: 6px; }

  /* a listing: the bar, and the band under it while open */
  .msd-drop__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 48px; margin: 0; padding: 0 16px;
    background: var(--parts-band-bg); color: var(--parts-band-ink); border: 0; border-bottom: 1px solid var(--parts-band-edge); border-radius: 0;
    font: 600 16px/1.2 var(--parts-font); text-align: left; cursor: pointer;
  }
  .msd-drop__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .msd-drop__chev { flex: none; width: 9px; height: 9px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .msd-drop.is-open .msd-drop__chev { margin-top: 4px; transform: rotate(225deg); }
  .cl-js .msd-drop:not(.is-open) .msd-drop__panel { display: none; }
  .msd-drop .kit-band__car, .msd-drop .kit-band__now { display: none; }
}

}