/* Страница каталога: заголовок, плашки разделов, боковой фильтр (на планшете и телефоне — шторка),
   панель сортировки, выбранные фильтры, пагинация. Скругления — по шкале старого сайта (tokens.css). */

.catalog-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--space-12); margin: 0 0 var(--space-16); }
.catalog-head__title { margin: 0; font-size: 28px; font-weight: 500; line-height: 1.2; }
.catalog-head__count { color: var(--ink-subtle); font-size: 14px; }

/* ---------- Плашки разделов ---------- */
/* Плитки разделов (как на «Все инструменты»): название и число товаров сверху, фото снизу по центру. Стоят в правой колонке над карточками, в той же сетке, поэтому ровно над ними; фильтр начинается на одной высоте с ними */
.cat-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16); margin: 0 0 var(--space-24); }
.cat-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  grid-template-rows: auto auto 1fr;
  min-height: 136px;
  overflow: hidden;
  padding: var(--space-16) var(--space-8) var(--space-12) var(--space-16);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cat-card:hover { background: var(--surface-2); }
/* Как плитки на главной: текст слева, фото справа внизу. Фото — своя колонка сетки, поэтому на текст оно не заезжает */
.cat-card__name { grid-column: 1; grid-row: 1; position: relative; z-index: 1; padding-right: var(--space-8); font-size: 16px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.cat-card__count { grid-column: 1; grid-row: 2; position: relative; z-index: 1; margin-top: 4px; padding-right: var(--space-8); color: var(--ink-subtle); font-size: 13px; line-height: 1.3; }
.cat-card__img { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; justify-self: stretch; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: right bottom; transform-origin: 85% 90%; transition: transform 500ms var(--ease); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cat-card:hover .cat-card__img { transform: scale(1.06); }
}
/* Текущий раздел: рамка и лёгкая оранжевая подложка */
.cat-card.is-active { background: var(--primary-tint); box-shadow: inset 0 0 0 2px var(--primary); }
.cat-card.is-active .cat-card__name { color: var(--primary-pressed); }
.cat-card:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.catalog-head__all { color: var(--primary-pressed); font-size: 14px; text-decoration: underline; text-underline-offset: 2px; }
.catalog-head__all:hover { color: var(--primary-deep); }

/* ---------- Раскладка ---------- */
/* Сверху строка «плитки + сортировка + выбранное» (справа), под ней фильтр и карточки начинаются на одном уровне */
.catalog-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-areas: "lead top" "filter results"; column-gap: var(--space-32); align-items: start; }
.catalog-layout--wide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "results"; }
.catalog-top { grid-area: top; min-width: 0; }
.catalog-results { grid-area: results; min-width: 0; }
.catalog-layout > .filter { grid-area: filter; }

/* «Часто ищут»: плашки посадочных страниц над сортировкой */
.cat-hot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--space-16); }
.cat-hot__label { margin-right: 4px; color: var(--ink-subtle); font-size: 14px; }
.cat-hot__item { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--surface-1); color: var(--ink); font-size: 14px; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.cat-hot__item:hover { background: var(--surface-2); }
.cat-hot__item.is-active { background: var(--primary-tint); color: var(--primary-pressed); box-shadow: inset 0 0 0 1px var(--primary); }
.cat-hot__item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* Баннер «Авторские статьи» в ячейке над фильтром. Высоту задаёт строка сетки (плитки и плашки справа), сам баннер места не занимает.
   Аватар показывается целиком, без обрезки кругом (выступающие пряди волос остаются) и слегка «живёт»: плавает в покое, на наведении поворачивается */
