/* ============================================
   CATALOG.CSS — стили страницы каталога изделий
   Используются переменные тем из main.css.
   ============================================ */

/* ============================================
   ФОН СТРАНИЦЫ КАТАЛОГА
   Простой статичный фон вместо плавающих фигур.
   catalog.css подключается только на этой странице,
   поэтому правила не затрагивают другие страницы сайта.
   ============================================ */

.global-bg{
  display:none;
}

body{
  background:var(--bg2);
  min-height:100vh;
}

/* ============================================
   ШАПКА КАТАЛОГА
   ============================================ */

.cat-hero{
  position:relative;
  z-index:2;
  padding:44px 0 6px;
}

/* Хлебные крошки */
.cat-crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--ink3);
  margin-bottom:22px;
}

.cat-crumbs a{
  color:var(--ink3);
  transition:color .2s;
}

.cat-crumbs a:hover{
  color:var(--blue);
}

.cat-crumbs i{
  font-size:10px;
  opacity:0.5;
}

.cat-crumbs span{
  color:var(--ink2);
}

.cat-hero-title{
  font-size:clamp(36px,4.6vw,62px);
  font-weight:800;
  color:var(--blue);
  line-height:1.04;
  letter-spacing:-0.035em;
  margin:18px 0 14px;
  text-shadow:0 6px 16px rgba(0,0,0,0.12);
  animation:fadeUp .8s ease .05s both;
}

.cat-hero-sub{
  font-size:16px;
  font-weight:400;
  color:var(--ink2);
  line-height:1.6;
  max-width:600px;
  margin-bottom:0;
  animation:fadeUp .8s ease .15s both;
}

/* Поле поиска */
.cat-search{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:0;
  min-height:54px;
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:6px 8px 6px 18px;
  box-shadow:var(--sh);
  transition:border-color .2s,box-shadow .2s;
}

.cat-search:focus-within{
  border-color:var(--blue);
  box-shadow:0 12px 32px rgba(34,83,156,0.22);
}

.cat-search-ico{
  font-size:18px;
  color:var(--ink3);
  flex-shrink:0;
}

.cat-search:focus-within .cat-search-ico{
  color:var(--blue);
}

.cat-search-input{
  flex:1;
  min-width:0;
  border:none;
  outline:none;
  background:transparent;
  font-family:'Manrope',sans-serif;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  padding:12px 0;
}

.cat-search-input::placeholder{
  color:var(--ink3);
}

.cat-search-clear{
  width:40px;
  height:40px;
  border-radius:11px;
  background:var(--bg2);
  color:var(--ink3);
  display:none;
  align-items:center;
  justify-content:center;
  font-size:13px;
  flex-shrink:0;
  transition:all .2s;
}

.cat-search-clear.show{
  display:flex;
}

.cat-search-clear:hover{
  background:var(--orange);
  color:#fff;
}

/* ============================================
   ОСНОВНОЙ БЛОК
   ============================================ */

.cat-section{
  position:relative;
  z-index:2;
  padding:30px 0 100px;
}

/* ---------- Панель управления: поиск + сортировка + счётчик ---------- */

.cat-toolbar{
  margin-bottom:18px;
}

.cat-toolbar-row{
  display:flex;
  align-items:center;
  gap:14px;
}

.cat-toolbar-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:14px;
}

.cat-count{
  font-size:14px;
  color:var(--ink2);
  font-weight:500;
}

.cat-count b{
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  color:var(--blue);
  font-size:15px;
}

/* Кнопка открытия фильтров (видна только на планшете/мобильном) */
.cat-filter-btn{
  display:none;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:54px;
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:11px 16px;
  font-family:'Manrope',sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  transition:all .2s;
}

.cat-filter-btn:hover{
  border-color:var(--blue);
  color:var(--blue);
  background:var(--blue-l);
}

.cat-filter-btn i{
  font-size:16px;
  color:var(--blue);
}

.cat-filter-count{
  background:var(--orange);
  color:#fff;
  font-size:11px;
  font-weight:800;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ============================================
   СОРТИРОВКА — кастомный dropdown
   В стиле мобильного меню навигации (.nav-dropdown):
   белая панель, пункты-ссылки с подчёркиванием при hover.
   ============================================ */

.cat-sort{
  display:flex;
  align-items:center;
  gap:12px;
}

.cat-sort-lbl{
  font-size:13px;
  font-weight:600;
  color:var(--ink3);
  white-space:nowrap;
}

.cat-sort-field{
  position:relative;
}

/* Кнопка-триггер — показывает текущее значение */
.cat-sort-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:230px;
  height:54px;
  font-family:'Manrope',sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:11px 16px;
  cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
  text-align:left;
}

