/**
 * Секції головної сторінки.
 *
 * Підключається скрізь, де на сторінці є блоки теми, — не тільки на головній:
 * FAQ стоїть на «Доставці», форма заявки на «Контактах».
 *
 * Дизайн-система (кольори, шрифти, кнопки, паспарту, кікери) живе в style.css.
 * Тут лише розкладка окремих секцій.
 */

/* ===========================================================================
   ВИХІД ІЗ КОНТЕЙНЕРА ASTRA
   =========================================================================== */

.gtk-page-home .site-content > .ast-container {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
	display: block;
}

.gtk-page-home .site-content { padding: 0; }
.gtk-page-home .ast-container > .gtk-home { width: 100%; }

/* Липка шапка перекриває ціль якоря — лишаємо їй місце. */
html { scroll-padding-top: 90px; }

/* ===========================================================================
   СПІЛЬНІ ЕЛЕМЕНТИ КОМПОЗИЦІЇ
   =========================================================================== */

/*
 * Кікер із лінією до краю.
 *
 * Заміна нумерації «01 — Розділ». Лінія робить те саме, що робив номер:
 * показує, де починається секція, — але не заявляє порядку, який відвідувач
 * усе одно не тримає в голові.
 */
.gtk-rule-label {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 clamp(28px, 4vw, 52px);
	font-family: var(--gtk-font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--gtk-bronze-text);
}
.gtk-rule-label .gtk-rule {
	flex: 1;
	height: 1px;
	background: var(--gtk-line);
}
.gtk-section--ink .gtk-rule-label { color: var(--gtk-bronze-on-ink); }
.gtk-section--ink .gtk-rule-label .gtk-rule { background: rgba(242, 230, 217, 0.2); }

/* Розділювач між секціями: лінія — ромб — лінія. */
.gtk-divider-mark {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: clamp(40px, 6vw, 90px);
}
.gtk-divider-mark span {
	flex: 1;
	height: 1px;
	background: var(--gtk-line);
}
.gtk-divider-mark i {
	width: 5px;
	height: 5px;
	background: var(--gtk-bronze);
	transform: rotate(45deg);
}

/* Бронзовий відсвіт у куті темної секції: наче підсвічена вітрина. */
.gtk-glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.gtk-glow--left {
	background: radial-gradient(120% 80% at 15% 0%, rgba(168, 116, 68, 0.16) 0%, rgba(168, 116, 68, 0) 62%);
}
.gtk-glow--right {
	background: radial-gradient(100% 90% at 85% 100%, rgba(168, 116, 68, 0.18) 0%, rgba(168, 116, 68, 0) 60%);
}

/*
 * Наближення фотографії при наведенні.
 *
 * Півтори секунди, а не третина: різкий зум читається як реакція кнопки,
 * повільний — як рух каменю під світлом. Крива з макета.
 */
.gtk-plate--zoom img {
	transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
a:hover .gtk-plate--zoom img,
.gtk-hoverable:hover .gtk-plate--zoom img { transform: scale(1.06); }

/* ===========================================================================
   1. ПЕРШИЙ ЕКРАН
   =========================================================================== */

.gtk-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 84svh;
	overflow: hidden;
	background: var(--gtk-ink);
}

.gtk-hero__bg { position: absolute; inset: 0; }

.gtk-hero__img {
	width: 100%;
	height: 112%;
	object-fit: cover;
	transform: scale(1.06);
	animation: gtk-hero-zoom 2.8s var(--gtk-ease) forwards;
}

@keyframes gtk-hero-zoom { to { transform: scale(1); } }

/* Затемнення знизу вгору: градієнт лишає верх кадру недоторканим. */
.gtk-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(188deg, rgba(30, 26, 22, 0.5) 0%, rgba(30, 26, 22, 0.14) 34%, rgba(30, 26, 22, 0.6) 74%, rgba(30, 26, 22, 0.88) 100%);
}

/* Рамки в першому екрані більше немає: разом із паспарту навколо решти
   знімків вона робила сторінку схожою на стенд із однаковими оправами. */
.gtk-hero__frame { display: none; }

.gtk-hero__content {
	position: relative;
	z-index: 3;
	width: 100%;
	padding: clamp(40px, 6vw, 92px) clamp(28px, 5vw, 76px);
}

.gtk-hero__kicker {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 clamp(22px, 3vw, 40px);
	font-family: var(--gtk-font-body);
	font-size: 10px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--gtk-cream);
	text-shadow: 0 1px 14px rgba(30, 26, 22, 0.7);
}
.gtk-hero__kicker .gtk-rule {
	width: clamp(28px, 5vw, 74px);
	height: 1px;
	background: rgba(242, 230, 217, 0.6);
}

.gtk-hero__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: clamp(28px, 5vw, 72px);
}

.gtk-hero__title {
	flex: 1 1 min(600px, 100%);
	margin: 0;
	font-family: var(--gtk-font-display);
	font-weight: 400;
	color: var(--gtk-white);
	font-size: clamp(46px, 8.4vw, 128px);
	line-height: 0.94;
	letter-spacing: -0.025em;
	text-shadow: 0 2px 40px rgba(30, 26, 22, 0.35);
}

/*
 * Рядки заголовка виїжджають з-під маски.
 *
 * Кожен рядок — власна коробка з overflow: hidden, а текст усередині стартує
 * зсунутим на власну висоту вниз. Тому заголовок задається трьома полями в
 * редакторі, а не одним із переносами: маска працює лише на окремих коробках.
 */
.gtk-hero__line {
	display: block;
	overflow: hidden;
}
.gtk-hero__line > span {
	display: block;
	transform: translateY(110%);
	animation: gtk-line-up 1.1s var(--gtk-ease) forwards;
}
.gtk-hero__line:nth-child(2) > span { animation-delay: 0.12s; }
.gtk-hero__line:nth-child(3) > span { animation-delay: 0.24s; }

/* Середній рядок кремовим: фраза розбивається на два регістри кольором.
   Курсив тут був раніше — прибрали разом з усіма іншими нахилами. */
.gtk-hero__line--em > span {
	font-style: normal;
	color: var(--gtk-cream);
}

@keyframes gtk-line-up { to { transform: none; } }

.gtk-hero__side {
	flex: 0 1 340px;
	padding-bottom: 10px;
	padding-left: clamp(18px, 2vw, 28px);
	border-left: 1px solid rgba(242, 230, 217, 0.28);
	opacity: 0;
	animation: gtk-fade-up 1.1s var(--gtk-ease) 0.55s forwards;
}
.gtk-hero__side p {
	margin: 0 0 30px;
	color: rgba(255, 255, 255, 0.86);
	font-size: calc(var(--gtk-small) + 1px);
	line-height: 1.78;
}

.gtk-hero__kicker { opacity: 0; animation: gtk-fade-up 1.1s var(--gtk-ease) 0.05s forwards; }

@keyframes gtk-fade-up {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}

/* Заклик — не кнопка, а рядок із підкресленням і стрілкою, що від'їжджає. */
.gtk-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 9px;
	border-bottom: 1px solid rgba(242, 230, 217, 0.5);
	color: var(--gtk-cream);
	font-size: 11px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	transition: color 0.4s ease, border-color 0.4s ease, gap 0.4s ease;
}
.gtk-hero__cta:hover {
	color: var(--gtk-white);
	border-color: var(--gtk-white);
	gap: 24px;
}
.gtk-hero__cta-arrow {
	font-family: var(--gtk-font-display);
	font-size: 17px;
	line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
	.gtk-hero__img { animation: none; transform: none; }
	.gtk-hero__line > span { transform: none; animation: none; }
	.gtk-hero__kicker,
	.gtk-hero__side { opacity: 1; animation: none; }
}

