/* The vehicle picker on a phone (Greg 2026-10-30, PICKER-BRIEF): partials/ymm.html is the one picker, AutoMeter's
   BY VEHICLE bar; under 980px it is drawn three ways:
   - a landing page (.am-pick, the pods and kits pages): one row under the head, Year, Make, Model and Go, 40px tall,
     no heading, Clear or Submodel; with a vehicle picked one line, its name and Change, that opens the row;
   - a shop page (.amc-pick, base.html over a listing, the search, a brand page): one 48px bar, "Pick your vehicle" or
     the vehicle, with a chevron, that opens the full picker under it (site/pick.js);
   - a product page (.amc-vline): no picker, the picked vehicle in one line over the H1 with Change.
   At 980px and wider the landing page keeps the full bar (proto-pages-am.css) and the shop page shows it at the top. */

.ymm__go-row { display: none; }
.am-picked { display: none; }

/* the shop pages' picker: at the top of the page, the bar only under 980px */
.amc-pick { box-sizing: border-box; width: 100%; max-width: var(--parts-max, 1240px); margin: 20px auto 0; padding: 0 var(--parts-gut, 24px); }
.amc-pick .ymm.installation-filter { margin: 0; padding: 15px 20px 0; background: var(--site-panel); }
.amc-pick .ymm h3 { color: var(--site-fg); }
.amc-pickbar { display: none; }

/* the product page's vehicle line */
.amc-vline { box-sizing: border-box; max-width: var(--site-max, 1320px); margin: 16px auto 0; padding: 0 15px; font: 400 16px/24px var(--site-font-body); color: var(--site-fg); }
.amc-vline a { display: inline-flex; align-items: center; min-height: 40px; color: var(--site-fg); font-weight: 700; text-decoration: underline; }

@media (max-width: 979px) {
  /* the row: Year, Make, Model and Go on one line */
  .am-pick .ymm.installation-filter, .amc-pick .ymm.installation-filter { display: block; margin: 0; padding: 0; background: none; box-shadow: none; }
  .am-pick .ymm h3, .am-pick .ymm__clear, .am-pick [data-ymm-submodel] { display: none !important; }
  .am-pick .ymm .mmy-filter-container, .amc-pick .ymm .mmy-filter-container { width: 100%; margin: 0; padding: 0; }
  .am-pick .ymm .mmy-filter-container { display: flex; align-items: center; gap: 6px; }
  .am-pick .ymm .mmy-filter, .amc-pick .ymm .mmy-filter { flex: 1 1 auto; min-width: 0; flex-direction: row; flex-wrap: nowrap; gap: 6px; }
  .am-pick .ymm .mmy-filter .select-container, .amc-pick .ymm .mmy-filter .select-container { flex: 1 1 0; width: auto; min-width: 0; margin: 0; }
  .am-pick .ymm .mmy-filter .select-container:first-child { flex: 0.8 1 0; }
  .am-pick .ymm select.mmy-dropdown, .amc-pick .ymm select.mmy-dropdown { margin: 0; padding: 0 26px 0 8px; }
  .am-pick .ymm .mmy-filter .select-container::after, .amc-pick .ymm .mmy-filter .select-container::after { width: 22px; height: 40px; font-size: 12px; }
  .am-pick .ymm__actions { flex: none; }
  .am-pick .ymm .btn { height: 40px; margin: 0; padding: 0 16px; }
  .ymm__go-row { display: inline; }
  .ymm__go-wide { display: none; }

  .am-pick { margin-top: 12px; }
  .am-pick + * { margin-top: 12px !important; }
  .am-pick + * > .pp-shead:first-child { margin-top: 0; }
  /* a picked vehicle: its line, the row behind Change */
  .am-pick.is-set .ymm { display: none !important; }
  .am-pick.is-set.is-open .ymm { display: block !important; margin-top: 8px; }
  .am-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-height: 40px; margin: 0; font: 400 16px/1.3 var(--site-font-body); color: var(--site-fg); }
  .am-picked__change { min-height: 40px; padding: 0 4px; border: 0; background: none; color: var(--site-fg); font: 700 16px/1 var(--site-font-body); text-decoration: underline; cursor: pointer; }

  /* the shop pages: one 48px bar that opens the full picker under it */
  .amc-pick { margin-top: 12px; padding: 0 16px; }
  .amc-pickbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; width: 100%;
    height: 48px; padding: 0 16px; border: 1px solid var(--site-line); border-radius: 0; background: var(--site-panel); color: var(--site-fg);
    font: 700 16px/1.2 var(--site-font-body); text-align: left; cursor: pointer; }
  .amc-pickbar__text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .amc-pickbar__chev { flex: none; transition: transform .15s; }
  .amc-pick.is-open .amc-pickbar__chev { transform: rotate(180deg); }
  .amc-pick__body { display: none; padding: 12px 16px 4px; border: 1px solid var(--site-line); border-top: 0; background: var(--site-panel); }
  .amc-pick.is-open .amc-pick__body { display: block; }
  .amc-pick .ymm h3 { margin: 0 0 10px; font-size: 16px; text-align: left; }
  .amc-pick .ymm .mmy-filter { flex-wrap: wrap; }
  .amc-pick .ymm .mmy-filter .select-container { flex: 1 1 30%; }
  .amc-pick .ymm .mmy-filter .select-container[data-ymm-submodel] { flex-basis: 100%; }
  .amc-pick .ymm__actions { margin-top: 10px; gap: 10px; flex-wrap: nowrap; }
  .amc-pick .ymm .btn { display: flex; align-items: center; justify-content: center; flex: 1 1 0; height: 40px; margin: 0 0 12px; padding: 0 10px; }

  .amc-vline { margin-top: 12px; padding: 0 16px; }
}