/**
 * Посадкові сторінки (шаблон page-landing.php).
 *
 * ═══ Звідки взялися числа ═══════════════════════════════════════════════
 * Уся шкала знята з головної живими вимірами (getComputedStyle), не «на
 * око» і не з налаштувань Elementor — там частина значень лежить у
 * дефолтах кіта і не збігається з тим, що реально рендериться:
 *
 *   світла смуга  #EEEEEE (це фон body сайту, а не беж кіта)
 *   темна смуга   #474747, текст на ній #D9D9D9
 *   заголовок     Merriweather 700 48/48 uppercase, по центру
 *   рукопис       Great Vibes 400 48/48, колір той самий, що в заголовка
 *   абзац         Lora 400 19.2/30.72, letter-spacing .03px
 *   H1 hero       Merriweather 700 40/52 #D9D9D9, text-shadow 1px 1px 10px
 *   кнопка        Lora 600 19.2, gradient #FFBF69→#C3750D, текст #670000,
 *                 radius 30, padding 15/30, min-width 225 → 227×55
 *   картка типу   linear-gradient(5deg,#fff 85%,#FFBF69 100%), radius 25
 *   підпис у фото Lora 700 24/31.2 #E0E0CE
 *
 * ═══ Що тут вирішено інакше, ніж на головній, і чому ════════════════════
 * 1. Тон секції визначає її ТИП (див. zk_ld_tone у inc/landing.php), а не
 *    порядковий номер. Механічне чергування світле/темне через одну
 *    перетворює сторінку на зебру, де всі блоки важать однаково.
 * 2. Великих декоративних номерів «01–05» немає ніде, крім секції кроків:
 *    перелік особливостей не є послідовністю, і номер біля нього лише
 *    вдає структуру, якої в контенті немає.
 * 3. Сигнатурний елемент сторінки — цінова рейка в картці: два рядки
 *    «підпис — сума» з tabular-цифрами, вирівняними по спільному правому
 *    краю. Гортаючи каталог, людина порівнює саме ці числа.
 * 4. Третій регістр типографіки (`.zk-ld-meta`) зроблено БЕЗ нового
 *    шрифту — Merriweather 13px uppercase з розрядкою і tabular-цифрами.
 *    Сайт уже вантажить 290 КБ шрифтів, четвертий файл цього не вартий.
 *
 * ВАЖЛИВО: кіт Elementor стилізує ЛИШЕ свої віджети. Звичайна розмітка без
 * його класів падає на браузерний дефолт (Times 16px) — тому базову
 * типографіку задаємо тут самі, від .zk-ld.
 */

/* ═══ Токени ═════════════════════════════════════════════════════════════ */

.zk-ld {
	--zk-ld-dark: #474747;
	--zk-ld-light: #EEEEEE;
	--zk-ld-plain: #FAF9F5;

	--zk-ld-text: #252525;
	--zk-ld-on-dark: #D9D9D9;

	--zk-ld-amber: #FFBF69;
	--zk-ld-accent: #CD821E;        /* великий текст, маркери, лінії */
	--zk-ld-accent-text: #A35C00;   /* дрібний текст на світлому — AA 4.5:1 */
	--zk-ld-beige: #E0E0CE;         /* підписи поверх фото */

	--zk-ld-max: 1200px;
	--zk-ld-radius: 25px;

	/* Крок відступів: 8 / 16 / 24 / 40 / 64 / 96 — усі вертикальні ритми
	   в файлі беруться звідси, довільних чисел немає. */
	--zk-ld-pad: 96px;
	--zk-ld-gap: 24px;

	--zk-ld-shadow: 0 14px 40px rgba(37, 37, 37, .10);
	--zk-ld-hairline: rgba(37, 37, 37, .14);

	font-family: "Lora", Georgia, serif;
	font-weight: 400;
	font-size: 19.2px;
	line-height: 1.6;
	letter-spacing: 0.03px;
	color: var(--zk-ld-text);
}

/* Тема не задає глобального border-box для звичайної розмітки — без цього
   `width:100%` + бічний padding обгортки дає горизонтальний скрол. */
.zk-ld,
.zk-ld *,
.zk-ld *::before,
.zk-ld *::after { box-sizing: border-box; }

.zk-ld h1,
.zk-ld h2,
.zk-ld h3 {
	font-family: "Merriweather", Georgia, serif;
	font-weight: 700;
}

/**
 * Відступи базових тегів — через :where(), тобто з НУЛЬОВОЮ вагою самого
 * селектора тега.
 *
 * Інакше `.zk-ld p` (0,1,1) мовчки перебиває будь-яке правило на одному
 * класі — `.zk-ld-lead`, `.zk-ld-kicker`, `.zk-ld-card__desc` (0,1,0), — і
 * блок «центрований» лишається зсунутим, бо `margin-inline: auto` до нього
 * просто не доходить. Саме так у першій версії шаблону H1 в hero стояв не
 * по центру, хоч у стилі був `margin: 0 auto`.
 *
 * `.zk-ld :where(p)` важить (0,1,0) — цього досить, щоб перебити правило
 * теми на голому теґу (0,0,1), і водночас будь-який клас нижче виграє.
 */
.zk-ld :where(h1, h2, h3) { margin: 0; }
.zk-ld :where(p) { margin: 0 0 1em; }
.zk-ld :where(p:last-child) { margin-bottom: 0; }

/**
 * Пропорції зображень.
 *
 * WordPress друкує в <img> атрибути width/height зареєстрованого розміру
 * (тут — 800×450). Щойно CSS задає ширину («width:100%»), а висоту лишає
 * атрибуту, браузер бере ШИРИНУ з CSS і ВИСОТУ з атрибута — фото виходить
 * розтягнутим по вертикалі. Саме це сталось із фото збоку від тексту:
 * 16:9 малювалось як 1.08:1.
 *
 * `height:auto` через :where() важить нуль, тому атрибут перебиває, а
 * будь-яке навмисне кадрування (плитки й hero з object-fit:cover, де
 * висота задана свідомо) лишається сильнішим і виграє.
 */