/* ===========================================================================
   2. ПОЗИЦІЮВАННЯ
   =========================================================================== */

.gtk-about__grid {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 6vw, 96px);
	align-items: flex-start;
}

/*
 * Одна велика фраза замість трьох абзаців.
 *
 * Кегль майже заголовковий, але накреслення звичайне — це не заголовок, а
 * речення, яке хочеться дочитати. Курсивний фрагмент усередині ставиться
 * прямо в тексті через редактор.
 */
.gtk-about__statement {
	flex: 1 1 min(520px, 100%);
	max-width: 880px;
	margin: 0;
	font-family: var(--gtk-font-display);
	font-weight: 400;
	font-size: clamp(27px, 3.5vw, 50px);
	line-height: 1.26;
	letter-spacing: -0.012em;
	color: var(--gtk-ink);
}
.gtk-about__statement em,
.gtk-about__statement i { color: var(--gtk-bronze-text); }

.gtk-about__aside {
	flex: 0 1 280px;
	margin-left: auto;
}
.gtk-about__facts {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.gtk-about__facts li {
	padding: 15px 0;
	border-top: 1px solid var(--gtk-line);
}
.gtk-about__facts li:last-child { border-bottom: 1px solid var(--gtk-line); }

.gtk-about__note {
	margin: 22px 0 0;
	font-size: var(--gtk-small);
}

/* ===========================================================================
   3. ОСНОВНІ ВИРОБИ
   ---------------------------------------------------------------------------
   Головний прийом розвороту: текстова картка заходить на фотографію.
   Сітка з однакових плиток читається як каталог, перекриття — як журнальна
   смуга. Сторони чергуються, щоб око рухалося зигзагом.
   =========================================================================== */

.gtk-products__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 26px;
	flex-wrap: wrap;
	margin-bottom: var(--gtk-head-gap);
}
.gtk-products__head h2 { margin: 0; }
.gtk-products__head p { margin: 0; max-width: 300px; font-size: var(--gtk-small); }

.gtk-prod-rows {
	display: flex;
	flex-direction: column;
	gap: clamp(36px, 5vw, 76px);
	padding-inline: var(--gtk-gutter);
}

/*
 * Ряд-дзеркало.
 *
 * Парні ряди — не просто зсунуті вбік, а віддзеркалені: row-reverse міняє
 * порядок, і фото з карткою міняються сторонами цілком. Раніше тут стояло
 * wrap-reverse із притисканням управо — воно давало той самий порядок,
 * посунутий до правого краю, і зі сторони це читалося як збій верстки, а не
 * як ритм.
 */
.gtk-prod-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	color: inherit;
}
/* У row-reverse flex-start — це правий край. Тобто ряд притискається до
   правого поля, а порядок стає «картка, фото». Точне дзеркало непарного. */
.gtk-prod-row--right {
	flex-direction: row-reverse;
	justify-content: flex-start;
}

/*
 * Фотографія без обрамлення: нічого не обрізається, пропорції в трьох рядах
 * різні — і це навмисно.
 *
 * Бокс фотографії дорівнює самій фотографії.
 *
 * Спершу тут стояла фіксована колонка на 34vw, і вертикальний кадр, вужчий
 * за неї, лишав усередині порожню смугу: з одного боку знімок не діставав
 * бічного поля сторінки, з іншого — не доходив до картки. Тепер розміри
 * задані самому зображенню, а колонка стискається під нього. Обидва краї на
 * місці без жодних вирівнювань.
 */
.gtk-prod-row__media {
	flex: 0 1 auto;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
}

/*
 * Селектор навмисно довгий: у style.css плитка без заданої пропорції вже має
 * власні width/object-fit, і перебити їх можна лише вагою.
 *
 * Дві стелі одразу — по ширині й по висоті. Ширина тримає знімок у тій
 * третині екрана, про яку домовлялися. Висота потрібна не менше: два з
 * трьох кадрів вертикальні, і за чистих пропорцій вони виростали під сімсот
 * пікселів — поруч із карткою на двісті п'ятдесят це вже не пара, а
 * фотографія з підписом десь збоку. Браузер сам вписує зображення в обидві
 * межі, зберігаючи пропорції: кадр меншає цілком, нічого не обрізається.
 */
.gtk-prod-row__media .gtk-plate {
	width: auto;
	height: auto;
	max-width: clamp(280px, 34vw, 520px);
	max-height: clamp(320px, 44vw, 600px);
}
/*
 * Ширину знімка рахуємо з пропорції, а не лишаємо на «auto».
 *
 * Дві стелі самі по собі не працювали. Колонка міряється вмістом, вміст —
 * це знімок із width: auto, а власного розміру в невантаженого знімка
 * немає: пропорція без жодної визначеної сторони розміру не дає. Колонка
 * сходилася в нуль, нульова картинка не потрапляла в поле зору, лінива
 * загрузка не спрацьовувала ніколи — усі три фото в рядах товарів просто
 * не показувалися. Стелю по висоті переводимо в ширину через пропорцію
 * (--gtk-ar-* дописує gtkhouse_block_plate) і беремо меншу з двох: кадр
 * вписаний в обидві межі точно, без порожніх смуг від object-fit.
 */
.gtk-prod-row__media .gtk-plate.gtk-plate--auto img {
	width: min(
		clamp(280px, 34vw, 520px),
		calc(clamp(320px, 44vw, 600px) * var(--gtk-ar-w) / var(--gtk-ar-h))
	) !important;
	height: auto !important;
	max-width: none;
	max-height: none;
	object-fit: contain;
}

.gtk-prod-row__card {
	flex: 0 1 min(400px, 100%);
	padding: clamp(28px, 3.4vw, 52px);
	background: var(--gtk-white);
	border: 1px solid rgba(43, 43, 43, 0.14);
	position: relative;
	z-index: 2;
}
/*
 * Саме тут відбувається перекриття: картка заходить на кадр.
 *
 * Зсув однаковий в обидва боки, лише дзеркальний — у непарному ряду картка
 * стоїть праворуч від фото й заходить на нього лівим краєм, у парному все
 * навпаки. Однакове число тут і робить ряди симетричними.
 *
 * Від'ємний відступ мусить лишатися меншим за бічне поле секції, інакше
 * картка вилазить за край екрана й народжує горизонтальний скрол. Поле —
 * clamp(20px, 4.6vw, 72px), тож зсув узятий із запасом: clamp(-64px, -3.2vw, 0)
 * ніколи не перевищує його на жодній ширині.
 */
.gtk-prod-row--left .gtk-prod-row__card { margin-left: clamp(-64px, -3.2vw, 0px); }
.gtk-prod-row--right .gtk-prod-row__card { margin-right: clamp(-64px, -3.2vw, 0px); }

.gtk-prod-row__label {
	margin: 0 0 16px;
	color: var(--gtk-bronze-text);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}
.gtk-prod-row__name {
	margin: 0 0 16px;
	font-family: var(--gtk-font-display);
	font-weight: 400;
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--gtk-ink);
}
.gtk-prod-row__desc { margin: 0 0 26px; font-size: calc(var(--gtk-small) + 1px); }
.gtk-prod-row__action {
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gtk-bronze-text);
	border-bottom: 1px solid rgba(168, 116, 68, 0.4);
	padding-bottom: 6px;
	transition: border-color var(--gtk-transition);
}
.gtk-prod-row:hover .gtk-prod-row__action { border-bottom-color: var(--gtk-bronze); }

/* ===========================================================================
   4. ВИДИ ГРАНІТУ (темна)
   =========================================================================== */

.gtk-granite__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 26px;
	flex-wrap: wrap;
	margin-bottom: clamp(38px, 5vw, 76px);
}
.gtk-granite__head h2 { margin: 0; }
.gtk-granite__head p {
	margin: 0;
	max-width: 320px;
	color: var(--gtk-text-inv);
	font-size: var(--gtk-small);
}

