/* Start:/local/components/vh/price/templates/.default/price.css?178847663861723*/
/* Раздел «Цены» V5 — стили, перенесённые из согласованного макета
   (превью VP-7ZZX-EEU6, `leads/vita-house-pricing/v5/`).

   ФАЙЛ СОБИРАЕТСЯ СКРИПТОМ, руками не правится:
       AI/Work/Vita-House-Pricing/tools/build_assets.py
   Правка идёт в template.html макета, потом пересборка — иначе макет и
   сайт разъедутся, и следующий перенос будет не с чего делать.

   Всё завёрнуто в `.vh-price`: имена макета (.btn, .icon, .card, .i)
   на этом сайте заняты, и без обёртки правила столкнутся.
*/

/* ------------------------------------------------------------------------
   КОНТР-СБРОС. Стоит ПЕРЕД правилами макета, поэтому любое правило ниже
   его перебивает.

   Зачем он. У макета свой сброс, у сайта свой, и обнуляют они разное:
   там, где макет жил на значении браузера, сайт ставит своё. На витрине
   «Статей» отсюда пришло 13 расхождений из 14. Здесь тем же путём
   приехали `white-space:nowrap` и `letter-spacing:-.02em` из .btn сайта:
   кнопка «Выбрать и оставить заявку» переставала переноситься, строка
   услуги становилась на 22 px ниже, и весь список ехал вверх.

   Почему класс удвоен (.vh-price.vh-price). Правила сайта живут в
   template_*.css, а наши — в page_*.css, и БАНДЛ САЙТА ПОДКЛЮЧАЕТСЯ
   ПОЗЖЕ НАШЕГО. Значит при равной специфичности выигрывает сайт.
   `.vh-price *` — это (0,1,0), ровно как `.btn` у сайта, то есть ничья
   не в нашу пользу. Удвоение класса даёт (0,2,0) и снимает вопрос, а
   правилам самого макета (тоже (0,2,0), но ниже по файлу) не мешает.

   Проверяется не глазами, а сверкой getComputedStyle узел за узлом
   (tests/audit_price_styles.mjs). Добавляя сюда строку, добавляй и узел
   в список проверки.
   ------------------------------------------------------------------------ */

/* 1. Повторяем сброс САМОГО МАКЕТА — на нём держится вся вёрстка. */
.vh-price.vh-price *, .vh-price.vh-price *::before, .vh-price.vh-price *::after{box-sizing:border-box;}
.vh-price.vh-price img{max-width:100%;display:block;}
.vh-price.vh-price button{font:inherit;color:inherit;}
.vh-price.vh-price a{color:inherit;}

/* 2. Снимаем ДОБАВКИ САЙТА, которых у макета не было.
      letter-spacing и white-space наследуются от обёртки, поэтому
      правила макета с явным значением их перебивают, а правила сайта
      на общих именах классов (.btn, .icon, .card) до элементов внутри
      раздела больше не достают. */
.vh-price.vh-price *{letter-spacing:inherit;white-space:revert;}
.vh-price.vh-price{letter-spacing:normal;}
.vh-price.vh-price a{font-weight:inherit;text-decoration:revert;}
.vh-price.vh-price svg{display:inline;vertical-align:baseline;}
.vh-price.vh-price img{vertical-align:revert;border-radius:0;}
.vh-price.vh-price h1, .vh-price.vh-price h2, .vh-price.vh-price h3,
.vh-price.vh-price h4, .vh-price.vh-price h5, .vh-price.vh-price h6,
.vh-price.vh-price p, .vh-price.vh-price ul, .vh-price.vh-price ol,
.vh-price.vh-price li, .vh-price.vh-price figure, .vh-price.vh-price blockquote,
.vh-price.vh-price dl, .vh-price.vh-price dd{margin:revert;padding:revert;}
.vh-price.vh-price ul, .vh-price.vh-price ol{list-style:revert;}
.vh-price.vh-price b, .vh-price.vh-price strong, .vh-price.vh-price i,
.vh-price.vh-price em, .vh-price.vh-price small, .vh-price.vh-price code{
  font-size:revert;line-height:revert;display:revert;}
/* Ссылка-кнопка. Высота у <button> сброшена ниже, а `.btn` на этом сайте
   бывает и ссылкой — у неё сброса не было. Сайт задаёт `.btn--sm` жёсткую
   высоту (24/28/32 px по ширине экрана), у макета высоты нет вовсе, и на
   двухстрочной подписи «Выбрать и оставить заявку» текст вылезал за
   пределы плашки: кнопка выглядела узкой полосой с текстом поверх.
   Тот же вес (0,3,0), что и у правил макета, — макет по-прежнему главнее. */
.vh-price.vh-price .btn{height:revert;min-height:revert;}
/* Кнопке line-height НЕ возвращаем: у макета она наследует от body
   через button{font:inherit}, и revert сбил бы высоту всех кнопок. */
.vh-price.vh-price input, .vh-price.vh-price textarea, .vh-price.vh-price select{
  padding:revert;margin:revert;line-height:revert;text-transform:none;
  border-radius:revert;box-shadow:none;min-height:revert;height:revert;}
.vh-price.vh-price button{
  padding:revert;margin:revert;text-transform:none;border-radius:revert;
  box-shadow:none;min-width:revert;min-height:revert;height:revert;
  -webkit-appearance:revert;appearance:revert;}

/* ================= ТОКЕНЫ =================
   С 27.08 источник цвета — фирменный стиль, полученный от клиента:
   `leads/vita-house/brand/`, палитра из colors.pdf. До этого синий был снят
   пипеткой с сайта (#253ED0) и в фирменный не попадал.

   Осторожно с фирменными серыми: Main Grey 60% #8E8E8E даёт на белом 3.3:1,
   Main Blue 60% #00A3FF — 2.7:1. Это провал AA, поэтому в тексте их нет:
   они работают рамками, разделителями и заливками значков. Светлой линии
   в палитре нет вовсе, #CACACA заметно темнее — --line подобран нами. */
.vh-price.vh-price{--blue:#0023F5;    /* Main Blue 100%, 8.2:1 на белом */
  --blue-d:#001DC8;  /* Main Blue 110% */
  --link:#0023F5;
  --ink:#363636;     /* Main Black */
  --ink-2:#4b5059;   /* вторичный текст: 7.4:1 на белом */
  --muted:#686D77;   /* 5.2:1; фирменный #8E8E8E сюда нельзя */
  --bg:#F7F7F7;      /* Main Grey 10% */
  --white:#fff;
  --line:#E4E5EA;    /* фирменного токена нет, подобрано */
  --tint:#EAEEFF;    /* синий 8% на белом */
  --ok:#0f8a4d;
  --warn:#8a5a0f;
  --r-lg:28px;
  --r-md:14px;
  --r-sm:10px;
  --wrap:1360px;

  /* Раздел различается цветом, а не только фотографией: Secondary 01–06
     из палитры плюс Main Grey 90% седьмому. Шесть фирменных цветов на семь
     разделов — вопрос к Марьяну, графит стоит временно.
     Как текст и как подложку под белый эти цвета не используем: лучший
     из них, #677898, даёт на белом 4.45:1 и до порога AA не дотягивает.
     Только полосы, точки и рамки. */
  --s-legal:#677898;
  --s-buildings:#50809B;
  --s-land:#5C8590;
  --s-urban:#579575;
  --s-planning:#6F845B;
  --s-geodesy:#9B886C;
  --s-consulting:#3F3F3F;}
.vh-price.vh-price *, .vh-price.vh-price *::before, .vh-price.vh-price *::after{box-sizing:border-box;}
.vh-price.vh-price{margin:0;background:var(--bg);color:var(--ink);
  font:400 15px/1.6 Mont,Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;}
.vh-price.vh-price img{max-width:100%;display:block;}
.vh-price.vh-price button{font:inherit;color:inherit;}
.vh-price.vh-price a{color:inherit;}
.vh-price.vh-price [hidden]{display:none!important;}
.vh-price.vh-price .sr:focus{position:fixed;width:auto;height:auto;clip:auto;left:12px;top:12px;z-index:100;
  padding:10px 14px;background:var(--white);color:var(--blue);border-radius:var(--r-sm);}
.vh-price.vh-price :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid #6E85FF;outline-offset:3px;}
.vh-price.vh-price .i{width:1em;height:1em;fill:currentColor;flex:none;}
.vh-price.vh-price .wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;}
.vh-price.vh-price .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* ================= ШАПКА ================= */
.vh-price.vh-price .hd{position:sticky;top:0;z-index:40;padding:12px 0;background:var(--bg);}
.vh-price.vh-price .hd__in{display:flex;align-items:center;gap:22px;background:var(--white);
  border-radius:var(--r-lg);padding:14px 24px;}
