/* DEV-превью новой шапки (макет Figma 189:2666). Грузится только при куке DEV=Y.
   Префикс zh- исключает пересечения с классами Aspro. */

:root {
	/* Цвет и ховер берём из переменных темы Aspro (их выставляет модуль на <html>,
	   см. lib/traits/css.php): ховер = базовый цвет, осветлённый на 6% по HSL.
	   Так кнопки следуют за цветом темы, если его поменяют в админке.
	   Фолбэки — текущие значения темы (нужны в превью, где переменных нет). */
	--zh-green: var(--theme-base-color, #008000);
	/* Переход как у кнопок темы (.btn): быстрый фон, 0.1s ease.
	   Отдельной ховер-анимации у Aspro нет — ни бликов, ни transform. */
	--zh-btn-transition: background-color 0.1s ease;
	--zh-green-hover: hsl(
		var(--theme-base-color-hue, 120),
		var(--theme-base-color-saturation, 100%),
		calc(var(--theme-base-color-lightness, 25%) + var(--theme-lightness-hover-diff, 6%))
	);
	--zh-dark: #282d36;
	--zh-border: #e5e5e5;
	--zh-gray: #f4f4f4;
	--zh-font: 'Open Sans', Arial, Helvetica, sans-serif;
	--zh-shadow: 0 20px 50px 0 rgba(40, 45, 54, 0.25);
	--zh-height: 120px;

	/* слои: подложка < шапка/футер < выпадашки < поиск < подложка модалки < модалка */
	--zh-z-backdrop: 980;
	--zh-z-header: 990;
	--zh-z-dropdown: 991;
	--zh-z-search: 992;
	--zh-z-modal: 995;

	/* блюр-подложка (общая для поиска, выпадашек и будущих модалок) */
	--zh-backdrop-bg: rgba(40, 45, 54, 0.2);
	--zh-backdrop-blur: 6px;
}

/* ---- Блюр-подложка: один общий элемент на страницу ----
   Затемняет и размывает контент под шапкой. Переиспользуется любым блоком,
   которому нужен «модальный» фон: поиск, выпадашки, модальные окна.
   API (script.js): zhBackdrop.show('ключ', onClose) / zhBackdrop.hide('ключ').
   Считает потребителей по ключам, поэтому несколько блоков не гасят её друг у друга;
   клик по подложке закрывает всех активных потребителей. */
.zh-backdrop {
	position: fixed;
	inset: 0;
	z-index: var(--zh-z-backdrop);
	background: var(--zh-backdrop-bg);
	-webkit-backdrop-filter: blur(var(--zh-backdrop-blur));
	backdrop-filter: blur(var(--zh-backdrop-blur));
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0.2s;
}
.zh-backdrop--visible {
	opacity: 1;
	visibility: visible;
}
/* Режим «над шапкой» (zhBackdrop.show(key, onClose, {top: true})).
   Обычно подложка лежит НИЖЕ шапки — так поиск и выпадашки остаются чёткими,
   а размывается только контент страницы. Модалке же нужно перекрыть всё,
   включая шапку и нижний таб-бар. */
.zh-backdrop--top {
	z-index: calc(var(--zh-z-modal) - 1);
}
@media (prefers-reduced-motion: reduce) {
	.zh-backdrop {
		transition: none;
	}
}

/* ---- скрытие легаси-футера Aspro (все вьюпорты: новый футер адаптивен) ---- */
.zh-dev #footer {
	display: none !important;
}

/* ---- скрытие легаси-шапки Aspro (только десктоп; мобильная остаётся до готовности) ---- */
@media (min-width: 992px) {
	.zh-dev div.title-v1[data-ajax-block="HEADER"],
	.zh-dev #headerfixed {
		display: none !important;
	}
	/* легаси фикс-шапка даёт body 122px отступа, новая — ровно 120px */
	.zh-dev body.header_padding-122,
	.zh-dev body.header_padding-154 {
		padding-top: var(--zh-height) !important;
	}
}

/* Обёртки вокруг кнопок «Запись/Записаться онлайн» — точная разметка живой
   шапки (.line-block__item[data-ajax-load-block] > .header-button), на неё
   завязан скрипт Calltouch, перехватывающий клик раньше jqm (см. header.php/
   footer.php). display:contents убирает обёртки из потока разметки (в т.ч.
   из flex/grid родителя — например, space-between нижнего таб-бара), сами
   элементы остаются в DOM и продолжают получать клики/всплытие событий.
   Селектор ограничен нашими контейнерами: те же классы используются в скрытой
   легаси-разметке для другого, трогать её display не нужно. */
.zh-header .line-block__item,
.zh-header .header-button,
.zh-mmenu .line-block__item,
.zh-mmenu .header-button,
.zh-bottombar .line-block__item,
.zh-bottombar .header-button,
.zf .line-block__item,
.zf .header-button {
	display: contents;
}

/* ---- каркас ---- */
.zh-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--zh-z-header);
	display: flex;
	align-items: stretch;
	height: var(--zh-height);
	background: #fff;
	border-bottom: 1px solid var(--zh-border);
	font-family: var(--zh-font);
	color: var(--zh-dark);
	box-sizing: border-box;
}
.zh-header *,
.zh-header *:before,
.zh-header *:after {
	box-sizing: border-box;
}
/* легаси-тема и браузерные дефолты иногда навешивают li свой margin —
   обнуляем во всех наших контейнерах (шапка десктоп/мобайл, футер) */
.zh-header ul li,
.zh-mheader ul li,
.zh-mmenu ul li,
.zh-bottombar ul li,
.zf ul li {
	margin: 0;
}
@media (max-width: 991px) {
	.zh-header { display: none; }
}

/* ---- логотип ---- */
.zh-header__logo {
	display: flex;
	align-items: center;
	padding: 0 28px;
	flex-shrink: 0;
	background: #fff;
}
.zh-header__logo img {
	display: block;
	/* aspect-ratio, а не просто width:auto — так браузер резервирует место под
	   логотип по пропорциям файла (2955×1332 → 160/72) сразу при разборе HTML,
	   не дожидаясь загрузки картинки и независимо от object-fit/атрибутов */
	width: auto;
	aspect-ratio: 160 / 72;
	height: 72px;
	max-width: 160px;
	object-fit: contain;
}

/* ---- правая колонка ---- */
.zh-header__main {
	display: flex;
	flex-direction: column;
	flex: 1 0 0;
	min-width: 1px;
	padding-right: 32px;
}

/* ---- верхняя строка (48px) ---- */
.zh-header__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 48px;
	flex-shrink: 0;
	border-bottom: 1px solid var(--zh-border);
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: -0.13px;
	font-feature-settings: "case" 1, "lnum" 1, "pnum" 1;
}
.zh-header__top-left,
.zh-header__top-right {
	display: flex;
	align-items: center;
	gap: 16px;
}
.zh-header__info {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}
.zh-icon-16 {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.zh-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--zh-dark);
	text-decoration: none;
	white-space: nowrap;
}
.zh-header__phone:hover,
.zh-header__phone:focus {
	color: var(--zh-green);
	text-decoration: none;
}
.zh-header__callback {
	color: var(--zh-green);
	white-space: nowrap;
	cursor: pointer;
	border-bottom: 1px solid rgba(0, 128, 0, 0.5);
	padding-bottom: 1px;
	transition: border-color 0.2s;
}
.zh-header__callback:hover {
	border-bottom-color: transparent;
}
.zh-header__social {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.zh-header__social-link {
	display: inline-flex;
	width: 24px;
	height: 24px;
	transition: opacity 0.2s;
}
.zh-header__social-link:hover {
	opacity: 0.75;
}
.zh-header__social-link img {
	width: 24px;
	height: 24px;
	display: block;
}

/* ---- строка навигации (72px) ---- */
.zh-header__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex: 1 0 0;
	min-height: 1px;
	padding: 12px 0;
}

