/*
Theme Name: APIMost
Theme URI: https://apimost.ru/
Description: Дочерняя тема сайта apimost.ru. Песочная палитра, Golos Text локальным файлом, компоненты согласованного макета главной.
Author: ИП Лёвин В. А.
Template: generatepress
Version: 1.7.0
License: GNU General Public License v2 or later
Text Domain: apimost
*/

/* ==========================================================================
   Шрифт Golos Text. Файлы лежат в теме, обращений к сторонним CDN нет.
   Разделение на кириллицу и латиницу — из макета: браузер тянет только нужный.
   ========================================================================== */
@font-face {
  font-family: 'Golos';
  src: url('fonts/golos-cyr.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos';
  src: url('fonts/golos-lat.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}

/* ==========================================================================
   Песочная палитра, утверждена 2026-08-07.
   Тёмная схема макета сюда не переносится: шапка, меню и подвал GeneratePress
   к ней не подготовлены, и сайт получился бы наполовину тёмным.

   18.08.2026 затемнены два значения — сама палитра, шрифт и композиция прежние.
   Было --muted #7C7568: на подложке --subtle он давал 4,35 при норме 4,5, а этой
   подложкой залиты секции с вводным абзацем и шапки таблиц. Было --accent-deep
   #B36A00: 4,22 на белом, то есть ссылки в тексте, надпись над заголовком
   и плашка «работает» в матрице совместимости не проходили норму нигде.
   Стало 5,28 и 5,03 на белом и на --subtle, 4,67 на --accent-soft.
   ========================================================================== */
:root {
  --ground: #FFFFFF;
  --subtle: #FDF9F2;
  --card: #FFFFFF;
  --ink: #3B3730;
  --muted: #726B5E;
  --line: #EBE3D4;
  --accent: #F0A429;
  --accent-ink: #2A2114;
  --accent-soft: #FBF0DC;
  --accent-deep: #9C5D00;
  --shadow: 0 1px 2px rgba(90, 70, 20, .05), 0 8px 24px rgba(90, 70, 20, .07);
  --radius: 10px;
  --maxw: 1180px;
  --col: 830px;
}

/* ==========================================================================
   База. Размеры от референса v8.1c.ru: текст 17/1.6, колонка около 830 px.
   ========================================================================== */
body {
  background: var(--ground);
  color: var(--ink);
  font-family: 'Golos', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  text-wrap: balance;
  letter-spacing: -.02em;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
}
h1 { font-size: clamp(30px, 4.2vw, 44px); }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }

a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Ссылки внутри текста подчёркнуты постоянно, а не только при наведении:
   цветом одним они от текста отличаются недостаточно, а на телефоне наведения
   нет вовсе. Меню, подвал, карточки и кнопки под правило не попадают — там
   ссылка распознаётся по своему месту и оформлению. */
.entry-content a:not(.apm-btn) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Кольцо фокуса цветом --accent давало 2,09 на белом при норме 3 для
   нетекстовых элементов: на песочном фоне его почти не было видно.
   Тем же --accent-deep, что и ссылки, получается 5,28. */
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; height: auto; }

/* Ширина колонки контента */
.grid-container { max-width: var(--maxw); }
.inside-article,
.entry-content { max-width: var(--col); }
.entry-content > * + * { margin-top: 1.1em; }

/* ==========================================================================
   Кнопки
   ========================================================================== */
.apm-btn,
.wp-block-button__link,
.entry-content .button {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 15px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .15s, transform .1s;
}
/* При наведении фон темнеет, и тёмная надпись на нём давала 3,0. Белая
   надпись на том же фоне даёт 5,28 — поэтому цвет текста меняется вместе
   с фоном, а не остаётся прежним. */
.apm-btn:hover,
.wp-block-button__link:hover {
  background: var(--accent-deep);
  color: var(--ground);
  text-decoration: none;
}
.apm-btn:active { transform: translateY(1px); }
.apm-btn.ghost {
  background: transparent;
  color: var(--accent-deep);
  border-color: var(--line);
}
.apm-btn.ghost:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ==========================================================================
   Хлебные крошки. Цепочку и её разметку выводит functions.php из одного
   массива: разметку без видимой цепочки на странице поисковики не принимают.
   На главной крошек нет, поэтому правила действуют только на внутренних
   страницах, где контейнер темы уже держит отступы.
   ========================================================================== */
.apm-kroshki {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: 13px; color: var(--muted); margin: 0 0 16px;
}
.apm-kroshki a { color: var(--muted); }
.apm-kroshki a:hover { color: var(--accent-deep); }
.apm-kroshki .razdelitel { color: var(--line); }

/* ==========================================================================
   Секции страницы
   ========================================================================== */
.apm-section { padding: 64px 0; border-top: 1px solid var(--line); }
.apm-section.plain { border-top: none; }
.apm-section.tinted { background: var(--subtle); }
.apm-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-deep);
}
.apm-lead { font-size: 19px; color: var(--muted); line-height: 1.55; }

