/*
 * Главная витрины: лента блоков.
 *
 * ⚠ Своих цветов здесь нет ни одного — только переменные --sh-* из shop.css.
 * Витрина уже перекрашивалась один раз (переезд с texnoline), и второй набор
 * значений означал бы, что половина страницы осталась в старой палитре.
 *
 * ⚠ Карточку товара (.pcard) этот файл НЕ трогает: она общая с каталогом и
 * живёт в shop.css. Здесь задаётся только ширина колонки под неё — иначе
 * плитка на главной и в разделе разъехались бы в две разные плитки.
 */

/* Заголовок страницы: нужен поисковику и озвучке, но не глазу. */
.hsr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/*
 * ⚠ Лента — сетка из двух колонок, а не столбик. Только так два соседних
 * баннера «в половину» встают рядом сами: столбик потребовал бы, чтобы кто-то
 * их заранее спарил, а порядок блоков ведёт владелец и пары ломал бы каждый
 * раз, вставив что-нибудь между ними.
 *
 * ⚠ Отступ сверху — свой, сверх общего у `main`. Восемнадцати пикселей хватало
 * ленте, которая начиналась с заголовка ряда, но не баннеру: картинка во всю
 * ширину прилипала к шапке и читалась как её продолжение, будто это часть
 * сайта, а не реклама. Тридцать шесть в сумме отделяют одно от другого.
 */
.feed {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 24px;
	align-items: start;
	margin-top: 18px;
}

.feed > section { grid-column: 1 / -1; min-width: 0; }
.feed > .hban--half { grid-column: span 1; }

/* ── шапка блока ── */
.hrow__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.hrow__head h2 { margin: 0; font-size: 20px; }
.hrow__n { font-size: 13px; color: var(--sh-muted); }
/*
 * Ссылка в раздел — у ПРАВОГО КРАЯ ленты, на любой ширине.
 *
 * ⚠ Перебивки `margin-left: 0` на узком экране больше нет, и это не
 * пропажа. Она была написана под длинную подпись «Все процессор →»,
 * которая на телефоне и правда жала заголовок. Подпись стала короткой
 * («Все →»), и та же перебивка начала вредить: пять знаков повисали
 * посреди строки, в сотне пикселей от края, к которому прижата лента
 * под ними.
 *
 * ⚠ Заголовок она и без перебивки не жмёт: строка переносится
 * (`flex-wrap` у `.hrow__head`), и у длинного имени раздела ссылка
 * уходит на вторую строку — но и там остаётся у правого края.
 */
.hrow__all { font-size: 13px; font-weight: 600; margin-left: auto; }

/*
 * Заголовок ряда — ссылка в тот же раздел, что и «Все →» справа.
 *
 * ⚠ Синим он НЕ красится. Две ссылки в одно место рядом — дело обычное, но
 * выглядеть одинаково они не должны: имя раздела в двадцать пунктов, набранное
 * синим, читается как строка меню, а не как заголовок.
 *
 * ⚠ Цвет чернил и синева на наведении — не выдумка этой правки, а тот же приём,
 * что у названия товара в плитке (`.pcard__name` в shop.css). Ссылка, которая
 * остаётся собой, в этом магазине выглядит так и только так — плитка раздела
 * (`.htile` ниже) сделана из того же теста, только отзывается рамкой.
 *
 * ⚠ Подчёркивания на наведении нет по той же причине: подчёркнутый заголовок
 * перестаёт быть заголовком. Достаточно смены цвета и курсора.
 */
.hrow__head h2 a { color: inherit; }
.hrow__head h2 a:hover { color: var(--sh-blue); text-decoration: none; }

