/* Кубики дизайна «Большого» — 2/2: детали. Только переменные из css/kit/tokens.css, без своих цветов.
   Классы с приставкой k- — чтобы не задевать старые стили страниц (styles.css и др.).

   .k-btn            кнопка: белая с рамкой; .k-btn--brand синяя; .k-btn--ghost без рамки; .k-btn--s маленькая;
                     .k-btn--icon квадратная (только пиктограмма); .k-btn--block на всю ширину. Подпись — <span class="k-btn__txt">.
   .k-chip           чип-группа; выбранный — .is-on или aria-pressed="true"; .k-chip-sep — разделитель групп.
   .k-chipx          выбранный фильтр с крестиком: <span class="k-chipx"><b>Ducati</b><button class="k-chipx__x" aria-label="Убрать">×</button></span>.
   .k-field          подпись + поле: <label class="k-field"><span class="k-field__label">…</span><input class="k-input"></label>;
                     .k-input / .k-select / .k-textarea — сами поля (16px — телефон не увеличивает страницу).
   .k-searchbar      строка поиска с «Найти» вплотную (как Авито): пиктограмма + поле + .k-searchbar__go.
   .k-badge          бейдж: --copart --iaai --used (Б/у) --salvage (аварийный) --buy (Buy Now) --reserve (резерв) --timer --sold;
                     общие: --brand --ok --warn --bad --muted --soon.
   .k-ico            пиктограмма из спрайта img/kit/icons.svg: <svg class="k-ico" aria-hidden="true"><use href="#k-i-search"/></svg>.
   .k-veh            транспорт (6 видов, сетка 120×66, цвет — color): <svg class="k-veh" viewBox="0 0 120 66"><use href="#k-v-auto"/></svg>;
                     виды: auto moto atv buggy pwc snow. Других видов на сайте нет. Подложка — .k-veh-box.
   .k-sprite         невидимый контейнер спрайта (вставлен в шапку).  .k-vh — текст только для экранного диктора.
   .k-wrap           ширина содержимого с полями. */

.k-wrap { box-sizing: border-box; max-width: var(--k-wrap); margin: 0 auto; padding: 0 var(--k-gut); }

/* ---------- пиктограммы ---------- */
.k-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.k-ico {
  width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.2em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.k-ico--l { width: 22px; height: 22px; }
.k-veh { width: 104px; height: 58px; flex: none; display: inline-block; color: var(--k-brand); fill: currentColor; stroke: none; }
.k-veh-box { display: grid; place-items: center; background: linear-gradient(135deg, #e7f0f9, #cfe0f2); border-radius: var(--k-r-s); }
.k-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- кнопки: один вид, разница только цветом ---------- */
.k-btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 0; height: var(--k-h); padding: 0 18px; margin: 0;
  border: 1px solid var(--k-line); border-radius: var(--k-r); background: var(--k-bg); color: var(--k-ink);
  font: var(--k-fw-b) 14px/1 var(--k-font); letter-spacing: 0; text-transform: none; text-decoration: none;
  white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
  -webkit-appearance: none; appearance: none;
}
.k-btn:hover { border-color: var(--k-brand-line); color: var(--k-brand); background: var(--k-bg); }
.k-btn:focus-visible { outline: 0; box-shadow: var(--k-focus); }
.k-btn[hidden] { display: none !important; }
.k-btn--brand { background: var(--k-brand); border-color: var(--k-brand); color: var(--k-on-brand); }
.k-btn--brand:hover { background: var(--k-brand-h); border-color: var(--k-brand-h); color: var(--k-on-brand); }
.k-btn--ghost { border-color: transparent; background: transparent; }
.k-btn--ghost:hover { background: var(--k-bg-2); border-color: transparent; }
.k-btn--s { height: var(--k-h-s); padding: 0 13px; font-size: 13.5px; }
.k-btn--icon { width: var(--k-h); padding: 0; }
.k-btn--s.k-btn--icon { width: var(--k-h-s); }
.k-btn--block { display: flex; width: 100%; }
.k-btn:disabled, .k-btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }

/* ---------- чипы ---------- */
.k-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-sp-2); }
.k-chip {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: var(--k-h-s); padding: 0 14px; margin: 0;
  border: 1px solid var(--k-line); border-radius: var(--k-r); background: var(--k-bg); color: var(--k-ink-2);
  font: var(--k-fw-x) 13.5px/1 var(--k-font); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: border-color .12s, color .12s, background-color .12s; -webkit-appearance: none; appearance: none;
}
.k-chip:hover { border-color: var(--k-brand-line); color: var(--k-brand); }
.k-chip:focus-visible { outline: 0; box-shadow: var(--k-focus); }
.k-chip.is-on, .k-chip[aria-pressed="true"], .k-chip[aria-selected="true"] { background: var(--k-brand); border-color: var(--k-brand); color: var(--k-on-brand); }
.k-chip__n { font-weight: var(--k-fw-m); opacity: .7; }
.k-chipx {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 7px 5px 12px; border: 1px solid var(--k-brand-line);
  border-radius: var(--k-r-pill); background: var(--k-brand-soft); color: var(--k-brand); font: var(--k-fw-x) 13px/1.2 var(--k-font);
}
.k-chipx b { font-weight: var(--k-fw-h); }
.k-chipx__x {
  display: grid; place-items: center; width: 18px; height: 18px; padding: 0; margin: 0; border: 0; border-radius: 50%;
  background: var(--k-brand); color: var(--k-on-brand); font: 700 12px/1 var(--k-font); cursor: pointer;
}
.k-chipx__x:hover { background: var(--k-brand-h); }
.k-chip-sep { width: 1px; height: 24px; background: var(--k-line); margin: 0 4px; }

