/* ====================================================================
 * KENDA. Лента разделов над сеткой товаров.
 * Приём взят с 4bike, рисунок свой: там значок и подпись в рамке,
 * здесь значок, подпись и счёт одной строкой, текущий раздел залит
 * чёрным, наведение подсвечивает значок фирменным красным.
 * ==================================================================== */

:root {
	--kenda-akcent: #ff4f57;
	--kenda-akcent-temnee: #e63c44;
	--kenda-tekst: #313131;
	--kenda-tekst-tihiy: #6b7280;
	--kenda-liniya: #e5e7eb;
	--kenda-fon-tihiy: #f7f8fa;
}

/* ⭐ Веня 26.08.2026: «сами блоки немного разносим друг от друга по высоте,
   сейчас сливаются». Было 26, стало 34: блок фильтра стоял вплотную и
   читался как продолжение этого. */
.kenda-lenta {
	margin: 0 0 34px;
}

/* ⭐⭐ Веня 26.08.2026: «кнопки подкатегорий обрамляем как у фильтра».
   Рамка, радиус, фон и тень взяты из `.k-filtr` один в один: блоки стоят
   друг под другом, и любое расхождение видно сразу.
   ⭐ Поля 18 сверху и снизу поровну, по его же слову «делаем высоту в
   обрамлении как сейчас сверху у фильтров всем и сверху и снизу». */
.kenda-lenta__spisok {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 18px 26px;
	border: 1px solid #e6e8ec;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(24, 32, 45, .05);
	list-style: none;
}

