/* ==========================================================================
   TopShop — Catalog
   Шапка каталогу, підкатегорії, панель сортування, сайдбар фільтрів.
   ========================================================================== */

/* --- Шапка каталогу ------------------------------------------------------ */

.ts-catalog__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--ts-space-3);
	margin-bottom: var(--ts-space-4);
}

/*
 * Відступ згори лежав лише на крихтах, тому сторінки без них
 * (теги, архіви без ланцюжка) починались заголовком впритул до меню.
 * Ставимо відступ самому заголовку, а коли крихти є — прибираємо,
 * щоб не подвоювався.
 */
.ts-catalog__head:first-child {
	margin-top: var(--ts-space-4);
}

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

.ts-catalog__intro {
	max-width: 76ch;
	margin-bottom: var(--ts-space-6);
	font-size: var(--ts-text-sm);
	line-height: var(--ts-leading-relaxed);
	color: var(--ts-color-muted);
}

/* --- Картки підкатегорій ------------------------------------------------- */

.ts-subcats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--ts-space-3);
	margin-bottom: var(--ts-space-8);
}

.ts-subcat {
	display: flex;
	align-items: center;
	gap: var(--ts-space-3);
	padding: var(--ts-space-3);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-md);
	color: var(--ts-color-text);
	transition: border-color var(--ts-duration-fast) var(--ts-ease),
		background-color var(--ts-duration-fast) var(--ts-ease);
}

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

/* Та сама подача, що на головній: іконка без сірої підкладки */
.ts-subcat__media {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
}

.ts-subcat__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: scale(1.35);
	mix-blend-mode: multiply;
}

.ts-subcat__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ts-subcat__name {
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-medium);
	line-height: var(--ts-leading-snug);
}

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

/* --- Панель сортування --------------------------------------------------- */

.ts-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Три елементи (фільтри + вигляд + сортування) не вміщуються
	   в 320px одним рядком, тому дозволяємо перенос. */
	flex-wrap: wrap;
	gap: var(--ts-space-2) var(--ts-space-3);
	margin-bottom: var(--ts-space-5);
	padding-bottom: var(--ts-space-4);
	border-bottom: 1px solid var(--ts-color-border);
}

/*
 * На вузьких екранах усі три елементи мають лишитись в одному рядку:
 * перенос з'їдає висоту, а її на телефоні й так мало.
 *
 * Сортування стискається (його значення й так обрізається багатокрапкою),
 * а кнопка фільтрів лишається лише іконкою — підпис там не обов'язковий,
 * бо іконка однозначна, а доступну назву дає aria-label.
 */
@media (max-width: 479px) {
	.ts-toolbar__sort {
		flex: 1 1 auto;
		min-width: 0;
	}

	.ts-toolbar__sort .ts-dropdown,
	.ts-toolbar__sort .ts-dropdown__trigger {
		min-width: 0;
		max-width: 100%;
	}

	.ts-toolbar__filters {
		flex: none;
		/* 44px — мінімальна зручна ціль для пальця */
		min-height: 44px;
		min-width: 44px;
		padding-inline: var(--ts-space-3);
	}

	.ts-toolbar__filters span {
		display: none;
	}
}

/* Кнопка фільтрів потрібна лише там, де немає сайдбара */
@media (min-width: 1024px) {
	.ts-toolbar__filters {
		display: none;
	}
}

.ts-toolbar__sort {
	margin-left: auto;
}

.ts-select {
	min-height: 40px;
	padding: var(--ts-space-2) var(--ts-space-8) var(--ts-space-2) var(--ts-space-3);
	background-color: var(--ts-color-surface);
	/* Власна стрілка: нативна по-різному виглядає в різних ОС */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b7f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--ts-space-3) center;
	border: 1px solid var(--ts-color-border-strong);
	border-radius: var(--ts-radius-md);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-text);
	cursor: pointer;
	appearance: none;
}

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

/* --- Сайдбар фільтрів ---------------------------------------------------- */

.ts-catalog__sidebar {
	display: none;
}