/* ---------- поля ---------- */
.k-field { display: grid; gap: 6px; min-width: 0; font-family: var(--k-font); }
.k-field__label { font-size: 13px; font-weight: var(--k-fw-b); color: var(--k-ink-2); }
.k-field__hint { font-size: var(--k-fs-xs); color: var(--k-muted); }
.k-field__err { font-size: var(--k-fs-xs); color: var(--k-bad-ink); }
.k-input, .k-select, .k-textarea {
  box-sizing: border-box; width: 100%; min-width: 0; height: var(--k-h-fld); padding: 0 14px; margin: 0;
  border: 1px solid var(--k-line); border-radius: 10px; background: var(--k-bg); color: var(--k-ink);
  font: var(--k-fw-m) 16px/1.3 var(--k-font); outline: 0; transition: border-color .15s, box-shadow .15s;
}
.k-textarea { height: auto; min-height: 96px; padding: 10px 14px; resize: vertical; }
.k-select { -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--k-muted) 50%), linear-gradient(135deg, var(--k-muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.k-input::placeholder, .k-textarea::placeholder { color: var(--k-muted); }
.k-input:hover, .k-select:hover, .k-textarea:hover { border-color: var(--k-brand-line); }
.k-input:focus, .k-select:focus, .k-textarea:focus { border-color: var(--k-brand); box-shadow: var(--k-focus); }
.k-input[aria-invalid="true"] { border-color: var(--k-bad); }

/* ---------- строка поиска с «Найти» вплотную ---------- */
.k-searchbar {
  box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; height: var(--k-h-fld);
  padding: 0 0 0 14px; border: 2px solid var(--k-brand); border-radius: 12px; background: var(--k-bg);
  overflow: hidden; transition: box-shadow .15s;
}
.k-searchbar:focus-within { box-shadow: var(--k-focus); }
.k-searchbar > .k-ico { color: var(--k-brand); width: 19px; height: 19px; }
.k-searchbar__input {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; margin: 0; border: 0; outline: 0; background: transparent;
  color: var(--k-ink); font: var(--k-fw-m) 16px/1.2 var(--k-font); -webkit-appearance: none; appearance: none;
}
.k-searchbar__input:focus { outline: 0; border: 0; box-shadow: none; }  /* рамку фокуса рисует сама строка */
.k-searchbar__input::placeholder { color: var(--k-muted); }
.k-searchbar__input::-webkit-search-decoration, .k-searchbar__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.k-searchbar__go {
  flex: none; align-self: stretch; margin: 0; padding: 0 22px; border: 0; border-radius: 0; background: var(--k-brand);
  color: var(--k-on-brand); font: var(--k-fw-h) 13.5px/1 var(--k-font); letter-spacing: 0; text-transform: none; cursor: pointer;
}
.k-searchbar__go:hover { background: var(--k-brand-h); }
.k-searchbar__go:focus-visible { outline: 2px solid var(--k-on-brand); outline-offset: -4px; }

/* ---------- бейджи ---------- */
.k-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--k-r-s);
  background: var(--k-bg-3); color: var(--k-ink-2); font: var(--k-fw-h) 11px/1.3 var(--k-font); white-space: nowrap;
}
.k-badge--brand { background: var(--k-brand-soft); color: var(--k-brand); }
.k-badge--ok { background: var(--k-ok-soft); color: var(--k-ok-ink); }
.k-badge--warn { background: var(--k-warn-soft); color: var(--k-warn-ink); }
.k-badge--bad { background: var(--k-bad-soft); color: var(--k-bad-ink); }
.k-badge--muted { background: var(--k-bg-3); color: var(--k-muted); }
.k-badge--copart { background: var(--k-copart); color: #fff; }
.k-badge--iaai { background: var(--k-iaai); color: #fff; }
.k-badge--used { background: var(--k-sea-soft); color: var(--k-sea-ink); }
.k-badge--salvage { background: var(--k-bad-soft); color: var(--k-bad-ink); }
.k-badge--buy { background: var(--k-ok); color: #fff; }
.k-badge--reserve { background: var(--k-warn-soft); color: var(--k-warn-ink); }
.k-badge--timer { background: var(--k-ink); color: #fff; }
.k-badge--sold { background: var(--k-ok-soft); color: var(--k-ok-ink); }
.k-badge--soon { padding: 2px 6px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; background: var(--k-bg-3); color: var(--k-muted); }

/* ---------- ссылка ---------- */
.k-link { color: var(--k-brand); text-decoration: none; font-weight: var(--k-fw-b); }
.k-link:hover { color: var(--k-brand-h); text-decoration: underline; }