/* =========================================================
   Brand strip — auto-scrolling list of compatible brands.
   Sits between hero and category-grid. Substantiates the
   "240+ marche" claim from the hero stats. Behaves as a
   horizontal "binder spine": hairline top + bottom, items
   separated by 1px verticals like a printed tab divider.
   No shadow, no rounded > 6px, no decorative color. Logos
   render grayscale at rest (printed-binder feel) and gain
   their real color only on hover, which doubles as the
   "this is clickable" affordance.
   ========================================================= */

/* Outer section. Negative side breathing: section-head sits inside
   .mz-container as usual, but the marquee track goes full-bleed so
   the hairline reads as a band across the page, not as a card. */
.mz-brands-section { padding-top: var(--s-8); padding-bottom: var(--s-8); }

/* The full-bleed band. Top/bottom 1px hairlines on top of paper.
   The viewport masks the marquee with a soft paper fade on both
   edges so items don't pop in/out at the container edge. */
.mz-brands {
	position: relative;
	background: var(--paper);
	border-top:    1px solid var(--border);
	border-bottom: 1px solid var(--border);
	overflow: hidden;
}
.mz-brands::before,
.mz-brands::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: 96px;
	pointer-events: none;
	z-index: 2;
}
.mz-brands::before { left: 0;  background: linear-gradient(to right, var(--paper), transparent); }
.mz-brands::after  { right: 0; background: linear-gradient(to left,  var(--paper), transparent); }

/* The scrolling track. Two copies of the list inside, total width
   ~200% of "one set"; animating translate from 0 → -50% loops seamlessly
   because the second half is a duplicate of the first. */
.mz-brands__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	width: max-content;
}

/* One item. Padding does the spacing job; vertical 1px ruling does the
   separation. Border-left at 1px is a hairline divider, not a colored
   accent stripe — explicitly endorsed by the design system for
   "tab divider" rhythm in catalog UIs. */
.mz-brands__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	height: 88px;
	padding: 0 var(--s-7);
	border-left: 1px solid var(--border);
	color: var(--ink-2);
	text-decoration: none;
	transition:
		background-color var(--d-1) var(--ease),
		color            var(--d-1) var(--ease);
	flex: 0 0 auto;
}
.mz-brands__item:first-child { border-left: 0; } /* never let the first column carry a leading divider */
.mz-brands__item:hover { background: var(--paper-2); color: var(--ink-1); border-bottom-color: transparent; }
.mz-brands__item:focus-visible {
	outline: 2px solid var(--border-focus);
	outline-offset: -2px; /* inset so the strip's flush edge stays clean */
}

/* Text fallback when a brand has no logo image. Inter 500, slightly
   tracking-tight; on hover it does NOT pick up an underline (the row
   already gains a paper-2 wash + ink-1 color). Underlines on a moving
   marquee feel chattery. */
.mz-brands__name {
	font: 500 18px/1 var(--ff-ui);
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* Logo image. Capped at 28px tall, contained, grayscale + dim at rest;
   recovers full color and opacity on item hover. Object-fit contain
   keeps wide and tall logos at the same visual weight. */
.mz-brands__logo {
	display: block;
	height: 28px;
	max-width: 132px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1) contrast(1.05);
	opacity: 0.62;
	transition:
		filter   var(--d-2) var(--ease),
		opacity  var(--d-2) var(--ease);
}
.mz-brands__item:hover .mz-brands__logo,
.mz-brands__item:focus-visible .mz-brands__logo {
	filter: none;
	opacity: 1;
}

/* Marquee animation. We move the track from 0 to -50% because the items
   array is rendered twice; at -50% we're at the start of the duplicate,
   visually indistinguishable from the start. Linear timing so the speed
   stays constant; ease-out would make the seam visible. Duration scales
   loosely with number of items, but 42s is a comfortable default for
   ~20 brands × ~220px each. */
.mz-brands--marquee .mz-brands__track {
	animation: mz-brands-marquee 42s linear infinite;
	will-change: transform;
}
.mz-brands--marquee:hover .mz-brands__track,
.mz-brands--marquee:focus-within .mz-brands__track {
	animation-play-state: paused;
}
@keyframes mz-brands-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* When the user prefers reduced motion, kill the marquee and let them
   pan the strip with finger / wheel. The duplicate items stay in the
   DOM (still aria-hidden) but they no longer cause visual confusion
   because there's no movement; the user-controlled scroll position is
   the only thing that changes. */
@media (prefers-reduced-motion: reduce) {
	.mz-brands--marquee .mz-brands__track {
		animation: none;
	}
	.mz-brands {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
	.mz-brands__item { scroll-snap-align: start; }
	/* Fade masks become misleading when content is genuinely scrollable;
	   keep them visually but soften so they don't suggest "no more content". */
	.mz-brands::before,
	.mz-brands::after { width: 40px; }
}

/* Narrow viewports — shrink the item width so 3–4 brands fit cleanly
   and reduce the side fades; the marquee still works at 220px+ items. */
@media (max-width: 800px) {
	.mz-brands-section { padding-top: var(--s-7); padding-bottom: var(--s-7); }
	.mz-brands__item   { min-width: 156px; height: 76px; padding: 0 var(--s-5); }
	.mz-brands__logo   { height: 24px; max-width: 108px; }
	.mz-brands__name   { font-size: 16px; }
	.mz-brands::before,
	.mz-brands::after  { width: 56px; }
	.mz-brands--marquee .mz-brands__track { animation-duration: 32s; }
}

/* Dark theme — logos lose their grayscale dimming. Most appliance-brand
   logos were drawn for light backgrounds and look washed out at low
   opacity on a near-black surface; in dark we want them readable so we
   keep saturation and bump opacity baseline. Hover then loses the
   filter entirely (already true) and inks the row. */
[data-theme="dark"] .mz-brands__logo,
[data-theme="dark"] .mz-brands__item:focus-visible .mz-brands__logo {
	filter: grayscale(0.4) contrast(1) brightness(1.05);
	opacity: 0.82;
}
[data-theme="dark"] .mz-brands__item:hover .mz-brands__logo {
	filter: none;
	opacity: 1;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="dark"]) .mz-brands__logo {
		filter: grayscale(0.4) contrast(1) brightness(1.05);
		opacity: 0.82;
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .mz-brands__item:hover .mz-brands__logo {
		filter: none;
		opacity: 1;
	}
}