.cat-sort-btn:hover{
  border-color:var(--blue);
  color:var(--blue);
}

.cat-sort-btn.open{
  border-color:var(--blue);
  color:var(--blue);
}

.cat-sort-chev{
  font-size:12px;
  color:var(--ink3);
  transition:transform .25s ease, color .2s;
}

.cat-sort-btn:hover .cat-sort-chev,
.cat-sort-btn.open .cat-sort-chev{
  color:var(--blue);
}

.cat-sort-btn.open .cat-sort-chev{
  transform:rotate(180deg);
}

/* Выпадающее меню — в стиле .nav-dropdown */
.cat-sort-menu{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:100%;
  flex-direction:column;
  padding:10px 16px 14px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 14px 36px rgba(34,83,156,0.18);
  z-index:50;
}

.cat-sort-menu.open{
  display:flex;
}

/* Пункт меню — выглядит как ссылка из мобильного меню */
.cat-sort-opt{
  display:inline-block;
  align-self:flex-start;
  position:relative;
  padding:10px 0;
  font-family:'Manrope',sans-serif;
  font-size:17px;
  font-weight:600;
  color:var(--ink3);
  background:transparent;
  border:none;
  cursor:pointer;
  text-align:left;
  white-space:nowrap;
  transition:color .2s ease;
}

/* Подчёркивание слева-направо при hover */
.cat-sort-opt::after{
  content:"";
  position:absolute;
  left:0;
  bottom:4px;
  width:0;
  height:2px;
  background:var(--orange);
  border-radius:2px;
  transition:width .25s ease;
}

.cat-sort-opt:hover{
  color:var(--orange);
}

.cat-sort-opt:hover::after{
  width:100%;
}

/* Активный (выбранный) пункт — синий с подчёркиванием */
.cat-sort-opt.is-on{
  color:var(--blue);
}

.cat-sort-opt.is-on::after{
  width:100%;
  background:var(--blue);
}

/* ---------- Активные фильтры (теги) ---------- */

.cat-tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin-bottom:24px;
}

.cat-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--blue-l);
  color:var(--blue);
  border:1.5px solid transparent;
  border-radius:999px;
  padding:7px 8px 7px 14px;
  font-size:13px;
  font-weight:700;
  transition:all .18s;
}

.cat-tag:hover{
  border-color:var(--blue-m);
}

.cat-tag-x{
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(34,83,156,0.14);
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  transition:all .18s;
}

.cat-tag:hover .cat-tag-x{
  background:var(--orange);
  color:#fff;
}

.cat-tag-swatch{
  width:13px;
  height:13px;
  border-radius:4px;
  flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(10,21,48,0.18);
}

/* Ссылка «очистить всё» среди тегов */
.cat-tag-clear{
  background:none;
  border:none;
  color:var(--orange);
  font-family:'Manrope',sans-serif;
  font-size:13px;
  font-weight:700;
  padding:7px 6px;
  cursor:pointer;
  transition:color .18s;
}

.cat-tag-clear:hover{
  color:var(--orange-d);
  text-decoration:underline;
}

/* ============================================
   РАСКЛАДКА: САЙДБАР + РЕЗУЛЬТАТЫ
   ============================================ */

.cat-layout{
  display:grid;
  grid-template-columns:272px 1fr;
  gap:28px;
  align-items:start;
}

/* ---------- Сайдбар фильтров ---------- */

.cat-aside{
  position:sticky;
  top:90px;
  max-height:calc(100vh - 108px);
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:20px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:var(--sh-sm);
}

/* Шапка сайдбара — видна только в мобильной шторке */
.cat-aside-head{
  display:none;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  border-bottom:1.5px solid var(--line);
  flex-shrink:0;
}

.cat-aside-head span{
  font-family:'Unbounded',sans-serif;
  font-size:15px;
  font-weight:700;
  color:var(--blue);
  display:flex;
  align-items:center;
  gap:9px;
}

