/* ==========================================================================
   TopShop — Base
   Reset, типографіка, контейнери, сітка. Без компонентів.
   ========================================================================== */

/* --- Reset ------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--ts-color-bg);
	color: var(--ts-color-text);
	font-family: var(--ts-font-sans);
	font-size: var(--ts-text-base);
	line-height: var(--ts-leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Моноширинні цифри всюди: ціни й характеристики вирівнюються в колонки */
	font-variant-numeric: tabular-nums;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

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

a:hover {
	text-decoration: underline;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* --- Типографіка -------------------------------------------------------- */

h1,
.ts-h1 {
	font-size: var(--ts-text-3xl);
	font-weight: var(--ts-weight-bold);
	line-height: var(--ts-leading-tight);
	letter-spacing: var(--ts-tracking-tight);
	color: var(--ts-color-text-strong);
}

h2,
.ts-h2 {
	font-size: var(--ts-text-2xl);
	font-weight: var(--ts-weight-bold);
	line-height: var(--ts-leading-tight);
	letter-spacing: var(--ts-tracking-tight);
	color: var(--ts-color-text-strong);
}

h3,
.ts-h3 {
	font-size: var(--ts-text-xl);
	font-weight: var(--ts-weight-semibold);
	line-height: var(--ts-leading-snug);
	color: var(--ts-color-text-strong);
}

h4,
.ts-h4 {
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-semibold);
	line-height: var(--ts-leading-snug);
	color: var(--ts-color-text-strong);
}

@media (max-width: 767px) {
	h1,
	.ts-h1 {
		font-size: var(--ts-text-2xl);
	}

	h2,
	.ts-h2 {
		font-size: var(--ts-text-xl);
	}
}

/* Дрібна кепс-мітка: "Бренд", "Характеристики" тощо */
.ts-label {
	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);
}

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

.ts-mono {
	font-family: var(--ts-font-mono);
	font-size: 0.95em;
}

/* --- Доступність -------------------------------------------------------- */

/* Видимий фокус лише для клавіатури */
:focus-visible {
	outline: 2px solid var(--ts-color-primary);
	outline-offset: 2px;
	border-radius: var(--ts-radius-sm);
}

:focus:not(:focus-visible) {
	outline: none;
}

/*
 * Текстові поля й списки мають власний фокус — синя рамка плюс
 * --ts-shadow-focus (.ts-input, .ts-select, поля checkout і кабінету).
 * Глобальний outline малювався б поверх нього другим кільцем.
 *
 * Radio і checkbox лишаються нативними (accent-color), тому їм outline
 * потрібен: іншої видимої ознаки фокусу в них немає.
 */