/* меню */
.zh-menu__list {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.zh-menu__item {
	/* static: мега-панель позиционируется от шапки (.zh-header), а не от пункта,
	   поэтому раскрывается во всю ширину */
	position: static;
	list-style: none;
	margin: 0;
}
.zh-menu__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.48px;
	color: var(--zh-dark);
	text-decoration: none;
	white-space: nowrap;
	font-feature-settings: "lnum" 1, "pnum" 1;
	padding: 8px 0;
	transition: color 0.2s;
}
.zh-menu__item:hover > .zh-menu__link,
.zh-menu__item.is-open > .zh-menu__link,
.zh-menu__item--active > .zh-menu__link {
	color: var(--zh-green);
	text-decoration: none;
}
.zh-menu__arrow {
	flex-shrink: 0;
	transition: transform 0.2s;
}
.zh-menu__item.is-open > .zh-menu__link .zh-menu__arrow {
	transform: rotate(180deg);
}

/* ---- «Ещё»: пункты, не поместившиеся по ширине строки меню (script.js) ----
   Аналог header-menu__item--more-items легаси-темы, но с восстановлением: при
   расширении окна пункты возвращаются в строку. В отличие от обычных пунктов —
   свой position:relative (общее правило .zh-menu__item{position:static} рассчитано
   на мега-панели, растягивающиеся от всей шапки; этой выпадашке, наоборот, нужно
   висеть узкой карточкой под самим триггером). */
.zh-menu__item--more {
	position: relative;
}
.zh-menu__more-icon {
	display: block;
	color: var(--zh-dark);
	transition: color 0.2s;
}
.zh-menu__item--more:hover .zh-menu__more-icon,
.zh-menu__item--more.is-open .zh-menu__more-icon {
	color: var(--zh-green);
}
.zh-menu__more-dropdown {
	position: absolute;
	top: calc(100% + 14px);
	right: 0;
	z-index: var(--zh-z-dropdown);
	min-width: 220px;
	padding: 8px;
	background: #fff;
	border-radius: 5px;
	box-shadow: var(--zh-shadow);
	clip-path: inset(0 -100px -100px -100px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.zh-menu__item--more.is-open > .zh-menu__more-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.zh-menu__more-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* перенесённые сюда пункты в основной строке были nowrap-строкой одного уровня —
   здесь они в столбец, тексту нужно разрешить перенос */
.zh-menu__more-list .zh-menu__link {
	padding: 10px 12px;
	white-space: normal;
	border-radius: 5px;
}
.zh-menu__more-list .zh-menu__link:hover {
	background: var(--zh-gray);
}

/* ---- мега-выпадашка во всю ширину шапки (макеты menu / menu-2 / menu-3) ----
   Раскрывается по :hover пункта; позиционируется от шапки (пункты — position: static),
   поэтому занимает всю ширину и садится ровно под шапку в любом её состоянии.
   Контент страницы под ней размывается общей подложкой (.zh-backdrop). */
.zh-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: var(--zh-z-dropdown);
	display: flex;
	/* если пунктов слишком много — не растягиваем панель за пределы viewport,
	   а даём скроллиться внутренним колонкам (см. min-height:0/overflow-y:auto
	   у .zh-mega__cats, .zh-mega__panel-content, .zh-mega__main) */
	max-height: 603px;
	background: #fff;
	border-top: 1px solid var(--zh-border);
	box-shadow: var(--zh-shadow);
	/* Тень отбрасывается только вниз: у --zh-shadow блюр 50px, поэтому она
	   расходилась и вверх, наползая на шапку. clip-path режет всё выше верхней
	   грани панели (отрицательные значения по бокам и снизу тень не трогают). */
	clip-path: inset(0 -100px -100px -100px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
/* Раскрытие ставит JS (класс is-open), а не :hover: между пунктом и панелью
   есть промежуток (нижний паддинг строки навигации), на котором :hover слетал
   и панель закрывалась раньше, чем курсор до неё доходил. JS держит её открытой
   с небольшой задержкой — курсор успевает пройти. */
.zh-menu__item--parent.is-open > .zh-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* общий заголовок раздела и ссылки */
.zh-mega__title {
	margin-bottom: 24px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.72px;
	color: var(--zh-dark);
}
.zh-mega__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.zh-mega__list li {
	list-style: none;
	margin-bottom: 4px;
}
.zh-mega__list-cols {
	display: flex;
	gap: 0 32px;
}
.zh-mega__list-cols .zh-mega__list {
	flex: 1 0 0;
	min-width: 1px;
}
.zh-mega__link {
	display: block;
	padding: 8px 0;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: -0.48px;
	color: var(--zh-dark);
	text-decoration: none;
	transition: color 0.15s;
}
.zh-mega__link:hover {
	color: var(--zh-green);
	text-decoration: none;
}

/* --- A: категории + подпункты + фото (макет menu.png) --- */
.zh-mega--cats {
	min-height: 480px;
}
.zh-mega__cats {
	width: 340px;
	flex-shrink: 0;
	min-height: 0;
	overflow-y: auto;
	padding: 16px 0;
	background: #fafafa;
	border-right: 1px solid var(--zh-border);
}
.zh-mega__cats-title {
	padding: 8px 24px 16px;
	font-size: 14px;
	line-height: 1.3;
	color: #999;
}
.zh-mega__cats-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.zh-mega__cats-list li {
	margin: 0;
	list-style: none;
}
.zh-mega__cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 12px 24px;
	border-left: 4px solid transparent;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: -0.48px;
	color: var(--zh-dark);
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s;
}
/* активная категория — белая с зелёной полосой слева */
.zh-mega__cat.is-active {
	background: #fff;
	border-left-color: var(--zh-green);
}
.zh-mega__cat:hover {
	text-decoration: none;
	color: var(--zh-dark);
}
.zh-mega__cat svg {
	flex-shrink: 0;
	color: #999;
}
.zh-mega__panel {
	display: none;
	flex: 1 0 0;
	min-width: 1px;
	min-height: 0;
	justify-content: space-between;
}
.zh-mega__panel.is-active {
	display: flex;
}
.zh-mega__panel-content {
	flex: 1 0 0;
	min-width: 1px;
	min-height: 0;
	overflow-y: auto;
	padding: 32px 48px;
	max-width: 1200px;
}
.zh-mega__media {
	width: 400px;
	flex-shrink: 0;
	overflow: hidden;
}
.zh-mega__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- B/C: сетка + промо (макеты menu-2 / menu-3) --- */
.zh-mega--grid {
	min-height: 360px;
}
.zh-mega__main {
	flex: 1 0 0;
	min-width: 1px;
	min-height: 0;
	overflow-y: auto;
	padding: 32px;
}
/* два независимых потока-колонки (а не CSS-грид с общими границами строк —
   там длинный, переносящийся на несколько строк пункт в одной колонке тянул
   за собой высоту всей строки грида и в короткой колонке напротив него
   появлялось пустое место) */
.zh-mega__grid {
	display: flex;
	gap: 0 32px;
	max-width: 800px;
}
.zh-mega__grid-col {
	flex: 1 0 0;
	min-width: 1px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.zh-mega__grid-col li {
	list-style: none;
}
.zh-mega__grid--plain .zh-mega__grid-col {
	gap: 4px;
}

/* плашка с иконкой специальности (B) */
.zh-mega__tile {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}
.zh-mega__tile:hover {
	text-decoration: none;
}
.zh-mega__tile-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	background: #fff;
	border: 1px solid var(--zh-border);
	border-radius: 8px;
	color: var(--zh-green);
}
.zh-mega__tile-icon img,
.zh-mega__tile-icon svg {
	width: 24px;
	height: 24px;
	object-fit: contain;
}
.zh-mega__tile-title {
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: -0.48px;
	color: var(--zh-dark);
	transition: color 0.15s;
}
.zh-mega__tile:hover .zh-mega__tile-title {
	color: var(--zh-green);
}

/* ---- промо-акции справа (include/header/menu_promo.php) ----
   Размеры сняты с макета menu-2: фото 180px по левому краю, бейдж 32px,
   точки 30x4. Акций может быть несколько — листаются точками (script.js). */
.zh-mega__promo {
	width: 400px;
	flex-shrink: 0;
	padding: 32px;
	border-left: 1px solid var(--zh-border);
}
.zh-promo-slider {
	position: relative;
	/* длительность автолистания = ход заливки активной точки. Держать в паре
	   с DURATION в script.js (reduced-motion листает по таймеру на том же числе). */
	--zh-promo-duration: 5s;
	/* сколько слайд уже "прожил" на момент открытия — отрицательный сдвиг анимации
	   заливки, чтобы при возврате на пункт меню полоска продолжала с прежней
	   позиции, а не прыгала на 0% (значение ставит script.js) */
	--zh-promo-elapsed: 0ms;
}
.zh-promo {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	text-decoration: none;
}
.zh-promo.is-active {
	display: flex;
}
.zh-promo:hover {
	text-decoration: none;
}
.zh-promo__image {
	display: block;
	width: 180px;
	height: 180px;
	margin-bottom: 44px;   /* + gap 24 = 68px до бейджа (по макету) */
	background: var(--zh-gray);
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}
.zh-promo__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.zh-promo__badge {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 14px;
	background: var(--zh-green);
	border-radius: 5px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}
.zh-promo__title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.6px;
	color: var(--zh-dark);
	transition: color 0.15s;
}
.zh-promo:hover .zh-promo__title {
	color: var(--zh-green);
}
/* точки-переключатели */
.zh-promo-slider__dots {
	display: flex;
	gap: 4px;
	margin-top: 32px;
}
.zh-promo-slider__dot {
	position: relative;
	overflow: hidden;
	width: 30px;
	height: 4px;
	padding: 0;
	background: var(--zh-border);
	border: none;
	border-radius: 2px;
	cursor: pointer;
	transition: background 0.2s;
}
.zh-promo-slider__dot:hover {
	background: #ccc;
}
/* Активная точка: зелёная заливка растёт слева направо за время автолистания —
   видно, через сколько переключится слайд. Само переключение слайда — на JS-
   таймере (script.js), эта анимация только визуально его дублирует и
   перезапускается вместе с ним. Анимация вообще не назначается, пока пункт
   меню с этим промо не открыт (класс is-promo-open ставит/снимает script.js
   при открытии/закрытии пункта) — иначе несколько копий одного и того же
   промо (по одной в каждой подходящей мега-панели) крутились бы постоянно и
   вразнобой, даже пока их панель скрыта. */
.zh-promo-slider__dot::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: var(--zh-green);
	border-radius: inherit;
}
.zh-promo-slider.is-promo-open .zh-promo-slider__dot.is-active::after {
	animation: zh-promo-fill var(--zh-promo-duration, 5s) linear forwards;
	animation-delay: var(--zh-promo-elapsed, 0ms);
}
@keyframes zh-promo-fill {
	from { width: 0; }
	to { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	/* без анимации: активная точка залита целиком, листание — по таймеру (script.js) */
	.zh-promo-slider__dot.is-active::after {
		animation: none;
		width: 100%;
	}
}

/* кнопки справа */
.zh-header__btns {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.zh-header__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--zh-gray);
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background 0.2s;
}
.zh-header__icon-btn:hover {
	background: #e9e9e9;
}
.zh-header__icon-btn img {
	width: 24px;
	height: 24px;
	display: block;
}

