/* pp-picker.css: where the vehicle picker sits and how it reads (PICKER-BRIEF, Greg 2026-10-30), base.html links it on
   every page. Over 980px the kit's band is at the top as the kit draws it, on a landing page (.pp-band--desk) as on
   the kit's own pages, and the home keeps its hero card. Under 980px:
   - a landing page: the band and the hero card hidden, the row under the H1 (partials/picker_row.html, .pp-ymm) one
     line of 44px controls, Year, Make, Model and Go, or the words of what the page names and what it still asks;
   - the kit's pages: a 48px bar (partials/picker_drop.html) that opens the band under it;
   - a product page: one line, the vehicle and Change (partials/picker_line.html), at every width.
   The row is the kit's band markup (.kit-band, .kit-ymm-field, .kit-band__go) so its scripts work, and these rules
   restyle it in the site layer (doctor check 13 lists the kit classes named here). */
@layer base, kit, site;

@layer site {
.pp-ymm, .pp-drop__bar { display: none; }

/* the product page's line */
.pp-pline { max-width: var(--site-max); margin: 0 auto; padding: 8px 24px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font: 400 16px/1.3 var(--site-font-body); color: var(--site-fg); }
.pp-pline__name { font-weight: 600; }
.pp-pline__change { display: inline-flex; align-items: center; min-height: 40px; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 979.98px) {
  .pp-band--desk, .pp-hero__finder { display: none; }
  .pp-pline { padding: 4px 16px 0; }

  /* the landing row: 44px controls on one line, 8px over it and 8px under it */
  .pp-ymm { display: block; position: relative; z-index: 20; margin: 8px 0; padding: 0; background: none; color: var(--site-fg); border: 0; font-family: var(--site-font-body); }
  .pp-ymm .pp-ymm__form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; height: auto; margin: 0; }
  .pp-ymm .pp-ymm__form[hidden] { display: none; }
  .pp-ymm .kit-ymm-field { flex: 1 1 0; min-width: 0; }
  .pp-ymm .kit-ymm-field--model { display: block; }
  .pp-ymm .kit-ymm-field[hidden] { display: none; }
  /* the Submodel stays out of the row: Go posts the pick, and the trim is asked after it where the kit asks it */
  .pp-ymm .kit-ymm-field--submodel { display: none; }
  .pp-ymm select, .pp-ymm .kit-ymm-field__button { height: 44px; padding: 0 24px 0 10px; border-color: var(--site-fg); font-size: 16px; line-height: 42px; }
  .pp-ymm .kit-ymm-field__button::after { right: 10px; border-color: var(--site-fg); }
  .pp-ymm .kit-ymm-field__button--empty { color: var(--site-fg); }
  .pp-ymm .kit-band__go { flex: none; min-width: 56px; height: 44px; padding: 0 14px; background: var(--site-accent); color: var(--site-accent-fg); font-size: 16px; }
  .pp-ymm .kit-band__go:hover { background: var(--site-accent-strong); }
  /* a list wide enough for a model's name, the last field's against the right edge so nothing leaves the screen */
  .pp-ymm .kit-ymm-field--make .kit-ymm-field__panel, .pp-ymm .kit-ymm-field--model .kit-ymm-field__panel { min-width: 220px; }
  .pp-ymm .kit-band__form .kit-ymm-field--model .kit-ymm-field__panel, .pp-ymm .pp-ymm__form--preset .kit-ymm-field--year .kit-ymm-field__panel { left: auto; right: 0; }
  .pp-ymm__form--preset:not(.is-live) .kit-ymm-field__button, .pp-ymm__form--preset:not(.is-live) .kit-ymm-field__panel { display: none; }
  .pp-ymm__form--preset.is-live select { display: none; }
  .pp-ymm .pp-ymm__form--preset .kit-ymm-field--year { flex: 0 1 112px; }
  .pp-ymm__words { flex: 1 1 auto; min-width: 0; font: 600 17px/1.2 var(--site-font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-ymm .pp-ymm__form--preset:has(.kit-ymm-field--model) .pp-ymm__words { flex: none; }
  /* a vehicle set: its name and Change on one line, the form under it once Change opens it */
  .pp-ymm__now { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font: 400 17px/1.25 var(--site-font-body); }
  .pp-ymm__now strong { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pp-ymm__change { flex: none; min-height: 40px; margin: 0; padding: 0 4px; background: none; color: inherit; border: 0; font: 600 17px/1 var(--site-font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .pp-ymm__now + .pp-ymm__form { margin-top: 4px; }

  /* the kit's pages: the bar, the band under it once opened */
  .pp-drop__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 48px; margin: 0; padding: 0 16px;
    background: var(--site-dark); color: var(--site-dark-fg); border: 0; border-radius: 0; font: 600 16px/1 var(--site-font-body); text-align: left; cursor: pointer;
  }
  .pp-drop__words { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pp-drop__chev { flex: none; width: 9px; height: 9px; margin-top: -5px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .pp-drop.is-open .pp-drop__chev { margin-top: 4px; transform: rotate(225deg); }
  .cl-js .pp-drop:not(.is-open) .pp-drop__panel { display: none; }
  /* the bar names the vehicle, so the open band does not name it again */
  .pp-drop .kit-band__car, .pp-drop .kit-band__now { display: none; }
  html:not(.cl-js) .pp-drop__bar { display: none; }
}
}