/* =========================================================
   GETCOURSE — БАННЕРЫ
   МОДУЛЬНАЯ СТРУКТУРА

   Как добавлять новый баннер:
   1. Скопируйте целиком блок нужного баннера.
   2. Замените .common-bannerX на новое имя.
   3. Измените только цвета/размеры/особенности внутри этого блока.
   4. В конце блока находится его мобильная версия.

   Общие настройки находятся только в разделе 1.
   Каждый баннер дальше — самостоятельный блок.
   ========================================================= */


/* =========================================================
   1. ОБЩИЕ НАСТРОЙКИ
   ========================================================= */

:root {
    --color-white: #fff;
    --color-black: #000;

    --size-title: 20px;
    --size-title-mob: 16px;
    --size-text: 14px;
    --size-text-mob: 12px;
}

/* Системное уведомление GetCourse */
.gc-main-content:not(.with-left-menu) .top-notification-wrapper {
    display: none;
}

/* Глобальное скрытие баннеров */
.common-banner-wrapper.hide_banners {
    display: none !important;
}

/* Положение всех баннеров */
.common-banner-wrapper {
    position: fixed !important;
    left: 86px !important;
    bottom: 20px !important;
    z-index: 999 !important;

    display: flex !important;
    justify-content: flex-end !important;

    font-family: 'Montserrat', 'Lato', Helvetica, Arial, sans-serif !important;
}

/* Если баннер находится внутри информационного блока */
.info-wrapper .common-banner-wrapper {
    position: relative !important;
}

/* Все ссылки внутри баннеров */
.common-banner a,
.common-banner1 a,
.common-banner2 a,
.common-banner3 a,
.common-banner4 a,
.common-banner5 a,
.common-banner6 a,
.common-banner-tg a,
.common-bannerKM a,
.common-bannerHR a,
.common-bannerUPSALE26 a {
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer;
}

/* Общий стиль крестика */
.common-banner .banner-close,
.common-banner1 .banner-close,
.common-banner2 .banner-close,
.common-banner3 .banner-close,
.common-banner4 .banner-close,
.common-banner5 .banner-close,
.common-banner6 .banner-close,
.common-banner-tg .banner-close,
.common-bannerKM .banner-close,
.common-bannerHR .banner-close,
.common-bannerUPSALE26 .banner-close {
    color: var(--color-white) !important;
    line-height: 1 !important;
    font-size: 35px !important;
    margin-left: 20px !important;
    margin-top: -4px !important;
    font-weight: bold !important;
    display: inline-block !important;
}

.mobile-show {
    display: none !important;
}


/* =========================================================
   2. БАННЕР: common-banner
   Назначение: основной тёмный баннер
   ========================================================= */

.common-banner {
    width: 520px !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    box-sizing: border-box !important;
    display: flex !important;
    padding: 2px 5px 0 7px !important;
    border-radius: 15px !important;
    max-height: 90px !important;

    background: linear-gradient(
        135deg,
        #000 0%,
        #3B3838 60%,
        #595959 100%
    ) !important;
}

.common-banner .banner-wrapper-content {
    display: flex !important;
    margin-left: 13px !important;
    margin-right: -12px;
    align-items: flex-start !important;
}


.common-banner .banner-content {
    width: 350px !important;
    padding-top: 2px;
    color: var(--color-white) !important;
}

.common-banner .banner-logo {
    width: 50px !important;
    height: 50px !important;
    margin-top: 1px !important;
}

.common-banner .banner-title {
    font-size: var(--size-title) !important;
    font-weight: bold !important;
    margin: 5px 0 3px !important;
}

.common-banner .banner-title a {
    color: #E7B012 !important;
}

.common-banner .banner-text {
    padding: 0 !important;
    font-size: var(--size-text) !important;
    line-height: 15.32px !important;
    font-weight: 400 !important;
    font-family: "Roboto", "Lato", Helvetica, Arial, sans-serif !important;
}

.common-banner .banner-text a {
    color: var(--color-white) !important;
}

.common-banner .banner-link {
    color: #000 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: var(--color-white) !important;
    margin-left: 10px !important;
    margin-top: 10px !important;
    padding: 4px !important;
    width: 110px !important;
    text-align: center !important;
    border-radius: 6px !important;
    display: inline-block !important;
    box-shadow: 0 2px 10px 2px #E7B012 !important;
}

@media (max-width: 560px) {
    .common-banner {
        width: 95vw !important;
        height: 75px !important;
        min-height: 75px !important;
        max-height: 75px !important;
        box-sizing: border-box !important;
        padding: 18px 6px 5px !important;
        width: 95vw !important;
    }

    .common-banner .banner-content {
        width: 90vw !important;
        padding-top: 0;
    }

    .common-banner .banner-link {
        display: none !important;
    }

    .common-banner .banner-wrapper-content {
        margin-top: -11px !important;
        margin-left: 8px !important;
    }

    .common-banner .banner-close {
        position: absolute !important;
        right: 6px !important;
        top: 1px !important;
    }

    .common-banner .banner-title {
        max-width: 80vw !important;
        font-size: var(--size-title-mob) !important;
    }

    .common-banner .banner-text {
        max-width: 80vw !important;
        font-size: var(--size-text-mob) !important;
        line-height: 14px !important;
    }

    .common-banner .banner-logo {
        margin-top: -16px !important;
    }

    .mobile-show {
        display: block !important;
    }
}


/* =========================================================
   3. БАННЕР: common-banner1
   Назначение: светлый голубо-бежевый
   ========================================================= */

.common-banner1 {
    width: 520px !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    box-sizing: border-box !important;
    display: flex !important;
    padding: 2px 5px 0 7px !important;
    border-radius: 15px !important;
    max-height: 90px !important;

    background: linear-gradient(
        135deg,
        #9BD4DD 0%,
        #FEF6DF 60%,
        #efd9d9 100%
    ) !important;
}

.common-banner1 .banner-wrapper-content {
    display: flex !important;
    margin-left: 13px !important;
    margin-right: -12px;
    align-items: flex-start !important;
}

.common-banner1 .banner-content {
    width: 350px !important;
    padding-top: 2px;
    color: var(--color-black) !important;
}

.common-banner1 .banner-logo {
    width: 50px !important;
    height: 50px !important;
    margin-top: 1px !important;
}

.common-banner1 .banner-title {
    font-size: var(--size-title) !important;
    font-weight: bold !important;
    margin: 5px 0 3px !important;
}

.common-banner1 .banner-title a,
.common-banner1 .banner-text a {
    color: var(--color-black) !important;
}

.common-banner1 .banner-text {
    padding: 0 !important;
    font-size: var(--size-text) !important;
    line-height: 15.32px !important;
    font-weight: 400 !important;
    font-family: "Roboto", "Lato", Helvetica, Arial, sans-serif !important;
}