.zk-ld :where(img) { height: auto; }

.zk-ld img { max-width: 100%; }

/* Видимий фокус — обов'язковий мінімум, сайт його ніде не задає. */
.zk-ld a:focus-visible,
.zk-ld summary:focus-visible {
	outline: 2px solid var(--zk-ld-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/**
 * Третій регістр: дані.
 *
 * Заголовок і абзац — два голоси, яких мало там, де на сторінці числа
 * (площа, ціна за м², терміни). Замість четвертого шрифту — той самий
 * Merriweather у зовсім іншому наборі: дрібно, капслоком, з розрядкою і
 * табличними цифрами, щоб суми ставали одна під одну.
 */
.zk-ld-meta {
	font-family: "Merriweather", Georgia, serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	margin: 0;
}

/* ═══ Каркас ═════════════════════════════════════════════════════════════ */

.zk-ld-wrap {
	position: relative;
	width: 100%;
	max-width: var(--zk-ld-max);
	margin-inline: auto;
	padding-inline: 20px;
}

.zk-ld-sec {
	position: relative;
	padding-block: var(--zk-ld-pad);
}

.zk-ld-sec--light { background: var(--zk-ld-light); }
.zk-ld-sec--plain { background: var(--zk-ld-plain); }

.zk-ld-sec--dark,
.zk-ld-sec--photo {
	background: var(--zk-ld-dark);
	color: var(--zk-ld-on-dark);
}

.zk-ld-sec--marble { background: var(--zk-ld-plain); }

/* Фотосекція — сестра hero, а не окремий прийом: та сама нерівномірна
   вуаль і та сама тінь під текстом, тому фото лишається читабельним фото. */
.zk-ld-sec--photo,
.zk-ld-sec--marble { overflow: hidden; }

.zk-ld-sec__bg {
	position: absolute;
	inset: 0;
}

.zk-ld-sec__bg-img,
.zk-ld-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.zk-ld-sec--photo .zk-ld-sec__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.46) 45%, rgba(0,0,0,.66) 100%);
}

.zk-ld-sec--photo .zk-ld-sec__grid { text-shadow: 1px 1px 10px rgba(0,0,0,.9); }

.zk-ld-sec__bg--marble {
	background-size: cover;
	background-position: center;
	opacity: .5;
}

.zk-ld-sec__grid { position: relative; z-index: 1; }

/* Дві колонки: текст і фото збоку. */
.zk-ld-sec--split .zk-ld-sec__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
	gap: clamp(40px, 5vw, 64px);
	align-items: center;
}

.zk-ld-sec--media-left .zk-ld-sec__main { order: 2; }
.zk-ld-sec--media-left .zk-ld-sec__media { order: 1; }

/**
 * Фото збоку тримає висоту колонки й кадрується з боків.
 *
 * Колонка тягнеться на всю висоту рядка сітки (`stretch` персонально їй —
 * сам рядок лишається `center`, інакше розтягнулась би й текстова колонка і
 * абзаци поїхали б угору). Висота фото = висота рядка, а `min-height`
 * задає нижню межу, коли текст короткий: фото не сплющиться до двох
 * абзаців, але й підросте, якщо тексту стане більше.
 *
 * `object-fit: cover` замість розтягування: зайве йде за краї по ширині,
 * пропорції кадру не міняються.
 */
.zk-ld-sec--split .zk-ld-sec__media {
	align-self: stretch;
	min-height: clamp(320px, 30vw, 450px);
}

.zk-ld-sec__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--zk-ld-radius);
	box-shadow: var(--zk-ld-shadow);
	display: block;
}

/* ═══ Шапка секції ═══════════════════════════════════════════════════════ */

/**
 * Заголовок і рукописний рядок — один блок з власною мірою.
 *
 * Обмеження ширини тут не косметика: центрований заголовок на всю ширину
 * контейнера читається як напис, а не як блок, і рукописний рядок під ним
 * втрачає з ним зв'язок. Міра змушує заголовок лягати у 1–2 рядки
 * компактним блоком, до якого рукопис і лід прив'язані спільною віссю.
 *
 * Значення в px, а НЕ в ch: `ch` рахується від шрифту самого елемента, а
 * обгортка успадковує Lora 19.2px, тому «24ch» давало 286px замість
 * очікуваних ~700 — заголовок ламався на три рядки по два слова.
 */
.zk-ld-head {
	max-width: 720px;
	margin: 0 auto 40px;
	text-align: center;
}

.zk-ld .zk-ld-h2 {
	font-size: 48px;
	line-height: 48px;
	text-transform: uppercase;
	margin: 0;
}

.zk-ld-kicker {
	font-family: "Great Vibes", "Lora", cursive;
	font-weight: 400;
	font-size: 48px;
	line-height: 48px;
	/* Колір НЕ задається окремо: рукописний рядок успадковує колір
	   заголовка (чорний на світлому, #D9D9D9 на темному) — так він і
	   набраний на головній. Власний акцентний колір робив із нього
	   другий наголос там, де потрібен один. */
	margin: 4px 0 0;
}

.zk-ld-sec--dark .zk-ld-h2,
.zk-ld-sec--photo .zk-ld-h2 { color: var(--zk-ld-on-dark); }

/**
 * Лінія під шапкою — рівно один випадок: каталог.
 *
 * На головній вона стоїть під «БУДИНКИ» і відбиває шапку від вітрини
 * товарів. Під кожною секцією поспіль та сама лінія перетворюється на
 * шум, тому решта секцій відбивається відступом, а не графікою.
 */
.zk-ld-sec--catalog .zk-ld-head {
	max-width: none;
	padding-bottom: 40px;
	margin-bottom: 40px;
	border-bottom: 1px solid rgba(217, 217, 217, .25);
}

