/* Sitex Brand Display — front-end styles */

.sitex-bd-wrap {
	--sitex-bd-visible: 6;
	--sitex-bd-duration: 30s;
	width: 100%;
	padding: 48px 0;
	box-sizing: border-box;
	overflow: hidden;
}

/*
 * Base heading style: bold, not uppercase, not oversized, so it sits
 * quietly alongside other section headings rather than shouting over
 * them. Alignment and font size are configurable in Settings > Brand
 * Display and are applied inline, overriding the values below.
 */
.sitex-bd-heading {
	text-align: left;
	margin: 0 0 30px;
	padding: 0 24px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-transform: none;
	line-height: normal;
	color: #030712;
}

@media (min-width: 768px) {
	.sitex-bd-heading {
		font-size: 18px;
	}
}

.sitex-bd-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.sitex-bd-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: sitex-bd-scroll var(--sitex-bd-duration) linear infinite;
}

.sitex-bd-wrap:hover .sitex-bd-track {
	animation-play-state: paused;
}

.sitex-bd-wrap.sitex-bd-paused .sitex-bd-track {
	animation-play-state: paused;
}

@keyframes sitex-bd-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.sitex-bd-item {
	flex: 0 0 auto;
	width: calc(100vw / var(--sitex-bd-visible));
	max-width: 220px;
	min-width: 120px;
	padding: 0 32px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.sitex-bd-item img {
	max-width: 100%;
	max-height: 64px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.sitex-bd-item a {
	display: block;
	line-height: 0;
}

.sitex-bd-grayscale .sitex-bd-item img {
	filter: grayscale(100%);
	opacity: 0.6;
}

.sitex-bd-grayscale .sitex-bd-item:hover img {
	filter: grayscale(0%);
	opacity: 1;
	transform: scale(1.05);
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.sitex-bd-track {
		animation: none;
	}
	.sitex-bd-viewport {
		overflow-x: auto;
	}
}

/* Responsive: fewer logos visible per row on smaller screens. */
@media (max-width: 900px) {
	.sitex-bd-item {
		width: calc(100vw / min(var(--sitex-bd-visible), 4));
	}
}

@media (max-width: 600px) {
	.sitex-bd-heading {
		font-size: 16px;
	}
	.sitex-bd-item {
		width: calc(100vw / min(var(--sitex-bd-visible), 2));
		padding: 0 20px;
	}
}

/* Brand logo shown top-right, directly above the result count/sorting row on a single brand archive page. */
.sitex-bd-archive-banner {
	display: flex;
	justify-content: flex-end;
	margin: 4px 0 16px;
}

.sitex-bd-archive-logo {
	max-height: 64px;
	max-width: 180px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* ── Product-page brand logo ─────────────────────────────────────────────── */

.sitex-bd-product-logo {
	line-height: 0;
}

.sitex-bd-product-logo img {
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	max-width: 140px;
}

.sitex-bd-product-logo a {
	display: inline-block;
	line-height: 0;
}

.sitex-bd-product-logo--after-meta {
	display: block;
	margin-top: 5px;
}

.sitex-bd-product-logo--above-image {
	display: block;
	margin: 0 0 14px 2px;
	clear: both;
}

.sitex-bd-product-logo--below-image {
	display: block;
	margin: 14px 0 0 2px;
	clear: both;
}

.sitex-bd-product-logo--above-title {
	display: block;
	margin-bottom: 10px;
}

.sitex-bd-product-logo--above-price {
	display: block;
	margin-bottom: 8px;
}

/* ── Quick-view brand logo ───────────────────────────────────────────────── */

.sitex-bd-qv-logo {
	margin-top: 14px;
	line-height: 0;
}

.sitex-bd-qv-logo img {
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	max-width: 140px;
}

.sitex-bd-qv-logo a {
	display: inline-block;
	line-height: 0;
}