/* ==========================================================================
   TopShop — Layout parts
   Mega menu, mobile drawer, footer, breadcrumbs, pagination.
   ========================================================================== */

/* --- Mega menu (ТЗ §25) ------------------------------------------------- */

.ts-megamenu {
	position: absolute;
	left: 0;
	right: 0;
	z-index: var(--ts-z-megamenu);
	/*
	 * Картка, що ніби лежить поверх сторінки, а не суцільна смуга:
	 * так у макеті. Фон і тінь — на внутрішньому шарі, щоб
	 * заокруглення не обрізало саме меню.
	 */
	padding-top: var(--ts-space-2);
	padding-bottom: var(--ts-space-6);
	pointer-events: none;
}

.ts-megamenu > .ts-container {
	pointer-events: auto;
}

.ts-megamenu__layout {
	background: var(--ts-color-surface);
	border-radius: var(--ts-radius-lg);
	box-shadow: var(--ts-shadow-lg);
	overflow: hidden;
}

.ts-megamenu[hidden] {
	display: none;
}

/*
 * Ліворуч колонка розділів, праворуч панель активного.
 * Ширина колонки фіксована: якщо дати їй тягнутися за назвами,
 * панель праворуч смикається при кожному перемиканні розділу.
 */
.ts-megamenu__layout {
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	/*
	 * Не фіксуємо висоту: у розділів різна кількість підкатегорій, і
	 * жорсткі 420px лишали б порожнє полотно під короткою панеллю.
	 * Мінімум — щоб колонка розділів не обрізалась на пів-рядка.
	 */
	min-height: 320px;
}

/* --- Колонка розділів --------------------------------------------------- */

.ts-megamenu__roots {
	margin: 0;
	padding: var(--ts-space-3);
	list-style: none;
	border-right: 1px solid var(--ts-color-border);
	background: var(--ts-color-surface);
	/*
	 * Розділів під сорок — у висоту екрана вони не вміщаються.
	 * Скролимо саму колонку, а не сторінку: інакше меню тягнеться
	 * нижче вікна і його край не дістати.
	 */
	max-height: min(72vh, 620px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/*
 * Рядок «Усі категорії» — окремо від розділів, як у макеті.
 *
 * Лінію малює сам <li>, а не посилання: коли рамка висіла на
 * посиланні, синя плашка при наведенні впиралася в неї і втрачала
 * заокруглення згори — кут виглядав обрубаним.
 */
.ts-megamenu__root--all {
	margin-top: var(--ts-space-2);
	padding-top: var(--ts-space-2);
	border-top: 1px solid var(--ts-color-border);
}

.ts-megamenu__root-link--all {
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-primary);
}

.ts-megamenu__root-link {
	display: flex;
	align-items: center;
	gap: var(--ts-space-3);
	padding: var(--ts-space-2) var(--ts-space-4);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-text-strong);
	line-height: 1.3;
}

.ts-megamenu__root-link {
	border-radius: var(--ts-radius-md);
	transition: background-color 0.12s ease, color 0.12s ease;
}

/*
 * Наведення й активний стан пофарбовані однаково — залитою синьою
 * плашкою, як у макеті.
 *
 * Однаково саме тому, що панель перемикається не миттєво: JS чекає
 * 90 мс, щоб панель не блимала, поки курсор іде навскіс через сусідні
 * пункти. Коли hover давав блідо-блакитний, а .is-active за мить —
 * насичений синій, це читалося як миготіння в два кольори. Один колір
 * прибирає проміжний стан: рядок фарбується одразу й уже не змінюється.
 */
.ts-megamenu__root-link:hover,
.ts-megamenu__root-link.is-active {
	background: var(--ts-color-primary);
	color: var(--ts-color-primary-contrast);
	text-decoration: none;
}

.ts-megamenu__root-link:hover .ts-cat-thumb,
.ts-megamenu__root-link.is-active .ts-cat-thumb {
	color: var(--ts-color-primary-contrast);
}

.ts-megamenu__root-name {
	flex: 1 1 auto;
}

/* Стрілка веде погляд до панелі — підсвічуємо лише в активного. */
.ts-megamenu__root-link .ts-icon--chevron {
	flex: 0 0 auto;
	opacity: 0;
	transition: opacity 0.12s ease;
}

.ts-megamenu__root-link:hover .ts-icon--chevron,
.ts-megamenu__root-link.is-active .ts-icon--chevron {
	opacity: 1;
}

/* Рядок «Акції» — червоний, як у макеті: це не розділ каталогу. */
.ts-megamenu__root-link--sale {
	color: var(--ts-color-danger);
	font-weight: var(--ts-weight-medium);
}

.ts-megamenu__root-link--sale:hover:not(.is-active) {
	background: var(--ts-color-danger-soft);
	color: var(--ts-color-danger);
}

.ts-megamenu__root-count {
	flex: 0 0 auto;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--ts-color-danger-soft);
	color: var(--ts-color-danger);
	font-size: var(--ts-text-xs);
	font-weight: var(--ts-weight-semibold);
	line-height: 1.6;
}

/*
 * Фонова марка в куті панелі. У макеті це не картка й не рівний
 * прямокутник, а м'яка хвиля, що затікає в правий нижній кут, з
 * ілюстрацією розділу поверх неї.
 *
 * Хвилю малюємо самим елементом: заокруглення по діагоналі
 * (великий радіус лише у верхньому лівому куті) дає ту саму плавну
 * дугу, що на макеті, і не потребує ні картинки, ні зайвого вузла.
 */
