/* ===== WEBEGE SHOP MOBILE HERO START ===== */

/*
   На компьютере акция также получает нормальную
   двухуровневую структуру, но остальной hero не меняется.
*/

.shop-news-banner-text {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 9px;
}

.shop-news-banner-text strong {
    color: var(--text-strong);
    font-weight: 900;
}

.shop-news-banner-text small {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}


/* ----------------------------------------------------------
   Мобильная версия магазина
   ---------------------------------------------------------- */

@media (max-width: 768px) {
    /*
       Мобильный хедер уже находится выше в потоке страницы.
       Поэтому здесь нужен обычный промежуток после него,
       а не координата 160px от верха экрана.
    */
    body.shop-body .shop-page-section {
        padding-top: 34px !important;
    }

    body.shop-body .shop-page-section
    .container.section-offset {
        width: calc(100% - 32px) !important;
    }

    body.shop-body .shop-page-hero-title {
        width: 100%;
        max-width: 390px;
        margin: 0 0 18px !important;
        text-align: left;
    }

    body.shop-body .shop-page-hero-title h1 {
        width: 100%;
        margin: 0 !important;

        font-size: clamp(30px, 9.4vw, 38px) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.047em !important;

        text-align: left !important;
        white-space: nowrap;
        text-wrap: nowrap;
    }

    body.shop-body .shop-h1-colon {
        display: none !important;
    }

    body.shop-body .shop-page-hero-title p {
        max-width: 335px;
        margin: 12px 0 0 !important;

        color: var(--text-muted);
        font-size: 15.5px !important;
        line-height: 1.45 !important;
        font-weight: 500;

        text-align: left;
        text-wrap: balance;
    }

    body.shop-body
    .shop-news-banner.shop-news-banner-with-action {
        display: block !important;

        margin: 18px 0 0 !important;
        padding: 15px 16px !important;

        border-radius: 18px !important;
        text-align: left;
    }

    body.shop-body .shop-news-banner-text {
        display: block !important;
        width: 100%;
        text-align: left;
    }

    body.shop-body .shop-news-banner-text strong {
        display: block;

        font-size: 16px !important;
        line-height: 1.25 !important;
        letter-spacing: -0.018em;

        text-wrap: balance;
    }

    body.shop-body .shop-news-banner-text small {
        display: block;

        margin-top: 5px;

        font-size: 13.5px !important;
        line-height: 1.4 !important;
        font-weight: 650;

        text-wrap: balance;
    }

    /*
       В мобильной плашке кнопка менеджера создаёт
       лишний третий уровень и сильно увеличивает высоту.
       Менеджер остаётся доступен в хедере и футере.
    */
    body.shop-body .shop-news-banner-manager {
        display: none !important;
    }

    body.shop-body .shop-news-banner
    + .shop-year-section {
        margin-top: 18px !important;
    }
}


/* Узкие телефоны */

@media (max-width: 360px) {
    body.shop-body .shop-page-section {
        padding-top: 28px !important;
    }

    body.shop-body .shop-page-section
    .container.section-offset {
        width: calc(100% - 24px) !important;
    }

    body.shop-body .shop-page-hero-title h1 {
        font-size: 30px !important;
    }

    body.shop-body .shop-page-hero-title p {
        max-width: 300px;
        font-size: 15px !important;
    }

    body.shop-body
    .shop-news-banner.shop-news-banner-with-action {
        padding: 14px !important;
    }
}

/* ===== WEBEGE SHOP MOBILE HERO END ===== */

/* ===== WEBEGE SHOP MOBILE HEADER OFFSET START ===== */

/*
   Запасное значение используется до выполнения JavaScript.
   Затем переменная получает реальную высоту .glass-header.
*/

:root {
    --webege-mobile-header-height: 132px;
}

@media (max-width: 768px) {
    body.shop-body .shop-page-section {
        padding-top:
            calc(
                var(--webege-mobile-header-height, 132px)
                + 28px
            )
            !important;
    }
}

@media (max-width: 360px) {
    body.shop-body .shop-page-section {
        padding-top:
            calc(
                var(--webege-mobile-header-height, 132px)
                + 24px
            )
            !important;
    }
}

/* ===== WEBEGE SHOP MOBILE HEADER OFFSET END ===== */

/* ===== WEBEGE SHOP RESPONSIVE COPY START ===== */

body.shop-body .shop-copy-desktop,
body.shop-body .shop-banner-desktop {
    display: block;
}

body.shop-body .shop-copy-mobile,
body.shop-body .shop-banner-mobile {
    display: none;
}

/* ПК: возвращаем старые тексты и поднимаем H1 */
@media (min-width: 769px) {
    body.shop-body .shop-page-section {
        padding-top: 112px !important;
    }

    body.shop-body .shop-page-hero-subtitle {
        display: block !important;
    }

    body.shop-body .shop-news-banner-text {
        display: block !important;
    }

    body.shop-body .shop-banner-desktop {
        font-size: inherit;
        line-height: 1.45;
    }
}

/* Мобильный: сохраняем компактные тексты */
@media (max-width: 768px) {
    body.shop-body .shop-copy-desktop,
    body.shop-body .shop-banner-desktop {
        display: none !important;
    }

    body.shop-body .shop-copy-mobile,
    body.shop-body .shop-banner-mobile {
        display: block !important;
    }

    body.shop-body .shop-banner-mobile strong {
        display: block !important;
    }

    body.shop-body .shop-banner-mobile small {
        display: block !important;
    }
}

/* ===== WEBEGE SHOP RESPONSIVE COPY END ===== */