.vh-price.vh-price .hd__logo{color:var(--blue);flex:none;}
.vh-price.vh-price .hd__logo svg{width:150px;height:25px;fill:currentColor;display:block;}
.vh-price.vh-price .hd__nav{display:flex;gap:20px;margin-left:6px;flex-wrap:wrap;}
.vh-price.vh-price .hd__nav a{text-decoration:none;color:var(--ink-2);font-weight:500;white-space:nowrap;}
.vh-price.vh-price .hd__nav a:hover{color:var(--blue);}
.vh-price.vh-price .hd__nav a[aria-current]{color:var(--ink);font-weight:700;}
.vh-price.vh-price .hd__sp{margin-left:auto;}
.vh-price.vh-price .hd__tel{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;white-space:nowrap;}
.vh-price.vh-price .hd__tel:hover{color:var(--blue);}
.vh-price.vh-price .hd__burger{display:none;background:none;border:0;padding:8px;cursor:pointer;}
.vh-price.vh-price .hd__burger svg{width:22px;height:22px;fill:var(--ink);}
/* Переключатель относится только к согласованию макета на VERSTA. */
.vh-price.vh-price .cmp{margin:0 0 4px;}
.vh-price.vh-price .cmp__in{display:flex;align-items:center;gap:12px;min-height:44px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-md);padding:6px 10px;}
.vh-price.vh-price .cmp__label{font-size:12px;color:var(--muted);margin-left:4px;}
.vh-price.vh-price .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid transparent;border-radius:var(--r-sm);padding:12px 20px;
  font-weight:700;cursor:pointer;text-decoration:none;line-height:1.2;
  transition:background .15s,color .15s,border-color .15s;}
.vh-price.vh-price .btn--blue{background:var(--blue);color:#fff;}
.vh-price.vh-price .btn--blue:hover{background:var(--blue-d);}
.vh-price.vh-price .btn--ghost{background:var(--white);color:var(--ink);border-color:var(--line);}
.vh-price.vh-price .btn--ghost:hover{border-color:var(--blue);color:var(--blue);}
.vh-price.vh-price .btn--sm{padding:9px 14px;font-size:14px;}
.vh-price.vh-price .btn .i{width:16px;height:16px;}
/* ================= ХЛЕБНЫЕ КРОШКИ И ШАПКА РАЗДЕЛА ================= */
.vh-price.vh-price .bc{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:13px;padding:14px 0 6px;}
.vh-price.vh-price .bc a{text-decoration:none;}
.vh-price.vh-price .bc a:hover{color:var(--blue);}
/* Правка 03.09 (вечер): подложка верхнего блока — другой цвет брендбука.
   Синий Main Blue 8% повторял цвет выбранного раздела в колонке слева, и два
   разных по смыслу блока читались одним. Взяты Secondary 01 (#677898) слабой
   заливкой и мягкий отсвет Main Blue 30% (#9EDCFF) в правом верхнем углу:
   палитра та же, новых цветов на странице не появилось. */
.vh-price.vh-price .lead{position:relative;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,520px);
  grid-template-rows:auto auto;column-gap:40px;
  align-items:start;align-content:start;
  background:
    radial-gradient(120% 150% at 92% -30%,rgba(158,220,255,.62) 0%,rgba(158,220,255,0) 60%),
    linear-gradient(180deg,#F7F8FC 0%,#EDF0F6 100%);
  border-radius:var(--r-lg);padding:36px 40px 36px;margin-bottom:16px;}  /* 36/36: по краске выходит 40 сверху и 39 снизу — интерлиньяж
     заголовка добавляет вверху лишние четыре пиксела пустоты. */
.vh-price.vh-price .lead h1{grid-column:1;grid-row:1;margin:0 0 12px;font-size:44px;line-height:1.1;font-weight:700;letter-spacing:-.02em;}
.vh-price.vh-price .lead #leadCopy{grid-column:1;grid-row:2;}
.vh-price.vh-price .lead p{margin:0;max-width:62ch;color:var(--ink-2);font-size:16px;line-height:1.5;}
/* Фраза про результат — подзаголовок под названием страницы: заголовок,
   тезис, пояснение в два предложения.
   Правка 03.09 (вечер): тезис вынесен на светлую карточку с приглушёнными
   кавычками. Кавычки — типографские «ёлочки» в 12% основного синего: они
   называют фразу цитатой без единого лишнего слова, а на такой прозрачности
   не спорят с самим текстом. Фирменная линия слева осталась, но рисуется
   внутренней тенью — она обходит скругление карточки, чего border не умеет.
   Тег остаётся <p>: это собственное утверждение компании, а не чья-то речь,
   и <blockquote> без источника был бы враньём разметки — кавычки здесь
   оформление, поэтому и нарисованы, а не набраны. Содержимое ::before
   и ::after скринридер не читает, дублей в озвучке не будет. */
.vh-price.vh-price .lead .lead__val{grid-column:2;grid-row:1/span 2;align-self:start;
  position:relative;max-width:none;margin:30px 0 0;
  padding:24px 46px 26px 50px;border-radius:20px;border-left:0;
  background:rgba(255,255,255,.72);
  box-shadow:inset 4px 0 0 var(--blue),inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 26px rgba(20,26,52,.07);
  font-size:18px;font-weight:700;line-height:1.4;color:#141a34;text-wrap:balance;}
/* Обе кавычки одного кегля и обе стоят в полях карточки: у набора слева
   и справа отступ шире самой кавычки, поэтому наложиться на текст они не
   могут при любой длине строки. */
.vh-price.vh-price .lead .lead__val::before,.vh-price.vh-price .lead .lead__val::after{position:absolute;
  font-size:40px;line-height:1;font-weight:700;color:rgba(0,35,245,.16);}
.vh-price.vh-price .lead .lead__val::before{content:"«";left:15px;top:14px;}
.vh-price.vh-price .lead .lead__val::after{content:"»";right:14px;bottom:12px;}
/* ================= ПОИСК ================= */
.vh-price.vh-price .find{background:var(--white);border-radius:var(--r-lg);padding:24px 40px 28px;margin-bottom:16px;}
.vh-price.vh-price .find__row{display:flex;gap:12px;align-items:center;}
.vh-price.vh-price .find__box{position:relative;flex:1;display:flex;align-items:center;}
.vh-price.vh-price .find__box>.i{position:absolute;left:18px;width:20px;height:20px;fill:var(--muted);pointer-events:none;}
.vh-price.vh-price .find input{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:var(--r-md);
  padding:16px 46px 16px 50px;font:inherit;font-size:16px;color:var(--ink);}
.vh-price.vh-price .find input::placeholder{color:var(--muted);}
.vh-price.vh-price .find input:focus{outline:none;border-color:var(--blue);background:var(--white);
  box-shadow:0 0 0 3px rgba(0,35,245,.12);}
.vh-price.vh-price .find__clr{position:absolute;right:10px;border:0;background:none;padding:8px;cursor:pointer;
  color:var(--muted);border-radius:50%;}
.vh-price.vh-price .find__clr:hover{color:var(--ink);background:var(--bg);}
.vh-price.vh-price .find__clr svg{width:14px;height:14px;fill:currentColor;display:block;}
.vh-price.vh-price .find__hint{margin:14px 0 0;color:var(--muted);font-size:13px;display:flex;gap:8px;
  flex-wrap:wrap;align-items:center;}
.vh-price.vh-price .find__hint button{border:1px solid var(--line);background:var(--white);border-radius:100px;
  padding:6px 13px;font-size:13px;cursor:pointer;color:var(--ink-2);}
.vh-price.vh-price .find__hint button:hover{border-color:var(--blue);color:var(--blue);background:var(--tint);}
/* ================= КАРКАС: РАЗДЕЛЫ + РЕЗУЛЬТАТ ================= */
/* Шапка липкая, поэтому у целей прокрутки нужен запас сверху: без него после
   выбора раздела его же заголовок уезжает под шапку. */
.vh-price.vh-price .cols{display:grid;grid-template-columns:290px minmax(0,1fr);gap:16px;align-items:start;
  scroll-margin-top:92px;}
.vh-price.vh-price .side{background:var(--white);border-radius:var(--r-lg);padding:14px;position:sticky;top:92px;}
.vh-price.vh-price .side h2{margin:8px 10px 12px;font-size:13px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;}
/* Правка 03.09: полоса слева есть у каждого раздела и красится его
   собственным цветом, а не одним синим. Раньше полоса была только
   у выбранного, и та синяя: кнопкам не хватало data-sec, --acc не
   разрешался и всегда срабатывал запасной var(--blue). */
.vh-price.vh-price .side button{display:flex;width:100%;align-items:center;gap:10px;text-align:left;
  border:0;background:none;border-radius:var(--r-md);padding:11px 12px;cursor:pointer;
  font-size:14px;line-height:1.35;color:var(--ink-2);
  box-shadow:inset 3px 0 0 var(--acc,var(--line-2));}
.vh-price.vh-price .side button:hover{background:var(--bg);color:var(--ink);}
/* Правка 03.09 (вечер): выбранный раздел заметно крупнее соседей.
   Увеличение сделано transform, а не размером шрифта: размер сдвинул бы
   вниз весь список при каждом выборе, а масштаб ничего не двигает.
   Точка отсчёта — левый край, чтобы полоса цвета осталась на месте;
   4,5% от 262 px укладываются в правое поле панели. */
.vh-price.vh-price .side button[aria-pressed=true]{background:var(--tint);color:var(--blue);font-weight:700;
  transform:scale(1.045);
  box-shadow:inset 5px 0 0 var(--acc,var(--blue)),0 8px 20px rgba(20,26,52,.10);}
.vh-price.vh-price .side button i{margin-left:auto;font-style:normal;font-size:12px;color:var(--muted);
  background:var(--bg);border-radius:100px;padding:2px 8px;flex:none;}
.vh-price.vh-price .side button[aria-pressed=true] i{background:var(--white);color:var(--blue);}
/* Цвет раздела. На кнопках значение берётся из уже существующего data-sec,
   у блока результата — из отдельного data-acc: вешать туда data-sec нельзя,
   его перехватит общий обработчик выбора раздела и любой клик по выдаче
   начнёт переключать раздел.
   Цвет работает полосой и точкой — как текст и как подложка под белый эти
   шесть до AA не дотягивают, см. комментарий к токенам. */
.vh-price.vh-price [data-sec=legal], .vh-price.vh-price [data-acc=legal]{--acc:var(--s-legal);}
.vh-price.vh-price [data-sec=buildings], .vh-price.vh-price [data-acc=buildings]{--acc:var(--s-buildings);}
.vh-price.vh-price [data-sec=land], .vh-price.vh-price [data-acc=land]{--acc:var(--s-land);}
.vh-price.vh-price [data-sec=urban], .vh-price.vh-price [data-acc=urban]{--acc:var(--s-urban);}
.vh-price.vh-price [data-sec=planning], .vh-price.vh-price [data-acc=planning]{--acc:var(--s-planning);}
.vh-price.vh-price [data-sec=geodesy], .vh-price.vh-price [data-acc=geodesy]{--acc:var(--s-geodesy);}
.vh-price.vh-price [data-sec=consulting], .vh-price.vh-price [data-acc=consulting]{--acc:var(--s-consulting);}
.vh-price.vh-price .pickm{display:none;}
.vh-price.vh-price .res{background:var(--white);border-radius:var(--r-lg);padding:0 0 8px;overflow:hidden;}
/* Правка 02.09: обложка «чуть больше» — 260 вместо 190 px; картинки
   пересобраны с оригиналов сайта в 1200 px, прежние 720 на такой высоте
   мылились. */
.vh-price.vh-price .res__hero{position:relative;height:340px;background:var(--tint);}
.vh-price.vh-price .res__hero img{width:100%;height:100%;object-fit:cover;}
/* Полоса цвета раздела под обложкой: на фотографии цвет читается плохо,
   на сплошной полосе — сразу. */
.vh-price.vh-price .res__hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;z-index:2;
  background:var(--acc,var(--blue));}
/* Затемнение снизу вверх, а не слева направо. Подпись стоит внизу, и вертикаль
   гарантирует ей тёмную подложку при любой фотографии: на светлом снимке
   боковой градиент оставлял белый текст на белом.
   Правка 03.09: верх фотографии почти очищен, а зона подписи ослаблена
   относительно прежней V5. Худший раздел после сборки даёт 5.11:1. */
.vh-price.vh-price .res__hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,26,52,0) 0%,rgba(20,26,52,.04) 60%,rgba(20,26,52,.12) 100%);}
/* Правка 02.09 (вторая итерация): под названием раздела — его описание из
   блока «О категории» на странице раздела сайта, слово в слово. Обложка
   выросла до 340 px, чтобы четыре-пять строк текста не съели фотографию;
   затемнение начинается выше, чем раньше, — подпись стала выше. */
