/**
 * Сторінка товару та каталог GTK House.
 *
 * Дизайн-система (кольори, шрифт, кнопки, картки, форми) живе у style.css —
 * тут лише те, що специфічне для WooCommerce. Жодного нового кольору чи
 * розміру шрифту: усе через змінні :root.
 */

/* ===========================================================================
   ХЛІБНІ КРИХТИ
   =========================================================================== */

/*
 * Крихти в магазині оформлюються так само, як на решті сайту.
 *
 * Їх дві системи: WooCommerce малює свою розмітку, тема — свою (.gtk-crumbs
 * на сторінках, статтях і роботах). Розмітку звести в одну не вийде, не
 * переписуючи чужий шаблон, але типографіка має збігатися: інакше та сама
 * навігація виглядає як два різні елементи залежно від того, куди зайшов
 * відвідувач.
 */
.gtk-breadcrumb {
	/* Один рядок, який не переноситься: обрізається лише останній пункт. */
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gtk-text-muted);
	line-height: var(--gtk-lh-small);
	margin-bottom: 18px;
}
.gtk-breadcrumb a { color: var(--gtk-text-muted); }
.gtk-breadcrumb a:hover { color: var(--gtk-brand); }
/*
 * Місце віддає лише останній пункт.
 *
 * Посилання не стискаються навмисно. Коли стискалися всі, браузер ділив
 * нестачу пропорційно, і назві розділу бракувало одного пікселя — а один
 * піксель коштує двох знаків, бо їхнє місце займають три крапки. Виходило
 * «Накривки на паркан і парапет…» там, де рядок майже влазив. Тепер
 * скорочується тільки назва товару, і робить це на всю потрібну величину.
 *
 * overflow: hidden на самому <nav> — остання застава: що б не сталося з
 * довжиною назв, горизонтальної прокрутки сторінки з крихт не буде.
 */
.gtk-breadcrumb { overflow: hidden; }
.gtk-breadcrumb > a {
	flex: 0 0 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.gtk-breadcrumb__sep {
	display: inline-block;
	flex: 0 0 auto;
	margin: 0 8px;
	color: var(--gtk-decor);
}

/*
 * Останній пункт — назва товару, і він єдиний, кому дозволено стискатися.
 *
 * Назви в каталозі бувають на шістдесят знаків: «Сходи з Токівського граніту
 * з термосмугою 1000×300×20». Капслоком і з розрядкою 0.14em такий рядок
 * розганяв крихти на три рядки на телефоні й на два на планшеті — під самою
 * фотографією, ще до заголовка, який каже те саме повністю.
 *
 * Тому тут ні капслоку, ні розрядки: це назва, а не навігаційна мітка, і
 * читається вона як назва. Що не влізло — три точки; сама назва цілком
 * стоїть у <h1> просто нижче, тож нічого не втрачено.
 */
/*
 * На телефоні третього пункту немає взагалі.
 *
 * У 335 пікселях назва розділу забирає всі 252, і назві товару лишається
 * шість-сім знаків із трьома крапками — не інформація, а шум поруч із
 * двома іншими обрізаними пунктами. Тому на вузькому лишаються тільки ті
 * два, що ведуть угору; сама назва стоїть у <h1> на палець нижче, а для
 * пошуку повний ланцюжок однаково їде окремо — Rank Math друкує
 * BreadcrumbList у JSON-LD, і він від цієї розмітки не залежить.
 */
@media (max-width: 575px) {
	/*
	 * :last-of-type тут не годиться — сам .gtk-breadcrumb__cur теж <span>,
	 * і останнім серед спанів виявляється він, а не роздільник. Беремо той,
	 * за яким він стоїть.
	 */
	.gtk-breadcrumb__cur,
	.gtk-breadcrumb__sep:has( + .gtk-breadcrumb__cur ) { display: none; }

	/*
	 * Тепер скорочуватися нема кому, крім самого розділу: «Головна /
	 * Накривки на паркан і парапети» — 345 пікселів при 335. Двох найдовших
	 * розділів це коштує двох останніх літер, решти не чіпає.
	 */
	.gtk-breadcrumb > a:last-of-type { flex-shrink: 1; }
}

.gtk-breadcrumb__cur {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12.5px;
	letter-spacing: 0.01em;
	text-transform: none;
}

/* ===========================================================================
   СТОРІНКА ТОВАРУ
   =========================================================================== */

.gtk-product__top {
	padding-top: clamp(20px, 3vw, 32px);
	padding-bottom: clamp(32px, 5vw, 64px);
}

.gtk-product__grid {
	display: grid;
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}
.gtk-product__grid > * { min-width: 0; }

@media (min-width: 1024px) {
	.gtk-product__grid {
		/* Фото трохи ширше за текст: камінь — головний аргумент,
		   а колонка з ціною не потребує всієї ширини. */
		grid-template-columns: 1.15fr 1fr;
	}
	/* Ціна й кнопка мають лишатися на екрані, поки гортаєш довгу галерею. */
	.gtk-product__summary {
		position: sticky;
		top: 24px;
	}
}

/* --- Заголовок ----------------------------------------------------------- */

.gtk-product__cat {
	margin-bottom: 10px;
	text-decoration: none;
}
.gtk-product__cat:hover { color: var(--gtk-brand-dark); }

/*
 * H1 тут навмисно розміром зі шкалу H2.
 *
 * Назви товарів у каталозі довгі — «Карниз із Добринського лабродориту
 * 1000×100×20 для цоколя — Чорний». У 56px такий заголовок займає пів
 * екрана й відсуває ціну під згин. Рівень заголовка в розмітці лишається
 * першим, змінюється лише кегль.
 */
.gtk-product__title {
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.2;
	margin-bottom: 16px;
}

.gtk-product__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

/* --- Ціна ---------------------------------------------------------------- */

.gtk-product__price {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--gtk-border);
}
.gtk-product__price .price,
.gtk-product__price .gtk-price {
	font-size: clamp(28px, 4vw, 34px);
	font-weight: 700;
	color: var(--gtk-heading);
	line-height: 1.1;
}
.gtk-product__price .gtk-price__unit {
	font-size: var(--gtk-body);
	font-weight: 400;
}
.gtk-product__price del {
	font-size: 0.6em;
	font-weight: 400;
	color: var(--gtk-text-muted);
	margin-right: 8px;
}
.gtk-product__price .gtk-price--on-request {
	font-size: var(--gtk-body);
	line-height: 1.4;
	display: block;
}

/* --- Вибір варіації та кошик --------------------------------------------- */

.gtk-product__cart { margin-bottom: 24px; }

/* Таблиця вибору варіацій від WooCommerce. Розкладаємо її як звичайне
   поле форми, щоб вона не виглядала чужорідною таблицею. */
.gtk-product__cart table.variations {
	width: 100%;
	margin: 0 0 18px;
	border: 0;
	border-collapse: collapse;
}
.gtk-product__cart table.variations th,
.gtk-product__cart table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
}
.gtk-product__cart table.variations th.label {
	font-size: var(--gtk-small);
	font-weight: 600;
	color: var(--gtk-heading);
	margin-bottom: 6px;
}
.gtk-product__cart table.variations td.value { margin-bottom: 12px; }
/*
 * «Очистити» більше нікуди не веде.
 *
 * Посилання скидало вибір товщини до стану «нічого не обрано» — тобто до
 * діапазону замість суми й вимкненої кнопки кошика. Відколи товщина обрана
 * наперед, цей стан не потрібен нікому, крім помилкового натискання.
 */
/*
 * !important тут за тим самим правилом, що й у висоті знімка галереї: лише
 * властивість розкладки й лише всередині .gtk-product__cart.
 *
 * Astra пише `.woocommerce-js div.product form.cart .reset_variations` із
 * повним скиданням властивостей — це (0,4,2) проти наших (0,2,0), і будь-яке
 * наше display програє. Довший селектор теж спрацював би, але ціною
 * прив'язки до класів тіла сторінки, які Astra міняє між версіями.
 */
.gtk-product__cart .reset_variations { display: none !important; }

/*
 * Друга сума під вибором товщини — зайва.
 *
 * WooCommerce показує ціну обраної варіації окремим рядком тут, а вгорі
 * стоїть та сама сума в .gtk-product__price. Дві однакові ціни на відстані
 * екрана читаються як дві різні; лишаємо верхню, бо вона на своєму місці —
 * одразу під назвою.
 */
.gtk-product__cart .woocommerce-variation-price { display: none; }
.gtk-product__cart .woocommerce-variation-availability { font-size: var(--gtk-small); }

/* Кількість і кнопка в один ряд: це головна дія сторінки. */
.gtk-product__cart form.cart,
.gtk-product__cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}
.gtk-product__cart form.variations_form { display: block; }

.gtk-product__cart .quantity { flex: 0 0 auto; }
.gtk-product__cart .quantity input[type="number"] {
	width: 88px;
	min-height: var(--gtk-btn-h);
	text-align: center;
	font-weight: 600;
	/* Стрілки браузера всередині поля з'їдають третину ширини. */
	appearance: textfield;
	-moz-appearance: textfield;
}
.gtk-product__cart .quantity input::-webkit-outer-spin-button,
.gtk-product__cart .quantity input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.gtk-product__cart button.button,
.gtk-product__cart .single_add_to_cart_button {
	flex: 1 1 220px;
}

