/* ============================================================
   PddPro — карточка школы, верхний блок

   Источник — design2/assets/css/main.css (раздел «СТРАНИЦА
   АВТОШКОЛЫ») и design2/assets/css/school-web.css. Значения взяты
   оттуда как есть: все токены --school-* уже лежат в tokens.css
   (156 штук), поэтому переносятся только правила, и то с заменой
   селекторов — под ту разметку, которую реально печатает
   Messia_Object_Tmpl_Pdd::get_object_card().

   Почему селекторы не совпадают с прототипом один в один.
   Имена блоков прототипа сверены со всем чужим CSS движка
   и плагинов (frontend.css, skin.css, object.css, slider.css,
   messia_video/style.css). Из 48 имён пересеклись четыре:
   .section, .button, .map и .stars — последнее занято выводом
   рейтинга самого движка. Поэтому у блоков карточки приставка
   pdd-: она снимает вопрос целиком и стоит дёшево, потому что
   разметку мы печатаем сами.

   Специфичность: всё цепляется за body.pdd (+.pdd-card), это
   (0,2,0) и выше. Чужие правила на карточке доходят максимум
   до (0,3,1) — .page-template-newlisting .buttons-new
   button:not(.favorite) в skin.css. Ни одного !important здесь
   нет: единственный на всю тему стоит в main.css на фоне body.

   Чего в этом файле нет намеренно:
     - раскладки от 1024px: она в web.css, сессия 3
     - звёзд рейтинга: вывод .stars/.mark движка переезжает
       на siteStars прототипа на этапе 2 (шапка и общие компоненты)
     - вкладок «Цены/Отзывы» и карты в сайдбаре: это виджеты из БД
   ============================================================ */

/* ------------------------------------------------------------
   0. ВОЗВРАТ БАЗОВЫХ ТОКЕНОВ НА КАРТОЧКЕ ШКОЛЫ

   Класс page-template-newlisting висит и на листинге, и на карточке
   объекта: его добавляет body_class каждый из скинов. А listing.css
   вешает на body.pdd.page-template-newlisting подмены базовых
   токенов под карточку листинга (строки 56–76) — и они протекают
   на страницу школы, где эталон их не ставит.

   Замер 14.08.2026 на 1280: скругление секций шло 16 вместо 12,
   тень — 0 1px 3px rgba(16,18,27,.07) вместо 0 1px 2px rgba(11,11,15,.05),
   заголовок cookie-полосы 19px вместо 15.

   Тонкость, из-за которой это не видно «на глаз» в других местах:
   var() в объявлении своей переменной подставляется ТАМ, ГДЕ ОБЪЯВЛЕНО.
   Токены вида --footer-radius: var(--radius-xl) объявлены в :root
   и берут :root-овские 12px, а те, что объявлены у .pdd-card
   (см. блок 1), — уже протёкшие 16px. Отсюда разнобой.

   Значения ниже — дословно из assets/css/tokens.css, файл заморожен
   и правится не здесь. Возврат сделан подменой под классом своей
   страницы, как предписывает docs/briefs/PARALLEL.md.
   ------------------------------------------------------------ */
body.pdd.single-messia_object {
	--radius-xl: 12px;
	--shadow-card: 0 1px 2px rgba(11, 11, 15, 0.05);
	--font-size-card-title: 15px;
	--font-size-price: 15px;
	--font-size-caption: 12px;
	--font-size-micro: 11px;
}

/* ------------------------------------------------------------
   1. КОНТЕЙНЕР КАРТОЧКИ

   Движок печатает одну белую плашку на весь верхний блок:
       .card-item-ver-3  background #fff, padding 32px,
                         border-radius 24px, тень   (frontend.css)
       .card-item-ver-3  border-radius 20px,
                         box-shadow none !important (skin.css)

   В прототипе верхний блок — не одна плашка, а стопка блоков
   на сером фоне страницы: шапка, ряд кнопок, «Контакты»,
   «Время работы», «Адрес». Поэтому внешнюю плашку гасим,
   а белый фон и отступы получает каждая наша секция.

   box-shadow трогать не нужно: skin.css уже снял его !important'ом.
   ------------------------------------------------------------ */
/* gap: 0 на телефоне намеренно — отбивки между блоками в эталоне
   заданы на самих блоках (--school-*-margin), и общий gap
   складывался бы с ними. На широком экране наоборот: там margin
   у блоков ноль, и расстояние держит gap (см. блок ниже). */
body.pdd .pdd-card {
	display: flex;
	flex-direction: column;
	gap: var(--school-stack-gap);
	padding: 0;
	margin: 0;
	background: none;
	border-radius: 0;

	/* Обрезка по нижнему краю карточки — из-за подложки под липким
	   снимком (блок 1в ниже). Подложка высотой 200vh липнет к верху
	   окна и лежит на слое z-index 1, а всё, что идёт ЗА карточкой
	   — панели цен и отзывов, карта, «Похожие» — рисует движок,
	   и слоя у него нет. Ниже карточки подложка ложилась на них
	   серой простынёй: на телефоне после блока контактов и до самого
	   подвала не было видно ничего.

	   Обрезка только по вертикали: вынос блоков под края экрана
	   сделан отрицательными полями (--school-bleed), и клип
	   по горизонтали срезал бы его. */
	overflow-x: visible;
	overflow-y: clip;

	/* Шрифты те же, что задаёт прототип на .app--detail: на базовых
	   токенах карточка выходила мельче листинга, и переход со списка
	   на школу читался как провал по размеру. */
	--font-size-card-title: 17px;
	--font-size-price: 17px;
	--font-size-caption: 13px;
	--font-size-meta: 14px;
	--font-size-micro: 12px;

	/* Секции карточки — как в эталоне: во всю ширину экрана, без
	   скругления и тени, с волосяной рамкой и полем 16px.

	   Раньше здесь стояли вставки со скруглением 12 и тенью: считалось,
	   что раз вокруг есть поля .content, плашкам нужен радиус, иначе
	   они висят в воздухе. Сверка с прототипом 14.08.2026 показала
	   обратное — там блоки прижаты к краям экрана (замер: .intro 390px
	   при экране 390, поле 16, радиус 0), а поля .content снимаются
	   выносом в минус (см. раздел 1a ниже). Возвращаем эталонные
	   значения; на широком экране плашки остаются — там раскладка
	   другая, и блоки стоят в колонке шириной меньше экрана. */
	--school-section-radius: 0;
	--school-section-pad: var(--space-7) var(--page-padding);
	--school-section-border: var(--border-width) solid var(--color-border);
	--school-section-shadow: none;

	/* Вынос под края экрана — в самих полях блоков, а не отдельным
	   правилом: у .pdd-intro, .pdd-section и .pdd-actions margin задан
	   сокращённой записью, и она перебивает любой margin-inline извне.
	   Замер 14.08.2026: блоки держали 358 при экране 390. */
	--school-bleed: calc(-1 * var(--page-padding));
	--school-section-margin: var(--space-3) var(--school-bleed) 0;
	--school-intro-margin: 0 var(--school-bleed);
	--school-intro-radius: 0;
	--school-intro-pad: var(--space-7) var(--page-padding) var(--space-6);
	--school-actions-margin: var(--space-4) var(--school-bleed) 0;
	--school-actions-pad: var(--space-6) var(--page-padding) var(--space-7);

	/* Снимок в эталоне тоже прижат к краям и потому не скруглён */
	--school-gallery-radius: 0;

	--school-stack-gap: 0;
}

/* Шапка на карточке уезжает вместе со страницей: в эталоне
   .topbar здесь position: static, а не sticky (замер: шапка
   при прокрутке уходит за верхний край и не возвращается). */
body.pdd.single-messia_object {
	--topbar-position: static;
}

/* Планшет. Эталон сюда не дотягивается: прототип упирается
   в --app-max-width: 430px и на 768 остаётся полосой в 430px
   посреди экрана. Движок держит всю ширину, и кадр 4:3 давал
   на 768 полосу в 576px — выше половины экрана. Пропорция
   переключается на ту же, что прототип ставит от 1024. */
@media (min-width: 700px) and (max-width: 1023px) {

	body.pdd .pdd-card {
		--gallery-aspect: 16 / 9;
	}
}

/* На широком экране карточка стоит в колонке уже экрана — там
   блокам возвращается вид плашек: скругление, тень, поле 12px */
@media (min-width: 1024px) {

	body.pdd .pdd-card {
		--school-section-radius: var(--radius-xl);
		--school-section-pad: var(--space-6);
		--school-section-border: none;
		--school-section-shadow: var(--shadow-card);
		--school-section-margin: 0;
		--school-bleed: 0;
		--school-intro-margin: 0;
		--school-intro-radius: var(--radius-xl);
		--school-intro-pad: var(--space-6);
		--school-actions-margin: 0;
		--school-actions-pad: var(--space-6);
		/* рамка у ряда кнопок здесь общая, со всех сторон (блок 15) */
		--school-actions-border: none;
		--school-gallery-radius: var(--radius-xl);
		--school-stack-gap: var(--space-3);
	}
}

/* ------------------------------------------------------------
   1a. ВЫНОС БЛОКОВ ПОД КРАЯ ЭКРАНА

   Блоки карточки в эталоне идут во всю ширину, а движок печатает
   их внутри .container с полем 16px. Выносим каждый прямой блок
   карточки на это поле в минус — поля возвращаются внутрь блока
   через --school-*-pad, и суммарный отступ текста от края экрана
   остаётся эталонными 16px.

   Правило работает только на телефоне: от 1024 --school-bleed
   становится нулём (блок выше), потому что там .container сам
   ужимает колонку и вынос разъехался бы с сеткой.
   ------------------------------------------------------------ */
body.pdd .pdd-card > * {
	margin-inline: var(--school-bleed);
}

/* ------------------------------------------------------------
   1b. КРОШКИ

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

   Движок печатает их .breadcrumbs > span > a + span.breadcrumbs__separator
   и красит правилом .breadcrumbs__link, .breadcrumbs__current
   (font-size 20px, color #2a2a2a) — против эталонных 12px и #5a5f6e.
   Замер 14.08.2026: крошки на карточке шли 20px, крупнее собственного
   названия секций.
   ------------------------------------------------------------ */
body.pdd .breadcrumbs {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-3);
	/* Строка идёт во всю ширину экрана, как в эталоне (замер: 390 при
	   экране 390), поэтому выносится под поля .content — тем же
	   способом, что и блоки карточки, см. блок 1a. */
	margin: 0 var(--school-crumbs-bleed, calc(-1 * var(--page-padding)));
	padding: var(--school-crumbs-pad, var(--space-4) var(--page-padding));
	background: var(--school-crumbs-bg, var(--color-bg));
	/* .breadcrumbs { width: 100% } в frontend.css: со 100% строка
	   считала ширину от .content и вынос под края её не расширял —
	   она просто уезжала влево, оставаясь 358 при экране 390. */
	width: auto;
	overflow-x: auto;
	/* 12px числом, а не --font-size-caption: на шаблоне листинга
	   (карточка школы тоже page-template-newlisting) этот токен
	   подменён на 13px под строки карточки листинга. */
	font-size: 12px;
	line-height: var(--line-height-base);
	color: var(--color-text-muted);
	white-space: nowrap;
	scrollbar-width: none;
}

/* Крошки идут вплотную под шапкой, как в эталоне (замер на 390:
   низ шапки 48, верх .crumbs 48). Своих отступов у <main> нет —
   35px сверху ставит .single-messia_object main в чужом CSS,
   и на телефоне они отодвигали крошки на 83. Перебиваем
   специфичностью, без !important; на широком экране это же
   поле переопределяет блок 15. */
body.pdd.single-messia_object main {
	margin-top: 0;
	/* Снизу там же лежало 50px. Пустого блока под колонками нет
	   (.normal-sidebar.is-empty спрятан), это просто чужое поле:
	   вместе с 24px футера оно давало 74 до подвала. */
	margin-bottom: 0;
}

/* Отбивка до футера — те же 16, что и между блоками страницы:
   ряды .container.pdd-sw разложены с row-gap: 16px, и «Похожие
   автошколы» отходят от панели с отзывами ровно на столько.
   Правим токен, а не сам футер: margin у него собран из
   var(--footer-margin-top) в footer.css и общий для всех страниц. */
body.pdd.single-messia_object {
	--footer-margin-top: 16px;
}

body.pdd .breadcrumbs::-webkit-scrollbar {
	display: none;
}

body.pdd .breadcrumbs span,
body.pdd .breadcrumbs .breadcrumbs__separator {
	font-size: inherit;
	line-height: inherit;
	color: var(--color-text-muted);
}

/* Разделитель — «›», как в эталоне. Сам символ подставляет скин
   (class-messia-object-tmpl-pdd.php): движок печатает косую черту
   строкой в $sep и фильтра под неё не даёт. Свои поля у разделителя
   движок задаёт в 5px с каждой стороны, и вместе с gap строки это
   давало 18 вместо эталонных 8. Расстояние держит один gap. */
body.pdd .breadcrumbs .breadcrumbs__separator {
	margin: 0;
}

body.pdd .breadcrumbs a,
body.pdd .breadcrumbs .breadcrumbs__link,
body.pdd .breadcrumbs .breadcrumbs__current {
	/* display: block — у эталона ссылка сама лежит во флексе и потому
	   блочная; движок прячет её внутрь <span>, и она осталась бы
	   строчной, а строчная коробка ниже строки на пиксель. */
	display: block;
	font-size: inherit;
	line-height: inherit;
	color: var(--color-text-secondary);
	text-decoration: none;
}