.authors-wrap { grid-area: lead; position: relative; align-self: stretch; min-height: 124px; margin-bottom: var(--space-16); }
.authors { position: absolute; inset: 0; display: block; overflow: hidden; padding: var(--space-16); border-radius: var(--radius-lg); background: var(--surface-1); color: var(--ink); transition: background-color var(--dur) var(--ease); }
.authors:hover { background: var(--surface-2); }
.authors:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.authors__title { display: block; max-width: calc(100% - 88px); font-size: 18px; font-weight: 700; line-height: 1.2; }
.authors__text { display: block; max-width: 58%; margin-top: 6px; color: var(--ink-subtle); font-size: 13px; line-height: 1.35; }
.authors__by { position: absolute; left: var(--space-16); right: 64px; bottom: 14px; display: flex; flex-direction: column; color: var(--ink-subtle); font-size: 12px; line-height: 1.25; }
.authors__by strong { color: var(--ink); font-size: 13px; }
.authors__ava { position: absolute; top: 8px; right: 8px; width: 96px; height: 96px; animation: authors-float 7s ease-in-out infinite; }
.authors__ava::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(closest-side, var(--primary-tint), transparent); opacity: 0; transition: opacity 500ms var(--ease); }
.authors__ava img { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transition: transform 500ms var(--ease); }
.authors:hover .authors__ava::before { opacity: 1; }
.authors:hover .authors__ava img { transform: scale(1.07) rotate(-3deg); }
.authors__go { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--on-primary); transition: transform 300ms var(--ease); }
.authors__go .icon { width: 16px; height: 16px; }
.authors:hover .authors__go { transform: translateX(3px); }
@keyframes authors-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(1.4deg); } }
@media (prefers-reduced-motion: reduce) { .authors__ava { animation: none; } .authors__ava img, .authors__go { transition: none; } }
/* Карандаш администратора над фильтром: создать или изменить посадочную страницу. Посетители его не видят */
.catalog-layout { position: relative; }
/* Вне потока: карандаш ничего не сдвигает. На широком экране стоит слева от фильтра, на узком — над его левым краем */
.catalog-lead { position: absolute; grid-area: filter; top: -40px; left: 0; z-index: 2; }
@media (min-width: 1500px) { .catalog-lead { top: 0; left: -44px; } }
.landing-pencil { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-btn); background: var(--primary); color: var(--on-primary); transition: background-color var(--dur) var(--ease); }
.landing-pencil:hover { background: var(--primary-pressed); }
.landing-pencil:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.landing-pencil .icon { width: 16px; height: 16px; }