/*
 * Три породи — три композиції, а не три однакові плитки.
 *
 * Проміжок між колонками навмисно великий: усередині кожної й так є своє
 * перекриття, і якби картки стояли щільно, шість квадратів злилися б в одну
 * строкату стрічку.
 */
.gtk-granite-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: clamp(48px, 5vw, 88px) clamp(28px, 3.4vw, 56px);
}

.gtk-stone { display: block; color: inherit; }

/*
 * Стос із двох поверхонь.
 *
 * Термо лежить нижче й лівіше, поліровка накриває його справа-згори. Висоту
 * стосу задає padding-bottom у відсотках від ширини — так композиція
 * масштабується цілком, разом зі зсувом, і на будь-якій ширині колонки
 * перекриття лишається тим самим.
 */
.gtk-stone__stack {
	display: block;
	position: relative;
	padding-bottom: 104%;
	margin-bottom: 26px;
}

.gtk-stone__layer {
	display: block;
	position: absolute;
	overflow: hidden;
}
.gtk-stone__layer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s var(--gtk-ease);
}

/* Нижній шар приглушений: він фон для полірованого, а не рівний йому. */
.gtk-stone__layer--thermo {
	left: 0;
	top: 0;
	width: 62%;
	aspect-ratio: 1;
	filter: brightness(0.86) saturate(0.9);
}

/*
 * Тінь у три шари — від щільної біля краю до широкої й м'якої.
 *
 * Однією тінню плита виглядає наклеєною. Трьома — лежить: близька дає товщину
 * каменю, дальні відривають його від нижнього шару.
 */
.gtk-stone__layer--polish {
	right: 0;
	bottom: 0;
	width: 74%;
	aspect-ratio: 1;
	box-shadow:
		0 2px 6px rgba(0, 0, 0, 0.4),
		0 12px 28px rgba(0, 0, 0, 0.34),
		0 30px 60px rgba(0, 0, 0, 0.28);
}

.gtk-stone:hover .gtk-stone__layer--polish img { transform: scale(1.05); }
.gtk-stone:hover .gtk-stone__layer--thermo img { transform: scale(1.03); }

.gtk-stone__name {
	margin: 0 0 8px;
	font-family: var(--gtk-font-display);
	font-weight: 400;
	font-size: 27px;
	letter-spacing: -0.01em;
	color: var(--gtk-cream);
	transition: color var(--gtk-transition);
}
.gtk-stone:hover .gtk-stone__name { color: var(--gtk-bronze); }

/*
 * Підпис поверхонь читається як легенда до стосу: перше слово — про верхній
 * знімок, друге — про нижній. Крапка між ними замість коми, щоб пара
 * виглядала переліком варіантів, а не реченням.
 */
.gtk-stone__finish {
	display: flex;
	gap: 14px;
	margin: 0 0 12px;
	font-size: 10px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	/* Десять пікселів на чорнилі: потрібен світліший тон, див. style.css */
	color: var(--gtk-bronze-on-ink);
}
.gtk-stone__finish span + span { position: relative; }
.gtk-stone__finish span + span::before {
	content: '·';
	position: absolute;
	left: -9px;
	color: rgba(242, 230, 217, 0.4);
}

.gtk-stone__desc {
	margin: 0;
	color: var(--gtk-text-inv);
	font-size: var(--gtk-small);
	max-width: 34ch;
}

@media (prefers-reduced-motion: reduce) {
	.gtk-stone__layer img { transition: none; }
}

/* ===========================================================================
   5. ГОТОВІ ЗАМОВЛЕННЯ
   =========================================================================== */

.gtk-works__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 26px;
	flex-wrap: wrap;
	margin-bottom: var(--gtk-head-gap);
}
.gtk-works__head h2 { margin: 0; }

/*
 * Сітка з вирівнюванням по верху, а не колонкова кладка.
 *
 * Спершу тут були CSS-колонки — вони дають щільну газетну кладку без
 * порожнеч. Але колонки фрагментують вміст, і зображення з lazy-load
 * усередині них Chrome розкладає до того, як дізнається їхні пропорції:
 * усі знімки ставали однакової висоти в півтори тисячі пікселів і
 * обрізалися. Сітка нічого не фрагментує й поводиться передбачувано.
 *
 * align-items: start — щоб картка не розтягувалася на висоту найвищої
 * в рядку: саме розтягування й тягне за собою обрізання.
 */
.gtk-works-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
	align-items: start;
	gap: clamp(28px, 3vw, 48px) clamp(20px, 2.6vw, 40px);
}

/*
 * Фільтр за кольором каменю.
 *
 * Кнопки без рамок — самі слова з підкресленням у активного. Обведення в
 * пігулки перетворило б спокійну сторінку на панель керування, а вибір тут
 * робиться раз і мимохідь.
 *
 * Кружечок біля назви показує сам колір. Слово «сірий» у трьох різних
 * каменях означає три різні сірі, і крапка каже про камінь більше, ніж
 * назва.
 */
.gtk-work-filter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px clamp(20px, 2.4vw, 34px);
	margin-bottom: clamp(30px, 3.6vw, 52px);
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(43, 43, 43, 0.1);
}
.gtk-work-filter__label {
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--gtk-text);
}
.gtk-work-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px clamp(18px, 2vw, 30px);
}
/*
 * Висота кнопки — не про красу, а про влучання.
 *
 * Текстовий рядок сам по собі має заввишки пікселів двадцять, і пальцем у
 * нього не потрапиш. Відступи піднімають зону натискання до сорока з гаком —
 * із запасом над мінімумом WCAG, — а на око кнопка лишається просто словом.
 */
.gtk-work-filter__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	/* Ширина теж має мінімум: слово «Усі» саме по собі вужче за двадцять
	   пікселів, і кнопка з нього виходить надто вузькою для пальця. */
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	padding: 4px 0;
	position: relative;
	background: none;
	border: 0;
	font: inherit;
	font-size: var(--gtk-small);
	color: var(--gtk-text);
	cursor: pointer;
	transition: color var(--gtk-transition);
}
/*
 * Риска активного кольору — окремим шаром, а не рамкою знизу.
 *
 * Рамка сідає на нижній край кнопки, а край цей тепер за сорок з гаком
 * пікселів від тексту: підкреслення відривалося від слова й повисало саме
 * по собі. Псевдоелемент ставимо одразу під літерами, незалежно від того,
 * наскільки велика зона натискання навколо.
 */
