/* cl-picker.css: the vehicle picker's three shapes (templates/partials/picker.html, Greg 2026-10-30) over the kit's band
   (parts/band.css, @layer kit). The band's own rules sit in @layer site, so they beat the kit's; the theme's bare
   button and select rules are rolled back inside .cl-band by cl-site.css, so they never reach these. The page layout,
   what shows and hides, and the product line are unlayered, since the theme's unlayered element rules (normalize's
   main, section and p) would beat any layer. */
@layer base, kit, site;

@layer site {

/* the preset make's word shows only in the phone row */
.cl-preset__make { display: none; }

/* under 980px the band is one row, Year, Make, Model and Go, on the page's own ground: no tabs, no Describe it, no VIN,
   no heading; the submodel, when the kit asks one, is asked after Go */
@media (max-width: 979.98px) {
  .cl-land__band { margin: 8px 0 0; }
  .cl-land__band .kit-band { background: transparent; color: var(--site-fg); border-bottom: 0; }
  .cl-land__band .kit-band__in { padding: 0 16px; gap: 8px; flex-wrap: nowrap; }
  .cl-land__band .kit-band__tabs,
  .cl-land__band #kit-band-words,
  .cl-land__band #kit-band-vin,
  .cl-land__band .kit-ymm-field--submodel { display: none; }
  .cl-land__band .kit-band__row { flex: 1 1 100%; flex-wrap: nowrap; gap: 0; }
  .cl-land__band .kit-band__panels { flex: 1 1 100%; min-width: 0; }
  .cl-land__band .kit-band__form { height: 44px; flex-wrap: nowrap; gap: 6px; }
  .cl-land__band .kit-band .kit-ymm-field,
  .cl-land__band .kit-band .kit-ymm-field--year,
  .cl-land__band .kit-band .kit-ymm-field--make { flex: 1 1 0; min-width: 0; }
  .cl-land__band .kit-band .kit-band__form:not(.has-make) .kit-ymm-field--model { display: block; }
  .cl-land__band .kit-band select,
  .cl-land__band .kit-band .kit-ymm-field__button { height: 44px; padding: 0 24px 0 8px; font-size: 16px; }
  .cl-land__band .kit-band .kit-ymm-field__button::after { right: 9px; }
  .cl-land__band .kit-band .kit-ymm-field__panel { right: auto; min-width: max(100%, 200px); }
  .cl-land__band .kit-band .kit-ymm-field--model .kit-ymm-field__panel { left: auto; right: 0; }
  .cl-land__band .kit-band__form .kit-band__go { flex: none; height: 44px; min-width: 0; padding: 0 14px; }
  /* the make the page's name says: a word in its field's place (the field shows again for a year that lacks it) */
  .cl-land__band .kit-band__form.cl-preset:not(.cl-preset--miss) .kit-ymm-field--make { display: none; }
  .cl-land__band .kit-band__form.cl-preset:not(.cl-preset--miss) .cl-preset__make {
    display: block; flex: none; color: var(--site-fg); font: 700 16px/44px var(--parts-font); white-space: nowrap;
  }
  /* a vehicle picked: one line, its name and Change, which opens the row under it */
  .cl-land__band .kit-band--set .kit-band__current { flex: 1 1 100%; flex-wrap: nowrap; gap: 0 8px; min-height: 44px; }
  .cl-land__band .kit-band__car,
  .cl-land__band .kit-band__now-label,
  .cl-land__band .kit-band__btn--light,
  .cl-land__band .kit-band__clear { display: none; }
  .cl-land__band .kit-band__now { flex: 0 1 auto; min-width: 0; }
  .cl-land__band .kit-band__now strong { overflow: hidden; font: 700 17px/1.2 var(--parts-font); letter-spacing: 0; white-space: nowrap; text-overflow: ellipsis; }
  .cl-land__band .kit-band__actions { width: auto; display: flex; flex: none; align-items: center; gap: 8px; }
  .cl-land__band .kit-band__actions::before { content: "\00B7"; font: 700 17px/1 var(--parts-font); }
  .cl-land__band .kit-band__btn.kit-band__change {
    height: 44px; min-width: 0; padding: 0 4px; border: 0; background: none; color: inherit;
    font: 600 16px/1 var(--parts-font); text-decoration: underline; text-underline-offset: 3px;
  }
  .cl-land__band .kit-band--set .kit-band__row:not([hidden]) { margin-top: 8px; padding-top: 8px; }
}

/* a shop page (the listings, the search, a brand page): under 980px one 48px bar opens the band under it */
.cl-pickbar { display: none; }
@media (max-width: 979.98px) {
  .cl-shopband .cl-pickbar {
    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 var(--parts-font); text-align: left; cursor: pointer;
  }
  .cl-shopband .cl-pickbar__label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .cl-shopband .cl-pickbar__chev { flex: none; transition: transform .15s; }
  .cl-shopband.is-open .cl-pickbar__chev { transform: rotate(180deg); }
  .cl-shopband .cl-pickbar:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
  /* the open band under a set vehicle: the bar names it, so the car disc and "Shopping for" go */
  .cl-shopband .kit-band__car, .cl-shopband .kit-band__now { display: none; }
}
}

/* ---- unlayered ---- */

/* a landing page: the H1, then the band, then the parts; at 980px and wider the band goes back above the H1, under the
   header, as the kit draws it */
.cl-land { display: flex; flex-direction: column; }
.cl-land > .pp-wrap.cl-land__head { padding-bottom: 0; }
.cl-land > .pp-wrap.cl-land__body { padding-top: 0; }
.cl-land > .pp-wrap.cl-land__body > :first-child { margin-top: 20px; }
@media (min-width: 980px) {
  .cl-land > .cl-land__band { order: -1; }
  .cl-land > .pp-wrap.cl-land__head { padding-top: 32px; }
  .cl-land > .pp-wrap.cl-land__body { padding-top: 0; }
  .cl-land > .pp-wrap.cl-land__body > .pp-lead:first-child { margin-top: 12px; }
  .cl-land > .pp-wrap.cl-land__body > .pp-section:first-child { margin-top: 48px; }
}

/* a shop page's band under 980px: closed under its bar until the bar opens it; no script, no bar, the band as drawn */
@media (max-width: 979.98px) {
  .cl-shopband:not(.is-open) > .kit-band { display: none; }
}
@media (scripting: none) {
  .cl-shopband .cl-pickbar { display: none; }
  .cl-shopband:not(.is-open) > .kit-band { display: block; }
}

/* a product page: the picked vehicle in one line before the H1, and Change */
.cl-pickline {
  max-width: var(--parts-max, 1320px); margin: 0 auto; padding: 10px var(--parts-gut, 24px) 0;
  color: var(--site-fg); font: 600 16px/1.3 var(--parts-font);
}
.cl-pickline__car { font-weight: 700; }
.cl-pickline__change { display: inline-flex; align-items: center; min-height: 40px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 979.98px) {
  .cl-pickline { padding: 4px 16px 0; }
}