.kenda-lenta__punkt {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kenda-lenta__punkt::before {
	content: none;
}

.kenda-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* ⚠️ 25.08.2026 по макету чипсы выросли с 44 до 50 пикселей, снимок с 30
	   до 34: в макете это крупная и заметная переключалка типа товара, а не
	   мелкая подпись. */
	padding: 8px 18px 8px 8px;
	border: 1px solid var(--kenda-liniya);
	/* ⭐ Веня 25.08.2026: «овалы изменить на форму прямоугольника»
	   и «цвет внутри блоков фильтров и блоков категорий f6f6f6». */
	border-radius: 10px;
	background: #f6f6f6;
	color: var(--kenda-tekst);
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.kenda-chip:visited {
	color: var(--kenda-tekst);
}

.kenda-chip__znachok {
	flex: 0 0 auto;
	color: var(--kenda-tekst-tihiy);
	transition: color .15s ease;
}

/* ⭐ Снимок товара вместо значка. Круглая подложка нужна, чтобы тёмная
   покрышка на светлом фоне читалась как предмет, а не как пятно. */
/* ⚠️ Селектор с идентификатором обёртки нужен: без него тема раздувала
   миниатюру до ширины ячейки, и чипсы превращались в огромные овалы с
   картинкой (поймано кадром 24.08.2026). */
#ajax-content-wrap .kenda-chip__snimok,
.kenda-chip__snimok {
	flex: 0 0 34px;
	width: 34px !important;
	height: 34px !important;
	max-width: 34px;
	margin: 0;
	/* подложка снимка повторяет форму самой кнопки, а не круг */
	border-radius: 7px;
	background: #f6f6f6;
	object-fit: contain;
}

.kenda-chip--tekushchiy .kenda-chip__snimok {
	background: rgba(255, 255, 255, .9);
}

.kenda-chip__imya {
	white-space: nowrap;
}

/* ⛔⭐⭐ Веня 26.08.2026: «блок с количеством на светло-сером не виден,
   сделай чуть темней чтобы отличалось и такую же вставь на тёмную».
   Замер подтвердил: прежний #f7f8fa отличался от своей подложки на 1,02
   при единице как «совсем не отличается», и так было в семи местах из девяти.
   ⭐ Взят ОДИН вид плашки на любую подложку: серо-стальная заливка с белой
   цифрой. Отличие от белого 4,6, от светло-серой плитки 2,6, от тёмного фона
   баннера 4,2. Белая цифра на ней читается с запасом (4,6). */
.kenda-chip__schet {
	flex: 0 0 auto;
	min-width: 24px;
	padding: 3px 8px;
	border-radius: 6px;
	background: #6b7280;
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	text-align: center;
	transition: background-color .15s ease, color .15s ease;
}

/* ⭐ Веня 26.08.2026: «новый красный везде где есть такое». Был яркий
   --kenda-akcent (#ff4f57), стал тот же розовый, что у выделенной плитки. */
.kenda-chip:hover,
.kenda-chip:focus-visible {
	border-color: #fdafb4;
	color: var(--kenda-tekst);
}

.kenda-chip:hover .kenda-chip__znachok,
.kenda-chip:focus-visible .kenda-chip__znachok {
	color: var(--kenda-akcent);
}

/* ⭐⭐ Цвета выставлены Веней РУКАМИ в DevTools 26.08.2026, слово «вставь».
   Путь такой: сперва чёрное #1d1d1d, потом по его слову тёмно-серое #41454c,
   потом он сам подобрал светлое. Итог: заливка светло-серая, рамка бледно
   розовая, надпись тёмно-коричневая.
   ⚠️ Правило дублируется НИЖЕ в этом же файле и там же побеждает: менять
   надо оба места вместе. */
.kenda-chip--tekushchiy,
.kenda-chip--tekushchiy:visited {
	border-color: #fdafb4;
	background: #c4c4c4;
	color: #4e3636;
}

/* ⛔ Значок был БЕЛЫМ под прежнюю чёрную заливку. На светлой он пропадает:
   белым по #c4c4c4 контраст около 1,3 к 1. Взята краска надписи. */
.kenda-chip--tekushchiy .kenda-chip__znachok {
	color: #4e3636;
}

/* плашка у выделенной плитки та же самая, что у остальных: разный вид на
   соседних кнопках читался бы как разный смысл, хотя число значит одно */
.kenda-chip--tekushchiy .kenda-chip__schet {
	background: #6b7280;
	color: #fff;
}

.kenda-chip--tekushchiy:hover {
	border-color: #fdafb4;
	background: #c4c4c4;
	color: #4e3636;
}

/* на узком экране лента едет вбок, а не переносится в четыре ряда */
@media (max-width: 690px) {
	.kenda-lenta {
		margin-bottom: 20px;
	}
	.kenda-lenta__spisok {
		flex-wrap: nowrap;
		overflow-x: auto;
		/* ⭐ Обрамление остаётся и на телефоне, но поля скромнее: 26 по бокам
		   съедали бы ширину у самих плиток. Симметрию сохраняем.
		   ⚠️ Радиус 14, а не 16: у фильтра на этой ширине тоже 14
		   (filtry.css, медиазапрос до 690). Блоки стоят друг под другом. */
		padding: 14px;
		border-radius: 14px;
		scrollbar-width: none;
	}
	.kenda-lenta__spisok::-webkit-scrollbar {
		display: none;
	}
	.kenda-chip {
		padding: 8px 12px 8px 10px;
		font-size: 13px;
	}
}

/* ====================================================================
 * Сетка товаров: карточки одной высоты.
 * Снимки у покрышек разной пропорции, и ряды разъезжались: подпись
 * одного товара оказывалась выше снимка соседнего. Даём превью
 * квадратное поле, снимок вписываем целиком.
 * ==================================================================== */

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .product-wrap {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.woocommerce ul.products li.product .product-wrap > a:first-child {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	/* белая подложка, а не серая: у снимков Kenda фон белый, и на сером
	   поле каждый из них читался отдельной коробкой вместо ровного ряда */
	background: #fff;
	border: 1px solid #eef0f3;
	border-radius: 4px;
}

.woocommerce ul.products li.product:hover .product-wrap > a:first-child {
	border-color: #dfe3e8;
}

.woocommerce ul.products li.product .product-wrap > a:first-child img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8px;
	margin: 0;
	transition: transform .25s ease;
}

.woocommerce ul.products li.product:hover .product-wrap > a:first-child img {
	transform: scale(1.04);
}

.woocommerce ul.products li.product h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--kenda-tekst);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product .product-wrap > a:first-child img {
		transition: none;
	}
	.woocommerce ul.products li.product:hover .product-wrap > a:first-child img {
		transform: none;
	}
}

/* ====================================================================
 * Подбор по размеру. Тот же язык, что у ленты разделов: значение,
 * счёт, тонкая рамка. Выбранное значение заливается фирменным красным,
 * чтобы отличаться от текущего раздела, который залит чёрным.
 * ==================================================================== */

