/* Острова Base UI: рейл фильтра и сортировка. Все классы с префиксом `bu-`, цвета только из
   токенов app.css. Нативная форма прячется, когда остров смонтирован (`html.rail-js`). */
html.rail-js .picker-wrap { display: none !important; }
html.rail-js .hm-sort .sortform { display: none; }
#rail-app[hidden] { display: none; }

.bu-rail { display: block; min-width: 0; font-variant-numeric: tabular-nums; }
.bu-rail *, .bu-pop *, .bu-sheet * { box-sizing: border-box; }
/* app.css красит и раздувает любой <button> (синяя заливка, 9px 18px): здесь кнопки
   сбрасываются до нуля, и каждая одевается своим правилом ниже. */
/* `:where()` держит специфичность на уровне `button` из app.css: сброс выигрывает только
   порядком, а любой `.bu-*` класс ниже перекрывает его. */
:where(.bu-rail, .bu-pop, .bu-sheet, .bu-sort) button {
  font: inherit; color: inherit; padding: 0; margin: 0; background: transparent; border: 0;
  border-radius: 0; font-weight: inherit; line-height: inherit; box-shadow: none; text-align: inherit;
}
:where(.bu-rail, .bu-pop, .bu-sheet, .bu-sort) svg { flex: none; }

/* ── Поле поиска ─────────────────────────────────────────────────────────────────────── */
.bu-q { display: block; margin: 0 0 6px; }
.bu-q-lab { display: block; font-size: 12.5px; color: var(--ink-dim); margin: 0 0 6px; }
.bu-field { position: relative; display: flex; align-items: center; }
.bu-field > svg { position: absolute; left: 11px; color: var(--ink-faint); pointer-events: none; }
.bu-input {
  width: 100%; min-height: 40px; padding: 8px 36px 8px 34px;
  border: 1px solid var(--line); border-radius: var(--r-sm, 8px); background: var(--bg, #fff);
  font: inherit; font-size: 14px; color: var(--ink); outline: none;
}
.bu-input::placeholder { color: var(--ink-faint); }
.bu-input:hover { border-color: var(--line-strong, #C9CED6); }
.bu-input:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.bu-field .bu-clear {
  position: absolute; right: 4px; width: 32px; height: 32px; display: inline-flex;
  align-items: center; justify-content: center; border: 0; background: transparent;
  border-radius: 6px; color: var(--ink-faint); cursor: pointer;
}
.bu-field .bu-clear:hover { background: var(--panel); color: var(--ink); }
.bu-q-hint { display: block; margin: 5px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--ink-faint); }

/* ── Строки-аккордеон ────────────────────────────────────────────────────────────────── */
.bu-rows { margin-top: 8px; border-top: 1px solid var(--line); }
.bu-row { border-bottom: 1px solid var(--line); }
.bu-row-h { display: flex; align-items: center; gap: 4px; margin: 0; font: inherit; }
/* Заголовок строки в две линии — имя сверху, выбранное под ним, тем же рисунком, что у
   нативного рейла в board.css: на 280px «Год, кузов, пробег» и «2015+» в одну линию не
   помещались и переносили имя. */
.bu-row-t {
  flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 24px;
  grid-template-rows: auto auto; column-gap: 6px; row-gap: 1px; align-items: center;
  min-height: 54px; padding: 8px 0; border: 0; background: transparent; text-align: left;
  cursor: pointer; border-radius: 6px;
}
.bu-row-t:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bu-row-t > b { grid-column: 1; grid-row: 1; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden;
                display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
/* Без значения строка в одну полосу — шеврон по центру подписи, а не на 6px ниже. */
.bu-row-t:has(.bu-row-v.empty) { grid-template-rows: auto; }
.bu-row-v {
  grid-column: 1; grid-row: 2; min-width: 0; text-align: left; font-size: 13px; color: var(--ink);
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bu-row-c { grid-column: 2; grid-row: 1 / -1; }
@media (max-width: 1023px) { .bu-row-t { min-height: 58px; } .bu-row-t > b { font-size: 15px; } }
/* Пустая строка значения не печатает «любой»: значение появляется после выбора. */
.bu-row-v.empty { display: none; }
/* Раскрытая строка — серая панель целиком, с шапкой: граница между «что открыто» и
   соседними строками была одной линией, и поля читались как продолжение списка. */
/* Вписана в колонку, а не шире её: `.rail` режет по горизонтали (overflow-x: hidden), и
   заливка с margin −12px обрезалась слева вровень с текстом, а поля упирались в правый край
   (Иван 10.10: «серая заливка до края выглядит криво»). Отступ 12px внутри со всех сторон. */
.bu-row:has(.bu-row-t[data-panel-open]) {
  background: var(--panel); margin: 4px 0; padding: 0 12px 4px; border-radius: 12px;
  border-bottom-color: transparent;
}
.bu-row:has(.bu-row-t[data-panel-open]) + .bu-row { border-top: 1px solid var(--line); }
.bu-row:has(.bu-row-t[data-panel-open]) .bu-row-x:hover { background: var(--bg); }
.bu-row-v i { font-style: normal; font-weight: 400; color: var(--ink-dim); }
.bu-row-v .out { margin-left: 6px; color: var(--fail); text-decoration: line-through; font-weight: 400; }
.bu-row-c { flex: none; color: var(--ink-dim); transition: transform .12s ease-out; }
.bu-row-t[data-panel-open] .bu-row-c { transform: rotate(180deg); }
.bu-row-x {
  flex: none; width: 40px; height: 40px; margin-right: -8px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 6px; color: var(--ink-faint);
}
.bu-row-x:hover { color: var(--fail); background: var(--panel); text-decoration: none; }
.bu-row-x.is-empty { visibility: hidden; pointer-events: none; }
.bu-row-x:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bu-panel {
  height: var(--accordion-panel-height); overflow: hidden;
  transition: height .15s ease-out;
}
.bu-panel[data-starting-style], .bu-panel[data-ending-style] { height: 0; }
/* Плотнее на 20px: раскрытая «Марка и модель» уводила «Цену» под закреплённую кнопку. */
.bu-panel-in { display: grid; gap: 10px; padding: 0 0 12px; }
.bu-panel-in > small { color: var(--ink-dim); font-size: 11.5px; line-height: 1.35; }

/* ── Поле: подпись сверху, контрол снизу ─────────────────────────────────────────────── */
.bu-fld { display: block; }
.bu-fld > span.bu-lab, .bu-lab { display: block; font-size: 13px; font-weight: 500; color: var(--ink); margin: 0 0 6px; }
.bu-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* ── Select ──────────────────────────────────────────────────────────────────────────── */
.bu-sel {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  min-height: 40px; padding: 7px 8px 7px 11px; border: 1px solid var(--line);
  border-radius: var(--r-sm, 8px); background: var(--bg, #fff); font-size: 14px; color: var(--ink);
  cursor: pointer; text-align: left; user-select: none;
}
.bu-sel:hover { border-color: var(--line-strong, #C9CED6); }
.bu-sel:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bu-sel[data-popup-open] { border-color: var(--ink); }
.bu-sel-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-sel-v[data-placeholder] { color: var(--ink-dim); }
.bu-sel-ic { flex: none; display: inline-flex; color: var(--ink-dim); }
.bu-pos { z-index: 60; outline: none; }
.bu-pop {
  min-width: var(--anchor-width); max-width: min(360px, calc(100vw - 24px));
  background: var(--bg, #fff); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(20, 25, 30, .14); color: var(--ink);
  transform-origin: var(--transform-origin);
  transition: opacity .12s ease-out, transform .12s ease-out;
}
.bu-pop[data-starting-style], .bu-pop[data-ending-style] { opacity: 0; transform: scale(.98); }
.bu-list { max-height: min(var(--available-height), 360px); overflow-y: auto; padding: 4px; scroll-padding: 4px; }
.bu-item {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  min-height: 36px; padding: 7px 8px; border-radius: 6px; font-size: 14px; cursor: default;
  outline: none; user-select: none;
}
.bu-item[data-highlighted] { background: var(--panel); }
.bu-item[data-selected] { font-weight: 600; }
.bu-item[data-disabled] { color: var(--ink-faint); }
.bu-ind { grid-column: 1; display: inline-flex; color: var(--ink); }
.bu-itext { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-n { grid-column: 3; font-size: 12px; color: var(--ink-faint); text-decoration: none; }
.bu-item[data-highlighted] .bu-n { color: var(--ink-dim); }
.bu-glab { padding: 10px 8px 4px; font-size: 12px; color: var(--ink-faint); }
.bu-empty { padding: 10px 8px; font-size: 13px; color: var(--ink-dim); }
.bu-scroll { display: flex; align-items: center; justify-content: center; height: 16px; font-size: 10px; color: var(--ink-dim); }

/* Подсказки одного поля: тип слева, подпись, число справа. */
.bu-sug { grid-template-columns: auto minmax(0, 1fr) auto; }
.bu-sug .bu-k { font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.bu-sug .bu-itext { white-space: normal; }
.bu-sug .bu-itext small { display: block; font-size: 11px; color: var(--ink-dim); }
.bu-sug.fix .bu-k { color: var(--caution); }

/* ── Combobox марки ──────────────────────────────────────────────────────────────────── */
.bu-cb { position: relative; display: flex; align-items: center; }
.bu-cb .bu-input { padding-left: 11px; padding-right: 64px; }
.bu-cb-btns { position: absolute; right: 4px; display: flex; gap: 2px; }
.bu-cb-btns button {
  width: 30px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; border-radius: 6px; color: var(--ink-faint); cursor: pointer;
}
.bu-cb-btns button:hover { background: var(--panel); color: var(--ink); }
.bu-cb-btns button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ── Список моделей ──────────────────────────────────────────────────────────────────── */
.bu-models {
  max-height: 224px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm, 8px);
  padding: 4px; background: var(--bg, #fff); scrollbar-width: thin;
}
.bu-models.empty { display: flex; align-items: center; min-height: 40px; padding: 6px 10px; }
.bu-models .bu-mhint { color: var(--ink-faint); font-size: 12px; line-height: 1.35; }
.bu-ck {
  display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 4px 6px;
  border-radius: 6px; font-size: 13px; cursor: pointer; user-select: none;
}
.bu-ck:hover { background: var(--panel); }
.bu-ck-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-ck-t em { font-style: normal; color: var(--ink-faint); margin-left: 4px; }
.bu-ck > u { text-decoration: none; font-size: 12px; color: var(--ink-faint); }
.bu-ckbox {
  flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line-strong, #C9CED6); border-radius: 5px; background: var(--bg, #fff);
}
.bu-ckbox[data-checked] { background: var(--ink); border-color: var(--ink); color: #fff; }
.bu-ckbox:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bu-ckind { display: inline-flex; }

/* ── Ползунок ────────────────────────────────────────────────────────────────────────── */
.bu-range { display: grid; gap: 6px; }
.bu-range-v { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink); }
.bu-range-v span { font-variant-numeric: tabular-nums; }
.bu-range-v span.any { color: var(--ink-dim); }
.bu-sl { display: block; padding: 8px 10px; }
.bu-sl-ctl { position: relative; display: flex; align-items: center; height: 20px; cursor: pointer; touch-action: pan-y; }
.bu-sl-track { position: relative; width: 100%; height: 4px; border-radius: 2px; background: var(--line); }
.bu-sl-ind { position: absolute; height: 100%; border-radius: 2px; background: var(--ink); }
.bu-sl-th {
  width: 20px; height: 20px; border-radius: 50%; background: var(--bg, #fff);
  border: 2px solid var(--ink); box-shadow: 0 1px 3px rgba(20, 25, 30, .18); outline: none;
}
.bu-sl-th[data-dragging] { box-shadow: 0 0 0 4px rgba(21, 25, 30, .12); }
.bu-sl-th:has(:focus-visible), .bu-sl-th:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── Переключатель «да / нет» ────────────────────────────────────────────────────────── */
.bu-tg { display: flex; gap: 6px; }
.bu-tgb {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm, 8px);
  background: var(--bg, #fff); font-size: 14px; cursor: pointer; user-select: none;
}
.bu-tgb u { text-decoration: none; font-size: 11.5px; color: var(--ink-faint); }
.bu-tgb:hover { border-color: var(--line-strong, #C9CED6); }
.bu-tgb[data-pressed] { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.bu-tgb[data-pressed] u { color: rgba(255, 255, 255, .7); }
.bu-tgb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── Тумблеры продавца ───────────────────────────────────────────────────────────────── */
.bu-swrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px;
  min-height: 44px; padding: 4px 0; cursor: pointer;
}
.bu-swrow > b { font-weight: 600; font-size: 14px; }
.bu-swrow > small { grid-column: 1; font-size: 11.5px; color: var(--ink-dim); line-height: 1.35; }
.bu-sw {
  grid-column: 2; grid-row: 1 / span 2; position: relative; display: inline-flex; align-items: center;
  width: 40px; height: 24px; padding: 2px; border-radius: 12px; border: 0;
  background: var(--line-strong, #C9CED6); cursor: pointer; transition: background .12s ease-out;
}
.bu-sw[data-checked] { background: var(--ink); }
.bu-sw:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bu-sw-th {
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(20, 25, 30, .25); transition: transform .12s ease-out;
}
.bu-sw[data-checked] .bu-sw-th { transform: translateX(16px); }

/* ── Числовые поля ───────────────────────────────────────────────────────────────────── */
.bu-num {
  width: 100%; min-height: 40px; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: var(--r-sm, 8px); font: inherit; font-size: 14px; color: var(--ink); background: var(--bg, #fff);
}
.bu-num:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }

/* ── Чипы «ещё условия» ──────────────────────────────────────────────────────────────── */
.bu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bu-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink);
  background: var(--bg, #fff); border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px 4px 10px;
}
.bu-chip:hover { text-decoration: none; border-color: var(--ink); }
.bu-chip svg { color: var(--ink-faint); }
.bu-chip.out { background: var(--fail); border-color: var(--fail); color: #fff; }
.bu-chip.out svg { color: rgba(255, 255, 255, .7); }

/* ── Все условия и кнопка ────────────────────────────────────────────────────────────── */
/* «Детальный поиск по всем условиям» — заметная вторичная кнопка (Иван 10.10: «надо
   выделить»): чёрная обводка 1,5px, значок настроек, 44px. Единственный вход в /filters. */
/* «Детальный фильтр»: залитая плашка со стрелкой в чёрном круге. Контурная кнопка в цвет
   текста терялась среди строк рельса (Иван 10.10), а чёрная заливка спорила бы с
   «Применить». Подпись короткая и в одну строку, значок и стрелка внутри плашки. */
.bu-all {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 0;
  min-height: 52px; padding: 8px 8px 8px 14px; border: 0; border-radius: 12px;
  font-size: 15px; font-weight: 700; color: var(--ink); background: var(--panel-2);
}
.bu-all > .hi { flex: none; }
.bu-all-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bu-all-go {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: #fff;
}
.bu-all:hover { background: var(--line); text-decoration: none; }
.bu-all:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bu-apply {
  position: sticky; bottom: 0; margin-top: 10px; padding: 10px 0 2px;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--bg, #fff) 40%);
}
/* На десктопе кнопка закреплена за экраном, а не за рейлом: липкий рейл до первой прокрутки
   стоит ниже фолда, и «Применить» вместе с ним (судья 09.10: ниже 900px при двух рядах чипов
   или раскрытой секции). Та же арифметика, что у нативной кнопки в board.css. */
@media (min-width: 1024px) {
  /* Запас под закреплённую кнопку — у хоста «Сохранить поиск…», который идёт последним. */
  .bu-save { padding-bottom: 80px; }
  /* Белая подложка: без неё кнопка лежала прямо на «Детальном поиске». */
  .bu-apply {
    position: fixed; left: max(20px, calc((100vw - 1200px) / 2 + 20px)); bottom: 0; width: 280px;
    margin: 0; padding: 12px 0 14px; background: var(--bg); z-index: 22;
  }
  .bu-apply button { box-shadow: 0 8px 22px rgba(20, 25, 30, .2); border-radius: 12px; }
}
.bu-apply button {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px;
  border: 0; border-radius: var(--r-sm, 8px); background: var(--ink); color: #fff;
  font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.bu-apply button:hover { background: #000; }
.bu-apply button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ── Шторка на телефоне ──────────────────────────────────────────────────────────────── */
.bu-backdrop {
  position: fixed; inset: 0; z-index: 49; background: rgba(20, 25, 30, .35);
  transition: opacity .2s ease-out;
}
.bu-backdrop[data-starting-style], .bu-backdrop[data-ending-style] { opacity: 0; }
.bu-sheet {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  background: var(--bg, #fff); color: var(--ink); overflow-y: auto; overscroll-behavior: contain;
  outline: none; transition: transform .22s ease-out, opacity .22s ease-out;
  padding: 0 14px calc(10px + env(safe-area-inset-bottom));
}
.bu-sheet[data-starting-style], .bu-sheet[data-ending-style] { transform: translateY(28px); opacity: 0; }
.bu-sheet-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px;
  margin: 0 -14px 10px; padding: 10px 14px; background: var(--bg, #fff); border-bottom: 1px solid var(--line);
}
.bu-sheet-head h2 { flex: 1; margin: 0; font-size: 16px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; }
.bu-sheet-head h2 b { font-size: 22px; font-weight: 700; }
.bu-sheet-head h2 span { font-size: 13px; color: var(--ink-dim); font-weight: 400; }
.bu-iconbtn {
  color: var(--ink);
  flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-sm, 8px); background: var(--bg, #fff); cursor: pointer;
}
.bu-iconbtn:hover { border-color: var(--ink); }
.bu-iconbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bu-sheet .bu-row-t { min-height: 52px; }
.bu-sheet .bu-row-t > b { font-size: 15px; }
.bu-sheet .bu-input, .bu-sheet .bu-sel, .bu-sheet .bu-num, .bu-sheet .bu-tgb { min-height: 44px; }
.bu-sheet .bu-ck { min-height: 44px; font-size: 14px; }
.bu-sheet .bu-models { max-height: 280px; }
.bu-sheet .bu-all { margin-bottom: 6px; }

/* ── Сортировка в полосе ─────────────────────────────────────────────────────────────── */
.bu-sort { display: inline-flex; }
.bu-sort .bu-sel { min-height: 34px; padding: 5px 6px 5px 10px; font-size: 13px; width: auto; max-width: 320px; }
/* На телефоне сортировка стоит в одном ряду с дверью фильтра и той же высоты. */
.bu-sel-short { display: none; }
/* Телефон: сортировка — кнопка со значком и коротким словом текущего порядка (sos_*), в одном
   ряду с «Фильтром». Строка «сортировка: …» над кнопкой убрана (Иван 10.10). */
@media (max-width: 1023px) {
  .bu-sort { display: flex; width: auto; min-width: 0; }
  .bu-sort .bu-sel { width: auto; max-width: 46vw; min-height: 48px; padding: 0 14px; border-radius: 12px; justify-content: center; gap: 6px; background: var(--bg, #fff); }
  .bu-sort .bu-sel-v, .bu-sort .bu-sel-ic { display: none; }
  .bu-sel-short { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink);
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}


@media (prefers-reduced-motion: reduce) {
  .bu-pop, .bu-backdrop, .bu-sheet, .bu-panel, .bu-row-c, .bu-sw, .bu-sw-th { transition: none; }
}

/* «Сохранить поиск…» в шторке: те же поля, что у рейла, и отступ от кнопки «Применить». */
.bu-sheet .bu-save { padding: 4px 0 24px; }

/* «От / до» полями над ползунком (скил vinpasi-design: поле — источник правды). */
.bu-num, .bu-nsel { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm, 8px);
                    background: var(--bg, #fff); color: var(--ink); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; }
.bu-num::placeholder { color: var(--ink-faint); }
.bu-num:focus-visible, .bu-nsel:focus-visible { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.bu-nsel { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
           background: var(--bg, #fff) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='none'%20stroke='%23596270'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='1.5'%20d='m19%209l-7%206l-7-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
.bu-err { color: var(--fail); font-size: 12px; }
@media (max-width: 1023px) { .bu-num, .bu-nsel { height: 44px; font-size: 16px; } }

/* ── Дизайнер 10.10 ──────────────────────────────────────────────────────────────────────── */
/* Липкая «Применить» в шторке — на сплошном фоне с тенью вверх: сквозь прозрачный градиент
   были видны строки и край «Детального поиска». Нижний вырез айфона учтён. */
.bu-sheet .bu-apply { background: var(--bg, #fff); margin: 10px -14px 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
                      box-shadow: 0 -8px 16px -12px rgba(20, 25, 30, .35); }
/* Планшет: шторка — боковая панель 480px с подложкой, а не весь экран с 60% пустоты. */
@media (min-width: 640px) and (max-width: 1023px) {
  .bu-sheet { inset: 0 0 0 auto; width: min(480px, 100%); border-left: 1px solid var(--line); box-shadow: -16px 0 40px -20px rgba(20, 25, 30, .4); }
  .bu-sheet[data-starting-style], .bu-sheet[data-ending-style] { transform: translateX(28px); }
}
/* Кольцо фокуса строк рельса внутрь, иначе `.rail` с overflow-x: hidden срезал его слева. */
.bu-row-t:focus-visible, .bu-row-x:focus-visible { outline-offset: -2px; }
/* Ручки ползунков 16px — цель касания 44px невидимым полем вокруг. */
.bu-sl-th { position: relative; }
.bu-sl-th::after { content: ""; position: absolute; inset: -14px; }