.cat-aside-close{
  width:38px;
  height:38px;
  border-radius:10px;
  background:var(--bg2);
  color:var(--ink2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  transition:all .2s;
}

.cat-aside-close:hover{
  background:var(--orange);
  color:#fff;
}

.cat-aside-scroll{
  flex:1;
  min-height:0;             /* критично для flex-child — иначе overflow не работает */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;  /* плавный скролл на iOS */
  padding:6px 20px;
}

/* Тонкий скроллбар */
.cat-aside-scroll::-webkit-scrollbar{
  width:6px;
}
.cat-aside-scroll::-webkit-scrollbar-thumb{
  background:var(--line);
  border-radius:3px;
}
.cat-aside-scroll::-webkit-scrollbar-thumb:hover{
  background:var(--blue-m);
}

.cat-aside-foot{
  flex-shrink:0;
  padding:14px 20px;
  border-top:1.5px solid var(--line);
}

.cat-reset{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:var(--bg2);
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:13px;
  font-family:'Manrope',sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--ink2);
  transition:all .22s;
}

.cat-reset:hover{
  border-color:var(--orange);
  background:var(--orange-l);
  color:var(--orange);
}

.cat-reset i{
  font-size:15px;
}

/* ---------- Группа фильтра (сворачиваемая) ---------- */

.filter-group{
  border-bottom:1.5px solid var(--line);
}

.filter-group:last-child{
  border-bottom:none;
}

.filter-head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 2px;
  cursor:pointer;
  transition:color .2s;
}

.filter-head-t{
  font-family:'Unbounded',sans-serif;
  font-size:13px;
  font-weight:700;
  color:var(--blue);
  letter-spacing:-0.01em;
}

.filter-head:hover .filter-head-t{
  color:var(--orange);
}

.filter-chev{
  font-size:12px;
  color:var(--ink3);
  transition:transform .25s ease,color .2s;
}

.filter-head:hover .filter-chev{
  color:var(--blue);
}

.filter-group.is-collapsed .filter-chev{
  transform:rotate(-90deg);
}

.filter-body{
  padding:0 2px 20px;
}

.filter-group.is-collapsed .filter-body{
  display:none;
}

/* ---------- Список чекбоксов ---------- */

.filter-list,
.filter-tree{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.filter-opt{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 8px;
  border-radius:9px;
  cursor:pointer;
  transition:background .16s;
}

.filter-opt:hover{
  background:var(--bg2);
}

.filter-opt input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border:1.5px solid var(--line);
  border-radius:5px;
  background:var(--card);
  cursor:pointer;
  flex-shrink:0;
  margin:0;
  position:relative;
  transition:all .18s;
}

.filter-opt input[type="checkbox"]:hover{
  border-color:var(--blue-m);
}

/* Выбранный чекбокс — фирменный синий с белой галочкой */
.filter-opt input[type="checkbox"]:checked{
  background:var(--blue);
  border-color:var(--blue);
}

.filter-opt input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left:4px;
  top:0px;
  width:6px;
  height:11px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.filter-opt-name{
  flex:1;
  font-size:14px;
  font-weight:500;
  color:var(--ink2);
  line-height:1.3;
}

.filter-opt input:checked ~ .filter-opt-name{
  color:var(--blue);
  font-weight:600;
}

.filter-opt-cnt{
  font-size:12px;
  font-weight:600;
  color:var(--ink3);
  background:var(--bg2);
  padding:2px 8px;
  border-radius:8px;
  flex-shrink:0;
}

/* Группа подкатегорий — вертикальная линия-связка слева */
.filter-subtree{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin:2px 0 6px 10px;
  padding-left:12px;
  border-left:2px solid var(--line);
}

.filter-subtree .filter-opt-name{
  font-size:13px;
}

/* ---------- Палитра цветов ---------- */

.filter-swatches{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding-top:4px;
}

.swatch{
  width:32px;
  height:32px;
  border-radius:9px;
  position:relative;
  cursor:pointer;
  box-shadow:inset 0 0 0 1.5px rgba(10,21,48,0.12);
  transition:transform .16s;
}

.swatch:hover{
  transform:scale(1.1);
}

.swatch.is-on{
  box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--blue);
}

.swatch i{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  opacity:0;
  transition:opacity .15s;
}

.swatch.is-on i{
  opacity:1;
}

/* ---------- Пилюли сложности ---------- */

.filter-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:4px;
}

.diff-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--bg2);
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:8px 14px;
  font-family:'Manrope',sans-serif;
  font-size:13px;
  font-weight:700;
  color:var(--ink2);
  cursor:pointer;
  transition:all .2s;
}