.ts-megamenu__promo {
	/*
	 * Хвиля в куті панелі, як у макеті: широка пласка дуга, що йде
	 * від лівого краю вгору й затікає під правий. Один великий
	 * еліптичний радіус ліворуч дає саме таку лінію — це не пігулка
	 * й не картка, тому інших кутів у фігури немає.
	 */
	position: absolute;
	right: 0;
	/*
	 * Притиснута до самого низу панелі. Піднімати її над рядком
	 * «Усі товари» не можна: у довгих розділах вона тоді лягала
	 * просто на назви брендів у колонках.
	 */
	bottom: 0;
	display: none;
	align-items: center;
	justify-content: flex-end;
	gap: var(--ts-space-4);
	width: 360px;
	min-height: 104px;
	padding: var(--ts-space-4) var(--ts-space-6) var(--ts-space-5) var(--ts-space-8);
	border-top-left-radius: 100% 86%;
	/*
	 * Заливка напівпрозора. Панель прокручується просто над маркою,
	 * і суцільний колір обрізав би назви брендів на півслові —
	 * крізь бліде тло рядок лишається читабельним, доки проходить.
	 */
	background: linear-gradient(115deg, rgba(232, 240, 254, 0) 8%, rgba(238, 244, 255, 0.82) 42%, rgba(227, 237, 253, 0.88) 100%);
	color: var(--ts-color-primary);
	/* Тло не має перехоплювати курсор із посилань. */
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.ts-megamenu__promo[hidden] {
	display: none;
}



/*
 * Ховаємо там, де панель і так щільна: на вузькому екрані колонки
 * доходять до кута, і марка лягла б просто поверх назв.
 */
@media (min-width: 1280px) {
	.ts-megamenu__promo:not([hidden]) {
		display: flex;
	}
}

/*
 * Іконка велика й напівпрозора — це ілюстрація розділу, а не значок.
 */
.ts-megamenu__promo-icon {
	flex: 0 0 auto;
	display: inline-flex;
	order: 2;
	/* Малюнок кольоровий, а не бліда пляма: у макеті він читається. */
	opacity: 0.9;
}

.ts-megamenu__promo-icon .ts-icon {
	width: 88px;
	height: 88px;
	/*
	 * Товстіший штрих і насичений блакитний — у макеті це кольорова
	 * ілюстрація, а не сірий контур. Тонка лінія на такому розмірі
	 * виглядала вицвілою.
	 */
	stroke-width: 1.5;
	color: #4da3f5;
}

/* Плитка навколо значка тут зайва — ілюстрація лежить просто на хвилі. */
.ts-megamenu__promo .ts-cat-thumb--icon {
	width: auto;
	height: auto;
	padding: 0;
	background: none;
}

.ts-megamenu__promo-text {
	order: 1;
	text-align: right;
	font-size: var(--ts-text-md);
	font-weight: var(--ts-weight-semibold);
	line-height: 1.3;
	color: var(--ts-color-primary);
}

.ts-megamenu__promo-text em {
	display: block;
	font-style: normal;
	font-weight: var(--ts-weight-regular);
	opacity: 0.8;
}

/* --- Нижня панель на телефоні -------------------------------------------- */

/*
 * П'ять головних дій під великим пальцем. На широкому екрані панелі
 * немає: там усе доступне в шапці, а смуга внизу лише з'їдала б екран.
 */
.ts-bottomnav {
	display: none;
}

@media (max-width: 1023px) {
	.ts-bottomnav {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: var(--ts-z-header);
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		background: var(--ts-color-surface);
		border-top: 1px solid var(--ts-color-border);
		/*
		 * Домальовуємо висоту під системну смугу жестів на iPhone:
		 * інакше нижній ряд підписів опиняється під нею.
		 */
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	/*
	 * Звільняємо місце під панеллю, щоб вона не перекривала кінець
	 * сторінки — насамперед кнопку «Додати в кошик» у картці товару.
	 */
	body {
		padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
	}
}

.ts-bottomnav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	/* 56px — мінімальна зручна ціль для пальця. */
	min-height: 56px;
	padding: var(--ts-space-2) 2px;
	color: var(--ts-color-muted);
	font-size: var(--ts-text-2xs);
	line-height: 1.2;
	text-align: center;
}

.ts-bottomnav__item:hover,
.ts-bottomnav__item:focus-visible {
	color: var(--ts-color-primary);
	text-decoration: none;
}

/* Поточний розділ — синій, щоб було видно, де людина стоїть. */
.ts-bottomnav__item.is-active {
	color: var(--ts-color-primary);
}

.ts-bottomnav__icon {
	position: relative;
	display: inline-flex;
}

.ts-bottomnav__count {
	position: absolute;
	top: -6px;
	right: -8px;
}

.ts-bottomnav__count[hidden] {
	display: none;
}

.ts-bottomnav__label {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Смужка з акцією ---------------------------------------------------- */

.ts-topbar {
	background: var(--ts-color-surface-muted, #f5f7fa);
	border-bottom: 1px solid var(--ts-color-border);
	font-size: var(--ts-text-xs);
}

.ts-topbar[hidden] {
	display: none;
}

.ts-topbar__inner {
	display: flex;
	align-items: center;
	gap: var(--ts-space-3);
	min-height: 38px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.ts-topbar__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--ts-color-danger);
}

.ts-topbar__text {
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-topbar__sep {
	color: var(--ts-color-border);
}

.ts-topbar__note,
.ts-topbar__ship {
	color: var(--ts-color-text);
}

.ts-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--ts-color-primary);
	white-space: nowrap;
}

/* Хрестик притиснутий до правого краю, решта — зліва. */
.ts-topbar__close {
	margin-left: auto;
	flex: 0 0 auto;
	display: inline-flex;
	padding: 4px;
	border-radius: var(--ts-radius-sm);
	color: var(--ts-color-text-muted);
}

.ts-topbar__close:hover {
	background: var(--ts-color-border);
	color: var(--ts-color-text-strong);
}

/*
 * На вузьких екранах лишаємо головне: сама акція і хрестик. Умову
 * доставки й «Детальніше» ховаємо — у 360px вони переносяться в три
 * рядки й з'їдають перший екран.
 */
@media (max-width: 767px) {
	.ts-topbar__sep,
	.ts-topbar__ship,
	.ts-topbar__link {
		display: none;
	}

	/*
	 * «До -20%» теж ховаємо на вузькому екрані: разом із назвою
	 * акції рядок не вміщався і переносився у два, через що смужка
	 * ставала вдвічі вищою і з'їдала перший екран.
	 */
	.ts-topbar__note {
		display: none;
	}

	/* Текст в один рядок: довгу акцію обрізаємо трьома крапками. */
	.ts-topbar__text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* --- Мініатюра категорії ------------------------------------------------ */

.ts-cat-thumb {
	flex: 0 0 auto;
	border-radius: var(--ts-radius-sm);
	object-fit: contain;
}

/*
 * Плашка з літерою — коли картинки в категорії немає. Колір беремо
 * з --ts-cat-hue, який ставить PHP: сталий для категорії.
 */
.ts-cat-thumb--letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: hsl(var(--ts-cat-hue, 210) 70% 94%);
	color: hsl(var(--ts-cat-hue, 210) 45% 38%);
	font-size: 12px;
	font-weight: var(--ts-weight-semibold);
	line-height: 1;
}

/*
 * Намальований значок розділу. На відміну від літери, кольору не
 * вигадуємо: іконка успадковує колір рядка, тому на активній синій
 * плашці стає білою сама.
 */
.ts-cat-thumb--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}

