/* ==========================================================================
   TopShop — Components
   Кнопки, бейджі, ціна, картка товару, інпути, чіпи.
   ========================================================================== */

/* --- Кнопки ------------------------------------------------------------- */

.ts-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ts-space-2);
	padding: var(--ts-space-3) var(--ts-space-5);
	border: 1px solid transparent;
	border-radius: var(--ts-radius-md);
	font-size: var(--ts-text-base);
	font-weight: var(--ts-weight-semibold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ts-duration-fast) var(--ts-ease),
		border-color var(--ts-duration-fast) var(--ts-ease),
		color var(--ts-duration-fast) var(--ts-ease);
	/* Мінімальна зручна для пальця висота */
	min-height: 44px;
}

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

.ts-btn:disabled,
.ts-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

/* Головний CTA — "Додати в кошик" (ТЗ §28) */
.ts-btn--primary {
	background: var(--ts-color-primary);
	color: var(--ts-color-primary-contrast);
}

.ts-btn--primary:hover {
	background: var(--ts-color-primary-hover);
	color: var(--ts-color-primary-contrast);
}

.ts-btn--primary:active {
	background: var(--ts-color-primary-active);
}

/* Вторинний CTA — "Уточнити" (ТЗ §29) */
.ts-btn--secondary {
	background: var(--ts-color-surface);
	border-color: var(--ts-color-border-strong);
	color: var(--ts-color-text);
}

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

/*
 * М'який варіант — «Швидке замовлення». Не конкурує з головним CTA
 * кольором, але лишається помітним: це друга за важливістю дія.
 */
.ts-btn--soft {
	background: var(--ts-color-primary-soft);
	border-color: transparent;
	color: var(--ts-color-primary);
}

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

/* Тихий варіант — іконки хедера, "показати ще" */
.ts-btn--ghost {
	background: transparent;
	color: var(--ts-color-text);
	padding-inline: var(--ts-space-3);
}

.ts-btn--ghost:hover {
	background: var(--ts-color-surface-sunken);
}

.ts-btn--sm {
	min-height: 36px;
	padding: var(--ts-space-2) var(--ts-space-3);
	font-size: var(--ts-text-sm);
}

.ts-btn--lg {
	min-height: 52px;
	padding: var(--ts-space-4) var(--ts-space-6);
	font-size: var(--ts-text-md);
}

.ts-btn--block {
	width: 100%;
}

/* --- Бейджі статусу наявності (ТЗ §14) ---------------------------------- */

.ts-stock {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-space-2);
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-medium);
	line-height: 1.3;
}

/* Крапка-індикатор замість важкої заливки — менше шуму в сітці */
.ts-stock::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: var(--ts-radius-full);
	background: currentColor;
}

.ts-stock--in_stock {
	color: var(--ts-color-success);
}

.ts-stock--low_stock {
	color: var(--ts-color-warning);
}

.ts-stock--on_order,
.ts-stock--expected {
	color: var(--ts-color-warning);
}

.ts-stock--out_of_stock,
.ts-stock--discontinued {
	color: var(--ts-color-faint);
}

/* --- Бейджі загального призначення -------------------------------------- */

.ts-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-space-1);
	padding: 2px var(--ts-space-2);
	border-radius: var(--ts-radius-sm);
	font-size: var(--ts-text-2xs);
	font-weight: var(--ts-weight-semibold);
	letter-spacing: var(--ts-tracking-wide);
	text-transform: uppercase;
	white-space: nowrap;
}

.ts-badge--discount {
	background: var(--ts-color-discount);
	color: #fff;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--ts-text-xs);
}

/*
 * «Хіт продажів» — синій, як основний акцент: це позитивна позначка,
 * а не знижка, тож червоний тут читався б як терміновість.
 */
.ts-badge--hit {
	background: var(--ts-color-primary);
	color: #fff;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--ts-text-xs);
}

/* Безкоштовна доставка — зелений: це вигода, а не попередження. */
.ts-badge--shipping {
	background: #e7f6ec;
	color: #08703a;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--ts-text-xs);
}

.ts-badge--new {
	background: var(--ts-color-primary-soft);
	color: var(--ts-color-primary);
}

.ts-badge--neutral {
	background: var(--ts-color-surface-sunken);
	color: var(--ts-color-muted);
}

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