/*
 * Стрелки листания — по бокам ленты, поверх её краёв.
 *
 * ⚠ В шапке ряда они стояли рядом со ссылкой «Все …» и читались как часть
 * заголовка: непонятно, что двигают. У края ленты сомнений не остаётся.
 *
 * ⚠ Наезжают на ленту, а не стоят снаружи: вынести их за край значит отобрать
 * у карточек по 88 пикселей ширины на каждом ряду — на узком экране это целая
 * карточка.
 *
 * ⚠ Прячет их home.js, когда листать нечего. Наоборот не выйдет: помещается
 * ряд или нет, знает только браузер — это зависит от ширины окна.
 */
.hrow__box { position: relative; }

.hrow__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	border: .8px solid var(--sh-line);
	border-radius: 999px;
	background: var(--sh-card);
	color: var(--sh-ink);
	font: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

.hrow__arrow[hidden] { display: none; }
.hrow__arrow:hover { border-color: var(--sh-blue); color: var(--sh-blue); }

/*
 * ⚠ Сама стрелка — SVG, и это не украшательство. Знаки «‹» и «›» несут в
 * шрифте собственные боковые отступы: центрируется прямоугольник строки, а не
 * то, что видно, и стрелка стояла в круге заметно правее середины. У ломаной
 * координаты симметричны относительно центра квадрата 24×24, поэтому центр
 * держится в любом шрифте и на любой системе.
 *
 * `currentColor` оставляет наведение и тёмную схему на цвете кнопки — второй
 * набор правил для них не нужен.
 *
 * ⚠ Стрелка у места со сменой баннеров — ТА ЖЕ. Кружок там свой (он стоит под
 * лентой, а не поверх неё), а вот значок внутри обязан совпадать: две разные
 * стрелки на одной странице читаются как две разные кнопки.
 */
.hrow__arrow svg,
.hbans__arrow svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hrow__arrow--back { left: -14px; }
.hrow__arrow--next { right: -14px; }

/*
 * ⚠ На телефоне стрелок нет: там листают пальцем, а кнопка в 44 пикселя поверх
 * карточки перекрывала бы «В корзину» у соседнего товара.
 */
@media (hover: none), (max-width: 700px) {
	.hrow__arrow { display: none; }
}
/* ── ряд карточек ── */
/*
 * ⚠ Ширина колонки считается от числа карточек в ряду, а не задана в пикселях:
 * при любой другой ширине окна край ленты попадал бы в середину карточки.
 *
 * ⚠ А вот РОВНО по краю ряд больше не кончается, и это исправление, а не
 * недосмотр. Пока последняя карточка упиралась в край ленты, ряд выглядел
 * законченным: за ним не торчало ничего, и покупатель не догадывался, что
 * дальше лежат ещё шестьдесят шесть процессоров. Стрелки от этого не спасали —
 * их замечают те, кто уже ищет продолжение. Поэтому у правого края оставлена
 * полоска `--peek`: из-за неё выглядывает краешек следующей карточки, и
 * «дальше есть ещё» видно раньше, чем человек успел об этом подумать.
 *
 * ⚠ Выглядывающий край — НЕ второй орган управления рядом со стрелками: он
 * ничего не делает, он только показывает. Спорить со стрелками нечем.
 *
 * ⚠ Приём в проекте не новый. Ровно так ряд уже листается на телефоне: там
 * колонок 1.4, и обрезанная справа вторая карточка — единственная подсказка,
 * что ряд листается (медиа-запрос в конце раздела). Теперь то же самое
 * работает на любой ширине.
 *
 * ⚠ Одной полосой прокрутки обойтись было нельзя. Нативной в macOS не видно
 * вовсе, пока не крутят; своя (`.hrow__bar`) появляется только со скриптом и
 * стоит ПОД лентой, вдали от обрезанного края. Выглядывающая карточка работает
 * всегда и ровно там, куда смотрят.
 */
