/* ==========================================================================
   TopShop — Головна за макетом
   Банер, плитки розділів, товари з вкладками, промо, бренди, блог.
   ========================================================================== */

/*
 * Без власних відступів. Скидаємо і margin від .ts-section: там
 * 40px зверху й знизу, і саме вони лишали велику діру між банером,
 * плитками й товарами — padding я прибрав, а margin лишався.
 *
 * Повітря дають самі блоки: заголовки секцій і нижні поля сіток.
 */
.ts-home__section {
	margin-block: 0;
	padding-block: var(--ts-space-4);
}

.ts-home__section--tight {
	margin-block: 0;
	padding-block: var(--ts-space-2);
}

/*
 * Шапка секції: заголовок ліворуч, вкладки посередині, посилання
 * праворуч. На вузькому екрані все складається в стовпчик.
 */
/*
 * Заголовок і вкладки — одна група ліворуч, посилання притиснуте
 * праворуч. baseline, а не center: у заголовка й вкладок різний
 * кегль, і по центру їхні літери «плавали» одна відносно одної.
 */
.ts-home__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ts-space-2) var(--ts-space-6);
	margin-bottom: var(--ts-space-5);
}

.ts-home__head .ts-section__title {
	margin: 0;
}

.ts-home__head .ts-section__more {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--ts-space-1);
	font-size: var(--ts-text-base);
	font-weight: var(--ts-weight-semibold);
	white-space: nowrap;
}

.ts-home__head .ts-section__more:hover {
	text-decoration: none;
}

/* --- Банер --------------------------------------------------------------- */

.ts-hero {
	padding-top: var(--ts-space-5);
}

.ts-hero__frame {
	position: relative;
	border-radius: var(--ts-radius-xl);
	overflow: hidden;
	background: var(--ts-color-surface-sunken);
}

/*
 * Гортання скролом зі snap: працює без JS і дає нативний свайп на
 * телефоні. JS лише синхронізує стрілки й крапки.
 */
.ts-hero__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.ts-hero__track::-webkit-scrollbar {
	display: none;
}

/*
 * Слайд — це ціла картинка-посилання: текст і кнопку малює сам банер.
 * Тому тут немає ні накладок, ні градієнтів, тільки зображення.
 */
.ts-hero__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: block;
}

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

/*
 * Пропорції задає смуга, а не картинка. Банери тепер заводить адмін, і
 * файли приходять різної форми: за height:auto слайдер міняв би висоту
 * на кожному гортанні, а сторінка смикалась би під ним.
 *
 * Значення — формат, у якому намальовані банери для комп'ютера (3:1).
 * Нижче, на вужчих екранах, воно змінюється разом із макетом.
 */
.ts-hero__track {
	aspect-ratio: 3 / 1;
}

/*
 * Між слайдом і картинкою стоїть <picture> — це він отримує розміри
 * від слайда, а вже від нього відштовхується <img>. Без явної висоти
 * на обох height:100% на картинці нема від чого рахувати.
 */
.ts-hero__slide,
.ts-hero__slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

.ts-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	/*
	 * Картинку, що не збіглася з форматом смуги, вписуємо по центру:
	 * обрізати край банера краще, ніж розтягнути його.
	 */
	object-fit: cover;
	object-position: center;
}

/*
 * Межі ті самі, що і в <picture> плагіна (599 і 1023). Розійдуться —
 * прийде вертикальний макет у широку смугу й обріжеться з боків.
 */
/*
 * 3:4, а не 4:3: банери для планшета намальовані вертикальними
 * (1024×1365). У горизонтальній смузі вони обрізалися зверху й знизу
 * — з макета зникали логотип і сам заголовок, лишалася середина.
 */
/*
 * 3:4, а не 4:3: банери для планшета намальовані вертикальними
 * (1024×1365). У горизонтальній смузі вони обрізалися зверху й знизу
 * — з макета зникали логотип і заголовок, лишалася сама середина.
 *
 * Стелю висоти не ставимо. Пробував обмежити (68vh) — банер знову
 * обрізався згори, бо object-fit: cover бере надлишок із країв. Або
 * весь банер, або обрізаний заголовок; читабельність важливіша, а
 * планшет гортають вертикально й так.
 */
@media (max-width: 1023px) {
	.ts-hero__track {
		aspect-ratio: 3 / 4;
	}
}

