/* СТРАНИЦА РАЗДЕЛА КАТАЛОГА — файл ДОРОЖКИ C волны 2 (9А.0б, `PROEKT.md` 9А.2б).

   🔴 ФАЙЛ СЖАТ РАЗДЕЛЕНИЕМ 01.08.2026, и это не перекладывание строк. До волны 2 он был один
   на главную и на раздел: дорожка B и дорожка C писали бы в него одновременно и получили бы
   мержконфликт при любом раскладе (0.1 — один объект, один файл-владелец). Разделено на три:
   · `home.css`    — первый экран и блоки главной. Дорожка B;
   · `catalog.css` — здесь. Заголовок раздела, латынь, описание и отступы ВОКРУГ сетки. Дорожка C;
   · `card.css`    — плитка и сетка, они общие трём страницам. Спецификация v10 отдала его
     этой же дорожке (кусок 3), но владелец у него по-прежнему ОДИН на все три страницы.

   ⚠️ ПЛИТКУ ОТСЮДА НЕ ПРАВИТЬ И НЕ ВОЗВРАЩАТЬ. Она стоит в трёх местах сразу — главная,
   корень каталога и раздел, — и один и тот же товар, выглядящий на двух страницах
   по-разному, это спор с клиентом на ровном месте. Правка плитки идёт в `card.css`,
   и делать её надо помня, что она меняет вид ЧУЖОЙ страницы тоже.

   🔴 ФАЙЛ ПОДКЛЮЧАЕТСЯ В `head` СВОЕЙ ЖЕ СТРАНИЦЫ, а не в рамке сайта.

   🔴 НИ ОДНОГО КОДА ЦВЕТА. Все цвета — именами из `tokens.css`: три дорожки строят UI
   одновременно, и три «своих» зелёных на одной странице появились бы молча. Проверяется
   машиной (`core/site/tests/test_catalog_appearance.py`, проверка 9А-0в-01), а не глазами на ревью.

   ⚠️ Ширина страницы задана в `card.css` и здесь не повторяется: страницы с сеткой плиток —
   это ровно те, что везут тот файл, а одно правило в двух местах разъезжается (🅱️5). */

/* ── Заголовок раздела (Р-1 волны 2, макет `maket/volna-2/16-razdel.jpg`) ──── */
/* 🔴 ВОЗДУХ НАД ЗАГОЛОВКОМ — ЧАСТЬ МАКЕТА, а не отступ по вкусу: на утверждённом эталоне между
   полосой меню и названием раздела стоит пустое поле высотой примерно с сам заголовок, и именно
   оно делает страницу дорогой. Сжать его — значит спорить с макетом, а вкус проиграл шесть раз
   подряд (`docs/spec/v2-common.md`, раздел 2).

   Размер задан вилкой, а не одним числом: 4 rem на телефоне шириной 360 точек занимают строку
   целиком и переносят «деревья» на вторую строку прямо под шапкой. Мобильный вид проверяется
   первым (3.3) — каталог растений смотрят с телефона на участке.

   ⚠️ Начертание НЕ задаётся: антикву заголовкам выдаёт рамка сайта одним правилом на все уровни
   (`site.css`, `h1, h2, h3`), и второе объявление здесь было бы вторым владельцем (🅱️5). Задан
   только ВЕС: рамка ставит жирный, а на макете крупный заголовок набран обычным — жирная антиква
   такого размера читается как объявление о распродаже, а не как название раздела. */
.category__name {
  margin: clamp(2.5rem, 6vw, 5rem) 0 0.4rem;
  font-size: var(--t-xxl);
  font-weight: 400;
}

