/* Таймер */
.timer > p {
    color: red; /* красный цвет текста */
    font-weight: bold;
    font-size: 16px; /* увеличиваем размер шрифта */
    margin-bottom: 10px;
    text-transform: uppercase;
    text-align: center;
}
.timer {
    text-align: center;
    margin-top: 20px;
}
/* стили шрифта счётчика  */
#countdown {
    font-size: 2em; /* увеличение размера шрифта в 2 раза */
}
* стили шрифта счётчика  */
#countdown2 {
    font-size: 2em; /* увеличение размера шрифта в 2 раза */
}

.timer .timer_container {
    font-size: 0;
    text-align: center;
}

.timer_container .timer_block {
    width: 60px; /* немного увеличено */
    height: 60px;
    display: inline-block;
    vertical-align: middle;
    background-color: white;
    padding: 10px 0;
    border-radius: 3px;
    position: relative;
    box-sizing: border-box;
}

.timer_block .count {
    font-size: 36px; /* увеличенный шрифт часов/минут/секунд */
    line-height: 36px;
    font-weight: bold;
    color: red; /* цифры красного цвета */
}

.timer_block .text {
    font-size: 14px;
    line-height: 16px;
    text-transform: lowercase;
    color: black;
}

.timer_container .timer_block:not(:last-child)::after {
    content: ":";
    color: red;
    font-weight: bold;
    font-size: 40px;
    line-height: 40px;
    position: absolute;
    top: 0;
    right: -20px;
}

.action_info_wrapper {
    position: relative;
    max-width: 600px;
    margin: auto;
    text-align: center;
}

.wrapper2 {
            max-width: 600px; /* Максимальная ширина */
            width: 100%;      /* Автоматически подстраиваемая ширина */
            margin: 0 auto;   /* Централизация */
            padding: 20px;
            background-color: inherit;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .sale {
            width: 130px;
            height: 120px;
            background: #ed2222;
            border-radius: 50%;
            color: #fff;
            font-weight: bold;
            font-size: 16px; /* Текст 'Скидка' */
            line-height: 18px;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding-top: 28px;
            text-align: center;
            box-shadow: 0 0 0 10px rgba(237,34,34,0.5);
            margin-right: 20px; /* Перемещаем вправо от круга */
        }
        
        .sale > span {
            display: block;
            font-weight: bolder;
            font-size: 40px; /* Размер числа скидки */
            line-height: 42px;
            letter-spacing: normal;
        }
        
        .price {
            display: flex;
            align-items: center; /* Выравниваем цены по центральной оси */
            gap: 10px;           /* Интервал между ценами */
        }
        
        .old,
        .new {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
        }
        
        .old label,
        .new label {
            font-size: 36px;
            margin-bottom: 15px;
        }
        
        .old span,
        .new span {
            font-size: 40px;
            font-weight: bold;
        }
        
        .small {
            font-size: 20px;
        }
        
        .old small,
        .new small {
            color: inherit;
        }
        
        .old span {
            color: blue;
            text-decoration: line-through;
        }
        
        .new span {
            color: green;
        }
/* Целевой диапазон: типичные смартфоны */
@media (max-width: 576px) {
    
    /* Уменьшаем контейнер-обертку */
    .action_info_wrapper {
        padding: 10px 15px; /* Вместо огромных паддингов auto-контейнера */
    }

    .wrapper2 {
        max-width: 90%; /* На очень узких экранах 600px могут вызвать скролл */
        padding: 15px;
        gap: 10px; /* Сохраняем интервал между элементами */
    }

    /* Главный круглый элемент — уменьшаем геометрию примерно вдвое */
    .sale {
        width: 65px;
        height: 60px;
        font-size: 8px; /* Было 16px */
        line-height: 10px;
        letter-spacing: 0.5px;
        box-shadow: 0 0 0 5px rgba(237, 34, 34, 0.5); /* Тень тоже вдвое меньше */
        margin-right: 10px; /* Было 20px */
        padding-top: 14px; /* Пересчитано пропорционально новой высоте */
    }

    .sale > span {
        font-size: 20px; /* Было 40px */
        line-height: 22px;
    }

    /* Блок с ценами */
    .price {
        flex-direction: column; 
        align-items: center; /* На мобильном цены лучше ставить друг под другом */
        text-align: center;
        gap: 5px; /* Интервал также уменьшен */
    }
}