@media (max-width: 599px) {
	.ts-hero__track {
		aspect-ratio: 9 / 16;
	}
}

.ts-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: none;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--ts-radius-full);
	/* Напівпрозорий білий: банери світлі, темна кнопка на них кричить. */
	background: rgba(255, 255, 255, 0.82);
	box-shadow: var(--ts-shadow-sm);
	color: var(--ts-color-text-strong);
	cursor: pointer;
	transition: background-color var(--ts-duration-fast) var(--ts-ease);
}

.ts-hero__arrow:hover {
	background: #fff;
}

/*
 * Стрілки показуємо й на телефоні. Свайп нікуди не подівся, але
 * без жодної видимої кнопки банер читається як звичайна картинка —
 * людина просто не здогадується, що слайдів кілька.
 *
 * На вузькому екрані вони стоять унизу, в один ряд із крапками:
 * банер там вертикальний, і кнопка посеред висоти лягала просто на
 * заголовок та підписи.
 */
.ts-hero__arrow {
	display: grid;
	top: auto;
	bottom: var(--ts-space-4);
	transform: none;
	width: 34px;
	height: 34px;
}

@media (min-width: 700px) {
	.ts-hero__arrow {
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
	}
}

.ts-hero__arrow--prev {
	left: var(--ts-space-4);
}

.ts-hero__arrow--prev .ts-icon {
	transform: rotate(180deg);
}

.ts-hero__arrow--next {
	right: var(--ts-space-4);
}

/*
 * Крапки лежать на світлій підкладці: банери бувають із темним низом
 * (зарядні станції — вечірнє місто), і напівпрозорі темні крапки на
 * ньому просто зникали.
 */
.ts-hero__dots {
	position: absolute;
	left: 50%;
	bottom: var(--ts-space-4);
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: var(--ts-space-2);
	padding: 6px 10px;
	border-radius: var(--ts-radius-full);
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(6px);
}

.ts-hero__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	/* Ціль для пальця більша за саму крапку — але без зайвого місця. */
	outline-offset: 6px;
	border-radius: var(--ts-radius-full);
	background: rgba(4, 22, 42, 0.25);
	cursor: pointer;
	transition: width var(--ts-duration-fast) var(--ts-ease),
		background-color var(--ts-duration-fast) var(--ts-ease);
}

.ts-hero__dot.is-active {
	width: 22px;
	background: var(--ts-color-primary);
}

/* --- Плитки розділів ----------------------------------------------------- */

/*
 * Дев'ять плиток (вісім розділів + «Всі категорії») в один ряд на
 * широкому екрані. auto-fit розкладав їх на десять колонок і лишав
 * порожню клітинку в кінці.
 */
.ts-cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: var(--ts-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-cat {
	display: grid;
	/* stretch, не center: при center дочірні елементи не обмежені
	   шириною плитки й фото вилазило на сусідні. */
	justify-items: stretch;
	gap: var(--ts-space-2);
	height: 100%;
	padding: var(--ts-space-4) var(--ts-space-2);
	text-align: center;
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
	transition: border-color var(--ts-duration-fast) var(--ts-ease),
		box-shadow var(--ts-duration-fast) var(--ts-ease);
}

.ts-cat:hover {
	border-color: var(--ts-color-primary);
	box-shadow: var(--ts-shadow-sm);
	text-decoration: none;
}

/*
 * place-items: center робить елемент auto-розміру, і img з height: 100%
 * не має від чого рахувати — фото лишалось 245px і вилазило з плитки.
 * Тому flex із центруванням: тут дитина обмежена висотою контейнера.
 */
.ts-cat__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	height: 72px;
}

/*
 * Жорсткі розміри, а не max-*: у grid із place-items: center елемент
 * може вилізти за доріжку, і фото 245px розповзалось на сусідні
 * плитки поверх тексту.
 */
.ts-cat__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Заглушка замість фото категорії — поки картинок немає. */
.ts-cat__placeholder {
	display: grid;
	place-items: center;
	/* Квадрат, а не на всю плитку: розтягнутий сірий блок виглядав
	   би як зламана картинка. */
	width: 56px;
	height: 56px;
	margin-inline: auto;
	color: var(--ts-color-faint);
	background: var(--ts-color-surface-sunken);
	border-radius: var(--ts-radius-md);
}