/* ==========================================================================
   Карточки выгод
   ========================================================================== */
.apm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.apm-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.apm-card .ico { width: 36px; height: 36px; color: var(--accent); margin-bottom: 12px; }
.apm-card h3 { margin-bottom: 8px; }
.apm-card p { color: var(--muted); font-size: 15px; }

/* ==========================================================================
   Шаги первого запуска
   ========================================================================== */
.apm-steps {
  display: grid; gap: 2px; margin-top: 28px;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--line);
}
.apm-step {
  background: var(--card); padding: 20px 22px;
  display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start;
}
.apm-step-n {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-deep);
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.apm-step h3 { margin-bottom: 4px; }
.apm-step p { color: var(--muted); font-size: 15px; }

/* ==========================================================================
   Список возможностей
   ========================================================================== */
.apm-feat { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.apm-feat li { padding-left: 26px; position: relative; color: var(--muted); }
.apm-feat li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 9px; height: 9px; border-radius: 2px; background: var(--accent); opacity: .85;
}
.apm-feat b { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Скриншоты
   ========================================================================== */
.apm-shots {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px; margin-top: 28px;
}
.apm-shot {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--card); box-shadow: var(--shadow);
  margin: 0;
}
.apm-shot img { width: 100%; display: block; }
.apm-shot figcaption {
  padding: 12px 16px; font-size: 14px; color: var(--muted);
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   Таблицы. Широкие таблицы прокручиваются внутри своего контейнера,
   страница по горизонтали не едет.
   ========================================================================== */
.apm-table-wrap {
  overflow-x: auto; margin-top: 24px;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.apm-table-wrap table { border-collapse: collapse; width: 100%; font-size: 15px; background: var(--card); margin: 0; }
.apm-table-wrap th,
.apm-table-wrap td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.apm-table-wrap th {
  font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; background: var(--subtle);
}
.apm-table-wrap tr:last-child td { border-bottom: none; }

/* Статусы матрицы совместимости */
.apm-st { display: inline-block; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.apm-st.ok { background: var(--accent-soft); color: var(--accent-deep); }
.apm-st.work { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.apm-st.plan { background: transparent; color: var(--muted); border: 1px dashed var(--line); }

/* ==========================================================================
   Цена и форма заявки
   ========================================================================== */
.apm-split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px; margin-top: 28px;
}
.apm-price {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow);
}
.apm-price-tag { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 10px 0 4px; }
.apm-incl { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; color: var(--muted); }
.apm-incl li { padding-left: 24px; position: relative; }
.apm-incl li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--accent);
}

/* Fluent Forms под палитру сайта.
   Размер поля — ровно 16 px: Safari на iPhone масштабирует страницу при
   касании поля со шрифтом мельче, и посетитель попадает в увеличенную
   вёрстку, из которой сам не выходит. */
.fluentform .ff-el-form-control {
  font: inherit; font-size: 16px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--ground); color: var(--ink); width: 100%;
}
.fluentform .ff-el-input--label label { font-size: 14px; font-weight: 600; }
.fluentform .ff-btn-submit {
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; border-radius: 999px; padding: 11px 22px; border: none;
}
.fluentform .ff-btn-submit:hover { background: var(--accent-deep); }
.fluentform .ff-el-group.ff-el-form-check { font-size: 13px; color: var(--muted); }

