/* ==================================================
   КАТАЛОГ СТАТЕЙ — МОБИЛЬНАЯ ВЕРСИЯ
   ================================================== */

.catalog-page {
    width: 100%;

    padding: 28px 20px 40px;

    box-sizing: border-box;
}


/* ==================================================
   ЗАГОЛОВОК
   ================================================== */

.catalog-title {
    margin: 0 0 25px;

    font-size: 36px;
    font-weight: 500;
    line-height: 1.15;

    color: var(--charcoal);
}


/* ==================================================
   ПЕРЕКЛЮЧАТЕЛЬ
   ================================================== */

.catalog-switch {
    display: flex;
    align-items: center;

    gap: 28px;

    margin: 0 0 26px;

    border-bottom: 1px solid var(--cream-500);
}


.catalog-switch-item {
    position: relative;

    display: block;

    padding: 0 0 12px;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;

    color: var(--taupe);
    text-decoration: none;

    white-space: nowrap;
}


.catalog-switch-item.active {
    font-weight: 600;

    color: var(--charcoal);
}


.catalog-switch-item.active::after {
    content: '';

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 100%;
    height: 2px;

    background: var(--charcoal);
}


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

.catalog-grid {
    display: block;

    width: 100%;
}


/* ==================================================
   ЯЧЕЙКИ ДЕСКТОПНОЙ СЕТКИ
   ================================================== */

.catalog-block {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    border: 0;
}


/* временно убираем разделение второй строки десктопа */

.catalog-block:nth-child(n+4) {
    margin-top: 0;
    padding-top: 0;

    border-top: 0;
}


/* ==================================================
   КАТЕГОРИЯ
   ================================================== */

.catalog-group {
    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    border-left: 0;
    border-bottom: 1px solid var(--cream-500);
}


/* ==================================================
   ШАПКА КАТЕГОРИИ
   ================================================== */

.catalog-group-header {
    display: flex;
    align-items: center;

    width: 100%;
}


/* ==================================================
   НАЗВАНИЕ КАТЕГОРИИ
   ================================================== */

.catalog-group-title {
    display: block;

    flex: 1 1 auto;

    min-width: 0;

    margin: 0;
    padding: 17px 0;

    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;

    color: var(--charcoal);
    text-decoration: none;
}


/* ==================================================
   КНОПКА РАСКРЫТИЯ
   ================================================== */

.catalog-group-toggle {
    position: relative;

    display: block;

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}


/* ==================================================
   ГАЛКА
   ================================================== */

.catalog-group-toggle::before {
    content: '';

    position: absolute;

    top: 50%;
    left: 50%;

    width: 8px;
    height: 8px;

    border-right: 1.5px solid var(--taupe);
    border-bottom: 1.5px solid var(--taupe);

    transform:
        translate(-50%, -65%)
        rotate(45deg);

    transition:
        transform 0.2s ease;
}


/* ==================================================
   ГАЛКА — ОТКРЫТО
   ================================================== */

.catalog-group.open
.catalog-group-toggle::before {
    transform:
        translate(-50%, -35%)
        rotate(225deg);
}


/* ==================================================
   ПОДКАТЕГОРИИ
   ================================================== */

.catalog-subcategories {
    display: none;

    flex-direction: column;

    gap: 0;

    width: 100%;

    margin: 0;
    padding: 0 0 14px;
}


/* ==================================================
   ПОДКАТЕГОРИИ — ОТКРЫТО
   ================================================== */

.catalog-group.open
.catalog-subcategories {
    display: flex;
}


/* ==================================================
   ПОДКАТЕГОРИЯ
   ================================================== */

.catalog-subcategory {
    display: flex;
    align-items: baseline;

    gap: 9px;

    width: 100%;
    max-width: 100%;

    padding: 7px 10px 7px 12px;

    box-sizing: border-box;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;

    color: var(--gray-700);
    text-decoration: none;
}


/* ==================================================
   СТРЕЛКА ПОДКАТЕГОРИИ
   ================================================== */

.catalog-subcategory-arrow {
    flex: 0 0 auto;

    color: var(--taupe);
}