/* Каталог по макету Claude Design «Каталог · 1a» — 31.08.2026.

   Что делает файл: шапка листинга (крошки, заголовок, число моделей,
   сортировка таблетками), сайдбар фильтров, чипсы выбранного, сетка карточек,
   сама карточка и пагинация. Разметку печатают тема и WooCommerce —
   inc/catalog-head.php, inc/catalog-card.php и inc/catalog-sidebar.php только
   переставляют хуки и подменяют настройки виджетов.

   Отличия от макета — намеренные, под этот сайт:
   • зелёный #1D3A37, а не #14322B из макета: фирменный цвет сайта один
     на шапку, подвал, кабинет и 404;
   • шрифт — Jost, основной шрифт сайта. Golos Text из макетов оставлен
     подвалу, две гарнитуры в одном экране выглядели чужеродно;
   • кадр карточки квадратный, а не 3:4: фотографии товаров сняты квадратом,
     и обрезка до 3:4 съела бы у комплектов треть кадра;
   • у виджета цены нет золотой строки с полным диапазоном: числа для неё
     WooCommerce считает уже после печати заголовка, и ради подписи пришлось бы
     дублировать его SQL. Диапазон виден в двух полях под полосой;
   • в углу кадра рядом с сердечком остался быстрый просмотр темы — он
     на сайте уже работает, и убирать рабочую кнопку ради макета незачем.

   Своего файла токенов в теме нет: каждый ассет объявляет нужное сам.

   01.09.2026: правила карточки записаны через
   `#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells)` — три места,
   где на сайте печатаются карточки товара:

     • `.main-products` — витрина и архивы категорий (обёртка из
       archive-product.php темы);
     • `.tk-related` — «Похожие товары» и «Вам также будет интересно» на
       странице товара (mydecor-child/woocommerce/single-product/{related,up-sells}.php;
       класс общий на оба, второй добавляет к нему `tk-upsells` ради отступов);
     • `.ts-product` — блоки товаров, расставленные в Elementor: «Популярные
       товары» на главной и всё, что владелец добавит виджетами темы. Класс
       стоит на обёртке каждого такого виджета и больше нигде;
     • `.cross-sells` — «С этим товаром покупают» в корзине. Кросс-селлы
       проставлены у 22 товаров, то есть блок этот показывается, и оставить
       его на теминой карточке нельзя: разметку перестановки меняют везде,
       где идёт цикл товаров, и без стилей вышла бы карточка наполовину.

   Сетку правила `> .products` при этом не трогают у виджетов намеренно:
   у них между обёрткой и рядом карточек лежат `.column-content`
   и `.column-products`, прямым ребёнком `.products` не оказывается, и колонки
   остаются те, что владелец выставил в Elementor. На витрине их три из-за
   сайдбара, на главной во всю ширину — четыре, и это правильно.

   Все три аргумента — по одному классу, поэтому вес селектора от :is()
   не меняется: он равен весу самого тяжёлого аргумента. */

.tk-cat-head,
.ts-sidebar,
#main-content{
	--tkcat-deep: #1D3A37;
	--tkcat-deep-up: #254A46;
	--tkcat-gold: #8A6A3B;
	--tkcat-paper: #FBF9F6;
	--tkcat-cream: #FFFDF9;
	--tkcat-sand: #F7F4EF;
	--tkcat-stone: #EFEBE5;
	--tkcat-line: #E9E2D6;
	--tkcat-line-soft: #E4DCCF;
	--tkcat-muted: #A9A093;
	--tkcat-soft: #55504A;
	--tkcat-dim: #7C756C;
	--tkcat-strike: #BDB4A6;
	--tkcat-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==================================================================
   1. Шапка листинга
   ================================================================== */

.tk-cat-head{
	border-bottom: 1px solid var(--tkcat-line);
}
.tk-cat-head__inner{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	padding-top: 34px;
	padding-bottom: 26px;
}
.tk-cat-head__main{
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

/* Крошки печатает тема (mydecor_breadcrumbs → woocommerce_breadcrumb),
   поэтому правила идут по её узлам, а не по своим. */
.tk-cat-head__crumbs .breadcrumbs,
.tk-cat-head__crumbs .breadcrumbs-container{
	margin: 0;
	padding: 0;
	background: none;
	min-height: 0;
}
.tk-cat-head__crumbs,
.tk-cat-head__crumbs .woocommerce-breadcrumb{
	font-size: 12.5px;
	line-height: 18px;
	color: var(--tkcat-soft);
}
.tk-cat-head__crumbs a{
	color: #8A8279;
	text-decoration: none;
	transition: color 200ms ease;
}
.tk-cat-head__crumbs a:hover{
	color: var(--tkcat-gold);
}
.tk-cat-head__crumbs span{
	color: #CFC6B8;
	margin: 0 5px;
}

.tk-cat-head__title{
	margin: 0;
	font-size: 46px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--tkcat-deep);
}
.tk-cat-head__count{
	font-size: 13.5px;
	line-height: 18px;
	color: var(--tkcat-dim);
}

.tk-cat-sort{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	flex: 0 0 auto;
}
/* Подписи разделов — «Цена», «Категории», «Размер комплекта», «Ткань»
   и «Сортировка» в шапке листинга. Цвет темнее приглушённого (решение
   владельца 05.09.2026): на 10,5px вразрядку капителью `--tkcat-muted`
   давал контраст 2,5:1 к бумаге сайдбара — вдвое ниже нормы, и подписи
   читались как водяной знак. Стало 7,6:1 при том же спокойном тоне.

   Подпись сортировки красится тем же правилом намеренно: это один тип
   подписи, и разнобой между шапкой и сайдбаром был бы заметнее разницы
   в тоне. */
