/* ====================================================================
 * KENDA. Ряды товаров на главной. Веня 30.08.2026: «по 4 товара 2х2, вида
 * как в каталоге, только в наличии и отступы как в каталоге», и следом
 * «десктоп с новыми товарами вида 3 товара как в оригинале».
 *
 * Карточка здесь ТА ЖЕ, что в каталоге, поэтому её вид этот файл не трогает
 * вовсе: только раскладка ряда.
 * ==================================================================== */

/* ⛔ Тема и WooCommerce задают своей сетке `ul.products` и флексы, и ширины
   через `:nth-child`, и поля. Перебиваем целиком, иначе карточки разъезжаются
   по старой сетке в три колонки на любой ширине. */
.k-glavnaya-tovary,
.woocommerce .k-glavnaya-tovary,
#ajax-content-wrap ul.products.k-glavnaya-tovary {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* ⭐ Просвет как в каталоге на телефоне: там между карточками ровно 6. */
	gap: 6px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

#ajax-content-wrap ul.products.k-glavnaya-tovary > li.product {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	list-style: none;
}

#ajax-content-wrap ul.products.k-glavnaya-tovary > li.product::before {
	content: none;
}

/* ⛔⭐⭐⭐ Клирфикс списка занимал ПЕРВУЮ ЯЧЕЙКУ сетки. У темы и WooCommerce
   на `ul.products` висят `::before` и `::after` с `content: ""` для сброса
   обтекания. В гибком и сеточном контейнере псевдоэлемент САМ становится
   элементом раскладки, поэтому первая карточка уезжала во вторую колонку, а
   дальше всё шло лесенкой с дырой слева сверху (замер 30.08.2026: первая
   карточка x=198 вместо 6).
   ⚠️ Тот же приём я сознательно использую в фильтрах, чтобы разорвать строку.
   Здесь он мешает, поэтому гасится явно. */
#ajax-content-wrap ul.products.k-glavnaya-tovary::before,
#ajax-content-wrap ul.products.k-glavnaya-tovary::after {
	content: none !important;
	display: none !important;
}

/* ------------------------------------------------------ планшет и шире */
/* ⭐ Веня 30.08.2026: «десктоп с новыми товарами вида 3 товара как в
   оригинале». Печатаем всегда ЧЕТЫРЕ карточки, а на широком экране четвёртую
   убираем: так на телефоне выходит ровно два ряда по два, а на десктопе
   прежний ряд из трёх.
   ⚠️ Скрытая карточка это осознанная плата: разметка одна, а раскладок две.
   Менять число карточек по ширине можно только скриптом, а он ради трёх
   товаров не нужен. */
@media (min-width: 691px) {
	#ajax-content-wrap ul.products.k-glavnaya-tovary {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}

	#ajax-content-wrap ul.products.k-glavnaya-tovary > li.product:nth-child(4) {
		display: none;
	}
}

@media (min-width: 1000px) {
	#ajax-content-wrap ul.products.k-glavnaya-tovary {
		gap: 24px;
		margin-bottom: 34px;
	}
}


/* ====================================================================
 * Отступы главной на телефоне. Веня 30.08.2026: «отступы текста… и отступы
 * как в каталоге».
 * ==================================================================== */

/* ⛔ Поле 39 по бокам задаёт КОЛОНКА конструктора (`.wpb_column`), а не текст
   и не контейнер темы (замер 30.08.2026, цепочка родителей). Поэтому правим
   именно её.
   ⭐ Ставим 6, как поле контейнера в каталоге: тогда карточки товаров на
   главной становятся ровно такими же, 186 пикселей на экране 390.
   ⚠️ Тексту 6 мало, ему воздух нужен, поэтому текстовым блокам ниже
   возвращаем свои 12: суммарно 18 от края экрана. */
@media (max-width: 690px) {
	body.home #ajax-content-wrap .wpb_column {
		padding-left: 6px !important;
		padding-right: 6px !important;
	}

	body.home #ajax-content-wrap .wpb_text_column,
	body.home #ajax-content-wrap .nectar-cta,
	body.home #ajax-content-wrap .divider-wrap + .wpb_wrapper {
		padding-left: 12px;
		padding-right: 12px;
	}
}


