/* ============================================================
   JazzWay — мега-меню каталога (v3 «оси», 09.2026).
   Все классы под префиксом .jwcat- ; токены изолированы в .jwcat-overlay.
   Десктоп/планшет: попап под строкой поиска (координаты задаёт скрипт через
   --jz-left/--jz-width/--jz-top), внутри полоса осей + панель.
   Мобильный ≤767: та же структура осей внутри шторки снизу (шапка со свайпом).
   ============================================================ */

.jwcat-overlay {
  /* ---- локальные токены (маппинг дизайн-системы JAZZWAY на бренд темы) ---- */
  --jz-orange: #E94E1B;
  --jz-orange-press: #d1410f;          /* и фон под мелким белым текстом: 6.3:1 против 3.8:1 у #E94E1B */
  --jz-orange-wash: rgba(233, 78, 27, 0.08);
  --jz-black-80: #303131;
  --jz-black-10: #d9d9d9;
  --jz-surface-card: #ffffff;
  --jz-surface-page: #F2F3F6;
  --jz-border: #ECEDEF;
  --jz-heading: #171717;
  --jz-on-brand: #ffffff;
  --jz-secondary: #6b6b6b;             /* 5.3:1 на белом; #878787 давал 3.6:1 и не проходил AA */
  --jz-radius-sm: 8px;
  --jz-radius-md: 12px;
  --jz-radius-lg: 16px;
  --jz-shadow-pop: 0 24px 70px rgba(22, 17, 12, 0.18), 0 6px 18px rgba(22, 17, 12, 0.10);
  --jz-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --jz-dur: 0.18s;
  --jz-font: var(--jv-font-family, 'TT Norms Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);

  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 20, 22, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--jz-dur) var(--jz-ease);
  font-family: var(--jz-font);
  color: var(--jz-heading);
  -webkit-font-smoothing: antialiased;
}
.jwcat-overlay.is-open { opacity: 1; pointer-events: auto; }

.jwcat-overlay * { box-sizing: border-box; }
.jwcat-locked { overflow: hidden !important; }

.jwcat-overlay ::-webkit-scrollbar { width: 6px; height: 6px; }
.jwcat-overlay ::-webkit-scrollbar-thumb { background: rgba(48, 49, 49, 0.14); border-radius: 999px; }
.jwcat-overlay :hover::-webkit-scrollbar-thumb { background: rgba(48, 49, 49, 0.28); }

.jwcat-overlay :focus-visible { outline: 2px solid var(--jz-orange-press); outline-offset: 2px; border-radius: 6px; }
.jwcat-popup:focus { outline: none; }

/* ============================================================
   DESKTOP / TABLET — попап под строкой поиска
   ============================================================ */
.jwcat-popup {
  position: fixed;
  top: var(--jz-top, 96px);
  left: var(--jz-left, 5vw);
  width: var(--jz-width, 90vw);
  max-height: min(720px, calc(100vh - var(--jz-top, 96px) - 16px));
  display: flex; flex-direction: column;
  background: var(--jz-surface-card);
  border-radius: var(--jz-radius-lg);
  overflow: hidden;
  box-shadow: var(--jz-shadow-pop);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--jz-dur) var(--jz-ease), transform var(--jz-dur) var(--jz-ease);
}
.jwcat-overlay.is-open .jwcat-popup { opacity: 1; transform: none; }

/* якорей не нашли (поиск скрыт, узкая шапка) — диалог по центру.
   Без transform: анимация появления у базового правила тоже на transform,
   и два перехода спорили бы за одно свойство. */
.jwcat-popup--float {
  --jz-float-w: min(1100px, 94vw);
  top: max(16px, calc(50% - 330px));
  left: calc(50% - var(--jz-float-w) / 2);
  width: var(--jz-float-w);
  max-height: min(720px, 82vh);
}

