/* The fleet page: intro with the ask line, sticky filters, magazine grid (site.css), compare tray (site.css). */

.fleet-intro { padding-bottom: 28px; gap: 18px; }
.fleet-intro h1 { max-width: 20ch; }
.fleet-intro [data-ask] { max-width: 900px; margin-top: 6px; }
.card-price small { font-weight: 500; color: var(--muted); font-size: 0.8125rem; }
.f-toys { position: relative; }
.toys-btn { text-align: left; cursor: pointer; }
.toys-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 280px; max-height: 360px; overflow: auto;
  display: grid; gap: 8px; padding: 14px; background: var(--paper-raised); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.tray .btn { min-height: 40px; }
.tray .btn-link { font-size: 0.875rem; white-space: nowrap; }
@media (max-width: 760px) {
  .toys-pop { left: auto; right: 0; width: min(280px, calc(100vw - 32px)); }
  .filters-row .f-toys { flex: 1 1 140px; }
}
.filters-row { gap: 10px 10px; }
.filters-row .select { min-width: 0; width: 100%; }
.filters-row .f { width: 132px; }
.filters-row .f-area { width: 180px; }
.filters-row .spacer { display: none; }
.ask-inline .ask-heard { min-height: 0; margin-top: 10px; }
.ask-inline .ask-heard:empty, .ask-inline .ask-heard:has(.ask-heard-none:empty) { display: none; }
@media (max-width: 760px) { .filters-row .f, .filters-row .f-area { width: auto; } }