/* ============================================================================
   catalog-page.css — стили standalone-страницы КАТЕГОРИИ витрины мастера
   /@{handle}/shop/c/{slug}  (каркас: catalog-page.html · гидрация: src/storefront-catalog.js).
   Владеет ux-pro. Линкуется В ГОЛОВЕ ПОСЛЕ tokens.css → pop.css → pro.css (её cascade-слот
   — последним, чтобы .pp-cat-* доводили уже загруженный язык pop/pro, а не боролись с ним).

   ── КОНТРАКТ ТЕМ (64 темы витрины, shop-themes.js) ──────────────────────────
   На проде SSR (seo-smith) ставит на #app атрибут [data-r] + inline CSS-var'ы темы.
   Вся страница внутри #app → .pp-cat-* НАСЛЕДУЮТ тему. Поэтому цвета берём
   ТЕМА-ПЕРВОЙ с бренд-фолбэком из tokens.css (0 нового hex):
     text     → var(--sink,  var(--ink,  ...))     акцент  → var(--acc, var(--violet, ...))
     muted    → var(--smut,  var(--ink2, ...))     surface → var(--ssurf, var(--card, ...))
     line     → var(--sline, var(--line, ...))     page bg → var(--sbg,  var(--bg,  ...))
     line2    → var(--sline2,var(--line2,...))
   Файл-оболочка без SSR (no-theme) → сработают бренд-фолбэки → канон BunnySplit.
   Шрифты: заголовок var(--sfont-head,var(--font-display)); текст var(--sfont,var(--font)).

   Грид карточек (.pp-catalog-grid[.is-compact]) стилизован в pop.css — здесь НЕ дублируем,
   только anti-flash-hold. Состояния .cm-state тут ЗАНОВО (community.css эта страница НЕ линкует).
   ============================================================================ */

