/* ============================================================
   bufet — каталог: сетка изделий, сайдбар фильтров, тулбар.
   Перенос из docs/02/design_2/assets/inner.css (строки 7, 22-45, 48-53, 55-56, 107-110, 115).
   Две строки исходника намеренно НЕ переносятся:
   · 54 (`.cat-more` — кнопка «показать ещё»): в Этапе 1 листинг выгружается целиком,
     потолок 120 товаров, пагинации нет; правило вернётся вместе с серверной фильтрацией
     и `woocommerce_pagination()` — задел в docs/BACKLOG.md, Этап 3;
   · 120 (одна колонка на ≤460px) — см. медиазапрос ниже.

   Правила самой карточки (.pcard*) остаются в showcase.css: карточка пришла
   оттуда, файл грузится на всех страницах, и дробить его сейчас — лишний запрос
   без выигрыша (задел на вынос в card.css — docs/BACKLOG.md, веха 4).

   Примитивы чекбокса (.fopt/.fbox/.opt__native) и выпадающего списка (.select)
   принадлежат form.css — отсюда зависимость bufet-catalog от bufet-form. Здесь
   только геометрия фильтра и счётчик .fopt__count, которых в форме нет.
   ============================================================ */

/* В сетке каталога плита — это ссылка (<a class="pcard__plate">, bufet-catalog.html:110),
   а инлайновый бокс игнорирует aspect-ratio и overflow из showcase.css:18. Без этого
   правила карточка схлопнулась бы в строку текста и фотография исчезла бы. */
.pcard__plate { display: block; }

/* minmax(0, 1fr) вместо 1fr макета: у .pcard__price стоит white-space: nowrap, и колонка
   с длинной ценой («от 240 000 ₸ до 380 000 ₸», «Цена по запросу») раздвинула бы сетку,
   потому что дефолтный минимум трека — min-content. Внутри сетки цене разрешён перенос. */
.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.4vw, 40px) clamp(20px, 2vw, 32px); }
.cat-grid .pcard { width: auto; }
.cat-grid .pcard__price { white-space: normal; }

/* Цена под именем, а не справа от него — только в сетке каталога.
   В макете (bufet-catalog.html) подпись карточки — флекс со space-between: имя слева,
   цена справа. На коротких именах это ровно, но пилотное наполнение вехи 6 показало
   цифру: у 16 карточек из 44 имя встаёт в ТРИ строки рядом с ценой, потому что
   на имя остаётся половина ширины карточки. Решение было заранее описано в BACKLOG
   («если реальные названия окажутся длинными — переносить цену под имя на десктопе,
   как уже сделано на телефоне») — здесь оно и применено: имя получает всю ширину
   и укладывается в одну-две строки. Отступление записано в PARITY-CHECK, пункт 81.

   Только `.cat-grid`: в ленте `.merch__track` карточка шире, там те же имена
   умещаются в строку, и трогать её незачем. Правило базовое и стоит ВЫШЕ медиазапросов
   файла — иначе оно молча отменило бы мобильную ветку (мобильная раскладка у карточки
   такая же, `mobile.css:88`, и специфичность у пары одинаковая).

   Про `<small>` рядом с ценой правила здесь нет намеренно: подпись наличия печатает
   только ленточный вид карточки, в сетке наличие показывает бейдж на плите
   (`card.php`, `$args['view']`). Проверено на живой странице — в `.cat-grid`
   ни одного `small` не отрисовывается. */
.cat-grid .pcard__body { display: block; }
.cat-grid .pcard__price { margin-top: 6px; }
/* клиентский фильтр каталога прячет карточку классом, а не удалением из DOM */
.pcard.is-hidden { display: none; }

