/* site/picker.css: edelbrock.ca's vehicle picker around the kit's band (partials/picker.html, PICKER-BRIEF.md
   2026-10-30). Unlayered, so it wins over the kit's band.css (@layer kit) without !important.
   Under 980px: a landing page's one row under the H1 (.cl-row), the kit's band hidden at the top (.cl-desk), every
   other page's band folded under a 48px bar (.cl-vbar) that opens it, a product page's one vehicle line (.cl-carline).
   980px and wider: the band at the top as the kit draws it, the row and the bar gone. */

/* ---- the landing row ---- */
.cl-row { display: none; }
.cl-row.kit-band { position: relative; z-index: 30; background: transparent; color: inherit; border: 0; font-family: var(--site-font-body); }
.cl-row *, .cl-row *::before, .cl-row *::after { box-sizing: border-box; }
.cl-row__form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; height: auto; margin: 0; padding: 0; }
.cl-row__form[hidden] { display: none; }
.cl-row .kit-ymm-field { position: relative; flex: 1 1 0; min-width: 0; }
.cl-row .kit-ymm-field--year { flex: 0 0 84px; }
/* the trim is asked after Go, where the kit asks it today, so the row stays one line */
.cl-row .kit-ymm-field--submodel { display: none; }
.cl-row .kit-ymm-field[hidden] { display: none; }
.cl-row .kit-band__form:not(.has-make) .kit-ymm-field--model { display: block; }
.cl-row .kit-band__form .kit-band__go { flex: 0 0 56px; }
.cl-row select, .cl-row .kit-ymm-field__button, .cl-row__select {
  display: block; width: 100%; height: 44px; margin: 0; padding: 0 22px 0 8px;
  background: var(--site-field-bg); color: var(--site-fg); border: 1px solid var(--site-fg); border-radius: var(--site-radius);
  font: 400 16px/42px var(--site-font-body); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-row .kit-band__form.is-live select { display: none; }
/* a level not open yet (Make before a Year) reads at full contrast, told apart by a dashed rule, as the kit's band does */
.cl-row :is(select, .kit-ymm-field__button):disabled { opacity: 1; background: var(--site-field-bg); color: var(--site-fg); -webkit-text-fill-color: var(--site-fg); border-style: dashed; }
.cl-row .kit-band__form:not(.is-live) .kit-ymm-field__button, .cl-row .kit-band__form:not(.is-live) .kit-ymm-field__panel { display: none; }
.cl-row .kit-ymm-field__button::after { right: 9px; border-color: var(--site-fg); }
.cl-row .kit-ymm-field__button--empty { color: var(--site-fg); }
.cl-row .kit-ymm-field__panel { min-width: 200px; }
.cl-row .kit-ymm-field--model .kit-ymm-field__panel { left: auto; right: 0; }
.cl-row__select { flex: 1 1 0; min-width: 0; -webkit-appearance: menulist; appearance: auto; padding-right: 4px; }
.cl-row__select--year { flex: 0 0 96px; }
.cl-row__fixed { flex: 1 1 auto; min-width: 0; font: 700 16px/44px var(--site-font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-row__go {
  flex: 0 0 56px; height: 44px; min-width: 56px; margin: 0; padding: 0;
  background: var(--site-accent); color: var(--site-accent-fg); border: 0; border-radius: var(--site-radius);
  font: 700 16px/1 var(--site-font-body); cursor: pointer;
}
.cl-row__go:hover { background: var(--site-button-hover-bg); color: var(--site-button-hover-fg); }
.cl-row__now { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: 44px; margin: 0; font: 400 16px/1.3 var(--site-font-body); }
.cl-row__now strong { font-weight: 700; }
.cl-row__change, .cl-carline a {
  display: inline-flex; align-items: center; min-height: 40px; margin: 0; padding: 0 4px;
  background: none; color: inherit; border: 0; font: 700 16px/1 var(--site-font-body); text-decoration: underline; cursor: pointer;
}
.cl-row__now + .cl-row__form:not([hidden]) { margin-top: 6px; }
@media (scripting: none) { .cl-row__form[hidden] { display: flex; } .cl-row__change { display: none; } }

/* ---- the bar over the band (listings, search, brand and copied pages) ---- */
.cl-vbar__bar {
  display: none; width: 100%; height: 48px; margin: 0; padding: 0 16px; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--parts-band-bg, #24201c); color: var(--parts-band-ink, #fff); border: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 0; font: 700 16px/1.2 var(--site-font-body); text-align: left; cursor: pointer;
}
.cl-vbar__label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-vbar__chev { flex: none; width: 9px; height: 9px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }
.cl-vbar.is-open .cl-vbar__chev { margin-top: 4px; transform: rotate(225deg); }

/* ---- a product page's vehicle line ---- */
.cl-carline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: 48px; margin: 0;
  padding: 4px max(16px, calc((100% - var(--site-max)) / 2 + 24px));
  background: var(--site-band); color: var(--site-fg); font: 400 16px/1.3 var(--site-font-body);
}
.cl-carline strong { font-weight: 700; }

@media (max-width: 979.98px) {
  .cl-row { display: block; margin: 12px 0 0; }
  .cl-desk { display: none; }
  .pp-home .pp-finder { display: none; }
  .cl-vbar__bar { display: flex; }
  .cl-js .cl-vbar:not(.is-open) .cl-vbar__band { display: none; }
  .cl-vbar .kit-band__car, .cl-vbar .kit-band__now { display: none; }
  .cl-carline { padding: 4px 16px; }
}