/* ─────────────────────────────────────────────────────────────────────────────
   ui/catalog-menu.css — вид каталог-меню (логика — ./catalog-menu.js).
   Только var(--*) из tokens.css. Линкуется ПОСЛЕ tokens.css и pop.css (кнопка
   «Повторить» — общий .pp-btn). Страница-хозяин отвечает лишь за место кнопки
   в своей шапке; всё остальное (панель, лист, затемнение) живёт здесь, чтобы меню
   монтировалось и на SSR-страницах /catalog/* без копий правил.

   ── СЛОИ ──────────────────────────────────────────────────────────────────────
   Десктоп: затемнение и панель встают МЕЖДУ липким тулбаром листинга (20) и шапкой
   сайта (.cm-app-nav, 50): шапка остаётся живой и не тускнеет, выдача под панелью —
   тускнеет. Значения считаются от --z-chrome, а не пишутся «40» руками.
   Мобила: лист = модальный слой (--z-modal 120) — выше нижней панели разделов (115)
   и cookie-плашки (119), которые он перекрывает целиком.

   ── ПЛОТНОСТЬ (D0) ───────────────────────────────────────────────────────────
   Панель большая по ЯВНОЙ просьбе владельца («как у Маркета») — это рабочая поверхность
   навигации, как карта ПВЗ в DENSITY §1: растёт ОКНО, контролы внутри — нет.
   Строка группы 36px, заголовок подгруппы 14/700, товар 44px (превью 40), кнопка
   «Каталог» = высота поиска. Высота панели = max(список групп, контент), потолок —
   до низа экрана (max 620px), дальше прокрутка внутри колонок, окно не растёт.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── КНОПКА «КАТАЛОГ» ───────────────────────────────────────────────────────── */
/* Цвет — бренд-фиолетовый (владелец 27.09: «зачем не брендовый цвет»; --lime — не цвет
   кнопок). Ступень -600 той же рампы, а не #7C5CFF (--accent): белый 14–15px/700 на
   --accent = 4.35:1 < AA 4.5, на -600 = 5.47:1 — канон проекта для сплошной фиолетовой
   кнопки с белым текстом (.pp-mat-chip.is-on, .dr-save). Hover -700 (7.07:1). Открытое
   состояние («Закрыть» + крестик) — тот же цвет: состояние говорят слово и иконка.
   Градиент --grad-hero не берём: кнопка сидит в белой пилюле прямо под градиентным
   баннером — второй градиент рядом спорит с ним, сплошная заливка читается как одно действие. */
.pp-catm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  min-height: 40px; padding: 0 18px 0 15px; border: 0; border-radius: var(--pill);
  background: var(--violet-600); color: var(--card);
  font: 700 15px/1 var(--font); letter-spacing: -.005em; white-space: nowrap;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--ink) 60%, transparent);
  transition: background-color .15s ease, transform .16s cubic-bezier(.23, 1, .32, 1);
}
.pp-catm-btn:hover { background: var(--violet-700); }
.pp-catm-btn:active { transform: scale(.97); }
.pp-catm-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
/* подпись «Каталог» ↔ «Закрыть»: ширина по большей из двух — кнопка не дёргается */
.pp-catm-btn-t { display: inline-block; min-width: 4.3em; text-align: left; }
/* иконка: сетка ↔ крестик — поворот+растворение, 180 мс (причина-следствие нажатия) */
.pp-catm-btn-ic { position: relative; width: 18px; height: 18px; flex: none; }
.pp-catm-btn-ic svg {
  position: absolute; inset: 0; width: 18px; height: 18px;
  transition: opacity .16s ease, transform .2s cubic-bezier(.23, 1, .32, 1);
}
.pp-catm-btn-ic .is-x { opacity: 0; transform: rotate(-90deg) scale(.6); }
.pp-catm-btn[aria-expanded="true"] .pp-catm-btn-ic .is-grid { opacity: 0; transform: rotate(90deg) scale(.6); }
.pp-catm-btn[aria-expanded="true"] .pp-catm-btn-ic .is-x { opacity: 1; transform: none; }