.hrow__strip {
	/*
	 * ⚠ Число из настройки приходит как `--feed-cols` с ленты-родителя, а не
	 * проставляется здесь атрибутом style. Инлайновый `--cols` на самом ряду
	 * перебил бы медиа-запросы ниже — они правят это же свойство у этого же
	 * селектора, а инлайн сильнее любого из них. Тогда выбранные владельцем
	 * шесть карточек остались бы шестью и на телефоне.
	 */
	--cols: var(--feed-cols, 5);
	--gap: 16px;
	/*
	 * Полоска у правого края, из-за которой выглядывает следующая карточка.
	 *
	 * ⚠ Это ВСЯ полоска, вместе с промежутком: за последней карточкой сперва
	 * идёт `--gap`, и только потом начинается соседняя. Видно, стало быть,
	 * `--peek` минус `--gap` — восемнадцать пикселей карточки с её рамкой и
	 * скруглённым углом. Меньше десяти читается как щель в вёрстке, больше
	 * тридцати — как карточка, которая не догрузилась.
	 *
	 * ⚠ Стрелка «вперёд» на этот край наезжает (`right: -14px`), но закрывает
	 * лишь 44 пикселя по высоте посередине: сверху и снизу краешек виден, а
	 * карточка высотой в четыреста с лишним.
	 */
	--peek: 34px;
	display: grid;
	grid-auto-flow: column;
	/*
	 * ⚠ Колонка ФИКСИРОВАННАЯ, без `minmax(0, …)`. С `minmax` базовый размер
	 * колонки нулевой, и грид раздаёт свободное место поровну ВМЕСТО
	 * переполнения: двенадцать карточек в ленте шириной 1376 px становились по
	 * сто пикселей, `scrollWidth` равнялся `clientWidth`, и ряд не листался
	 * вовсе — ни пальцем, ни стрелками.
	 */
	grid-auto-columns: calc((100% - var(--peek) - (var(--cols) - 1) * var(--gap)) / var(--cols));
	gap: var(--gap);
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	/* Место под полосу прокрутки, чтобы она не наезжала на кнопку «В корзину». */
	padding-bottom: 6px;
}
/* ⚠ `min-width: 0` обязателен рядом с фиксированной колонкой: без него
   длинное название товара распирает карточку шире её колонки. */
.hrow__strip > .pcard { scroll-snap-align: start; min-width: 0; }

/*
 * ── полоска прокрутки у кольцевого ряда ──
 *
 * ⚠ Нативную полосу в кольце ПРЯЧЕМ, а не перекрашиваем. Слева от набора стоят
 * копии хвоста, и `scrollLeft` в начале ряда равен их длине, а не нулю: браузер
 * честно показывает положение внутри всей ленты вместе с копиями — бегунок
 * стоит посередине там, где покупатель видит первый товар. Читается это как
 * «ряд открылся с середины», хотя ряд открылся с начала.
 *
 * ⚠ Класс вешает home.js, и только когда кольцо собрано. Без скриптов копий
 * нет, лента прокручивается обычным образом, и нативная полоса верна — отнимать
 * её у такой страницы нельзя.
 */
.hrow__strip--bare {
	scrollbar-width: none;
	/* Место под полосу больше не нужно: своя стоит ПОД лентой, а не в ней. */
	padding-bottom: 0;
}

.hrow__strip--bare::-webkit-scrollbar { width: 0; height: 0; }

.hrow__bar {
	position: relative;
	height: 4px;
	margin: 10px 0 0;
	border-radius: 999px;
	background: var(--sh-line);
	overflow: hidden;
}

/*
 * Бегунок: ширина — сколько набора видно, сдвиг — сколько пройдено по кольцу.
 * Оба числа ставит скрипт, здесь только умолчания на случай, если он ещё не
 * досчитал: пустая дорожка выглядела бы поломкой.
 */
.hrow__bar i {
	position: absolute;
	top: 0;
	left: var(--at, 0);
	width: var(--seen, 30%);
	height: 100%;
	border-radius: inherit;
	background: var(--sh-muted);
	opacity: .45;
}