.gtk-work-filter__btn::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% + 0.85em);
	height: 1px;
	background: transparent;
	transition: background-color var(--gtk-transition);
}
.gtk-work-filter__btn:hover { color: var(--gtk-ink); }
.gtk-work-filter__btn.is-active { color: var(--gtk-ink); }
.gtk-work-filter__btn.is-active::after { background: var(--gtk-bronze); }
.gtk-work-filter__dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	/* Обідок потрібен чорному кружечку на світлому тлі: без нього він
	   зливається з текстом і читається як друкарська помилка. */
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
	outline: 1px solid rgba(43, 43, 43, 0.18);
	outline-offset: -1px;
}
.gtk-work-filter__dot[data-color="korychnevyi"] { background: #8A5236; }
.gtk-work-filter__dot[data-color="siryi"] { background: #8E8C89; }
.gtk-work-filter__dot[data-color="chornyi"] { background: #2E2C2B; }

.gtk-work { display: block; color: inherit; }
/* Атрибут hidden сам собою тут безсилий: правило вище дає display: block, а
   стиль теми переважає браузерний. Повертаємо приховування явно. */
.gtk-work[hidden] { display: none; }
.gtk-work__frame {
	padding: 0;
	border: 0;
	background: none;
	margin-bottom: 18px;
}
.gtk-work__title {
	margin: 0 0 8px;
	font-family: var(--gtk-font-display);
	font-weight: 400;
	font-size: 23px;
	color: var(--gtk-ink);
	transition: color var(--gtk-transition);
}
.gtk-work:hover .gtk-work__title { color: var(--gtk-bronze-text); }
.gtk-work__meta {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gtk-text);
}

/* ===========================================================================
   КАРУСЕЛЬ РОБІТ
   ---------------------------------------------------------------------------
   Стрічка фотографій, що повільно їде сама. Прийом із Dinesen: рух показує,
   що робіт багато, і не змушує гортати сторінку.

   Жодного JS і жодної бібліотеки — самої анімації досить. Доріжка містить
   два однакові набори й зсувається рівно на половину своєї ширини: у момент,
   коли анімація стрибає на початок, на екрані стоїть друга копія, візуально
   не відрізнити.
   =========================================================================== */

.gtk-showcase { overflow: hidden; }

.gtk-showcase__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 26px;
	flex-wrap: wrap;
	margin-bottom: var(--gtk-head-gap);
}
.gtk-showcase__head h2 { margin: 0; max-width: 18ch; }
.gtk-showcase__head p {
	margin: 0;
	max-width: 320px;
	font-size: var(--gtk-small);
}

.gtk-showcase__viewport {
	overflow: hidden;
	/* Тінь-розчинення по краях: стрічка не обривається, а йде далі за екран. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.gtk-showcase__track {
	display: flex;
	width: max-content;
	/*
	 * Проміжку між наборами тут немає навмисно — він живе у padding-right
	 * самих наборів. Інакше половина доріжки не збігалася б із шириною
	 * набору, і раз на цикл стрічка сіпалася б.
	 */
	gap: 0;
	/*
	 * Тривалість обороту рахує PHP: інтервал із панелі блока,
	 * помножений на кількість карток. Запасні 64s — для стрічки, яка
	 * стоїть у вмісті ще без цього поля.
	 */
	animation: gtk-marquee var(--gtk-marquee-time, 64s) linear infinite;
}

.gtk-showcase__set {
	display: flex;
	align-items: center;
	gap: var(--gtk-showcase-gap);
	padding-right: var(--gtk-showcase-gap);
}

.gtk-showcase { --gtk-showcase-gap: clamp(18px, 2.2vw, 34px); }

/* Наведення зупиняє рух — інакше неможливо роздивитися кадр, який сподобався. */
.gtk-showcase__viewport:hover .gtk-showcase__track,
.gtk-showcase__viewport:focus-within .gtk-showcase__track {
	animation-play-state: paused;
}

/*
 * Нерухома стрічка: гортають руками.
 *
 * Маска по краях лишається — вона каже, що праворуч є ще, — а дубль набору
 * у розмітці зникає, інакше при ручному гортанні ті самі роботи йшли б
 * двічі поспіль.
 */
.gtk-showcase__viewport--still {
	overflow-x: auto;
	scrollbar-width: none;
	/*
	 * Розчинення країв — прийом рухомої стрічки: воно каже, що вона їде далі
	 * за екран. Нерухомий набір нікуди не їде, і приглушений крайній кадр
	 * читається як недовантажена фотографія.
	 */
	-webkit-mask-image: none;
	mask-image: none;
}

.gtk-showcase__viewport--still::-webkit-scrollbar { display: none; }

/*
 * Кілька робіт — це ряд, а не стрічка.
 *
 * У рухомої каруселі доріжка ширша за екран завжди: набір дублюється. Коли
 * дубля немає, а робіт дві-чотири, доріжка виявлялася вужчою за вікно й
 * тулилася ліворуч — половину ряду займало порожнє тло, і це читалося як
 * поламана галерея. Тепер набір, що вміщається, стоїть по центру, а той,
 * що не вміщається, гортається як і раніше.
 */
.gtk-showcase__track--still {
	animation: none;
	width: auto;
	min-width: 100%;
	/* safe: коли набір ширший за екран, центрування зрізало б початок стрічки
	   й доїхати до нього прокруткою вже не вийшло б. */
	justify-content: safe center;
}

/*
 * Системне «менше руху» зупиняє автопрокрутку.
 *
 * Раніше стрічка була винятком: атрибут data-gtk-motion виводив її
 * з-під загального глушіння анімацій у style.css, і єдиним способом
 * зупинити рух лишалася кнопка під стрічкою. Кнопки більше немає, і вона
 * більше не потрібна: хто попросив систему не рухати екран, той не має ще
 * раз просити про це кожну окрему стрічку.
 *
 * Стрічка при цьому не зникає, а стає такою самою, як у режимі без
 * автопрокрутки: набір один, гортають його пальцем або колесом.
 */
@media (prefers-reduced-motion: reduce) {
	.gtk-showcase__viewport {
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.gtk-showcase__viewport::-webkit-scrollbar { display: none; }

	.gtk-showcase__track {
		animation: none;
		width: auto;
		min-width: 100%;
		justify-content: safe center;
	}

	/* Дубль набору потрібен лише безшовній прокрутці. Без неї ті самі
	   роботи йшли б двічі поспіль. */
	.gtk-showcase__set[aria-hidden="true"] { display: none; }
}

@keyframes gtk-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/*
 * Розмір картки задає сам знімок.
 *
 * Ширина не фіксована навмисно. Обмежені лише висота й ширина «стелею»:
 * вертикальне фото впирається у стелю висоти й виходить вузьким,
 * горизонтальне впирається в стелю ширини й виходить низьким. Через це
 * стрічка йде різними форматами — так, як у Dinesen, — і жоден кадр не
 * обрізаний, бо обрізати нічого: пропорції власні.
 */
.gtk-showcase__item {
	flex: 0 0 auto;
	color: inherit;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Нічого з нутрощів картки не має виходити за її межі: у стрічці
	   сусідні кадри видно частково, і будь-який виступ лягає на них. */
	min-width: 0;
	overflow: hidden;
}
.gtk-showcase__item .gtk-plate {
	display: block;
	overflow: hidden;
	aspect-ratio: auto !important;
}
/*
 * Спільна висота, вільна ширина.
 *
 * Так знімок будь-яких пропорцій входить у стрічку цілим — вертикальний
 * лишається вузьким, панорама розтягується, — а нижній край у всіх один,
 * і ряд не смикається по висоті.
 *
 * Висота задана числом, а не max-height, і це принципово. Картинки тут
 * ліниві, а поки вони не завантажені, у них немає власного розміру: при
 * height:auto елемент має нульову висоту, ніколи не потрапляє в поле зору
 * спостерігача — і тому не завантажується взагалі. Замкнене коло, яке
 * розриває саме явна висота: вона є ще до першого байта файлу.
 */
/* Селектор довший, ніж хотілося б: у style.css плитка без пропорції має
   height:auto !important, і перебити його можна тільки вагою. Ширину не
   обмежуємо взагалі — інакше панорама впирається у стелю й усередині
   боксу з'являються порожні поля замість самого знімка. */
.gtk-showcase__item .gtk-plate.gtk-plate--auto img,
.gtk-showcase__item img {
	display: block;
	width: auto !important;
	height: clamp(220px, 26vw, 380px) !important;
	max-width: none;
	object-fit: contain;
}

/*
 * Підпис не має права визначати ширину картки.
 *
 * Ширину тут задає сам знімок, але картка — flex:0 0 auto, тобто завширшки
 * зі свій найширший вміст. Найширшим виявлявся підпис: назви робіт із Prom
 * довгі, а в один рядок вони не мають природної межі. Картка розтягувалася
 * далеко за фото, і на 390px у видимій зоні одночасно стояли хвіст підпису
 * попередньої роботи й початок наступної — поверх поточного кадру.
 *
 * Обрізання на два рядки при цьому не вмикалося ніколи: текст завжди
 * вміщався в один рядок, бо картка під нього й розсувалася.
 *
 * width:0 прибирає підпис із розрахунку max-content, min-width:100%
 * повертає йому всю ширину картки вже при розкладці. Ширину знову задає
 * знімок, назва переноситься й обрізається на другому рядку.
 */
.gtk-showcase__caption {
	margin-top: 14px;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gtk-text);
	transition: color var(--gtk-transition);
	width: 0;
	min-width: 100%;
	max-width: 100%;
	white-space: normal;
	line-height: 1.3;
	/* Два рядки завжди, навіть коли назва коротка: інакше нижній край
	   карток гуляє й ряд смикається по висоті. */
	min-height: 2.6em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.gtk-showcase__item:hover .gtk-showcase__caption { color: var(--gtk-bronze-text); }

@media (max-width: 640px) {
	/*
	 * На вузькому екрані розрядка коштує забагато.
	 *
	 * 0.14em на 12px — це майже два пікселі на літеру; типова назва роботи
	 * через це не вміщалася навіть у два рядки й обрізалася на півслові.
	 * Менша розрядка лишає капітель капітеллю, але повертає в підпис
	 * цілі слова.
	 */
	.gtk-showcase__caption {
		font-size: 12px;
		letter-spacing: 0.06em;
	}

}

/*
 * Стрічку можна гортати й руками.
 *
 * Автоматичний рух показує, що робіт багато, але роздивитися конкретну він
 * заважає. Тому переглядове вікно лишається прокручуваним: колесо, тачпад,
 * перетягування — усе працює, а наведення зупиняє анімацію, щоб вона не
 * тягла кадр з-під пальця.
 *
 * Смугу прокрутки ховаємо: вона тут не орієнтир, а смітинка внизу секції.
 * Прокрутка від цього нікуди не дівається — зникає тільки її вигляд.
 */
.gtk-showcase__viewport {
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
}
.gtk-showcase__viewport::-webkit-scrollbar { display: none; }
.gtk-showcase__viewport.is-dragging { cursor: grabbing; }
/* Під час перетягування текст не має виділятися, а посилання — спрацьовувати. */
.gtk-showcase__viewport.is-dragging * { user-select: none; pointer-events: none; }

/*
 * Колишнє правило «удвічі повільніше при prefers-reduced-motion» знято.
 *
 * Воно було компромісом: рух лишався, бо стрічка — єдиний спосіб показати
 * сорок робіт, не змушуючи гортати сторінку. Тепер власник попросив при
 * системному «менше руху» вимикати автопрокрутку зовсім, і стрічка в цьому
 * стані гортається руками — правило вище, поруч із @keyframes.
 *
 * Стояти тут воно все одно не могло: специфічність та сама, а порядок у
 * файлі пізніший, тож воно мовчки перебивало б animation: none.
 */

/* ===========================================================================
   СТОРІНКА РОБОТИ
   =========================================================================== */

/*
 * Галерея роботи — звичайний блок core/gallery.
 *
 * Свою розмітку тут раніше збирав шаблон, і виглядала вона добре, але
 * додати фотографію було ніяк. Тепер це стандартний блок, який редагується
 * як усе інше, а вигляд йому задаємо ми: сітка з природними висотами,
 * замість рядів однакової висоти, у які core вписує кадри розтягуванням.
 */
.gtk-project__prose .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	align-items: start;
	gap: clamp(18px, 2.4vw, 36px);
	margin: 0 0 clamp(36px, 4.5vw, 64px);
}
/*
 * !important тут не від ліні.
 *
 * Ядро задає ширину знімків селектором
 * `.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)`
 * — і цей `:not` з ідентифікатором усередині стоїть там саме для того, щоб
 * тему не можна було перебити звичайною вагою. Ядро рахує ширину як частку
 * рядка (33% для трьох колонок), а в нашій сітці колонка вже й так одна
 * третина: виходило дев'яносто пікселів замість трьохсот. Обійти це можна
 * або власним ідентифікатором у селекторі, або так.
 */
/*
 * Знімок не більший, ніж він є насправді.
 *
 * Фотографії робіт не ширші за 1024 пікселі, а комірка першого кадру займає
 * усю ширину контейнера — до 1560. Розтягнутий на цю ширину камінь
 * розсипається на пікселі. --gtk-shot приходить із PHP і тримає стелю на
 * справжньому розмірі; вужчий кадр стає по центру комірки, а не тулиться
 * ліворуч.
 */
.gtk-project__prose .wp-block-gallery.has-nested-images figure.wp-block-image {
	width: auto !important;
	margin: 0 !important;
	max-width: min(100%, var(--gtk-shot, 100%));
	justify-self: center;
}
.gtk-project__prose .wp-block-gallery.has-nested-images figure.wp-block-image img {
	display: block;
	width: 100% !important;
	height: auto;
	object-fit: contain;
}

/* Перший кадр на всю ширину: він показує роботу цілком, решта — деталі. */
.gtk-project__prose .wp-block-gallery > figure:first-child { grid-column: 1 / -1; }

/*
 * Знімок, який відкривається.
 *
 * Курсор-лупа й ледь помітне освітлення при наведенні — єдине, що каже: сюди
 * можна натиснути. Без цього люди просто не пробують.
 */
.gtk-project__prose .wp-block-gallery figure[role='button'] {
	cursor: zoom-in;
	position: relative;
	overflow: hidden;
}
.gtk-project__prose .wp-block-gallery img {
	transition: transform 1.2s var(--gtk-ease), filter var(--gtk-transition);
}
.gtk-project__prose .wp-block-gallery figure[role='button']:hover img,
.gtk-project__prose .wp-block-gallery figure[role='button']:focus-visible img {
	transform: scale(1.03);
	filter: brightness(1.04);
}

/* Текст після галереї не має розтягуватися на всю ширину сторінки. */
.gtk-project__prose > :not(.wp-block-gallery) { max-width: 68ch; }
.gtk-project__prose h3 {
	margin: clamp(30px, 3.4vw, 48px) 0 14px;
	font-family: var(--gtk-font-display);
	font-weight: 400;
	font-size: var(--gtk-h3);
	color: var(--gtk-ink);
}
.gtk-project__prose ul { padding-left: 1.1em; }
.gtk-project__prose li { margin-bottom: 10px; }

.gtk-project__count {
	margin: clamp(24px, 3vw, 40px) 0 0;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gtk-text-muted);
}