@media (min-width: 1024px) {
	.ts-catalog__sidebar {
		display: block;
		position: sticky;
		top: calc(var(--ts-header-height) + var(--ts-space-4));
		max-height: calc(100vh - var(--ts-header-height) - var(--ts-space-8));
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

.ts-catalog__main {
	min-width: 0; /* дозволяє grid-колонці стискатись */
}

/* --- Довільний текстовий вміст ------------------------------------------- */

.ts-prose {
	font-size: var(--ts-text-md);
	line-height: var(--ts-leading-relaxed);
	color: var(--ts-color-text);
}

.ts-prose > * + * {
	margin-top: var(--ts-space-4);
}

/*
 * Відбивка між розділами тексту. Компоненти теми виключаємо з тієї
 * самої причини, що й списки нижче: заголовок «Разом» у підсумках
 * кошика — теж h2, і 32px згори відривали його від краю картки.
 */
.ts-prose h2:not([class*="ts-"]),
.ts-prose h3:not([class*="ts-"]) {
	margin-top: var(--ts-space-8);
}

/*
 * Маркери повертаємо спискам вмісту, але не компонентам теми:
 * всередині ts-prose трапляється, наприклад, смужка кроків кошика —
 * семантично це ol, і нумерація браузера малювала «1. 2. 3.» поруч
 * із кружечками кроків.
 *
 * Виключаємо за префіксом ts-, а не за «має клас»: редактор вішає
 * на власні списки wp-block-list, і вони теж лишились би без
 * маркерів.
 */
.ts-prose ul:not([class*="ts-"]),
.ts-prose ol:not([class*="ts-"]) {
	padding-left: var(--ts-space-5);
	list-style: revert;
}

.ts-prose li:not([class*="ts-"]) + li:not([class*="ts-"]) {
	margin-top: var(--ts-space-2);
}

/*
 * Таблиці в статтях. Без цього порівняння характеристик виглядало
 * просто як колонки тексту: рядки не відділялись, заголовок не
 * читався як заголовок.
 */
.ts-prose table:not([class*="ts-"]) {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ts-text-sm);
}

.ts-prose table:not([class*="ts-"]) th,
.ts-prose table:not([class*="ts-"]) td {
	padding: var(--ts-space-2) var(--ts-space-3);
	text-align: left;
	border-bottom: 1px solid var(--ts-color-border);
}

.ts-prose table:not([class*="ts-"]) th {
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-text-strong);
	background: var(--ts-color-surface-sunken);
}

.ts-prose table:not([class*="ts-"]) tr:last-child td {
	border-bottom: 0;
}

/* Вузький екран: таблицю гортають, а не ламають по складах. */
@media (max-width: 639px) {
	.ts-prose table:not([class*="ts-"]) {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

/* --- Стан завантаження AJAX-каталогу (ТЗ §10, §49) ---------------------- */

.ts-catalog__main {
	position: relative;
}

/*
 * Під час оновлення приглушуємо список, але не ховаємо його: користувач
 * бачить, що саме змінюється, і сторінка не "стрибає" на порожній екран.
 */
.ts-catalog__main.is-loading [data-ts-products],
.ts-catalog__main.is-loading .ts-pagination,
.ts-catalog__main.is-loading .ts-empty {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity var(--ts-duration-fast) var(--ts-ease);
}

.ts-catalog__main.is-loading::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: var(--ts-z-sticky);
	width: 28px;
	height: 28px;
	margin-top: var(--ts-space-8);
	border: 2.5px solid var(--ts-color-border-strong);
	border-top-color: var(--ts-color-primary);
	border-radius: var(--ts-radius-full);
	animation: ts-spin 0.7s linear infinite;
}

@keyframes ts-spin {
	to {
		transform: translateX(-50%) rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ts-catalog__main.is-loading::after {
		animation: none;
	}
}

/* --- Режим списку --------------------------------------------------------
   Свідомо використовуємо ТУ САМУ картку, лише перебудовуємо її через
   grid-template. Так не доводиться підтримувати два різні шаблони, і
   будь-яка зміна картки одразу працює в обох режимах.
   ------------------------------------------------------------------------ */

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

@media (min-width: 768px) {
	.ts-list .ts-card {
		grid-template-columns: 180px minmax(0, 1fr) 210px;
		grid-template-rows: auto;
		align-items: start;
		gap: var(--ts-space-5);
		padding: var(--ts-space-4);
	}

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

	.ts-list .ts-card__body {
		grid-row: 1;
		gap: var(--ts-space-2);
	}

	/* У списку є місце — показуємо назву повністю */
	.ts-list .ts-card__title {
		font-size: var(--ts-text-md);
		--ts-clamp-lines: 2;
		min-height: 0;
	}

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

	/* Права колонка: ціна і кнопка одне під одним */
	.ts-list .ts-card__footer {
		grid-row: 1;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: var(--ts-space-3);
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
		border-left: 1px solid var(--ts-color-border);
		padding-left: var(--ts-space-5);
		height: 100%;
	}

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

	/* У списку кнопка з текстом, а не лише іконка */
	.ts-list .ts-card__action .ts-visually-hidden {
		position: static !important;
		width: auto;
		height: auto;
		margin: 0;
		clip: auto;
		clip-path: none;
		white-space: normal;
	}
}

/* --- Вітрина розділу (сторінка категорії з підрозділами) ----------------- */

.ts-hub {
	margin-bottom: var(--ts-space-12);
}

/*
 * Картки підрозділів. Мінімум 300px: у картці не лише назва, а й
 * список вкладених категорій, і на вужчій колонці назви на кшталт
 * «Мережеве обладнання» переносяться по слову.
 */
.ts-hub__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--ts-space-4);
	margin-bottom: var(--ts-space-10);
}