/*
 * Плитка «Всі категорії» більша за решту заглушок: у макеті це
 * самостійний елемент із власною вагою, а не тимчасова затичка.
 */
.ts-cat__placeholder--accent {
	width: 64px;
	height: 64px;
	color: var(--ts-color-primary);
	background: var(--ts-color-primary-soft);
	border-radius: var(--ts-radius-lg);
}

.ts-cat__name {
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-semibold);
	line-height: 1.3;
	color: var(--ts-color-text-strong);
}

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

/* --- Вкладки товарів ----------------------------------------------------- */

.ts-tabs--pill {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-space-1);
	border: 0;
}

/*
 * Вкладки жирні, як у макеті: вони конкурують із заголовком секції,
 * тож тонкий сірий текст поруч із ним просто губився.
 */
.ts-tabs--pill .ts-tabs__item {
	padding: var(--ts-space-2) var(--ts-space-3);
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: var(--ts-text-md);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-muted);
	cursor: pointer;
}

.ts-tabs--pill .ts-tabs__item:hover {
	color: var(--ts-color-text-strong);
}

/* Активна — синя з підкресленням, а не плашкою: у макеті саме так. */
.ts-tabs--pill .ts-tabs__item.is-active {
	color: var(--ts-color-primary);
	background: transparent;
	box-shadow: inset 0 -2px 0 var(--ts-color-primary);
}

/* --- Промо-смуга --------------------------------------------------------- */

.ts-promos {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ts-space-3);
}

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

@media (min-width: 1100px) {
	/* Банери ширші за текстові блоки — як у макеті. */
	.ts-promos {
		grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
	}
}

.ts-promo {
	position: relative;
	display: grid;
	align-content: center;
	gap: var(--ts-space-1);
	min-height: 124px;
	padding: var(--ts-space-5);
	border-radius: var(--ts-radius-lg);
	overflow: hidden;
}

.ts-promo--info {
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"icon title"
		"icon text";
	gap: var(--ts-space-1) var(--ts-space-4);
	background: var(--ts-color-primary-soft);
}

.ts-promo--info .ts-promo__icon {
	grid-area: icon;
	align-self: center;
	color: var(--ts-color-primary);
}

.ts-promo--info .ts-promo__title {
	grid-area: title;
	align-self: end;
}

.ts-promo--info .ts-promo__text {
	grid-area: text;
	align-self: start;
}

.ts-promo--banner {
	background: linear-gradient(120deg, #0b1f3a 0%, #17406f 100%);
	color: #fff;
}

/*
 * Банер-картинка: заголовок, підпис і кнопка намальовані всередині
 * макета, тож блок не має ні падінгу, ні власного тла — лише
 * зображення на всю плитку.
 */
.ts-promo--image {
	padding: 0;
	background: var(--ts-color-surface-sunken);
}

.ts-promo--image:hover {
	text-decoration: none;
}

.ts-promo__img {
	display: block;
	width: 100%;
	height: 100%;
	/*
	 * cover, бо плитка в ряду підлаштовується під сусідів і її
	 * пропорції не збігаються з банером. Обрізати край краще, ніж
	 * розтягнути макет.
	 */
	object-fit: cover;
	object-position: center;
}

.ts-promo--dark {
	background: linear-gradient(120deg, #1a1030 0%, #3b1d63 100%);
}

.ts-promo--banner:hover {
	text-decoration: none;
}

.ts-promo__media {
	position: absolute;
	inset: 0 0 0 auto;
	display: none;
	place-items: center;
	width: 44%;
	pointer-events: none;
}

@media (min-width: 900px) {
	.ts-promo__media {
		display: grid;
	}
}

.ts-promo__media .ts-hero__placeholder {
	width: min(150px, 84%);
	font-size: var(--ts-text-xs);
}

.ts-promo__body {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--ts-space-1);
	max-width: 62%;
}

@media (max-width: 899px) {
	.ts-promo__body {
		max-width: none;
	}
}

.ts-promo__title {
	font-size: var(--ts-text-md);
	font-weight: var(--ts-weight-bold);
	line-height: 1.3;
	color: inherit;
}

.ts-promo--info .ts-promo__title {
	color: var(--ts-color-text-strong);
}

.ts-promo__text {
	font-size: var(--ts-text-sm);
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.78);
}