/* Иконка «версии для слабовидящих» (шапка, моб.-меню, футер): обычная (eyed-hidden,
   очки) ↔ активная (not-eyed-hidden, очки с галочкой). Переключается по классу
   body.eyed — его вешает штатный тумблер темы (дёргаем через proxyEyed). Тема
   объявляет эти правила глобально; дублируем адресно, чтобы DEV-блоки не зависели
   от того, подключён ли стиль компонента eyed на конкретной странице. */
body:not(.eyed) .zh-header__icon-btn .not-eyed-hidden,
body:not(.eyed) .zh-mmenu__eyed .not-eyed-hidden,
body:not(.eyed) .zf__eyed .not-eyed-hidden {
	display: none;
}
body.eyed .zh-header__icon-btn .eyed-hidden,
body.eyed .zh-mmenu__eyed .eyed-hidden,
body.eyed .zf__eyed .eyed-hidden {
	display: none;
}
.zh-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 20px 12px;
	background: var(--zh-green);
	border-radius: 5px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.48px;
	color: #fff;
	white-space: nowrap;
	cursor: pointer;
	transition: var(--zh-btn-transition);
	font-feature-settings: "lnum" 1, "pnum" 1;
}
.zh-header__cta:hover {
	background: var(--zh-green-hover);
	color: #fff;
}

/* ---- компактное фикс-состояние при скролле (72px) ---- */
.zh-header,
.zh-header__logo,
.zh-header__logo img,
.zh-header__nav {
	transition: height 0.2s ease, padding 0.2s ease;
}
.zh-header--compact {
	height: 72px;
}
.zh-header--compact .zh-header__top {
	display: none;
}
.zh-header--compact .zh-header__logo {
	padding: 0 24px;
}
.zh-header--compact .zh-header__logo img {
	width: auto;
	height: 48px;
}
.zh-header--compact .zh-header__main {
	padding-right: 16px;
}
.zh-header--compact .zh-header__nav {
	padding: 12px 0 12px 16px;
}

/* ---- кнопка контактов + выпадашка (только в компактном состоянии) ---- */
.zh-contacts {
	position: relative;
	display: none;
}
.zh-header--compact .zh-contacts {
	display: block;
}
.zh-contacts__toggle {
	background: #fff;
	border: 1px solid var(--zh-border);
}
.zh-contacts__toggle:hover,
.zh-contacts--open .zh-contacts__toggle {
	background: var(--zh-gray);
}
.zh-contacts__dropdown {
	position: absolute;
	top: calc(100% + 14px);
	right: 0;
	z-index: var(--zh-z-dropdown);
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 320px;
	padding: 16px;
	background: #fff;
	border-radius: 5px;
	box-shadow: var(--zh-shadow);
	/* та же история, что у мега-панели: тень не должна лезть вверх на шапку */
	clip-path: inset(0 -100px -100px -100px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.zh-contacts--open .zh-contacts__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.zh-contacts__phone {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.54px;
	color: var(--zh-dark);
	text-decoration: none;
}
.zh-contacts__phone:hover {
	color: var(--zh-green);
	text-decoration: none;
}
.zh-contacts__phone-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	background: var(--zh-green);
	border-radius: 50%;
}
.zh-contacts__phone-icon img {
	width: 20px;
	height: 20px;
	filter: brightness(0) invert(1);
}
.zh-contacts__socials-block {
	display: flex;
	flex-flow: column;
	gap: 8px;
}
.zh-contacts__socials {
	display: flex;
	gap: 8px;
}
.zh-contacts__social {
	flex: 1 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	border: 1px solid var(--zh-border);
	border-radius: 5px;
	transition: border-color 0.15s;
}
.zh-contacts__social:hover {
	border-color: var(--zh-green);
}
.zh-contacts__social img {
	width: 24px;
	height: 24px;
}
.zh-contacts__requisites {
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 14px;
	letter-spacing: -0.42px;
	color: var(--zh-dark);
}
.zh-contacts__requisites .zh-header__info {
	align-items: flex-start;
	white-space: normal;
}
.zh-contacts__requisites .zh-icon-16 {
	margin-top: 2px;
}
.zh-contacts__email {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--zh-dark);
	text-decoration: none;
}
.zh-contacts__email:hover {
	color: var(--zh-green);
	text-decoration: none;
}
.zh-contacts__btns {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.zh-contacts__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	border: 1px solid var(--zh-border);
	border-radius: 5px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.48px;
	color: var(--zh-dark);
	text-decoration: none;
	cursor: pointer;
	transition: var(--zh-btn-transition), border-color 0.15s, color 0.15s;
}
.zh-contacts__btn:hover {
	border-color: var(--zh-green);
	color: var(--zh-dark);
	text-decoration: none;
}
.zh-contacts__btn img {
	width: 24px;
	height: 24px;
}
.zh-contacts__btn--callback {
	padding: 11px 20px 12px;
	border-color: var(--zh-green);
	color: var(--zh-green);
}
.zh-contacts__btn--callback:hover {
	background: var(--zh-green-hover);
	border-color: var(--zh-green-hover);
	color: #fff;
}
.zh-contacts__btn--book {
	padding: 11px 20px 12px;
	background: var(--zh-green);
	border-color: var(--zh-green);
	color: #fff;
}
.zh-contacts__btn--book:hover {
	background: var(--zh-green-hover);
	color: #fff;
}