.diff-pill:hover{
  border-color:var(--blue-m);
}

.diff-pill .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
}

.diff-pill.is-on{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}

.diff-pill.is-on .dot{
  background:#fff !important;
}

/* ---------- Слайдеры диапазонов ---------- */

.range-vals{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin:4px 0 16px;
  font-size:13px;
  color:var(--ink3);
  font-weight:500;
}

.range-vals span:last-child,
.range-vals span:first-child:only-child{
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  color:var(--blue);
  font-size:14px;
}

#priceMinV,
#priceMaxV{
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  color:var(--blue);
  font-size:14px;
}

/* Двойной слайдер «от-до» */
.range-dual{
  position:relative;
  height:30px;
  margin-bottom:6px;
}

.range-track{
  position:absolute;
  top:13px;
  left:0;
  right:0;
  height:5px;
  background:var(--line);
  border-radius:3px;
}

.range-fill{
  position:absolute;
  top:13px;
  height:5px;
  background:var(--blue);
  border-radius:3px;
}

.range-dual input[type="range"]{
  position:absolute;
  top:5px;
  left:0;
  width:100%;
  height:20px;
  margin:0;
  background:none;
  pointer-events:none;
  -webkit-appearance:none;
  appearance:none;
}

/* Одиночный слайдер */
.range-one{
  width:100%;
  height:20px;
  margin:0;
  background:none;
  -webkit-appearance:none;
  appearance:none;
}

.range-one::-webkit-slider-runnable-track{
  height:5px;
  border-radius:3px;
  background:linear-gradient(90deg,
    var(--blue) calc(var(--fill,0) * 1%),
    var(--line) calc(var(--fill,0) * 1%));
}

.range-one::-moz-range-track{
  height:5px;
  border-radius:3px;
  background:linear-gradient(90deg,
    var(--blue) calc(var(--fill,0) * 1%),
    var(--line) calc(var(--fill,0) * 1%));
}

/* Бегунки — общий вид для всех слайдеров */
.range-dual input[type="range"]::-webkit-slider-thumb,
.range-one::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  pointer-events:auto;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--blue);
  cursor:pointer;
  box-shadow:0 2px 8px rgba(10,21,48,0.25);
  transition:transform .12s;
}

.range-one::-webkit-slider-thumb{
  margin-top:-8px;
}

.range-dual input[type="range"]::-moz-range-thumb,
.range-one::-moz-range-thumb{
  pointer-events:auto;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--blue);
  cursor:pointer;
  box-shadow:0 2px 8px rgba(10,21,48,0.25);
}

.range-dual input[type="range"]::-webkit-slider-thumb:active,
.range-one::-webkit-slider-thumb:active{
  transform:scale(1.18);
}

/* ============================================
   СЕТКА КАРТОЧЕК ИЗДЕЛИЙ
   ============================================ */

.cat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.cat-card{
  background:var(--card);
  border-radius:20px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
  box-shadow:var(--sh-sm);
  transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s cubic-bezier(.2,.7,.2,1);
  animation:catCardIn .5s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes catCardIn{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}

.cat-card:hover{
  transform:translateY(-7px);
  box-shadow:var(--sh-lg);
}

/* Превью изделия — стилизация под технический чертёж.
   Светлый серый фон с миллиметровой сеткой и иконка-силуэт детали
   в центре — имитация 3D-вида. Когда сотрудник загрузит реальные
   изображения — эта стилизация станет fallback'ом. */
.cat-card-media{
  position:relative;
  height:172px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#e8edf5;
  background-image:
    /* крупная сетка 50px */
    linear-gradient(rgba(34,83,156,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,83,156,0.08) 1px, transparent 1px),
    /* мелкая сетка 10px */
    linear-gradient(rgba(34,83,156,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,83,156,0.04) 1px, transparent 1px);
  background-size:50px 50px, 50px 50px, 10px 10px, 10px 10px;
  background-position:0 0, 0 0, 0 0, 0 0;
}

/* Виньетка по краям — имитация объёма */
.cat-card-media::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(34,83,156,0.08) 100%);
  pointer-events:none;
  z-index:0;
}

