/* Стили НАШИХ виджетов (формы, модалка звонка). Только префикс .mp- —
   безопасно подключать на страницах с legacy-вёрсткой: ни body, ни html,
   ни голые теги не трогаем, иначе перекрашивается чужой дизайн
   (base.css уже перебивал html{color:#fff} мультпласта). */
:root{--brand:#e8632a;--dark:#1f2b3a;--muted:#6b7787;}
.mp-container{max-width:1100px;margin:0 auto;padding:0 20px}
.mp-hero{padding:80px 0;background:#f4f6f8}
.mp-hero--dark{background:var(--dark);color:#fff}
.mp-hero h1{font-size:40px;margin:0 0 16px}
.mp-hero__sub{font-size:18px;color:var(--muted);max-width:640px}
.mp-hero--dark .mp-hero__sub{color:#c7d0da}
.mp-btn{display:inline-block;margin-top:8px;background:var(--brand);color:#fff;text-decoration:none;
    padding:14px 28px;border-radius:8px;font-weight:600;border:0;cursor:pointer;font-size:16px}
.mp-btn:hover{filter:brightness(.95)}
.mp-features{padding:60px 0}
.mp-features h2{font-size:28px}
.mp-grid{display:grid;gap:24px;margin-top:24px}
.mp-grid--2{grid-template-columns:repeat(2,1fr)}
.mp-grid--3{grid-template-columns:repeat(3,1fr)}
.mp-grid--4{grid-template-columns:repeat(4,1fr)}
.mp-feature{background:#fff;border:1px solid #eef1f4;border-radius:12px;padding:24px}
.mp-feature h3{margin:0 0 8px}
.mp-product{padding:40px 0}
.mp-price{font-size:26px;color:var(--brand);font-weight:700;margin:8px 0}
.mp-leadform{padding:60px 0;background:#f4f6f8}
.mp-form{max-width:420px;display:flex;flex-direction:column;gap:12px;margin-top:16px}
.mp-form input{padding:14px 16px;border:1px solid #d6dde4;border-radius:8px;font-size:16px}
.mp-form-msg{padding:10px 14px;border-radius:8px}
.mp-form-msg.ok{background:#e7f6ec;color:#1b7a3d}
.mp-form-msg.err{background:#fdecec;color:#b3261e}
.mp-grid--3,.mp-grid--4{grid-template-columns:1fr 1fr}
.mp-hero h1{font-size:30px}
.mp-grid--2,.mp-grid--3,.mp-grid--4{grid-template-columns:1fr}

/* Страховка к проставленным размерам картинок. Атрибуты width/height нужны,
   чтобы браузер резервировал место и страница не дёргалась при загрузке, но
   как презентационная подсказка они задают ОБЕ стороны. Там, где вёрстка
   старого сайта задаёт только одну (.doc-slide-inner img { height: 275px }),
   вторая приезжала из атрибута и картинка растягивалась.

   width/height: auto возвращает вторую сторону расчёту по пропорции, а сами
   пропорции браузер берёт из атрибутов ещё до загрузки файла — место
   резервируется, вид не меняется.

   Правило висит только на своей метке data-dim: картинки, у которых размеры
   стояли изначально (в старой вёрстке встречается width="100%"), не трогаем.

   :where() обнуляет специфичность — иначе селектор с атрибутом (0-1-1) бил
   правила старого сайта вроде .itimg { width: 100% } (0-1-0), и плитки
   каталога разъезжались. С нулевой специфичностью правило перебивает только
   сами атрибуты, а любому стилю сайта уступает. */
:where(img[data-dim]) { width: auto; height: auto; }

/* Сетка направлений продукции («Какую ещё продукцию мы выпускаем?» у
   мультпласта, «Дилерам» у септика). Плитки плавающие, по 33.3%, и разница
   высот в один пиксель заставляет следующую плитку цепляться за соседнюю —
   в ряду появляется дыра. Дефект есть и на старом сайте.

   Заставляем каждый ряд начинаться с чистой строки. Разбивка та же, что в
   вёрстке: три колонки, и две в диапазоне 300–850px. */
.category-list .category:nth-child(3n + 1) { clear: left; }

@media (min-width: 300px) and (max-width: 850px) {
    .category-list .category:nth-child(3n + 1) { clear: none; }
    .category-list .category:nth-child(2n + 1) { clear: left; }
}

/* Картинки в наших листингах. Мы отдаём их с width/height, чтобы страница не
   дёргалась при загрузке, но вёрстка сайта задаёт плитке свою ширину — и
   высота остаётся из атрибута, картинка растягивается по вертикали
   (260x243 превращалось в 207x243).

   :where() держит нулевую специфичность: правило перебивает только атрибуты,
   а любому стилю сайта уступает. */
:where(.category-image img, .maitem img, .newsblo img, .catalog-left img,
       .category-list img) { height: auto; }

/* Отступ от шапки на страницах каталога. В вёрстке старого сайта он 290px —
   это половина экрана пустоты. По просьбе заказчика уменьшен: шапка
   абсолютная, высотой 119px, поэтому 150px хватает и не наезжает. */
.site-multplast .catalog-container { padding-top: 150px; }

@media (min-width: 300px) and (max-width: 850px) {
    .site-multplast .catalog-container { padding-top: 141px; }
}

/* Сетка карточек у септика. Здесь, в отличие от каталога мультпласта, рядом
   нет плавающей колонки разделов — значит можно поставить настоящую сетку,
   и тогда карточки в ряду одинаковой высоты, а не «размазаны» по-разному
   из-за названий в одну и две строки.

   Ширины плиток задавала вёрстка (23%), в сетке они не нужны. */
.mp-grid--4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mp-grid--4 > .maitem { float: none; width: auto; margin: 0; }

@media (max-width: 1024px) {
    .mp-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .mp-grid--4 { grid-template-columns: 1fr; }
}

/* Картинка внутри карточки: держим родные пропорции и не даём ей
   растягиваться под высоту ячейки. */
:where(.mp-grid--4 .itimg) { height: auto; max-width: 100%; object-fit: contain; }

/* Содержимое карточки выстраиваем в колонку, кнопку прижимаем к низу —
   тогда названия в одну и две строки не сдвигают цену и кнопку. */
.mp-grid--4 > .maitem > a { display: flex; flex-direction: column; height: 100%; }
.mp-grid--4 .text { display: flex; flex-direction: column; flex: 1; }
.mp-grid--4 .moreinf { margin-top: auto; }

/* Карточка товара: отступ больше, чем у листингов. Контент начинается с
   высокой фотографии, и при общих 150px она подлезала под шапку. Листингам
   такой воздух не нужен — там сверху заголовок. */
.site-multplast .catalog-container.mp-card { padding-top: 250px; }

/* Плавающие колонки внутри каталога должны заканчиваться вместе с блоком.
   В вёрстке старого сайта колонка разделов и сайдбар карточки плавающие,
   и когда они выше содержимого (короткий раздел, короткая карточка), низ
   уезжает за пределы контейнера — прямо на подвал. Замыкаем поток. */
.site-multplast .catalog-container::after,
.site-multplast .station-list-wrapper::after {
    content: "";
    display: block;
    clear: both;
}

/* Запасная сборка карточки (товары, которых нет в зеркале). Кнопка заказа
   там наследует html{color:#fff} и остаётся белой на белом — на старом сайте
   она синяя. Красим только внутри своей обёртки, legacy-карточек не касаемся. */
.site-multplast .station-list-wrapper[style] a.button {
    display: inline-block;
    background: #4D85C5;
    color: #fff;
    padding: 0 28px;
    line-height: 60px;
    border-radius: 4px;
    text-decoration: none;
}

/* Заголовок для поиска и читалки, невидимый на экране. Нужен там, где в
   вёрстке старого сайта H1 нет вовсе: на главной мультпласта заголовок
   нарисован картинкой, на «Компания» и «Партнёрам» — крупным div-ом.
   Дорисовывать видимый заголовок нельзя (чужой макет), а страница без H1
   для поисковика безымянная. Класс скрывает текст, не убирая его из
   дерева доступности: display:none и visibility:hidden читалки пропускают. */
.mp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Витрина каталога септика. В оригинале разделов шесть и плитка .catus
   занимает 16.66% — ровно шесть в ряду по 960px. Заказчик попросил вывести
   туда седьмым «Обслуживание», поэтому на широком экране ужимаем плитку
   до седьмой части.

   Порог 841px, а не 720: семь картинок по 120px требуют 840px ширины
   содержимого, а .block960 ниже 960px резиновый и ещё отдаёт 10px паддинга
   с каждой стороны. Ниже 841px ряд разваливается сам, и работают родные
   мобильные правила вёрстки (49.67% на плитку).

   Медиазапрос обязателен: без него правило со специфичностью (0,3,0)
   перебивало бы мобильное .catus { width: 49.666667% } на всех ширинах. */
@media (min-width: 841px) {
    .site-septiktermit .group_list .catus { width: 14.2857%; }
}

/* Во всём template21 нет ни одного правила, ограничивающего картинку
   шириной родителя, — в узкой плитке она вылезала бы наружу. */
.site-septiktermit .group_list .catus img { max-width: 100%; height: auto; }

/* Плитка без картинки («Обслуживание», пока её не поставили в админке)
   иначе поднимает подпись к самому верху ряда: у соседей коробка картинки
   125px, у неё 0. Держим то же место — подписи стоят в одну линию. */
.site-septiktermit .group_list .catus > a:first-child > div { min-height: 125px; }

/* ═══════════════════════════════════════════════════════════════════════
   ФОРМЫ. Один компонент на оба сайта: разметка общая, палитра своя.

   Почему всё описано заново. Вид полей на старых сайтах задавали чужие
   правила, и они местами просто сломаны: в multplast/templates/template21/
   style.css:220 у правила `input:not([type=submit]), textarea` пропущена
   точка с запятой после font-family — браузер выбрасывает всю декларацию
   вместе с фоном поля. На живом сайте ровно то же. Отсюда и «формы
   выглядят ужасно»: поля рисовал браузер по умолчанию.

   Специфичность. widgets.css отдаётся ПЕРЕД унаследованными стилями
   (base.html), значит при равной специфичности выигрывают они. Потолок
   их правил для полей — (0,2,1): `.app-form input:not([type="submit"])`
   у мультпласта и `.schet2 .inputs input` у септика. Поэтому свои
   правила пишем тремя классами — (0,3,0), с запасом и без !important.

   Палитры — из зеркал, источники указаны построчно.
   ═══════════════════════════════════════════════════════════════════ */

body.site-multplast {
    --mpf-font: 'Open Sans', Arial, sans-serif;   /* t21:174 html */
    --mpf-text: #002856;                          /* основной синий сайта */
    --mpf-muted: #6b7787;
    --mpf-field-bg: #E4EEF8;                      /* t30:33 — тот самый фон поля */
    --mpf-field-border: #C3D6EA;
    --mpf-field-radius: 4px;                      /* t30:35 */
    --mpf-link: #4D85C5;                          /* ссылки в форме */
    --mpf-focus: #4D85C5;                         /* рамка поля в фокусе */
    --mpf-accent: #4D85C5;                        /* t21:409 .blue-button */
    --mpf-accent-hover: #5696E1;                  /* t21:399 */
    --mpf-btn-text: #fff;
    --mpf-btn-text-hover: #fff;
    --mpf-btn-radius: 4px;
    --mpf-btn-transform: none;
    --mpf-ring: rgba(77, 133, 197, .22);
}

body.site-septiktermit {
    --mpf-font: 'PT Sans', Arial, sans-serif;     /* t21:74 body */
    --mpf-text: #1a1a1a;
    --mpf-muted: #7b7b7b;
    --mpf-field-bg: #fff;                         /* t21:210 .schet2 .inputs input */
    --mpf-field-border: #c6d5dd;                  /* t21:214 */
    --mpf-field-radius: 4px;                      /* t21:216 */
    /* Ссылку и фокус красим зелёным, а не фирменным жёлтым: жёлтый текст
       на белом не читается, а как фон кнопки он работает. */
    --mpf-link: #26b968;                          /* t21:297 a.liniker */
    --mpf-focus: #26b968;
    --mpf-accent: #fee121;                        /* t21:745 .button — фирменный жёлтый */
    --mpf-accent-hover: #26b968;                  /* t21:759 — зелёный при наведении */
    --mpf-btn-text: #000;                         /* t21:747 */
    --mpf-btn-text-hover: #fff;                   /* t21:760 */
    --mpf-btn-radius: 8px;                        /* t21:746 */
    --mpf-btn-transform: uppercase;               /* t21:750 */
    --mpf-ring: rgba(38, 185, 104, .22);
}

/* Запасные значения — если класс сайта почему-то не проставлен. */
.mpf {
    --mpf-font: var(--mpf-font, Arial, sans-serif);
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--mpf-font);
    font-size: 15px;
    line-height: 1.4;
    color: var(--mpf-text, #1f2b3a);
    text-align: left;
}
.mpf *, .mpf *::before, .mpf *::after { box-sizing: border-box; }

.mpf .mpf__field { display: block; margin: 0; }
.mpf .mpf__field .mpf__label {
    display: block;
    margin: 0 0 6px;
    font-family: var(--mpf-font);
    font-size: 13px;
    line-height: 1.2;
    color: var(--mpf-muted, #6b7787);
}
.mpf .mpf__field.is-required .mpf__label::after { content: " *"; color: #b3261e; }

.mpf .mpf__control.mpf__control {
    display: block;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 12px 14px;
    font-family: var(--mpf-font);
    font-size: 16px;         /* меньше 16px — iOS увеличивает страницу при фокусе */
    line-height: 1.25;
    color: var(--mpf-text, #1f2b3a);
    background: var(--mpf-field-bg, #fff);
    border: 1px solid var(--mpf-field-border, #cfd8e3);
    border-radius: var(--mpf-field-radius, 4px);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s, box-shadow .15s;
}
.mpf textarea.mpf__control.mpf__control { height: auto; min-height: 104px; resize: vertical; }
.mpf .mpf__control.mpf__control::placeholder { color: var(--mpf-muted, #8b98a8); opacity: 1; }
.mpf .mpf__control.mpf__control:focus {
    outline: none;
    border-color: var(--mpf-focus, #4D85C5);
    box-shadow: 0 0 0 3px var(--mpf-ring, rgba(77, 133, 197, .22));
}
.mpf .mpf__control.mpf__control[aria-invalid="true"] { border-color: #b3261e; }

/* Кнопка. height:auto и text-transform обязательны: у мультпласта
   .button жёстко 279x60, у септика — верхний регистр. */
.mpf .mpf__btn.mpf__btn {
    display: block;
    width: 100%;
    height: auto;
    min-height: 52px;
    padding: 15px 24px;
    font-family: var(--mpf-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: var(--mpf-btn-transform, none);
    text-decoration: none;
    color: var(--mpf-btn-text, #fff);
    background: var(--mpf-accent, #4D85C5);
    border: 0;
    border-radius: var(--mpf-btn-radius, 4px);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.mpf .mpf__btn.mpf__btn:hover:not(:disabled) {
    background: var(--mpf-accent-hover, #5696E1);
    color: var(--mpf-btn-text-hover, #fff);
}
.mpf .mpf__btn.mpf__btn:disabled { opacity: .55; cursor: default; }

/* Согласие на обработку персональных данных. Ссылке нужен свой цвет:
   у мультпласта в стилях стоит a { color: #fff } — иначе она невидима. */
.mpf .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, #6b7787);
    cursor: pointer;
}
.mpf .mpf__consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    padding: 0;
    accent-color: var(--mpf-focus, #4D85C5);
    cursor: pointer;
}
.mpf .mpf__consent a { color: var(--mpf-link, #4D85C5); text-decoration: underline; }
.mpf .mpf__consent.is-error { color: #b3261e; }
.mpf .mpf__consent.is-error a { color: #b3261e; }

/* Ответ формы. Класс mp-form-msg не переименовывать: его пишет leadform.js. */
.mpf .mp-form-msg, .mp-form-msg {
    margin: 0;
    padding: 11px 14px;
    border-radius: var(--mpf-field-radius, 4px);
    font-family: var(--mpf-font);
    font-size: 14px;
    line-height: 1.35;
}

/* Окно модалки. Своей ширины у него не было вовсе: у мультпласта размер
   окна задавала кнопка (279px), у септика — 450px из стилей fancybox. */
.mofo > .modal-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 460px;
    padding: 28px 26px 26px;
    font-family: var(--mpf-font);
    color: var(--mpf-text, #1f2b3a);
    text-align: left;
}
.fancybox-slide > .mofo, .fancybox-content.mofo {
    width: min(480px, calc(100vw - 32px));
    padding: 0;
    background: #fff;
    border-radius: 8px;
}
.mofo > .modal-inner h2 {
    margin: 0 0 6px;
    padding: 0;
    font-family: var(--mpf-font);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
    color: var(--mpf-text, #1f2b3a);
}
.mofo > .modal-inner .modal-sub {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--mpf-muted, #6b7787);
}

@media (max-width: 520px) {
    .mofo > .modal-inner { padding: 22px 18px; }
    .mpf .mpf__control.mpf__control { height: 46px; }
}

/* ── Формы на страницах (не в модалке) ────────────────────────────────
   Это формы из вёрстки старого сайта: «Обратная связь», анкета дилера,
   расчёт стоимости. Их разметка — вложенные колонки .col-6 / .input-col,
   из-за которых поля разной ширины стояли вперемешку, а подпись и поле
   жили в разных колонках.

   Переверстывать разметку в базе нельзя, поэтому обёртки «растворяем»
   (display: contents) и раскладываем сами поля: два столбца на широком
   экране, один на узком. Текстовое поле, согласие, кнопка и ответ формы
   всегда во всю ширину — им так и положено. */

.mpf--page {
    display: grid;
    grid-template-columns: 1fr;   /* одна колонка: поля идут строго друг под
                                     другом. Две колонки на разметке старого
                                     сайта разъезжались — часть полей лежит
                                     в своих обёртках и вылезала за сетку. */
    gap: 14px;
    align-items: start;
    width: 100%;
    max-width: 640px;
}
.mpf--page > div,
.mpf--page > div > div,
.mpf--page > div > div > div { display: contents; }

/* Подпись с полем — единица сетки. Метка по умолчанию строчная, из-за
   этого поле сжималось до ширины текста. */
.mpf--page label:not(.mpf__consent) {
    display: block;
    width: 100%;
    margin: 0;
}

.mpf--page .input-element,
.mpf--page label.input-element { display: block; margin: 0; }
.mpf--page .input-element-text {
    display: block;
    margin: 0 0 6px;
    font-family: var(--mpf-font);
    font-size: 13px;
    line-height: 1.2;
    color: var(--mpf-muted, #6b7787);
}

/* Во всю ширину: сообщение, согласие, кнопка, ответ формы. */
.mpf--page .input-element:has(textarea),
.mpf--page .mpf__consent,
.mpf--page .mp-form-msg,
.mpf--page .footerform,
.mpf--page .mpf__btn,
.mpf--page [data-leadsubmit] { grid-column: 1 / -1; }

.mpf--page textarea.mpf__control.mpf__control { min-height: 132px; }

/* Кнопка формы на странице не должна растягиваться во всю ширину экрана. */
.mpf--page .mpf__btn.mpf__btn,
.mpf--page [data-leadsubmit] {
    justify-self: start;
    width: auto;
    min-width: 240px;
    text-align: center;
}

@media (max-width: 720px) {
    .mpf--page .mpf__btn.mpf__btn,
    .mpf--page [data-leadsubmit] { width: 100%; }
}

/* ── Крестик и центрирование модалки ──────────────────────────────────
   У встроенных окон обоих сайтов кнопки закрытия не было вовсе: у септика
   fancybox старой версии не рисует её для инлайновых блоков, у мультпласта
   она пряталась за краем окна. Ставим свою — в углу самого окна. */
.mofo { position: relative; }
.mofo__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 30, 50, .06);
    color: var(--mpf-muted, #6b7787);
    font-size: 24px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.mofo__close:hover { background: rgba(15, 30, 50, .12); color: var(--mpf-text, #1f2b3a); }

/* Окно строго по центру экрана. Старый fancybox септика раскладку
   не задаёт вовсе, поэтому окно прижималось к верху и уезжало влево. */
.fancybox-slide { display: flex; align-items: center; justify-content: center; }
.fancybox-slide::before { display: none; }
.fancybox-slide > .mofo { margin: 0 auto; float: none; }

/* Подпись поля в вёрстке старого сайта лежит ПОВЕРХ поля
   (`.input-element-text { position: absolute }`, template21/style.css:1488):
   на живом сайте её прятал скрипт при вводе, у нас она оставалась и
   накладывалась на набранный текст. Возвращаем подпись в поток — она
   встаёт над полем, как в остальных наших формах. */
.mpf--page .input-element-text,
.mpf--page label span,
.mpf--page .name-label {
    position: static;
    padding: 0;
    font-family: var(--mpf-font);
}

/* Заодно гасим прозрачность-заглушку: класс input-transparent старый
   скрипт снимал по фокусу, без него поле выглядело выцветшим. */
.mpf--page .input-transparent { opacity: 1; }

/* Кнопка отправки в формах старого сайта — это <div class="footerform">,
   а не настоящая кнопка: своего вида у неё нет вовсе. Приводим к тому же,
   что у остальных кнопок форм. */
.mpf--page .footerform.footerform,
.mpf--page .form_raschet.form_raschet {
    display: inline-block;
    justify-self: start;
    width: auto;
    min-width: 260px;
    height: auto;
    min-height: 52px;
    padding: 15px 28px;
    font-family: var(--mpf-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-transform: var(--mpf-btn-transform, none);
    color: var(--mpf-btn-text, #fff);
    background: var(--mpf-accent, #4D85C5);
    border: 0;
    border-radius: var(--mpf-btn-radius, 4px);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.mpf--page .footerform.footerform:hover,
.mpf--page .form_raschet.form_raschet:hover {
    background: var(--mpf-accent-hover, #5696E1);
    color: var(--mpf-btn-text-hover, #fff);
}

/* Галка на широком экране: крупнее и в одну строку, без переносов
   посередине предложения. */
.mpf--page .mpf__consent {
    align-items: center;
    gap: 12px;
    max-width: 100%;
    font-size: 14px;
}
.mpf--page .mpf__consent input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }

@media (max-width: 720px) {
    .mpf--page .footerform.footerform,
    .mpf--page .form_raschet.form_raschet { width: 100%; min-width: 0; }
    .mpf--page .mpf__consent { align-items: flex-start; }
}

/* У fancybox есть свой крестик, и на септике он рисуется поверх нашего —
   в углу окна оказывались две кнопки закрытия. Свой оставляем (он одинаков
   на обоих сайтах и не зависит от версии библиотеки), чужой прячем только
   внутри наших окон. */
.fancybox-slide .mofo ~ .fancybox-close-small,
.fancybox-slide > .mofo .fancybox-close-small,
.fancybox-content.mofo .fancybox-close-small,
.fancybox-slide--html .mofo + button.fancybox-close-small { display: none; }

/* Блок «Расчет стоимости» на карточках септика. Его разметка не похожа на
   остальные формы: два поля, потом группа флажков «Способ монтажа», потом
   имя и телефон. При общем растворении обёрток флажки занимали ячейку
   сетки, и поля разъезжались по строкам с дырами.

   Флажки — своя строка во всю ширину, поля идут парами по порядку. */
.mpf--page .cheche {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0;
}
.mpf--page .checks {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mpf--page .checks li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    color: var(--mpf-text, #1a1a1a);
}
.mpf--page .checks li:first-child { font-weight: 600; }
.mpf--page .checks input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--mpf-focus, #26b968);
}
.mpf--page .checks label { display: inline; width: auto; margin: 0; cursor: pointer; }

/* Заголовок блока и пояснение — над формой, во всю ширину. */
.mpf--page .separator { display: none; }

/* Формы на страницах септика стояли прижатыми к левому краю: сетка формы
   уже контейнера, и справа оставалась пустота во всю половину экрана
   («Остались вопросы?» на «Дилерам» и «О заводе»). Центрируем сетку
   в её блоке — как в оригинале, где форма стоит по центру колонки. */
.mpf--page { margin-left: auto; margin-right: auto; }

/* Заголовок и пояснение над формой — тоже по центру блока. */
.site-septiktermit .schet.feadbacka > h2,
.site-septiktermit .schet2.feadbacka > h2 { text-align: center; }
.site-septiktermit .schet.feadbacka .mpf--page > p,
.site-septiktermit .schet2.feadbacka .mpf--page > p {
    grid-column: 1 / -1;
    margin: 0 0 6px;
    text-align: center;
    color: var(--mpf-muted, #7b7b7b);
}

/* Поле сообщения всегда во всю ширину формы — где бы оно ни лежало
   в вёрстке старого сайта. Раньше правило цеплялось только к подписи
   с текстовым полем, и на «Дилерам» сообщение оставалось узким,
   в одну колонку, а справа зияла пустота. */
.mpf--page textarea.mpf__control.mpf__control { grid-column: 1 / -1; }

/* Форма на странице — отдельная карточка, а не поля в пустоте.
   У мультпласта страницы белые, и форма без рамки читалась как случайный
   набор блоков. Рамка и подложка обозначают её границы; у септика фон
   секции и так серый, поэтому там подложка светлее фона, но мягче. */
.mpf--page {
    padding: 26px 28px;
    border: 1px solid var(--mpf-field-border, #cfd8e3);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 14px rgba(15, 30, 50, .05);
}
.site-multplast .mpf--page { background: #fdfeff; }

@media (max-width: 560px) {
    .mpf--page { padding: 18px 16px; }
}

/* ── Уведомление о файлах cookie ──────────────────────────────────────
   Своя плашка вместо унаследованной: та не показывалась на телефонах
   (в стилях старого сайта она скрыта ниже 576px), кнопка была одна,
   а у мультпласта ссылка в ней была белой на белом.

   Палитра берётся из переменных сайта, поэтому у септика кнопка жёлтая,
   у мультпласта синяя. */
.mpcookie {
    position: fixed;
    z-index: 10000;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.mpcookie[hidden] { display: none; }

.mpcookie__inner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: 1100px;
    box-sizing: border-box;
    padding: 16px 20px;
    border: 1px solid var(--mpf-field-border, #cfd8e3);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(15, 30, 50, .18);
    font-family: var(--mpf-font, Arial, sans-serif);
}

.mpcookie__text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--mpf-text, #1f2b3a);
}
/* Ссылку красим тремя классами: унаследованные стили грузятся после наших
   и при равной силе выигрывают, из-за чего на септике ссылка выходила
   чёрной и терялась в тексте. */
.mpcookie .mpcookie__inner .mpcookie__text a {
    color: var(--mpf-link, #4D85C5);
    text-decoration: underline;
}

.mpcookie__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mpcookie__btn {
    height: auto;
    min-height: 44px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: var(--mpf-btn-radius, 4px);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-transform: var(--mpf-btn-transform, none);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.mpcookie__btn--primary {
    background: var(--mpf-accent, #4D85C5);
    color: var(--mpf-btn-text, #fff);
}
.mpcookie__btn--primary:hover {
    background: var(--mpf-accent-hover, #5696E1);
    color: var(--mpf-btn-text-hover, #fff);
}
.mpcookie__btn--ghost {
    background: transparent;
    border-color: var(--mpf-field-border, #cfd8e3);
    color: var(--mpf-muted, #6b7787);
    font-weight: 600;
}
.mpcookie__btn--ghost:hover {
    border-color: var(--mpf-link, #4D85C5);
    color: var(--mpf-text, #1f2b3a);
}

/* На узком экране плашка занимает всю ширину, кнопки — в столбик и
   во всю ширину: пальцем в 44px попасть можно, в 20% ширины — нет.
   Виджет звонка приподнимаем, чтобы они не наезжали друг на друга. */
@media (min-width: 1101px) {
    .mpcookie { left: 230px; right: 230px; }
}

@media (max-width: 720px) {
    .mpcookie { left: 10px; right: 10px; bottom: 10px; }
    .mpcookie__inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
    .mpcookie__text { font-size: 13px; }
    .mpcookie__actions { flex-direction: column-reverse; }
    .mpcookie__btn { width: 100%; }
}

/* ── Мобильные хвосты ─────────────────────────────────────────────────
   Ни в одном унаследованном стиле нет правила «картинка не шире родителя»,
   поэтому снимок 919px в тексте новости растягивал страницу и появлялась
   горизонтальная прокрутка (замер: 5 страниц мультпласта, до 919px при
   экране 375). Ограничиваем картинки телом страницы — карусели и слайдеры
   не трогаем, у них своя раскладка. */
.site-multplast .catalog-container img:not(.swiper-slide img),
.site-multplast .mainblo img,
.site-septiktermit .block960 img:not(.swiper-slide img) {
    max-width: 100%;
    height: auto;
}

/* Таблица цен на «Обслуживании» септика шире своей обёртки (436px против
   355), а прокрутку документа гасит .container { overflow: hidden } —
   правая колонка была недостижима. Обёртка в разметке уже есть, правила
   для неё в стилях септика нет вовсе. */
.site-septiktermit .table-adaptive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Крестики наших окон: пальцем в 15x26 не попасть. Порог — 44px. */
.mofo__close { width: 44px; height: 44px; line-height: 44px; }

/* ── Шапка на телефоне ────────────────────────────────────────────────
   На обоих сайтах шапка уезжала вверх вместе со страницей: чтобы открыть
   меню с середины карточки товара (8-9 тысяч пикселей длиной), надо было
   прокрутить до самого верха. У септика хуже: панель меню тоже стояла
   абсолютно, и открытая с середины страницы она оказывалась за экраном.

   У мультпласта шапка и так вне потока (position: absolute), поэтому
   перевод в fixed ничего не сдвигает — она просто остаётся на виду.
   У септика шапка в потоке, её трогать нельзя: контент подпрыгнул бы.
   Там закрепляем кнопку меню и саму панель. */
@media (max-width: 1024px) {
    /* !important здесь вынужденно: в вёрстке у шапки стоит класс
       `absolute`, а унаследованный стиль объявляет
       `.absolute { position: absolute !important }` (template21, ниже 640px).
       Перебить это иначе нельзя, не трогая перенесённую разметку.
       Сама шапка и так вне потока, поэтому смены раскладки не будет. */
    body.site-multplast:not(.mp-home) .header-navigation.header-navigation { position: fixed !important; }
}

@media (max-width: 720px) {
    .site-septiktermit .mobile-nav-button {
        /* Только закрепляем. Размеры и отступы не трогаем: полоски внутри
           спозиционированы от этой коробки, и в закрытом виде это бургер,
           а в открытом — крестик. Стоит изменить padding или ширину, как
           крестик перекашивает. */
        position: fixed;
    }
    /* Подложка — отдельным слоем позади полосок, чтобы кнопка читалась
       на тёмных снимках. Размер коробки при этом не меняется. */
    .site-septiktermit .mobile-nav-button::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 46px;
        height: 46px;
        margin: -23px 0 0 -23px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 2px 10px rgba(15, 30, 50, .18);
        z-index: -1;
    }
    /* Само меню правится в перенесённом файле стилей (команда
       patch_legacy_css): там спор идёт не о весе правила, а о порядке. */
}

/* Цена и кнопка заказа на карточке мультпласта лежат в одном блоке
   .item-price, и кнопке задан отрицательный верхний отступ: на широком
   экране она встаёт рядом с ценой, а на телефоне переносится вниз и
   наезжает на саму цену (замер: цена 366-428, кнопка 384-428).
   На узком экране ставим их друг под другом. */
@media (max-width: 720px) {
    .site-multplast .item-price {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .site-multplast .item-price .button { margin: 0; }
}

/* Липкая шапка мультпласта прозрачна: пока она стояла наверху страницы,
   под ней был фон первого экрана, а закреплённая — она поехала по тексту,
   и сквозь неё просвечивал контент. Даём непрозрачную подложку в цвет
   страницы и мягкую тень: содержимое уезжает ПОД шапку, а не сквозь неё.

   Только на телефоне: на широком экране шапка не закреплена и должна
   остаться прозрачной, как в оригинале. */
@media (max-width: 1024px) {
    body.site-multplast:not(.mp-home) .header-navigation.mp-stuck {
        background: #fff;
        box-shadow: 0 2px 12px rgba(15, 30, 50, .12);
        /* Во всю ширину экрана: в унаследованном стиле у шапки
           `margin-right: 50px` (template21, ниже 640px) — пока она стояла
           в потоке страницы, это было незаметно, а у закреплённой справа
           оставалась полоса фона. */
        left: 0;
        right: 0;
        width: auto;
        margin: 0;
    }
    /* Внутренняя полоса рисует свою границу — она теперь лишняя. */
    body.site-multplast:not(.mp-home) .header-navigation.mp-stuck .header-navigation-inner { border-bottom: 0; }

    /* Цвет текста задаём сами: на «Компании» и «Производстве» он белый —
       шапка там лежит на тёмном снимке, — и на белой подложке пропадал бы. */
    body.site-multplast:not(.mp-home) .header-navigation.mp-stuck a,
    body.site-multplast:not(.mp-home) .header-navigation.mp-stuck .icon-logo {
        color: #002856;
    }
}


/* ── превью ролика YouTube ──────────────────────────────────────────
   Вставка плеера заменена кадром: у части посетителей YouTube не
   открывается вовсе, и на месте ролика оставался серый прямоугольник
   с ошибкой браузера. Кадр лежит у нас, поэтому виден всегда. */
.mp-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0d1520;
    border-radius: 8px;
    overflow: hidden;
}
.mp-video__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mp-video__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 84px;
    height: 84px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 25, 40, .72);
    cursor: pointer;
    transition: transform .15s, background .15s;
}
.mp-video__play:hover { transform: scale(1.06); background: var(--mpf-accent, #4D85C5); }
/* Треугольник «play» — фигурой, чтобы не тянуть картинку. */
.mp-video__play span {
    display: block;
    width: 0;
    height: 0;
    margin: 0 auto;
    margin-left: 34px;
    border-style: solid;
    border-width: 15px 0 15px 24px;
    border-color: transparent transparent transparent #fff;
}
.mp-video__link {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 7px 12px;
    border-radius: 20px;
    background: rgba(15, 25, 40, .72);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
}
.mp-video__link:hover { background: var(--mpf-accent, #4D85C5); color: #fff; }
.mp-video.is-playing { aspect-ratio: auto; background: none; }
.mp-video.is-playing .mp-video__link { position: static; display: inline-block; margin-top: 8px; }