/* Лента брендов. Полосу прокрутки и стрелки даёт общий carousel.css,
   здесь только заголовок блока и плитки. */

.sb-brands {
	--sb-carousel-item: 160px;

	margin: 36px 0 8px;
}

/* Шапка — общая плашка `.sb-band` из theme.css. */
.sb-brands__head {
	justify-content: space-between;
	margin-bottom: 16px;
}

.sb-brands__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: #fff;
	font-size: 22px;
}

/* Звезда перед заголовком блока — тот же знак, что в логотипе и в подвале. */
.sb-brands__title::before {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: var(--sb-red);
	content: '';
	-webkit-mask: var(--sb-i-star) center / contain no-repeat;
	mask: var(--sb-i-star) center / contain no-repeat;
}

/* Вход в полный список — тот же штамп, что дата партии на стене поступлений
   и счёт отделов на доске: общий `.sb-stamp` из theme.css. */
.sb-brands__all {
	white-space: nowrap;
}

.sb-brands__tile {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 10px 12px;
	border: var(--sb-rule) solid var(--sb-line);
	background: var(--sb-card);
	color: var(--sb-ink);
	text-align: center;
	text-decoration: none;
	transition: translate .14s, box-shadow .14s;
}

.sb-brands__tile:hover,
.sb-brands__tile:focus-visible {
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-red);
	color: var(--sb-ink);
	text-decoration: none;
	translate: calc(var(--sb-shift) * -1) calc(var(--sb-shift) * -1);
}

/* Логотипы разной формы и с разным фоном: вписываем целиком в общую рамку,
   обрезать нельзя — от логотипа останется угол. */
.sb-brands__logo {
	width: 100%;
	max-width: 120px;
	height: 60px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.sb-brands__name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
	.sb-brands__tile {
		transition: none;
	}
}