/* ====================================================================
 * КАРТОЧКА ТОВАРА В КАТАЛОГЕ по макету Вени 24.08.2026.
 *
 * Сверху бренд и тип товара поверх снимка, снимок квадратом во всю ширину,
 * под ним название в две части, ДВЕ самые важные характеристики строками
 * со значками, внизу наличие слева и красная кнопка перехода справа.
 *
 * Разметку печатает mu-plugins/kenda-karta-kataloga.php.
 * Общие правила сетки каталога остаются в katalog.css.
 * ==================================================================== */

.woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e8eaee;
	border-radius: 14px;
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: #d8dce2;
	box-shadow: 0 12px 30px rgba(24, 32, 45, .14);
}

/* штатную подпись темы прячем: название печатаем сами, двумя частями */
.woocommerce ul.products li.product .product-meta,
.woocommerce ul.products li.product .product-add-to-cart {
	display: none;
}

/* снимок квадратом во всю ширину, без полей и своей рамки */
.woocommerce ul.products li.product .product-wrap > a:first-child,
.woocommerce ul.products li.product:hover .product-wrap > a:first-child {
	position: relative;
	z-index: 1;
	border: 0;
	border-radius: 0;
	background: #fff;
	box-shadow: 0 8px 14px -8px rgba(24, 32, 45, .3);
}

.woocommerce ul.products li.product .product-wrap > a:first-child img,
.woocommerce ul.products li.product:hover .product-wrap > a:first-child img {
	padding: 0;
	transform: none;
}

/* --------------------------------- второй снимок из галереи по наведению
   ⭐ Веня 24.08.2026: «есть 2 картинка, при наведении мышки она переключает
   на вторую». Лежит поверх первого и повторяет его квадрат.
   ⛔⭐⭐ `z-index: 102`, а не `1`: при наведении тема Salient поднимает
   `.product-wrap` со снимком до `z-index: 101` (замерено 24.08.2026), и любой
   слой ниже уходит ПОД первый снимок. По этой же причине накладка с брендом и
   типом получила `110`: на `2` она при наведении пропадала.
   ⛔ Показываем только там, где мышь настоящая: на телефоне `:hover`
   залипает после касания, и снимок остался бы подменённым.
   ⚠️ Класс `k-gotovo` ставит `karta-kataloga.js` после загрузки снимка:
   без него под мышью на миг оказывался белый квадрат. */
.k-kat-foto2 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	aspect-ratio: 1 / 1;
	z-index: 102;
	background: #fff center center / contain no-repeat;
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}

@media (hover: hover) {
	.woocommerce ul.products li.product:hover .k-kat-foto2.k-gotovo {
		opacity: 1;
	}
}

/* ----------------------------------------- бренд и тип поверх снимка
   Накладка повторяет размеры снимка: он квадратный, поэтому пропорция
   1:1 и ширина в сто процентов дают ровно его поле. */
.k-kat-nakladka {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	aspect-ratio: 1 / 1;
	z-index: 110;
	/* ⚠️ Отдельного фолбэка на случай отсутствия `aspect-ratio` тут нет и не
	   нужно: свойство работает во всех браузерах с 2021 года, а прежняя
	   попытка (`height: auto; min-height: 0`) квадрата всё равно не давала,
	   на что верно указал Codex 24.08.2026. */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	padding: 12px;
	/* накладка не должна перехватывать нажатие: под ней ссылка на товар */
	pointer-events: none;
}

.k-kat-brend {
	font-size: 13px;
	font-weight: 800;
	font-style: italic;
	letter-spacing: -0.01em;
	color: #d81f2a;
	line-height: 1;
}


/* ------------------------------------------------------- название */
/* Название: ровно две строки у всех карточек, начало жирное.
   ⚠️ Высота задана в пикселях, а не строками: у товаров без запятой в
   названии второй строки не было вовсе, и карточки в ряду выходили разной
   высоты (510 против 491). */
/* Название лежит в h2: тема даёт заголовкам свои размеры и отступы, гасим.
   ⛔⭐⭐ Зазор под снимком задан ОТСТУПОМ ВНУТРЬ, а не полем снаружи: тема
   правилом `.woocommerce ul.products .material.product h2 { margin-top: 0
   !important }` гасила наши 13 пикселей, замерено 24.08.2026 (расчётное
   `margin-top` выходило 0px). Название вставало вплотную к снимку, и тень
   снимка ложилась прямо на первую строку: со стороны читалось, будто текст
   западает за фото. Веня поймал это глазами.
   ⚠️ Поэтому здесь `padding-top` с `!important`, а не `margin`. */