/* ---------- Боковой фильтр ---------- */
.filter {
  position: sticky;
  top: 88px;
  max-height: calc(100dvh - 104px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  /* Полоса прокрутки невидима, пока мышь не над фильтром; место под неё зарезервировано, чтобы она не липла к значениям
     и содержимое не «прыгало» при появлении */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  scrollbar-gutter: stable;
  padding-right: 12px;
}
.filter:hover, .filter:focus-within { scrollbar-color: #cbbfb1 transparent; }
.filter__head, .filter__foot { display: none; }
.filter__section { margin: 0 0 var(--space-24); padding: 0 0 var(--space-24); border-bottom: 1px solid var(--hairline-soft); }
.filter__label { margin: 0 0 var(--space-16); color: var(--ink-subtle); }
/* Группы сворачиваются по клику на заголовок; по умолчанию свёрнута или раскрыта — настройка характеристики в админке */
summary.filter__label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); margin: 0; padding: 2px 0; list-style: none; cursor: pointer; user-select: none; color: var(--primary-pressed); font-size: 15px; letter-spacing: 0.9px; transition: color var(--dur-fast) var(--ease); }
summary.filter__label::-webkit-details-marker { display: none; }
summary.filter__label:hover { color: var(--primary-deep); }
summary.filter__label > span { min-width: 0; overflow-wrap: anywhere; hyphens: manual; }
summary.filter__label .icon { flex: none; width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
details.filter__section[open] > summary.filter__label { margin-bottom: var(--space-16); }
details.filter__section[open] > summary.filter__label .icon { transform: rotate(180deg); }
details.filter__section:not([open]) { margin-bottom: var(--space-16); padding-bottom: var(--space-16); }
.filter__form { margin: 0; }

.filter__opts { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.opt { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 3px 0; color: var(--ink); font-size: 14px; line-height: 1.35; }
a.opt:hover .opt__label { color: var(--primary-pressed); }
.opt__box {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ink-subtle);
  border-radius: var(--radius-badge);
  background: var(--canvas);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.opt.is-checked .opt__box { border-color: var(--primary); background: var(--primary); }
.opt.is-checked .opt__box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.opt__label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.opt__count { color: var(--ink-subtle); font-size: 13px; font-variant-numeric: tabular-nums; }
.opt.is-zero { opacity: 0.4; cursor: default; }
a.opt:focus-visible { border-radius: var(--radius-badge); }

.filter__opts[hidden] { display: none; }
/* Два столбца: значения идут сверху вниз по столбцам (--rows строк в каждом), как в газете */
.filter__opts--cols { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows-closed, 4), auto); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-12); row-gap: 2px; }
.filter__scroll.is-expanded .filter__opts--cols { grid-template-rows: repeat(var(--rows-open, 4), auto); }
/* Значения сверх видимых прячутся, пока список свёрнут (состояние рисует сервер) */
.filter__scroll:not(.is-expanded) .is-more { display: none; }
.filter__opts--cols .opt { gap: 8px; }
.filter__opts--cols .opt__count { font-size: 12px; }
.filter__opts--more { margin-top: 2px; }
/* «Показать ещё»: раскрывается окно на 10 значений, остальные — внутренней прокруткой (полоса видна только при наведении) */
.filter__scroll { --opt-row: 34px; }
.filter__scroll.is-expanded { max-height: calc(10 * var(--opt-row) - 2px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.filter__scroll.is-expanded:hover, .filter__scroll.is-expanded:focus-within { scrollbar-color: #cbbfb1 transparent; }
@media (max-width: 1023px) { .filter__scroll { --opt-row: 46px; } }
/* «Показать ещё N» / «Свернуть» — под всем списком */
.filter__more { display: inline-block; margin-top: var(--space-8); padding: 6px 0; border: 0; background: none; color: var(--primary-pressed); font: inherit; font-size: 14px; cursor: pointer; }
.filter__more[hidden] { display: none; }
.filter__more:hover { text-decoration: underline; }
.filter__reset { display: inline-block; color: var(--ink-subtle); font-size: 14px; text-decoration: underline; }
.filter__reset:hover { color: var(--ink); }

/* Двойной ползунок с полями «от» / «до»: толстая дорожка, белые ручки с оранжевой каймой, подсказка при наведении, градация под ним.
   Ползунок стоит под полями «от / до», как просил заказчик; значения в полях меняются вживую при движении. */
.range { position: relative; height: 24px; margin: var(--space-16) 10px 32px; }
.range__track { position: absolute; left: 0; right: 0; top: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--surface-2); }
.range__fill { position: absolute; top: 0; bottom: 0; left: var(--lo, 0%); right: calc(100% - var(--hi, 100%)); border-radius: inherit; background: var(--primary); }
/* Полупрозрачный участок от ближайшей ручки до места под курсором: показывает, куда потянется диапазон */
.range__ghost { position: absolute; top: 0; bottom: 0; left: var(--gl, 0%); width: var(--gw, 0%); border-radius: inherit; background: rgba(237, 97, 51, 0.3); transition: left 75ms linear, width 75ms linear; pointer-events: none; }
.range__thumb {
  position: absolute;
  left: -10px;
  top: 0;
  width: calc(100% + 20px);
  height: 24px;
  margin: 0;
  padding: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.range__thumb::-webkit-slider-runnable-track { height: 24px; background: transparent; }
.range__thumb::-moz-range-track { height: 24px; background: transparent; }
.range__thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: var(--canvas);
  box-shadow: 0 2px 6px rgba(24, 16, 8, 0.22);
  pointer-events: auto;
  cursor: grab;
  transition: transform var(--dur-fast) var(--ease);
}
.range__thumb::-moz-range-thumb { box-sizing: border-box; width: 20px; height: 20px; border: 2px solid var(--primary); border-radius: 50%; background: var(--canvas); box-shadow: 0 2px 6px rgba(24, 16, 8, 0.22); pointer-events: auto; cursor: grab; transition: transform var(--dur-fast) var(--ease); }
@media (hover: hover) {
  .range__thumb::-webkit-slider-thumb:hover { transform: scale(1.25); }
  .range__thumb::-moz-range-thumb:hover { transform: scale(1.25); }
}
.range__thumb:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.15); }
.range__thumb:active::-moz-range-thumb { cursor: grabbing; transform: scale(1.15); }
.range__thumb:focus-visible { box-shadow: none; }
.range__thumb:focus-visible::-webkit-slider-thumb { box-shadow: var(--shadow-focus); }
.range__thumb:focus-visible::-moz-range-thumb { box-shadow: var(--shadow-focus); }
/* Градация: подписи стоят там, где значение на шкале. На узкой колонке остаются крайние и средняя метки */
.range__scale { position: absolute; left: -10px; right: -10px; top: 32px; display: flex; justify-content: space-between; height: 16px; container-type: inline-size; user-select: none; }
.range__tick { color: var(--ink-subtle); font-size: 11px; font-weight: 500; line-height: 16px; letter-spacing: -0.1px; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0.85; }
@container (max-width: 250px) { .range__tick--q { display: none; } }
.range__fields { display: flex; align-items: center; gap: var(--space-8); }
.range__dash { color: var(--ink-subtle); }
.num { position: relative; display: block; flex: 1; min-width: 0; }
.num__pre { position: absolute; left: 10px; top: 50%; color: var(--ink-subtle); font-size: 13px; pointer-events: none; transform: translateY(-50%); }
.num input {
  width: 100%;
  height: 40px;
  padding: 0 10px 0 34px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-input);
  background: var(--canvas);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.num input:focus-visible { border-color: var(--primary); box-shadow: none; }