/* Правка 03.09 (вечер): «фотография ярче». Затемнение сняли с кадра и
   отдали подписи. По всей обложке его держать было нельзя: подпись
   начинается на 38–45% высоты — зависит от длины описания раздела, — и
   любой градиент, достаточный для белого текста, гасил как раз ту часть
   фотографии, которую видно. Теперь у подписи своя подложка: она начинается
   ровно над первой строкой при любой длине описания, а на самом кадре
   осталась лёгкая вуаль 4–12%, чтобы верх не выглядел выцветшим.
   Верхнее поле подписи — это и есть зона растворения подложки, поэтому
   на узких экранах его приходится задавать вместе с остальными полями. */
.vh-price.vh-price .res__cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:80px 34px 28px;color:#fff;
  background:linear-gradient(180deg,rgba(20,26,52,0) 0%,rgba(20,26,52,.30) 12%,
    rgba(20,26,52,.62) 26%,rgba(20,26,52,.76) 55%,rgba(20,26,52,.84) 100%);}
.vh-price.vh-price .res__cap h2{margin:0 0 10px;font-size:32px;font-weight:700;line-height:1.12;letter-spacing:-.015em;}
.vh-price.vh-price .res__cap p{margin:0;max-width:68ch;font-size:15px;line-height:1.5;color:rgba(255,255,255,.92);}
/* Копия описания под обложкой — только для телефона, где на картинке
   высотой 150 px пять строк текста не помещаются. */
.vh-price.vh-price .res__about, .vh-price.vh-price .res__aboutBtn{display:none;}
.vh-price.vh-price .res.searching .res__about{display:none;}
.vh-price.vh-price .res__bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:18px 34px;border-bottom:1px solid var(--line);}
.vh-price.vh-price .res__cnt{font-size:14px;color:var(--muted);}
.vh-price.vh-price .res__cnt b{color:var(--ink);}
.vh-price.vh-price .res__sort{margin-left:auto;display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted);}
.vh-price.vh-price .res__sort select{border:1px solid var(--line);background:var(--white);border-radius:var(--r-sm);
  padding:8px 10px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;}
.vh-price.vh-price .res__sort select:focus{outline:none;border-color:var(--blue);}
/* ================= СТРОКА УСЛУГИ ================= */
.vh-price.vh-price .svc{border-bottom:1px solid var(--line);}
.vh-price.vh-price .svc:last-child{border-bottom:0;}
/* Правка 02.09: строки через одну — светлая и тёмная, как карточки в разделе
   «Статьи» (там чётные на #efefef). Иначе 17 строк подряд сливаются.
   Класс ставит render() по порядку в списке, а не :nth-child — при поиске
   перед услугами стоят найденные разделы, и счёт сбивался бы.
   --muted пересчитан под серую подложку: фирменный #686D77 даёт на #efefef
   4.5:1 впритык, #61666f — 5.2:1. Панель состава на тёмной строке белая,
   иначе её #F7F7F7 на #efefef не видно. */
