/* ==========================================================================
   OpticTrend — НОВЫЙ каталог (листинг). Редизайн по docs/catalog/TZ_catalog_redesign.md
   Все правила заскоуплены под .ot-catalog, чтобы НЕ влиять на остальной сайт
   (и перебивать возможные одноимённые классы темы). Грузится только под флагом
   ?new_catalog / CATALOG_REDESIGN_ENABLED / prod-on (см. header.php).
   ВКЛ/ОТКАТ: см. docs/catalog/HANDOFF.md
   ========================================================================== */

.ot-catalog {
  --bg: #f3f3f3;
  --surface: #ffffff;
  --text: #1a1a1a;
  --text-muted: #6b6b6b;
  --text-soft: #8a8a8a;
  --border: #e5e5e5;
  --border-soft: #efefef;
  --hover: #f5f5f5;
  --photo-bg: #f2f2f2;            /* подложка фото — как в галерее PDP */
  --tryon-accent: #1c3d6e;
  --tryon-bg: #eef4ff;
  --sale: #c63131;
  --sale-bg: #fde8e8;
  --in-stock: #1a7a3e;
  --in-stock-bg: #e8f3ec;
  --popular-bg: #fff7e8;
  --popular-text: #8a5e15;

  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}
.ot-catalog *, .ot-catalog *::before, .ot-catalog *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.ot-catalog a { color: inherit; text-decoration: none; }

/* ===== PAGE HEAD (без SEO-простыни) ===== */
.ot-catalog .page-head {
  padding: 18px 0 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ot-catalog .page-head h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--text);
}
.ot-catalog .page-head .count { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
.ot-catalog .page-head .count strong { color: var(--text); font-weight: 600; }
.ot-catalog .page-head .seo-desc { color: var(--text-muted); font-size: 14px; margin-top: 6px; max-width: 720px; }

/* ===== ФИЛЬТР-БАР ===== */
.ot-catalog .filter-bar {
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}
.ot-catalog .f-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.1s, border-color 0.1s;
  text-decoration: none;
}
.ot-catalog .f-chip:hover { background: #ebebeb; }
.ot-catalog .f-chip svg { width: 12px; height: 12px; color: var(--text-soft); }
.ot-catalog .f-chip.has-value { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.ot-catalog .f-chip.has-value svg { color: rgba(255,255,255,0.7); }
.ot-catalog .f-chip .value-count {
  background: rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 9px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  min-width: 16px;
  text-align: center;
}
.ot-catalog .f-chip-all { background: #fff; border: 1px solid var(--border); color: var(--text); margin-left: auto; }
.ot-catalog .f-chip-all svg { color: var(--text); width: 14px; height: 14px; }
.ot-catalog .f-chip-all:hover { border-color: var(--text); background: #fff; }

/* ===== ПРИМЕНЁННЫЕ ФИЛЬТРЫ ===== */
.ot-catalog .applied-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ot-catalog .applied-row .label { font-size: 12.5px; color: var(--text-muted); }
.ot-catalog .applied-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 4px 6px 4px 11px;
  font-size: 12px;
  color: var(--text);
}
.ot-catalog .applied-tag button {
  background: none; border: none; padding: 2px; margin-left: 2px; cursor: pointer;
  color: var(--text-soft); display: flex; align-items: center; border-radius: 50%;
  transition: background 0.1s;
}
.ot-catalog .applied-tag button:hover { background: var(--hover); color: var(--text); }
.ot-catalog .applied-tag button svg { width: 12px; height: 12px; }
.ot-catalog .applied-row .clear-all {
  background: none; border: none; color: var(--text-muted); font-size: 12px;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 4px 8px; font-family: inherit;
}
.ot-catalog .applied-row .clear-all:hover { color: var(--text); }

/* ===== SORT + COUNT ===== */
.ot-catalog .sort-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 16px; flex-wrap: wrap; }
.ot-catalog .sort-row .left { font-size: 13px; color: var(--text-muted); }
.ot-catalog .sort-row .left strong { color: var(--text); }
.ot-catalog .sort-row .right { display: flex; gap: 10px; align-items: center; }
.ot-catalog .sort-select {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 30px 7px 12px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 13px;
  color: var(--text);
}
.ot-catalog .sort-select:hover { border-color: var(--text); }

/* ===== ТОВАРНАЯ СЕТКА =====
   Контейнер = <div class="row ot-catalog ot-grid" id="catalog-section-items"> (фаза 1 — точечная
   подмена внутри реального шаблона). display:grid отменяет float/clearfix bootstrap-.row;
   карточки .product-card — прямые дети-грид-ячейки. .products-grid — для будущего полного layout. */
/* #catalog-section-items.ot-grid — ID-специфичность нужна, чтобы перебить базовое
   правило темы #catalog-section-items{display:flex;flex-wrap:wrap} (в мердж-бандле). */
#catalog-section-items.ot-grid, .ot-catalog .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
#catalog-section-items.ot-grid.row { margin-left: 0; margin-right: 0; }
#catalog-section-items.ot-grid.row::before, #catalog-section-items.ot-grid.row::after { content: none; display: none; }
#catalog-section-items.ot-grid > .product-card { width: auto; max-width: none; float: none; padding: 0; }

.ot-catalog .product-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.ot-catalog .product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.06); }