.zk-ld-lead {
	max-width: 680px;
	margin: -16px auto 40px;
	text-align: center;
}

.zk-ld-note {
	/* Примітка живе під кроками або таблицею — і тримає їхню міру (900px),
	   інакше починається лівіше за блок, який коментує. */
	max-width: 900px;
	margin: 24px auto 0;
	font-size: 18px;
	line-height: 23.4px;
	opacity: .72;
}

/* Посилання всередині текстових полів.
 *
 * Їх ставить редактор у FAQ, примітках і пунктах — саме вони зшивають
 * посадкові одна з одною («подивитись котеджі», «умови держпрограм тут»).
 * Без цього правила вони падають на браузерний синій/фіолетовий, який на
 * бежевому тлі сайту читається як чужий елемент. Колір — той самий
 * акцент, що вже вживається для дрібного тексту (AA 4.5:1), підкреслення
 * лишаємо: у суцільному абзаці колір сам по собі не є ознакою посилання. */
.zk-ld-prose a,
.zk-ld-note a,
.zk-ld-faq__a a,
.zk-ld-bullets a {
	color: var(--zk-ld-accent-text);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.zk-ld-prose a:hover,
.zk-ld-note a:hover,
.zk-ld-faq__a a:hover,
.zk-ld-bullets a:hover { text-decoration-thickness: 2px; }

/* На темній смузі той самий акцент недостатньо світлий — беремо великий. */
.zk-ld-sec--dark .zk-ld-prose a,
.zk-ld-sec--dark .zk-ld-note a,
.zk-ld-sec--photo .zk-ld-prose a,
.zk-ld-sec--photo .zk-ld-note a { color: var(--zk-ld-amber); }

.zk-ld-prose { max-width: 680px; }
.zk-ld-prose h3 { font-family: "Lora", Georgia, serif; font-size: 24px; line-height: 31.2px; margin: 24px 0 8px; }

/* Без фото збоку текст лишався притиснутим до лівого краю контейнера, а
   заголовок над ним — центрованим по всій ширині: осі не збігались, і
   права третина секції стояла мертвою (видно на /e-oselya/). У split-
   секції колонку тримає сітка, тож там міра лишається зліва. */
.zk-ld-sec:not(.zk-ld-sec--split) .zk-ld-prose { margin-inline: auto; }

/* ═══ Hero ═══════════════════════════════════════════════════════════════ */

.zk-ld-hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(520px, 76vh, 780px);
	padding-block: 96px;
	background: var(--zk-ld-dark);
	color: var(--zk-ld-on-dark);
	overflow: hidden;
	text-align: center;
}

.zk-ld-hero__bg { position: absolute; inset: 0; }

/**
 * Вуаль темніє зверху й знизу, а середину фото лишає майже чистою:
 * зверху під нею йде шапка з логотипом, знизу — кнопка й рейка чисел,
 * а сам будинок посередині має лишатись видимим. Рівний темний прошарок
 * на пів-екрана (перша версія) з'їдав саме те, заради чого фото стоїть.
 */
.zk-ld-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.20) 38%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.62) 100%);
}

.zk-ld-hero__inner {
	position: relative;
	z-index: 1;
	/* Захист від фіксованої вертикальної плашки «Меню» ліворуч —
	   без нього перша літера довгого H1 ховається під нею. */
	max-width: min(var(--zk-ld-max), calc(100% - 160px));
	text-shadow: 1px 1px 10px rgba(0, 0, 0, .95);
}

/**
 * Локальна підкладка за текстовим блоком.
 *
 * Вуаль вище свідомо лишає середину фото майже чистою — і саме в цю
 * середину потрапляє H1. На темних фото (дуплекси) тіні тексту вистачає,
 * але на світлій стіні будинку (Є-Оселя) білий заголовок тоне. Замість
 * того щоб глушити все фото рівним шаром, м'яка радіальна пляма стоїть
 * лише за текстом і сходить нанівець до країв — периметр кадру лишається
 * недоторканим.
 */
.zk-ld-hero__inner::before {
	content: "";
	position: absolute;
	inset: -64px -96px;
	z-index: -1;
	background: radial-gradient(ellipse closest-side, rgba(0, 0, 0, .34) 52%, rgba(0, 0, 0, 0));
	pointer-events: none;
}

/* Тінь тут існує тільки заради читабельності тексту НА ФОТО. Кнопка має
   власне суцільне тло, тому на її написі та сама тінь не рятує нічого —
   лише розмиває літери. text-shadow успадковується, тож знімаємо явно
   (те саме в секції з фоновим фото). */
.zk-ld-hero__inner .elementor-button,
.zk-ld-sec--photo .elementor-button { text-shadow: none; }

.zk-ld-hero__title {
	font-size: 40px;
	line-height: 52px;
	color: var(--zk-ld-on-dark);
	max-width: 860px;
	margin-inline: auto;
}

.zk-ld-hero__kicker { color: var(--zk-ld-on-dark); }

.zk-ld-hero__sub {
	font-family: "Merriweather", Georgia, serif;
	font-size: 18px;
	line-height: 23.4px;
	max-width: 640px;
	margin: 24px auto 0;
}

/* Рейка чисел: площа / ціна / термін — те, чим людина порівнює варіанти. */
.zk-ld-hero__facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 40px 0;
	padding: 0;
}

.zk-ld-hero__facts li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding-inline: clamp(24px, 4vw, 48px);
	border-left: 1px solid rgba(255, 191, 105, .40);
}

.zk-ld-hero__facts li:first-child { border-left: 0; }

.zk-ld-hero__val {
	font-family: "Merriweather", Georgia, serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var(--zk-ld-amber);
}

.zk-ld-hero__facts .zk-ld-meta { color: rgba(217, 217, 217, .82); }

/* ═══ Списки ═════════════════════════════════════════════════════════════ */

.zk-ld-bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	max-width: 720px;
	margin-inline: auto;
}