.gtk-project__cta h2 { margin: 0 0 14px; max-width: 20ch; }
.gtk-project__cta p { margin: 0 0 28px; max-width: 52ch; }

/* ===========================================================================
   ПЕРЕГЛЯД ФОТО НА ВЕСЬ ЕКРАН
   =========================================================================== */

/*
 * Тло майже чорне й непрозоре, а не притемнена сторінка.
 *
 * Крізь напівпрозоре тло прозирає верстка, і око чіпляється за неї замість
 * знімка. Тут показують камінь — фон має зникнути повністю.
 */
.gtk-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 2vw, 28px);
	padding: clamp(16px, 4vw, 56px);
	background: #161412;
}
.gtk-lightbox[hidden] { display: none; }

/* Сторінка під вікном не має прокручуватися: інакше свайп гортає її, а не фото. */
body.gtk-lightbox-open { overflow: hidden; }

.gtk-lightbox__stage {
	margin: 0;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 100%;
}
.gtk-lightbox__stage img {
	max-width: 100%;
	/* Місце знизу лишаємо лічильнику, згори — кнопці закриття. */
	max-height: calc(100vh - clamp(96px, 16vw, 180px));
	width: auto;
	height: auto;
	object-fit: contain;
}

.gtk-lightbox__nav,
.gtk-lightbox__close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: none;
	border: 1px solid rgba(242, 230, 217, 0.22);
	color: var(--gtk-cream);
	font-family: var(--gtk-font-display);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--gtk-transition), background-color var(--gtk-transition);
}
.gtk-lightbox__nav:hover,
.gtk-lightbox__close:hover {
	border-color: var(--gtk-bronze);
	background: rgba(168, 116, 68, 0.16);
}