/* Последняя крошка в эталоне бледнее ссылок — она же не ссылка
   (.crumbs__current #9aa0b0 против #5a5f6e у .crumbs__link).
   Стоит после общего правила выше: специфичность у них одна. */
body.pdd .breadcrumbs .breadcrumbs__current {
	color: var(--color-text-muted);
}

body.pdd .breadcrumbs a:hover {
	color: var(--color-primary);
}

/* ------------------------------------------------------------
   2. ГАЛЕРЕЯ

   Внутри .pdd-gallery__frame лежит то, что отдал движок, и мы
   на это не влияем:
     - одна картинка вторичного изображения (обычный случай);
     - .object-thumbnail-gallery от плагина thumbnail_gallery,
       если галерею у объекта заполнили. Плагин превращает её
       в slick-карусель со стрелками. Файлы плагина не трогаем,
       поэтому точек и счётчика «1/12», как в прототипе, нет:
       их включает опция slick в его slider.js.

   Рамку приходится перебивать у трёх чужих правил:
       .card-item-ver-3 .image-ver-3      (0,2,0)  frontend.css
       .card-item-ver-3 .image-ver-3 img  (0,3,0)  frontend.css
       .image-ver-3                       (0,1,0)  skin.css
   Наши — (0,3,0) и (0,4,0), с запасом.
   ------------------------------------------------------------ */
/* Снимок липкий: доезжает до верха, встаёт и остаётся, а карточка
   уходит поверх него. Это эталонное поведение (main.css 1503:
   .gallery { position: var(--school-gallery-position) }, токен
   в tokens.css равен sticky на телефоне и relative от 1024).
   Токен у нас был заведён, но к правилу не подключён — снимок
   просто уезжал вверх вместе со страницей.

   z-index здесь 0, а не auto: содержимое над снимком должно его
   перекрывать, а прилипшая полоса разделов (z-index 3) — лежать
   выше обоих. */
body.pdd .pdd-card .pdd-gallery {
	position: var(--school-gallery-position);
	top: 0;
	z-index: 0;
	border-radius: var(--school-gallery-radius);
	overflow: hidden;
	background: var(--color-photo-stub);
}

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

   Подложка у блоков уже своя (--school-intro-bg, --school-tabs-bg,
   --school-section-bg), просвечивать нечему. */
body.pdd .pdd-card > * {
	position: relative;
	z-index: 1;
}

/* Подложка под липким снимком — .app__backdrop эталона (main.css 1401).
   Без неё снимок просвечивал в щелях между блоками: у блоков фон свой,
   а у отбивок между ними — нет, и сквозь них был виден кадр.

   Места не занимает: высота гасится отрицательной отбивкой. Высота
   с запасом в два экрана — на телефоне прячется адресная строка,
   окно становится выше 100vh, и снизу выглядывала бы полоска фото.
   Ставит её pdd-school.js сразу за снимком, поэтому блоки карточки
   рисуются поверх (тот же слой, но позже в разметке). */
body.pdd .pdd-card .pdd-card__backdrop {
	position: sticky;
	top: 0;
	z-index: 1;
	height: 200vh;
	margin-bottom: -200vh;
	background: var(--school-backdrop-bg);
	pointer-events: none;
}

/* Клетки коллажа и кнопка «N фото» лежат в разметке на любой
   ширине (их дописывает pdd-school.js один раз), а показываются
   только на широком экране: на телефоне эталон листает кадры
   по одному, коллажа там нет. */
body.pdd .pdd-gallery__cell,
body.pdd .pdd-gallery__photos {
	display: none;
}

/* Листалка кадров — то, чем эталон показывает фото на телефоне
   (.gallery__track, main.css 1509). Полосу дописывает pdd-school.js
   и только когда кадров больше одного; пока её нет, виден родной
   .pdd-gallery__frame. Стрелок в эталоне нет: листается свайпом,
   место в полосе показывают точки и счётчик. */
body.pdd .pdd-card .pdd-gallery__track {
	display: flex;
	aspect-ratio: var(--gallery-aspect);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

body.pdd .pdd-card .pdd-gallery__track::-webkit-scrollbar {
	display: none;
}

body.pdd .pdd-card .pdd-gallery__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

body.pdd .pdd-card .pdd-gallery__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/* Родной кадр движка остаётся в разметке (по .image-ver-3
   frontend.js достаёт превью для полосы сравнения), но при
   собранной листалке не показывается. */
body.pdd .pdd-card .pdd-gallery:has(.pdd-gallery__track) .pdd-gallery__frame {
	display: none;
}

body.pdd .pdd-card .pdd-gallery__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--space-6);
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	pointer-events: none;
}

body.pdd .pdd-card .pdd-gallery__dot {
	width: 6px;
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

body.pdd .pdd-card .pdd-gallery__dot.is-active {
	opacity: 1;
}

body.pdd .pdd-card .pdd-gallery__counter {
	position: absolute;
	right: var(--space-6);
	bottom: var(--space-6);
	margin: 0;
	padding: var(--space-2) var(--space-5);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-medium);
	font-variant-numeric: tabular-nums;
	color: var(--color-text);
	background: var(--color-surface-glass);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
}

body.pdd .pdd-card .pdd-gallery__frame {
	display: block;
	position: relative;
	width: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	border-radius: var(--school-gallery-radius);
	overflow: hidden;
}

/* Пропорция кадра — токен прототипа (--gallery-aspect: 4 / 3).
   Движок вместо этого задаёт картинке жёсткие 225px по высоте. */
body.pdd .pdd-card .pdd-gallery__frame img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: var(--gallery-aspect);
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/* Логотип школы поверх снимка. Есть у 6 объектов из 8836 —
   правило почти всегда вхолостую, но вывод движка мы не убирали. */
body.pdd .pdd-card .pdd-gallery__logo {
	left: var(--space-5);
	bottom: var(--space-5);
	padding: var(--space-3);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

body.pdd .pdd-card .pdd-gallery__logo img {
	aspect-ratio: auto;
	height: auto;
}

/* Стрелки slick — в круглые кнопки прототипа (.round-button).
   Плагин рисует их своим CSS (thumbnail_gallery/assets/slider.css):
   квадрат 26×26 с фоном-стрелкой и тенью. Перекрашиваем размер
   и вид, саму иконку-фон оставляем — она из плагина. */
body.pdd .pdd-card .pdd-gallery .slick-prev,
body.pdd .pdd-card .pdd-gallery .slick-next {
	width: 36px;
	height: 36px;
	background-color: var(--color-surface);
	background-size: 20px;
	background-position: center;
	box-shadow: var(--shadow-float);
}

/* Круглая стрелка «назад» поверх фото — .round-button--back прототипа.
   Те же 36×36, та же тень и радиус, что у закладки справа: в эталоне
   это один компонент .round-button с двумя модификаторами. */
body.pdd .pdd-card .pdd-back {
	position: absolute;
	top: var(--space-6);
	left: var(--space-6);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var(--color-icon-strong);
	background: var(--color-surface);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-float);
}

body.pdd .pdd-card .pdd-back svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Круглая кнопка «в избранное» поверх фото — .round-button--favorite
   прототипа. Классы .favorite и .bookmark оставлены: на .bookmark
   висит обработчик frontend.js (стр. 944).

   Когда кнопка лежала в заголовке, её позиционировал чужой селектор
   .title-ver-3 .favorite.bookmark (position:absolute; right:0)
   из skin.css. Здесь он уже не срабатывает — заголовок не предок. */
body.pdd .pdd-card .pdd-fav {
	position: absolute;
	top: var(--space-6);
	right: var(--space-6);
	z-index: 1;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: var(--color-surface);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-float);
	cursor: pointer;
}

body.pdd .pdd-card .pdd-fav svg {
	width: 19px;
	height: 18px;
}

body.pdd .pdd-card .pdd-fav svg path {
	fill: var(--color-icon-strong);
}

body.pdd .pdd-card .pdd-fav.active svg path {
	fill: var(--color-rating-low);
}

/* Фото у объекта нет — кнопка остаётся в заголовке, как раньше.
   Тогда работает и чужое позиционирование из skin.css, и его
   надо погасить: заголовок у нас не relative. */
body.pdd .pdd-card .pdd-intro__title .pdd-fav {
	position: static;
	flex: 0 0 auto;
	box-shadow: none;
	background: none;
}

/* ------------------------------------------------------------
   3. ШАПКА: название, рейтинг, метро
   ------------------------------------------------------------ */
body.pdd .pdd-card .pdd-intro {
	display: flex;
	flex-direction: column;
	margin: var(--school-intro-margin);
	padding: var(--school-intro-pad);
	color: var(--school-intro-fg);
	background: var(--school-intro-bg);
	border-radius: var(--school-intro-radius);
	box-shadow: var(--school-section-shadow);
}

/* Заголовок. Чужие значения, которые перебиваем:
       .card-item-ver-3 .title-ver-3  font-size 21px, padding 0 70px 0 0
       (skin.css, (0,2,0)) — правый отступ был местом под кнопку
       закладки, которая теперь уехала на фото. */
body.pdd .pdd-card .pdd-intro__title {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	font-size: var(--school-title-size);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-title);
	color: var(--color-text);
	text-transform: none;
}

/* .intro__rating эталона — строка: звёзды, оценка, число отзывов.
   Движок кладёт всё это внутрь своего .rating, и без flex на обёртке
   строка считалась блоком, а её высота — по самому высокому элементу
   вместе с его внешними полями (замер: 25 против эталонных 20). */
body.pdd .pdd-card .pdd-intro__rating {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-5);
	font-size: var(--font-size-meta);
}

/* Вывод рейтинга — из get_object_rating_snippet(), разметку
   не трогаем: .rating > .rating_ball + .stars + .ratingCount.
   Звёзды переезжают на siteStars прототипа на этапе 2, здесь
   только раскладка и цвета. */
body.pdd .pdd-card .pdd-intro__rating .rating {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin: 0;
	/* своё поле в 2px по кругу — с ним строка шла 25px против 20 */
	padding: 0;
}

/* Оценка — той же плашкой, что в карточке листинга: число белым
   по цветному фону, 13px/600, поля 3/6, радиус 6. Со звездой
   псевдоэлемента карточка листинга обходится без ряда звёзд;
   здесь, на карточке школы, ряд звёзд оставлен — он идёт следом
   за плашкой, поэтому вторая звезда внутри неё лишняя.

   Своё внешнее поле у плашки сверху 2px — вместе с ним строка
   рейтинга шла 23px при эталонных 20. */
body.pdd .pdd-card .pdd-intro__rating .rating_ball {
	display: inline-flex;
	align-items: center;
	order: 1;
	margin: 0;
	padding: 3px var(--space-3);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
	color: var(--color-text-inverse);
	background-color: var(--color-rating-mid);
	border-radius: var(--radius-sm);
}

