/* ============================================================
   service.css — тема страниц КОНКРЕТНОЙ услуги (tpl9, ~186 стр.).
   Контент НЕ меняем. Токены design-system + переиспользуем uslugi.css
   (отзывы reviews-soc, «ФОТО ПЕРСОНАЛА» page_testimonials, форма) и
   FAQ-аккордеон (initFaq в theme-switcher.js). Здесь — специфика услуги.
   ============================================================ */

.newtemplate { background: var(--ds-bg); font-family: var(--ds-font); color: var(--ds-text); }

/* ---- Единый контейнер по ширине хедера ---- */
.newtemplate .main > .row > [class*="col-"],
.newtemplate .text-cont,
.newtemplate .container-fluid.switch > * {
  max-width: var(--ds-container, 1440px); margin-left: auto; margin-right: auto;
  padding-left: var(--ds-gutter); padding-right: var(--ds-gutter); box-sizing: border-box; float: none;
}

/* ========== 1) ИНТРО-БАННЕР (крошки → H1 → цена → УТП → промо → форма) ========== */
/* легаси-фон fon1.png убираем — идём на фоне страницы. Раньше был скоуп по
   `.main.uslugi` (класс `uslugi` добавляется в tpl9 только если parent=3), но
   тогда страницы городов-детей (parent=260 Московская область и т.п.) шли на
   старом фоне и без правильных отступов. Скоуп расширен на все `.newtemplate .main`. */
.newtemplate .main { background-image: none !important; background: var(--ds-bg); padding: 24px 0 48px; position: relative; }
/* убираем центрирующий offset — контент слева, справа место под промо-бейдж */
.newtemplate .main .col-sm-8.col-sm-offset-2 { margin-left: 0 !important; width: 100% !important; max-width: none !important; }

/* крошки */
.newtemplate .main nav { font-size: var(--ds-body-s); color: var(--ds-text-3); margin: 0 0 14px; }
.newtemplate .main nav a { color: var(--ds-text-3); text-decoration: none; }
.newtemplate .main nav a:hover { color: var(--ds-brand); }

/* h1 в шапке — общий стиль из компонента .page_breadcrumbs (design-system.css). */
/* цена-подзаголовок */
.newtemplate .price-under-h1 { font: var(--ds-fw-medium) var(--ds-body-l)/1.4 var(--ds-font); color: var(--ds-brand); margin: 0 0 26px; }

/* УТП — сетка «иконка в бейдже + текст» (ограничена слева, справа — промо) */
.newtemplate .utp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 36px; margin: 8px 0 22px; max-width: 640px; }
.newtemplate .utp-column { display: contents; }
.newtemplate .utp-item { display: flex; align-items: center; gap: 14px; margin: 0; }
/* легаси utp*.svg прячем — ставим DS-иконки (линейные, как гарантии/страница Услуги),
   каждая под своё преимущество (таргет по легаси-src), в брендовой плашке. */