.ts-promo--info .ts-promo__text {
	color: var(--ts-color-muted);
}

.ts-promo__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-space-1);
	justify-self: start;
	margin-top: var(--ts-space-3);
	padding: var(--ts-space-2) var(--ts-space-4);
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-text-strong);
	background: #fff;
	border-radius: var(--ts-radius-md);
}

/* --- Бренди -------------------------------------------------------------- */

/*
 * Стрічка з горизонтальним скролом: дванадцять лого в сітці на
 * вузькому екрані дають чотири ряди й з'їдають пів-екрана.
 */
.ts-brands {
	display: flex;
	gap: var(--ts-space-3);
	margin: 0;
	padding: 0 0 var(--ts-space-2);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

.ts-brands > li {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.ts-brand {
	display: grid;
	place-items: center;
	width: 132px;
	height: 72px;
	padding: var(--ts-space-3);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
	transition: border-color var(--ts-duration-fast) var(--ts-ease);
}

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

.ts-brand__logo {
	max-width: 100%;
	max-height: 30px;
	width: auto;
	object-fit: contain;
	opacity: 0.78;
	transition: opacity var(--ts-duration-fast) var(--ts-ease);
}

.ts-brand:hover .ts-brand__logo {
	opacity: 1;
}

/* --- Блог і бізнес ------------------------------------------------------- */

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

@media (min-width: 1000px) {
	.ts-home__split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--ts-space-6);
	}

	/*
	 * Банер вирівнюємо за низом карток: заголовок «Блог та корисні
	 * статті» займає рядок ліворуч, і без цього права колонка
	 * висить вище, ніж ряд статей.
	 */
	.ts-home__split .ts-business {
		align-self: end;
	}
}

/*
 * Статті стоять рядом картками з обкладинкою згори — так само, як
 * товари вище на сторінці. Раніше це був список із мініатюрою 88×66
 * збоку: на макеті головної блог виглядає саме картками, і поруч
 * із рядом товарів список читався як чужий елемент.
 */
.ts-home__posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ts-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-home__post {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ts-home__post:hover {
	border-color: var(--ts-color-border-strong);
	box-shadow: var(--ts-shadow-sm);
}

.ts-home__post-media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ts-color-surface-sunken);
}

.ts-home__post-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Заглушка, поки в статей немає обкладинок.
 *
 * Тримає ту саму пропорцію, що й картинка, але робиться нижчою:
 * порожній прямокутник 16:9 з дрібною іконкою з'їдав половину
 * картки й читався як поламане зображення. Коли мініатюри
 * з'являться, картка сама набуде повної висоти.
 */
.ts-home__post-media:has(.ts-home__post-fallback) {
	aspect-ratio: auto;
	height: 72px;
}

.ts-home__post-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--ts-color-primary);
	background: linear-gradient(140deg, #eef3fb 0%, #dce8f8 100%);
	opacity: 0.75;
}

.ts-home__post-body {
	display: grid;
	align-content: start;
	gap: var(--ts-space-1);
	min-width: 0;
	padding: var(--ts-space-3);
}

.ts-home__post-title {
	font-size: var(--ts-text-base);
	font-weight: var(--ts-weight-medium);
	line-height: 1.35;
	color: var(--ts-color-text-strong);
}

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

.ts-home__post-text {
	margin: 0;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
	line-height: 1.4;
}

.ts-home__post-date {
	font-size: var(--ts-text-xs);
	color: var(--ts-color-faint);
}

/*
 * Банер намальований цілком — із заголовком, переліком переваг і
 * кнопкою. Тому блок не має власних відступів і фону: будь-яка
 * підкладка тут утворила б рамку навколо картинки.
 */
.ts-business {
	display: flex;
	overflow: hidden;
	border-radius: var(--ts-radius-lg);
}

.ts-business__link {
	display: block;
	width: 100%;
	line-height: 0;
	transition: box-shadow 0.15s ease;
}

.ts-business__link:hover {
	box-shadow: var(--ts-shadow-md);
}

.ts-business__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

/*
 * Телефон: одна колонка. Картки з обкладинкою 16:9 одна під одною
 * читаються краще, ніж дві вузькі з нечитабельним заголовком.
 */
