/* On a vehicle page the mobile menu belongs to the document, above the car. */
.car-mobile-summary { display: none; }
@media (max-width: 999px) {
  .car-mobile-summary { top: calc(10px + env(safe-area-inset-top, 0px)); }
  body:has([data-car-modal].car-modal--page:not([hidden])) .site-header {
    position: relative;
    top: 0;
    transform: none;
    transition: none;
    will-change: auto;
  }
  .car-mobile-summary:not([hidden]) {
    position: fixed;
    z-index: 45;
    left: 50%;
    display: grid;
    gap: 8px;
    width: var(--car-ad-width);
    min-height: 74px;
    padding: 10px 12px;
    transform: translateX(-50%);
    border: 1px solid rgb(37 41 49 / 6%);
    border-radius: 18px;
    background: #fff;
    color: #252931;
    box-shadow: 0 6px 24px rgb(37 41 49 / 12%);
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: car-mobile-summary-arrive .18s ease-out;
    transition: background-color .18s ease, box-shadow .18s ease;
  }
  .car-mobile-summary__main { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .car-mobile-summary__photo {
    flex: 0 0 64px;
    width: 64px;
    height: 50px;
    border-radius: 10px;
    object-fit: cover;
    background: #f4f2f0;
  }
  .car-mobile-summary__photo[hidden] { display: none; }
  .car-mobile-summary__copy { display: grid; flex: 1; min-width: 0; gap: 1px; }
  .car-mobile-summary__heading { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  .car-mobile-summary__year { flex-shrink: 0; color: #747b87; font-size: 12px; line-height: 18px; }
  .car-mobile-summary__year[hidden] { display: none; }
  .car-mobile-summary__year::before { content: '·'; margin-right: 6px; }
  .car-mobile-summary__title, .car-mobile-summary__price, .car-mobile-summary__note {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .car-mobile-summary__title { font-size: 13px; font-weight: 600; line-height: 18px; }
  .car-mobile-summary__price { font-size: 16px; font-weight: 700; line-height: 21px; font-variant-numeric: tabular-nums; }
  .car-mobile-summary__note { color: #747b87; font-size: 10px; line-height: 13px; }
  .car-mobile-summary__arrow { flex: 0 0 16px; width: 16px; height: 16px; color: #747b87; }
  .car-mobile-summary__details { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid #eceef0; color: #5f6672; font-size: 11px; line-height: 16px; }
  .car-mobile-summary__details[hidden], .car-mobile-summary__trim[hidden] { display: none; }
  .car-mobile-summary__trim { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .car-mobile-summary__facts { display: flex; flex-wrap: wrap; gap: 2px 8px; }
  .car-mobile-summary__facts > span { white-space: nowrap; }
  .car-mobile-summary__facts > span + span::before { content: '·'; margin-right: 8px; color: #b0b4bc; }
  .car-mobile-summary:active { background: #f4f2f0; }
  .car-mobile-summary:focus-visible { outline: 3px solid rgb(215 25 32 / 32%); outline-offset: 3px; }
  body:has([data-car-modal].car-modal--page:not([hidden])) .car-ad-import-button {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  body:has([data-car-modal].car-modal--page:not([hidden])) {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 999px) and (hover: hover) {
  .car-mobile-summary:hover { background: #fafafa; box-shadow: 0 8px 28px rgb(37 41 49 / 16%); }
}
@keyframes car-mobile-summary-arrive {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .car-mobile-summary:not([hidden]) { animation: none; transition: none; }
}