.common-banner1 .banner-link {
    color: #000 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: var(--color-white) !important;
    margin-left: 10px !important;
    margin-top: 10px !important;
    padding: 4px !important;
    width: 110px !important;
    text-align: center !important;
    border-radius: 6px !important;
    display: inline-block !important;
    box-shadow: 0 2px 10px 2px #b1a9f4 !important;
}

@media (max-width: 560px) {
    .common-banner1 {
        width: 95vw !important;
        height: 75px !important;
        min-height: 75px !important;
        max-height: 75px !important;
        box-sizing: border-box !important;
        padding: 18px 6px 5px !important;
        width: 95vw !important;
    }

    .common-banner1 .banner-content {
        width: 90vw !important;
        padding-top: 0;
    }

    .common-banner1 .banner-link {
        display: none !important;
    }

    .common-banner1 .banner-wrapper-content {
        margin-top: -11px !important;
        margin-left: 8px !important;
    }

    .common-banner1 .banner-close {
        position: absolute !important;
        right: 6px !important;
        top: 1px !important;
    }

    .common-banner1 .banner-title {
        max-width: 80vw !important;
        font-size: var(--size-title-mob) !important;
    }

    .common-banner1 .banner-text {
        max-width: 80vw !important;
        font-size: var(--size-text-mob) !important;
        line-height: 14px !important;
    }

    .common-banner1 .banner-logo {
        margin-top: -16px !important;
    }
}


/* =========================================================
   4. БАННЕР: common-banner2
   Назначение: светлый розово-кремовый
   ========================================================= */

.common-banner2 {
    width: 520px !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    box-sizing: border-box !important;
    display: flex !important;
    padding: 2px 5px 0 7px !important;
    border-radius: 15px !important;
    max-height: 90px !important;

    background: linear-gradient(
        135deg,
        #F7BEEE 0%,
        #FEF6DF 100%
    ) !important;
}

.common-banner2 .banner-wrapper-content {
    display: flex !important;
    margin-left: 13px !important;
    margin-right: -12px;
    align-items: flex-start !important;
}

.common-banner2 .banner-content {
    width: 350px !important;
    padding-top: 2px;
    color: var(--color-black) !important;
}

.common-banner2 .banner-logo {
    width: 50px !important;
    height: 50px !important;
    margin-top: 1px !important;
}

.common-banner2 .banner-title {
    font-size: var(--size-title) !important;
    font-weight: bold !important;
    margin: 5px 0 3px !important;
}

.common-banner2 .banner-title a,
.common-banner2 .banner-text a {
    color: var(--color-black) !important;
}

.common-banner2 .banner-text {
    padding: 0 !important;
    font-size: var(--size-text) !important;
    line-height: 15.32px !important;
    font-weight: 400 !important;
    font-family: "Roboto", "Lato", Helvetica, Arial, sans-serif !important;
}

.common-banner2 .banner-link {
    color: #000 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: var(--color-white) !important;
    margin-left: 10px !important;
    margin-top: 10px !important;
    padding: 4px !important;
    width: 110px !important;
    text-align: center !important;
    border-radius: 6px !important;
    display: inline-block !important;
    box-shadow: 0 2px 10px 2px #b1a9f4 !important;
}

@media (max-width: 560px) {
    .common-banner2 {
        width: 95vw !important;
        height: 75px !important;
        min-height: 75px !important;
        max-height: 75px !important;
        box-sizing: border-box !important;
        padding: 18px 6px 5px !important;
        width: 95vw !important;
    }

    .common-banner2 .banner-content {
        width: 90vw !important;
        padding-top: 0;
    }

    .common-banner2 .banner-link {
        display: none !important;
    }

    .common-banner2 .banner-wrapper-content {
        margin-top: -11px !important;
        margin-left: 8px !important;
    }

    .common-banner2 .banner-close {
        position: absolute !important;
        right: 6px !important;
        top: 1px !important;
    }

    .common-banner2 .banner-title {
        max-width: 80vw !important;
        font-size: var(--size-title-mob) !important;
    }

    .common-banner2 .banner-text {
        max-width: 80vw !important;
        font-size: var(--size-text-mob) !important;
        line-height: 14px !important;
    }

    .common-banner2 .banner-logo {
        margin-top: -16px !important;
    }
}


/* =========================================================
   5. БАННЕР: common-banner-tg
   Назначение: Telegram
   ========================================================= */

.common-banner-tg {
    width: 520px !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    box-sizing: border-box !important;
    display: flex !important;
    padding: 2px 5px 0 7px !important;
    border-radius: 15px !important;
    max-height: 90px !important;

    background: linear-gradient(
        135deg,
        #59AFFD 0%,
        #EEA4ED 60%,
        #E7577C 100%
    ) !important;
}

.common-banner-tg .banner-wrapper-content {
    display: flex !important;
    margin-left: 13px !important;
    margin-right: -12px;
    align-items: flex-start !important;
}

.common-banner-tg .banner-content {
    width: 320px !important;
    padding-top: 2px;
    color: var(--color-black) !important;
}

.common-banner-tg .banner-logo {
    width: 50px !important;
    height: 50px !important;
    margin-top: 7px !important;
}

.common-banner-tg .banner-title {
    font-size: 28px !important;
    font-weight: bold !important;
    margin: 5px 0 3px !important;
}

.common-banner-tg .banner-title a,
.common-banner-tg .banner-text a {
    color: var(--color-black) !important;
}

.common-banner-tg .banner-text {
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 15.32px !important;
    font-weight: 400 !important;
    font-family: "Roboto", "Lato", Helvetica, Arial, sans-serif !important;
}

.common-banner-tg .banner-link {
    color: #000 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: var(--color-white) !important;
    margin-left: 10px !important;
    margin-top: 18px !important;
    padding: 7px 4px 4px !important;
    width: 130px !important;
    text-align: center !important;
    border-radius: 6px !important;
    display: inline-block !important;
    box-shadow: 0 2px 10px 2px #b1a9f4 !important;
}

@media (max-width: 560px) {
    .common-banner-tg {
        width: 95vw !important;
        height: 75px !important;
        min-height: 75px !important;
        max-height: 75px !important;
        box-sizing: border-box !important;
        padding: 18px 6px 5px !important;
        width: 95vw !important;
    }

    .common-banner-tg .banner-content {
        width: 90vw !important;
        padding-top: 0;
    }

    .common-banner-tg .banner-link {
        display: none !important;
    }

    .common-banner-tg .banner-wrapper-content {
        margin-top: -11px !important;
        margin-left: 8px !important;
    }

    .common-banner-tg .banner-close {
        position: absolute !important;
        right: 6px !important;
        top: 1px !important;
    }

    .common-banner-tg .banner-title {
        max-width: 80vw !important;
        font-size: var(--size-title-mob) !important;
    }

    .common-banner-tg .banner-text {
        max-width: 80vw !important;
        font-size: var(--size-text-mob) !important;
        line-height: 14px !important;
    }

    .common-banner-tg .banner-logo {
        margin-top: -16px !important;
    }
}


