/* ============================================================================
   Webmarket — шапка и навигация. Один файл на витрину и Mini App.
   ----------------------------------------------------------------------------
   Разметку рисует nav.js, стили лежат здесь. Порознь их держать нельзя:
   index.html и app.html — две реализации одного окна, и расходились они
   молча, каждая своей правкой. Общий файл делает расхождение невозможным.

   Цвета, радиусы, отступы и площадь касания — из kit.css. Здесь только
   композиция: бренд, одно поле поиска, одна строка действий. Разделов над
   выдачей нет — они целиком за кнопкой «Категории», а где ты находишься,
   говорят хлебные крошки.
   ============================================================================ */

:root {
  /* Поиск — главный орган страницы, но не баннер во весь экран. 44 —
     та же площадь касания, что у кнопок рядом; 640 — ширина, при которой
     строка читается как часть композиции, а не как поле ввода письма. */
  --wm-search-h: 44px;
  --wm-search-w: 640px;
  /* Ширина брендового блока равна ширине поля: они стоят одной колонкой. */
  --wm-head-w: 660px;
  --wm-wide-w: 1160px;
}

.wm-nav {
  position: sticky; top: 0; z-index: 30; background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
/* Прокрутили — шапка отделяется линией от уехавшего под неё содержимого. */
.wm-nav--slim { border-bottom-color: var(--line); box-shadow: var(--shadow-1); }
.wm-nav__in { position: relative; padding: 0 var(--s-5); }
.wm-nav__row {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
  max-width: var(--wm-head-w); margin: 0 auto; padding: 30px 0 14px;
  transition: padding var(--t-base), gap var(--t-base);
}

/* ── бренд ────────────────────────────────────────────────────────────
   Три строки, и ни одна не украшение: кто мы, где мы и что делаем. Без
   них на первом экране оставалась эмблема, а о чём сайт — узнать неоткуда.
   Это не hero: текст, а не картинка во весь экран. */
.wm-brand {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
  min-width: 0; max-width: 100%; text-align: center; flex: 0 0 auto;
}
.wm-brand__row {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-2); flex-wrap: wrap; min-width: 0;
}
.wm-brand__link {
  display: inline-flex; align-items: center; gap: var(--s-2); flex: 0 0 auto;
  min-width: 0; text-decoration: none; color: inherit; border-radius: var(--r-sm);
}
.wm-brand__mark {
  display: block; flex: 0 0 auto; width: var(--wm-mark, 32px); height: var(--wm-mark, 32px);
  transition: width var(--t-base), height var(--t-base);
}
.wm-brand__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
:root[data-theme="dark"] .wm-brand__mark {
  background: var(--logo-plate); border-radius: var(--r-sm);
  padding: 3px; box-sizing: content-box;
}
.wm-brand__name {
  font: 700 22px/1.1 var(--font); letter-spacing: -.02em; color: var(--text);
  white-space: nowrap; transition: font-size var(--t-base);
}
.wm-brand__tag { font: 400 13px/1.15 var(--font); color: var(--text-3); white-space: nowrap; }
.wm-brand__claim { margin: 0; font: 500 15px/1.35 var(--font); color: var(--text-2); }

/* ── поиск ────────────────────────────────────────────────────────────
   Поле одно на страницу. Их было два — липкое в шапке и крупное в hero, —
   и на первом экране они стояли друг под другом: два одинаковых поля
   спрашивают человека, каким из них искать. */
.wm-search {
  position: relative; display: flex; align-items: center;
  width: 100%; max-width: var(--wm-search-w); min-width: 0;
}
.wm-search__ico { position: absolute; left: 13px; color: var(--text-3); pointer-events: none; }
.wm-search__in {
  width: 100%; height: var(--wm-search-h); padding: 0 44px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  /* Шестнадцать — не вкус: на меньшем кегле iOS приближает страницу,
     как только палец попадает в поле, и человек оказывается в увеличенной
     вёрстке, из которой сам не выберется. */
  font-size: 16px; -webkit-appearance: none; appearance: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.wm-search__in::-webkit-search-cancel-button { display: none; }
.wm-search__in::placeholder { color: var(--text-3); }
.wm-search__in:hover { border-color: var(--line-strong); }
.wm-search__in:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.wm-search__clear {
  position: absolute; right: 2px; width: 40px; height: 40px; display: grid;
  place-items: center; background: none; border: 0; border-radius: var(--r-sm);
  color: var(--text-3); cursor: pointer;
}
.wm-search__clear:hover { background: var(--surface); color: var(--text); }

/* ── строка действий ──────────────────────────────────────────────────
   Три кнопки и ничего больше: что показать, чем сузить, где дешевле. */
.wm-bar {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  max-width: var(--wm-head-w); margin: 0 auto; padding: 0 0 var(--s-5);
  min-width: 0; overflow-x: auto; scrollbar-width: none;
  transition: padding var(--t-base);
}
.wm-bar::-webkit-scrollbar { display: none; }
.wm-bar > * { flex: 0 0 auto; }
.wm-bar .k-btn { min-height: var(--tap); }
/* Счётчик наложенных фильтров: кнопка обязана отвечать, сужено ли уже. */
.wm-bar__filters { position: relative; }
.wm-bar__filters[hidden] { display: none !important; }
.wm-bar__filters[data-count]:not([data-count="0"])::after {
  content: attr(data-count); position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink);
  font: 700 10.5px/17px var(--font); text-align: center;
}
/* Нечем сузить — кнопка гаснет, но остаётся кнопкой. Спрятать её нельзя:
   ряд из трёх действий превратился бы в ряд из двух, и человек решил бы,
   что фильтров у каталога нет вовсе. Приглушённость и площадь касания
   приходят из kit.css вместе со всем выключенным; здесь возвращается
   только курсор — kit гасит указатели целиком, и причина переставала быть
   видна. Нажатие всё равно не пройдёт: его не пускает сам disabled. */
