/* ДОСКА, РЕДИЗАЙН 10.2026. Один файл поверх app.css / home_page.css / seo.css.

   Три решения задают всё остальное.
   1. Цвет значит вердикт. Зелёный, янтарный, красный и синий заметки остаются у проверок;
      кнопки, выбранное, ссылки — чернила. Синего акцента на доске больше нет.
   2. Одно семейство — Google Sans — на латиницу, кириллицу и грузинский, с оптическим
      размером: число $5 000 и подпись под ним набраны одной рукой.
   3. Машины первыми. Герой сжат до заголовка и строки, полоса счёта липкая, рейл — 280px
      слева, карточка — фото 248, описание, деньги 208. Ничего из замеров index.html не
      отменяется: первая машина на 1440 стоит не ниже прежних 288px.

   Значки — Hugeicons stroke-rounded из `_sprite.html`, штрих 1,5. */



/* ---------------------------------------------------------------- герой */
/* Герой на десктопе — одна полоса: заголовок слева, строка про Telegram справа, 70px вместо
   190. Машины первыми — правило страницы, и три строки крупного кегля над полосой счёта
   отодвигали первую карточку на 341px. */
.hero { max-width: none; padding: 20px 0 8px; }
.hero h1 { font-size: 24px; line-height: 1.2; letter-spacing: -.012em; margin: 0 0 6px; font-weight: 600; text-wrap: balance; }
.hero p { font-size: 14px; color: var(--ink-dim); margin: 0; max-width: 60ch; }
@media (min-width: 1024px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 36%); gap: 6px 48px; align-items: end; padding: 18px 0 6px; }
  .hero h1 { margin: 0; max-width: 34ch; font-size: 23px; }
  .hero p { margin: 0 0 3px; font-size: 13.5px; max-width: 46ch; }
}

/* ---------------------------------------------------------------- полоса счёта (липкая) */
.hm-bar {
  padding: 11px 0;
  border-top: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.2) blur(10px);
}
@media (min-width: 1024px) { .hm-bar { min-height: var(--hm-bar-h); } .hm-line { min-height: 36px; } }
.hm-n { gap: 8px; }
.hm-n b { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.hm-n span { font-size: 14px; color: var(--ink-dim); }
.hm-sub { font-size: 13px; color: var(--ink-faint); }
.hm-sort { gap: 8px; }
.hm-sort-l { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-dim); }
.hm-sort-now { display: none; }
@media (max-width: 1023px) { .hm-sort-now { display: block; } }
/* Нативный select сортировки в монохромном наборе: без системной стрелки, своя. Остров Base UI
   (rail.js) прячет эту форму и рисует свою, но без скрипта стоит эта. */
.sort select, .picker select {
  appearance: none; -webkit-appearance: none;
  height: 36px; padding: 0 32px 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='none'%20stroke='%23596270'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='1.5'%20d='M19%209L12%2015L5%209'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-size: 13.5px; color: var(--ink);
}
.sort select:hover, .picker select:hover { border-color: var(--line-strong); }
/* Дверь в фильтр на телефоне: чёрная, с условиями после имени. Стоит в одном ряду с
   сортировкой: полоса липкая, и каждая её строка — это строка, отнятая у списка. */