.gtk-lightbox__close {
	position: absolute;
	top: clamp(12px, 2.6vw, 28px);
	right: clamp(12px, 2.6vw, 28px);
	font-size: 26px;
}

.gtk-lightbox__count {
	position: absolute;
	bottom: clamp(14px, 2.6vw, 30px);
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
	font-size: 11px;
	letter-spacing: 0.24em;
	color: rgba(242, 230, 217, 0.6);
	font-variant-numeric: tabular-nums;
}

/*
 * На телефоні стрілки прибираємо.
 *
 * Дві кнопки по краях з'їдають третину вузького екрана в найцікавішого
 * елемента сторінки, а гортають там пальцем, а не кнопкою.
 */
@media (max-width: 600px) {
	.gtk-lightbox__nav { display: none; }
}

/* ===========================================================================
   6. ВИРОБНИЦТВО: ВІДЕО
   =========================================================================== */

.gtk-factory__grid {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}
.gtk-factory__text {
	flex: 1 1 min(280px, 100%);
	max-width: 360px;
}
.gtk-factory__text h2 { margin: 0 0 26px; }
.gtk-factory__text p {
	margin: 0;
	color: var(--gtk-text-inv);
	font-size: var(--gtk-small);
}

.gtk-factory__media {
	flex: 1 1 min(520px, 100%);
	min-width: 0;
}
.gtk-video-frame {
	padding: 0;
	border: 0;
}

/*
 * Відео без підпису — смугою на сім десятих екрана, притиснуте до правого краю.
 *
 * На всю ширину воно виглядало заставкою: кадр упирався в обидва краї, і
 * секція переставала читатися як частина сторінки. Тепер лишається порожня
 * третина ліворуч — та сама пауза, яку в цій темі роблять картки виробів і
 * заголовки секцій. Кадр так само без рамки й так само доходить до краю, але
 * тільки до одного.
 *
 * Праворуч, а не ліворуч, — щоб продовжити зигзаг: попередній ряд виробів
 * закінчується фотографією зліва, наступна секція починається заголовком теж
 * зліва.
 */
.gtk-factory--bare {
	display: flex;
	justify-content: flex-end;
	padding-block: var(--gtk-section-gap);
}
.gtk-factory--bare .gtk-factory__media {
	flex: none;
	width: 70%;
	min-width: 0;
}
.gtk-factory--bare .gtk-video,
.gtk-factory--bare .gtk-video__poster {
	aspect-ratio: 16 / 9;
	max-height: 74vh;
}

/*
 * На вузькому екрані сімдесят відсотків — це вже не пауза, а обрубок.
 * Кадр повертається на всю ширину, а відступи зникають разом із ним.
 */
@media (max-width: 700px) {
	.gtk-factory--bare { padding-block: 0; }
	.gtk-factory--bare .gtk-factory__media { width: 100%; }
	.gtk-factory--bare .gtk-video,
	.gtk-factory--bare .gtk-video__poster { aspect-ratio: 16 / 10; }
}
.gtk-video,
.gtk-video__poster {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* ===========================================================================
   7. ЯК ПРАЦЮЄМО
   =========================================================================== */

.gtk-custom__grid {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 6vw, 104px);
	align-items: flex-start;
}
.gtk-custom__text {
	flex: 1 1 min(300px, 100%);
	max-width: 400px;
}
.gtk-custom__text h2 { margin: 0 0 22px; }
.gtk-custom__text p { margin: 0 0 16px; }
.gtk-custom__text p:last-child { margin-bottom: 0; }

.gtk-steps {
	flex: 1 1 min(340px, 100%);
	max-width: 640px;
	margin-left: auto;
	list-style: none;
	padding: 0;
}
.gtk-step {
	padding: 24px 0;
	border-top: 1px solid var(--gtk-line);
}
.gtk-step:last-child { border-bottom: 1px solid var(--gtk-line); }

.gtk-step__label {
	margin: 0 0 7px;
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--gtk-bronze-text);
}
.gtk-step__title {
	margin: 0 0 5px;
	font-family: var(--gtk-font-display);
	font-weight: 500;
	font-size: 22px;
	color: var(--gtk-ink);
}
.gtk-step__text { margin: 0; font-size: var(--gtk-small); }

/* ===========================================================================
   8. ПРОРАХУНОК
   =========================================================================== */

.gtk-quote__inner { max-width: 960px; }
.gtk-quote__inner h2 { margin: 0 0 26px; }
.gtk-quote__lead {
	max-width: 440px;
	font-size: calc(var(--gtk-small) + 1px);
	margin-bottom: 44px;
	color: var(--gtk-text-inv);
}

/*
 * Поля лише з нижньою лінією.
 *
 * Прямокутна рамка навколо кожного поля на темному тлі малює три однакові
 * коробки й перетворює секцію на форму. Підкреслення лишає ту саму зону
 * введення, але не заявляє про себе.
 */
/*
 * Напрямок задаємо явно, і це не формальність.
 *
 * Базовий .gtk-form — колонка. Цей модифікатор писався як рядок, але
 * напрямку не скидав, тож успадковував колонку: `flex: 1 1 190px`
 * перетворювалося на висоту в сто дев'яносто пікселів замість ширини, а
 * `align-items: flex-end` зсувало поля до правого краю. Форма розліталася
 * на три вузькі смужки, розкидані вниз і вправо від тексту.
 */
.gtk-form--compact {
	display: flex;
	flex-direction: row;
	gap: 18px;
	flex-wrap: wrap;
	align-items: flex-end;
	max-width: 780px;
}
.gtk-form--compact .gtk-form__row { display: contents; }
.gtk-form--compact .gtk-field {
	flex: 1 1 190px;
	max-width: 250px;
	gap: 0;
}
/*
 * Другий ряд — необов'язкові поля.
 *
 * Він відбитий від першого й трохи приглушений: погляд одразу бачить, що
 * заявку можна надіслати, заповнивши лише два верхні поля. Розрив рядка
 * робить flex-basis 100% у порожньому елементі, а не окремий контейнер:
 * .gtk-form__row тут display: contents, і власного місця в розкладці не має.
 */
.gtk-form--compact .gtk-form__row--extra { display: contents; }
.gtk-form--compact .gtk-form__row--extra::before {
	content: '';
	flex-basis: 100%;
	height: 0;
}

/*
 * Поле на весь рядок.
 *
 * Перелік розмірів — це речення, а не число. У двісті п’ятдесят
 * пікселів він поміщається лише кінцем, і людина не бачить початку
 * того, що сама ж вписала.
 */
.gtk-form--compact .gtk-field--wide { flex: 1 1 100%; max-width: 100%; }

/*
 * Багаторядкове поле — той самий підкреслений рядок, лише вищий.
 *
 * Кухня з островом і двома вирізами не вміщається в один рядок, а власний
 * вигляд textarea з рамкою й кутиком не тримається темної секції.
 */
.gtk-form.gtk-form--compact textarea {
	width: 100%;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid rgba(242, 230, 217, 0.28);
	border-radius: 0;
	background: none;
	color: var(--gtk-cream);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	resize: vertical;
}

.gtk-form.gtk-form--compact textarea::placeholder { color: rgba(242, 230, 217, 0.55); }
.gtk-form.gtk-form--compact textarea:hover { border-bottom-color: rgba(242, 230, 217, 0.55); }
.gtk-form.gtk-form--compact textarea:focus { border-bottom-color: var(--gtk-bronze); }