/* ── ДЕСКТОП-ПАНЕЛЬ ─────────────────────────────────────────────────────────── */
.pp-catm-anchor { position: relative; }
.pp-catm-scrim {
  position: fixed; inset: 0; z-index: calc(var(--z-chrome) - 20);
  background: color-mix(in srgb, var(--ink) 26%, transparent);
}
.pp-catm {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--sp-2));
  z-index: calc(var(--z-chrome) - 19);
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  max-height: var(--catm-maxh, 560px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-lg);
  box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--ink) 45%, transparent),
              0 2px 8px color-mix(in srgb, var(--ink) 6%, transparent);
  overflow: hidden; text-align: left;
}
.pp-catm.is-state { display: block; }
.pp-catm.is-leaving, .pp-catm-scrim.is-leaving { pointer-events: none; }

/* список групп — второй нейтральный слой (чуть теплее поверхности панели) */
.pp-catm-rail {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding: var(--sp-2);
  background: color-mix(in srgb, var(--bg2) 60%, var(--card));
  border-right: 1px solid var(--line);
}
.pp-catm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pp-catm-g {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px 0 10px;
  border-radius: var(--rad-sm); color: var(--ink); text-decoration: none;
  font: 500 14px/1.2 var(--font);
  transition: background-color .12s ease;
}
.pp-catm-g .pp-catm-ic { flex: none; color: var(--ink2); }
.pp-catm-gl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-catm-chev { flex: none; color: var(--ink2); opacity: .45; }
.pp-catm-g:hover { background: color-mix(in srgb, var(--card) 70%, transparent); }
.pp-catm-g.is-on {
  background: var(--card); font-weight: 600;
  box-shadow: 0 0 0 1px var(--line), 0 1px 3px color-mix(in srgb, var(--ink) 7%, transparent);
}
.pp-catm-g.is-on .pp-catm-ic, .pp-catm-g.is-on .pp-catm-chev { color: var(--violet-600); opacity: 1; }
.pp-catm-g:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
.pp-catm-sep { height: 1px; margin: var(--sp-2) var(--sp-2); background: var(--line); }

/* правая часть */
.pp-catm-body {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
}
.pp-catm-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--sp-3); margin-bottom: var(--sp-4); }
.pp-catm-title {
  margin: 0; font: 800 var(--fs-lg)/1.15 var(--font-display); letter-spacing: -.01em;
  color: var(--ink); text-wrap: balance;
}
.pp-catm-cnt { font: 500 13px/1.2 var(--font); color: var(--ink2); font-variant-numeric: tabular-nums; }
.pp-catm-all {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 32px;
  font: 600 14px var(--font); color: var(--violet-600); text-decoration: none; white-space: nowrap;
}
.pp-catm-all:hover { color: var(--violet-700); text-decoration: underline; text-underline-offset: 3px; }
.pp-catm-all:focus-visible, .pp-catm-sub-t:focus-visible, .pp-catm-it:focus-visible,
.pp-catm-tile:focus-visible, .pp-catm-coll:focus-visible, .pp-catm-cta:focus-visible {
  outline: 2px solid var(--violet); outline-offset: 2px; border-radius: var(--rad-sm);
}

