/*
Theme Name: Axtoren
Theme URI: https://axtoren.ru
Author: Axtoren
Description: Кастомная тема для корпоративного сайта инжиниринговой и
             производственной компании Axtoren. Разработана с нуля,
             без использования готовых тяжёлых тем и визуальных
             конструкторов. Дизайн-концепция: «Современный production»
             (запасная — «Инженерная классика»).
Version: 10.2
Requires at least: 6.4
Requires PHP: 7.4
License: Proprietary — All Rights Reserved
Text Domain: axtoren

ВНИМАНИЕ: Используется БЭМ-методология с уникальным префиксом ax-
для всех классов, напр. .ax-card__title, .ax-hero__zone--active.
Стандартные шаблонные имена (.container, .btn-primary и т.п.) не
используются — см. примечание о нейминге в functions.php.
*/

/* ==========================================================================
   1. ШРИФТЫ
   ==========================================================================
   OpenGost Type B TT — свободная реализация чертёжного шрифта по ГОСТ
   2.304-81. Авторы: Nikita Volchenkov, Valek Filippov.
   Лицензия SIL Open Font License 1.1 (разрешает и коммерческое
   использование, и модификацию — см. ниже).

   ДОРАБОТКА ШРИФТА (важно). В исходном шрифте было 545 глифов: кириллица
   и базовая латиница, но БЕЗ букв с диакритикой. На испанской,
   французской, немецкой и португальской версиях сайта браузер подставлял
   ñ, é, ü, ç, ß из системного шрифта — они выбивались из чертёжного
   стиля и выглядели как посторонние символы.

   В шрифт достроены 44 недостающие буквы. Они собраны как СОСТАВНЫЕ
   глифы из уже имевшихся в шрифте базовых букв и значков диакритики
   (acute, grave, tilde, dieresis, circumflex) — ровно тем же способом,
   каким автор шрифта собрал букву è. Поэтому новые буквы нарисованы
   родными контурами шрифта и полностью сохраняют его стиль.
   Седиль (ç) собрана из запятой, ß — из имеющегося глифа β.

   ИМЯ ФАЙЛА С СУФФИКСОМ -v2 — НЕ КОСМЕТИКА. Браузеры агрессивно кешируют
   файлы шрифтов. Если оставить прежнее имя, браузер переиспользует старую
   копию БЕЗ новых букв, и правка не проявится. Смена имени файла меняет
   адрес и гарантированно заставляет скачать шрифт заново.

   ВАЖНО: в шрифте есть только начертание Regular — Bold автор не
   предоставляет. Вес заголовков достигается увеличенным letter-spacing
   и кеглем, а не font-weight: 700 (браузер отрисовал бы synthetic-bold,
   исказив чертёжные пропорции букв).
   ========================================================================== */

@font-face {
	font-family: 'OpenGost Type B';
	src: url('fonts/opengost-type-b-v2.woff2') format('woff2'),
		url('fonts/opengost-type-b-v2.woff') format('woff'),
		url('fonts/opengost-type-b-v2.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   НЕДОСТАЮЩИЕ ЗНАКИ (v9.14)

   В гарнитуре нет семи знаков: ₽ U+20BD, стрелки U+2190–2193, Ø U+00D8,
   ✔ U+2714. Проверено обходом таблицы соответствия файла, а не по описанию.

   Без этого объявления браузер подставляет их сам, из первого попавшегося
   шрифта, и внутри одной строки получается разнобой начертания. Отказа при
   этом нет: знак отрисован, страница цела, заметно только глазом.

   Здесь выбор перестаёт быть случайным. Это НЕ гарантия: local() берёт
   шрифт с машины посетителя, и если PT Sans там нет — подстановка пойдёт
   обычным порядком. Выигрыш в том, что там, где шрифт есть, знак берётся
   предсказуемо.

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

   ВНИМАНИЕ: Ø U+00D8 включён как запасной вариант отрисовки, но к НАБОРУ
   запрещён. Диаметр набирается знаком ⌀ U+2300 — он в гарнитуре есть,
   контур непустой. См. глоссарий, правило о наборе диаметра.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'OpenGost Type B';
	src: local('PT Sans'), local('Arial');
	unicode-range: U+20BD, U+2190-2193, U+00D8, U+2714;
	font-weight: 400;
	font-style: normal;
}

/* То же для полного имени гарнитуры: под ним её зовут чертежи SVG.
   Без второго объявления подписи на чертежах остались бы со случайной
   подстановкой. */
@font-face {
	font-family: 'OpenGost Type B TT';
	src: local('PT Sans'), local('Arial');
	unicode-range: U+20BD, U+2190-2193, U+00D8, U+2714;
	font-weight: 400;
	font-style: normal;
}

/* ==========================================================================
   2. ПЕРЕМЕННЫЕ ДИЗАЙН-СИСТЕМЫ (Концепция 5 — Современный production)
   ========================================================================== */

:root {
	/* Цвета (см. design-system.md для полной палитры и обоснования) */
	--ax-color-bg: #F2EFE6;          /* фон страницы — оттенок "ватман" вместо чистого белого */
	--ax-color-surface: #FFFFFF;     /* поверхности карточек */
	--ax-color-text: #273341;        /* основной текст вместо чёрного */
	--ax-color-text-muted: #273341B3; /* приглушённый текст, ~70% прозрачности */
	--ax-color-accent: #DCA530;      /* жёлтый акцент */
	--ax-color-accent-dark: #B8862260; /* затемнённый акцент для hover, прозрачный для теней */
	--ax-color-border: #27334129;    /* тонкая граница ~16% прозрачности */
	--ax-color-success: #3D8B5F;     /* статус "в работе/готово", из Концепции 5 */
	--ax-color-danger: #B23A2E;      /* ошибки валидации форм */

	/* Типографика */
	--ax-font-base: 'OpenGost Type B', 'PT Sans', 'Arial', sans-serif;
	--ax-line-height-base: 1.65; /* увеличенный line-height компенсирует узкое начертание GOST */
	--ax-letter-spacing-base: 0.01em;

	/* Сетка и отступы */
	--ax-container-max: 1280px;

	/*
	 * Предельная ширина одной колонки текста. Строка длиннее 75–80
	 * знаков утомляет, поэтому при широком экране текст делится на две
	 * колонки этой ширины, а не растягивается в одну длинную строку.
	 */
	--ax-column-max: 780px;
	--ax-gap-base: 24px;
	--ax-radius-base: 4px; /* минимальное скругление — индустриальная строгость, не "мягкий" UI */

	/* Тайминги анимаций (уникальные, не дефолтные ease — см. п. Блок 2.3 IP-документа) */
	--ax-ease-engineering: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ax-duration-fast: 160ms;
	--ax-duration-base: 280ms;
}

/* ==========================================================================
   3. БАЗОВЫЙ RESET И ТИПОГРАФИКА
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

/*
 * «Липкий» подвал: страница — вертикальный flex-контейнер высотой не
 * менее экрана, а <main> растягивается и занимает всё свободное место.
 * Если контента мало (как на пустых страницах разделов), подвал всё
 * равно прижат к низу окна, а не висит посередине.
 *
 * Именно flex, а не position: fixed — фиксированный подвал перекрывал бы
 * контент на страницах, где его много.
 *
 * min-height в двух единицах намеренно: 100vh — фолбэк для старых
 * браузеров, 100dvh учитывает адресную строку на мобильных, которая
 * скрывается при прокрутке (иначе подвал уезжает за край экрана).
 */
body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	font-family: var(--ax-font-base);
	font-size: 16px;
	line-height: var(--ax-line-height-base);
	letter-spacing: var(--ax-letter-spacing-base);
	color: var(--ax-color-text);
	background-color: var(--ax-color-bg);
}

/* Основная область растягивается, выдавливая подвал вниз. */
#ax-main-content {
	flex: 1 0 auto;
}

/* Подвал не сжимается, если контента много. */
.ax-footer {
	flex-shrink: 0;
}

/*
 * Поправка на админ-панель WordPress. Она видна только администратору и
 * занимает 32px сверху (46px на мобильных), сдвигая страницу вниз. Без
 * этой поправки высота body = 100vh + панель, и у залогиненного
 * администратора появлялась бы лишняя полоса прокрутки на пустых
 * страницах. Посетителей это не касается — у них панели нет.
 */
body.admin-bar {
	min-height: calc(100vh - 32px);
	min-height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		min-height: calc(100vh - 46px);
		min-height: calc(100dvh - 46px);
	}
}