.kenda-filtr {
	margin: 0 0 26px;
	padding: 18px 20px 20px;
	border: 1px solid var(--kenda-liniya);
	border-radius: 6px;
	background: var(--kenda-fon-tihiy);
}

.kenda-filtr__gruppa + .kenda-filtr__gruppa {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #e9ebef;
}

.kenda-filtr__podpis {
	display: block;
	margin: 0 0 9px;
	color: var(--kenda-tekst-tihiy);
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.kenda-filtr__znacheniya {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.kenda-filtr__znachenie {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 6px 11px;
	border: 1px solid var(--kenda-liniya);
	border-radius: 4px;
	background: #fff;
	color: var(--kenda-tekst);
	font-size: 13px;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.kenda-filtr__znachenie:visited {
	color: var(--kenda-tekst);
}

.kenda-filtr__schet {
	color: #9aa0aa;
	font-size: 11px;
}

.kenda-filtr__znachenie:hover,
.kenda-filtr__znachenie:focus-visible {
	border-color: var(--kenda-akcent);
	color: var(--kenda-tekst);
}

.kenda-filtr__znachenie--vybran,
.kenda-filtr__znachenie--vybran:visited,
.kenda-filtr__znachenie--vybran:hover {
	border-color: var(--kenda-akcent);
	background: var(--kenda-akcent);
	color: #fff;
}

.kenda-filtr__znachenie--vybran .kenda-filtr__schet {
	color: rgba(255, 255, 255, .78);
}

.kenda-filtr__sbros {
	display: inline-block;
	margin: 16px 0 0;
	color: var(--kenda-tekst-tihiy);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.kenda-filtr__sbros:hover {
	color: var(--kenda-akcent);
}

@media (max-width: 690px) {
	.kenda-filtr {
		padding: 14px 14px 16px;
	}
	.kenda-filtr__znachenie {
		font-size: 12px;
		padding: 6px 9px;
	}
}

/* ====================================================================
 * Четыре товара в ряд. Класс columns-4 тема выставляет, но ширину
 * колонки держит своей раскладкой на треть, поэтому переводим сетку
 * на grid: он же выравнивает высоту рядов.
 * ==================================================================== */

.woocommerce ul.products,
.woocommerce-page ul.products {
	/* тема раскладывает сетку своим flex и держит колонку в треть ширины,
	   перебить её обычной специфичностью не выходит */
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	/* clearfix темы: в сетке grid он становится ячейкой и сдвигает
	   первый товар во вторую колонку */
	display: none !important;
	content: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

@media (max-width: 1100px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 800px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 14px;
	}
}

@media (max-width: 460px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
	.woocommerce ul.products li.product h3,
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 13px;
	}
}

/* ====================================================================
 * Больше места товарам.
 * Было при окне 1440: сайдбар 293, сетка 908, карточка 212, а справа
 * пропадало около 180 пикселей на поле контейнера. У 4bike при том же
 * окне карточка 239. Сужаем поля и сайдбар, разницу отдаём сетке.
 * Только страницы каталога: карточка товара и остальной сайт не тронуты.
 * ==================================================================== */

/* ⛔ Боковые поля контейнера тут БОЛЬШЕ не задаются. Единственный источник
   ширины сайта это salient-child/shirina.css (правило Вени 24.08.2026: как на
   4bike, на всех страницах). Частное правило здесь держало 40 пикселей и
   перебивало общие 32 на экране 1280. */

.archive.woocommerce .container.main-content > .row,
.woocommerce-shop .container.main-content > .row {
	display: flex;
	align-items: flex-start;
	gap: 34px;
	max-width: none;
	width: 100%;
	/* ⛔ Свои боковые поля ряду не нужны: их уже даёт контейнер (40, а от
	   1280 это 32). Пара лишних полей по 34 съедала 68 пикселей у сетки
	   товаров. Правка Вени 24.08.2026: меню уже, снимки шире. */
	padding-left: 0;
	padding-right: 0;
}

/* ⛔⭐⭐ Классическая ловушка: у темы `.row` чистится псевдоэлементами
   `::before` и `::after` (старый приём clearfix для float). Как только ряд
   становится `display: flex`, эти пустышки превращаются в полноценные
   элементы флекса, и `gap` добавляет по 34 пикселя ДО первой колонки и
   ПОСЛЕ последней. Отсюда брались лишние поля, которых нет ни в одном
   правиле: меню начиналось не с края ряда, а сетка не доходила до края.
   Поймано 24.08.2026 сравнением координат: ряд 40..1400, а дети 74..1366. */
.archive.woocommerce .container.main-content > .row::before,
.archive.woocommerce .container.main-content > .row::after,
.woocommerce-shop .container.main-content > .row::before,
.woocommerce-shop .container.main-content > .row::after {
	display: none;
}

/* ⚠️ Меню разделов лежит ВНУТРИ колонки темы: `#sidebar` не прямой ребёнок
   ряда, поэтому правило по прямому потомку било мимо, колонка оставалась
   150 пикселей, а меню торчало из неё на 34. Задаём обе: колонке ширину,
   меню внутри неё сто процентов. */
.archive.woocommerce .container.main-content > .row > .col.span_3 > #sidebar,
.woocommerce-shop .container.main-content > .row > .col.span_3 > #sidebar,
.archive.woocommerce .container.main-content > .row > #sidebar,
.woocommerce-shop .container.main-content > .row > #sidebar {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
}

.archive.woocommerce .container.main-content > .row > .col.span_3,
.woocommerce-shop .container.main-content > .row > .col.span_3 {
	/* меню разделов сужено с 240 до 200 по просьбе Вени 24.08.2026.
	   ⚠️ 25.08.2026 расширено до 260 по макету: меню стало карточкой, где
	   значок, название и счёт стоят в одну строку, и на 200 пикселях
	   «Туризм и Город» переносилось во вторую строку. */
	flex: 0 0 260px;
	width: 260px;
	max-width: 260px;
	margin: 0;
	padding: 0;
	float: none;
}

.archive.woocommerce .container.main-content > .row > .post-area,
.woocommerce-shop .container.main-content > .row > .post-area {
	flex: 1 1 auto;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
}

@media (max-width: 999px) {
	.archive.woocommerce .container.main-content > .row,
	.woocommerce-shop .container.main-content > .row {
		display: block;
	}
	.archive.woocommerce .container.main-content > .row > #sidebar,
	.archive.woocommerce .container.main-content > .row > .col.span_3,
	.woocommerce-shop .container.main-content > .row > #sidebar,
	.woocommerce-shop .container.main-content > .row > .col.span_3 {
		flex: none;
		width: auto;
		max-width: none;
	}
	.archive.woocommerce .container.main-content,
	.woocommerce-shop .container.main-content {
		padding-left: 22px;
		padding-right: 22px;
	}
}

/* ====================================================================
 * Поиск в сайдбаре. После сужения колонки до 240 пикселей подпись в
 * поле обрезалась на слове «по тое»: кнопка лежит поверх поля справа,
 * это замысел темы, поэтому не ломаем раскладку, а освобождаем место
 * под текст отступом.
 * ==================================================================== */

.archive.woocommerce #sidebar .woocommerce-product-search .search-field,
.woocommerce-shop #sidebar .woocommerce-product-search .search-field,
.archive.woocommerce .col.span_3 .woocommerce-product-search .search-field,
.woocommerce-shop .col.span_3 .woocommerce-product-search .search-field {
	padding-right: 104px;
	box-sizing: border-box;
	text-overflow: ellipsis;
}

/* ====================================================================
 * Правки по разбору Codex от 23.08.2026.
 * Отчёт целиком: C:\Users\De-sign\Desktop\kenda.ru\_arves\codex-dizayn-otchet.md
 * Каждое замечание сверено с кодом до применения.
 * ==================================================================== */

/* 1. Название товара: вес 600, первым должно читаться название, а не рамка.
   ⛔ Число строк и высота ЗДЕСЬ БОЛЬШЕ НЕ ЗАДАЮТСЯ. Прежние `min-height:
   58.8px` и `line-clamp: 3` из этого места перебивали новое правило внизу
   файла (`min-height` всегда сильнее `height`), и название держало три
   строки вместо двух. Единственное место, где это задано, ниже, в разделе
   «Карточка товара в каталоге». */
.woocommerce ul.products li.product h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-weight: 600;
}

/* 2. Воздух: ряды слипались при крупном квадратном снимке. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	/* по горизонтали ужато с 20 до 18: ещё немного ширины снимкам */
	gap: 34px 18px;
}