.ts-cat-thumb--icon .ts-icon {
	display: block;
}

/* --- Панель розділу ----------------------------------------------------- */

/*
 * Скрол перенесено всередину панелі, а сам контейнер лишається
 * нерухомим: фонова марка позиціюється від нього, і якби прокручувався
 * він, вона їхала б разом із вмістом і зникала з очей у довгих
 * розділах.
 */
.ts-megamenu__panels {
	position: relative;
	max-height: min(72vh, 620px);
	/* Марка зрізається краєм панелі, а не вилазить за картку меню. */
	overflow: hidden;
}

/*
 * Скрол живе в панелі, а не в контейнері: фонова марка позиціюється
 * від .ts-megamenu__panels, і якби прокручувався він, вона їхала б
 * разом зі вмістом.
 *
 * Колонка на всю висоту: посилання «Усі товари розділу» має стояти
 * біля нижнього краю панелі завжди, а не там, де скінчилися колонки.
 * У розділах на три групи воно висіло посеред порожнечі.
 */
.ts-megamenu__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	max-height: min(72vh, 620px);
	padding: var(--ts-space-5) var(--ts-space-6);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Вміст поверх фонової марки. */
	z-index: 1;
}

/* Колонки забирають вільне місце, посилання лишається під ними. */
.ts-megamenu__panel .ts-megamenu__columns {
	flex: 1 1 auto;
}

.ts-megamenu__panel[hidden] {
	display: none;
}

/*
 * Колонки самі розкладаються за шириною: на широкому екрані чотири,
 * на вужчому менше. Так панель не ламається на ноутбуці 1366px.
 */
/*
 * Кладка, а не сітка. У grid усі комірки рядка починаються з однієї
 * висоти, тож одна довга колонка («Контроль доступу» на дев'ять
 * пунктів) лишала під сусідами діру на пів-панелі. CSS-колонки
 * укладають групи одна під одною й переносять, коли колонка
 * заповнилась, — порожнеча зникає сама.
 *
 * column-width, а не фіксоване число: на широкому екрані колонок
 * більше, на ноутбуці менше, і панель не ламається.
 */
.ts-megamenu__columns {
	column-width: 200px;
	column-gap: var(--ts-space-5);
}

/*
 * Кут під хвилею лишаємо вільним. Без цього в довгих розділах
 * («Ручний інструмент») останні бренди — Milwaukee, DeWALT —
 * опинялися просто під малюнком і ставали нечитабельними.
 *
 * float у кінці потоку колонок відсуває текст, але сам місця в
 * розкладці не займає, тож короткі розділи від цього не змінюються.
 */
@media (min-width: 1280px) {
	.ts-megamenu__columns::after {
		content: '';
		display: block;
		float: right;
		width: 340px;
		height: 104px;
	}
}

/*
 * Група не повинна розриватися між колонками: заголовок в одній, а
 * його підкатегорії в наступній — гірше за будь-яку діру.
 */