/* Недоступна комбінація товщини — кнопка має виглядати вимкненою,
   а не просто не працювати. */
.gtk-product__cart .single_add_to_cart_button.disabled,
.gtk-product__cart .single_add_to_cart_button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* --- Заявка на індивідуальний розмір ------------------------------------- */

/*
 * Одна рамка на все.
 *
 * Раніше над панеллю стояв ще й окремий рядок із тим самим заголовком
 * «Потрібен інший розмір?», а сама панель була на кремовому тлі. Зайвий
 * заголовок прибрано разом із тлом: фони на сайті лишились тільки білі
 * й чорнильні, тож блок тримається на самій лінії.
 */
.gtk-product__quote {
	padding: 20px 20px 22px;
	margin-bottom: 24px;
	background: var(--gtk-white);
	border: 1px solid var(--gtk-line);
}
.gtk-product__quote-title {
	font-family: var(--gtk-font-body);
	font-size: 18px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--gtk-ink);
	margin-bottom: 6px;
}
.gtk-product__quote-text {
	font-family: var(--gtk-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--gtk-text);
	margin-bottom: 18px;
}

/*
 * Три дії — один кегль і одна висота.
 *
 * Калькулятор, креслення й телефон рівноцінні: людина обирає не головну
 * дію з другорядних, а спосіб зв'язку, який їй зручніший. Тому ніякого
 * капслоку з розрядкою, як у кнопки кошика, — той самий текстовий кегль,
 * що й в описі над ними, і однакові сорок вісім пікселів заввишки.
 */
.gtk-product__quote-acts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.gtk-product__quote-act {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--gtk-line-strong);
	color: var(--gtk-ink);
	text-decoration: none;
	font-family: var(--gtk-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.gtk-product__quote-act--main {
	border-color: var(--gtk-bronze);
	color: var(--gtk-bronze-text);
}

/*
 * Відступ перед стрілкою доводиться ставити стилем.
 *
 * У розмітці пробіл є — <span aria-hidden="true"> →</span>, — але inline-flex
 * робить span окремим флекс-елементом, а провідні пробіли всередині таких
 * елементів браузер прибирає. Без цього правила стрілка липне до слова.
 */
.gtk-product__quote-act--main > span { margin-left: 8px; }

/*
 * Номер лишається номером: цифри однакової ширини, щоб групи не стрибали,
 * і трохи розрядки, щоб вони не злипались. Напівжирний тут не про
 * важливість дії, а про те, що це дані, які переписують з екрана.
 */
.gtk-product__quote-act--tel {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}
.gtk-product__quote-act:hover,
.gtk-product__quote-act:focus-visible {
	background: var(--gtk-brand-tint);
	border-color: var(--gtk-bronze);
}
.gtk-product__quote-act:focus-visible {
	outline: 2px solid var(--gtk-bronze);
	outline-offset: 2px;
}

/*
 * На вузькому екрані три дії в ряд не тримаються: найдовша з них — «Розрахувати
 * в калькуляторі» — сама по собі ширша за 375 разом із відступами. Стовпчик на
 * всю ширину лишає кегль недоторканим і дає кожній дії власний рядок.
 */
@media (max-width: 600px) {
	.gtk-product__quote { padding: 18px 18px 20px; }
	.gtk-product__quote-acts { flex-direction: column; }
	.gtk-product__quote-act { width: 100%; }
}

/* --- Умови роботи --------------------------------------------------------- */

.gtk-product__facts {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.gtk-product__facts li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--gtk-small);
	line-height: 1.5;
}
.gtk-product__facts svg {
	flex: 0 0 auto;
	color: var(--gtk-brand);
	margin-top: 1px;
}

.gtk-product__sku {
	font-size: 13px;
	color: var(--gtk-text-muted);
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--gtk-border);
}
.gtk-product__sku span {
	color: var(--gtk-heading);
	font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   ГАЛЕРЕЯ
   =========================================================================== */

/*
 * Скидання float-сітки WooCommerce.
 *
 * WooCommerce і Astra розкладають сторінку товару плаваючими блоками:
 *   .woocommerce div.product div.images { float: left; width: 48% }
 *   … .woocommerce-product-gallery__image:nth-child(n+2) { width: 25% }
 * Усередині нашої CSS-сітки це давало галерею в половину колонки, а додаткові
 * фото — по 35 пікселів.
 *
 * Тут !important виправданий: селектори чужі, з вищою специфічністю
 * (0,3,2 і 0,5,2), і зав'язані на класи тіла сторінки, які Astra змінює між
 * версіями (`.woocommerce` проти `.woocommerce-js`). Змагатися з ними
 * довжиною селектора означає щоразу переписувати цей файл після оновлення
 * теми. Обмежуємося трьома властивостями розкладки й лише всередині
 * .gtk-product__media.
 */
/*
 * Примітка про відтінок: рядок, а не застереження.
 *
 * Ні рамки, ні фону, ні знака оклику — усе це перетворило б чесне уточнення
 * на юридичну відмовку й привернуло б до нього більше уваги, ніж воно варте.
 * Дрібний приглушений рядок під мініатюрами читають саме тоді, коли
 * дивляться на фото, і не раніше.
 *
 * Колір — --gtk-text-muted: токена --gtk-mid у темі немає, у макетах ним
 * називали саме цей відтінок.
 */
.gtk-tone-note {
	margin: 10px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--gtk-text-muted);
}

/*
 * На телефоні той самий рядок, але не дрібніший за 15px.
 *
 * У проєкті є власне правило читабельності, і перевірка його стереже:
 * абзац довший за сорок знаків на екрані до 480px мусить бути від 15px.
 * Тринадцять із половиною — доречний кегль там, де поруч є що читати
 * більшим, а на телефоні ця примітка лишається єдиним дрібним текстом
 * під фотографією, і зменшувати її нема за чим.
 */
@media (max-width: 480px) {
	.gtk-tone-note { font-size: 15px; }
}

.gtk-product__media .woocommerce-product-gallery {
	position: relative;
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.gtk-product__media .woocommerce-product-gallery__image {
	width: auto !important;
	display: block !important;
	float: none !important;
}

/* Astra вішає на обгортку галереї півсекундний transition: all — під час
   розкладки сіткою це дає помітне «пливання» плиток після завантаження. */
.gtk-product__media .woocommerce-product-gallery__wrapper {
	transition: none;
}

/*
 * Одна галерея, дві розкладки.
 *
 * Шаблон теми (woocommerce/single-product/product-image.php) дає головне
 * фото і .gtk-gallery__strip з рештою. На широкому смужка розкривається
 * сіткою по два, на вузькому стає стрічкою, яку гортають пальцем. DOM в
 * обох випадках один і той самий, тож PhotoSwipe рахує індекси сам.
 */
.gtk-product__media .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.gtk-product__media .gtk-gallery__strip {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

/*
 * Без рамки й без паспарту.
 *
 * Рамка в один піксель разом із кадром 4/3 і object-fit: contain давала на
 * квадратному рендері дві білі смуги по вісімдесят пікселів, обведені
 * лінією, — читалося як паспарту, ніби знімок менший за своє місце.
 * Тло сторінки тут чисто біле, тож без рамки край білого рендера просто
 * зникає: видно виріб, а не прямокутник, у якому він лежить.
 */
.gtk-product__media .woocommerce-product-gallery__image {
	margin: 0;
	border: 0;
	border-radius: var(--gtk-radius-card);
	overflow: hidden;
	background: var(--gtk-white);
}

/*
 * Головне фото — те, що лежить прямо у figure, а не в смужці.
 *
 * Було :first-child, і це зламалося б разом із обгорткою: перший знімок
 * усередині .gtk-gallery__strip теж перший у своїх батьків, і кадр
 * головного діставався б йому.
 */
.gtk-product__media .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
	grid-column: 1 / -1;
}

/*
 * Посилання лайтбокса й знімок розтягуються на весь кадр.
 *
 * WooCommerce обертає кожен знімок в <a>, і це рядковий елемент: висоту від
 * контейнера він не переймає. Самого display: block тут мало — height: 100%
 * у відсотках не розв'язується, коли висота контейнера сама порахована з
 * aspect-ratio. Виходило, що картинка лишалася у своїх пропорціях, а
 * overflow просто відрізав низ: cover не працював, кадр зсувався догори.
 *
 * inset: 0 дає обом визначену висоту — і далі вже object-fit вирішує, що
 * саме зрізати, симетрично з обох боків.
 */
.gtk-product__media .woocommerce-product-gallery__image { position: relative; }
.gtk-product__media .woocommerce-product-gallery__image > a {
	position: absolute;
	inset: 0;
	display: block;
}

/*
 * Кадр тримає контейнер, знімок його заповнює.
 *
 * Раніше кадр задавала сама картинка (aspect-ratio на img), і при contain
 * вона лишалася всередині свого прямокутника з полями по боках. Тепер
 * пропорцію знає контейнер — а який саме кадр, вирішує клас
 * .gtk-product__media--*, який ставить PHP за розмірами файла.
 */
.gtk-product__media .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	/*
	 * !important тут з тієї самої причини, що й у скиданні сітки вище, і за
	 * тим самим правилом: лише властивість розкладки й лише всередині
	 * .gtk-product__media.
	 *
	 * WooCommerce пише `.woocommerce div.product div.images img { height:
	 * auto }` — це (0,3,3) проти наших (0,2,1), тож будь-яке наше height
	 * програє. А без визначеної висоти object-fit не має що робити:
	 * картинка лишалася у власних пропорціях і просто вилазила за кадр,
	 * який відрізав їй низ. Довшим селектором це теж вирішується, але
	 * ціною прив'язки до класів тіла сторінки, які Astra змінює між
	 * версіями.
	 */
	height: 100% !important;
	aspect-ratio: auto;
	object-fit: cover;
	background: var(--gtk-white);
}