input:not([type="radio"]):not([type="checkbox"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: none;
}

/* Приховано візуально, але доступно скрінрідеру */
.ts-visually-hidden,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Посилання "перейти до вмісту" */
.ts-skip-link {
	position: absolute;
	top: -100px;
	left: var(--ts-space-4);
	z-index: var(--ts-z-toast);
	padding: var(--ts-space-3) var(--ts-space-4);
	background: var(--ts-color-primary);
	color: var(--ts-color-primary-contrast);
	border-radius: var(--ts-radius-md);
	font-weight: var(--ts-weight-semibold);
	transition: top var(--ts-duration-base) var(--ts-ease);
}

.ts-skip-link:focus {
	top: var(--ts-space-4);
	text-decoration: none;
}

/* --- Контейнер ---------------------------------------------------------- */

.ts-container {
	width: 100%;
	max-width: var(--ts-container-max);
	margin-inline: auto;
	padding-inline: var(--ts-container-pad);
}

@media (min-width: 768px) {
	:root {
		--ts-container-pad: var(--ts-space-6);
	}
}

@media (min-width: 1280px) {
	:root {
		--ts-container-pad: var(--ts-space-8);
	}
}

/* --- Сітка каталогу -----------------------------------------------------
   Кількість колонок керується через --ts-grid-cols, щоб той самий клас
   працював і в каталозі, і в блоках головної.
   ------------------------------------------------------------------------ */

.ts-grid {
	display: grid;
	gap: var(--ts-gutter);
	grid-template-columns: repeat(var(--ts-grid-cols, 2), minmax(0, 1fr));
}

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

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

@media (min-width: 1440px) {
	.ts-grid {
		--ts-grid-cols: 5;
	}
}

/*
 * Сітка каталогу.
 *
 * Телефон — ОДНА колонка. При 375px дві колонки давали картку 156px:
 * фото нечитабельне, а ціна й кнопка не вміщувались в один рядок.
 * Одна колонка з горизонтальною карткою (фото ліворуч, дані праворуч)
 * показує більше корисного і дає кнопці повну ширину.
 *
 * Поруч із сайдбаром фільтрів — 3 колонки, як у x-kom: картка виходить
 * достатньо широкою, щоб вмістити 4-5 характеристик без переносів.
 * Без сайдбара (пошук, сторінки без фільтрів) використовуємо всю ширину.
 */
.ts-grid--catalog {
	--ts-grid-cols: 1;
}

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

@media (min-width: 1024px) {
	.ts-layout--with-sidebar .ts-grid--catalog {
		--ts-grid-cols: 3;
	}
}

@media (min-width: 640px) {
	.ts-layout:not(.ts-layout--with-sidebar) .ts-grid--catalog {
		--ts-grid-cols: 3;
	}
}

@media (min-width: 1280px) {
	.ts-layout:not(.ts-layout--with-sidebar) .ts-grid--catalog {
		--ts-grid-cols: 4;
	}
}

/* --- Макет сторінки каталогу: сайдбар + контент ------------------------- */

.ts-layout {
	display: grid;
	gap: var(--ts-space-6);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 1024px) {
	.ts-layout--with-sidebar {
		grid-template-columns: var(--ts-sidebar-width) minmax(0, 1fr);
		gap: var(--ts-space-8);
	}
}

/* --- Секції ------------------------------------------------------------- */

.ts-section {
	margin-block: var(--ts-space-10);
}

.ts-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ts-space-4);
	margin-bottom: var(--ts-space-5);
}

/* --- Утиліти ------------------------------------------------------------ */

.ts-stack > * + * {
	margin-top: var(--ts-stack-gap, var(--ts-space-3));
}

.ts-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ts-cluster-gap, var(--ts-space-2));
}

/* Обрізання назви товару до N рядків, щоб картки лишались однакової висоти */
.ts-clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ts-clamp-lines, 2);
	line-clamp: var(--ts-clamp-lines, 2);
	overflow: hidden;
}

/* --- iOS: не даємо Safari зумити сторінку при фокусі в полі --------------
   Safari автоматично збільшує масштаб, якщо font-size інпута < 16px,
   і після цього сторінка лишається зумленою. Тому на телефоні всі поля
   вводу мають щонайменше 16px.
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	input[type="text"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="email"],
	input[type="password"],
	select,
	textarea {
		font-size: 16px;
	}
}

/* --- Смуги прокрутки ------------------------------------------------------

   Системна смуга Windows — 17px суцільного сірого. У сайдбарі фільтрів
   і в мега-меню вона з'їдала місце й вибивалась із верстки, тож робимо
   власну: тонку, у колір рамок, без стрілок і підкладки.

   Два синтаксиси, бо їх підтримують різні рушії: scrollbar-* розуміють
   Firefox і свіжі Chrome, ::-webkit-scrollbar — Safari й Chrome. Обидва
   безпечні: браузер просто ігнорує те, чого не знає.
   ------------------------------------------------------------------------ */

* {
	scrollbar-width: thin;
	scrollbar-color: var(--ts-scrollbar-thumb) transparent;
}

::-webkit-scrollbar {
	width: var(--ts-scrollbar-size);
	height: var(--ts-scrollbar-size);
}

/* Доріжка прозора: смуга читається як тонка риска, а не як жолоб. */
::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--ts-scrollbar-thumb);
	border-radius: 999px;
	/*
	 * Прозора рамка «підрізає» повзунок усередині доріжки — без неї
	 * він притискається до самого краю й виглядає товстішим.
	 */
	border: 2px solid transparent;
	background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--ts-scrollbar-thumb-hover);
	background-clip: content-box;
}

/* Кут між горизонтальною і вертикальною смугами — без сірого квадрата. */
::-webkit-scrollbar-corner {
	background: transparent;
}