.wm-bar__filters[disabled] { pointer-events: auto; cursor: not-allowed; }

.wm-bar .k-btn[aria-pressed="true"], .wm-bar .k-btn.wm-on {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}

/* ── «ещё»: язык, тема, вход, заявка ──────────────────────────────────
   Настройки не должны спорить с поиском за первый экран, но и прятать их
   некуда: в Telegram у приложения своих настроек нет вовсе. */
.wm-more {
  position: absolute; right: var(--s-2); top: var(--s-3);
  display: grid; place-items: center; width: var(--tap); height: var(--tap);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-md);
  color: var(--text-2); cursor: pointer; transition: top var(--t-base);
}
.wm-more:hover { background: var(--surface); color: var(--text); }
.wm-menu {
  position: absolute; right: var(--s-2); top: 58px; z-index: 45;
  width: min(300px, 92vw); padding: var(--s-2);
  background: var(--elevated); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-3);
}
.wm-menu__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: var(--tap); padding: 0 var(--s-2); border-radius: var(--r-sm);
}
.wm-menu__lbl { font-size: 14px; color: var(--text-2); }
.wm-menu__sel { width: auto; min-width: 92px; }
button.wm-menu__row {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  font: 550 14px/1.2 var(--font); color: var(--text);
}
button.wm-menu__row:hover { background: var(--surface); }
button.wm-menu__row.wm-on { color: var(--accent); }
.wm-menu__sep { height: 1px; background: var(--line); margin: var(--s-2) var(--s-1); }
.wm-theme { width: 40px; padding: 0; }
.wm-theme svg { display: none; }
.wm-theme svg.on { display: block; }

/* ── где я нахожусь ───────────────────────────────────────────────────
   Взамен подсвеченной вкладки: выбранный раздел и категория названы
   словами, и каждое слово — кнопка «вернуться на шаг назад». */