@media (max-width: 800px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		gap: 28px 14px;
	}
}

/* 3. Иерархия: лента и фильтр говорили одним языком и спорили.
      Чёрный остаётся только текущему разделу, фильтр становится
      спокойной рабочей панелью. */
/* ⛔ Это правило стоит ПОЗЖЕ первого `.kenda-lenta` в этом же файле и при
   равной специфичности побеждает его. 26.08.2026 разнос блоков, поставленный
   в начале файла, здесь молча отменялся. Правим оба места вместе. */
.kenda-lenta {
	margin: 0 0 34px;
}

.kenda-filtr {
	margin: 0 0 30px;
	padding: 16px 18px 18px;
	border-color: #e8eaee;
	background: #fff;
}

.kenda-filtr__gruppa + .kenda-filtr__gruppa {
	margin-top: 14px;
	padding-top: 14px;
	border-top-color: #eef0f3;
}

.kenda-filtr__podpis {
	margin-bottom: 8px;
	color: #596170;
	font-weight: 600;
	letter-spacing: .03em;
}

.kenda-filtr__znacheniya {
	gap: 8px;
}

.kenda-filtr__znachenie {
	background: #f7f8fa;
}

/* 4. Клавиатурный фокус был почти неотличим от соседних рамок,
      а у ссылки на снимок его не было вовсе. */