.ts-megamenu__column {
	display: inline-block;
	width: 100%;
	margin-bottom: var(--ts-space-6);
	break-inside: avoid;
	page-break-inside: avoid;
}

/*
 * Заголовок групи: значок і назва в один рядок. Значок вирівнюємо
 * по першому рядку, а не по центру, — назви бувають у два рядки,
 * і центрований значок тоді з'їжджає вниз.
 */
.ts-megamenu__group {
	display: flex;
	align-items: flex-start;
	gap: var(--ts-space-2);
	margin-bottom: var(--ts-space-2);
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-semibold);
	/* Заголовки груп у макеті сині — вони і є посилання на розділ. */
	color: var(--ts-color-primary);
	line-height: 1.3;
}

.ts-megamenu__group-name {
	flex: 1 1 auto;
}

/*
 * Значок заголовка — на блакитній плитці, як у макеті: голий штрих
 * губився поруч із жирним синім текстом і колонки виглядали як
 * суцільний список посилань.
 */
.ts-megamenu__group .ts-cat-thumb {
	margin-top: -1px;
	width: 28px;
	height: 28px;
	padding: 4px;
	border-radius: var(--ts-radius-md);
	background: var(--ts-color-primary-soft);
	color: var(--ts-color-primary);
}

/* Фото категорії заповнює плитку цілком, без поля навколо. */
.ts-megamenu__group img.ts-cat-thumb {
	padding: 0;
	object-fit: cover;
}

.ts-megamenu__group:hover {
	color: var(--ts-color-primary-hover);
	text-decoration: none;
}

.ts-megamenu__leaves {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-megamenu__leaf,
.ts-megamenu__more {
	display: block;
	padding: 3px 0;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
	line-height: 1.4;
}

.ts-megamenu__leaf:hover,
.ts-megamenu__more:hover {
	color: var(--ts-color-primary);
	text-decoration: none;
}

.ts-megamenu__more {
	color: var(--ts-color-primary);
}

.ts-megamenu__all {
	/*
	 * margin-top: auto притискає посилання до низу панелі — воно
	 * стоїть на однаковій висоті в кожному розділі, незалежно від
	 * того, скільки в ньому груп.
	 */
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--ts-space-1);
	padding-top: var(--ts-space-4);
	border-top: 1px solid var(--ts-color-border);
	width: 100%;
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-primary);
	/* Марка лежить нижче — посилання має лишатися клікабельним. */
	position: relative;
	z-index: 1;
}

.ts-megamenu__all:hover {
	text-decoration: none;
}

.ts-megamenu__empty {
	margin: 0;
	font-size: var(--ts-text-sm);
}

/*
 * На вузьких екранах меню-каталог замінює мобільна навігація
 * (template-parts/header/mobile-nav.php), тому тут просто ховаємо:
 * дві колонки на 400px нечитабельні.
 */
@media (max-width: 899px) {
	.ts-megamenu {
		display: none;
	}
}

/* --- Overlay ------------------------------------------------------------ */

.ts-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--ts-z-overlay);
	background: rgba(4, 22, 42, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ts-duration-base) var(--ts-ease),
		visibility var(--ts-duration-base) var(--ts-ease);
}

.ts-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

/* --- Drawer: мобільне меню і фільтри (ТЗ §10, §25) ---------------------- */

.ts-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: var(--ts-z-drawer);
	display: flex;
	flex-direction: column;
	width: min(88vw, 380px);
	background: var(--ts-color-surface);
	transform: translateX(-100%);
	transition: transform var(--ts-duration-slow) var(--ts-ease);
}

.ts-drawer--right {
	left: auto;
	right: 0;
	transform: translateX(100%);
}

.ts-drawer.is-open {
	transform: translateX(0);
}

.ts-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ts-space-3);
	padding: var(--ts-space-4);
	border-bottom: 1px solid var(--ts-color-border);
	flex: none;
}

.ts-drawer__title {
	font-size: var(--ts-text-md);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.ts-drawer__foot {
	flex: none;
	display: flex;
	gap: var(--ts-space-3);
	padding: var(--ts-space-4);
	border-top: 1px solid var(--ts-color-border);
	background: var(--ts-color-surface);
}

.ts-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: var(--ts-radius-md);
	color: var(--ts-color-muted);
}

.ts-drawer__close:hover {
	background: var(--ts-color-surface-sunken);
	color: var(--ts-color-text);
}

/* Блокування скролу body під час відкритого drawer/modal */
body.ts-no-scroll {
	overflow: hidden;
}

/* --- Breadcrumbs (ТЗ §26, §34) ------------------------------------------ */

.ts-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ts-space-2);
	padding-block: var(--ts-space-4);
	font-size: var(--ts-text-xs);
	color: var(--ts-color-muted);
}

.ts-breadcrumbs a {
	color: var(--ts-color-muted);
}

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

.ts-breadcrumbs__sep {
	color: var(--ts-color-faint);
}

.ts-breadcrumbs__current {
	color: var(--ts-color-text);
}

/* --- Pagination --------------------------------------------------------- */

.ts-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ts-space-2);
	margin-block: var(--ts-space-8);
}

/* Стилізуємо і власний клас, і page-numbers від paginate_links() */
.ts-pagination__item,
.ts-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--ts-space-2);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-md);
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-text);
}

