/* ============================================================
   CATALOG CATEGORIES PAGE
   ============================================================ */

.catpage {
    padding: var(--spacing-lg) 0 var(--spacing-xl);
}

.catpage .account-breadcrumbs {
    margin-top: 0;
    margin-bottom: 20px;
}

/* 26px/600 — общий размер заголовка страницы по всему сайту (см. также
   .about-page__title, .catalog-page-title, .account-title,
   .auth-page__title, .checkout-page__title). В макете этой страницы
   заголовок был 32px/700, крупнее, чем везде на сайте. */
.catpage__title {
    font-family: var(--font-headers);
    font-size: var(--heading-page);
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-lg);
    line-height: var(--heading-page-lh);
}

/* ============================================================
   GRID
   ============================================================ */

.catpage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 24px;
    align-items: start;
}

/* ============================================================
   CARD — base from homepage catalog-card style
   ============================================================ */

.catpage-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    text-decoration: none;
    color: var(--color-text-primary);
    overflow: hidden;
}


/* Image area — exactly like homepage catalog-img-wrap */
.catpage-card__img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f5fc;
    padding: 24px;
    overflow: hidden;
}

.catpage-card__img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.catpage-card:hover .catpage-card__img {
    transform: scale(1.07);
}

/* Body */
.catpage-card__body {
    padding: 20px 0 0;
}

/* Название раздела на плашке — по общей шкале, вровень с такими же
   плашками на главной и на странице 404 (.catalogue-block__card-name) */
.catpage-card__name {
    font-family: var(--font-headers);
    font-size: var(--heading-card);
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
    line-height: var(--heading-card-lh);
    margin-bottom: 16px;
}

/* Subcategories list */
.catpage-card__subcats {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.catpage-card__subcat-item {
    display: block;
}

/* Hidden items (5+) */
.catpage-card__subcat-item--hidden {
    display: none;
}

.catpage-card__subcats--expanded .catpage-card__subcat-item--hidden {
    display: block;
}

.catpage-card__subcat {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-secondary);
    text-decoration: none;
    line-height: 1.6;
    display: block;
    transition: color var(--transition-default);
}

.catpage-card__subcat:hover {
    color: var(--color-accent);
}

.catpage-card__count {
    color: var(--color-accent);
    font-weight: 500;
}

/* Show-more button */
.catpage-card__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    cursor: pointer;
    transition: opacity var(--transition-default);
    line-height: 1.6;
}

.catpage-card__more:hover {
    opacity: 0.75;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
    .catpage-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .catpage-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .catpage-card__name {
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    .catpage__title {
        font-size: var(--heading-page-mobile);
    }

    .catpage-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .catpage-card__img-wrap {
        padding: 16px;
    }

    .catpage-card__name {
        font-size: 13px;
    }

    .catpage-card__subcat {
        font-size: 13px;
    }
}

@media (max-width: 400px) {
    .catpage-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   ПРАВКИ ПОД БОЕВУЮ ВЁРСТКУ
   ============================================================ */

/* Верхний отступ страницы перенесён на хлебные крошки — их печатает
   header.php над контентом. Здесь остаётся расстояние до заголовка. */
.catpage {
    padding-top: 20px;
}

/* Текст каталога — те же отступы, что у текста раздела */
.product-list__description {
    margin: var(--spacing-lg) 0;
}