/* ============================================================
   Catalog Section Page — roomsmebel.kz
   Лейаут страницы каталога: шапка, sidebar-фильтр, сетка, пагинация.
   Figma node: 295:5420 (1440px → scale ×1.35 → 1760px)

   Масштаб: 1440→1760px (container 1200→1620px, factor 1.35)
   Sidebar: 309px × 1.35 = 417px
   Gap sidebar→grid: 19px × 1.35 ≈ 26px
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   ШРИФТ — глобально для страниц каталога
   ══════════════════════════════════════════════════════════ */

.catalog_section_list,
.catalog_section_list * {
    font-family: var(--rm-font-main) !important;
}

/* ══════════════════════════════════════════════════════════
   ШАПКА КАТАЛОГА — page-top: крошки НАД заголовком
   HTML-порядок Aspro: .topic (заголовок + счётчик) → #navigation (крошки).
   По редизайну крошки должны идти первыми. Меняем визуальный порядок через
   flex order, чтобы не лезть в шаблон .page-top — PHP-логика не меняется.
   ══════════════════════════════════════════════════════════ */

.catalog_page .top-block-wrapper .page-top {
    display: flex;
    flex-direction: column;
}

.catalog_page .top-block-wrapper .page-top #navigation {
    order: -1;
    margin-bottom: 8px;
}

/* ══════════════════════════════════════════════════════════
   СЧЁТЧИК ТОВАРОВ В ШАПКЕ — "Найдено: 947"
   HTML: <span class="element-count muted font_xs rounded3">947</span>
   Aspro даёт ему серый pill-фон + padding (.rounded3 + .muted).
   Обнуляем фон/паддинг, добавляем префикс "Найдено: " через ::before
   (HTML не трогаем — pure CSS).
   ══════════════════════════════════════════════════════════ */