.vh-price.vh-price .svc--alt{background:#efefef;--muted:#61666f;}
.vh-price.vh-price .svc--alt .svc__sub{background:var(--white);}
/* Ширины подобраны по замеру (`measure.mjs`), а не на глаз: сроку нужно
   до 197 px («от 7 календарных дней»), в 140 px он обрезался в 51 строке
   из 73, причём обрезанный хвост накрывала кнопка справа. */
.vh-price.vh-price .svc__top{display:grid;grid-template-columns:minmax(0,1fr) 155px 205px 150px;
  gap:18px;align-items:center;padding:18px 34px;}
.vh-price.vh-price .svc__t{margin:0;font-size:16px;font-weight:700;line-height:1.35;}
/* Название услуги — ссылка на её страницу (правка 02.09; 27.08 просили
   наоборот, ссылок не ставить, — новое решение клиента). Подчёркивание
   бледное, чтобы 17 названий не превращались в синюю простыню; при наведении
   ссылка становится синей. Открывается в новой вкладке боевого сайта. */
.vh-price.vh-price a.svc__name, .vh-price.vh-price .card__t a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(0,35,245,.32);}
.vh-price.vh-price a.svc__name:hover, .vh-price.vh-price .card__t a:hover{color:var(--blue);text-decoration-color:currentColor;}
.vh-price.vh-price .svc__name{display:block;}
.vh-price.vh-price .svc__sec{display:block;margin-top:5px;font-size:12.5px;font-weight:400;color:var(--muted);}
.vh-price.vh-price .svc__v{display:flex;align-items:center;gap:7px;font-weight:700;font-size:15px;white-space:nowrap;}
.vh-price.vh-price .svc__v .i{width:17px;height:17px;fill:var(--muted);}
.vh-price.vh-price .svc__v--none{font-weight:500;color:var(--muted);font-size:14px;}
.vh-price.vh-price .svc__v--term{font-weight:500;color:var(--ink-2);font-size:14px;}
.vh-price.vh-price .svc__act{display:flex;justify-content:flex-end;}
/* Кнопка строки — главное действие раздела, поэтому у неё своя посадка, а
   не размер .btn--sm. Подпись «Выбрать и оставить заявку» — 207 px, и на
   колонке 190 px она вставала в две строки. Колонка ниже расширена до
   240 px, так что подпись встаёт в строку; min-height держит палец
   (44 px по любым рекомендациям), а перенос остаётся возможным — на
   промежуточных ширинах кнопка просто станет в две строки и не
   обрежется. */
.vh-price.vh-price .svc__act .btn{width:100%;min-height:48px;height:auto;padding:12px 14px;
  line-height:1.25;text-align:center;}
.vh-price.vh-price .svc__more{display:flex;align-items:center;gap:7px;margin:0 34px 18px;border:0;background:none;
  padding:0;cursor:pointer;color:var(--blue);font-size:13.5px;font-weight:600;}
.vh-price.vh-price .svc__more:hover{color:var(--blue-d);}
.vh-price.vh-price .svc__more .i{width:12px;height:12px;transition:transform .18s;}
.vh-price.vh-price .svc__more[aria-expanded=true] .i{transform:rotate(180deg);}
.vh-price.vh-price .svc__sub{margin:0 34px 20px;background:var(--bg);border-radius:var(--r-md);padding:18px 22px;}
.vh-price.vh-price .svc__sub h4{margin:0 0 10px;font-size:12.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em;}
/* Варианты тарифа рядом. Раньше здесь лежали 551 короткая строка-ситуация,
   и им шли две колонки. Теперь это абзацы по 110–680 знаков: две колонки
   на таком тексте рвут порядок чтения, поэтому колонка на вариант, а внутри
   варианта — один столбец. */
.vh-price.vh-price .svc__vars{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.vh-price.vh-price .tar__h{margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line);}
.vh-price.vh-price .tar__n{margin:0 0 6px;font-size:14px;font-weight:700;color:var(--ink);}
.vh-price.vh-price .tar__v{display:flex;gap:16px;flex-wrap:wrap;}
.vh-price.vh-price .tar__v span{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-2);}
.vh-price.vh-price .tar__v b{font-weight:700;color:var(--ink);}
.vh-price.vh-price .tar__v .i{width:15px;height:15px;fill:var(--muted);}
/* Второй вариант почти всегда включает первый целиком; печатать один и тот же
   текст дважды незачем, поэтому в нём остаётся только добавленное. */
.vh-price.vh-price .tar__sup{margin:0 0 10px;font-size:13px;color:var(--muted);}
.vh-price.vh-price .svc__w{margin:0;padding:0;list-style:none;}
.vh-price.vh-price .svc__w li{margin:0 0 11px;padding-left:16px;position:relative;
  font-size:14px;line-height:1.45;color:var(--ink-2);}
