/* ============================================================
   Раздел каталога «Сезонные предложения» (`catalog:season`)
   Значения сняты с согласованного прототипа
   mnogocvetov.replit.app/catalog.

   Карточка товара переиспользуется как есть (`.product-card-v2`),
   здесь — только страница: заголовок, сортировка, сайдбар, сетка,
   пагинация.
   ============================================================ */

.catalog-season {
    --cs-accent: #9067a8;
    --cs-accent-dark: #81529e;
    --cs-accent-text: #80549b;
    --cs-accent-soft: #f0e6f7;
    --cs-accent-hover-bg: #f5eff8;
    --cs-border: #e0d4ed;
    --cs-sidebar-border: #9b65bc;
    --cs-icon: #9b65bc;
    --cs-ink: #2b2238;
    --cs-muted: #6b5180;
    --cs-font: 'Montserrat', 'Helvetica', Arial, sans-serif;

    font-family: var(--cs-font);
}

/* --- Заголовок (в теме `h1` задан через !important — перебиваем) --- */
.catalog-season h1.catalog-season__title {
    margin: 0;
    font-family: var(--cs-font);
    font-size: 36px !important;
    font-weight: 400;
    line-height: 1.2;
    color: var(--cs-ink);
    text-align: center;
}

/* --- Сортировка: текстовые пункты со значком, без рамок и заливки --- */
.catalog-season__sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 36px 0 0;
    font-size: 14px;
    color: var(--cs-ink);
}

.catalog-season__sort-label {
    color: var(--cs-ink);
}

.catalog-season__sort-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    line-height: 1.2;
    color: var(--cs-ink);
    text-decoration: none;
    transition: color .2s ease;
}

.catalog-season__sort-item:hover,
.catalog-season__sort-item:focus {
    color: var(--cs-accent);
    text-decoration: none;
}

/* текущая сортировка */
.catalog-season__sort-item_active {
    color: var(--cs-accent);
    font-weight: 500;
}

.catalog-season__sort-icon {
    font-size: 23px;
    line-height: 1;
    color: var(--cs-icon);
}

/* --- Раскладка: сайдбар + выдача --- */
.catalog-season__layout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 48px;
}

/* ширина колонки — как у модуля категорий на остальных страницах каталога */
.catalog-season__sidebar {
    flex: 0 0 225px;
    width: 225px;
}

