/*
 * category.css — стили страницы category.html
 *
 * Переиспользует .catalog-container, .breadcrumbs*, .catalog-hero, .tree-node-card,
 * .btn-request из catalog.css/sfera-base.css — не дублирует их. Здесь только то,
 * что специфично для category.html: заголовок узла, сетка дочерних карточек на
 * этой странице (без аккордеона — каждая ведёт сразу на свой category.html),
 * пустое состояние "товары скоро появятся", страница "раздел не найден", и
 * зарезервированные зоны под будущие фильтры/производителей/сертификаты.
 */

.category-main{padding-bottom:80px}

/* ── NODE HEADER — заголовок текущего узла (категории или листа) ──
   Размер h1 (38px max) НАМЕРЕННО меньше, чем у .catalog-hero h1 (42px max) —
   это не несостыковка, а визуальная иерархия: catalog.html — верхний уровень
   каталога, category.html — дочерняя страница. Будущий product.html должен
   быть ещё компактнее (например, clamp(22px,2.6vw,32px)), продолжая эту же
   логику "чем глубже в дереве — тем скромнее заголовок". */
.category-header{padding:24px 0 48px}
.category-header h1{font-family:var(--fh);font-size:clamp(26px,3.2vw,38px);font-weight:900;color:var(--purple);letter-spacing:-.3px;line-height:1.2;margin-bottom:14px;max-width:760px}
.category-header p{font-size:16px;color:var(--text-muted);line-height:1.65;font-weight:500;max-width:640px}

/* ── CHILDREN VIEW (узел-ветка: показываем подкатегории) ──
   Карточки используют тот же .tree-node-card, что и catalog.html, но здесь
   БЕЗ аккордеона — клик по карточке сразу ведёт на свой category.html?cat=...
   Поэтому у .tree-node на этой странице никогда нет .tree-children внутри,
   и chevron/toggle не используется — только arrow (см. tree-utils.js
   showChildIndicator: карточка-ребёнок тут всегда выглядит как "лист"
   с точки зрения индикатора, даже если у неё у самой есть подкатегории —
   тут она просто ссылка на следующий уровень). */
.category-children-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px}

/* ── PRODUCTS LAYOUT (узел-лист: товары + будущие фильтры) ──
   Двухколоночный layout с самого начала: левая колонка — фильтры (сейчас
   пустая, скрыта), правая — основной контент (empty state или сетка товаров).
   Когда появятся фильтры, понадобится только наполнить .category-filters —
   сетка перестраивать не придётся. */
.category-product-layout{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start}
.category-product-layout.no-filters{grid-template-columns:1fr}

.category-filters{display:none}
.category-filters.has-content{display:block;position:sticky;top:24px}

.category-products-main{min-width:0}

/* ── EMPTY STATE (товаров пока нет) ── */
.category-empty-products{
  background:var(--purple);
  border-radius:var(--rl);
  padding:64px 32px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.category-empty-products::after{content:'';position:absolute;right:-60px;top:-60px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.category-empty-icon{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;position:relative}
.category-empty-icon svg{width:30px;height:30px;color:rgba(255,255,255,.7)}
.category-empty-products h2{font-family:var(--fh);font-size:clamp(20px,2.2vw,26px);font-weight:900;color:var(--white);margin-bottom:12px;position:relative}
.category-empty-products p{font-size:15px;color:rgba(255,255,255,.75);line-height:1.6;font-weight:500;max-width:440px;margin:0 auto 32px;position:relative}

.category-empty-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative}
.category-empty-actions .btn-request{padding:14px 28px;font-size:15px}
.btn-secondary-outline{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border-radius:var(--r);
  border:1.5px solid rgba(255,255,255,.25);
  font-family:var(--fh);font-size:14px;font-weight:800;color:var(--white);
  background:transparent;
  transition:border-color .2s,background .2s;
  cursor:pointer;
}
.btn-secondary-outline:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08)}

/* ── RESERVED ZONES — пустые заделы под будущие блоки, ничего не показывают
   сейчас, но физически уже стоят в layout, чтобы при наполнении не пришлось
   перестраивать структуру страницы. ── */
.category-certificates,
.category-pdf-block,
.category-manufacturers{display:none}
.category-certificates.has-content,
.category-pdf-block.has-content,
.category-manufacturers.has-content{display:block;margin-top:32px}