body.pdd .pdd-card .pdd-intro__rating .rating_ball .points {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

/* Ступени цвета — те же пороги, что в карточке листинга: 4,5 и 3,0
   (design2/assets/js/listing.js:160). Класс вешает скин. */
body.pdd .pdd-card .pdd-intro__rating .rating.pdd-rating--low .rating_ball {
	background-color: var(--color-rating-low);
}

body.pdd .pdd-card .pdd-intro__rating .rating.pdd-rating--mid .rating_ball {
	background-color: var(--color-rating-mid);
}

body.pdd .pdd-card .pdd-intro__rating .rating.pdd-rating--high .rating_ball {
	background-color: var(--color-rating-high);
}

/* Звёзды — вторыми, сразу за плашкой. Своё поле справа движок
   ставит с !important (25px), от него строка разъезжалась. */
body.pdd .pdd-card .pdd-intro__rating .stars {
	display: flex;
	align-items: center;
	order: 2;
	margin: 0 !important;
	flex-basis: auto;
}

/* «279 отзывов» — узел переименован скином из .ratingCount:
   там его держал skin.css плагина (цвет #444bd3 через !important,
   16px/500 и пузырёк фоном псевдоэлемента). Плагин обновляемый
   и в deny, поэтому уведён узел. Вместе с чужим классом ушёл
   и его order — без своего блок падал в 0 и вставал перед плашкой. */
body.pdd .pdd-card .pdd-intro__rating .pdd-intro__reviews {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	order: 3;
	margin: 0;
	padding: 0;
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
	white-space: nowrap;
}

body.pdd .pdd-card .pdd-intro__rating .pdd-intro__reviews a {
	/* внешнее поле ссылки в 2px сверху и снизу тянуло строку
	   рейтинга до 23px при эталонных 20 */
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	text-decoration: none;
}

/* Значок перед «N отзывов» — у движка он 20px и тянул строку
   рейтинга до 25 при эталонных 20. */
body.pdd .pdd-card .pdd-intro__rating .pdd-intro__reviews svg {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

body.pdd .pdd-card .pdd-intro__rating .pdd-intro__reviews a:hover {
	color: var(--color-primary);
}

body.pdd .pdd-card .pdd-intro__rating .pdd-intro__reviews svg path {
	fill: var(--color-icon);
}

/* «Нет рейтинга» — состояния под это в прототипе нет,
   поэтому просто приглушаем. */
body.pdd .pdd-card .pdd-intro__rating .no-rating {
	margin: 0;
	font-size: var(--font-size-caption);
	color: var(--color-text-muted);
}

/* Строка метро — .intro__row прототипа. Цвет линии метро движок
   ставит инлайном из _term_color, поэтому здесь только раскладка. */
body.pdd .pdd-card .pdd-intro__row {
	/* .intro__row эталона: строка-флекс с зазором 6 и без нижнего
	   поля — ритм держит margin-top следующей строки. У движка
	   абзацы идут с margin-bottom 10, и адрес отбивался лишним. */
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: var(--space-4) 0 0;
	font-size: var(--font-size-caption);
	color: var(--school-intro-muted);
}

body.pdd .pdd-card .pdd-intro__row .list-item-v3 {
	margin: 0;
}

/* ------------------------------------------------------------
   3a. СТРОКА РАЗДЕЛОВ

   .tabs прототипа (part-school-tabs): «Инфо · Цены · Отзывы»
   под названием школы, при нехватке места листается вбок,
   при прокрутке прилипает под шапку.

   Разметку печатает не PHP, а pdd-school.js: разделы «Цены»
   и «Отзывы» — это вкладки виджета tabs_pannel-7 из области
   content-object-<сегмент>, то есть данные в базе. Скин строит
   карточку раньше, чем движок разбирает область виджетов,
   и узнать оттуда, какие разделы у объекта есть, нечем.

   Прилипание сделано фиксированной полосой и распоркой, как
   в прототипе, а не position: sticky. Причина в чужой вёрстке:
   строка лежит внутри .pdd-card, а «Цены» и «Отзывы» движок
   печатает в соседнем .widgets-content — sticky отлип бы
   у нижнего края карточки, на середине страницы.
   ------------------------------------------------------------ */
body.pdd .pdd-card .pdd-tabs,
body.pdd .pdd-tabs.pdd-tabs--bar {
	order: 0;
	display: var(--school-tabs-display);
	gap: var(--school-tabs-gap);
	margin: var(--school-section-margin);
	padding: var(--school-tabs-pad);
	background: var(--school-tabs-bg);
	border-bottom: var(--school-tabs-border);
	overflow-x: auto;
	scrollbar-width: none;
}

/* Метка места полосы: по ней IntersectionObserver понимает, что
   место ушло под верхний край.

   Высоты не имеет, но элементом флекс-стопки остаётся, и зазор
   стопки на неё тратится — отсюда отрицательная отбивка ровно
   в этот зазор. Скрыть метку нельзя: display: none наблюдателем
   не виден вовсе, и полоса всплывала бы уже на первом экране.
   На телефоне зазор нулевой и отбивка ничего не делает. */
body.pdd .pdd-card .pdd-tabs-mark {
	order: 0;
	height: 0;
	margin-bottom: calc(-1 * var(--school-stack-gap));
}

body.pdd .pdd-card .pdd-tabs::-webkit-scrollbar,
body.pdd .pdd-tabs.pdd-tabs--bar::-webkit-scrollbar {
	display: none;
}

/* Копия полосы у верхнего края.

   Из потока не уходит ничто: оригинал остаётся на своём месте
   в карточке, а наверх всплывает клон, который pdd-school.js кладёт
   в body. Раньше на верх уезжала сама полоса, а её место держала
   распорка с высотой и отбивками от скрипта — раскладка пересобиралась
   на каждое переключение, и страница подрагивала вверх-вниз.

   Полоса всегда fixed и всегда на месте — меняются только transform
   и visibility. Раскладку это не трогает вовсе, сдвинуть страницу
   нечем даже в принципе.

   top ставит скрипт по высоте липкой шапки; на карточке шапка
   static, и там это 0. */
body.pdd .pdd-tabs.pdd-tabs--bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: auto;
	padding-inline: var(--page-padding);
	z-index: 3;
	margin: 0;
	box-shadow: var(--school-tabs-pinned-shadow);

	/* Шрифтовые токены карточка задаёт на себе (--font-size-micro: 12px),
	   а копия лежит в body — повторяем, иначе счётчик у копии крупнее. */
	--font-size-micro: 12px;

	transform: translateY(-100%);
	visibility: hidden;
	transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
	            visibility 0.26s;
}

/* Всплытие. Класс ставит pdd-school.js, когда место полосы ушло
   под верхний край и палец поехал вверх. */
body.pdd .pdd-tabs.pdd-tabs--bar.is-shown {
	transform: translateY(0);
	visibility: visible;
}

/* Кому движение мешает — тому мгновенно. */
@media (prefers-reduced-motion: reduce) {

	body.pdd .pdd-tabs.pdd-tabs--bar {
		transition-duration: 0.01s;
	}
}


body.pdd .pdd-card .pdd-tabs__item,
body.pdd .pdd-tabs--bar .pdd-tabs__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	flex: 0 0 auto;
	height: var(--school-tabs-item-height);
	font-size: var(--school-tabs-item-size);
	font-weight: var(--font-weight-semibold);
	color: var(--school-tabs-item-fg);
	text-decoration: none;
	border-bottom: var(--school-tabs-underline) solid transparent;
}

body.pdd .pdd-card .pdd-tabs__item:hover,
body.pdd .pdd-tabs--bar .pdd-tabs__item:hover {
	color: var(--school-tabs-active-fg);
}

body.pdd .pdd-card .pdd-tabs__item.is-active,
body.pdd .pdd-tabs--bar .pdd-tabs__item.is-active {
	color: var(--school-tabs-active-fg);
	border-bottom-color: var(--color-primary);
}

body.pdd .pdd-card .pdd-tabs__count,
body.pdd .pdd-tabs--bar .pdd-tabs__count {
	padding: 1px var(--space-3);
	font-size: var(--font-size-micro);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-secondary);
	background: var(--color-surface-muted);
	border-radius: var(--radius-pill);
}

/* ------------------------------------------------------------
   4. РЯД КНОПОК

   Класс .buttons-new оставлен: на нём держатся правила движка
   и наш блок 3.6 из main.css. Перебиваем у него раскладку:
       .page-template-newlisting .buttons-new  order 10,
                                               padding-left 303px
                                               (0,2,0) frontend.css
       .card-item-ver-3 .buttons-new           display grid
                                               (0,2,0) skin.css
   Наш селектор — (0,3,0).

   order: 0 здесь обязателен. Карточка у нас — flex-колонка, а движок
   ставит ряду кнопок order: 10, потому что в его вёрстке карточка
   тоже flex и кнопки должны падать в самый низ. У нас ряд стоит
   под названием, как в прототипе, и без сброса order он уезжал
   под секции «Контакты», «Время работы» и «Адрес».
   ------------------------------------------------------------ */
body.pdd .pdd-card .pdd-actions {
	order: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* frontend.css прижимает ряд вправо (.card-item-ver-3 .buttons-new
	   { justify-content: flex-end }) — на телефоне это незаметно, потому
	   что кнопка во всю ширину, а на широком экране она уезжала к правому
	   краю плашки. */
	justify-content: flex-start;
	gap: var(--space-4);
	margin: var(--school-actions-margin);
	padding: var(--school-actions-pad);
	background: var(--color-surface);
	/* волосяная линия под рядом — .actions прототипа (main.css, 1736).
	   На широком экране блок 15 заменяет её общей рамкой секции. */
	border-bottom: var(--school-actions-border, var(--border-width) solid var(--color-border));
	border-radius: var(--school-intro-radius);
	box-shadow: var(--school-section-shadow);
	min-height: 0;
	grid-template-columns: none;
	/* .page-template-newlisting .buttons-new задаёт width: 100%, и ряд
	   кнопок оставался 358 при вынесенных под края -16: ширина считалась
	   от контейнера, а не от собственной коробки */
	width: auto;
}

/* Кнопка «Записаться» — .button--primary прототипа: залитая,
   во всю ширину ряда.

   Кто её сейчас красит и почему нужен именно такой селектор:
       .page-template-newlisting .buttons-new button:not(.favorite)
       (0,3,1) в skin.css делает её контурной, и наш общий блок 3.6
       из main.css — body.pdd.page-template-newlisting .buttons-new
       button:not(.favorite), (0,4,1) — это поведение повторяет.
       Здесь (0,5,1): на класс .pdd-actions больше. */
body.pdd.page-template-newlisting .pdd-card .pdd-actions .btn_blue,
body.pdd.page-template-newlisting .pdd-card .pdd-actions button:not(.favorite) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	max-width: none;
	height: var(--control-height-button);
	/* у .btn_blue родительской темы min-height 48px — без ответа
	   кнопка держала 48 при заданных 46 */
	min-height: var(--control-height-button);
	margin: 0;
	padding: 0 var(--space-7);
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-semibold);
	/* .card-item-ver-3 .buttons-new button задаёт 120% (skin.css) —
	   у .button прототипа своего межстрочного нет, он наследует
	   базовый 1.45 от страницы (замер: 20px против 17). */
	line-height: var(--line-height-base);
	color: var(--color-text-inverse);
	background: var(--color-primary);
	/* рамки у залитой кнопки в эталоне нет; у движка она есть,
	   поэтому гасим явно, а не цветом в цвет заливки */
	border: 0;
	border-radius: var(--radius-lg);
}

body.pdd.page-template-newlisting .pdd-card .pdd-actions .btn_blue:hover,
body.pdd.page-template-newlisting .pdd-card .pdd-actions button:not(.favorite):hover {
	color: var(--color-text-inverse);
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
}

/* Кнопка сравнения — вторичная. На сегменте 1910 она выключена
   настройкой object_checkbox_compare_1910, но на других сегментах
   скин тоже может пригодиться. */
body.pdd.page-template-newlisting .pdd-card .pdd-actions .comparison_button,
body.pdd.page-template-newlisting .pdd-card .pdd-actions .comparison_button_del {
	flex: 0 1 auto;
	color: var(--color-text);
	background: var(--color-surface);
	border-color: var(--color-border);
}

/* Порядок кнопок в ряду. В эталоне (school.js, actionsTemplate)
   он такой: «Записаться» → «Позвонить» → «На карте», залитая
   кнопка идёт первой и тянется на всю свободную ширину.

   На листинге порядок обратный, и ровно под него frontend.css
   даёт order: 1 всему .buttons-new .btn_blue. На карточке школы
   это правило доставалось «Записаться» (order 1), а «На карте»
   оставалась в нулевом — ряд получался задом наперёд.
   Сбрасываем обеим явно; 1 оставлен под «Позвонить». */
body.pdd.page-template-newlisting .pdd-card .pdd-actions .btn_blue,
body.pdd.page-template-newlisting .pdd-card .pdd-actions button:not(.favorite):not(.pdd-actions__map) {
	order: 0;
}

body.pdd.page-template-newlisting .pdd-card .pdd-actions button.pdd-actions__map {
	order: 2;
}

/* «Позвонить» — середина ряда. Ссылка, а не кнопка: сброс порядка
   выше адресован тегу button, и <a> под него не попадает. */
body.pdd .pdd-card .pdd-actions .pdd-actions__call {
	order: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 1 auto;
	/* frontend.css (16081) держит `.page-template-newlisting .buttons-new a
	   { width: 50% }`. Соседние кнопки — теги <button>, и им width: auto
	   выдаёт блок «Записаться» выше; ссылка «Позвонить» под тот селектор
	   не попадала и оставалась ровно вдвое уже соседей (166 против 333,
	   замер 21.08.2026 на 1440). В эталоне (main.css, .actions
	   .button--secondary) своей ширины у кнопки нет — в колонке её тянет
	   align-items: stretch, в ряду ширина считается по содержимому. */
	width: auto;
	min-width: 0;
	max-width: none;
	align-self: stretch;
	gap: var(--space-3);
	/* Токена --school-action-height нет ни в одном файле, и работала
	   запасная 48: ряд выходил 77 при эталонных 75, а «Позвонить»
	   на 2px выше соседних кнопок (замер 19.08.2026 на 390).
	   Высота у всех трёх одна — --control-height-button.

	   min-height обязателен: движок держит `.page-template-newlisting
	   .buttons-new a { min-height: 48px }` (frontend.css) и
	   `.card-item-ver-3 .buttons-new a` (skin.css), а min-height
	   бьёт height. У соседних кнопок ряд <button> свою 46 уже
	   получил, ссылка оставалась 48. */
	height: var(--control-height-button);
	min-height: var(--control-height-button);
	padding: 0 var(--space-6);
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-base);
	color: var(--color-text);
	text-decoration: none;
	white-space: nowrap;
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
}

body.pdd .pdd-card .pdd-actions .pdd-actions__call:hover {
	color: var(--color-text);
	background: var(--color-surface-muted);
}

body.pdd .pdd-card .pdd-actions .pdd-actions__call svg {
	flex: 0 0 auto;
	color: var(--color-icon-strong);
}

/* «На карте» — .button--secondary прототипа. Кнопку добавляет
   pdd-school.js, и только если карта на странице есть: её печатает
   виджет object_on_map-<n> из области sidebar-object-<сегмент>.

   В селекторе обязателен тег button. Правило «Записаться» выше —
   это ... .pdd-actions button:not(.favorite), то есть (0,5,2):
   пять классов и два тега. Селектор без тега дал бы (0,5,1)
   и проиграл бы, несмотря на порядок в файле, — кнопка выходила
   залитой цветом марки (проверено who-wins.js 14.08.2026). */
body.pdd.page-template-newlisting .pdd-card .pdd-actions button.pdd-actions__map {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 1 auto;
	gap: var(--space-3);
	padding: 0 var(--space-6);
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-base);
	color: var(--color-text);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	white-space: nowrap;
}