/* 🔴 ЛАТЫНЬ ЗДЕСЬ ПЕСОЧНАЯ, А НЕ ПРИГЛУШЁННАЯ, и это решение эталона, а не описка (Р-1).
   Под заголовком раздела она стоит крупно и работает ПОДЗАГОЛОВКОМ — единственное такое место
   на сайте. Приглушённой она остаётся там, где и была задумана подписью: на плитке товара
   (`card.css`, `.card__latin` — чужой файл, дорожка его не трогает).

   Проверка стоит рядом с кодом (`test_category.py`, `test_9a_2b_24…`) обеими сторонами сразу:
   иначе следующее окно увидит «латынь везде тихая, а тут акцент» и «починит» разнобой, которого
   нет, — ровно так уже правили комментарий вместо кода (🅱️15).

   🔴 ЛАТЫНЬ НАБИРАЕТСЯ ТЕКСТОВЫМ ШРИФТОМ, А НЕ ЗАГОЛОВОЧНЫМ, И ЭТО ИЗ-ЗА КУРСИВА.
   Здесь стояла антиква с доводом «рамка раздаёт её заголовкам, а это абзац». С 06.08.2026
   заголовочный шрифт — Manrope (решение 0036), а настоящего курсива у него не существует
   ни одного начертания: браузер наклонил бы прямые буквы сам, и вместо курсива вышел бы
   перекошенный прямой шрифт. У Raleway курсив нарисован и лежит своим файлом, поэтому
   ботаническое название идёт им. Те же две строки — в `hedge.css`, у подписи размера. */
.category__latin {
  margin: 0 0 var(--o-6);
  font-family: var(--shrift-teksta);
  font-size: var(--t-l);
  font-style: italic;
  font-weight: 400;
  color: var(--akcent);
}

/* Описание — в текстовую колонку, а не во всю ширину каталога: строка длиной в сетку из четырёх
   плиток не читается. Междустрочие крупнее общего (1.5 в рамке сайта): на тёмном фоне светлый
   текст «слипается» строками сильнее, чем на светлом. */
.category__description {
  max-width: var(--width-text);
  line-height: 1.7;
}

/* ── Отступы вокруг сетки плиток (Р-2) ────────────────────────────────────── */
/* 🔴 ЗДЕСЬ ТОЛЬКО ОТСТУПЫ ВОКРУГ СЕТКИ. Сама сетка и сама плитка живут в `card.css` — файле
   координатора: плитка стоит и на главной, и в разделе, и один и тот же товар не может выглядеть
   на двух страницах по-разному (Р-2).
   ⛔ Ни числа колонок, ни размеров плитки отсюда не трогать.

   🔴 ПОЧЕМУ СЕЛЕКТОР НАЧИНАЕТСЯ С ЗАГОЛОВКА РАЗДЕЛА, а не написан просто `.cards`. Этот файл
   сегодня везёт не только страница раздела, но и главная (`home.html` подключает его наравне
   с разделом). Напиши правило на голом `.cards` — и щедрый отступ, нужный ЗДЕСЬ, молча уехал бы
   в блок «Выбор сезона» на чужой странице, где сетка стоит вплотную к своему заголовку блока.
   Это ровно то, что запрещено границами файлов: «изменив плитку у себя, ты молча меняешь чужую
   страницу» (Р-2).

   Название раздела есть на КАЖДОЙ странице раздела и не встречается больше нигде, поэтому
   отступ включается ровно там, где задуман, и не зависит от того, чем закончится разделение
   файлов главной. Обе стороны замерены проверкой, а не предположены (🅰️4-1а, шаг 1в).

   ⚠️ Отступ снизу больше того, что рамка сайта даёт строке «подскажем, что выбрать»
   (`.zvonok`, 2 rem): соседние отступы складываются не суммой, а по большему, поэтому здесь
   стоит нужное число целиком, а чужое правило не трогается. */
.category__name ~ .cards {
  margin: 5rem 0 4rem;
}

/* 🔴 ДЛИННОЕ НЕРАЗРЫВНОЕ СЛОВО ПЕРЕНОСИТСЯ, А НЕ ВЫЕЗЖАЕТ ЗА КОЛОНКУ. Найдено общим ревью,
   и корень был тот же, что у сетки: пока переполнение обрезалось у окна, этого не было видно.

   Текст здесь ЧУЖОЙ: название и описание раздела человек набирает руками в панели. Латинское
   имя вида с длинным сортом в кавычках — обычное дело, а перенести его браузеру без разрешения
   нечем.

   ⚠️ Плитка в этом перечне больше не стоит — её строка уехала вместе с ней в `card.css`,
   на `.card__link`, откуда наследуется всеми четырьмя фактами плитки сразу. Класс вырезан
   в обоих местах, а не в одном (🅰️4-1). */
