/* proto-pages-fm.css: Flowmaster's own rules on every landing page (templates/search/_page.html, _fm.html), on top of the
   shared frame proto-pages.css (bakflip.ca's, never changed here): the vehicle block, the spec line of a card, the
   group's one line, the link to the kit's listing. Tokens are cl-site.css's --site-*; square boxes, full-contrast text. */
@layer base, kit, site;

@layer site {

.fm-page .pp-lead { color: var(--site-fg); }
.fm-partial { margin-top: 12px; font: 700 16px/1.3 var(--site-font-body); color: var(--site-fg); }

/* the page: the head (the H1), the kit's vehicle band, the phone's preset row on a vehicle page, the top (the first
   line, the parts), the foot (the listing link, the links row). At 980px and wider the band sits above the H1, under
   the header, as before the phone clean-up (PICKER-BRIEF, Greg 2026-10-30), and the preset row is a phone's alone */
.fm-page { display: flex; flex-direction: column; }
.fm-page > * { width: 100%; }  /* a pp-wrap centres by its auto margins, which in a column would shrink it to its content */
.fm-page__band { order: -1; }
.fm-page__head { padding-bottom: 0; }
.fm-page__top { padding-top: 0; padding-bottom: 48px; }
.fm-page__foot { padding-top: 0; }
.fm-page__ask { display: none; }

/* the Applied Vehicle's block at the top */
.fm-yours { margin-top: 24px; }

/* a group's line of who it is for, under its head */
.fm-group .fm-who { max-width: 760px; margin-top: 8px; font: 400 16px/1.4 var(--site-font-text); color: var(--site-fg); }
.fm-group .fm-who + .pp-grid { margin-top: 16px; }

/* a long group's rest, behind a 40px summary that reads as a ghost button; opened, it reads Show fewer over the rest */
.fm-more { margin-top: 16px; }
.fm-more__sum { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; list-style: none; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--site-fg); border-radius: var(--site-radius); color: var(--site-fg);
  font: 700 16px/1 var(--site-font-button); letter-spacing: 0.5px; text-transform: uppercase; }
.fm-more__sum::-webkit-details-marker { display: none; }
.fm-more__sum:hover { background: var(--site-fg); color: var(--site-bg); }
.fm-more__sum:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }
.fm-more__less, .fm-more[open] .fm-more__all { display: none; }
.fm-more[open] .fm-more__less { display: inline; }
.fm-more[open] > .fm-more__sum { margin-bottom: 16px; }

/* the link to the kit's listing */
.fm-every { margin-top: 40px; }

@media (max-width: 979.98px) {
  /* a phone: the H1, then one row, then the parts (PICKER-BRIEF rule 1) */
  .fm-page__band { order: 0; }
  .fm-page--ask-preset .fm-page__band, .fm-page--ask-none .fm-page__band { display: none; }
  .fm-page__ask { display: block; padding: 12px 16px 0; }
  .fm-page__band.fm-ask { margin-top: 12px; }
  .fm-page__top > .pp-lead:first-child { margin-top: 12px; }
  .fm-page__top { padding-bottom: 32px; }
  .fm-page__foot { padding-top: 0; }
  .fm-yours { margin-top: 16px; }
  .fm-group .fm-who { font-size: 14px; }
  .fm-more__sum { font-size: 14px; }
  .fm-every { margin-top: 32px; }
}
@media (max-width: 600px) {
  .fm-every .pp-btn { width: 100%; }
}

/* the preset row of a vehicle page (f.ask, a phone's alone): the model as words or the few siblings' select, the Year,
   Go, one 44px line; with a vehicle picked, one 40px line, its name and Change, which opens the row under it */