img,
picture,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--ax-color-text);
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ax-font-base);
	font-weight: 400; /* у OpenGost нет Bold — вес даём letter-spacing, см. блок 1 */
	letter-spacing: 0.015em;
	line-height: 1.3;
	margin: 0 0 16px;
}

p {
	margin: 0 0 16px;
}

table {
	width: 100%;
	border-collapse: collapse;
}

button {
	font-family: var(--ax-font-base);
	cursor: pointer;
}

/* ==========================================================================
   4. КОНТЕЙНЕР И БАЗОВАЯ СЕТКА
   ========================================================================== */

.ax-container {
	width: 100%;
	max-width: var(--ax-container-max);
	margin-inline: auto;
	padding-inline: var(--ax-gap-base);
}

.ax-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ==========================================================================
   5. HEADER (sticky, см. п. 4.1 ТЗ)
   ========================================================================== */

.ax-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--ax-color-bg);
	border-bottom: 1px solid var(--ax-color-border);
}

.ax-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ax-gap-base);
	padding-block: 16px;
}

.ax-header__logo img,
.ax-header__logo-img {
	height: 52px;
	width: auto;
	display: block;
}

@media (min-width: 768px) {
	.ax-header__logo-img {
		height: 62px;
	}
}

.ax-header__nav {
	display: none; /* mobile-first: на мобильных скрыто за бургером */
}

.ax-header__nav-list {
	display: flex;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ax-header__nav-link {
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: color var(--ax-duration-fast) var(--ax-ease-engineering);
}

.ax-header__nav-link:hover,
.ax-header__nav-link:focus-visible {
	color: var(--ax-color-accent);
}

.ax-header__burger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 1px solid var(--ax-color-border);
	border-radius: var(--ax-radius-base);
}

@media (min-width: 1024px) {
	.ax-header__nav {
		display: block;
	}
	.ax-header__burger {
		display: none;
	}
}

/* Мобильное выпадающее меню */
.ax-header__mobile-nav {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding-block: 16px;
	border-top: 1px solid var(--ax-color-border);
}

.ax-header__mobile-nav.is-open {
	display: flex;
}

.ax-header__mobile-nav-link {
	display: block;
	padding: 12px 8px;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.02em;
}

@media (min-width: 1024px) {
	.ax-header__mobile-nav {
		display: none !important;
	}
}

/* ==========================================================================
   6. FOOTER
   ========================================================================== */

.ax-footer {
	background-color: var(--ax-color-text);
	color: var(--ax-color-bg);
	padding-block: 48px 24px;
	margin-top: 64px;
}

.ax-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media (min-width: 768px) {
	.ax-footer__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ax-footer__heading {
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ax-color-accent);
	margin-bottom: 12px;
}

.ax-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ax-footer__list-item {
	margin-bottom: 8px;
}

.ax-footer__link {
	color: var(--ax-color-bg);
	opacity: 0.85;
}

.ax-footer__link:hover,
.ax-footer__link:focus-visible {
	opacity: 1;
	color: var(--ax-color-accent);
}

.ax-footer__bottom {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid #FFFFFF1F;
	font-size: 13px;
	opacity: 0.7;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
}

/* ==========================================================================
   7. БАЗОВЫЕ КНОПКИ
   ========================================================================== */

.ax-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.03em;
	border-radius: var(--ax-radius-base);
	border: 1px solid transparent;
	transition: background-color var(--ax-duration-fast) var(--ax-ease-engineering),
		color var(--ax-duration-fast) var(--ax-ease-engineering),
		border-color var(--ax-duration-fast) var(--ax-ease-engineering);
}

.ax-btn--primary {
	background-color: var(--ax-color-text);
	color: var(--ax-color-bg);
}

.ax-btn--primary:hover,
.ax-btn--primary:focus-visible {
	background-color: var(--ax-color-accent);
	color: var(--ax-color-text);
}

.ax-btn--outline {
	background-color: transparent;
	border-color: var(--ax-color-accent);
	color: var(--ax-color-accent);
}

.ax-btn--outline:hover,
.ax-btn--outline:focus-visible {
	background-color: var(--ax-color-accent);
	color: var(--ax-color-text);
}

/* ==========================================================================
   8. HERO-БЛОК ГЛАВНОЙ СТРАНИЦЫ (Этап 4)
   ==========================================================================
   Интерактивная SVG-схема с 5 кликабельными зонами, расположенными
   зигзагом вдоль центральной оси — метафора траектории детали на
   производственной линии. Порядок слева направо (требование п. 5.1 ТЗ):
   Производим, Разрабатываем, Программируем, Модернизируем, Консультируем.

   Mobile-first: на узких экранах сложная зигзаг-схема нечитаема и плохо
   воспринимается тапами на мелких хитбоксах, поэтому до брейкпоинта
   768px зоны переключаются в простой вертикальный список карточек той
   же стилистики — UX важнее верности метафоре на маленьком экране.
   ========================================================================== */

.ax-hero {
	padding-block: 48px 64px;
	overflow: hidden;
}

.ax-hero__title {
	font-size: clamp(34px, 6vw, 60px);
	max-width: 900px;
	margin-bottom: 16px;
}

.ax-hero__subtitle {
	font-size: clamp(18px, 2vw, 22px);
	color: var(--ax-color-text-muted);
	max-width: 680px;
	margin-bottom: 48px;
}

.ax-hero__scheme-wrap {
	width: 100%;
}

/* Mobile-first base: схема скрыта, показывается только от 768px,
   где зигзаг физически читаем без перегрузки тапа. */
.ax-hero__scheme {
	display: none;
}

.ax-hero__axis,
.ax-hero__connector {
	stroke: var(--ax-color-text);
	stroke-width: 1;
	opacity: 0.25;
	fill: none;
}

.ax-hero__axis-node {
	fill: var(--ax-color-text);
	opacity: 0.4;
}

.ax-hero__zone-box {
	fill: var(--ax-color-surface);
	stroke: var(--ax-color-text);
	stroke-width: 1;
	opacity: 0.9;
	transition: fill var(--ax-duration-base) var(--ax-ease-engineering),
		stroke var(--ax-duration-base) var(--ax-ease-engineering);
}

.ax-hero__zone-label {
	font-family: var(--ax-font-base);
	font-size: 21px;
	letter-spacing: 0.015em;
	fill: var(--ax-color-text);
	transition: fill var(--ax-duration-base) var(--ax-ease-engineering);
}

.ax-hero__zone-sublabel {
	font-family: var(--ax-font-base);
	font-size: 14px;
	fill: var(--ax-color-text);
	opacity: 0.6;
	transition: fill var(--ax-duration-base) var(--ax-ease-engineering),
		opacity var(--ax-duration-base) var(--ax-ease-engineering);
}

.ax-hero__zone {
	cursor: pointer;
}

.ax-hero__zone:hover .ax-hero__zone-box,
.ax-hero__zone:focus-visible .ax-hero__zone-box {
	fill: var(--ax-color-accent);
	stroke: var(--ax-color-accent);
}

.ax-hero__zone:hover .ax-hero__zone-label,
.ax-hero__zone:focus-visible .ax-hero__zone-label {
	fill: var(--ax-color-text);
}

.ax-hero__zone:hover .ax-hero__zone-sublabel,
.ax-hero__zone:focus-visible .ax-hero__zone-sublabel {
	fill: var(--ax-color-text);
	opacity: 0.75;
}

.ax-hero__zone:focus-visible {
	outline: none;
}

.ax-hero__zone:focus-visible .ax-hero__zone-box {
	stroke-width: 2;
}

/* Мобильная/планшетная альтернатива схемы — простой список карточек.
   Строится тем же JS, что инициализирует схему (см. hero.js), путём
   дублирования данных из DOM текстового fallback-списка, чтобы не
   держать данные о зонах в двух источниках одновременно. */
.ax-hero__mobile-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.ax-hero__mobile-zone {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	background-color: var(--ax-color-surface);
	border: 1px solid var(--ax-color-border);
	border-radius: var(--ax-radius-base);
	transition: border-color var(--ax-duration-fast) var(--ax-ease-engineering),
		background-color var(--ax-duration-fast) var(--ax-ease-engineering);
}

.ax-hero__mobile-zone:hover,
.ax-hero__mobile-zone:focus-visible {
	border-color: var(--ax-color-accent);
	background-color: #DCA5301A;
}

.ax-hero__mobile-zone-label {
	font-size: 16px;
	letter-spacing: 0.015em;
}

.ax-hero__mobile-zone-sublabel {
	display: block;
	font-size: 13px;
	color: var(--ax-color-text-muted);
	margin-top: 2px;
}