/* Цифры в полях меняются «барабаном» (как в образце NumberFlow): под полем лежит слой с колонками 0–9, поле само в покое прозрачно; при вводе с клавиатуры слой прячется */
.num input:not(:focus) { color: transparent; caret-color: transparent; }
.num__flow { position: absolute; left: 34px; right: 10px; top: 0; bottom: 0; display: flex; align-items: center; color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; pointer-events: none; white-space: pre; }
.num input:focus ~ .num__flow { opacity: 0; }
.flow__d { display: inline-block; height: 18px; overflow: hidden; line-height: 18px; }
/* Колонка сдвигается отступом, а не transform: слой с transform отрисовывал цифры бледнее и на полпикселя не там, где остальной текст («плясали»);
   отступ кратен целой высоте строки (18 px), текст остаётся обычным, чётким */
.flow__col { display: flex; flex-direction: column; margin-top: calc(var(--d, 0) * -18px); }
.flow__ready .flow__col { transition: margin-top 0.45s cubic-bezier(0.2, 0.9, 0.25, 1); }
/* Цифры по центру своих ячеек: узкая «1» не жмётся влево и промежутки ровные */
.flow__col i { display: block; height: 18px; font-style: normal; line-height: 18px; text-align: center; }
.flow__s { display: inline-block; height: 18px; line-height: 18px; }

/* ---------- Панель сортировки ---------- */
.catalog-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-16); margin: 0 0 var(--space-16); }
/* Вкладка «Фильтры» на левом краю экрана: только планшет и телефон (стили в блоке max-width: 1023px ниже), на компьютере её нет */
.filter-tab { display: none; }
.sort { display: inline-flex; align-items: center; gap: 10px; }
.sort__label { color: var(--ink-subtle); font-size: 14px; }
.sort__select {
  height: 40px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-input);
  background: var(--canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23746a5e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.sort__nojs a { margin-right: var(--space-8); color: var(--primary-pressed); font-size: 14px; }

/* ---------- Выбранные фильтры ---------- */
.applied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin: 0 0 var(--space-16); padding: 0; list-style: none; }
.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: var(--radius-tile); background: var(--surface-1); color: var(--ink); font-size: 13px; transition: background-color var(--dur-fast) var(--ease); }
.tag:hover { background: var(--surface-2); }
.tag .icon { width: 12px; height: 12px; color: var(--ink-subtle); }
.applied__reset { margin-left: 4px; color: var(--primary-pressed); font-size: 13px; text-decoration: underline; }

/* ---------- Пусто ---------- */
.catalog-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); padding: var(--space-48) var(--space-24); border: 1px dashed var(--hairline); border-radius: var(--radius-tile); text-align: center; }
.catalog-empty__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.catalog-empty__text { margin: 0 0 var(--space-8); color: var(--ink-muted); }

/* ---------- Пагинация ---------- */
.pager { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-16); margin-top: var(--space-32); }
.pager__status { margin: 0; color: var(--ink-subtle); font-size: 14px; }
.pager__status b { color: var(--ink); font-weight: 600; }
.pager__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pager__word, .pager__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  color: var(--ink-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.pager__word { padding: 0 10px; }
.pager__word .icon { width: 12px; height: 12px; }
a.pager__word:hover, a.pager__page:hover { background: var(--surface-1); color: var(--ink); }
.pager__word.is-disabled { opacity: 0.4; }
.pager__page.is-active { border-color: var(--hairline); background: var(--canvas); color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgba(24, 16, 8, 0.14); }
.pager__gap { padding: 0 4px; color: var(--ink-subtle); }
/* Текущая страница — поле ввода: номер страницы + Enter */
.pager__jump { margin: 0; }
.pager__input {
  width: 48px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-btn);
  background: var(--canvas);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  box-shadow: 0 1px 3px rgba(24, 16, 8, 0.14);
  cursor: text;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.pager__input:hover { border-color: var(--ink-subtle); }
.pager__input:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(237, 97, 51, 0.25); }
.pagesize { position: relative; justify-self: end; }
.pagesize__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-input);
  background: var(--canvas);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}