.ot-catalog .product-photo {
  position: relative;
  aspect-ratio: 4/3;
  display: block;
  background: #fff;                /* белый «фрейм» как в галерее PDP */
  overflow: hidden;
}
/* Светло-серая подложка с белой рамкой по краям (inset). На ней — иконка-плейсхолдер.
   Изображение поверх с mix-blend-mode:multiply → белый фон JPG сливается с подложкой
   и не торчит белым квадратом (как в галерее карточки товара, --photo-bg). */
.ot-catalog .product-photo::before {
  content: "";
  position: absolute;
  inset: 14px;
  background: var(--photo-bg);   /* ровная серая подложка без иконки — иначе плейсхолдер просвечивает сквозь multiply */
  border-radius: 6px;
  z-index: 0;
}
.ot-catalog .product-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 22px;
  mix-blend-mode: multiply;        /* белый фон изображения «растворяется» в серой подложке */
  transition: transform 0.3s;
}
.ot-catalog .product-card:hover .product-photo img { transform: scale(1.04); }

/* Бейдж (только 1, верх-лево) */
.ot-catalog .badge {
  position: absolute; top: 10px; left: 10px;
  font-size: 10.5px; font-weight: 600; padding: 4px 8px; border-radius: 4px;
  letter-spacing: 0.3px; text-transform: lowercase; z-index: 2;
}
.ot-catalog .badge.sale { background: var(--sale); color: #fff; }
.ot-catalog .badge.hit { background: var(--popular-bg); color: var(--popular-text); border: 1px solid var(--popular-text); }
.ot-catalog .badge.new { background: #1a1a1a; color: #fff; }
.ot-catalog .badge.discount { background: var(--sale-bg); color: var(--sale); border: 1px solid var(--sale); }

/* "В шоуруме" — маленький значок справа сверху */
.ot-catalog .showroom-dot { position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--in-stock); z-index: 2; transition: right 0.15s; }
.ot-catalog .showroom-dot::before {
  content: "в шоуруме";
  position: absolute; top: -3px; right: 14px;
  background: var(--in-stock); color: #fff; font-size: 10px; padding: 1px 7px; border-radius: 3px;
  white-space: nowrap; opacity: 0; transition: opacity 0.15s; pointer-events: none;
}
.ot-catalog .product-card:hover .showroom-dot::before { opacity: 1; }
.ot-catalog .product-card:hover .showroom-dot { right: 56px; }

/* Быстрый просмотр (глаз) */
.ot-catalog .quick-view-eye {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, border-color 0.1s; z-index: 3;
}
.ot-catalog .product-card:hover .quick-view-eye { opacity: 1; transform: translateY(0); }
.ot-catalog .quick-view-eye svg { width: 14px; height: 14px; }
.ot-catalog .quick-view-eye:hover { background: #fff; border-color: var(--text); }

/* Текст-блок карточки */
.ot-catalog .product-info { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.ot-catalog .product-brand { font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; font-weight: 500; }
.ot-catalog .product-name {
  font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 10px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px;
}
.ot-catalog .product-chips { display: flex; gap: 5px; margin-bottom: 10px; flex-wrap: wrap; }
.ot-catalog .product-chips .chip { font-size: 10.5px; color: var(--text-muted); background: var(--bg); padding: 2px 7px; border-radius: 10px; }

/* Цена-блок */
.ot-catalog .product-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: auto; margin-bottom: 12px; }
.ot-catalog .price-current { font-size: 17px; font-weight: 700; color: var(--text); }
.ot-catalog .price-old { font-size: 12.5px; color: var(--text-soft); text-decoration: line-through; text-decoration-color: var(--text-soft); }
.ot-catalog .price-discount { background: var(--sale-bg); color: var(--sale); font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; margin-left: auto; }
.ot-catalog .product-status { font-size: 11.5px; color: var(--text-soft); margin-bottom: 10px; }
.ot-catalog .product-status.preorder { color: var(--text-muted); }

/* Action-кнопки */
.ot-catalog .product-actions { display: flex; gap: 6px; }
.ot-catalog .btn-tryon {
  flex: 1; height: 38px; background: var(--tryon-bg); color: var(--tryon-accent);
  border: 1px solid var(--tryon-accent); border-radius: 8px; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.1s;
  /* перебиваем стили модального .tryon-btn из tryon-modal.css (min-height:52px/width:100%/min-width:140px),
     иначе кнопка «Примерить» в карточке выше «В корзину» */
  min-height: 0; min-width: 0; width: auto; box-shadow: none; transform: none; line-height: 1.2;
}
.ot-catalog .btn-tryon:hover { background: #dde8f7 !important; color: var(--tryon-accent); transform: none !important; }
.ot-catalog .btn-tryon svg { width: 15px; height: 15px; }
.ot-catalog .btn-cart {
  width: 38px; height: 38px; background: #fff; color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.1s, border-color 0.1s; text-decoration: none;
}
.ot-catalog .btn-cart:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.ot-catalog .btn-cart svg { width: 16px; height: 16px; }
/* добавлено в корзину — короткая подсветка */
.ot-catalog .btn-cart.in_basket, .ot-catalog .btn-cart.added { background: var(--in-stock); color: #fff; border-color: var(--in-stock); }
.ot-catalog .btn-tryon[hidden] { display: none; }

/* ===== SHOW MORE + PAGINATION ===== */
.ot-catalog .show-more-wrap { text-align: center; padding: 32px 0 20px; }
.ot-catalog .show-more-btn {
  display: inline-block; width: auto; max-width: none; margin: 0; float: none;   /* это <div.tabs__btn> — нормализуем под пилюлю */
  background: #fff; border: 1px solid var(--text); color: var(--text); padding: 13px 36px; border-radius: 24px;
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background 0.1s;
}
.ot-catalog .show-more-btn:hover { background: var(--text); color: #fff; }
.ot-catalog .show-more-meta { font-size: 12px; color: var(--text-muted); margin-top: 10px; }

/* Пагинация — наследуем разметку Bitrix, переопределяем вид */
.ot-catalog .pagination, .ot-catalog .modern-page-navigation { display: flex; justify-content: center; gap: 4px; align-items: center; padding: 8px 0 24px; flex-wrap: wrap; }
.ot-catalog .pagination a, .ot-catalog .pagination span,
.ot-catalog .modern-page-navigation a, .ot-catalog .modern-page-navigation span {
  min-width: 32px; height: 32px; padding: 0 8px; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ot-catalog .pagination a:hover, .ot-catalog .modern-page-navigation a:hover { border-color: var(--text); text-decoration: none; }
.ot-catalog .pagination .current, .ot-catalog .modern-page-navigation .modern-page-current {
  background: #1a1a1a; color: #fff; border-color: #1a1a1a; cursor: default;
}
.ot-catalog .pagination .ellipsis { background: transparent; border: none; cursor: default; color: var(--text-soft); }
.ot-catalog .pagination .nav svg { width: 14px; height: 14px; }

/* ===== SEO-блок (внизу!) ===== */
.ot-catalog .seo-block { background: #fff; border-radius: 12px; padding: 32px 36px; margin: 40px 0 60px; }
.ot-catalog .seo-block h2 { font-size: 22px; font-weight: 700; margin: 0 0 18px; letter-spacing: -0.3px; color: var(--text); }
.ot-catalog .seo-block-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; }
.ot-catalog .seo-block-grid p { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.ot-catalog .seo-block-grid p strong { color: var(--text); font-weight: 600; display: block; margin-bottom: 4px; }
.ot-catalog .seo-block-raw { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.ot-catalog .seo-block-raw h2, .ot-catalog .seo-block-raw h3 { color: var(--text); }

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 1199px) {
  #catalog-section-items.ot-grid, .ot-catalog .products-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .ot-catalog .seo-block-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}
@media (max-width: 899px) {
  .ot-catalog .page-head h1 { font-size: 22px; }
  .ot-catalog .filter-bar { padding: 10px; gap: 6px; }
  .ot-catalog .f-chip { padding: 7px 10px; font-size: 12.5px; }
  #catalog-section-items.ot-grid, .ot-catalog .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ot-catalog .seo-block { padding: 22px; }
  .ot-catalog .seo-block-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 600px) {
  .ot-catalog .page-head { padding: 12px 0 14px; }
  .ot-catalog .page-head h1 { font-size: 20px; }
  .ot-catalog .filter-bar {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 0 10px; padding: 10px 12px; border-radius: 10px;
  }
  .ot-catalog .filter-bar::-webkit-scrollbar { display: none; }
  .ot-catalog .f-chip-all { margin-left: 0; flex-shrink: 0; }
  .ot-catalog .f-chip { flex-shrink: 0; }
  .ot-catalog .sort-row { margin-bottom: 12px; gap: 8px; }
  .ot-catalog .sort-row .left { font-size: 12px; }
  .ot-catalog .sort-select { padding: 7px 28px 7px 10px; font-size: 12.5px; }
  .ot-catalog .product-card { border-radius: 8px; }
  .ot-catalog .product-photo img { padding: 12px; }
  .ot-catalog .product-info { padding: 10px 12px 12px; }
  .ot-catalog .product-brand { font-size: 10px; margin-bottom: 3px; }
  .ot-catalog .product-name { font-size: 13px; margin-bottom: 8px; min-height: 32px; }
  .ot-catalog .product-chips { display: none; }
  .ot-catalog .price-current { font-size: 15px; }
  .ot-catalog .price-old { font-size: 11.5px; }
  .ot-catalog .price-discount { font-size: 10px; padding: 1px 5px; }
  .ot-catalog .badge { font-size: 9.5px; padding: 3px 6px; }
  .ot-catalog .product-price-row { margin-bottom: 10px; gap: 6px; }
  .ot-catalog .product-actions { gap: 5px; }
  .ot-catalog .btn-tryon { height: 36px; font-size: 12px; }
  .ot-catalog .btn-tryon svg { width: 13px; height: 13px; }
  .ot-catalog .btn-cart { width: 36px; height: 36px; }
  .ot-catalog .btn-cart svg { width: 15px; height: 15px; }
  .ot-catalog .show-more-btn { padding: 12px 28px; font-size: 13px; }
  .ot-catalog .pagination { padding: 4px 0 16px; gap: 3px; }
  .ot-catalog .pagination a, .ot-catalog .pagination span { min-width: 28px; height: 28px; font-size: 12px; }
  .ot-catalog .seo-block { padding: 18px; margin: 24px 0 32px; }
  .ot-catalog .seo-block h2 { font-size: 18px; margin-bottom: 12px; }
  .ot-catalog .seo-block-grid p { font-size: 13px; }
}

/* ===== FILTER PANEL (drawer всех фильтров) — фаза 3 ===== */
.ot-catalog .filter-panel-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 199;
  opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s linear 0.2s;
}
.ot-catalog .filter-panel-backdrop.open { opacity: 1; visibility: visible; transition: opacity 0.2s; }
.ot-catalog .filter-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; background: #fff;
  z-index: 200; transform: translateX(100%); transition: transform 0.25s ease-out;
  display: flex; flex-direction: column; overflow: hidden;
}
.ot-catalog .filter-panel.open { transform: translateX(0); }
.ot-catalog .filter-panel-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.ot-catalog .filter-panel-header h3 { margin: 0; font-size: 17px; font-weight: 700; }
.ot-catalog .filter-panel-header button { background: none; border: none; padding: 6px; cursor: pointer; color: var(--text); }
.ot-catalog .filter-panel-header button svg { width: 22px; height: 22px; display: block; }
.ot-catalog .filter-panel-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.ot-catalog .filter-group { border-bottom: 1px solid var(--border-soft); }
.ot-catalog .filter-group summary {
  padding: 14px 20px; cursor: pointer; font-size: 14px; font-weight: 500;
  display: flex; justify-content: space-between; align-items: center; user-select: none; list-style: none;
}
.ot-catalog .filter-group summary::-webkit-details-marker { display: none; }
.ot-catalog .filter-group summary::after { content: "▾"; color: var(--text-soft); font-size: 12px; }
.ot-catalog .filter-group[open] summary::after { content: "▴"; }
.ot-catalog .filter-group-body { padding: 0 20px 14px; }
.ot-catalog .filter-group-search {
  margin-bottom: 10px; padding: 8px 12px 8px 32px; width: 100%; background: var(--bg);
  border: 1.5px solid transparent; border-radius: 8px; font-size: 13px; font-family: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'><circle cx='11' cy='11' r='8'/><path d='M21 21l-4.35-4.35'/></svg>");
  background-repeat: no-repeat; background-position: 10px center; background-size: 13px;
}
.ot-catalog .filter-group-search:focus { outline: none; border-color: var(--text); background-color: #fff; }
.ot-catalog .filter-option { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; font-size: 13.5px; }
.ot-catalog .filter-option input[type="checkbox"] { accent-color: var(--text); width: 16px; height: 16px; cursor: pointer; }
.ot-catalog .filter-option .count { margin-left: auto; color: var(--text-soft); font-size: 12px; }
.ot-catalog .filter-panel-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; }
.ot-catalog .filter-panel-footer button { flex: 1; padding: 12px; border-radius: 24px; font-family: inherit; font-size: 14px; cursor: pointer; border: none; }
.ot-catalog .filter-panel-footer .reset { background: #fff; border: 1px solid var(--border); color: var(--text); }
.ot-catalog .filter-panel-footer .apply { background: #1a1a1a; color: #fff; }

/* ==========================================================================
   ФАЗА 2a — РЕСТАЙЛ существующего фильтра (smart.filter, селекты).
   Только визуал: логику/AJAX/SEO/JCSmartFilter НЕ трогаем. Фильтр рендерится ВНЕ .ot-catalog
   (родительской обёрткой), поэтому скоупим под body.ot-catalog-page (класс ставит header.php по флагу).
   Цель — убрать «серую стену»: компактные белые чипы-поля вместо full-width серых боксов.
   ========================================================================== */
body.ot-catalog-page {
  --bg:#f3f3f3; --surface:#ffffff; --text:#1a1a1a; --text-muted:#6b6b6b; --text-soft:#8a8a8a;
  --border:#e5e5e5; --hover:#f5f5f5;
}
/* контейнер фильтра — чистая белая карточка */
body.ot-catalog-page .filter-box .smartfilter.filter {
  background:#fff; border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:12px;
}
body.ot-catalog-page .filter__set { border:0; margin:0; padding:0; min-width:0; }
body.ot-catalog-page .filter__set > .container-fluid { padding:0; }
/* ряд фильтров — flex-wrap чипы вместо bootstrap-стены */
body.ot-catalog-page .filter__set .row { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
body.ot-catalog-page .filter__set .row::before, body.ot-catalog-page .filter__set .row::after { content:none; display:none; }
body.ot-catalog-page .filter__set__item {
  width:auto !important; max-width:none !important; min-height:0 !important;
  margin:0 !important; padding:0 !important; float:none !important; left:auto !important; right:auto !important;
}
/* сам бокс-чип — как .f-chip в макете: светло-серая пилюля без рамки, hover чуть темнее */
body.ot-catalog-page .filter__set__item .select {
  position:relative; width:auto; min-width:0; box-sizing:border-box;
  border:1px solid transparent; border-radius:8px;
  background-color:var(--bg);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 11px center; background-size:12px;
  padding:0 32px 0 13px; height:36px; margin:0; transition:background-color .1s;
}
body.ot-catalog-page .filter__set__item .select:hover { background-color:#ebebeb; border-color:transparent; }
/* прячем штатную стрелку темы (она вылезала сбоку) и спейсер :before — рисуем свой шеврон фоном */
body.ot-catalog-page .filter__set__item .select:after,
body.ot-catalog-page .filter__set__item .select:before { display:none !important; }
body.ot-catalog-page .filter__set__item .select__value {
  height:34px !important; min-height:34px !important; font-size:13px !important; color:var(--text); padding:0 !important;
}
body.ot-catalog-page .filter__set__item .select__value.is-placeholder { color:var(--text-muted); }
/* низ фильтра (кнопки сбросить/показать) */
body.ot-catalog-page .filter__bottom { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
@media (max-width:600px){
  body.ot-catalog-page .filter-box .smartfilter.filter { padding:10px; border-radius:10px; }
  body.ot-catalog-page .filter__set .row { gap:6px; }
  body.ot-catalog-page .filter__set__item .select { height:36px; }
}

/* ===== H1-блок как в макете (.page-head) =====
   Тема рендерит H1 в .catalog__promo (белый блок, 25px) + пустой .catalog__counts (line-height:76px).
   Приводим к чистому page-head: компактный заголовок 28/700 без лишнего бокса и пустого бара. */
body.ot-catalog-page .catalog__counts { display:none; }            /* пустой бар (только комментарии) — убираем */
body.ot-catalog-page .catalog__promo {
  background:transparent; padding:18px 0 14px; margin:0; overflow:visible; font-size:inherit;
}
body.ot-catalog-page .catalog__promo h1.title {
  font-size:28px; font-weight:700; color:#1a1a1a; margin:0; letter-spacing:-0.5px; line-height:1.15;
}
@media (max-width:899px){ body.ot-catalog-page .catalog__promo h1.title { font-size:22px; } }
@media (max-width:600px){
  body.ot-catalog-page .catalog__promo { padding:12px 0 12px; }
  body.ot-catalog-page .catalog__promo h1.title { font-size:20px; }
}

/* ===== Боковые отступы контента — чуть больше (как в макете, ~24px) ===== */
body.ot-catalog-page .catalog > .container-fluid { padding-left:24px; padding-right:24px; }
@media (max-width:899px){ body.ot-catalog-page .catalog > .container-fluid { padding-left:16px; padding-right:16px; } }
@media (max-width:600px){ body.ot-catalog-page .catalog > .container-fluid { padding-left:12px; padding-right:12px; } }

/* ===== Фильтр всегда виден инлайн (как в макете), не сворачивается в мобильный тогл-оверлей <1280.
   Тема ниже 1280px делает .filter display:none + position:absolute и показывает кнопку «фильтр».
   Возвращаем инлайн-вид на всех ширинах; на мобиле чипы — горизонтальный скролл (ТЗ §5). ===== */
body.ot-catalog-page .filter-box .filter.smartfilter {
  display:block !important; position:static !important; top:auto !important; left:auto !important;
  width:auto !important; padding-top:0 !important;
}
body.ot-catalog-page [data-target=".filter-box"] { display:none !important; } /* мобильная кнопка-тогл «фильтр» больше не нужна */
@media (max-width:600px){
  body.ot-catalog-page .filter__set .row { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  body.ot-catalog-page .filter__set .row::-webkit-scrollbar { display:none; }
  body.ot-catalog-page .filter__set__item { flex:0 0 auto; }
}

/* Мобильная плашка-навбар каталога (.navbar.hidden-lg: «назад в каталог» + тогл «фильтр»)
   на новом каталоге не нужна — фильтр-чипы и так всегда инлайн. Прячем всю плашку. */
body.ot-catalog-page #catalog-section-container > .navbar.hidden-lg { display:none !important; }