/* колонки подгрупп: жирный заголовок + счётчик, под ним до 3 живых товаров */
.pp-catm-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: var(--sp-5) var(--sp-6); }
.pp-catm-sub { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pp-catm-sub-t {
  align-self: flex-start; display: inline-flex; align-items: baseline; gap: 6px; min-height: 24px;
  font: 700 14px/1.3 var(--font); color: var(--ink); text-decoration: none;
}
.pp-catm-sub-t:hover, .pp-catm-sub-t.is-cur { color: var(--violet-600); }
.pp-catm-n { font: 600 12px/1 var(--font); color: var(--ink2); font-variant-numeric: tabular-nums; }
.pp-catm-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pp-catm-it {
  display: flex; align-items: center; gap: 10px; min-height: 44px; margin-left: -4px; padding: 2px 6px 2px 4px;
  border-radius: var(--rad-sm); color: var(--ink2); text-decoration: none;
  font: 500 13px/1.3 var(--font);
  transition: background-color .12s ease, color .12s ease;
}
.pp-catm-it:hover { background: var(--bg2); color: var(--ink); }
.pp-catm-th {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: var(--rad-sm); overflow: hidden; background: var(--bg2); color: var(--ink2);
}
.pp-catm-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-catm-itt { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* группа без подгрупп — плитки её товаров */
.pp-catm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--sp-4); max-width: 720px; }
.pp-catm-tile { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); color: var(--ink); text-decoration: none; font: 500 13px/1.3 var(--font); }
.pp-catm-tile-im {
  aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
  border-radius: var(--rad-md); background: var(--bg2); color: var(--ink2);
}
.pp-catm-tile-im img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s cubic-bezier(.23, 1, .32, 1); }
.pp-catm-tile:hover .pp-catm-tile-im img { transform: scale(1.03); }
.pp-catm-tile-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-catm-cta {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
  border: 1.5px solid var(--line2); border-radius: var(--pill); background: var(--card);
  font: 700 14px var(--font); color: var(--ink); text-decoration: none;
}
.pp-catm-cta:hover { border-color: var(--violet-300); }

/* подборки STL — текстовые колонки, как списки у Маркета */
.pp-catm-colls { list-style: none; margin: 0; padding: 0; columns: 3 200px; column-gap: var(--sp-6); }
.pp-catm-coll {
  display: flex; align-items: baseline; gap: 6px; min-height: 32px; padding: 6px 0; break-inside: avoid;
  font: 500 14px/1.3 var(--font); color: var(--ink); text-decoration: none;
}
.pp-catm-coll:hover { color: var(--violet-600); }

/* состояния: загрузка / ошибка / пусто */
.pp-catm-state { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); }
.pp-catm-state-t { margin: 0; font: 500 14px/1.45 var(--font); color: var(--ink2); }
.pp-catm-sk { display: block; background: var(--bg2); border-radius: var(--rad-sm); }
.pp-catm-sk-line { height: 12px; width: 70%; }
.pp-catm-it.is-sk { pointer-events: none; }
.pp-catm-tile.is-sk .pp-catm-sk-line { width: 80%; }
.pp-catm-sk-row { height: 28px; width: min(420px, 100%); }
.pp-catm-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── МОБИЛА (≤599px): полноэкранный лист «группы → подгруппы» ────────────────
   inset:0 у fixed считается от окна и не зависит от 100vh/dvh — прыгающий тулбар
   Safari лист не обрезает. Низ списка резервирует жестовую полосу (safe-area). */