.kenda-chip:focus-visible,
.kenda-filtr__znachenie:focus-visible,
.kenda-filtr__sbros:focus-visible,
.woocommerce ul.products li.product .product-wrap > a:first-child:focus-visible {
	outline: 2px solid #b4232f;
	outline-offset: 3px;
}

.woocommerce ul.products li.product .product-wrap > a:first-child {
	transition: border-color .18s ease, box-shadow .18s ease;
}

.woocommerce ul.products li.product:hover .product-wrap > a:first-child {
	border-color: #d5d9df;
	box-shadow: 0 6px 18px rgba(24, 32, 45, .08);
}

/* прежний красный слишком светел под белый мелкий текст */
.kenda-filtr__znachenie--vybran,
.kenda-filtr__znachenie--vybran:visited,
.kenda-filtr__znachenie--vybran:hover,
.kenda-filtr__znachenie--vybran:focus-visible {
	border-color: #b92d38;
	background: #b92d38;
	color: #fff;
}

/* 5. Смешение трёх радиусов делало вид собранным из разных наборов.
      Капсула остаётся только навигационной ленте. */
.woocommerce ul.products li.product .product-wrap > a:first-child,
.kenda-filtr,
.kenda-filtr__znachenie {
	border-radius: 6px;
}

.kenda-chip {
	border-radius: 10px;
}

.kenda-filtr__schet {
	color: #667085;
	font-size: 12px;
	line-height: 1;
}

.kenda-filtr__znachenie--vybran .kenda-filtr__schet {
	color: #fff;
	opacity: .86;
}

.woocommerce ul.products li.product .product-wrap > a:first-child img {
	padding: 12px;
}

/* 6. Цели нажатия были 37 и 31 пиксель, для пальца мало.
      ⚠️ Чипсам с 25.08.2026 задано 50 по макету, здесь остаётся общий пол. */
.kenda-chip,
.kenda-filtr__znachenie {
	box-sizing: border-box;
	min-height: 44px;
}

.kenda-chip {
	min-height: 50px;
}

.kenda-filtr__sbros {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 10px;
}

@media (max-width: 690px) {
	.kenda-chip {
		min-height: 44px;
		font-size: 14px;
	}
	.kenda-filtr__znachenie {
		min-height: 44px;
		padding: 8px 11px;
		font-size: 14px;
	}
}

/* ====================================================================
 * ⛔ Вид карточки товара ЗДЕСЬ БОЛЬШЕ НЕ ЗАДАЁТСЯ. С 24.08.2026 карточка
 * собирается по макету и живёт в отдельной паре файлов:
 *   ...	hemes\salient-child\karta-kataloga.css
 *   ...\mu-plugins\kenda-karta-kataloga.php
 * Здесь остаются только сетка каталога, меню разделов, фильтр и лента.
 * Держать вид карточки в двух местах нельзя: прежние правила отсюда
 * перебивали новые (`min-height` сильнее `height`), и правка не работала.
 * ==================================================================== */

/* расстояние между карточками вдвое меньше прежнего (было 34 и 18) */
.woocommerce ul.products,
.woocommerce-page ul.products {
	gap: 17px 9px;
}