.category__name,
.category__latin,
.category__description {
  overflow-wrap: anywhere;
}

/* ══ КОРЕНЬ КАТАЛОГА И ПОИСК — волна 3, дорожка К (спецификация `v4-new-structure`, 2) ══ */
/* 🔴 ПОЧЕМУ ВСЁ НИЖЕ НАЗВАНО `category__*`, А НЕ `catalog__*`, — это первое, что спросит
   следующее окно. Собственные объекты ЭТОГО файла перечислены сторожем границ
   (`test_catalog_appearance.py`, `SVOI_OBEKTY`), и семейство `category__` — единственное из них,
   которое принадлежит странице-списку, а не плитке (`card*`, файл координатора) и не главной
   (`pervyy-ekran`, `knopka`, `blok` — они в `home.css`). Заведи я здесь `catalog__*` —
   сторож покраснел бы на первой же строке и был бы прав: это чужое имя в файле дорожки.

   ⚠️ Отсюда же то, что выглядит как небрежность: заголовок корня каталога носит класс
   `category__name`, тот же, что название раздела. Это не копирование чужого стиля,
   а один объект: крупный заголовок страницы-списка. Второе имя для него означало бы,
   что вид заголовка можно поменять на одной странице и не поменять на другой (🅱️5),
   а вместе с именем сюда приезжает и отступ вокруг сетки — тот самый воздух с макета. */

/* ── Поиск по каталогу (К-2, К-3) ─────────────────────────────────────────── */
/* Поле и кнопка в одну строку, шириной с текстовую колонку: растянутое во всю ширину сетки
   поле выглядит как форма заявки, а не как строка поиска.

   ⚠️ `wrap` обязателен: на телефоне шириной 320 точек кнопка «Найти» уезжает под поле,
   и это лучше, чем поле шириной в три знака. Мобильный вид проверяется первым (3.3). */
.category__search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-2);
  max-width: var(--width-text);
  margin: 0 0 var(--o-4);
}

/* 🔴 `min-width: 0` — не украшение: элемент внутри строки по умолчанию отказывается сжиматься
   уже своего содержимого, и поле с длинным запросом выдавило бы кнопку за край экрана.

   `font: inherit` — тоже по делу: браузер даёт полям ввода СВОЙ шрифт, не тот, что у страницы,
   и без этой строки поиск набирался бы чужой гарнитурой посреди нашей типографики. */
/* 🔴 ОБЪЁМ, 02.08.2026 — по прототипу, одобренному Кириллом: поле стало таблеткой.
   Плоская панель с серой рамкой — ровно тот «системный» вид, из-за которого страница
   читалась как форма из нулевых.

   ⚠️ Подложка поля — та же полупрозрачная хвоя, что у плитки (`--fon-kartochki`): под ней
   идёт закреплённое видео, и совсем прозрачное поле показывало бы движущийся кадр прямо
   под набираемыми буквами. Кромка светлая по той же причине, по которой она светлая
   у плитки: тёмный штрих поверх видео читается как царапина на стекле.

   ⛔ Смена подложки и кромки идёт МГНОВЕННО, без перехода. Спецификация v10, раздел 8,
   запрет 3: в переходах меняются только `transform` и `opacity`. */
.category__search-field {
  flex: 1 1 12rem;
  min-width: 0;
  padding: var(--o-3) var(--o-4);
  font: inherit;
  color: var(--tekst);
  background: var(--fon-kartochki);
  border: 1px solid var(--frame);
  border-radius: var(--r-pill);
  appearance: none;
}

.category__search-field:hover {
  border-color: var(--frame-navedenie);
}

/* Обводка при наборе — акцентом, а не системной рамкой: системная на тёмном фоне почти
   не видна, и человек не понимает, куда он печатает. */
.category__search-field:focus {
  outline: 2px solid var(--akcent);
  outline-offset: 1px;
}