.pcard__plate .plate__badge { position: absolute; left: 14px; top: 14px; z-index: 3; font-family: var(--font-display); font-weight: 700; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; padding: 6px 11px; border-radius: var(--r-pill); background: var(--accent); color: #fff; }
.pcard__plate .plate__badge--stock { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }

.cat-empty { padding: 60px 0; text-align: center; color: var(--ink-3); font-family: var(--font-display); font-weight: 600; display: none; }
.cat-empty.is-on { display: block; }

/* ============================================================
   Каркас листинга, сайдбар фильтров и тулбар (inner.css 22-45, 107-110).
   Примитивы .page / .crumb / .phead живут в base.css: их ждут ещё карточка
   изделия и лендинг, а те не должны зависеть от каталога.
   ============================================================ */

.catalog-wrap { display: grid; grid-template-columns: 252px 1fr; gap: clamp(28px, 3vw, 56px); padding-bottom: var(--section-y); }

/* своя прокрутка колонке выше окна; поля по бокам и запас прокрутки — под кольцо фокуса (PARITY-CHECK 110) */
.filters { align-self: start; position: sticky; top: 100px; max-height: calc(100vh - 124px); max-height: calc(100svh - 124px); overflow-y: auto; scrollbar-width: thin; padding-inline: 6px; margin-inline: -6px; scroll-padding-block: 26px; }
/* пока сайдбар — колонка слева, он ничего не загораживает и раскрывашка не нужна;
   она включается там, где он встаёт над сеткой (ветка ≤1024 ниже) */
.filters__sum { display: none; }

.fgroup { padding-block: 22px; border-top: 1px solid var(--line); }
.fgroup:first-child { border-top: 0; padding-top: 0; }
.fgroup__h { display: block; font-family: var(--font-display); font-weight: 700; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; }
/* потолок цены в заголовке группы — акцентом (в макете это был инлайновый стиль) */
.fgroup__h b { color: var(--accent); }

/* Чекбокс — примитив формы (form.css), здесь только геометрия каталога: там строка
   согласия в две строки с крупным боксом, здесь плотный список в узкой колонке. */
.filters .fopt { align-items: center; gap: 11px; padding: 8px 0; line-height: 1.4; }
.filters .fbox { width: 20px; height: 20px; margin-top: 0; border-color: var(--line); }
.fopt__count { margin-left: auto; font-size: .82rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Категория — три зависимых поля: раздел → подраздел → вид. */
.fsteps { display: grid; gap: 14px; }
.fstep { display: grid; gap: 6px; }
/* без этой строки display: grid перебивает [hidden] и скрытое поле остаётся на виду */
.fstep[hidden] { display: none; }
.fstep__l { font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--ink-3); }
/* ширина от колонки, а не от самой длинной опции: иначе поле распирает сайдбар */
.fstep .select { width: 100%; text-overflow: ellipsis; }

.cat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.cat-toolbar__l { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--ink-2); font-size: .92rem; }
.cat-toolbar__l b { color: var(--ink); }
.sortbox { display: flex; align-items: center; gap: 10px; }
.sortbox label { font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--ink-3); }

/* ============================================================
   Страница раздела: лид, кадр с роликом, ссылки по дереву, лента изделий.
   Макета этой страницы в утверждённом варианте C нет — блоки собраны из принятых
   примитивов, каждый со своим источником. Отступления — docs/PARITY-CHECK.md 46-49.
   ============================================================ */

/* Лид — штатное «Описание» раздела, поэтому внутри <p> от wpautop.
   Мера строки как у текста «Мастерской» (feature.css: max-width 44ch), но шире:
   здесь это единственный текст на странице, а не подпись рядом с фотографией. */
.catlead { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 48px); color: var(--ink-2); font-size: var(--fs-lead); }
.catlead p { margin: 0 0 .7em; }
.catlead p:last-child { margin-bottom: 0; }

/* Разворот «текст + кадр»; про minmax вместо 1fr — см. CLAUDE.md темы → «CSS и каркас страницы». */
.catspread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: center; margin-bottom: clamp(36px, 5vw, 72px); }
.catspread--solo { grid-template-columns: minmax(0, 1fr); }
.catspread .catlead,
.catspread .carousel--page { margin-bottom: 0; }

/* Широкий кадр статьи, лендинга и страниц студии. Пропорцию задаёт ОБЁРТКА: video-frame.php печатает голый .plate,
   у которого своей aspect-ratio нет, а .plate__img внутри абсолютная — без этих двух
   правил высота кадра нулевая. Тот же приём у кадра «Мастерской» (feature.css). */
.catmedia { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-3); overflow: hidden; margin-bottom: clamp(36px, 5vw, 72px); }
.catmedia .plate { position: absolute; inset: 0; border-radius: var(--r-3); }

/* Ссылки по дереву. Перенос .m-strip/.m-pill (design_2/assets/mobile.css:43-46) на ВСЕ
   ширины: в мобильном макете главной это кнопки фильтра, здесь — навигация, и без неё
   со страницы раздела не ведёт вниз ни одна ссылка, кроме мега-меню. Состояние .is-on
   не переносится: текущий раздел в списке не показываем вовсе. */
/* На широком экране пилюли ПЕРЕНОСЯТСЯ, а не прокручиваются: полоса прокрутки скрыта по
   макету, протяжки мышью у навигации нет (она для ленты товаров), и на 1024 шесть разделов
   не влезали в строку — две ссылки становились недостижимы ничем, кроме клавиатуры.
   Горизонтальным скроллером `.catnav` остаётся только на телефоне, где его тянут пальцем. */