@media (max-width: 1200px) { .hrow__strip { --cols: 4; } }
@media (max-width: 980px)  { .hrow__strip { --cols: 3; } }
@media (max-width: 700px)  { .hrow__strip { --cols: 2; } }
/*
 * ⚠ На телефоне колонок 1.4, а не 1: с ровной единицей покупатель считает, что
 * товар в разделе один. Отсюда и пошёл приём — обрезанная справа карточка как
 * подсказка, что ряд листается.
 *
 * ⚠ `--peek` здесь обнулён: дробная колонка уже показывает почти половину
 * соседней карточки, и полоска сверх неё отняла бы место у той единственной,
 * которую видно целиком. Ноль обязан быть С ЕДИНИЦАМИ — `calc()` не умеет
 * вычитать голое число из длины и молча роняет всё правило.
 */
@media (max-width: 460px) { .hrow__strip { --cols: 1.4; --gap: 12px; --peek: 0px; } }

/* ── баннер ── */
.hban__in {
	position: relative; display: block; overflow: hidden; border-radius: 12px;
	background: var(--sh-soft); color: var(--sh-ink); min-height: 160px;
}
.hban__in:hover { text-decoration: none; }
.hban__pic { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1200 / 300; }
.hban--half .hban__pic { aspect-ratio: 600 / 300; }

/*
 * ⚠ Подпись лежит НА картинке и на своей подложке. Текст поверх чужой
 * фотографии читается через раз — баннеры присылает арендатор, и светлый угол
 * в них не редкость.
 */
.hban__text {
	position: absolute; left: 0; bottom: 0; max-width: 100%;
	padding: 14px 18px; background: rgba(0, 0, 0, .55); color: #fff;
	display: flex; flex-direction: column; gap: 4px;
}
.hban__text b { font-size: 20px; }
.hban__text span { font-size: 14px; opacity: .9; }

/*
 * Баннер без картинки — плашка с текстом, а не пустая рамка.
 *
 * ⚠ Отдельный класс, а не `:not(:has(img))`. Картинки у баннера может не быть
 * не только «пока не загрузили», но и никогда — это законный вид блока, и знает
 * об этом PHP. Селектор `:has` переложил бы решение на браузер, а там, где его
 * нет, подпись осталась бы белым текстом на белой подложке.
 */
.hban__in--flat { display: flex; align-items: center; padding: 26px 24px; }
.hban__in--flat .hban__text { position: static; background: none; color: var(--sh-ink); padding: 0; }
.hban__in--flat .hban__text span { color: var(--sh-muted); opacity: 1; }

/* ── подряд идущие баннеры: одно место со сменой ── */
/*
 * ⚠ Это ЛЕНТА С ПРОКРУТКОЙ, а не «показать один, спрятать остальные». Витрина
 * обязана работать без скриптов, а спрятанные `display: none` баннеры без JS
 * так и остались бы спрятанными: из трёх картинок владельца покупатель увидел
 * бы одну, а две пропали бы с сайта совсем. У прокрутки без скриптов виден
 * первый баннер, соседние достаются пальцем, колесом и точками-ссылками.
 *
 * ⚠ Высота места НЕ ПРЫГАЕТ при смене: слайды стоят в потоке рядом, и высота
 * у них общая — по самому высокому. А `aspect-ratio` у картинки держит её ещё
 * до загрузки, поэтому место не дёргается и пока фото едет по сети.
 */
.hbans__strip {
	display: grid;
	grid-auto-flow: column;
	/* Слайд ровно в ширину места: смена показывает баннер, а не полтора. */
	grid-auto-columns: 100%;
	overflow-x: auto;
	/*
	 * ⚠ Плавность ШТАТНАЯ, а не покадровая, как у рядов товаров. Ряду своя
	 * понадобилась из-за кольца с копиями: телепорт на границе набора она
	 * размазала бы проездом через весь ряд. Здесь кольца нет, зато штатная
	 * плавность достаётся и ссылкам-точкам: без единой строки скрипта нажатие
	 * на точку доезжает до баннера, а не прыгает.
	 */
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	/*
	 * ⚠ Нативную полосу прячем, и это НЕ то же самое, что у рядов товаров.
	 * Там её прячут, только когда скрипт собрал кольцо, потому что без скриптов
	 * она единственный указатель на прокрутку. Здесь указатель есть всегда:
	 * точки под лентой рисует сервер, и работают они ссылками.
	 */
	scrollbar-width: none;
}