.ax-hero__mobile-zone-arrow {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	opacity: 0.5;
}

@media (min-width: 768px) {
	.ax-hero__scheme {
		display: block;
		width: 100%;
		height: auto;
	}

	.ax-hero__mobile-list {
		display: none;
	}
}

/* ==========================================================================
   9. КАРТОЧКИ ТОВАРА И УСЛУГИ (v8.0)
   ==========================================================================
   До v8.0 карточка делилась на шапку и четыре вкладки. Вкладки убраны:
   у оборудования под заказ решающая информация — назначение и
   применимость к задаче, а во вкладочной схеме она пряталась за кликом,
   который делали не все. Теперь страница читается сплошной вертикалью.

   Товар и услуга используют одну схему блоков (.ax-block) и общие
   стили галереи, различаясь только составом разделов. Раздельные
   BEM-префиксы .ax-product__ / .ax-service__ сохранены для шапки —
   там разное содержимое правой колонки.
   ========================================================================== */

.ax-product,
.ax-service,
.ax-software {
	padding-block: 32px 64px;
}

/* --- Шапка: галерея слева, сводка справа --- */

.ax-product__hero,
.ax-service__hero,
	.ax-software__hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	margin-bottom: 56px;
}

@media (min-width: 1024px) {
	.ax-product__hero,
	.ax-service__hero,
	.ax-software__hero {
		grid-template-columns: 60% 1fr;
		gap: 48px;
	}
}

/* --- Галерея (общая для товара, услуги и ПО) --- */

/*
 * ВНИМАНИЕ при правке селекторов. В v8.2 сюда автоматически добавляли
 * .ax-software__… заменой по подстроке, и «.ax-service__gallery» совпало
 * внутри «.ax-service__gallery-main»: селекторы услуги были затёрты, а
 * её галерея осталась без стилей. Секция переписана вручную в v8.3.1.
 * Правьте перечни целиком, а не автозаменой по части имени.
 */

/*
 * Главное изображение — кнопка: нажатие открывает полноэкранный
 * просмотр. Оформление кнопки сброшено, добавлены курсор и подсказка.
 */
.ax-product__gallery-main,
.ax-service__gallery-main,
.ax-software__gallery-main {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	background-color: var(--ax-color-surface);
	border: 1px solid var(--ax-color-border);
	border-radius: var(--ax-radius-base);
	overflow: hidden;
	cursor: zoom-in;
}

.ax-product__gallery-main:hover,
.ax-service__gallery-main:hover,
.ax-software__gallery-main:hover,
.ax-product__gallery-main:focus-visible,
.ax-service__gallery-main:focus-visible,
.ax-software__gallery-main:focus-visible {
	border-color: var(--ax-color-accent);
}

.ax-product__gallery-main img,
.ax-service__gallery-main img,
.ax-software__gallery-main img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ax-gallery__zoom-hint {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 6px 12px;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--ax-color-bg);
	background-color: rgba(39, 51, 65, 0.82);
	border-radius: var(--ax-radius-base);
	opacity: 0;
	transition: opacity var(--ax-duration-fast) var(--ax-ease-engineering);
}

.ax-product__gallery-main:hover .ax-gallery__zoom-hint,
.ax-service__gallery-main:hover .ax-gallery__zoom-hint,
.ax-software__gallery-main:hover .ax-gallery__zoom-hint,
.ax-product__gallery-main:focus-visible .ax-gallery__zoom-hint,
.ax-service__gallery-main:focus-visible .ax-gallery__zoom-hint,
.ax-software__gallery-main:focus-visible .ax-gallery__zoom-hint {
	opacity: 1;
}

/* На сенсорных экранах наведения нет — подсказка видна постоянно. */
@media (hover: none) {
	.ax-gallery__zoom-hint {
		opacity: 1;
	}
}

.ax-product__gallery-placeholder,
.ax-service__gallery-placeholder,
.ax-software__gallery-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background-color: var(--ax-color-surface);
	border: 1px dashed var(--ax-color-border);
	border-radius: var(--ax-radius-base);
	color: var(--ax-color-text-muted);
	font-size: 14px;
	text-align: center;
	padding: 24px;
}

.ax-product__gallery-thumbs,
.ax-service__gallery-thumbs,
.ax-software__gallery-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.ax-product__gallery-thumb,
.ax-service__gallery-thumb,
.ax-software__gallery-thumb {
	padding: 0;
	border: 1px solid var(--ax-color-border);
	border-radius: var(--ax-radius-base);
	background: none;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
	transition: border-color var(--ax-duration-fast) var(--ax-ease-engineering);
}

.ax-product__gallery-thumb img,
.ax-service__gallery-thumb img,
.ax-software__gallery-thumb img {
	width: 80px;
	height: 80px;
	object-fit: cover;
}

.ax-product__gallery-thumb:hover,
.ax-product__gallery-thumb:focus-visible,
.ax-service__gallery-thumb:hover,
.ax-service__gallery-thumb:focus-visible,
.ax-software__gallery-thumb:hover,
.ax-software__gallery-thumb:focus-visible {
	border-color: var(--ax-color-accent);
}

.ax-product__gallery-thumb.is-active,
.ax-service__gallery-thumb.is-active,
.ax-software__gallery-thumb.is-active {
	border-color: var(--ax-color-accent);
	border-width: 2px;
}
/* --- Правая колонка шапки --- */

.ax-product__title,
.ax-service__title,
.ax-software__title {
	font-size: clamp(24px, 3.5vw, 32px);
	margin-bottom: 16px;
}

.ax-product__short-desc,
.ax-service__short-desc,
.ax-software__short-desc {
	font-size: 17px;
	color: var(--ax-color-text);
	margin-bottom: 24px;
}

/*
 * Ключевые параметры. Определения выровнены в две колонки: название
 * приглушено, значение — основным цветом. Читается как выписка из
 * паспорта изделия, а не как маркетинговый список.
 */
.ax-product__key-specs {
	margin: 0 0 24px;
	border-top: 1px solid var(--ax-color-border);
}

.ax-product__key-spec {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px;
	align-items: baseline;
	padding: 10px 0;
	border-bottom: 1px solid var(--ax-color-border);
}

.ax-product__key-spec dt {
	font-size: 14px;
	color: var(--ax-color-text-muted);
}

.ax-product__key-spec dd {
	margin: 0;
	text-align: right;
}

.ax-service__key-points {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.ax-service__key-points li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 10px;
	font-size: 15px;
}

.ax-service__key-points li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 8px;
	height: 1px;
	background-color: var(--ax-color-accent);
}

.ax-product__cta,
.ax-service__cta,
.ax-software__cta {
	margin-top: 8px;
}

/* ==========================================================================
   10. БЛОКИ СОДЕРЖАНИЯ КАРТОЧКИ
   ==========================================================================
   Единый ритм разделов: заголовок с тонкой линией сверху, тело блока
   ограничено по ширине для комфортного чтения. Ограничение через
   max-width на .ax-prose, а не на весь блок, — таблицам и галереям
   нужна полная ширина.
   ========================================================================== */

.ax-block {
	padding-top: 32px;
	margin-bottom: 48px;
	border-top: 1px solid var(--ax-color-border);
}

.ax-block__title {
	font-size: clamp(19px, 2.2vw, 23px);
	letter-spacing: 0.03em;
	margin-bottom: 20px;
}

.ax-block__note {
	margin-top: 16px;
	font-size: 14px;
	color: var(--ax-color-text-muted);
}

/*
 * Ограничение длины строки: свыше ~75 знаков читаемость падает.
 *
 * ШИРИНА В ПИКСЕЛЯХ, А НЕ В ch. Единица ch равна ширине цифры «ноль»
 * текущей гарнитуры, а OpenGost Type B — чертёжный шрифт, узкий по
 * построению. У обычной гарнитуры 70ch дают около 700 px, здесь
 * получалось ~460 px: юридические документы выводились узкой полосой
 * в левой части страницы, при том что справа пустовала половина
 * колонки. Пиксели дают предсказуемый результат независимо от шрифта.
 */
/*
 * Шапка карточки занимает всю ширину, поэтому одиночная узкая колонка
 * ниже читалась как незаполненное место справа. Текст растянут на всю
 * ширину, но разбит на две колонки: длина строки прежняя, пустоты нет.
 * Ниже 1100 px колонка одна — делить нечего.
 */
.ax-prose {
	max-width: var(--ax-column-max);
}