.ts-pagination__item:hover,
.ts-pagination a.page-numbers:hover {
	border-color: var(--ts-color-primary);
	color: var(--ts-color-primary);
	text-decoration: none;
}

.ts-pagination__item[aria-current="page"],
.ts-pagination .page-numbers.current {
	background: var(--ts-color-primary);
	border-color: var(--ts-color-primary);
	color: #fff;
}

/* Три крапки — не клікабельні, тому без рамки */
.ts-pagination .page-numbers.dots {
	border-color: transparent;
	color: var(--ts-color-faint);
}

/* --- Footer ------------------------------------------------------------- */

/*
 * Підвал — світла картка на тлі сторінки, а не суцільна сіра смуга:
 * так він читається як окремий блок і не змагається з контентом.
 */
.ts-footer {
	margin-top: var(--ts-space-16);
	padding-bottom: var(--ts-space-6);
	background: var(--ts-color-bg);
}

/*
 * Картка ледь відтінена, майже біла (#f7fafc за макетом): сірий
 * --surface-sunken робив підвал важким і відсував його на задній план.
 */
.ts-footer__card {
	padding: var(--ts-space-8) var(--ts-space-8) var(--ts-space-5);
	background: var(--ts-color-surface-tint);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-xl);
}

/*
 * П'ять колонок: бренд ширший за решту, бо там опис магазину.
 * auto-fit тут не годиться — колонки мають різну вагу, і при
 * рівних частках опис ламався б на вузькі рядки.
 */
.ts-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ts-space-8);
	padding-bottom: var(--ts-space-6);
}

@media (min-width: 620px) {
	.ts-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Планшет: три колонки. Бренд і контакти ширші за списки посилань,
 * тому кожен займає свою колонку, а «Каталог», «Покупцям» і
 * «Оплата» лягають у другий ряд. На двох колонках остання секція
 * лишалась сама посеред порожнього ряду.
 */
@media (min-width: 900px) {
	.ts-footer__top {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.ts-footer__top {
		grid-template-columns: 1.35fr 1.25fr 1fr 1fr 1.3fr;
		gap: var(--ts-space-6);
	}
}

/* Розділювач між брендом і рештою — лише там, де колонки в ряд. */
@media (min-width: 1100px) {
	.ts-footer__brand {
		padding-right: var(--ts-space-6);
		border-right: 1px solid var(--ts-color-border);
	}
}

.ts-footer__logo {
	display: inline-block;
}

.ts-footer__logo img {
	display: block;
	width: auto;
	height: 40px;
}

.ts-footer__tagline {
	margin: var(--ts-space-2) 0 0;
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-footer__about {
	margin: var(--ts-space-4) 0 0;
	font-size: var(--ts-text-sm);
	line-height: var(--ts-leading-relaxed);
	color: var(--ts-color-muted);
}

.ts-footer__perks {
	display: grid;
	gap: var(--ts-space-3);
	margin: var(--ts-space-5) 0 0;
	padding: 0;
	list-style: none;
}

.ts-footer__perk {
	display: flex;
	align-items: flex-start;
	gap: var(--ts-space-3);
}

/*
 * Іконка в світлому квадраті: на сірому тлі підвалу сам по собі
 * синій штрих загубився б, а плашка тримає ряд рівним.
 */
.ts-footer__perk-icon,
.ts-footer__lead-icon,
.ts-footer__help-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	color: var(--ts-color-primary);
	background: var(--ts-color-primary-soft);
	border-radius: var(--ts-radius-md);
}

.ts-footer__lead-icon--lg {
	width: 48px;
	height: 48px;
	border-radius: var(--ts-radius-lg);
}

.ts-footer__perk-text,
.ts-footer__help-text,
.ts-footer__social-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 1px;
}

.ts-footer__perk-title,
.ts-footer__support-title {
	font-size: var(--ts-text-base);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
	line-height: 1.35;
}

.ts-footer__perk-note,
.ts-footer__lead-note {
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
	line-height: 1.4;
}

.ts-footer__title {
	margin: 0 0 var(--ts-space-4);
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-bold);
	color: var(--ts-color-text-strong);
}

/* --- Контакти ----------------------------------------------------------- */

.ts-footer__lead,
.ts-footer__support {
	display: flex;
	align-items: center;
	gap: var(--ts-space-3);
}

.ts-footer__support {
	margin-top: var(--ts-space-5);
	padding-top: var(--ts-space-5);
	border-top: 1px solid var(--ts-color-border);
}

.ts-footer__lead > span:last-child,
.ts-footer__support > span:last-child {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 1px;
}

/*
 * Номер не переносимо: розірваний на два рядки, він перестає
 * читатись як номер. У вузькій колонці краще трохи зменшити кегль.
 */
.ts-footer__phone-main {
	font-size: var(--ts-text-xl);
	font-weight: var(--ts-weight-bold);
	color: var(--ts-color-text-strong);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	white-space: nowrap;
	line-height: 1.2;
}

@media (min-width: 1280px) {
	.ts-footer__phone-main {
		font-size: var(--ts-text-2xl);
	}
}

.ts-footer__phone-main:hover {
	color: var(--ts-color-primary);
	text-decoration: none;
}

.ts-footer__phones {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ts-space-1) var(--ts-space-3);
	margin: var(--ts-space-4) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--ts-text-sm);
	font-variant-numeric: tabular-nums;
}