.vh-price.vh-price .svc__w li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--acc,var(--blue));}
.vh-price.vh-price .svc__w b{display:block;font-weight:700;color:var(--ink);}
.vh-price.vh-price .svc__w b+span{display:block;margin-top:2px;font-size:13.5px;}
.vh-price.vh-price .svc__none{margin:0;color:var(--muted);font-size:13.5px;padding:0 34px 18px;}
.vh-price.vh-price mark{background:#fff2a8;color:inherit;border-radius:3px;padding:0 2px;}
/* Найденный раздел стоит над услугами: запрос «геодезия» — это чаще всего
   «покажи мне весь раздел», а не «найди услугу со словом геодезия». */
.vh-price.vh-price .secfind{display:flex;align-items:center;gap:16px;padding:16px 34px;
  border-bottom:1px solid var(--line);background:var(--bg);}
.vh-price.vh-price .secfind img{width:72px;height:72px;border-radius:var(--r-md);object-fit:cover;flex:none;
  border:3px solid var(--acc,var(--blue));}
.vh-price.vh-price .secfind div{min-width:0;}
.vh-price.vh-price .secfind b{display:block;font-size:16px;font-weight:700;}
.vh-price.vh-price .secfind span{display:block;margin-top:4px;font-size:13px;color:var(--muted);}
.vh-price.vh-price .secfind .btn{margin-left:auto;flex:none;}
.vh-price.vh-price .empty{padding:56px 34px;text-align:center;}
.vh-price.vh-price .empty h3{margin:0 0 8px;font-size:20px;font-weight:700;}
.vh-price.vh-price .empty p{margin:0 0 20px;color:var(--muted);}
/* ================= ФОРМА ================= */
.vh-price.vh-price .req{margin:16px 0 0;scroll-margin-top:92px;background:var(--blue);border-radius:var(--r-lg);
  padding:38px 40px;color:#fff;
  background-image:linear-gradient(135deg,var(--blue) 0%,var(--blue-d) 100%);}
.vh-price.vh-price .req__g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;align-items:start;}
.vh-price.vh-price .req h2{margin:0 0 12px;font-size:30px;font-weight:700;line-height:1.15;letter-spacing:-.015em;}
.vh-price.vh-price .req p{margin:0 0 16px;color:rgba(255,255,255,.86);font-size:15px;}
.vh-price.vh-price .req__pick{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-md);padding:14px 16px;}
.vh-price.vh-price .req__pick span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:rgba(255,255,255,.72);margin-bottom:5px;}
.vh-price.vh-price .req__pick b{font-size:15px;font-weight:700;line-height:1.35;}
.vh-price.vh-price .req__f{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.vh-price.vh-price .req__field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.vh-price.vh-price .req__field--wide{grid-column:1/-1;}
.vh-price.vh-price .req__field>span{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.9);}
.vh-price.vh-price .req__field>span i{font-style:normal;color:#ffe2a8;}
.vh-price.vh-price .req__f input, .vh-price.vh-price .req__f textarea{width:100%;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.12);border-radius:var(--r-md);padding:14px 16px;
  font:inherit;font-size:15px;color:#fff;}
.vh-price.vh-price .req__f input::placeholder, .vh-price.vh-price .req__f textarea::placeholder{color:rgba(255,255,255,.66);}
.vh-price.vh-price .req__f input:focus, .vh-price.vh-price .req__f textarea:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.2);}
.vh-price.vh-price .req__f textarea{min-height:92px;resize:vertical;}
.vh-price.vh-price .req__f [aria-invalid=true]{border-color:#ffd2d2;background:rgba(107,17,32,.35);}
.vh-price.vh-price .req__err{min-height:0;color:#fff0f0;font-size:12px;font-weight:600;line-height:1.35;}
.vh-price.vh-price .req__err:empty{display:none;}
.vh-price.vh-price .req__f .btn{grid-column:1/-1;background:#fff;color:var(--blue);}
.vh-price.vh-price .req__f .btn:hover{background:var(--tint);}
.vh-price.vh-price .req__note{grid-column:1/-1;margin:0;font-size:12.5px;color:rgba(255,255,255,.72);}
.vh-price.vh-price .req__ok{grid-column:1/-1;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.16);
  border-radius:var(--r-md);padding:14px 16px;font-weight:700;}
.vh-price.vh-price .req__ok .i{width:18px;height:18px;}
.vh-price.vh-price .req__status{grid-column:1/-1;margin:0;border-radius:var(--r-md);font-size:13px;line-height:1.45;}
.vh-price.vh-price .req__status:not(:empty){padding:12px 14px;background:rgba(255,255,255,.16);}
.vh-price.vh-price .req__status--error:not(:empty){background:rgba(107,17,32,.38);}
/* ================= ПОДВАЛ ================= */
.vh-price.vh-price .ft{margin:16px 0 0;background:var(--white);border-radius:var(--r-lg);padding:30px 40px;}
.vh-price.vh-price .ft__g{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between;}
.vh-price.vh-price .ft__c{display:grid;gap:8px;font-size:14px;color:var(--ink-2);}
.vh-price.vh-price .ft__c a{text-decoration:none;display:flex;gap:9px;align-items:center;}
.vh-price.vh-price .ft__c a:hover{color:var(--blue);}
.vh-price.vh-price .ft__c .i{width:16px;height:16px;fill:var(--muted);}
.vh-price.vh-price .ft__l{color:var(--muted);font-size:12.5px;max-width:46ch;}
.vh-price.vh-price .pg{padding-bottom:34px;}
/* ================= МОБИЛЬНЫЙ ВЫБОР РАЗДЕЛА ================= */
.vh-price.vh-price .sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;}
.vh-price.vh-price .sheet__bg{position:absolute;inset:0;background:rgba(20,26,52,.45);}
.vh-price.vh-price .sheet__in{position:relative;width:100%;max-height:82vh;overflow:auto;background:var(--white);
  border-radius:22px 22px 0 0;padding:10px 12px 26px;}
body.sheet-open{overflow:hidden;}
.vh-price.vh-price .sheet__h{display:flex;align-items:center;padding:10px 10px 6px;}
.vh-price.vh-price .sheet__h b{font-size:16px;}
.vh-price.vh-price .sheet__h button{margin-left:auto;border:0;background:var(--bg);border-radius:50%;
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;}
.vh-price.vh-price .sheet__h button svg{width:13px;height:13px;fill:var(--ink);}
/* ================= СЛОЙ «КАК ЭТО УСТРОЕНО» ================= */
/* Кнопка слева: справа она садится ровно на столбец кнопок «Заявка»
   и перекрывает то, ради чего страница и делается. */
.vh-price.vh-price .xbtn{position:fixed;left:18px;bottom:18px;z-index:50;border:0;border-radius:100px;
  background:#141a34;color:#fff;padding:13px 20px;font-weight:700;font-size:14px;
  cursor:pointer;box-shadow:0 8px 26px rgba(20,26,52,.32);}
.vh-price.vh-price .xbtn:hover{background:#232c52;}
.vh-price.vh-price .x{display:none;}
.vh-price.vh-price.x-on .x{display:block;}
/* блочный: единственный носитель .x-i — подпись под названием услуги,
   строчной она слипается с заголовком */
.vh-price.vh-price.x-on .x-i{display:block;}
.vh-price.vh-price .x-i{display:none;}
.vh-price.vh-price .note{margin:12px 0 0;border-left:3px solid var(--blue);background:var(--tint);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:12px 16px;font-size:13.5px;
  line-height:1.55;color:#26306b;}
.vh-price.vh-price .note b{color:#141a34;}
.vh-price.vh-price .note code{font:inherit;font-size:12.5px;background:#fff;border:1px solid #d7dcff;
  border-radius:5px;padding:1px 6px;}
.vh-price.vh-price .note--warn{border-left-color:#c98a12;background:#fff7e8;color:#5c440f;}
.vh-price.vh-price .note--warn b{color:#40300a;}
.vh-price.vh-price .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;background:#141a34;color:#fff;border-radius:5px;
  padding:2px 7px;margin-right:8px;vertical-align:2px;}
/* ================= АДАПТИВ ================= */
@media (max-width:1180px){.vh-price.vh-price .hd__nav{display:none;}
.vh-price.vh-price .hd__burger{display:block;}
.vh-price.vh-price .cols{grid-template-columns:1fr;}
.vh-price.vh-price .side{display:none;}
/* Сетка шапки распускается здесь же, где страница становится узкой. */
.vh-price.vh-price .lead{display:block;}
.vh-price.vh-price .lead .lead__val{margin:0 0 18px;max-width:46ch;padding:20px 44px 22px 48px;font-size:19px;}
.vh-price.vh-price .lead .lead__val::before{top:12px;}
.vh-price.vh-price .lead .lead__val::after{bottom:10px;}
.vh-price.vh-price .pickm{display:block;}
.vh-price.vh-price .pickm button{display:flex;width:100%;align-items:center;gap:12px;background:var(--white);
    border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 20px;cursor:pointer;
    font-weight:700;font-size:15px;text-align:left;margin-bottom:16px;}
.vh-price.vh-price .pickm button span{margin-left:auto;font-weight:400;color:var(--muted);font-size:13px;}
.vh-price.vh-price .pickm button .i{width:14px;height:14px;fill:var(--muted);}}
@media (max-width:900px){.vh-price.vh-price .cols, .vh-price.vh-price .req{scroll-margin-top:80px;}
.vh-price.vh-price .lead{padding:30px 24px 26px;}
.vh-price.vh-price .lead h1{font-size:34px;}
.vh-price.vh-price .find{padding:20px 24px 24px;}
.vh-price.vh-price .req{padding:30px 24px;}
.vh-price.vh-price .req__g{grid-template-columns:1fr;gap:24px;}
.vh-price.vh-price .ft{padding:24px;}
.vh-price.vh-price .res__hero{height:300px;}
.vh-price.vh-price .res__cap{padding:62px 22px 22px;}
.vh-price.vh-price .res__cap h2{font-size:26px;}
.vh-price.vh-price .res__cap p{font-size:14px;}
.vh-price.vh-price .res__bar{padding:16px 22px;}
.vh-price.vh-price .svc__top{grid-template-columns:1fr;gap:10px;padding:18px 22px;}
.vh-price.vh-price .svc__act{justify-content:flex-start;}
.vh-price.vh-price .svc__act .btn{width:100%;}
.vh-price.vh-price .svc__more, .vh-price.vh-price .svc__sub{margin-left:22px;margin-right:22px;}
.vh-price.vh-price .svc__vars{grid-template-columns:1fr;}
.vh-price.vh-price .svc__v{font-size:16px;}}
@media (max-width:560px){.vh-price.vh-price .wrap{padding:0 12px;}
.vh-price.vh-price .hd__in{padding:12px 14px;gap:12px;border-radius:20px;}
.vh-price.vh-price .hd__logo svg{width:118px;height:20px;}
.vh-price.vh-price .hd__tel span{display:none;}
.vh-price.vh-price .hd__in .btn{display:none;}
.vh-price.vh-price .lead{border-radius:20px;padding:24px 18px;}
.vh-price.vh-price .lead h1{font-size:27px;}
.vh-price.vh-price .find{border-radius:20px;padding:16px 18px 20px;}
.vh-price.vh-price .find input{padding:14px 42px 14px 44px;font-size:16px;}
.vh-price.vh-price .res, .vh-price.vh-price .req, .vh-price.vh-price .ft{border-radius:20px;}
.vh-price.vh-price .res__hero{height:200px;}
.vh-price.vh-price .res__cap{padding:48px 18px 16px;}
.vh-price.vh-price .res__cap h2{font-size:21px;}
.vh-price.vh-price .res__bar{padding:14px 18px;}
.vh-price.vh-price .res__sort{margin-left:0;width:100%;}
.vh-price.vh-price .svc__top{padding:16px 18px;}
.vh-price.vh-price .svc__more, .vh-price.vh-price .svc__sub{margin-left:18px;margin-right:18px;}
.vh-price.vh-price .svc__sub{padding:14px 16px;}
.vh-price.vh-price .req{padding:24px 18px;}
.vh-price.vh-price .req h2{font-size:23px;}
.vh-price.vh-price .req__f{grid-template-columns:1fr;}
.vh-price.vh-price .req__field--wide{grid-column:auto;}
.vh-price.vh-price .ft{padding:20px 18px;}
.vh-price.vh-price .xbtn{left:12px;bottom:12px;padding:11px 16px;font-size:13px;}}
.vh-price.vh-price .hd__burger{display:none;}
.vh-price.vh-price .xbtn{position:static;margin-left:auto;box-shadow:none;
  padding:7px 12px;background:var(--white);color:var(--ink-2);border:1px solid var(--line);
  font-size:12px;}
.vh-price.vh-price .xbtn:hover{background:var(--tint);color:var(--blue);border-color:var(--blue);}
.vh-price.vh-price .find__hint button:nth-of-type(n+4){display:none;}
@media (min-width:901px){/* У V2 подпись кнопки длиннее, поэтому её колонка шире. 190 px хватало
     только на две строки, и кнопка читалась как узкая плашка. 240 px —
     измеренная ширина подписи (207 px) плюс поля: подпись встаёт в одну
     строку. Недостающее набрано с колонок цены и срока, у них был запас:
     самая длинная цена — «от 96 540 ₽» (≈124 px), самый длинный срок —
     «от 7 календарных дней» (197 px). */
.vh-price.vh-price .svc__top{grid-template-columns:minmax(0,1fr) 132px 200px 240px;}}
@media (max-width:560px){.vh-price.vh-price .cmp__in{gap:7px;min-height:38px;padding:4px 6px;}
/* На узком экране от подписи остаётся суть: дата съёмки данных уводит
     строку во вторую и съедает первый экран. */
.vh-price.vh-price .cmp__date{display:none;}
.vh-price.vh-price .xbtn{padding:6px 9px;font-size:11.5px;}
.vh-price.vh-price .bc{padding:4px 2px 2px;font-size:11px;}
.vh-price.vh-price .lead{margin-bottom:8px;padding:13px 16px;border-radius:16px;}
.vh-price.vh-price .lead h1{margin-bottom:5px;font-size:23px;}
.vh-price.vh-price .lead p{font-size:12.5px;line-height:1.4;}
.vh-price.vh-price .lead .lead__val{max-width:none;padding:0 0 0 10px;border-radius:0;background:none;box-shadow:inset 3px 0 0 var(--blue);font-size:12.5px;line-height:1.34;margin-bottom:5px;}
.vh-price.vh-price .lead .lead__val::before,.vh-price.vh-price .lead .lead__val::after{position:static;font-size:15px;line-height:0;vertical-align:-2px;}
.vh-price.vh-price .lead .lead__val::before{margin-right:3px;}
.vh-price.vh-price .lead .lead__val::after{margin-left:2px;}
.vh-price.vh-price .find{margin-bottom:8px;padding:9px 12px 10px;border-radius:16px;}
.vh-price.vh-price .find input{padding:10px 38px 10px 40px;font-size:14px;}
.vh-price.vh-price .find__box>.i{left:14px;width:17px;height:17px;}
.vh-price.vh-price .find__hint{margin-top:7px;gap:5px;font-size:10.5px;}
.vh-price.vh-price .find__hint button{padding:4px 8px;font-size:10.5px;}
.vh-price.vh-price .find__hint button:nth-of-type(n+3){display:none;}
.vh-price.vh-price .pickm button{margin-bottom:8px;padding:10px 14px;
    border-radius:14px;font-size:13px;}
.vh-price.vh-price .pickm button span{font-size:11px;}
.vh-price.vh-price .res__hero{height:120px;}
.vh-price.vh-price .res__cap{padding:34px 14px 10px;}
.vh-price.vh-price .res__cap h2{margin:0;font-size:18px;}
.vh-price.vh-price .res__cap p{display:none;}
/* На телефоне описание раздела свёрнуто до трёх строк: первый экран
     здесь про список услуг, а полный текст открывается кнопкой. */
.vh-price.vh-price .res__about{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    margin:0;padding:8px 14px 0;font-size:13px;line-height:1.42;color:var(--ink-2);}
.vh-price.vh-price .res__about.open{display:block;-webkit-line-clamp:unset;}
.vh-price.vh-price .res__aboutBtn{display:inline-block;margin:2px 14px 0;padding:0;border:0;background:none;
    font:inherit;font-size:12.5px;font-weight:600;color:var(--blue);cursor:pointer;}
.vh-price.vh-price .res.searching .res__aboutBtn{display:none;}
.vh-price.vh-price .res__bar{padding:8px 14px;gap:8px;}
.vh-price.vh-price .res__cnt{font-size:11.5px;}
.vh-price.vh-price .res__sort{margin-left:auto;width:auto;font-size:0;}
.vh-price.vh-price .res__sort select{padding:5px 7px;font-size:11px;max-width:142px;}
.vh-price.vh-price .svc__top{grid-template-columns:1fr 1fr;gap:7px 12px;padding:12px 14px;}
.vh-price.vh-price .svc__t, .vh-price.vh-price .svc__act{grid-column:1/-1;}
.vh-price.vh-price .svc__t{font-size:14px;}
.vh-price.vh-price .svc__v{font-size:13px;}
.vh-price.vh-price .svc__v--none, .vh-price.vh-price .svc__v--term{font-size:12px;white-space:normal;}
.vh-price.vh-price .svc__act .btn{padding:8px 10px;font-size:12px;}}
/* ================= ТЕЛЕФОН: ВАРИАНТ 2 =================
   Второй мобильный вариант живёт рядом с первым и включается переключателем
   в верхней панели. Каждое правило ниже заперто и в @media (max-width:760px),
   и в класс `body.m2`: шире 760 px не срабатывает ни одно, согласованная
   десктопная вёрстка не меняется ни на пиксель.

   Что вариант 2 меняет по существу:
   — первый экран отдан поиску, разделам и первым ценам, а не длинному лиду;
   — панель «раздел · порядок · поиск» липнет под шапку и доступна из любого
     места списка, а не только с самого верха;
   — строка услуги сжата до названия, цены и срока: восемь услуг в экране
     вместо четырёх, и решение «эта или не эта» принимается прокруткой;
   — состав работ, заявка и звонок уехали в карточку услуги снизу. Гармошка
     на 300–1500 px внутри списка на телефоне не работает: раскрытая панель
     выталкивает соседние услуги, место чтения теряется, а до следующей
     строки надо пролистать чужой текст;
   — выбор раздела перестал быть россыпью системных кнопок: у каждого
     раздела свой цвет, счётчик услуг и цена «от». */
.vh-price.vh-price .mv{display:none;align-items:center;gap:6px;margin-left:auto;}
.vh-price.vh-price .mv__g{display:flex;gap:2px;background:var(--bg);border-radius:100px;padding:2px;}
.vh-price.vh-price .mv__g button{border:0;background:none;border-radius:100px;padding:5px 10px;
  font:inherit;font-size:11.5px;font-weight:700;line-height:1.2;color:var(--muted);cursor:pointer;}
.vh-price.vh-price .mv__g button[aria-pressed=true]{background:var(--white);color:var(--blue);
  box-shadow:0 1px 3px rgba(20,26,52,.18);}
.vh-price.vh-price .cmp__short, .vh-price.vh-price .mrow{display:none;}
/* Два класса, а не один: в мобильном блоке уже есть `.pickm button`, и
   одноклассовое правило он перебивает. */
.vh-price.vh-price .pickm .pickm__ic{display:none;}
.vh-price.vh-price.x-on .x.pickx{display:none;}
@media (max-width:760px){/* Переключатель виден в обоих вариантах: из V2 всегда можно вернуться. */
.vh-price.vh-price .mv{display:flex;}
.vh-price.vh-price .cmp .xbtn{margin-left:0;}
.vh-price.vh-price .cmp__short{display:inline;font-size:11.5px;color:var(--muted);}
.vh-price.vh-price .cmp__label{display:none;}}
@media (max-width:760px){/* --- первый экран ---------------------------------------------------- */
.vh-price.vh-price.m2 .bc{display:none;}
.vh-price.vh-price.m2 .lead{padding:14px 16px;}
.vh-price.vh-price.m2 .lead h1{font-size:22px;}
.vh-price.vh-price.m2 .lead .lead__val{padding:0 0 0 10px;border-radius:0;background:none;box-shadow:inset 3px 0 0 var(--blue);font-size:12.5px;line-height:1.34;margin-bottom:5px;}
.vh-price.vh-price.m2 .lead .lead__val::before,.vh-price.vh-price.m2 .lead .lead__val::after{position:static;font-size:15px;line-height:0;vertical-align:-2px;}
.vh-price.vh-price.m2 .lead .lead__val::before{margin-right:3px;}
.vh-price.vh-price.m2 .lead .lead__val::after{margin-left:2px;}
.vh-price.vh-price.m2 .find{margin-bottom:0;}
/* Шесть частых запросов лентой. В V1 после второго они просто спрятаны,
     хотя это готовые формулировки, ради которых человек не набирает текст. */
.vh-price.vh-price.m2 .find__hint{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:2px;}
.vh-price.vh-price.m2 .find__hint::-webkit-scrollbar{display:none;}
.vh-price.vh-price.m2 .find__hint button{flex:none;}
.vh-price.vh-price.m2 .find__hint button:nth-of-type(n+3){display:inline-block;}
/* --- липкая панель управления ---------------------------------------- */
/* --stick считает JS: высота шапки разная на трёх брейкпоинтах, и вписать
     её числом значит поймать щель или нахлёст на четвёртом. */
.vh-price.vh-price.m2 .pickm{position:sticky;top:var(--stick,84px);z-index:30;display:flex;gap:8px;
    margin:0 -20px;padding:8px 20px;background:var(--bg);}
.vh-price.vh-price.m2 .pickm button{margin-bottom:0;}
.vh-price.vh-price.m2 #pickBtn{flex:1;min-width:0;gap:8px;padding:11px 14px;border-radius:14px;font-size:13px;}
.vh-price.vh-price.m2 #pickName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.vh-price.vh-price.m2 #pickCnt{flex:none;}
.vh-price.vh-price.m2 .pickm .pickm__ic{display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;
    background:var(--white);border:1px solid var(--line);border-radius:14px;cursor:pointer;}
.vh-price.vh-price.m2 .pickm .pickm__ic svg{width:17px;height:17px;fill:var(--ink-2);}
.vh-price.vh-price.m2 .pickm .pickm__ic:active{border-color:var(--blue);}
/* --- список услуг ----------------------------------------------------- */
.vh-price.vh-price.m2 .res__hero{height:120px;}
.vh-price.vh-price.m2 .res__cap{padding:30px 14px 8px;}
.vh-price.vh-price.m2 .res__cap h2{font-size:16px;}
.vh-price.vh-price.m2 .res__about{padding:10px 14px 0;font-size:12.5px;}
/* В выдаче поиска обложка показывала раздел лучшего результата и путала:
     список уже не про один раздел, и об этом говорит счётчик. */
.vh-price.vh-price.m2 .res.searching .res__hero{display:none;}
.vh-price.vh-price.m2 .res__bar{padding:10px 14px;}
.vh-price.vh-price.m2 .res__sort{display:none;}
.vh-price.vh-price.m2 .mrow{display:grid;grid-template-columns:minmax(0,1fr) 10px;align-items:center;
    gap:3px 12px;width:100%;padding:11px 14px;border:0;background:none;
    text-align:left;font:inherit;cursor:pointer;}
.vh-price.vh-price.m2 .mrow:active{background:var(--bg);}
.vh-price.vh-price .mrow__t{grid-column:1;font-size:14px;font-weight:700;line-height:1.3;color:var(--ink);}
.vh-price.vh-price .mrow__why{grid-column:1;font-size:11.5px;line-height:1.3;color:var(--muted);}
.vh-price.vh-price .mrow__m{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:3px 14px;}
.vh-price.vh-price .mrow__m .svc__v{font-size:13.5px;}
.vh-price.vh-price .mrow__m .svc__v .i{width:14px;height:14px;}
.vh-price.vh-price .mrow__m .svc__v--term, .vh-price.vh-price .mrow__m .svc__v--none{font-size:12.5px;}
.vh-price.vh-price .mrow__c{grid-column:2;grid-row:1/-1;width:10px;height:10px;fill:var(--muted);}
/* --- лист выбора раздела ---------------------------------------------- */
.vh-price.vh-price.m2 #secsM{display:grid;gap:6px;}
.vh-price.vh-price.m2 #secsM button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;
    width:100%;padding:12px 14px;text-align:left;cursor:pointer;font:inherit;color:var(--ink);
    background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);}
.vh-price.vh-price.m2 #secsM .pk__n{grid-column:1;display:flex;align-items:center;gap:9px;
    font-size:14px;font-weight:700;line-height:1.3;}
.vh-price.vh-price.m2 #secsM .pk__n::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;
    background:var(--acc,var(--blue));}
.vh-price.vh-price.m2 #secsM .pk__m{grid-column:1;font-size:12px;color:var(--muted);}
.vh-price.vh-price.m2 #secsM button i{grid-column:2;grid-row:1/-1;align-self:center;font-style:normal;
    font-size:12px;font-weight:700;color:var(--muted);}
.vh-price.vh-price.m2 #secsM button[aria-pressed=true]{border-color:var(--blue);background:var(--tint);
    box-shadow:inset 4px 0 0 var(--acc,var(--blue));}