@media (min-width: 1100px) {
	.ax-prose {
		max-width: none;
		/* Отменено в v9.9: см. раздел 24. Оставлено единицей, а не
		   удалено, чтобы соседние правила о неразрывности заголовков
		   сохранили своё место и смысл. */
		column-count: 1;
	}

	/*
	 * Заголовки и изображения не разрываются между колонками: разрыв
	 * посреди подзаголовка читается как ошибка вёрстки.
	 */
	.ax-prose h2,
	.ax-prose h3,
	.ax-prose h4,
	.ax-prose img,
	.ax-prose table,
	.ax-prose blockquote {
		break-inside: avoid;
	}

	.ax-prose > *:first-child {
		margin-top: 0;
	}
}

.ax-prose > *:last-child {
	margin-bottom: 0;
}

.ax-prose img {
	border-radius: var(--ax-radius-base);
	margin-block: 16px;
}

/* --- Таблица технических параметров --- */

.ax-specs-table {
	width: 100%;
	max-width: 1000px;
	border-collapse: collapse;
	font-size: 15px;
}

.ax-specs-table th,
.ax-specs-table td {
	padding: 11px 16px;
	text-align: left;
	border-bottom: 1px solid var(--ax-color-border);
	vertical-align: top;
}

/*
 * Первая колонка — заголовок строки (th scope="row"), а не ячейка
 * данных: у таблицы параметров нет шапки, и без scope программы чтения
 * с экрана не связывают значение с названием параметра.
 */
.ax-specs-table th[scope='row'] {
	width: 45%;
	font-weight: 400;
	color: var(--ax-color-text-muted);
}

.ax-specs-table tbody tr:first-child th,
.ax-specs-table tbody tr:first-child td {
	border-top: 1px solid var(--ax-color-border);
}

/* --- Исполнения и опции --- */

.ax-options {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 768px) {
	.ax-options {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	.ax-options {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ax-options__item {
	padding: 18px 20px;
	background-color: var(--ax-color-surface);
	border: 1px solid var(--ax-color-border);
	border-left: 3px solid var(--ax-color-accent);
	border-radius: 0 var(--ax-radius-base) var(--ax-radius-base) 0;
}

.ax-options__name {
	font-size: 16px;
	margin-bottom: 8px;
}

.ax-options__desc {
	margin: 0;
	font-size: 14px;
	color: var(--ax-color-text-muted);
}

/* --- Этапы работы (карточка услуги) --- */

.ax-stages {
	list-style: none;
	counter-reset: ax-stage;
	margin: 0;
	padding: 0;
	max-width: 1000px;
}

.ax-stages__item {
	counter-increment: ax-stage;
	position: relative;
	padding: 0 0 20px 44px;
	border-left: 1px solid var(--ax-color-border);
	margin-left: 12px;
}

.ax-stages__item:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}

/*
 * Номер этапа на линии. Фон страницы под кружком обязателен — иначе
 * вертикальная линия просвечивает сквозь цифру.
 */
.ax-stages__item::before {
	content: counter(ax-stage);
	position: absolute;
	left: -13px;
	top: 0;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: var(--ax-color-text);
	background-color: var(--ax-color-bg);
	border: 1px solid var(--ax-color-accent);
	border-radius: 50%;
}

.ax-stages__name {
	font-size: 16px;
	margin-bottom: 6px;
	padding-top: 2px;
}

.ax-stages__result {
	margin: 0;
	font-size: 14px;
	color: var(--ax-color-text-muted);
	max-width: 720px; /* см. примечание к .ax-prose о единице ch */
}

/* --- Примеры реализаций --- */

.ax-cases {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ax-cases__item {
	padding: 24px;
	background-color: var(--ax-color-surface);
	border: 1px solid var(--ax-color-border);
	border-radius: var(--ax-radius-base);
	margin-bottom: 20px;
}

.ax-cases__object {
	font-size: 17px;
	letter-spacing: 0.02em;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ax-color-border);
}

.ax-cases__text {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 768px) {
	.ax-cases__text {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ax-cases__part p {
	margin: 0;
	font-size: 15px;
}

.ax-cases__part-title {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ax-color-accent);
	margin-bottom: 8px;
}

.ax-cases__photos {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

.ax-cases__photos img {
	width: 160px;
	height: 120px;
	object-fit: cover;
	border-radius: var(--ax-radius-base);
	border: 1px solid var(--ax-color-border);
}


/* --- Редакции программы (v8.2) --- */

/*
 * Цена должна быть видна до оплаты: это требование модерации
 * эквайринга, а не только удобство. Поэтому редакции вынесены
 * в самостоятельный блок, а не спрятаны в общий текст.
 */
.ax-editions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 768px) {
	.ax-editions {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
}

.ax-editions__item {
	padding: 26px 28px;
	background-color: var(--ax-color-surface);
	border: 1px solid var(--ax-color-border);
	border-top: 3px solid var(--ax-color-accent);
	border-radius: 0 0 var(--ax-radius-base) var(--ax-radius-base);
}

.ax-editions__name {
	font-size: 21px;
	letter-spacing: 0.03em;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ax-color-border);
}

/* Кегль как у основного текста: мелкий шрифт в таблице цен читается
   плохо, а именно её изучают внимательнее всего. */
.ax-editions__price {
	margin: 0 0 12px;
	font-size: 17px;
}

.ax-editions__limit,
.ax-editions__includes {
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--ax-color-text-muted);
}

/* --- Документ библиотеки (v8.2) --- */

.ax-doc__meta {
	max-width: 520px;
	margin-bottom: 28px;
}

.ax-doc__download {
	margin: 32px 0 0;
}

.ax-doc__size {
	margin-left: 10px;
	opacity: 0.75;
	font-size: 14px;
}

.ax-doc__note {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--ax-color-border);
	font-size: 13px;
	color: var(--ax-color-text-muted);
}

/* Вторичная кнопка: рядом с основной, без заливки. */
.ax-btn--ghost {
	background: none;
	border: 1px solid var(--ax-color-border);
	color: var(--ax-color-text);
}

.ax-btn--ghost:hover,
.ax-btn--ghost:focus-visible {
	border-color: var(--ax-color-accent);
	color: var(--ax-color-accent);
}

.ax-software__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

/* ==========================================================================
   10.1. ЗАВЕРШАЮЩИЙ БЛОК: ПОРЯДОК РАБОТЫ
   ==========================================================================
   Заменил вкладку «Заказ» с конфигуратором. Формы здесь нет намеренно:
   персональные данные на сайте не собираются (152-ФЗ), обращение идёт
   по телефону или почте.
   ========================================================================== */

.ax-next-steps {
	padding: 32px;
	background-color: var(--ax-color-surface);
	border: 1px solid var(--ax-color-border);
	border-top: 3px solid var(--ax-color-accent);
	border-radius: var(--ax-radius-base);
	scroll-margin-top: 96px; /* поправка на «липкую» шапку при переходе по якорю */
}

.ax-next-steps__title {
	font-size: clamp(19px, 2.2vw, 23px);
	letter-spacing: 0.03em;
	margin-bottom: 20px;
}

.ax-next-steps__list {
	margin: 0 0 28px;
	padding-left: 20px;
	max-width: var(--ax-column-max);
}

.ax-next-steps__item {
	margin-bottom: 10px;
	padding-left: 6px;
}

.ax-next-steps__contacts {
	padding-top: 24px;
	border-top: 1px solid var(--ax-color-border);
}

.ax-next-steps__contacts-lead {
	margin-bottom: 12px;
}

.ax-next-steps__contacts-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin: 0;
	padding: 0;
}

.ax-next-steps__contacts-list a {
	font-size: 18px;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-bottom: 1px solid var(--ax-color-accent);
	padding-bottom: 2px;
}

.ax-next-steps__contacts-list a:hover,
.ax-next-steps__contacts-list a:focus-visible {
	color: var(--ax-color-accent);
}

.ax-next-steps__disclaimer {
	margin: 24px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--ax-color-border);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ax-color-text-muted);
}


/* ==========================================================================
   10.2. ПОЛНОЭКРАННЫЙ ПРОСМОТР СНИМКОВ (v8.3)
   ==========================================================================
   Скриншоты интерфейса в галерее выводятся размером large (≈1024 px),
   и текст в таблицах при этом не читается. Полный экран открывает
   оригинал.
   ========================================================================== */

.ax-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 72px;
	background-color: rgba(39, 51, 65, 0.94);
}

.ax-lightbox[hidden] {
	display: none;
}