/* ⭐ На телефоне и планшете промежуток шесть, как у 4bike (замер 28.08.2026:
   у образца и поля, и промежуток по шесть на 390 и на 768). */
@media (max-width: 999px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		/* ⛔ Было 10 по вертикали: у образца и там шесть (Кодекс 28.08.2026). */
		gap: 6px;
	}
}

/* ====================================================================
 * Плитка категорий по макету Вени от 25.08.2026.
 *
 * Было: плитки шириной по содержимому, в ряд помещалось шесть штук разной
 * длины, и правый край ленты рвался. Стало: ровная сетка по пять в ряд,
 * все плитки одной ширины, как в макете.
 *
 * ⭐ Открытый раздел отмечен КРАСНОЙ рамкой поверх чёрной заливки: Веня
 * 25.08.2026 «кнопка категорий красная». Заливка остаётся тёмной, иначе
 * красного на экране становится три вида и они спорят.
 * ==================================================================== */
.kenda-lenta__spisok {
	display: grid;
	/* ⭐ Число колонок подбирается само, а не задано пятёркой. Разделов бывает
	   три (весь каталог) и семь (велопокрышки): жёсткие пять оставляли справа
	   дыру на две пустые ячейки, а Веня как раз просил «чтобы не было пустых
	   мест». `auto-fit` схлопывает пустые треки, и три плитки растягиваются на
	   всю ширину. При окне 1920 в ряд встаёт ровно пять, как в макете. */
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 12px;
}

.kenda-chip {
	/* в сетке плитка тянется на всю ячейку, поэтому не inline */
	display: flex;
	justify-content: flex-start;
	width: 100%;
	/* ⭐ Веня 26.08.2026: «обрамление у всех 1 пиксель». Было 2. Прыжка на
	   пиксель, ради которого держали двойную, теперь не будет: у выделенной
	   плитки рамка такая же тонкая, отличается только цветом. */
	border-width: 1px;
	border-color: #ececec;
}