/* Головне фото: кадр за пропорціями файла — див. gtkhouse_gallery_shape(). */
.gtk-product__media--tall .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image { aspect-ratio: 3 / 4; }
.gtk-product__media--square .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image { aspect-ratio: 1 / 1; }
.gtk-product__media--soft .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image { aspect-ratio: 5 / 4; }
.gtk-product__media--wide .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image { aspect-ratio: 3 / 2; }
.gtk-product__media--pano .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image { aspect-ratio: 2 / 1; }

/* Решта — квадрат: це стрічка альтернативних кадрів, і рівний ряд у ній
   важливіший за пропорції кожного окремого знімка. */
.gtk-product__media .gtk-gallery__strip .woocommerce-product-gallery__image {
	aspect-ratio: 1 / 1;
}

/*
 * На вузькому екрані додаткові знімки їдуть стрічкою.
 *
 * Сітка по два займала на телефоні два повні екрани, і назва з ціною
 * починалися так глибоко, що перший екран показував саму лише фотографію.
 * Стрічка на 96 пікселів забирає один рядок: видно, що знімків більше, і
 * видно ціну. Прокрутка пальцем із прилипанням до кадру, без стрілок і без
 * крапок — керує нею сам палець.
 *
 * Межа 920, а не 640: саме там колонка з галереєю перестає бути половиною
 * сторінки й займає всю ширину, і сітка по два з великих плиток знову
 * відсуває ціну за екран.
 */
@media (max-width: 919px) {
	.gtk-product__media .gtk-gallery__strip {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		/*
		 * Смужка тягнеться від краю до краю колонки, але останній кадр не
		 * має впиратися в край екрана — інакше не видно, що стрічка
		 * скінчилася.
		 */
		scroll-padding-left: 0;
		padding-bottom: 2px;
	}

	.gtk-product__media .gtk-gallery__strip .woocommerce-product-gallery__image {
		flex: 0 0 96px;
		width: 96px;
		scroll-snap-align: start;
		border-radius: var(--gtk-radius-img);
	}

	/* Смужка прокрутки під мініатюрами — зайва лінія під стрічкою. */
	.gtk-product__media .gtk-gallery__strip { scrollbar-width: none; }
	.gtk-product__media .gtk-gallery__strip::-webkit-scrollbar { display: none; }
}

/* Кнопка лайтбокса. */
.gtk-product__media .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gtk-milk);
	border: 1px solid var(--gtk-border);
	border-radius: 0;
	color: var(--gtk-ink);
	text-indent: 0;
	font-size: 17px;
	box-shadow: none;
}
.gtk-product__media .woocommerce-product-gallery__trigger:hover {
	background: var(--gtk-milk);
	border-color: var(--gtk-ink);
}

/* Мініатюри під головним фото. */
.gtk-product__media .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}
.gtk-product__media .flex-control-thumbs li {
	margin: 0;
	width: auto;
	float: none;
}
.gtk-product__media .flex-control-thumbs img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/* Рамка навколо кожної мініатюри дрібнила ряд на шість прямокутників.
	   Тепер межу дає тон підкладки, а вибраний кадр позначає outline —
	   він малюється поверх і не зсуває сітку на пікселі. */
	border: 0;
	border-radius: 0;
	opacity: 1;
	cursor: pointer;
	transition: opacity var(--gtk-transition), outline-color var(--gtk-transition);
	background: var(--gtk-bone);
	outline: 1px solid transparent;
	outline-offset: -1px;
}
.gtk-product__media .flex-control-thumbs img:hover { opacity: 0.82; }
.gtk-product__media .flex-control-thumbs img.flex-active {
	outline-color: var(--gtk-ink);
	opacity: 1;
}

/* ===========================================================================
   ХАРАКТЕРИСТИКИ ТА ОПИС
   =========================================================================== */

.gtk-product__details {
	display: grid;
	gap: clamp(28px, 4vw, 48px);
	align-items: start;
}
.gtk-product__details > * { min-width: 0; }

@media (min-width: 900px) {
	.gtk-product__details { grid-template-columns: minmax(300px, 380px) 1fr; }

	/* 160 із 172 товарів мають опис, але в решти таблиця характеристик
	   лишалася б у вузькій колонці з порожнечею праворуч. */
	.gtk-product__details > :only-child { max-width: 640px; }
}

/*
 * «Характеристики» й «Опис» — це підписи до колонок, а не назви секцій.
 * Кеглем заголовка вони важили більше за сам вміст; лишаємо їх заголовками
 * у розмітці заради структури, але вигляд даємо кікера, як усюди на сайті.
 */
.gtk-product__details h2 {
	margin-bottom: 18px;
	font-family: var(--gtk-font-body);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gtk-bronze-text);
}

/*
 * Характеристики оформлені так само, як факти в героєві категорії.
 *
 * Була біла коробка із заокругленою рамкою — єдиний такий елемент на сайті,
 * де решта тримається на тонких лініях без обведення. Він читався як віджет
 * із чужої теми. Тепер це той самий список: мітка дрібними великими літерами,
 * значення поруч, між рядками волосяна лінія.
 */
.gtk-specs {
	margin: 0;
	border-top: 1px solid var(--gtk-line);
}
.gtk-specs__row {
	display: grid;
	gap: 4px 24px;
	padding: 14px 0;
	border-bottom: 1px solid var(--gtk-line);
	font-size: var(--gtk-small);
}
/*
 * Два стовпці — лише коли ряд справді широкий. У вузькій колонці значення,
 * притиснуте до правого краю, зависає окремим рядком далеко від свого
 * підпису, і око не зв'язує їх у пару.
 */
@media (min-width: 600px) {
	.gtk-specs__row { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); align-items: baseline; }
	.gtk-specs dd { text-align: right; }
}
.gtk-specs__row:last-child { border-bottom: 0; }
.gtk-specs dt {
	margin: 0;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--gtk-bronze-text);
}
.gtk-specs dd {
	margin: 0;
	font-weight: 600;
	color: var(--gtk-heading);
}

/* Текст опису з вивантаження Prom: звичайні абзаци й списки. */
.gtk-prose {
	font-size: var(--gtk-body);
	line-height: 1.7;
	max-width: 68ch;
}
.gtk-prose h2,
.gtk-prose h3 {
	font-size: var(--gtk-h3);
	margin: 1.4em 0 0.5em;
}
.gtk-prose h2:first-child,
.gtk-prose h3:first-child { margin-top: 0; }
.gtk-prose ul,
.gtk-prose ol { padding-left: 1.25em; margin: 0 0 1em; }
.gtk-prose li { margin-bottom: 0.4em; }
.gtk-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--gtk-radius-img);
}

/*
 * Варіант краю в описі: знімок ліворуч, текст праворуч.
 *
 * Секцію фаски малював шаблон, і вона стояла сіткою з п’яти карток. Тепер
 * це звичайні блоки в описі, і без цих правил кожен знімок займав би
 * всю ширину колонки, а опис розтягнувся б на п’ять екранів.
 */
.gtk-prose .gtk-edge-item {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 4px 24px;
	align-items: start;
	margin: 1.6em 0;
}

/*
 * Знімки фасок — без тіні й без кадру.
 *
 * Це рендери бруска на білому тлі. Astra вішає на кожну figure
 * м’яку тінь — на звичайному фото вона лише відбиває кадр, а тут
 * обводила біле тло й перетворювала його на білий квадрат, наклеєний
 * поверх тексту. Без тіні тло зливається зі сторінкою, і лишається
 * сам камінь.
 *
 * object-fit: contain потрібен через те, що рендер ширший за 4:3, і
 * жорсткий кадр зрізав би кут бруска — той самий, заради якого цей
 * знімок тут стоїть.
 */
.gtk-prose .gtk-edge-item figure {
	grid-row: span 2;
	margin: 0;
	box-shadow: none;
	background: none;
}

.gtk-prose .gtk-edge-item figure img {
	box-shadow: none;
	background: none;
	border-radius: 0;
	object-fit: contain;
}

.gtk-prose .gtk-edge-item h3 {
	margin: 0;
	align-self: end;
}

.gtk-prose .gtk-edge-item p { margin: 0; }

/*
 * Креслення крапельника стоїть на місці знімка й так само без плашки:
 * п’ять фото без тла й шосте на бежевому квадраті читалися б як різні речі.
 */
.gtk-prose .gtk-edge-item .gtk-plate {
	grid-row: span 2;
	display: block;
	background: none;
	padding: 0;
}