.newtemplate .utp-item img { display: none; }
.newtemplate .utp-item::before {
  content: ""; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; background-color: var(--ds-brand-soft);
  background-repeat: no-repeat; background-position: center; background-size: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
/* граждане РФ — пользователь */
.newtemplate .utp-item:has(img[src*="utp1"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
/* прибытие в течение 1 часа — часы */
.newtemplate .utp-item:has(img[src*="utp3"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); }
/* физ/юр лица — двое пользователей */
.newtemplate .utp-item:has(img[src*="utp5"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
/* цена фиксируется — замок */
.newtemplate .utp-item:has(img[src*="utp2"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
/* оплата любым способом — карта */
.newtemplate .utp-item:has(img[src*="utp6"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); }
.newtemplate .utp-item p { margin: 0; font: var(--ds-fw-regular) var(--ds-body-m)/1.35 var(--ds-font); color: var(--ds-text); }

/* промо-бейдж «Скидка 15%» — ШИРОКИЙ и НИЗКИЙ (текст в 1-2 строки), поверх фото.
   «Скидка 15%» и описание — в строку, кнопка ниже; так высота минимальна. */
.newtemplate .main_form_promo {
  position: absolute; top: 72px; right: 24px; width: 264px; max-width: 264px;
  padding: 12px 16px; background: var(--ds-brand); color: #fff; border-radius: 12px;
  box-shadow: 0 12px 24px rgba(var(--ds-brand-rgb), .28);
  font: var(--ds-fw-regular) 11px/1.25 var(--ds-font); text-align: center; box-sizing: border-box;
}
.newtemplate .main_form_promo * { color: #fff !important; }
/* Отключаем инлайновый белый «блик»-эллипс `.main_form_promo::before` из шаблона —
   на нашей брендовой плашке он читается как случайное белое пятно у правого угла. */
.newtemplate .main_form_promo::before { content: none !important; display: none !important; }
/* описание — в строку, с пробелами между <p> (иначе слова слипаются) */
.newtemplate .main_form_promo p { margin: 0; display: inline; }
.newtemplate .main_form_promo p::after { content: " "; }
.newtemplate .main_form_promo b, .newtemplate .main_form_promo strong {
  display: block; margin: 0 0 3px; font-size: 15px; line-height: 1.1; font-weight: var(--ds-fw-bold, 700);
}
/* кнопка «Заказать!» — белая на красном, компактная, на всю ширину, текст ровно по центру */
.newtemplate .main_form_promo a, .newtemplate .main_form_promo button,
.newtemplate .main_form_promo .button-magic, .newtemplate .main_form_promo [class*="btn"] {
  display: flex !important; align-items: center !important; justify-content: center !important; text-align: center;
  margin-top: 8px !important; height: 30px !important; width: 100% !important; box-sizing: border-box; padding: 0 !important;
  background: #fff !important; color: #f51d48 !important; border: 0 !important; border-radius: 8px !important;
  font: var(--ds-fw-semibold, 600) 12px/1 var(--ds-font) !important; text-decoration: none; cursor: pointer;
}

/* форма заявки «Оставьте заявку» — 1-в-1 как на Главной (везде одинаковая):
   БЕЗ карточки (прозрачная), поля 56px/radius16, кнопка красная 56px/radius20, ряд. */
.newtemplate .banners_form, .newtemplate .main form.ajax_form {
  display: block; max-width: none; margin-top: 20px;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0;
}
/* сбрасываем bootstrap-колонки внутренней обёртки → flex-ряд */
.newtemplate .banners_form .row.my-row.forms { margin: 0; }
.newtemplate .banners_form .row.my-row.forms > [class*="col-"] {
  width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
  float: none !important; display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px;
}
/* подзаголовок «Оставьте заявку» — на всю строку сверху */
.newtemplate .banners_form .main_form__subtitle {
  flex: 0 0 100%; display: block !important; margin: 0 0 2px;
  font: var(--ds-fw-medium) var(--ds-h4)/1.2 var(--ds-font); color: var(--ds-text);
}
/* поля в ряд: тянутся поровну (малый базис → не переносятся), кнопка — авто */
/* Поля — компонент .ds-field; здесь только раскладка в одну строку баннера. */
.newtemplate .banners_form input:not([type="hidden"]):not([type="checkbox"]):not([type="submit"]),
.newtemplate .banners_form select { flex: 1 1 120px; width: auto; align-self: center; }
/* [type=submit] — компонент .ds-btn; здесь только высота и размер под баннер. */
.newtemplate .banners_form [type="submit"], .newtemplate .banners_form button.theme_button {
  flex: 0 0 auto; width: auto; height: 56px; align-self: center; margin: 0; padding: 0 40px; white-space: nowrap;
}
/* ошибки валидации: одно сообщение на всю строку + подсветка пустых полей */
.newtemplate .banners_form .form-error-msg {
  flex: 0 0 100%; order: 99; margin: 4px 0 0; color: var(--ds-danger); font: var(--ds-fw-medium) var(--ds-body-s)/1.3 var(--ds-font);
}
/* согласие на обработку — компактно, серым, на всю строку.
   Порядок: заголовок → поля → чекбокс → кнопка (order:3 < order:4).
   Чекбокс может быть завёрнут в <div class="form-group">, поэтому order/flex
   ставим и на неё (иначе flex-item = div.form-group и order:0 остаётся). */
.newtemplate .banners_form .checkbox,
.newtemplate .banners_form [class*="agree"],
.newtemplate .banners_form label.small,
.newtemplate .banners_form label.small-legal,
.newtemplate .banners_form .form-group:has(input[type="checkbox"]) {
  flex: 0 0 100%; margin: 8px 0 0; order: 3;
}
.newtemplate .banners_form [type="submit"],
.newtemplate .banners_form button.theme_button { order: 4; }
/* Ряд полей — СЕТКА, а не flex: подсказка валидации «Заполните поле»
   (.field-error-msg, flex-basis:100%) в flex-ряду занимала всю строку и
   выстраивала поля столбиком на весь экран. В сетке подсказка встаёт ПОД
   своим полем (колонка поля = её колонка), ряд полей не ломается. */
@media (min-width: 768px) {
  .newtemplate .banners_form .row.my-row.forms > [class*="col-"] {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 12px; row-gap: 0; align-items: start;
  }
  .newtemplate .banners_form .forms > [class*="col-"] > * { grid-column: 1 / -1; }
  .newtemplate .banners_form .forms > [class*="col-"] > .main_form__subtitle { grid-row: 1; }
  .newtemplate .banners_form .forms > [class*="col-"] > input:not([type="hidden"]):not([type="checkbox"]),
  .newtemplate .banners_form .forms > [class*="col-"] > select { grid-column: auto; grid-row: 2; margin-top: 12px; width: 100%; }
  .newtemplate .banners_form .forms > [class*="col-"] > .field-error-msg { grid-row: 3; margin: 6px 2px 0; }
  .newtemplate .banners_form .forms > [class*="col-"] > input:nth-of-type(2) + .field-error-msg { grid-column: 1; }
  .newtemplate .banners_form .forms > [class*="col-"] > input:nth-of-type(3) + .field-error-msg { grid-column: 2; }
  .newtemplate .banners_form .forms > [class*="col-"] > input:nth-of-type(4) + .field-error-msg { grid-column: 3; }
  .newtemplate .banners_form .forms > [class*="col-"] > .form-group,
  .newtemplate .banners_form .forms > [class*="col-"] > label.small-legal { grid-row: 4; }
  .newtemplate .banners_form .forms > [class*="col-"] > [type="submit"],
  .newtemplate .banners_form .forms > [class*="col-"] > button { grid-row: 5; justify-self: start; margin-top: 12px; }
  .newtemplate .banners_form .forms > [class*="col-"] > .form-error-msg { grid-row: 6; }
}
/* планшет/мобилка: форма в столбик, поля и кнопка на всю ширину */
@media (max-width: 767px) {
  .newtemplate .banners_form { padding: 18px 16px; }
  .newtemplate .banners_form input:not([type="hidden"]):not([type="checkbox"]):not([type="submit"]),
  .newtemplate .banners_form select, .newtemplate .banners_form [type="submit"] { flex: 0 0 100%; width: 100%; }
}

/* ---- ОТСТУПЫ по интро (воздух) ---- */
/* размер и стиль — из компонента */
.newtemplate .main .utp { margin: 14px 0 26px; }
.newtemplate .main noindex { display: block; }
.newtemplate .main .col-sm-8 > noindex:last-of-type { margin: 6px 0 20px; color: var(--ds-text-2); font-size: var(--ds-body-m); }
/* «С нами в команде более 900 компаний…» — почти обычный текст; число — бренд.
   Специфичность 0-3-0 (.newtemplate .main .h1_desc) перебивает базовый .h1_desc
   из старого шаблона без !important. */
.newtemplate .main .h1_desc {
  font: var(--ds-fw-medium) var(--ds-body-l)/var(--ds-body-l-lh) var(--ds-font);
  color: var(--ds-text-2);
  margin: 10px 0 22px;
}
.newtemplate .main .h1_desc span { color: var(--ds-brand); font-weight: var(--ds-fw-bold); }
/* Мобилка — компактнее, чтобы описание влезало над формой без прокрутки. */
@media (max-width: 767px) {
  .newtemplate .main .h1_desc {
    font-size: var(--ds-body-s); line-height: var(--ds-body-s-lh); margin: 8px 0 16px;
  }
}

/* Как на Главной: фото грузчиков справа (декоративно, через ::after), контент слева. */
@media (min-width: 900px) {
  .newtemplate .main::after {
    content: ""; position: absolute; top: 56px; right: var(--ds-gutter); width: 40%; max-width: 520px; height: 430px;
    background: url('/assets/template/newdesign/images/corp/gruzchiki-15.jpg') center/cover no-repeat;
    border-radius: 24px; box-shadow: var(--ds-shadow-card); z-index: 0;
  }
  /* НЕ делаем col-sm-8 позиционированной — иначе бейдж (внутри неё) считает top от
     col-sm-8, а фото — от .main, и на широком экране они расходятся. Держим статичной,
     бейдж якорится к .main (как фото). Контент и фото не пересекаются (padding-right:46%). */
  /* Селектор `> .row > .col-sm-8` (4 класса) — та же специфичность, что у общего
     row-col padding: var(--ds-gutter) выше в файле; порядок src → мы побеждаем. */
  .newtemplate .main > .row > .col-sm-8 { padding-right: 46%; box-sizing: border-box; }
  /* бейдж «Скидка 15%» выходит снизу за фото (до ~593px от верха блока): форма должна
     начинаться ниже него. Высота ряда = как у страницы с УТП (519px) — там ничего не
     меняется, а короткие интро (без УТП: города, часть страниц) больше не прячут поля под бейдж */
  .newtemplate .main > .row { min-height: 519px; }
  .newtemplate .main > .container-fluid { padding-right: var(--ds-gutter); position: relative; z-index: 1; }
  /* привязка к правому краю (как фото max-width:520 right:gutter) — держится на фото
     при любой ширине и выходит снизу за край картинки */
  .newtemplate .main_form_promo { top: 392px !important; right: calc(var(--ds-gutter) + 228px) !important; left: auto !important; bottom: auto !important; z-index: 2; transform: rotate(-5deg) !important; transition: transform .28s ease, box-shadow .28s ease; }
  /* движение + лёгкий подъём при наведении */
  .newtemplate .main_form_promo:hover { transform: rotate(-5deg) translateY(-8px) scale(1.03) !important; box-shadow: 0 18px 36px rgba(var(--ds-brand-rgb), .38) !important; }
  .newtemplate .utp { max-width: none; }
}
@media (max-width: 899px) {
  .newtemplate .main_form_promo { position: static !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; transform: rotate(-2deg) !important; max-width: 340px; width: 100%; margin: 8px auto 24px !important; z-index: auto !important; }
  .newtemplate .utp { grid-template-columns: 1fr; }
}

/* ========== ЕДИНЫЙ ВЕРТИКАЛЬНЫЙ РИТМ СЕКЦИЙ (≈56px, как между первыми блоками) === */
/* + единый ГОРИЗОНТАЛЬНЫЙ отступ var(--ds-gutter) — контент всех блоков выровнен
   по левому/правому краю первого блока (интро-контент отступает на тот же gutter). */
/* «Наши гарантии» в Москве стоит в <noindex> и под это правило не попадает; у городов,
   где блок без <noindex>, он должен выглядеть так же — исключаем его */
.newtemplate > .container.text-cont:not(:has(.our_guarantees)) { margin-top: 56px; padding: 0 var(--ds-gutter); }
.newtemplate > .container-fluid.switch { margin: 56px auto 0; padding-left: var(--ds-gutter); padding-right: var(--ds-gutter); }
.newtemplate > .section_header.bold { margin: 56px 0 24px; padding-left: var(--ds-gutter); padding-right: var(--ds-gutter); }
/* гуттер даёт .container внутри (uslugi.css) — на секции НЕ дублируем (иначе двойной отступ) */
.newtemplate > section.page_testimonials,
.newtemplate > .ls.page_testimonials { margin: 56px 0 0; padding-left: 0; padding-right: 0; }
/* группа «Отзывы» (заголовок → карусель → соц-блок) — единый блок без внутр. разрывов */
.newtemplate > .reviews-carousel_wrapper,
.newtemplate > .reviews-soc__wrapper { margin-top: 0 !important; }
/* карусель без своего заголовка (у городов заголовок «Отзывы» убран) — обычный
   отступ секции, иначе она прилипает к блоку выше («Мы работаем по договору») */
.newtemplate > .reviews-carousel_wrapper:not(.section_header + .reviews-carousel_wrapper) { margin-top: 56px !important; }
@media (max-width: 767px) {
  .newtemplate > .reviews-carousel_wrapper:not(.section_header + .reviews-carousel_wrapper) { margin-top: 40px !important; }
}
@media (max-width: 767px) {
  .newtemplate > .container.text-cont:not(:has(.our_guarantees)),
  .newtemplate > .container-fluid.switch,
  .newtemplate > .section_header.bold,
  .newtemplate > section.page_testimonials,
  .newtemplate > .ls.page_testimonials { margin-top: 40px; }
}
/* форма «Оставьте заявку» — тоже выровнять по краю первого блока (внутри интро).
   Раньше только `.uslugi` (parent=3), теперь для любых потомков (города МО и т.п.). */
.newtemplate .main > .container-fluid { padding-left: var(--ds-gutter); padding-right: var(--ds-gutter); }

/* ========== 1b) БЛОК-ССЫЛКИ «ГРУЗЧИКИ / РАЗНОРАБОЧИЕ» → карточки ========== */
.newtemplate .text-cont .card-row { margin: 4px 0 34px; }
.newtemplate .card-row .row.my-row { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; }
.newtemplate .card-row .row.my-row > [class*="col-"] {
  flex: 1 1 260px; width: auto; max-width: none; padding: 0; margin: 0; float: none;
}
.newtemplate .card-row a,
.newtemplate .card-row a:hover,
.newtemplate .card-row .card .h3,
.newtemplate .card-row .card p { text-decoration: none !important; }
.newtemplate .card-row a { display: block; height: 100%; color: inherit; }
.newtemplate .card-row .card {
  display: flex; flex-direction: column; min-height: 168px; height: 100%; box-sizing: border-box;
  background: var(--ds-surface); border: 1px solid var(--ds-border-soft); border-radius: var(--ds-r-card, 20px);
  padding: 26px; box-shadow: var(--ds-shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* :hover карточки — компонент в design-system.css. */
.newtemplate .card-row .card .h3 {
  font: var(--ds-fw-semibold, 600) var(--ds-h3) / 1.15 var(--ds-font); color: var(--ds-text); letter-spacing: -.01em; margin: 0;
}
.newtemplate .card-row .card .my-d-flex {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin-top: auto; padding-top: 18px;
}
.newtemplate .card-row .card noindex { display: block; }
.newtemplate .card-row .card p { margin: 0; font: var(--ds-fw-regular) var(--ds-body-m) / 1.4 var(--ds-font); color: var(--ds-text-2); }
/* стрелка → кружок бренда, инверсия на ховере */
.newtemplate .card-row .card svg {
  flex: 0 0 auto; width: 44px; height: 44px; padding: 10px; border-radius: 50%;
  background: var(--ds-brand-soft); box-sizing: border-box; transition: background .18s ease;
}
.newtemplate .card-row .card svg path { fill: var(--ds-brand); }
.newtemplate .card-row a:hover .card svg { background: var(--ds-brand); }
.newtemplate .card-row a:hover .card svg path { fill: #fff; }
@media (max-width: 575px) {
  .newtemplate .card-row .row.my-row { flex-direction: column; gap: 14px; }
  /* flex-basis 260px выше в файле рассчитан на row-раскладку (min-width колонки);
     в column-режиме то же значение становится MAIN-axis размером — высота колонки
     фиксируется на 260px независимо от контента. Сбрасываем до auto. */
  .newtemplate .card-row .row.my-row > [class*="col-"] { flex: 0 0 auto; }
  .newtemplate .card-row .card { min-height: 0; padding: 22px; height: auto; }
  /* На десктопе .my-d-flex прижимается вниз (margin-top: auto), между заголовком
     и описанием — воздух. На мобилке карточка компактная — описание сразу под
     заголовком. */
  .newtemplate .card-row .card .my-d-flex { margin-top: 8px; padding-top: 0; }
}

/* .text-cont — контентная типографика описана компонентом .ds-typo/.text-cont в design-system.css. */

/* ---- Картинки в контентных секциях услуги (галерея «Фото выполненных работ»
   и просто фото между абзацами). Раньше рендерились в натуральный 800×1067,
   ломая раскладку. Ужимаем, сглаживаем углы, лёгкая тень. Максимальная
   ширина 640px — фото не растягивается на всю колонку контента. */
.newtemplate .text-cont .row > [class*="col-"] > img,
.newtemplate .text-cont > .row > [class*="col-"] > img,
.newtemplate .text-cont .row > [class*="col-"] > p > img,
.newtemplate .container.text-cont img:not(.utp img):not([src*="/pixel/"]) {
  display: block; width: 100%; max-width: 640px; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--ds-r-card, 20px);
  box-shadow: var(--ds-shadow-soft, 0 8px 24px rgba(2, 6, 23, .08));
  margin: 0 auto;
}
/* контейнер-колонка тоже одинаковый — вертикальные отступы под ряд фото */
.newtemplate .text-cont .row > .col-sm-6.col-xs-12 { padding-top: 12px; padding-bottom: 12px; }
/* пара картинок «Фото выполненных работ» разложена в плоском .text как
   .col-sm-6 + .col-sm-6 без .row-обёртки — Bootstrap не срабатывает и обе
   картинки идут во всю ширину. На десктопе кладём их в один ряд. */
@media (min-width: 768px) {
  .newtemplate .text-cont .col-sm-6.col-xs-12.my-py-3 {
    display: inline-block; vertical-align: top;
    width: calc(50% - 12px); box-sizing: border-box;
    margin: 12px 4px; padding: 0;
  }
  .newtemplate .text-cont .col-sm-6.col-xs-12.my-py-3 + .col-sm-6.col-xs-12.my-py-3 { margin-left: 8px; }
}

/* «Закажите услуги грузчиков в …» — секция H2 + текст + одиночная картинка
   собирается theme-switcher.js в .service-media-block, здесь только grid. */
.service-media-block { margin: 24px 0; }
.service-media-block > .row { margin: 0; }
.service-media-block > .row > [class*="col-"] { padding: 0; }
.service-media-block > .row > [class*="col-"] > p { margin: 0; }
@media (min-width: 900px) {
  .service-media-block {
    display: grid; gap: 8px 32px; align-items: start;
    grid-template-columns: minmax(0, 1fr) min(45%, 480px);
    grid-template-areas:
      "h h"
      "t i";
  }
  .service-media-block > h2, .service-media-block > h3 { grid-area: h; margin-bottom: 12px; }
  .service-media-block > p { grid-area: t; margin: 0; }
  .service-media-block > .row { grid-area: i; }
}
@media (max-width: 640px) {
  .newtemplate .text-cont .row > [class*="col-"] > img,
  .newtemplate .container.text-cont img:not(.utp img):not([src*="/pixel/"]) {
    aspect-ratio: 3 / 2; border-radius: var(--ds-r-md, 16px);
  }
}

/* ---- Таблица цен — аккуратная лаконичная таблица (скруглённая рамка, сетка) ---- */
.newtemplate .text-cont table.table {
  width: 100% !important; border-collapse: separate; border-spacing: 0; margin: 12px 0 28px; table-layout: auto;
  background: var(--ds-surface); border: 1px solid var(--ds-border-soft); border-radius: 14px; overflow: hidden;
  font-family: var(--ds-font); font-size: var(--ds-body-m);
}
.newtemplate .text-cont table.table th,
.newtemplate .text-cont table.table td {
  padding: 14px 22px; text-align: left; vertical-align: middle; color: var(--ds-text);
  border: 0; border-bottom: 1px solid var(--ds-border-soft); border-right: 1px solid var(--ds-border-soft);
  font-size: var(--ds-body-m) !important; line-height: 1.4 !important;
}
/* значения внутри ячеек (ссылки/жирный текст) — тоже обычным размером */
.newtemplate .text-cont table.table td a,
.newtemplate .text-cont table.table td b,
.newtemplate .text-cont table.table td .bold,
.newtemplate .text-cont table.table td span { font-size: var(--ds-body-m) !important; line-height: 1.4 !important; }
.newtemplate .text-cont table.table th:last-child,
.newtemplate .text-cont table.table td:last-child { border-right: 0; }
.newtemplate .text-cont table.table tbody tr:last-child td { border-bottom: 0; }
/* Шапка — цельная светло-брендовая полоса (у неё <th> в 1-й строке tbody, без thead) */
.newtemplate .text-cont table.table thead th,
.newtemplate .text-cont table.table tr:first-child th,
.newtemplate .text-cont table.table th {
  background: var(--ds-brand-soft); color: var(--ds-brand); font-weight: var(--ds-fw-semibold, 600);
  font-size: var(--ds-body-s); text-transform: uppercase; letter-spacing: .02em;
}
/* строки — все белые, ховер — лёгкая подсветка (без серой зебры) */
.newtemplate .text-cont table.table td { background: var(--ds-surface); }
.newtemplate .text-cont table.table-striped tbody tr:nth-child(odd) td { background: var(--ds-surface); }
.newtemplate .text-cont table.table tbody tr:not(:first-child):hover td { background: var(--ds-brand-soft); }
/* весь текст в ячейках — обычный вес (убираем legacy .bold) */
.newtemplate .text-cont table.table td,
.newtemplate .text-cont table.table td.bold,
.newtemplate .text-cont table.table td b,
.newtemplate .text-cont table.table td strong { font-weight: var(--ds-fw-regular, 400) !important; }
/* цена — брендовый акцент ТОЛЬКО цветом, без жирного */
.newtemplate .text-cont table.table td:nth-child(2) { color: var(--ds-brand); white-space: nowrap; }
/* последняя колонка (кнопка «Заказать») */
.newtemplate .text-cont table.table th:last-child,
.newtemplate .text-cont table.table td:last-child { text-align: center; white-space: nowrap; }
/* .theme_button — компонент .ds-btn; здесь только компактный размер (38px). */
.newtemplate .text-cont table.table td a.theme_button { height: 38px; padding: 0 22px; white-space: nowrap; }
/* обёртка таблицы — без серого фона, скролл при узком экране */
.newtemplate .text-cont .table-wrapper { background: transparent; overflow-x: auto; margin: 0 0 28px; }

/* ========== 2b) БЛОК «Предлагаем услуги во всех городах МО» ===============
   Разметка страниц городов МО (parent=260): <h2>+ 80+ ссылок .theme_button
   прямо в блоке .sities_mo_block без обёртки. Легаси-стиль превращает всё
   в «сплошняк» из красных кнопок. Делаем деликатные chip-теги в контейнере,
   как на Главной (по левому/правому краю первого блока). */
.newtemplate .sities_mo_block {
  max-width: var(--ds-container, 1440px); margin: 56px auto 0;
  padding-left: var(--ds-gutter); padding-right: var(--ds-gutter); box-sizing: border-box;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.newtemplate .sities_mo_block > h2 {
  flex: 0 0 100%; margin: 0 0 8px;
  font: var(--ds-fw-medium) var(--ds-h2)/var(--ds-h2-lh) var(--ds-font); color: var(--ds-text);
}
/* сами ссылки-города: перебиваем .theme_button (легаси красная кнопка) на chip */
.newtemplate .sities_mo_block > a.theme_button {
  display: inline-flex; align-items: center; height: auto; min-height: 0;
  padding: 8px 14px; margin: 0; border-radius: 999px;
  background: var(--ds-surface) !important; color: var(--ds-text) !important;
  border: 1px solid var(--ds-border-soft); box-shadow: none;
  font: var(--ds-fw-regular) var(--ds-body-s)/1.2 var(--ds-font);
  text-decoration: none; text-transform: none; letter-spacing: 0;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.newtemplate .sities_mo_block > a.theme_button:hover,
.newtemplate .sities_mo_block > a.theme_button:focus-visible {
  background: var(--ds-brand) !important; color: #fff !important;
  border-color: var(--ds-brand);
}
@media (max-width: 767px) {
  .newtemplate .sities_mo_block { margin-top: 40px; gap: 8px; }
  .newtemplate .sities_mo_block > a.theme_button { padding: 8px 12px; }
}

/* ========== 3) FAQ — 1-в-1 как на Главной ==========
   Вид/иконка/hover/is-open берём из ГЛОБАЛЬНЫХ .faq-* (services.css, как на Главной).
   Разметка услуги без <span> (текст вопроса прямо в .faq-answer, ответ в <p>) —
   поэтому подгоняем только текст: раскладку и + иконку даёт глобальный слой. */
.newtemplate .faq-item .faq-answer {
  justify-content: space-between; font: var(--ds-fw-medium) var(--ds-body-l)/1.4 var(--ds-font); color: var(--ds-text);
}
.newtemplate .faq-item .faq-question p {
  display: block; padding: 2px 24px 22px; margin: 0;
  font: var(--ds-fw-regular) var(--ds-body-m)/var(--ds-body-m-lh) var(--ds-font); color: var(--ds-text-2);
}

/* ========== 4) КАЛЬКУЛЯТОР «Рассчитайте стоимость» — кастомная форма под тему ===== */
/* фон/рамка/радиус/тень — компонент .ds-card. */
:is(.newtemplate, section.ls) .pixel-calculator {
  padding: 30px 34px; margin: 24px 0 28px; width: 100%; box-sizing: border-box;
}
.newtemplate .calc__title { font: var(--ds-fw-medium) var(--ds-h3)/var(--ds-h3-lh) var(--ds-font) !important; color: var(--ds-text) !important; margin: 0 0 22px !important; }
/* декоративные иконки полей калькулятора (/pixel/app/img/*.svg — name, dropper и т.п.)
   рендерятся 400px без своих стилей — убираем (в нашей теме иконок в полях нет) */
:is(.newtemplate, section.ls) .pixel-calculator .calc__icon,
:is(.newtemplate, section.ls) .pixel-calculator .calc__down,
:is(.newtemplate, section.ls) .pixel-calculator .calc__input > img,
:is(.newtemplate, section.ls) .pixel-calculator label img { display: none !important; }
/* РАСКЛАДКА: 2 внешние колонки — поля слева, результат+кнопка справа (форма
   влезает на экран). Внутри левой поля тоже в 2 под-колонки. */
:is(.newtemplate, section.ls) .pixel-calculator form, :is(.newtemplate, section.ls) .pixel-calculator .calc,
:is(.newtemplate, section.ls) .pixel-calculator .calc__wrap, :is(.newtemplate, section.ls) .pixel-calculator .calc__block, :is(.newtemplate, section.ls) .pixel-calculator .calc__content { display: block; }
:is(.newtemplate, section.ls) .pixel-calculator .calc__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 30px; align-items: start; }
:is(.newtemplate, section.ls) .pixel-calculator .calc__left { display: block; min-width: 0; }
:is(.newtemplate, section.ls) .pixel-calculator .calc__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; align-items: start; }
/* инпут всегда сверху группы → парные поля на одной линии; подпись/ссылка идёт ниже */
:is(.newtemplate, section.ls) .pixel-calculator .calc__group { justify-content: flex-start; }
:is(.newtemplate, section.ls) .pixel-calculator .calc__group { display: flex; flex-direction: column; gap: 8px; margin: 0; min-width: 0; }
/* широкие/текстовые группы (согласие, длинные подписи, чекбоксы-инфо) — на всю ширину */
:is(.newtemplate, section.ls) .pixel-calculator .calc__fields > .calc__group:has(.calc__checkbox),
:is(.newtemplate, section.ls) .pixel-calculator .calc__fields > .calc__additional,
:is(.newtemplate, section.ls) .pixel-calculator .calc__fields > .calc__group.calc__wide { grid-column: 1 / -1; }
/* подпись/вопрос над полем (Как узнать…, Проверить адрес…) — мелким серым */
:is(.newtemplate, section.ls) .pixel-calculator .calc__group > span:first-child,
:is(.newtemplate, section.ls) .pixel-calculator .calc__group > .calc__label,
:is(.newtemplate, section.ls) .pixel-calculator .calc__additional > .calc__toggle,
:is(.newtemplate, section.ls) .pixel-calculator .pixelCalcToggle { font: var(--ds-fw-medium) var(--ds-body-s)/1.3 var(--ds-font); color: var(--ds-text-3); margin: 0; }
/* поле-обёртка (label вокруг инпута) — блок 56px, инпут на всю ширину.
   Одинаковая высота у .calc__input и .pixelCalcChanger → подписи-ссылки под
   соседними полями («Проверить адрес…» и «Как узнать…») на одной линии. */
:is(.newtemplate, section.ls) .pixel-calculator .calc__input { display: flex; align-items: stretch; margin: 0; position: relative; line-height: 0; }
:is(.newtemplate, section.ls) .pixel-calculator .calc__input > * { flex: 1 1 auto; min-width: 0; line-height: normal; }
:is(.newtemplate, section.ls) .pixel-calculator .calc__group > .calc__input,
:is(.newtemplate, section.ls) .pixel-calculator .calc__group > .pixelCalcChanger { height: var(--ds-field-h); box-sizing: border-box; }
:is(.newtemplate, section.ls) .pixel-calculator .pixelCalcChanger { display: block; }
:is(.newtemplate, section.ls) .pixel-calculator .pixelCalcChanger input { height: var(--ds-field-h); }
/* сами подписи-ссылки под полем — фикс-высота, чтобы ряд не «плясал» */
:is(.newtemplate, section.ls) .pixel-calculator .calc__group > .calc__link { margin-top: 8px; min-height: 20px; }
/* Поля калькулятора — компонент .ds-field (класс в чанке формы). */
/* чекбокс — бокс рядом с текстом (input скрыт, .border = кастом-бокс, CSS-галочка) */
/* Чекбокс — компонент .ds-checkbox (нативный). Раньше здесь был самодельный
   бокс 22×22 с CSS-галочкой: он выравнивался иначе, чем чекбоксы остальных форм.
   Осталась только декоративная обёртка .border из разметки — её прячем. */
:is(.newtemplate, section.ls) .pixel-calculator .calc__checkbox .border { display: none; }
:is(.newtemplate, section.ls) .pixel-calculator .calc__checkbox .text { flex: 1 1 auto; }
/* счётчик грузчиков (.calc__changer с +/-) — компактно */
:is(.newtemplate, section.ls) .pixel-calculator .calc__changer { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
:is(.newtemplate, section.ls) .pixel-calculator .calc__changer > * { flex: 0 0 auto; }
/* ПРАВАЯ колонка — результат + кнопка, липкая */
:is(.newtemplate, section.ls) .pixel-calculator .calc__right { display: block; position: sticky; top: 20px; }
/* карточка результата — ОДНА (без блока в блоке): фон только у .calc__result */
:is(.newtemplate, section.ls) .pixel-calculator .calc__result {
  background: linear-gradient(160deg, var(--ds-brand-soft) 0%, var(--ds-surface) 100%);
  border: 1px solid var(--ds-brand-soft-2, #fecdd3); border-radius: 18px; padding: 24px 24px; margin: 0 0 16px;
}
:is(.newtemplate, section.ls) .pixel-calculator .calc__result .result { background: transparent; border: 0; padding: 0; margin: 0; }
:is(.newtemplate, section.ls) .pixel-calculator .result__title { font: var(--ds-fw-medium) var(--ds-body-m)/1.3 var(--ds-font); color: var(--ds-text-2); margin: 0 0 4px; }
:is(.newtemplate, section.ls) .pixel-calculator .result__price { font: var(--ds-fw-bold, 700) var(--ds-h3)/1.1 var(--ds-font); color: var(--ds-brand); margin: 0 0 12px; }
/* параметры расчёта — выжимка по пунктам, каждый с новой строки + буллет */
:is(.newtemplate, section.ls) .pixel-calculator .result__param, :is(.newtemplate, section.ls) .pixel-calculator .result__text {
  font: var(--ds-fw-regular) var(--ds-body-s)/1.5 var(--ds-font); color: var(--ds-text-2); margin: 12px 0 0;
  padding-top: 12px; border-top: 1px solid var(--ds-brand-soft-2, #fecdd3);
}
:is(.newtemplate, section.ls) .pixel-calculator .result__param > span, :is(.newtemplate, section.ls) .pixel-calculator .result__text > span {
  display: block; position: relative; padding: 4px 0 4px 18px; color: var(--ds-text); font-size: var(--ds-body-s); line-height: 1.4;
}
:is(.newtemplate, section.ls) .pixel-calculator .result__param > span::before, :is(.newtemplate, section.ls) .pixel-calculator .result__text > span::before {
  content: ""; position: absolute; left: 3px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--ds-brand);
}
/* кнопка «Рассчитать» — красная, авто-ширина (как «Отправить» на Главной).
   Исключаем button.gpm-select__trigger — это триггер кастомного дропдауна (компонент). */
:is(.newtemplate, section.ls) .pixel-calculator .calc__button,
:is(.newtemplate, section.ls) .pixel-calculator button[type="submit"],
:is(.newtemplate, section.ls) .pixel-calculator input[type="submit"],
:is(.newtemplate, section.ls) .pixel-calculator .theme_button {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 56px; padding: 0 28px;
  border: 0; border-radius: 16px; background: var(--ds-brand); color: var(--ds-on-brand); cursor: pointer;
  font: var(--ds-fw-medium) var(--ds-body-m)/1 var(--ds-font); text-decoration: none; transition: background .15s ease;
}
:is(.newtemplate, section.ls) .pixel-calculator .calc__button:hover,
:is(.newtemplate, section.ls) .pixel-calculator button[type="submit"]:hover,
:is(.newtemplate, section.ls) .pixel-calculator input[type="submit"]:hover,
:is(.newtemplate, section.ls) .pixel-calculator .theme_button:hover {
  background: var(--ds-brand-hover); color: var(--ds-on-brand);
}
/* КАСТОМНЫЙ select — свой шеврон, без нативной стрелки */
:is(.newtemplate, section.ls) .pixel-calculator select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding-right: 46px;
  background-color: var(--ds-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 16px;
}
:is(.newtemplate, section.ls) .pixel-calculator select::-ms-expand { display: none; }
/* .gpm-select в калькуляторе — компонент .pixel-calculator .gpm-select в design-system.css. */

/* «Проверить адрес на карте?», «Как узнать, сколько нужно рабочих?» — это ССЫЛКИ */
:is(.newtemplate, section.ls) .pixel-calculator .calc__link,
:is(.newtemplate, section.ls) .pixel-calculator .calc__link a,
:is(.newtemplate, section.ls) .pixel-calculator .calc__link .text,
:is(.newtemplate, section.ls) .pixel-calculator .calc__group > .calc__link span {
  color: var(--ds-brand) !important; font: var(--ds-fw-regular) var(--ds-body-s)/1.35 var(--ds-font);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
:is(.newtemplate, section.ls) .pixel-calculator .calc__link:hover,
:is(.newtemplate, section.ls) .pixel-calculator .calc__link a:hover { color: var(--ds-brand-hover) !important; }

/* «Дополнительно нужен автомобиль»: [☑] текст [ⓘ], пояснение — в тултипе под иконкой */
:is(.newtemplate, section.ls) .pixel-calculator .calc__checkbox .text.flex,
:is(.newtemplate, section.ls) .pixel-calculator .calc__checkbox .text { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; }
/* мобилка: чекбокс + текст «Я согласен с …» в одной строке — иначе текст 300px не
   влезает в остаточные 277px и flex-wrap:wrap ронял его под чекбокс. */
:is(.newtemplate, section.ls) .pixel-calculator label.calc__checkbox { flex-wrap: nowrap; align-items: center; }
/* Триггер кастомного дропдауна — это <button>, и правило .ajax_form button {margin-top:12px}
   опускало «Время начала работ» на 12px ниже «Даты начала работ». Обнуляем маргин. */
:is(.newtemplate, section.ls) .pixel-calculator .gpm-select__trigger { margin-top: 0; margin-bottom: 0; }
:is(.newtemplate, section.ls) .pixel-calculator .question { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; cursor: help; }
:is(.newtemplate, section.ls) .pixel-calculator .question img { display: none !important; }
:is(.newtemplate, section.ls) .pixel-calculator .question::before {
  content: "i"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--ds-brand-soft); color: var(--ds-brand); font: italic 700 12px/1 var(--ds-font);
}
:is(.newtemplate, section.ls) .pixel-calculator .question:hover::before { background: var(--ds-brand); color: #fff; }
:is(.newtemplate, section.ls) .pixel-calculator .question .area {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: 240px; max-width: 70vw; background: #0f172a; color: #fff !important; padding: 10px 12px; border-radius: 10px;
  font: var(--ds-fw-regular) var(--ds-body-s)/1.4 var(--ds-font); text-align: left; text-decoration: none;
  opacity: 0; visibility: hidden; transition: opacity .15s ease; z-index: 30; pointer-events: none;
}
:is(.newtemplate, section.ls) .pixel-calculator .question .area::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #0f172a;
}
:is(.newtemplate, section.ls) .pixel-calculator .question:hover .area, :is(.newtemplate, section.ls) .pixel-calculator .question:focus-within .area { opacity: 1; visibility: visible; }

/* невалидное поле — красная рамка */
/* сообщение об ошибке под полями калькулятора */
:is(.newtemplate, section.ls) .pixel-calculator .calc-error-msg { margin: 12px 0 0; color: var(--ds-danger); font: var(--ds-fw-medium) var(--ds-body-s)/1.35 var(--ds-font); }
/* воздух между группами доп.информации (в т.ч. «Окончательная скидка…» ↔ авто) */
:is(.newtemplate, section.ls) .pixel-calculator .calc__info-container > * { margin-bottom: 16px; }
:is(.newtemplate, section.ls) .pixel-calculator .calc__info-container > *:last-child { margin-bottom: 0; }
:is(.newtemplate, section.ls) .pixel-calculator .calc__group:has(#pixelCalcCar) { margin-top: 6px; }

/* «Дополнительная информация» — свёрнута по умолчанию, тоггл-бар + кастомная стрелка.
   JS (.pixelCalcToggle) вешает класс .active → показываем .calc__info. */
:is(.newtemplate, section.ls) .pixel-calculator .calc__additional { display: block; }
:is(.newtemplate, section.ls) .pixel-calculator .calc__additional .calc__toggle, :is(.newtemplate, section.ls) .pixel-calculator .pixelCalcToggle {
  display: flex !important; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; user-select: none;
  padding: 14px 18px; margin: 0; background: var(--ds-bg); border: 1px solid var(--ds-border-soft); border-radius: 14px;
}
:is(.newtemplate, section.ls) .pixel-calculator .calc__additional .calc__toggle .title {
  font: var(--ds-fw-medium) var(--ds-body-m)/1.2 var(--ds-font) !important; color: var(--ds-text) !important; margin: 0;
}
/* убираем картинку-стрелку dropper-big.svg, рисуем свой шеврон */
:is(.newtemplate, section.ls) .pixel-calculator .calc__additional .calc__toggle .toggle { position: relative; width: 22px; height: 22px; flex: 0 0 auto; }
:is(.newtemplate, section.ls) .pixel-calculator .calc__additional .calc__toggle .toggle img { display: none !important; }
:is(.newtemplate, section.ls) .pixel-calculator .calc__additional .calc__toggle .toggle::after {
  content: ""; position: absolute; left: 5px; top: 4px; width: 9px; height: 9px;
  border-right: 2px solid var(--ds-brand); border-bottom: 2px solid var(--ds-brand);
  transform: rotate(45deg); transition: transform .22s ease;
}
:is(.newtemplate, section.ls) .pixel-calculator .pixelCalcToggle.active .toggle::after { transform: rotate(-135deg); top: 8px; }
/* контент доп.инфо — скрыт по умолчанию, раскрывается при .active */
:is(.newtemplate, section.ls) .pixel-calculator .calc__additional .calc__info,
:is(.newtemplate, section.ls) .pixel-calculator .calc__additional .pixelCalcTab { display: none; margin-top: 14px; }
:is(.newtemplate, section.ls) .pixel-calculator .pixelCalcToggle.active ~ .calc__info,
:is(.newtemplate, section.ls) .pixel-calculator .pixelCalcToggle.active ~ .pixelCalcTab { display: block; }

@media (max-width: 860px) {
  :is(.newtemplate, section.ls) .pixel-calculator .calc__grid { grid-template-columns: 1fr; }
  :is(.newtemplate, section.ls) .pixel-calculator .calc__right { position: static; margin-top: 22px; }
  /* На мобилке порядок: поля → чекбокс «согласия» → блок цены с кнопкой.
     В DOM согласие идёт последним; на десктопе оно ниже, чекбокс над кнопкой
     через layout грида. На узком экране колонки разворачиваются в стек — иначе
     кнопка «Рассчитать» встаёт перед согласием (пользователю не привычно). */
  :is(.newtemplate, section.ls) .pixel-calculator .calc__grid > .calc__group { order: 2; margin-top: 12px; }
  :is(.newtemplate, section.ls) .pixel-calculator .calc__grid > .calc__right { order: 3; }
}
@media (max-width: 560px) {
  :is(.newtemplate, section.ls) .pixel-calculator .calc__fields { grid-template-columns: 1fr; }
}
/* чекбоксы калькулятора (в т.ч. согласие на политику) — многострочный текст ровно
   рядом с боксом (не по центру) */
:is(.newtemplate, section.ls) .pixel-calculator .calc__checkbox .text, :is(.newtemplate, section.ls) .pixel-calculator .calc__checkbox .text.flex { align-items: flex-start; }

/* ---- КАСТОМНЫЙ КАЛЕНДАРЬ (jQuery UI datepicker, свой CSS вместо удалённого ui.css) ---- */
/* по умолчанию скрыт (jQuery UI при открытии ставит инлайн display:block) — иначе висит пустой белой плашкой внизу */
#ui-datepicker-div { display: none; position: absolute; }
#ui-datepicker-div.ui-datepicker {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 16px;
  box-shadow: 0 20px 50px rgba(2, 6, 23, .18); padding: 16px; width: auto !important;
  font-family: var(--ds-font); z-index: 1300; margin-top: 6px;
}
.ui-datepicker .ui-datepicker-header { position: relative; background: transparent; border: 0; padding: 0 0 12px; }
.ui-datepicker .ui-datepicker-title { text-align: center; font: var(--ds-fw-medium) var(--ds-body-m)/1 var(--ds-font); color: var(--ds-text); text-transform: capitalize; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
  position: absolute; top: -4px; width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  background: var(--ds-bg); overflow: hidden; text-indent: -9999px;
}
.ui-datepicker .ui-datepicker-prev { left: 0; } .ui-datepicker .ui-datepicker-next { right: 0; }
.ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { background: var(--ds-brand-soft); }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: none; }
.ui-datepicker .ui-datepicker-prev::after, .ui-datepicker .ui-datepicker-next::after {
  content: ""; position: absolute; top: 11px; width: 8px; height: 8px; border-right: 2px solid var(--ds-brand); border-bottom: 2px solid var(--ds-brand); text-indent: 0;
}
.ui-datepicker .ui-datepicker-prev::after { left: 13px; transform: rotate(135deg); }
.ui-datepicker .ui-datepicker-next::after { right: 13px; transform: rotate(-45deg); }
.ui-datepicker table.ui-datepicker-calendar { border-collapse: collapse; width: 100%; margin: 0; }
.ui-datepicker .ui-datepicker-calendar th { font: var(--ds-fw-medium) var(--ds-body-s)/1 var(--ds-font); color: var(--ds-text-3); padding: 6px 0; text-align: center; }
.ui-datepicker .ui-datepicker-calendar td { padding: 2px; text-align: center; }
.ui-datepicker .ui-datepicker-calendar td a, .ui-datepicker .ui-datepicker-calendar td span {
  display: block; width: 38px; height: 38px; line-height: 38px; text-align: center; border-radius: 9px;
  text-decoration: none; color: var(--ds-text); font-size: var(--ds-body-s); border: 0;
}
.ui-datepicker .ui-datepicker-calendar td a:hover, .ui-datepicker .ui-datepicker-calendar td a.ui-state-hover { background: var(--ds-brand-soft); color: var(--ds-brand); }
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active, .ui-datepicker .ui-datepicker-calendar td .ui-state-active { background: var(--ds-brand); color: #fff; }
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a { box-shadow: inset 0 0 0 1px var(--ds-brand); color: var(--ds-brand); }
.ui-datepicker .ui-datepicker-calendar td.ui-state-disabled span { color: var(--ds-text-3); opacity: .45; }

/* контентные фото в статье (напр. под «помощь в любое время») — компактнее */
.newtemplate .text-cont p img, .newtemplate .text-cont > img {
  max-width: 340px; width: 100%; height: auto; border-radius: var(--ds-r-md, 16px); display: block; margin: 8px 0 22px;
}

/* ========== 4b) ТАБЫ услуг (.switch) — как на Корпоративной =========
   Подчёркнутые вкладки + активная панель 2 колонки (текст + фото справа).
   Порт из corporate.css, тема КРАСНАЯ (var(--ds-brand) на услуге = красный). */
.newtemplate .container-fluid.switch { margin: 56px auto 0; padding: 8px var(--ds-gutter) 24px; }
/* .my-container-* — компонент */
.newtemplate .container-fluid.switch > h2,
.newtemplate .switch .my-container-lg > h2 { font: var(--ds-fw-medium) var(--ds-h2)/var(--ds-h2-lh) var(--ds-font); color: var(--ds-text); margin: 0 0 20px; }
/* навигация табов — подчёркнутые вкладки */
/* .switch .nav-pills — компонент табов в design-system.css. */

/* панели: показываем только активную */
.newtemplate .switch .tab-content { padding: 0; }
/* фон/рамка/радиус — компонент .ds-card. */
.newtemplate .switch .tab-content > .tab-pane,
.newtemplate .switch .tab-pane { display: none; background-image: none; padding: 28px 30px; margin: 0; }
.newtemplate .switch .tab-pane.active,
.newtemplate .switch .tab-pane.in.active {
  display: grid; grid-template-columns: 1fr minmax(260px, 38%); gap: 28px; align-items: stretch;
}
.newtemplate .switch .tab-pane > .tab,
.newtemplate .switch .tab-pane > * { grid-column: 1; }
.newtemplate .switch .tab-pane h2, .newtemplate .switch .tab-pane h3 { font: var(--ds-fw-medium) var(--ds-h4)/var(--ds-h4-lh) var(--ds-font); color: var(--ds-text); margin: 0 0 12px; }
.newtemplate .switch .tab-pane p { font: var(--ds-fw-regular) var(--ds-body-m)/1.7 var(--ds-font); color: var(--ds-text-2); margin: 0 0 12px; }
.newtemplate .switch .tab-pane b { color: var(--ds-brand); font-weight: var(--ds-fw-semibold, 600); }
/* фото услуги — справа сбоку панели (те же фото, что на корп).
   background-position: center 20% — фокус чуть выше центра, чтобы верх кадра
   (обычно голова/плечи грузчиков) не срезался при обрезке под аспект контейнера. */
.newtemplate .switch .tab-pane::before {
  content: ""; grid-column: 2; grid-row: 1; align-self: stretch; min-height: 280px; margin: 0;
  border-radius: var(--ds-r-md, 16px); background-repeat: no-repeat; background-size: cover;
  background-position: center 20%;
  background-color: var(--ds-brand-soft);
}
/* Фото вкладки — по ПОЗИЦИИ вкладки, а не по id (на «Грузчики» id pills-services/storage/workers,
   на прочих услугах — pills-tab1/2/3; позиционный селектор покрывает все страницы). */
.newtemplate .switch .tab-pane::before { background-image: url('/assets/template/newdesign/images/corp/gruzchiki-17.jpg'); }
.newtemplate .switch .tab-content > .tab-pane:nth-of-type(2)::before { background-image: url('/assets/template/newdesign/images/corp/gruzchiki-20.jpg'); }
.newtemplate .switch .tab-content > .tab-pane:nth-of-type(3)::before { background-image: url('/assets/template/newdesign/images/corp/gruzchiki-15.jpg'); }
/* строка фич .spans — тегами-пилюлями */
.newtemplate .switch .tab-pane .spans { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; padding: 0; }
/* .spans > span — компонент .ds-badge (алиас). */
.newtemplate .switch .tab-pane .spans > span span { display: inline; padding: 0; background: none; border: 0; color: inherit; font: inherit; }
/* убираем тоггл «Подробнее» + чекбокс — описание показываем всегда */
.newtemplate .switch .tab-pane .change-text,
.newtemplate .switch .tab-pane input#button,
.newtemplate .switch .tab-pane input[type="checkbox"] { display: none !important; }
.newtemplate .switch .tab-pane .hiddenly { display: block !important; margin: 0 0 12px; }
/* a.button — компонент .ds-btn; здесь только раскладка/отступ. */
.newtemplate .switch .tab-pane a.button, .newtemplate .switch .tab-pane .button { margin-top: 12px; padding: 12px 28px; }
@media (max-width: 767px) {
  /* мобилка табов — общее правило в компоненте */
  .newtemplate .switch .nav-pills::-webkit-scrollbar { display: none; }
  .newtemplate .switch .nav-pills > li { flex: 0 0 auto; }
  .newtemplate .switch .nav-pills > li > a,
  .newtemplate .switch .nav-pills .nav-link {
    white-space: nowrap; padding: 10px 14px; font-size: var(--ds-body-m);
  }
  .newtemplate .switch .tab-pane.active, .newtemplate .switch .tab-pane.in.active { grid-template-columns: 1fr; }
  .newtemplate .switch .tab-pane::before { grid-column: 1; grid-row: auto; min-height: 200px; }
}

/* ========== 4c) «Возможно, Вас заинтересует» — теги-плитки как на Корпоративной ===== */
.newtemplate .tags-cloud { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin: 14px 0 8px; }
/* .tags-cloud a — компонент .ds-badge. */

/* .solution — компонент в design-system.css. Своих правил не требуется. */

/* «Наш автопарк» — компонент .autopark в design-system.css (включая фото машин). */

/* нативная раскладка slick (её удалили вместе со slick.css) */

@media (max-width: 600px) { .letters { margin-bottom: 40px; } .letters .slider-item { padding: 0 4px; } .letters .let-img { height: 340px; } }

/* ========== 4g) «Мы работаем по договору» (.contract-container) — как corp-dogovor ==== */
.contract-container.contract {
  max-width: var(--ds-container, 1440px); margin: 56px auto 0; padding: 0 var(--ds-gutter); box-sizing: border-box;
}
.contract-container .my-container-lg { max-width: none; margin: 0; padding: 0; }
.contract-container .row.my-row { margin: 0; }
.contract-container .col-xs-12.right {
  background: linear-gradient(135deg, var(--ds-brand-soft) 0%, var(--ds-surface) 60%) !important;
  border: 1px solid var(--ds-brand-soft-2, #fecdd3); border-radius: var(--ds-r-card, 20px);
  padding: 36px 40px !important; width: 100%; max-width: none; box-sizing: border-box; position: relative; overflow: hidden;
}
.contract-container .col-xs-12.right .h2, .contract-container .col-xs-12.right p.h2 {
  font: var(--ds-fw-medium) var(--ds-h2)/var(--ds-h2-lh) var(--ds-font); color: var(--ds-text); margin: 0 0 14px;
}
.contract-container .con-text {
  color: var(--ds-text-2); font: var(--ds-fw-regular) var(--ds-body-m)/1.6 var(--ds-font); margin: 0 0 22px; max-width: 640px;
}
.contract-container .link-contract {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 12px 12px 0; padding: 12px 20px; border-radius: var(--ds-btn-r);
  border: 1px solid var(--ds-brand); color: var(--ds-brand); background: transparent; text-decoration: none;
  font: var(--ds-fw-medium) var(--ds-body-m)/1 var(--ds-font); transition: background .15s ease, color .15s ease;
}
.contract-container .link-contract:hover { background: var(--ds-brand); color: #fff; }
/* Кнопка «Отправить договор» — компонент .ds-btn; здесь только отступ. */
.contract-container .button-red { margin-top: 10px; }
/* картинка договора справа (как corp), убираем легаси-фон fon22.png */
@media (min-width: 900px) {
  .contract-container .col-xs-12.right { padding-right: 500px !important; }
  .contract-container .col-xs-12.right::after {
    content: ""; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 450px; height: 108%;
    background: url('/assets/template/newdesign/images/corp/dogovor.png') center / contain no-repeat;
  }
}
@media (max-width: 899px) {
  .contract-container .col-xs-12.right { padding: 28px 22px !important; }
  .contract-container .link-contract, .contract-container .button-red { width: 100%; justify-content: center; box-sizing: border-box; }
}

/* «Наши клиенты» (.container-fluid.clients, body-level) — отступ сверху как между блоками */
.container-fluid.clients { margin-top: 56px; }

/* ========== 4h) НИЖНЯЯ форма «Оставьте заявку» (.container.order) — как форма-менеджер Главной ====
   Все поля в столбик слева + фото менеджера (CALL SENTRE) справа, красная кнопка на всю ширину. */
/* .container.order — компонент «форма-менеджер» в design-system.css.
   Здесь ничего не переопределяем — весь каркас общий с CTA-формой Главной. */
.container.order .pod-text { max-width: 620px; margin: 0 auto 30px; }  /* text-align:center из компонента */

/* ========== 5) «Наши гарантии» — переиспуем our_guarantees, если класс есть ==== */
.newtemplate .pixel-guarantees__list .item__image span { color: var(--ds-brand); }

/* ========== 6) ОТЗЫВЫ — восстановить блок ==========
   uslugi.css прячет `.reviews-carousel_wrapper` (для категории услуг, где она пуста).
   На странице конкретной услуги отзывы ЕСТЬ (ds-карусель .rv-card) — раскрываем. */
.newtemplate .reviews-carousel_wrapper { display: block !important; }
.newtemplate .reviews-carousel_wrapper .ds-carousel { padding: 4px 0 8px; }

/* ========== Ритм секций + чередование фона ========== */
.newtemplate .ls.page_testimonials { background: var(--ds-surface); }
.newtemplate .reviews-soc__wrapper { max-width: 480px !important; margin: 0 auto; }

/* ========== Мобилка ========== */
@media (max-width: 640px) {

  .newtemplate .text-cont table.table th, .newtemplate .text-cont table.table td { padding: 11px 12px; font-size: var(--ds-body-s); }
  :is(.newtemplate, section.ls) .pixel-calculator { padding: 18px; }
}

/* ========== Убрать пустую легаси-полосу под футером (.img-line footer.png) ==== */

/* ========== Мобильные доводки: отзывы шире, плашка Яндекса, политика ======= */
@media (max-width: 767px) {
  /* Отзывы — карусель на всю ширину (убираем боковой отступ 60px из uslugi.css;
     стрелки-навигации оставляем — как на Главной, компонент .ds-carousel__btn). */
  .newtemplate .reviews-carousel_wrapper.container,
  .newtemplate .reviews-carousel_wrapper { padding-left: 6px !important; padding-right: 6px !important; }
  .newtemplate .reviews-carousel.ds-carousel__track > * { width: min(440px, 92vw); }

  /* Плашка «Яндекс Карты … 4.9» — шире + ужимаем гэпы, чтобы оценка не липла к краю */
  .newtemplate .reviews-soc__wrapper.container,
  .newtemplate .reviews-soc__wrapper { max-width: 100% !important; padding-left: 8px !important; padding-right: 8px !important; }
  .newtemplate .reviews-soc__item-border { padding-left: 14px !important; padding-right: 16px !important; }
  .newtemplate .reviews-soc__item-border > a { gap: 8px !important; }
  .newtemplate .reviews-soc__info { gap: 8px !important; }
  .newtemplate .reviews-soc__stars { width: 78px !important; }

  /* Политика/оферта в футере — по центру, ссылки не рвутся посреди слова */
}

/* ссылка «политикой обработки персональных данных» — бренд-красная в обеих темах */
/* ссылка «политика обработки…» — из компонента .ds-check-label */
:is(.newtemplate, section.ls) .pixel-calculator .calc__checkbox .text a:hover {
  color: var(--ds-brand-hover) !important;
}

/* «Я согласен с политикой…»: текст обычным потоком (flex у .text — только когда есть иконка ⓘ) */
:is(.newtemplate, section.ls) .pixel-calculator .calc__checkbox .text:not(:has(.question)) {
  display: inline !important;
}