/* --- карточка услуги --------------------------------------------------- */
/* Шапка и кнопки липкие: состав работ бывает на полтора экрана, и заявка
     не должна лежать под ним. */
.vh-price.vh-price.m2 .sheet--svc .sheet__in{max-height:92vh;padding:0;}
.vh-price.vh-price.m2 .sheet--svc .sheet__h{position:sticky;top:0;z-index:2;background:var(--white);
    padding:12px 14px 10px;border-bottom:1px solid var(--line);}
.vh-price.vh-price .card{padding:14px 14px 18px;}
.vh-price.vh-price .card__sec{display:flex;align-items:center;gap:8px;margin:0 0 7px;font-size:12px;color:var(--muted);}
.vh-price.vh-price .card__sec::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;
    background:var(--acc,var(--blue));}
.vh-price.vh-price .card__t{margin:0 0 13px;font-size:18px;font-weight:700;line-height:1.25;letter-spacing:-.01em;}
.vh-price.vh-price .card__f{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 16px;}
.vh-price.vh-price .card__f div{background:var(--bg);border-radius:var(--r-md);padding:10px 12px;}
.vh-price.vh-price .card__f span{display:block;margin-bottom:3px;font-size:11px;text-transform:uppercase;
    letter-spacing:.05em;color:var(--muted);}