/* =========================================================
   6. БАННЕР: common-banner3
   Назначение: оранжевый градиент
   ========================================================= */

.common-banner3 {
    width: 520px !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    box-sizing: border-box !important;
    display: flex !important;
    padding: 2px 5px 0 7px !important;
    border-radius: 15px !important;
    max-height: 90px !important;

    background: linear-gradient(
        135deg,
        #e7b00f 0%,
        #f59305 100%
    ) !important;
}

.common-banner3 .banner-wrapper-content {
    display: flex !important;
    margin-left: 13px !important;
    margin-right: -12px;
    align-items: flex-start !important;
}

.common-banner3 .banner-content {
    width: 350px !important;
    padding-top: 2px;
    color: var(--color-white) !important;
}

.common-banner3 .banner-logo {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 2px !important;
}

.common-banner3 .banner-title {
    font-size: var(--size-title) !important;
    font-weight: bold !important;
    line-height: 14.18px !important;
    margin: 5px 0 3px !important;
}

.common-banner3 .banner-title a {
    color: var(--color-white) !important;
}

.common-banner3 .banner-text {
    padding: 0 !important;
    font-size: var(--size-text) !important;
    line-height: 20px !important;
    font-weight: 700 !important;
    margin-left: 5px !important;
    font-family: "Roboto", "Lato", Helvetica, Arial, sans-serif !important;
}

.common-banner3 .banner-link {
    color: #fff !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: #00C59D !important;
    margin-left: 10px !important;
    margin-top: 10px !important;
    padding: 4px !important;
    width: 110px !important;
    text-align: center !important;
    border-radius: 6px !important;
    display: inline-block !important;
    box-shadow: 0 2px 10px 2px #C71585 !important;
}

@media (max-width: 560px) {
    .common-banner3 {
        width: 95vw !important;
        height: 75px !important;
        min-height: 75px !important;
        max-height: 75px !important;
        box-sizing: border-box !important;
        padding: 18px 6px 5px !important;
        width: 95vw !important;
    }

    .common-banner3 .banner-content {
        width: 90vw !important;
        padding-top: 0;
    }

    .common-banner3 .banner-link {
        display: none !important;
    }

    .common-banner3 .banner-wrapper-content {
        margin-top: -11px !important;
        margin-left: 8px !important;
    }

    .common-banner3 .banner-close {
        position: absolute !important;
        right: 6px !important;
        top: 1px !important;
    }

    .common-banner3 .banner-title {
        max-width: 80vw !important;
        font-size: var(--size-title-mob) !important;
    }

    .common-banner3 .banner-text {
        max-width: 80vw !important;
        font-size: var(--size-text-mob) !important;
        line-height: 14px !important;
    }

    .common-banner3 .banner-logo {
        margin-top: -16px !important;
    }
}


/* =========================================================
   7. БАННЕР: common-banner4
   Назначение: New / оранжевый
   ========================================================= */

.common-banner4 {
    width: 520px !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    box-sizing: border-box !important;
    display: flex !important;
    padding: 7px 5px 5px 7px !important;
    border-radius: 15px !important;
    max-height: 100px !important;
    overflow-y: hidden;

    background: linear-gradient(
        90deg,
        #f69c29 0%,
        #ff7828 100%
    ) !important;
}

.common-banner4 .banner-wrapper-content {
    display: flex !important;
    margin-left: 13px !important;
    margin-right: -12px;
    align-items: center !important;
}

.common-banner4 .banner-content {
    display: flex;
    align-items: center;
}

.common-banner4 .banner-logo {
    width: 70px !important;
    height: 70px !important;
    margin-top: 7px !important;
}

.common-banner4 h3,
.common-banner4 p {
    margin: 0 !important;
}

.common-banner4 .banner-content a {
    font-weight: 700;
    font-size: 19px;
    color: var(--color-white) !important;
}

.common-banner4 .banner-content a mark {
    color: var(--color-white) !important;
    background: #5dcad7;
    border-radius: 0;
    font-weight: 700;
    font-size: 17px;
    padding: 3px 6px;
    text-transform: uppercase;
}

.common-banner4 .banner-text {
    padding: 0 0 0 5px !important;
    line-height: 110% !important;
    font-weight: 700 !important;
    margin-left: 5px !important;
    font-family: "Roboto", "Lato", Helvetica, Arial, sans-serif !important;
}

.common-banner4 .banner-text a {
    font-size: 14px !important;
    color: var(--color-white) !important;
}

.common-banner4 .banner-text span {
    font-weight: 700;
    font-size: 21px;
    line-height: 160%;
    color: #6be1ef;
}