.ts-hub__card {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: var(--ts-space-4);
	/*
	 * Картки ряду однакової висоти, а вміст притиснутий догори:
	 * у розділів різна кількість підкатегорій, і без цього ряд
	 * виглядав драбинкою.
	 */
	align-content: start;
	padding: var(--ts-space-4);
	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-hub__card:hover {
	border-color: var(--ts-color-primary);
	box-shadow: var(--ts-shadow-sm);
}

.ts-hub__media {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: start;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--ts-color-surface-sunken);
	border-radius: var(--ts-radius-md);
	color: var(--ts-color-muted);
}

.ts-hub__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Фото категорій приходять на білому тлі — прибираємо рамку. */
	mix-blend-mode: multiply;
}

.ts-hub__title {
	display: flex;
	align-items: center;
	gap: var(--ts-space-1);
	margin-bottom: var(--ts-space-2);
	font-size: var(--ts-text-md);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
	line-height: 1.25;
}

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

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

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

.ts-hub__links a {
	display: block;
	padding: 2px 0;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
	line-height: 1.4;
}

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

.ts-hub__all {
	color: var(--ts-color-primary) !important;
}

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

/* --- Бренди розділу ------------------------------------------------------ */

.ts-hub-brands {
	margin-bottom: var(--ts-space-10);
}

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

.ts-hub-brands__title {
	margin: 0;
	font-size: var(--ts-text-xl);
	font-weight: var(--ts-weight-bold);
	color: var(--ts-color-text-strong);
}

.ts-hub-brands__all {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-space-1);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-primary);
	white-space: nowrap;
}

.ts-hub-brands__all:hover {
	text-decoration: none;
}

/*
 * Логотипи в ряд із прокруткою: брендів буває дванадцять, і на
 * вузькому екрані вони інакше стискаються до нечитабельного розміру.
 */
.ts-hub-brands__row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(124px, 1fr);
	gap: var(--ts-space-3);
	overflow-x: auto;
	padding-bottom: var(--ts-space-2);
	scrollbar-width: thin;
	scroll-snap-type: x proximity;
}

.ts-hub-brands__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	padding: var(--ts-space-3);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-md);
	scroll-snap-align: start;
	transition: border-color 0.15s ease;
}

.ts-hub-brands__item:hover {
	border-color: var(--ts-color-primary);
}

.ts-hub-brands__item img {
	max-width: 100%;
	max-height: 32px;
	object-fit: contain;
}

@media (max-width: 599px) {
	/* На телефоні картка стає вузькою — фото меншає, щоб лишилось місце тексту. */
	.ts-hub__card {
		grid-template-columns: 84px minmax(0, 1fr);
	}
}

/* --- Смужка переваг на вітрині ------------------------------------------ */

.ts-hub-perks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--ts-space-3);
}

.ts-hub-perk {
	display: flex;
	align-items: center;
	gap: var(--ts-space-3);
	padding: var(--ts-space-4);
	background: var(--ts-color-surface-sunken);
	border-radius: var(--ts-radius-lg);
}

.ts-hub-perk__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	background: var(--ts-color-surface);
	border-radius: var(--ts-radius-full);
	color: var(--ts-color-primary);
}

.ts-hub-perk__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

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

.ts-hub-perk__text {
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
	line-height: 1.3;
}

/* Підпис розділу праворуч від заголовка */
.ts-catalog__tagline {
	margin: 0 0 0 auto;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
	text-align: right;
}

@media (max-width: 767px) {
	/* На телефоні підпис під заголовком, а не збоку. */
	.ts-catalog__tagline {
		margin-left: 0;
		text-align: left;
	}
}

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

.ts-hub__banner {
	margin-bottom: var(--ts-space-6);
	border-radius: var(--ts-radius-xl);
	overflow: hidden;
}

.ts-hub__banner-link {
	display: block;
}

.ts-hub__banner-img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Сторінка бренду ----------------------------------------------------- */