/* ====================================================================
 * Кнопки главной. Веня 30.08.2026: «кнопки на главной сделай как меню
 * чёрное скруглённое».
 * ==================================================================== */

/* ⛔ Было три разных вида сразу: красные с наклоном (`regular-tilt`),
   прозрачные с рамкой (`see-through`) и тёмно-серая большая. Стало одно:
   чёрная плитка со скруглением 10, как пункты меню каталога и плитки
   разделов (`.kenda-chip`, фон #16181a).
   ⚠️ Правило ограничено `body.home`: на других страницах кнопки темы
   остаются прежними, Веня просил именно главную. */
body.home #ajax-content-wrap .nectar-button,
body.home #ajax-content-wrap a.nectar-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 10px 22px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background-color: #16181a !important;
	background-image: none !important;
	color: #ffffff !important;
	box-shadow: none !important;
	transform: none !important;
	font-weight: 600;
	letter-spacing: .04em;
	transition: background-color .15s ease;
}

body.home #ajax-content-wrap .nectar-button:hover,
body.home #ajax-content-wrap a.nectar-button:hover {
	background-color: #d81f2a !important;
	color: #ffffff !important;
}

/* ⚠️ У кнопок темы внутри лежит своя подпись отдельным узлом, и цвет ей
   задан там же: без этого правила буквы остаются прежними. */
body.home #ajax-content-wrap .nectar-button span,
body.home #ajax-content-wrap .nectar-button .start,
body.home #ajax-content-wrap .nectar-button .hover {
	color: #ffffff !important;
}

/* наклон у стиля regular-tilt держится на псевдоэлементе, гасим и его */
body.home #ajax-content-wrap .nectar-button::before,
body.home #ajax-content-wrap .nectar-button::after {
	content: none !important;
}


/* ⛔⭐⭐ На широком экране карточка тут УЗКАЯ, и характеристики в ней режутся.
   Причина в макете самой главной: ряд товаров стоит в половинной колонке
   конструктора, справа от него фотография. Замер 30.08.2026: карточка 166
   пикселей на экране 1440 и 114 на 1024, при этом в каталоге она 300.
   В таком поле «Размер» превращался в «Ра…», а «Маунтинбайк» в «Маунтинба…».

   ⭐ Убираем из карточки на главной строку характеристик, оставляя снимок,
   бренд, название, наличие и кнопку. На телефоне характеристики ОСТАЮТСЯ:
   там карточка 186 и всё помещается целиком.

   ⚠️ Это отличие от каталога сделано осознанно. Если нужно вернуть
   характеристики, ряд товаров придётся растянуть на всю ширину, а это уже
   перекладка макета главной. */
@media (min-width: 691px) {
	#ajax-content-wrap ul.products.k-glavnaya-tovary .k-kat-harak {
		display: none !important;
	}
}


/* ⭐ Подпись под заголовком раздела прилипала к нему вплотную: у заголовка
   нижнее поле 7 при кегле 50, и мерило отступов давало зазор минус один на
   всех восьми разделах (замер 30.08.2026 на 1440). Разводим пару: связанным
   надписям хватает 10.
   ⚠️ Отступ задаёт НИЖНИЙ элемент, а не заголовок: так пара не разъезжается,
   если блок переставят. */
body.home #ajax-content-wrap p:has(.podzagolovok) {
	margin-top: 10px;
}

/* запасная ветка для браузеров без `:has()` */
@supports not selector(:has(*)) {
	body.home #ajax-content-wrap .podzagolovok {
		display: inline-block;
		margin-top: 10px;
	}
}


/* ⚠️ Тот же случай у заголовка «ТЕХНОЛОГИИ KENDA»: он идёт с классом `big-1`,
   подписи `.podzagolovok` под ним нет, и правило выше его не касается.
   Здесь отступ задаёт САМ заголовок, а не текст под ним: текст лежит внутри
   общего абзаца конструктора и своего узла для отступа не имеет. */
body.home #ajax-content-wrap h2.big-1 {
	margin-bottom: 14px;
}