.common-banner4 .banner-link {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-left: 10px !important;
    margin-top: 10px !important;
    padding: 6px !important;
    width: 120px !important;
    text-align: center !important;
    border-radius: 26px !important;
    display: inline-block !important;
    background: linear-gradient(180deg, #71e9f8 0%, #45aebb 100%);
}

@media (max-width: 620px) {
    .common-banner4 {
        width: 95vw !important;
        height: 75px !important;
        min-height: 75px !important;
        max-height: 75px !important;
        box-sizing: border-box !important;
        padding: 5px !important;
    }

    .common-banner4 .banner-content a {
        font-size: 13px !important;
    }

    .common-banner4 .banner-content a mark {
        font-size: 12px !important;
    }

    .common-banner4 .banner-link {
        font-size: 10px !important;
        width: 102px !important;
        margin-left: 6px !important;
    }

    .common-banner4 .banner-text,
    .common-banner4 .banner-text a {
        font-size: 11px !important;
    }

    .common-banner4 .banner-text a span {
        font-size: 15px !important;
    }

    .common-banner4 .banner-close {
        font-size: 25px !important;
        margin-left: 10px !important;
    }

    .common-banner4 .banner-wrapper-content {
        margin-left: 6px !important;
    }
}

@media (max-width: 400px) {
    .common-banner4 .banner-logo {
        width: 60px !important;
        height: 60px !important;
        margin-top: 5px !important;
    }

    .common-banner4 .banner-content {
        display: block;
    }

    .common-banner4 .banner-text {
        padding: 0 !important;
        margin: 0 !important;
    }

    .common-banner4 h3 {
        line-height: 0.9 !important;
    }

    .common-banner4 .banner-text br {
        display: none;
    }
}


/* =========================================================
   8. БАННЕР: common-banner5
   Назначение: Гурман
   ========================================================= */

.common-banner5 {
    width: 520px !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    box-sizing: border-box !important;
    display: flex !important;
    padding: 7px 5px 5px 7px !important;
    border-radius: 15px !important;
    max-height: 100px !important;

    background: linear-gradient(
        90deg,
        #93a841 0%,
        #a2b84b 100%
    ) !important;
}

.common-banner5 .banner-wrapper-content {
    display: flex !important;
    margin-left: 13px !important;
    margin-right: -12px;
    align-items: flex-start !important;
}

.common-banner5 .banner-content {
    width: 350px !important;
    padding-top: 5px;
}

.common-banner5 .banner-logo {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: -2px !important;
}

.common-banner5 .banner-title {
    font-size: var(--size-title) !important;
    font-weight: bold !important;
    line-height: 14.18px !important;
    margin: 8px 0 3px !important;
}

.common-banner5 .banner-title a {
    color: var(--color-white) !important;
    background: #ef6d18;
    padding: 3px 10px;
}

.common-banner5 .banner-text {
    padding: 0 !important;
    margin: 6px 0 2px !important;
    font-size: var(--size-text) !important;
    line-height: 20px !important;
    font-weight: 700 !important;
    margin-left: 5px !important;
    font-family: "Roboto", "Lato", Helvetica, Arial, sans-serif !important;
}

.common-banner5 .banner-text a {
    padding: 0 !important;
    color: var(--color-white) !important;
}

.common-banner5 .banner-link {
    color: #fff !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    background: linear-gradient(180deg, #ef7b18 0%, #d25b06 100%) !important;
    margin-left: 10px !important;
    margin-top: 10px !important;
    padding: 6px !important;
    width: 120px !important;
    text-align: center !important;
    border-radius: 26px !important;
    display: inline-block !important;
}

@media (max-width: 560px) {
    .common-banner5 {
        width: 95vw !important;
        height: 75px !important;
        min-height: 75px !important;
        max-height: 75px !important;
        box-sizing: border-box !important;
        padding: 18px 6px 5px !important;
        width: 95vw !important;
        align-items: center;
    }

    .common-banner5 .banner-content {
        width: 64% !important;
        padding-top: 0;
        align-items: center;
    }

    .common-banner5 .banner-link {
        font-size: 8px !important;
        width: 90px !important;
        margin-top: 15px !important;
    }

    .common-banner5 .banner-wrapper-content {
        margin-top: -11px !important;
        margin-left: 8px !important;
    }

    .common-banner5 .banner-close {
        position: absolute !important;
        right: 6px !important;
        top: 1px !important;
    }

    .common-banner5 .banner-title {
        max-width: 80vw !important;
        font-size: var(--size-title-mob) !important;
    }

    .common-banner5 .banner-text {
        max-width: 80vw !important;
        font-size: var(--size-text-mob) !important;
        line-height: 14px !important;
    }

    .common-banner5 .banner-logo {
        margin-top: -16px !important;
    }
}


/* =========================================================
   9. БАННЕР: common-banner6
   Назначение: дополнительный вариант
   ========================================================= */

.common-banner6 {
    width: 520px !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    box-sizing: border-box !important;
    display: flex !important;
    padding: 7px 5px 5px 7px !important;
    border-radius: 15px !important;
    max-height: 100px !important;

    background: #91596c !important;
}

.common-banner6 .banner-title a {
    background: #9cb148;
}

.common-banner6 .banner-link {
    color: #fff !important;
    background: linear-gradient(
        180deg,
        #afd41b 0%,
        #98b621 26.5%,
        #9cb148 100%
    ) !important;
}


/* =========================================================
   10. БАННЕР: common-bannerKM
   Назначение: Домашняя Кисломолочка
   ========================================================= */

.common-bannerKM {
    width: 520px !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    box-sizing: border-box !important;
    display: flex !important;
    padding: 2px 5px 0 7px !important;
    border-radius: 15px !important;
    max-height: 80px !important;
    overflow-y: hidden;
    position: relative;

    background: #c6ddfb !important;
}

.common-bannerKM .banner-wrapper-content {
    display: flex !important;
    margin-left: 13px !important;
    margin-right: -12px;
    align-items: center !important;
}

.common-bannerKM .banner-content {
    display: flex;
    align-items: center;
}

.common-bannerKM .banner-logo {
    width: 70px !important;
    height: 70px !important;
    margin-top: 5px !important;
}

.common-bannerKM h3,
.common-bannerKM p {
    margin: 0 !important;
}

.common-bannerKM .banner-content a {
    font-weight: 700;
    font-size: 25px;
    color: #dbdbdb !important;
}

.common-bannerKM .banner-content a mark {
    color: var(--color-white) !important;
    background: #a5b83b;
    border-radius: 0;
    font-weight: 700;
    font-size: 17px;
    padding: 3px 6px;
    text-transform: uppercase;
}

.common-bannerKM .banner-text {
    padding: 0 0 0 5px !important;
    line-height: 110% !important;
    font-weight: 700 !important;
    margin-left: 5px !important;
    font-family: "Roboto", "Lato", Helvetica, Arial, sans-serif !important;
}

.common-bannerKM .banner-text a {
    font-size: 14px !important;
    color: var(--color-white) !important;
}

.common-bannerKM .banner-text span {
    font-weight: 500;
    font-size: 21px;
    line-height: 160%;
    color: #a5b83b;
}

.common-bannerKM .banner-link {
    color: #fff !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-left: 10px !important;
    margin-top: 10px !important;
    padding: 6px !important;
    width: 120px !important;
    text-align: center !important;
    border-radius: 26px !important;
    display: inline-block !important;
    background: #a5b83b;
}

@media (max-width: 620px) {
    .common-bannerKM {
        width: 95vw !important;
        height: 75px !important;
        min-height: 75px !important;
        max-height: 75px !important;
        box-sizing: border-box !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 5px 10px !important;
        height: 75px !important;
        max-height: 80px !important;
        overflow: hidden !important;
    }

    .common-bannerKM .banner-logo {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

    .common-bannerKM .banner-wrapper-content {
        flex-direction: row !important;
        align-items: center !important;
        margin-left: 8px !important;
        margin-right: 0 !important;
        padding: 0 !important;
        flex-grow: 1 !important;
    }

    .common-bannerKM .banner-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        flex-grow: 1 !important;
    }

    .common-bannerKM .banner-content a mark {
        font-size: 14px !important;
        font-weight: 900 !important;
        padding: 2px 6px !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
        display: inline-block !important;
    }

    .common-bannerKM .banner-text,
    .common-bannerKM .banner-text a {
        font-size: 11px !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        margin-left: 0 !important;
        padding: 0 !important;
        color: #333 !important;
        opacity: 0.8 !important;
    }

    .common-bannerKM br {
        display: none !important;
    }

    .common-bannerKM .banner-link {
        font-size: 10px !important;
        width: 85px !important;
        min-width: 85px !important;
        padding: 8px 4px !important;
        margin: 0 12px 0 5px !important;
        border-radius: 20px !important;
        flex-shrink: 0 !important;
    }

    .common-bannerKM .banner-close {
        font-size: 24px !important;
        margin-left: auto !important;
        position: relative !important;
        top: -2px !important;
    }
}

@media (max-width: 380px) {
    .common-bannerKM .banner-content a mark {
        font-size: 12px !important;
    }

    .common-bannerKM .banner-text,
    .common-bannerKM .banner-text a {
        font-size: 10px !important;
    }

    .common-bannerKM .banner-logo {
        width: 55px !important;
        height: 55px !important;
        min-width: 55px !important;
    }
}


/* =========================================================
   11. БАННЕР: common-bannerHR
   Назначение: Халлуми и Рикотта
   ========================================================= */

.common-bannerHR {
    width: 520px !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    box-sizing: border-box !important;
    display: flex !important;
    padding: 2px 5px 0 7px !important;
    border-radius: 15px !important;
    max-height: 80px !important;
    overflow-y: hidden;
    position: relative;

    background: #fbe4c6 !important;
}

.common-bannerHR .banner-wrapper-content {
    display: flex !important;
    margin-left: 13px !important;
    margin-right: -12px;
    align-items: center !important;
}

.common-bannerHR .banner-content {
    display: flex;
    align-items: center;
}

.common-bannerHR .banner-logo {
    width: 70px !important;
    height: 70px !important;
    margin-top: 5px !important;
}

.common-bannerHR h3,
.common-bannerHR p {
    margin: 0 !important;
}

.common-bannerHR .banner-content a {
    font-weight: 700;
    font-size: 25px;
    color: #dbdbdb !important;
}

.common-bannerHR .banner-content a mark {
    color: var(--color-white) !important;
    background: #ff9a86;
    border-radius: 0;
    font-weight: 700;
    font-size: 17px;
    padding: 3px 6px;
    text-transform: uppercase;
}

.common-bannerHR .banner-text {
    padding: 0 0 0 5px !important;
    line-height: 110% !important;
    font-weight: 700 !important;
    margin-left: 5px !important;
    font-family: "Roboto", "Lato", Helvetica, Arial, sans-serif !important;
}

.common-bannerHR .banner-text a {
    font-size: 14px !important;
    color: var(--color-white) !important;
}

.common-bannerHR .banner-text span {
    font-weight: 500;
    font-size: 21px;
    line-height: 160%;
    color: #4e3bb8;
}

.common-bannerHR .banner-link {
    color: #fff !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-left: 10px !important;
    margin-top: 10px !important;
    padding: 6px !important;
    width: 120px !important;
    text-align: center !important;
    border-radius: 26px !important;
    display: inline-block !important;
    background: #ff9a86;
}

@media (max-width: 620px) {
    .common-bannerHR {
        width: 95vw !important;
        height: 75px !important;
        min-height: 75px !important;
        max-height: 75px !important;
        box-sizing: border-box !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 5px 10px !important;
        height: 75px !important;
        max-height: 80px !important;
        overflow: hidden !important;
    }

    .common-bannerHR .banner-logo {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

    .common-bannerHR .banner-wrapper-content {
        flex-direction: row !important;
        align-items: center !important;
        margin-left: 8px !important;
        margin-right: 0 !important;
        padding: 0 !important;
        flex-grow: 1 !important;
    }

    .common-bannerHR .banner-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        flex-grow: 1 !important;
    }

    .common-bannerHR .banner-content a mark {
        font-size: 14px !important;
        font-weight: 900 !important;
        padding: 2px 6px !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
        display: inline-block !important;
    }

    .common-bannerHR .banner-text,
    .common-bannerHR .banner-text a {
        font-size: 11px !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        margin-left: 0 !important;
        padding: 0 !important;
        color: #333 !important;
        opacity: 0.8 !important;
    }

    .common-bannerHR br {
        display: none !important;
    }

    .common-bannerHR .banner-link {
        font-size: 10px !important;
        width: 85px !important;
        min-width: 85px !important;
        padding: 8px 4px !important;
        margin: 0 12px 0 5px !important;
        border-radius: 20px !important;
        flex-shrink: 0 !important;
    }

    .common-bannerHR .banner-close {
        font-size: 24px !important;
        margin-left: auto !important;
        position: relative !important;
        top: -2px !important;
    }
}

@media (max-width: 380px) {
    .common-bannerHR .banner-content a mark {
        font-size: 12px !important;
    }

    .common-bannerHR .banner-text,
    .common-bannerHR .banner-text a {
        font-size: 10px !important;
    }

    .common-bannerHR .banner-logo {
        width: 55px !important;
        height: 55px !important;
        min-width: 55px !important;
    }
}


/* =========================================================
   12. БАННЕР: common-bannerUPSALE26
   Назначение: АПСЕЙЛ / апрель 2026
   ========================================================= */

.common-bannerUPSALE26 {
    width: 520px !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    box-sizing: border-box !important;
    display: flex !important;
    padding: 2px 5px 0 7px !important;
    border-radius: 15px !important;
    max-height: 80px !important;
    overflow-y: hidden;
    position: relative;

    background: #fbe4c6 !important;
}

.common-bannerUPSALE26 .banner-wrapper-content {
    display: flex !important;
    margin-left: 13px !important;
    margin-right: -12px;
    align-items: center !important;
}

.common-bannerUPSALE26 .banner-content {
    display: flex;
    align-items: center;
}

.common-bannerUPSALE26 .banner-logo {
    width: 70px !important;
    height: 70px !important;
    margin-top: 5px !important;
}

.common-bannerUPSALE26 h3,
.common-bannerUPSALE26 p {
    margin: 0 !important;
}

.common-bannerUPSALE26 .banner-content a {
    font-weight: 700;
    font-size: 25px;
    color: #dbdbdb !important;
}

.common-bannerUPSALE26 .banner-content a mark {
    color: var(--color-white) !important;
    background: #db5f36;
    border-radius: 0;
    font-weight: 700;
    font-size: 17px;
    padding: 3px 6px;
    text-transform: uppercase;
}

.common-bannerUPSALE26 .banner-text {
    padding: 0 0 0 5px !important;
    line-height: 110% !important;
    font-weight: 700 !important;
    margin-left: 5px !important;
    font-family: "Roboto", "Lato", Helvetica, Arial, sans-serif !important;
}

.common-bannerUPSALE26 .banner-text a {
    font-size: 14px !important;
    color: var(--color-white) !important;
}

.common-bannerUPSALE26 .banner-text span {
    font-weight: 500;
    font-size: 21px;
    line-height: 160%;
    color: #4e3bb8;
}

.common-bannerUPSALE26 .banner-link {
    color: #fff !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-left: 10px !important;
    margin-top: 10px !important;
    padding: 6px !important;
    width: 120px !important;
    text-align: center !important;
    border-radius: 26px !important;
    display: inline-block !important;
    background: #d85e35;
}

@media (max-width: 620px) {
    .common-bannerUPSALE26 {
        width: 95vw !important;
        height: 75px !important;
        min-height: 75px !important;
        max-height: 75px !important;
        box-sizing: border-box !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 5px 10px !important;
        height: 75px !important;
        max-height: 80px !important;
        overflow: hidden !important;
    }

    .common-bannerUPSALE26 .banner-logo {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

    .common-bannerUPSALE26 .banner-wrapper-content {
        flex-direction: row !important;
        align-items: center !important;
        margin-left: 8px !important;
        margin-right: 0 !important;
        padding: 0 !important;
        flex-grow: 1 !important;
    }

    .common-bannerUPSALE26 .banner-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        flex-grow: 1 !important;
    }

    .common-bannerUPSALE26 .banner-content a mark {
        font-size: 14px !important;
        font-weight: 900 !important;
        padding: 2px 6px !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
        display: inline-block !important;
    }

    .common-bannerUPSALE26 .banner-text,
    .common-bannerUPSALE26 .banner-text a {
        font-size: 11px !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        margin-left: 0 !important;
        padding: 0 !important;
        color: #333 !important;
        opacity: 0.8 !important;
    }

    .common-bannerUPSALE26 br {
        display: none !important;
    }

    .common-bannerUPSALE26 .banner-link {
        font-size: 10px !important;
        width: 85px !important;
        min-width: 85px !important;
        padding: 8px 4px !important;
        margin: 0 12px 0 5px !important;
        border-radius: 20px !important;
        flex-shrink: 0 !important;
    }

    .common-bannerUPSALE26 .banner-close {
        font-size: 24px !important;
        margin-left: auto !important;
        position: relative !important;
        top: -2px !important;
    }
}

@media (max-width: 380px) {
    .common-bannerUPSALE26 .banner-content a mark {
        font-size: 12px !important;
    }

    .common-bannerUPSALE26 .banner-text,
    .common-bannerUPSALE26 .banner-text a {
        font-size: 10px !important;
    }

    .common-bannerUPSALE26 .banner-logo {
        width: 55px !important;
        height: 55px !important;
        min-width: 55px !important;
    }
}


/* =========================================================
   13. ЕДИНЫЙ РАЗМЕР — СПЕЦИАЛЬНОЕ ПРАВИЛО
   Все баннеры: 520 × 80 px на desktop.
   На мобильном: 95vw × 75 px.
   Индивидуальные цвета, шрифты и оформление НЕ меняются.
   ========================================================= */

/* common-banner6 — единый размер на мобильном */
@media (max-width: 768px) {
    .common-banner6 {
        width: 95vw !important;
        height: 75px !important;
        min-height: 75px !important;
        max-height: 75px !important;
        box-sizing: border-box !important;
    }
}

/* =========================================================
   14. ОБЩИЙ МОБИЛЬНЫЙ OFFSET
   ========================================================= */

@media (max-width: 768px) {
    .common-banner-wrapper {
        left: 5px !important;
        bottom: 54px !important;
        margin: 2px;
    }
}


/* =========================================================
   15. ШАБЛОН ДЛЯ НОВОГО БАННЕРА
   Скопировать этот блок и заменить NEW.
   ========================================================= */

/*
.common-bannerNEW {
    display: flex !important;
    padding: 2px 5px 0 7px !important;
    border-radius: 15px !important;
    max-height: 90px !important;
    background: #YOUR_COLOR !important;
}

.common-bannerNEW .banner-wrapper-content {
    display: flex !important;
    margin-left: 13px !important;
    margin-right: -12px;
    align-items: flex-start !important;
}

.common-bannerNEW .banner-content {
    width: 350px !important;
    padding-top: 2px;
    color: var(--color-white) !important;
}

.common-bannerNEW .banner-logo {
    width: 50px !important;
    height: 50px !important;
    margin-top: 1px !important;
}

.common-bannerNEW .banner-title {
    font-size: var(--size-title) !important;
    font-weight: bold !important;
    margin: 5px 0 3px !important;
}

.common-bannerNEW .banner-title a {
    color: var(--color-white) !important;
}

.common-bannerNEW .banner-text {
    padding: 0 !important;
    font-size: var(--size-text) !important;
    line-height: 15.32px !important;
    font-weight: 400 !important;
    font-family: "Roboto", "Lato", Helvetica, Arial, sans-serif !important;
}

.common-bannerNEW .banner-text a {
    color: var(--color-white) !important;
}

.common-bannerNEW .banner-link {
    color: #000 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: var(--color-white) !important;
    margin-left: 10px !important;
    margin-top: 10px !important;
    padding: 4px !important;
    width: 110px !important;
    text-align: center !important;
    border-radius: 6px !important;
    display: inline-block !important;
}

@media (max-width: 560px) {
    .common-bannerNEW {
        padding: 18px 6px 5px !important;
        width: 95vw !important;
    }

    .common-bannerNEW .banner-content {
        width: 90vw !important;
        padding-top: 0;
    }

    .common-bannerNEW .banner-link {
        display: none !important;
    }

    .common-bannerNEW .banner-wrapper-content {
        margin-top: -11px !important;
        margin-left: 8px !important;
    }

    .common-bannerNEW .banner-close {
        position: absolute !important;
        right: 6px !important;
        top: 1px !important;
    }

    .common-bannerNEW .banner-title {
        max-width: 80vw !important;
        font-size: var(--size-title-mob) !important;
    }

    .common-bannerNEW .banner-text {
        max-width: 80vw !important;
        font-size: var(--size-text-mob) !important;
        line-height: 14px !important;
    }

    .common-bannerNEW .banner-logo {
        margin-top: -16px !important;
    }
}
*/


/* =========================================================
   15. ФИНАЛЬНАЯ ЕДИНАЯ СЕТКА ВСЕХ БАННЕРОВ
   ---------------------------------------------------------
   Здесь задаётся только общая геометрия.
   Поэтому все баннеры выглядят одинаково независимо
   от своего цвета и содержания.
   ========================================================= */

:root {
    --banner-width: 580px;
    --banner-height: 80px;
    --banner-radius: 15px;
    --banner-padding-x: 10px;
    --banner-gap: 12px;
    --banner-image-size: 56px;
    --banner-button-width: 110px;
    --banner-button-height: 34px;
    --banner-close-size: 27px;
}

/* Одинаковая геометрия каждого баннера */
.common-banner,
.common-banner1,
.common-banner2,
.common-banner3,
.common-banner4,
.common-banner5,
.common-banner6,
.common-banner-tg,
.common-bannerKM,
.common-bannerHR,
.common-bannerUPSALE26 {
    position: relative !important;
    width: var(--banner-width) !important;
    height: var(--banner-height) !important;
    min-width: var(--banner-width) !important;
    min-height: var(--banner-height) !important;
    max-width: var(--banner-width) !important;
    max-height: var(--banner-height) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;

    padding: 8px 42px 8px var(--banner-padding-x) !important;
    border-radius: var(--banner-radius) !important;
}

/* Одинаковая внутренняя сетка:
   КАРТИНКА | ТЕКСТ | КНОПКА */
.common-banner .banner-wrapper-content,
.common-banner1 .banner-wrapper-content,
.common-banner2 .banner-wrapper-content,
.common-banner3 .banner-wrapper-content,
.common-banner4 .banner-wrapper-content,
.common-banner5 .banner-wrapper-content,
.common-banner6 .banner-wrapper-content,
.common-banner-tg .banner-wrapper-content,
.common-bannerKM .banner-wrapper-content,
.common-bannerHR .banner-wrapper-content,
.common-bannerUPSALE26 .banner-wrapper-content {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--banner-gap) !important;
}

