/* ═══════════════════════════════════════════════════════════════════════
   Сквозное для всех блоков
   ────────────────────────
   Карточки, тени, ритм между блоками, заголовки разделов. Всё, что не принадлежит одному блоку.

   ЭТОТ ФАЙЛ - ДЛЯ ПРАВОК ТОЛЬКО ЭТОГО БЛОКА.

   Заведено 17.08.2026 по решению Павла: «разведи блоки по файлам», чтобы
   над разными блоками можно было работать одновременно и правки не
   затирали друг друга.

   ПРАВИЛА ДЛЯ ТОГО, КТО ПРАВИТ ЭТОТ ФАЙЛ:

   1. Пиши сюда только то, что относится к этому блоку. Общее - карточки,
      тени, ритм между блоками, заголовки разделов - в 00_obshchee.css.
   2. Файл подключается ПОСЛЕ glavnaya.css и guide.css, поэтому перебивает
      их при равной силе селектора. Но эталонные стили (css/etalon/*)
      написаны через [data-h] и [data-b] - против них пиши той же формы
      селектор или сильнее, иначе правило молча проиграет.
   3. Каждой правке - комментарий: что меняем, по чьей команде, и строка
      «Откат: …», чтобы можно было вернуть как было.
   4. Эталонные файлы css/etalon/* не трогать: они заморожены, на них
      ссылается манифест контрольных сумм.
   5. Проверять замером на живой странице, а не на глаз.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Ритм 70 там, где он не доезжал (диктовка Павла 18.08.2026) ────────

   Павел: «везде поставим не 95, давай 70 - семьдесят до и семьдесят после».
   Само число живёт в glavnaya.css, раздел 30, в переменной --sp-block: там
   95 заменено на 70 (на телефоне 48 на 35). Но три места это число мимо
   себя пропускали, и Павел их назвал отдельно: «до H2 блока „1016 отзывов“
   тоже 70», «преимущества для частных заказчиков: здесь я вообще 95 не
   увидел», «как получить готовый перевод: 70 должно быть, и от кнопки
   „Смотреть все услуги“ тоже 70». Ниже - оба исключения, замеренные на
   живой странице.

   ─────────────────────────────────────────────────────────────────────

   1.1. Отступ СВЕРХУ у разделов главной.

   Как было устроено: ритм между разделами задаёт `.blk + .blk` в guide.css
   (строка 256) - «отступ сверху у раздела, перед которым стоит другой
   раздел». Соседям он 95 и давал. Но у блока «1016 отзывов» предыдущий
   элемент - не раздел, а полоса переключателя «Частным клиентам /
   Компаниям» (div.track), и правило по соседству не срабатывало. Оставался
   базовый margin от `.blk[data-b]` (glavnaya.css, раздел 16) - это
   --vozduh-linii, отдельная переменная про воздух у разделительной линии,
   она равна 42px. Отсюда и замер: 42 вместо 95.

   Чиним не заплаткой на один блок, а по смыслу: у КАЖДОГО раздела главной
   отступ сверху равен общему ритму, независимо от того, что стоит выше.
   Соседним разделам это ничего не меняет (у них и так было --sp-block),
   схлопывание отступов берёт большее из двух чисел.

   Сила селектора: main + класс + атрибут против двух классов у `.blk + .blk`
   в guide.css и у `.blk[data-b]` в glavnaya.css - перебивает оба.
   Файл подключается только к главной (home_page.html), на внутренние
   страницы правило не утекает.

   Замер до: «1016 отзывов» 42px, остальные разделы 95px.
   Замер после: у всех 70px.

   Откат: удалить правило - у «1016 отзывов» вернутся 42px. */
main > .blk[data-b] {
  margin-top: var(--sp-block);
}

/* 1.2. Отступ между полосами галереи («Услуги» → «Как получить» →
   «Преимущества для частных заказчиков»).

   Эти три раздела - не .blk, а .galp внутри общей коробки #galereya. Каждый
   лежит в своей полосе div.track.gal, и расстояние между ними задавал
   эталон (css/etalon/glavnaya-b.css): `.track.gal { margin: 0 0 var(--sp-6) }`,
   а --sp-6 - это 24px из шкалы отступов. Ритм блоков --sp-block до них
   просто не доходил - потому Павел и увидел «здесь явно меньше».

   Тем же числом закрывается его замечание про кнопку: «Смотреть все услуги»
   - последний элемент полосы «Услуги», её нижний край совпадает с нижним
   краем полосы, поэтому от кнопки до заголовка «Как получить готовый
   перевод» теперь ровно те же 70px. Расстояние от карточек до самой кнопки
   (34px) не трогаем - Павел про него не говорил.

   Правим margin-bottom, а не сокращение margin: у полосы нет верхнего и
   боковых отступов, менять их незачем.

   Сила селектора: .galwrap[data-b] .track[data-b].gal - три класса и два
   атрибута против двух классов и одного атрибута у эталона; эталонный файл
   заморожен, его не трогаем, перебиваем отсюда. Привязка к .galwrap держит
   правило внутри галереи главной.

   Замер до: 24px до заголовков «Как получить готовый перевод» и
   «Преимущества для частных заказчиков» (на вкладке «Компаниям» - до
   «Наши преимущества для корпоративных заказчиков»).
   Замер после: 70px.

   Откат: удалить правило - вернутся 24px из эталона. */
.galwrap[data-b] .track[data-b].gal {
  margin-bottom: var(--sp-block);
}

/* ── 2. Фирменная кнопка: градиент на всех кнопках (диктовка Павла 18.08) ─

   Сначала градиент сделали на одной кнопке - «Калькулятор заказа». Павел
   посмотрел и сказал: «наверху ещё чуть светлее, и расшарь на все кнопки».

   Как устроен перелив. Верх - осветлённый фирменный #CB3039, к 34% высоты
   уходит в сам фирменный #8C1821, низ ещё темнее - #75121A. Ранний переход
   оставляет светлой только верхнюю полоску: так просил Павел ещё в первой
   правке, «чтобы сверху было меньше светлого и в тёмный уходило раньше».
   Перепад яркости от верха к низу - около 46 единиц; для сравнения, в
   первой попытке было 12, и градиент читался как ровная заливка.

   Объём держат две тени: постамент снизу (#6D131A) и светлый блик изнутри
   сверху - тот же приём, что на кнопках действующего сайта.

   Состояния: при наведении кнопка светлеет и приподнимается на пиксель,
   при нажатии светлеет ещё сильнее и «вдавливается» - постамент убирается.
   Порядок именно такой, как просил Павел: «когда нажимаешь, становится
   ещё чуть светлее».

   Кнопки, которых это касается: «Калькулятор заказа» и «Онлайн заявка» на
   первом экране, «Смотреть все услуги» под блоком услуг, «Получить расчёт
   стоимости и сроков» в форме заявки, «Перейти к оплате» в форме оплаты,
   «Заказать перевод» в блоках-призывах.
   Серые и белые кнопки (стрелки лент, «Читать полностью», вкладки цен) не
   задеты - у них свой вид.

   ПРАВКА 19.08.2026: в списки добавлена «#oplata .oplknopka» - кнопка
   «Перейти к оплате» восстановленной формы оплаты. Держать её перелив в
   17_oplata.css было нельзя: перелив общий для всех красных кнопок сайта,
   и вторая копия тех же цветов разошлась бы с этой при первой правке.
   Наведение и нажатие взяты с оговоркой «:not(:disabled)»: пока приём
   платежей не подключён, кнопка выключена и подсвечиваться не должна.
   Откат: убрать шесть строк «#oplata .oplknopka» из списков ниже -
   кнопка оплаты станет плоской, остальные не заметят.

   Уважает системную настройку «уменьшить анимацию».

   Про силу селекторов. У кнопок первого экрана в glavnaya.css стоит
   правило `.acts[data-h] .act[data-h].main` с плоской заливкой - это три
   класса и два атрибута. Поэтому здесь пришлось перечислить .main и .sec
   явно: иначе наш градиент проигрывал и кнопки оставались плоскими -
   поймано замером.

   Откат: удалить раздел 2 - все кнопки станут плоскими #8C1821. */

/* Перелив вынесен в переменные: тем же переливом красится подсветка блоков
   при наведении (раздел 4, диктовка Павла 18.08: «чтобы при наведении все
   становились красным с переливом, с градиентом, как кнопка заказа»).
   Два одинаковых списка цветов в одном файле разошлись бы при первой же
   правке. Значения не изменились - те же, что стояли здесь числами.
   Откат: подставить цвета обратно в свойства. */
/* ПРАВКА 24.08.2026. В списки кнопок добавлен второй селектор
   «.zayavka-blok .zknopka» рядом с каждым «#zayavka .zknopka».

   Зачем. Единое правило формы кнопок сайта (градиент, постамент, овал,
   наведение, нажатие) привязано к id блока заявки главной. На других
   страницах форм может быть несколько - у страницы «Технический перевод»
   их две, - и одним id их не покрыть: id на странице уникален. Форма
   переиспользуется классом «zayavka-blok», и без второго селектора её
   кнопка оставалась квадратной 300x46, тогда как на главной она
   274,52x51,19 с овалом 999. Разбор Павла 24.08.2026.

   Правило одно на весь сайт: новые кнопки добавлять В ЭТИ ЖЕ списки, а не
   писать свои правила на страницах. */
