/* catalog.css — страница /catalog: узкий hero, поиск и фильтры (пол/возраст),
   грид книг. Карточка и грид (.cards/.bcard), токены, .wrap, .h2, .kick, .vh,
   кнопки берутся из home.css (подключён выше), как у faq.html. Здесь — только
   то, чего на других страницах нет. Токены-алиасы (--card/--line/--ink/--brass/…)
   заданы в home.css. Брейкпоинты — только 980/640; новых осей max-width не вводим. */

/* ⚠️ Без этого правила атрибут hidden не работает: .cat-empty{display:flex} и
   .cards{display:grid} перебивают браузерное [hidden]{display:none} — класс
   специфичнее. Из-за этого блок «книг не нашлось» и кнопка сброса висели под
   полным каталогом всегда и лезли в порядок обхода клавиатурой. */
[hidden]{display:none !important}

/* 01 · Узкий hero */
.cat-crumbs{margin:0 0 16px}
.cat-crumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0;font:500 14px/1.4 var(--sans);color:var(--ink-soft)}
/* Разделитель рисуем псевдоэлементом: он декоративный и не должен попадать
   в текст ссылки при обходе скринридером. */
.cat-crumbs__list li + li::before{content:"→";margin-right:8px;color:var(--brass);speak:never}
/* Ссылка обязана отличаться не только цветом: по канону — латунь и подчёркивание
   (прежняя тонкая линия --line давала 1,23:1 и была практически невидима). */
.cat-crumbs a{color:var(--brass-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.cat-crumbs a:hover{color:var(--brass)}
.cat-h1{font:800 clamp(29px,3.1vw,40px)/1.2 var(--serif);color:var(--ink);margin:0 0 12px;text-wrap:balance}
.cat-hero__lead{max-width:640px;margin:0}

/* 02 · Панель поиска и фильтров */
.cat-controls{border-bottom:1px solid var(--line)}
.cat-filters{display:flex;flex-direction:column;gap:24px;margin:0 0 24px}

/* Поиск — инпут по рецепту ДС (card, r6, латунное focus-кольцо) с иконкой слева.
   Граница — --line-deep: у контрола она несёт смысл «здесь вводят», и самая
   светлая линия для этого слишком слаба. */
.cat-search{position:relative;max-width:640px}
.cat-search__icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-soft);pointer-events:none}
.cat-search__input{width:100%;height:48px;padding:0 16px 0 48px;background:var(--card);border:1px solid var(--line-deep);border-radius:6px;color:var(--ink);font:400 16px/1.4 var(--sans);appearance:none}
.cat-search__input::placeholder{color:var(--ink-soft)}
.cat-search__input:hover{border-color:var(--brass-soft)}
/* Фокус: латунная рамка с кольцом по рецепту поля ДС И синяя обводка —
   инвариант «focus-visible виден везде» сильнее косметики (outline:none тут
   гасил единственный заметный признак фокуса). */
.cat-search__input:focus-visible{border-color:var(--brass);box-shadow:0 0 0 3px rgba(166,124,46,.18);outline:2px solid var(--blue-core);outline-offset:2px}

/* Группа фильтра: подпись + ряд чипов. Управление — нативные radio (стрелки,
   единичный выбор и озвучивание достаются от браузера), сам input визуально
   скрыт, но остаётся фокусируемым; видимая часть — подпись .chip. */
/* Пол и возраст — в одну строку; на узком экране группы переносятся.
   column-gap крупнее row-gap: между наборами нужна пауза заметнее, чем между
   строками одного набора, иначе чипы читаются одним сплошным рядом. */
.cat-groups{display:flex;flex-wrap:wrap;gap:16px 40px}
.cat-group{border:0;margin:0;padding:0;min-width:0}
.cat-group__legend{display:block;padding:0;margin:0 0 8px;font:500 14px/1.4 var(--sans);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-input{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none}
/* 44px — тач-цель публичного сайта (в админке допустимы 40). */
.chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;background:var(--card);border:1px solid var(--line-deep);border-radius:6px;color:var(--ink);font:500 15px/1 var(--sans);cursor:pointer;transition:border-color .15s ease-out,background .15s ease-out,color .15s ease-out}
.chip:hover{border-color:var(--brass-soft)}
/* Выбранный чип опознаётся тремя независимыми признаками, а не одним цветом:
   латунная граница (3,37:1), вес 600 вместо 500 и состояние самого radio.
   Граница плоская — тиснение `inset` снято 12.09.2026 (кнопки без рельефа). */
.chip-input:checked + .chip{background:var(--endpaper);border-color:var(--brass);color:var(--brass-text);font-weight:600}
.chip-input:focus-visible + .chip{outline:2px solid var(--blue-core);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.chip{transition:none}}

.cat-count{margin:0;font:500 14px/1.45 var(--sans);color:var(--ink-soft);font-variant-numeric:lining-nums tabular-nums}

/* 03 · Грид и пустое состояние */
.cat-grid-sec .cards{margin:0}
/* Карточку скрывает фильтр — grid-элемент выпадает из ряда полностью. */
.bcard.is-hidden{display:none}

.cat-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;max-width:640px;margin:0 auto;padding:48px 0}
.cat-empty__sp{color:var(--brass);line-height:0}
.cat-empty__text{margin:0;font:400 16px/1.6 var(--sans);color:var(--ink-soft);text-wrap:pretty}
/* Кнопка сброса — латунная кнопка ДС, ПЛОСКАЯ (решение владельца 12.09.2026):
   на белой полке кнопка без границы сливалась с фоном (1,06:1), силуэт не
   читался. Латунная граница даёт 3,2:1 и не спорит с синей CTA карточек. */
.btn-brass{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;background:var(--card);color:var(--brass-text);font:600 16px/1 var(--sans);padding:15px 28px;border:1px solid var(--brass);border-radius:6px;cursor:pointer;text-decoration:none;transition:background .2s ease-out,color .2s ease-out}
.btn-brass:hover{background:var(--endpaper);color:var(--brass-text)}
@media (prefers-reduced-motion:reduce){.btn-brass{transition:none}}

/* Планшет/мобайл: панель тянется в ширину, чипы переносятся (без гориз. скролла). */
@media (max-width:640px){
  .cat-search{max-width:none}
  .cat-filters{gap:16px}
}