/* ---- выпадашка личного кабинета (для авторизованных) ----
   Макета в Figma нет: оформление и поведение повторяют контактную выпадашку.
   Меню — тип «cabinet», тот же источник, что у легаси-шапки. */
.zh-cabinet {
	position: relative;
}
.zh-cabinet__dropdown {
	position: absolute;
	top: calc(100% + 14px);
	right: 0;
	z-index: var(--zh-z-dropdown);
	width: 260px;
	padding: 8px 0;
	background: #fff;
	border-radius: 5px;
	box-shadow: var(--zh-shadow);
	/* как у остальных выпадашек — тень не лезет вверх на шапку */
	clip-path: inset(0 -100px -100px -100px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.zh-cabinet--open .zh-cabinet__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.zh-cabinet--open .zh-cabinet__toggle {
	background: #e9e9e9;
}
.zh-cabinet__head {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 16px 12px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--zh-border);
}
.zh-cabinet__name {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.48px;
	color: var(--zh-dark);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.zh-cabinet__hint {
	font-size: 13px;
	line-height: 1.3;
	color: #999;
}
.zh-cabinet__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.zh-cabinet__item {
	list-style: none;
}
/* «Выйти» — действие, а не раздел: отделяем чертой */
.zh-cabinet__item--logout {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--zh-border);
}
.zh-cabinet__link {
	display: block;
	padding: 10px 16px;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: -0.14px;
	color: var(--zh-dark);
	text-decoration: none;
	transition: color 0.15s, background 0.15s;
}
.zh-cabinet__link:hover,
.zh-cabinet__link.is-active {
	color: var(--zh-green);
	background: var(--zh-gray);
	text-decoration: none;
}
.zh-cabinet__item--logout .zh-cabinet__link {
	color: #999;
}
.zh-cabinet__item--logout .zh-cabinet__link:hover {
	color: #c62828;
	background: #fdf3f3;
}

/* ---- панель поиска (десктоп: 150px; мобайл: 80px) ---- */
/* Панель перекрывает шапку целиком (inset: 0), а не выпадает под ней —
   высота подстраивается под текущее состояние шапки (120px / компакт 72px). */
.zh-search {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--zh-z-search);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	/* не inset:0 (не пин по низу) — панели нужно расти по высоте, когда под
	   полем разворачиваются результаты (см. .zh-search__results ниже);
	   min-height держит исходные 120px шапки, пока результатов нет */
	min-height: 100%;
	/* фиксированный отступ, а не align-items:center: высота панели растёт от
	   результатов, и с центрированием поле "прыгало" бы вверх в момент, когда
	   контент перерастает эти 120px. 36px = (120 − высота поля 48) / 2 —
	   тот же визуальный отступ, что раньше давало центрирование */
	padding-top: 36px;
	padding-bottom: 32px;
	background: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s, visibility 0.15s;
}
.zh-search--open {
	opacity: 1;
	visibility: visible;
}
.zh-search__box {
	position: relative;
	width: 800px;
	max-width: calc(100% - 120px);
}
.zh-search__form {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0;
}

/* ---- живые подсказки поиска ----
   Разметку (.searche-result*) отдаёт компонент Aspro search.title (наш экземпляр
   с INPUT_ID=zh-title-search, см. header.php), script.js кладёт её сюда. Как на
   легаси-сайте — блоком в потоке под полем (не абсолютной выпадашкой поверх
   страницы): высота панели просто растёт, отодвигая контент под ней. */
.zh-search__results {
	margin-top: 12px;
	background: #fff;
	border-radius: 8px;
	max-height: min(60vh, 500px);
	/* сам блок не скроллится целиком — скроллится только .searche-result__list
	   внутри, а кнопка «Показать все результаты» остаётся статичной снизу */
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.zh-search__results[hidden] {
	display: none;
}
.zh-search__results .searche-result {
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: 500px;
}
.zh-search__results .searche-result__list {
	min-height: 0;
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px 0;
}
.zh-search__results .maxwidth-theme {
	max-width: none;
	width: auto;
	margin: 0;
	padding: 0;
}
.zh-search__results .searche-result__item {
	display: block;
	padding: 0;
	text-decoration: none;
	color: var(--zh-dark);
}
/* «Показать все результаты» — статичный футер под скроллом списка (см.
   .searche-result__list выше и разметку ajax.php), а не рядовой пункт */
.zh-search__results .searche-result__item--find {
	flex-shrink: 0;
	border-top: 1px solid var(--zh-border);
	padding: 16px 0;
}
.zh-search__results .searche-result__item--find .searche-result__inner {
	padding: 0;
}
.zh-search__results .searche-result__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	padding: 8px 16px;
	transition: color 0.2s;
}
/* легаси-тема вешает сюда декоративные ::before/::after — в нашей карточке лишние */
.zh-search__results .searche-result__inner::before,
.zh-search__results .searche-result__inner::after {
	content: none;
}
.zh-search__results a.searche-result__item:hover .searche-result__inner .searche-result__item-text {
	color: var(--zh-green-hover);
}
.zh-search__results .searche-result__item-image {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	margin: 0;
	justify-content: center;
}
.zh-search__results .searche-result__item-image img {
	max-width: 100%;
	max-height: 100%;
}
.zh-search__results .searche-result__item-text {
	font-size: 15px;
	line-height: 1.3;
	color: var(--zh-dark);
}
.zh-search__results .searche-result__item-text b {
	font-weight: 600;
}
.zh-search__results .all_result_title {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 20px;
	border: 1px solid var(--zh-green);
	border-radius: 5px;
	color: var(--zh-green);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}
.zh-search__results .all_result_title:hover {
	background: var(--zh-green);
	color: #fff;
}
.zh-search__input {
	flex: 1 0 0;
	min-width: 1px;
	height: 48px;
	padding: 16px;
	background: #f1f1f1;
	border: none;
	border-radius: 5px;
	font-family: var(--zh-font);
	font-size: 13px;
	letter-spacing: -0.13px;
	color: var(--zh-dark);
	outline: none;
}
.zh-search__input::placeholder {
	color: #777777;
}
.zh-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	padding: 0;
	background: var(--zh-green);
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: var(--zh-btn-transition);
}
.zh-search__submit:hover {
	background: var(--zh-green-hover);
}
.zh-search__submit img {
	width: 24px;
	height: 24px;
	filter: brightness(0) invert(1);
}
.zh-search__close {
	position: absolute;
	/* фиксированный top, а не 50% + translateY: панель теперь растёт по высоте
	   (результаты в потоке), проценты "уехали" бы вместе с ростом. 44px = тот
	   же паддинг сверху (36px), что у .zh-search, + центр 48px поля минус
	   половина высоты крестика */
	top: 44px;
	right: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: none;
	color: var(--zh-dark);
	cursor: pointer;
	transition: color 0.15s;
}
.zh-search__close:hover {
	color: var(--zh-green);
}