.pagesize__btn::-webkit-details-marker { display: none; }
.pagesize__btn .icon { width: 12px; height: 12px; color: var(--ink-subtle); transition: transform var(--dur-fast) var(--ease); }
.pagesize[open] .pagesize__btn .icon { transform: rotate(180deg); }
.pagesize__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 4px);
  z-index: var(--z-dropdown);
  min-width: 120px;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--canvas);
  box-shadow: var(--shadow-tooltip);
}
.pagesize__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: var(--radius-badge); color: var(--ink-muted); font-size: 14px; }
.pagesize__item:hover { background: var(--surface-1); color: var(--ink); }
.pagesize__item.is-selected { color: var(--primary-pressed); font-weight: 700; }
.pagesize__item .icon { width: 14px; height: 14px; }

/* ---------- Ноутбук ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .catalog-layout { grid-template-columns: 240px minmax(0, 1fr); column-gap: var(--space-24); }
}

/* ---------- Планшет и телефон: фильтр — шторка слева ---------- */
@media (max-width: 1023px) {
  .catalog-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "results"; }
  .catalog-layout > .filter { grid-area: auto; }
  /* Вкладка «Фильтры»: постоянно видимая вертикальная вкладка на левом краю вместо кнопки над списком. */
  .filter-tab {
    position: fixed;
    left: 0;
    top: 41vh;
    top: 41dvh;
    z-index: calc(var(--z-drawer) + 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: calc(42px + env(safe-area-inset-left));
    min-height: 136px;
    padding: 12px 0 14px env(safe-area-inset-left);
    border: 0;
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    background: var(--primary);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(24, 16, 8, 0.28);
    cursor: pointer;
    transition: transform 240ms var(--ease), opacity 240ms var(--ease);
  }
  .filter-tab .icon { width: 18px; height: 18px; }
  .filter-tab__text { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.4px; line-height: 1; }
  .filter-tab__n { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: var(--radius-pill); background: #fff; color: var(--primary-pressed); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .filter-tab:active { background: var(--primary-pressed); }
  body.is-filter-open .filter-tab { transform: translateX(-100%); opacity: 0; pointer-events: none; }
  .filter-tab:focus-visible { transform: none; opacity: 1; outline: 2px solid var(--ink); outline-offset: 2px; }

  .catalog-toolbar { justify-content: flex-end; }

  .filter {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    width: min(78vw, 360px);
    max-height: none;
    padding: 0;
    overflow: hidden;
    background: var(--canvas);
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 280ms var(--ease), visibility 0s linear 280ms;
  }
  .filter.is-open { visibility: visible; transform: none; box-shadow: 0 0 40px rgba(24, 16, 8, 0.28); transition-delay: 0s; }
  .filter__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16); border-bottom: 1px solid var(--hairline-soft); }
  .filter__title { margin: 0; font-size: 18px; font-weight: 700; }
  .filter__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-btn); background: transparent; color: var(--ink); cursor: pointer; }
  .filter__close .icon { width: 22px; height: 22px; }
  .filter__body { flex: 1; min-height: 0; padding: var(--space-16); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .filter__body:hover, .filter__body:focus-within { scrollbar-color: #cbbfb1 transparent; }
  .filter__foot { display: flex; align-items: stretch; gap: var(--space-8); padding: var(--space-12) var(--space-16) calc(var(--space-12) + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline-soft); }
  .filter__apply { flex: 1 1 auto; min-width: 0; }
  .filter__clear { display: grid; place-items: center; flex: none; min-height: 48px; padding: 0 var(--space-16); border: 1px solid var(--hairline); border-radius: var(--radius-btn); background: var(--canvas); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease); }
  .filter__clear:hover, .filter__clear:active { background: var(--surface-1); }
  .filter__body .filter__reset { display: none; }   /* на телефоне «Сбросить» стоит внизу панели рядом с «Показать» */
  .opt { min-height: 44px; }
  summary.filter__label { min-height: 44px; }

  .filter-scrim { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: rgba(24, 16, 8, 0.45); opacity: 0; transition: opacity 280ms var(--ease); }
  .filter-scrim.is-open { opacity: 1; }
  body.is-filter-open { overflow: hidden; }
}