.tk-cat-sort__label,
.ts-sidebar .widget-container .widget-title,
.ts-active-filters .widget-title{
	font-size: 10.5px;
	font-weight: 700;
	line-height: 14px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tkcat-soft);
}
.tk-cat-sort__list{
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.tk-cat-sort__pill{
	font-size: 12.5px;
	line-height: 16px;
	padding: 8px 14px;
	border-radius: 100px;
	border: 1px solid var(--tkcat-line-soft);
	background: var(--tkcat-cream);
	color: var(--tkcat-soft);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}
.tk-cat-sort__pill:hover{
	border-color: var(--tkcat-gold);
	color: var(--tkcat-gold);
}
.tk-cat-sort__pill.is-on,
.tk-cat-sort__pill.is-on:hover{
	border-color: var(--tkcat-deep);
	background: var(--tkcat-deep);
	color: var(--tkcat-sand);
}

/* Отступ до колонок. Раньше его давал блок крошек темы со своим полем снизу;
   свою шапку он не касается, и без этого правила сайдбар с витриной липли
   к разделительной линии. */
.tk-cat-head + .page-container{
	padding-top: 40px;
}

/* Сортировку и счётчик забрала себе шапка. Совсем убрать полосу нельзя —
   в ней WooCommerce печатает уведомления («товар добавлен в корзину»), —
   но её отступ в 50px теперь висел бы пустым местом над витриной. */
#main-content .before-loop-wrapper{
	margin-bottom: 0;
}
#main-content .before-loop-wrapper .woocommerce-notices-wrapper:not(:empty){
	margin-bottom: 26px;
}

/* ==================================================================
   2. Сайдбар фильтров
   ================================================================== */

.ts-sidebar .widget-container{
	margin-bottom: 34px;
}
.ts-sidebar .widget-container .widget-title-wrapper{
	margin-bottom: 12px;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--tkcat-line-soft);
}

/* Ничего не сворачивается (решение владельца 30.08.2026).
   Три места ставят этим узлам display инлайном: сам виджет темы печатает
   у вложенного списка style="display: none", themesky.js прячет его ещё раз
   и вешает обработчик на плюс, а ts_widget_toggle() из main.js ниже 768px
   прячет тело виджета и показывает кнопку сворачивания. Инлайн весом
   селектора не перебить — отсюда !important. */
.ts-sidebar .ts-product-categories-widget ul.product-categories ul.children{
	display: block !important;
}
.ts-sidebar .ts-product-categories-widget ul.product-categories li > span.icon-toggle{
	display: none !important;
}
.ts-sidebar .ts-product-categories-widget .widget-title-wrapper a.block-control{
	display: none !important;
}
.ts-sidebar .ts-product-categories-widget > .ts-product-categories-widget-wrapper{
	display: block !important;
}

/* --- Категории: плоский список, активная ветка отмечена чертой ---------- */

.ts-sidebar .ts-product-categories-widget ul.product-categories{
	margin: 0;
	padding: 0;
	list-style: none;
}
.ts-sidebar .ts-product-categories-widget ul.product-categories li.cat-item{
	padding: 0;
	border: 0;
}
.ts-sidebar .ts-product-categories-widget ul.product-categories li.cat-item > a{
	display: block;
	margin: 0;
	padding: 8px 0 8px 12px;
	border-left: 2px solid transparent;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	color: var(--tkcat-deep);
	transition: color 200ms ease, border-color 200ms ease;
}
.ts-sidebar .ts-product-categories-widget ul.product-categories li.cat-item > a:hover,
.ts-sidebar .ts-product-categories-widget ul.product-categories li.cat-item > a:focus-visible{
	color: var(--tkcat-gold);
}
.ts-sidebar .ts-product-categories-widget ul.product-categories li.cat-item.current > a{
	color: var(--tkcat-gold);
	border-left-color: var(--tkcat-gold);
}

/* «Все товары» — выход из ветки, а не ещё одна ветка, и отделено это
   голосом и воздухом, а не чертой: линейка в списке из трёх разделов
   читалась шрамом и спорила с волоском под заголовком блока в паре
   десятков пикселей выше. Кегль тот же, что у разделов, — строка остаётся
   с ними в одном ряду, — но начертание обычное и цвет тише: так она
   не притворяется четвёртым разделом. На витрине она текущая и подсвечена
   золотом с чертой слева, тем же способом, что активная категория.

   Цвет остаётся основным, а не приглушённым: тише разделов строка читалась
   служебной сноской, хотя ведёт на самую большую витрину сайта. */
.ts-sidebar .ts-product-categories-widget ul.product-categories li.tk-cat-all{
	margin-bottom: 12px;
}
.ts-sidebar .ts-product-categories-widget ul.product-categories li.tk-cat-all:not(.current) > a{
	font-weight: 400;
}

/* Вложенные — тем же ритмом, но тише родителя: раз они всегда на виду,
   разница в кегле, весе и цвете и есть вся иерархия. */
.ts-sidebar .ts-product-categories-widget ul.product-categories ul.children{
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
}
.ts-sidebar .ts-product-categories-widget ul.product-categories ul.children li.cat-item > a{
	padding: 5px 0 5px 14px;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 18px;
	color: var(--tkcat-soft);
}

/* --- Фильтры по размеру: таблетки вместо выпадашки ---------------------- */