.zk-ld-bullets li {
	position: relative;
	padding-left: 40px;
}

/* Маркер — «галочка» з двох ліній: перелік того, що входить у ціну,
   читається як перевірений список, а не як абстрактні крапки. */
.zk-ld-bullets li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .42em;
	width: 18px;
	height: 9px;
	border-left: 3px solid var(--zk-ld-accent);
	border-bottom: 3px solid var(--zk-ld-accent);
	transform: rotate(-45deg);
}

.zk-ld-sec--dark .zk-ld-bullets li::before,
.zk-ld-sec--photo .zk-ld-bullets li::before { border-color: var(--zk-ld-amber); }

/**
 * Короткий перелік — в один ряд.
 *
 * Модифікатор ставить bullets.php, коли пунктів мало і всі вони на
 * кілька слів (напр. три банки на /e-oselya/). Стовпчик із трьох
 * однослівних рядків посеред повної смуги виглядав як недороблена
 * секція; ряд по центру важить рівно стільки, скільки в ньому вмісту.
 */
.zk-ld-bullets--row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 56px;
	max-width: none;
}

/* ═══ Картки будинків ════════════════════════════════════════════════════ */

.zk-ld-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--zk-ld-gap);
}

.zk-ld-card {
	display: flex;
	flex-direction: column;
	/* Той самий градієнт і радіус, що в карток будинків на головній:
	   бурштин зайшов згори (5deg → 100% угорі) і підсвічує саме зону
	   заголовка, тому заголовок стоїть ПЕРШИМ, до зображення. */
	background: linear-gradient(5deg, #fff 85%, var(--zk-ld-amber) 100%);
	border-radius: var(--zk-ld-radius);
	overflow: hidden;
	box-shadow: var(--zk-ld-shadow);
	color: var(--zk-ld-text);
	scroll-margin-top: 120px;
	transition: transform .3s, box-shadow .3s;
}

.zk-ld-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 54px rgba(37, 37, 37, .18);
}

.zk-ld-card__body {
	display: flex;
	flex-direction: column;
	padding: 32px 28px;
	flex: 1;
}

.zk-ld .zk-ld-card__title {
	font-size: 32px;
	line-height: 41.6px;
	text-transform: uppercase;
	margin: 0;
}

.zk-ld-card__meta {
	color: rgba(37, 37, 37, .58);
	margin-top: 8px;
}

.zk-ld-card__media {
	margin: 24px 0;
	aspect-ratio: 4 / 3;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
}

/* Посилання-обгортка лайтбокса займає весь бокс планування, щоб клікалось
   саме фото, а не невидимий прямокутник навколо нього. */
.zk-ld-card__zoom {
	display: block;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.zk-ld-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

/* Єдина підказка, що планування клікабельне: воно ледь наближається.
   Ані лупи, ані підпису — картка й так щільна. */
.zk-ld-card__zoom:hover .zk-ld-card__img,
.zk-ld-card__zoom:focus-visible .zk-ld-card__img { transform: scale(1.04); }

.zk-ld-card__zoom:focus-visible {
	outline: 2px solid var(--zk-ld-accent-text);
	outline-offset: 4px;
	border-radius: 12px;
}

/* Опис показується цілком. Обрізки по висоті тут немає навмисно: зайве
   прибрано ЗА ЗМІСТОМ ще в PHP (див. $card_desc у catalog.php), а
   обрубаний на півслові рядок читається як помилка верстки. Різну довжину
   описів вирівнює цінова рейка нижче — вона притиснута до низу картки. */
.zk-ld-card__desc {
	font-size: 18px;
	line-height: 28.8px;
	margin: 0 0 24px;
	color: rgba(37, 37, 37, .82);
}

/**
 * ЦІНОВА РЕЙКА — сигнатура сторінки.
 *
 * Підпис ліворуч, сума праворуч, обидві суми табличними цифрами по
 * спільному правому краю. У сітці з 11 карток суми вишиковуються
 * вертикальною колонкою, і каталог можна порівнювати очима, не читаючи.
 */
.zk-ld-card__prices {
	margin: auto 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--zk-ld-hairline);
}

.zk-ld-card__prices > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding-block: 6px;
}

.zk-ld-card__prices dt {
	font-family: "Merriweather", Georgia, serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(37, 37, 37, .58);
}

.zk-ld-card__prices dd {
	margin: 0;
	font-family: "Merriweather", Georgia, serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Два реальні стани, а не декоративна плашка. */
.zk-ld-card__state {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 20px 0 24px;
	color: rgba(37, 37, 37, .58);
	font-weight: 400;
	letter-spacing: .08em;
}

.zk-ld-card__state::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(37, 37, 37, .30);
}

.zk-ld-card__state.is-building::before { background: var(--zk-ld-accent); }

.zk-ld-card .zk-ld-btn { align-self: flex-start; }

/**
 * Вирівнювання нутрощів карток по рядах (subgrid).
 *
 * Двохрядкова назва («Будинок 110,25 м² на 2 кімнати») зсувала «від N$
 * за м²», планування й опис відносно сусідніх карток. Із subgrid кожен
 * елемент картки живе у спільному ряду сітки: заголовки, планування,
 * описи й цінові рейки стоять по одних лініях у межах видимого ряду.
 *
 * Структура картки фіксована — catalog.php завжди друкує рівно 7
 * елементів (назва, ціна за м², планування, опис, рейка, стан, кнопка),
 * тому авторозкладка по 7 рядах безпечна. row-gap: 0 повертає внутрішні
 * відступи маржинам елементів — бо міжкартковий gap контейнера інакше
 * вліз би МІЖ елементи всередині картки.
 *
 * Без підтримки subgrid картка лишається флексом — стара поведінка.
 */