.ts-price {
	display: flex;
	align-items: baseline;
	gap: var(--ts-space-2);
	flex-wrap: wrap;
}

.ts-price__current {
	font-size: var(--ts-text-xl);
	font-weight: var(--ts-weight-bold);
	line-height: 1.1;
	color: var(--ts-color-price);
	letter-spacing: var(--ts-tracking-tight);
	white-space: nowrap;
}

.ts-price__old {
	font-size: var(--ts-text-sm);
	color: var(--ts-color-price-old);
	text-decoration: line-through;
	white-space: nowrap;
}

.ts-price--lg .ts-price__current {
	font-size: var(--ts-text-3xl);
}

.ts-price--lg .ts-price__old {
	font-size: var(--ts-text-md);
}

/* --- Картка товару (ТЗ §27) ---------------------------------------------
   Сітка з 3 рядків: медіа / тіло (розтягується) / підвал.
   Завдяки цьому ціна й кнопка стоять на одній лінії в усіх картках ряду,
   навіть коли назви різної довжини.
   ------------------------------------------------------------------------ */

.ts-card {
	position: relative;
	display: grid;
	/*
	 * Колонку задаємо явно. Без неї вона авторозмірна й тягнеться за
	 * вмістом: фото 1746x1746 від постачальника розпирало картку до
	 * 1747px, і сусідні наїжджали одна на одну. Демо-товари цього не
	 * показували — їхні SVG-заглушки дрібні.
	 */
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
	padding: var(--ts-space-3);
	transition: border-color var(--ts-duration-base) var(--ts-ease),
		box-shadow var(--ts-duration-base) var(--ts-ease);
}

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

.ts-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--ts-space-3);
	overflow: hidden;
	border-radius: var(--ts-radius-md);
	background: var(--ts-color-surface);
	/*
	 * Картка — grid, а його елементи за замовчуванням не вужчі за
	 * власний вміст (min-width: auto). Фото 400x400 від постачальника
	 * розпирало блок до 376px усередині картки на 285px, і сусідні
	 * картки наїжджали одна на одну. Демо-товари цього не показували,
	 * бо їхні SVG-заглушки дрібніші за колонку.
	 */
	min-width: 0;
	max-width: 100%;
}

.ts-card__media img {
	width: 100%;
	height: 100%;
	/* Атрибути width/height у теґу не мають задавати розмір. */
	max-width: 100%;
	/* Трохи збільшуємо: фото товарів зазвичай мають власні білі поля,
	   без цього картинка виглядає загубленою в центрі картки. */
	object-fit: contain;
	transform: scale(1.12);
	mix-blend-mode: multiply; /* прибирає білу рамку навколо фото товару */
	transition: transform var(--ts-duration-slow) var(--ts-ease-out);
}

.ts-card:hover .ts-card__media img {
	transform: scale(1.18);
}

/* Бейджі поверх фото */
.ts-card__flags {
	position: absolute;
	top: var(--ts-space-2);
	left: var(--ts-space-2);
	z-index: var(--ts-z-base);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ts-space-1);
}

.ts-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--ts-space-2);
}

/*
 * Порожнеча в картках без характеристик.
 *
 * Тіло стоїть у рядку 1fr, щоб ціни й кнопки трималися на одній
 * лінії в усьому ряду. Але в товарів без переліку характеристик тіло
 * на 98px нижче за сусідів, і цей запас ставав дірою — між останнім
 * рядком тіла й роздільником підвалу.
 *
 * Тіло лишаємо своєї висоти (align-self: start), а роздільник
 * малюємо не на підвалі, а під самим тілом — тоді лінія йде одразу
 * за вмістом, а вільне місце ховається під нею.
 */
.ts-card__body {
	align-self: start;
}

.ts-card__brand {
	font-size: var(--ts-text-2xs);
	font-weight: var(--ts-weight-semibold);
	letter-spacing: var(--ts-tracking-wide);
	text-transform: uppercase;
	color: var(--ts-color-muted);
}

/*
 * Без min-height: заголовок займає стільки рядків, скільки треба.
 *
 * Резерв на два рядки ставили, щоб ціни й кнопки стояли на одній
 * лінії в усьому ряду. Але це й так робить сітка самої картки
 * (grid-template-rows: auto 1fr auto) — тіло розтягується, підвал
 * притискається донизу. А в коротких назв резерв лишав під рядком
 * порожнє місце, яке виглядало як зайвий пустий рядок.
 */