/* Номер в один рядок: перенесений, він не читається як номер. */
/*
 * Номери темні, а не посилальні сині: у списку з десяти рядків
 * суцільний синій рябить, а сам номер читається гірше. Синій
 * лишаємо для наведення — там він підказує, що це клікабельно.
 */
.ts-footer__phones a {
	white-space: nowrap;
	color: var(--ts-color-text-strong);
}

.ts-footer__mail {
	display: flex;
	align-items: center;
	gap: var(--ts-space-2);
	margin-top: var(--ts-space-4);
	padding-top: var(--ts-space-4);
	border-top: 1px solid var(--ts-color-border);
	font-size: var(--ts-text-sm);
}

.ts-footer__mail-icon {
	color: var(--ts-color-primary);
	display: inline-flex;
}

.ts-footer__mail:hover {
	text-decoration: none;
	color: var(--ts-color-primary);
}

/* --- Списки посилань ---------------------------------------------------- */

.ts-footer__nav {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Стрілка праворуч і межа по всій ширині колонки: рядок стає ціллю
 * для пальця, а не текстом, у який треба влучити.
 */
.ts-footer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ts-space-3);
	min-height: 40px;
	padding: var(--ts-space-2) 0;
	font-size: var(--ts-text-base);
	color: var(--ts-color-muted);
}

.ts-footer__link .ts-icon {
	flex: 0 0 auto;
	color: var(--ts-color-faint);
	transition: transform var(--ts-duration-fast) var(--ts-ease),
		color var(--ts-duration-fast) var(--ts-ease);
}

.ts-footer__link:hover {
	color: var(--ts-color-primary);
	text-decoration: none;
}

.ts-footer__link:hover .ts-icon {
	color: var(--ts-color-primary);
	transform: translateX(2px);
}

/* --- Оплата й доставка -------------------------------------------------- */

/*
 * Чотири плашки в один ряд: розірвані 3+1 вони читаються як помилка
 * верстки. Тому однакова частка ширини, а не фіксований мінімум.
 */
.ts-footer__pays {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ts-space-2);
	margin: var(--ts-space-5) 0 0;
	padding: 0;
	list-style: none;
}

.ts-footer__pay {
	display: grid;
	place-items: center;
	height: 40px;
	padding-inline: var(--ts-space-2);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-md);
}

.ts-footer__pay img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 18px;
	object-fit: contain;
}

.ts-footer__np {
	display: flex;
	align-items: center;
	gap: var(--ts-space-4);
	margin-top: var(--ts-space-5);
	padding-top: var(--ts-space-5);
	border-top: 1px solid var(--ts-color-border);
}

.ts-footer__np-logo {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	height: 48px;
	padding-inline: var(--ts-space-3);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-md);
}

.ts-footer__np-logo img {
	display: block;
	width: auto;
	height: 28px;
}

.ts-footer__np-text {
	display: flex;
	align-items: center;
	gap: var(--ts-space-2);
	min-width: 0;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
	line-height: 1.4;
}

.ts-footer__np-icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--ts-color-faint);
}

/* --- Соцмережі й підтримка ---------------------------------------------- */

/*
 * Смуга світліша за картку — у макеті вона майже біла. Виносимо її
 * за поля картки від'ємними полями, щоб фон ішов до країв.
 */
.ts-footer__social-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ts-space-6);
	margin: 0 calc(-1 * var(--ts-space-8)) calc(-1 * var(--ts-space-5));
	padding: var(--ts-space-5) var(--ts-space-8);
	background: var(--ts-color-surface);
	border-top: 1px solid var(--ts-color-border);
	border-radius: 0 0 var(--ts-radius-xl) var(--ts-radius-xl);
}

.ts-footer__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ts-space-5);
}

.ts-footer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-footer__socials a {
	display: block;
	border-radius: var(--ts-radius-full);
	transition: transform var(--ts-duration-fast) var(--ts-ease);
}

.ts-footer__socials img {
	display: block;
	width: 40px;
	height: 40px;
}

.ts-footer__socials a:hover {
	transform: translateY(-2px);
}

.ts-footer__help {
	display: flex;
	align-items: center;
	gap: var(--ts-space-3);
}

@media (min-width: 1100px) {
	.ts-footer__help {
		padding-left: var(--ts-space-6);
		border-left: 1px solid var(--ts-color-border);
	}
}

/*
 * Синя обводка за макетом: на ледь відтіненій картці сіра рамка
 * зливається з тлом, і кнопка перестає читатись як кнопка.
 */
.ts-footer__help-btn {
	flex: 0 0 auto;
	gap: var(--ts-space-2);
	background: var(--ts-color-surface);
	border-color: var(--ts-color-primary);
	color: var(--ts-color-primary);
}

.ts-footer__help-btn:hover {
	background: var(--ts-color-primary-soft);
	border-color: var(--ts-color-primary);
	color: var(--ts-color-primary);
}

/* --- Нижній рядок ------------------------------------------------------- */

.ts-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ts-space-3);
	padding: var(--ts-space-5) var(--ts-space-2) 0;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

.ts-footer__copy {
	margin: 0;
}

.ts-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ts-space-3);
}

.ts-footer__legal a {
	color: var(--ts-color-muted);
}

.ts-footer__legal a:hover {
	color: var(--ts-color-primary);
}