@supports (grid-template-rows: subgrid) {
	.zk-ld-card {
		display: grid;
		grid-row: span 7;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.zk-ld-card__body {
		display: grid;
		grid-row: 1 / -1;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	/* У сітці «вліво» — це justify-self, а не align-self (той тепер
	   вертикальний); без нього кнопка розтяглась би на всю ширину. */
	.zk-ld-card .zk-ld-btn { justify-self: start; align-self: end; }

	/* Рейку до низу штовхав margin-top:auto у флексі; тут за неї працює
	   спільний ряд описів — найдовший опис ряду задає висоту всім. */
	.zk-ld-card__prices { margin-top: 0; align-self: end; }
}

/* ═══ Плитки (шахівниця) ═════════════════════════════════════════════════ */

/* Сітка без проміжків, скруглена й підрізана як єдиний блок — так вона
   читається однією площиною, а не шістьма окремими картками. */
.zk-ld-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-radius: var(--zk-ld-radius);
	overflow: hidden;
	box-shadow: var(--zk-ld-shadow);
}

.zk-ld-tile {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.zk-ld-tile--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Плитка вже має overflow:hidden, тож фото наближається всередині своєї
	   рамки — сітка не ворушиться. Коефіцієнт той самий, що в контейнерів
	   на головній (--e-con-transform-scale: 1.02), лише трохи довша крива:
	   тут рухається фотографія, а не блок з текстом. */
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.zk-ld-tile--photo:hover img { transform: scale(1.04); }

.zk-ld-tile--text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 32px;
	background: var(--zk-ld-plain);
	background-image: var(--zk-ld-marble, none);
	background-size: cover;
	background-position: center;
	color: var(--zk-ld-text);
}

.zk-ld .zk-ld-tile__title {
	font-size: clamp(20px, 1.8vw, 26px);
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--zk-ld-dark);
	margin: 0 0 12px;
}

.zk-ld-tile__text {
	font-size: 18px;
	line-height: 23.4px;
	color: rgba(37, 37, 37, .72);
	margin: 0;
}

/* ═══ Картки вибору (хаб) ════════════════════════════════════════════════ */

.zk-ld-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--zk-ld-gap);
}

.zk-ld-choice {
	/* position: relative — якір для розтягнутого лінка нижче. */
	position: relative;
	display: flex;
	flex-direction: column;
	background: linear-gradient(5deg, #fff 85%, var(--zk-ld-amber) 100%);
	border-radius: var(--zk-ld-radius);
	overflow: hidden;
	box-shadow: var(--zk-ld-shadow);
	color: var(--zk-ld-text);
	transition: transform .3s, box-shadow .3s;
}

/**
 * Уся картка вибору — клікабельна.
 *
 * Рука тягнеться клацнути фото чи заголовок, а активним був лише рядок
 * «Дивитись дуплекси» внизу. ::after розтягує зону кліку посилання на
 * всю картку; сам рядок лишається видимою підказкою, що це посилання.
 * Фокус малюємо на картці (focus-within), а не на рядку — бо і ціль
 * тепер картка.
 */
.zk-ld-choice__more::after {
	content: "";
	position: absolute;
	inset: 0;
}

.zk-ld-choice:focus-within {
	outline: 2px solid var(--zk-ld-accent-text);
	outline-offset: 4px;
}

.zk-ld-choice .zk-ld-choice__more:focus-visible { outline: none; }

.zk-ld-choice:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 54px rgba(37, 37, 37, .18);
}

.zk-ld-choice__media { aspect-ratio: 16 / 10; }

.zk-ld-choice__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.zk-ld-choice__body {
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

.zk-ld .zk-ld-choice__title {
	font-size: 26px;
	line-height: 1.3;
	text-transform: uppercase;
	margin: 0;
}

.zk-ld-choice__price {
	margin: 0;
	font-family: "Merriweather", Georgia, serif;
	font-weight: 700;
	font-size: 21px;
	font-variant-numeric: tabular-nums;
}

.zk-ld-choice__text { font-size: 18px; line-height: 28.8px; flex: 1; margin: 0; }

.zk-ld-choice__more,
.zk-ld-textlink {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	color: var(--zk-ld-accent-text);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.zk-ld-sec--dark .zk-ld-textlink,
.zk-ld-sec--photo .zk-ld-textlink { color: var(--zk-ld-amber); }

/* ═══ Біла панель ════════════════════════════════════════════════════════ */

/* Той самий прийом, що в блоці «Довіра» на головній: аргументи лежать на
   білій картці, а не просто на фоні смуги. */
.zk-ld-panel {
	background: #fff;
	border-radius: var(--zk-ld-radius);
	box-shadow: var(--zk-ld-shadow);
	padding: 16px 32px;
	max-width: 900px;
	margin-inline: auto;
}

.zk-ld-quote {
	font-style: italic;
	color: rgba(37, 37, 37, .88);
}

.zk-ld-panel--quote {
	padding: 40px;
	text-align: center;
	font-style: italic;
	color: rgba(37, 37, 37, .88);
}

/* ═══ Двоколонкова секція хвоста ═════════════════════════════════════════ */

/* Дві білі картки поруч під спільним заголовком — той самий блок «Довіра»,
   що на головній. `stretch` навмисно: картки різної висоти виглядають як
   помилка верстки, а не як задум. */
.zk-ld-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--zk-ld-gap);
	align-items: stretch;
}

.zk-ld-duo__col {
	max-width: none;
	margin: 0;
	padding: 32px;
	display: flex;
	flex-direction: column;
	/* Вміст короткої колонки — по вертикальному центру. Висоту пари задає
	   довша колонка (stretch вище), і без центрування коротша лишала під
	   текстом мертву смугу на пів-картки: на /duplexes/ між цитатою і
	   кнопкою «Обговорити проєкт» стояло ~270px порожнечі. Для довшої
	   колонки center — no-op, вона й так заповнена. */
	justify-content: center;
}

/* Усередині картки лід — це вступ колонки, а не центрована шапка секції. */
.zk-ld-duo__col .zk-ld-lead {
	max-width: none;
	margin: 0 0 20px;
	text-align: left;
	font-size: 18px;
	line-height: 28.8px;
}