.vh-price.vh-price .card__f b{font-size:15px;font-weight:700;}
.vh-price.vh-price .card .svc__vars{grid-template-columns:1fr;gap:18px;}
.vh-price.vh-price .card__none{margin:0;font-size:13px;color:var(--muted);}
.vh-price.vh-price .card__url{margin:12px 0 0;font-size:11.5px;color:var(--muted);word-break:break-all;}
.vh-price.vh-price .card__act{position:sticky;bottom:0;display:grid;grid-template-columns:1fr auto;gap:8px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:var(--white);border-top:1px solid var(--line);
    /* Тень, чтобы текст уезжал под полосу, а не обрывался в ней. */
    box-shadow:0 -10px 18px -12px rgba(20,26,52,.3);}
.vh-price.vh-price .card__act .btn{padding:13px 16px;}
/* Пояснение к панели: показывается только во втором варианте и только
     когда включён слой «Пояснения». */
.vh-price.vh-price.m2.x-on .x.pickx{display:block;}
.vh-price.vh-price .pickx .note{margin:0 0 8px;}
/* --- лист порядка показа ----------------------------------------------- */
.vh-price.vh-price .sortm{display:grid;gap:6px;padding:4px 0 8px;}
.vh-price.vh-price .sortm button{display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;padding:13px 14px;text-align:left;cursor:pointer;font:inherit;font-size:14px;
    color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);}