@media (max-width: 620px) {
	.gtk-prose .gtk-edge-item {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.gtk-prose .gtk-edge-item figure,
	.gtk-prose .gtk-edge-item .gtk-plate {
		grid-row: auto;
		max-width: 240px;
	}
}
/*
 * Згорнутий опис.
 *
 * Описи виросли до п’ятисот слів із розділами й знімками фасок. Тому,
 * хто вже вибрав, вони лише відсувають супутні товари на два екрани вниз.
 * Показуємо початок, решта — за кнопкою.
 *
 * Клас is-folded вішає скрипт, а не шаблон: без JavaScript текст має
 * лишатися цілим.
 */
.gtk-prose--fold.is-folded {
	position: relative;
	max-height: 22em;
	overflow: hidden;
}

/* Градієнт каже, що текст не закінчився, а обірвався навмисно. */
.gtk-prose--fold.is-folded::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 7em;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--gtk-sand));
	pointer-events: none;
}

.gtk-desc__more { margin-top: 20px; }

.gtk-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--gtk-small);
}
.gtk-prose td,
.gtk-prose th {
	border: 1px solid var(--gtk-border);
	padding: 8px 12px;
}

/* ===========================================================================
   СІТКА КАТАЛОГУ ТА СХОЖІ ТОВАРИ
   =========================================================================== */

/*
 * Сітка каталогу.
 *
 * Astra жорстко задає чотири колонки правилом
 * `.woocommerce ul.products:not(.elementor-grid) { grid-template-columns:
 * repeat(4,1fr) }` — специфічність (0,3,1). Тому власне правило повторює
 * ту саму форму, додаючи клас .gtk-grid-products, який тема підставляє
 * замість columns-N: виходить (0,4,1) і чесна перемога без !important.
 *
 * auto-fill замість фіксованого числа: у каталозі збоку стоїть панель
 * фільтрів, і кількість колонок має залежати від того, скільки місця
 * реально лишилося, а не від налаштування теми.
 */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products.gtk-grid-products:not(.elementor-grid),
.woocommerce-page ul.products.gtk-grid-products:not(.elementor-grid) {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
/*
 * WooCommerce додає списку клас columns-N, а Astra під нього задає кожній
 * картці відсоткову ширину (`ul.products.columns-4 li.product { width:
 * 22.05% }`) з плаваннями. Усередині сітки це давало чотири стиснуті
 * колонки замість трьох нормальних. Атрибутний селектор покриває будь-яке
 * значення N і дає специфічність, вищу за правило теми.
 */
.woocommerce ul.products > li.product,
.woocommerce-page ul.products > li.product,
.woocommerce ul.products[class*="columns-"] > li.product.gtk-card,
.woocommerce-page ul.products[class*="columns-"] > li.product.gtk-card {
	width: auto;
	margin: 0;
	float: none;
	min-width: 0;
	clear: none;
}

/* На найвужчих екранах одна колонка читабельніша за дві стиснуті. */
@media (max-width: 479px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: 1fr; }
}

/* Кнопка «У кошик» у картці не має відтісняти ціну. */
.gtk-card__buy { flex: 0 0 auto; }

/* Перехід до вибору товщини — так само. */
.gtk-card__pick { flex: 0 0 auto; }

/*
 * Сума й одиниця — два рядки, а не один.
 *
 * Ціна загалом стоїть у рядок і переноситься за потреби. У сітці це
 * давало рознобій: де сума одна, «за штуку» ставало поруч; де діапазон —
 * з’їжджало нижче, і сусідні картки розходилися по висоті. У картці
 * розкладаємо їх завжди однаково.
 */
.gtk-card__foot { align-items: flex-end; }

.gtk-card__foot .gtk-price,
.gtk-card__foot .price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.gtk-card .gtk-card__media > a { display: block; }
.gtk-card .gtk-card__media img { margin: 0; }

/* Позначка «Акція» поверх фото. */
.gtk-card .gtk-card__media .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	margin: 0;
}

.gtk-product__related {
	padding-block: clamp(40px, 6vw, 72px);
}
/*
 * Тільки заголовок самого блоку, а не будь-який h2 усередині: назви товарів
 * у картках — теж h2, і загальне правило роздувало їх до 42px.
 */
.gtk-product__related > section > h2 {
	font-size: var(--gtk-h2);
	margin-bottom: clamp(20px, 3vw, 32px);
}
.gtk-product__related section:not(:last-child) { margin-bottom: clamp(32px, 5vw, 56px); }

/* ===========================================================================
   КАТАЛОГ: ЗАГОЛОВОК І РОЗКЛАДКА
   =========================================================================== */

/*
 * Вихід із контейнера Astra — так само, як на головній. Astra відкриває
 * .ast-container у header.php зі своєю шириною й полями, а каталог керує
 * ними сам через .gtk-container.
 */
.gtk-page-catalog .site-content > .ast-container {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
	display: block;
}
.gtk-page-catalog .site-content { padding: 0; }
.gtk-page-catalog .ast-woocommerce-container { padding: 0; }

.gtk-catalog__head {
	padding-top: clamp(20px, 3vw, 32px);
}

/* Не --gtk-h1: та шкала доходить до 100px і призначена для першого екрана
   головної. Назва категорії в каталозі має бути заголовком сторінки, а не
   плакатом над сіткою товарів. */
.gtk-catalog__title {
	font-size: clamp(38px, 5.4vw, 72px);
	line-height: 1.06;
	margin-bottom: 16px;
}

/*
 * Посилання на посадкову розділу — під заголовком, а не в ряду типів.
 *
 * У ряду типів воно читалося б як ще один розділ каталогу; тут же видно, що
 * це друга сторінка про той самий виріб.
 */


/* Підкатегорії плашками під заголовком. */
.gtk-catalog__subcats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.gtk-catalog__subcats .gtk-chip span {
	color: var(--gtk-text-muted);
	font-variant-numeric: tabular-nums;
}

.gtk-catalog__layout {
	display: grid;
	gap: clamp(20px, 3vw, 40px);
	padding-top: clamp(20px, 3vw, 32px);
	padding-bottom: clamp(40px, 6vw, 72px);
	align-items: start;
}
.gtk-catalog__layout > * { min-width: 0; }

@media (min-width: 900px) {
	.gtk-catalog__layout { grid-template-columns: 260px 1fr; }
	/* Фільтри лишаються на екрані, поки гортаєш довгу сітку. */
	.gtk-filters { position: sticky; top: 24px; }
}

.gtk-catalog__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}
.gtk-catalog__bar .woocommerce-result-count,
.gtk-catalog__bar .woocommerce-ordering {
	margin: 0;
	float: none;
	font-size: var(--gtk-small);
	color: var(--gtk-text-muted);
}
.gtk-catalog__bar select { min-height: 44px; }

/*
 * Порожній результат — не помилка сайту. Людина вже щось шукала, тому
 * блок пояснює, що робити далі, і одразу дає шлях до розрахунку.
 */
.gtk-catalog__empty {
	padding: clamp(32px, 5vw, 56px);
	text-align: center;
	background: var(--gtk-bg-warm-soft);
	border: 1px solid var(--gtk-border);
	border-radius: var(--gtk-radius-card);
}
.gtk-catalog__empty h2 {
	font-size: var(--gtk-h3);
	margin-bottom: 10px;
}
.gtk-catalog__empty p {
	max-width: 52ch;
	margin: 0 auto 24px;
	font-size: var(--gtk-small);
	line-height: 1.6;
}
.gtk-catalog__empty .gtk-actions { justify-content: center; }

/* ===========================================================================
   ПАНЕЛЬ ФІЛЬТРІВ
   =========================================================================== */

/* Рамка навколо фільтрів прибрана: список і так відділений від сітки товарів
   колонкою повітря, а прямокутник поруч із прямокутниками фотографій робив
   каталог схожим на панель керування. Групи всередині розділені хайрлайнами —
   цього досить. */
.gtk-filters__box {
	position: relative;
	background: none;
	border: 0;
	border-radius: 0;
}

/*
 * Перемикач — кнопка, тож скидаємо все, що браузер малює кнопкам сам:
 * рамку, тло, власний шрифт і центрування тексту.
 */
.gtk-filters__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 16px 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--gtk-track-eyebrow);
	text-transform: uppercase;
	color: var(--gtk-ink);
	border: 0;
	border-top: 1px solid var(--gtk-border);
	border-bottom: 1px solid var(--gtk-border);
}
.gtk-filters__toggle svg {
	color: var(--gtk-text-muted);
	transform: rotate(90deg);
	transition: transform var(--gtk-transition);
}
.gtk-filters__toggle:focus-visible {
	outline: 2px solid var(--gtk-ink);
	outline-offset: -2px;
	border-radius: 0;
}

.gtk-filters__body {
	padding: 0 0 18px;
	border-top: 0;
}

/*
 * На телефоні панель згорнута, поки її не розгорнули.
 *
 * Ховає клас .gtk-js на <html> — той самий, що й для месенджерів плаваючої
 * кнопки. Без JavaScript панель лишається розкритою: фільтри мають
 * працювати завжди, згортання — це зручність, а не умова доступу до них.
 *
 * Раніше тут стояв .is-ready — клас, який дописував site.js уже після
 * завантаження сторінки. Різниця між ними — кілька сотень мілісекунд, і
 * весь цей час панель стояла розгорнутою, а потім складалася: увесь
 * каталог під нею підстрибував угору. На мобільному профілі це давало
 * CLS 0,497 на кожній сторінці розділу — втричі гірше за межу, за якою
 * Google рахує сторінку непридатною.
 *
 * Клас із <head> стоїть на місці ще до того, як браузер почне малювати
 * <body>, тож стрибка немає взагалі: панель згорнута від першого кадру.
 */
