/**
 * Блок рассылки в футере (.newsletter, common/footer.twig) — на мобильном
 * заголовок "Рассылка о вкусном и полезном" переносился по одному слову
 * в узкую колонку. Причина: в add.css есть мобильный фикс именно под этот
 * текст (@media max-width:480px, .newsletter>div > h5{text-align:center;
 * width:100%}), но нацелен на тег <h5> — в разметке давно стоит
 * <div class="footer-title">, селектор никогда не совпадал ("мёртвый"
 * CSS). Дублируем рабочим селектором + заодно приводим форму и текст
 * согласия в порядок на мобильном (были общие правила без явной
 * раскладки, сжимались как получится).
 */
@media (max-width: 767px) {
    .newsletter {
        margin-bottom: 0;
    }

    .newsletter > div {
        flex-direction: column;
        align-items: stretch;
        row-gap: 16px;
    }

    .newsletter .footer-title {
        width: 100%;
        text-align: center;
        font-size: 16px;
    }

    /* Поле и кнопка в один ряд — кнопка компактная справа, не на всю
       ширину (было сначала сложено в колонку, кнопка растягивалась во
       весь экран). */
    .newsletter form {
        flex-direction: row;
        column-gap: 10px;
        width: 100%;
    }

    .newsletter input {
        flex: 1;
        min-width: 0;
        width: auto;
        box-sizing: border-box;
    }

    .newsletter button {
        flex-shrink: 0;
        width: auto;
        white-space: nowrap;
    }

    /* Текст согласия на обработку данных — было 11px, вплотную к форме. */
    .newsletter > div > div > div {
        font-size: 12px;
        line-height: 1.6;
        margin-top: 14px;
        padding: 0 8px;
    }
}