/* 🔴 КНОПКА ЗЕЛЁНАЯ, И ЗЕЛЁНЫЙ ТЕПЕРЬ ЕДИНСТВЕННЫЙ ЦВЕТ ДЕЙСТВИЯ НА САЙТЕ. Требование
   Кирилла 04.08.2026, дословно: «я уже говорил что песочные кнопки это пиздец, их надо
   убрать». Надпись на ней ТЁМНАЯ (`--tekst-na-akcente`) — это замер, а не вкус: тёмный
   текст на зелёном даёт отношение яркостей 9:1, светлый — 1,8:1 при пороге 4,5.

   ⛔ `filter: brightness` из перехода убран: спецификация v10, раздел 8, запрет 3. Ореол
   под кнопкой при наведении становится гуще мгновенно, едет только сама кнопка. */
.category__search-button {
  padding: var(--o-3) var(--o-5);
  font: inherit;
  color: var(--tekst-na-akcente);
  background: linear-gradient(180deg, var(--akcent-navedenie), var(--akcent));
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: var(--ten-akcenta);
  cursor: pointer;
  transition: transform var(--hod);
}

.category__search-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--ten-akcenta-navedenie);
}

.category__search-button:active { transform: translateY(0) scale(.985); }

/* ── Строка «показано столько-то из стольких» (К-3 п. 3) ──────────────────── */
/* Тихая, как наличие на плитке: это оговорка о списке, а не заголовок. Собственный отступ
   снят в ноль — расстояние до сетки задаёт правило ниже, чтобы оно было одним числом,
   а не суммой двух (🅱️5). */
.category__note {
  margin: 0;
  color: var(--tekst-tihiy);
  font-size: var(--t-s);
  overflow-wrap: anywhere;
}

/* ── «Ничего не нашли» — живая страница, а не тупик (К-3 п. 4) ─────────────── */
/* Панель светлее полотна, как плитка: так блок читается предметом, к которому обращаются,
   а не строкой ошибки. ⛔ Ни цвета тревоги, ни знака восклицания: человек ничего не сломал,
   он просто спросил то, чего у нас нет.

   `overflow-wrap` — потому что текст здесь ЧУЖОЙ: запрос набирает человек, и сто знаков
   без пробела иначе выехали бы за край (тот же класс, что у названия раздела выше). */
/* 🔴 ОБЪЁМ, 02.08.2026: «ничего не нашли» — не серое пятно на странице, а панель со стеклом
   и светлой кромкой. Это единственный экран, который человек видит, когда у него не вышло,
   и выглядеть он должен так же аккуратно, как удачный.

   ⚠️ Стекло взято ролью крупной панели (`--steklo-panel`), а не заливкой: под страницей идёт
   закреплённый слой видео, и сплошная заливка от края до края вернула бы стык, ради снятия
   которого весь фон и переделывался (v10, раздел 8, запрет 1). */
.category__nothing {
  max-width: var(--width-text);
  margin: var(--o-5) 0 0;
  padding: var(--o-5);
  background: var(--steklo-panel);
  border: 1px solid var(--frame);
  border-radius: var(--r-l);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.category__nothing p {
  margin: 0 0 var(--o-2);
}

/* ── Сетка, стоящая под своим подзаголовком, прижимается к нему ────────────── */
/* 🔴 ЗАЧЕМ ЭТО ПРАВИЛО. Отступ вокруг сетки (5 rem выше) задуман для страницы РАЗДЕЛА, где
   между заголовком и плитками стоит воздух макета и больше ничего. В корне каталога сеток
   две, и каждая подписана своим `h2` — с пятью ремами подпись отрывается от своего списка
   и прилипает к предыдущему. Это не «поправить макет», а сохранить его смысл: воздух остаётся
   между БЛОКАМИ, а подзаголовок остаётся при своём блоке.

   ⚠️ Селекторов два, потому что между подписью и сеткой бывает строка «показано столько-то
   из стольких» — она есть не всегда (К-3 п. 3). Один селектор давал бы разный отступ у одной
   и той же сетки в зависимости от того, обрезан список или нет, и выглядело бы это как
   случайность вёрстки.

   🔴 Оба начинаются с `category__name`, и это не украшение селектора: правило обязано
   действовать ТОЛЬКО на страницах, где этот файл подключён вместе с заголовком-списком,
   и не уезжать на чужую страницу вместе с файлом — ровно то же условие, по которому привязан
   отступ вокруг сетки выше. */
.category__name ~ h2 + .cards,
.category__name ~ .category__note + .cards {
  margin-top: var(--o-4);
}