/*
 * Главная витрины: лента блоков.
 *
 * ⚠ Своих цветов здесь нет ни одного — только переменные --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); }
.hrow__all { font-size: 13px; font-weight: 600; margin-left: auto; }

/*
 * Стрелки листания — по бокам ленты, поверх её краёв.
 *
 * ⚠ В шапке ряда они стояли рядом со ссылкой «Все …» и читались как часть
 * заголовка: непонятно, что двигают. У края ленты сомнений не остаётся.
 *
 * ⚠ Наезжают на ленту, а не стоят снаружи: вынести их за край значит отобрать
 * у карточек по 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 {
	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; }
}
/* ── ряд карточек ── */
/*
 * ⚠ Ширина колонки считается от числа карточек в ряду, а не задана в пикселях.
 * Ряд обязан кончаться ровно по краю ленты: карточка, срезанная краем экрана
 * пополам, читается как поломка вёрстки, а не как «дальше есть ещё».
 */
.hrow__strip {
	/*
	 * ⚠ Число из настройки приходит как `--feed-cols` с ленты-родителя, а не
	 * проставляется здесь атрибутом style. Инлайновый `--cols` на самом ряду
	 * перебил бы медиа-запросы ниже — они правят это же свойство у этого же
	 * селектора, а инлайн сильнее любого из них. Тогда выбранные владельцем
	 * шесть карточек остались бы шестью и на телефоне.
	 */
	--cols: var(--feed-cols, 5);
	--gap: 16px;
	display: grid;
	grid-auto-flow: column;
	/*
	 * ⚠ Колонка ФИКСИРОВАННАЯ, без `minmax(0, …)`. С `minmax` базовый размер
	 * колонки нулевой, и грид раздаёт свободное место поровну ВМЕСТО
	 * переполнения: двенадцать карточек в ленте шириной 1376 px становились по
	 * сто пикселей, `scrollWidth` равнялся `clientWidth`, и ряд не листался
	 * вовсе — ни пальцем, ни стрелками.
	 */
	grid-auto-columns: calc((100% - (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: обрезанная справа вторая карточка — это
 * единственная подсказка, что ряд листается. С ровной единицей покупатель
 * считает, что товар в разделе один.
 */
@media (max-width: 460px) { .hrow__strip { --cols: 1.4; --gap: 12px; } }

/* ── баннер ── */
.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; }

/* ── плитки категорий ── */
.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; }
	/* Ссылка «Все …» на узком экране уезжает под заголовок, а не жмёт его. */
	.hrow__all { margin-left: 0; }
}