/* Фон страницы не прокручивается, пока открыт просмотр. */
body.ax-lightbox-open {
	overflow: hidden;
}

.ax-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	background-color: var(--ax-color-bg);
	border-radius: var(--ax-radius-base);
}

.ax-lightbox__close,
.ax-lightbox__nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid rgba(242, 239, 230, 0.35);
	border-radius: var(--ax-radius-base);
	color: var(--ax-color-bg);
	cursor: pointer;
	transition: border-color var(--ax-duration-fast) var(--ax-ease-engineering),
		color var(--ax-duration-fast) var(--ax-ease-engineering);
}

.ax-lightbox__close:hover,
.ax-lightbox__nav:hover,
.ax-lightbox__close:focus-visible,
.ax-lightbox__nav:focus-visible {
	border-color: var(--ax-color-accent);
	color: var(--ax-color-accent);
}

.ax-lightbox__close {
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	font-size: 28px;
	line-height: 1;
}

.ax-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 72px;
	font-size: 34px;
	line-height: 1;
}

.ax-lightbox__nav[hidden] {
	display: none;
}

.ax-lightbox__nav--prev {
	left: 16px;
}

.ax-lightbox__nav--next {
	right: 16px;
}

.ax-lightbox__counter {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	font-size: 14px;
	letter-spacing: 0.04em;
	color: rgba(242, 239, 230, 0.8);
}

/* На узких экранах кнопки перелистывания опускаются вниз, к счётчику. */
@media (max-width: 640px) {
	.ax-lightbox {
		padding: 56px 12px 72px;
	}

	.ax-lightbox__nav {
		top: auto;
		bottom: 12px;
		transform: none;
		width: 56px;
		height: 44px;
		font-size: 26px;
	}

	.ax-lightbox__nav--prev {
		left: 24px;
	}

	.ax-lightbox__nav--next {
		right: 24px;
	}
}

/* ==========================================================================
   11. АНИМАЦИЯ HERO-СХЕМЫ
   ==========================================================================
   Метафора: ось — производственная линия. По ней бежит импульс, поочерёдно
   «оживляя» узлы зон. Намеренно НЕ мигание: моргающий блок читается как
   аварийный индикатор, а бегущий импульс — как работающая линия.
   Всё отключается при prefers-reduced-motion (доступность).
   ========================================================================== */

/* --- Появление зон по очереди при загрузке --- */
.ax-hero__zone-group {
	opacity: 0;
	animation: ax-zone-in 0.7s var(--ax-ease-engineering) forwards;
	/* Задержка зависит от порядкового номера зоны (--ax-zone-i из PHP):
	   зоны проявляются слева направо, вслед за движением по оси. */
	animation-delay: calc(0.25s + var(--ax-zone-i) * 0.13s);
}

@keyframes ax-zone-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- Дыхание узлов на оси: медленная пульсация прозрачности --- */
.ax-hero__axis-node {
	animation: ax-node-breathe 3.2s ease-in-out infinite;
	animation-delay: calc(var(--ax-zone-i, 0) * 0.4s);
}

@keyframes ax-node-breathe {
	0%, 100% {
		opacity: 0.35;
		r: 4;
	}
	50% {
		opacity: 0.9;
		r: 5.5;
	}
}

/* --- Импульс, бегущий по оси (штриховая линия в движении) --- */
.ax-hero__axis {
	stroke-dasharray: 6 10;
	animation: ax-axis-flow 2.4s linear infinite;
}

@keyframes ax-axis-flow {
	to {
		stroke-dashoffset: -32;
	}
}

/* --- Соединительные линии: лёгкое проявление --- */
.ax-hero__connector {
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	animation: ax-connector-draw 0.6s var(--ax-ease-engineering) forwards;
	animation-delay: calc(0.35s + var(--ax-zone-i) * 0.13s);
}

@keyframes ax-connector-draw {
	to {
		stroke-dashoffset: 0;
	}
}

/* --- Наведение: блок мягко приподнимается --- */
.ax-hero__zone {
	transition: transform var(--ax-duration-base) var(--ax-ease-engineering);
	transform-box: fill-box;
	transform-origin: center;
}

.ax-hero__zone:hover,
.ax-hero__zone:focus-visible {
	transform: translateY(-3px);
}

/* --- Доступность: полный отказ от движения --- */
@media (prefers-reduced-motion: reduce) {
	.ax-hero__zone-group,
	.ax-hero__axis-node,
	.ax-hero__axis,
	.ax-hero__connector,
	.ax-hero__zone {
		animation: none;
		opacity: 1;
		stroke-dashoffset: 0;
		stroke-dasharray: none;
		transition: none;
	}
}

/* ==========================================================================
   12. ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКОВ
   ==========================================================================
   Построен на <details>/<summary> — работает без JavaScript, с клавиатуры
   и в скринридерах. Флаги — inline-SVG (не эмодзи: эмодзи-флаги в Windows
   отображаются некорректно или не отображаются вовсе).
   ========================================================================== */

.ax-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ax-lang {
	position: relative;
}

/* Убираем стандартный треугольник <summary> */
.ax-lang__toggle {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border: 1px solid var(--ax-color-border);
	border-radius: var(--ax-radius-base);
	background-color: var(--ax-color-surface);
	color: var(--ax-color-text);
	cursor: pointer;
	font-size: 14px;
	letter-spacing: 0.04em;
	user-select: none;
	transition: border-color var(--ax-duration-fast) var(--ax-ease-engineering);
}

.ax-lang__toggle::-webkit-details-marker,
.ax-lang__toggle::marker {
	display: none;
	content: "";
}

.ax-lang__toggle:hover,
.ax-lang__toggle:focus-visible {
	border-color: var(--ax-color-accent);
}

.ax-lang__globe {
	flex-shrink: 0;
}

.ax-lang__chevron {
	flex-shrink: 0;
	transition: transform var(--ax-duration-fast) var(--ax-ease-engineering);
}

.ax-lang[open] .ax-lang__chevron {
	transform: rotate(180deg);
}

.ax-lang__list {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 50;
	min-width: 190px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background-color: var(--ax-color-surface);
	border: 1px solid var(--ax-color-border);
	border-radius: var(--ax-radius-base);
	box-shadow: 0 6px 20px rgba(39, 51, 65, 0.12);
	animation: ax-lang-in 0.16s var(--ax-ease-engineering);
}

@keyframes ax-lang-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.ax-lang__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: var(--ax-radius-base);
	color: var(--ax-color-text);
	text-decoration: none;
	font-size: 15px;
	transition: background-color var(--ax-duration-fast) var(--ax-ease-engineering);
}

.ax-lang__item:hover,
.ax-lang__item:focus-visible {
	background-color: #DCA5301A;
}

.ax-lang__item.is-current {
	background-color: #DCA53026;
}

.ax-lang__flag {
	display: flex;
	flex-shrink: 0;
}

/* Тонкая обводка флага: белые полосы (РФ, Германия) иначе сливаются с фоном */
.ax-flag {
	display: block;
	border: 1px solid rgba(39, 51, 65, 0.18);
	border-radius: 2px;
}

@media (max-width: 767px) {
	.ax-lang__name {
		font-size: 14px;
	}
}

/* ==========================================================================
   13. РАЗДЕЛЫ КАТАЛОГА: СЕТКА, ФИЛЬТР, ПУСТОЕ СОСТОЯНИЕ
   ========================================================================== */

.ax-archive {
	padding-block: 56px 80px;
}

.ax-archive__head {
	margin-bottom: 28px;
}

.ax-archive__title {
	font-size: clamp(28px, 4vw, 40px);
	margin-bottom: 8px;
}

.ax-archive__intro {
	color: var(--ax-color-text-muted);
	max-width: 720px;
}

/* --- Фильтр по категориям --- */
.ax-archive__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 36px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--ax-color-border);
}

.ax-archive__filter-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid var(--ax-color-border);
	border-radius: var(--ax-radius-base);
	color: var(--ax-color-text);
	text-decoration: none;
	font-size: 15px;
	transition: border-color var(--ax-duration-fast) var(--ax-ease-engineering),
		background-color var(--ax-duration-fast) var(--ax-ease-engineering);
}

.ax-archive__filter-item:hover,
.ax-archive__filter-item:focus-visible {
	border-color: var(--ax-color-accent);
}

.ax-archive__filter-item.is-active {
	background-color: var(--ax-color-text);
	border-color: var(--ax-color-text);
	color: var(--ax-color-bg);
}

.ax-archive__filter-count {
	font-size: 12px;
	opacity: 0.6;
}