/* Рядок «рахуємо за зразком»: контекст товару, з картки якого прийшли. */
.gtk-form--compact .gtk-form__context {
	flex: 1 1 100%;
	margin: 0;
	color: var(--gtk-bronze-on-ink);
}

/* Підказка під полем — тиха, але не сіра до нечитабельності: на чорнилі
   це єдине місце, де сказано, що креслення можна й не мати. */
.gtk-form--compact .gtk-hint--field {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(242, 230, 217, 0.6);
}

.gtk-form--compact .gtk-label { display: none; }

/*
 * У другому ряду підписи потрібні — і обидва.
 *
 * Ім'я й телефон обходяться плейсхолдером: там зрозуміло без слів. А от
 * список і кнопка файлу без підпису читаються як загадка. Показуємо підпис
 * над обома полями, а не над одним: інакше сусіди стають різної висоти й
 * ряд перекошується, бо форма вирівнює елементи по нижньому краю.
 */
.gtk-form--compact .gtk-form__row--extra .gtk-label {
	display: block;
	margin-bottom: 10px;
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(242, 230, 217, 0.45);
}

/*
 * height: auto — не косметика.
 *
 * Батьківська тема задає полям вибору рівно сорок пікселів заввишки разом із
 * рамкою. З нашими відступами по чотирнадцять на рядок лишалося дванадцять
 * при висоті рядка майже двадцять чотири: назва виробу різалася навпіл.
 *
 * Стрілку малюємо самі: appearance: none прибирає системну разом із рештою
 * оформлення, і без заміни поле перестає читатися як список.
 */
.gtk-form--compact select {
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(242, 230, 217, 0.32);
	border-radius: 0;
	color: var(--gtk-cream);
	font-family: var(--gtk-font-display);
	font-size: 17px;
	padding: 14px 26px 14px 2px;
	height: auto;
	min-height: 0;
	cursor: pointer;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, rgba(242, 230, 217, 0.6) 50%),
		linear-gradient(135deg, rgba(242, 230, 217, 0.6) 50%, transparent 50%);
	background-position: right 12px center, right 6px center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
.gtk-form--compact select:hover { border-bottom-color: rgba(242, 230, 217, 0.55); }
.gtk-form--compact select:focus { border-bottom-color: var(--gtk-bronze); }
/* Список розкривається системним віджетом на світлому тлі — пункти мусять
   лишатися темними, інакше кремовий текст зникає на білому. */
.gtk-form--compact select option { color: var(--gtk-ink); background: var(--gtk-white); }

/*
 * Поле файлу: сховане, але не зникле.
 *
 * display: none вимкнув би його з обходу клавіатурою й з відправлення в
 * частині браузерів. Тому лишаємо його на місці розміром у піксель.
 */
.gtk-field--file { position: relative; }
.gtk-file__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
/* Селектор із .gtk-form не для краси: у style.css є правило `.gtk-form label`,
   яке інакше фарбує цей підпис у чорнильний — на темному тлі його не видно
   взагалі — і зменшує до одинадцяти пікселів. */
/*
 * Друга дія форми не сперечається з першою.
 *
 * Сімнадцять пікселів заголовковим шрифтом і пунктирна лінія знизу робили
 * з прикріплення файлу другу кнопку: поруч із «Отримати розрахунок» у
 * формі виходило два заклики, хоча надіслати заявку можна й без файлу.
 * Тепер це підпис у кегль решти підписів — видно тому, хто має креслення,
 * і не відбирає уваги в того, хто його не має.
 */
.gtk-form .gtk-file__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 0;
	border: 0;
	color: rgba(242, 230, 217, 0.72);
	font-family: var(--gtk-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--gtk-track-eyebrow);
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--gtk-transition);
}
.gtk-form .gtk-file__button svg {
	flex: none;
	color: var(--gtk-bronze);
	transition: color var(--gtk-transition);
}
.gtk-form .gtk-file__button:hover { color: var(--gtk-cream); }
.gtk-form .gtk-file__button:hover svg { color: var(--gtk-cream); }
/* Фокус приходить на приховане поле, а бачить його людина на підписі. */
.gtk-file__input:focus-visible + .gtk-file__button {
	outline: 2px solid var(--gtk-cream);
	outline-offset: 3px;
}
.gtk-file__name {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	color: var(--gtk-bronze);
	word-break: break-all;
}
.gtk-file__name:empty { display: none; }
/*
 * Селектор навмисно важчий, ніж потрібно на головній.
 *
 * На сторінках магазину Astra додає до <body> клас .woocommerce й підмальовує
 * поля правилом «.woocommerce input[type="text"]» з білим тлом і темною
 * рамкою. Коротке «.gtk-form--compact input» має рівно таку саму вагу, тож
 * результат вирішував порядок підключення файлів: у темній секції категорії
 * поля виходили білими коробками з кремовим текстом — тобто порожніми на око.
 * Пара «клас + [type]» додає одиницю ваги й знімає залежність від порядку.
 */
.gtk-form.gtk-form--compact input[type] {
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(242, 230, 217, 0.32);
	border-radius: 0;
	color: var(--gtk-cream);
	caret-color: var(--gtk-bronze);
	font-family: var(--gtk-font-display);
	font-size: 17px;
	padding: 14px 2px;
	min-height: 0;
	box-shadow: none;
}
.gtk-form.gtk-form--compact input[type]::placeholder { color: rgba(242, 230, 217, 0.55); }
.gtk-form.gtk-form--compact input[type]:hover { border-bottom-color: rgba(242, 230, 217, 0.55); }
.gtk-form.gtk-form--compact input[type]:focus { border-bottom-color: var(--gtk-bronze); }

/*
 * Кнопка — завжди з нового рядка.
 *
 * Доки ряд необов'язкових полів займав усю ширину, кнопку зносило
 * вниз само собою. Щойно в останньому ряду лишається одне поле — місце
 * поруч вільне, і кнопка стає йому в пару, ніби це ще одне поле. Дію
 * не ставлять в один ряд із введенням: її шукають під формою.
 */
.gtk-form--compact .gtk-form__submit {
	flex: 0 0 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-top: 6px;
}
.gtk-form--compact .gtk-form__submit .gtk-hint {
	color: rgba(242, 230, 217, 0.45);
	max-width: 52ch;
}
.gtk-form--compact .gtk-form__submit .gtk-hint a { color: var(--gtk-cream); }
.gtk-form--compact .gtk-btn {
	border-color: rgba(168, 116, 68, 0.6);
	color: #c79a63;
}
.gtk-form--compact .gtk-btn:hover {
	background: rgba(168, 116, 68, 0.14);
	color: var(--gtk-cream);
	border-color: #c79a63;
}

.gtk-contact-alt {
	margin-top: 34px;
	font-size: var(--gtk-small);
	color: rgba(242, 230, 217, 0.48);
}
.gtk-contact-alt a {
	color: var(--gtk-cream);
	font-family: var(--gtk-font-display);
	font-size: 17px;
	border-bottom: 1px solid rgba(242, 230, 217, 0.35);
	transition: color var(--gtk-transition), border-color var(--gtk-transition);
}
.gtk-contact-alt a:hover { color: var(--gtk-bronze); border-color: var(--gtk-bronze); }
.gtk-contact-alt__sep { margin: 0 10px; opacity: 0.5; }

.gtk-quote .gtk-alert {
	border: 1px solid var(--gtk-bronze);
	background: transparent;
	color: var(--gtk-cream);
}

/* ===========================================================================
   FAQ
   Нативний <details>: розкриття працює без JS, а отже й тоді, коли скрипт
   не завантажився.
   =========================================================================== */

.gtk-faq { border-top: 1px solid var(--gtk-line-strong); }
.gtk-faq__item { border-bottom: 1px solid var(--gtk-line-strong); }