.zk-ld-panel__title {
	font-family: "Lora", Georgia, serif;
	font-size: 24px;
	line-height: 31.2px;
	margin: 0 0 12px;
}

/* Цифри в колонці стоять стовпчиком: три по 200px мінімум сюди не влазять,
   а auto-fit мовчки стиснув би їх в один рядок нечитабельних 48px. */
.zk-ld-duo__col .zk-ld-stats {
	grid-template-columns: 1fr;
	gap: 0;
	text-align: left;
}

.zk-ld-duo__col .zk-ld-stats li {
	flex-direction: row;
	align-items: baseline;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--zk-ld-hairline);
}

.zk-ld-duo__col .zk-ld-stats li:last-child { border-bottom: 0; }
/* 3ch = рівно три цифри (tabular-nums), тому підписи «ділянок»/«років»/
   «будинків» стають в одну вертикаль попри 100 / 25 / 9. */
.zk-ld-duo__col .zk-ld-stats__val { font-size: 40px; min-width: 3ch; }

/* Кнопка «зробимо інший проєкт» стоїть одразу під цитатою, а весь блок
   центрує колонка (justify-content вище). Старий варіант з margin-top:auto
   притискав кнопку до низу — і коли сусідній список документів був удвічі
   довший за цитату, між текстом і кнопкою зяяла порожнеча. */
.zk-ld-duo__col--individual { text-align: center; }
.zk-ld-duo__col--individual .zk-ld-quote { margin-bottom: 24px; }
.zk-ld-duo__col--individual .elementor-button { align-self: center; }

/* ═══ Таблиця ════════════════════════════════════════════════════════════ */

.zk-ld-table-scroll {
	overflow-x: auto;
	background: #fff;
	border-radius: var(--zk-ld-radius);
	box-shadow: var(--zk-ld-shadow);
	padding: 8px 16px;
	/* Та сама міра, що у FAQ, кроків і білих панелей: таблиця на всі 1160px
	   контейнера випадала з ритму сторінки, а двом коротким колонкам стільки
	   ширини й не треба. */
	max-width: 900px;
	margin-inline: auto;
}

.zk-ld-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 520px;
	font-size: 18px;
	font-variant-numeric: tabular-nums;
}

.zk-ld-table th,
.zk-ld-table td {
	text-align: left;
	padding: 16px;
	border-bottom: 1px solid var(--zk-ld-hairline);
}

.zk-ld-table tbody tr:last-child th,
.zk-ld-table tbody tr:last-child td { border-bottom: 0; }

.zk-ld-table thead th {
	font-family: "Merriweather", Georgia, serif;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(37, 37, 37, .58);
}

.zk-ld-table tbody th { font-weight: 600; }

.zk-ld-table tbody td:last-child {
	font-family: "Merriweather", Georgia, serif;
	font-weight: 700;
	white-space: nowrap;
}

/* ═══ Кроки ══════════════════════════════════════════════════════════════ */

/* Єдине місце, де нумерація правдива: це справжня послідовність дій. */
.zk-ld-steps {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 900px;
}

.zk-ld-step {
	display: grid;
	/* `auto`, а не фіксовані `2.2em`: em рахувався від кегля рядка (19.2px),
	   давав 42.2px і був вужчий за сам гліф (43.5px) — номер вилазив у
	   проміжок. Однакову ширину всіх номерів гарантує tabular-nums нижче,
	   тому заголовки все одно стоять по одній вертикалі. */
	grid-template-columns: auto 1fr;
	gap: clamp(20px, 2.5vw, 32px);
	/* НЕ baseline: при 40px проти 24px спільна базова лінія піднімає «шапку»
	   номера на 12px над заголовком, а низ навпаки не доходить до нього —
	   номер читається як зсунутий. Вирівнюємо верхні краї літер
	   (`start` + компенсація різниці півлідингу, виміряна на живій сторінці:
	   заголовок 6.03px, номер 3.89px). */
	align-items: start;
	padding: 24px 0;
	border-bottom: 1px solid var(--zk-ld-hairline);
}

.zk-ld-steps > .zk-ld-step:last-child { border-bottom: 0; }

.zk-ld-sec--dark .zk-ld-step,
.zk-ld-sec--photo .zk-ld-step { border-bottom-color: rgba(217, 217, 217, .22); }

.zk-ld-step__num {
	font-family: "Merriweather", Georgia, serif;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 40px;
	line-height: 1;
	padding-top: 2px; /* див. коментар про вирівнювання в .zk-ld-step */
	color: var(--zk-ld-accent);
}

.zk-ld-sec--dark .zk-ld-step__num,
.zk-ld-sec--photo .zk-ld-step__num { color: var(--zk-ld-amber); }

.zk-ld .zk-ld-step__title {
	font-family: "Lora", Georgia, serif;
	font-size: 24px;
	line-height: 31.2px;
	margin: 0 0 8px;
}

.zk-ld-step__body p { font-size: 18px; line-height: 28.8px; }

/* ═══ FAQ ════════════════════════════════════════════════════════════════ */

.zk-ld-faq { display: grid; gap: 12px; max-width: 900px; margin-inline: auto; }

.zk-ld-faq__item {
	background: #fff;
	border-radius: 20px;
	padding: 4px 28px;
	box-shadow: var(--zk-ld-shadow);
	color: var(--zk-ld-text);
}

.zk-ld-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	font-family: "Lora", Georgia, serif;
	font-weight: 700;
	font-size: 21px;
	line-height: 1.4;
	padding-block: 16px;
}

.zk-ld-faq__item summary::-webkit-details-marker { display: none; }

/* Власний «плюс», що обертається на «мінус». */
.zk-ld-faq__item summary::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background:
		linear-gradient(var(--zk-ld-accent), var(--zk-ld-accent)) center/16px 2px no-repeat,
		linear-gradient(var(--zk-ld-accent), var(--zk-ld-accent)) center/2px 16px no-repeat;
	transition: transform .25s;
}