/* --- Сетка карточек --- */
.ax-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 600px) {
	.ax-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.ax-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- Карточка --- */
.ax-card {
	border: 1px solid var(--ax-color-border);
	border-radius: var(--ax-radius-base);
	background-color: var(--ax-color-surface);
	overflow: hidden;
	transition: transform var(--ax-duration-base) var(--ax-ease-engineering),
		border-color var(--ax-duration-base) var(--ax-ease-engineering);
}

.ax-card:hover,
.ax-card:focus-within {
	transform: translateY(-3px);
	border-color: var(--ax-color-accent);
}

.ax-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.ax-card__media {
	aspect-ratio: 4 / 3;
	background-color: var(--ax-color-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.ax-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ax-card__placeholder {
	color: var(--ax-color-border);
}

.ax-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 20px 20px;
}

.ax-card__title {
	font-size: 19px;
	line-height: 1.35;
	margin-bottom: 8px;
}

.ax-card__excerpt {
	font-size: 14px;
	color: var(--ax-color-text-muted);
	margin-bottom: 16px;
}

/* Мета прижата к низу — карточки выравниваются независимо от длины текста */
.ax-card__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--ax-color-border);
}

.ax-card__price {
	font-size: 17px;
	letter-spacing: 0.02em;
}

.ax-card__price--request {
	font-size: 15px;
	color: var(--ax-color-text-muted);
}

.ax-card__term {
	font-size: 13px;
	color: var(--ax-color-text-muted);
}

/* --- Пустой раздел --- */
.ax-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 72px 20px;
	color: var(--ax-color-text-muted);
}

.ax-empty__icon {
	color: var(--ax-color-border);
	margin-bottom: 20px;
}

.ax-empty__text {
	font-size: 19px;
	color: var(--ax-color-text);
	margin-bottom: 6px;
}

.ax-empty__hint {
	font-size: 15px;
	max-width: 460px;
}

/* --- Пагинация --- */
.pagination,
.ax-pagination {
	margin-top: 48px;
}

.pagination .nav-links,
.ax-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--ax-color-border);
	border-radius: var(--ax-radius-base);
	color: var(--ax-color-text);
	text-decoration: none;
	transition: border-color var(--ax-duration-fast) var(--ax-ease-engineering);
}

.pagination .page-numbers:hover {
	border-color: var(--ax-color-accent);
}

.pagination .page-numbers.current {
	background-color: var(--ax-color-text);
	border-color: var(--ax-color-text);
	color: var(--ax-color-bg);
}

/* ==========================================================================
   14. ОБЫЧНЫЕ СТРАНИЦЫ И 404
   ========================================================================== */

/*
 * Ширина = 780 px колонки текста + боковые отступы .ax-container
 * по 24 px. Так заголовок, текст и таблицы выровнены по одному левому
 * краю, а колонка занимает страницу целиком, без пустой полосы справа.
 */
.ax-page {
	padding-block: 56px 80px;
	max-width: 828px;
}

.ax-page__title {
	font-size: clamp(28px, 4vw, 40px);
	margin-bottom: 28px;
}

.ax-page__thumb {
	margin: 0 0 32px;
}

.ax-page__thumb img {
	width: 100%;
	height: auto;
	border-radius: var(--ax-radius-base);
}

/* Читаемая типографика длинных текстов (политика, условия, «о компании») */
.ax-prose h2 {
	font-size: 26px;
	margin-top: 40px;
}

.ax-prose h3 {
	font-size: 21px;
	margin-top: 32px;
}

.ax-prose p,
.ax-prose li {
	font-size: 17px;
}

.ax-prose ul,
.ax-prose ol {
	padding-left: 22px;
	margin-bottom: 20px;
}

.ax-prose li {
	margin-bottom: 8px;
}

.ax-prose a {
	color: var(--ax-color-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ax-prose a:hover {
	color: var(--ax-color-accent);
}

/*
 * Таблицы внутри длинных текстов: примеры расчёта возврата, реквизиты,
 * контакты. Базовое правило table задаёт только ширину и схлопывание
 * границ — здесь добавлены рамки и отбивка, иначе строки сливаются.
 */
.ax-prose table {
	margin-bottom: 24px;
	font-size: 16px;
	border: 1px solid var(--ax-color-border);
}

.ax-prose th,
.ax-prose td {
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--ax-color-border);
}

.ax-prose th {
	font-weight: 400;
	color: var(--ax-color-text-muted);
	background-color: var(--ax-color-surface);
}

.ax-prose tr:last-child td {
	border-bottom: 0;
}

/* Длинные тексты на узких экранах: таблица прокручивается, а не ломает вёрстку. */
@media (max-width: 640px) {
	.ax-prose table {
		display: block;
		overflow-x: auto;
	}
}

/* --- 404 --- */
.ax-error {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-block: 100px 120px;
}

.ax-error__code {
	font-size: clamp(72px, 14vw, 140px);
	line-height: 1;
	color: var(--ax-color-border);
	letter-spacing: 0.08em;
	margin-bottom: 16px;
}

.ax-error__title {
	font-size: clamp(24px, 3.5vw, 34px);
	margin-bottom: 12px;
}

.ax-error__text {
	color: var(--ax-color-text-muted);
	max-width: 460px;
	margin-bottom: 32px;
}

.ax-error__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}


/* ------------------------------------------------------------------
   Блок «Что дальше» — заменил форму заявки в конфигураторах (v7.1).
   Персональные данные на сайте не собираются, продажа идёт по договору.
   ------------------------------------------------------------------ */

.ax-bot-cta {
	margin-top: 2rem;
	padding: 1.5rem;
	background: var(--ax-color-bg-alt, #F2EFE6);
	border-left: 3px solid var(--ax-color-accent, #DCA530);
}

.ax-bot-cta__title {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
}

.ax-bot-cta__text {
	margin: 0 0 1rem;
	max-width: 660px; /* см. примечание к .ax-prose о единице ch */
}

.ax-bot-cta__contacts {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.ax-bot-cta__contacts a {
	font-size: 1.0625rem;
	text-decoration: none;
	border-bottom: 1px solid var(--ax-color-accent, #DCA530);
}


/* Оговорка о публичной оферте в подвале (v7.3). */
.ax-footer__notice {
	display: block;
	margin-top: 0.75rem;
	max-width: 900px; /* см. примечание к .ax-prose о единице ch */
	font-size: 0.8125rem;
	line-height: 1.5;
	opacity: 0.72;
}


/* ==========================================================================
   19. БИБЛИОТЕКА ТЕХНОЛОГА (v9.0)
   Оглавление раздела, поиск, строки материалов, карточка документа.
   Ширины в px: единица ch с узким начертанием GOST даёт колонку вдвое уже
   ожидаемой (см. примечание к .ax-prose).
   ========================================================================== */

/* --- Поиск по разделу --- */

.ax-library__search {
	margin-bottom: 32px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--ax-color-border);
}

.ax-library__search-label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	color: var(--ax-color-text-muted);
}

.ax-library__search-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 760px;
}

.ax-library__search-input {
	flex: 1 1 320px;
	min-width: 0;
	padding: 11px 14px;
	font-family: var(--ax-font-base);
	font-size: 16px; /* меньше 16px — iOS приближает страницу при фокусе */
	color: var(--ax-color-text);
	background-color: var(--ax-color-surface);
	border: 1px solid var(--ax-color-border);
	border-radius: var(--ax-radius-base);
}

.ax-library__search-input:focus-visible {
	outline: 2px solid var(--ax-color-accent);
	outline-offset: 1px;
}

.ax-library__search-btn {
	flex: 0 0 auto;
}

.ax-library__search-hint {
	margin: 10px 0 0;
	max-width: 760px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ax-color-text-muted);
}

/* --- Итог выдачи --- */

.ax-library__found {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 20px;
	font-size: 15px;
	color: var(--ax-color-text-muted);
}

.ax-library__reset {
	font-size: 14px;
	color: var(--ax-color-text);
	border-bottom: 1px solid var(--ax-color-accent);
	text-decoration: none;
}

/* --- Группа рубрики --- */

.ax-library__group {
	margin-bottom: 44px;
}

.ax-library__group-title {
	margin-bottom: 4px;
	font-size: clamp(20px, 2.4vw, 25px);
}

.ax-library__group-title a {
	color: var(--ax-color-text);
	text-decoration: none;
}

.ax-library__group-title a:hover,
.ax-library__group-title a:focus-visible {
	color: var(--ax-color-accent);
}