body.pdd.page-template-newlisting .pdd-card .pdd-actions button.pdd-actions__map:hover {
	color: var(--color-text);
	background: var(--color-surface-muted);
	border-color: var(--color-border);
}

body.pdd .pdd-card .pdd-actions .pdd-actions__map svg {
	flex: 0 0 auto;
	color: var(--color-icon-strong);
}

/* ------------------------------------------------------------
   5. СЕКЦИИ: общий вид

   .section прототипа. Внутри — готовые строки конструктора
   (.list-item-v3), их разметку печатает движок.
   ------------------------------------------------------------ */
body.pdd .pdd-card .pdd-section {
	margin: var(--school-section-margin);
	padding: var(--school-section-pad);
	background: var(--school-section-bg);
	/* border-block, а не border: в эталоне рамка только сверху и снизу
	   (main.css, .section). Рамка по всем четырём сторонам съедала
	   по 1px слева и справа — внутренняя ширина выходила 356 вместо
	   эталонных 358, и на это расхождение уезжали все вложенные строки. */
	border-block: var(--school-section-border);
	border-radius: var(--school-section-radius);
	box-shadow: var(--school-section-shadow);
}

body.pdd .pdd-card .pdd-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--school-section-head-margin);
}

body.pdd .pdd-card .pdd-section__title {
	/* frontend.css делает h2 флексом — в эталоне это обычный блок */
	display: block;
	margin: 0;
	padding: 0;
	/* line-height задан явно: у заголовков движка он 1.6, эталон 1.45,
	   и строка названия секции была на 10px выше нужного */
	line-height: var(--line-height-base);
	font-size: var(--school-section-title-size);
	font-weight: var(--school-section-title-weight);
	color: var(--school-section-title-fg);
	text-transform: var(--school-section-title-transform);
	letter-spacing: var(--school-section-title-spacing);
}

/* Строки внутри секции. У движка .list-item-v3 — flex с
   margin-bottom 12px (skin.css) и переносом (frontend.css).
   Оставляем flex, меняем только ритм и цвет. */
body.pdd .pdd-card .pdd-section__body .list-item-v3 {
	margin: 0;
	font-size: var(--font-size-caption);
	color: var(--color-text-secondary);
}

body.pdd .pdd-card .pdd-section__body .list-item-v3 + .list-item-v3 {
	margin-top: var(--space-4);
}

body.pdd .pdd-card .pdd-section__body .title-list-item-v3 {
	margin-right: var(--space-3);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}

body.pdd .pdd-card .pdd-section__body .text-list-item-v3 {
	font-size: var(--font-size-caption);
}

/* ------------------------------------------------------------
   6. КОНТАКТЫ

   Порядок эталона: телефон строкой, ряд мессенджеров, сайт школы
   строкой, ряд соцсетей. Разметку собирает скин
   (contacts_section()) прямо из значений конструктора: движок
   печатает все input_icon_link одной кучей — tg, whatsapp,
   youtube, inst, vk, fb, twit, vb, ok, — и мессенджеры от
   соцсетей в этой куче не отделить.

   Телефона в конструкторе сегмента 1910 нет вовсе (проверено
   по constructor_cf 1910), поэтому строка телефона появляется
   только у объектов со ссылкой tel: в stuff_meta_href_*.
   ------------------------------------------------------------ */
body.pdd .pdd-card .pdd-contacts {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

body.pdd .pdd-card .pdd-contacts__line {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	padding: var(--space-3) 0;
	/* Цвет ссылки движка (#5e73e2) на строку не переносится: в эталоне
	   .contacts__site идёт основным цветом текста, синим набран только
	   сам домен внутри (.contacts__value). */
	color: var(--color-text);
	text-decoration: none;
}

body.pdd .pdd-card .pdd-contacts__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--color-primary);
}

body.pdd .pdd-card .pdd-contacts__text {
	min-width: 0;
}

body.pdd .pdd-card .pdd-contacts__value {
	display: block;
	/* 15/600 — числом: --font-size-card-title на карточке школы
	   поднят до 17 (блок 1), а в эталоне у .contacts__value
	   базовые 15. */
	font-size: 15px;
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-base);
	color: var(--color-primary);
	overflow-wrap: anywhere;
}

body.pdd .pdd-card .pdd-contacts__note {
	display: block;
	margin-top: var(--space-1);
	/* 12 числом: --font-size-caption на карточке школы равен 13. */
	font-size: 12px;
	line-height: var(--line-height-base);
	color: var(--color-text-muted);
}

body.pdd .pdd-card .pdd-contacts__chevron {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--color-icon);
}

/* Мессенджеры — плитки во всю ширину секции, поровну.
   WhatsApp, Telegram и Viber, и только они: это способ написать,
   а не страница школы. */
body.pdd .pdd-card .pdd-contacts__messengers {
	display: flex;
	gap: var(--space-4);
}

/* Мессенджер — плитка 52x46 со значком и без подписи: в эталоне
   (main.css 2544) ширину и показ подписи держат токены
   --school-messenger-* и --school-messenger-label-display.
   Токены у нас были заведены, но к правилу не подключены —
   плитка растягивалась на всю строку и несла текст «Telegram». */
body.pdd .pdd-card .pdd-messenger {
	display: inline-flex;
	flex: var(--school-messenger-grow) 1 auto;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	min-width: 0;
	width: var(--school-messenger-width);
	height: var(--school-messenger-height);
	padding: var(--school-messenger-pad);
	/* 13 числом: --font-size-meta на карточке школы равен 14. */
	font-size: 13px;
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
	text-decoration: none;
	background: var(--color-surface-muted);
	border-radius: var(--radius-md);
}

/* Иконки берутся из настроек полей конструктора (attachment id),
   то есть это картинки, а не svg: размер задаём коробке. */
body.pdd .pdd-card .pdd-messenger .pdd-contacts__glyph {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	object-fit: contain;
}

body.pdd .pdd-card .pdd-messenger__label {
	display: var(--school-messenger-label-display);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Иконки взять неоткуда — показываем подпись. Иконка приходит из
   constructor_cf термина сегмента, и у 1912 там всего три поля
   (phone, phone_add, site): чип оставался пустой серой плашкой
   52×46 со ссылкой. Модификатор вешает скин, когда
   constructor_icon() вернул ''. */
body.pdd .pdd-card .pdd-messenger--bare {
	width: auto;
	padding-inline: var(--space-5);
}

body.pdd .pdd-card .pdd-messenger--bare .pdd-messenger__label {
	display: inline;
}

body.pdd .pdd-card .pdd-contacts__social {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

body.pdd .pdd-card .pdd-contacts__social-title {
	margin: 0;
	font-size: 12px;
	line-height: var(--line-height-base);
	color: var(--color-text-muted);
}

body.pdd .pdd-card .pdd-contacts__social-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

body.pdd .pdd-card .pdd-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--school-social-size);
	height: var(--school-social-size);
	max-height: none;
	padding: 0;
	color: var(--school-social-fg);
	background: var(--school-social-bg);
	border-radius: var(--school-social-radius);
}

body.pdd .pdd-card .pdd-social-link .pdd-contacts__glyph {
	width: 19px;
	height: 19px;
	object-fit: contain;
}

/* Подпись соцссылки печатается всегда, а видна только когда иконки
   нет: без неё квадрат 36×36 был пустым. Скрывается CSS, а не
   отсутствием узла, потому что решение принимает каскад, а не PHP. */
body.pdd .pdd-card .pdd-social-link__label {
	display: none;
}

body.pdd .pdd-card .pdd-social-link--bare {
	width: auto;
	padding-inline: var(--space-5);
	gap: var(--space-4);
	/* 13 числом — как у чипа мессенджера выше. */
	font-size: 13px;
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
	text-decoration: none;
}

body.pdd .pdd-card .pdd-social-link--bare .pdd-social-link__label {
	display: inline;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ------------------------------------------------------------
   7. ВРЕМЯ РАБОТЫ

   Бейдж «Открыто · Закроется в 18:00» движок уже печатает
   плашкой-пилюлей (.working-hours-status в frontend.css) и красит
   через собственные переменные --working-hours-status-bg/-color.
   Это одни из трёх CSS-переменных, которые у движка вообще есть
   (разбор токенов от 14.08). Поэтому вид бейджа меняем не
   правилами, а подменой этих двух переменных на токены прототипа —
   .status прототипа выглядит ровно так же.
   ------------------------------------------------------------ */
body.pdd .pdd-card .working-hours-status {
	font-size: var(--school-status-size);
	font-weight: var(--font-weight-semibold);
	border-radius: var(--school-status-radius);
}

body.pdd .pdd-card .working-hours-status-open,
body.pdd .pdd-card .working-hours-status--open {
	--working-hours-status-bg: rgb(var(--color-rating-high-rgb) / 0.1);
	--working-hours-status-color: var(--school-status-open-fg);
}

/* «Закрыто» и «Закрыто на обед» — движок различает их своими
   классами. Красный токен прототипа берём только для закрытого,
   обеденный оранжевый у движка и так близок к --color-rating-mid. */
body.pdd .pdd-card .working-hours-status-closed,
body.pdd .pdd-card .working-hours-status--closed {
	--working-hours-status-color: var(--school-status-closed-fg);
}

/* Бейдж переехал в заголовок секции — так он стоит в эталоне
   (.status--in-head справа от «Время работы»). */
body.pdd .pdd-card .pdd-section--hours .pdd-hours__status {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

/* Сводка графика — свободная строка поля 'time' («ежедневно,
   10:00–20:00»). В эталоне это .hours__summary: иконка часов
   и текст вторичным цветом. */
body.pdd .pdd-card .pdd-hours__summary {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin: 0 0 var(--space-3);
	font-size: 13px;
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

body.pdd .pdd-card .pdd-hours__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	color: var(--color-icon);
}

/* График по дням. Данные есть: поле workinghours — это JSON
   с ключами 1..7, движок печатает из него только бейдж.
   Строки собирает скин (hours_section()). */
/* На телефоне список по дням в эталоне скрыт: там видна одна
   строка-сводка «пн-пт 10:00–18:00», а раскладка по дням приходит
   с широкого экрана (tokens.css: --school-hours-list-display: none,
   school-web.css 218: block). Токен у нас был заведён, но к списку
   не подключён — график занимал лишние 240px высоты. */
body.pdd .pdd-card .pdd-hours {
	display: var(--school-hours-list-display);
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.pdd .pdd-card .pdd-hours__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	margin: 0;
	padding: var(--space-4) 0;
	/* 12 числом: --font-size-caption на карточке школы равен 13. */
	font-size: 12px;
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

body.pdd .pdd-card .pdd-hours__row + .pdd-hours__row {
	border-top: 1px solid var(--color-border-soft, rgba(11, 11, 15, 0.06));
}

/* Сегодняшний день — жирным и основным цветом, как в эталоне. */
body.pdd .pdd-card .pdd-hours__row--today {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}

body.pdd .pdd-card .pdd-hours__row--off .pdd-hours__time {
	color: var(--color-text-muted);
}

body.pdd .pdd-card .pdd-hours__row--today.pdd-hours__row--off .pdd-hours__time {
	color: inherit;
}

body.pdd .pdd-card .pdd-hours__lunch {
	display: block;
	font-size: var(--font-size-micro);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-muted);
	text-align: right;
}

/* ------------------------------------------------------------
   8. АДРЕС, КАРТА И МАРШРУТ

   В эталоне это один блок: адрес, под ним карта, под картой
   кнопка «Построить маршрут». У движка карта — отдельный виджет
   object_on_map-3 в области sidebar-object-1910, то есть данные
   в базе. Переносит его в гнездо .pdd-address__map скрипт
   pdd-school.js; выключат виджет — гнездо останется пустым
   и схлопнется (:empty ниже).
   ------------------------------------------------------------ */
body.pdd .pdd-card .pdd-address__value {
	margin: 0;
	font-size: 14px;
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-base);
	color: var(--color-text);
}

/* Гнездо карты. Высота задана гнезду, а не виджету: у .sidebar-map
   свои поля и высота приходят из родительской темы селектором с id
   и частью через !important — спорить с ними дороже, чем задать
   коробку самим и обрезать лишнее. */
body.pdd .pdd-card .pdd-address__map {
	height: var(--school-map-height, 200px);
	margin-top: var(--space-6);
	overflow: hidden;
	border-radius: var(--radius-md);
}

body.pdd .pdd-card .pdd-address__map:empty {
	display: none;
}

/* Пелена загрузки карты. `.map-loading` движка — position: absolute
   на все 100% (frontend.css, стр. 21089), а точки отсчёта у неё нет:
   ни гнездо, ни сам виджет не позиционированы. Ближайшим
   позиционированным предком оказывалась липкая колонка
   #sidebar.object_side, и серая пелена со спиннером растягивалась
   на ВСЮ колонку — «Записаться», «Контакты», «Время работы»
   и «Адрес» на время загрузки карты уходили под неё.
   Точку отсчёта даём самому виджету: пелена остаётся в границах карты. */
body.pdd.single-messia_object .sidebar-map,
body.pdd .pdd-card .pdd-address__map .sidebar-map {
	position: relative;
}

/* Заголовок виджета («Объект на карте») внутри блока адреса
   лишний: секция уже подписана. Узел остаётся — его печатает
   виджет, и прятать его правилом дешевле, чем трогать настройку
   в базе. */
body.pdd .pdd-card .pdd-address__map .title_side,
body.pdd .pdd-card .pdd-address__map .home-map-button {
	display: none;
}

/* Плашка виджета внутри блока адреса не нужна: белый фон, поля
   и тень ей задаёт родительская тема селектором с id
   (#sidebar .sidebar-map), а id специфичностью классами
   не перебивается — поэтому id в селекторе и у нас. Второй,
   без id, нужен для телефона: там блок адреса лежит в карточке,
   а не в боковой колонке. */
/* Поле в 12px виджету даёт родительская тема; margin у него
   свободен — им поле и съедается. В эталоне на месте карты
   статичная плашка в 132px; живой карте столько мало, высота
   гнезда выше — 200. Число одно, менять им. */
body.pdd #sidebar .pdd-address__map .sidebar-map,
body.pdd .pdd-card .pdd-address__map .sidebar-map {
	display: block;
	/* +24 — те самые поля, которые снаружи съедены margin'ом:
	   без добавки карта теряла бы их по высоте. */
	height: calc(100% + 24px);
	margin: -12px;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

body.pdd #sidebar .pdd-address__map .ym-container,
body.pdd .pdd-card .pdd-address__map .ym-container {
	width: 100%;
	height: 100%;
	border-radius: var(--radius-md);
}

/* «Построить маршрут» — кнопка-пилюля эталона: 32 в высоту,
   поля 12, мягкий фон основного цвета. */
body.pdd .pdd-card .pdd-address__route {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	height: 32px;
	margin-top: var(--space-5);
	padding: 0 var(--space-6);
	font-size: 13px;
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary);
	text-decoration: none;
	background: var(--color-primary-soft);
	border-radius: var(--radius-pill);
}

body.pdd .pdd-card .pdd-address__route svg {
	flex: 0 0 auto;
}

/* ------------------------------------------------------------
   9. ПРОМО И ТЕКСТ ОПИСАНИЯ

   Промо-плашку (.promo-ver-3) печатает движок из поля input_promo,
   у неё свой обработчик копирования купона по data-copy.
   Текст описания оставлен в .the_content: по нему frontend.js
   (стр. 1408) вешает сворачивание.
   ------------------------------------------------------------ */
body.pdd .pdd-card .pdd-promo {
	padding: var(--school-section-pad);
	background: var(--color-surface);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-card);
}