.zk-ld-faq__item[open] summary::after { transform: rotate(45deg); }
.zk-ld-faq__item summary:hover { color: var(--zk-ld-accent-text); }

/**
 * Плавне розкриття відповіді.
 *
 * Нативний <details> відкривається стрибком. interpolate-size дозволяє
 * анімувати висоту до auto — цього достатньо чистим CSS, без JS-вимірів.
 * Браузер без підтримки просто відкриває миттєво, як і раніше.
 */
@supports (interpolate-size: allow-keywords) {
	.zk-ld-faq { interpolate-size: allow-keywords; }

	.zk-ld-faq__item::details-content {
		block-size: 0;
		overflow-y: clip;
		transition: content-visibility .28s allow-discrete, block-size .28s ease;
	}

	.zk-ld-faq__item[open]::details-content { block-size: auto; }
}

.zk-ld-faq__a {
	padding-bottom: 20px;
	font-size: 18px;
	line-height: 28.8px;
	max-width: 680px;
	color: rgba(37, 37, 37, .85);
}

/* ═══ Галерея ════════════════════════════════════════════════════════════ */

.zk-ld-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--zk-ld-gap);
}

.zk-ld-gallery__item {
	position: relative;
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--zk-ld-shadow);
}

.zk-ld-gallery__item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* Сітка з самих вертикальних фото (модифікатор ставить zk_ld_gallery):
   плитки 3:4 замість кропу під альбомний формат — фотозвіти з
   майданчика зняті телефоном вертикально, і в 4:3 втрачали кадр. */
.zk-ld-gallery--portrait .zk-ld-gallery__item img { aspect-ratio: 3 / 4; }

/* Фото клікабельне (лайтбокс, див. zk_ld_gallery) — та сама стримана
   підказка, що в планувань карток: курсор-лупа і ледь помітне
   наближення. Рамка item уже ріже overflow, сітка не ворушиться. */
.zk-ld-gallery__zoom { display: block; cursor: zoom-in; }

.zk-ld-gallery__zoom img { transition: transform .6s cubic-bezier(.22, .61, .36, 1); }

.zk-ld-gallery__zoom:hover img,
.zk-ld-gallery__zoom:focus-visible img { transform: scale(1.04); }

.zk-ld-gallery__zoom:focus-visible {
	outline: 2px solid var(--zk-ld-accent-text);
	outline-offset: 4px;
	border-radius: 20px;
}

/* Підпис поверх фото — прийом блоку «Переваги комплексу» на головній. */
.zk-ld-gallery__cap {
	position: absolute;
	inset: 0;
	/* Підпис лежить над посиланням-лупою (валідний HTML вимагає figcaption
	   прямим нащадком figure) — клік має проходити крізь нього в лайтбокс. */
	pointer-events: none;
	display: grid;
	place-items: center;
	padding: 24px;
	font-family: "Lora", Georgia, serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 31.2px;
	text-align: center;
	color: var(--zk-ld-beige);
	text-shadow: 1px 1px 10px rgba(0, 0, 0, .9);
	background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.52) 100%);
}

/* ═══ Цифри довіри ═══════════════════════════════════════════════════════ */

.zk-ld-stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 40px;
	text-align: center;
}

.zk-ld-stats li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.zk-ld-stats__val {
	font-family: "Merriweather", Georgia, serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	color: var(--zk-ld-accent-text);
}

.zk-ld-sec--dark .zk-ld-stats__val,
.zk-ld-sec--photo .zk-ld-stats__val { color: var(--zk-ld-amber); }

.zk-ld-stats__cap {
	font-family: "Merriweather", Georgia, serif;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.4;
	opacity: .72;
}

/* ═══ Документи ══════════════════════════════════════════════════════════ */

.zk-ld-docs {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zk-ld-doc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--zk-ld-hairline);
}

.zk-ld-docs > .zk-ld-doc:last-child { border-bottom: 0; }

.zk-ld-doc__view {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 44px;
	flex: 1 1 240px;
	color: var(--zk-ld-text);
	text-decoration: none;
}