/* ==================== мобильная версия (<992px) ==================== */

.zh-mheader,
.zh-mmenu,
.zh-bottombar {
	display: none;
	font-family: var(--zh-font);
	color: var(--zh-dark);
	box-sizing: border-box;
}
.zh-mheader *,
.zh-mmenu *,
.zh-bottombar * {
	box-sizing: border-box;
}

@media (max-width: 991px) {
	/* скрытие легаси-мобильной шапки Aspro и компенсация отступов */
	.zh-dev #mobileheader {
		display: none !important;
	}
	/* легаси нижняя панель иконок (include/footer/under_footer.php →
	   TSolution\Functions::showBottomPanel) — рендерится безусловно на каждой
	   странице, к нашему .zh-bottombar отношения не имеет */
	.zh-dev .bottom-icons-panel {
		display: none !important;
	}
	.zh-dev body {
		padding-top: 96px !important;   /* мини-строка 32 + шапка 64 */
		padding-bottom: 60px !important; /* нижний таб-бар */
	}

	/* ---- мини-строка + шапка ---- */
	.zh-mheader {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: var(--zh-z-header);
		background: #fff;
		border-bottom: 1px solid var(--zh-border);
	}
	.zh-mheader__strip {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 32px;
		padding: 0 16px;
		border-bottom: 1px solid var(--zh-border);
		font-size: 13px;
		letter-spacing: -0.13px;
	}
	.zh-mheader__city {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}
	.zh-mheader__phone {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: var(--zh-dark);
		font-weight: 600;
		text-decoration: none;
	}
	.zh-mheader__phone:hover {
		color: var(--zh-green);
	}
	.zh-mheader__row {
		position: relative;
		display: flex;
		align-items: center;
		gap: 12px;
		height: 64px;
		padding: 0 16px;
	}
	.zh-mheader__burger {
		position: relative;
		display: block;
		width: 40px;
		height: 40px;
		padding: 0;
		background: var(--zh-green);
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}
	/* абсолютные top вместо flex-gap + translateY: три полоски всегда стоят
	   в точных пиксельных позициях, крестик — поворот 1/3-й вокруг общего
	   центра (19px), без зависимости от того, как браузер посчитал gap */
	.zh-mheader__burger span {
		position: absolute;
		left: 50%;
		width: 18px;
		height: 2px;
		margin-left: -9px;
		background: #fff;
		border-radius: 1px;
		transition: top 0.2s, transform 0.2s, opacity 0.2s;
	}
	.zh-mheader__burger span:nth-child(1) {
		top: 13px;
	}
	.zh-mheader__burger span:nth-child(2) {
		top: 19px;
	}
	.zh-mheader__burger span:nth-child(3) {
		top: 25px;
	}
	.zh-mheader__burger[aria-expanded="true"] span:nth-child(1) {
		top: 19px;
		transform: rotate(45deg);
	}
	.zh-mheader__burger[aria-expanded="true"] span:nth-child(2) {
		opacity: 0;
	}
	.zh-mheader__burger[aria-expanded="true"] span:nth-child(3) {
		top: 19px;
		transform: rotate(-45deg);
	}
	.zh-mheader__logo {
		display: block;
	}
	.zh-mheader__logo img {
		display: block;
		height: 42px;
		width: auto;
	}
	.zh-mheader__btns {
		display: flex;
		gap: 8px;
		margin-left: auto;
	}
	.zh-mheader__icon-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background: var(--zh-gray);
		border-radius: 5px;
		border: 0;
	}
	.zh-mheader__icon-btn img {
		width: 20px;
		height: 20px;
	}

	/* при открытом меню в шапке остаются крестик, лого и поиск */
	.zh-mheader--menu-open .zh-mheader__btns .zh-mheader__icon-btn:not(#zh-search-toggle-m) {
		display: none;
	}

	/* ---- полноэкранное меню ---- */
	.zh-mmenu {
		display: block;
		position: fixed;
		top: 96px;
		/* по макету открытое меню перекрывает экран целиком — таб-бар снизу
		   на это время прячется (script.js), поэтому места под него не оставляем */
		bottom: 0;
		left: 0;
		right: 0;
		z-index: calc(var(--zh-z-header) - 1);
		background: #fff;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0.25s;
	}
	.zh-mmenu--open {
		transform: translateX(0);
		visibility: visible;
	}
	.zh-mmenu__links {
		padding: 24px;
	}
	.zh-mmenu__list {
		display: flex;
		flex-direction: column;
		gap: 4px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.zh-mmenu__item {
		list-style: none;
	}
	/* легаси-тема добавляет li:before с тире почти на любой список на странице —
	   list-style:none его не убирает (это отдельный ::before, не нативный маркер);
	   та же история уже была в футере, см. ul li.zf-col__item::before ниже */
	ul li.zh-mmenu__item::before {
		content: none;
	}
	.zh-mmenu__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		min-height: 44px;
		padding: 10px 0;
		background: none;
		border: none;
		font-family: var(--zh-font);
		font-size: 18px;
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: -0.54px;
		color: var(--zh-dark);
		text-align: left;
		text-decoration: none;
		cursor: pointer;
	}
	.zh-mmenu__arrow {
		flex-shrink: 0;
	}

	/* ---- drill-down: экраны разделов ---- */
	/* Корневой список и контакты скрываются, когда открыт экран раздела. */
	.zh-mmenu--sub .zh-mmenu__list,
	.zh-mmenu--sub .zh-mmenu__root-only {
		display: none;
	}
	/* отступы даёт родитель (.zh-mmenu__links, padding: 24px) — свои не нужны */
	.zh-mscreen {
		display: none;
	}
	.zh-mscreen--active {
		display: block;
	}
	.zh-mscreen__back {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		min-height: 44px;
		padding: 10px 0;
		margin-bottom: 8px;
		background: none;
		border: none;
		font-family: var(--zh-font);
		font-size: 14px;
		line-height: 1.3;
		color: #999;
		cursor: pointer;
	}
	.zh-mscreen__back:hover {
		color: var(--zh-dark);
	}
	.zh-mscreen__list {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* --- карточка категории с 3-м уровнем (экран «Услуги и цены») --- */
	.zh-mcard {
		list-style: none;
		background: var(--zh-gray);
		border: 1px solid transparent;
		border-radius: 8px;
		overflow: hidden;
		transition: background 0.15s, border-color 0.15s;
	}
	ul li.zh-mcard::before {
		content: none;
	}
	/* раскрытая карточка — белая с рамкой */
	.zh-mcard.is-open {
		background: #fff;
		border-color: var(--zh-border);
	}
	/* head — <button> у карточек с подпунктами и <a> у тех, где раскрывать нечего */
	.zh-mcard__head {
		display: flex;
		align-items: center;
		gap: 16px;
		width: 100%;
		min-height: 72px;
		padding: 12px;
		background: none;
		border: none;
		font-family: var(--zh-font);
		text-align: left;
		text-decoration: none;
		cursor: pointer;
	}
	.zh-mcard__head:hover {
		text-decoration: none;
	}
	/* круглое фото раздела (из инфоблока, PARAMS PICTURE); место резервируется всегда */
	.zh-mcard__photo {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		flex-shrink: 0;
		overflow: hidden;
		border-radius: 50%;
	}
	.zh-mcard__photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.zh-mcard__title {
		font-size: 16px;
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: -0.48px;
		color: var(--zh-dark);
		text-decoration: none;
	}
	.zh-mcard__title:hover {
		color: var(--zh-green);
		text-decoration: none;
	}
	.zh-mcard__arrow {
		/* title больше не растягивается (flex:1) — сам занимает ширину контента,
		   поэтому стрелку прижимаем к правому краю отступом слева */
		flex-shrink: 0;
		margin-left: auto;
		margin-right: 4px;
		color: var(--zh-dark);
		transition: transform 0.2s;
	}
	.zh-mcard.is-open .zh-mcard__arrow {
		transform: rotate(180deg);
	}
	/* подпункты 3-го уровня — внутри раскрытой карточки */
	.zh-mcard__sub {
		display: none;
		margin: 0;
		padding: 0 16px 16px;
		list-style: none;
	}
	.zh-mcard.is-open .zh-mcard__sub {
		display: block;
	}
	.zh-mcard__sub-item {
		list-style: none;
	}
	ul li.zh-mcard__sub-item::before {
		content: none;
	}
	.zh-mcard__sub-link {
		display: block;
		padding: 10px 0;
		font-size: 14px;
		line-height: 1.4;
		letter-spacing: -0.14px;
		color: var(--zh-dark);
		text-decoration: none;
	}
	.zh-mcard__sub-link:hover {
		color: var(--zh-green);
		text-decoration: none;
	}

	/* --- строка без 3-го уровня (экран «Специалисты») --- */
	.zh-mrow {
		list-style: none;
	}
	ul li.zh-mrow::before {
		content: none;
	}
	.zh-mrow__link {
		display: flex;
		align-items: center;
		gap: 16px;
		text-decoration: none;
	}
	.zh-mrow__link:hover {
		text-decoration: none;
	}
	/* квадратная плашка с иконкой специальности (из инфоблока, PARAMS ICON) */
	.zh-mrow__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		flex-shrink: 0;
		background: #fff;
		border: 1px solid var(--zh-border);
		border-radius: 8px;
		color: var(--zh-green);
	}
	.zh-mrow__icon img,
	.zh-mrow__icon svg {
		width: 24px;
		height: 24px;
		object-fit: contain;
	}
	.zh-mrow__title {
		flex: 1 0 0;
		min-width: 1px;
		font-size: 16px;
		line-height: 1.3;
		letter-spacing: -0.48px;
		color: var(--zh-dark);
	}
	.zh-mrow__link:hover .zh-mrow__title {
		color: var(--zh-green);
	}
	/* строки без картинок («О клинике», «Пациентам»): плашки нет, поэтому
	   отступы задаёт gap списка, а не паддинги строк; текст длинных названий
	   документов переносится на несколько строк */
	.zh-mscreen__list--plain {
		gap: 16px;
	}
	.zh-mrow--plain .zh-mrow__link {
		min-height: 0;
		padding: 0;
	}
	.zh-mrow--plain .zh-mrow__title {
		font-size: 15px;
		line-height: 1.4;
	}

	.zh-mmenu__contacts {
		display: flex;
		flex-direction: column;
		gap: 24px;
		padding: 24px;
		border-top: 1px solid var(--zh-border);
	}
	.zh-mmenu__requisites {
		display: flex;
		flex-direction: column;
		gap: 16px;
		font-size: 13px;
		letter-spacing: -0.13px;
	}
	.zh-mmenu__requisites .zh-header__info {
		white-space: normal;
		align-items: flex-start;
	}
	.zh-mmenu__requisites .zh-icon-16 {
		margin-top: 1px;
	}
	.zh-mmenu__eyed {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		width: 100%;
		padding: 11px 20px 12px;
		background: none;
		border: none;
		border-top: 1px solid var(--zh-border);
		font-family: var(--zh-font);
		font-size: 14px;
		font-weight: 600;
		letter-spacing: -0.42px;
		color: var(--zh-green);
		cursor: pointer;
	}
	.zh-mmenu__eyed img {
		width: 24px;
		height: 24px;
	}

	/* ---- мобильная панель поиска: перекрывает шапку ---- */
	.zh-search--mobile {
		padding: 16px;
		justify-content: flex-start;
		gap: 10px;
		/* min-height:100% из .zh-search тут не резолвится: позиционирующий
		   предок .zh-mheader — auto-высоты (мини-строка 32 + строка 64), а не
		   заданной явно, как .zh-header на десктопе. Без этого в пустом
		   состоянии панель была бы на 16px короче шапки. */
		min-height: 96px;
	}
	.zh-search--mobile .zh-search__box {
		flex: 1 0 0;
		width: auto;
		max-width: none;
	}
	.zh-search--mobile .zh-search__close {
		position: static;
		flex-shrink: 0;
		width: 48px;
		height: 48px;
	}

	/* ---- нижний таб-бар ---- */
	.zh-bottombar {
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: var(--zh-z-header);
		height: 60px;
		padding: 0 8px;
		background: #fff;
		border-top: 1px solid var(--zh-border);
	}
	/* при открытом полноэкранном меню (по макету) таб-бар не виден */
	.zh-bottombar--hidden {
		display: none;
	}
	.zh-bottombar__tab {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-width: 66px;
		padding: 8px 0;
		font-size: 12px;
		line-height: 1.3;
		color: var(--zh-dark);
		text-decoration: none;
		cursor: pointer;
	}
	.zh-bottombar__tab.is-active {
		color: var(--zh-green);
	}
	.zh-bottombar__icon {
		width: 24px;
		height: 24px;
	}
	#CalltouchWidgetFrame {
		bottom: 50px !important;
	}
}