body.pdd .pdd-card .the_content {
	padding: var(--school-section-pad);
	background: var(--color-surface);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-card);
	font-size: var(--font-size-caption);
	color: var(--color-text-secondary);
}

/* Чипы категорий от плагина category_tags. Он вешается на хук
   messia_object_02_card_before_content и красит чипы инлайном
   с !important — цвет не трогаем, только посадку в новую сетку.
   Терминов с флагом «использовать как тег» в базе сейчас нет,
   так что правило пока вхолостую. */
body.pdd .pdd-card .category_tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	padding: 0 var(--space-6);
}

/* ------------------------------------------------------------
   10. ВКЛАДКИ «ЦЕНЫ · ОТЗЫВЫ»

   Печатает их не код, а виджет tabs_pannel-7 из области
   content-object-1910 — это данные в базе. Разметка виджета:

       .widgets-content > .tabs_pannel-7 > .tabs_object
           > .navs_over > ul.nav.nav-tabs > li > h2
           > .tab-content > .tab-pane

   Сама лента вкладок здесь НЕ трогается, и это не забывчивость.
   skin.css задаёт .tabs_object .nav li h2 через !important семь
   раз подряд (padding, border-bottom, background, color,
   font-size, font-weight, margin) и ещё раз у .active.
   Специфичностью !important не перебивается, а свой !important
   в дочерней теме ставить нельзя. Подробности и путь наружу —
   в отчёте потока B.

   Поэтому здесь только то, что чужой !important не занял:
   плашка панели и заголовок панели цен.
   ------------------------------------------------------------ */

/* Блок вкладок — такая же секция страницы, как «Контакты»
   и «Адрес»: на телефоне во всю ширину экрана, на широком —
   плашкой в колонке. Движок печатает его внутри .content
   с полем 16px, поэтому выносим под края тем же способом,
   что и блоки карточки (блок 1a). */
body.pdd .widgets-content,
body.pdd .pdd-similar {
	/* Свой вынос, а не --school-bleed: тот объявлен у .pdd-card,
	   а эти два блока ей соседи, а не потомки. Значения секций
	   (--school-section-*) оба берут из :root — там как раз
	   телефонные; подмену на широком экране см. блок 15. */
	--school-widgets-bleed: calc(-1 * var(--page-padding));

	/* Тот же шрифтовой набор, что у .pdd-card: в эталоне он задан
	   на всю страницу школы (.app--detail), а не на верхний блок,
	   и без повтора строки прайса шли на 15px против эталонных 13. */
	--font-size-card-title: 17px;
	--font-size-price: 17px;
	--font-size-caption: 13px;
	--font-size-meta: 14px;
	--font-size-micro: 12px;

	margin-inline: var(--school-widgets-bleed);
}

/* Панели идут стопкой, а не вкладками: в эталоне «Цены» и «Отзывы» —
   две отдельные секции страницы, одна под другой (.block--services,
   ниже .block--reviews), и переключать там нечего.

   Поэтому лента вкладок скрыта, а плашка снята с .tabs_object
   и надета на каждую панель: иначе обе лежали бы в одной белой
   коробке без зазора между ними. */
body.pdd .widgets-content .tabs_object {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
	background: none;
	border: 0;
	border-radius: 0;
}

body.pdd .widgets-content .tabs_object .navs_over {
	display: none;
}

/* Виджет в области есть, а панелей в нём нет — блок не выводим.
   Так на сегменте 1912 (Мотошколы): tabs_pannel-8 печатает пустые
   <ul class="nav-tabs"></ul> и <div class="tab-content"></div>,
   и на странице оставалась белая полоса в 63px ни о чём.
   Это данные, а не вёрстка: пустой виджет заведён в области
   content-object-1912. */
body.pdd .widgets-content .tabs_object:not(:has(.tab-content > .tab-pane)) {
	display: none;
}

/* Обёртка панелей. Стопкой их держит она: колонка с зазором 16,
   как между секциями эталона. Поля у неё свои не задаются — см.
   ниже, их съедают сами панели. */
body.pdd .widgets-content .tabs_object .tab-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
	color: var(--color-text);
}

/* Каждая панель — своя секция страницы: белая плашка с рамкой
   и скруглением, как «Контакты» и «Адрес».

   display и opacity заданы явно: панель без .show бутстрап гасит
   (.tab-content > .tab-pane { display: none }, .fade { opacity: 0 }),
   а стопке нужны обе разом. Своего !important у этих двух свойств
   в чужом CSS нет — хватает специфичности.

   Отрицательные поля съедают чужое поле обёртки: .widgets-content
   .tab-content держит padding: 27px 35px !important (skin.css
   плагина messia_redesign, стр. 1164 и 5363). !important
   специфичностью не берётся, а свой в дочерней теме ставить нельзя —
   он в теме ровно один, на фоне body. Компенсировать приходится
   на панелях: у самой обёртки поле чем-то держится в нуле, и
   отрицательное поле на ней не встаёт. По вертикали компенсируют
   крайние панели, между собой они разведены gap'ом обёртки. */
body.pdd .widgets-content .tabs_object .tab-content > .tab-pane {
	display: block;
	opacity: 1;
	margin: 0 -35px;
	padding: var(--school-section-pad, var(--space-7) var(--page-padding));
	background: var(--color-surface);
	border-top: var(--school-section-border);
	border-bottom: var(--school-section-border);
	border-radius: var(--school-section-radius);
}

body.pdd .widgets-content .tabs_object .tab-content > .tab-pane:first-child {
	margin-top: -27px;
}

body.pdd .widgets-content .tabs_object .tab-content > .tab-pane:last-child {
	margin-bottom: -27px;
}

/* Заголовок панели. У цен он размечен как .h4, у отзывов — как .h2,
   и .h2 из skin.css (стр. 2981) тянул «Отзывы» на 32px/700 цветом
   #2a2a2a. В прототипе обе панели подписаны одним .section__title. */
body.pdd .widgets-content .h2.object_alt_tab_title,
body.pdd .widgets-content .h4.object_alt_tab_title {
	margin: 0 0 var(--space-5);
	padding: 0;
	font-size: var(--font-size-section);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
	letter-spacing: var(--letter-spacing-title);
	color: var(--color-text);
}

/* ------------------------------------------------------------
   11. ЦЕНЫ — шорткод [object_pricing]

   Печатает Messia_Shortcodes::get_object_pricing() из поля
   messia_pricing_display (заполнено у 4918 объектов из 8836;
   у Форсажа пусто, поэтому вкладки «Цены» у него нет вовсе —
   пустую панель движок пропускает сам). Проверялось на
   /driving/b/avtoshkola-1/.

   Разметка движка:
       ul.service-table > li
           > span.title        «Название <br> уточнение»
           > span.prices-span
               > span.price[.has_discount]
               > span.discount_price

   Прототип (part-school-services): .service — строка с
   разделителем сверху, слева название и пояснение, справа цена.
   Кнопки «Выбрать» у движка в разметке нет, и взять её негде:
   заявки на отдельную услугу в движке не существует, форма
   записи одна на объект и уже стоит под названием школы.

   Что перебиваем (ни у одного из этих правил !important нет,
   значит хватает специфичности):
       .service-table               font-size 16px          skin.css
       .service-table li            padding 16px 0,
                                    border-bottom 1px       skin.css
       .service-table li:last-child background #4e47ff,
                                    color #fff              skin.css
   Последнее — заливка последней строки прайса сплошным
   фиолетовым: в старой палитре это был акцент, в новой вёрстке
   читается как ошибка, поэтому гасится.
   ------------------------------------------------------------ */
body.pdd .widgets-content .service-table {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	font-size: var(--font-size-caption);
	list-style: none;
}

body.pdd .widgets-content .service-table li {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	/* у li в списке движка свой размер — без ответа строка шла 15px */
	font-size: inherit;
	margin: 0;
	padding: var(--space-5) 0;
	background: none;
	color: var(--color-text);
	border-bottom: 0;
	border-top: var(--border-width) solid var(--color-border);
}

body.pdd .widgets-content .service-table li:first-child {
	padding-top: 0;
	border-top: 0;
}

body.pdd .widgets-content .service-table li:last-child {
	background: none;
	color: var(--color-text);
}

/* Название услуги. Вторую строку (термин спецификации) движок
   отделяет тегом <br>, отдельного класса у неё нет — поэтому
   размер один на обе строки, различаются только вес и цвет
   от остального в строке. */
body.pdd .widgets-content .service-table li .title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--font-size-meta);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
	color: var(--color-text);
}

body.pdd .widgets-content .service-table li .prices-span {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-2);
	text-align: right;
}

body.pdd .widgets-content .service-table li .price {
	font-size: var(--font-size-price);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-title);
	white-space: nowrap;
	color: var(--color-text);
}

/* Есть скидка — обычная цена уходит в мелкий серый с зачёркиванием,
   акцент забирает .discount_price. Класс has_discount движок вешает
   сам, когда поле скидки заполнено. */
body.pdd .widgets-content .service-table li .price.has_discount {
	font-size: var(--font-size-micro);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-muted);
	text-decoration: line-through;
}

body.pdd .widgets-content .service-table li .discount_price {
	font-size: var(--font-size-price);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-title);
	white-space: nowrap;
	color: var(--color-text);
}

/* ------------------------------------------------------------
   12. ВИДЕО-ВИЗИТКА

   Кнопку печатает плагин messia_video на хуке
   messia_object_after_image-ver-3, который скин уже зовёт внутри
   .pdd-gallery. Поле Carbon Fields messia_video_url в базе не
   заполнено ни у одного объекта из 8836 — правило вхолостую,
   и включать блок нечем: нет ссылки — плагин молчит, дыры
   в вёрстке не остаётся.

   Свой вид кнопки плагин задаёт дважды, и оба правила весят
   (0,2,0), потому что оба класса висят на одном body:
       .page-template-newlisting .messia-video-button — кружок
           «плей» абсолютом в углу фото
       .messia_object-template-default .messia-video-button —
           оранжевая пилюля с подписью, position: relative,
           margin: 0 auto 20px
   Побеждает вторая (ниже в файле), и пилюля встаёт отдельной
   строкой под фото, растягивая рамку галереи. Возвращаем её
   на фото — в нижний левый угол, как «N фото» в прототипе.
   Наш селектор (0,4,1), с запасом.
   ------------------------------------------------------------ */
body.pdd .pdd-card .pdd-gallery .messia-video-button {
	position: absolute;
	left: var(--space-5);
	bottom: var(--space-5);
	z-index: 1;
	margin: 0;
	padding: var(--space-3) var(--space-5);
	gap: var(--space-2);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
	color: var(--color-text);
	background: var(--color-surface);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-float);
	text-decoration: none;
}

body.pdd .pdd-card .pdd-gallery .messia-video-button::before {
	width: 16px;
	height: 16px;
	background-size: contain;
}

/* Логотип школы стоит в том же углу — когда есть и он, и видео,
   логотип уходит вправо. Логотипов в базе шесть, видео ноль,
   так что правило на будущее. */
body.pdd .pdd-card .pdd-gallery:has(.messia-video-button) .pdd-gallery__logo {
	left: auto;
	right: var(--space-5);
}