.catalog-season__main {
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Сетка товаров: 4 в ряд на десктопе, 2 на мобильном --- */
.catalog-season__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.catalog-season__empty {
    padding: 40px 0;
    text-align: center;
    color: var(--cs-muted);
}

/* Пагинация — общая для всего сайта, см. блок `.pagination` ниже. */

/* ============================================================
   Адаптив — точки перелома как в прототипе (1024 / 768 / 640)
   ============================================================ */

@media (max-width: 1023px) {
    .catalog-season__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    /* сайдбар прячем, чтобы выдача не сужалась */
    .catalog-season__sidebar {
        display: none;
    }

    .catalog-season__layout {
        gap: 0;
        margin-top: 36px;
    }

    .catalog-season h1.catalog-season__title {
        font-size: 32px !important;
    }
}

@media (max-width: 639px) {
    .catalog-season__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catalog-season h1.catalog-season__title {
        font-size: 26px !important;
    }

    .catalog-season__sort {
        gap: 16px;
        margin-top: 28px;
    }

    .catalog-season .pagination {
        margin-top: 36px;
    }
}

/* ============================================================
   Подсветка пункта «Сезонные предложения» в навигации сайта
   (сайдбар каталога, мобильное меню, плитка на главной каталога,
   пункт верхнего меню с css-классом `menu-season`).

   Постоянно светло-фиолетовый, при наведении — насыщенный фиолетовый
   и белый текст.
   ============================================================ */

.catalog-side .menu-item_season > .menu-item__link,
.catalog-side .menu-item_season > a,
.catalog-menu-mobile .menu-item_season > a,
.menu-item_season > .menu-item-link-mobile,
.menu-item_season > .acc__toggle,
.catalog-menu-item_season,
.main-menu .menu-season > a,
.menu-season > a {
    background-color: #f0e6f7 !important;
    color: #80549b !important;
    font-weight: 500;
    transition: background-color .2s ease, color .2s ease;
}

.catalog-side .menu-item_season > .menu-item__link:hover,
.catalog-side .menu-item_season > a:hover,
.catalog-menu-mobile .menu-item_season > a:hover,
.menu-item_season > .menu-item-link-mobile:hover,
.menu-item_season > .acc__toggle:hover,
.catalog-menu-item_season:hover,
.main-menu .menu-season > a:hover,
.menu-season > a:hover {
    background-color: #81529e !important;
    color: #fff !important;
    text-decoration: none;
}

/* плитка на главной странице каталога */
.catalog-menu-item_season {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    padding: 16px 20px;
    border-radius: 12px;
    text-align: center;
}

.catalog-menu-item_season .catalog-menu-item__name {
    font-family: 'Montserrat', 'Helvetica', Arial, sans-serif;
    font-weight: 500;
    color: inherit;
}

/* ============================================================
   Текстовый блок под товарной выдачей сезонного раздела.
   Значения — с прототипа mnogocvetov.replit.app/catalog.
   ============================================================ */

.season-promo {
    /* админский custom-styles.css обнуляет `.section { padding: 0 }`,
       поэтому отступы секции задаём сами */
    padding: 56px 0 64px !important;
    font-family: 'Montserrat', 'Helvetica', Arial, sans-serif;
    color: #2b2238;
}

.season-promo__inner {
    margin: 0 auto;
}

.season-promo__header {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.season-promo__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 999px;
    background-color: #f0e6f7;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: #80549b;
}

.season-promo h2.season-promo__title {
    margin: 16px 0 0;
    font-size: 32px !important;
    font-weight: 400;
    line-height: 1.2;
    color: #2b2238;
}

.season-promo p.season-promo__intro {
    margin: 24px 0 0;
    font-size: 16px;
    line-height: 1.75;
    color: #5f5368;
}

/* --- Пары «круглое фото + текст», в шахматном порядке --- */
.season-promo__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    column-gap: 64px;
    row-gap: 48px;
    max-width: 920px;
    margin: 48px auto 0;
}

.season-promo__photo {
    width: 100%;
    max-width: 310px;
    margin: 0 auto;
    padding: 12px;
    border: 8px solid #9067a8;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 12px 36px rgba(144, 103, 168, .25);
}

.season-promo__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
}

.season-promo .season-promo__text h3 {
    margin: 0;
    font-family: inherit;
    font-size: 30px !important;
    font-weight: 400;
    line-height: 1.2;
    color: #2b2238;
}

.season-promo .season-promo__text p {
    margin: 20px 0 0;
    font-size: 16px;
    line-height: 1.75;
    color: #5f5368;
}

/* вторая пара: текст слева, фото справа */
.season-promo__text_second {
    order: 3;
}

.season-promo__photo_second {
    order: 4;
}

@media (max-width: 767px) {
    .season-promo__grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 32px;
        margin-top: 36px;
    }

    /* на мобильном возвращаем порядок «фото → текст» */
    .season-promo__text_second {
        order: 4;
    }

    .season-promo__photo_second {
        order: 3;
    }

    .season-promo {
        padding: 32px 0 40px !important;
    }

    .season-promo h2.season-promo__title {
        font-size: 26px !important;
    }

    .season-promo p.season-promo__intro,
    .season-promo .season-promo__text p {
        font-size: 14px;
        line-height: 1.7;
    }

    .season-promo .season-promo__text h3 {
        font-size: 24px !important;
    }

    .season-promo__text {
        text-align: center;
    }
}

/* В теме теги `header` и `article` стилизуются глобально (на мобильном
   header становится position: fixed) — страхуемся, если разметку
   когда-нибудь вернут на семантические теги. */
.season-promo .season-promo__inner,
.season-promo .season-promo__header {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    z-index: auto;
    background: none;
}