.vh-price.vh-price .sortm button[aria-pressed=true]{border-color:var(--blue);background:var(--tint);
    color:var(--blue);font-weight:700;}
.vh-price.vh-price .sortm .i{width:15px;height:15px;fill:var(--blue);}}
@media (max-width:560px){/* Поля .wrap здесь уже 12 px, а не 20: вылет липкой панели должен совпасть
     с ними, иначе страница получает горизонтальную прокрутку на 8 px. */
.vh-price.vh-price.m2 .pickm{margin:0 -12px;padding:8px 12px;}
.vh-price.vh-price.m2 .sheet--secs .sheet__in{max-height:88vh;}}
/* Карточка найденного раздела на телефоне. Это не часть V2, а починка:
   кнопка «Открыть раздел» не влезает в строку рядом с названием, и блок
   рассыпался в лестницу из одиночных слов в обоих вариантах. Правило живёт
   в мобильном медиазапросе, десктопной строки не касается. */
@media (max-width:560px){.vh-price.vh-price .secfind{flex-wrap:wrap;gap:12px;padding:14px 18px;}
.vh-price.vh-price .secfind img{width:52px;height:52px;border-width:2px;}
.vh-price.vh-price .secfind div{flex:1 1 140px;min-width:0;}
.vh-price.vh-price .secfind b{font-size:14px;}
.vh-price.vh-price .secfind span{margin-top:2px;font-size:12px;}
.vh-price.vh-price .secfind .btn{margin-left:0;width:100%;}}
@media (prefers-reduced-motion:reduce){.vh-price.vh-price *, .vh-price.vh-price *::before, .vh-price.vh-price *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;
    animation-duration:.01ms!important;animation-iteration-count:1!important;}}

/* End */


/* Start:/local/components/vh/price/templates/.default/price.extra.css?17887836167033*/
/* Раздел «Цены» V5 — правила, которых в макете быть не могло.
   Подключается ПОСЛЕ price.css.

   Здесь ровно три вещи, и каждая существует потому, что в макете это
   делал скрипт, а на сайте должно работать и без него. Ничего
   декоративного тут нет: любая правка вида идёт в макет и приезжает
   сюда пересборкой price.css. */

/* 1. «Что входит» — это <details>, а не кнопка со скриптом.
      Вид у <summary> должен остаться кнопочный: своей стрелки браузера
      быть не должно, наша стрелка поворачивается при раскрытии. */
.vh-price.vh-price .svc__d{display:block;}
.vh-price.vh-price summary.svc__more{list-style:none;cursor:pointer;}
.vh-price.vh-price summary.svc__more::-webkit-details-marker{display:none;}
.vh-price.vh-price summary.svc__more::marker{content:"";}
.vh-price.vh-price .svc__d[open] .svc__more .i{transform:rotate(180deg);}

/* 2. Кнопки выбора раздела и порядка лежат внутри GET-форм. Формы —
      лишний блок между .side и кнопками, и его надо обнулить, иначе
      столбец разделов получает браузерные отступы формы. */
.vh-price.vh-price #secs, .vh-price.vh-price #secsM, .vh-price.vh-price .sortm{margin:0;padding:0;border:0;}
.vh-price.vh-price .res__bar{margin-block:0;}

/* 3. Телефон: строка услуги короткая, десктопная спрятана.
      В макете скрипт выдавал ВМЕСТО десктопной строки короткую; здесь
      страница собирается на сервере, ширину экрана не знает, и в
      разметке лежат обе — показывает одну CSS. Прятать десктопную
      приходится тут: в макете такого правила не было и быть не могло,
      прятать было нечего.

      Состав работ на телефоне тоже не раскрывается в списке: заказчик
      отказался от гармошки («выталкивает соседние услуги»), состав
      открывается карточкой снизу. Но только если работает скрипт —
      без него остаётся десктопная строка со своим <details>. */
@media (max-width:760px){
  html.vh-js .vh-price.vh-price.m2 .svc__top,
  html.vh-js .vh-price.vh-price.m2 .svc__d,
  html.vh-js .vh-price.vh-price.m2 .svc__none{display:none;}
  html:not(.vh-js) .vh-price.vh-price .mrow{display:none;}
}

/* 4. Без JS лист снизу не открыть. Тогда на телефоне столбец разделов
      не прячется, а разворачивается на всю ширину и заменяет собой
      панель: выбор раздела должен работать всегда.
      Класс vh-js ставит price.js первой же строкой. */
html:not(.vh-js) .vh-price.vh-price .pickm{display:none;}
@media (max-width:1180px){
  html:not(.vh-js) .vh-price.vh-price .side{display:block;position:static;margin-bottom:16px;}
}

/* 5. Крестик очистки строки поиска. В макете это <button hidden>, которую
      показывал скрипт; здесь это ссылка, и печатается она всегда — со
      скриптом строка чистится по ходу набора, и появиться крестику было
      бы неоткуда. Прячем его состоянием самого поля, а не вторым решением
      в PHP и третьим в JS. */
.vh-price.vh-price .find__box:has(#q:placeholder-shown) .find__clr{display:none;}

/* 6. Подмена списка на месте. Пока идёт запрос, список глушим — но не
      раньше 180 мс (см. price.js): на быстром ответе мигание заметнее
      самой задержки. Клики по глухому списку не принимаем, иначе можно
      раскрыть состав у строки, которая вот-вот уедет. */
.vh-price.vh-price.is-loading .res{opacity:.5;pointer-events:none;}
.vh-price.vh-price .res{transition:opacity .12s linear;}
@media (prefers-reduced-motion:reduce){
  .vh-price.vh-price .res{transition:none;}
}

/* 7. Отправка заявки на месте, без перезагрузки. В макете формы нет
      серверного круга: там подтверждение показывал скрипт, и правилу
      «оба состояния в одной ячейке» взяться было неоткуда. На сайте
      форма и подтверждение лежат в одном гриде и в одной ячейке —
      поэтому блок не сжимается, страница не съезжает, а переход между
      состояниями остаётся плавным. Скрываем видимостью, а не display:
      display:none нечему анимировать, и высота ячейки схлопнулась бы. */
.vh-price.vh-price .req__slot{display:grid;}
.vh-price.vh-price .req__slot > form, .vh-price.vh-price .req__slot > .req__done{grid-area:1 / 1;min-width:0;}
.vh-price.vh-price .req__slot > form{transition:opacity .22s ease,transform .22s ease,visibility .22s;}
/* align-self:start — не украшение. Без него подтверждение растягивается на
   всю ячейку (это грид), его offsetHeight равен высоте формы, и расчёт
   «поставить по центру видимой части» честно даёт нулевой сдвиг: центрировать
   нечего, блок и так во всю высоту. */
.vh-price.vh-price .req__done{visibility:hidden;opacity:0;transform:translateY(8px);align-self:start;
  transition:opacity .28s ease .12s,transform .28s ease .12s,visibility .28s .12s;}
.vh-price.vh-price .req__slot.sent > form{visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;}
.vh-price.vh-price .req__slot.sent > .req__done{visibility:visible;opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .vh-price.vh-price .req__slot > form, .vh-price.vh-price .req__done{transition:none;transform:none;}
}

/* End */
/* /local/components/vh/price/templates/.default/price.css?178847663861723 */
/* /local/components/vh/price/templates/.default/price.extra.css?17887836167033 */