/* ------------------------------------------------------------
   13. ПОХОЖИЕ АВТОШКОЛЫ

   Блок печатает штатный виджет Messia_Widget_Recommendations,
   которому скин сам подбирает соседей (тот же сегмент, тот же
   город, дальше по числу отзывов). Разметку виджета перехватывает
   плагин messia_redesign фильтром messia_shortcode_recommendations
   и печатает свою — её и разбираем:

       .reccommendations-widget-redesign
           > .recommendation-item[data-post-id]
               > .recommendation-item__header
                   > .recommendation-item__header__title  (фото)
                   > .recommendation-item__header__title  (ссылка)

   Оба вложенных блока с одним и тем же классом — различаем их
   порядком. Цены, метро и рейтинга в этой разметке нет: плагин
   их не печатает, а дописать нечем — свой фильтр получил бы
   управление уже после чужого echo. Поэтому карточка соседа —
   фото и название, то есть прототип минус нижняя строка.

   Полоса — карусель прототипа: прокрутка вбок и вынос под края
   экрана (--similar-bleed).
   ------------------------------------------------------------ */
body.pdd .pdd-similar {
	margin-top: var(--space-3);
	padding: var(--school-section-pad);
	background: var(--school-section-bg);
	border-top: var(--school-section-border);
	border-bottom: var(--school-section-border);
	border-radius: var(--school-section-radius);
	box-shadow: var(--school-section-shadow);
}

body.pdd .pdd-similar .pdd-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--school-section-head-margin);
}

body.pdd .pdd-similar .pdd-section__title {
	display: block;
	margin: 0;
	padding: 0;
	/* h2 в frontend.css идёт с межстрочным вдвое — заголовок держал
	   27px при эталонных 19. */
	line-height: var(--line-height-base);
	font-size: var(--school-section-title-size);
	font-weight: var(--school-section-title-weight);
	color: var(--school-section-title-fg);
	text-transform: var(--school-section-title-transform);
	letter-spacing: var(--school-section-title-spacing);
}

body.pdd .pdd-similar .reccommendations-widget-redesign {
	display: var(--similar-display);
	flex-direction: var(--similar-direction);
	gap: var(--similar-gap);
	margin-inline: calc(-1 * var(--similar-bleed));
	padding-inline: var(--similar-bleed);
	overflow-x: var(--similar-overflow);
	scroll-snap-type: var(--similar-snap);
	scrollbar-width: none;
}

body.pdd .pdd-similar .reccommendations-widget-redesign::-webkit-scrollbar {
	display: none;
}

body.pdd .pdd-similar .recommendation-item {
	position: relative;
	display: flex;
	flex: 0 0 var(--similar-card-width);
	flex-direction: column;
	gap: var(--similar-card-gap);
	min-width: 0;
	margin: 0;
	padding: var(--similar-card-pad);
	background: var(--similar-card-bg);
	border: var(--similar-card-border);
	border-radius: var(--similar-card-radius);
	box-shadow: var(--similar-card-shadow);
	scroll-snap-align: start;
}

body.pdd .pdd-similar .recommendation-item__header {
	display: flex;
	flex-direction: column;
	gap: var(--similar-card-gap);
	min-width: 0;
}

/* Первый .recommendation-item__header__title — фото */
body.pdd .pdd-similar .recommendation-item__header__title:first-child {
	position: relative;
	width: var(--similar-media-width);
	aspect-ratio: var(--similar-media-aspect);
	overflow: hidden;
	border-radius: var(--similar-media-radius);
	background: var(--color-photo-stub);
}

body.pdd .pdd-similar .recommendation-item__header__title:first-child img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Второй — название ссылкой */
body.pdd .pdd-similar .recommendation-item__header__title:last-child {
	min-width: 0;
	padding: 0 var(--space-5) var(--space-2);
	font-size: var(--similar-name-size);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
	color: var(--similar-body-fg);
}

/* Ссылка растягивается на всю карточку: в прототипе кликается
   карточка целиком, а плагин делает ссылкой только название.
   Разметку плагина не трогаем — обходимся псевдоэлементом. */
body.pdd .pdd-similar .recommendation-item__footer__link {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--similar-name-lines);
	overflow: hidden;
	color: var(--similar-body-fg);
	text-decoration: none;
}

body.pdd .pdd-similar .recommendation-item__footer__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--similar-card-radius);
}

body.pdd .pdd-similar .recommendation-item:hover {
	box-shadow: var(--shadow-hover);
}

body.pdd .pdd-similar .recommendation-item:hover .recommendation-item__footer__link {
	color: var(--color-primary);
}

/* ------------------------------------------------------------
   14. ЛИПКАЯ НИЖНЯЯ ПОЛОСА

   Блок part-school-cta-bar прототипа: «Позвонить», «Записаться»
   и ряд иконок. Телефона в данных сегмента 1910 нет вовсе, поэтому
   кнопки «Позвонить» здесь нет и быть не может — полоса собирается
   из того, что на странице действительно есть: кнопка записи,
   мессенджеры из секции «Контакты» и ссылка «Маршрут».

   Разметку собирает assets/js/pdd-school.js клонированием уже
   выведенных движком элементов: своей разметки в PHP нет, и если
   клонировать нечего — полосы не появляется вовсе. Кнопка записи
   после клонирования работает: обработчик .listing_popup_button
   навешан делегированием на body.

   Полоса только на телефоне и планшете: на широком экране ряд
   кнопок виден и так, прототип гасит её токеном --sw-ctabar-display.
   ------------------------------------------------------------ */
body.pdd .pdd-ctabar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: var(--school-cta-gap);
	padding: var(--space-5) var(--page-padding)
	         calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
	background: var(--color-surface);
	box-shadow: var(--shadow-tabbar);
	transform: translateY(100%);
	visibility: hidden;
	transition: transform 0.22s ease-out, visibility 0.22s;
}

/* Класс ставит pdd-school.js, когда ряд кнопок карточки ушёл
   за верхний край экрана, и снимает у подвала. */
body.pdd .pdd-ctabar.is-shown {
	transform: translateY(0);
	visibility: visible;
}

/* Клон кнопки записи. Чужие правила на неё уже не действуют:
   .page-template-newlisting .buttons-new button:not(.favorite)
   требует предка .buttons-new, а здесь его нет — поэтому вид
   задаём целиком. */
body.pdd .pdd-ctabar__enroll {
	flex: 1 1 auto;
	display: block;
	width: auto;
	min-width: 0;
	height: var(--control-height-button);
	margin: 0;
	padding: 0 var(--space-6);
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-inverse);
	background: var(--color-primary);
	border: var(--border-width) solid var(--color-primary);
	border-radius: var(--radius-lg);
	cursor: pointer;
}

/* Клон кнопки звонка — главная кнопка полосы, как в эталоне
   (.cta-bar__call: залита цветом марки, flex: 1, ряд иконок без
   телефона; main.css:2789). В ряду действий та же ссылка выглядит
   вторичной — белой с рамкой, — поэтому вид здесь задаём заново. */
body.pdd .pdd-ctabar__call {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	min-width: 0;
	height: var(--control-height-button);
	padding: 0 var(--space-7);
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-base);
	color: var(--color-text-inverse);
	text-decoration: none;
	white-space: nowrap;
	background: var(--color-primary);
	border: var(--border-width) solid var(--color-primary);
	border-radius: var(--radius-lg);
}

body.pdd .pdd-ctabar__call:hover {
	color: var(--color-text-inverse);
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
}

/* Иконка внутри — белая по заливке, а не серая, как в ряду действий. */
body.pdd .pdd-ctabar__call svg {
	flex: 0 0 auto;
	color: currentColor;
}

/* Две залитых кнопки рядом эталон не ставит: когда номер есть,
   видна «Позвонить», а «Записаться» гаснет (--school-cta-enroll-display
   в school-web.css). Номера нет — полоса собирается как раньше. */
body.pdd .pdd-ctabar--has-call .pdd-ctabar__enroll {
	display: none;
}

body.pdd .pdd-ctabar__icons {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--school-cta-gap);
}

body.pdd .pdd-ctabar__icon {
	display: inline-flex;
	flex: 0 0 auto;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	width: var(--school-cta-icon-size);
	height: var(--school-cta-icon-size);
	max-height: none;
	padding: 0;
	color: var(--school-cta-icon-fg);
	background: var(--school-cta-icon-bg);
	border-radius: var(--school-cta-icon-radius);
}

body.pdd .pdd-ctabar__icon img,
body.pdd .pdd-ctabar__icon svg {
	width: 20px;
	height: 20px;
	max-width: 20px;
	max-height: 20px;
	object-fit: contain;
}

/* Запас под полосой, чтобы она не легла на последний блок. */
body.pdd.pdd-has-ctabar .pdd-similar {
	margin-bottom: var(--school-similar-tail);
}

/* Кнопка «наверх» движка (#backtotop, z-index 999, bottom 10px)
   ложится ровно на правый край полосы и закрывает крайнюю иконку.
   Двигаем её выше полосы. Селектор (1,3,0) против (1,1,0)
   у чужого #backtotop.shows — специфичности хватает. */
body.pdd.pdd-has-ctabar #backtotop.shows {
	bottom: calc(var(--ctabar-height) + var(--space-3));
}

/* ============================================================
   15. РАСКЛАДКА ОТ 1024px — вариант v5

   Источник — design2/assets/css/school-web.css. У прототипа
   страница делится надвое: слева содержимое, справа липкая
   колонка. Липкая колонка здесь — не свёрстанный блок, а
   штатный #sidebar.object_side, в котором лежит виджет карты
   object_on_map-3 из области sidebar-object-1910 (данные в базе,
   правкой кода их не достать).

   Что взято из прототипа один в один: пропорция колонок,
   подмена школьных токенов на «мышиные» (плотнее отступы,
   крупнее название, рамка вместо тени у секций), карточки
   «Похожих» сеткой вместо карусели, полоса действий выключена.

   Три места, где раскладка сознательно расходится с v5.

   1. Коллаж фото. В прототипе галерея — сетка из 4–5 кадров
      во всю ширину страницы. В базе у 8738 объектов из 8836 одна
      и та же картинка-заглушка, галерея crb_thumbnail_gallery
      заполнена у девяти и у всех пуста. Складывать коллаж не
      из чего, а одна фотография во всю ширину даёт полосу
      в 1150px по горизонтали. Поэтому кадр остаётся в колонке
      содержимого, и ему меняется только пропорция — с 4:3
      на 16:9, иначе на широком экране он занимает пол-экрана.

   2. Крошки. У прототипа они идут над коллажем во всю ширину.
      Здесь они лежат первым элементом внутри .content, вынести
      их выше нечем: .content и #sidebar — соседи, и общего
      контейнера с колонками у них нет. Визуально это та же
      строка в левом верхнем углу.

   3. Раскладка сделана на flex, а не на сетке в 12 колонок:
      main .container уже flex у самого движка (frontend.css),
      и переключать его на grid ради тех же двух колонок значит
      без нужды ломать все остальные страницы, где тот же
      .container используется.
   ============================================================ */