.ts-card__title {
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-medium);
	line-height: var(--ts-leading-snug);
	color: var(--ts-color-text);
	--ts-clamp-lines: 2;
}

/*
 * Обрізаємо саме посилання, а не заголовок.
 *
 * Коли -webkit-box стояв на h3, а посилання лишалось рядковим, воно
 * не підкорялось обрізці: текст ішов третім рядком і вилазив за
 * межі заголовка. Спроба зробити посилання блоковим ламала обрізку
 * зовсім — браузер перемикав h3 на flow-root, і тримала висоту сама
 * лише min-height.
 *
 * Тепер -webkit-box на самому посиланні: воно обрізається на двох
 * рядках і займає рівно свою висоту, тож клікабельний увесь текст.
 */
.ts-card__title {
	display: block;
}

.ts-card__title a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ts-clamp-lines, 2);
	line-clamp: var(--ts-clamp-lines, 2);
	overflow: hidden;
	color: inherit;
}

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

/*
 * Розтягуємо клікабельну зону на всю картку, не вкладаючи <a> в <a>.
 *
 * Обгортку-посилання лишаємо рядковою (span-подібною) і обрізаємо
 * текст усередині неї. Псевдоелемент, який ловить кліки по всій
 * картці, теж на посиланні — інакше на h3 він перекривав би <a> і
 * перехід не спрацьовував.
 *
 * ::before, а не ::after: усередині -webkit-box псевдоелемент стає
 * рядком флексбокса, і ::after займав місце третього рядка, через
 * що обрізка на двох рядках переставала діяти. ::before такого не
 * робить, бо йде до тексту й має нульові розміри.
 */
.ts-card__title a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--ts-z-base);
}

/* Ключові характеристики — 3–5 рядків (ТЗ §27) */
.ts-card__specs {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: var(--ts-text-xs);
	color: var(--ts-color-muted);
	line-height: 1.4;
}

/*
 * Характеристика в один рядок: значення (16 GB, 512 GB) не має
 * розриватися, бо саме воно головне. Якщо не вистачає місця —
 * обрізаємо підпис, а не значення.
 */
.ts-card__spec {
	display: flex;
	gap: var(--ts-space-1);
	white-space: nowrap;
	/* Рядок не має бути ширшим за картку. */
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

/*
 * Підпис стискається першим (shrink 999 проти 1 у значення).
 * Коли обидва мали однакову вагу, на телефоні різалися разом, і
 * виходило «Серія (модельний … Acer As…» — нечитабельні обидві
 * половини. Цінне тут значення, а не слово перед двокрапкою.
 */
.ts-card__spec-label {
	flex: 0 999 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--ts-color-faint);
}

/*
 * Значення теж обрізаємо. Раніше воно було flex: none — розраховували
 * на короткі «16 GB», але від постачальника приходять перерахування
 * на кшталт «Кнопки: Wi-Fi вкл/викл., WPS, RESET, POWER…» завдовжки
 * в тисячі пікселів. Такий рядок розпирав сторінку й давав
 * горизонтальний скрол на всьому каталозі.
 */
.ts-card__spec-value {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

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

.ts-card__footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ts-space-3);
	margin-top: var(--ts-space-3);
	padding-top: var(--ts-space-3);
	border-top: 1px solid var(--ts-color-border);
}

/* Кнопка в картці має бути над псевдоелементом посилання */
.ts-card__action {
	position: relative;
	z-index: calc(var(--ts-z-base) + 1);
	flex: none;
}

/*
 * Кнопка в картці — полий контур, що заливається при наведенні.
 * У сітці по шість карток суцільна синя плашка в кожній перетягує
 * увагу на себе, і погляд чіпляється за кнопки, а не за товари.
 *
 * Перебиваємо .ts-btn--primary з розмітки: там клас проставляє
 * WooCommerce, і прибрати його з шаблону не можна без втрати
 * ajax_add_to_cart.
 */
.ts-card__action.ts-btn--primary {
	background: transparent;
	color: var(--ts-color-primary);
	border: 1px solid var(--ts-color-primary);
}