.ax-library__group-desc {
	margin: 0 0 18px;
	max-width: 720px;
	font-size: 14px;
	color: var(--ax-color-text-muted);
}

/* --- Строка материала --- */

.ax-library__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ax-color-border);
}

.ax-library__item {
	padding: 16px 0;
	border-bottom: 1px solid var(--ax-color-border);
}

.ax-library__item-link {
	display: inline-block;
	text-decoration: none;
	color: var(--ax-color-text);
}

.ax-library__item-title {
	font-size: 17px;
	line-height: 1.4;
	border-bottom: 1px solid transparent;
	transition: border-color var(--ax-duration-fast) var(--ax-ease-engineering),
		color var(--ax-duration-fast) var(--ax-ease-engineering);
}

.ax-library__item-link:hover .ax-library__item-title,
.ax-library__item-link:focus-visible .ax-library__item-title {
	color: var(--ax-color-accent);
	border-bottom-color: var(--ax-color-accent);
}

.ax-library__item-refs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 6px 0 0;
}

.ax-library__item-code {
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--ax-color-text-muted);
}

.ax-library__item-status {
	padding: 2px 8px;
	font-size: 12px;
	border-radius: var(--ax-radius-base);
	border: 1px solid var(--ax-color-border);
}

/* Отметка выводится только у недействующих документов, поэтому цвет
   предупреждающий: отсутствие такой отметки опаснее лишнего шума. */
.ax-library__item-status--warn {
	color: var(--ax-color-danger);
	border-color: var(--ax-color-danger);
}

.ax-library__item-desc {
	margin: 6px 0 0;
	max-width: 780px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ax-color-text-muted);
}

/* --- Карточка документа: дополнения v9.0 --- */

.ax-doc__full-title {
	margin-top: 8px;
	max-width: 780px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ax-color-text-muted);
}

.ax-doc__alert {
	margin: 0 0 24px;
	padding: 14px 18px;
	max-width: 780px;
	font-size: 15px;
	line-height: 1.55;
	border: 1px solid var(--ax-color-danger);
	border-left-width: 3px;
	border-radius: var(--ax-radius-base);
	background-color: var(--ax-color-surface);
}

.ax-doc__summary {
	font-size: 17px;
}

.ax-doc__source-note {
	margin-top: 10px;
	max-width: 780px;
	font-size: 13px;
	color: var(--ax-color-text-muted);
}

.ax-doc__related {
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid var(--ax-color-border);
}

.ax-doc__related-title {
	margin-bottom: 14px;
	font-size: 20px;
}

.ax-doc__app {
	margin-top: 32px;
}

.ax-doc__app a {
	font-size: 15px;
	color: var(--ax-color-text);
	text-decoration: none;
	border-bottom: 1px solid var(--ax-color-accent);
}

.ax-doc__app a:hover,
.ax-doc__app a:focus-visible {
	color: var(--ax-color-accent);
}

@media (max-width: 599px) {
	.ax-library__search-btn {
		flex: 1 1 100%;
	}
}


/* ==========================================================================
   20. МАТЕРИАЛ БИБЛИОТЕКИ: ДЛИННЫЙ ТЕКСТ (v9.1)
   Разборы приёмов идут на 5–9 тысяч знаков и содержат таблицы, правила
   врезками и схемы, набранные знаками.
   ========================================================================== */

/*
 * Сплошная колонка вместо двух.
 *
 * Базовый .ax-prose на широких экранах разбивает текст на две колонки —
 * это уместно для описания карточки в несколько абзацев. Для материала
 * на восемь тысяч знаков газетная вёрстка работает против читателя:
 * дочитав левую колонку до низа экрана, он возвращается наверх за правой,
 * и так на каждом экране.
 */
.ax-prose--article {
	max-width: var(--ax-column-max);
	column-count: 1;
}

@media (min-width: 1100px) {
	.ax-prose--article {
		max-width: 820px;
		column-count: 1;
	}
}

/* --- Врезка с правилом или формулой --- */

/*
 * В этих материалах цитата несёт не чужую речь, а условие приёма или
 * формулу: «угол выхода левой детали должен быть РАВЕН углу входа правой».
 * Кавычек и курсива здесь не нужно — нужна отбивка, которая остановит глаз.
 */
.ax-callout {
	margin: 24px 0;
	padding: 14px 20px;
	border-left: 3px solid var(--ax-color-accent);
	background-color: var(--ax-color-surface);
	font-size: 17px;
	line-height: 1.55;
}

.ax-callout > *:first-child {
	margin-top: 0;
}

.ax-callout > *:last-child {
	margin-bottom: 0;
}

/* --- Схема, набранная знаками --- */

/*
 * Пока проект приложения не передал чертежи, схема общего реза набрана
 * символами. Ей нужны моноширинный шрифт и запрет переноса: перенос
 * строки разрушает чертёж, и вместо схемы получается столбик мусора.
 * Прокрутка по горизонтали здесь честнее сжатия.
 */
.ax-figure-ascii {
	margin: 24px 0;
	padding: 18px 20px;
	overflow-x: auto;
	border: 1px solid var(--ax-color-border);
	border-radius: var(--ax-radius-base);
	background-color: var(--ax-color-surface);
}

.ax-figure-ascii code {
	display: block;
	font-family: 'DejaVu Sans Mono', 'Consolas', 'Courier New', monospace;
	font-size: 13px;
	line-height: 1.35;
	white-space: pre;
	letter-spacing: 0;
	color: var(--ax-color-text);
}

@media (max-width: 599px) {
	.ax-figure-ascii code {
		font-size: 11px;
	}
}

/* --- Подпись автора материала --- */

.ax-doc__byline {
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid var(--ax-color-border);
	font-size: 14px;
	color: var(--ax-color-text-muted);
}

/* --- Таблицы в материале --- */

.ax-prose--article table {
	width: 100%;
	border-collapse: collapse;
}

.ax-prose--article th {
	background-color: var(--ax-color-surface);
	text-align: left;
}

/* Узкие экраны: таблица прокручивается, а не ломает вёрстку страницы. */
@media (max-width: 767px) {
	.ax-prose--article table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

/* Две ссылки в подвале общего материала — раздел библиотеки общий (v9.2). */
.ax-doc__app {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}


/* ==========================================================================
   21. ЧЕРТЕЖИ В МАТЕРИАЛАХ (v9.3)
   Приходят от проекта приложения в SVG и встраиваются прямо в разметку
   страницы: так они переживают смену оформления и не требуют отдельной
   загрузки. Собственные размеры у корневого тега сняты при встраивании —
   пропорции держит viewBox, ширину задаёт колонка.
   ========================================================================== */

.ax-figure {
	margin: 28px 0;
}

.ax-figure__svg {
	display: block;
	width: 100%;
	height: auto;
}

.ax-figure__caption {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--ax-color-border);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ax-color-text-muted);
}

/*
 * На узком экране чертёж шириной 820 сжимается до ширины телефона, и подписи
 * внутри него становятся нечитаемыми. Прокрутка честнее: рисунок сохраняет
 * исходный размер, а страница не ломается.
 */
@media (max-width: 599px) {
	.ax-figure {
		overflow-x: auto;
	}

	.ax-figure__svg {
		width: 700px;
		max-width: none;
	}

	.ax-figure__caption {
		width: 700px;
	}
}


/* ==========================================================================
   22. ВТОРОЕ ИМЯ ГАРНИТУРЫ (v9.6)
   ========================================================================== */

/*
 * Та же гарнитура под своим настоящим именем.
 *
 * Внутри файла шрифта гарнитура названа «OpenGost Type B TT» — так её и
 * запрашивают чертежи, приходящие от проекта приложения. Тема объявляет её
 * выше под сокращённым псевдонимом «OpenGost Type B»; для правил темы это
 * равнозначно, но чужой файл о псевдониме не знает.
 *
 * Без этого объявления браузер молча берёт следующий шрифт из перечня
 * чертежа, и подписи остаются рублеными. Ошибки при этом не видно: рисунок
 * отрисован, текст читается, и разницу заметит только тот, кто знает, как
 * должно быть.
 *
 * Объявлением, а не перекрытием: так составитель чертежа сохраняет власть
 * над шрифтом внутри своего файла, включая запасные варианты.
 */