@media (min-width: 1024px) {

	/* График по дням разворачивается только здесь — как в эталоне
	   (school-web.css 218). На телефоне видна строка-сводка.

	   Снимок здесь же перестаёт быть липким: на широком экране
	   он часть коллажа в шапке (school-web.css 191). */
	:root {
		--school-hours-list-display: block;
		--school-gallery-position: relative;
	}

	/* Снимок здесь не липкий, закрывать нечего — а подложка в два
	   экрана высотой закрыла бы сам коллаж. */
	body.pdd .pdd-card .pdd-card__backdrop {
		display: none;
	}

	/* ------------------------------------------------------------
	   15.1 ДВЕ КОЛОНКИ

	   Что перебиваем:
	       main .container   display flex, align-items flex-start  frontend.css
	       .content          width calc(100% - 308px)              frontend.css
	       #sidebar          max-width 350px, padding-right 29px   frontend.css
	       .page-template-newlisting #sidebar  padding 0,
	                                           width 100%,
	                                           max-width none      skin.css
	       .messia_object-template-default #sidebar  max-width 360px  skin.css

	   Флексом контейнер уже является — задаём только зазор
	   и доли колонок.

	   :has(> #sidebar > .pdd-card--aside) — это «колонка собрана».
	   .pdd-card--aside кладёт в #sidebar buildWide() и только тогда,
	   когда нашлось что переложить; страницу отзывов /comments/
	   он пропускает по .review-sidebar (область sidebar-object-
	   reviews-1910 без виджетов), так что пустой колонки в 340px
	   там по-прежнему не будет.

	   Признаком была .normal-sidebar — её печатает get_sidebar()
	   при is_active_sidebar('sidebar-object-{сегмент}'). Признак
	   посторонний: у 1912 область пуста (виджет карты заведён
	   только в sidebar-object-1910), и карточка мотошколы ехала
	   одноколоночной — #sidebar 78×0, контакты во всю страницу.
	   Сама .normal-sidebar после переезда карты всё равно пустеет
	   и прячется по .is-empty ниже.
	   ------------------------------------------------------------ */
	/* Сетка прототипа: 12 колонок, зазор 20px, содержимое 8 колонок,
	   боковая 4 (--sw-span-main / --sw-span-aside в school-web.css).
	   В пикселях при поле 1152 это 761 + 20 + 371.

	   Ширина страницы — общая для сайта: внешняя колонка 1200
	   (--app-max-width = --content-max + 24 с каждой стороны),
	   внутренняя ровно 1152. Движок держит .container на 1224
	   без полей, и карточка шла шире шапки и подвала — замер
	   16.08.2026 на 1440: .container 1224, подвал 1152.

	   Класс .pdd-sw вешает pdd-school.js (part-school-wide) вместе
	   с перестановкой узлов: без переставленных крошек, коллажа
	   и строки разделов сетка бессмысленна, поэтому и включается
	   она тем же классом, а не шириной экрана.

	   Флекс на сетку меняется сознательно, вопреки заметке выше:
	   крошки и коллаж в эталоне идут во всю ширину страницы,
	   а .content и #sidebar — соседи, и флексом ряд из двух
	   колонок и трёх полос во всю ширину не собрать. Правило
	   висит на своём классе и другие страницы не задевает. */
	/* Отступ от нижнего края шапки до крошек — 28px, как в эталоне
	   (замер: низ .topbar 87, верх .crumbs 115). Складывается он
	   из двух слагаемых: 20px даёт padding-block-start страницы,
	   остальные 8 — поле <main>.

	   Своих 35px у <main> не было: их ставит .single-messia_object main
	   в чужом CSS, и до карточки они не относятся никак — от них
	   расстояние выходило 55. Перебиваем специфичностью, без !important. */
	/* Слагаемых теперь три, а не два: 12 отдано шапке (header.css,
	   margin-block-end у .container — так же, как .topbar { margin: 0 0 12px }
	   в эталоне), 20 — поле страницы, и разницу в 4 снимает <main>.
	   12 − 4 + 20 = 28, ровно как было; на экране ничего не сдвинулось,
	   просто те же 28px разложены по тем же узлам, что и в прототипе. */
	body.pdd.single-messia_object main:has(> .container.pdd-sw) {
		margin-top: calc(var(--space-4) - var(--space-6));
	}

	body.pdd.single-messia_object main .container.pdd-sw {
		--school-col-gap: 20px;

		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--school-col-gap);
		/* --sw-gap-row прототипа — 16px */
		row-gap: var(--space-7);
		align-content: start;
		/* Числом через токены, а не var(--app-max-width): на карточке
		   объекта его подменяет шапка (header.css, «одна ширина
		   колонки»), и страница садилась на 1152 вместе с полями —
		   содержимое выходило 1104 против эталонных 1152. */
		max-width: calc(var(--content-max) + var(--space-9) * 2);
		margin-inline: auto;
		/* --sw-page-top / --sw-page-pad прототипа: 20 сверху, 24 по краям */
		padding-block-start: var(--space-8);
		padding-inline: var(--space-9);

		/* Фон держит сама колонка, а не только <body>: в эталоне он
		   на .app--detail (rgb(245,247,251) = --color-bg). На карточке
		   цвет тот же, что у body.pdd, — не перекрашивает ничего. */
		background-color: var(--color-bg);
	}

	/* Волосяная рамка вокруг колонки содержимого. В эталоне её даёт
	   .app (main.css, @media 600px: box-shadow 0 0 0 1px --color-border)
	   — тот же приём, тень вместо border, чтобы линия не занимала
	   место в потоке и не сдвигала сетку на 2px.

	   Оговорка: в эталоне .app обнимает ВСЮ страницу, вместе с шапкой
	   и подвалом, а у нас шапка идёт во всю ширину экрана и лежит
	   вне .container. Поэтому рамка обнимает содержимое — от крошек
	   до «Похожих автошкол». */
	body.pdd.single-messia_object main .container.pdd-sw {
		box-shadow: 0 0 0 var(--border-width) var(--color-border);
	}

	/* Ряд действий в эталоне — единственный блок колонки с тенью
	   карточки (0 1px 2px rgba(11,11,15,.05)); у «Контактов»,
	   «Времени работы» и «Адреса» только рамка. */
	body.pdd.single-messia_object .pdd-card .pdd-actions {
		box-shadow: var(--shadow-card);
	}

	/* Крошки, коллаж и строка разделов — во всю ширину страницы */
	body.pdd.single-messia_object .container.pdd-sw > .breadcrumbs,
	body.pdd.single-messia_object .container.pdd-sw > .pdd-card--head {
		grid-column: 1 / -1;
	}

	/* Обёртка полос: у .pdd-card её собственный gap, а расстояние
	   между коллажем и строкой разделов в эталоне — те же 16px */
	body.pdd.single-messia_object .container.pdd-sw > .pdd-card--head {
		--school-stack-gap: var(--space-7);
	}

	/* Всплывшая строка идёт во всю ширину окна, как .tabs--pinned
	   эталона (school-web.css: padding-inline: calc(50vw - ширина/2)). */
	body.pdd .pdd-tabs.pdd-tabs--bar {
		left: 0;
		right: 0;
		width: auto;
		padding-inline: max(var(--space-9), calc(50vw - var(--content-max) / 2));
	}

	/* Снимок здесь не липкий (--school-gallery-position: relative),
	   закрывать нечего — подложке под ним делать нечего вовсе. */
	body.pdd .pdd-card .pdd-card__backdrop {
		display: none;
	}

	/* Без боковой колонки (страница отзывов того же скина)
	   содержимое идёт во всю ширину */
	/* Колонка содержимого — такая же сетка, как в эталоне (.sw-main):
	   одна колонка, row-gap 16, column-gap 20. Столбик из флекса давал
	   ту же картинку, но зазоры не совпадали с замером, а внутренние
	   блоки колонки (цены, отзывы) рисует движок — им проще встать
	   в сетку, где элемент по умолчанию растянут на всю ширину.
	   Отбивки блоков внутри гасятся — иначе они складываются с зазором. */
	/* Столбик собран флексом, а не сеткой, вопреки заметке выше:
	   сетка не умеет отдать слабину ряда одному блоку, не зная
	   числа рядов, а отдать её нужно (см. следующее правило).
	   На картинке замена ничего не двинула — колонка одна,
	   зазор тот же --space-7, ширину блокам так же задаёт
	   растяжка по поперечной оси. */
	body.pdd.single-messia_object .container.pdd-sw > .content {
		grid-column: 1 / -1;
		display: flex;
		flex-direction: column;
		gap: var(--space-7);
		width: auto;
		min-width: 0;
	}

	/* Нижний срез колонок — на одной линии.

	   Контейнер выровнен по верху (align-items: flex-start приезжает
	   из чужого CSS), и колонка содержимого высоту ряда не занимает.
	   Пока карточка полная, ряд задаёт она сама, и срез совпадает
	   с «Адресом» сам собой. А там, где панель цен и отзывов почти
	   пуста, ряд задаёт правая колонка: замер 21.08.2026 на
	   /driving/kirovsk/avtolider/ — панель 178px против 2335 у полной
	   карточки, и «Похожие автошколы» кончались на 496px выше «Адреса».
	   Рамка страницы при этом обнимала пустоту — тот самый перекос.

	   Колонка растягивается на высоту ряда, слабину забирает
	   последний блок. На полных карточках слабины нет — ни один
	   размер не меняется. */
	body.pdd.single-messia_object .container.pdd-sw > .content {
		align-self: stretch;
	}

	body.pdd.single-messia_object .container.pdd-sw > .content > .pdd-similar {
		flex-grow: 1;
	}

	body.pdd.single-messia_object .container.pdd-sw > .content > * {
		margin-block: 0;
	}

	body.pdd.single-messia_object .container.pdd-sw:has(> #sidebar > .pdd-card--aside) > .content {
		grid-column: span 8;
	}

	/* Колонка прилипает целиком, как .sw-aside эталона. */
	body.pdd.single-messia_object .container.pdd-sw > #sidebar.object_side:has(> .pdd-card--aside) {
		grid-column: span 4;
		position: sticky;
		top: var(--space-7);
		align-self: start;
		display: flex;
		flex-direction: column;
		gap: var(--space-7);
		width: auto;
		max-width: none;
		min-width: 0;
		margin: 0;
		padding: 0;
	}

	/* Опустевшая .normal-sidebar (карта уехала в карточку) убирается
	   из потока целиком. Нулевой высоты ей мало: она остаётся
	   флекс-элементом колонки, и зазор 16px после последнего блока
	   оставался — нижний срез колонки шёл на 16px выше «Похожих
	   автошкол», тогда как в эталоне (.sw-aside) он с ними вровень.
	   Класс is-empty вешает pdd-school.js после переноса карты. */
	body.pdd.single-messia_object .container.pdd-sw > #sidebar.object_side > .normal-sidebar.is-empty,
	body.pdd.single-messia_object .container.pdd-sw > #sidebar.object_side > .normal-sidebar:empty {
		display: none;
	}

	/* Стопка блоков правой колонки: ряд действий, контакты,
	   график, адрес — у каждого свой белый блок, между ними
	   те же 16px, что и в сетке */
	body.pdd.single-messia_object .container.pdd-sw .pdd-card--aside {
		--school-stack-gap: var(--space-7);
	}

	/* ------------------------------------------------------------
	   15.2а БЛОКИ ПРАВОЙ КОЛОНКИ

	   Селекторы с #sidebar, а не привычные от .pdd-card: внутри
	   боковой колонки движок красит заголовки правилами с id
	   (#sidebar h2 в frontend.css, (1,0,1)), и наши (0,3,1)
	   проигрывали — название «Контакты» шло 17px вместо 13.
	   ------------------------------------------------------------ */
	body.pdd.single-messia_object #sidebar .pdd-card--aside .pdd-section__title {
		/* Поле снизу — тоже от #sidebar h2 движка: под «Адресом»
		   и «Контактами» набегало 19px сверх отступа шапки секции
		   (замер: шапка 38 против эталонных 19). */
		margin: 0;
		padding: 0;
		font-size: var(--school-section-title-size);
		font-weight: var(--school-section-title-weight);
		line-height: var(--line-height-base);
		color: var(--school-section-title-fg);
	}

	/* Ряд действий в колонке — столбиком, «Записаться» первой
	   и во всю ширину (.sw-aside .actions эталона: поле 18,
	   зазор 8, кнопка записи 48px). */
	body.pdd.single-messia_object #sidebar .pdd-card--aside .pdd-actions {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-4);
		padding: 18px;
	}

	body.pdd.page-template-newlisting #sidebar .pdd-card--aside .pdd-actions .btn_blue,
	body.pdd.page-template-newlisting #sidebar .pdd-card--aside .pdd-actions button:not(.favorite) {
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
	}

	body.pdd.page-template-newlisting #sidebar .pdd-card--aside .pdd-actions .btn_blue {
		height: 48px;
		font-size: var(--font-size-input);
	}

	/* ------------------------------------------------------------
	   15.2 ТОКЕНЫ «МЫШИНОЙ» ВЕРСИИ

	   Значения — из :root в school-web.css. Ставятся прямо
	   на .pdd-card, а не на body: карточка объявляет эти же
	   токены у себя (блок 1), и значение, назначенное самому
	   элементу, наследованием с body не перебивается.
	   ------------------------------------------------------------ */
	body.pdd.single-messia_object .pdd-card {
		--school-section-pad: 20px 22px;
		--school-section-radius: 12px;
		/* 13px числом: в эталоне этот токен объявлен в :root, где
		   --font-size-meta равен 13. У нас он объявляется внутри блока,
		   где карточка подменила --font-size-meta на 14 (см. блок 1),
		   и var() подставился бы её значением. */
		--school-section-title-size: 13px;
		--school-section-title-weight: var(--font-weight-semibold);
		--school-section-title-fg: var(--color-text);
		--school-intro-pad: 22px;
		--school-intro-radius: 12px;
		--school-title-size: 30px;
		--school-actions-pad: 20px 22px;
		/* кружок соцсети в эталоне 36 (.social-link) */
		--school-social-size: 36px;

		/* строка разделов на мыши идёт без боковых полей —
		   --sw-tabs-pad прототипа равен нулю */
		--school-tabs-pad: 0;

		/* один кадр вместо коллажа: 16:9 вместо 4:3.
		   Скругление — как у кадра коллажа (--sw-gallery-radius: 10px),
		   а не как у плашки: рамки вокруг фото в эталоне нет. */
		--gallery-aspect: 16 / 9;
		--school-gallery-radius: 10px;

		/* --sw-gap-row прототипа — 16px */
		gap: var(--space-7);
	}

	/* Крошки: --sw-crumbs-pad прототипа (0 2px 10px), без выноса
	   под края. Размер там базовый, 13px. */
	body.pdd.single-messia_object .breadcrumbs {
		--school-crumbs-bleed: 0px;
		--school-crumbs-pad: 0 2px 10px;

		font-size: var(--font-size-meta);
	}

	/* Шапка карточки — единственный блок без рамки и без тени:
	   у .intro в эталоне только заливка, скругление и поле. */
	body.pdd.single-messia_object .pdd-card .pdd-intro {
		box-shadow: none;
	}

	/* Кадр не выше своей доли экрана: на 1600px и шире колонка
	   содержимого доходит до 1000px, и даже 16:9 давало бы
	   полосу под 560px. */
	body.pdd .pdd-card .pdd-gallery__frame img {
		max-height: 470px;
	}

	/* Секции получают рамку вместо тени — так у прототипа
	   на широком экране (--sw-* в school-web.css).

	   .pdd-intro в списке нет намеренно: шапку карточки эталон
	   держит без рамки (замер 1280: border — у .intro, 1px
	   у .section рядом).

	   У .pdd-section рамка только сверху и снизу — как .section
	   эталона (main.css: border-block). Слева и справа рамки нет:
	   с полным border на четыре стороны при box-sizing: border-box
	   внутренняя ширина секции проседала на 2px против эталона
	   (327 → 325 у строк «Контактов» и «Времени работы»). */
	body.pdd.single-messia_object .pdd-card .pdd-section {
		border-top: var(--border-width) solid var(--color-border);
		border-bottom: var(--border-width) solid var(--color-border);
		box-shadow: none;
	}

	body.pdd.single-messia_object .pdd-card .pdd-actions,
	body.pdd.single-messia_object .pdd-card .pdd-promo,
	body.pdd.single-messia_object .pdd-card .the_content {
		border: var(--border-width) solid var(--color-border);
		box-shadow: none;
	}

	/* Ряд кнопок: «Записаться» перестаёт быть во всю ширину —
	   на мыши кнопка в 1000px выглядит нажимом на весь экран. */
	body.pdd.page-template-newlisting .pdd-card .pdd-actions .btn_blue,
	body.pdd.page-template-newlisting .pdd-card .pdd-actions button:not(.favorite) {
		flex: 0 0 auto;
		min-width: 220px;
	}

	/* ------------------------------------------------------------
	   15.3 ВКЛАДКИ И ПОХОЖИЕ
	   ------------------------------------------------------------ */
	body.pdd.single-messia_object .widgets-content {
		--school-section-radius: 12px;
		--school-section-border: var(--border-width) solid var(--color-border);
		--school-section-pad: 20px 22px;
		--school-widgets-bleed: 0px;
	}

	body.pdd.single-messia_object .pdd-similar {
		--school-widgets-bleed: 0px;
	}

	/* Блок «Услуги и цены» — .block--services эталона: плашка
	   с полем 20/22, без отбивки сверху (расстояние между блоками
	   колонки держит сетка). Движок ставил ей margin-top 25. */
	/* Плашка теперь на каждой панели, а не на всём блоке: «Цены»
	   и «Отзывы» идут двумя отдельными секциями, одна под другой.
	   У самого блока остаётся только отступ. */
	body.pdd.single-messia_object .widgets-content .tabs_object {
		margin: 0;
	}

	body.pdd.single-messia_object .widgets-content .tabs_object .tab-content > .tab-pane {
		padding: 20px 22px;
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-xl);
	}

	/* Название раздела внутри панели — тот же 13px semibold,
	   что у заголовков секций (.section__title эталона). 13px
	   числом: --school-section-title-size объявлен в :root через
	   --font-size-caption (12px), а на 13 его поднимает только
	   .pdd-card, внутри которой панели цен нет. */
	body.pdd.single-messia_object .widgets-content .h2.object_alt_tab_title,
	body.pdd.single-messia_object .widgets-content .h4.object_alt_tab_title {
		margin: 0 0 var(--space-5);
		font-size: 13px;
		font-weight: var(--font-weight-semibold);
		line-height: var(--line-height-base);
		letter-spacing: normal;
		color: var(--color-text);
	}

	body.pdd.single-messia_object .pdd-similar {
		--school-section-pad: 20px 22px;
		--school-section-radius: 12px;
		/* 13px числом: в эталоне этот токен объявлен в :root, где
		   --font-size-meta равен 13. У нас он объявляется внутри блока,
		   где карточка подменила --font-size-meta на 14 (см. блок 1),
		   и var() подставился бы её значением. */
		--school-section-title-size: 13px;
		--school-section-title-weight: var(--font-weight-semibold);
		--school-section-title-fg: var(--color-text);
		--school-similar-tail: 0;

		/* карусель превращается в сетку: вбок на мыши не листают */
		--similar-display: grid;
		--similar-columns: repeat(3, minmax(0, 1fr));
		--similar-card-width: auto;
		--similar-bleed: 0px;
		--similar-overflow: visible;
		--similar-snap: none;

		border: var(--border-width) solid var(--color-border);
		box-shadow: none;
	}

	body.pdd.single-messia_object .pdd-similar .reccommendations-widget-redesign {
		grid-template-columns: var(--similar-columns);
	}

	body.pdd.single-messia_object .pdd-similar .recommendation-item {
		flex: 0 1 auto;
		transition: box-shadow 0.18s ease-out, transform 0.18s ease-out;
	}

	body.pdd.single-messia_object .pdd-similar .recommendation-item:hover {
		transform: translateY(-2px);
	}

	/* ------------------------------------------------------------
	   15.4 КОЛЛАЖ ФОТО

	   Эталон (--sw-gallery-* в school-web.css): полоса 470px во всю
	   ширину страницы, сетка 2.7fr 1fr 1fr на 1.85fr 1fr, зазор 10,
	   скругление у каждого кадра, общей рамки нет. Место кадра
	   задано явно — иначе они расползаются по строкам сами.

	   Кадры добирает pdd-school.js: в базе у объекта одна картинка
	   (см. комментарий part-school-collage). Клетки лежат в разметке
	   на любой ширине, на телефоне их прячет правило в блоке 2.
	   ------------------------------------------------------------ */
	body.pdd.single-messia_object .pdd-card--head .pdd-gallery {
		display: grid;
		grid-template-columns: 2.7fr 1fr 1fr;
		grid-template-rows: 1.85fr 1fr;
		gap: 10px;
		height: 470px;
		background: none;
		border-radius: 0;
		overflow: visible;
	}

	/* Листалка — раскладка телефона. Здесь кадры показывает коллаж,
	   поэтому полоса, точки и счётчик убираются, а родной кадр
	   возвращается: правило с :has() выше (0,5,1) само по себе
	   перебило бы соседнее (0,4,1) и оставило клетку пустой. */
	body.pdd.single-messia_object .pdd-card--head .pdd-gallery__track,
	body.pdd.single-messia_object .pdd-card--head .pdd-gallery__dots,
	body.pdd.single-messia_object .pdd-card--head .pdd-gallery__counter {
		display: none;
	}

	body.pdd.single-messia_object .pdd-card--head .pdd-gallery:has(.pdd-gallery__track) .pdd-gallery__frame,
	body.pdd.single-messia_object .pdd-card--head .pdd-gallery__frame,
	body.pdd.single-messia_object .pdd-card--head .pdd-gallery__cell {
		display: block;
		height: 100%;
		min-width: 0;
		min-height: 0;
		aspect-ratio: auto;
		/* заливка под кадром — ровный светлый фон эталона
		   (.gallery__slide), а не градиент-заглушка карточки */
		background: var(--color-surface-muted);
		border-radius: 10px;
		overflow: hidden;
	}

	body.pdd.single-messia_object .pdd-card--head .pdd-gallery__frame img,
	body.pdd.single-messia_object .pdd-card--head .pdd-gallery__cell img {
		display: block;
		width: 100%;
		height: 100%;
		max-height: none;
		object-fit: cover;
	}

	body.pdd.single-messia_object .pdd-card--head .pdd-gallery__frame {
		grid-area: 1 / 1 / 3 / 2;
	}

	body.pdd .pdd-gallery__cell--2 { grid-area: 1 / 2 / 2 / 4; }
	body.pdd .pdd-gallery__cell--3 { grid-area: 2 / 2 / 3 / 3; }
	body.pdd .pdd-gallery__cell--4 { grid-area: 2 / 3 / 3 / 4; }

	/* Кадров меньше четырёх — сетка не зияет пустой правой колонкой.
	   Снимки свои, из выгрузки Яндекса, и повторять их по кругу ради
	   полного коллажа незачем: у 304 объектов их два-три. Число клеток
	   pdd-school.js кладёт в data-cells, оставшиеся растягиваются. */
	body.pdd.single-messia_object .pdd-card--head .pdd-gallery[data-cells="2"] {
		grid-template-columns: 1.6fr 1fr;
		grid-template-rows: 1fr;
	}

	body.pdd .pdd-gallery[data-cells="2"] .pdd-gallery__frame { grid-area: 1 / 1 / 2 / 2; }
	body.pdd .pdd-gallery[data-cells="2"] .pdd-gallery__cell--2 { grid-area: 1 / 2 / 2 / 3; }

	body.pdd.single-messia_object .pdd-card--head .pdd-gallery[data-cells="3"] {
		grid-template-columns: 2.7fr 1fr;
	}

	body.pdd .pdd-gallery[data-cells="3"] .pdd-gallery__cell--2 { grid-area: 1 / 2 / 2 / 3; }
	body.pdd .pdd-gallery[data-cells="3"] .pdd-gallery__cell--3 { grid-area: 2 / 2 / 3 / 3; }

	/* Кнопка «N фото» — тоже клетка сетки (grid-area 2/3/3/4). В урезанной
	   раскладке третьей колонки нет, и по прежним координатам она заводила
	   неявную колонку в 79px, а при двух кадрах ещё и неявный ряд: сетка
	   теряла 40px высоты. Ставим её на последнюю живую клетку. */
	body.pdd.single-messia_object .pdd-card--head .pdd-gallery[data-cells="2"] .pdd-gallery__photos {
		grid-area: 1 / 2 / 2 / 3;
	}

	body.pdd.single-messia_object .pdd-card--head .pdd-gallery[data-cells="3"] .pdd-gallery__photos {
		grid-area: 2 / 2 / 3 / 3;
	}

	/* Кадры чуть подъезжают под курсором — как в эталоне */
	body.pdd.single-messia_object .pdd-card--head .pdd-gallery img {
		transition: transform 0.25s ease;
	}

	body.pdd.single-messia_object .pdd-card--head .pdd-gallery__frame:hover img,
	body.pdd.single-messia_object .pdd-card--head .pdd-gallery__cell:hover img {
		transform: scale(1.03);
	}

	/* «N фото» — поверх последнего кадра */
	body.pdd.single-messia_object .pdd-card--head .pdd-gallery__photos {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		grid-area: 2 / 3 / 3 / 4;
		place-self: center;
		z-index: 1;
		padding: var(--space-3) var(--space-5);
		font-size: var(--font-size-caption);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text);
		background: var(--color-surface);
		border: none;
		border-radius: var(--radius-pill);
		box-shadow: var(--shadow-card);
		cursor: pointer;
	}

	body.pdd.single-messia_object .pdd-card--head .pdd-gallery__photos svg {
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	/* ------------------------------------------------------------
	   15.5 ЛИПКАЯ ПОЛОСА

	   На широком экране её у прототипа нет (--sw-ctabar-display:
	   none): ряд кнопок и контакты видны и так. pdd-school.js
	   её на такой ширине и не собирает — правило страхует случай,
	   когда окно растянули уже после загрузки страницы.
	   ------------------------------------------------------------ */
	body.pdd .pdd-ctabar {
		display: none;
	}
}