/* ── Контейнер страницы ──────────────────────────────────────────────────── */
.pp-cat-page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 24px);
  padding-bottom: var(--sp-9, 48px);
  font-family: var(--sfont, var(--font, 'Inter', system-ui, sans-serif));
  color: var(--sink, var(--ink, #141414));
}

/* ── Хлебные крошки ──────────────────────────────────────────────────────── */
.pp-cat-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2, 8px);
  margin-top: var(--sp-5, 20px);
  font: 500 var(--fs-sm, 14px)/1.3 var(--sfont, var(--font, 'Inter', sans-serif));
  min-width: 0;
}
.pp-cat-crumb {
  color: var(--smut, var(--ink2, #5B5B66));
  text-decoration: none;
  border-radius: var(--rad-xs, 6px);
  transition: color .15s ease-out;
  max-width: 62vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.pp-cat-crumb:hover { color: var(--acc, var(--violet, #7C5CFF)); }
a.pp-cat-crumb:focus-visible {
  outline: 2px solid var(--acc, var(--violet, #7C5CFF));
  outline-offset: 2px;
}
.pp-cat-crumb-sep {
  color: var(--smut, var(--ink2, #5B5B66));
  opacity: .5;
  flex: none;
  user-select: none;
}
.pp-cat-crumb.is-current {
  color: var(--sink, var(--ink, #141414));
  font-weight: 600;
  cursor: default;
}

/* ── Шапка: H1 (доминанта) + приглушённый счётчик рядом ──────────────────── */
.pp-cat-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-1, 4px) var(--sp-4, 16px);
  margin: var(--sp-3, 12px) 0 var(--sp-6, 24px);
}
.pp-cat-title {
  margin: 0;
  font-family: var(--sfont-head, var(--font-display, 'Unbounded', sans-serif));
  font-size: clamp(24px, 5vw, var(--fs-2xl, 30px));
  font-weight: var(--shead-w, 800);
  letter-spacing: var(--shead-ls, -.02em);
  line-height: var(--lh-tight, 1.15);
  color: var(--sink, var(--ink, #141414));
  min-width: 0;
}
.pp-cat-count {
  margin: 0;
  flex: none;
  font: 500 var(--fs-sm, 14px)/1.2 var(--sfont, var(--font, 'Inter', sans-serif));
  color: var(--smut, var(--ink2, #5B5B66));
  font-variant-numeric: tabular-nums;   /* цифры не прыгают (§3) */
}
.pp-cat-count:empty { display: none; }   /* пусто = не рендерим (§5 INV-RENDER) */

/* ── Control-bar (канон §15): ОДНА полоса под H1 — поиск (растёт) + сортировка (право).
   Sticky при скролле длинного листинга; H1/крошки уезжают (контекст), бар остаётся. ── */
.pp-cat-controls {
  position: sticky;
  top: 58px;                              /* под sticky-шапкой мастера (.pp-mh ~60px) */
  z-index: 30;                            /* ниже шапки (z:50), выше карточек */
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  margin-bottom: var(--sp-6, 24px);
  padding-block: var(--sp-3, 12px);
  background: var(--sbg, var(--bg, #FFFDF7));
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease-out;
}
/* тонкая линия-отбивка, когда бар «прилип» и под ним едут карточки */
@supports (top: 1px) {
  .pp-cat-controls { border-bottom-color: var(--sline, var(--line, rgba(20,20,20,.08))); }
}

/* Поиск в категории — поле с иконкой слева (растёт на весь остаток строки) */
.pp-cat-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.pp-cat-search-ico {
  position: absolute;
  left: var(--sp-4, 16px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--smut, var(--ink2, #5B5B66));
  pointer-events: none;
  flex: none;
}
/* .pp-cat-search-inp — это .pp-input; тема-адаптируем и освобождаем место под иконку */
.pp-cat-search-inp.pp-input,
.pp-cat-sort.pp-input {
  min-height: 46px;                       /* тач-таргет ≥44 (§14.D) */
  background: var(--ssurf, var(--card, #fff));
  color: var(--sink, var(--ink, #141414));
  border-color: var(--sline2, var(--line2, rgba(20,20,20,.14)));
  font: 500 var(--fs-sm, 14px) var(--sfont, var(--font, 'Inter', sans-serif));
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.pp-cat-search-inp.pp-input {
  width: 100%;
  padding-left: calc(var(--sp-4, 16px) + 18px + var(--sp-2, 8px));  /* иконка 18 + зазор */
}
.pp-cat-search-inp.pp-input::placeholder { color: var(--smut, var(--ink2, #5B5B66)); }
.pp-cat-search-inp.pp-input:focus,
.pp-cat-sort.pp-input:focus {
  outline: none;
  border-color: var(--acc, var(--violet, #7C5CFF));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc, #7C5CFF) 22%, transparent);
}
/* фолбэк фокуса для движков без color-mix — видимый ring (§6, не удаляем) */
@supports not (color: color-mix(in srgb, red, blue)) {
  .pp-cat-search-inp.pp-input:focus,
  .pp-cat-sort.pp-input:focus { box-shadow: 0 0 0 3px var(--sline2, rgba(124,92,255,.28)); }
}
/* «×» нативного type=search — не рвём, только выравниваем */
.pp-cat-search-inp.pp-input::-webkit-search-cancel-button { cursor: pointer; }

/* Сортировка — крайняя справа (конвенция листингов, §15.D), select со своим chevron */
.pp-cat-sort.pp-input {
  flex: 0 0 auto;
  width: auto;
  min-width: 150px;
  max-width: 220px;
  cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: calc(var(--sp-4, 16px) + 14px);
  /* chevron — inline-asset (как favicon/pop.css:616); нейтральный gray = значение --gray-500,
     не новый бренд-hue; не тема-зависим (читаем на светлой поверхности select) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%238A8A92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4, 16px) center;
  background-size: 12px;
}

/* ── «Показать ещё» — вторичная кнопка, авто-ширина по центру ─────────────── */
.pp-cat-more {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-7, 32px);
}
.pp-cat-more[hidden] { display: none; }
.pp-cat-more #catMore.pp-btn {           /* перебиваем base width:100% / min-height:52 */
  width: auto;
  min-width: 200px;
  min-height: 48px;
  padding-inline: var(--sp-6, 24px);
  background: var(--ssurf, var(--card, #fff));
  color: var(--sink, var(--ink, #141414));
  border: 1.5px solid var(--sline2, var(--line2, rgba(20,20,20,.14)));
  transition: border-color .15s ease-out, transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
.pp-cat-more #catMore.pp-btn:hover { border-color: var(--acc, var(--violet, #7C5CFF)); }
.pp-cat-more #catMore.pp-btn:focus-visible {
  outline: 2px solid var(--acc, var(--violet, #7C5CFF));
  outline-offset: 2px;
}
.pp-cat-more #catMore.pp-btn:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }

/* ── Состояния грида (.cm-state — заново, community.css не линкуется) ──────── */
.pp-cat-page .cm-state {
  grid-column: 1 / -1;                    /* распластать на всю сетку, не в одну колонку */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-3, 12px);
  min-height: 42vh;
  padding: var(--sp-8, 40px) var(--sp-4, 16px);
}
.pp-cat-page .cm-state-txt {
  margin: 0;
  max-width: 44ch;
  font: 500 var(--fs-base, 16px)/var(--lh-normal, 1.5) var(--sfont, var(--font, 'Inter', sans-serif));
  color: var(--smut, var(--ink2, #5B5B66));
}
.pp-cat-page .cm-state .pp-btn {         /* кнопка «в магазин» — авто-ширина, тема-адаптив */
  width: auto;
  min-width: 200px;
  min-height: 46px;
  margin-top: var(--sp-1, 4px);
  padding-inline: var(--sp-6, 24px);
  background: var(--ssurf, var(--card, #fff));
  color: var(--sink, var(--ink, #141414));
  border: 1.5px solid var(--sline2, var(--line2, rgba(20,20,20,.14)));
}
.pp-cat-page .cm-state .pp-btn:hover { border-color: var(--acc, var(--violet, #7C5CFF)); }
.pp-cat-page .cm-state .pp-btn:focus-visible {
  outline: 2px solid var(--acc, var(--violet, #7C5CFF)); outline-offset: 2px;
}

/* Спиннер загрузки */
.pp-cat-page .cm-spinner {
  width: 38px; height: 38px; flex: none;
  border: 3px solid var(--sline2, var(--line2, rgba(20,20,20,.14)));
  border-top-color: var(--acc, var(--violet, #7C5CFF));
  border-radius: 50%;
  animation: pp-cat-spin .8s linear infinite;
}
@keyframes pp-cat-spin { to { transform: rotate(360deg); } }

/* Пустая категория / ошибка — дружелюбная карточка-панель (§5), не голый текст.
   Специфик  .pp-cat-page .cm-state.pp-cat-* (0,3,0) перебивает базовый 42vh (0,2,0). */
.pp-cat-page .cm-state.pp-cat-empty,
.pp-cat-page .cm-state.pp-cat-error {
  border-radius: var(--rad-lg, 16px);
  border: 1px solid var(--sline, var(--line, rgba(20,20,20,.08)));
  background: var(--ssurf, var(--card, #fff));
  max-width: 520px;
  margin-inline: auto;
  padding: var(--sp-9, 48px) var(--sp-6, 24px);
  min-height: auto;                       /* панель по контенту, не полноэкранная */
}
.pp-cat-page .cm-state.pp-cat-error {     /* ошибка — деликатный rose-акцент (статус, §3) */
  border-color: var(--rose-200, #FFB8C0);
  background: var(--rose-50, #FFF0F1);
}
.pp-cat-error .cm-state-txt { color: var(--rose-800, #A82838); }

/* ── Подвал: тихая ссылка обратно в магазин (петля не в тупик) ────────────── */
.pp-cat-foot {
  max-width: var(--page-max);
  margin: var(--sp-6, 24px) auto 0;
  padding: var(--sp-6, 24px) clamp(16px, 4vw, 24px) var(--sp-9, 48px);
  border-top: 1px solid var(--sline, var(--line, rgba(20,20,20,.08)));
  text-align: center;
}
.pp-cat-foot-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  min-height: 44px;                       /* тач-таргет */
  padding-inline: var(--sp-2, 8px);
  font: 600 var(--fs-sm, 14px) var(--sfont, var(--font, 'Inter', sans-serif));
  color: var(--smut, var(--ink2, #5B5B66));
  text-decoration: none;
  border-radius: var(--rad-xs, 6px);
  transition: color .15s ease-out;
}
.pp-cat-foot-link:hover { color: var(--acc, var(--violet, #7C5CFF)); }
.pp-cat-foot-link:focus-visible {
  outline: 2px solid var(--acc, var(--violet, #7C5CFF)); outline-offset: 2px;
}

/* ── Anti-content-flash: держим ТОЛЬКО грид до гидрации (шапка+H1+крошки+бар —
   мгновенно, как на витрине). storefront-catalog.js reveal() снимает shop-hydrating
   ПОСЛЕ первого рендера (line 176/250); +4s safety-timeout в <head> = fail-open.
   min-height резервирует место → нет прыжка подвала при fade-in. ────────────── */
.pp-cat-page .pp-catalog-grid { transition: opacity .35s ease; }
html.shop-hydrating .pp-cat-page .pp-catalog-grid {
  opacity: 0;
  min-height: 60vh;
}

/* ── Мобайл (≤640px, синхронно с брейком .pp-mh) ─────────────────────────── */
@media (max-width: 640px) {
  .pp-cat-controls {
    flex-wrap: wrap;
    top: 52px;                            /* мобильная шапка ниже */
    gap: var(--sp-2, 8px);
  }
  .pp-cat-search { flex: 1 1 100%; }      /* поиск — своя строка */
  .pp-cat-sort.pp-input {
    flex: 0 0 auto;
    margin-left: auto;                    /* сортировка вправо во второй строке */
    max-width: none;
    min-width: 140px;
  }
  .pp-cat-title { font-size: clamp(22px, 6.4vw, 26px); }
  .pp-cat-crumb { max-width: 72vw; }
}

/* ── Motion-safe ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pp-cat-page .cm-spinner { animation: none; }
  .pp-cat-page .pp-catalog-grid,
  .pp-cat-crumb, .pp-cat-foot-link,
  .pp-cat-search-inp.pp-input, .pp-cat-sort.pp-input,
  .pp-cat-more #catMore.pp-btn { transition: none; }
  .pp-cat-more #catMore.pp-btn:hover { transform: none; }
}