/* The vehicle picker (partials/ymm.html): the theme's .search-form-sm draws the bar, its .btn-select the fields;
   these rules add only what the client's Vue widget drew itself: the native selects behind the skin, the list
   each field opens, and the Clear link while a vehicle is applied. */
.ymm { position: relative; }
/* the client's 40px under the bar: its Vue widget's empty div.search-form (the theme's margin: 40px auto 0) after the
   form, collapsing out of .search-wiget; the same margin here, below the form */
.search-form-sm.ymm { margin-bottom: 40px; }
.ymm .ymm-field { position: relative; }
.ymm.is-js .ymm-select { display: none; }
.ymm .btn-select > span:first-child { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 16px; }
.ymm .ymm-panel {
  position: absolute;
  z-index: 50;
  left: 16px;
  right: 16px;
  top: 100%;
  max-height: 320px;
  overflow-y: auto;
  background: var(--site-field-bg);
  border: 2px solid var(--site-edge);
  border-top: 0;
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25);
}
.ymm .ymm-option {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  color: var(--site-option);
  text-align: left;
  cursor: pointer;
}
.ymm .ymm-option:hover,
.ymm .ymm-option:focus-visible,
.ymm .ymm-option[aria-selected="true"] { background: var(--site-green-tint); color: var(--site-green); outline: 0; }
.ymm .ymm-clear {
  position: absolute;
  left: 10px;
  bottom: 3px;
  width: 150px;
  font-size: 11px;
  line-height: 1;
  text-align: center;
  color: var(--site-green);
  text-decoration: underline;
}
@media screen and (max-width: 767px) {
  .ymm .ymm-clear { left: auto; right: 12px; top: 10px; bottom: auto; width: auto; }
}