.ts-card__action.ts-btn--primary:hover,
.ts-card__action.ts-btn--primary:focus-visible {
	background: var(--ts-color-primary);
	color: var(--ts-color-primary-contrast);
	border-color: var(--ts-color-primary);
}

.ts-card__action.ts-btn--primary:active {
	background: var(--ts-color-primary-active);
	border-color: var(--ts-color-primary-active);
	color: var(--ts-color-primary-contrast);
}

/*
 * Товар уже в кошику — WooCommerce додає .added і показує поруч
 * «Переглянути кошик». Лишаємо кнопку залитою: дія вже сталася.
 */
.ts-card__action.ts-btn--primary.added {
	background: var(--ts-color-primary);
	color: var(--ts-color-primary-contrast);
}

/* --- Поля вводу --------------------------------------------------------- */

.ts-input {
	width: 100%;
	min-height: 44px;
	padding: var(--ts-space-3);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border-strong);
	border-radius: var(--ts-radius-md);
	font-size: var(--ts-text-base);
	color: var(--ts-color-text);
	transition: border-color var(--ts-duration-fast) var(--ts-ease),
		box-shadow var(--ts-duration-fast) var(--ts-ease);
}

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

.ts-input:focus {
	outline: none;
	border-color: var(--ts-color-primary);
	box-shadow: var(--ts-shadow-focus);
}

.ts-input[aria-invalid="true"] {
	border-color: var(--ts-color-danger);
}

.ts-field {
	display: flex;
	flex-direction: column;
	gap: var(--ts-space-2);
}

.ts-field__label {
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-text);
}

.ts-field__error {
	font-size: var(--ts-text-xs);
	color: var(--ts-color-danger);
}

/* --- Чіпи вибраних фільтрів (ТЗ §10) ------------------------------------ */

.ts-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-space-2);
	padding: var(--ts-space-1) var(--ts-space-3);
	background: var(--ts-color-primary-soft);
	border: 1px solid transparent;
	border-radius: var(--ts-radius-full);
	font-size: var(--ts-text-xs);
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-primary);
}

.ts-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: var(--ts-radius-full);
	color: currentColor;
	opacity: 0.7;
}

.ts-chip__remove:hover {
	opacity: 1;
	background: rgba(11, 99, 246, 0.15);
}

/* --- Лічильник (міні-кошик) --------------------------------------------- */

.ts-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding-inline: 5px;
	background: var(--ts-color-primary);
	color: #fff;
	border-radius: var(--ts-radius-full);
	font-size: var(--ts-text-2xs);
	font-weight: var(--ts-weight-bold);
	line-height: 1;
}

/* --- Порожні / завантажувальні стани (ТЗ §49) --------------------------- */

.ts-empty {
	padding: var(--ts-space-12) var(--ts-space-4);
	text-align: center;
	color: var(--ts-color-muted);
}

.ts-empty__title {
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
	margin-bottom: var(--ts-space-2);
}

.ts-skeleton {
	background: linear-gradient(
		90deg,
		var(--ts-color-surface-sunken) 25%,
		#eaeef4 37%,
		var(--ts-color-surface-sunken) 63%
	);
	background-size: 400% 100%;
	border-radius: var(--ts-radius-sm);
	animation: ts-shimmer 1.4s ease infinite;
}

@keyframes ts-shimmer {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ts-skeleton {
		animation: none;
	}
}

/* ==========================================================================
   Картка товару на телефоні (до 559px)

   Обидва режими — в одну колонку, як у x-kom. Різниця в орієнтації:
   - сітка  → вертикальна картка: велике фото зверху, дані під ним;
   - список → горизонтальна: фото ліворуч, дані праворуч.
   Перемикач лишається доступним, бо обидва режими тут доречні.
   ========================================================================== */