.catnav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 4vw, 44px); }
.catnav__pill {
  flex: none; padding: 9px 16px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: #fff; color: var(--ink-2);
  font-family: var(--font-display); font-weight: 600; font-size: .88rem;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.catnav__pill:hover { border-color: var(--accent); color: var(--accent); }

/* Лента изделий «как Google merch» (03.docx). Голова — по .related__head (inner.css:105),
   ритм секции — как у ленты главной (showcase.css:9). */
.merch { padding-bottom: clamp(40px, 6vw, 72px); }
.merch__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
/* overscroll-behavior-inline: без него свайп вправо в конце ленты на iOS и Chrome-Android
   срабатывает как «назад» и уводит с сайта (та же причина, что в showcase.css:13) */
.merch__track { display: flex; gap: clamp(20px, 2.4vw, 36px); overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; }
.merch__track::-webkit-scrollbar { display: none; }
/* Подсказка о протяжке — примитив ленты главной, но там она стоит вне .shell и добавляет
   боковой отступ сама; здесь он был бы вторым. */
.merch .showcase__hint { padding-inline: 0; }
.merch__empty { margin: 0; color: var(--ink-3); font-family: var(--font-display); font-weight: 600; }

/* плитки разделов над сеткой листинга — см. docs/PARITY-CHECK.md, пункт 100 */
.catsections { margin-bottom: clamp(28px, 4vw, 48px); }
.catsections__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.catsection__link { display: block; }
.catsection__plate { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-2); overflow: hidden; }
.catsection__plate .plate { position: absolute; inset: 0; transition: transform var(--dur-slow) var(--ease); }
.catsection__link:hover .catsection__plate .plate { transform: scale(1.04); }
.catsection__t { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); margin: 12px 0 6px; }
.catsection__kids { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.catsection__kids a { font-size: .9rem; color: var(--ink-2); }
.catsection__kids a:hover { color: var(--accent); }

@media (max-width: 1024px) {
  .catspread { grid-template-columns: minmax(0, 1fr); }
  .catspread__media { order: -1; }
  /* планшет и уже: сайдбар над сеткой свёрнут в <details> (PARITY-CHECK 40) */
  .catalog-wrap { grid-template-columns: 1fr; }
  .filters { position: static; margin-bottom: 30px; max-height: none; overflow: visible; padding-inline: 0; margin-inline: 0; }
  .filters__sum {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 18px; border: 1.5px solid var(--line); border-radius: var(--r-pill);
    font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--ink);
    cursor: pointer; list-style: none;
  }
  /* без этих двух строк Safari и Firefox рисуют собственный треугольник раскрытия */
  .filters__sum::-webkit-details-marker { display: none; }
  .filters__sum::marker { content: ""; }
  .filters__sum svg { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease); }
  .filters[open] .filters__sum svg { transform: rotate(180deg); }
  .filters[open] .filters__sum { margin-bottom: 14px; }
  .filters__body { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-2); }
  /* вторая группа стоит в первом ряду сетки — линия над ней была бы висячей */
  .filters__body .fgroup:nth-child(2) { border-top: 0; padding-top: 0; }
}

@media (max-width: 767px) {
  /* внутри раскрывашки на телефоне рамка вокруг групп лишняя — её роль играет заголовок */
  .filters__body { padding: 0; border: 0; }
  .cat-toolbar { margin-block: 18px; }
  /* «Сортировка» рядом со списком на узком экране только отжимает его — подпись
     остаётся у экранного диктора через <label for> */
  .sortbox label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* та же ширина карточки, что у ленты главной в mobile.css (образец — .m-rail, m-product.html:62) */
  .catlead { font-size: 1rem; }
  .catmedia { border-radius: 18px; }
  .merch__head { margin-bottom: 14px; }
  .merch__track { gap: 14px; }
  .merch__track .pcard { width: 64%; }

  /* Ленты уходят за край экрана, а не обрезаются по краю .shell: в мобильных макетах
     и .m-strip, и .m-rail — прямые дети страницы с внутренним отступом 18px, и
     карточка, срезанная краем ЭКРАНА, читается как «тут можно тянуть», а срезанная
     в двадцати пикселях от него — как поломанная вёрстка. Своя ширина у обеих лент
     остаётся равной ширине экрана, поэтому горизонтальной прокрутки у страницы
     не появляется — прокрутка живёт внутри их собственного overflow-x. */
  .catnav,
  .catsections__track,
  .merch__track { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  /* плитки разделов на телефоне — лента протяжкой вместо трёх колонок ветки ≤1024 */
  .catsections__track { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; }
  .catsections__track::-webkit-scrollbar { display: none; }
  .catsection { flex: none; width: 72vw; }
  .catsection__kids { gap: 2px 12px; }
  .catsection__kids a { display: inline-flex; align-items: center; min-height: 24px; }
  /* здесь пилюли снова лента: на 390 перенос дал бы четыре строки таблеток над сеткой */
  .catnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; }
  .catnav::-webkit-scrollbar { display: none; }
}


/* Две колонки до самого узкого экрана — по мобильному макету каталога
   (design_2/m-catalog.html:36, mobile.css:54 «.m-grid { 1fr 1fr }») и по ленте главной
   (mobile.css:64). Ветка `inner.css:120` с одной колонкой на ≤460 намеренно НЕ переносится:
   десктопный файл про телефон ничего не знал, а мобильный макет там даёт пару карточек. */
@media (max-width: 680px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
  .filters__body { grid-template-columns: 1fr; }
  /* в одну колонку вторая группа снова оказывается под первой — линия ей нужна */
  .filters__body .fgroup:nth-child(2) { border-top: 1px solid var(--line); padding-top: 22px; }
}