@font-face {
	font-family: 'OpenGost Type B TT';
	src: url('fonts/opengost-type-b-v2.woff2') format('woff2'),
		url('fonts/opengost-type-b-v2.woff') format('woff'),
		url('fonts/opengost-type-b-v2.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}


/* ==========================================================================
   23. ЧИТАЕМОСТЬ ДЛИННОГО ТЕКСТА (v9.8)
   ========================================================================== */

/*
 * Материал библиотеки выглядел узкой полосой посреди широкого экрана.
 * Первое побуждение — расширить колонку — было бы ошибкой, и вот почему.
 *
 * OpenGost type B почти вдвое уже обычных шрифтов: средняя ширина знака
 * 0,40 em против 0,50–0,55 у гротесков. При кегле 17px колонка шириной
 * 780px давала уже 115 знаков в строке при норме чтения 60–90. То есть
 * строка была не короткой, а слишком длинной, — а полосой она казалась
 * оттого, что буквы для такой ширины мелки.
 *
 * Расширение колонки довело бы строку до 140 знаков и сделало бы хуже:
 * на длинной строке глаз теряет начало следующей.
 *
 * Поэтому увеличен кегль, а колонка расширена умеренно:
 *
 *      было:  колонка 780px, кегль 17px  ->  115 знаков
 *      стало: колонка 900px, кегль 22px  ->  103 знака
 *
 * Плюс поднят предел контейнера, чтобы страница не жалась к середине на
 * широких мониторах.
 */

:root {
	--ax-container-max: 1480px;
	--ax-column-max: 900px;
}

.ax-prose--article {
	max-width: 900px;
}

@media (min-width: 1100px) {
	.ax-prose--article {
		max-width: 900px;
	}
}

.ax-prose--article p,
.ax-prose--article li {
	font-size: 22px;
	line-height: 1.62;
}

.ax-prose--article h2 {
	margin-top: 44px;
	font-size: 27px;
}

.ax-prose--article h3 {
	margin-top: 32px;
	font-size: 23px;
}

.ax-prose--article table {
	font-size: 19px;
}

.ax-callout {
	font-size: 21px;
}

/*
 * Чертежи и таблицы шире колонки текста.
 *
 * Чертёж рисуется под ширину 820 и в колонке 900 сжимался бы почти вдвое
 * против исходного размера. Освободившееся по бокам место отдаётся им:
 * подписи внутри рисунка становятся читаемыми, а страница перестаёт
 * выглядеть пустой по краям.
 */
@media (min-width: 1200px) {
	.ax-prose--article .ax-figure {
		width: 1100px;
		max-width: calc(100vw - 2 * var(--ax-gap-base));
	}

	.ax-prose--article .ax-figure__caption {
		max-width: 900px;
	}
}

/* Аннотация над текстом — крупнее основного текста, но не как заголовок. */
.ax-doc__summary p {
	font-size: 24px;
	line-height: 1.55;
}

@media (max-width: 767px) {
	.ax-prose--article p,
	.ax-prose--article li {
		font-size: 19px;
		line-height: 1.6;
	}

	.ax-doc__summary p {
		font-size: 20px;
	}

	.ax-prose--article h2 {
		font-size: 23px;
	}
}


/* ==========================================================================
   24. СПЛОШНАЯ КОЛОНКА ВЕЗДЕ (v9.9)
   ========================================================================== */

/*
 * Двухколоночная вёрстка отменена во всём тексте сайта, а не только в
 * материалах библиотеки.
 *
 * Обнаружено на аннотации к материалу: два первых абзаца потекли газетой,
 * левая колонка обрывалась на полуслове, продолжение оказывалось справа.
 * Причина — базовый .ax-prose с column-count: 2, а модификатор сплошной
 * колонки был поставлен только на тело материала.
 *
 * Проверка шаблонов показала, что тем же способом верстались ещё шесть
 * блоков: «Назначение» и «Конструкция» в карточке товара, «Назначение» и
 * «Как ведётся работа» в услуге, три блока в карточке программы и —
 * что хуже всего — содержимое обычных страниц. Через них выводятся
 * «О компании» и правовые документы: Политика обработки персональных
 * данных с нумерованными пунктами в две газетные колонки.
 *
 * Почему отменяется, а не чинится точечно. Колонки в вебе работают
 * только тогда, когда блок целиком помещается на экран: страница
 * прокручивается вертикально, и колонка, уходящая ниже края, заставляет
 * читателя спуститься до конца и вернуться наверх. Ни один из этих блоков
 * помещаемости не гарантирует, а длина текста в них задаётся владельцем
 * при заполнении — то есть предугадать её нельзя.
 */
.ax-prose {
	max-width: 900px;
	column-count: 1;
}

@media (min-width: 1100px) {
	.ax-prose {
		max-width: 900px;
		column-count: 1;
	}
}

/* Кегль, подобранный по ширине знака гостовского шрифта (см. раздел 23),
   распространяется на весь текст, а не только на материалы библиотеки. */
.ax-prose p,
.ax-prose li {
	font-size: 21px;
	line-height: 1.6;
}

.ax-prose h2 {
	font-size: 26px;
}

.ax-prose h3 {
	font-size: 22px;
}

/* Примечание к стоимости остаётся мелким: это оговорка, а не текст. */
.ax-block__note.ax-prose p,
.ax-block__note.ax-prose li {
	font-size: 17px;
	line-height: 1.55;
}

@media (max-width: 767px) {
	.ax-prose p,
	.ax-prose li {
		font-size: 18px;
	}

	.ax-prose h2 {
		font-size: 22px;
	}
}


/*
 * Приоритеты. Правила раздела 24 идут ниже разделов 22–23 и при равной
 * силе перекрывали бы их: аннотация потеряла бы свой крупный кегль, а
 * материал библиотеки — свой. Ниже те же объявления с силой на один
 * класс выше.
 */
.ax-prose.ax-prose--article p,
.ax-prose.ax-prose--article li {
	font-size: 22px;
	line-height: 1.62;
}

.ax-prose.ax-doc__summary p {
	font-size: 24px;
	line-height: 1.55;
}

@media (max-width: 767px) {
	.ax-prose.ax-prose--article p,
	.ax-prose.ax-prose--article li {
		font-size: 19px;
	}

	.ax-prose.ax-doc__summary p {
		font-size: 20px;
	}
}

/* ==========================================================================
   Хлебные крошки — путь к странице. Появились в 10.2 вместе с inc/seo-meta.php.

   Разметку строит ax_the_breadcrumbs(); она сама решает, показываться ли:
   меньше двух звеньев — не путь, а надпись.
   ========================================================================== */

.ax-breadcrumbs {
	/* Размеры в px, а не в ch: у OpenGost Type B TT знак «ноль» узкий,
	   и ширины в ch выходят заметно меньше задуманных (реестр ошибок 5.2). */
	margin: 0 auto;
	padding: 12px 16px 0;
	max-width: 1200px;
	font-size: 14px;
	line-height: 1.4;
}

.ax-breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
	/* overflow здесь НЕ ставится ни в каком виде: он у любого предка отменяет
	   position: sticky, и шапка перестаёт липнуть беззвучно (реестр 5.3).
	   Перенос строк делает flex-wrap, и этого довольно. */
}

.ax-breadcrumbs li {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

/* Разделитель рисуется знаком, а не рамкой: рамка не переносится вместе со
   звеном и остаётся висеть в конце строки. */
.ax-breadcrumbs li + li::before {
	content: "/";
	color: var(--ax-color-text, #273341);
	opacity: 0.45;
}

.ax-breadcrumbs a {
	color: var(--ax-color-text, #273341);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
}

.ax-breadcrumbs a:hover,
.ax-breadcrumbs a:focus-visible {
	border-bottom-color: var(--ax-color-accent, #DCA530);
}

/* Текущая страница. Полужирного начертания у гарнитуры НЕТ — выделяем
   разрядкой, а не font-weight: подстановка чужого полужирного меняет строй. */
.ax-breadcrumbs [aria-current="page"] {
	letter-spacing: 0.05em;
	opacity: 0.75;
}

@media (max-width: 600px) {
	.ax-breadcrumbs {
		padding: 10px 12px 0;
		font-size: 13px;
	}

	/* На узком поле путь длинный, и первым лишним становится «Главная»:
	   на неё ведёт сам знак марки в шапке.

	   ВНИМАНИЕ. Это единственное display: none во всём блоке. Правило
	   display: none, поставленное НИЖЕ display: block при равной силе,
	   отменяло верхнее уже дважды — в теме и в шаблоне бокового блока
	   (реестр ошибок 5.1). Ставя сюда что-либо ещё, проверьте порядок
	   ВНУТРИ этого @media, а не только снаружи. */
	.ax-breadcrumbs li:first-child {
		display: none;
	}

	.ax-breadcrumbs li:nth-child(2)::before {
		content: none;
	}
}