.pp-catm.is-sheet {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: block; max-height: none; border: 0; border-radius: 0; box-shadow: none;
  background: var(--card); overflow: hidden;
}
.pp-catm-lock, .pp-catm-lock body { overflow: hidden; }
.pp-catm-scr { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--card); }
.pp-catm-scr[hidden] { display: none; }
.pp-catm-bar {
  flex: none; display: flex; align-items: center; gap: var(--sp-2);
  box-sizing: border-box; height: calc(52px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--sp-2) 0 var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.pp-catm-bar-t {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font: 800 17px/1.2 var(--font-display); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-catm-x, .pp-catm-back {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  height: 44px; min-width: 44px; padding: 0; border: 0; background: none; border-radius: var(--rad-md);
  color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pp-catm-x { margin-left: auto; }
.pp-catm-back { margin-left: calc(-1 * var(--sp-2)); padding-right: var(--sp-2); font: 600 15px var(--font); }
.pp-catm-x:active, .pp-catm-back:active { background: var(--bg2); }
.pp-catm-x:focus-visible, .pp-catm-back:focus-visible, .pp-catm-row:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
.pp-catm-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: var(--sp-2) 0 calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
}
.pp-catm-rows { list-style: none; margin: 0; padding: 0 var(--sp-2); }
.pp-catm-row {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; padding: 0 var(--sp-2);
  border-radius: var(--rad-md); color: var(--ink); text-decoration: none;
  font: 500 15px/1.25 var(--font); -webkit-tap-highlight-color: transparent;
}
.pp-catm-row:active { background: var(--bg2); }
.pp-catm-row.is-all { font-weight: 600; }
.pp-catm-row.is-cur .pp-catm-rl { color: var(--violet-600); font-weight: 600; }
.pp-catm-row .pp-catm-chev { opacity: .6; }
.pp-catm-row .pp-catm-n { font-size: 13px; font-weight: 500; }
.pp-catm-rl { flex: 1 1 auto; min-width: 0; }
.pp-catm-plate {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: var(--rad-sm); background: var(--bg2); color: var(--ink);
}
.pp-catm-sec { margin: var(--sp-4) var(--sp-4) var(--sp-1); font: 700 13px/1.3 var(--font); color: var(--ink2); }
.pp-catm-subhead { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-3); }
.pp-catm-subhead-t { margin: 0; font: 800 var(--fs-md)/1.2 var(--font-display); color: var(--ink); text-wrap: balance; }
/* живые обложки подгруппы стопкой: видно, ЧТО внутри, не заходя */
.pp-catm-stack { display: flex; flex: none; }
.pp-catm-stack > img, .pp-catm-stack > .pp-catm-sk {
  width: 28px; height: 28px; border-radius: 8px; object-fit: cover; background: var(--bg2);
  box-shadow: 0 0 0 2px var(--card);
}
.pp-catm-stack > * + * { margin-left: -8px; }
.is-sheet .pp-catm-tiles { grid-template-columns: 1fr 1fr; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) 0; max-width: none; }
.is-sheet .pp-catm-state { padding: var(--sp-5) var(--sp-4); }

/* ── ДВИЖЕНИЕ: вход панели/листа и проход «вглубь» — только то, что говорит о смене
   состояния. Выход быстрее входа. Смена группы наведением — мгновенная (пользователь
   в потоке, хореографию ждать не должен). Под reduced-motion — ни одной анимации. ── */
@media (prefers-reduced-motion: no-preference) {
  .pp-catm { animation: pp-catm-in .18s cubic-bezier(.23, 1, .32, 1); }
  .pp-catm-scrim { animation: pp-catm-fade .18s ease-out; }
  .pp-catm.is-leaving { animation: pp-catm-out .12s ease-in forwards; }
  .pp-catm-scrim.is-leaving { animation: pp-catm-fade-out .12s ease-in forwards; }
  .pp-catm.is-sheet { animation: pp-catm-sheet-in .22s cubic-bezier(.23, 1, .32, 1); }
  .pp-catm.is-sheet.is-leaving { animation: pp-catm-sheet-out .14s ease-in forwards; }
  .pp-catm-scr.is-entering { animation: pp-catm-push .26s cubic-bezier(.32, .72, 0, 1); }
  .pp-catm-scr.is-leaving { animation: pp-catm-pop .2s cubic-bezier(.32, .72, 0, 1) forwards; }
  .pp-catm-sk { animation: pp-catm-pulse 1.2s ease-in-out infinite; }
}
/* открыто с клавиатуры — без движения (Enter/Esc не ждут анимацию) */
.pp-catm.is-instant, .pp-catm-scrim.is-instant { animation: none !important; }
@keyframes pp-catm-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes pp-catm-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes pp-catm-fade { from { opacity: 0; } }
@keyframes pp-catm-fade-out { to { opacity: 0; } }
@keyframes pp-catm-sheet-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes pp-catm-sheet-out { to { opacity: 0; transform: translateY(12px); } }
@keyframes pp-catm-push { from { transform: translateX(100%); } }
@keyframes pp-catm-pop { to { transform: translateX(100%); } }
@keyframes pp-catm-pulse { 50% { opacity: .55; } }