/* ------------------------------------------------------------
   16. БОКОВАЯ КОЛОНКА: ПЛАШКА КАРТЫ

   Содержимое колонки — виджет object_on_map-3 из области
   sidebar-object-1910. Это данные в базе, разметку печатает
   движок, и она здесь не меняется: правится только вид плашки,
   чтобы карта читалась той же карточкой, что и секции слева.

   Что перебиваем:
       .messia_object-template-default #sidebar .sidebar-map
           padding 20px, height 451px           (1,2,0) skin.css
       .messia_object-template-default #sidebar .title_side
           font-size 26px, font-weight 700      (1,2,0) skin.css
   Наши селекторы — (1,4,0).

   Высоту не трогаем: 451px виджету нужны, чтобы карта Яндекса
   успела разложиться, у неё размер снимается с контейнера.
   ------------------------------------------------------------ */
/* Плашка под любым виджетом колонки, не только под картой.
   У автошкол в области sidebar-object-1910 стоит один виджет —
   карта; у соседних сегментов там ещё messia_disclaimer,
   object_categories, phone_button_widget и custom_html
   (сегмент 763 — проверено глазами 15.08.2026). Разметка у них
   родительская, и без общей плашки они висели на сером фоне
   голым текстом. Поле не задаём: у виджетов движка оно своё,
   20px, и второе поле сложилось бы с ним. */
body.pdd.single-messia_object #sidebar.object_side .normal-sidebar > div {
	margin-bottom: var(--space-3);
	background: var(--color-surface);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-card);
}

body.pdd.single-messia_object #sidebar.object_side .normal-sidebar > div:last-child {
	margin-bottom: 0;
}

body.pdd.single-messia_object #sidebar.object_side .sidebar-map {
	padding: var(--space-6);
	background: var(--color-surface);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-card);
}

body.pdd.single-messia_object #sidebar.object_side .title_side {
	margin-bottom: var(--space-5);
	font-size: var(--font-size-section);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
	letter-spacing: var(--letter-spacing-title);
	color: var(--color-text);
}

/* Рамка вокруг самой карты — у движка это 2px #ebf0fc. */
body.pdd.single-messia_object #sidebar.object_side .ym-container {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
}

/* Плашка «Смотреть все объекты на карте» под картой. */
body.pdd.single-messia_object #sidebar.object_side .home-map-button .toggle-ym {
	border-radius: var(--radius-lg);
}

/* На узком экране движок красит боковую колонку в свой голубой
   (#sidebar { background: #edf6f9 } в frontend.css, @media 991px)
   — под белой плашкой карты это давало рамку чужого цвета.
   Наш селектор (1,3,0) против (1,0,0). */
body.pdd.single-messia_object #sidebar.object_side {
	background: none;
}