/* Прайс (/price) — таблицы по разделам, пять классов кузова, поиск.
   Подключается только на price.html, рядом со style.css и chrome.css.
   Токены те же, что в style.css: действие #D9232A, графика #EE292A,
   секции #F4F5F6, линии #E7E8EA, вторичный текст #5F6368. */

/* ---------- вводный блок ---------- */
.pr-intro{margin:0 0 26px}
.pr-intro p{font-size:var(--fs-body);color:#3C4043;margin:0 0 12px}
.pr-upd{display:inline-flex;align-items:center;gap:8px;font-family:'Montserrat';font-weight:600;
  font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase;color:#5F6368;
  background:#F4F5F6;border:1px solid #E7E8EA;border-radius:100px;padding:6px 14px;margin:0 0 16px}
.pr-upd i{width:7px;height:7px;border-radius:50%;background:#EE292A;display:block}

/* ---------- памятка «что влияет на цену» ---------- */
.pr-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:0 0 30px}
.pr-fact{background:#fff;border:1px solid #E7E8EA;border-radius:16px;padding:18px 20px}
.pr-fact b{display:block;font-family:'Montserrat';font-size:var(--fs-small);margin:0 0 5px}
.pr-fact span{font-size:var(--fs-small);color:#5F6368;line-height:1.5}

/* ---------- липкая панель: классы + поиск ---------- */
.pr-panel{position:static;background:#F9FAFB;
  padding:14px 0 12px;margin:0 0 8px;border-bottom:1px solid #E7E8EA}
/* Панель делает три дела: выбрать класс кузова, найти услугу словом и
   сказать, какие машины в выбранный класс входят. Раньше они делили одну
   строку и все три проигрывали: классы забирали всю ширину, поиску доставались
   фиксированные 260px — в них не влезала даже его собственная подсказка, —
   а «Ваш класс» висел третьей полупустой строкой.

   Стало две строки, у каждой одно дело: классы сверху, ниже поиск и рядом с
   ним ответ на вопрос, который классы только что задали. */
.pr-panel-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.pr-cls{display:flex;gap:4px;padding:4px;background:#F1F2F4;border-radius:100px;flex:1 1 100%}
/* Подпись переносится внутри кнопки, как на главной (#cls-tabs в tw-input.css).
   Был white-space:nowrap — и «Минивэн/Полноразмерный внедорожник» вылезал за
   край кнопки, а вместе с ней за край страницы: на телефоне экран ездил вбок.
   min-width:0 позволял коробке сжаться, но строку он не переносит. */
.pr-cls button{flex:1 1 auto;min-width:0;border:none;background:transparent;cursor:pointer;
  font-family:'Montserrat';font-weight:600;font-size:var(--fs-caption);letter-spacing:.03em;text-transform:uppercase;
  color:#5F6368;padding:9px 14px;border-radius:100px;transition:background .18s,color .18s;
  text-align:center;line-height:1.25}
.pr-cls button:hover{color:#131313}
/* Выбранный класс — красной таблеткой, той же #D9232A, что и «Записаться».
   Белым по ней контраст 4,97 при норме 4,5. Раньше кнопка была белой на сером:
   выбор читался, но ничем не перекликался со столбцом в таблице ниже. */
.pr-cls button.on{background:#D9232A;color:#fff;box-shadow:0 1px 3px rgba(217,35,42,.35)}
.pr-cls button.on:hover{color:#fff}
/* Поле шире собственной подсказки и не длиннее строки, по которой удобно
   вести глазом. Лупа слева — поле должно читаться поиском до того, как в него
   заглянут; ей отдан отступ, а не подмена placeholder-а. */
.pr-search{position:relative;flex:1 1 380px;max-width:460px}
.pr-search-i{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  color:#8A8E93;pointer-events:none}
.pr-search input{width:100%;font-family:'Manrope';font-size:var(--fs-body);color:#131313;
  border:1px solid #E7E8EA;background:#fff;border-radius:100px;padding:11px 38px 11px 42px}
.pr-search input:focus{outline:none;border-color:#131313}
/* видимая рамка для тех, кто ходит с клавиатуры — как у кнопок баннера */
.pr-search input:focus-visible{outline:2px solid #131313;outline-offset:2px}
.pr-search:focus-within .pr-search-i{color:#131313}
.pr-search input::placeholder{color:#8A8E93}
.pr-search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:none;
  border:none;background:transparent;cursor:pointer;color:#5F6368;font-size:var(--fs-h3);line-height:1;padding:6px 9px}
.pr-search.has-val .pr-search-clear{display:block}
/* Селектор с .pr-panel, а не просто .pr-ex: страница лежит внутри .content,
   а там правило .content p сильнее по специфичности (0,1,1 против 0,1,0) и
   перебивало сразу три свойства — кегль ставило 16 вместо 14, ширину резало
   до 76ch и добавляло 14px отступа снизу. Из-за этого отступа подсказка и
   стояла на 7 пикселей выше центра поля: флекс центрирует коробку вместе с
   полями, а поле было только снизу. */
.pr-panel .pr-ex{flex:1 1 240px;min-width:0;max-width:none;
  font-size:var(--fs-small);line-height:1.5;color:#5F6368;margin:0}
.pr-ex b{color:#131313;font-weight:600}

/* ---------- навигация по разделам ---------- */
/* Плашки разделов растягиваются, заполняя каждый ряд до правого края.
   Иначе ряды кончаются рваной лесенкой — у нас были хвосты в 253, 87 и 130
   пустых пикселей. Приём тот же, что у кнопок классов кузова на главной:
   flex-grow вместо прижатия влево. */
.pr-nav{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 34px}
.pr-nav a{flex:1 1 auto;text-align:center}
/* Предел на случай, когда в последнем ряду осталась одна плашка: без него она
   растягивается во всю строку и выглядит случайной кнопкой. На широких экранах
   предел не срабатывает вовсе — там самая широкая выходит 346px, — а на
   телефоне плашки должны занимать строку целиком, поэтому ниже 500px его нет. */
@media (min-width:501px){ .pr-nav a{max-width:460px} }
.pr-nav a{font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);color:#3C4043;
  background:#fff;border:1px solid #E7E8EA;border-radius:100px;padding:8px 16px}
.pr-nav a:hover{border-color:#131313;color:#131313}

/* ---------- раздел ---------- */
.pr-sec{margin:0 0 46px;scroll-margin-top:96px}
.pr-sec h2{font-family:'Montserrat';font-weight:800;font-size:var(--fs-h2);
  letter-spacing:-.01em;margin:0 0 10px}
.pr-lead{font-size:var(--fs-body);color:#3C4043;margin:0 0 18px}
/* Подпись к таблице тянется по краю таблицы, которую комментирует. Плашка
   залита — у неё есть видимый край, и край, обрывающийся на 60% ширины
   таблицы, читался как обломок. Меру строки внутри не ограничиваем: решение
   заказчика от 23.08 — тексты по сайту идут во всю ширину.
   .content p (0,1,1) бьёт .pr-note (0,1,0) — отсюда префикс. */
.content .pr-note{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);
  color:#5F6368;background:#F4F5F6;border-radius:12px;padding:14px 18px;margin:14px 0 0;max-width:none}
.pr-note b{color:#131313;flex:none}

/* ---------- таблица ---------- */
.pr-tbl-wrap{overflow-x:auto;border:1px solid #E7E8EA;border-radius:16px;background:#fff}
.pr-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-body);min-width:720px}
.pr-tbl thead th{font-family:'Montserrat';font-weight:600;font-size:var(--fs-caption);letter-spacing:.07em;
  text-transform:uppercase;color:#5F6368;text-align:right;padding:14px 16px;border-bottom:1px solid #E7E8EA;white-space:normal;line-height:1.25;vertical-align:bottom}
.pr-tbl thead th:first-child{text-align:left}
.pr-tbl tbody tr+tr th,.pr-tbl tbody tr+tr td{border-top:1px solid #EFF0F1}
.pr-tbl tbody tr:hover th,.pr-tbl tbody tr:hover td{background:#FAFBFC}
/* Таблица лежит внутри .content, а там правило «.content tr:first-child td,
   .content th» красит фон в #F4F5F6 и меняет кегль — оно писалось для таблиц
   зеркала, где первая строка была шапкой. Здесь из-за него серела вся колонка
   с названием услуги и первая строка каждого из 14 разделов, да ещё и мельче
   остальных. Возвращаем своё явно; специфичности хватает, чтобы перебить,
   но не хватает, чтобы задеть подсветку выбранного столбца. */
.pr-tbl th[scope="row"]{text-align:left;font-weight:400;padding:14px 16px;vertical-align:top;
  background:none}
.pr-tbl tbody tr:first-child td{background:none;
  font-size:var(--fs-body);color:#3C4043}
.pr-name{display:block;font-family:'Montserrat';font-weight:600;font-size:var(--fs-body);color:#131313;line-height:1.35}
.pr-sub{display:block;font-size:var(--fs-small);color:#5F6368;line-height:1.45;margin-top:3px}
.pr-tbl td{padding:14px 16px;text-align:right;white-space:nowrap;
  font-family:'Montserrat';font-weight:600;font-size:var(--fs-body);color:#3C4043;vertical-align:top}
.pr-tbl td.pc-txt{font-weight:400;font-size:var(--fs-small);color:#5F6368}

/* ---------- столбец выбранного класса ----------
   Подсветка была и раньше — #FFF6F6, — но от белого почти не отличалась, а
   наведение на строку красило тем же цветом ВСЕ пять столбцов, и выбранный
   в этот момент терялся совсем.

   Теперь столбец держится тремя приёмами сразу: заливка в 7% фирменного
   красного, две волосяные линии по бокам во всю высоту (столбец читается
   столбцом, а не набором ячеек) и красная черта под заголовком — она и
   связывает столбец с красной кнопкой класса наверху.

   Линии рисуем внутренней тенью, а не border: у таблицы border-collapse,
   и настоящая рамка сдвинула бы сетку.

   Красным здесь только линии. Красный ТЕКСТ на розовом даёт контраст 4,2 при
   норме 4,5 для мелкого — заголовок вместо этого просто темнеет с #5F6368
   до #131313, и это само по себе читается как «этот столбец ваш». */
.pr-root[data-cls="0"] .pc-0,.pr-root[data-cls="1"] .pc-1,.pr-root[data-cls="2"] .pc-2,
.pr-root[data-cls="3"] .pc-3,.pr-root[data-cls="4"] .pc-4{
  color:#131313;background:#FCF0F0;
  box-shadow:inset 1px 0 0 rgba(217,35,42,.20),inset -1px 0 0 rgba(217,35,42,.20)}

.pr-root[data-cls="0"] thead .pc-0,.pr-root[data-cls="1"] thead .pc-1,
.pr-root[data-cls="2"] thead .pc-2,.pr-root[data-cls="3"] thead .pc-3,
.pr-root[data-cls="4"] thead .pc-4{
  background:#FBE9EA;color:#131313;
  box-shadow:inset 1px 0 0 rgba(217,35,42,.20),inset -1px 0 0 rgba(217,35,42,.20),
             inset 0 -2px 0 #D9232A}

/* Наведение на строку — нейтральное. Выбранный столбец при этом темнеет
   сильнее остальных, чтобы не исчезнуть под подсветкой строки. */
.pr-root[data-cls="0"] tbody tr:hover .pc-0,.pr-root[data-cls="1"] tbody tr:hover .pc-1,
.pr-root[data-cls="2"] tbody tr:hover .pc-2,.pr-root[data-cls="3"] tbody tr:hover .pc-3,
.pr-root[data-cls="4"] tbody tr:hover .pc-4{background:#FAE0E1}

/* ---------- ничего не найдено ---------- */
.pr-empty{display:none;background:#fff;border:1px solid #E7E8EA;border-radius:16px;padding:26px;text-align:center;color:#5F6368}
.pr-root.is-empty .pr-empty{display:block}
.pr-sec.is-hidden{display:none}
.pr-tbl tr.is-hidden{display:none}

/* ---------- гарантия ---------- */
/* Гарантия. Была чёрной плашкой — единственным тёмным пятном на сайте: ни на
   главной, ни на страницах услуг тёмных секций нет, и блок читался как чужой.
   Теперь это секция в брендовом #F4F5F6 с белыми карточками — тот же приём, что
   у остальных блоков. Красная линия сверху — единственное украшение: она метит
   обещание, а не текст (красным по светлому мелкий шрифт не набрать, контраст
   4,4 при норме 4,5 — та же причина, по которой в топ-баре стоит #FF5A5B). */
.pr-guarantee{background:#F4F5F6;border:1px solid #E7E8EA;border-top:3px solid #EE292A;
  border-radius:24px;padding:clamp(24px,4vw,40px);margin:8px 0 0}
.pr-guarantee .eyebrow{margin:0 0 10px}
.pr-guarantee h2{font-family:'Montserrat';font-weight:800;font-size:var(--fs-h2);margin:0 0 14px;color:#131313}
.pr-guarantee p{color:#3C4043;font-size:var(--fs-body);margin:0 0 18px}
.pr-g-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.pr-g-item{background:#fff;border:1px solid #E7E8EA;border-radius:16px;padding:18px 20px;
  transition:transform .18s ease,box-shadow .18s ease}
.pr-g-item:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(19,19,19,.07)}
.pr-g-item b{display:block;font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);margin:0 0 6px;color:#131313}
.pr-g-item span{font-size:var(--fs-small);color:#5F6368;line-height:1.5}

/* ---------- мобильная раскладка: карточки, одна колонка цен ---------- */
@media (max-width:860px){
  .pr-panel{padding:12px 0 10px}
  .pr-cls{flex-wrap:wrap;border-radius:20px;width:100%}
  .pr-cls button{flex:1 1 28%;padding:9px 6px;font-size:var(--fs-caption);letter-spacing:0}
  .pr-search{flex:1 1 100%;max-width:none}
  /* На широком экране «Важно:» стоит колонкой слева — там есть чем платить за
     отступ. На 390px он съедал треть ширины, и тексту оставалось 33 знака при
     нижней границе комфорта в 45. Пускаем подпись в строку: колонка исчезает,
     строка вырастает вдвое. */
  .content .pr-note{display:block}
  .pr-panel .pr-ex{flex:1 1 100%}
  /* на телефоне подсказке в поле оставалось 8px запаса — на шрифте
     пошире она бы снова обрезалась. Поджимаем отступы, не трогая текст. */
  .pr-search input{padding-left:37px;padding-right:32px}
  .pr-search-i{left:13px}
  .pr-tbl-wrap{border:none;border-radius:0;background:transparent;overflow:visible}
  .pr-tbl{min-width:0;display:block;font-size:var(--fs-body)}
  .pr-tbl thead{display:none}
  .pr-tbl tbody{display:flex;flex-direction:column;gap:10px}
  .pr-tbl tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;
    background:#fff;border:1px solid #E7E8EA;border-radius:14px;padding:14px 16px}
  .pr-tbl tbody tr+tr th,.pr-tbl tbody tr+tr td{border-top:none}
  .pr-tbl th[scope="row"]{flex:1 1 62%;padding:0;background:none}
  .pr-tbl td{display:none;padding:0;background:none !important;margin-left:auto;font-size:var(--fs-body);color:#131313}
  .pr-root[data-cls="0"] .pc-0,.pr-root[data-cls="1"] .pc-1,.pr-root[data-cls="2"] .pc-2,
  .pr-root[data-cls="3"] .pc-3,.pr-root[data-cls="4"] .pc-4{display:block;
    background:none;box-shadow:none}   /* столбец на телефоне и так один */
  .pr-sub{max-width:none}
}

/* ---------- врезка прайса на странице услуги ---------- */
/* Кусок этой же таблицы, впечатанный в страницу услуги билдером (метки
   price:table). Разметка и стили те же, что у /price, — иначе завелась бы
   вторая таблица цен со своей вёрсткой и своей судьбой.

   Отдельный блок нужен по одной причине: на странице услуги таблица попадает
   внутрь .content, а у той свои правила для table/td/th (style.css, 65–68) —
   рамка, серая первая строка, выравнивание влево, padding. Их специфичность
   (0,1,1) выше, чем у .pr-tbl (0,1,0), и без этих переопределений врезка
   выглядела бы наполовину по-своему. Всё, что ниже, только возвращает
   таблице её собственный вид. */
.pr-embed{margin:0 0 26px}
.content .pr-embed .pr-tbl{min-width:720px;border-collapse:collapse;border:none;
  border-radius:0;background:transparent;overflow:visible}
.content .pr-embed .pr-tbl td,.content .pr-embed .pr-tbl th{border-bottom:none;padding:14px 16px}
.content .pr-embed .pr-tbl td{text-align:right;color:#131313}
/* Заголовок таблицы — подпись, а не второй заголовок страницы: своё «Наши
   цены» у страницы уже есть, а раздел прайса надо назвать, иначе непонятно,
   откуда взялись именно эти строки. */
.pr-embed-cap{caption-side:top;text-align:left;font-family:'Montserrat';font-weight:600;
  font-size:var(--fs-caption);letter-spacing:.07em;text-transform:uppercase;
  color:#5F6368;padding:0 0 10px}
.pr-embed-more{font-size:var(--fs-small);color:#5F6368;margin:12px 0 0}
.pr-embed-more a{color:#D9232A}

@media (max-width:860px){
  .content .pr-embed .pr-tbl{min-width:0}
  .content .pr-embed .pr-tbl td,.content .pr-embed .pr-tbl th{padding:0}
  .content .pr-embed .pr-tbl tr{padding:14px 16px}
  /* Из пяти колонок на телефоне видна одна, и без подписи непонятно, чья это
     сумма: на /price класс называет нажатая кнопка, во врезке кнопок нет.
     Имя класса приезжает из настроек прайса атрибутом на самой ячейке. */
  .pr-embed .pr-tbl td[data-cls-name]::after{content:' · ' attr(data-cls-name);
    font-size:var(--fs-small);color:#5F6368;font-weight:400;text-transform:lowercase}
}