.fm-ask__row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fm-ask__car { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 17px/1.2 var(--site-font-body); color: var(--site-fg); }
.fm-ask__select { flex: 1 1 0; min-width: 0; height: 44px; margin: 0; padding: 0 28px 0 10px;
  background: var(--site-field-bg, var(--site-bg)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23767676' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--site-fg); border: 1px solid var(--site-field-line, var(--site-line)); border-radius: var(--site-radius);
  font: 400 16px/1 var(--site-font-body); -webkit-appearance: none; appearance: none; }
.fm-ask__go { flex: none; height: 44px; min-width: 56px; padding: 0 14px; background: var(--site-accent); color: var(--site-accent-fg);
  border: 0; border-radius: var(--site-radius); font: 700 16px/1 var(--site-font-button); text-transform: uppercase; cursor: pointer; }
.fm-ask__go:hover { background: var(--site-accent-strong); }
.fm-ask__select:focus-visible, .fm-ask__go:focus-visible, .fm-ask__line:focus-visible { outline: 2px solid var(--site-fg); outline-offset: 2px; }
.fm-ask__line { display: flex; align-items: center; gap: 12px; min-height: 40px; list-style: none; cursor: pointer; }
.fm-ask__line::-webkit-details-marker { display: none; }
.fm-ask__now { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 17px/1.2 var(--site-font-body); color: var(--site-fg); }
.fm-ask__change { flex: none; display: inline-flex; align-items: center; min-height: 40px; font: 700 16px/1 var(--site-font-body);
  color: var(--site-fg); text-decoration: underline; text-underline-offset: 3px; }
.fm-ask__set[open] .fm-ask__change { text-decoration: none; }
.fm-ask__set[open] .fm-ask__row { margin-top: 4px; }

/* the kit's band as the phone's row on a line or part page and in the home's hero (.fm-ask): the cascade alone, Year,
   Make, Model and Go on one 44px line (the tabs, Describe it and VIN are the desktop's); set, one line, the vehicle and
   Change, which opens the row. Layout only, the kit's own colours; these name kit classes (doctor check 13) until the
   kit draws a compact row itself */
@media (max-width: 979.98px) {
  .fm-ask .kit-band { border-bottom: 0; }
  .fm-ask .kit-band__in { padding: 6px 16px; gap: 6px; }
  .fm-ask .kit-band__tabs, .fm-ask .kit-band__typed { display: none; }
  .fm-ask .kit-band__row { flex: 1 1 100%; flex-wrap: nowrap; gap: 0; }
  .fm-ask .kit-band--set .kit-band__row { padding-top: 6px; }
  .fm-ask .kit-band__panels { flex: 1 1 100%; }
  .fm-ask .kit-band__form { height: auto; flex-wrap: wrap; gap: 6px; }
  .fm-ask .kit-band .kit-ymm-field { flex: 1 1 0; min-width: 0; }
  .fm-ask .kit-band__form:not(.has-make) .kit-ymm-field--model { display: block; }
  .fm-ask .kit-band .kit-ymm-field--submodel, .fm-ask .kit-band .kit-ymm-field--position { flex-basis: 100%; order: 2; }
  .fm-ask .kit-band select, .fm-ask .kit-band .kit-ymm-field__button { padding: 0 24px 0 8px; }
  .fm-ask .kit-band .kit-ymm-field__button::after { right: 9px; }
  .fm-ask .kit-band__form .kit-band__go { flex: none; min-width: 52px; padding: 0 10px; }
  .fm-ask .kit-band__current { flex-wrap: nowrap; gap: 12px; min-height: 40px; }
  .fm-ask .kit-band__car, .fm-ask .kit-band__now-label, .fm-ask .kit-band__btn--light, .fm-ask .kit-band__clear { display: none; }
  .fm-ask .kit-band__now { min-width: 0; }
  .fm-ask .kit-band__now strong { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fm-ask .kit-band__actions { width: auto; display: flex; flex: none; }
  .fm-ask .kit-band__change { height: 40px; min-width: 0; padding: 0 4px; border: 0; background: none; text-decoration: underline; text-underline-offset: 3px; }
  .fm-ask .kit-band__change[aria-expanded="true"] { text-decoration: none; background: none; }
}

}