/* ==================== ФУТЕР ==================== */

.zf {
	--zf-bg: #1b1c1e;
	--zf-accent: #00a300;
	--zf-text: #ababab;
	--zf-line: rgba(255, 255, 255, 0.1);
	--zf-plate: rgba(255, 255, 255, 0.1);
	background: var(--zf-bg);
	font-family: var(--zh-font);
	color: var(--zf-text);
	box-sizing: border-box;
}
.zf *,
.zf *:before,
.zf *:after {
	box-sizing: border-box;
}

/* Единый DOM для обоих вьюпортов: грид-области дают десктопную раскладку
   (меню | контакты / копирайт | документы), на мобильном — линейный порядок:
   вкладки меню → документы (4-я вкладка) → контакты → копирайт. */
.zf__inner {
	display: grid;
	grid-template-columns: 1fr 448px;
	grid-template-areas:
		"menu     contacts"
		"copy     docs";
	margin: 0 auto;
	padding: 0 !important;
}
.zf__menu {
	grid-area: menu;
	display: flex;
	gap: 48px;
	padding: 32px;
}
.zf__contacts {
	grid-area: contacts;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
	border-left: 1px solid var(--zf-line);
}
.zf__copy {
	grid-area: copy;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	padding: 32px;
	border-top: 1px solid var(--zf-line);
}
.zf__docs {
	grid-area: docs;
	padding: 32px;
	border-top: 1px solid var(--zf-line);
	border-left: 1px solid var(--zf-line);
}