.ts-footer__sep {
	color: var(--ts-color-border-strong);
}

@media (max-width: 759px) {
	.ts-footer__card {
		padding: var(--ts-space-6) var(--ts-space-4) var(--ts-space-4);
	}

	/* Поля картки на мобільному інші — виносимо смугу рівно на них. */
	.ts-footer__social-row {
		margin: 0 calc(-1 * var(--ts-space-4)) calc(-1 * var(--ts-space-4));
		padding: var(--ts-space-5) var(--ts-space-4);
	}

	/* Проміжок між стовпчиками вужчий — ширина потрібна самим номерам. */
	.ts-footer__phones {
		gap: var(--ts-space-1) var(--ts-space-2);
	}

	.ts-footer__social-row {
		flex-direction: column;
		align-items: stretch;
	}

	.ts-footer__help {
		flex-wrap: wrap;
	}

	.ts-footer__help-btn {
		width: 100%;
		justify-content: center;
	}

	.ts-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --- Мобільна навігація каталогом (ТЗ §25) ------------------------------ */

.ts-mnav {
	position: relative;
}

.ts-mnav__panel {
	display: none;
}

.ts-mnav__panel.is-active {
	display: block;
}

.ts-mnav__item {
	border-bottom: 1px solid var(--ts-color-border);
}

.ts-mnav__link {
	display: flex;
	align-items: center;
	gap: var(--ts-space-3);
	width: 100%;
	min-height: 52px;
	padding: var(--ts-space-3) var(--ts-space-4);
	font-size: var(--ts-text-base);
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-text);
	text-align: left;
}

/*
 * Назва забирає вільне місце, тож значок лишається біля лівого краю,
 * а стрілка притискається до правого. Раніше тут був
 * justify-content: space-between — зі значком він розкидав би три
 * елементи по кутах.
 */
.ts-mnav__name {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Значок категорії. Фіксована ширина — щоб назви вишикувалися в
 * рівний стовпчик незалежно від того, іконка це, фото товару чи
 * плашка з літерою.
 */
.ts-mnav__link .ts-cat-thumb {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--ts-color-muted);
}

.ts-mnav__link:hover {
	background: var(--ts-color-surface-sunken);
	text-decoration: none;
}

.ts-mnav__link--branch svg {
	flex: none;
	color: var(--ts-color-faint);
}

.ts-mnav__link--all {
	color: var(--ts-color-primary);
	font-weight: var(--ts-weight-semibold);
}

.ts-mnav__back {
	display: flex;
	align-items: center;
	gap: var(--ts-space-2);
	width: 100%;
	min-height: 48px;
	padding: var(--ts-space-3) var(--ts-space-4);
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-muted);
	background: var(--ts-color-surface-sunken);
}

/* Стрілка «назад» — та сама іконка, розвернута */
.ts-mnav__back svg {
	transform: rotate(180deg);
}

.ts-mnav__back:hover {
	color: var(--ts-color-text);
}

/* Кнопка закриття drawer — теж ціль для пальця */
@media (max-width: 1023px) {
	.ts-drawer__close {
		width: 44px;
		height: 44px;
	}
}

/* Пагінація на телефоні — теж 44px */
@media (max-width: 767px) {
	.ts-pagination__item,
	.ts-pagination .page-numbers {
		min-width: 44px;
		height: 44px;
	}
}

/* Номери в підвалі: логотип оператора поруч із номером. */
.ts-footer__phones li {
	display: flex;
	align-items: center;
	gap: var(--ts-space-2);
	min-width: 0;
}

/*
 * Номери набирають, а не читають як текст: підкреслення при наведенні
 * лише рябить у списку з десяти рядків.
 */
.ts-footer__phones a:hover,
.ts-footer__phones a:focus-visible {
	color: var(--ts-color-primary);
	text-decoration: none;
}

/* --- Текстові сторінки (Про нас, Гарантія, Оплата…) --------------------- */

/*
 * Обмежуємо довжину рядка: на широкому екрані текст на всю ширину
 * контейнера читається погано — око губить початок наступного рядка.
 */
.ts-page {
	max-width: 76ch;
	padding-block: var(--ts-space-6) var(--ts-space-10);
}

/*
 * Сторінки WooCommerce йдуть через той самий page.php, але 76ch —
 * це міра для читання тексту, а не для таблиць. На кошику вона
 * стискала сітку до 671px: колонка назви отримувала 0px, і назва
 * переносилась по літері. Знімаємо межу там, де вміст не текст.
 */
.woocommerce-page .ts-page,
.woocommerce-cart .ts-page,
.woocommerce-checkout .ts-page,
.woocommerce-account .ts-page {
	max-width: none;
}

.ts-page__head {
	margin-bottom: var(--ts-space-6);
}

.ts-page__title {
	margin: 0;
	font-size: var(--ts-text-3xl);
	line-height: var(--ts-leading-snug);
}

/*
 * Найвужчі екрани: два номери поруч не вміщаються навіть із вузьким
 * проміжком. Номер розривати не можна, тому переходимо в один
 * стовпчик — краще довший список, ніж обрізані цифри.
 */