.catalog_page .top-block-wrapper .element-count {
    background: none !important;
    background-color: transparent !important;
    color: var(--middle-grey, #818181) !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--rm-font-main) !important;
    font-size: var(--rm-font-size-sm) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}

.catalog_page .top-block-wrapper .element-count::before {
    content: "Найдено: ";
}

/* Разделитель под заголовком — Figma: тонкая линия, отступ 24px
   между заголовком и линией. Цвет приглушён до rgba(0.4) — чистый
   #BFBFBF слишком "лезет в глаза". */
.catalog_page .top-block-wrapper .topic__heading {
    padding-bottom: 24px;
    border-bottom: 0.5px solid rgba(191, 191, 191, 0.4);
    margin-bottom: 24px;
}

/* ══════════════════════════════════════════════════════════
   СКРЫТЫЕ БЛОКИ ASPRO — не предусмотрены редизайном
   PHP-логика оставлена нетронутой (правило проекта: не сносим,
   а скрываем). Потом при рефакторинге — судьба этих блоков
   будет решена окончательно (TODO в DEPLOY_LOG).
   ══════════════════════════════════════════════════════════ */

/* Плитки подкатегорий поверх каталога — Aspro показывает превью дочерних
   разделов с картинками. По дизайну их нет. */
.catalog_page .top-content-block {
    display: none !important;
}

/* Переключатели вида (плитка / список / таблица). */
.catalog_page .filter-panel__view.controls-view {
    display: none !important;
}

/* Переключатели плотности списка (маленький / большой). */
.catalog_page .filter-panel__view.controls-linecount {
    display: none !important;
}

/* Боковой каталог-меню (Стулья/Столы с подразделами) — Aspro рендерит в
   сайдбаре над фильтром. По редизайну не нужен. */
.catalog_page .menu_top_block.catalog_block {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════
   ШАПКА РАЗДЕЛА — заголовок + счётчик + хлебные крошки
   Figma: "Столы со скидками" 40px + "Найдено 124" 14px muted
   ══════════════════════════════════════════════════════════ */

/* Заголовок раздела */
.catalog_section_list .page_title h1,
.catalog_section_list .page_title_top h1 {
    font-family: var(--rm-font-main) !important;
    font-size: 40px !important;
    font-weight: 400 !important;
    color: var(--rm-text) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Строка с заголовком и счётчиком */
.rm-catalog-section-head {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 16px;
}

.rm-catalog-section-count {
    font-size: var(--rm-font-size-sm);
    color: var(--rm-text-muted);
    white-space: nowrap;
}

/* Счётчик результатов от Aspro */
.catalog_section_list .section_find_count,
.catalog_section_list .found_count {
    font-family: var(--rm-font-main) !important;
    font-size: var(--rm-font-size-sm) !important;
    color: var(--rm-text-muted) !important;
}

/* Горизонтальный разделитель под заголовком — Figma: y=290 */
.catalog_section_list .section_separator,
.catalog_section_list .separator_line {
    border: none;
    border-top: 1px solid var(--rm-border);
    margin: 16px 0;
}

/* ══════════════════════════════════════════════════════════
   ГОРИЗОНТАЛЬНАЯ ПАНЕЛЬ СОРТИРОВКИ
   Figma: y=314, height=48, ширина как у сетки товаров
   ══════════════════════════════════════════════════════════ */

.catalog_section_list .bx_filter_top,
.catalog_section_list .catalog_top_sort_block,
.catalog_section_list .js_sort_block {
    display: flex;
    align-items: center;
    height: 48px;
    gap: 16px;
    margin-bottom: 16px;
    font-family: var(--rm-font-main) !important;
    font-size: var(--rm-font-size-sm) !important;
}

.catalog_section_list .sort_by,
.catalog_section_list .sort_block {
    font-family: var(--rm-font-main) !important;
    font-size: var(--rm-font-size-sm) !important;
    color: var(--rm-text) !important;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR ФИЛЬТР — layout колонки .left_block
   Внутренний рендер живёт в catalog-filter.css (.rm-filter).
   Здесь только ширина колонки и распаковка внутренних обёрток.

   ВАЖНО про специфичность. Aspro даёт колонке узкую ширину сразу
   из нескольких мест с растущей специфичностью:
     1) .left_block                                       (0,1,0) → 244px
     2) .block_side_WIDE.catalog_page .main-catalog-wrapper:not(.details) .left_block
                                                          (0,5,0) → 277px
   Чтобы перебить без !important, копируем самый специфичный
   Aspro-селектор. Наш CSS грузится позже — выигрываем каскад.
   ══════════════════════════════════════════════════════════ */

.catalog_page .main-catalog-wrapper .left_block,
.block_side_WIDE.catalog_page .main-catalog-wrapper:not(.details) .left_block {
    width: var(--rm-filter-width);
    --width-left-block: var(--rm-filter-width);
}

/* Aspro заворачивает контент колонки в дополнительный <div> внутри
   .sticky-sidebar__inner и фиксирует ему 244px (или 244px в WIDE).
   Без этого правила .rm-filter упирается в 244px и визуально сжимается,
   хотя сама колонка уже широкая. Растягиваем обёртку на всю ширину.
   Селектор повторяет Aspro, чтобы выиграть каскадом. */
.catalog_page .left_block .sticky-sidebar__inner > div,
.block_side_WIDE.catalog_page .left_block .sticky-sidebar__inner > div {
    width: 100%;
}

/* Aspro в WIDE-режиме отдельно прописывает width на внутренних
   обёртках .menu_top_block и .bx_filter. Если они появляются вокруг
   нашего фильтра — тоже распускаем. */
.block_side_WIDE.catalog_page .main-catalog-wrapper:not(.details) .left_block .sticky-sidebar__inner .menu_top_block,
.block_side_WIDE.catalog_page .main-catalog-wrapper:not(.details) .left_block .sticky-sidebar__inner .bx_filter {
    width: 100%;
}

@media (min-width: 1500px) {
    .catalog_page .main-catalog-wrapper .left_block,
    .block_side_WIDE.catalog_page .main-catalog-wrapper:not(.details) .left_block {
        width: var(--rm-filter-width);
        --width-left-block: var(--rm-filter-width);
    }
    .catalog_page .left_block .sticky-sidebar__inner > div,
    .block_side_WIDE.catalog_page .left_block .sticky-sidebar__inner > div {
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════
   ПАГИНАЦИЯ
   Figma node 295:5808 — «Номера страниц»
   ══════════════════════════════════════════════════════════ */

.catalog_section_list .bx_pagination_inner,
.catalog_section_list .nav-links,
.catalog_section_list .pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 32px 0 !important;
}

.catalog_section_list .bx_pag_next,
.catalog_section_list .bx_pag_prev,
.catalog_section_list .page-numbers a,
.catalog_section_list .bx_pagination a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--rm-radius-sm) !important;
    border: 1px solid var(--rm-border) !important;
    font-family: var(--rm-font-main) !important;
    font-size: var(--rm-font-size-sm) !important;
    color: var(--rm-text) !important;
    text-decoration: none !important;
    transition: border-color var(--rm-transition), background var(--rm-transition);
}

.catalog_section_list .bx_pag_next:hover,
.catalog_section_list .bx_pag_prev:hover,
.catalog_section_list .page-numbers a:hover,
.catalog_section_list .bx_pagination a:hover {
    border-color: var(--rm-text) !important;
}

/* Активная страница */
.catalog_section_list .bx_pag_current,
.catalog_section_list .page-numbers.current,
.catalog_section_list .bx_pagination .current {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--rm-radius-sm) !important;
    border: 1px solid var(--rm-text) !important;
    background: var(--rm-text) !important;
    font-family: var(--rm-font-main) !important;
    font-size: var(--rm-font-size-sm) !important;
    color: var(--rm-bg) !important;
    font-weight: var(--rm-font-weight-medium) !important;
}

/* ══════════════════════════════════════════════════════════
   GAP МЕЖДУ ФИЛЬТРОМ И СЕТКОЙ
   Figma: 19px × 1.35 = 26px. Aspro использует space-between →
   лишние ~62px уходят в пустоту. Меняем на flex-start + gap.
   ══════════════════════════════════════════════════════════ */

.catalog_page .main-catalog-wrapper.flexbox {
    justify-content: flex-start !important;
    gap: 26px !important;
}

/* section-content заполняет остаток автоматически */
.catalog_page .section-content-wrapper.with-leftblock,
.catalog_page.wide_N .section-content-wrapper {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
}