.ts-sidebar .widget_layered_nav ul.woocommerce-widget-layered-nav-list{
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ts-sidebar .widget_layered_nav ul.woocommerce-widget-layered-nav-list li{
	margin: 0;
	padding: 0;
	border: 0;
}
.ts-sidebar .widget_layered_nav ul.woocommerce-widget-layered-nav-list li > a{
	display: inline-block;
	padding: 7px 12px;
	border: 1px solid var(--tkcat-line-soft);
	background: var(--tkcat-cream);
	font-size: 12.5px;
	line-height: 16px;
	color: var(--tkcat-soft);
	text-decoration: none;
	transition: border-color 180ms ease, color 180ms ease;
}
.ts-sidebar .widget_layered_nav ul.woocommerce-widget-layered-nav-list li > a:hover{
	border-color: var(--tkcat-gold);
	color: var(--tkcat-gold);
}
.ts-sidebar .widget_layered_nav ul.woocommerce-widget-layered-nav-list li.chosen > a{
	border-color: var(--tkcat-deep);
	background: var(--tkcat-deep);
	color: var(--tkcat-sand);
}
/* Числа у размеров в макете не показаны: у категорий их убрали 30.08,
   и держать счётчики в одном списке и не держать в соседнем было бы странно. */
.ts-sidebar .widget_layered_nav ul.woocommerce-widget-layered-nav-list .count{
	display: none;
}

/* --- Цена -------------------------------------------------------------- */

.ts-sidebar .widget_price_filter .price_slider_wrapper{
	padding: 0;
}
.ts-sidebar .widget_price_filter .price_slider,
.ts-sidebar .widget_price_filter .ui-slider{
	position: relative;
	height: 1.5px;
	margin: 11px 0 18px;
	border: 0;
	border-radius: 0;
	background: #E0D8C9;
}
.ts-sidebar .widget_price_filter .ui-slider .ui-slider-range{
	position: absolute;
	top: 0;
	height: 1.5px;
	border-radius: 0;
	background: var(--tkcat-deep);
}
.ts-sidebar .widget_price_filter .ui-slider .ui-slider-handle{
	position: absolute;
	top: -5.5px;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	border: 1.5px solid var(--tkcat-deep);
	border-radius: 50%;
	background: var(--tkcat-paper);
	cursor: pointer;
}
/* Направление строкой задаётся явно и селектором с id: тема кладёт этому
   блоку flex-flow: column wrap, и без перебивки поля «от» и «до» вставали
   друг под друга — на 1280 это было видно, на 1440 нет. */
#left-sidebar.ts-sidebar .widget_price_filter .price_slider_amount{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	text-align: left;
	line-height: normal;
	font-size: 13px;
}
/* Поля Woo прячет своим CSS, а показывает только строку «Цена: … — …».
   В макете наоборот: два поля с числами, строки нет. Поля к тому же можно
   заполнить руками — слайдером точное число не поймать. */
.ts-sidebar .widget_price_filter .price_slider_amount input[type="text"]{
	display: block !important;
	flex: 1 1 0;
	min-width: 0;
	height: auto;
	/* Тема оставляет полям нижний отступ от своей раскладки в столбик.
	   В строке он не нужен — расстояния держит gap, — а подписи «от» и «до»
	   он уводил вниз: по центру строки они вставали вместе с этим отступом. */
	margin: 0;
	padding: 9px 12px;
	border: 1px solid var(--tkcat-line-soft);
	border-radius: 0;
	background: var(--tkcat-cream);
	font-size: 13px;
	line-height: 18px;
	color: var(--tkcat-soft);
	text-align: left;
}
/* Метки полей Woo печатает для скринридеров и прячет; здесь они выходят
   на экран короткими подписями «от» и «до» (текст даёт inc/catalog-sidebar.php).
   Без них два поля с числами различались только порядком, а знак рубля
   стоит в заголовке блока и относится сразу к обоим. */
.ts-sidebar .widget_price_filter .price_slider_amount label.screen-reader-text{
	/* Метку прячут четыре чужих файла разом: reset.css темы (display: none
	   и position: absolute !important), woocommerce.css и wc-blocks.css.
	   Отсюда !important у позиции — весом селектора его не перебить. */
	display: inline-block;
	position: static !important;
	clip: auto;
	clip-path: none;
	flex: 0 0 auto;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	overflow: visible;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 18px;
	color: var(--tkcat-soft);
	white-space: nowrap;
	word-wrap: normal;
}
.ts-sidebar .widget_price_filter .price_slider_amount .price_label{
	display: none !important;
}
/* Кнопки в макете нет вовсе, но без неё введённые в поля числа некуда
   отправить. Поэтому она есть, но подписью: слева, по размеру текста
   и тем же приёмом, что «Сбросить фильтры», — чтобы не читаться главным
   действием сайдбара. */
.ts-sidebar .widget_price_filter .price_slider_amount .button{
	order: 3;
	flex: 0 0 100%;
	float: none;
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 16px;
	text-align: left;
	text-transform: none;
	/* Подчёркивание текстом, а не рамкой: кнопка тут флекс-элемент во всю
	   ширину колонки, и border-bottom протянулся бы линией под пустотой. */
	text-decoration: underline;
	text-decoration-color: #DDD6CC;
	text-underline-offset: 4px;
	color: #8A8279;
	transition: color 200ms ease, text-decoration-color 200ms ease;
}
.ts-sidebar .widget_price_filter .price_slider_amount .button:hover{
	background: transparent;
	text-decoration-color: var(--tkcat-gold);
	color: var(--tkcat-deep);
}

/* --- Сбросить фильтры -------------------------------------------------- */

.ts-sidebar .tk-cat-reset{
	display: inline-block;
	margin-top: 4px;
	padding: 0 0 3px;
	border-bottom: 1px solid #DDD6CC;
	font-size: 12.5px;
	line-height: 16px;
	letter-spacing: 0.02em;
	color: #8A8279;
	text-decoration: none;
	transition: color 200ms ease, border-color 200ms ease;
}
.ts-sidebar .tk-cat-reset:hover{
	border-bottom-color: var(--tkcat-gold);
	color: var(--tkcat-deep);
}

