/* Верхнее меню каталога. Без зависимостей от бутстрапа — только сетка контейнера.
   Цвета и шрифты берутся из theme.css.

   Полоса кумачовая, а не чёрная: на листе должна быть одна большая масса красного,
   и её место — вверху, сразу под шапкой. Вход в каталог на ней, наоборот, чёрный —
   так он читается как отдельная кнопка, а не как часть полосы.

   Полоса липкая: при прокрутке каталог остаётся под рукой на любой длине списка.
   Тень не рисуем, отрыв от страницы показывает чёрная линейка снизу. */

.sb-nav {
	--sb-bar: var(--sb-red);
	--sb-bar-text: #fff;
	--sb-accent: var(--sb-ink);
	--sb-panel: var(--sb-card);

	position: sticky;
	z-index: 30;
	top: 0;
	border-bottom: var(--sb-rule) solid var(--sb-ink);
	background: var(--sb-bar);
	color: var(--sb-bar-text);
	font-family: var(--sb-display);
	font-size: 15px;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.sb-nav__inner {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

/* Домик + вход в каталог держатся вместе одной группой: на телефоне полоса
   уходит в столбец, и без общего контейнера звезда осталась бы сиротской
   строкой над кнопкой, с пустым кумачовым полем сбоку.

   align-items: flex-start, не stretch — на телефоне открытая панель каталога
   раздувает высоту .sb-nav__catalogue на весь список категорий, и без этого
   звезда рядом тянулась бы вместе с ней. Оба блока держат свою высоту сами
   через min-height: 48px. */
.sb-nav__lead {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

/* Домик ----------------------------------------------------------------------
   Полоса липкая и всегда на виду, а шапка с логотипом при прокрутке уходит
   наверх — без своего знака страница длиной в несколько экранов остаётся
   без дороги домой. Знак — та же звезда, что в логотипе шапки (#logo h1
   a::before), тот же квадратный ритм, что у кнопки каталога рядом. */
.sb-nav__home {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 18px;
	background: var(--sb-accent);
	transition: background-color .12s;
}

.sb-nav__home:hover,
.sb-nav__home:focus-visible {
	background: var(--sb-red-dark);
}

.sb-nav__home-mark {
	width: 20px;
	height: 20px;
	background: #fff;
	-webkit-mask: var(--sb-i-star) center / contain no-repeat;
	mask: var(--sb-i-star) center / contain no-repeat;
	transition: rotate .25s;
}

.sb-nav__home:hover .sb-nav__home-mark,
.sb-nav__home:focus-visible .sb-nav__home-mark {
	rotate: -18deg;
}

/* Вход в каталог ------------------------------------------------------------ */

.sb-nav__catalogue {
	position: relative;
	flex: 0 0 auto;
}

.sb-nav__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
	min-height: 48px;
	padding: 0 20px;
	border: 0;
	background: var(--sb-accent);
	color: #fff;
	font: inherit;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	/* Без этого мобильные браузеры ждут ~300мс после тапа — вдруг это первая
	   половина двойного тапа для зума — и первое нажатие срабатывает с
	   заметной задержкой (жалоба пользователя, 21.08.2026). У кнопки нет
	   тач-жестов, которым можно помешать — сразу отдаём тап клику. */
	touch-action: manipulation;
}

.sb-nav__toggle:hover,
.sb-nav__toggle[aria-expanded="true"] {
	background: var(--sb-red-dark);
	color: #fff;
}

.sb-nav__burger {
	position: relative;
	width: 16px;
	height: 2px;
	background: currentColor;
	box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

/* Панель -------------------------------------------------------------------- */

.sb-nav__panel {
	display: none;
	position: absolute;
	z-index: 40;
	top: 100%;
	left: 0;
	width: min(920px, 92vw);
	max-height: min(70vh, 640px);
	overflow-y: auto;
	padding: 18px;
	border: var(--sb-rule) solid var(--sb-ink);
	border-top: 0;
	background: var(--sb-panel);
	color: var(--sb-ink);
	font-family: var(--sb-text);
	letter-spacing: 0;
	text-transform: none;
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-red);
}

/* Без скрипта панель живёт на :hover и :focus-within — меню работает всегда.
   Как только скрипт подключился, он ставит на меню data-js и берёт открытие
   на себя: там задержка, клик и Esc. */
.sb-nav:not([data-js]) .sb-nav__catalogue:hover .sb-nav__panel,
.sb-nav:not([data-js]) .sb-nav__catalogue:focus-within .sb-nav__panel,
.sb-nav__catalogue[data-open] .sb-nav__panel {
	display: block;
}

.sb-nav__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-nav__group {
	break-inside: avoid;
}

.sb-nav__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	color: var(--sb-ink);
	text-decoration: none;
}

.sb-nav__link:hover,
.sb-nav__link:focus-visible {
	background: var(--sb-paper-2);
	color: var(--sb-accent);
}

/* Знак отдела вместо картинки категории. `background` здесь — не подложка, а краска
   самого знака: он вырезан маской, поэтому цветом управляет фон. */
.sb-nav__thumb {
	width: 34px;
	height: 34px;
	background: var(--sb-ink);
}

.sb-nav__link:hover .sb-nav__thumb,
.sb-nav__link:focus-visible .sb-nav__thumb {
	border-color: var(--sb-red);
	background: var(--sb-red);
}

.sb-nav__name {
	flex: 1 1 auto;
	line-height: 1.25;
}

.sb-nav__count {
	flex: 0 0 auto;
	color: var(--sb-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* Закреплённые категории ---------------------------------------------------- */

.sb-nav__pinned {
	display: flex;
	align-items: stretch;
	/* min-width:0 — без него флекс-элемент не сжимается уже своего контента
	 * (initial min-width:auto), сколько бы overflow-x:auto тут ни было: пункты
	 * в один ряд без переноса (white-space:nowrap ниже) на телефоне шире экрана,
	 * и вместо прокрутки внутри своей полосы вся шапка — а за ней и страница —
	 * растягивалась по их суммарной ширине. Отсюда и «плывущее» окно добавления
	 * в корзину на мобильном: браузер считал экран шире настоящего. */
	min-width: 0;
	gap: 2px;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.sb-nav__pinned::-webkit-scrollbar {
	display: none;
}

.sb-nav__pinned a {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 14px;
	color: var(--sb-bar-text);
	text-decoration: none;
	white-space: nowrap;
}

.sb-nav__pinned a:hover,
.sb-nav__pinned a:focus-visible {
	background: var(--sb-ink);
	color: #fff;
}

/* Фокус с клавиатуры виден всегда, мышью — нет. */
.sb-nav :focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}

.sb-nav__panel :focus-visible {
	outline-color: var(--sb-accent);
}

/* Мелкие экраны ------------------------------------------------------------- */

@media (max-width: 991px) {
	.sb-nav__inner {
		flex-direction: column;
		gap: 0;
	}

	/* Кнопка каталога дотягивается до правого края строки, звезда рядом
	   остаётся своим квадратом — одна строка вместо пустой кумачовой полосы
	   над кнопкой. */
	.sb-nav__catalogue {
		flex: 1 1 auto;
	}

	.sb-nav__toggle {
		width: 100%;
	}

	/* На телефоне панель — не выпадашка под кнопкой, а полноэкранная шторка
	   (жалоба пользователя, 21.08.2026): список категорий длинный (около 20),
	   в одну узкую колонку под кнопкой он растягивал страницу вниз на
	   несколько экранов и терялся среди остального контента. Отдельная
	   плашка-«подложка» (.sb-nav__scrim) под ней и есть то самое затемнение
	   сайта — панель сама встаёт вплотную к краям экрана и её не видно, но
	   без неё переход открытия читался бы как рывок, а не как модальное окно. */
	.sb-nav__panel {
		position: fixed;
		inset: 0;
		z-index: 10001;
		width: auto;
		max-width: none;
		max-height: none;
		margin: 0;
		padding: 64px 20px 24px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.sb-nav__scrim {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 10000;
		background: rgb(0 0 0 / 55%);
	}

	.sb-nav__catalogue[data-open] .sb-nav__scrim {
		display: block;
	}

	.sb-nav__close {
		display: flex;
		position: fixed;
		top: 12px;
		right: 20px;
		z-index: 10002;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: var(--sb-rule) solid var(--sb-ink);
		background: var(--sb-panel);
		color: var(--sb-ink);
		font-size: 22px;
		line-height: 1;
		touch-action: manipulation;
	}

	/* Прокрутка списка категорий, а не всей страницы под шторкой — иначе
	   на длинном списке уезжает и содержимое сайта позади. */
	html.sb-nav-open {
		overflow: hidden;
	}

	/* Плиткой, не одной колонкой — та же причина, что и у самой шторки: длинный
	   список в одну колонку растягивался вниз на несколько экранов. Название
	   переносится на вторую строку (.sb-nav__name это уже позволяет), в узкой
	   колонке это норм. */
	.sb-nav__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sb-nav__pinned {
		border-top: 1px solid rgb(255 255 255 / 12%);
	}

	.sb-nav__pinned a {
		min-height: 44px;
	}
}

@media (min-width: 992px) {
	.sb-nav__scrim,
	.sb-nav__close {
		display: none !important;
	}
}

/* Панель на телефоне открывается только по кнопке: hover там ложный. */
@media (hover: none) {
	.sb-nav:not([data-js]) .sb-nav__catalogue:hover .sb-nav__panel {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sb-nav * {
		transition: none !important;
	}
}