.hbans__strip::-webkit-scrollbar { width: 0; height: 0; }

/* ⚠ `display: flex` у слайда — чтобы баннер растянулся на высоту самого
   высокого соседа: иначе плашка без картинки висела бы в углу пустого места. */
.hbans__one {
	scroll-snap-align: start;
	min-width: 0;
	display: flex;
	/*
	 * ⚠ Отступ ПОД ШАПКУ. Без скриптов точка — ссылка на якорь, а шапка
	 * витрины липкая (`.sh` в shop.css: `position: sticky; top: 0`).
	 * Браузер подводит слайд к самому верху окна, и верх баннера уезжает
	 * под шапку — видно, если вернуться к месту со сменой снизу. Та же
	 * беда и та же мера, что у вкладок «Описание» и «Характеристики» на
	 * карточке товара (`scroll-margin-top` в tovar.css), поэтому и число
	 * то же. Прокрутке самой ленты отступ не мешает: она идёт вбок.
	 */
	scroll-margin-top: 84px;
}
.hbans__one > * { flex: 1 1 auto; min-width: 0; }

/*
 * Точки и стрелки — одной строкой под лентой.
 *
 * ⚠ Строка ПЕРЕНОСИТСЯ. Баннеров у арендатора может оказаться и десяток:
 * на узком экране одиннадцать точек со стрелками в 320 пикселей уже не
 * влезают, и без переноса они распирали бы ленту, а с ней и всю страницу —
 * та начинала бы ездить вбок. Стрелки при этом не сжимаются (`flex: none`):
 * круг, ужатый до овала, читается как поломка, а не как стрелка.
 */
.hbans__ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin-top: 10px; }
.hbans__dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }

/*
 * ⚠ Точка — ССЫЛКА на баннер, а не кнопка и не украшение: без скриптов она
 * листает ленту сама, якорем. Тот же приём, что у вкладок «Описание» и
 * «Характеристики» на карточке товара.
 *
 * ⚠ Нажимают ПО ССЫЛКЕ, а не по кружку: восемь пикселей — не палец. Отступы
 * доводят цель до двадцати четырёх на двадцать четыре — это тот минимум,
 * ниже которого в точку не попадают, — а сам кружок рисует `::before`.
 */
.hbans__dot { display: block; padding: 8px; line-height: 0; }
.hbans__dot:hover { text-decoration: none; }

.hbans__dot::before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--sh-line);
	transition: width .2s, background .2s;
}

.hbans__dot:hover::before { background: var(--sh-muted); }

/* ⚠ Текущая точка не только цветная, но и ВЫТЯНУТАЯ: разницу в одном цвете
   видят не все, разницу в форме — все. */
.hbans__dot[aria-current]::before { width: 22px; background: var(--sh-blue); }

/*
 * Стрелки места со сменой — маленькие и в одной строке с точками.
 *
 * ⚠ Круг поверх картинки закрывал бы ровно то, за что баннер и повесили, а на
 * плашке без картинки накрыл бы текст. Поэтому здесь стрелки на ленту не
 * наезжают — в отличие от стрелок у рядов товаров, где карточек двадцать и
 * место по краям не жалко.
 *
 * ⚠ Прячет их разметка (атрибут `hidden`), показывает home.js: без скриптов
 * стрелке неоткуда узнать, какой баннер сейчас, и она была бы мёртвой кнопкой.
 * `display: grid` сильнее `hidden`, поэтому правило ниже обязательно.
 */