@media (max-width: 400px) {
	.ts-footer__phones {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Сторінка 404 -------------------------------------------------------- */

/*
 * Тупик робимо розвилкою: великий код помилки, пошук і розділи.
 * Вирівнювання по центру, але текст лишається читабельним — блок
 * обмежений по ширині, інакше рядки розтягувались би на весь екран.
 */
.ts-404 {
	max-width: 46rem;
	margin: 0 auto;
	padding: var(--ts-space-10) 0 var(--ts-space-12);
	text-align: center;
}

/*
 * Код помилки — великий, але приглушений: він позначає ситуацію,
 * а вести має заголовок і пошук, а не чотиризначне число.
 */
.ts-404__code {
	margin: 0;
	font-size: clamp(4rem, 12vw, 7rem);
	font-weight: var(--ts-weight-bold);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ts-color-primary);
	opacity: 0.18;
}

.ts-404__title {
	margin: calc(var(--ts-space-4) * -1) 0 0;
	font-size: var(--ts-text-3xl);
	line-height: var(--ts-leading-tight);
}

.ts-404__lead {
	margin: var(--ts-space-3) auto 0;
	max-width: 34rem;
	font-size: var(--ts-text-md);
	color: var(--ts-color-muted);
}

.ts-404__search {
	display: flex;
	gap: var(--ts-space-2);
	margin-top: var(--ts-space-6);
}

.ts-404__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 var(--ts-space-4);
	height: 48px;
	font-size: var(--ts-text-base);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border-strong);
	border-radius: var(--ts-radius-md);
}

.ts-404__input:focus {
	outline: none;
	border-color: var(--ts-color-primary);
	box-shadow: 0 0 0 3px rgba(11, 99, 246, 0.15);
}

.ts-404__submit {
	flex: 0 0 auto;
	height: 48px;
}

.ts-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ts-space-3);
	margin-top: var(--ts-space-4);
}

.ts-404__block {
	margin-top: var(--ts-space-10);
	padding-top: var(--ts-space-8);
	border-top: 1px solid var(--ts-color-border);
}

.ts-404__subtitle {
	margin: 0 0 var(--ts-space-4);
	font-size: var(--ts-text-lg);
}

.ts-404__cats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ts-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.ts-404__cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ts-space-2);
	/* 48px — палець потрапляє без прицілювання. */
	min-height: 48px;
	padding: var(--ts-space-2) var(--ts-space-3);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-text);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-md);
	transition: border-color 0.15s ease, color 0.15s ease;
}

.ts-404__cat:hover {
	color: var(--ts-color-primary);
	border-color: var(--ts-color-primary);
	text-decoration: none;
}

.ts-404__cat .ts-icon {
	flex: 0 0 auto;
	color: var(--ts-color-faint);
}

.ts-404__help {
	margin: var(--ts-space-8) 0 0;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

@media (max-width: 899px) {
	.ts-404__cats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Телефон: пошук у стовпчик — поле й кнопка поруч стають надто
 * вузькими, щоб у них щось вмістилось.
 */
@media (max-width: 639px) {
	.ts-404 {
		padding: var(--ts-space-6) 0 var(--ts-space-10);
	}

	.ts-404__search {
		flex-direction: column;
	}

	.ts-404__input,
	.ts-404__submit {
		width: 100%;
	}

	.ts-404__cats {
		grid-template-columns: minmax(0, 1fr);
	}

	.ts-404__actions .ts-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* --- Карта сайту --------------------------------------------------------- */

.ts-sitemap__section {
	margin-top: var(--ts-space-8);
	padding-top: var(--ts-space-6);
	border-top: 1px solid var(--ts-color-border);
}

.ts-sitemap__title {
	margin: 0 0 var(--ts-space-5);
	font-size: var(--ts-text-xl);
}

.ts-sitemap__title a {
	color: var(--ts-color-text-strong);
}

.ts-sitemap__title a:hover {
	color: var(--ts-color-primary);
	text-decoration: none;
}

.ts-sitemap__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ts-space-6);
}

.ts-sitemap__group-title {
	margin: 0 0 var(--ts-space-3);
	padding-bottom: var(--ts-space-2);
	font-size: var(--ts-text-base);
	font-weight: var(--ts-weight-semibold);
	border-bottom: 1px solid var(--ts-color-border);
}

.ts-sitemap__group-title a {
	color: var(--ts-color-text-strong);
}

.ts-sitemap__group-title a:hover {
	color: var(--ts-color-primary);
	text-decoration: none;
}

.ts-sitemap__list {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-sitemap__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ts-space-2);
	/* 36px — рядок лишається компактним, але палець потрапляє. */
	min-height: 36px;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

.ts-sitemap__list a:hover {
	color: var(--ts-color-primary);
	text-decoration: none;
}

/* Кількість товарів праворуч — видно, куди є сенс заходити. */
.ts-sitemap__count {
	flex: 0 0 auto;
	font-size: var(--ts-text-xs);
	color: var(--ts-color-faint);
	font-variant-numeric: tabular-nums;
}

/*
 * Службові переліки (сторінки, статті) ставимо в рядок: їх небагато,
 * і стовпчик з десяти пунктів розтягував би сторінку без потреби.
 */
.ts-sitemap__list--inline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-space-2) var(--ts-space-5);
}

.ts-sitemap__list--inline a {
	min-height: 32px;
}

.ts-sitemap__more {
	margin: var(--ts-space-6) 0 0;
}

@media (max-width: 999px) {
	.ts-sitemap__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.ts-sitemap__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ts-space-5);
	}
}