@media (max-width: 1023px) {
  .catalog-lead, .authors-wrap { display: none; }
  .cat-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12); }
  .cat-card { display: flex; flex-direction: column; min-height: 156px; padding: var(--space-12); }
  .cat-card__name { padding-right: 0; font-size: 14px; }
  .cat-card__count { padding-right: 0; font-size: 12px; }
  .cat-card__img { position: absolute; right: 6px; bottom: 6px; width: 58%; height: 78px; }
}

/* ---------- Телефон ---------- */
@media (max-width: 767px) {
  .catalog-head__title { font-size: 22px; }
  .cat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); margin-bottom: var(--space-24); }
  .cat-card { min-height: 156px; }
  .cat-hot__item { min-height: 40px; }
  .sort__label { display: none; }
  .sort__select { max-width: 200px; }
  .pager { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-12); }
  .pager__list { grid-column: 1 / -1; grid-row: 1; justify-content: center; }
  .pager__status { grid-row: 2; }
  .pagesize { grid-row: 2; }
  .pager__word { padding: 0 6px; }
  .pager__page, .pager__word { min-width: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .filter, .filter-scrim, .filter-tab, .filter__clear { transition: none; }
}

/* ---------- Переключатель «есть / нет» в фильтре ---------- */
.filter__section--toggle { padding: var(--space-8) 0; }
.tgl { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.35; cursor: pointer; }
.tgl__count { color: var(--ink-subtle); font-weight: 400; }
.tgl__switch { position: relative; flex: none; width: 44px; height: 24px; border-radius: var(--radius-pill); background: var(--surface-2); transition: background-color 0.3s var(--ease); }
.tgl__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: var(--radius-pill); background: #fff; box-shadow: 0 1px 3px rgba(24, 16, 8, 0.25); transition: 0.3s var(--ease); }
.tgl.is-on .tgl__switch { background: var(--primary); }
.tgl.is-on .tgl__switch::after { left: calc(100% - 3px); transform: translateX(-100%); }
.tgl:active .tgl__switch::after { width: 26px; }   /* при нажатии «шарик» вытягивается */
.tgl:focus-visible { outline: none; }
.tgl:focus-visible .tgl__switch { box-shadow: var(--shadow-focus); }
@media (hover: hover) { a.tgl:hover .tgl__label { color: var(--primary-pressed); } }
.tgl.is-zero { color: var(--ink-subtle); cursor: default; }
.tgl.is-zero .tgl__switch { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { .tgl__switch, .tgl__switch::after, .range__ghost { transition: none; } }

/* ---------- Сколько нашлось: вверху фильтра и рядом с заголовком ---------- */
.catalog-head__count.is-found { padding: 2px 10px; border-radius: var(--radius-pill); background: var(--primary-tint); color: var(--primary-pressed); font-weight: 500; }
.catalog-head__count.is-found strong { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .flow__ready .flow__col { transition: none; } }

/* Страница бренда (/brand/…): вместо плиток разделов карточка «О бренде» */
.brand-hero { display: flex; align-items: center; gap: var(--space-24); min-height: 136px; margin: 0 0 var(--space-24); padding: var(--space-16) var(--space-24); border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--canvas); }
.brand-hero__logo { flex: none; width: auto; max-width: 140px; height: 48px; object-fit: contain; }
.brand-hero__text { flex: 1 1 auto; min-width: 0; }
.brand-hero__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-12); margin: 0 0 var(--space-4); font-size: 20px; font-weight: 700; line-height: 1.3; }
.brand-hero__country { color: var(--ink-subtle); font-size: 13px; font-weight: 500; }
.brand-hero__about { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 767px) {
  .brand-hero { flex-direction: column; align-items: flex-start; gap: var(--space-12); min-height: 0; margin-bottom: var(--space-16); padding: var(--space-16); }
}