/* крестик: на одной оси с полосой переключателей, плашка того же серого */
.jwcat-close {
  position: absolute; top: 16px; right: 26px; z-index: 3;
  width: 38px; height: 38px;
  border: 0; border-radius: 999px;
  background: var(--jz-surface-page);
  display: grid; place-items: center;
  color: var(--jz-black-80); cursor: pointer;
  transition: background var(--jz-dur) var(--jz-ease), color var(--jz-dur) var(--jz-ease);
}
.jwcat-close:hover { background: #e4e6ea; color: var(--jz-heading); }
.jwcat-close:active { background: #dcdfe4; }
.jwcat-close svg { width: 16px; height: 16px; }

.jwcat-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.jwcat-axes { display: flex; flex-direction: column; min-height: 0; flex: 1; }

/* мобильная шапка шторки скрыта на десктопе */
.jwcat-sheet-head { display: none; }

/* ---------- Полоса осей (сегментные пилюли) ---------- */
.jwcat-bar {
  display: flex; gap: 3px;
  margin: 16px 76px 12px 26px;            /* справа — место под крестик */
  padding: 3px;
  background: var(--jz-surface-page);
  border-radius: 999px;
  align-self: flex-start; flex: none;
  max-width: calc(100% - 102px);
  overflow-x: auto; scrollbar-width: none;
}
.jwcat-bar::-webkit-scrollbar { display: none; }
.jwcat-tab {
  padding: 8px 18px;
  border: 0; border-radius: 999px;
  background: transparent;
  font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.3;
  color: var(--jz-black-80); white-space: nowrap; cursor: pointer;
  transition: background var(--jz-dur) var(--jz-ease), color var(--jz-dur) var(--jz-ease);
}
.jwcat-tab:hover { color: var(--jz-orange); }
.jwcat-tab.is-active { background: var(--jz-orange-press); color: var(--jz-on-brand); }
.jwcat-tab:focus-visible { outline-offset: -2px; border-radius: 999px; }

/* ---------- Панель оси ---------- */
.jwcat-pane { flex: 1; min-height: 0; overflow-y: auto; }

/* «По типу» — плитки */
.jwcat-tiles {
  display: grid;
  /* попап на 1620px ≈ 1147px шириной, минус ~15px полосы прокрутки панели: минимум 200 даёт 5 колонок
     даже с полосой (24 плитки в 5 строк) — тогда переполнения нет и полоса не появляется */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  padding: 8px 26px 22px;
}
.jwcat-tile {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; min-width: 0;
  border: 1px solid transparent; border-radius: var(--jz-radius-md);
  text-decoration: none; color: inherit;
  transition: background var(--jz-dur) var(--jz-ease), border-color var(--jz-dur) var(--jz-ease);
}
.jwcat-tile:hover { background: var(--jz-orange-wash); border-color: #f6cbba; }
.jwcat-tile-ic { width: 24px; height: 24px; flex: none; color: var(--jz-orange); display: grid; place-items: center; margin-top: 1px; }
.jwcat-tile-ic svg { width: 24px; height: 24px; }
.jwcat-tile-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jwcat-tile-name { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--jz-heading); text-wrap: balance; }
.jwcat-tile-desc {
  font-size: 13px; line-height: 1.38; color: var(--jz-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* «Оглавление» — колонки */
.jwcat-index { padding: 6px 26px 22px; column-width: 212px; column-gap: 28px; }
.jwcat-ix { break-inside: avoid; margin-bottom: 15px; }
.jwcat-ix-h {
  display: block; padding-bottom: 4px; margin-bottom: 4px;
  border-bottom: 1px solid var(--jz-border);
  font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--jz-heading);
  text-decoration: none; text-wrap: balance;
}
.jwcat-ix-h:hover { color: var(--jz-orange); }
.jwcat-ix-l {
  display: block; padding: 2px 0 2px 5px;
  font-size: 13.5px; line-height: 1.4; color: var(--jz-black-80); text-decoration: none;
}
.jwcat-ix-l:hover { color: var(--jz-orange); }

/* «По отрасли» — карточки с иллюстрацией отрасли (как на странице «Отрасли») */
.jwcat-ind {
  display: grid;
  /* минимум 144 → 7 карточек в строке на 1147px: 13 отраслей в две строки */
  grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
  gap: 12px;
  padding: 8px 26px 22px;
}
.jwcat-ind-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 12px 16px;
  border: 1px solid var(--jz-border); border-radius: 14px;
  background: var(--jz-surface-card); text-decoration: none; color: inherit; text-align: center;
  transition: border-color var(--jz-dur) var(--jz-ease), box-shadow var(--jz-dur) var(--jz-ease);
}
.jwcat-ind-card:hover { border-color: var(--jz-orange); box-shadow: 0 6px 20px rgba(233, 78, 27, 0.12); }
.jwcat-ind-illus { display: block; width: 100%; height: 118px; }
.jwcat-ind-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.jwcat-ind-ic {
  width: 118px; height: 118px;
  border-radius: var(--jz-radius-md); background: var(--jz-surface-page);
  display: grid; place-items: center; color: var(--jz-orange);
}
.jwcat-ind-ic svg { width: 34px; height: 34px; }
.jwcat-ind-name { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--jz-heading); text-wrap: balance; }

.jwcat-empty { padding: 20px 26px; font-size: 13.5px; color: var(--jz-secondary); }

/* ---------- Планшет: те же оси, плотнее поля ---------- */
@media (max-width: 1179px) {
  .jwcat-bar { margin: 14px 70px 10px 20px; }
  .jwcat-close { right: 20px; top: 14px; }
  .jwcat-tiles, .jwcat-ind { padding-left: 20px; padding-right: 20px; }
  .jwcat-index { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================
   MOBILE ≤ 767 — шторка-аккордеон
   ============================================================ */
@media (max-width: 767px) {
  .jwcat-overlay { background: rgba(22, 17, 12, 0.5); }
  .jwcat-popup, .jwcat-popup--float {
    top: auto; left: 0; right: 0; bottom: 0;
    transform: translateY(24px);
    width: 100%; height: auto; max-height: calc(100dvh - 24px);
    border-radius: 24px 24px 0 0;
    display: flex; flex-direction: column;
  }
  .jwcat-overlay.is-open .jwcat-popup,
  .jwcat-overlay.is-open .jwcat-popup--float { transform: translateY(0); }

  .jwcat-close { display: none; }

  /* липкая шапка со свайпом */
  .jwcat-sheet-head {
    display: flex; align-items: center; gap: 10px;
    position: relative; flex: none;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--jz-border);
    background: var(--jz-surface-card);
    cursor: grab; touch-action: none;
  }
  .jwcat-handle {
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 999px; background: var(--jz-black-10);
  }
  .jwcat-sheet-title { font-size: 17px; font-weight: 800; letter-spacing: -0.015em; }
  .jwcat-sheet-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--jz-black-80); }
  .jwcat-sheet-close {
    width: 34px; height: 34px; border: 0; border-radius: var(--jz-radius-md);
    background: var(--jz-orange); color: var(--jz-on-brand); display: grid; place-items: center; cursor: pointer;
  }
  .jwcat-sheet-close svg { width: 16px; height: 16px; }

  /* оси внутри шторки: пилюли под шапкой, панель прокручивается */
  .jwcat-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
  .jwcat-bar { margin: 12px 14px; max-width: calc(100% - 28px); }
  .jwcat-tab { padding: 8px 15px; font-size: 14px; }
  .jwcat-pane { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }

  .jwcat-tiles { grid-template-columns: 1fr; gap: 0; padding: 0 8px 16px; }
  .jwcat-tile { padding: 12px 10px; border-radius: 10px; border-color: transparent; }
  .jwcat-tile + .jwcat-tile { border-top-color: var(--jz-border); border-radius: 0; }
  .jwcat-tile:hover { border-color: transparent; }
  .jwcat-tile + .jwcat-tile:hover { border-top-color: var(--jz-border); }
  .jwcat-tile-desc { -webkit-line-clamp: 1; }

  .jwcat-index { padding: 0 14px 16px; column-width: auto; columns: 1; }
  .jwcat-ix { margin-bottom: 14px; }
  .jwcat-ix-h { font-size: 15px; padding: 8px 0 6px; }
  .jwcat-ix-l { font-size: 14px; padding: 7px 0 7px 8px; }

  .jwcat-ind { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 14px 16px; }
  .jwcat-ind-card { padding: 12px 10px 14px; }
  .jwcat-ind-illus, .jwcat-ind-ic { height: 96px; }
  .jwcat-ind-ic { width: 96px; }
  .jwcat-ind-name { font-size: 14px; }
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .jwcat-overlay, .jwcat-popup, .jwcat-tab, .jwcat-tile, .jwcat-ind-card,
  .jwcat-close { transition: none !important; }
}

/* ════════ #212: скелетон попапа каталога ════════
   Показывается, если по «Каталогу» кликнули раньше, чем пришёл ответ
   эндпоинта меню. Раскладка та же (полоса осей + плитки), поэтому
   подмена настоящим содержимым не дёргает глаз. */
.jwcat-bar--skel { gap: 6px; padding: 6px 8px; }
.jwcat-skel-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; }
.jwcat-skel {
  display: block; border-radius: 8px; background: #ECEDEF; position: relative; overflow: hidden;
}
.jwcat-skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  animation: jwcat-sweep 1.25s infinite;
}
.jwcat-skel--tab { height: 26px; border-radius: 999px; background: #e4e6ea; }
.jwcat-skel--ic { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.jwcat-skel--line { height: 13px; }
@keyframes jwcat-sweep { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .jwcat-skel::after { animation: none; } }