/* Каталог витрин (/catalog, /catalog/{niche}).

   Надстройка над site.css, а не отдельная тема: холст, токены, остров навигации,
   кнопки, блок «final» и подвал берутся оттуда — переход из каталога на витрину
   тенанта не должен читаться как уход на другой сайт. Здесь только то, чего у
   витрины нет: шапка раздела, плашки ниш и сетка карточек.

   Внешних запросов нет (шрифт и стили — свои, как на витрине). */

/* ─── Шапка раздела ─────────────────────────────────────────────────────── */
/* Отступ сверху — под фиксированный остров навигации: у витрины его держит хиро
   во весь экран, а здесь заголовок иначе уезжает под остров. */
.cat-head { padding-block: clamp(112px, 15vw, 168px) clamp(28px, 4vw, 44px); }
.cat-head h1 {
  margin-top: 18px;
  font-size: clamp(2.1rem, 5.6vw, 3.7rem);
  max-width: 22ch;
}
.cat-head .lede {
  margin-top: 20px; max-width: 56ch;
  font-size: clamp(1rem, 1.4vw, 1.14rem); color: var(--paper-dim);
}

/* ─── Плашки ниш ────────────────────────────────────────────────────────── */
/* На широком экране — перенос по строкам: шесть разделов не влезают в шеллу
   1180px, и лента со скроллом обрывала последнюю плашку на полуслове (правый край
   выглядел браком, а не приглашением скроллить). На узком — одна строка со
   скроллом: перенос там растил шапку на четыре этажа и уводил карточки под сгиб. */
.cat-facets {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px;
}
.cat-facets::-webkit-scrollbar { display: none; }
.cat-facet {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--hair);
  font-size: .88rem; color: var(--paper-dim); white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.cat-facet i { font-style: normal; font-size: .76rem; color: var(--paper-dim); }
.cat-facet:hover { color: var(--paper); border-color: var(--hair-2); }
.cat-facet.on {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--paper);
}
.cat-facet.on i { color: color-mix(in srgb, var(--accent) 70%, white); }

/* ─── Сетка карточек ───────────────────────────────────────────────────── */
.cat-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}
/* Карточка — ссылка целиком: «подробнее» мелким шрифтом на такой сетке никто не
   ищет, а крупная цель важнее всего на телефоне. */
.cat-card {
  display: flex; gap: 16px; height: 100%; padding: 14px;
  border-radius: 22px; background: var(--ink-2); border: 1px solid var(--hair);
  color: var(--paper);
  transition: border-color .22s, transform .22s, background .22s;
}
.cat-card:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, var(--ink-2));
  transform: translateY(-2px);
}
.cat-card:active { transform: scale(.99); }

.cat-pic {
  flex: none; width: 84px; height: 84px; border-radius: 16px; overflow: hidden;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 22%, var(--ink));
  border: 1px solid var(--hair);
}
.cat-pic img { width: 100%; height: 100%; object-fit: cover; }
/* Без фото — инициал на акценте: пустой прямоугольник читался как битая картинка
   (то же решение, что у карточек исполнителей на витрине). */
.cat-pic b {
  font-family: var(--display); font-size: 1.9rem; font-weight: 700;
  color: color-mix(in srgb, var(--accent) 76%, white);
}

.cat-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cat-chip {
  align-self: flex-start; padding: 3px 9px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--hair);
  /* 11px и --paper-dim: плашка ниши — функциональная подпись карточки, а на
     10px и 2.9:1 её не прочитать (аудит 07.09.2026). */
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper-dim);
}
.cat-title {
  font-family: var(--display); font-weight: 600; font-size: 1.08rem;
  letter-spacing: -.02em; line-height: 1.2;
}
.cat-addr, .cat-svc { font-size: .84rem; color: var(--paper-dim); }
/* Услуги — одна строка с обрезкой: карточки в сетке обязаны быть одной высоты,
   иначе ряд «дышит» на каждый салон с длинным прайсом. */
.cat-svc {
  color: var(--paper-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-price {
  margin-top: auto; padding-top: 6px;
  font-size: .88rem; color: color-mix(in srgb, var(--accent) 70%, white);
}

/* ─── Служебные строки ─────────────────────────────────────────────────── */
.cat-more, .cat-empty {
  margin-top: 26px; max-width: 60ch;
  font-size: .9rem; color: var(--paper-dim);
}
.cat-empty a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
/* Отступа перед блоком «своя страница» здесь нет: его даёт section в site.css
   (padding-block: var(--section)). Свой margin складывался с ним в провал на
   пол-экрана. */

/* Кнопка в острове навигации не переносится: на телефоне «Своя страница» в две
   строки распирала остров выше названия. */
.cat .isle .cta { white-space: nowrap; }

@media (max-width: 620px) {
  .cat-facets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .cat-card { padding: 12px; gap: 13px; }
  .cat-pic { width: 68px; height: 68px; border-radius: 14px; }
  .cat-pic b { font-size: 1.5rem; }
  .cat-head h1 { max-width: none; }
}