/* ---- колонки меню ---- */
.zf-col {
	flex: 1 0 0;
	min-width: 1px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.zf-col__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 0;
	background: none;
	border: none;
	font-family: var(--zh-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.48px;
	color: var(--zf-accent);
	text-align: left;
	cursor: default;
}
.zf-col__arrow {
	display: none; /* стрелка-шеврон только на мобильном (аккордеон) */
	flex-shrink: 0;
	transition: transform 0.2s;
}
.zf-col__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.zf-col__item {
	margin: 0;
	list-style: none;
	line-height: 17px;
}
ul li.zf-col__item::before {
	content: none;
}
.zf-col__link {
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: -0.13px;
	color: var(--zf-text);
	text-decoration: none;
	transition: color 0.15s;
}
.zf-col__link:hover {
	color: #fff;
	text-decoration: none;
}

/* на десктопе блок «Пациентам» — колонка документов без заголовка */
.zf-col--docs .zf-col__title {
	display: none;
}

/* ---- контакты ---- */
.zf__phone {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.96px;
	color: #fff;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
.zf__phone:hover {
	color: #fff;
	text-decoration: none;
	opacity: 0.85;
}
/* зелёный кружок с трубкой — на всех вьюпортах (в макете он есть и на десктопе) */
.zf__phone-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	background: var(--zh-green);
	border-radius: 50%;
}
.zf__phone-icon img {
	width: 22px;
	height: 22px;
	filter: brightness(0) invert(1);
}

/* адрес, часы, почта — строками с зелёной иконкой */
.zf__info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: -0.13px;
}
.zf__info-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--zf-text);
	text-decoration: none;
}
.zf__info-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--zh-green);
}
.zf__email:hover {
	color: #fff;
	text-decoration: none;
}

/* ---- кнопки: в ряд, «Записаться» с заливкой, «Заказать звонок» обводкой ---- */
.zf__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.zf__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.48px;
	white-space: nowrap;
	cursor: pointer;
	transition: var(--zh-btn-transition);
}
.zf__btn--book {
	background: var(--zh-green);
	border-color: var(--zh-green);
	color: #fff;
}
.zf__btn--book:hover {
	background: var(--zh-green-hover);
	border-color: var(--zh-green-hover);
}
.zf__btn--callback {
	background: transparent;
	border-color: var(--zh-green);
	color: var(--zh-green);
}
.zf__btn--callback:hover {
	background: var(--zh-green-hover);
	border-color: var(--zh-green-hover);
	color: #fff;
}

/* ---- соцсети ---- */
.zf__social {
	margin-top: auto;
	display: flex;
	gap: 8px;
}
.zf__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 44px;
	padding: 0;
	background: var(--zf-plate);
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background 0.2s;
}
.zf__icon-btn:hover {
	background: rgba(255, 255, 255, 0.18);
}
.zf__icon-btn img {
	width: 24px;
	height: 24px;
	filter: brightness(0) invert(1);
}

/* ---- копирайт, дисклеймер ---- */
.zf__copy-info {
	display: flex;
	flex-direction: column;
	gap: 24px;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: -0.13px;
}
/* строка: копирайт + номер лицензии слева, «Слабовидящим» справа */
.zf__copy-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.zf__legal {
	display: flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}
.zf__eyed {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	background: none;
	border: none;
	font-family: var(--zh-font);
	font-size: 13px;
	line-height: 1.3;
	color: var(--zf-text);
	cursor: pointer;
	transition: color 0.15s;
}
.zf__eyed:hover {
	color: #fff;
}
.zf__eyed img {
	width: 24px;
	height: 24px;
	filter: brightness(0) invert(1);
	opacity: 0.7;
}
.zf__disclaimer {
	margin: 0;
	line-height: 1.5;
}
.zf__copy-bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

/* ---- бейджи рейтингов ---- */
.zf__ratings {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 700px;
}
.zf__rating {
	display: inline-flex;
	align-items: center;
}
.zf__rating-logo {
	display: inline-flex;
	align-items: center;
}
.zf__rating-logo img {
	height: 20px;
	width: 100%;
	display: block;
}
.zf__rating-value {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding-left: 12px;
	border-left: 1px solid var(--zf-line);
	height: 100%;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.zf__rating-star {
	width: 16px;
	height: 16px;
}
.zf__developer {
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: -0.13px;
	white-space: nowrap;
}
.zf__developer-link:hover {
	color: var(--zh-green-hover);
}

@media screen and (max-width: 1400px) {
	.zh-header__info--time {
		display: none;
	}

	.zh-mega__media {
		display: none;
	}
}

/* ==================== футер: мобильный ==================== */
@media (max-width: 991px) {
	.zf__inner {
		display: flex;
		flex-direction: column;
		max-width: none;
	}
	/* порядок по макету: вкладки меню → «Пациентам» → контакты → рейтинги/копирайт */
	.zf__menu   { order: 1; }
	.zf__docs   { order: 2; }
	.zf__contacts { order: 3; }
	.zf__copy   { order: 4; }

	.zf__menu {
		flex-direction: column;
		gap: 0;
		padding: 24px 24px 8px;
	}
	.zf__docs {
		padding: 0 24px 24px;
		border: none;
	}
	.zf__contacts,
	.zf__copy {
		padding: 24px;
		border-left: none;
		border-top: 1px solid var(--zf-line);
	}

	/* колонки становятся вкладками-аккордеонами */
	.zf-col {
		gap: 0;
		padding: 8px 0;
	}
	.zf-col__title {
		font-size: 18px;
		letter-spacing: -0.54px;
		min-height: 44px;
		cursor: pointer;
	}
	.zf-col--docs .zf-col__title {
		display: flex;
	}
	.zf-col__arrow {
		display: block;
	}
	.zf-col--open .zf-col__arrow {
		transform: rotate(180deg);
	}
	.zf-col__list {
		display: none;
		padding-top: 16px;
	}
	.zf-col--open .zf-col__list {
		display: flex;
	}

	/* контакты: телефон помельче, кнопки на всю ширину в столбик */
	.zf__phone {
		font-size: 24px;
		letter-spacing: -0.72px;
	}
	.zf__btns {
		flex-direction: column;
	}
	.zf__btn {
		width: 100%;
	}

	/* копирайт: порядок по макету — рейтинги, копирайт/лицензия,
	   дисклеймер, Medmaps, «Слабовидящим» отдельной строкой внизу. Раскрываем
	   вложенность через display:contents, чтобы всем пятью блоками управлял один
	   order на уровне .zf__copy (без него order сработал бы только внутри своего
	   .zf__copy-top/-bottom — на десктопе эта вложенность и порядок как в макете) */
	.zf__copy-info,
	.zf__copy-top,
	.zf__copy-bottom {
		display: contents;
	}
	.zf__legal {
		order: 2;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.zf__disclaimer {
		order: 3;
	}
	.zf__developer {
		order: 4;
	}
	.zf__eyed {
		order: 5;
		justify-content: center;
		width: 100%;
		padding-top: 24px;
		margin-top: 4px;
		border-top: 1px solid var(--zf-line);
		font-size: 14px;
	}
	.zf__eyed img {
		opacity: 1;
	}
}

/* ==================== МОДАЛКА «Заказать звонок» (макет popup.png) ==================== */
/* Поверх блюр-подложки (.zh-backdrop, ключ 'modal'), поэтому свой слой выше поиска. */

.zh-modal {
	position: fixed;
	inset: 0;
	z-index: var(--zh-z-modal);
	display: flex;
	/* align-items:center вместо margin:auto на самой карточке (ниже) не годится:
	   когда контент выше вьюпорта, центрирование по кросс-оси обрезает верх
	   карточки за пределы скролла — это как раз и мешало влезть по высоте */
	justify-content: center;
	padding: 24px;
	overflow-y: auto;
	font-family: var(--zh-font);
	color: var(--zh-dark);
	box-sizing: border-box;
}
.zh-modal[hidden] {
	display: none;
}
.zh-modal *,
.zh-modal *:before,
.zh-modal *:after {
	box-sizing: border-box;
}
.zh-modal__window {
	position: relative;
	width: 544px;
	max-width: 100%;
	margin: auto 0;
	background: #fff;
	border-radius: 5px;
}
/* крестик — снаружи карточки, справа сверху (по макету) */
.zh-modal__close {
	position: absolute;
	top: -8px;
	left: calc(100% + 24px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	transition: opacity 0.15s;
}
.zh-modal__close:hover {
	opacity: 0.75;
}
@media (max-width: 700px) {
	.zh-modal__close {
		top: 8px;
		left: auto;
		right: 8px;
		color: var(--zh-dark);
	}
}

.zh-modal__body {
	padding: 48px;
}
.zh-modal__title {
	margin-bottom: 32px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.72px;
}
.zh-modal__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.zh-modal__error {
	padding: 10px 14px;
	background: #fdecec;
	border-radius: 5px;
	font-size: 14px;
	line-height: 1.4;
	color: #c62828;
}

/* поля */
.zh-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
/* стороннее jQuery Validate (Calltouch-трекер лидов, footer.php легаси-темы,
   зовёт m.valid() на любой форме по клику submit) считает required-поля
   формы своими: вставляет собственный <label class="error"> рядом с ними
   (его и прячем) и ЗАОДНО вешает тот же класс "error" на родителя поля
   (.zh-field/.zh-check, через highlight()) — эти два :not() исключения
   не дают спрятать сами обёртки полей вместе с чужим лейблом.
   !important: jQuery переключает видимость через .show()/.hide() —
   инлайн-стиль иначе перебьёт это правило */
.zh-modal__form .error:not(.zh-field):not(.zh-check) {
	display: none !important;
}
/* сообщение под конкретным полем; пустое — не занимает места */
.zh-field__error {
	font-size: 13px;
	line-height: 1.3;
	color: #c62828;
}
.zh-field__error:empty {
	display: none;
}
.zh-field__input {
	width: 100%;
	height: 56px;
	padding: 16px;
	background: #f1f1f1;
	border: 1px solid transparent;
	border-radius: 5px;
	font-family: var(--zh-font);
	font-size: 16px;
	line-height: 1.3;
	color: var(--zh-dark);
	outline: none;
	transition: border-color 0.15s;
}
.zh-field__input::placeholder {
	color: #999;
}
.zh-field__input:focus {
	border-color: var(--zh-green);
}
.zh-field__input.is-invalid {
	border-color: #c62828;
	background: #fdf3f3;
}

/* «Как с вами связаться?» */
.zh-modal__channel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--zh-border);
}
.zh-modal__channel-label {
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: -0.48px;
}
.zh-modal__channel-btns {
	display: flex;
	gap: 8px;
}
.zh-channel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--zh-border);
	border-radius: 5px;
	cursor: pointer;
	transition: border-color 0.15s;
}
.zh-channel:hover {
	border-color: var(--zh-green);
}
.zh-channel.is-active {
	border-color: var(--zh-green);
	border-width: 2px;
}
.zh-channel img {
	width: 24px;
	height: 24px;
}