/* ==================================================================
   3. Чипсы выбранного
   ================================================================== */

/* archive-product.php печатает виджет через the_widget() без своих аргументов,
   поэтому обёртки здесь не теминые (.widget-container/.widget-title),
   а дефолтные вордпрессовые: div.widget + h2.widgettitle. */
#main-content .ts-active-filters .widget_layered_nav_filters{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
	border: 0;
}
#main-content .ts-active-filters .widgettitle{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tkcat-muted);
}
#main-content .ts-active-filters ul{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#main-content .ts-active-filters ul li{
	margin: 0;
	padding: 0;
	border: 0;
}
#main-content .ts-active-filters ul li a{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 11px 6px 13px;
	border-radius: 100px;
	background: var(--tkcat-stone);
	font-size: 12.5px;
	line-height: 18px;
	color: var(--tkcat-deep);
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease;
}
#main-content .ts-active-filters ul li a:hover{
	background: #E4DED4;
}
/* Тема печатает свой крестик иконочным шрифтом слева и красным. Он тут второй
   и спорит с золотом-зеленью палитры — остаётся один, справа и тихий. */
#main-content .ts-active-filters ul li a:before{
	display: none;
}
#main-content .ts-active-filters ul li a:after{
	content: '\00D7';
	font-size: 15px;
	line-height: 1;
	color: var(--tkcat-muted);
	transition: color 200ms ease;
}
#main-content .ts-active-filters ul li a:hover:after{
	color: var(--tkcat-deep);
}
/* Цена приезжает разметкой Woo с собственным <span class="amount"> —
   он не должен ломать строку чипса. */
#main-content .ts-active-filters ul li a .amount{
	font-size: inherit;
	font-weight: 500;
	color: inherit;
}

/* ==================================================================
   4. Сетка карточек
   ================================================================== */

/* Тема раскладывает витрину флексом с процентами ширины, и те же проценты
   переписывает css/responsive.css — а он подключается ПОСЛЕ стилей child-темы.
   Перебить их можно только селектором тяжелее: отсюда #main-content в начале. */
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) > .products{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 44px 30px;
	margin: 0;
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) > .products > .product{
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) > .products > .product .product-wrapper{
	margin: 0;
}

/* ==================================================================
   5. Карточка товара
   ================================================================== */

#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .thumbnail-wrapper{
	position: relative;
	overflow: hidden;
	background: var(--tkcat-stone);
}

/* --- Ярлыки ------------------------------------------------------------ */