/* Тёмная тема — более тёмный фон и светлее сетка */
[data-theme="dark"] .cat-card-media{
  background:#1f2742;
  background-image:
    linear-gradient(rgba(168,181,212,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,181,212,0.07) 1px, transparent 1px),
    linear-gradient(rgba(168,181,212,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,181,212,0.03) 1px, transparent 1px);
  background-size:50px 50px, 50px 50px, 10px 10px, 10px 10px;
}

[data-theme="dark"] .cat-card-media::before{
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4) 100%);
}

/* Иконка-силуэт детали — похожа на 3D-вид */
.cat-card-blueprint{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:72px;
  color:#5d6a8f;
  filter:drop-shadow(0 6px 12px rgba(34,83,156,0.18))
         drop-shadow(0 2px 4px rgba(10,21,48,0.12));
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}

[data-theme="dark"] .cat-card-blueprint{
  color:#a8b5d4;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,0.4))
         drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.cat-card:hover .cat-card-blueprint{
  transform:scale(1.08) translateY(-2px);
}

/* Картинка детали — вписывается в media-область целиком.
   Бейджи (tech, diff, штамп) остаются сверху через z-index.
   Фон всегда белый (даже в тёмной теме), как принято в e-commerce —
   товары лучше смотрятся на нейтральном белом фоне. */
.cat-card-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:14px;
  background:#fff;
  z-index:1;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}

.cat-card:hover .cat-card-img{
  transform:scale(1.05);
}

/* Если есть картинка — скрываем чертёж-заглушку и штамп «3D · МОДЕЛЬ» */
.cat-card-media.has-img .cat-card-blueprint,
.cat-card-media.has-img .cat-card-stamp{
  display:none;
}

/* И убираем виньетку + сетку чертёжа под картинкой,
   делаем фон белым в обеих темах */
.cat-card-media.has-img{
  background:#fff;
  background-image:none;
}
.cat-card-media.has-img::before{
  display:none;
}

/* В тёмной теме — тонкая граница, чтобы белый блок не выглядел резко */
[data-theme="dark"] .cat-card-media.has-img{
  box-shadow:inset 0 -1.5px 0 var(--line);
}

/* Маркировка как на чертеже — в нижнем правом углу */
.cat-card-stamp{
  position:absolute;
  bottom:10px;
  right:14px;
  font-family:'Unbounded',sans-serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:0.12em;
  color:rgba(34,83,156,0.42);
  z-index:2;
}

[data-theme="dark"] .cat-card-stamp{
  color:rgba(168,181,212,0.4);
}

/* Бейдж технологии */
.cat-card-tech{
  position:absolute;
  top:14px;
  left:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 11px;
  border-radius:8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.04em;
  background:#fff;
  z-index:2;
  box-shadow:0 2px 8px rgba(10,21,48,0.1);
}

.cat-card-tech.tone-blue{
  color:var(--blue);
}

.cat-card-tech.tone-orange{
  color:var(--orange);
}

/* Метка сложности */
.cat-card-diff{
  position:absolute;
  top:14px;
  right:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
  color:#3d4a68;
  background:#fff;
  box-shadow:0 2px 8px rgba(10,21,48,0.1);
  z-index:2;
}

/* Тёмная тема — плашки на фоне карточки, а не белые */
[data-theme="dark"] .cat-card-tech,
[data-theme="dark"] .cat-card-diff{
  background:var(--card);
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
}

[data-theme="dark"] .cat-card-diff{
  color:var(--ink);
}

.cat-card-diff .dot{
  width:7px;
  height:7px;
  border-radius:50%;
}

/* Тело карточки */
.cat-card-body{
  padding:20px 20px 18px;
  display:flex;
  flex-direction:column;
  gap:11px;
  flex:1;
}

.cat-card-cat{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--ink3);
}

.cat-card-name{
  font-family:'Unbounded',sans-serif;
  font-size:16px;
  font-weight:700;
  color:var(--blue);
  line-height:1.25;
  letter-spacing:-0.02em;
  min-height:40px;
}

/* Характеристики */
.cat-card-specs{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.cat-spec{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--ink2);
}

.cat-spec i{
  font-size:14px;
  color:var(--blue);
  width:16px;
  text-align:center;
  flex-shrink:0;
}

/* Чипы материалов */
.cat-card-mats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.mat-chip{
  font-size:11px;
  font-weight:600;
  color:var(--ink2);
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:7px;
  padding:3px 8px;
}

.mat-chip.more{
  color:var(--ink3);
}

/* Доступные цвета */
.cat-card-colors{
  display:flex;
  align-items:center;
  gap:6px;
}