:root {
  --knopka-fon: linear-gradient(180deg, #cb3039 0%, #8c1821 34%, #75121a 100%);
  --knopka-fon-navedenie: linear-gradient(180deg, #d93a44 0%, #9a1a23 34%, #82141d 100%);
  --knopka-fon-nazhatie: linear-gradient(180deg, #e5444e 0%, #a81d27 34%, #8d1620 100%);
}

body .acts[data-h] .act[data-h],
body .acts[data-h] .act[data-h].main,
body .acts[data-h] .act[data-h].sec,
body .vseuslugi,
body a.tp-knopka,
body #zayavka .zknopka,
body .zayavka-blok .zknopka,
body #oplata .oplknopka,
body .btn.big[data-b],
body a.btn.big {
  background-image: var(--knopka-fon);
  border: 0;
  box-shadow:
    0 3px 0 0 #6d131a,
    inset 0 4px 8px 4px rgba(255, 255, 255, .12);
  transition: background-image .25s, box-shadow .25s, transform .25s;
}

/* 2.1. Нижние углы кнопки: почему они казались квадратными.
   Диктовка Павла 18.08.2026: «Кнопка "Смотреть все услуги" - сверху
   закруглённая неплохо, а нижние края какие-то более квадратные».

   Замер. Радиусы у кнопки одинаковые со всех четырёх сторон - 8px/8px/8px/8px
   (проверено на живой странице, и у «Смотреть все услуги», и у кнопок первого
   экрана, и у кнопки заявки: разметка одна). Значит дело не в радиусах.

   Виноват постамент - тень `0 3px 0 0 #6d131a` из правила выше. Она рисует
   ту же форму, что и кнопка, сдвинутую вниз на 3px. Из-за этого у низа
   происходят сразу две вещи:
     · собственный скруглённый угол кнопки заливается постаментом - цвет
       постамента #6D131A и низ градиента #75121A отличаются на 4%, граница
       глазу не видна, и дуга пропадает;
     · наружу торчит только нижняя полоска постамента высотой 3px, а его
       дуга - 8px. Видна самая пологая треть дуги, и она читается как прямой
       угол.
   Сверху над углом ничего не лежит, там дуга видна целиком - отсюда и
   «сверху закруглено, снизу квадратно». Проверено снимками с восьмикратным
   увеличением.

   Чиним причину, а не симптом: постамент остаётся (Павел про кнопку сказал
   «вообще классная с переливом, прям супер» - вид не меняем), но нижним
   углам даётся радиус 12px. Тогда сама красная плашка внизу заворачивает
   шире, постамент повторяет этот заворот, и низ читается таким же круглым,
   как верх. Число подобрано перебором 8/10/11/12/14 на увеличенных снимках.

   Правим все кнопки с постаментом, а не одну названную: причина у них общая,
   разметка одна, и «Смотреть все услуги» отличалась бы от соседей.
   Длинные свойства, а не сокращение border-radius: верхние углы задаёт
   glavnaya.css, и переписывать их незачем.

   Откат: удалить правило - вернутся ровные 8px и квадратный на вид низ. */
body .acts[data-h] .act[data-h],
body .vseuslugi,
body a.tp-knopka,
body #zayavka .zknopka,
body .zayavka-blok .zknopka,
body #oplata .oplknopka,
body .btn.big[data-b],
body a.btn.big {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* 2.2. Наведение - только там, где есть настоящий курсор.

   Решение Павла 08.09.2026: «да, закрывай наведение на всех кнопках».
   Замер на стенде настоящим касанием показал, что после нажатия пальцем
   кнопка остаётся в виде «наведение» и не отпускает его, пока не тронешь
   другое место экрана: тень 0 4px вместо 0 3px, осветление на 10 %,
   подъём на точку. Это то же, о чём предупреждает раздел 4.5 ниже: «на
   сенсорном экране :hover не отпускает». Кнопки с постаментом в это
   условие когда-то не попали - теперь попали.

   Условие (hover: hover) and (pointer: fine) значит «есть настоящий
   курсор». На телефоне и планшете правило не действует вовсе; на
   ноутбуке с сенсорным экраном мышь красит наведением по-прежнему.

   Откат: снять @media - наведение вернётся и снова будет залипать на
   телефоне. */
@media (hover: hover) and (pointer: fine) {
  body .acts[data-h] .act[data-h]:hover,
  body .acts[data-h] .act[data-h].main:hover,
  body .acts[data-h] .act[data-h].sec:hover,
  body .vseuslugi:hover,
  body a.tp-knopka:hover,
  body #zayavka .zknopka:hover,
  body .zayavka-blok .zknopka:hover,
  body #oplata .oplknopka:hover:not(:disabled),
  body .btn.big[data-b]:hover,
  body a.btn.big:hover {
    background-image: var(--knopka-fon-navedenie);
    box-shadow:
      0 4px 0 0 #6d131a,
      inset 0 4px 10px 4px rgba(255, 255, 255, .18);
    transform: translateY(-1px);
  }
}

/* Осветление приходит из эталона - `.act[data-h]:hover{filter:
   brightness(1.1)}` в css/etalon/glavnaya-a.css, и `.btn:hover` в
   etalon/dvizhok.css. Эталон не трогаем, поэтому на сенсорном экране
   возвращаем свойству его собственное начальное значение. Значение `none`
   здесь не «переписанный покой», а именно начальное: ни одно правило
   сайта фильтр кнопкам в покое не задаёт. */
@media (hover: none), (pointer: coarse) {
  body .acts[data-h] .act[data-h]:hover,
  body .acts[data-h] .act[data-h].main:hover,
  body .acts[data-h] .act[data-h].sec:hover,
  body .hdrbtn[data-h]:hover,
  body .btn:hover {
    filter: none;
  }
}

body .acts[data-h] .act[data-h]:active,
body .acts[data-h] .act[data-h].main:active,
body .acts[data-h] .act[data-h].sec:active,
body .vseuslugi:active,
body a.tp-knopka:active,
body #zayavka .zknopka:active,
body .zayavka-blok .zknopka:active,
body #oplata .oplknopka:active:not(:disabled),
body .btn.big[data-b]:active,
body a.btn.big:active {
  background-image: var(--knopka-fon-nazhatie);
  box-shadow:
    0 0 0 0 #6d131a,
    inset 0 4px 8px 4px rgba(255, 255, 255, .22);
  transform: translateY(2px);
}

@media (prefers-reduced-motion: reduce) {
  body .acts[data-h] .act[data-h],
body .acts[data-h] .act[data-h].main,
body .acts[data-h] .act[data-h].sec,
  body .vseuslugi,
  body a.tp-knopka,
  body #zayavka .zknopka,
  body .zayavka-blok .zknopka,
  body #oplata .oplknopka,
  body .btn.big[data-b],
  body a.btn.big {
    transition: none;
  }

  body .acts[data-h] .act[data-h]:hover,
body .acts[data-h] .act[data-h].main:hover,
body .acts[data-h] .act[data-h].sec:hover,
  body .acts[data-h] .act[data-h]:active,
body .acts[data-h] .act[data-h].main:active,
body .acts[data-h] .act[data-h].sec:active,
  body .vseuslugi:hover,
  body a.tp-knopka:hover,
  body .vseuslugi:active,
  body a.tp-knopka:active,
  body #zayavka .zknopka:hover,
  body .zayavka-blok .zknopka:hover,
  body #zayavka .zknopka:active,
  body .zayavka-blok .zknopka:active,
  body #oplata .oplknopka:hover,
  body #oplata .oplknopka:active,
  body .btn.big[data-b]:hover,
  body .btn.big[data-b]:active {
    transform: none;
  }
}


/* ── 3. Мобильная версия: общий масштаб (диктовка Павла 18.08.2026) ───────

   Павел: «для мобильной версии сократить до H2 и после H2 - у нас там 70,
   давай сделаем 50. Все H2 сделать поменьше процентов на 20».

   Что меняется:
   · ритм между блоками и вокруг заголовка - 35px (ниже, пункт 3.1);
   · заголовки разделов - 23px было, стало 18,5px, ровно минус 20%;
   · заголовок страницы H1 - вдвое меньше: было 40px, стало 20px, как Павел
     и сказал «H1 сделать в два раза меньше».

   Откат: удалить раздел 3. */

/* 3.1. Ритм на телефоне: 35 вместо 50.

   Вторая диктовка того же дня: «Ты уже менял размеры между блоками, H1, H2,
   делали пятьдесят. Давай сделаем тридцать пять, то есть ещё меньше: от H2
   до текста и от блока до H2».

   Одним числом закрываются оба расстояния, потому что оба берутся из этой
   переменной, и ни в одном месте страницы не прибиты числом:
     · между разделами - `.blk { margin-block: var(--sp-block) }` в guide.css
       и `main > .blk[data-b]` в разделе 1 этого файла;
     · от заголовка раздела до его содержимого - `.blk > h2 { margin-bottom:
       var(--sp-block) }` в glavnaya.css, раздел 34;
     · подзаголовок, если он есть (цены, преимущества компаниям), прижат к
       заголовку на 14px через `calc(14px - var(--sp-block))`, а уже от него
       идёт тот же отступ до содержимого.

   Это и есть ответ на замечание Павла про блок цен: «если у нас там разные
   блоки, то это расстояние должно адаптироваться под разные блоки,
   подтягиваться наверх, но не должно быть фиксировано». Отступы соседних
   разделов не складываются, а схлопываются - браузер берёт большее из двух,
   поэтому между блоками ровно 35, а не 70. Блок без содержимого сверху
   (скрытые «Рекомендации» на вкладке «Частным») воздуха не добавляет вовсе:
   у скрытого элемента отступов нет.

   Компьютер не трогаем - там --sp-block остаётся 70px (glavnaya.css,
   раздел 30).

   Замер до: --sp-block 50px, отступ H2 → содержимое 50px у всех тринадцати
   заголовков, между разделами 50px.
   Замер после: 35px и там, и там; на компьютере по-прежнему 70px.

   Откат: вернуть 50px. */
body.mob {
  --sp-block: 35px;
}

/* Кегль заголовков разделов на телефоне. Павел прошёл справочник кеглей
   (ШРИФТЫ_МОБИЛЬНЫЕ 2.docx) и написал против этой строки: «20 px, сделать
   так все H2». Одно число закрывает все двенадцать заголовков разделов;
   тринадцатый - заголовок формы заявки - жил отдельно и приведён к тем же
   20 / 24 в 14_zayavka.css.
   Откат: вернуть 18.5px. */
body.mob .blk[data-b] > h2[data-b],
body.mob .galp[data-b] > h2[data-b],
body.mob .blk.pisma > h2[data-b] {
  font-size: 20px;
  line-height: 1.2;
}

body.mob h1[data-h] {
  font-size: 20px;
  line-height: 1.2;
}


/* ── 4. Раскрывашки без плюсиков: подсветка вместо значка ─────────────────

   Диктовка Павла 18.08.2026: «Все кнопочки, все плюсики убираем - выглядят
   дебеловато, некрасиво. Вместо этого при наведении: на компьютере - мышкой,
   на телефоне - касанием пальцем. Навёл - блок окрасился красным, текст в нём
   стал белым. Ткнул - он раскрылся. Чтобы было понятно, что это активные
   значки».

   Отдельно про первый экран: «Текст, который открывается по кнопке
   «подробнее» под строкой «Точный перевод точно в срок», - сделаем так: сама
   строка «Точный перевод точно в срок» красится красным, нажимаешь на неё -
   открывается текст».

   ─────────────────────────────────────────────────────────────────────

   Где стояли знаки (замер на живой странице до правки):

     · .chev - плашки первого экрана (2007, 65, 1016 и прочие), «+» виден
       только на телефоне;
     · .fold .pl - карточки услуг, отраслей, преимуществ частным и бизнесу,
       акций: «+» на телефоне;
     · .tarif .pl - карточки тарифов (Базовый, Профессиональный, Экспертный):
       «+» и на компьютере тоже, они свёрнуты всегда;
     · .bul-tog - буллеты «компаниям» на первом экране: «+» на телефоне;
     · .intro-tog - кнопка «Подробнее +» под слоганом на телефоне.

   Что стало: знаков не видно нигде, вместо них подсветка блока. Разметка
   знаков в документе остаётся (span.pl, span.chev) - на неё ссылаются
   проверки home/test_calculator_pages.py, и трогать шаблон ради косметики
   незачем. Кнопка «Подробнее» из первого экрана убрана насовсем: её работу
   принял на себя сам слоган, как и просил Павел (правка в glavnaya.js).

   Про !important. Файлы блоков 02-16 подключаются ПОСЛЕ этого файла, и
   почти каждый из них так или иначе красит те же карточки (например
   12_ceny.css правит коробку знака у тарифов селектором с идентификатором
   #ceny - его обычной специфичностью отсюда не перебить). Поэтому решение
   Павла закреплено жёстко: знак убран и подсветка положена поверх любых
   поздних правил. Это осознанный выбор, а не небрежность.

   Откат: удалить раздел 4 - вернутся плюсики и обычный вид карточек.
   ─────────────────────────────────────────────────────────────────────── */

:root {
  /* фирменный красный подсветки - тот же, что у кнопок (раздел 2).
     Остаётся сплошной подложкой под переливом: если браузер не осилит
     градиент, блок всё равно будет красным, а не белым с белым текстом. */
  --podsvet-fon: #8c1821;
  --podsvet-tekst: #fff;
}

/* 4.1. Знаки «+» и «−» больше не показываются.

   Один селектор на все три вида знака: .chev у плашек первого экрана и
   .pl внутри .fold у карточек и тарифов. Обе коробки помечены aria-hidden,
   для незрячих ничего не пропадает.

   Откат: удалить правило - знаки вернутся. */
body .chev[data-h],
body .fold[data-b] .pl[data-b] {
  display: none !important;
}

/* 4.2. Буллеты «компаниям»: кнопка остаётся, но её не видно.

   Здесь нельзя просто спрятать: на этой кнопке живут aria-expanded,
   aria-label и обработчик нажатия, она же - точка входа с клавиатуры.
   Поэтому кнопка сжимается в точку по обычному приёму «видно только
   голосовому чтению» (тот же, что у .vhidden в guide.css), а глиф «+»
   снимается. Фокус на ней видно по подсветке всего буллета - правило 4.4.

   Заодно кнопку возвращаем в дерево до 760px: glavnaya.css прячет её при
   body:not(.mob), то есть уже с 641px, хотя раскрытие блока по нажатию в
   промежутке 641-760px работает (glavnaya.js меряет 760). До правки в этой
   полосе ширин буллет нельзя было раскрыть с клавиатуры.

   Откат: удалить правило - вернутся синие плюсы в углу буллета. */
body .buls.seg .bul .bul-tog {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body .buls.seg .bul .bul-tog::after {
  content: none !important;
}

@media (max-width: 760px) {
  body .buls.seg .bul .bul-tog {
    display: block !important;
  }
}

/* 4.3. Общий вид активного блока.

   Класс .raskryvashka вешает glavnaya.js - и снимает его там, где на данной
   ширине экрана блок ничего не раскрывает (плашки первого экрана и буллеты
   «компаниям» на компьютере уже раскрыты, нажимать нечего).

   ПРАВКА 18.08.2026, вторая диктовка того же дня. Павел: «можно ли сделать
   при наведении на любой блок, на любую плашку, кроме отзывов... 24/7, 2007,
   от одного дня, паспорта и удостоверения, заказ срочного перевода, 1500
   профессиональных переводчиков, скидка десять процентов на первый заказ,
   технический перевод, преимущества для корпоративных заказчиков,
   профессиональные переводчики. На мобильной ты сделал, что при касании
   только определённые виды затемняются, а здесь - чтобы при наведении все
   становились красным с переливом, с градиентом, как кнопка заказа».

   Значит, наведение мышью и раскрытие по нажатию - теперь РАЗНЫЕ вещи:

     · .raskryvashka - блок, который на этой ширине действительно
       раскрывается. Только он получает курсор-палец, нажатие на всю плашку
       и подсветку пальцем (.tykn). Тут ничего не изменилось: обещать
       раскрытие там, где нечего раскрывать, нельзя, и на телефоне Павел
       просил оставить как есть.
     · Семейства ниже - всё, что красится ПРИ НАВЕДЕНИИ на компьютере,
       независимо от того, раскрывается блок на этой ширине или нет. Здесь
       наведение - просто отклик на курсор, ничего не обещающий.

   Семейства (списком, потому что перечислять их придётся ещё трижды):

     · body .hero .pl - плашки первого экрана: 2007, 65, 1500+, 1016, 519,
       99% (в разметке первого экрана .pl больше ни на чём не стоит; знак
       «плюс» в карточках - это .fold .pl, он вне .hero);
     · body .buls .bul - оба ряда буллетов: общий (24/7, 2 минуты, Онлайн,
       100%) и переключаемый (от 1 дня, бесплатная доставка, 5 нотариусов -
       и корпоративные: 150 400 лексических единиц, до 70% экономии...);
     · body .fold - карточки услуг, отраслей, преимуществ частным и
       корпоративным, акций и тарифов; их 35 штук;
     · body #perevodchiki .anketa - карточки переводчиков (Юрий, Ольга,
       Иван, Михаил), вместе с копиями для бесконечной ленты.

   ОТЗЫВЫ НЕ ПОДСВЕЧИВАЮТСЯ - прямое исключение Павла («на любую плашку,
   кроме отзывов»). Ни .rev, ни .plat (плашки площадок), ни .pismo ни в один
   из четырёх селекторов не попадают, и специально их гасить не нужно.

   Курсор-палец даётся только раскрывашкам: показывать палец над плашкой,
   которая на этой ширине ничего не делает, - обманывать.

   Откат: убрать из списков всё, кроме .raskryvashka - подсветка вернётся
   только туда, где блок раскрывается. */
body .raskryvashka {
  cursor: pointer;
}

body .hero .pl,
body .buls .bul,
body .fold:not(.bez-otklika),
body #perevodchiki .anketa,
body .akciya,
body .smz li,
body .raskryvashka:not(.bez-otklika) {
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* Слоган первого экрана - тот случай, когда Павел просил красить строку и
   без наведения: она заменила собой кнопку «Подробнее», и по чёрному тексту
   не догадаться, что строка нажимается. Боковое поле уходит в минусовое
   поле, поэтому строка остаётся ровно на прежнем месте; сверху и снизу
   ничего не добавляется - вертикальный ритм первого экрана не сдвигается. */
body .hero .hleft .slogan.raskryvashka {
  color: var(--podsvet-fon);
  padding-left: 6px;
  padding-right: 6px;
  margin-left: -6px;
  margin-right: -6px;
  border-radius: 6px;
  /* без этого полоска подсветки выходит кривой: max-width: 100% не даёт
     строке разъехаться на минусовые поля, и она просто съезжает влево -
     слева вылезает на 6px, справа не доходит 6px до края заголовка.
     Замер до: полоска 6,8-356,2 при заголовке 12,8-362,2. */
  max-width: none;
}

/* 4.4. Сама подсветка: перелив кнопки заказа, текст белый.

   Диктовка Павла 18.08.2026: «чтобы при наведении все становились красным с
   переливом, с градиентом, как кнопка заказа. Кнопка заказа сейчас вообще
   классная с переливом, прям супер». Поэтому здесь не плоская заливка, а
   ровно тот же --knopka-fon, что у кнопок в разделе 2: верх #CB3039, к 34%
   высоты фирменный #8C1821, низ #75121A. Сплошной --podsvet-fon остаётся под
   ним подложкой на случай, если градиент не отрисуется.

   Про движение. Павел разрешил «может, ещё как-то двигается, оттеняется - или
   просто становится красным». Подъём блока (transform: translateY) я не
   ставил намеренно: блок уходит вверх из-под курсора, и если курсор стоит в
   освободившейся полоске у нижней кромки, наведение снимается, блок падает
   обратно, наведение возвращается - и так по кругу. На кнопках подъём в 1px
   безопасен, они мелкие и курсор в них попадает серединой, а карточки услуг
   человек цепляет краем. Вместо движения - тень поглубже: она читается как
   приподнятость и дребезжать не может.

   Четыре состояния описаны одинаково:
     · наведение мышью - только там, где мышь есть (см. 4.5), и по всем
       семействам из 4.3;
     · касание пальцем - класс .tykn, его ставит и снимает glavnaya.js;
       только на раскрывашках, как Павел и просил;
     · клавиатура - фокус на кнопке внутри блока или на самом блоке.

   Второй селектор в каждой паре красит потомков: ссылка «Подробнее о...»,
   серые подписи (.quote, .staj, .pcnt), цена, промокод - всё это на красном
   должно читаться, а свой цвет у них прописан отдельными правилами. */
@media (hover: hover) and (pointer: fine) {
  body .hero .pl:hover,
  body .buls .bul:hover,
  body .fold:not(.bez-otklika):hover,
  body #perevodchiki .anketa:hover,
  body .akciya:hover,
  body .smz li:hover,
  body .raskryvashka:not(.bez-otklika):hover {
    background-color: var(--podsvet-fon) !important;
    background-image: var(--knopka-fon) !important;
    border-color: var(--podsvet-fon) !important;
    box-shadow: 0 10px 20px -8px rgba(140, 24, 33, .55) !important;
  }

  body .hero .pl:hover,
  body .hero .pl:hover *,
  body .buls .bul:hover,
  body .buls .bul:hover *,
  body .fold:not(.bez-otklika):hover,
  body .fold:not(.bez-otklika):hover *,
  body #perevodchiki .anketa:hover,
  body #perevodchiki .anketa:hover *,
  body .akciya:hover,
  body .akciya:hover *,
  body .smz li:hover,
  body .smz li:hover *,
  body .raskryvashka:not(.bez-otklika):hover,
  body .raskryvashka:not(.bez-otklika):hover * {
    color: var(--podsvet-tekst) !important;
    -webkit-text-fill-color: var(--podsvet-tekst) !important;
  }

  /* Точки маркированных списков внутри карточки. Своё правило нужно
     потому, что ::marker не наследует -webkit-text-fill-color, а цвет
     берёт у себя: без этой строки текст пункта белел, а точка перед ним
     оставалась тёмной (замечание Павла 02.09.2026 по плашкам нефтегаза). */
  body .card3:hover li::marker,
  body .buls .bul:hover li::marker,
  body .fold:not(.bez-otklika):hover li::marker,
  body #perevodchiki .anketa:hover li::marker,
  body .akciya:hover li::marker,
  body .smz li:hover::marker,
  body .raskryvashka:not(.bez-otklika):hover li::marker {
    color: var(--podsvet-tekst) !important;
  }
}

/* Касание пальцем. Правило стоит отдельным блоком намеренно: браузер,
   не знающий :focus-visible или :has(), выбрасывает ВЕСЬ список селекторов,
   в котором встретил незнакомое. Сложи их в один список - и старый браузер
   заодно потеряет подсветку по касанию, то есть главное.

   Перелив здесь тот же, что при наведении, - Павел просил единообразия
   («подсветку касанием на телефоне тоже переведи на градиент»). Довода
   против не нашлось: карточки на телефоне занимают почти всю ширину, перелив
   на них читается так же, как на кнопке, а вспышка длится 180 мс. */
body .raskryvashka.tykn {
  background-color: var(--podsvet-fon) !important;
  background-image: var(--knopka-fon) !important;
  border-color: var(--podsvet-fon) !important;
  box-shadow: 0 10px 20px -8px rgba(140, 24, 33, .55) !important;
}

body .raskryvashka.tykn,
body .raskryvashka.tykn * {
  color: var(--podsvet-tekst) !important;
  -webkit-text-fill-color: var(--podsvet-tekst) !important;
}

/* Клавиатура: фокус на самом блоке (строка слогана) - тем же переливом. */
body .raskryvashka:focus-visible {
  background-color: var(--podsvet-fon) !important;
  background-image: var(--knopka-fon) !important;
  border-color: var(--podsvet-fon) !important;
  box-shadow: 0 10px 20px -8px rgba(140, 24, 33, .55) !important;
  outline: 2px solid #fff;
  outline-offset: -4px;
}

body .raskryvashka:focus-visible,
body .raskryvashka:focus-visible * {
  color: var(--podsvet-tekst) !important;
  -webkit-text-fill-color: var(--podsvet-tekst) !important;
}

/* Клавиатура: фокус на кнопке ВНУТРИ блока (.pltog, .foldh, .bul-tog).
   У буллетов «компаниям» кнопка сжата в точку (правило 4.2), и без этого
   правила человек не видел бы, где он находится. */
body .raskryvashka:has(:focus-visible) {
  background-color: var(--podsvet-fon) !important;
  background-image: var(--knopka-fon) !important;
  border-color: var(--podsvet-fon) !important;
  box-shadow: 0 10px 20px -8px rgba(140, 24, 33, .55) !important;
  outline: 2px solid #fff;
  outline-offset: -4px;
}

body .raskryvashka:has(:focus-visible),
body .raskryvashka:has(:focus-visible) * {
  color: var(--podsvet-tekst) !important;
  -webkit-text-fill-color: var(--podsvet-tekst) !important;
}

/* 4.5. Почему наведение спрятано в @media (hover: hover).

   На сенсорном экране :hover не отпускает: браузер оставляет его на
   последнем тронутом элементе до нажатия в другом месте, и подсветка
   залипала бы на раскрытой карточке навсегда. Условие (hover: hover) and
   (pointer: fine) - это «есть настоящий курсор»; на телефоне и планшете
   правило не действует вовсе, там подсветку даёт класс .tykn, который
   снимается по отпусканию пальца (см. glavnaya.js). На ноутбуке с
   сенсорным экраном работают оба: мышь красит наведением, палец - нажатием.

   Отдельного правила здесь нет - это пояснение к @media выше. */

/* 4.6. Уважаем системную настройку «уменьшить анимацию».
   Список тот же, что в 4.3.
   Откат: удалить правило. */
@media (prefers-reduced-motion: reduce) {
  body .hero .pl,
  body .buls .bul,
  body .fold:not(.bez-otklika),
  body #perevodchiki .anketa,
  body .akciya,
  body .smz li,
  body .raskryvashka:not(.bez-otklika) {
    transition: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   5. Ритм считаем от ВИДИМОГО края, а не от коробки блока
   ───────────────────────────────────────────────────────────────────────
   Диктовка Павла 19.08.2026: «тебе нужно фиксировать не границу блока, а
   границу последнего видимого элемента. Если мы берём последние кнопки -
   «тесты», «анкета переводчика», «персональный менеджер для компании», -
   то здесь последний видимый элемент это не тень, это именно вот эта
   белая табличка, и отсюда должно отсчитываться 35, которые мы
   установили. Потому что сейчас пользователь тень не видит, и у него
   создаётся впечатление, что сверху расстояние больше, чем снизу».

   ЧТО ЭТО ЗНАЧИТ. Под карточками на странице лежит пустой запас - место,
   куда уходит тень. Тень мягкая (0 10px 20px), пользователь её почти не
   различает, а место она занимает. Ритм 35/70 отмерялся от КОРОБКИ, то
   есть от нижнего края запаса, и на глаз выходило больше положенного.

   ПРАВИЛО, по которому теперь живут все блоки главной:
     запас под тень НЕ УБИРАЕМ (иначе тень снова срежется белой чертой -
     на это Павел жаловался 17.08), но и НЕ СЧИТАЕМ расстоянием. Тому,
     кто держит запас, дают отрицательный внешний отступ той же величины:
     `padding-bottom: N; margin-bottom: -N`. Коробка садится на белый край
     карточки, тень по-прежнему рисуется в своём поле и никем не режется,
     а ритм отмеряется от того, что видно.

   Ниже - только сквозные места. Правки внутри блоков лежат в своих
   файлах: 03_otzyvy.css (ленты отзывов), 07_kak_poluchit.css (отбивка
   под H2), 11_perevodchiki.css (лента анкет), 12_ceny.css,
   13_kachestvo.css (собственное верхнее поле блока).

   Откат: удалить раздел 5 целиком.
   ═══════════════════════════════════════════════════════════════════════ */

/* 5.1. Полоса переключателя «Частным клиентам / Компаниям» - нижний отступ
   снят.

   Замер до (375): от белого края буллета до H2 «1016 положительных
   отзывов» - 63,4 при положенных 35; на 1440 - 98,4 при 70. Разница 28,4
   это `padding-bottom: 28px` у section.segblock - запас под тень буллетов
   (файл первого экрана 02_pervyj_ekran.css, его правит другой агент,
   сам не трогаю).

   Вычесть 28 из отступа блока «Отзывы» мало: полоса-переключатель несёт
   свой `margin-bottom: 32px`, соседние отступы схлопываются по большему,
   и 32 перебили бы нужные 7. Поэтому обнуляем отступ полосы, а весь ритм
   отдаём блоку - он его и вычитает (03_otzyvy.css, раздел «отступ
   сверху»). Видимая картинка от обнуления не меняется: 32 и сейчас
   проигрывают 35, то есть ни на что не влияют.

   Селектор берёт только полосу переключателя аудиторий: дорожки галереи
   лежат внутри #galereya и под `main >` не попадают.

   Откат: удалить правило - вернутся 32px, и блок «Отзывы» отъедет вниз. */
main > .track[data-h] {
  margin-bottom: 0;
}

/* 5.2. Галерея: запас под тень у полос сделан общим и вычтен из ритма.

   Как было. Запас 22px снизу стоял у трёх полос из пяти - gh-1 «Услуги»
   (05_uslugi.css), gh-2 «Отрасли» (06_otrasli.css), gh-4 «Преимущества
   корпоративным» (09_preimushchestva_biznesu.css), - а у gh-3 «Как
   получить» и gh-5 «Преимущества частным» его не было. Дорожке высоту
   ставит сценарий по offsetHeight открытой полосы, запас в эту высоту
   входит, и расстояние до следующего заголовка получалось разным:

     замер до (375): до «Как получить» 57,4; до «Наши преимущества для
     корпоративных заказчиков» 57; до «Акции» на вкладке «Компаниям» 92,2
     (там сверх запаса ещё пустая полоса, см. 5.3). Положено 35.

   Что сделано. Запас 22px выдан ВСЕМ полосам галереи одинаково (там, где
   его не было, тень только выиграла: у неё стало 22 точки вместо нуля), и
   ровно эти 22 вычтены из нижнего отступа дорожки. Высота галереи не
   меняется: сколько прибавили полосе, столько сняли с отступа.

   Число одно на все места - переменная --zapas-galerei. Меняете запас -
   меняете её, и ритм подстроится сам.

   Компьютер не трогаем: там у полос запаса нет (`margin-inline: -22px`
   уводит поле наружу дорожки), и замер до правки давал ровно 70.

   Откат: удалить оба правила 5.2 - вернётся разнобой 57/35. */
body.mob {
  --zapas-galerei: 22px;
}

/* Привязка [aria-labelledby] НУЖНА: она отсекает пустую полосу-пустышку
   «Компаниям» в последнем ряду (у неё заголовка нет, см. 5.3). Если дать
   поле и ей, пустышка перестанет быть нулевой высоты, а она стоит справа
   за кадром - её коробка тут же вылезает в разрешённые 30 точек обрезки
   дорожки gh-5 (08_preimushchestva_chastnym.css, раздел 10), и страница
   становится на 17 точек шире окна. Проверено замером scrollWidth на 320,
   360, 375 и 414: с привязкой ширина ровно по окну, без неё +17. */
body.mob .galwrap[data-b] .rail[data-b] > .galp[data-b][aria-labelledby] {
  padding-bottom: var(--zapas-galerei, 22px);
}

body.mob .galwrap[data-b] > .track[data-b].gal {
  margin-bottom: calc(var(--sp-block) - var(--zapas-galerei, 22px));
}

/* 5.3. Пустая полоса «Компаниям» в последнем ряду галереи ритма не занимает.

   В шаблоне последний ряд галереи парный: слева «Преимущества для частных
   заказчиков», справа пустая секция-пустышка (рекомендации переехали в
   свой раздел 17.08, а пустышка осталась ради парности рядов). На вкладке
   «Компаниям» сценарий ставит дорожке height: 0 - но отступы у неё
   остаются, и пустая дорожка съедала целый ритм ДВАЖДЫ: свой отступ и
   отступ соседа не схлопываются, потому что внутри дорожки лежит лента с
   содержимым.

   Замер до: от карточки «Персональный менеджер» до H2 «Акции и
   спецпредложения» - 92,2 на телефоне и 140,5 на компьютере при
   положенных 35 и 70.

   Прячем пустую дорожку целиком - тогда отступы соседей схлопываются
   как обычно. На вкладке «Частным» правило не срабатывает: там у дорожки
   data-on="private". Сценарию это не мешает - он читает offsetHeight
   открытой полосы, у скрытой дорожки это 0, что и так стояло.

   Наполнят пустую секцию - правило само перестанет быть нужным, но его
   надо будет снять руками.

   Откат: удалить правило - вернутся 92,2 и 140,5. */
body .galwrap[data-b] > .track[data-b].gal[data-on="corp"]:has(> .rail[data-b] > .galp[data-b][aria-labelledby="gh-5"]) {
  display: none;
}

/* 5.4. Нижние отступы коробок галереи и цен обнулены.

   Ритм между разделами задают ДВА отступа сразу - нижний у верхнего
   раздела и верхний у нижнего, - а браузер берёт больший. Пока оба равны
   ритму, это незаметно. Но как только нижнему разделу нужно вычесть свой
   невидимый запас (галерея - 22, блок «Нам не всё равно» - собственное
   поле 16/24), меньшее число проигрывает большему, и вычитание молча не
   срабатывает.

   Поэтому у двух коробок, за которыми стоит блок с вычитанием, нижний
   отступ снят: ритм задаёт только верхний отступ следующего раздела.
   Видимая картинка не меняется - эти отступы и сейчас проигрывают.

   Подвал не задет: у #faq нижний отступ оставлен как был (на компьютере
   он держит 42px до тёмной плашки подвала).

   Откат: удалить правило. */
main > .galwrap[data-b],
main > .blk[data-b]#ceny {
  margin-bottom: 0;
}

/* 5.5. «Акции»: на телефоне вычитаем запас последней полосы галереи.

   Верхний отступ блока «Акции» отмеряется от коробки галереи, а её низ -
   это низ последней открытой полосы вместе с её запасом 22 (пункт 5.2).
   Значит блоку надо вычесть те же 22.

   Замер до (375): «Частным» 35 (случайно совпало - у gh-5 запаса не
   было), «Компаниям» 92,2. После: 35 на обеих вкладках.

   Компьютер не трогаем - там запаса у полос нет.

   Откат: удалить правило. */
body.mob main > .blk[data-b]#akcii {
  margin-top: calc(var(--sp-block) - var(--zapas-galerei, 22px));
}


/* ── 6. Кегль мелкого текста на телефоне - 13 (диктовка Павла 20.08.2026) ──

   Павел сравнивал два кегля на двух копиях главной - 13 на «О компании» и
   12 на «Наших проектах» - и принял 13. Дословно: «У нас тут шаблон,
   который был сделан на тринадцать пикселей... Давай выкатывай на главную,
   со всеми правилами, то есть ничего не меняя».

   Источник правок - книга замера, 61 строка:
   C:\Users\Павел\Claude\Projects\Вебсайт\ШРИФТЫ_МОБИЛЬНЫЕ применить на стр. О компании.docx

   Раньше правки жили во временном слое
   C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\primerka_keglya.css
   и действовали на двух страницах по классу тела. Слой снят, правила
   разложены по файлам блоков - каждое туда, где живёт его блок. Здесь
   только само число: его читают правила кегля во всех файлах блоков через
   var(--kegl-melkij).

   Кто читает переменную - файлы в папке
   C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\
   02_pervyj_ekran.css, 03_otzyvy.css, 04_pisma.css, 05_uslugi.css,
   06_otrasli.css, 07_kak_poluchit.css, 08_preimushchestva_chastnym.css,
   09_preimushchestva_biznesu.css, 10_akcii.css, 11_perevodchiki.css,
   12_ceny.css, 13_kachestvo.css, 14_zayavka.css, 15_voprosy.css.
   Каждый - в своём разделе «Кегль 13».

   Было (телефон, вразнобой): 10,5 / 10,8 / 11,2 / 11,5 / 12 / 13,5 / 14px.
   Стало: 13px везде, где Павел правил в книге замера.

   ТОЛЬКО ТЕЛЕФОН. Книга замера снята на 375x812, все правки в ней - про
   телефон. Гейт - класс «mob» у тела: его ставит
   C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\js\etalon\auto_mob.js
   при ширине окна до 640px. Компьютерный вид не меняется.

   Кегль полей формы заявки в эту переменную НЕ входит и остаётся 16px:
   на меньшем айфон приближает страницу при постановке курсора. Уменьшена
   только подсказка в поле (::placeholder) - см. 14_zayavka.css.

   Откат: удалить этот раздел и разделы «Кегль 13» в файлах блоков.
   ─────────────────────────────────────────────────────────────────────── */
body.mob {
  --kegl-melkij: 13px;
}

/* Страница-примерка «Наши проекты» остаётся на 12: Павел держит её как
   образец для сравнения и снимать не просил. Больше она от сайта ничем не
   отличается - все прочие правила примерки теперь общие. Класс тела
   «stranica-<адрес>» ставит base.html для всех страниц разом, списка
   страниц нигде нет.
   Откат: удалить правило - страница станет как весь сайт, на 13. */
body.mob.stranica-nashi-proekty {
  --kegl-melkij: 12px;
}


/* ═══════════════════════════════════════════════════════════════════════
   6. Форма и размер ВСЕХ кнопок - принято с «О компании»
   ═══════════════════════════════════════════════════════════════════════

   ОТКУДА ПРИЕХАЛО. 21.08.2026 Павел принял вид страницы «О компании» как
   окончательный: «сейчас у нас эталонная, где все корректировки приняты,
   сделаны, проверены - это страница „О компании“. Давай перенесём всё на
   главную». Раздел переехал сюда из примерочного слоя
   C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\test_o_kompanii_ekran.css
   Слой удалён целиком вместе со строкой подключения в home_page.html.

   Задание 4 второго круга, дословно: «форма всех кнопок теперь становится
   такого же примерно, но стараться сделать их не меньше, чем кнопка
   переключения „Частным клиентам и компаниям“ по размеру. По цвету она
   также остаётся красной. То есть по овалу». И правило разрешения споров:
   «если размер позволяет, то они должны быть максимально близки вот кнопке
   „Частным клиентам / Компаниям“. Если размер не позволяет - можно делать
   её такой, как позволяет размер».

   ЭТАЛОН ФОРМЫ - зелёный бегунок переключателя аудиторий. Замер на 1440:
   размер 239,00 x 51,02, скругление 999px (овал: дуга во всю высоту),
   кегль надписи 16px, начертание 600.

   ОБЩИЙ РАЗМЕР КНОПКИ - 240 x 51,2. Это ближайшее круглое число, которое
   не меньше образца по обеим сторонам (240 > 239, 51,2 > 51,02) - Павел
   просил «минимум как кнопка переключателя». Высота 51,2 к тому же и была
   у кнопок страницы, так что по вертикали почти ничего не двигается.
   Поля 12,8 x 24 - те же 12,8 сверху и снизу, что держали прежнюю высоту.

   ЦВЕТ НЕ ТРОГАЕМ. Павел сказал «по цвету она также остаётся красной,
   меняется только форма и размер». Красные кнопки остаются красными со
   своим переливом и постаментом (разделы 2-2.1 выше по файлу), белая
   «Смотреть все языки» остаётся белой, а обведённая «Заказать перевод» в
   подвале - обведённой.

   КОМУ ДАЁМ ПОЛНЫЙ РАЗМЕР (место есть), замер до -> после:

     Онлайн-заявка, первый экран        320,00 x 51,19  ->  240 x 51,2
     Калькулятор заказа, обе стороны    320,00 x 51,19  ->  240 x 51,2
     Смотреть все услуги                239,11 x 51,19  ->  240 x 51,2
     Получить расчёт стоимости          300,00 x 46,00  ->  240 x 51,2
     Заполнить новую заявку (скрыта)    300,00 x 46,00  ->  240 x 51,2
     Смотреть все языки, цены           176,30 x 37,25  ->  240 x 51,2
     Заказать перевод, подвал           166,72 x 51,59  ->  240 x 51,2

   ЕСЛИ НАДПИСЬ НЕ ВЛЕЗАЕТ, кнопка раздвигается, а не ломает надпись на две
   строки: у общего правила стоят min-width: max-content и nowrap.

   КОМУ ДАЁМ ТОЛЬКО ФОРМУ (места нет) - восемь переключателей видов
   перевода в таблице цен, .pt. Их правило живёт в своём блоке, раздел Ц6.7
   файла
   C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\12_ceny.css

   КОГО НЕ ТРОГАЕМ ВОВСЕ: стрелки листания отзывов .lentabtn (у них своё
   оформление в 03_otzyvy.css), карточки площадок отзывов .plat (это не
   кнопки, а плитки со ссылкой) и значки соцсетей в подвале .psoc-*.

   Кнопка «Заказать перевод» В ШАПКЕ по этому же заданию сделана не здесь, а
   в постоянном файле
   C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\shapka.css
   раздел «кнопка заказа в шапке»: шапка живёт на всех страницах сайта.

   ПОЧЕМУ inline-flex, а не просто ширина. Кнопки лежат в разной среде:
   «Онлайн-заявка» и «Калькулятор заказа» - в рядах с выключкой по центру,
   «Смотреть все услуги» - в абзаце с text-align: center, «Получить расчёт»
   и «Смотреть все языки» - блоками во всю ширину родителя, «Заказать
   перевод» в подвале - в левой колонке. Гибкая коробка внутри строки
   центрует надпись и не ломает ни одну из этих сред; двум блочным кнопкам
   вдобавок поставлены поля auto по бокам, иначе они прижались бы влево.

   ЧТО ИЗМЕНИЛОСЬ ПРИ ПЕРЕЕЗДЕ. Приставка «body.stranica-o-kompanii»
   заменена на «body». У двух кнопок вес при этом добран: у одной вторым
   селектором в списке, у другой атрибутом [data-b], который у неё и так
   есть в разметке:
     · #zayavka .zknopka - в список добавлена вторая строка
       «#zayavka .zknopka.zknopka--tihaya» (вес 1,2,1): без неё правило
       (1,1,1) проиграло бы правилу #zayavka .zknopka--tihaya (1,2,0) из
       14_zayavka.css, и скрытая кнопка «Заполнить новую заявку» осталась
       бы прежней ширины;
     · #ceny .showall[data-b] - чтобы вес совпал с прежним и правило вело
       себя с разделами З и И файла 12_ceny.css ровно как раньше.
   Остальным добора не понадобилось: их соперники стоят выше по этому же
   файлу и проигрывают порядком.

   Откат: удалить раздел 6 - вернутся прежние размеры и скругления. */

/* 6.1. Общий размер и овал. */
body .ok-knopka-zayavki,
body .acts[data-h] .act[data-h],
body .acts[data-h] .act[data-h].main,
body .acts[data-h] .act[data-h].sec,
body .vseuslugi,
body a.tp-knopka,
body #zayavka .zknopka,
body .zayavka-blok .zknopka,
body #zayavka .zknopka.zknopka--tihaya,
body .zayavka-blok .zknopka.zknopka--tihaya,
body #ceny .showall[data-b],
body footer.podval .pkontakty .pknopka {
  box-sizing: border-box;
  width: 240px;
  min-width: max-content;   /* длинная надпись раздвинет кнопку, а не переломится */
  max-width: 100%;
  min-height: 51.2px;
  padding: 12.8px 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  white-space: nowrap;
  text-align: center;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;           /* у .act в ряду стоит flex-basis 320 - гасим его */
}

/* Кнопки внутри строки - центруются средой (ряд по центру, абзац по
   центру, колонка подвала слева). */
body .ok-knopka-zayavki,
body .acts[data-h] .act[data-h],
body .vseuslugi,
body a.tp-knopka,
body footer.podval .pkontakty .pknopka {
  display: inline-flex;
}

/* Две кнопки общего размера имеют рамку в 1 точку: «Смотреть все языки» в
   ценах (серая) и «Заказать перевод» в подвале (белая). Рамка входит в
   коробку, и при полях 12,8 высота выходила 52,39 вместо 51,2. Поля
   уменьшены ровно на толщину рамки, и обе встают в общий размер до сотых.
   Откат: вернуть padding: 12.8px 24px - они станут на 1,2 выше прочих. */
body #ceny .showall[data-b],
body footer.podval .pkontakty .pknopka {
  padding: 12.2px 23px;
}

/* Кнопки-блоки - центруются полями auto. */
body #zayavka .zknopka,
body .zayavka-blok .zknopka,
body #zayavka .zknopka.zknopka--tihaya,
body .zayavka-blok .zknopka.zknopka--tihaya,
body #ceny .showall[data-b] {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

/* 6.4. Ряд кнопок переносится, когда две кнопки в строку не помещаются.

   НАЙДЕНО ЗАМЕРОМ 21.08.2026, когда общий слой оформления (этот файл)
   переехал в base.html и пришёл на страницы, где его раньше не было.

   Что происходило. Пункт 6.1 даёт кнопке ширину 240 и запрет переноса
   надписи. На главной это безопасно: там на телефоне стоит класс тела
   «mob», и ряд .acts превращается в сетку из двух колонок
   (css/etalon/glavnaya-a.css, `body.mob .acts[data-h]`). На странице
   услуги класса «mob» нет - его ставит сценарий js/etalon/auto_mob.js,
   подключённый только шаблоном главной, - поэтому ряд оставался рядом.
   Две кнопки 322,91 + 240 плюс зазор просили 574 точки, а колонка на
   экране 375 всего 343: ряд с выключкой по центру вылезал за оба края, и
   левая кнопка уходила за край экрана на 99,55 точки. Видно этого не было
   даже прокруткой - «.device» с overflow-x: clip лишнее просто срезает.

   Почему перенос, а не «сделать кнопки уже». Ужимать - значит ломать
   принятый Павлом общий размер кнопки (пункт 6.1). Перенос ничего не
   меняет там, где кнопки помещаются: на компьютере ряд как был, так и
   остался в одну строку - проверено замером на 1440, 1280 и на главной, и
   на странице услуги. На главной правило не срабатывает нигде: на
   компьютере места хватает, на телефоне ряд вообще не ряд, а сетка.

   Откат: удалить пункт 6.4 - на узких экранах кнопки страницы услуги
   снова уедут за края. */
body .acts[data-h] {
  flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════════════
   7. Рисунки на плашках без фона вокруг - принято с «О компании»
   ═══════════════════════════════════════════════════════════════════════

   Пункт 11 задания Павла от 20.08.2026, принят 21.08 вместе со всей
   страницей. Переехало из примерочного слоя
   C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\test_o_kompanii_kartinki.css
   (слой удалён). Раздел стоит в общем файле, а не в файле блока: плашки с
   рисунками есть и в услугах, и в преимуществах, и в акциях, а правило у
   них одно.

   ЧТО БЫЛО НЕ ТАК. У двенадцати картинок, стоящих на плашках,
   прозрачности нет в самом файле: две - JPEG (формат её не умеет),
   остальные - PNG, сохранённые без альфа-канала. Из-за этого вокруг
   рисунка оставался сплошной белёсый квадрат (254,254,254 или
   255,255,255) со следами сжатия по краю - он и был виден на белой плашке.
   Стилями это не лечится: убирать нечего, фон нарисован внутри файла. У
   остальных плашек прозрачность есть, поэтому набор и выглядел
   разнородным.

   ЧТО СДЕЛАНО. Сделаны копии этих двенадцати файлов с прозрачным фоном
   (заливка от краёв внутрь с мягким краем), они лежат отдельной папкой:
   C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\img\plashki_bez_fona
   Собирает их команда
   C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\management\commands\plashki_bez_fona.py
   Оригиналы в библиотеке кабинета не тронуты. Подмена делается правилом
   content:url() по куску адреса картинки: в кабинет и в базу лезть не
   нужно.

   Откат: удалить раздел 7 и папку с копиями - на плашках снова окажутся
   оригиналы с белым квадратом вокруг рисунка. */


/* 7.1. Общее для всех плашек.

   Рисунок вписывается в свою коробку целиком (края не обрезаются), стоит
   по центру коробки, своей заливки и своих отступов не имеет. Все три
   свойства у страницы и так такие - правило закрепляет их, чтобы
   подменённая картинка не могла повести себя иначе. */
body img.cardimg {
  object-fit: contain;
  object-position: center center;
  padding: 0;
  background: none;
}


/* 7.2. Подмена двенадцати картинок на копии без фона.

   Отбор идёт по куску имени файла в адресе: у Wagtail имя производной
   начинается с имени исходника, поэтому «/15.max-» попадает ровно в одну
   картинку и ни в какую другую. Косая черта в начале обязательна - без неё
   «15.max-» поймал бы и чужие имена, оканчивающиеся на 15.

   ТРИ ТОЧКИ ВВЕРХ В АДРЕСЕ, А НЕ ДВЕ. Адрес в url() считается от папки
   этого файла, а он лежит на уровень глубже прежнего примерочного слоя:
   css/site/bloki/ против css/site/. Поэтому «../../../img/», а не
   «../../img/» - иначе браузер ищет картинки в static/css/img/, не находит
   и подставляет пустую коробку другой высоты (замер поймал: плашка услуг
   бизнесу вырастала со 100 до 123,98 точки, и вся страница становилась на
   76 точек выше).

   Порядок - как на странице: услуги частным, услуги бизнесу, преимущества
   частным, акции. */

/* Услуги частным клиентам */
body img.cardimg[src*="/5388735904421189612.max-"] {
  /* Дипломы и аттестаты - был JPEG, фон белый */
  content: url("../../../img/plashki_bez_fona/5388735904421189612.29829851cd25.png");
}
body img.cardimg[src*="/5388735904421189397.max-"] {
  /* Финансовые документы - был JPEG, фон белый */
  content: url("../../../img/plashki_bez_fona/5388735904421189397.a93cf23a9b49.png");
}

/* Услуги бизнесу */
body img.cardimg[src*="/Perevod-tekhnicheskoy-dokumenta"] {
  /* Технический перевод - PNG без альфа-канала */
  content: url("../../../img/plashki_bez_fona/Perevod-tekhnicheskoy-dokumentatsii.ef3a3067f705.png");
}

/* Преимущества для частных заказчиков.
   Здесь без прозрачности были все восемь картинок. */
body img.cardimg[src*="/Srochnyy-perevod-bez-doplat.max-"] {
  /* Заказ срочного перевода; та же картинка стоит и на акции */
  content: url("../../../img/plashki_bez_fona/Srochnyy-perevod-bez-doplat.524e74789ffa.png");
}
body img.cardimg[src*="/Garantii-kachestva-perevoda.max-"] {
  /* 100% гарантия качества перевода */
  content: url("../../../img/plashki_bez_fona/Garantii-kachestva-perevoda.f84195b5799b.png");
}
body img.cardimg[src*="/Dostavka-besplatno-po-Moskve.max-"] {
  /* Бесплатная доставка по Москве */
  content: url("../../../img/plashki_bez_fona/Dostavka-besplatno-po-Moskve.64b0ec837818.png");
}
body img.cardimg[src*="/Prozrachnaya-tsena-na-perevod.max-"] {
  /* Прозрачные цены */
  content: url("../../../img/plashki_bez_fona/Prozrachnaya-tsena-na-perevod.c461f3e5509a.png");
}
body img.cardimg[src*="/Bolshaya-Baza-perevodchikov.max-"] {
  /* 1500+ отраслевых переводчиков */
  content: url("../../../img/plashki_bez_fona/Bolshaya-Baza-perevodchikov.8f0f1e7e6f51.png");
}
body img.cardimg[src*="/Chasovaya-muka-s-apostilem.max-"] {
  /* Срочное нотариальное заверение */
  content: url("../../../img/plashki_bez_fona/Chasovaya-muka-s-apostilem.3871385184f8.png");
}
body img.cardimg[src*="/Polnaya-konfidentsialnost-vashi"] {
  /* Защита личных данных */
  content: url("../../../img/plashki_bez_fona/Polnaya-konfidentsialnost-vashikh-dokumentov.46f5cf9471fa.png");
}
body img.cardimg[src*="/15.max-"] {
  /* Работаем с 2007 года - был JPEG, фон белый со следами сжатия */
  content: url("../../../img/plashki_bez_fona/15.0efb29326887.png");
}

/* Акции и спецпредложения */
body img.cardimg[src*="/Skidka-na-perevod-ot-300-strani"] {
  /* Скидка от 5% до 20% на большие объёмы */
  content: url("../../../img/plashki_bez_fona/Skidka-na-perevod-ot-300-stranits-2.9a3f249680bb.png");
}


/* ═══════════════════════════════════════════════════════════════════════
   8. Кнопки действий на телефоне: по одной в ряд, надпись переносится
   ═══════════════════════════════════════════════════════════════════════
   Правка 21.08.2026, к переносу мобильного вида на все страницы.

   ЧТО СЛУЧИЛОСЬ. С этого дня класс «mob» ставится на теле документа не
   только у главной, а у любой страницы сайта (сценарий js/etalon/auto_mob.js
   переехал в base.html). Вместе с ним на внутренние страницы пришло
   эталонное правило
     body.mob .acts[data-h] { grid-template-columns: repeat(2, minmax(0,1fr)) }
   (css/etalon/glavnaya-a.css) - две кнопки действий в ряд.

   На главной оно не работало никогда: её ряд кнопок лежит внутри дорожки
   переключателя «частным / компаниям», и файл блока
   C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\02_pervyj_ekran.css
   правилом `body.mob .track[data-h] .acts[data-h]` ставит там ОДНУ колонку
   по центру. А на странице услуги-образца дорожки нет - и кнопки встали в
   две колонки по 144 точки при надписи «Калькулятор письменного перевода»
   шириной 322,91 (у общего правила кнопок стоят nowrap и min-width:
   max-content, раздел 6 этого файла). Замер на 320: правый край кнопки
   335,70 при ширине окна 320 - страница поехала вбок на 16 точек.

   ЧТО ДЕЛАЕМ - ДВА ПРАВИЛА.

   8.1. На телефоне кнопки действий стоят ПО ОДНОЙ В РЯД, по центру. Ровно
   так, как это давно сделано на главной; теперь это общее правило сайта, а
   не особенность одного блока. Ряд из двух кнопок по 144 точки на телефоне
   всё равно нечитаем: в такую ширину не помещается ни одна надпись сайта.

   8.2. Надпись, которая шире кнопки, на телефоне ПЕРЕНОСИТСЯ. Раздел 6
   этого файла обещает обратное - «длинная надпись раздвинет кнопку, а не
   переломится», - и на компьютере обещание остаётся в силе: правило стоит
   под «body.mob», то есть работает только до 640 точек. На телефоне
   раздвигать кнопку некуда: экран 320 точек, а с надписью в одну строку
   кнопке нужно 322,91. Выбор простой - либо перенос, либо надпись уезжает
   за край экрана.

   ПОЧЕМУ ЭТО НЕ МЕНЯЕТ ГЛАВНУЮ (проверено замером, не рассуждением).
   8.1 главную не задевает: правило 02_pervyj_ekran.css сильнее (0,5,1
   против 0,3,1) и ставит там ровно те же значения. 8.2 главную не задевает,
   потому что её кнопкам перенос не нужен: у кнопки задана ширина 240 точек,
   на надпись остаётся 192 после полей 24+24, а «Калькулятор заказа» в них
   помещается - строка не ломается. Сверка слепков «до/после» на 320, 360,
   375 и 414: расхождений ноль.

   ЧИСЛА СВЯЗАНЫ. 240 - ширина кнопки и 24 - её боковое поле заданы в
   разделе 6 этого файла. Уменьшат поля или ширину - пересчитать, помещается
   ли надпись без переноса.

   Откат: удалить раздел 8 - на страницах без дорожки вернутся две кнопки в
   ряд и надпись, уезжающая за край на узком экране. */

/* 8.1. По одной кнопке в ряд, по центру. */
body.mob .acts[data-h] {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

/* 8.2. Надпись шире кнопки - переносится, а не вылезает.

   ГДЕ ИМЕННО. Только ряд кнопок, стоящий ПРЯМО в содержимом страницы
   (`main > .acts`) - это страницы услуг, где надписи кнопок задаёт сам
   Павел в кабинете и длина их ничем не ограничена. Ряд кнопок главной
   лежит глубже, внутри дорожки переключателя «частным / компаниям», под
   этот селектор не подпадает и остаётся ровно таким, каким принят: надписи
   там короткие («Калькулятор заказа» - 240 точек вместе с полями) и в
   переносе не нуждаются. Сверка слепков главной «до/после» на 320, 360,
   375 и 414 после такой оговорки: расхождений ноль.

   ДВА СВОЙСТВА, И ОБА ОБЯЗАТЕЛЬНЫ. Одного «white-space: normal» мало:
   нижнюю границу ширины кнопке задаёт «min-width: max-content» из раздела 6,
   а max-content считается по строке БЕЗ переносов - при разрешённом
   переносе кнопка всё равно осталась бы 322,91 точки (замер на 320).
   Поэтому нижняя граница снимается, и в дело вступают «width: 240px» и
   «max-width: 100%» того же раздела 6: кнопка ровно 240 точек, надпись
   внутри переносится на две строки.

   Замер страницы услуги-образца на 320 после правки: кнопка 240,00 x 76,80
   (было 322,91 x 51,19 с выездом за край на 15,70), переполнения страницы
   нет ни на 320, ни на 360, ни на 375, ни на 414. */
body.mob main > .acts[data-h] .act[data-h] {
  min-width: 0;
  white-space: normal;
}

/* ═══════════════════════════════════════════════════════════════════════
   Хлебные крошки - один компонент на сайт
   ═══════════════════════════════════════════════════════════════════════

   Решение Павла 26.08.2026. Раньше рядом жили два одинаковых правила
   «Главная всегда фирменным красным» - в shapka.css и в usluga.css; оба
   удалены, вместо них одно правило компонента.

   Что фиксируется: предки текущей страницы серые во всех состояниях
   (link, visited, hover, focus-visible, active), текущая страница -
   фирменным бордовым, разделители серые. Браузерных синего и фиолетового
   в крошках быть не должно, поэтому цвет задан явно всем состояниям.

   Текущая страница - не ссылка: она выводится отдельным элементом с
   aria-current="page", ссылки предков остаются ссылками, структурированные
   данные Breadcrumb собираются отдельно и этим правилом не затрагиваются.

   Откат: удалить раздел - крошки вернутся к цвету из эталона, а «Главная»
   перестанет отличаться от остальных предков.
   ═══════════════════════════════════════════════════════════════════════ */
body .crumbs {
  color: #63676c;
}

/* Кегль и место крошек в потоке - здесь же, а не в файле страницы.
   Канон, раздел «Хлебные крошки»: «правило крошек целиком лежит в
   bloki/00_obshchee.css - и цвет, и место в потоке (18 снизу, кегль
   14). Держать половину компонента в файле, который подключают не все
   страницы, нельзя».

   Замер прогона 10.09.2026 показал ровно ту беду, от которой канон
   предостерегает: на страницах услуг, языковых и ценах крошки шли
   12,8 с отступом 6,4, потому что usluga.css задаёт им свой кегль
   переменной --fs-sec, а на вакансиях, блоге и текстовых - канонные
   14 и 18. Один компонент выглядел двумя разными способами.

   Класс продублирован намеренно: правило страницы услуги записано как
   «.pblk .crumbs[data-astro-cid-36gf3toc]» и весит (0,3,0); чтобы
   перебить его, не привязываясь к метке astro, здесь нужен вес выше.

   Откат: удалить правило - на услугах крошки вернутся к 12,8. */
body .crumbs.crumbs {
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 18px;
}

body .crumbs a,
body .crumbs a:link,
body .crumbs a:visited,
body .crumbs a:hover,
body .crumbs a:focus-visible,
body .crumbs a:active {
  color: #63676c;
}

body .crumbs a:hover,
body .crumbs a:focus-visible {
  text-decoration: underline;
}

body .crumbs .crumbs-tek,
body .crumbs [aria-current="page"] {
  color: #911a22;
}

/* Место в потоке. Крошки стоят над H1 и в ритме заголовков не участвуют.
   Правило переехало сюда из site/tekstovaya_stranica.css 01.09.2026: тот
   файл подключают только блог, вакансии и страницы по паспорту, а крошки
   с этого дня выводятся у КАЖДОЙ перенесённой страницы - цены, акции,
   оферта остались бы без отступа и с чужим размером. */
body .pblk .crumbs {
  margin: 0 0 18px;
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Закрыто до запуска сценариев (телефон)
   ═══════════════════════════════════════════════════════════════════════

   Задание Павла 26.08.2026: «мобильное закрытое состояние должно
   действовать до первой отрисовки и не ждать отложенных сценариев».

   Что было. Разметка приходит раскрытой: у плашек первого экрана и у
   карточек aria-expanded="true", тела видны. Закрывали их сценарии с
   defer - interactive.js, tehperevod_mobile.js, glavnaya.js. На медленном
   соединении телефон показывал длинную раскрытую страницу и схлопывал её
   уже после первой отрисовки.

   Как теперь. Каркас страницы ставит на корень признак «js» синхронно, в
   head. Пока сценарии не разобрали страницу (признака «js-gotov» ещё нет),
   тела раскрывающихся блоков на телефоне скрыты этим правилом. На
   DOMContentLoaded признак появляется, правило перестаёт действовать, и
   видом дальше управляют сами сценарии через hidden и aria-expanded -
   итоговое поведение прежнее.

   Полный текст остаётся в разметке: он именно скрыт, а не выброшен, и
   ничего не подгружается по нажатию. Ленивые изображения внутри скрытых
   тел сохраняют loading="lazy" и decoding="async".

   На компьютере правило не действует вовсе - медиавыражение то же, что у
   мобильного режима (640px).

   Откат: удалить раздел и кусок «Признак сценариев» в
   C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\pilotsite\templates\base.html
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  html.js:not(.js-gotov) body .hero .pl .ptext,
  html.js:not(.js-gotov) body .fold > .foldb,
  html.js:not(.js-gotov) body .card3.fold .foldb,
  html.js:not(.js-gotov) body .kp-para.fold .foldb,
  html.js:not(.js-gotov) body .tarif.fold .foldb {
    /* Без !important: селектор с признаком корня весит больше правил
       компонентов, которые задают телу display (например flex у пояснения
       пары шагов). Проверено сторожем test_kegl_13. */
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   Двойное нажатие по кнопке не увеличивает страницу
   ───────────────────────────────────────────────────────────────────────
   Правка Павла 07.09.2026: «два раза кликаешь на любую кнопку - почему-то
   приближает, делает зум. Это неправильно, нужно убрать».

   ЧТО ПРОИСХОДИЛО. На телефоне двойное касание - штатный жест браузера
   «приблизить». Он срабатывает и на кнопках: человек нажимает второй раз,
   не дождавшись отклика, и страница уезжает в увеличение.

   ЧТО ДЕЛАЕТ ПРАВИЛО. touch-action: manipulation оставляет браузеру
   прокрутку и щипковый зум двумя пальцами, но отбирает у элемента ровно
   два жеста: двойное касание для приближения и вспомогательные касания.
   Заодно снимается старая задержка отклика в 300 мс, которую браузер
   держал как раз в ожидании второго касания.

   ПОЧЕМУ НЕ МЕТАТЕГОМ VIEWPORT. Запретить масштабирование целиком
   (maximum-scale=1, user-scalable=no) было бы проще, но это отбирает у
   человека возможность увеличить страницу руками. Такой путь уже
   рассматривался и отклонён 18.08.2026 при разборе приближения полей
   ввода - см. пояснение в
   C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\14_zayavka.css
   раздел 3. Здесь тот же выбор: правило действует только на кнопки и
   ссылки, сама страница по-прежнему увеличивается двумя пальцами.

   Поля ввода намеренно НЕ трогаем: у них своя защита от приближения -
   кегль 16 px (тот же раздел 14_zayavka.css).

   Откат: удалить раздел - двойное касание кнопки снова будет приближать.
   ═══════════════════════════════════════════════════════════════════════ */
a,
button,
summary,
label,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
select {
  touch-action: manipulation;
}

/* ── Уведомление о файлах cookie (требование Павла 06.08.2026) ─────────
   Плашка внизу экрана: текст слева, кнопка «Понятно» справа; на телефоне
   кнопка уходит под текст во всю ширину. Вид - как у прочих плашек
   сайта: белый фон, мягкая тень, фирменная кнопка.
   Откат: удалить раздел и включение parts/uvedomlenie_cookie.html. */
.cookie {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 20px;
  font: 400 13px/1.45 Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #3d4247;
  background: #fff;
  border: 1px solid #e4e6e8;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 20, 26, .18);
}
.cookie-telo { flex: 1 1 auto; min-width: 0; }
.cookie-zagolovok {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #1b1b1b;
}
.cookie-tekst { margin: 0; }
.cookie-podrobnee { color: #8c1821; text-decoration: underline; }
.cookie-podrobnee:hover { text-decoration: none; }
.cookie-knopka {
  flex: 0 0 auto;
  min-width: 150px;
  min-height: 42px;
  padding: 10px 22px;
  font: 700 14px/1.2 Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #fff;
  background: #8c1821;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .2s;
}
.cookie-knopka:hover { background: #a81d27; }

@media (max-width: 760px) {
  .cookie {
    left: 8px;
    right: 8px;
    /* Над нижней панелью связи, а не под ней: панель закреплена внизу
       и перекрыла бы кнопку «Понятно». */
    bottom: 76px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
    font-size: 12.5px;
  }
  .cookie-knopka { width: 100%; }
}