.zk-ld-doc__view:hover .zk-ld-doc__name {
	color: var(--zk-ld-accent-text);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.zk-ld-doc__badge {
	flex: 0 0 auto;
	padding: 4px 9px;
	border-radius: 6px;
	background: rgba(205, 130, 30, .12);
	color: var(--zk-ld-accent-text);
	font-family: "Merriweather", Georgia, serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
}

.zk-ld-doc__name { font-size: 18px; line-height: 26px; }

/* Кругла кнопка завантаження з акцентним обручем — та сама, що на
   головній; 44px витримує WCAG 2.5.5 без додаткових правил. */
.zk-ld-doc__dl {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(205, 130, 30, .45);
	color: var(--zk-ld-accent-text);
	text-decoration: none;
	transition: background-color .25s, border-color .25s;
}

.zk-ld-doc__dl:hover {
	background: rgba(205, 130, 30, .12);
	border-color: var(--zk-ld-accent-text);
}

.zk-ld-doc__dl svg { display: block; }

.zk-ld-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ═══ Фінальний заклик ═══════════════════════════════════════════════════ */

/* Блок індивідуального проєкту й фінальний заклик — обидва центровані:
   це не рядові секції з текстом, а звернення, і кнопка в них має стояти
   на тій самій осі, що заголовок, а не тікати до лівого краю. */
.zk-ld-tail--cta,
.zk-ld-tail--individual { text-align: center; }

/* Лінк під фотозвітами — на осі секції і з повітрям після сітки фото,
   інакше висить сиротою під лівим знімком. */
.zk-ld-tail--construction { text-align: center; }
.zk-ld-tail--construction .zk-ld-textlink { margin-top: 32px; }

.zk-ld-tail--cta .zk-ld-lead,
.zk-ld-tail--individual .zk-ld-panel { margin-bottom: 40px; }

/* Заклик стоїть на фото (zk_ld_tail() підкладає кадр із hero) — тексту
   потрібна та сама тінь, що в hero та фотосекціях; трохи більший
   вертикальний відступ дає смузі вагу фіналу, а не прохідного блока. */
.zk-ld-tail.zk-ld-sec--photo { padding-block: 120px; }
.zk-ld-tail.zk-ld-sec--photo .zk-ld-wrap { text-shadow: 1px 1px 10px rgba(0, 0, 0, .9); }

/* ═══ Кнопка ═════════════════════════════════════════════════════════════ */

/**
 * Глобальний стиль кнопки задає розмір шрифту в `em`, тому кнопка
 * успадковує його від контейнера. У віджеті Elementor контекст свій, а
 * всередині .zk-ld базовий кегль 19.2px домножувався ще раз
 * (19.2 × 1.2 = 23.04) — кнопки виходили 67px заввишки замість 55px.
 * line-height теж явно: на сайті він `normal`, а не успадковані 1.6.
 */
.zk-ld .elementor-button {
	font-size: 19.2px;
	line-height: normal;
	/* Тема підкреслює всі посилання; на кнопках сайту підкреслення немає. */
	text-decoration: none;
}

/* ═══ Адаптив ════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
	.zk-ld { --zk-ld-pad: 64px; }

	.zk-ld-sec--split .zk-ld-sec__grid { grid-template-columns: 1fr; }
	.zk-ld-sec--media-left .zk-ld-sec__main,
	.zk-ld-sec--media-left .zk-ld-sec__media { order: 0; }

	.zk-ld .zk-ld-h2 { font-size: 38px; line-height: 40px; }
	.zk-ld-kicker { font-size: 38px; line-height: 38px; }

	.zk-ld-tiles { grid-template-columns: repeat(2, 1fr); }
	.zk-ld-hero__title { font-size: 34px; line-height: 44px; }
}

@media (max-width: 767px) {
	.zk-ld {
		--zk-ld-pad: 48px;
		font-size: 18px;
	}

	.zk-ld-wrap { padding-inline: 16px; }

	.zk-ld .zk-ld-h2 { font-size: 28px; line-height: 32px; }
	.zk-ld-kicker { font-size: 30px; line-height: 30px; }
	.zk-ld-head { max-width: none; margin-bottom: 32px; }
	.zk-ld-lead { margin: -8px auto 32px; }

	.zk-ld-hero { min-height: 78vh; }
	.zk-ld-hero__inner { max-width: 100%; }
	.zk-ld-hero__title { font-size: 26px; line-height: 34px; }
	.zk-ld-hero__sub { font-size: 17px; line-height: 26px; }

	/**
	 * На вузькому екрані рейка перевертається: не три колонки, а три рядки
	 * «число — підпис». Плаский flex-wrap давав 2+1 з осиротілим третім
	 * елементом посередині, а довге «від 58 440 $» ще й ламалось навпіл.
	 */
	.zk-ld-hero__facts {
		display: grid;
		/* 1fr, бо justify-content:center з десктопного флекса інакше центрує
		   auto-колонку по найширшому пункту — і розділові лінії висіли
		   посередині екрана, не доходячи до країв. */
		grid-template-columns: 1fr;
		gap: 0;
		margin: 32px 0;
		text-align: left;
	}
	.zk-ld-hero__facts li {
		align-items: flex-start;
		gap: 4px;
		padding: 12px 0;
		border-left: 0;
		border-top: 1px solid rgba(255, 191, 105, .35);
	}
	.zk-ld-hero__facts li:first-child { border-top: 0; }
	.zk-ld-hero__val { font-size: 24px; }

	.zk-ld-tiles { grid-template-columns: 1fr; }
	.zk-ld-tile { aspect-ratio: 16 / 10; }
	.zk-ld-tile--text { padding: 24px; }

	.zk-ld-card__body { padding: 24px 20px; }
	.zk-ld .zk-ld-card__title { font-size: 24px; line-height: 31.2px; }
	.zk-ld-card__prices dd { font-size: 21px; }

	/* Кнопка картки — на всю ширину: більша ціль дотику, рівний низ
	   карток у стрічці. width перебиває глобальний width:max-content
	   кнопок (legacy-snippets.css), justify-self — правило subgrid вище. */
	.zk-ld-card .zk-ld-btn {
		width: 100%;
		justify-self: stretch;
	}

	.zk-ld-panel { padding: 8px 20px; }
	.zk-ld-panel--quote { padding: 28px 20px; }
	.zk-ld-duo { grid-template-columns: 1fr; }
	.zk-ld-duo__col { padding: 24px 20px; }

	.zk-ld-step { grid-template-columns: 1fr; gap: 4px; }
	.zk-ld-step__num { font-size: 30px; }
	.zk-ld .zk-ld-step__title { font-size: 20px; line-height: 27px; }

	.zk-ld-faq__item { padding-inline: 20px; }
	.zk-ld-faq__item summary { font-size: 19px; }

	.zk-ld-stats { gap: 28px; }
	.zk-ld-stats__val { font-size: 38px; }

	.zk-ld-gallery__cap { font-size: 20px; line-height: 27px; }

	.zk-ld-doc { padding: 10px 0; }
}

@media (prefers-reduced-motion: reduce) {
	.zk-ld-card,
	.zk-ld-choice,
	.zk-ld-doc__dl,
	.zk-ld-tile--photo img,
	.zk-ld-card__img,
	.zk-ld-gallery__zoom img,
	.zk-ld-faq__item summary::after,
	.zk-ld-faq__item::details-content { transition: none; }

	.zk-ld-card:hover,
	.zk-ld-choice:hover,
	.zk-ld-tile--photo:hover img,
	.zk-ld-gallery__zoom:hover img,
	.zk-ld-card__zoom:hover .zk-ld-card__img { transform: none; }
}