.color-dot{
  width:15px;
  height:15px;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(10,21,48,0.18);
  flex-shrink:0;
}

.color-dot.any{
  background:conic-gradient(#22539C,#FF6500,#2f9e54,#f0b400,#22539C);
}

.cat-card-colors .more{
  font-size:11px;
  font-weight:600;
  color:var(--ink3);
}

/* Подвал карточки */
.cat-card-foot{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 20px;
  border-top:1.5px solid var(--line);
}

.cat-card-price{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.cat-card-price .from{
  font-size:11px;
  font-weight:600;
  color:var(--ink3);
  margin-bottom:2px;
}

.cat-card-price .val{
  font-family:'Unbounded',sans-serif;
  font-size:21px;
  font-weight:800;
  color:var(--blue);
  letter-spacing:-0.02em;
}

.cat-card-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--orange-l);
  color:var(--orange);
  border-radius:11px;
  padding:11px 16px;
  font-family:'Manrope',sans-serif;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  transition:all .22s;
}

.cat-card-btn i{
  font-size:12px;
  transition:transform .22s;
}

.cat-card-btn:hover{
  background:var(--orange);
  color:#fff;
}

.cat-card-btn:hover i{
  transform:translateX(3px);
}

/* ============================================
   ПУСТОЙ РЕЗУЛЬТАТ
   ============================================ */

.cat-empty{
  text-align:center;
  padding:70px 24px;
  background:var(--card);
  border:1.5px dashed var(--line);
  border-radius:22px;
}

.cat-empty-ico{
  width:80px;
  height:80px;
  border-radius:24px;
  background:var(--blue-l);
  color:var(--blue);
  font-size:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 22px;
}

.cat-empty h3{
  font-size:22px;
  font-weight:700;
  color:var(--blue);
  margin-bottom:10px;
}

.cat-empty p{
  font-size:15px;
  color:var(--ink2);
  line-height:1.6;
  max-width:380px;
  margin:0 auto 24px;
}

/* ============================================
   ПАГИНАЦИЯ
   ============================================ */

.cat-pager{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:48px;
}

/* Кнопки «Назад» / «Вперёд» */
.pg-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:46px;
  padding:0 20px;
  border-radius:12px;
  background:var(--card);
  border:1.5px solid var(--line);
  font-family:'Manrope',sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--ink2);
  cursor:pointer;
  transition:all .2s;
}

.pg-btn i{
  font-size:12px;
}

.pg-btn:hover:not(:disabled){
  border-color:var(--blue);
  color:var(--blue);
  background:var(--blue-l);
}

.pg-btn:disabled{
  opacity:0.4;
  cursor:not-allowed;
}

/* Блок ручного перехода к странице */
.pg-jump{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  font-weight:600;
  color:var(--ink2);
}

.pg-jump-lbl{
  white-space:nowrap;
}

.pg-input{
  width:60px;
  height:46px;
  text-align:center;
  border-radius:12px;
  border:1.5px solid var(--line);
  background:var(--card);
  font-family:'Unbounded',sans-serif;
  font-size:15px;
  font-weight:700;
  color:var(--blue);
  outline:none;
  transition:border-color .2s;
  -moz-appearance:textfield;
  appearance:textfield;
}

.pg-input:focus{
  border-color:var(--blue);
}

.pg-input::-webkit-outer-spin-button,
.pg-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* ============================================
   ОВЕРЛЕЙ ПОД МОБИЛЬНУЮ ШТОРКУ ФИЛЬТРОВ
   Не затемняет экран — только ловит клики вне шторки,
   чтобы её можно было закрыть тапом по фону.
   ============================================ */

.cat-overlay{
  position:fixed;
  inset:0;
  background:transparent;
  z-index:390;
}

body.no-scroll{
  overflow:hidden;
}

/* ============================================
   АДАПТИВНОСТЬ
   Десктоп   — 3 карточки в ряд + сайдбар фильтров.
   Планшет   — 2 карточки в ряд + сайдбар фильтров.
   Мобильный — 2 карточки в ряд + выезжающая шторка фильтров.
   ============================================ */

@media(max-width:1180px){
  .cat-layout{
    grid-template-columns:248px 1fr;
    gap:22px;
  }
  .cat-section{
    padding:40px 0 90px;
  }
}