.ts-brandhead {
	display: grid;
	gap: var(--ts-space-6);
	margin-bottom: var(--ts-space-6);
}

/* Банер праворуч з'являється лише там, де є місце під обидва блоки. */
@media (min-width: 1024px) {
	.ts-brandhead:has(.ts-brandbanner) {
		/*
		 * Текстова частина ширша за банер: у неї чотири переваги в
		 * рядок, і на вужчій колонці вони переносились у два рядки,
		 * чого в макеті немає.
		 */
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		/*
		 * По верхньому краю, а не по центру: банер вищий за текстову
		 * частину, і центрування лишало лого висіти посеред порожнечі.
		 */
		align-items: start;
	}
}

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

.ts-brandhead__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 112px;
	height: 112px;
	padding: var(--ts-space-4);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-full);
}

.ts-brandhead__logo img {
	max-width: 100%;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.ts-brandhead__title {
	margin: 0 0 var(--ts-space-1);
	font-size: var(--ts-text-3xl);
	font-weight: var(--ts-weight-bold);
	color: var(--ts-color-text-strong);
}

.ts-brandhead__tagline {
	margin: 0 0 var(--ts-space-4);
	font-size: var(--ts-text-md);
	color: var(--ts-color-muted);
}

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

.ts-brandhead__perks li {
	display: flex;
	align-items: center;
	gap: var(--ts-space-2);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
	line-height: 1.25;
}

/*
 * Підпис у два рядки, як у макеті: «Офіційна / гарантія». Так
 * чотири пункти стають удвічі вужчими й вміщуються в один ряд.
 */
.ts-brandhead__perks li span {
	max-width: 9ch;
}

/* Тонка риска між пунктами — замість великих проміжків. */
.ts-brandhead__perks li + li {
	padding-left: var(--ts-space-4);
	border-left: 1px solid var(--ts-color-border);
}

.ts-brandhead__perks .ts-icon {
	flex: 0 0 auto;
	color: var(--ts-color-primary);
}

/* Банер бренду */
.ts-brandbanner {
	border-radius: var(--ts-radius-xl);
	overflow: hidden;
}

.ts-brandbanner img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Розділи бренду ------------------------------------------------------ */

/*
 * Горизонтальний ряд із прокруткою: розділів буває вісім, і на
 * ноутбуці вони інакше стискаються до нечитабельного.
 */
.ts-brandcats {
	display: flex;
	gap: var(--ts-space-3);
	margin-bottom: var(--ts-space-6);
	overflow-x: auto;
	padding-bottom: var(--ts-space-2);
	scrollbar-width: thin;
	scroll-snap-type: x proximity;
}

.ts-brandcat {
	display: flex;
	align-items: center;
	gap: var(--ts-space-3);
	flex: 0 0 auto;
	min-width: 168px;
	padding: var(--ts-space-2) var(--ts-space-4) var(--ts-space-2) var(--ts-space-2);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
	scroll-snap-align: start;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

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

/* Поточний відбір — залита плашка, щоб було видно, де стоїш. */
.ts-brandcat.is-active {
	background: var(--ts-color-primary-soft);
	border-color: var(--ts-color-primary);
}

/* Картинка розділу ліворуч від назви — як у макеті. */
.ts-brandcat__media {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	overflow: hidden;
	background: var(--ts-color-surface-sunken);
	border-radius: var(--ts-radius-md);
	color: var(--ts-color-primary);
}

.ts-brandcat__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Фото товарів приходять на білому тлі — прибираємо рамку. */
	mix-blend-mode: multiply;
}

.ts-brandcat__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

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

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

@media (max-width: 767px) {
	.ts-brandhead__main {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ts-space-4);
	}

	.ts-brandhead__logo {
		width: 88px;
		height: 88px;
	}
}

/* --- Панель над товарами: лічильник і кнопки вигляду -------------------- */

.ts-toolbar__found {
	margin: 0;
	margin-right: auto;
	font-size: var(--ts-text-md);
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-text-strong);
}

/* Дві кнопки в одній рамці — як сегментований перемикач у макеті. */
.ts-toolbar__view {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	background: var(--ts-color-surface-sunken);
	border-radius: var(--ts-radius-md);
}

.ts-viewbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 30px;
	background: transparent;
	border: 0;
	border-radius: calc(var(--ts-radius-md) - 2px);
	color: var(--ts-color-faint);
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}

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

.ts-viewbtn.is-active {
	background: var(--ts-color-surface);
	color: var(--ts-color-primary);
	box-shadow: var(--ts-shadow-sm);
}