@media (max-width: 639px) {
	.ts-home__posts {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Про магазин --------------------------------------------------------- */

.ts-about {
	max-width: 76ch;
}

.ts-about__title {
	margin-bottom: var(--ts-space-3);
	font-size: var(--ts-text-xl);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-about__text {
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

/*
 * На телефоні картка вужча (158px), і 60px іконки лишали назві замало
 * місця — "Оперативна пам'ять" налізала на край. Зменшуємо іконку
 * і дозволяємо назві переноситись.
 */
@media (max-width: 559px) {
	.ts-catcard {
		gap: var(--ts-space-2);
		padding: var(--ts-space-3);
	}

	.ts-catcard__media {
		width: 40px;
		height: 40px;
	}

	.ts-catcard__name {
		font-size: var(--ts-text-sm);
	}
}

/* --- Сітка товарів на головній ------------------------------------------- */

/*
 * Шість колонок на широкому екрані, як у макеті: ряд із шести карток
 * показує добірку цілком, без потреби гортати.
 *
 * [hidden] перебиваємо явно: базовий .ts-grid ставить display: grid,
 * а він сильніший за типовий display: none у браузера, тож прихована
 * вкладка інакше лишалась видимою.
 */
.ts-grid--home[hidden] {
	display: none;
}

/*
 * Телефон — одна колонка з горизонтальною карткою, як у каталозі.
 * Дві колонки дають картку 164px: фото нечитабельне, назва ріжеться
 * на три рядки (див. коментар до .ts-grid--catalog).
 */
.ts-grid--home {
	--ts-grid-cols: 1;
}

@media (min-width: 560px) {
	.ts-grid--home {
		--ts-grid-cols: 2;
	}
}

@media (min-width: 900px) {
	.ts-grid--home {
		--ts-grid-cols: 4;
	}
}

@media (min-width: 1200px) {
	.ts-grid--home {
		--ts-grid-cols: 6;
	}
}

/* --- Банер із зображенням ------------------------------------------------ */

@media (min-width: 1200px) {
	.ts-cats {
		grid-template-columns: repeat(9, minmax(0, 1fr));
	}
}

/* --- Картка на головній -------------------------------------------------- */

/*
 * Характеристики тут зайві: на головній людина ще не порівнює моделі,
 * а шість рядків дрібного тексту роблять ряд карток важким. У каталозі
 * вони лишаються — там саме порівнюють.
 */
.ts-grid--home .ts-card__specs {
	display: none;
}

/* Без характеристик наявність притискається до назви — даємо їй місце. */
/*
 * Код товару тут стоїть у тому самому рядку, що й бренд, але бренд
 * на головній прихований (див. нижче) — тож рядок лишається сам,
 * і власний відступ згори йому не потрібен.
 */
.ts-grid--home .ts-card__sku {
	margin-top: 0;
}

/*
 * Бренд окремим рядком тут не потрібен: він і так стоїть першим
 * словом у назві («Жорсткий диск ... Seagate»), тож рядок лише
 * додає висоти. У каталозі лишається — там за ним сканують список.
 */
.ts-grid--home .ts-card__brand {
	display: none;
}

/*
 * .ts-tabs — спільний клас із вкладками на сторінці товару, а там
 * у нього рамка знизу й відступ 24px. Для вкладок на головній це
 * зайве: вони стоять в одному рядку із заголовком секції.
 */
.ts-tabs--pill {
	margin-bottom: 0;
	border-bottom: 0;
	gap: var(--ts-space-1);
}

/*
 * Кнопка «Детальніше» на вітрині — сама стрілка без підпису.
 *
 * Слово в картці на 230px виштовхувало ціну за край. Підпис лишився
 * в розмітці для екранних дикторів, а кнопку стискаємо до квадрата,
 * щоб вона не розтягувалась під ширину, якої більше не потребує.
 */
.ts-grid--home .ts-card__action.ts-btn--secondary {
	flex: 0 0 auto;
	width: 40px;
	min-width: 40px;
	padding-inline: 0;
}

/*
 * На вітрині рядки картки йдуть без проміжку: там немає переліку
 * характеристик, і 8px між кожним рядком розганяли короткий вміст
 * на всю висоту картки.
 */
.ts-grid--home .ts-card__body {
	gap: 0;
}