@media (max-width: 559px) {

	/* --- Спільне для обох режимів --------------------------------------- */

	/*
	 * Кнопка отримує текст і повну ширину замість іконки 44×44:
	 * іконка без підпису — і погана ціль для пальця, і незрозуміла дія.
	 */
	.ts-card__action {
		flex: 1 1 auto;
		min-width: 0;
		min-height: 44px;
	}

	.ts-card__action .ts-visually-hidden {
		position: static !important;
		width: auto;
		height: auto;
		margin: 0;
		clip: auto;
		clip-path: none;
		white-space: nowrap;
	}

	/*
	 * Стара ціна — НАД поточною, а не поруч.
	 * У рядок вона з'їдала ширину, яку краще віддати кнопці:
	 * "58 537 ₴  66 519 ₴  [В кошик]" не вміщувалось нормально.
	 */
	.ts-card__footer .ts-price {
		flex: none;
		flex-direction: column-reverse; /* old іде першим у розмітці знизу */
		align-items: flex-start;
		gap: 0;
	}

	.ts-card__footer .ts-price__old {
		font-size: var(--ts-text-xs);
		line-height: 1.2;
	}

	/* Статус наявності не має розриватися на два рядки */
	.ts-card .ts-stock {
		font-size: var(--ts-text-xs);
		align-items: flex-start;
	}

	.ts-card .ts-stock::before {
		/* Крапка вирівнюється по першому рядку тексту, а не по центру блоку */
		margin-top: 5px;
	}

	/* Код товару в списку зайвий — він є на сторінці товару */
	.ts-card__sku {
		display: none;
	}

	/* --- Режим сітки: вертикальна картка з великим фото ------------------ */

	.ts-grid--catalog .ts-card__media {
		/* Фото на всю ширину картки — головна перевага цього режиму */
		aspect-ratio: 4 / 3;
	}

	.ts-grid--catalog .ts-card__title {
		font-size: var(--ts-text-md);
		--ts-clamp-lines: 2;
		min-height: calc(var(--ts-text-md) * var(--ts-leading-snug) * 2);
	}

	/* --- Режим списку: горизонтальна картка ------------------------------ */

	/*
	 * Колонка фото — 33% ширини картки, як у x-kom.
	 *
	 * Саме частка, а не фіксовані пікселі: 116px давали 39% на 320px
	 * і лише 27% на 480px — розкладка "пливла" між пристроями.
	 *
	 * Відсоток у grid рахується від content-box, тобто без padding і
	 * gap. Щоб на екрані вийшла справжня третина картки, додаємо
	 * їхню частку назад: 33% від (padding*2 + gap) = 33% * 36px.
	 */
	.ts-list--catalog .ts-card {
		grid-template-columns: calc(33% + 12px) minmax(0, 1fr);
		grid-template-rows: auto auto;
		gap: var(--ts-space-3);
		align-items: start;
		padding: var(--ts-space-3);
	}

	.ts-list--catalog .ts-card__media {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 0;
		aspect-ratio: 1 / 1;
	}

	.ts-list--catalog .ts-card__body {
		grid-column: 2;
		grid-row: 1;
	}

	/* Підвал на всю ширину під обома колонками */
	.ts-list--catalog .ts-card__footer {
		grid-column: 1 / -1;
		grid-row: 2;
		align-items: center;
		gap: var(--ts-space-3);
	}

	/* Праворуч місця менше — назва може зайняти три рядки */
	.ts-list--catalog .ts-card__title {
		--ts-clamp-lines: 3;
		min-height: 0;
	}
}

/* Зовсім вузькі екрани (320–359px): ціна над кнопкою */
@media (max-width: 359px) {
	.ts-card__footer {
		flex-direction: column;
		align-items: stretch;
	}

	.ts-card__action {
		width: 100%;
	}
}

/* --- Шухляда кошика -------------------------------------------------------- */

.ts-cart-drawer {
	width: min(92vw, 420px);
}

.ts-cart-drawer__title {
	display: flex;
	align-items: center;
	gap: var(--ts-space-2);
}

/* Зелений — лише коли це підтвердження додавання. */
.ts-cart-drawer__title:has(.ts-cart-drawer__check:not([hidden])) {
	color: var(--ts-color-success);
}

.ts-cart-drawer__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	padding: 0;
}

.ts-cart-drawer__items {
	flex: 1 1 auto;
	margin: 0;
	padding: 0 var(--ts-space-4);
	overflow-y: auto;
	/* Інерційний скрол на iOS, інакше список «залипає». */
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	list-style: none;
}

.ts-cart-drawer__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ts-space-3);
	padding: var(--ts-space-4) 0;
}

.ts-cart-drawer__item + .ts-cart-drawer__item {
	border-top: 1px solid var(--ts-color-border);
}