@media (max-width: 899px) {
	.gtk-js .gtk-filters .gtk-filters__body { display: none; }
	.gtk-js .gtk-filters.is-open .gtk-filters__body { display: block; }
}

.gtk-filters.is-open .gtk-filters__toggle svg { transform: rotate(-90deg); }

/* На широкому екрані фільтри показані завжди, перемикач не потрібен. */
@media (min-width: 900px) {
	.gtk-filters__toggle { display: none; }
	.gtk-filters__body {
		display: block;
		padding-top: 0;
		border-top: 0;
	}
}

/*
 * Рядок обраних фільтрів над товарами.
 *
 * Той самий набір плашок, що був у панелі, але тут він не змушує тримати
 * панель розкритою — а отже, не відсуває першу картку вниз.
 */
.gtk-catalog__active {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--gtk-border);
}

.gtk-catalog__active .gtk-filters__active-label,
.gtk-catalog__active .gtk-filters__chips { margin: 0; }

/*
 * Підпис про тип виробу — окремим рядком над плашками: це не один із
 * обраних фільтрів, а рамка всієї вибірки.
 */
.gtk-catalog__shown {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	font-size: 13px;
	color: var(--gtk-text-muted);
}

.gtk-filters__active {
	padding-bottom: 16px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--gtk-border);
}
.gtk-filters__active-label {
	font-size: 13px;
	color: var(--gtk-text-muted);
	margin-bottom: 8px;
}
.gtk-filters__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}
.gtk-chip--remove {
	gap: 8px;
	background: var(--gtk-ink);
	border-color: var(--gtk-ink);
	color: var(--gtk-white);
}
a.gtk-chip--remove:hover {
	background: transparent;
	border-color: var(--gtk-ink);
	color: var(--gtk-ink);
}
.gtk-chip__x {
	font-size: 15px;
	line-height: 1;
	opacity: 0.75;
}

.gtk-filters__reset {
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gtk-filter-group {
	padding-block: 16px;
	border-bottom: 1px solid var(--gtk-border);
}
.gtk-filter-group:last-child { border-bottom: 0; padding-bottom: 0; }

.gtk-filter-group__title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gtk-text-muted);
	margin-bottom: 10px;
}

.gtk-filter-group__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gtk-filter-option {
	display: flex;
	align-items: center;
	gap: 10px;
	/* 40px — мінімальна висота, у яку впевнено влучає палець. */
	min-height: 40px;
	padding: 4px 6px;
	margin-inline: -6px;
	border-radius: 0;
	font-size: var(--gtk-small);
	color: var(--gtk-heading);
	transition: color var(--gtk-transition);
}
.gtk-filter-option:hover {
	background: transparent;
	color: var(--gtk-brand);
}

/* Псевдо-чекбокс: посилання працює як перемикач, тож і виглядати має
   перемикачем — інакше не видно, що значень можна обрати кілька. */
.gtk-filter-option__box {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 1px solid var(--gtk-border);
	border-radius: 0;
	background: transparent;
	position: relative;
	transition: border-color var(--gtk-transition), background-color var(--gtk-transition);
}
.gtk-filter-option.is-active .gtk-filter-option__box {
	background: var(--gtk-ink);
	border-color: var(--gtk-ink);
}
.gtk-filter-option.is-active .gtk-filter-option__box::after {
	content: '';
	position: absolute;
	left: 4.5px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid var(--gtk-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.gtk-filter-option__name { flex: 1 1 auto; }
.gtk-filter-option.is-active .gtk-filter-option__name { font-weight: 600; }

.gtk-filter-option__count {
	flex: 0 0 auto;
	font-size: 12.5px;
	color: var(--gtk-text-muted);
	font-variant-numeric: tabular-nums;
}

.gtk-filter-price {
	display: flex;
	align-items: center;
	gap: 8px;
}
.gtk-filter-price input[type="number"] {
	min-width: 0;
	flex: 1 1 auto;
	min-height: 44px;
	padding: 8px 10px;
	text-align: center;
	font-size: 15px;
}
.gtk-filter-price__dash { color: var(--gtk-text-muted); }
.gtk-filter-price .gtk-btn {
	flex: 0 0 auto;
	min-height: 44px;
	padding-inline: 14px;
}

/* Довідка під сіткою: власна секція на всю ширину, тому виводимо її
   з-під контейнера сторінки.

   Тут свій, стисліший набір розмірів. Загальний .gtk-prose розрахований на
   статтю, яку читають від початку до кінця: великий кегль, заголовки
   врівень із рештою сторінки, повітря між абзацами. Цей блок читають
   інакше — вибірково, шукаючи одну відповідь, — і в повнорозмірному наборі
   він виглядав удвічі важливішим за сітку товарів над ним.

   Тому: дрібніший текст, заголовки кікерами замість повнорозмірних, а самі
   блоки — комірками сітки. Розкладку збирає gtkhouse_archive_description_grid()
   у inc/woocommerce.php. */
.gtk-archive-text {
	margin-top: clamp(40px, 6vw, 72px);
}
.gtk-archive-text .gtk-prose {
	font-size: var(--gtk-small);
	line-height: 1.6;
}
.gtk-archive-text .gtk-prose h2,
.gtk-archive-text .gtk-prose h3 {
	font-family: var(--gtk-font-body);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--gtk-bronze-text);
	line-height: 1.5;
	margin: 1.7em 0 0.5em;
}
.gtk-archive-text .gtk-prose h2:first-child,
.gtk-archive-text .gtk-prose h3:first-child { margin-top: 0; }
.gtk-archive-text .gtk-prose p,
.gtk-archive-text .gtk-prose ul {
	margin-bottom: 0.9em;
}
.gtk-archive-text .gtk-prose li { margin-bottom: 0.35em; }

/*
 * Кладка колонками, а не сіткою.
 *
 * Сітка вирівнює ряди за найвищою коміркою, і поряд із довгим переліком
 * товарів короткі блоки лишали під собою півекрана порожнечі. Колонки
 * такого не роблять: блоки течуть один за одним і заповнюють висоту.
 *
 * Розрив усередині блоку заборонений — кожен із них цілий, із власним
 * підзаголовком, тож посеред думки колонка не обірветься.
 */
.gtk-archive-text__grid { column-gap: clamp(32px, 5vw, 72px); }

.gtk-archive-text__item {
	max-width: 62ch;
	margin-bottom: 26px;
	break-inside: avoid;
	page-break-inside: avoid;
}
.gtk-archive-text__item:last-child { margin-bottom: 0; }

@media (min-width: 800px) {
	.gtk-archive-text__grid { columns: 2; }
}
@media (min-width: 1200px) {
	.gtk-archive-text__grid { columns: 3; }
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	font-size: var(--gtk-small);
	color: var(--gtk-text-muted);
	margin-bottom: 20px;
}
.woocommerce .woocommerce-ordering select { min-height: 44px; }

/* ===========================================================================
   ТИПИ ВИРОБІВ УГОРІ КАТАЛОГУ
   =========================================================================== */

/*
 * Перший ряд каталогу: розділи, а не фільтри.
 *
 * Без рамок і плашок — самі слова через проміжок, з підкресленням в
 * активного. Обведення в пігулки перетворило б спокійну сторінку на панель
 * керування, а вибір тут робиться раз і мимохідь.
 */
.gtk-types {
	display: flex;
	flex-wrap: wrap;
	gap: 4px clamp(18px, 2.2vw, 34px);
	margin-bottom: clamp(22px, 2.6vw, 36px);
	padding-bottom: 18px;
	border-bottom: 1px solid var(--gtk-line);
}

.gtk-types__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	/* Зона натискання більша за напис: пальцем у рядок тексту не влучиш. */
	min-height: 44px;
	color: var(--gtk-text);
	font-size: var(--gtk-small);
	transition: color var(--gtk-transition);
}
.gtk-types__item:hover { color: var(--gtk-ink); }

/*
 * Риска активного розділу — псевдоелементом під літерами.
 *
 * Рамка знизу сіла б на край сорокачотирипіксельної зони натискання, тобто
 * пікселів за десять від самого слова, і повисла б окремо від нього.
 */
.gtk-types__item::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% + 0.85em);
	height: 1px;
	background: transparent;
	transition: background-color var(--gtk-transition);
}
.gtk-types__item.is-active {
	color: var(--gtk-ink);
}
.gtk-types__item.is-active::after { background: var(--gtk-bronze); }

/*
 * На телефоні ряд гортається вбік замість того, щоб розсипатися на чотири
 * рядки й з'їсти весь перший екран каталогу.
 */
@media (max-width: 700px) {
	.gtk-types {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		margin-inline: calc(var(--gtk-gutter) * -1);
		padding-inline: var(--gtk-gutter);
	}
	.gtk-types::-webkit-scrollbar { display: none; }
	.gtk-types__item { white-space: nowrap; }
}

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

/*
 * Вступ під заголовком категорії.
 *
 * Ширина обмежена: рядок на всю сторінку читається важче за той самий текст
 * у колонку. Шістдесят символів — та межа, після якої око губить початок
 * наступного рядка.
 */
.gtk-catalog__lead {
	max-width: 62ch;
	margin: 14px 0 0;
	font-size: calc(var(--gtk-small) + 2px);
	line-height: 1.7;
	color: var(--gtk-text);
}

