
@media (max-width: 768px) {
	/* Прокручивается РЯД ЧИПОВ, а не вся полоса.
	   Замер 03.09.2026, экран 375: полоса .v5cp-bar была 1117px при видимых
	   365, и тумблер «Только в наличии» стоял на 941 — до него надо было
	   протащить ряд на 747px вправо, причём полоса прокрутки скрыта
	   (scrollbar-width:none), то есть ни одного намёка, что там что-то есть.
	   Фильтр наличия был на телефоне недоступен. Теперь прокрутка живёт на
	   .v5cp-chips, а тумблер переносится на свою строку и виден всегда. */
	.wd-shop-tools .v5cp-bar {
		flex-wrap: wrap !important;
		overflow: visible;
		/* min-width:auto у флекс-элемента = «не сжимаюсь меньше содержимого»:
		   без этих трёх строк полоса растягивалась до 912px в контейнере 345,
		   а body с overflow-x:clip просто срезал хвост — ни прокрутки, ни чипов. */
		min-width: 0;
		width: 100%;
		max-width: 100%;
	}
	.wd-shop-tools .v5cp-bar > .v5cp-chips {
		flex: 1 1 100% !important;
		min-width: 0;
		max-width: 100%;
	}
	.wd-shop-tools .v5cp-bar > .v5cp-tools {
		margin-left: 0 !important;
	}

	/* ряды фильтров: одна строка с прокруткой вместо переноса */
	.wd-shop-tools .v5cp-bar > .v5cp-chips,
	.wd-shop-tools .v5ff-box {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* поля наружу, чтобы крайние чипы не липли к краю экрана */
		margin-left: -10px;
		margin-right: -10px;
		padding-left: 10px;
		padding-right: 10px;
	}
	.wd-shop-tools .v5cp-bar > .v5cp-chips::-webkit-scrollbar,
	.wd-shop-tools .v5ff-box::-webkit-scrollbar { display: none; }

	/*
	 * ⛔ 2026-10-09, багхант-8 (телефон). Замер i13 390: «Протеин» ?instock=1 — 7 чипов,
	 * целиком видно 2, от третьего выглядывает 17 px; полоса прокрутки скрыта, ни
	 * затухания, ни стрелки — что ряд листается, не видно. «Пищевые добавки» с
	 * сортировкой: «Показать все категории» меняла только подпись на «Свернуть»:
	 * её класс v5cp-collapsed даёт лишь max-height:80px, а ряд выше — одна строка
	 * nowrap, ей высота не мешает. Ряд как был, те же 2 чипа.
	 *
	 * 1. Затухание у правого края (последние 24 px), пока справа есть что листать.
	 *    Класс v5cp-fade ставит скрипт полосы (vita5-catalog-pro.php) по
	 *    scrollWidth/scrollLeft: на ряду без переполнения и в конце ленты маски нет,
	 *    последний чип не бледнеет зря. Маска — на рамке скроллпорта, не на
	 *    содержимом, поэтому при прокрутке остаётся у края.
	 * 2. Раскрытый ряд (v5cp-open — тот же скрипт по нажатию «Показать все
	 *    категории») переносится на строки. Не «:not(.v5cp-collapsed)»: ряды до 16
	 *    чипов печатаются без кнопки и без v5cp-collapsed, и такое правило
	 *    развернуло бы их в 3 строки — ровно то, от чего этот файл ушёл (166 px).
	 * Кнопку на ряду без переполнения прячет тот же скрипт. Сторож:
	 * bin/check-chips-row-expand.js.
	 */
	.wd-shop-tools .v5cp-bar > .v5cp-chips.v5cp-fade {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
	}
	.wd-shop-tools .v5cp-bar > .v5cp-chips.v5cp-open {
		flex-wrap: wrap !important;
		overflow: visible;
		max-height: none;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* чипы не должны сжиматься — иначе текст переносится внутри и ряд снова растёт */
	.wd-shop-tools .v5cp-bar > .v5cp-chips > *,
	.wd-shop-tools .v5ff-box > * {
		flex: 0 0 auto !important;
		white-space: nowrap;
	}
	/* …кроме раскрытого ряда: там длинный чип («Добавки для восполнения уровня
	   энергии» — 330 px) на 320 вылезал за экран; в строках он переносится внутри. */
	.wd-shop-tools .v5cp-bar > .v5cp-chips.v5cp-open > * {
		flex: 0 1 auto !important;
		max-width: 100%;
		white-space: normal;
		line-height: 1.25;
	}

	/*
	 * ⛔ 05.09.2026. Комментарий здесь утверждал, что подпись «Форма выпуска:»
	 * остаётся на своей строке над рядом. Это НЕВЕРНО: .v5ff-t — прямой
	 * ребёнок .v5ff-box, а тот выше принудительно flex-wrap:nowrap и
	 * overflow-x:auto. Значит подпись стоит первым элементом прокручиваемой
	 * ленты, съедает ~105px из ~345 (видно 2 значения из 8) и уезжает влево
	 * при первом же движении пальцем — остаётся безымянный ряд «Капсулы 7402».
	 * Прижимаем её к левому краю ленты, как это уже сделано у соседей
	 * (vita5-search-facets.php:420, vita5-search-empty.php:566).
	 */
	.wd-shop-tools .v5ff-box > .v5ff-t {
		position: sticky;
		/* left:0, а не -10px: sticky прижимает к padding-box скроллпорта, и
		   отрицательное смещение уводит подпись под обрезку — срезало первую
		   букву («орма выпуска:»). У соседей по коду стоит 0. */
		left: 0;
		z-index: 2;
		/* Фон страницы (#faf8f5), а не #fff: на бежевой странице подпись стояла
		   белым прямоугольником (замер 26.09.2026, 390x844, поиск и каталог). */
		background: #faf8f5;
		padding-right: 6px;
	}
	.wd-shop-tools .v5ff-box { margin-top: 6px; }

	.wd-shop-tools .v5cp-bar { margin-bottom: 10px; }

	/* Названия в плитках: три строки вместо двух.
	   Замерено на /catalog/: в две строки (max-height 37,8px при line-height 18,9)
	   влезало 1 название из 27 — обрезано 96% плиток. В три влезает 8 из 27. */
	.wd-products .wd-entities-title {
		max-height: none !important;
		-webkit-line-clamp: 3 !important;
		line-clamp: 3 !important;
	}
}

/*
 * ⛔ 2026-10-09, багхант-8 (планшет). Тема (themes/woodmart-child/style.css, правило
 * 20.05) делит сетку так: ≤768 — 2 колонки, 769–1024 — 3. iPad в портрете — ровно
 * 768 px, и попадал в телефонную сетку: плитки ~360 px, на экране 1024 px по высоте —
 * два товара (замер tab 768×1024, «Пищевые добавки», «Протеин»), при том что плитки
 * подразделов над сеткой там уже в 3 колонки. Граница на 1 px мимо, а не решение о
 * планшетах. Возвращаем 768 в планшетную ветку: тот же вид, что на 769.
 * Перевес над темой: её селектор (0,4,2) с !important; здесь .wd-grid-g дважды —
 * (0,5,2) с !important, порядок не важен. Телефоны (≤767) — без изменений.
 * Сторож: bin/check-catalog-tablet-grid.py.
 */
@media (min-width: 768px) and (max-width: 1024px) {
	html body .wd-content-area .wd-products.wd-grid-g.wd-grid-g[class*="grid-columns-"] {
		--wd-col: 3 !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* Обрезка обязана быть ВИДНОЙ. Было text-overflow: clip — хвост просто исчезал,
   а он у этих названий несёт бренд: «… 120 растительных капсул — Doctor’s Best».
   Покупатель не мог отличить обрезанное название от полного. */
.wd-products .wd-entities-title {
	/* !important обязателен: тема ставит этому заголовку display: flow-root,
	   а -webkit-line-clamp рисует многоточие ТОЛЬКО внутри -webkit-box.
	   Без него правка выглядит применённой (три строки есть), но многоточия нет. */
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	/* ⛔ 05.09.2026. Здесь стояло 2. Вес у этого правила и у
	   vita5-catalog-pro.php:450 одинаковый (0,2,0), !important нет ни у кого,
	   а печатается этот файл ПОЗЖЕ catalog-pro (тогда — в подвале, с 24.09.2026 —
	   в конце <head>, приоритет 9999 против 102). Значит на
	   десктопе побеждало это правило, и каталог резал названия по двум
	   строкам, пока главная резала по трём. Число строк обязано быть ОДНО
	   на всю витрину — это сторожит bin/check-mobile-polish.py. */
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden !important;
	text-overflow: ellipsis;
}