.ts-cart-drawer__thumb {
	flex: 0 0 auto;
	width: 64px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--ts-radius-md);
}

.ts-cart-drawer__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.ts-cart-drawer__info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--ts-space-1);
	min-width: 0;
}

.ts-cart-drawer__name {
	font-size: var(--ts-text-sm);
	line-height: var(--ts-leading-snug);
	color: var(--ts-color-text-strong);
}

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

.ts-cart-drawer__meta {
	font-size: var(--ts-text-xs);
	color: var(--ts-color-muted);
}

.ts-cart-drawer__side {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--ts-space-2);
}

.ts-cart-drawer__price {
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-semibold);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--ts-color-text-strong);
}

.ts-cart-drawer__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--ts-radius-sm);
	color: var(--ts-color-faint);
}

.ts-cart-drawer__remove:hover {
	background: var(--ts-color-danger-soft);
	color: var(--ts-color-danger);
	text-decoration: none;
}

/* Підвал липне до низу шухляди — CTA завжди на очах. */
.ts-cart-drawer__foot {
	flex: 0 0 auto;
	padding: var(--ts-space-4);
	background: var(--ts-color-surface);
	border-top: 1px solid var(--ts-color-border);
	/* Щоб кнопка не лізла під домашню смугу iPhone. */
	padding-bottom: calc(var(--ts-space-4) + env(safe-area-inset-bottom));
}

.ts-cart-drawer__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ts-space-3);
	margin-bottom: var(--ts-space-4);
	color: var(--ts-color-muted);
}

.ts-cart-drawer__total strong {
	font-size: var(--ts-text-lg);
	color: var(--ts-color-text-strong);
}

.ts-cart-drawer__continue {
	display: block;
	width: 100%;
	margin-top: var(--ts-space-3);
	/* 44px — мінімальна зручна ціль для пальця. */
	min-height: 44px;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
	background: none;
	border: 0;
	cursor: pointer;
}

.ts-cart-drawer__continue:hover {
	color: var(--ts-color-primary);
}

.ts-cart-drawer__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ts-space-4);
	padding: var(--ts-space-8) var(--ts-space-4);
	text-align: center;
	color: var(--ts-color-muted);
}

/* Поки товар летить у кошик — приглушуємо кнопку. */
.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

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

.ts-cart-drawer__check {
	display: inline-flex;
}

/* --- Обране й рейтинг у картці ------------------------------------------ */

/*
 * Серце в куті фото, як у макеті. Напівпрозоре біле коло: на світлих
 * знімках сама іконка без підкладки зникає.
 */
.ts-card__wish {
	position: absolute;
	top: var(--ts-space-2);
	right: var(--ts-space-2);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-full);
	background: rgba(255, 255, 255, 0.92);
	color: var(--ts-color-muted);
	cursor: pointer;
	transition: color var(--ts-duration-fast) var(--ts-ease),
		border-color var(--ts-duration-fast) var(--ts-ease);
}