/*
 * Стрічка робіт у категорії.
 *
 * Розмітка та поведінка ті самі, що й на головній, — відрізняються тільки
 * поля: тут секція стоїть між заголовком і сіткою товарів, тож дихати їй
 * потрібно менше.
 */
.gtk-showcase--cat {
	padding-block: clamp(28px, 3.4vw, 52px) clamp(36px, 4vw, 64px);
}
.gtk-showcase--cat .gtk-showcase__head {
	margin-bottom: clamp(20px, 2.4vw, 34px);
}
.gtk-showcase--cat .gtk-showcase__head h2 {
	font-size: clamp(26px, 3vw, 40px);
}

/* У категорії кадри трохи нижчі, ніж на головній: тут стрічка не головна
   подія сторінки, а доказ перед каталогом. */
/*
 * Заглушка галереї тримає місце заздалегідь.
 *
 * У товарів без фото WooCommerce підставляє свій placeholder без атрибутів
 * width/height. Поки файл не завантажився, висоти в нього немає, і сторінка
 * підстрибує в момент появи картинки. Заглушка квадратна, тож квадратну
 * рамку можна зарезервувати наперед.
 */
.woocommerce-product-gallery__image--placeholder { aspect-ratio: 1; }
/*
 * Заглушці потрібен contain, а не cover.
 *
 * Правило галереї вище ставить усім знімкам cover, і специфічність у нього
 * вища за цей селектор — тому заглушку доводиться називати разом із
 * колонкою. Обрізати її нема сенсу: це не фото виробу, а службовий
 * малюнок, і зрізаний край читався б як зіпсований файл.
 */
.gtk-product__media .woocommerce-product-gallery__image--placeholder img,
.woocommerce-product-gallery__image--placeholder img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; }

.gtk-showcase--cat .gtk-showcase__item .gtk-plate.gtk-plate--auto img,
.gtk-showcase--cat .gtk-showcase__item img {
	height: clamp(190px, 21vw, 300px) !important;
}

/* ===========================================================================
   КАТЕГОРІЯ ЯК ПОСАДКОВА СТОРІНКА
   ---------------------------------------------------------------------------
   Розкладка з макета. Кольори й розміри — з дизайн-системи в style.css;
   нових тут немає жодного.

   Фон лишається білим, як на решті сайту. У макеті сторінка стояла на
   кремовому, але тоді категорія випадала б з-поміж інших сторінок: людина
   переходить із каталогу в категорію й бачить інший сайт.
   =========================================================================== */

/* --- Герой ---------------------------------------------------------------- */

.gtk-cat-hero {
	padding-block: clamp(28px, 4vw, 56px) clamp(48px, 6vw, 88px);
}

.gtk-cat-hero__grid {
	display: grid;
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}

/*
 * Текст ліворуч вужчий за фотографію праворуч.
 *
 * П'ять до семи, а не порівну: у лівій колонці рядок тексту, і на половині
 * широкого екрана він стає задовгим для читання. Фотографії ж ширина йде
 * тільки на користь.
 */
@media (min-width: 900px) {
	.gtk-cat-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.gtk-cat-hero__lead {
	max-width: 46ch;
	margin: 18px 0 0;
	font-size: calc(var(--gtk-small) + 3px);
	line-height: 1.66;
	color: var(--gtk-text);
}

.gtk-cat-hero__media { margin: 0; }
.gtk-cat-hero__media .gtk-plate { display: block; overflow: hidden; }
.gtk-cat-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.gtk-cat-hero__cap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 20px;
	margin-top: 14px;
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--gtk-text-muted);
}

/* --- Факти в герої -------------------------------------------------------- */

/*
 * Не список переваг, а паспорт виробу.
 *
 * Мітка ліворуч, значення праворуч, лінія між рядками. Так відповіді на
 * «з чого», «яка поверхня», «які розміри» видно, не читаючи абзаців.
 */
.gtk-facts {
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
	border-top: 1px solid var(--gtk-line);
}
.gtk-facts li {
	display: grid;
	gap: 4px 24px;
	padding: 14px 0;
	border-bottom: 1px solid var(--gtk-line);
}
@media (min-width: 600px) {
	.gtk-facts li { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); align-items: baseline; }
}
.gtk-facts b {
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--gtk-bronze-text);
}
.gtk-facts span { font-size: var(--gtk-small); color: var(--gtk-text); }

/* --- Заголовок секції з абзацом збоку ------------------------------------- */

.gtk-head {
	display: grid;
	gap: 20px clamp(24px, 3vw, 56px);
	align-items: end;
	margin-bottom: clamp(28px, 3.4vw, 52px);
}
@media (min-width: 900px) {
	.gtk-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.gtk-head h2 { margin: 0; }
.gtk-head__aside p {
	margin: 0;
	max-width: 46ch;
	font-size: var(--gtk-small);
	color: var(--gtk-text);
}

.gtk-section--line { border-bottom: 1px solid var(--gtk-line); }

/* --- Обробка: три картки -------------------------------------------------- */

.gtk-finish {
	display: grid;
	gap: clamp(20px, 2.6vw, 40px);
	align-items: start;
}
@media (min-width: 800px) {
	.gtk-finish { grid-template-columns: repeat(3, 1fr); }

	/*
	 * Дві картки — дві колонки, а не третина порожньою.
	 *
	 * Розвилка обробки не всюди трійна: у накривок і плитки варіантів два,
	 * і в сітці на три колонки права третина лишалася зяяти. Заразом
	 * знижуємо пропорцію: на половині ширини портретний кадр виростав
	 * майже на весь екран.
	 */
	.gtk-finish:has(> .gtk-finish__item:nth-child(2):last-child) {
		grid-template-columns: repeat(2, 1fr);
	}
	.gtk-finish:has(> .gtk-finish__item:nth-child(2):last-child) .gtk-finish__item img {
		aspect-ratio: 3 / 2;
	}
	/* Середня картка зсунута вниз: три однакові прямокутники в рядок
	   читаються як таблиця, зсув перетворює їх на композицію. */
	.gtk-finish__item:nth-child(2) { margin-top: clamp(0px, 3vw, 48px); }
}

.gtk-finish__item .gtk-plate { display: block; overflow: hidden; }
.gtk-finish__item img {
	display: block;
	width: 100%;
	height: auto;
	/* Портретна пропорція в один стовпчик з'їдала майже цілий екран на кожну
	   з трьох карток. Ширшої вистачає, щоб прочитати зерно каменю. */
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
@media (min-width: 800px) {
	.gtk-finish__item img { aspect-ratio: 4 / 5; }
}
.gtk-finish__num {
	margin: 16px 0 0;
	font-family: var(--gtk-font-display);
	font-size: 19px;
	color: var(--gtk-bronze-text);
}
.gtk-finish__item h3 {
	margin: 8px 0 8px;
	font-family: var(--gtk-font-display);
	font-weight: 400;
	font-size: clamp(20px, 1.8vw, 25px);
	color: var(--gtk-ink);
}
.gtk-finish__item p {
	margin: 0;
	font-size: var(--gtk-small);
	color: var(--gtk-text);
}
.gtk-finish__item h3 a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--gtk-bronze-text), var(--gtk-bronze-text));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 0.4s var(--gtk-ease);
}
.gtk-finish__item h3 a:hover,
.gtk-finish__item h3 a:focus-visible { background-size: 100% 1px; }

.gtk-finish__item .gtk-finish__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 12px;
}
.gtk-finish__tag {
	padding: 5px 12px;
	border: 1px solid var(--gtk-line);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gtk-bronze-text);
}
.gtk-finish__count {
	font-size: 12px;
	color: var(--gtk-text);
}

.gtk-finish__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	margin-top: clamp(28px, 3.4vw, 52px);
	padding-top: clamp(20px, 2.4vw, 34px);
	border-top: 1px solid var(--gtk-line);
}
.gtk-finish__foot p { margin: 0; max-width: 62ch; font-size: var(--gtk-small); }

/* --- Ціна: липкий заголовок і перелік ------------------------------------- */

.gtk-why {
	display: grid;
	gap: clamp(24px, 3vw, 56px);
}
@media (min-width: 900px) {
	.gtk-why { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
	/* Питання лишається перед очима, поки людина читає відповіді. */
	.gtk-why__title { position: sticky; top: 110px; align-self: start; }
}
.gtk-why__title h2 { margin: 0; }

.gtk-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--gtk-line);
}
.gtk-rows li {
	display: grid;
	gap: 6px 24px;
	padding: 22px 0;
	border-bottom: 1px solid var(--gtk-line);
}
@media (min-width: 700px) {
	.gtk-rows li { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}
.gtk-rows h3 {
	margin: 0;
	font-family: var(--gtk-font-display);
	font-weight: 400;
	font-size: 20px;
	color: var(--gtk-ink);
}
.gtk-rows p { margin: 0; font-size: var(--gtk-small); color: var(--gtk-text); }

/* --- Стрілка-посилання ---------------------------------------------------- */

/*
 * Кегль піднято з 10 до 12 пікселів, розрядку зменшено з 0.28em до 0.14em.
 *
 * Десять пікселів із розрядкою в чверть кегля — це напис, який читають по
 * літері. Він доречний для однослівної позначки, але цим класом набрані
 * посилання на цілі розділи: «Усі роботи», «Увесь каталог». Розрядка
 * розтягувала їх удвічі й водночас робила нерозбірливими.
 */
.gtk-arrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gtk-bronze-text);
	white-space: nowrap;
}
.gtk-arrow::after {
	content: '';
	width: 42px;
	height: 1px;
	background: currentColor;
	transition: width var(--gtk-transition);
}
.gtk-arrow:hover::after { width: 64px; }