.wm-sub {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  max-width: var(--wm-wide-w); margin: 0 auto; padding: 0 0 var(--s-3);
}
.wm-crumbs {
  display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap;
  min-width: 0; font-size: 13.5px; color: var(--text-2);
}
.wm-crumbs button {
  min-height: var(--tap); padding: 0 var(--s-1); background: none; border: 0;
  border-radius: var(--r-xs); color: var(--text-2); cursor: pointer; font: inherit;
}
.wm-crumbs button:hover { color: var(--accent); text-decoration: underline; }
.wm-crumbs__sep { color: var(--text-3); font-size: 12px; }
.wm-crumbs__cur { color: var(--text); font-weight: 600; }
.wm-chips { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-width: 0; }
.wm-count {
  margin-left: auto; color: var(--text-3); font-size: 13px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* ── «часто ищут» ─────────────────────────────────────────────────────
   Таблички по ширине текста, одной строкой. Не сетка: у сетки колонка
   одинаковая, и короткое «Туры» растягивается до ширины «Футболок и
   кофт», а шесть равных плиток во всю ширину — это уже второй каталог.
   На телефоне ряд едет вбок и правый край гаснет: видно, что он длиннее. */
.wm-hints {
  position: relative; display: flex; align-items: center; gap: var(--s-3);
  justify-content: center; max-width: 100%;
  font-size: 13.5px; color: var(--text-3);
}
.wm-hints > b { font-weight: 500; color: var(--text-3); flex: 0 0 auto; }
.wm-hints__row {
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-2);
  min-width: 0; padding: 3px 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.wm-hints__row::-webkit-scrollbar { display: none; }
.wm-hints__row > * { flex: 0 0 auto; }
.wm-hints::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 40px;
  pointer-events: none; background: linear-gradient(90deg, transparent, var(--bg));
  opacity: 0; transition: opacity var(--t-fast);
}
.wm-hints--more::after { opacity: 1; }
.wm-hints__row button {
  display: inline-flex; align-items: center; gap: var(--s-1); white-space: nowrap;
  min-height: 38px; padding: 0 var(--s-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--text-2); font: 550 13.5px/1 var(--font); cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.wm-hints__row button:hover { background: var(--bg); border-color: var(--line-strong); color: var(--text); }
/* Счётчик вторичен: он подтверждает, что подсказка не ведёт в пустоту,
   но названием не является. */
.wm-hints__row button i {
  font-style: normal; color: var(--text-3); font-weight: 400; font-size: 11.5px;
}

/* Прошлые запросы — там же, где подсказки, и по тем же правилам ряда. */
.wm-recent {
  display: flex; flex-wrap: nowrap; gap: var(--s-2); align-items: center;
  max-width: var(--wm-wide-w); margin: 0 auto var(--s-3);
  overflow-x: auto; scrollbar-width: none;
}
.wm-recent::-webkit-scrollbar { display: none; }
.wm-recent > * { flex: 0 0 auto; }

/* ── свёрнутая шапка ──────────────────────────────────────────────────
   Прокрутили — остаются эмблема, название и поле: по ним видно, где ты и
   чем искать. Город и фраза уходят: их уже прочитали наверху, а место
   нужно полю. */
.wm-nav--slim .wm-nav__row {
  flex-direction: row; gap: var(--s-3); padding: 9px 0 0;
  max-width: var(--wm-wide-w); padding-right: 52px;
}
.wm-nav--slim .wm-brand { gap: 0; }
.wm-nav--slim .wm-brand__tag, .wm-nav--slim .wm-brand__claim { display: none; }
.wm-nav--slim .wm-brand__link { --wm-mark: 26px; gap: var(--s-2); }
.wm-nav--slim .wm-brand__name { font-size: 16px; }
.wm-nav--slim .wm-bar {
  max-width: var(--wm-wide-w); padding: var(--s-2) 0 var(--s-2); justify-content: flex-start;
}
.wm-nav--slim .wm-more { top: var(--s-1); }
.wm-nav--slim .wm-menu { top: 46px; }
.wm-nav--slim .wm-hints { display: none; }

/* ── телефон ──────────────────────────────────────────────────────────
   Та же композиция, просто уже. Ни название, ни город, ни фраза с экрана
   не пропадают: это единственное место, где написано, что здесь такое. */
@media (max-width: 559px) {
  .wm-nav__in { padding-left: var(--s-4); padding-right: var(--s-4); }
  .wm-nav__row { padding: 18px 0 13px; gap: 13px; padding-right: var(--tap); }
  .wm-brand__link { --wm-mark: 28px; }
  .wm-brand__name { font-size: 18px; }
  .wm-brand__tag { font-size: 12px; }
  .wm-brand__claim { font-size: 12.5px; line-height: 1.3; }
  .wm-bar { justify-content: flex-start; padding-bottom: var(--s-4); }
  .wm-nav--slim .wm-nav__row { padding-right: var(--tap); }
  /* Подпись уходит над рядом: сбоку она съедала треть ширины, и в кадр
     попадало полторы таблички вместо трёх-четырёх. */
  .wm-hints { display: block; width: 100%; }
  .wm-hints > b { display: block; margin: 0 0 var(--s-2); }
  /* На 390 точках таблички ужимаются по бокам: с прежними полями в кадр
     помещались две, а две подсказки не читаются как ряд, который можно
     листать. Ширина по-прежнему по тексту — сжимаются поля, не буквы. */
  .wm-hints__row { gap: 6px; }
  .wm-hints__row button { padding: 0 var(--s-2); gap: 5px; font-size: 13px; }
  .wm-hints__row button i { font-size: 11px; }
  .wm-more { top: var(--s-1); right: var(--s-1); }
  .wm-menu { top: 46px; right: var(--s-1); }
}

/* Крупный палец: добираем площадь касания там, где её не даёт текст. */
@media (pointer: coarse) {
  .wm-brand__link { min-height: var(--tap); }
  .wm-hints__row button { min-height: var(--tap); }
  .wm-menu__sel { min-height: var(--tap); }
  /* Крестик очистки — тоже палец, а не мышь. Растёт только площадь: поле
     под ним прежнего роста, иначе кнопка вылезет за его края. */
  .wm-search__clear { width: var(--tap); height: var(--tap); top: 50%; transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .wm-nav, .wm-nav__row, .wm-bar, .wm-more, .wm-menu,
  .wm-brand__mark, .wm-brand__name, .wm-hints::after,
  .wm-search__in, .wm-hints__row button { transition: none; }
}