/* The vehicle picker's short forms (partials/picker.html, PICKER-BRIEF 2026-10-30): a landing page's one row under
   980px, the listings' 48px bar that opens the kit's band, a product page's one line. The kit's band.css styles the
   cascade's fields (its rules sit in @layer kit, so these unlayered rules win); colours are the kit's --parts-* tokens. */

/* a landing page: the row under the H1 on a phone and a tablet, the kit's band at the top from 980px */
.ora-row { position: relative; z-index: 30; margin: 10px 0 8px; font-family: var(--parts-font); }
.ora-row.kit-band { background: none; color: inherit; border: 0; }
.ora-row *, .ora-row *::before, .ora-row *::after { box-sizing: border-box; }
.ora-row__form { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; height: auto; margin: 0; }
.ora-row__form[hidden] { display: none; }
.ora-row .kit-ymm-field { flex: 1 1 0; min-width: 0; }
.ora-row .kit-ymm-field--submodel { display: none !important; }
.ora-row .kit-band__form:not(.has-make) .kit-ymm-field--model { display: block; }
.ora-row.kit-band select, .ora-row.kit-band .kit-ymm-field__button { height: 44px; padding: 0 24px 0 10px; font-size: 16px; }
.ora-row.kit-band .kit-ymm-field__button::after { right: 10px; }
.ora-row .kit-ymm-field__panel { min-width: 200px; }
.ora-row .kit-ymm-field--model .kit-ymm-field__panel { left: auto; right: 0; }
.ora-row .kit-band__go, .ora-row__go {
  flex: 0 0 60px; min-width: 0; height: 44px; margin: 0; padding: 0;
  background: var(--parts-band-go, #840104); color: var(--parts-band-go-ink, #fff);
  border: 0; border-radius: var(--parts-radius, 0); font: 600 16px/1 var(--parts-font); cursor: pointer;
}
/* a vehicle page's row: the make (and the model, when the page names one) as words, then its selects */
.ora-row__fixed { flex: none; max-width: 40%; color: var(--parts-ink, #fff); font: 600 16px/44px var(--parts-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ora-row__select {
  flex: 1 1 0; min-width: 0; height: 44px; margin: 0; padding: 0 10px;
  background: var(--parts-bg, #fff); color: var(--parts-ink, #000); border: 1px solid var(--parts-border, #888);
  border-radius: var(--parts-radius, 0); font: 400 16px/42px var(--parts-font);
  -webkit-appearance: none; appearance: none; padding-right: 26px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
/* a picked vehicle: its name and Change on one line */
.ora-pick-now, .ora-now { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font: 400 16px/1.3 var(--parts-font); }
.ora-pick-now__car, .ora-now__car { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ora-pick-now__change, .ora-now__change {
  flex: none; display: inline-flex; align-items: center; min-height: 40px; margin: 0; padding: 0 4px;
  background: none; color: inherit; border: 0; font: 600 16px/1 var(--parts-font); text-decoration: underline; cursor: pointer;
}
.ora-row .ora-pick-now:has(+ .ora-row__form:not([hidden])) { margin-bottom: 6px; }
@media (min-width: 980px) { .ora-row { display: none; } }
@media (max-width: 979.98px) {
  .ora-top { display: none; }
  /* the vehicle pages' own year pickers in each panel: the row above asks it on a phone */
  .ora-vehicle .pp-pick { display: none; }
  /* the home: the row in the hero in place of the kit's band */
  .ora-hero__finder { display: none; }
}

/* the kit's listings, search, brand and category pages: the bar on a phone and a tablet, the kit's band as drawn from 980px */
.ora-bar__btn { display: none; }
@media (max-width: 979.98px) {
  .ora-bar__btn {
    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, #111); color: var(--parts-band-ink, #fff); border: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    border-radius: 0; font: 600 16px/1 var(--parts-font); text-align: left; cursor: pointer;
  }
  .ora-bar__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ora-bar__chev { flex: none; width: 9px; height: 9px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .ora-bar__btn[aria-expanded="true"] .ora-bar__chev { margin-top: 4px; transform: rotate(225deg); }
}
@media (max-width: 979.98px) and (scripting: enabled) { .ora-bar:not(.is-open) .ora-bar__panel { display: none; } }
/* inside the open bar the band's car disc and "Shopping for" name go, since the bar names the vehicle */
@media (max-width: 979.98px) { .ora-bar .kit-band__car, .ora-bar .kit-band__now { display: none; } }

/* a product page: the picked vehicle's line under the header, in the page's container */
.ora-now { max-width: var(--parts-max, 1280px); margin: 0 auto; padding: 4px var(--parts-gut, 16px); color: var(--parts-ink, inherit); }