@media (max-width: 1023px) {
  /* Дверь в фильтр на всю ширину, сортировка — кнопка-значок 48×48 справа: подпись порядка
     в 45% ширины резалась до «по нашей оце…» (судья 09.10), а условия в кнопке — до двух букв. */
  .hm-line { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 8px 10px; align-items: center; }
  .hm-n { grid-column: 1 / -1; }
  .hm-sub { grid-column: 1 / -1; margin-top: -4px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; }
  .hm-sort { grid-column: 2; margin-left: 0; min-width: 0; }
  .hm-sort .hm-sort-l { display: none; }
  .hm-sort select { width: 48px; padding: 0; color: transparent; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='none'%20stroke='%2315191e'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='1.5'%3E%3Cpath%20d='M16%2018L16%206M12%2010.125L16%206L20%2010.125'/%3E%3Cpath%20d='M8%206L8%2018M4%2013.875L8%2018L12%2013.875'/%3E%3C/g%3E%3C/svg%3E"); background-position: center; }
  .hm-cond, .hm-open u { display: none; }
  .hm-badge { font-style: normal; flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
  /* Условия чипами под полосой (home_page.css прячет их на телефоне — здесь возвращаются),
     наборы при активном фильтре уступают им строку. */
  /* `.rail .hm-chips`, а не `.hm-chips`: базовое правило чипов стоит в файле ниже и при равной
     специфичности забирало padding обратно — первый чип упирался в край экрана. */
  .rail .hm-chips { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; margin: 0 -16px; padding: 10px 16px 4px; scroll-padding-inline: 16px; border-bottom: 0; }
  .rail .hm-chips::-webkit-scrollbar { display: none; }
  .rail .hm-chips > .cap { display: none; }
  .hm-chip, .fclear { flex: none; }
  /* Правый отступ ленты — отдельным элементом: padding-right у прокручиваемого flex-ряда
     Chrome не держит, и «сбросить всё» упиралось в край экрана. */
  .rail .hm-chips > .fclear { align-self: center; }
  .rail .hm-chips::after { content: ""; flex: 0 0 10px; }
  /* Затухание у правого края: срезанный последний чип читается как «лента едет дальше». */
  .rail .hm-chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .hm-presets.has-filter { display: none; }
  /* Без черты под «Фильтром»: чипы условий и наборы и так читаются отдельным рядом, а черта
     с полем под ней стоила ~16px до первой машины (судья 10.10). */
  .hm-bar { border-bottom: 0; padding-bottom: 0; }
  .hm-sort-now { grid-column: 1 / -1; grid-row: 3; margin-top: -2px; font-size: 12px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hm-sort { grid-row: 4; }
  /* home_page.css прячет на телефоне все span в .hm-sort (подпись лишняя); остров сортировки
     тоже span, и без этой строки его ячейка стояла пустой. */
  .hm-sort > #sort-app { display: flex; width: 100%; min-width: 0; }
  .hm-sort .sortform, .hm-sort .sort, .hm-sort select { width: 100%; min-width: 0; max-width: none; }
  .hm-sort select { height: 48px; padding: 0 34px 0 12px; border-radius: 12px; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
  .hm-panel { grid-column: 1; grid-row: 4; margin: 0; min-width: 0; }
  .hm-open {
    display: flex; align-items: center; gap: 8px; min-height: 48px;
    padding: 0 16px; border-radius: 12px; border: 0;
    background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
  }
  .hm-open .hm-what { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .hm-open .hm-lab { opacity: 1; font-weight: 600; }
  .hm-open u { text-decoration: none; flex: none; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .18); }
  .hm-open.empty { justify-content: center; }
  .hm-open.empty .hm-what { flex: 0 1 auto; }
  .hm-ico { color: #fff; opacity: .9; }
  .hm-sheettop .filter-close { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border-color: var(--line); }
}

/* ---------------------------------------------------------------- наборы */
.hm-presets { gap: 6px; margin-top: 10px; padding-bottom: 4px; }
/* Ряд сценариев обрезался на «Легко продат» без намёка, что дальше есть ещё. */
@media (min-width: 1024px) {
  .hm-presets { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
}
.hm-pcap { font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-faint); padding-right: 4px; }
.hm-psep { background: var(--line-strong); }
.preset {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 34px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1;
  white-space: nowrap;
}
.preset:hover { border-color: var(--line-strong); background: var(--panel); text-decoration: none; }
.preset i { font-style: normal; font-size: 13px; line-height: 0; color: var(--ink-dim); display: inline-flex; }
.preset b { font-weight: 500; }
.preset u { text-decoration: none; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.preset.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.preset.on i, .preset.on u { color: rgba(255, 255, 255, .72); }
.preset.last { border-style: solid; color: var(--ink-dim); }
.preset.saved { border: 1px solid var(--ink); font-weight: 600; }
.preset.saved i { color: var(--ink); }
.preset.saved .new { color: var(--ok); background: rgba(23, 138, 76, .1); }

/* ---------------------------------------------------------------- чипы выбранного */
.hm-chips { gap: 6px; padding: 2px 0 12px; border-bottom: 1px solid var(--line); }
.hm-chips > .cap { font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-faint); }
.hm-chip {
  gap: 5px; height: 30px; padding: 0 8px 0 11px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); color: var(--ink);
}
.hm-chip i { display: inline-flex; color: var(--ink-faint); }
.hm-chip:hover { border-color: var(--ink); text-decoration: none; }
.hm-chip:hover i { color: var(--ink); }
.hm-chip.out { background: var(--fail); border-color: var(--fail); color: #fff; }
.hm-chip.out i { color: rgba(255, 255, 255, .8); }
.fclear { font-size: 13px; color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- оболочка и рейл */
.shell { gap: 16px; margin-top: 14px; }
@media (min-width: 1024px) {
  .shell { grid-template-columns: 280px minmax(0, 1fr); gap: 28px; }
  .rail {
    top: calc(var(--h-top) + var(--hm-bar-h));
    max-height: calc(100vh - var(--h-top) - var(--hm-bar-h) - 12px);
    padding-top: 2px;
  }
}
/* Нативная форма подбора — запасной путь без скрипта и единый набор контролов для чипов. */
.picker .fld > span, .picker .fld.pair > span, .picker .omni > span {
  display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-dim); margin-bottom: 6px;
  text-transform: none; letter-spacing: 0;
}
.picker select, .picker input[type="search"], .picker input[type="text"], .picker input[type="number"] {
  width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink); font-size: 14px;
}
.picker select { padding-right: 32px; }
.picker input:focus, .picker select:focus { border-color: var(--ink); outline: 0; box-shadow: 0 0 0 1px var(--ink); }
.picker .omni { position: relative; }
.picker .omni input[type="search"] { padding-left: 38px; background: var(--bg) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='none'%20stroke='%23596270'%20stroke-linecap='round'%20stroke-width='1.5'%3E%3Ccircle%20cx='11.5'%20cy='11.5'%20r='9.5'/%3E%3Cpath%20d='M18.2173%2018.2178L21.9999%2022.0004'/%3E%3C/g%3E%3C/svg%3E") no-repeat 12px center; }
.picker .omni-hint, .picker .omni-miss { font-size: 12px; color: var(--ink-faint); margin-top: 6px; display: block; }
.omni-drop { border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); overflow: hidden; }
.omni-row { padding: 9px 12px; }
.omni-row:hover, .omni-row.sel { background: var(--panel); }
.omni-row .k { color: var(--ink-faint); font-size: 11.5px; }
/* Рейл — белая колонка без своей коробки: коробка внутри коробки на 280px съедала 28px ширины. */
@media (min-width: 1024px) {
  .picker-wrap, .picker { background: none; border: 0; padding-left: 0; padding-right: 0; box-shadow: none; }
}
/* Строка условия в две линии: имя сверху, выбранное под ним. На 280px имя «Год, кузов, пробег»
   и значение «≤ $15 000» в одну линию не помещались и переносили имя. */
.hm-row { border-top: 1px solid var(--line); }
.hm-row > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 24px auto; grid-template-rows: auto auto;
  column-gap: 6px; row-gap: 1px; align-items: center; min-height: 54px; padding: 8px 0;
}
.hm-row > summary > b { grid-column: 1; grid-row: 1; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-row .rv { grid-column: 1; grid-row: 2; flex: none; min-width: 0; text-align: left; font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-row .rv.empty { display: none; }
.hm-row[open] { background: var(--panel); margin: 0 -12px; padding: 0 12px; border-radius: 12px; }
.hm-row[open] + .hm-row { border-top: 1px solid var(--line); }
.hm-row .rc { grid-column: 2; grid-row: 1 / 3; }
.hm-row .rx { grid-column: 3; grid-row: 1 / 3; width: 36px; height: 36px; margin-right: -6px; }
.hm-row > summary:has(.rx) { grid-template-columns: minmax(0, 1fr) 24px 36px; }
.hm-row .rc { color: var(--ink-faint); display: inline-flex; transition: transform .15s ease; }
.hm-row[open] .rc { transform: rotate(180deg); }
.hm-row .rx { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-faint); border-radius: 999px; }
@media (max-width: 1023px) { .hm-row > summary { min-height: 58px; } .hm-row > summary > b { font-size: 15px; } .hm-row .rx { width: 44px; height: 44px; } }
.hm-row .rx:hover { color: var(--ink); background: var(--panel); text-decoration: none; }
.hm-row .rowbody { gap: 12px; padding: 4px 0 16px; }
.modellist { border: 1px solid var(--line); border-radius: var(--r-sm); max-height: 220px; overflow: auto; padding: 4px; }
.mrow { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 6px; font-size: 13.5px; }
.mrow:hover { background: var(--panel); }
.mrow input { accent-color: var(--ink); width: 16px; height: 16px; margin: 0; }
.mrow u { text-decoration: none; margin-left: auto; color: var(--ink-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.mrow em { font-style: normal; color: var(--ink-faint); font-size: 12px; }
.modellist.empty .mhint { color: var(--ink-faint); font-size: 12.5px; padding: 6px 8px; display: block; }
.segbox { gap: 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.segbox label { flex: 1 1 0; border: 0; border-radius: 0; min-height: 38px; display: flex; align-items: center; justify-content: center; font-size: 13.5px; cursor: pointer; }
.segbox label + label { border-left: 1px solid var(--line); }
.segbox label:has(input:checked) { background: var(--ink); color: #fff; border-color: var(--ink); }
.segbox input:checked + span { color: #fff; font-weight: 600; }
.segbox input:checked + span u { color: rgba(255, 255, 255, .7); }
.cutf { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.cutf input, .chk-line input { accent-color: var(--ink); width: 16px; height: 16px; margin: 0; }
.cutf.on { border-color: var(--ink); background: var(--panel); }
.cutf .cutf-t { font-size: 13.5px; font-weight: 500; }
.cutf small, .chk-line small { color: var(--ink-faint); font-size: 12px; margin-left: auto; font-variant-numeric: tabular-nums; }
.chk-line { display: flex; align-items: center; gap: 10px; }
.allf-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  padding: 0; border: 0; background: none; color: var(--ink); font-size: 13.5px; font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong);
}
.allf-cta:hover { text-decoration-color: var(--ink); border: 0; }
.hm-apply { padding: 12px 0 4px; background: linear-gradient(rgba(255, 255, 255, 0), var(--bg) 30%); }
.hm-apply button {
  min-height: 46px; border-radius: 12px; background: var(--ink); color: #fff;
  font-size: 15px; font-weight: 600; box-shadow: 0 8px 20px rgba(20, 25, 30, .18);
}
.hm-apply button:hover { background: #000; filter: none; }
/* Закреплённая «Применить» на десктопе считает левый край от новой ширины обёртки (1200/20)
   и ширины рейла (280); прежняя арифметика 1120/18/272 сдвигала кнопку на 37px вправо. */
@media (min-width: 1024px) {
  .hm-apply { left: max(20px, calc((100vw - 1200px) / 2 + 20px)); width: 280px; }
}
.hm-save { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.hm-save > summary, .hm-save button {
  min-height: 42px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--bg);
  color: var(--ink); font-size: 14px; font-weight: 500;
}
.hm-save button.alt { background: var(--panel); }
.hm-save small { color: var(--ink-faint); font-size: 12px; }
.hm-name input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 14px; }

/* ---------------------------------------------------------------- карточки */
.cards { gap: 12px; }
.card {
  gap: 12px 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
}
@media (min-width: 1024px) { .card { grid-template-columns: 248px minmax(0, 1fr) 208px; gap: 18px; padding: 16px; } }
/* Вердикт карточкой: чистая машина полосы не получает — молчание полосы и есть «сигнала нет».
   Замечание и провал держат 4px внутри левого края; провал ещё и подкрашивает лист. */
.card.is-clean { border-left-color: var(--line); }
.card.is-caution { border-left-color: var(--line); box-shadow: inset 4px 0 0 var(--caution); }
.card.is-fail { border-left-color: var(--line); box-shadow: inset 4px 0 0 var(--fail); background: #fdf7f6; }
/* Фото не растягивается на высоту денежной колонки: счётчик кадров и сердечко стоят на снимке,
   а не на пустом месте под ним. */
.card > .shots { align-self: start; }
.card .thumb { border-radius: 8px; }
.card .thumb > img, .card .thumb.no-shot { height: 188px; }
.strip { height: 188px; }
@media (max-width: 1023px) { .card .thumb > img, .card .thumb.no-shot, .strip { height: 224px; } }
.card .thumb.no-shot { background: var(--panel); color: var(--ink-faint); font-size: 12.5px; }
.shot-n, .seenmark { border-radius: 999px; padding: 3px 9px; font-size: 11.5px; font-weight: 500; background: rgba(21, 25, 30, .68); backdrop-filter: blur(4px); }
.dmg, .enc, .flt { border-radius: 999px; }
/* Сердечко: белая пилюля с контурным сердцем; отложенное — заливка цветом списка. */
.likeform { top: 10px; left: 10px; }
.like {
  height: 32px; border-radius: 999px; border: 1px solid rgba(21, 25, 30, .08);
  background: rgba(255, 255, 255, .94); color: var(--ink); backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(20, 25, 30, .12);
}
.like .hi-heart { display: block; }
.like.on, .like.wait { color: var(--like); background: #fff; border-color: rgba(209, 67, 106, .3); }
.like.has-label { padding: 0 11px 0 9px; gap: 6px; }
.like-word { font-size: 12.5px; font-weight: 600; }
.like:hover { transform: none; box-shadow: 0 3px 10px rgba(20, 25, 30, .18); }
.card h3 { font-size: 17px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.card h3 a { color: var(--ink); }
.specs { margin-top: 6px; font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; }
.specs b { font-weight: 600; color: var(--ink); }
.where { margin-top: 5px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; }
.where .hi-pin { color: var(--ink-faint); vertical-align: -2px; margin-right: 2px; }
.where .vin { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; color: var(--ink-dim); background: var(--panel); padding: 1px 6px; border-radius: 4px; }
.verdict { margin-top: 10px; font-size: 13px; }
.mark { border-radius: 999px; padding: 2px 9px; font-weight: 600; font-size: 12px; }
/* Полоса знания — подпись карточки. Клетки выше и круглее, число рядом. */
.know { height: 12px; gap: 2px; margin-top: 12px; }
.know i { height: 10px; border-radius: 3px; }
.know i.u { height: 6px; background: var(--line); }
.cnt { margin-top: 6px; font-size: 12px; color: var(--ink-dim); }
/* Телефон: фото 16:9, как в main (328 × 184), а не 3:2 — карточка была на 44px выше и
   цена с «Открыть карточку» уходили с первого экрана. Плашку цены «на X% дешевле
   ожидаемой» не трогаем нигде (Иван 10.10: выгода в процентах лучше оценки словами). */
@media (max-width: 640px) {
  .card .thumb > img, .card .thumb.no-shot, .strip { height: auto; aspect-ratio: 16 / 9; }
}
/* Планшет 641–1023: карточка во всю ширину, и 16:9 дало бы фото в 400px высотой (замер 768:
   страница 17 067 против 12 240 в main). Высота фиксированная, как в main, с запасом 20px. */
@media (min-width: 641px) and (max-width: 1023px) {
  .card .thumb > img, .card .thumb.no-shot, .strip { height: 200px; aspect-ratio: auto; }
}
@media (max-width: 1023px) {
  /* Мелкие строки описания на размере main: в колонке 162px Google Sans шире системного, и
     «Tbilisi · auto.ge · …» шло в 3 строки, «21 подтверждено · 13 молчат» в 2 (+50px). */
  .specs { font-size: 13px; }
  .where { font-size: 12px; }
  .cnt { font-size: 11.5px; letter-spacing: -.005em; }
}
.cnt .u { color: var(--ink-faint); }
.flags { gap: 6px; margin-top: 10px; }
.flag { border-radius: 7px; padding: 4px 9px 4px 7px; font-size: 12px; border-width: 1px; }
/* «VIN не указан» остаётся штриховкой: ровная серая плашка читалась как нейтральный факт,
   а отсутствие VIN — повод спросить (судья 09.10). */
.flag.none { background: var(--hatch); color: var(--ink-dim); }
.flag.rest { background: var(--panel); }
.checks summary { font-size: 12.5px; color: var(--ink-dim); }
/* Деньги: цена крупно, отклонение пилюлей своего цвета, растаможка отдельным блоком. */
.card .price { gap: 0; }
.ask { font-size: 26px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.delta {
  display: inline-block; margin: 6px 0 0 auto; padding: 3px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.3; text-align: left;
}
.delta.good { background: rgba(23, 138, 76, .1); color: var(--ok); }
/* Плашку цены не трогаем (Иван 10.10): у «дороже ожидаемой» прежний янтарь #b5730f, хотя
   токен --caution для остального янтарного текста сегодня затемнён до #8a5a00. */
.delta.dear { background: rgba(181, 115, 15, .11); color: #b5730f; }
.delta.bait { background: rgba(200, 55, 45, .1); color: var(--fail); }
.delta.none, .delta.thin, .delta.ask, .delta.nofinal { padding: 0; background: none; font-weight: 500; }
.delta.ask { color: var(--ink-dim); }
.peers { margin: 4px 0 0; font-size: 12px; color: var(--ink-faint); }
.cut { font-size: 12.5px; }
.debt { font-size: 12.5px; }
.adv { border-top-color: var(--line); font-size: 12.5px; }
.landed { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.landed-head .add { color: var(--caution); }
.landed-head b { font-size: 14px; }
.landed-why, .landed-estimate { font-size: 11.5px; color: var(--ink-faint); }
.card .foot { gap: 6px; padding-top: 12px; }
.foot .check {
  height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600; border: 0;
}
.foot .check:hover { background: #000; }
.foot .out {
  height: 38px; display: flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); color: var(--ink);
  font-size: 13px; font-weight: 500;
}
.foot .out:hover { background: var(--panel); border-color: var(--ink); }
.flagged { color: var(--fail); font-size: 14px; }
.flagged small { color: var(--ink-faint); font-weight: 400; }
.empty { font-size: 15px; }

/* ---------------------------------------------------------------- пагинатор */
.pager { gap: 10px; margin: 26px 0 8px; }
.pager .pg {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 20px;
  border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink);
}
.pager .pg.more { background: var(--ink); color: #fff; border-color: var(--ink); }
.pager .pg.more:hover { background: #000; }
.pager .pg-at { font-size: 12.5px; color: var(--ink-faint); }


/* ── Два варианта главной (10.10, web/home_back.py) ─────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Новичок: поле поиска в герое — только на телефоне и планшете, на десктопе оно в рейле. */
.hero-q { display: none; }
@media (max-width: 1023px) {
  .hero-q { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; min-height: 48px; padding: 0 4px 0 12px;
            border: 1.5px solid var(--ink-dim); border-radius: 12px; background: var(--bg); }
  .hero-q:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
  .hero-q > .hi { color: var(--ink-faint); }
  .hero-q input { flex: 1 1 auto; min-width: 0; height: 44px; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); }
  .hero-q input::placeholder { color: var(--ink-faint); }
  .hero-q input::-webkit-search-cancel-button { display: none; }
  .hero-q button { flex: none; height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--ink); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
}

/* Вернувшийся: блок «продолжить» на месте героя. Мини-карточки без рамки и тени, фото 4:3 на
   нейтральном фоне целиком (contain), один сигнал. Числа табличными цифрами. */
.hb { display: grid; gap: 14px; margin: 18px 0 14px; }
.hb-h { margin: 0 0 8px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.hb-h small { margin-left: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-faint); }
.hb-side { display: grid; gap: 10px; align-content: start; min-width: 0; }
.hb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hb-chip, .hb-likes { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; max-width: 100%;
                      border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); color: var(--ink);
                      font-size: 13px; font-weight: 500; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-chip:hover, .hb-likes:hover { border-color: var(--ink); text-decoration: none; }
.hb-chip .hi, .hb-likes .hi { color: var(--ink-faint); }
.hb-chip u { text-decoration: none; color: var(--ink-faint); margin-left: 4px; }
.hb-likes { justify-self: start; }
.hb-seen { min-width: 0; }
.hb-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 156px; gap: 12px;
            overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.hb-strip::-webkit-scrollbar { display: none; }
.hb-strip > li { scroll-snap-align: start; min-width: 0; }
.hb-car { display: grid; gap: 3px; color: var(--ink); text-decoration: none; }
.hb-car:hover .hb-t { text-decoration: underline; text-underline-offset: 3px; }
.hb-car:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.hb-ph { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-sm); background: var(--panel); overflow: hidden; }
.hb-ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hb-noph { display: grid; place-items: center; height: 100%; font-size: 12px; color: var(--ink-faint); }
.hb-t { margin-top: 4px; font-size: 13px; line-height: 1.3; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-p { font-size: 16px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hb-s { font-size: 12px; font-weight: 600; color: var(--ok); }

/* Телефон: чипы «Вы искали» одной прокручиваемой строкой (два видно целиком), лента машин
   на всю ширину экрана с отступом 16px, в кадре ~2,4 карточки — видно, что едет дальше. */
@media (max-width: 1023px) {
  .hb { margin: 12px 0 10px; gap: 12px; }
  .hb-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .hb-chips::-webkit-scrollbar { display: none; }
  .hb-chips::after { content: ""; flex: 0 0 10px; }
  .hb-chip { flex: none; max-width: 78vw; }
  .hb-side { grid-template-columns: minmax(0, 1fr); }
  .hb-strip { grid-auto-columns: 140px; margin: 0 -16px; padding: 0 16px; scroll-padding-inline: 16px; }
  .hb-strip::after { content: ""; width: 4px; }
}
/* Десктоп: одна полоса — слева поиски и список, справа лента машин. */
@media (min-width: 1024px) {
  .hb { grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; margin: 22px 0 16px; }
  .hb > .hb-seen:only-child { grid-column: 1 / -1; }
  .hb-chips { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
  .hb-strip { grid-auto-columns: 150px; }
}

/* Бюджет «машины первыми» на телефоне (замер 10.10, measure.mjs): у новичка поле поиска
   стоило +40px, поэтому строка про Telegram короткая и в одну строку, герой плотнее; у
   вернувшегося «Вы искали» уходят в ряд наборов, в блоке одна лента машин. */
.tg-short { display: none; }
@media (max-width: 1023px) {
  .hero { padding: 10px 0 4px; }
  .hero h1 { font-size: 24px; line-height: 1.18; margin: 0 0 4px; }
  .hero p { font-size: 14px; }
  .tg-long { display: none; }
  .tg-short { display: inline; }
  .hero-q { margin-top: 10px; }
  .hb .hb-side { display: none; }
  .hb { margin: 8px 0 8px; gap: 0; }
  .hb-h { margin-bottom: 6px; }
  .hb-strip { grid-auto-columns: 124px; gap: 10px; }
  .hb-t { margin-top: 2px; font-size: 12.5px; }
  .hb-p { font-size: 15px; }
}
@media (min-width: 1024px) {
  .hm-presets.rec-mob .preset.last { display: none; }
  /* Одни недавние, и те уже в блоке «продолжить»: на десктопе строке нечего показать. */
  .hm-presets.rec-only { display: none; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 46%); column-gap: 20px; align-items: center; }
  .hero h1 { grid-column: 1 / -1; }
  .hero-q { margin-top: 0; }
}

/* ── Мобайл-фёрст, правки Ивана 10.10 ──────────────────────────────────────────────────────
   1. (снято вечером 10.10) Заголовок героя прятался на повторном визите — Иван имел в виду
      другое: заголовок остаётся всем, просто не липнет. См. index.html.
   2. Строки «535 объявлений… 502 без замечаний… 206 с полным VIN… сортировка: …» на телефоне
      нет: место отдано машинам. На срезе с фильтром остаётся одно «20 подходят» строкой.
   3. Порядок — коротким словом на кнопке сортировки, а не отдельной серой строкой.
   4. «Найти» — вторичная кнопка: три чёрные кнопки на одном экране спорили между собой. */
@media (max-width: 1023px) {
  .hm-bar .hm-sub, .hm-bar .hm-sort-now { display: none; }
  .hm-bar.is-board .hm-n { display: none; }
  .hm-bar .hm-n { grid-row: 1; display: flex; align-items: baseline; gap: 6px; }
  .hm-bar .hm-n b { font-size: 18px; }
  .hm-bar .hm-n span { font-size: 13px; }
  .hm-line { grid-template-columns: minmax(0, 1fr) auto; }
  .hm-bar .hm-sort, .hm-bar .hm-panel { grid-row: 2; }
  .hm-bar.is-board .hm-sort, .hm-bar.is-board .hm-panel { grid-row: 1; }
  .hero-q button { background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong); }
  .hero-q button:hover { border-color: var(--ink); }
  html[lang="ka"] .hero h1 { font-size: 21px; }
}
.hb-pl { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.hb-y { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ── Дизайнер 10.10: правки после прокликивания ─────────────────────────────────────────── */
.hb-q { display: none; }
@media (max-width: 1023px) {
  .hb-q { display: block; margin-bottom: 12px; }
  .hb-q .hero-q { margin-top: 0; }
  /* «Найти» — цель 44px: поле 52, кнопка 44. */
  .hero-q { min-height: 52px; }
  .hero-q button { height: 44px; }
}
/* Планшет 700–1023: карточка в одну строку, как на десктопе, фото 4:3 в своей колонке — на
   768 растянутая телефонная карточка резала фото до 3,5:1 (дизайнер 10.10). */
@media (min-width: 700px) and (max-width: 1023px) {
  .card { grid-template-columns: 210px minmax(0, 1fr) 176px; grid-template-areas: "photo body price"; gap: 14px; }
  .card .thumb > img, .card .thumb.no-shot, .strip { height: auto; aspect-ratio: 4 / 3; }
}
/* Судья 10.10 (финал): на телефоне край экрана не должен резать цифру или текст. Ряд своих
   поисков — с затуханием справа, как ряд чипов; лента «Вы смотрели» — ровно 2,4 карточки
   в кадре, чтобы было видно, что она листается; пустота между чипами и лентой меньше. */
@media (max-width: 1023px) {
  .hm-presets { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .hb-strip { grid-auto-columns: min(150px, calc((100vw - 52px) / 2.4)); }
  .hm-presets, .rail .hm-chips { margin-bottom: 0; }
  .shell { margin-top: 8px; }
}

/* ================================================================ карточка v2 (Иван 10.10)
   «Дать больше места фотографии» — по мокапу из артефакта плана главной: фото во всю ширину
   карточки 16:9, под ним цена и машина. Скил vinpasi-design (car-card.md, image-rules.md):
   фото первым, на десктопе 4:3, панорама не обрезается (`contain` на нейтральном фоне), на телефоне порядок
   «фото → цена → машина → год и пробег → сигнал → действие», служебные строки — в карточку.
   Плашка «на X% дешевле ожидаемой» та же, что была (Иван 10.10: цену не трогать).

   Разметка карточки не меняется: колонки .body и .price растворяются (`display: contents`),
   и их строки встают в одну сетку карточки. Так цена стоит в строке с названием, а описание
   идёт во всю ширину, а не узкой колонкой рядом с деньгами. */
.card > .body, .card > .price { display: contents; }
.card .body > *, .card .price > * { min-width: 0; margin-top: 0; text-align: left; }
.card .thumb > img, .card .thumb.no-shot, .strip { height: auto; aspect-ratio: 4 / 3; }
.card .thumb > img, .strip img { object-fit: cover; background: var(--panel); }
/* Кадр заметно шире рамки (панорама, 16:9 в рамке 4:3) — целиком на сером, иначе `cover`
   режет машине нос и корму. Вертикальный снимок и коллаж остаются `cover`: обрезается небо,
   асфальт или чёрные поля скриншота. Класс ставит скрипт в index.html. */
.card .thumb > img.fit, .strip img.fit { object-fit: contain; }
.card .price > .foot { display: flex; flex-direction: row; gap: 8px; margin: 0; }
.card .price > .foot > a { height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 16px; white-space: nowrap; }

/* Телефон: фото от края до края карточки 16:9, как в мокапе (358×201 против 328×185 в main):
   4:3 давало 358×267, но карточка вырастала с 481 до 554px, и машин на экране становилось
   меньше. Под фото цена с плашкой одной строкой, «N похожих машин» под плашкой, название,
   характеристики, проверки и две кнопки в ряд. «21 подтверждено · 13 молчат» — в карточке
   машины. Полоса замечания — левой рамкой: внутренняя тень пряталась под фото. */
@media (max-width: 699px) {
  .card { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: none; row-gap: 0; column-gap: 10px; padding: 0 14px 14px; overflow: hidden; }
  .card > .shots { grid-column: 1 / -1; grid-row: auto; margin: 0 -14px 12px; order: 0; }
  .card .thumb > img, .card .thumb.no-shot, .card .strip { aspect-ratio: 16 / 9; }
  .card.is-caution { box-shadow: none; border-left: 4px solid var(--caution); }
  .card.is-fail { box-shadow: none; border-left: 4px solid var(--fail); }
  .card .thumb, .card .strip { border-radius: 0; }
  .card .body > *, .card .price > * { grid-column: 1 / -1; order: 8; }
  .card .price > .ask { grid-column: 1; order: 1; align-self: center; font-size: 25px; line-height: 1.1; }
  .card .price > .delta { grid-column: 2; order: 1; align-self: center; justify-self: start; margin: 0; max-width: 100%; }
  .card .body > h3, .card .body > .ttl { order: 2; margin-top: 8px; }
  .card .body > .specs { order: 3; margin-top: 4px; }
  .card .body > .where { order: 4; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card .price > .cut, .card .price > .debt, .card .price > .adv { order: 5; margin-top: 6px; }
  .card .body > .verdict { order: 6; margin-top: 10px; }
  .card .body > .know { order: 7; margin-top: 6px; }
  .card .body > .flags { margin-top: 10px; }
  .card .body > .checks, .card .price > .landed { margin-top: 8px; }
  .card .price > .foot { order: 10; margin-top: 12px; padding-top: 0; }
  .card .price > .foot > a { flex: 1 1 0; min-width: 0; padding: 0 10px; }
  .card .price > .peers { grid-column: 2; order: 1; margin-top: 2px; font-size: 11.5px; }
  .card .body > .cnt { display: none; }
}

/* Планшет и десктоп: фото — левая колонка до 340px (было 210–248), справа название и цена
   в одну строку, ниже описание во всю ширину. Фото охватывает все строки, последняя строка
   гибкая (1fr): кнопки прижаты к низу фото, а высокое фото не раздвигает строки текста
   (элемент, пересекающий гибкую дорожку, не растит автоматические). */
@media (min-width: 700px) {
  .card {
    grid-template-columns: clamp(240px, 38%, 340px) minmax(0, 1fr) auto;
    grid-template-rows: repeat(13, auto) 1fr; grid-template-areas: none;
    column-gap: 18px; row-gap: 0; padding: 14px;
  }
  .card > .shots { grid-column: 1; grid-row: 1 / -1; align-self: start; }
  .card .body > *, .card .price > * { grid-column: 2 / -1; }
  .card .body > h3, .card .body > .ttl { grid-column: 2; grid-row: 1; align-self: center; }
  .card .price > .ask { grid-column: 3; grid-row: 1; text-align: right; font-size: 26px; line-height: 1.1; }
  .card .body > .specs { grid-column: 2; grid-row: 2; margin-top: 6px; }
  .card .price > .delta { grid-column: 3; grid-row: 2; justify-self: end; align-self: start; margin: 8px 0 0; max-width: 190px; }
  .card .body > .where { grid-column: 2; grid-row: 3; margin-top: 4px; }
  .card .price > .peers { grid-column: 3; grid-row: 3; text-align: right; margin-top: 4px; }
  .card .price > .cut[data-tour] { grid-row: 4; margin-top: 8px; }
  .card .price > .cut:not([data-tour]) { grid-row: 5; margin-top: 4px; }
  .card .price > .debt { grid-row: 6; margin-top: 4px; }
  .card .price > .adv { grid-row: 7; margin-top: 6px; padding-top: 0; border-top: 0; }
  .card .body > .verdict { grid-row: 8; margin-top: 12px; }
  .card .body > .know { grid-row: 9; margin-top: 8px; }
  .card .body > .cnt { grid-row: 10; margin-top: 4px; }
  .card .body > .flags { grid-row: 11; margin-top: 10px; }
  .card .body > .checks { grid-row: 12; margin-top: 8px; }
  .card .price > .landed { grid-row: 13; }
  .card .price > .foot { grid-row: 14; align-self: end; justify-content: flex-end; margin-top: 14px; padding-top: 0; }
}

/* ================================================================ Иван 10.10, поздний вечер
   1. ПЛАШКА ЦЕНЫ ОБНИМАЕТ ТЕКСТ. «Надпись занимает слишком мало места в отведённом ей круге,
      криво выглядит»: на десктопе пилюля упиралась в max-width 190px, «ожидаемой» уходила на
      вторую строку, а коробка оставалась шириной в потолок — справа пустой зелёный хвост, и
      радиус 999px на двух строках давал кляксу. Цвет, слова и процент те же (плашку не
      меняем, только геометрию): на планшете и десктопе пилюля в одну строку, колонка цены
      `auto` подрастает под неё; на телефоне, где рядом крупная цена, перенос остаётся
      возможен, поэтому радиус 11px — на одной строке это та же пилюля (высота 22px), на двух
      ровный прямоугольник, строки выровнены `balance`. Текстовые варианты без заливки
      (`thin`, `none`, `ask`, `nofinal`) — фразы, их переносить можно. */
.delta.good, .delta.dear, .delta.bait { border-radius: 11px; text-wrap: balance; }
@media (min-width: 700px) {
  .card .price > .delta.good, .card .price > .delta.dear, .card .price > .delta.bait {
    max-width: none; white-space: nowrap; margin-top: 7px;
  }
}

/* 2. ЛЕНТА «НРАВИТСЯ» НА ГЛАВНОЙ ВЕРНУВШЕГОСЯ: отложенные машины вместо просмотренных,
      изменившиеся первыми, у каждой значки изменений. Скил vinpasi-design (data-design.md):
      цена вниз — зелёным, как «дешевле ожидаемой», вверх — янтарём, кадры и описание —
      нейтральные факты без оценки. Значок — иконка Solar и число или слово, без рамки. */
.hb-hl { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.hb-hl:hover { text-decoration: underline; text-underline-offset: 3px; }
.hb-hl .hi { color: var(--ink-faint); }
.hb-bd { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.hb-b { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px 0 5px; border-radius: 11px;
        background: var(--panel); color: var(--ink-dim); font-size: 11.5px; font-weight: 600; line-height: 1;
        font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb-b .hi { flex: none; }
.hb-b.k-drop, .hb-b.k-cut { background: rgba(23, 138, 76, .1); color: var(--ok); }
.hb-b.k-rise { background: rgba(181, 115, 15, .11); color: var(--caution); }
/* Без цены — подписью, а не жирной суммой: «цена не указана» в 16px bold ломалась на две строки
   и выталкивала год вправо (снимок 1440, 10.10). */
.hb-p.none { font-size: 13px; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }
/* На телефоне «Вы искали» живут в строке своих поисков над машинами (.hb-side скрыт), и блок
   без ленты «Нравится» оставался пустой коробкой с полями 22px. */
@media (max-width: 1023px) { .hb:not(:has(.hb-seen)) { display: none; } }
/* БЕЗ СКРИПТА НА ТЕЛЕФОНЕ (проверка функций 10.10): остров не встал, видна нативная сортировка
   «список + Показать», и в общей строке с «Фильтром» колонка `auto` сжимала кнопку шторки до
   32px — нажатие попадало в список, шторка не открывалась. Здесь сортировка уходит отдельной
   строкой под кнопку, как в main. `html.rail-js` ставит остров при монтировании. */
@media (max-width: 1023px) {
  html:not(.rail-js) .hm-bar .hm-sort { grid-column: 1 / -1; grid-row: 3; }
  html:not(.rail-js) .hm-bar.is-board .hm-sort { grid-row: 2; }
  html:not(.rail-js) .hm-bar .hm-panel { grid-column: 1 / -1; }
}

/* ================================================================ Иван 11.10, после выкатки
   1. Блок «продолжить», десктоп: длинный недавний поиск («Tesla · ≤ $14 000 · Растаможена · без
      провалов…») уезжал под ленту машин. Неявная колонка сетки `.hb-side` росла по nowrap-тексту
      чипа; явная колонка `minmax(0, 1fr)` держит 260px, чип режется многоточием. */
@media (min-width: 1024px) {
  .hb-side, .hb-recent, .hb-chips { min-width: 0; }
  .hb-side { grid-template-columns: minmax(0, 1fr); }
  .hb-chips .hb-chip { max-width: 100%; }
}
/* 2. Полоса счёта: «75 741 объявление в базе сейчас» и «66 204 без замечаний · …» стояли по
      центру, а не по одной базовой линии — серая строка выше подписи числа. */
@media (min-width: 1024px) {
  .hm-bar .hm-line { align-items: baseline; }
  .hm-bar .hm-line > .hm-sort, .hm-bar .hm-line > .hm-panel { align-self: center; }
}
/* 3. Ряд «Ваши» на десктопе: чипы своих поисков уезжали вбок в прокрутку с затуханием — на
      ширине 1440 места хватает, переносим строкой ниже; подпись — по центру первого ряда. */
@media (min-width: 1024px) {
  .hm-presets { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; align-items: center; row-gap: 8px; }
  .hm-presets .hm-pcap { align-self: center; }
}