.gtk-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 26px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--gtk-font-display);
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 600;
	color: var(--gtk-ink);
	transition: color var(--gtk-transition);
}
.gtk-faq__q::-webkit-details-marker { display: none; }
.gtk-faq__q:hover { color: var(--gtk-bronze-text); }
.gtk-faq__q svg {
	flex: 0 0 auto;
	color: var(--gtk-bronze);
	transform: rotate(90deg);
	transition: transform var(--gtk-transition);
}
.gtk-faq__item[open] .gtk-faq__q svg { transform: rotate(-90deg); }

.gtk-faq__a { padding: 0 0 24px; max-width: 68ch; }
.gtk-faq__a p { margin: 0; font-size: var(--gtk-body); line-height: var(--gtk-lh-body); }

/* ===========================================================================
   АДАПТИВ
   =========================================================================== */

@media (max-width: 900px) {
	/*
	 * На вузькому екрані ряд стає стовпчиком.
	 *
	 * Дзеркальність тут втрачає сенс: у стовпчику вона лише міняє місцями
	 * фото й підпис, і половина виробів читалася б задом наперед — спершу
	 * назва, потім знімок. Тому обидва варіанти вирівнюються в один порядок,
	 * а перекриття зникає: накладати картку на фото на трьохстах пікселях
	 * означає закрити половину кадру.
	 */
	.gtk-prod-row,
	.gtk-prod-row--right {
		flex-direction: column;
		align-items: stretch;
	}
	.gtk-prod-row--left .gtk-prod-row__card,
	.gtk-prod-row--right .gtk-prod-row__card {
		margin-left: 0;
		margin-right: 0;
		flex-basis: auto;
	}
	/* Стелі, розраховані на третину широкого монітора, у стовпчику зайві:
	   знімок має зайняти всю доступну ширину. */
	.gtk-prod-row__media .gtk-plate {
		max-width: 100%;
		max-height: 70vh;
	}
	/* Та сама арифметика, але стеля по ширині — уся колонка. */
	.gtk-prod-row__media .gtk-plate.gtk-plate--auto img {
		width: min(100%, calc(70vh * var(--gtk-ar-w) / var(--gtk-ar-h))) !important;
	}

	.gtk-about__aside { margin-left: 0; }
	.gtk-steps { margin-left: 0; }
}

@media (max-width: 600px) {
	.gtk-hero__content { padding-bottom: 56px; }
	.gtk-hero__side {
		flex-basis: 100%;
		border-left: 0;
		padding-left: 0;
	}
	.gtk-form--compact .gtk-field { max-width: 100%; flex-basis: 100%; }
	.gtk-form--compact .gtk-form__submit { width: 100%; }
	.gtk-form--compact .gtk-btn { width: 100%; }
}

/*
 * Смуга живе тут, а не в product.css.
 *
 * Переїхала звідти через просту річ: product.css підключається лише на
 * сторінках WooCommerce, а посадкова — звичайна сторінка. Коли в розділі
 * стало три роботи й менше, блок перемкнувся на смугу і лишився без стилів:
 * картки розтяглися на всю ширину й стали стовпчиком, а поруч із кожною
 * фотографією вісяв порожній екран.
 */
/* ===========================================================================
   Портфоліо на сторінці категорії: по чотири за раз
   ---------------------------------------------------------------------------
   На головній стрічка їде сама. Тут вона заважала: людина прийшла по виріб,
   а повз неї повзуть чужі роботи, і щоб роздивитися одну, треба її наздогнати.
   Тому смуга з прокруткою по чотири картки, з кнопками для миші.
   =========================================================================== */

.gtk-showcase--paged .gtk-showcase__strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * var(--gtk-strip-gap)) / 4);
	gap: var(--gtk-strip-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/*
	 * Дві роботи не мають тулитися ліворуч.
	 *
	 * Смуга розрахована на чотири картки в ряду, і коли робіт дві, права
	 * половина ряда лишалася порожньою. safe center центрує те, що
	 * вміщається, і не ховає початок того, що не вміщається.
	 */
	justify-content: safe center;
	/* Обведення фокуса не має обрізатися контейнером із прокруткою. */
	padding: 4px;
	margin: 0 -4px;
	--gtk-strip-gap: clamp(16px, 2vw, 28px);
}
.gtk-showcase--paged .gtk-showcase__strip::-webkit-scrollbar { display: none; }

/*
 * Менше чотирьох робіт — картки більші, а не ряд із дірками.
 *
 * Центрування више розв’язало лише перекіс ліворуч: одна робота стояла
 * посередині порожнього ряда маленькою карткою на чверть ширини, і секція
 * читалася як недовантажена. У розділах, де в портфоліо один-два об’єкти,
 * чесніше показати їх великими — це виглядає як задум, а не як брак.
 */
.gtk-showcase--paged .gtk-showcase__strip:has( .gtk-showcase__item:only-child ) {
	grid-auto-columns: min(100%, 760px);
}

.gtk-showcase--paged .gtk-showcase__strip:has( .gtk-showcase__item:nth-child(2):last-child ) {
	grid-auto-columns: calc((100% - var(--gtk-strip-gap)) / 2);
}

.gtk-showcase--paged .gtk-showcase__strip:has( .gtk-showcase__item:nth-child(3):last-child ) {
	grid-auto-columns: calc((100% - 2 * var(--gtk-strip-gap)) / 3);
}

@media (max-width: 1100px) {
	.gtk-showcase--paged .gtk-showcase__strip {
		grid-auto-columns: calc((100% - 2 * var(--gtk-strip-gap)) / 3);
	}
}
@media (max-width: 800px) {
	.gtk-showcase--paged .gtk-showcase__strip {
		grid-auto-columns: calc((100% - var(--gtk-strip-gap)) / 2);
	}
}
@media (max-width: 560px) {
	/* Півтори картки: обрізана друга — єдина підказка, що смугу можна гортати. */
	.gtk-showcase--paged .gtk-showcase__strip { grid-auto-columns: 72%; }
}

.gtk-showcase--paged .gtk-showcase__item {
	scroll-snap-align: start;
	display: block;
	min-width: 0;
}
/*
 * Кадр заповнює комірку, а не живе власною пропорцією.
 *
 * У рухомій стрічці ширину задає сам знімок — там картки різного формату
 * і це задум. У смузі ширина колонки фіксована, тож вертикальне фото
 * лишало по боках порожні поля. Селектор довгий навмисно: у style.css
 * плитка без пропорції має height:auto !important.
 */
.gtk-showcase--paged .gtk-showcase__item .gtk-plate { display: block; }

.gtk-showcase--paged .gtk-showcase__item .gtk-plate.gtk-plate--auto img,
.gtk-showcase--paged .gtk-showcase__item img {
	width: 100% !important;
	height: auto !important;
	max-width: none;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* display:flex перебиває вбудоване [hidden]{display:none}, тож ховаємо самі:
   інакше стрілки лишалися видимими там, де гортати нічого. */
.gtk-showcase__nav[hidden] { display: none; }

.gtk-showcase__nav {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 22px;
}
.gtk-showcase__btn {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid var(--gtk-line-strong);
	background: none;
	color: var(--gtk-heading);
	cursor: pointer;
	transition: border-color 0.25s var(--gtk-ease), color 0.25s var(--gtk-ease);
}
.gtk-showcase__btn:hover:not(:disabled) { border-color: var(--gtk-bronze); color: var(--gtk-bronze-text); }
.gtk-showcase__btn:disabled { opacity: 0.3; cursor: default; }
/* Іконка chevron уже дивиться праворуч, тож повертати треба лише «назад». */
.gtk-showcase__btn[data-dir="-1"] svg { transform: rotate(180deg); }