@media (max-width: 768px) {
	/* обёртка карусели: из горизонтальной ленты — в сетку 2 колонки */
	.wd-cats-element .wd-carousel-wrap {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px 6px !important;   /* было 22px 12px — по просьбе владельца плотнее */
		transform: none !important;
		height: auto !important;
		width: auto !important;
	}

	/* карточка: ширину Swiper проставляет инлайном — снимаем */
	.wd-cats-element .wd-carousel-item {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		flex: none !important;
		/* ⚠️ Тема добавляет боковые поля под просветы карусели. В сетке они
		   лишние и складываются с gap — визуально круги расходились сильнее,
		   чем задано. Снимаем, иначе «плотнее» не получится никакими gap. */
		padding: 0 !important;
	}

	/* подпись ближе к кружку */
	.wd-cats-element .wd-cat-content,
	.wd-cats-element .wd-cat-thumb {
		margin-bottom: 6px !important;
	}

	/* без этого второй и третий ряд обрезаются по высоте ленты */
	.wd-cats-element .wd-carousel-inner,
	.wd-cats-element .wd-carousel-container {
		overflow: visible !important;
	}

	/* стрелки листания больше не нужны — листать нечего */
	.wd-cats-element .wd-btn-arrow,
	.wd-cats-element .wd-nav-arrows,
	.wd-cats-element .wd-carousel-pagin {
		display: none !important;
	}

	/* ⭐ Иконки меньше примерно на четверть: в двух колонках крупные круги
	   смотрятся тяжело, а так подпись встаёт в одну строку. */
	.wd-cats-element .wd-cat-thumb,
	.wd-cats-element .category-image-wrapp {
		max-width: 76% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.wd-cats-element .wd-cat-inner {
		text-align: center;
	}

	/* ⭐ 19.10.2026, владелец: плитку «Зоотовары» с главной сняли (зоотовары сняты 16.10), разделов
	   стало пять — 2 + 2 + 1. Последняя одинокая плитка — по центру, шириной как соседние, а не
	   прижатой влево с дырой справа. При чётном числе правило молчит. */
	.wd-cats-element .wd-carousel-item:last-child:nth-child(odd) {
		grid-column: 1 / -1 !important;
		justify-self: center;
		width: calc(50% - 3px) !important;
	}

	/* ⭐⭐ Баннер-слайдер убираем с телефона: он занимает весь первый экран,
	   и категории уходили за его пределы. Теперь шесть категорий видны сразу
	   при открытии сайта, без прокрутки.

	   ⚠️ Тонкая зелёная полоса над шапкой (vita5-usp-bar.php) — ДРУГОЙ
	   элемент, она остаётся: в ней условие промокода бесплатной доставки,
	   пока купон действует.

	   ⛔ Скрываем только на телефоне. На десктопе баннер работает и продаёт:
	   там он не мешает категориям, они стоят под ним в один ряд. */
	.v5hero {
		display: none !important;
	}

	/* ⛔ Замер 03.09.2026, телефон 375 px: баннер скрыт, а картинки его слайдов
	   ВСЁ РАВНО качались — 258 КБ на каждый заход на главную (hero4 129 КБ +
	   hero1 130 КБ; hero2/hero3 подставлялись в разметку, но браузер их уже
	   не запрашивал). У первого слайда фон стоит в inline-style — он же
	   LCP-картинка десктопа, поэтому убрать его из разметки нельзя. Второй
	   подставлял таймер карусели через 3 секунды.

	   Правило ниже гасит фон на ТОМ ЖЕ брейкпойнте, что и сам баннер, и
	   намеренно стоит вплотную к нему: пока они в одном блоке, развести их
	   по недосмотру нельзя. !important в таблице перебивает inline-style без
	   !important, вычисленное значение становится none — и запрос не уходит.

	   ⚠️ Разметку баннера убрать с телефона нельзя: ключ кэша nginx
	   ($scheme$request_method$host$v5_cache_uri) НЕ различает устройства,
	   и ответ, собранный по wp_is_mobile(), уехал бы не тому покупателю. */
	.v5hero .v5hero__slide {
		background-image: none !important;
	}

	/* длинные названия вроде «Товары для спорта» не должны рвать сетку */
	.wd-cats-element .wd-entities-title {
		font-size: 15px !important;
		line-height: 1.3 !important;
		/* ⛔ 2026-10-09, багхант-8 (iPhone, WebKit). Здесь стояло голое hyphens:auto:
		   Chromium по-русски здесь не переносит и ломает строку по пробелу, а Safari
		   переносит и короткие слова — на SE 320 (подпись 135 px) выходило «Пищевые
		   добав-ки», «Продукты пита-ния», «Товары для спор-та», последнее — вплотную
		   к краю экрана. Все шесть названий помещаются по словам (самое длинное слово
		   «Зоотовары» — ~80 px из 135), переносы не нужны вовсе. text-wrap:balance
		   делит две строки поровну («Товары для / спорта»), где браузер умеет.
		   Сторож: bin/check-home-cat-titles-no-hyphens.py. */
		-webkit-hyphens: manual;
		hyphens: manual;
		overflow-wrap: normal;
		text-wrap: balance;
	}
}
/* 320–360 px: подпись на 1 px мельче — запас по ширине слова в ячейке ~135 px */
@media (max-width: 360px) {
	.wd-cats-element .wd-entities-title {
		font-size: 14px !important;
	}
}
/* ⚠️ 24.10.2026, багхант (HC-15): телефон боком. 740×360 (Android) попадал в правило «до 768»:
   две колонки, круги ~275 px при высоте экрана 360 — на первом экране половины двух картинок
   и ни одного названия раздела. Боком — все разделы в один ряд (auto-fit: 5 разделов — 5 колонок,
   станет 6 — 6), круг не больше 110 px, одинокая последняя плитка больше не растягивается на ряд. */
@media (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {
	.wd-cats-element .wd-carousel-wrap {
		grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
		gap: 8px 6px !important;
	}
	.wd-cats-element .wd-carousel-item:last-child:nth-child(odd) {
		grid-column: auto !important;
		justify-self: stretch;
		width: auto !important;
	}
	.wd-cats-element .wd-cat-thumb,
	.wd-cats-element .category-image-wrapp {
		max-width: min(76%, 110px) !important;
	}
}
/* Тот же телефон боком шире 768 (iPhone 844×390, 932×430) получал баннер-слайдер десктопа во весь
   первый экран — разделы под ним. Как на телефоне стоя: баннера нет, фон слайда не качается
   (см. правило «до 768» выше). Планшеты боком (высота 600+) и компьютеры не задеты. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
	.v5hero {
		display: none !important;
	}
	.v5hero .v5hero__slide {
		background-image: none !important;
	}
}