/*
 * Посилання на посадкову розділу — під заголовком, а не в ряду типів.
 *
 * У ряду типів воно читалося б як ще один розділ каталогу; тут же видно, що
 * це друга сторінка про той самий виріб.
 *
 * Правило стоїть саме після .gtk-arrow, і це не випадковість. Той клас дає
 * стрілку й лінію, але разом із ними — десять пікселів, розрядку в 0.28em і
 * white-space: nowrap. На телефоні напис через це виходив за екран: рядок
 * вимагав понад чотириста пікселів там, де було триста двадцять. Ваги
 * селекторів однакові, тож вирішує порядок — раніше це правило стояло вище й
 * програвало.
 */
a.gtk-catalog__about {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	/* Зона натискання більша за сам напис. */
	min-height: 44px;
	margin-bottom: 22px;
	font-size: 14.5px;
	letter-spacing: 0.02em;
	text-transform: none;
	white-space: normal;
}

/* --- Кікер над заголовком секції ------------------------------------------ */

.gtk-kicker {
	margin: 0 0 14px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--gtk-bronze-text);
}
.gtk-section--ink .gtk-kicker,
.gtk-section--ink .gtk-arrow { color: var(--gtk-bronze-on-ink); }

/* ===========================================================================
   КОРІНЬ КАТАЛОГУ: ВСТУП І ПЛИТКИ РОЗДІЛІВ
   =========================================================================== */

/*
 * Вступ — це вміст сторінки «Каталог» із редактора. Ширину тримаємо вужчою за
 * сітку товарів: суцільний рядок тексту на всю ширину каталогу читати важко.
 */
.gtk-shop-intro {
	max-width: 68ch;
	margin: 0 auto clamp(28px, 4vw, 56px);
	padding: 0 var(--gtk-gutter, 24px);
}
.gtk-shop-intro > *:first-child { margin-top: 0; }
.gtk-shop-intro > *:last-child { margin-bottom: 0; }

.gtk-cats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: clamp(26px, 3vw, 46px) clamp(20px, 2.4vw, 36px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Три колонки, а не «скільки влізе».
 *
 * На широкому екрані auto-fill дає чотири вузькі колонки, і фотографія стає
 * завмалою, щоб розрізнити камінь — а саме по каменю людина й вибирає розділ.
 */
@media (min-width: 1000px) {
	.gtk-cats__grid { grid-template-columns: repeat(3, 1fr); }
}

.gtk-cats__item a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.gtk-cats__item .gtk-plate {
	display: block;
	overflow: hidden;
	margin-bottom: 18px;
	/*
	 * Ледь тепла підкладка під фотографією.
	 *
	 * Частина знімків — студійні рендери на білому тлі, частина — зйомка на
	 * об’єкті. На чисто білій сторінці рендери втрачали межу й здавалися
	 * дрібними плямами, а фотографії поруч виглядали чужими. Підкладка дає
	 * усім плиткам однакову рамку, не додаючи ні контуру, ні заокруглення.
	 */
	background: rgba(43, 43, 43, 0.035);
}
.gtk-cats__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.gtk-cats__item h3 {
	margin: 0;
	font-family: var(--gtk-font-display);
	font-weight: 400;
	font-size: clamp(20px, 1.7vw, 24px);
	line-height: 1.25;
	color: var(--gtk-ink);
	/* Підкреслення виїжджає зліва — той самий жест, що й у картках обробки. */
	background-image: linear-gradient(var(--gtk-bronze-text), var(--gtk-bronze-text));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 0.4s var(--gtk-ease);
	display: inline;
}
.gtk-cats__item a:hover h3,
.gtk-cats__item a:focus-visible h3 { background-size: 100% 1px; }

/*
 * Правила .gtk-cats__meta більше немає.
 *
 * Під назвою розділу стояло «від N ₴» — і лише в тих розділах, де хоч в
 * одного виробу була ціна. Тепер картка скрізь однакова: фото й назва.
 */

/* ===========================================================================
   ВИБІР ФАСКИ
   =========================================================================== */

.gtk-faska__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(20px, 2.4vw, 34px) clamp(14px, 1.8vw, 26px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * П'ять колонок у ряд на широкому екрані.
 *
 * Види фасок порівнюють між собою, а не читають по черзі: щойно вони
 * переносяться на другий рядок, порівняння ламається.
 */
@media (min-width: 1000px) {
	.gtk-faska__grid { grid-template-columns: repeat(5, 1fr); }
}

.gtk-faska__item .gtk-plate {
	display: block;
	overflow: hidden;
	margin-bottom: 14px;
	/* Знімки на білому тлі — без підкладки вони губили межу. */
	background: rgba(43, 43, 43, 0.035);
}
.gtk-faska__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.gtk-faska__item h3 {
	margin: 0 0 6px;
	font-family: var(--gtk-font-display);
	font-weight: 400;
	font-size: clamp(17px, 1.3vw, 19px);
	line-height: 1.25;
	color: var(--gtk-ink);
}
.gtk-faska__item p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--gtk-text);
}

/* ===========================================================================
   ПОВІДОМЛЕННЯ WOOCOMMERCE
   =========================================================================== */

/*
 * Іконка перед текстом малюється шрифтом WooCommerce, який на сайті не
 * завантажується: Astra підміняє власними стилями таблицю, що його підключає.
 * Через це замість значка виходив порожній прямокутник — типовий «тофу»
 * відсутнього гліфа. Прибираємо сам псевдоелемент і разом із ним відступ,
 * який був залишений під нього.
 *
 * Заразом зводимо повідомлення до мови теми: тонка бронзова лінія замість
 * жирної чорної, ті самі відступи, що й у решти блоків.
 */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	padding: 18px 24px;
	border-top: 1px solid var(--gtk-bronze);
	background: var(--gtk-cream);
	font-size: var(--gtk-small);
	line-height: 1.6;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { content: none; }

.woocommerce-error {
	/* Помилку відрізняємо не лише кольором: колір самотужки нічого не каже
	   тому, хто його не розрізняє. */
	border-top-color: #A33;
	font-weight: 600;
}

/* ===========================================================================
   Обробка: один зразок і перелік поверхонь
   ---------------------------------------------------------------------------
   Замість двох великих карток поруч — те, як вибір виглядає в житті: зразок
   каменю й перелік обробок біля нього. Поверхні порівнюються на тому самому
   камені, а не на двох фотографіях із різним освітленням.
   =========================================================================== */

.gtk-finish--compare {
	display: grid;
	gap: clamp(24px, 3vw, 48px);
	/*
	 * Зразок тягнеться на висоту переліку, а не живе власною пропорцією.
	 * Інакше при двох обробках картинка виявлялася вищою за текст поруч, і
	 * секція знову розросталася — те, від чого ми й ішли.
	 */
	align-items: stretch;
}
@media (min-width: 900px) {
	.gtk-finish--compare { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* --- Зразок --- */

.gtk-finish__stage {
	position: relative;
	overflow: hidden;
	background: var(--gtk-sand);
	min-height: 300px;
}
.gtk-finish__shot {
	margin: 0;
	opacity: 0;
	transition: opacity 0.45s var(--gtk-ease);
}
/*
 * Усі кадри лежать поверх сцени, зокрема й перший.
 *
 * Спокусливо лишити перший у потоці, щоб він тримав висоту, — але тоді
 * висоту секції диктує картинка, а не перелік поруч, і на двох обробках
 * фото виявляється вищим за текст. Тепер висоту задає перелік, а сцена
 * лише має підлогу, нижче якої зразок стає нечитабельним.
 */
.gtk-finish__shot { position: absolute; inset: 0; }
.gtk-finish__shot.is-active { opacity: 1; }
.gtk-finish__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* У стовпчик висоту переліку брати нема звідки — тоді працює пропорція. */
@media (max-width: 899px) {
	.gtk-finish__stage { min-height: 0; aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) {
	.gtk-finish__shot { transition: none; }
}

/* --- Перелік --- */

.gtk-finish__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--gtk-line);
}
.gtk-finish__list li { border-bottom: 1px solid var(--gtk-line); }

.gtk-finish__row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: 4px 18px;
	padding: 20px 0 20px 14px;
	color: inherit;
	text-decoration: none;
	/*
	 * Позначка активного рядка — смужка ліворуч, яка виростає з нуля. Робимо
	 * її фоном, а не псевдоелементом із шириною: анімувати background-size
	 * дешевше за геометрію, і рядок від цього не сіпається.
	 */
	background-image: linear-gradient(var(--gtk-bronze), var(--gtk-bronze));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0 44%;
	transition: background-size 0.35s var(--gtk-ease), color 0.25s var(--gtk-ease);
}
.gtk-finish__row:hover,
.gtk-finish__row:focus-visible,
.gtk-finish__row.is-active { background-size: 2px 44%; }
.gtk-finish__row.is-active .gtk-finish__name { color: var(--gtk-bronze-text); }