.ts-card__wish:hover {
	color: var(--ts-color-danger, #e11d48);
	border-color: var(--ts-color-danger, #e11d48);
}

/* Заповнене серце — товар уже в списку. */
.ts-card__wish.is-on {
	color: var(--ts-color-danger, #e11d48);
	border-color: var(--ts-color-danger, #e11d48);
}

.ts-card__wish.is-on .ts-icon {
	fill: currentColor;
}

.ts-card__rating {
	display: flex;
	align-items: center;
	gap: var(--ts-space-1);
	font-size: var(--ts-text-sm);
}

.ts-card__rating-star {
	display: inline-flex;
	color: #f5a524;
}

.ts-card__rating-star .ts-icon {
	fill: currentColor;
	stroke: none;
}

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

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

/* --- Картка в каталозі з фільтрами --------------------------------------- */

/*
 * Зміни нижче стосуються лише сторінок каталогу (.ts-grid--catalog).
 * На головній картка лишається як була: там вітрина, де ряд синіх
 * плашок перетягував би увагу з товарів на кнопки.
 *
 * У каталозі інакше — людина вже обрала розділ, відфільтрувала й
 * порівнює конкретні позиції. Тут головна дія має бути названа
 * словом і помітна.
 */

/* Напис на кнопці ховаємо скрізь, крім каталогу. */
.ts-card__action-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Список каталогу — та сама сторінка, інший вигляд картки, тож
 * підпис на кнопці потрібен і там. Місця в ньому навіть більше:
 * підвал іде на всю ширину під фото й текстом.
 */
.ts-grid--catalog .ts-card__action-label,
.ts-list--catalog .ts-card__action-label {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	font-size: var(--ts-text-sm);
}

/*
 * Підвал у два рядки: ціна зверху на всю ширину, кнопка під нею.
 *
 * Ціна й кнопка в один рядок тиснули одна одну — у сітці по чотири
 * картки на «5 293₴» і кнопку з написом разом лишається менше 200px,
 * і кнопка з'їжджала в два рядки або обрізалась.
 */
.ts-grid--catalog .ts-card__footer {
	flex-direction: column;
	align-items: stretch;
	gap: var(--ts-space-2);
}

.ts-grid--catalog .ts-card__footer .ts-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--ts-space-2);
}

.ts-grid--catalog .ts-card__action {
	justify-content: center;
	width: 100%;
	min-height: 40px;
}

.ts-grid--catalog .ts-card__action.ts-btn--primary,
.ts-list--catalog .ts-card__action.ts-btn--primary {
	background: var(--ts-color-primary);
	color: var(--ts-color-primary-contrast);
	border-color: var(--ts-color-primary);
}

.ts-grid--catalog .ts-card__action.ts-btn--primary:hover,
.ts-grid--catalog .ts-card__action.ts-btn--primary:focus-visible {
	background: var(--ts-color-primary-hover);
	border-color: var(--ts-color-primary-hover);
}

/* --- Характеристики з іконками ------------------------------------------ */

/*
 * Бренд і код товару в один рядок: обидва службові, і окремий рядок
 * під код відтісняв характеристики вниз картки.
 */
.ts-card__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ts-space-2);
}

.ts-card__meta .ts-card__sku {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/*
 * Іконка замість підпису. Підпис («Об'єм:», «Інтерфейс:») з'їдав
 * піврядка на слово, зрозуміле зі значення, і довгі назви на кшталт
 * «Швидкість обертання шпинделя» витісняли саме значення.
 */
.ts-card__spec-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--ts-color-faint);
}

.ts-card__spec {
	align-items: center;
	gap: var(--ts-space-2);
}

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

/*
 * Характеристики трохи більші: 12px поруч із назвою товару читались
 * як дрібний підпис, хоча саме за ними порівнюють товари в каталозі.
 */
.ts-card__specs {
	font-size: var(--ts-text-sm);
	line-height: 1.5;
	gap: var(--ts-space-1);
}

/* --- Рейтинг одразу під назвою ------------------------------------------- */

/*
 * Оцінка працює як аргумент «беруть інші», тож стоїть поруч із
 * назвою, а не в кінці картки під наявністю.
 *
 * Переставляємо через order, бо в розмітці рейтинг іде останнім:
 * WooCommerce збирає тіло картки в тому порядку, у якому дані
 * приходять, і зачіпати це в шаблоні заради вигляду не варто.
 */
.ts-card__body {
	/* Явні номери, бо order рахується від усіх дітей одразу. */
	--ts-order-meta: 1;
	--ts-order-title: 2;
	--ts-order-rating: 3;
	--ts-order-specs: 4;
	--ts-order-stock: 5;
}

.ts-card__meta {
	order: var(--ts-order-meta);
}

.ts-card__title {
	order: var(--ts-order-title);
}

.ts-card__rating {
	order: var(--ts-order-rating);
}

.ts-card__specs {
	order: var(--ts-order-specs);
}

.ts-card__body .ts-stock {
	order: var(--ts-order-stock);
}

/*
 * «Детальніше»: стрілка праворуч від підпису.
 *
 * Стрілка означає перехід далі, тож стоїть після тексту — як у
 * посиланнях «Переглянути всі товари» на головній. У «Купити»
 * іконка кошика лишається ліворуч: там вона позначає дію, а не
 * напрямок.
 *
 * Перевертаємо порядком, а не в розмітці: та сама кнопка на головній
 * показує лише іконку, і там порядок ні на що не впливає.
 */
.ts-grid--catalog .ts-card__action.ts-btn--secondary .ts-icon,
.ts-list--catalog .ts-card__action.ts-btn--secondary .ts-icon {
	order: 2;
}