/* ── NOT FOUND STATE ── */
.category-not-found{
  text-align:center;
  padding:96px 24px;
}
.category-not-found-icon{width:80px;height:80px;border-radius:50%;background:var(--gray-50);display:flex;align-items:center;justify-content:center;margin:0 auto 28px}
.category-not-found-icon svg{width:36px;height:36px;color:var(--gray-400)}
.category-not-found h1{font-family:var(--fh);font-size:clamp(24px,2.8vw,32px);font-weight:900;color:var(--purple);margin-bottom:12px}
.category-not-found p{font-size:15px;color:var(--text-muted);line-height:1.6;font-weight:500;max-width:420px;margin:0 auto 32px}

/* ── RESPONSIVE ──
   Системные breakpoints проекта: 1024px, 860px, 600px (см. sfera-base.css,
   catalog.css). category.css использует те же точки — никаких отдельных
   значений вроде 900px, чтобы поведение catalog.html и category.html
   совпадало на любой ширине viewport. */
@media(max-width:860px){
  .category-children-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
  .category-product-layout{grid-template-columns:1fr}
  .category-filters.has-content{position:static}
}

@media(max-width:600px){
  .category-children-grid{grid-template-columns:1fr}
  .category-header h1{font-size:26px}
  .category-empty-products{padding:48px 20px}
  .category-empty-actions{flex-direction:column}
  .category-empty-actions .btn-request,
  .btn-secondary-outline{width:100%;justify-content:center}
}

/* ── PRODUCTS GRID ── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.product-card {
  background: var(--white);
  border: 3px solid var(--gray-200);
  border-radius: var(--rl);
  overflow: hidden;
  transition: all .2s;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  border-color: var(--purple);
  box-shadow: var(--sh2), 0 0 0 2px var(--purple);
  transform: translateY(-3px);
}

.product-card-img {
  height: 180px;
  background: var(--gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 3px solid var(--gray-200);
}
.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
}

.product-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card-brand {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--purple);
  background: rgba(46,43,126,.08);
  display: inline-block;
  padding: 3px 8px;
  border-radius: 100px;
  margin-bottom: 10px;
}

.product-card-name {
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 800;
  color: var(--purple);
  line-height: 1.3;
  margin-bottom: 10px;
  flex: 1;
}

.product-card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.product-card-specs span {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--gray-50);
  border: 2.5px solid var(--gray-300, #d0d5dd);
  padding: 4px 10px;
  border-radius: 100px;
}

.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 3px solid var(--gray-200);
}

.product-card-price {
  font-family: var(--fh);
  font-size: 20px;
  font-weight: 900;
  color: var(--purple);
  line-height: 1;
}
.product-card-price span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.product-card-btn {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
  transition: gap .15s;
  text-decoration: none;
}
.product-card:hover .product-card-btn {
  text-decoration: underline;
}

@media(max-width:600px) {
  .products-grid { grid-template-columns: 1fr 1fr }
}
@media(max-width:400px) {
  .products-grid { grid-template-columns: 1fr }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ФИЛЬТРЫ И ПАГИНАЦИЯ
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Фильтр-бар (обёртка всех групп) ── */
.products-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 16px;
}