/* Картинка — всегда одного размера */
.common-banner .banner-logo,
.common-banner1 .banner-logo,
.common-banner2 .banner-logo,
.common-banner3 .banner-logo,
.common-banner4 .banner-logo,
.common-banner5 .banner-logo,
.common-banner6 .banner-logo,
.common-banner-tg .banner-logo,
.common-bannerKM .banner-logo,
.common-bannerHR .banner-logo,
.common-bannerUPSALE26 .banner-logo {
    width: var(--banner-image-size) !important;
    height: var(--banner-image-size) !important;
    min-width: var(--banner-image-size) !important;
    max-width: var(--banner-image-size) !important;
    min-height: var(--banner-image-size) !important;
    max-height: var(--banner-image-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    flex: 0 0 var(--banner-image-size) !important;
}

/* Текстовая зона занимает всё свободное место.
   ВАЖНО: min-width:0 не даёт длинному тексту выталкивать кнопку. */
.common-banner .banner-content,
.common-banner1 .banner-content,
.common-banner2 .banner-content,
.common-banner3 .banner-content,
.common-banner4 .banner-content,
.common-banner5 .banner-content,
.common-banner6 .banner-content,
.common-banner-tg .banner-content,
.common-bannerKM .banner-content,
.common-bannerHR .banner-content,
.common-bannerUPSALE26 .banner-content {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Заголовок — одинаковая точка начала */
.common-banner .banner-title,
.common-banner1 .banner-title,
.common-banner2 .banner-title,
.common-banner3 .banner-title,
.common-banner5 .banner-title {
    margin: 0 0 3px 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Текст — не выталкивает кнопку */
.common-banner .banner-text,
.common-banner1 .banner-text,
.common-banner2 .banner-text,
.common-banner3 .banner-text,
.common-banner4 .banner-text,
.common-banner5 .banner-text,
.common-banner6 .banner-text,
.common-banner-tg .banner-text,
.common-bannerKM .banner-text,
.common-bannerHR .banner-text,
.common-bannerUPSALE26 .banner-text {
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Кнопка всегда в одной позиции и одного размера */
.common-banner .banner-link,
.common-banner1 .banner-link,
.common-banner2 .banner-link,
.common-banner3 .banner-link,
.common-banner4 .banner-link,
.common-banner5 .banner-link,
.common-banner6 .banner-link,
.common-banner-tg .banner-link,
.common-bannerKM .banner-link,
.common-bannerHR .banner-link,
.common-bannerUPSALE26 .banner-link {
    width: var(--banner-button-width) !important;
    min-width: var(--banner-button-width) !important;
    max-width: var(--banner-button-width) !important;
    height: var(--banner-button-height) !important;
    min-height: var(--banner-button-height) !important;
    max-height: var(--banner-button-height) !important;
    box-sizing: border-box !important;

    flex: 0 0 var(--banner-button-width) !important;
    margin: 0 !important;
    padding: 0 8px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    border-radius: 8px !important;
    line-height: 1 !important;
}

/* Крестик всегда в правом верхнем углу.
   Он больше не участвует в расчёте ширины текста и кнопки. */
.common-banner .banner-close,
.common-banner1 .banner-close,
.common-banner2 .banner-close,
.common-banner3 .banner-close,
.common-banner4 .banner-close,
.common-banner5 .banner-close,
.common-banner6 .banner-close,
.common-banner-tg .banner-close,
.common-bannerKM .banner-close,
.common-bannerHR .banner-close,
.common-bannerUPSALE26 .banner-close {
    position: absolute !important;
    top: 5px !important;
    right: 8px !important;
    z-index: 10 !important;

    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: var(--banner-close-size) !important;
    line-height: 24px !important;
}

/* Специально для широких старых баннеров 4 / KM / HR / UPSALE26:
   содержимое переводим в ту же схему, что и у остальных. */
.common-banner4 .banner-content,
.common-bannerKM .banner-content,
.common-bannerHR .banner-content,
.common-bannerUPSALE26 .banner-content {
    display: block !important;
    align-items: unset !important;
}

.common-banner4 .banner-content > *,
.common-bannerKM .banner-content > *,
.common-bannerHR .banner-content > *,
.common-bannerUPSALE26 .banner-content > * {
    max-width: 100% !important;
}

/* =========================================================
   16. МОБИЛЬНАЯ ЕДИНАЯ СЕТКА
   ========================================================= */

@media (max-width: 768px) {
    .common-banner,
    .common-banner1,
    .common-banner2,
    .common-banner3,
    .common-banner4,
    .common-banner5,
    .common-banner6,
    .common-banner-tg,
    .common-bannerKM,
    .common-bannerHR,
    .common-bannerUPSALE26 {
        width: 95vw !important;
        min-width: 0 !important;
        max-width: 95vw !important;
        height: 75px !important;
        min-height: 75px !important;
        max-height: 75px !important;
        padding: 7px 38px 7px 8px !important;
        border-radius: 14px !important;
    }

    .common-banner .banner-wrapper-content,
    .common-banner1 .banner-wrapper-content,
    .common-banner2 .banner-wrapper-content,
    .common-banner3 .banner-wrapper-content,
    .common-banner4 .banner-wrapper-content,
    .common-banner5 .banner-wrapper-content,
    .common-banner6 .banner-wrapper-content,
    .common-banner-tg .banner-wrapper-content,
    .common-bannerKM .banner-wrapper-content,
    .common-bannerHR .banner-wrapper-content,
    .common-bannerUPSALE26 .banner-wrapper-content {
        gap: 9px !important;
    }

    .common-banner .banner-logo,
    .common-banner1 .banner-logo,
    .common-banner2 .banner-logo,
    .common-banner3 .banner-logo,
    .common-banner4 .banner-logo,
    .common-banner5 .banner-logo,
    .common-banner6 .banner-logo,
    .common-banner-tg .banner-logo,
    .common-bannerKM .banner-logo,
    .common-bannerHR .banner-logo,
    .common-bannerUPSALE26 .banner-logo {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        flex-basis: 54px !important;
    }

    .common-banner .banner-title,
    .common-banner1 .banner-title,
    .common-banner2 .banner-title,
    .common-banner3 .banner-title,
    .common-banner5 .banner-title {
        font-size: 15px !important;
        line-height: 1.1 !important;
        margin-bottom: 3px !important;
    }

    .common-banner .banner-text,
    .common-banner1 .banner-text,
    .common-banner2 .banner-text,
    .common-banner3 .banner-text,
    .common-banner4 .banner-text,
    .common-banner5 .banner-text,
    .common-banner6 .banner-text,
    .common-banner-tg .banner-text,
    .common-bannerKM .banner-text,
    .common-bannerHR .banner-text,
    .common-bannerUPSALE26 .banner-text {
        font-size: 11px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .common-banner .banner-link,
    .common-banner1 .banner-link,
    .common-banner2 .banner-link,
    .common-banner3 .banner-link,
    .common-banner4 .banner-link,
    .common-banner5 .banner-link,
    .common-banner6 .banner-link,
    .common-banner-tg .banner-link,
    .common-bannerKM .banner-link,
    .common-bannerHR .banner-link,
    .common-bannerUPSALE26 .banner-link {
        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        flex-basis: 92px !important;
        font-size: 10px !important;
        border-radius: 8px !important;
    }

    .common-banner .banner-close,
    .common-banner1 .banner-close,
    .common-banner2 .banner-close,
    .common-banner3 .banner-close,
    .common-banner4 .banner-close,
    .common-banner5 .banner-close,
    .common-banner6 .banner-close,
    .common-banner-tg .banner-close,
    .common-bannerKM .banner-close,
    .common-bannerHR .banner-close,
    .common-bannerUPSALE26 .banner-close {
        top: 4px !important;
        right: 5px !important;
        width: 22px !important;
        height: 22px !important;
        font-size: 23px !important;
    }
}

/* На очень узких экранах уменьшаем только кнопку,
   но сохраняем общую сетку. */
@media (max-width: 380px) {
    .common-banner,
    .common-banner1,
    .common-banner2,
    .common-banner3,
    .common-banner4,
    .common-banner5,
    .common-banner6,
    .common-banner-tg,
    .common-bannerKM,
    .common-bannerHR,
    .common-bannerUPSALE26 {
        padding-right: 34px !important;
    }

    .common-banner .banner-link,
    .common-banner1 .banner-link,
    .common-banner2 .banner-link,
    .common-banner3 .banner-link,
    .common-banner4 .banner-link,
    .common-banner5 .banner-link,
    .common-banner6 .banner-link,
    .common-banner-tg .banner-link,
    .common-bannerKM .banner-link,
    .common-bannerHR .banner-link,
    .common-bannerUPSALE26 .banner-link {
        width: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
        flex-basis: 82px !important;
    }
}


/* =========================================================
   17. ШАБЛОН НОВОГО БАННЕРА
   ---------------------------------------------------------
   Новый баннер автоматически получает общую сетку,
   если использовать класс .common-bannerNEW.
   ========================================================= */

/*
.common-bannerNEW {
    width: var(--banner-width) !important;
    height: var(--banner-height) !important;
    min-height: var(--banner-height) !important;
    max-height: var(--banner-height) !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    padding: 8px 42px 8px var(--banner-padding-x) !important;
    border-radius: var(--banner-radius) !important;

    background: #YOUR_COLOR !important;
}

.common-bannerNEW .banner-wrapper-content {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--banner-gap) !important;
}

.common-bannerNEW .banner-logo {
    width: var(--banner-image-size) !important;
    height: var(--banner-image-size) !important;
    min-width: var(--banner-image-size) !important;
    min-height: var(--banner-image-size) !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    flex: 0 0 var(--banner-image-size) !important;
}

.common-bannerNEW .banner-content {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

.common-bannerNEW .banner-title {
    margin: 0 0 3px 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.common-bannerNEW .banner-text {
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.common-bannerNEW .banner-link {
    width: var(--banner-button-width) !important;
    min-width: var(--banner-button-width) !important;
    height: var(--banner-button-height) !important;
    flex: 0 0 var(--banner-button-width) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
}

.common-bannerNEW .banner-close {
    position: absolute !important;
    top: 5px !important;
    right: 8px !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .common-bannerNEW {
        width: 95vw !important;
        height: 75px !important;
        min-height: 75px !important;
        max-height: 75px !important;
        padding: 7px 38px 7px 8px !important;
    }

    .common-bannerNEW .banner-logo {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        flex-basis: 54px !important;
    }

    .common-bannerNEW .banner-link {
        width: 92px !important;
        min-width: 92px !important;
        height: 32px !important;
        flex-basis: 92px !important;
        font-size: 10px !important;
    }
}
*/

/* =========================================================
   ФИНАЛЬНАЯ ЕДИНАЯ СЕТКА БАННЕРОВ
   Этот блок должен находиться ПОСЛЕ всех предыдущих стилей.
   Менять размеры можно только здесь.
   ========================================================= */

:root {
    --banner-width: 580px;
    --banner-height: 80px;
    --banner-image-size: 56px;
    --banner-title-size: 18px;
    --banner-title-line: 21px;
    --banner-text-size: 13px;
    --banner-text-line: 16px;
    --banner-button-width: 120px;
    --banner-button-height: 32px;
    --banner-side-padding: 10px;
    --banner-gap: 10px;
}

/* Общая геометрия всех баннеров */
.common-banner,
.common-banner1,
.common-banner2,
.common-banner3,
.common-banner4,
.common-banner5,
.common-banner6,
.common-banner-tg,
.common-bannerKM,
.common-bannerHR,
.common-bannerUPSALE26 {
    width: var(--banner-width) !important;
    height: var(--banner-height) !important;
    min-width: var(--banner-width) !important;
    max-width: var(--banner-width) !important;
    min-height: var(--banner-height) !important;
    max-height: var(--banner-height) !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 var(--banner-side-padding) !important;
    border-radius: 15px !important;
}

/* Единая внутренняя сетка */
/* Сдвиг текста вправо от логотипа для всех баннеров */
.common-banner .banner-logo,
.common-banner1 .banner-logo,
.common-banner2 .banner-logo,
.common-banner3 .banner-logo,
.common-banner4 .banner-logo,
.common-banner5 .banner-logo,
.common-banner6 .banner-logo,
.common-banner-tg .banner-logo,
.common-bannerKM .banner-logo,
.common-bannerHR .banner-logo,
.common-bannerUPSALE26 .banner-logo {
    margin-right: 10px !important; 
}