/* ==========================================================================
   Врезка
   ========================================================================== */
.apm-note {
  background: var(--accent-soft); border: 1px dashed var(--accent);
  border-radius: var(--radius); padding: 14px 18px;
  font-size: 14px; color: var(--ink); margin-top: 22px;
}

/* ==========================================================================
   Подвал
   ========================================================================== */
.site-footer { background: var(--subtle); border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.site-footer h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink); }
.apm-legal { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; }

/* ==========================================================================
   Баннер cookie. Информирует про cookie и Метрику; согласие на обработку
   персональных данных берётся отдельно, чекбоксом в форме заявки.

   Обе кнопки оформлены одинаково и намеренно: модификатор ghost к ним
   не применяется. Приглушённая кнопка отказа рядом с яркой кнопкой согласия
   подталкивает к нужному владельцу ответу, а такое согласие считается
   несвободным. Равнозначность оформления — часть требований, записанных
   в части 3 документа «Согласие на обработку персональных данных».
   ========================================================================== */
.apm-cookie {
  position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px;
  margin: 0 auto; max-width: 760px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.apm-cookie p { font-size: 14px; color: var(--muted); flex: 1 1 320px; line-height: 1.5; margin: 0; }
.apm-cookie .actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.apm-cookie .apm-btn { font-size: 14px; padding: 9px 20px; min-width: 176px; text-align: center; }
.apm-cookie[hidden] { display: none; }

/* На телефоне уведомление вместе с шапкой съедало половину первого экрана.
   Обе кнопки остаются — выбор из двух вариантов обязателен, — но встают
   в одну строку, а отступы и текст ужимаются. */
@media (max-width: 560px) {
  .apm-cookie {
    left: 8px; right: 8px; bottom: 8px;
    padding: 12px 14px; gap: 10px;
  }
  .apm-cookie p { font-size: 13px; line-height: 1.45; flex: 1 1 100%; }
  .apm-cookie .actions { width: 100%; gap: 8px; flex-wrap: nowrap; }
  .apm-cookie .actions .apm-btn {
    flex: 1 1 50%; text-align: center;
    font-size: 13px; padding: 8px 10px;
  }
}

@media (max-width: 860px) {
  .apm-section { padding: 48px 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ==========================================================================
   Меню подвала. Локация footer регистрируется дочерней темой: в GeneratePress
   её нет, там подвал собран из областей виджетов.
   ========================================================================== */
.apm-footer-nav { padding: 24px 0 4px; }
.apm-footer-menu {
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  margin: 0; padding: 0; list-style: none; justify-content: center;
}
.apm-footer-menu a { color: var(--muted); font-size: 14px; }
.apm-footer-menu a:hover { color: var(--accent-deep); }

/* ==========================================================================
   Шапка: логотип слева, рядом название и подпись — как в согласованном макете.
   GeneratePress по умолчанию ставит логотип отдельным блоком под названием.
   ========================================================================== */
.site-header .inside-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  /* Боковой отступ такой же, как у обёрток секций (.apm-wrap): иначе логотип
     стоит на 16 пикселей правее заголовков страницы. */
  padding-left: 24px;
  padding-right: 24px;
}
/* Знак вписан по высоте блока названия и подписи: у вер 3 пропорция 1,36 : 1
   против 1,57 : 1 у прежнего, и при сохранённой ширине 91 он вылезал бы
   из шапки на пять пикселей сверху и снизу. */
.site-logo { margin: 0; order: -1; }
.site-logo img { width: 79px; height: 58px; }
.site-branding { margin: 0; }
.site-branding .main-title { margin: 0; font-size: 22px; letter-spacing: -.02em; }
/* Подпись под названием — в две строки. Одной строкой она занимает больше двухсот
   пикселей, и на эту ширину меню уже не помещается. Точку переноса выбирает
   браузер: text-wrap делит текст на строки примерно поровну. */
.site-branding .site-description {
  margin: 0; font-size: 12px; color: var(--muted);
  max-width: 132px; line-height: 1.3; text-wrap: balance;
}

/* ==========================================================================
   Меню. GeneratePress по умолчанию красит полосу навигации в тёмно-серый,
   что спорит с песочной палитрой макета: там меню — обычные ссылки
   на светлом фоне.
   ========================================================================== */
.main-navigation,
.main-navigation .main-nav ul ul {
  background: var(--ground);
}
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle {
  color: var(--ink);
  font-size: 15px;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav .current-menu-item > a {
  color: var(--accent-deep);
  background: var(--accent-soft);
  /* Без подчёркивания текста: пункт и так помечен — заливкой в списке
     и чертой под пунктом в развёрнутом меню. Двух отметок сразу много. */
  text-decoration: none;
}
/* Пункт открытой страницы. Своё правило GeneratePress пишет через
   [class*="current-menu-"] и красит пункт в белый — на светлой полосе
   слово пропадало. Селектор повторяет тему, иначе она перевесит. */
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: var(--accent-deep);
}
.main-navigation .main-nav ul ul li a { font-size: 14px; }

/* Кнопка меню под курсором и в фокусе. GeneratePress красит её в белый —
   расчёт на тёмную полосу навигации, а у нас полоса светлая, и кнопка
   после нажатия пропадала. */
button.menu-toggle:hover,
button.menu-toggle:focus {
  color: var(--accent-deep);
  background: transparent;
}

/* На широких экранах пункты — обычные ссылки с зазором, как в макете.
   Штатные «коробки» с отступами по 20 пикселей с каждой стороны съедают
   280 пикселей на семи пунктах, и меню перестаёт помещаться в строку.
   Текущий и наведённый пункт помечаются чертой под словом, а не заливкой:
   у плоской ссылки заливка легла бы вплотную к буквам. */
@media (min-width: 1200px) {
  .main-navigation .main-nav > ul {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .main-navigation .main-nav > ul > li > a {
    padding: 8px 0;
    border-bottom: 2px solid transparent;
  }
  .main-navigation .main-nav > ul > li:hover > a,
  .main-navigation .main-nav > ul > li > a:focus,
  .main-navigation .main-nav > ul > li[class*="current-menu-"] > a {
    background: none;
    border-bottom-color: var(--accent);
  }
}

/* Разделительная черта — по всей ширине шапки. Раньше её рисовало меню,
   но меню занимает только свою часть строки, и черта обрывалась посередине. */
.site-header { border-bottom: 1px solid var(--line); }

/* Колонка текста по центру: иначе на широком экране справа остаётся пустое поле */
.entry-content { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Вопросы и ответы. Текст блока и микроразметка идут из одного источника
   в functions.php: поисковики требуют, чтобы размеченные вопросы были видны.
   ========================================================================== */
.apm-faq { display: grid; gap: 2px; margin-top: 28px;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--line); }
.apm-faq-item { background: var(--card); padding: 20px 22px; }
.apm-faq-item h3 { margin: 0 0 6px; }
.apm-faq-item p { margin: 0; color: var(--muted); font-size: 15px; }

/* ==========================================================================
   Полосы секций на всю ширину. Включаются на странице, у которой в мете
   _generate-full-width-content стоит true (главная): у неё тема снимает
   узкий контейнер, и секции сами держат свою ширину внутренней обёрткой.
   ========================================================================== */
.full-width-content .site-content .content-area { padding: 0; }
.full-width-content .inside-article { padding: 0; }
.full-width-content .entry-content { max-width: none; }
.full-width-content .entry-content > * + * { margin-top: 0; }

.apm-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.apm-col { max-width: var(--col); }
.apm-wrap > * + *, .apm-col > * + * { margin-top: 1.1em; }

.apm-section { padding: 64px 0; border-top: 1px solid var(--line); margin: 0; }
.apm-section.plain { border-top: none; }
.apm-section.tinted { background: var(--subtle); }

/* ==========================================================================
   Первый экран: текст слева, схема обмена справа
   ========================================================================== */
.apm-hero {
  padding: 56px 0 64px;
  background: var(--subtle);
  border-bottom: 1px solid var(--line);
}
.apm-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 48px;
  align-items: center;
}
.apm-hero-grid > * + * { margin-top: 0; }
.apm-hero h1 { margin: 0 0 18px; }
.apm-hero .apm-lead { margin: 0 0 26px; }
.apm-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }

.apm-facts { display: flex; gap: 26px; flex-wrap: wrap; font-size: 14px; color: var(--muted); margin: 0; }
.apm-facts b { display: block; color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

.apm-scheme {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
  margin: 0;
}
.apm-scheme svg { display: block; width: 100%; height: auto; }

@media (max-width: 860px) {
  .apm-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .apm-section { padding: 48px 0; }
  .apm-hero { padding: 40px 0 48px; }
}

/* На телефоне первый экран начинается сразу: сорока пикселей отступа сверху
   хватало, чтобы заголовок и кнопки уехали за сгиб. */
@media (max-width: 600px) {
  .apm-hero { padding: 24px 0 36px; }
  .apm-hero-grid { gap: 24px; }
  .apm-wrap { padding: 0 16px; }
}

/* ==========================================================================
   Полосы во всю ширину: снимаем ограничители темы на странице,
   помеченной как полноширинная. Ширину держат обёртки .apm-wrap внутри секций.
   ========================================================================== */
.full-width-content .site-content .grid-container,
.full-width-content .inside-article,
.full-width-content .entry-content { max-width: none; }
.full-width-content .inside-article { padding: 0; }
.full-width-content .site-content { padding: 0; }

/* ==========================================================================
   Шапка: кнопка заявки справа от меню, как в макете.

   Надпись короткая. Строка шапки ограничена шириной колонки сайта — 1180
   пикселей, и на широком экране она не растягивается. Из этих 1180 логотип
   с подписью занимает 213, семь пунктов меню — 712; на кнопку остаётся
   около 130. Полная надпись «Оставить заявку» требует 168 и сталкивает
   меню на вторую строку.
   ========================================================================== */
.apm-head-cta { display: flex; align-items: center; margin-left: 16px; order: 2; }
.apm-head-cta .apm-btn { white-space: nowrap; }

/* Вторая кнопка заявки — для узких экранов. Разметку выводит functions.php.
   Видна всегда ровно одна из двух: кнопка выше живёт в строке навигации,
   а её ниже 1200 px тема сворачивает целиком. */
.apm-head-cta-mobile { display: none; }

/* Ниже 1200 px шапка собирается в одну строку: слева логотип с названием,
   справа кнопка заявки и кнопка меню. Само меню лежит свёрнутым и по нажатию
   раскрывается полосой под шапкой.

   Работает штатный встроенный переключатель GeneratePress
   (#mobile-menu-control-wrapper) — он и рассчитан стоять в строке шапки.
   Полоса навигации, внутри которой тема держит собственную кнопку меню
   во всю ширину, до раскрытия скрыта: иначе шапка занимала три строки —
   название, серая полоса с кнопкой меню и кнопка заявки под ней.

   Блок стоит после .apm-head-cta намеренно: тот задаёт order: 2 с той же
   силой селектора, и из более раннего места правило порядка не перебивалось. */
@media (max-width: 1199px) {
  .apm-head-cta-mobile { display: flex; order: 0; margin-left: auto; }
  /* width: auto обязателен. Полосе навигации тема задаёт ширину 100 %, а при
     flex-basis: auto именно она и берётся за основу — обёртка кнопки меню
     занимала всю строку, хотя сама кнопка в ней 35 пикселей. */
  .site-header .inside-header .mobile-menu-control-wrapper {
    display: flex; order: 1; margin-left: 8px; flex: 0 0 auto; width: auto;
  }
  /* Кнопке меню тема даёт flex-grow: 1 — расчёт на полосу во всю ширину.
     В строке шапки из-за этого она растягивалась на весь остаток строки
     и сталкивала себя на вторую строку. */
  .site-header .inside-header .mobile-menu-control-wrapper button.menu-toggle {
    width: auto; flex: 0 0 auto; padding: 0 10px; line-height: 44px;
  }
  .site-header .inside-header #site-navigation { order: 2; }
  .site-header .inside-header #site-navigation:not(.toggled) { display: none; }
  .site-header .inside-header #site-navigation.toggled { width: 100%; flex: 0 0 100%; }
}

/* Шапка на телефоне. Логотип, название и подпись в две строки занимали около
   ста двадцати пикселей — вместе с уведомлением о cookie это половина первого
   экрана. Подпись убрана: на узкой шапке она переносится в три строки и тянет
   её вниз, а ту же мысль несёт первый экран страницы. */
@media (max-width: 600px) {
  .site-header .inside-header { padding: 10px 16px; gap: 10px; }
  .site-logo img { width: 59px; height: 43px; }
  .site-branding .main-title { font-size: 19px; }
  .site-branding .site-description { display: none; }
  .apm-head-cta-mobile .apm-btn { font-size: 14px; padding: 9px 16px; }
}

/* Шапка в одну строку: логотип и название слева, меню и кнопка прижаты вправо.
   Правила действуют только там, где меню развёрнуто. Ниже 1200 оно сворачивается
   в кнопку, и шапку выстраивает сам GeneratePress; там же он прячет из строки
   навигации всё, кроме кнопки меню, — вместе с заявкой. Поэтому на узких экранах
   работает вторая кнопка, .apm-head-cta-mobile: она выводится в шапку рядом
   с кнопкой меню и не зависит от строки навигации. */
@media (min-width: 1200px) {
  .site-header .inside-header { flex-wrap: nowrap; }
  .site-header .main-navigation { margin-left: auto; width: auto; flex: 0 1 auto; }
  .main-navigation .inside-navigation {
    display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap;
  }
  .main-navigation .main-nav { order: 1; width: auto; flex: 0 1 auto; }
}

@media (max-width: 599px) {
  .site-header .inside-header { flex-wrap: wrap; }
  .site-header .main-navigation { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   Внутренние отступы блоков. Автоформатирование абзацев на страницах отключено,
   поэтому вертикальные интервалы внутри карточек задаются явно — иначе кнопки
   прилипают к списку, как это и вышло в блоке цены.
   ========================================================================== */
.apm-price > * + * { margin-top: 16px; }
.apm-price .apm-incl + p { margin-top: 24px; }
.apm-price .apm-price-tag + p { margin-top: 12px; }
.apm-card > * + * { margin-top: 8px; }
.apm-step > div > * + * { margin-top: 6px; }
.apm-faq-item > * + * { margin-top: 6px; }

/* Кнопки в строке не слипаются между собой */
.apm-btn + .apm-btn { margin-left: 10px; }

/* Колонки блока цены не растягиваются по высоте самой длинной из них */
.apm-split { align-items: start; }

/* ==========================================================================
   Скриншоты открываются во весь экран

   На странице скриншот стоит в колонке шириной около 700 пикселей, а снят
   с экрана 1С в полтора-два раза шире: подписи в формах читаются с трудом.
   Клик открывает снимок поверх страницы, повторный клик по самому снимку
   переключает между «вписать в экран» и натуральным размером — длинные формы
   1С иначе не рассмотреть.
   ========================================================================== */
.entry-content img { cursor: zoom-in; }
.entry-content a img { cursor: inherit; }

.apm-lupa {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    background: rgba(20, 18, 15, .92);
    overflow: auto;
    overscroll-behavior: contain;
}
.apm-lupa[hidden] { display: none; }
.apm-lupa img {
    max-width: 100%;
    max-height: calc(100vh - 120px);
    cursor: zoom-in;
    background: #fff;
}
.apm-lupa.apm-lupa-naturalnyy img {
    max-width: none;
    max-height: none;
    cursor: zoom-out;
}
.apm-lupa figcaption {
    max-width: 900px;
    color: #f6f1e7;
    font-size: .95rem;
    line-height: 1.45;
    text-align: center;
}
.apm-lupa-zakryt {
    position: fixed;
    top: 12px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(246, 241, 231, .16);
    color: #f6f1e7;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.apm-lupa-zakryt:hover, .apm-lupa-zakryt:focus-visible { background: rgba(246, 241, 231, .3); }

/* Пока снимок открыт, страница под ним не прокручивается */
body.apm-lupa-otkryta { overflow: hidden; }

@media (max-width: 600px) {
    .apm-lupa { padding: 12px; }
    .apm-lupa figcaption { font-size: .875rem; }
}