.gtk-finish__row .gtk-finish__num {
	margin: 0;
	font-family: var(--gtk-font-body);
	font-size: 10px;
	letter-spacing: 0.24em;
	color: var(--gtk-bronze-text);
	padding-top: 6px;
}
.gtk-finish__name {
	display: block;
	font-family: var(--gtk-font-display);
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.25;
	color: var(--gtk-heading);
	transition: color 0.25s var(--gtk-ease);
}
.gtk-finish__text {
	display: block;
	margin-top: 6px;
	font-size: var(--gtk-small);
	line-height: 1.55;
	max-width: 52ch;
}
.gtk-finish__row .gtk-finish__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-top: 10px;
}
.gtk-finish__row svg {
	color: var(--gtk-bronze-text);
	opacity: 0;
	transition: opacity 0.25s var(--gtk-ease), transform 0.25s var(--gtk-ease);
	margin-top: 10px;
}
.gtk-finish__row:hover svg,
.gtk-finish__row:focus-visible svg,
.gtk-finish__row.is-active svg { opacity: 1; transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   Сусідні розділи під сіткою
   ---------------------------------------------------------------------------
   Другорядна навігація: закрита за замовчуванням, відкривається одним
   кліком. Стоїть після товарів, бо потрібна після перегляду, а не замість
   нього.
   --------------------------------------------------------------------------- */

.gtk-catalog__others {
	margin-top: clamp(32px, 4vw, 56px);
	padding-top: 20px;
	border-top: 1px solid var(--gtk-line);
}

.gtk-catalog__others summary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* Зона натискання більша за напис. */
	min-height: 44px;
	list-style: none;
	cursor: pointer;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gtk-text-muted);
}

.gtk-catalog__others summary::-webkit-details-marker { display: none; }

.gtk-catalog__others summary::after {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 180ms var(--gtk-ease);
}

.gtk-catalog__others[open] summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.gtk-catalog__others summary:hover { color: var(--gtk-ink); }

/* Ряд усередині вже має власну нижню лінію — тут вона зайва. */
.gtk-catalog__others .gtk-types {
	margin-top: 8px;
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/*
 * Розмір у картці — окремий рядок під назвою.
 *
 * Набраний цифровим накресленням і трохи розріджений: у сітці ці рядки
 * читають стовпчиком, звіряючи позиції між собою, і рівна ширина цифр
 * помітно полегшує порівняння.
 */
.gtk-card__size {
	margin: 6px 0 0;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--gtk-text);
	font-feature-settings: 'tnum';
}

/* Другорядні фільтри під розкриттям — той самий вигляд, що й «Інші вироби». */
.gtk-filters__extra {
	padding-top: 16px;
	border-top: 1px solid var(--gtk-border);
}

.gtk-filters__extra summary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	list-style: none;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gtk-text-muted);
}

.gtk-filters__extra summary::-webkit-details-marker { display: none; }

.gtk-filters__extra summary::after {
	content: '';
	width: 7px;
	height: 7px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--gtk-transition);
}

.gtk-filters__extra[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.gtk-filters__extra summary:hover { color: var(--gtk-ink); }
.gtk-filters__extra .gtk-filter-group { border-bottom: 0; padding-bottom: 0; }

/* ===========================================================================
   ЩО ВХОДИТЬ У ЦІНУ
   ---------------------------------------------------------------------------
   Склад стоїть під сумою й набраний дрібніше за неї: він не сперечається з
   ціною за увагу, але відповідає на питання рівно там, де воно виникає.
   =========================================================================== */

.gtk-product__includes {
	margin: 18px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--gtk-border);
}

.gtk-product__range {
	margin: 0 0 14px;
	font-size: var(--gtk-small);
	color: var(--gtk-text-muted);
}

.gtk-product__includes-title {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gtk-brand-dark);
}

.gtk-product__includes ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}

/* Крапка-роздільник замість маркера: перелік короткий і читається рядком. */
.gtk-product__includes li {
	position: relative;
	padding-left: 14px;
	font-size: var(--gtk-small);
	line-height: 1.5;
	color: var(--gtk-text);
}

.gtk-product__includes li::before {
	content: '';
	position: absolute;
	top: 0.62em;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gtk-bronze);
}

.gtk-product__includes-extra {
	margin: 12px 0 0;
	font-size: var(--gtk-small);
	line-height: 1.5;
	color: var(--gtk-text-muted);
}

/*
 * Крапельник у наборі країв — креслення замість знімка.
 *
 * Плашка та сама, що під фотографіями сусідніх варіантів, тож ряд не
 * розсипається: міняється лише те, що всередині.
 */
.gtk-faska__draw {
	display: grid;
	place-items: center;
	padding: 12px;
	background: var(--gtk-paper);
}

.gtk-faska__draw svg {
	display: block;
	width: 100%;
	height: auto;
}

.gtk-faska__draw svg path {
	fill: rgba(43, 43, 43, 0.05);
	stroke: var(--gtk-ink);
	stroke-width: 1.5;
	stroke-linejoin: round;
}

.gtk-faska__draw svg .gtk-faska__draw-accent {
	fill: none;
	stroke: var(--gtk-bronze);
	stroke-width: 2.5;
	stroke-linecap: round;
}

/* ===========================================================================
   «ТОВАРИ З ЦЬОГО КАМЕНЮ» — В КІНЦІ СТОРІНКИ РОБОТИ
   ======================================================================== */

/*
 * Секція стоїть між роботою і закликом, тож відділяється зверху лінією, а
 * не кольором: два кольорові блоки поспіль (ця секція й теплий заклик)
 * читалися б як одна суцільна смуга.
 */
.gtk-stone {
	border-top: 1px solid var(--gtk-line);
}

.gtk-stone__head {
	max-width: 62ch;
	margin-bottom: clamp(24px, 3vw, 40px);
}

.gtk-stone__lead {
	margin: 12px 0 0;
	color: var(--gtk-text-muted);
}

/*
 * Чотири в ряд, а не auto-fill.
 *
 * У каталозі число колонок залежить від того, скільки лишилося місця поруч
 * із панеллю фільтрів. Тут панелі немає, і auto-fill на широкому екрані
 * давав шість вузьких карток із чотирьох наявних товарів — останні дві
 * колонки порожні.
 */
.woocommerce ul.products.gtk-stone__grid:not(.elementor-grid) {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gtk-stone__more {
	margin: clamp(22px, 3vw, 34px) 0 0;
}

@media (max-width: 1023px) {
	.woocommerce ul.products.gtk-stone__grid:not(.elementor-grid) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * На телефоні лишаються дві колонки.
 *
 * Каталог там переходить на одну — але в каталозі картки гортають довго й
 * поспіль, а тут їх рівно чотири в кінці сторінки. Однією колонкою вони
 * забирали б цілий екран перед закликом.
 */
@media (max-width: 479px) {
	.woocommerce ul.products.gtk-stone__grid:not(.elementor-grid) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.gtk-stone__grid .gtk-card__size,
	.gtk-stone__grid .gtk-card__meta { font-size: 12px; }
}

/*
 * Посилання під сіткою переноситься, лінія зі стрілкою лишається праворуч.
 *
 * .gtk-link-arrow задумане як один рядок: white-space: nowrap, а лінія й
 * вістря приколоті до правого краю по центру висоти. Тут підпис довгий —
 * «Усі товари з покостівського граніту» — і на телефоні він виносив
 * посилання на 27 px за екран, тягнучи за собою горизонтальну прокрутку
 * всієї сторінки.
 *
 * Тому дозволяємо перенос, а лінію й вістря прив'язуємо до низу, а не до
 * середини: при двох рядках середина припадає на проміжок між ними, і
 * стрілка зависала б посеред тексту.
 */
@media (max-width: 560px) {
	.gtk-stone__more .gtk-link-arrow {
		display: inline-block;
		white-space: normal;
		padding-right: 60px;
		letter-spacing: 0.12em;
		line-height: 1.6;
	}

	/*
	 * 1,79em — це не підібране на око число, а висота, на якій лежить
	 * середина останнього рядка: піврядка (0,8em) плюс власний відступ
	 * inline-block від нижнього краю (близько 1em при line-height 1,6).
	 * Прив'язка до низу, а не до середини блока, тримає лінію на рядку і
	 * при одному рядку, і при двох.
	 */
	.gtk-stone__more .gtk-link-arrow::after {
		position: absolute;
		right: 0;
		bottom: 1.79em;
	}

	.gtk-stone__more .gtk-link-arrow::before {
		top: auto;
		bottom: 1.45em;
		margin-top: 0;
	}
}

/* ===========================================================================
   КНОПКА В КАРТЦІ КАТАЛОГУ — ОДНА ДЛЯ ВСІХ
   ===========================================================================

   «У кошик», «Розрахувати за розмірами» — це дії різної ваги, але однакового
   рангу: обидві головні на своїй картці. Доки одна була бронзовою, а друга
   чорнильною, ряд карток читався як перелік, де частина товарів «справжні»,
   а частина ні. Контур один, кегль один, висота одна.

   На вузькому екрані картка одна в ряду, і кнопка в пів ширини лишає
   праворуч порожнє місце без призначення — розтягуємо на всю.
   --------------------------------------------------------------------------- */

.gtk-card__foot .gtk-btn--sm { min-height: 40px; }

@media (max-width: 479px) {
	.gtk-card__foot { align-items: stretch; }
	.gtk-card__foot .gtk-btn--sm {
		flex: 1 0 100%;
		width: 100%;
	}
}