/* Vaakasuunnassa vieritettävä rivi tuotemerkkien logoista. Ei scroll-snapia
   (toisin kuin tuote-/arvostelukarusellissa) — logoja selataan vapaasti,
   niitä ei ole tarkoitus pysäyttää yksi kerrallaan ruudun kohdalle. */
.brand-carousel-track {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: 2.5rem;
	align-items: center;
	padding: 0.5rem 0.25rem;
}

.brand-carousel-track::-webkit-scrollbar {
	display: none;
}

@media (min-width: 1024px) {
	.brand-carousel-track {
		scrollbar-width: thin;
		scrollbar-color: #ccc transparent;
		padding-bottom: 0.75rem;
	}

	.brand-carousel-track::-webkit-scrollbar {
		display: block;
		height: 4px;
	}

	.brand-carousel-track::-webkit-scrollbar-track {
		background: transparent;
	}

	.brand-carousel-track::-webkit-scrollbar-thumb {
		background-color: #ccc;
		border-radius: 4px;
	}
}

.brand-carousel-item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

.brand-carousel-item:hover,
.brand-carousel-item:focus-visible {
	opacity: 1;
}

.brand-carousel-item img {
	display: block;
	height: 100%;
	width: auto;
	max-width: 160px;
	object-fit: contain;
}

/* Rivin viimeinen, valinnainen "Näytä kaikki ->" -tekstilinkki — eri tyyli
   kuin logot, koska se ei ole kuva vaan navigointilinkki. */
.brand-carousel-viewall {
	white-space: nowrap;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	padding: 0 0.5rem;
	opacity: 1;
}

.brand-carousel-viewall span {
	transition: transform 0.15s ease;
	display: inline-block;
}

.brand-carousel-viewall:hover span,
.brand-carousel-viewall:focus-visible span {
	transform: translateX(3px);
}