/* Планшет: сайдбар остаётся на месте, в ряд — 2 карточки */
@media(max-width:1024px){
  .cat-layout{
    grid-template-columns:230px 1fr;
    gap:20px;
  }
  .cat-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:820px){
  .cat-hero{
    padding:34px 0 42px;
  }
  .cat-section{
    padding:34px 0 80px;
  }
  .cat-layout{
    grid-template-columns:208px 1fr;
    gap:16px;
  }
  .cat-grid{
    gap:16px;
  }
}

/* Мобильный: фильтры — выезжающая шторка, в ряд по-прежнему 2 карточки */
@media(max-width:640px){
  /* Снимаем stacking context с .cat-section — иначе шторка внутри неё
     окажется под overlay с z-index в root-context. */
  .cat-section{
    position:static;
    z-index:auto;
  }

  .cat-layout{
    grid-template-columns:1fr;
  }
  .cat-grid{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }

  /* Кнопка вызова фильтров и сами фильтры — шторкой слева.
     Используем grid вместо flex — надёжнее работает с overflow на мобильных. */
  .cat-filter-btn{
    display:inline-flex;
  }
  .cat-aside{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:330px;
    max-width:88vw;
    height:100vh;             /* fallback */
    height:100dvh;            /* учитывает mobile UI */
    max-height:none;
    border-radius:0;
    border:none;
    z-index:1100;             /* выше навбара — чтобы шапка и подвал были видны */
    transform:translateX(-104%);
    transition:transform .35s cubic-bezier(.65,0,.35,1);
    box-shadow:0 24px 64px rgba(0,0,0,0.4);
    /* grid: head (auto) + scroll (1fr) + foot (auto) */
    display:grid;
    grid-template-rows:auto 1fr auto;
    overflow:hidden;
  }
  .cat-aside.open{
    transform:translateX(0);
  }
  .cat-aside-head{
    display:flex;
  }
  /* На мобильном принудительно ограничиваем область прокрутки фильтров размерами grid-row.
     touch-action: pan-y явно разрешает вертикальный touch-скролл. */
  .cat-aside-scroll{
    min-height:0;
    height:auto;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
  }
  /* Навбар сверху тоже затемняем оверлеем, чтобы по клику по навбару шторка закрывалась */
  .cat-overlay{
    /* На мобильном overlay полностью отключён — он мешал кликам
       внутри шторки и блокировал touch/wheel-events. Клик снаружи
       обрабатывается в catalog.js через document.click. */
    display:none !important;
  }

  /* Поиск / кнопка фильтров / сортировка — каждый на своей строке,
     чтобы длинные тексты не переносились. */
  .cat-toolbar-row{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .cat-search{
    flex:1 1 auto;
    width:100%;
  }
  .cat-filter-btn{
    display:inline-flex;
    width:100%;
    height:54px;
  }
  .cat-sort{
    width:100%;
  }
  .cat-sort-lbl{
    display:none;
  }
  .cat-sort-field{
    flex:1;
    width:100%;
  }
  .cat-sort-btn{
    width:100%;
    min-width:0;
    height:54px;
  }

  .cat-hero{
    padding:28px 0 34px;
  }
  .cat-section{
    padding:28px 0 70px;
  }
  .cat-hero-title{
    font-size:32px;
  }

  /* Две карточки на узком экране — уплотняем содержимое */
  .cat-card-media{
    height:132px;
  }
  .cat-card-body{
    padding:14px 14px 12px;
    gap:9px;
  }
  .cat-card-name{
    font-size:14px;
    min-height:34px;
  }
  .cat-card-foot{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:13px 14px;
  }
  .cat-card-price .val{
    font-size:18px;
  }
  .cat-card-btn{
    justify-content:center;
  }

  /* Пагинация — в одну строку: кнопки только со стрелками */
  .cat-pager{
    gap:8px;
    margin-top:32px;
    flex-wrap:nowrap;
  }
  .pg-btn{
    height:42px;
    padding:0 15px;
    font-size:13px;
  }
  .pg-btn span{
    display:none;
  }
  .pg-jump{
    gap:7px;
    font-size:13px;
  }
  .pg-input{
    height:42px;
    width:50px;
  }
}

@media(max-width:420px){
  .cat-grid{
    gap:10px;
  }
  .cat-card-media{
    height:112px;
  }
  .cat-card-body{
    padding:12px 12px 10px;
  }
  .cat-card-specs{
    font-size:12px;
  }
}