.woocommerce ul.products li.product h2.k-kat-zag,
#ajax-content-wrap .woocommerce ul.products li.product h2.k-kat-zag {
	display: block;
	margin: 0;
	padding: 20px 0 0 !important;
	font-size: inherit;
	line-height: inherit;
	font-weight: 400;
	/* ⚠️ Текст поверх тени снимка: у снимка `z-index: 1`, и без своего слоя
	   буквы оказывались ПОД его тенью и выглядели притушенными. */
	position: relative;
	z-index: 2;
}

/* ⛔⭐⭐⭐ Название НЕ прыгает при наведении.
   Тема поднимает заголовок карточки правилом
   `.woocommerce .material.product:hover h2 { transform: translateY(-11px) }`,
   замерено 24.08.2026: без мыши верх 539, под мышью 528. Веня назвал это
   «плавающий текст», и он прав: соседние карточки в ряду стоят на месте, а эта
   дёргается вверх. Гасим, повторив селектор темы и добавив свой класс. */
.woocommerce .material.product:hover h2.k-kat-zag,
#ajax-content-wrap .woocommerce .material.product:hover h2.k-kat-zag {
	transform: none;
}

/* тот же слой для остального содержимого под снимком */
.k-kat-harak,
.k-kat-niz {
	position: relative;
	z-index: 2;
}

.woocommerce ul.products li.product a.k-kat-imya {
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0 14px;
	/* ⚠️ Высота живёт ЗДЕСЬ, в блочном виде: если браузер не поймёт
	   `-webkit-box`, элемент останется блоком и `max-height` с `overflow`
	   всё равно обрежут лишнее. Прежний вариант с одной лишь `height` на
	   строчном элементе не обрезал бы ничего. Замечание Codex 24.08.2026. */
	/* ⚠️ Высота идёт ровно двумя строками: 2 на 18 равно 36. Менял кегль,
	   пересчитай и её, иначе у карточек в ряду разъедется низ. */
	max-height: 36px;
	height: 36px;
	color: #5c636c;
	text-decoration: none;
	/* ⭐ Веня 28.08.2026: «шрифт заголовка и характеристик чуть меньше».
	   Было 14 на 19. */
	font-size: 13px;
	line-height: 18px;
}