#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-label{
	position: absolute;
	left: 14px;
	top: 14px;
	right: auto;
	bottom: auto;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-label span{
	display: block;
	margin: 0;
	padding: 5px 9px;
	border-radius: 0;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	line-height: 12px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-label span.onsale{
	background: var(--tkcat-cream);
	color: var(--tkcat-gold);
}
/* В блоке, который сам отобран по признаку «Рекомендуемый» — а «Популярные
   товары» на главной именно такой, — «Хит» стоит на каждой карточке и не
   говорит ничего: это тавтология заголовка блока. Класс `featured` тема
   ставит обёртке виджета по его же настройке product_type, так что признак
   берём у неё. В обычной витрине ярлык остаётся: там он отличает товар
   от соседей. */
#main-content .ts-product.featured .product .product-label span.featured{
	display: none;
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-label span.featured{
	background: var(--tkcat-deep);
	color: var(--tkcat-sand);
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-label span.out-of-stock{
	background: var(--tkcat-sand);
	color: var(--tkcat-dim);
}

/* --- Сердечко и быстрый просмотр --------------------------------------- */

#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button{
	position: absolute;
	right: 12px;
	top: 12px;
	left: auto;
	bottom: auto;
	z-index: 6;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: auto;
	margin: 0;
	padding: 0;
	background: none;
	opacity: 0;
	transform: none;
	transition: opacity 260ms ease;
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in{
	margin: 0;
	padding: 0;
	width: 34px;
	height: 34px;
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in > a,
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in .yith-wcwl-add-to-wishlist a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 253, 249, 0.9);
	color: var(--tkcat-deep);
	transition: background-color 200ms ease;
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in > a:hover,
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in .yith-wcwl-add-to-wishlist a:hover{
	background: var(--tkcat-cream);
	color: var(--tkcat-gold);
}
/* В кружке знак, а не текст. Но подпись — единственное, чем ссылка называет
   себя: внутри `a.quickshop` нет ничего, кроме неё. Поэтому не `display:none`,
   а увод с экрана: кнопка остаётся названной для экранного диктора. */
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .ts-tooltip{
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	background: none;
	animation: none;
}

/* Глаз быстрого просмотра.

   Свой знак, а не иконочный шрифт темы: её собственный (`\f002`, лупа)
   выключен насмерть. В настройках выбрано оформление наведения «стиль 2»,
   а оно гасит `.product-hover-style-2 .product-group-button > div a:before`
   и вместо знака показывает подпись пилюлей поверх кадра. Подпись мы убрали,
   и в кружке не осталось ничего — владелец про этот пустой кружок и написал.
   Включать `:before` обратно — воевать с настройкой темы и получить лупу,
   которая обещает поиск, а не просмотр.

   Маска, а не фоновая картинка: цвет знак берёт из `currentColor`, поэтому
   наведение (тёмно-зелёный → золото) работает прежним правилом, ничего
   дописывать не нужно. Обводка в 1.6 ложится к волосяным линиям карточки
   ровнее, чем залитый знак иконочного шрифта. */
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.quickshop > a:after{
	--tkcat-eye: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1.9%2012S5.7%205.3%2012%205.3%2022.1%2012%2022.1%2012%2018.3%2018.7%2012%2018.7%201.9%2012%201.9%2012Z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='2.4'%20fill='%23000'%20stroke='none'/%3E%3C/svg%3E");
	content: "";
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--tkcat-eye) center / 18px 18px no-repeat;
	        mask: var(--tkcat-eye) center / 18px 18px no-repeat;
}

/* Сердечко избранного.

   Знак рисуем фоном самой кнопки, а не значком внутри ссылки: внутренности
   `.yith-wcwl-add-to-wishlist` приезжают фрагментом YITH уже после загрузки
   страницы, и до его приезда рисовать было бы нечем — в углу кадра оставался
   пустой кружок, тот самый, про который владелец написал 05.09. Свой значок
   плагина не годится по той же причине, что и теминый у глаза: настройка
   наведения «стиль 2» гасит значки внутри блока кнопок.

   Картинка и приём — те же, что у сердечка на телефоне и на странице
   товара, поэтому и переменные объявлены здесь: мобильные правила ниже
   их наследуют, а не заводят свои. */
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.wishlist{
	/* Позиционируем себя: ссылка внутри растягивается на весь кружок
	   абсолютом — обёртки плагина оставляют ей не всю площадь, и по краю
	   круга нажималось мимо. */
	position: relative;
	--tkcat-heart: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231D3A37'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020.3S3.6%2015.2%203.6%209.5A4.4%204.4%200%200112%206.9a4.4%204.4%200%20018.4%202.6c0%205.7-8.4%2010.8-8.4%2010.8z'/%3E%3C/svg%3E");
	--tkcat-heart-on: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23F7F4EF'%20stroke='%23F7F4EF'%20stroke-width='1.7'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020.3S3.6%2015.2%203.6%209.5A4.4%204.4%200%200112%206.9a4.4%204.4%200%20018.4%202.6c0%205.7-8.4%2010.8-8.4%2010.8z'/%3E%3C/svg%3E");
	display: flex;
	/* Голые текстовые узлы плагина («или») селектором не убрать — гасим
	   их кеглем; своей подписи у этой кнопки нет. */
	font-size: 0;
	border-radius: 50%;
	/* Свойства фона перечислены по отдельности, а не сокращением: если
	   картинка почему-то не подставится, кружок всё равно останется
	   на месте, а не пропадёт вместе со всем фоном.

	   `!important` по всему фону: у кнопок этого блока тема держит свой
	   с приоритетом — размеры и круг доезжали, а фон и знак нет, и в углу
	   кадра оставалось пустое место. */
	background-color: rgba(255, 253, 249, 0.9) !important;
	background-image: var(--tkcat-heart) !important;
	background-position: center !important;
	background-size: 16px 16px !important;
	background-repeat: no-repeat !important;
	transition: background-color 200ms ease;
}
/* В избранном — залитое сердце на тёмном круге. */
/* «В избранном» — по классу от assets/wishlist.js: разметка плагина
   после удаления из списка врёт (класс `exists` остаётся, ссылка
   «убрать» переживает замену фрагмента), и сердечко залипало залитым. */
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.wishlist[data-tk-wished]{
	background-color: var(--tkcat-deep) !important;
	background-image: var(--tkcat-heart-on) !important;
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.wishlist:hover{
	background-color: var(--tkcat-cream);
}
/* Ссылка внутри — только область нажатия: круг и знак уже на кнопке.
   Свой фон ей гасим и при наведении тоже, иначе кремовый круг из общего
   правила ложится поверх знака и сердечко пропадает под курсором.

   Размеры нужны всей цепочке, а не одной ссылке. Между кнопкой и ссылкой
   плагин кладёт ещё два своих узла (`.yith-wcwl-add-to-wishlist`
   и `.yith-wcwl-add-button`), у них ширины нет, а `font-size: 0` у кнопки
   схлопывает их окончательно: 100% ссылки считались от нуля, и нажимать
   было не по чему — `elementFromPoint` в середине кружка возвращал сам
   кружок. Сердечко рисовалось, но не работало. */
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.wishlist .yith-wcwl-add-to-wishlist,
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.wishlist .yith-wcwl-add-button,
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.wishlist a,
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.wishlist a:hover{
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: none;
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.wishlist a{
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
}
/* Кнопка — только знак. В состоянии «в избранном» плагин кладёт внутрь
   ещё «или» и ссылку «Просмотр ›», и они вываливались из кружка. */
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.wishlist a:before,
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.wishlist a:after,
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.wishlist i,
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.wishlist img,
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.wishlist .separator,
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.wishlist .feedback,
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.wishlist a.view-wishlist,
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.wishlist .yith-wcwl-wishlistaddedbrowse,
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.wishlist .yith-wcwl-wishlistexistsbrowse{
	display: none;
}

/* --- Кнопка покупки на низу кадра -------------------------------------- */

#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .thumbnail-wrapper > .loop-add-to-cart{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	margin: 0;
	padding: 12px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 260ms ease, transform 340ms var(--tkcat-ease);
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .thumbnail-wrapper > .loop-add-to-cart a{
	display: block;
	width: 100%;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 13px 10px;
	border: 0;
	border-radius: 0;
	background: var(--tkcat-deep);
	color: var(--tkcat-sand);
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	transition: background-color 200ms ease;
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .thumbnail-wrapper > .loop-add-to-cart a:hover{
	background: var(--tkcat-deep-up);
	color: var(--tkcat-sand);
}
/* Название кнопки тема прячет в подсказку, которая всплывает при наведении.
   Здесь оно и есть надпись, поэтому подсказка распрямляется в обычный текст. */
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .thumbnail-wrapper > .loop-add-to-cart a .ts-tooltip{
	position: static;
	display: inline;
	opacity: 1;
	visibility: visible;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	transform: none;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	white-space: normal;
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .thumbnail-wrapper > .loop-add-to-cart a .ts-tooltip:before,
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .thumbnail-wrapper > .loop-add-to-cart a .ts-tooltip:after{
	display: none;
}
/* Иконка корзины у кнопки-текста лишняя. */
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .thumbnail-wrapper > .loop-add-to-cart a:before{
	display: none;
}

/* Наведение на карточку. На устройствах без курсора обе кнопки видны сразу:
   ждать наведения там нечего, а прятать покупку за долгим нажатием — значит
   спрятать её совсем. */
@media (hover: hover){
	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product:hover .product-group-button,
	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product:hover .thumbnail-wrapper > .loop-add-to-cart{
		opacity: 1;
	}
	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product:hover .thumbnail-wrapper > .loop-add-to-cart{
		transform: translateY(0);
	}
	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button:focus-within,
	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .thumbnail-wrapper > .loop-add-to-cart:focus-within{
		opacity: 1;
		transform: translateY(0);
	}
}
@media (hover: none){
	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button,
	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .thumbnail-wrapper > .loop-add-to-cart{
		opacity: 1;
		transform: none;
	}
}

/* --- Подпись под кадром ------------------------------------------------ */

/* Три числа, снятые с вёрстки, объясняют всю эту секцию:
   у .meta-wrapper тема ставит padding 16px 10px 0 — подпись стояла на 10px
   правее края фотографии; у .product-name висит min-height:40px, то есть
   резерв под вторую строку, и у однострочных имён цена отрывалась на пустую
   строку; .star-rating — блок с overflow:hidden, свой BFC, и по базовой линии
   он равняется нижним краем, а не строкой звёзд, отчего оценка уезжала вверх.
   Здесь имя, оценка и цена собраны в один блок с общим левым краем
   и шагом в 6px. */

#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	/* Шаг между строками подписи держит row-gap, а не отступы у самих строк:
	   строк три, состав их меняется по ширине экрана (на телефоне оценка
	   уезжает на свою), и отступами это каждый раз пересобиралось заново. */
	row-gap: 6px;
	padding: 14px 0 0;
	text-align: left;
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper > *{
	order: 5;
	flex: 1 0 100%;
	margin: 0;
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper .product-name{
	order: 2;
	flex: 1 1 auto;
	min-width: 0;
	/* Резерв под вторую строку снят, обрезка в две строки (-webkit-line-clamp)
	   у темы остаётся: длинное имя по-прежнему не разваливает карточку,
	   а короткое больше не тянет за собой пустую строку. */
	min-height: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
	letter-spacing: -0.01em;
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper .product-name a{
	color: var(--tkcat-deep);
	text-decoration: none;
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper .product-name a:hover{
	color: var(--tkcat-gold);
}

/* Оценка — вровень со строкой имени, а не по базовой линии. */
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper .star-rating-wrapper{
	order: 3;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 22px;
	margin-left: 14px;
	font-size: 12px;
	line-height: 18px;
	color: #8A8279;
	white-space: nowrap;
}
/* У товара без отзывов тема печатает пустую обёртку оценки. На десктопе она
   стоит на строке имени и ничего не занимает, но на телефоне, где имя уходит
   в две строки, её выдавливает на свою строку — и цена уезжает на 22px вниз
   относительно соседа по ряду. Прячем.
   !important здесь из-за сниппета WPCode 20800 («шорткод оптового каталога»):
   он на каждой странице печатает `.star-rating-wrapper:empty{display:block!important}`,
   резервируя место под оценку. Для прежней карточки это имело смысл, для этой
   уже нет — но сниппет клиентский, и правим мы у себя, а не в нём. */
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper .star-rating-wrapper:empty{
	display: none !important;
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper .star-rating-wrapper .count-rating{
	margin: 0;
}
/* Звёзды тема красит янтарным #f9ac00 — в этой палитре он чужой и кричит
   громче цены. Залитые — золотом сайта, пустые — тоном подложки.
   Цвет приходит инлайном из dynamic_style.php с !important (настройка темы
   «Rating Product»), поэтому и здесь !important: иначе не перебить.
   Захотят вернуть янтарный — снять эти два правила, настройка снова заработает. */
/* Ширина коробки — ровно пять звёзд: глиф звёздного шрифта занимает
   1,052734em, разрядка добавляет по 2px на каждую. Тема давала коробке 5,5em
   при той же разрядке — пятая звезда не помещалась и обрезалась
   `overflow: hidden`, а заливка, заданная процентом от коробки, обрывалась
   посреди звезды. Разрядку назначаем здесь же: тема ставит её
   псевдоэлементам, и от строки они её не наследуют. */
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .star-rating{
	width: calc(5.2637em + 10px);
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .star-rating:before,
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .star-rating span:before{
	letter-spacing: 2px;
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .star-rating:before{
	color: #DCD3C4 !important;
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .star-rating span:before{
	color: var(--tkcat-gold) !important;
}

/* Цена стоит первой, имя под ней — как в каталогах, на которые владелец
   ориентируется. Левый край у всех трёх строк общий с левым краем кадра:
   у .meta-wrapper нет боковых полей, а внутри цены поля сняты у обёрток.

   Табличные цифры — не украшение, а единственный способ выровнять цену.
   У Jost цифры разной ширины, и разброс огромный: на кегле 100px «1111»
   занимает 196px, «8888» — 241px. Из-за этого «7 190» читалось как «7 1 90»,
   новая и старая цена не совпадали по ритму, а в ряду из трёх карточек цены
   не вставали в столбец. Табличное начертание в Jost есть и всё это чинит:
   любые четыре цифры дают одну и ту же ширину.
   Заодно снят минус-трекинг: он сдвигает цифры внутри их же ячеек и рушит
   то самое выравнивание, ради которого включены табличные цифры. */
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper .price{
	order: 1;
	display: flex;
	align-items: baseline;
	/* 20px, а не 10: столько между ценами и было — по десять пикселей зазора
	   и по пять полей у каждой обёртки, которые здесь же и сняты. */
	gap: 20px;
	/* Строка цены со скидкой на пиксель выше строки без неё: цены выровнены
	   по базовой линии, а кегли у них разные (17 и 13), и объединённая высота
	   выходит 23px против 22px у одинокой цены. В ряду, где рядом стоят товар
	   со скидкой и без, имена расходились бы на этот пиксель. Резервируем. */
	min-height: 23px;
	font-size: 17px;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	color: var(--tkcat-deep);
}
/* Итоговая цена идёт первой, зачёркнутая — за ней; Woo печатает их наоборот,
   поэтому порядок задаётся свойством order.

   Дело не во вкусе, а в том, что старая цена у товаров разной длины:
   «7 190 ₽» и «15 600 ₽» отличаются на 27px. Стой она первой, итоговая цена
   каждой карточки начиналась бы со своего места — «8 500 ₽» уезжало вправо
   от соседних «4 788 ₽», и в ряду не было бы ни одной общей вертикали.
   Первой позицией итоговая цена прибита к левому краю кадра при любой старой,
   а у товара без скидки на её месте оказывается обычная цена — сама, без
   правил: `ins`/`del` Woo тогда не печатает вовсе. */
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper .price ins{
	order: 1;
	background: none;
	text-decoration: none;
	font-weight: 700;
	line-height: 22px;
	color: var(--tkcat-deep);
}
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper .price del{
	order: 2;
	opacity: 1;
	font-size: 13px;
	font-weight: 400;
	line-height: 22px;
	color: var(--tkcat-strike);
}

/* Кегль, вес и цвет цены назначает не `ins`/`del`, а вложенный в них
   `span.woocommerce-Price-amount` — тема ставит ему свои 16px/400 и серый
   #848484, и до этой правки правила выше не доходили до экрана вовсе:
   новая цена шла 16px обычного начертания вместо 17px жирного, старая — тоже
   16px вместо 13px. Отсюда и «тонко», и «неровно»: два одинаковых по кеглю
   числа рядом, разведённые только цветом.

   Обёртку делаем прозрачной, вместо того чтобы повторять в ней кегли и цвета:
   так у каждого значения по-прежнему одно место, `ins` и `del` выше.
   Знак рубля попадает под то же правило намеренно: тема красила его отдельным
   серым #848484, и в новой цене он выпадал из числа чужим цветом. Отбивать
   его не нужно — неразрывный пробел ставит фильтр `woocommerce_price_format`
   в functions.php, и он общий на весь сайт. */
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper .price .amount,
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper .price .woocommerce-Price-currencySymbol{
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	/* Поля тоже обнуляем. У `.woocommerce-Price-amount` их пять пикселей
	   с каждой стороны, и первая цифра цены стояла на пять пикселей правее
	   левого края кадра, тогда как имя товара под ней — вплотную. Коробки
	   при этом совпадали до сотых, и замером по ним расхождения было
	   не видно: разъезжались не коробки, а чернила внутри них.
	   Расстояние между новой и старой ценой держит gap самой строки. */
	padding: 0;
}
/* Обёртка кнопок под подписью опустела — кнопка покупки уехала на кадр. */
#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper .product-group-button-meta:empty{
	display: none;
}

/* ==================================================================
   6. Пагинация
   ================================================================== */

#main-content .woocommerce-pagination{
	margin: 0;
	padding-top: 30px;
	border-top: 1px solid var(--tkcat-line);
}
#main-content .woocommerce-pagination ul.page-numbers{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}
#main-content .woocommerce-pagination ul.page-numbers li{
	margin: 0;
	padding: 0;
	border: 0;
}
#main-content .woocommerce-pagination ul.page-numbers li .page-numbers{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 6px;
	border: 1px solid var(--tkcat-line-soft);
	border-radius: 0;
	background: var(--tkcat-cream);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1;
	color: var(--tkcat-soft);
	text-decoration: none;
	transition: border-color 200ms ease, color 200ms ease;
}
#main-content .woocommerce-pagination ul.page-numbers li a.page-numbers:hover{
	border-color: var(--tkcat-deep);
	color: var(--tkcat-deep);
	background: var(--tkcat-cream);
}
#main-content .woocommerce-pagination ul.page-numbers li .page-numbers.current{
	border-color: var(--tkcat-deep);
	background: var(--tkcat-deep);
	font-weight: 600;
	color: var(--tkcat-sand);
}
#main-content .woocommerce-pagination ul.page-numbers li .page-numbers.dots{
	border-color: transparent;
	background: none;
	color: var(--tkcat-strike);
}
/* Стрелки рисует сама тема: слова «Предыдущий/Следующий» она гасит нулевым
   кеглем и ставит вместо них знак из шрифта themify (style.css, 7012–7036).
   Свой знак был бы вторым — остаётся только цвет и размер. */
#main-content .woocommerce-pagination ul.page-numbers li a.prev,
#main-content .woocommerce-pagination ul.page-numbers li a.next{
	color: #8A8279;
}
#main-content .woocommerce-pagination ul.page-numbers li a.prev:before,
#main-content .woocommerce-pagination ul.page-numbers li a.next:before{
	font-size: 13px;
	line-height: 1;
}

/* ==================================================================
   7. Узкие экраны
   ================================================================== */

@media only screen and (max-width: 1279px){
	.tk-cat-head__title{
		font-size: 38px;
	}
}

@media only screen and (max-width: 1024px){
	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) > .products{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 24px;
	}
}

@media only screen and (max-width: 767px){
	.tk-cat-head__inner{
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding-top: 24px;
		padding-bottom: 20px;
	}
	.tk-cat-head__title{
		font-size: 30px;
	}
	.tk-cat-sort{
		align-items: flex-start;
	}
	.tk-cat-sort__list{
		justify-content: flex-start;
	}
	/* Ряд таблеток на телефоне не переносится, а прокручивается: перенос
	   съедал бы две строки экрана над самой витриной. */
	.tk-cat-sort__list{
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 0 -20px;
		padding: 0 20px 2px;
	}
	.tk-cat-sort__list::-webkit-scrollbar{
		display: none;
	}
	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) > .products{
		gap: 28px 16px;
	}
	/* На телефоне с кадра снято всё, кроме ярлыка скидки — решение владельца
	   01.09.2026. Кнопка «Выберите параметры» закрывала треть фотографии
	   и вела ровно туда же, куда тап по самой плитке; быстрый просмотр —
	   тоже лишний слой поверх товара, когда до товара один тап. «Хит» снят
	   по той же причине, по которой он вообще спорный: на витрине из шести
	   товаров половина «хиты», и знак перестаёт что-либо значить.
	   Вернуть — снять эти три правила. */
	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.quickshop,
	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .thumbnail-wrapper > .loop-add-to-cart,
	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-label span.featured{
		display: none;
	}
	/* Сердечко на плитке возвращаем: добавлять товар в избранное прямо
	   с витрины телефона нужно (владелец, 01.09.2026). Рядом с ним остаётся
	   убранным только быстрый просмотр — до самого товара с телефона один тап.

	   `!important` и селектор с двумя id — иначе не перебить: тема прячет
	   весь блок кнопок ниже 1024px правилом `#page .product-group-button
	   {display:none!important}` (style.css, 13357). Оттуда же и то, что
	   сердечка на телефоне не было никогда. */
	#page #main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button{
		display: flex !important;
		top: 8px;
		right: 8px;
	}
	/* Знак, размеры и состояния у сердечка общие с десктопом — они выше,
	   в разделе «Сердечко и быстрый просмотр». Здесь остаётся только то,
	   что про телефон.

	   `!important` и селектор с двумя id — иначе не перебить: ниже 1024px
	   тема гасит не только блок кнопок целиком (`#page .product-group-button
	   {display:none!important}`, style.css, 13357), но и саму кнопку
	   избранного внутри него. С фоном та же история: тема держит свой
	   с приоритетом, и картинка до экрана не доходила. */
	#page #main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-group-button .button-in.wishlist{
		display: flex !important;
		width: 34px;
		height: 34px;
		/* Тень нужна не для красоты: кружок светлый, и на светлом углу
		   фотографии без неё он не читается. На десктопе кадр под кнопкой
		   притемняет наведение, и тень там лишняя. */
		box-shadow: 0 2px 8px rgba(29, 58, 55, 0.14);
	}
	/* Ярлык скидки на плитке шириной в пол-экрана был размером с десктопный
	   и лез на товар. */
	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-label{
		left: 10px;
		top: 10px;
		gap: 4px;
	}
	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .product-label span{
		height: 22px;
		padding: 0 8px;
		font-size: 9.5px;
		letter-spacing: 0.12em;
	}

	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper{
		padding-top: 12px;
	}
	/* Оценка уезжает на свою строку с постоянной высотой — и у товара
	   без отзывов тоже. На строке имени она помещалась не всегда: у длинного
	   имени переносилась, и цена этой карточки вставала на 22px ниже, чем
	   у соседа по ряду. Ряд из двух плиток это показывает в упор. */
	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper .star-rating-wrapper,
	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper .star-rating-wrapper:empty{
		flex: 1 0 100%;
		display: block !important;
		height: 18px;
		/* min-height обнуляем: сниппет WPCode 20800 резервирует пустой обёртке
		   22px, и строка без оценки выходила на четыре пикселя выше строки
		   с оценкой — ровно тот перекос цен в ряду. */
		min-height: 0;
		margin-left: 0;
	}
	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper .star-rating-wrapper .star-rating{
		display: inline-block;
		vertical-align: top;
	}
	/* На телефоне карточка вдвое уже, и в две строки переносится БОЛЬШИНСТВО
	   имён — поэтому здесь две строки резервируются, и цены в ряду стоят
	   на одной линии. На десктопе наоборот: там перенос — единичный случай,
	   и резерв оставлял бы пустую строку под каждой карточкой ради двух. */
	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper .product-name{
		min-height: 40px;
		font-size: 15px;
		line-height: 20px;
	}
	#main-content :is(.main-products, .tk-related, .ts-product, .cross-sells) .product .meta-wrapper .price{
		font-size: 16px;
	}
	.ts-sidebar .widget-container{
		margin-bottom: 28px;
	}
	/* На телефоне сайдбар встаёт над витриной, и тема отбивает его сверху
	   пунктиром и полем в 50px. Вместе с полем шапки листинга и её сплошной
	   линией это давало две черты подряд и почти сотню пустых пикселей.
	   Отбивку оставляем одну — ту, что уже нарисовала шапка.
	   Селектор с id: css/responsive.css темы подключается после наших стилей. */
	.tk-cat-head + .page-container{
		padding-top: 0;
	}
	#left-sidebar.ts-sidebar{
		border-top: 0;
		padding-top: 28px;
	}
}