/* =========================== Глобальные цвета =========================== */
:root {
    --color-gold-light: #FFF5BC;      /* используется: текст кнопки, текст бонусов */
    --color-green-dark: #466300;      /* используется: обводка текста, старая цена */
    --color-strike-red: #FF3700;      /* зачеркивание */
    --color-sand-1: #F0A35E;          /* цвет текста */
    --color-sand-border: #E0AF7D;     /* рамка и тень */
    --color-sand-bg: #F8D49D;         /* фон бонусной карточки */
    --color-brown-stroke: #923B09;    /* обводка текста бонусов */
    --color-brown-text: #AA3800;      /* обводка текста */
    --color-brown-text2: #A3512A;     /* обводка текста */
    --color-brown-text3: #C07A54;     /* обводка текста */
    --color-yellow-1: #FFEB18;        /* цвет текста */
    --color-purple-1: #600595;        /* обводка текста */

    --cards-shadow: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.8)); /* Тень карточек */
}

/* ============= Обертка для символа рубля (красная и зеленая) ============= */
.rubSymbolRed, .rubSymbolGreen {
    -webkit-text-stroke: 1.1px var(--color-brown-text);
}

.rubSymbolGreen {
    -webkit-text-stroke: 1.1px var(--color-green-dark);
}

/* ===================== Зеленая кнопка с старой ценой ===================== */
.greenButton {
    background-image: url("./img/longGreen_buttonWhiteBorder.c3374546b783.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    width: 100%;
    height: 100%;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    cursor: pointer;

    .greenButtonText {
        margin-top: -2px;
        position: relative;

        color: var(--color-gold-light);
        font-size: 26px;
        letter-spacing: -1px;
        line-height: 25.2px;

        -webkit-text-stroke: 1.19px var(--color-green-dark);
        font-family: 'Domovyata', 'Verdana', sans-serif;
        font-weight: 900;
    }

    .greenButtonOldPrice {
        width: 65px;
        color: var(--color-green-dark);
        font-size: 16px;
        line-height: 100%;
        font-weight: 900;
        position: relative;
        text-decoration: none;
        text-align: center;
        white-space: nowrap
    }

    .greenButtonOldPrice::before {
        content: '';
        width: 65px;
        position: absolute;
        height: 2px;
        background-color: var(--color-strike-red);
        top: 35%;
        left: 0;
        transform: rotate(-9deg);
        border-radius: 30px;
        z-index: 5;
    }
}

/* ===================== тестовая кнопка из кусков ===================== */
.greenButtonTest {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    border-radius: 20px;

    background-image: url("./img/green_button_center.ffb97f9869e1.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 90% 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .greenButtonText {
        margin-top: -2px;
        position: relative;
        z-index: 2;

        color: var(--color-gold-light);
        font-size: 26px;
        letter-spacing: -1px;
        line-height: 25.2px;

        -webkit-text-stroke: 1.19px var(--color-green-dark);
        font-family: 'Domovyata', 'Verdana', sans-serif;
        font-weight: 900;
    }

    &::before {
        content: '';
        height: 100%;
        width: 32px;
        background: url("./img/green_button_left.43d93098b5d9.png") no-repeat center center;
        background-size: 100% 100%;

        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }

    &::after {
        content: '';
        height: 100%;
        width: 32px;
        background: url("./img/green_button_right.66cdaa2b380c.png") no-repeat center center;
        background-size: 100% 100%;

        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
    }
}
/* =========================== Кнопка закрытия =========================== */
.closeButton {
    width: 39px;
    height: 39px;
    cursor: pointer;
    border: 0;
    margin: 0;
    padding: 0;
    display: block;
    outline: none;
    -webkit-tap-highlight-color: transparent;

    background: transparent url("img/btn_close.865f4ddac015.png") no-repeat center center ;
    background-size: cover;

    position: absolute;
    top: 7px;
    right: 8px;

    img {
        width: 100%;
    }

    .closeButton:active {
        background-color: transparent;
    }
    .closeButton:focus  {
        background-color: transparent;
    }
}

/* ========================= Заголовок секции ========================= */

.oldPrice {
    font-size: 17px;
    color: var(--color-sand-1);
    margin-bottom: 5px;
    position: relative;

    &::before {
        content: '';
        width: 73px;
        height: 8px;
        position: absolute;
        background: url("./img/oldPriceLine.3568c882c793.png") no-repeat center center;
        background-size: 100% 100%;
        top: 5px;
        left: -10px;
        z-index: 5;
    }
}

/* ========================= Заголовок секции ========================= */
.sectionTitle {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;

    .sectionTitleText {
        padding: 0 50px;
        font-size: 64px;

        color: #FFF2A9;

        -webkit-text-stroke: 1.5px var(--color-brown-stroke);
    }
    @media (max-width: 821px) {
        .sectionTitleText {
            padding: 0 20px;
            font-size: 32px;
            line-height: 33.6px;

            -webkit-text-stroke: 1.5px var(--color-brown-stroke);
        }
    }

    .decoWrapper {
        max-width: 260px;
        margin: 0 auto;

        .deco {
            max-width: 100%;
            height: auto;
            display: block;
        }
        @media (max-width: 821px) {
            .deco {
                width: 100%;
                max-width: 145px;
            }
        }
    }
}

/*================== красный лэйбл скидка/выгоднее/лучшая цена =======================*/
.kitCardLabel {
    position: absolute;
    left: -1px;
    top: -3px;
    z-index:10;
}

.salesLabel {
    width: 77px;
    height: 75px;
    position: absolute;
    top: -12px;
    left: -12px;
    z-index: 1;

    background: url("./img/salesLabel.6d43a973cc8b.png") no-repeat;
    background-size: 100%;

    .whiteText, .whiteTextProfit, .whiteTextProfitLarge {
        font-weight: 900;
        font-size: 19px;
        letter-spacing: -1px;
        transform: rotate(-30deg);

        background: linear-gradient(180deg, #FFF5BC 0%, #FFF5BC 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        paint-order: stroke fill;
        -webkit-text-stroke: 0.7px #D30010;
        filter: drop-shadow(0 3px 0 #D30010);

        position: absolute;
        top: 14px;
        left: 1px;
    }
    .whiteTextProfit, .whiteTextProfitLarge {
        text-transform: uppercase;
        font-size: 12px;
        transform: rotate(-16deg);

        top: 38px;
        left: 8px;
        -webkit-text-stroke: 0.4px #D30010;
    }
    .yellowText, .yellowTextProfit {
        font-weight: 900;
        font-size: 27px;
        transform: rotate(-30deg);
        letter-spacing: -1px;

        background: linear-gradient(180deg, #FFEB18 0%, #FFEB18 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        paint-order: stroke fill;
        -webkit-text-stroke: 1px #D30010;
        filter: drop-shadow(0 3px 0 #D30010);

        position: absolute;
        top: 28px;
        left: 15px;
    }

    .yellowTextProfit {
        font-size: 20px;
        transform: rotate(-14deg);
        -webkit-text-stroke: 0.5px #D30010;

        top: 15px;
        left: 3px;
    }
    .whiteTextProfitLarge {
        font-size: 14px;
        top: 38px;
        left: 9px;
    }
}

.salesLabelMini {
    width: 54px;
    height: 35px;
    padding-top: 6px;
    text-align: center;
    background: url("./img/salesLabelMini.b1a6bac54f55.png") no-repeat;
    background-size: 100%;
    position: absolute;
    z-index: 5;

    .yellowText {
        font-weight: 900;
        font-size: 13px;

        color: var(--color-yellow-1);
        -webkit-text-stroke: 0.7px var(--color-brown-stroke);
    }
}

/* ================================ Таймер ================================ */
.salesCardTimerContainer {
    width: 83px;
    height: 25px;
    display: flex;
    padding-right: 5px;
    align-items: center;
    padding-bottom: 2px;
    padding-left: 25px;

    background: url("./img/timer_panel.2aac1a833fb9.png") no-repeat center center;
    background-size: 100% 100%;

    position: absolute;
    top: -8px;
    right: 42px;

    font-size: 12.2px;
    font-weight: 900;
    color: #FFF5BC;
    -webkit-text-stroke: 0.6px #003D7A;
    font-variant-numeric: tabular-nums;
}

/* ================= Таймер ================= */
.boostersTimer {
    width: 50px;
    height: 20px;

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

    font-size: 17.41px;
    color: var(--color-gold-light);
    -webkit-text-stroke: 1.09px var(--color-brown-stroke);

    .boostersTimerImg {
        margin: 3px 5px 0 0;
        width: 17px;
        height: 17px;
    }
}

/* ============================== Карточка Бустеров ============================== */
.salesCardBusterWrapper {
    border: 2px solid var(--color-sand-border);
    background-color: var(--color-sand-bg);
    border-radius: 10px;
    width: 100%;
    height: 89px;
    margin-right: 3px;
    padding: 2px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    -webkit-box-shadow: 0px -2px 0px 0px var(--color-sand-border);
    -moz-box-shadow: 0px -2px 0px 0px var(--color-sand-border);
    box-shadow: 0px -2px 0px 0px var(--color-sand-border);

    /* ===================== Если внутри только один .salesCardBusterRow ===================== */
    &.hasOneRow {
        padding-top: 10px;

        .salesCardBonusTimerWrapper {
            margin-top: 13px;
        }
    }

    .salesCardBusterRow {
        width: 100%;
        height: 100%;

        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: row;

        /* ===================== Если есть таймер ===================== */
        &.hasTimer {
            flex-direction: column;
            justify-content: space-between;
            margin-top: -15px;
        }

        /* ===================== Если два бустера без таймера ===================== */
        &.hasTwoBoostersNoTimer {
            flex-direction: row;
            gap: 0;
        }

        .salesCardBuster {
            position: relative;
            width: 40px;

            img {
                width: 100%;
            }
        }
        .salesCardBusterCounts {
            font-size: 17.41px;
            height: 12px;
            color: var(--color-gold-light);
            -webkit-text-stroke: 1.09px var(--color-brown-stroke);

            position: absolute;
            bottom: 3px;
            left: 50%;
            transform: translateX(-50%);
        }

        .salesCardBonusTimerWrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;

            .salesCardBonusTimer {
                font-size: 17.41px;
                line-height: 16.8px;

                color: var(--color-gold-light);
                -webkit-text-stroke: 1.09px var(--color-brown-stroke);
            }
        }
    }
}
/* ================= Бустер (картинка бустера и текст снизу) ================= */
.booster {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .boosterCounter {
        position: absolute;
        bottom: -3px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;

        font-size: 17.41px;
        color: var(--color-gold-light);
        -webkit-text-stroke: 1.09px var(--color-brown-stroke);

        .boosterCounterInfinity {
            width: 19px;
            height: 12px;
            margin-left: 20px;
        }
    }
}

/* ================= Сетка расположения бустеров внутри Контейнера ================= */
.boostersGrid {
    width: 100%;
    height: calc(100% - 30px); /* место под таймер */
    display: grid;
    place-items: center;

    .booster {
        height: 100%;
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .boosterImg {
        width: 100%;
        height: auto;
    }

    .boosterCounter {
        position: absolute;
        bottom: -3px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;

        font-size: 17.41px;
        color: var(--color-gold-light);
        -webkit-text-stroke: 1.09px var(--color-brown-stroke);
    }

    /* ===================== 1 Бустер ===================== */
    &.hasBooster_1 {
        width: 50px;
        height: 80%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    &.hasBooster_1 .booster {
        width: 50px;
        height: 50px;
    }

    &.hasBooster_1 .boosterImg {
        width: 60px;
    }

    &.hasBooster_1 .boosterCounter {
        font-size: 24px;
    }

    /* ===================== 2 Бустера ===================== */
    &.hasBooster_2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        place-items: center;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    &.hasBooster_2 .booster {
        width: 40px;
        height: 40px;
    }

    &.hasBooster_2 .boosterImg {
        width: 45px;
    }

    /* ===================== 3 Бустера ===================== */
    &.hasBooster_3 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr 25px;
        place-items: center;
    }

    &.hasBooster_3 .booster {
        width: 40px;
        height: 40px;
        margin-top: -5px;
    }

    &.hasBooster_3 .boosterImg {
        width: 45px;
    }

    /* Расположение третьего бустера по центру снизу */
    &.hasBooster_3 .booster:nth-child(3) {
        grid-column: 1 / 3;
    }

    /* ===================== 4 Бустера ===================== */
    &.hasBooster_4 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 40px);
        place-items: center;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    &.hasBooster_4 .booster {
        width: 40px;
        height: 40px;
    }

    &.hasBooster_4 .boosterImg {
        width: 45px;
    }
}

.parent {
    width: 167px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    .child {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 16px;
        margin: 1px;
    }

    .booster {
        height: 100%;
        width: 100%;

        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;

        .boosterCountsCommon {
            color: #FFF5BC;
            letter-spacing: 0;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);

            font-size: 32.93px;
            -webkit-text-stroke: 1.55px #891906;
        }
    }

    /* ===================== 1 элемент ===================== */
    &.hasChild_1 > .child {
        width: 80px;
    }

    &.hasChild_1 .boosterImg {
        width: 80px;
    }

    /* ===================== 2 элемента ===================== */
    &.hasChild_2 {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    &.hasChild_2 > .child {
        width: 60px;
        margin-right: 5px;
    }

    &.hasChild_2 .boosterImg {
        width: 60px;
    }

    &.hasChild_2 .boosterCountsCommon {
        font-size: 21px;
        -webkit-text-stroke-width: 1.2px;
    }

    /* ===================== 3 элемента ===================== */
    &.hasChild_3 {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    &.hasChild_3 > .child {
        width: 50px;
    }

    &.hasChild_3 .boosterImg {
        width: 50px;
    }

    &.hasChild_3 .boosterCountsCommon {
        font-size: 19px;
        -webkit-text-stroke-width: 1.2px;
    }

    /* ===================== 4 элемента ===================== */
    &.hasChild_4 {
        display: grid;
        grid-template-columns: repeat(2, 55px);
        grid-template-rows: repeat(2, 38px);
        padding-top: 3px;
    }

    &.hasChild_4 > .child {
        width: 45px;
        justify-self: center;
    }

    &.hasChild_4 .boosterImg {
        width: 45px;
    }

    &.hasChild_4 .boosterCountsCommon {
        font-size: 18px;
        -webkit-text-stroke: 1.14px #891906;
    }
}

@media (max-width: 410px) {
    .parent {
        width: 100%;
    }
}

@media (max-width: 370px) {
    .parent.hasChild_3 > .child {
        width: 43px;
    }

    .parent.hasChild_3 > .child .boosterCountsCommon {
        font-size: 18px;
    }
}



/* Блок с Бустерами */
/*.parent {*/
/*    width: 167px;*/
/*    height: 90px;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    flex-wrap: wrap;*/

/*    !* Общие стили дочерних блоков: центрирование содержимого *!*/
/*    .child {*/
/*        display: flex;*/
/*        align-items: center;*/
/*        justify-content: center;*/
/*        font-weight: bold;*/
/*        font-size: 16px;*/
/*        margin: 1px;*/
/*    }*/

/*    !* 1 блок *!*/
/*    &:has(> .child:only-child) > .child {*/
/*        width: 80px;*/

/*        .boosterImg {*/
/*            width: 80px;*/
/*        }*/
/*    }*/

/*    !* 2 или 3 блока: горизонтально *!*/
/*    &:has(> .child:first-child:nth-last-child(2)),*/
/*    &:has(> .child:first-child:nth-last-child(3)) {*/
/*        flex-direction: row;*/
/*        flex-wrap: nowrap;*/
/*    }*/

/*    !* 2 блока горизонтально *!*/
/*    &:has(> .child:first-child:nth-last-child(2)) > .child {*/
/*        width: 60px;*/
/*        margin-right: 5px;*/

/*        .boosterImg {*/
/*            width: 60px;*/
/*        }*/
/*        .boosterCountsCommon {*/
/*            font-size: 21px;*/
/*            -webkit-text-stroke-width: 1.2px;*/
/*        }*/
/*    }*/
/*    !* 3 блока горизонтально *!*/
/*    &:has(> .child:first-child:nth-last-child(3)) > .child {*/
/*        width: 50px;*/
/*        .boosterImg {*/
/*            width: 50px;*/
/*        }*/
/*        .boosterCountsCommon {*/
/*            font-size: 19px;*/
/*            -webkit-text-stroke-width: 1.2px;*/
/*        }*/
/*    }*/

/*    !* 4 блока: 2 строки *!*/
/*    &:has(> .child:first-child:nth-last-child(4)) {*/
/*        display: grid;*/
/*        grid-template-columns: repeat(2, 55px);*/
/*        grid-template-rows: repeat(2, 38px);*/
/*        padding-top: 3px;*/
/*    }*/

/*    &:has(> .child:first-child:nth-last-child(4)) > .child {*/
/*        width: 45px;*/
/*        justify-self: center;*/
/*        .boosterImg {*/
/*            width: 45px;*/
/*        }*/
/*        .boosterCountsCommon {*/
/*            font-size: 18px;*/
/*            -webkit-text-stroke: 1.14px #891906;*/
/*        }*/
/*    }*/

/*    .booster {*/
/*        height: 100%;*/
/*        width: 100%;*/

/*        position: relative;*/
/*        display: flex;*/
/*        justify-content: center;*/
/*        align-items: center;*/

/*        .boosterCountsCommon {*/
/*            color: #FFF5BC;*/
/*            letter-spacing: 0;*/
/*            position: absolute;*/
/*            bottom: 0;*/
/*            left: 50%;*/
/*            transform: translateX(-50%);*/

/*            font-size: 32.93px;*/
/*            -webkit-text-stroke: 1.55px #891906;*/
/*        }*/
/*    }*/

/*}*/
/*@media(max-width: 410px) {*/
/*    .parent {*/
/*        width: 100%;*/
/*    }*/
/*}*/
/*@media(max-width: 370px) {*/
/*    .parent {*/
/*        &:has(> .child:first-child:nth-last-child(3)) > .child {*/
/*            width: 43px;*/

/*            .boosterCountsCommon {*/
/*                font-size: 18px;*/
/*            }*/
/*        }*/
/*    }*/
/*}*/