.kenda-chip__imya {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kenda-chip__schet {
	margin-left: auto;
}

/* ⛔ ЭТО правило рисует выделение на деле: оно стоит позже одноимённого в
   начале файла и при равной специфичности побеждает. 26.08.2026 замена цвета,
   сделанная там, молча не применилась, замер показал прежние 29,29,29.
   ⭐⭐ Веня выставил эти три значения РУКАМИ в DevTools и сказал «вставь»:
   светлая заливка, бледно-розовая рамка, тёмно-коричневая надпись. */
.kenda-chip--tekushchiy,
.kenda-chip--tekushchiy:visited,
.kenda-chip--tekushchiy:hover {
	border-color: #fdafb4;
	background: #c4c4c4;
	color: #4e3636;
}

/* ------------------------------------------------------ 1000 до 1199 */
@media (max-width: 1199px) {
	.kenda-lenta__spisok {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
}

/* ⛔ Ниже 1000 боковая колонка встаёт над товарами, места становится
   больше, но плитки мельчить нельзя: три в ряд читаются, пять нет. */
@media (max-width: 999px) {
	.kenda-lenta__spisok {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 690px) {
	.kenda-lenta__spisok {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.kenda-chip {
		padding-right: 10px;
		font-size: 14px;
	}

	/* ⚠️ На телефоне в плитку помещается около десяти знаков, и половина
	   названий обрывалась многоточием: «Маунт…», «Циклок…», «Зимние…».
	   Разрешаем перенос и ужимаем снимок: длинные одиночные слова вроде
	   «Маунтинбайк» переносить некуда, им нужно просто место. */
	.kenda-chip__imya {
		white-space: normal;
		line-height: 1.25;
	}

	#ajax-content-wrap .kenda-chip__snimok,
	.kenda-chip__snimok {
		width: 26px !important;
		height: 26px !important;
		max-width: 26px;
	}

	.kenda-chip {
		gap: 7px;
		padding-left: 6px;
		font-size: 13px;
	}

	.kenda-chip__schet {
		min-width: 20px;
		padding: 2px 6px;
	}
}


/* ===== ЭКСПЕРИМЕНТ С ЦВЕТОМ 27.08.2026 =====================
   Веня: «хочу эксперимент, верхние кнопки категорий черные
   (выделенные как сейчас - темносерый)».

   ⚠️ Блок стоит ОДНИМ куском в конце файла нарочно: опыт
   снимается удалением от этой метки до конца, без раскопок.
   ⛔ Стоит НИЖЕ прежних правил, иначе одноимённые селекторы
   сверху его перебьют: за два дня это случалось трижды. */

.kenda-chip,
.kenda-chip:visited {
	background: #16181a;
	border-color: #16181a;
	color: #ffffff;
}

.kenda-chip__imya,
.kenda-chip svg {
	color: #ffffff;
}

/* счётчик на чёрном: тот же приём, что у тихой плашки баннера */
.kenda-chip .kenda-chip__schet {
	background: rgba(255, 255, 255, .16);
	color: #ffffff;
}

.kenda-chip:hover,
.kenda-chip:focus-visible {
	background: #23262a;
	border-color: var(--k-krasnyy-opyt, #d81f2a);
}

/* ⭐ Цвет выбранной кнопки прислан Веней 27.08.2026: `#767f8b`.
   Заменил прежний `#3d434a`, который был моим подбором. */
.kenda-chip--tekushchiy,
.kenda-chip--tekushchiy:visited,
.kenda-chip--tekushchiy:hover {
	background: #767f8b;
	border-color: #767f8b;
	color: #ffffff;
}

/* ⚠️ На `#767f8b` белая плёнка почти не читается: фон сам светлый.
   Берём тёмную, чтобы счётчик отделялся от кнопки. */
.kenda-chip--tekushchiy .kenda-chip__schet {
	background: rgba(22, 24, 26, .30);
	color: #ffffff;
}


/* ================================================================== *
 * Телефон: разделы горизонтальной лентой. Веня 28.08.2026.
 * ================================================================== */

/* ⛔ Было: сетка по две плитки в ряд. Семь разделов занимали четыре ряда
   и отжимали товары вниз почти на 200 пикселей. Лента прокручивается
   вбок, занимает одну строку и не режет длинные названия. */
@media (max-width: 690px) {
	.kenda-lenta__spisok {
		display: flex !important;
		flex-wrap: nowrap !important;
		grid-template-columns: none !important;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 8px;
		/* ⭐ Лента выходит за поля контейнера, чтобы первая плитка начиналась
		   от края экрана, а последняя не упиралась в него. Так сразу видно,
		   что список продолжается. */
		margin-left: -6px;
		margin-right: -6px;
		padding: 0 6px 4px;
		scroll-snap-type: x proximity;
		/* ⛔⭐⭐ Без этой строки первая плитка стоит ВПЛОТНУЮ к краю экрана,
		   хотя в ленте задано поле 6. Виновата привязка прокрутки: точка
		   привязки у плитки это её левый край, и браузер подтягивал ленту так,
		   что край плитки совпадал с краем окна, съедая поле (замер 28.08.2026:
		   плитка на 1 вместо 6). `scroll-padding-left` переносит точку отсчёта
		   привязки внутрь на те же 6. Веня 28.08.2026: «сами блоки ниже с
		   отступом 6 пикселей слева». */
		scroll-padding-left: 6px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.kenda-lenta__spisok::-webkit-scrollbar { width: 0; height: 0; display: none; }

	#ajax-content-wrap .kenda-chip,
	.kenda-chip {
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: none !important;
		scroll-snap-align: start;
	}

	/* ⛔ В ленте перенос названия не нужен: строка одна, места вбок сколько
	   угодно. Возвращаем неразрывность, снятую для сетки. */
	.kenda-chip__imya {
		white-space: nowrap !important;
	}
}


/* ================================================================== *
 * Телефон: у ленты категорий своего обрамления больше нет.
 * Веня 28.08.2026 по кадру: «у кнопок категорий убери общее обрамление».
 * ================================================================== */

/* ⛔ Было: белая карточка с рамкой 1px #e6e8ec, радиусом 14 и тенью вокруг
   плиток. У самих плиток рамка и заливка свои, и на узком экране две линии
   шли подряд в пяти пикселях друг от друга.
   ⚠️ Первая плитка при этом сдвигается влево на пиксель, с 7 на 6: её отступ
   складывался из поля ленты 6 и рамки 1. От этой же шестёрки считается поле
   кнопок подбора, filtry.css того же дня. */
@media (max-width: 690px) {
	.kenda-lenta__spisok {
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}
}