/* ── Группа кнопок (тип / бренд) ── */
.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Разделитель между группами */
.filter-group + .filter-group {
  padding-left: 16px;
  border-left: 2px solid var(--gray-100, #eaecf0);
}

/* ── Кнопка фильтра ── */
.filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border: 1.5px solid var(--gray-100, #d0d5dd);
  border-radius: 100px;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted, #666);
  background: var(--white, #fff);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, transform .15s, box-shadow .15s;
  white-space: nowrap;
  user-select: none;
}

.filter-btn:hover {
  border-color: var(--purple, #2e2b7e);
  color: var(--purple, #2e2b7e);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(46,43,126,.12);
}

.filter-btn.active {
  background: var(--purple, #2e2b7e);
  border-color: var(--purple, #2e2b7e);
  color: #fff;
  box-shadow: 0 3px 10px rgba(46,43,126,.25);
}

.filter-btn.active:hover {
  transform: none;
  box-shadow: 0 3px 10px rgba(46,43,126,.25);
}

/* ── Счётчик товаров ── */
.products-counter {
  font-size: 13px;
  color: var(--text-muted, #888);
  font-weight: 500;
  margin-bottom: 16px;
}

/* ── Пагинация ── */
.products-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 36px;
  padding-bottom: 8px;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1.5px solid var(--gray-100, #d0d5dd);
  border-radius: 10px;
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted, #555);
  background: var(--white, #fff);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, transform .15s, box-shadow .15s;
}

.page-btn:hover {
  border-color: var(--purple, #2e2b7e);
  color: var(--purple, #2e2b7e);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(46,43,126,.12);
}

.page-btn.active {
  background: var(--purple, #2e2b7e);
  border-color: var(--purple, #2e2b7e);
  color: #fff;
  box-shadow: 0 3px 10px rgba(46,43,126,.25);
  pointer-events: none;
}

/* ── Адаптив ── */
@media (max-width: 600px) {
  .filter-group + .filter-group {
    padding-left: 0;
    border-left: none;
    padding-top: 6px;
    border-top: 1.5px solid var(--gray-100, #eaecf0);
    width: 100%;
  }
  .products-filter-bar {
    gap: 6px;
  }
  .filter-btn {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR LAYOUT — лейаут с левым сайдбаром для подкатегорий (ИЗОСПАН и др.)
   ═══════════════════════════════════════════════════════════════════════════ */

.category-sidebar-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 28px;
  align-items: start;
}

.category-sidebar {
  background: var(--white);
  border: 2.5px solid var(--gray-200);
  border-radius: var(--rl);
  overflow: hidden;
}

.sidebar-title {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 16px;
  border-bottom: 2px solid var(--gray-100);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
}

.sidebar-link {
  display: block;
  text-align: left;
  padding: 12px 16px 12px 13px;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1.5px solid var(--gray-100);
  border-left: 3px solid transparent;
  line-height: 1.4;
  transition: background .15s, color .15s;
  white-space: nowrap;
}

.sidebar-link:last-child {
  border-bottom: none;
}

.sidebar-link:hover {
  background: var(--gray-50);
  color: var(--purple);
}

.sidebar-link.is-active {
  background: rgba(46,43,126,.07);
  color: var(--purple);
  border-left-color: var(--purple);
  font-weight: 800;
}

.category-main { min-width: 0; }

.category-main .category-header { padding: 0 0 24px; }

.category-main .category-header h2 {
  font-family: var(--fh);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 900;
  color: var(--purple);
  letter-spacing: -.2px;
  line-height: 1.2;
  margin-bottom: 8px;
}

.category-header-desc {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  font-weight: 500;
}

@media (max-width: 860px) {
  .category-sidebar-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .category-sidebar {
    position: static;
    border-radius: var(--r);
    margin-bottom: 24px;
  }
  .sidebar-nav {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .sidebar-link {
    white-space: nowrap;
    border-bottom: none;
    border-right: 1.5px solid var(--gray-100);
    padding: 11px 16px;
  }
  .sidebar-link:last-child { border-right: none; }
  .sidebar-link.is-active {
    border-left: none;
    border-bottom: 3px solid var(--purple);
    background: rgba(46,43,126,.06);
  }
  .sidebar-title { display: none; }
}

/* ── Дерево разделов слева (category.js → renderTreeSidebar) ─────────────── */
button.sidebar-title{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;border-bottom:2px solid var(--gray-100);cursor:default;text-align:left;font-size:13px;color:var(--purple);letter-spacing:.6px}
.sidebar-title-current,.sidebar-title-arrow{display:none}
.sidebar-tree .sidebar-link{white-space:normal;position:relative}
.sidebar-tree .tree-depth-0{font-size:13.5px;color:var(--purple)}
.sidebar-tree .tree-depth-1{padding-left:16px;font-size:14px}
.sidebar-tree .tree-depth-2{padding-left:34px;font-size:13.5px;background:#FAFAFD}
.sidebar-tree .tree-depth-3{padding-left:52px;font-size:13px;background:#F6F6FB}
.sidebar-tree .tree-depth-4{padding-left:70px;font-size:13px;background:#F2F2F9}
.sidebar-tree .tree-depth-2::before,.sidebar-tree .tree-depth-3::before,.sidebar-tree .tree-depth-4::before{content:"";position:absolute;top:50%;width:8px;height:1.5px;background:var(--gray-400)}
.sidebar-tree .tree-depth-2::before{left:20px}
.sidebar-tree .tree-depth-3::before{left:38px}
.sidebar-tree .tree-depth-4::before{left:56px}
.sidebar-tree .has-kids::after{content:"›";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:18px;line-height:1;color:var(--gray-400);transition:transform .15s}
.sidebar-tree .has-kids.is-expanded::after{transform:translateY(-50%) rotate(90deg);color:var(--purple)}
.sidebar-tree .has-kids{padding-right:34px}
.sidebar-tree .is-open-branch{color:var(--purple);font-weight:800}

@media (max-width: 860px){
  button.sidebar-title{display:flex;cursor:pointer;padding:13px 16px;font-size:12px;border-bottom:none}
  .category-sidebar.is-open button.sidebar-title{border-bottom:2px solid var(--gray-100)}
  .sidebar-title-root{color:var(--text-muted)}
  .sidebar-title-current{display:block;flex:1;min-width:0;color:var(--purple);font-size:14px;text-transform:none;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sidebar-title-arrow{display:block;font-size:16px;color:var(--purple);transition:transform .15s}
  .category-sidebar.is-open .sidebar-title-arrow{transform:rotate(180deg)}
  .sidebar-nav.sidebar-tree{display:none;flex-direction:column;overflow:visible}
  .category-sidebar.is-open .sidebar-nav.sidebar-tree{display:flex}
  .sidebar-tree .sidebar-link{border-right:none;border-bottom:1.5px solid var(--gray-100);padding-top:12px;padding-bottom:12px}
  .sidebar-tree .sidebar-link.is-active{border-bottom:1.5px solid var(--gray-100);border-left:3px solid var(--purple)}
}

/* ── Фильтры каталога (facets.js), 14.10.2026 ───────────────────────────────── */
.fx{margin:0 0 18px;background:var(--white);border:2px solid var(--purple-light);border-radius:16px;padding:14px 16px;box-shadow:0 6px 24px rgba(46,43,126,.10)}
.fx-constr{padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid var(--gray-100)}
.fx-constr-title{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--gray-600);margin-bottom:10px}
.fx-help{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--purple-light);background:var(--white);color:var(--purple);font-weight:900;font-size:12px;line-height:1;cursor:help}
.fx-help:hover,.fx-help:focus,.fx-help.is-on{border-color:var(--purple);background:var(--purple);color:var(--white);outline:none}
/* подсказка «?» — окошко при наведении (не раскрывает строку) */
.fx-tip{position:absolute;left:50%;bottom:calc(100% + 10px);z-index:70;width:max-content;max-width:min(320px,80vw);padding:10px 12px;border-radius:var(--r);background:var(--purple-dark);color:var(--white);font-size:13px;font-weight:600;line-height:1.45;letter-spacing:0;text-transform:none;text-align:left;box-shadow:var(--sh2);opacity:0;visibility:hidden;transform:translate(-30%,4px);transition:opacity .2s,transform .2s,visibility .2s;pointer-events:none}
.fx-tip::after{content:'';position:absolute;left:30%;top:100%;border:6px solid transparent;border-top-color:var(--purple-dark)}
.fx-help:hover .fx-tip,.fx-help:focus .fx-tip{opacity:1;visibility:visible;transform:translate(-30%,0)}
.fx-hint{font-size:13px;color:var(--text-muted);line-height:1.5;margin:0 0 10px;font-weight:500}
.fx-constr-hint{background:var(--gray-50);border-radius:var(--r);padding:8px 12px}
.fx-constr-list{display:flex;flex-wrap:wrap;gap:8px}
.fx-cchip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;border:1.5px solid var(--purple-light);background:var(--gray-50);color:var(--purple);font:700 13.5px var(--fb);cursor:pointer;transition:all .2s}
.fx-cchip svg{width:22px;height:22px;flex:0 0 22px;padding:3px;border-radius:50%;background:rgba(46,43,126,.08);transition:all .2s}
.fx-cchip em{font-style:normal;font-size:12px;font-weight:800;color:var(--gray-400)}
.fx-cchip:hover{border-color:var(--purple);transform:translateY(-1px)}
.fx-cchip.is-on{background:var(--purple);border-color:var(--purple);color:var(--white)}
.fx-cchip.is-on svg{background:rgba(255,255,255,.18)}
.fx-cchip.is-on em{color:rgba(255,255,255,.75)}
.fx-cchip.is-off{opacity:.45;cursor:default;transform:none}
.fx-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fx-drop{position:relative}
.fx-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1.5px solid var(--purple-light);background:var(--white);color:var(--text);font:700 13.5px var(--fb);cursor:pointer;transition:all .2s}
.fx-btn i{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6;transition:transform .2s}
.fx-drop.is-open .fx-btn i{transform:rotate(-135deg) translateY(-1px)}
.fx-btn b{min-width:20px;height:20px;border-radius:999px;background:var(--accent);color:var(--white);font-size:11.5px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.fx-btn:hover,.fx-drop.is-open .fx-btn{border-color:var(--purple);color:var(--purple)}
.fx-btn.has-sel{border-color:var(--purple);background:rgba(46,43,126,.06);color:var(--purple)}
.fx-pop{position:absolute;left:0;top:calc(100% + 8px);z-index:60;width:min(340px,calc(100vw - 32px));background:var(--white);border:1.5px solid var(--gray-100);border-radius:var(--rl);box-shadow:var(--sh2);padding:14px}
.fx-opts{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow:auto}
.fx-opt{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r);font-size:14px;font-weight:600;color:var(--text);cursor:pointer}
.fx-opt:hover{background:var(--gray-50)}
.fx-opt input{width:18px;height:18px;accent-color:var(--purple);flex:0 0 18px}
.fx-opt span{flex:1}
.fx-opt em{font-style:normal;font-size:12px;font-weight:800;color:var(--gray-400)}
.fx-opt.is-on span{color:var(--purple);font-weight:800}
.fx-opt.is-off{opacity:.45;cursor:default}
.fx-pop-foot{display:flex;justify-content:space-between;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--gray-100)}
.fx-clear-one,.fx-reset{background:none;border:none;color:var(--text-muted);font:700 13px var(--fb);cursor:pointer;text-decoration:underline}
.fx-clear-one:hover,.fx-reset:hover{color:var(--purple)}
.fx-done{background:var(--accent);color:var(--white);border:none;border-radius:var(--r);padding:9px 16px;font:800 14px var(--fb);cursor:pointer;transition:background .2s}
.fx-done:hover{background:var(--accent-hover)}
.fx-sort{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--gray-600);text-transform:uppercase;letter-spacing:.5px}
.fx-sort select{font:700 13.5px var(--fb);color:var(--text);text-transform:none;letter-spacing:0;border:1.5px solid var(--gray-200);border-radius:var(--r);padding:8px 10px;background:var(--white)}
.fx-mobile-btn{display:none}
.fx-active{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.fx-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 12px;border-radius:999px;border:1.5px solid var(--purple-light);background:#EEEDF8;color:var(--purple);font:700 13px var(--fb);cursor:pointer}
.fx-tag span{font-weight:600;color:var(--text-muted)}
.fx-tag i{font-style:normal;font-size:16px;line-height:1}
.fx-tag:hover{background:var(--purple);color:var(--white)}
.fx-tag:hover span{color:rgba(255,255,255,.75)}
.fx-empty{background:var(--white);border:2px dashed var(--gray-200);border-radius:var(--rl);padding:28px;text-align:center;color:var(--text-muted);font-size:15px;line-height:1.6}
.fx-empty b{display:block;color:var(--purple);font-size:17px;margin-bottom:6px}
.fx-empty a{color:var(--purple);font-weight:800;text-decoration:underline}
.fx-sheet{position:fixed;inset:0;z-index:1000}
.fx-sheet-bg{position:absolute;inset:0;background:rgba(28,26,92,.45)}
.fx-sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:86vh;background:var(--white);border-radius:var(--rl) var(--rl) 0 0;display:flex;flex-direction:column;box-shadow:0 -8px 32px rgba(28,26,92,.25)}
.fx-sheet-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--gray-100);font-size:18px;color:var(--purple)}
.fx-sheet-head button{width:40px;height:40px;border:none;background:var(--gray-50);border-radius:var(--r);font-size:22px;cursor:pointer}
.fx-sheet-body{overflow:auto;padding:8px 16px}
.fx-sheet-body section{padding:12px 0;border-bottom:1px solid var(--gray-100)}
.fx-sheet-body h4{font-size:14px;font-weight:900;color:var(--purple);margin:0 0 6px}
.fx-sheet-body .fx-opts{max-height:none}
.fx-sheet-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--gray-100)}
.fx-sheet-foot .fx-done{flex:1;padding:13px}
@media(max-width:860px){
  .fx-bar .fx-drop{display:none}
  .fx-mobile-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1.5px solid var(--purple);background:var(--purple);color:var(--white);font:800 14px var(--fb);cursor:pointer;min-height:40px}
  .fx-mobile-btn b{background:var(--accent);border-radius:999px;padding:0 7px;font-size:12px}
  .fx-sort{margin-left:0;width:100%}
.fx-sort select{flex:1;min-width:0}
  .fx-constr-list{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
  .fx-cchip{flex:0 0 auto}
}
@media(prefers-reduced-motion:reduce){.fx-cchip,.fx-btn{transition:none}.fx-cchip:hover{transform:none}}

/* Мягкое появление содержимого при переключении разделов без перезагрузки (category.js, softGo) —
   запасной вариант для браузеров без View Transitions */
#category-content.is-soft-in{animation:catSoftIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes catSoftIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#category-content.is-soft-in{animation:none}}