.hbans__arrow {
	display: grid;
	place-items: center;
	/* ⚠ Не сжимается: место в строке уступают точки, они переносятся. */
	flex: none;
	width: 34px;
	height: 34px;
	padding: 0;
	border: .8px solid var(--sh-line);
	border-radius: 999px;
	background: var(--sh-card);
	color: var(--sh-ink);
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.hbans__arrow[hidden] { display: none; }
.hbans__arrow:hover { border-color: var(--sh-blue); color: var(--sh-blue); }

/*
 * ⚠ «Меньше движения» — это просьба НЕ ДВИГАТЬ, а не двигать помедленнее.
 * Смену по времени выключает home.js, а здесь выключается плавность: точки и
 * стрелки переставляют баннер мгновенно. Ни один баннер при этом не пропадает,
 * все на месте — просто без езды.
 */
@media (prefers-reduced-motion: reduce) {
	.hbans__strip { scroll-behavior: auto; }
	.hbans__dot::before { transition: none; }
}

/* ── плитки категорий ── */
.htiles__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.htile {
	display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
	background: var(--sh-card); border: .8px solid var(--sh-line); border-radius: 10px;
	color: var(--sh-ink);
}
.htile:hover { border-color: var(--sh-blue); text-decoration: none; }
.htile b { font-size: 15px; font-weight: 600; }
.htile i { font-style: normal; font-size: 12px; color: var(--sh-muted); }

/* ── плашки брендов ── */
.hbrands__grid { display: flex; flex-wrap: wrap; gap: 10px; }
.hbrand {
	display: inline-flex; align-items: baseline; gap: 8px; padding: 12px 18px;
	background: var(--sh-card); border: .8px solid var(--sh-line); border-radius: 10px;
	color: var(--sh-ink);
}
.hbrand:hover { border-color: var(--sh-blue); text-decoration: none; }
.hbrand b { font-size: 15px; font-weight: 600; }
.hbrand i { font-style: normal; font-size: 12px; color: var(--sh-muted); }

/* ── товар дня ── */
.hday {
	display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: center;
	background: var(--sh-card); border: .8px solid var(--sh-line); border-radius: 12px; padding: 20px;
}
.hday__pic img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--sh-bg); border-radius: 10px; }
.hday__none { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--sh-bg); border-radius: 10px; color: var(--sh-muted); font-size: 13px; }
.hday__body { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hday__tag {
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: var(--sh-blue); background: var(--sh-soft); border-radius: 999px; padding: 4px 12px;
}
.hday__name { font-size: 20px; font-weight: 600; color: var(--sh-ink); }
.hday__name:hover { color: var(--sh-blue); text-decoration: none; }
.hday__prices { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hday__now { font-size: 26px; font-weight: 700; }
.hday__ask { font-size: 18px; color: var(--sh-muted); }
.hday__old { font-size: 16px; color: var(--sh-muted); }
.hday__left { font-size: 13px; color: var(--sh-muted); }
/* Цифры отсчёта — моноширинные: иначе строка дёргается каждую секунду. */
.hday__left b { font-variant-numeric: tabular-nums; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--sh-warn); }
.hday__buy { margin: 0; }
.hday__buy button {
	padding: 12px 32px; border: 0; border-radius: 8px; background: var(--sh-blue);
	color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
/* ⚠ Тёмный оттенок берём токеном: главный цвет витрины арендатор выбирает сам
   (ShopTheme), и зашитый синий превратил бы зелёную кнопку в синюю на наведении.
   Запасное значение — то же #0b5ed7, что стоит у синих кнопок в shop.css. */
.hday__buy button:hover { background: var(--sh-blue-dark, #0b5ed7); }

@media (max-width: 900px) {
	/* На телефоне шапка ниже, а экран короче — воздуха хватает и половины. */
	.feed { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 10px; }
	/* Половинный баннер на телефоне — во всю ширину: рядом с ним всё равно пусто. */
	.feed > .hban--half { grid-column: 1 / -1; }
	.hday { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.hrow__head h2 { font-size: 18px; }
}