/* ergo-box.ru — правки поверх перенесённой вёрстки.
 *
 * Подключается ПОСЛЕ стилей старого сайта (блок site_css в base.html):
 * при равной силе селектора выигрывает этот файл, без !important.
 * Чужие стили — templates/template244/style.css (дальше «t244:строка»).
 */

/* ── Галка согласия в формах на страницах ────────────────────────────
   Формы в теле страниц («Расчет стоимости септика», «Остались вопросы?»,
   анкета дилера, консультация в каталоге) оставлены в виде старого сайта
   и класса .mpf не носят: он перестраивает форму в колонку со своими
   полями. Галке нужен свой вид — у старого сайта любой input растянут
   на всю ширину и высотой 54 px (t244:1559), галка в том числе. */
.eb-form .mpf__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-family: var(--mpf-font);
    font-size: 13px;
    line-height: 1.35;
    color: var(--mpf-muted, #6b7280);
    text-align: left;
    cursor: pointer;
}
.eb-form .mpf__consent input[type="checkbox"] {
    flex: 0 0 auto;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    padding: 0;
    border: 0;
    accent-color: var(--mpf-focus, #52ace8);
    cursor: pointer;
}
.eb-form .mpf__consent a { color: var(--mpf-link, #fb6c14); text-decoration: underline; }
.eb-form .mpf__consent.is-error,
.eb-form .mpf__consent.is-error a { color: #b3261e; }

/* В «Расчете» и «Остались вопросах» галка стоит на месте надписи
   «данные не будут переданы» (.pred, колонка 45% слева от кнопки). При
   13 px она выходила в четыре строки против двух у надписи, блок рос на
   22 px и сдвигал всю страницу ниже. 12 px — три строки, по высоте
   кнопки: раскладка страницы та же, что у оригинала. */
.eb-form .pred .mpf__consent { font-size: 12px; line-height: 1.3; }

/* Анкета, консультация, «Компания»: галка своей строкой над кнопкой
   (у «Расчета» и «Остались вопросов» она на месте надписи .pred слева
   от кнопки — там отступы уже есть). */
.eb-form .eb-consent { margin: 14px 0; }

/* Консультация в каталоге (.ramas): заголовок слева и поле с кнопкой
   справа — плавающие блоки, и галка без clear втискивалась между ними
   колонкой в 86 px (а на телефоне уезжала за край экрана). Форма лежит
   ВНУТРИ .ramas. flow-root держит плавающие блоки внутри формы, иначе
   отступ галки проваливался сквозь неё и сдвигал поля на 14 px вниз. */
.ramas .eb-form { display: flow-root; }
.ramas .eb-form .eb-consent { clear: both; margin: 14px 0 0; }

/* Поле телефона после неудачной проверки (leadform.js ставит aria-invalid). */
.eb-form input[aria-invalid="true"] { border-color: #b3261e; }

/* Ответ формы: у старых форм места под него не было, leadform.js
   добавляет блок рядом с кнопкой. */
.eb-form .mp-form-msg {
    clear: both;
    margin-top: 12px;
    font-family: var(--mpf-font);
    font-size: 14px;
    text-align: left;
}

/* ── Телефон в шапке ────────────────────────────────────────────────
   Номер — ссылка tel: (legacy/ergobox/_menu.html), а вид — как у
   оранжевого текста .memem (t244:170, 19 px, #fb6c14): цвет и размер
   ссылка берёт у блока, синий цвет и подчёркивание браузера снимаем. */
.memem a.eb-phone,
.memem a.eb-phone:hover,
.memem a.eb-phone:visited { color: inherit; text-decoration: none; }

/* ── Телефон: горизонтальное переполнение ───────────────────────────
   На части страниц вёрстка шире экрана: скрытая подсказка на «Доставке»
   (551 px), сертификаты на карточках станций и «Производстве» (402 px).
   Старый сайт запрещал масштаб (user-scalable=no), и окно оставалось
   шириной с экран. У нас масштаб разрешён, и Chrome расширял окно под
   вёрстку — кнопка «Связаться» и плашка cookie (position: fixed)
   уезжали за край экрана. clip обрезает лишнее, не создавая прокрутки
   (с hidden body становился прокручиваемым блоком и ломал прокрутку
   страницы). Нужен и на html, и на body — одного body мало. */
html:has(> body.site-ergobox),
body.site-ergobox { overflow-x: clip; }

/* ── «Дилерам»: сетка разделов продукции ─────────────────────────────
   Общее правило в widgets.css начинает каждый третий ряд с чистой строки —
   это сетка мультпласта и септика по 33.3%. У ergo-box плитки шире по
   числу: 4 в ряду до 1024 px, 3 в ряду до 820 px, дальше по одной
   (t244:1400, 2621, 2891) — под общее правило ряды шли по три с пустой
   четвёртой колонкой, страница вырастала на 300 px. */
.site-ergobox .category-list .category:nth-child(n) { clear: none; }
.site-ergobox .category-list .category:nth-child(4n + 1) { clear: left; }
@media (max-width: 1024px) {
    .site-ergobox .category-list .category:nth-child(4n + 1) { clear: none; }
    .site-ergobox .category-list .category:nth-child(3n + 1) { clear: left; }
}

/* ── Окна с формами ─────────────────────────────────────────────────
   У старого сайта на .mofo жёсткие max-width: 350px и выравнивание
   по центру (t244:2251) — окно выходило узким, а подписи полей
   вставали посередине. Окно теперь наше (_modals.html): ширину и
   выравнивание задаёт widgets.css, старое правило гасим. */
.fancybox-slide > .mofo.mofo,
.fancybox-content.mofo.mofo { max-width: none; text-align: left; }
.mofo .mpf .mpf__control.mpf__control { margin-bottom: 0; }
.mofo .eb-order-note { margin-top: -10px; color: var(--mpf-text, #38384a); font-weight: 600; }

/* ── Страницы, заведённые в админке ─────────────────────────────────
   Заголовок — H1 (у перенесённых страниц имя стоит в H2 шапки), вид —
   как у H2 в шапке «infi» (t244:1147). */
.infi h1.eb-page-title {
    color: #677289;
    font-family: "Roboto", sans-serif;
    font-size: 46px;
    font-weight: normal;
    margin-bottom: 40px;
    letter-spacing: 1px;
}
.eb-page-body { margin-right: 0; padding-bottom: 60px; }
@media (max-width: 767px) {
    .infi h1.eb-page-title { font-size: 30px; margin-bottom: 24px; }
}