body {
    background: var(--Body-Background);
}

.sort-block .block-content {
    padding: 33px 20px 0;
}

.sort-block .content {
    background: #FFF;
    display: flex;
    padding: 9px 22px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.sort-block .left-side {
    display: flex;
    align-items: center;
    gap: 146px;
}

.sort-block .sort-title {
    color: #272727;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 16px */
    text-transform: uppercase;
}

.sort-block .btn-group {
    display: flex;
    align-items: center;
    gap: 25px;
}

.sort-block .catalog-sort-option {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #272727;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 16px */
}

.sort-block .catalog-sort-option > img:nth-child(1) {
    width: 21px;
}

.sort-block .catalog-sort-option > img:nth-child(2) {
    width: 16px;
    display: none;
}

.sort-block .products-foud {
    color: #272727;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 16px */
}

@media (max-width: 1439px) {
    .sort-block .products-foud span {
        display: none;
    }
}

@media (max-width: 989px) {
    .sort-block {
       display: none;
    }
}

.filter-btn {
    display: flex;
    height: 38px;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--Border-Light, #DBDBDB);
    background: var(--Gray-100, #EEE);
    flex: 1 0 0;
    white-space: nowrap;
    box-shadow: 0 6px 8px 0 rgba(255, 255, 255, 0.35) inset, 0 -4px 11px 0 rgba(0, 0, 0, 0.30) inset;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
}

.filter-btn.active {
    background: var(--Brand-Secondary, #454452);
    box-shadow: 2px 6px 6px 2px #29292F inset;
    color: var(--Base-White, #FFF);
}

.mobile-filter-block {
    display: none;
}

@media (max-width: 989px) {
    .mobile-filter-block {
        display: flex;
    }

    .mobile-filter-block .block-content {
        padding: 0 20px 34px;
        max-width: 450px;
        flex-direction: row;
        align-items: stretch;
        gap: 6px;
    }

    .filter-btn {
        display: flex;
        padding: 12px;
        justify-content: center;
        align-items: center;
    }

    .mobile-filter-block .filter-btn {
        flex: 1 0 0;
    }
}

.catalog-block .block-content {
    padding: 20px 20px 80px;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}

.catalog-block aside {
    display: flex;
    width: 300px;
    padding: 18px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 4px;
    background: #FFF;
}

.catalog-block .filters-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: stretch;
    align-items: stretch;
}

.catalog-block .filter-btn-group {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.catalog-block .filter-btn-group .filter-btn {
    flex: 1 0 0;
}

/* --- Группы фильтров (сайдбар и мобильная модалка) --- */

.filter-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.filter-divider {
    height: 1px;
    align-self: stretch;
    background: var(--Border-Divider, #E0E0E0);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: stretch;
}

.filter-group-title {
    color: var(--Gray-900, #212529);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 16px */
}

.filter-dashed {
    border-bottom: 1px dashed var(--Gray-900, #212529);
    padding-bottom: 3px;
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-self: stretch;
}

.filter-buttons .filter-btn {
    flex: 1 0 0;
}

.filter-buttons--2col,
.filter-buttons--4col,
.filter-buttons--6col {
    display: grid;
    gap: 8px;
}

.filter-buttons--2col {
    grid-template-columns: repeat(2, 1fr);
}

.filter-buttons--4col {
    grid-template-columns: repeat(4, 1fr);
}

.filter-buttons--6col {
    grid-template-columns: repeat(6, 1fr);
}

/* В грид-сетке кнопка не должна диктовать минимальную ширину содержимым. */
.filter-buttons--2col .filter-btn,
.filter-buttons--4col .filter-btn,
.filter-buttons--6col .filter-btn {
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

/* --- Популярные запросы --- */

.popular-queries {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-self: stretch;
}

.popular-queries .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.popular-query-tag {
    display: flex;
    padding: 13px 15px;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background: var(--Surface-White, #FFF);
    color: var(--Text-Primary, #1E2433);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 14px */
    white-space: nowrap;
}

.popular-query-tag:hover,
.popular-query-tag.active {
    background: var(--Brand-Primary, #D5A944);
    color: var(--Base-White, #FFF);
}

.catalog-block .column {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 58px;
}

.catalog-block .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.catalog-block .grid-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    align-self: stretch;
}

.catalog-block .grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-self: stretch;
    align-items: stretch;
}

.catalog-block .grid-container > .btn {
    width: 100%;
    font-weight: 700; /* правка по фидбеку: текст «Показать ещё» жирнее */
}

.catalog-block .category-description {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.catalog-block .category-description p {
    color: #1E2529;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
}

.catalog-block .category-description h2 {
    color: #1E2529;
    font-size: var(--font-section-title, 30px);
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 30px */
}

@media (max-width: 989px) {
    /* На мобильных фильтры живут в модалке (нижняя навигация), сайдбар скрыт. */
    .catalog-block aside {
        display: none;
    }

    /* Отступы по мобильному макету: H1→карточки 26, кнопка→пагинация 22,
       пагинация→«Популярные запросы» 60 (26 + 34), запросы→SEO-текст 26, низ 37. */
    .catalog-block .block-content {
        padding: 26px 20px 37px;
    }

    .catalog-block .content {
        gap: 22px;
    }

    .catalog-block .column {
        gap: 26px;
    }

    .popular-queries {
        gap: 20px;
        margin-top: 34px;
    }

    .popular-queries .font-section-title {
        font-size: 30px;
    }
}

/* Сетка карточек как на сайте-ориентире: 2 колонки → с 768px одна колонка
   шириной до 500px по центру → с 480px на всю ширину. */
@media (max-width: 768px) {
    .catalog-block .grid {
        max-width: 500px;
        margin: 0 auto;
        gap: 20px;
        width: 100%;
    }

    .catalog-block .grid .product-card {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .catalog-block .grid {
        max-width: 100%;
    }
}