/* обрезка по строкам с многоточием там, где браузер её умеет */
@supports (-webkit-line-clamp: 2) {
	.woocommerce ul.products li.product a.k-kat-imya {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}

.woocommerce ul.products li.product a.k-kat-imya b {
	/* ⭐ Веня 24.08.2026: «убери немного жирноту у шрифта». Было 700. */
	font-weight: 600;
	color: #16181a;
}

.woocommerce ul.products li.product a.k-kat-imya:hover b {
	color: #b92d38;
}

/* ------------------------------------------- две характеристики */
/* ⭐ Решение Вени 24.08.2026: строк ДВЕ, только самое важное. Третья повторяла
   открытый раздел («Тип: Велокамера» в камерах) и ничего не добавляла. */
.k-kat-harak {
	margin: 12px 0 0;
	/* ⚠️ 25.08.2026 боковое поле ужато с 14 до 12: колонка меню выросла до
	   260 по макету, карточка сузилась с 275 до 260, и значению «Туризм и
	   Город» не хватало 14 пикселей (обход каталога дал 30 обрезаний). */
	padding: 0 12px;
	/* ⚠️ Держим место ровно под две строки: у шести ободных лент нет ширины,
	   и без запаса они съезжали бы относительно соседей по ряду. */
	min-height: 74px;
}

.k-kat-har {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 0;
	border-bottom: 1px solid #f0f1f3;
	/* ⭐ Тем же решением Вени 28.08.2026: было 12,5. */
	font-size: 12px;
	line-height: 1.3;
}

.k-kat-har:last-child {
	border-bottom: 0;
}

.k-kat-har dt {
	display: flex;
	align-items: center;
	gap: 8px;
	/* ⚠️ Подпись уступает место ПЕРВОЙ: коэффициент сжатия у неё в сто раз
	   больше, чем у значения. Жёсткий запрет сжатия у значения был бы хуже:
	   при очень длинном тексте оно вышло бы за карточку, а многоточие стало бы
	   бесполезным. Замечание Codex 25.08.2026. */
	flex: 0 100 auto;
	min-width: 0;
	color: #5c636c;
}

.k-kat-har dt span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.k-kat-har dd {
	margin: 0;
	/* ⚠️ Значение сжимается ПОСЛЕДНИМ: при нехватке места первой уступает
	   подпись (см. её `flex` выше). Прежде flex делил нехватку поровну, и
	   резалось именно значение, ради которого строка и существует. */
	flex: 0 1 auto;
	min-width: 0;
	color: #16181a;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.k-kat-znachok {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: #98a0aa;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ⭐⭐ «Характеристики красиво с разделителем» (Веня 28.08.2026).
   Волосяные линии делят карточку на три части: название, характеристики, низ.
   Без них всё шло сплошным столбцом, и Веня назвал это «размазано».
   ⚠️ Линии рисуются ВНУТРИ поля карточки, поэтому боковые отступы у блока
   характеристик и у низа обязаны совпадать на КАЖДОЙ ширине, иначе линии
   выходят разной длины и карточка перестаёт быть симметричной. */
.k-kat-harak,
.k-kat-niz {
	border-top: 1px solid #eceef1;
}

/* --------------------------------------- низ: наличие и переход */
.k-kat-niz {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	/* прижато к низу: у карточек в ряду низ всегда на одной линии */
	margin-top: auto;
	/* ⭐ Веня 24.08.2026: «кнопки чуть выше подними». Было 14 со всех сторон.
	   ⚠️ 25.08.2026 боковое поле 14 → 12: карточка сузилась с 275 до 260, и
	   «Не в наличии» вместе с кнопкой требовали 241 при 230 доступных
	   (замер 136-zamer-niza.js, 53 товара с обрезанной надписью). */
	padding: 8px 12px 12px;
}

.k-kat-nalichie {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	/* ⭐ Веня 24.08.2026: кнопки ниже. Было 38, потом 32, теперь 28. */
	min-height: 28px;
	padding: 0 8px;
	/* ⛔⭐ Длинная надпись «Не в наличии» выталкивала кнопку за край карточки
	   на 4 пикселя: поймано обходом всех страниц каталога 24.08.2026 (кнопка
	   432..553 при карточке 274..549). Плашка ужимается первой, кнопка нет. */
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: 8px;
	/* ⚠️ 12, а не 13: при 13 самая длинная надпись «Не в наличии» вместе с
	   кнопкой не помещалась в колонку 273 пикселя и обрезалась многоточием
	   («Не в нали…»), видно на кадре раздела «Аксессуары» 24.08.2026.
	   ⚠️ 25.08.2026 колонка стала 260, и та же надпись снова не влезала:
	   кегль 11,5, поля и значок ужаты, замер оставляет запас 6 пикселей. */
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.k-kat-nalichie span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.k-kat-nalichie svg {
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.k-kat-nalichie.k-est {
	background: #eaf7ef;
	border-color: #cbebd7;
	color: #1a7f45;
}

.k-kat-nalichie.k-est svg { stroke: #1a9950; }

.k-kat-nalichie.k-zapros {
	background: #fdf6e7;
	border-color: #f5e3bd;
	color: #a06b00;
}

.k-kat-nalichie.k-zapros svg { stroke: #d69411; }

.k-kat-nalichie.k-netu {
	background: #f4f5f6;
	border-color: #e6e8eb;
	color: #6b7076;
}

.k-kat-nalichie.k-netu svg { stroke: #9aa0a7; }

.woocommerce ul.products li.product a.k-kat-knopka {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 28px;
	/* поле ужато с 11 до 9 по той же причине: колонка 260 вместо 275 */
	padding: 0 9px;
	flex: 0 0 auto;
	background: #d81f2a;
	border-radius: 8px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .18s ease;
}

.woocommerce ul.products li.product a.k-kat-knopka:hover {
	background: #b3141e;
	color: #fff;
}

.k-kat-knopka svg {
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ⚠️ Ссылок на товар в карточке ТРИ: снимок, название и кнопка. У снимка
   видимого фокуса не было, и человек, идущий табом, терял место (нашёл Кодекс
   28.08.2026). Обводка у снимка внутрь: он занимает всю ширину карточки, и
   наружное кольцо срезалось бы её скруглением. */
.k-kat-knopka:focus-visible,
.woocommerce ul.products li.product a.k-kat-imya:focus-visible {
	outline: 2px solid #b4232f;
	outline-offset: 2px;
}

.woocommerce ul.products li.product .product-wrap > a:first-child:focus-visible {
	outline: 2px solid #b4232f;
	outline-offset: -3px;
}

/* ------------------------------------------------------- узкие экраны */
/* ⚠️ Ниже 1300 карточка сужается (три колонки на 1024 дают 226 пикселей),
   и наличие с кнопкой в одну строку не помещались: кнопка вылезала за край
   экрана, поймано ревизией. Ставим их друг под друга ВСЕМ карточкам сразу,
   а не по факту нехватки места: автоматический перенос давал соседям разную
   высоту (581 против 573), и ряд переставал быть ровным. */
@media (max-width: 1300px) {
	.k-kat-niz {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
	}

	.k-kat-nalichie,
	.woocommerce ul.products li.product a.k-kat-knopka {
		justify-content: center;
	}

	.k-kat-har { font-size: 11.5px; padding: 8px 0; }
	.k-kat-harak { padding: 0 12px; min-height: 66px; }
	.woocommerce ul.products li.product a.k-kat-imya { padding: 0 12px; }
	/* ⚠️ Отступ внутрь, а не поле: поле у заголовка гасит тема, см. выше. */
	.woocommerce ul.products li.product h2.k-kat-zag,
	#ajax-content-wrap .woocommerce ul.products li.product h2.k-kat-zag {
		padding: 17px 0 0 !important;
	}
	.k-kat-niz { padding: 8px 12px 12px; }
}

@media (max-width: 690px) {
	.woocommerce ul.products li.product { border-radius: 12px; }

	/* На телефоне карточка узкая: подпись убираем с ГЛАЗ, но не из разметки.
	   ⛔ `display: none` скрыл бы её и от голосового чтения, а значок помечен
	   `aria-hidden`, и значение осталось бы вовсе без названия.
	   Замечание Codex 24.08.2026. */
	.k-kat-har dt span {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
	/* ⚠️ Поля и промежуток здесь ужаты не для красоты: на 390 колонка всего
	   168 пикселей, и самое длинное значение «27.5" x 1.75-2.125"» требовало 126
	   при 123 доступных. Поймано обходом каталога 24.08.2026. */
	.k-kat-har { padding: 7px 0; gap: 6px; }
	.k-kat-har dd { font-size: 11px; }
	/* ⚠️ Боковое поле 10, а не 8: линия-разделитель над характеристиками
	   обязана совпасть по длине с линией над низом карточки, а у него 10.
	   Кегль значения на этой ширине уже 11, места хватает (проверено обходом
	   каталога на многоточия). */
	.k-kat-harak { margin-top: 10px; padding: 0 10px; min-height: 62px; }

	.woocommerce ul.products li.product h2.k-kat-zag,
	#ajax-content-wrap .woocommerce ul.products li.product h2.k-kat-zag {
		padding: 16px 0 0 !important;
	}

	.woocommerce ul.products li.product a.k-kat-imya {
		padding: 0 10px;
		/* ⭐ Кегль на шаг меньше по решению Вени 28.08.2026. */
		font-size: 12px;
		line-height: 17px;
		/* ⭐ Веня 28.08.2026, третий заход: «в каталоге максимум 2 строки».
		   Было три, и у коротких названий третья строка стояла пустой.
		   ⚠️ Высота считается по строкам: 2 на 17 равно 34. Менял кегль,
		   пересчитай и её, иначе низ карточек в ряду разъедется.
		   ⚠️ Плата известна: длинных названий обрывается больше, чем при трёх
		   строках. Это решение Вени, а не недосмотр. */
		-webkit-line-clamp: 2;
		line-clamp: 2;
		height: 34px;
		max-height: 34px;
	}

	.k-kat-niz {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		padding: 6px 10px 10px;
	}

	.k-kat-nalichie,
	.woocommerce ul.products li.product a.k-kat-knopka {
		justify-content: center;
		min-height: 28px;
		font-size: 12px;
	}

	.k-kat-nakladka { padding: 9px; }
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product,
	.woocommerce ul.products li.product a.k-kat-knopka,
	/* ⚠️ И подмена снимка тоже: просили меньше движения, значит и она без
	   плавности, просто мгновенная замена. Замечание Codex 24.08.2026. */
	.k-kat-foto2 {
		transition: none;
	}
}


/* ====================================================================
 * ⚠️ Эти правила карточке нужны ВЕЗДЕ, а не только в каталоге. С 25.08.2026
 * та же карточка стоит в рядах под карточкой товара, а `katalog.css` на
 * странице товара не подключается: без них тема давала плитке ширину в
 * 63 пикселя, снимок терял квадрат, а название и кнопка обрезались.
 * Значения дословно те же, что в `katalog.css`, поэтому в каталоге ничего
 * не меняется: правило совпадает само с собой.
 * ⚠️ Это именно КОПИЯ, а не перенос: в `katalog.css` те же правила
 * остались, потому что там они действуют и на страницах, где нашей
 * карточки нет. Правишь здесь, проверь и там. Замечание Кодекса.
 * ==================================================================== */

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

.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 {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.woocommerce ul.products li.product .product-wrap > a:first-child img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	margin: 0;
}


/* ⭐ На телефоне кнопка карточки была 28 пикселей высотой, наличие рядом
   тоже. Обе цели растим до 38: это нижняя граница, при которой палец
   попадает уверенно, а карточка не раздувается. */
@media (max-width: 690px) {
	.k-kat-knopka,
	.k-kat-nalichie {
		min-height: 38px;
	}

	.k-kat-knopka {
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* ⚠️ Тема задаёт кнопке свои поля с большей силой: без идентификатора
   обёртки правило не срабатывало (замер 26.08.2026: осталось 28 вместо 38). */
@media (max-width: 690px) {
	#ajax-content-wrap .k-kat-knopka,
	#ajax-content-wrap .k-kat-nalichie,
	body .woocommerce ul.products li.product .k-kat-knopka {
		min-height: 38px !important;
	}
}


/* ================================================================== *
 * Телефон: низ карточки двумя надписями, как у 4bike. Веня 28.08.2026.
 * ================================================================== */

/* ⛔ Было: две плашки во всю ширину, столбиком, по 38 пикселей каждая.
   Карточка выходила 415 пикселей против 285 у 4bike на той же ширине 390.
   Веня: «в наличии сделать не кнопкой, а зелёной надписью, подробнее тоже
   надписью, расположение как два пункта в 4bike».
   Замер 4bike на 390: карточка 186 на 285, наличие это надпись 11 пикселей
   весом 600 цветом rgb(47,122,61) в одной строке с оценкой.
   ⭐ Планшет тоже: Веня просил «можно ещё и планшеты так же», и на 768
   две плашки столбиком давали карточку 571 против 455 у образца. */
@media (max-width: 999px) {
	.k-kat-niz {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 8px !important;
		padding: 0 10px 2px !important;
	}

	/* наличие: только цвет и слово, без плашки и рамки */
	#ajax-content-wrap .k-kat-nalichie,
	body.woocommerce ul.products li.product .k-kat-nalichie,
	body.woocommerce-page ul.products li.product .k-kat-nalichie {
		min-height: 0 !important;
		padding: 6px 0 !important;
		background: transparent !important;
		/* ⛔ Именно `border: 0`, а не прозрачный цвет: рамка нулевой видимости
		   всё равно остаётся рамкой, и мерило отступов считает надпись
		   карточкой, у края которой стоит текст (24 ложные тревоги 28.08.2026). */
		border: 0 !important;
		border-radius: 0 !important;
		font-size: 11.5px !important;
		font-weight: 700;
		justify-content: flex-start !important;
		/* ⛔ Надпись наличия НЕ ужимается: она короткая и обязана читаться
		   целиком. На 390 «По запросу» обрезалось в «По запр…» (кадр 28.08.2026).
		   Ужиматься при нехватке места должно «Подробнее». */
		flex: 0 0 auto;
		overflow: visible !important;
		white-space: nowrap;
	}

	/* ⭐⭐ Веня 28.08.2026, второй заход: «вместо далее кнопку со стрелкой
	   вправо маленькую справа». Было слово «Подробнее» красным с
	   подчёркиванием, оно занимало треть строки и спорило с надписью наличия.
	   Стало: слово спрятано с глаз, остался красный кружок со стрелкой.
	   ⚠️ Сама ссылка прозрачная и размером 44 на 44, а кружок 34 рисует
	   псевдоэлемент. Так цель нажатия остаётся пальцевой, а на глаз кнопка
	   маленькая, как и просил Веня. */
	#ajax-content-wrap .k-kat-knopka,
	body.woocommerce ul.products li.product a.k-kat-knopka {
		position: relative;
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		min-height: 44px !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		justify-content: center !important;
		gap: 0;
	}

	/* ⛔ Слово убираем с ГЛАЗ, но не из разметки: у ссылки есть `aria-label`
	   с названием товара, и голосовое чтение называет её правильно. */
	.k-kat-knopka__slovo {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* ⚠️ Кружок 30, а сама ссылка по-прежнему 44 на 44: Веня 28.08.2026 просил
	   «кнопку с указателем сделать немного меньше», и уменьшать надо ВИД, а не
	   цель пальца. Было 34. */
	#ajax-content-wrap .k-kat-knopka::before,
	body.woocommerce ul.products li.product a.k-kat-knopka::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 30px;
		height: 30px;
		margin: -15px 0 0 -15px;
		border-radius: 999px;
		background: #d81f2a;
		transition: background-color .18s ease;
	}

	body.woocommerce ul.products li.product a.k-kat-knopka:hover::before {
		background: #b3141e;
	}

	/* ⭐ Стрелка вернулась: теперь она и есть кнопка. */
	#ajax-content-wrap .k-kat-knopka svg,
	body.woocommerce ul.products li.product a.k-kat-knopka svg {
		display: block !important;
		position: relative;
		z-index: 1;
		flex: 0 0 15px;
		width: 15px;
		height: 15px;
		stroke: #fff;
	}

	/* значок наличия оставляем: он несёт смысл цвета для тех, кто цвет не различает */
	.k-kat-nalichie svg { flex: 0 0 auto; }

}


/* ⛔⭐ Карточка не заполняла свою колонку: на 768 колонка сетки 375, а сама
   карточка 368, справа терялось 7 пикселей. Виновата ширина от темы. */
/* ⛔⭐ Виноват не `width`, а поле справа: тема ставит
   `ul.products[data-product-style="material"] li:nth-child(2n+1)
   { margin-right: 2% !important }`, и на 768 это 7,5 пикселя.
   Двух `!important` мало, побеждает тот, у кого специфичность выше,
   поэтому в селекторе появился идентификатор обёртки (замер CDP 28.08.2026). */
/* ⛔⭐⭐⭐ `.woocommerce` висит на САМОМ `body`, а не на обёртке внутри.
   Селектор `body .woocommerce …` через пробел требует второй такой класс
   ниже по дереву, его нет, и правило не совпадает ни с чем. Правильно
   `body.woocommerce …` слитно. На этом я потерял два захода 28.08.2026. */
@media (max-width: 999px) {
	body #ajax-content-wrap ul.products li.product,
	body #ajax-content-wrap ul.products li.product:nth-child(2n+1),
	body.woocommerce #ajax-content-wrap ul.products li.product {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
	}
}

/* ⛔⭐⭐ Высота карточки. Замер 28.08.2026 на 390: у 4bike 285 пикселей,
   у нас было 415, после правки низа 370. Разницу даёт наш блок характеристик,
   которого у образца нет вовсе. Содержимое не выбрасываем, оно полезно
   покупателю шин, ужимаем только воздух. */
@media (max-width: 690px) {
	/* ⭐ Веня 28.08.2026: «отступ заголовка сверху и ниже». Было 10 сверху и
	   4 снизу, название стояло притёртым и к снимку, и к характеристикам. */
	.woocommerce ul.products li.product h2.k-kat-zag,
	#ajax-content-wrap .woocommerce ul.products li.product h2.k-kat-zag {
		padding: 14px 0 0 !important;
	}

	/* ⭐ Веня 28.08.2026: «пустое место под описанием сократить в 2 раза».
	   Было 12. */
	.k-kat-harak {
		margin-top: 6px !important;
		min-height: 0 !important;
	}

	/* ⭐ И строки характеристик плотнее, он отметил этот просвет отдельно.
	   Было 6 сверху и снизу, строка выходила 29 пикселей, стало 23. */
	.k-kat-har { padding: 3px 0 !important; }
}

/* ⭐ Планшет идёт за телефоном: Веня 28.08.2026 уточнил «это только в мобиле»
   и следом «и планшете». Название здесь и так стояло в две строки, поэтому
   меняется только плотность: просвет под названием уже был вдвое меньше
   телефонного, а строки характеристик подтянуты с 5 до 3, как и там. */
@media (min-width: 691px) and (max-width: 999px) {
	.k-kat-harak { margin-top: 6px; min-height: 0; }
	.k-kat-har { padding: 3px 0; }
}