/* капча (в макете её нет — появляется, только если включена в настройках формы) */
.zh-modal__captcha[hidden] {
	display: none;
}
.zh-modal__captcha-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.zh-modal__captcha-img {
	height: 56px;
	border-radius: 5px;
	flex-shrink: 0;
}
.zh-modal__captcha-input {
	flex: 1 0 0;
	min-width: 1px;
}

/* согласие */
.zh-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
}
.zh-check__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.zh-check__box {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
	background: #fff;
	border: 1px solid var(--zh-green);
	border-radius: 3px;
	transition: background 0.15s;
}
/* ~ (общий сосед), а не + (непосредственный): стороннее jQuery Validate
   (Calltouch-трекер лидов, footer.php легаси-темы, зовёт m.valid() на любой
   форме по клику submit) вставляет свой <label class="error"> прямо после
   .zh-check__input, разрывая цепочку — с ~ соседство по-прежнему находится */
.zh-check__input:checked ~ .zh-check__box {
	background: var(--zh-green);
}
.zh-check__input:checked ~ .zh-check__box:after {
	content: '';
	position: absolute;
	top: 3px;
	left: 6px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.zh-check__input.is-invalid ~ .zh-check__box {
	border-color: #c62828;
}
.zh-check__input:focus-visible ~ .zh-check__box {
	outline: 2px solid var(--zh-green);
	outline-offset: 2px;
}
.zh-check__text {
	font-size: 14px;
	line-height: 1.4;
	color: var(--zh-dark);
}
.zh-check__text a {
	color: var(--zh-green);
	text-decoration: none;
}
.zh-check__text a:hover {
	text-decoration: underline;
}

/* отправка */
.zh-modal__submit {
	position: relative;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 24px;
	background: var(--zh-green);
	border: none;
	border-radius: 5px;
	font-family: var(--zh-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.48px;
	color: #fff;
	cursor: pointer;
	transition: var(--zh-btn-transition);
}
.zh-modal__submit:hover {
	background: var(--zh-green-hover);
}
.zh-modal__submit:disabled {
	cursor: default;
	pointer-events: none; /* пока заявка уходит — кнопка не кликается */
}

/* Состояние отправки: текст НЕ убирается из потока (visibility, не display),
   поэтому ширина и высота кнопки остаются прежними — она не «прыгает».
   Спиннер накладывается поверх по центру. */
.zh-modal__submit-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	display: none;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	animation: zh-spin 0.7s linear infinite;
}
.zh-modal__submit.is-loading {
	background: var(--zh-green-hover);
}
.zh-modal__submit.is-loading .zh-modal__submit-text {
	visibility: hidden;
}
.zh-modal__submit.is-loading .zh-modal__submit-spinner {
	display: block;
}
@keyframes zh-spin {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	.zh-modal__submit-spinner {
		animation-duration: 2s;
	}
}

/* состояние «Спасибо!» */
.zh-modal__success {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	min-height: 420px;
	text-align: center;
}
.zh-modal__success[hidden] {
	display: none;
}
.zh-modal__success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border: 2px solid var(--zh-green);
	border-radius: 50%;
	color: var(--zh-green);
}
.zh-modal__success-title {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.72px;
}
.zh-modal__success-text {
	margin: -12px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: #666;
}

@media (max-width: 700px) {
	.zh-modal {
		padding: 16px;
	}
	.zh-modal__body {
		padding: 32px 20px;
		/* крестик закрытия на мобильном лежит внутри карточки (top:8px;right:8px,
		   см. правило выше) — если бы скроллилась вся .zh-modal__window вместе с
		   ним, он бы уезжал вместе с формой. Ограничиваем высотой и скроллим
		   только тело — крестик остаётся на месте */
		max-height: calc(100vh - 32px);
		overflow-y: auto;
	}
	.zh-modal__channel {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.zh-modal__submit {
		align-self: stretch;
	}
	.zh-modal__captcha-row {
		flex-flow: column;
	}
}

/* ==================== Ripple на кнопках (как у .btn в теме) ====================
   Копия правил из bitrix/templates/aspro-allcorp3medc/vendor/css/ripple.css:
   на сайте они уже подключены темой, здесь — чтобы эффект работал и в превью.
   Сам эффект вешает script.js (наведение, 0.6s linear, белая волна 40%). */
.has-ripple {
	position: relative;
	overflow: hidden;
	transform: translate3d(0, 0, 0);
}
.ripple {
	display: block;
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
	background: currentColor; /* color: auto в теме = цвет текста (у зелёных кнопок белый) */
	transform: scale(0);
}
.ripple-animate {
	animation-name: zh-ripple;
	animation-timing-function: linear;
}
@keyframes zh-ripple {
	100% {
		opacity: 0;
		transform: scale(2);
	}
}
@media (prefers-reduced-motion: reduce) {
	.ripple {
		display: none;
	}
}

/* Не про шапку: этот файл грузится безусловно на каждой странице (см.
   include/header/body_top_custom.php), поэтому сюда же вынесено общее
   правило для контента. Визуальный редактор Битрикса при вставке картинки
   прописывает width/height по фактическому размеру файла — без ограничения
   картинка вылезает за границы блока на узких экранах. .content-md —
   контейнер обычных страниц, .content — контейнер детальных страниц
   (news.detail). */
.content-md img,
.content img {
	max-width: 100%;
	height: auto;
}