/**
 * [HP] CL homepage styles — Phase 2. Loaded only in 'cl' frontend mode by
 * cl-templates/front-page-cl.php. Template 1's look is entirely legacy CSS
 * (mgc-home.css + the template's inline blocks); this file only styles what
 * is NEW: hero variants 2/3, the standalone Cart-of-the-Week band used by
 * templates 2/3, and the no-card hero-1 modifier.
 *
 * Safari budget: no :has(), no color-mix(), no overflow:clip anywhere.
 * Brand accents use var(--cl-red)/var(--cl-red-rgb) with static fallbacks;
 * hover shades are precomputed server-side into --cl-red-dark/--cl-red-hover.
 */

/* ── Hero 1 modifier: COTW toggle off -> single centered column ──────────── */
.mgc-hero2--no-card .mgc-hero2__inner { grid-template-columns: 1fr; }
.mgc-hero2--no-card .mgc-hero2__copy { max-width: 640px; margin: 0 auto; text-align: center; }
.mgc-hero2--no-card .mgc-hero2__cta { justify-content: center; }
.mgc-hero2--no-card .mgc-hero2__trust { justify-content: center; }

/* ── Hero 2: inventory-first search hero ─────────────────────────────────── */
.cl-hero-inv {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #eef3f9 0%, #f7fafc 55%, #ffffff 100%);
	padding: 72px 24px 84px;
}
.cl-hero-inv__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(55% 55% at 88% 12%, rgba(var(--cl-red-rgb, 221, 0, 0), .07), transparent 70%),
		radial-gradient(45% 50% at 6% 92%, rgba(13, 27, 42, .06), transparent 70%);
}
.cl-hero-inv__inner {
	position: relative;
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
}
.cl-hero-inv__eyebrow {
	display: inline-block;
	font: 700 12.5px/1 var(--cl-font, 'Montserrat', sans-serif);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cl-red, #DD0000);
	background: rgba(var(--cl-red-rgb, 221, 0, 0), .08);
	padding: 9px 15px;
	border-radius: 999px;
	margin-bottom: 22px;
}
.cl-hero-inv__title {
	font-family: var(--cl-font, 'Montserrat', sans-serif) !important;
	font-weight: 700;
	font-size: clamp(34px, 4.8vw, 58px);
	line-height: 1.05;
	letter-spacing: -.015em;
	color: #332C2B;
	margin: 0 0 16px;
	text-transform: none;
}
.cl-hero-inv__title span { color: var(--cl-red, #DD0000); }
.cl-hero-inv__sub {
	font-size: clamp(16px, 1.45vw, 19px);
	line-height: 1.62;
	color: #54606e;
	margin: 0 auto 30px;
	max-width: 620px;
}
.cl-hero-inv__search {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	background: #fff;
	border: 1px solid #e6ecf3;
	border-radius: 16px;
	box-shadow: 0 24px 48px -20px rgba(13, 27, 42, .25), 0 6px 16px rgba(13, 27, 42, .06);
	padding: 14px;
	margin: 0 0 20px;
}
.cl-hero-inv__field { flex: 1 1 142px; min-width: 0; display: flex; }
.cl-hero-inv__field--keyword { flex: 2 1 170px; }
@media (min-width: 881px) {
	/* Desktop: never wrap — fields shrink (min-width:0), the button doesn't. */
	.cl-hero-inv__search { flex-wrap: nowrap; }
}
.cl-hero-inv__search input[type="text"],
.cl-hero-inv__search select {
	width: 100%;
	height: 52px;
	border: 1.5px solid #d6dde6;
	border-radius: 10px;
	background: #fff;
	color: #332C2B;
	font: 500 15px/1.2 var(--cl-font, 'Montserrat', sans-serif);
	padding: 0 14px;
	appearance: none;
	-webkit-appearance: none;
}
.cl-hero-inv__search select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354606e' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px 16px;
	padding-right: 36px;
}
.cl-hero-inv__search input[type="text"]:focus,
.cl-hero-inv__search select:focus {
	outline: none;
	border-color: var(--cl-red, #DD0000);
	box-shadow: 0 0 0 3px rgba(var(--cl-red-rgb, 221, 0, 0), .14);
}
.cl-hero-inv__search .cl-hero-inv__submit {
	/* Doubled-up selector: Motors free frontend_styles.css styles the global
	   button[type="submit"] (max-width:190px; margin-left:auto;
	   align-self:flex-start) at specificity 0,1,1 — two classes outrank it. */
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	align-self: stretch;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 52px;
	border: 0;
	border-radius: 10px;
	background: var(--cl-red, #DD0000);
	color: #fff;
	font: 700 15px/1 var(--cl-font, 'Montserrat', sans-serif);
	padding: 0 22px;
	cursor: pointer;
	box-shadow: 0 12px 26px rgba(var(--cl-red-rgb, 221, 0, 0), .28);
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cl-hero-inv__search .cl-hero-inv__submit:hover {
	background: var(--cl-red-dark, var(--cl-red-hover, #bb0000));
	transform: translateY(-1px);
	box-shadow: 0 16px 32px rgba(var(--cl-red-rgb, 221, 0, 0), .34);
	color: #fff;
}
.cl-hero-inv__search .cl-hero-inv__submit svg { width: 17px; height: 17px; }
.cl-hero-inv__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	font-size: 14px;
	color: #54606e;
	font-weight: 600;
}
.cl-hero-inv__count strong { color: #332C2B; }
.cl-hero-inv__meta-dot { opacity: .45; }
.cl-hero-inv__browse {
	color: var(--cl-red, #DD0000);
	font-weight: 700;
	text-decoration: none;
	font-family: var(--cl-font, 'Montserrat', sans-serif);
}
.cl-hero-inv__browse:hover { color: var(--cl-red-dark, var(--cl-red-hover, #bb0000)); }
@media (max-width: 880px) {
	.cl-hero-inv { padding: 44px 18px 52px; }
	.cl-hero-inv__search { flex-direction: column; padding: 12px; }
	.cl-hero-inv__field,
	.cl-hero-inv__field--keyword,
	.cl-hero-inv__search .cl-hero-inv__submit { flex: 1 1 auto; width: 100%; max-width: none; }
	.cl-hero-inv__sub { font-size: 18px; line-height: 1.6; }
}

/* ── Hero 3: lifestyle full-bleed ────────────────────────────────────────── */
.cl-hero-life {
	position: relative;
	overflow: hidden;
	min-height: 560px;
	display: flex;
	align-items: center;
	background-color: #0d1b2a;
	background-size: cover;
	background-position: center;
	padding: 96px 24px;
}
.cl-hero-life--no-img {
	background-image: linear-gradient(135deg, #0d1b2a 0%, #24364c 60%, rgba(var(--cl-red-rgb, 221, 0, 0), .55) 140%);
}
.cl-hero-life__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(13, 27, 42, .58) 0%, rgba(13, 27, 42, .38) 55%, rgba(13, 27, 42, .62) 100%);
}
.cl-hero-life__inner {
	position: relative;
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
}
.cl-hero-life__eyebrow {
	display: inline-block;
	font: 700 12.5px/1 var(--cl-font, 'Montserrat', sans-serif);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(var(--cl-red-rgb, 221, 0, 0), .85);
	padding: 9px 15px;
	border-radius: 999px;
	margin-bottom: 24px;
}
.cl-hero-life__title {
	font-family: var(--cl-font, 'Montserrat', sans-serif) !important;
	font-weight: 700;
	font-size: clamp(38px, 5.6vw, 70px);
	line-height: 1.02;
	letter-spacing: -.015em;
	color: #fff;
	margin: 0 0 18px;
	text-shadow: 0 3px 18px rgba(13, 27, 42, .45);
	text-transform: none;
}
.cl-hero-life__title span { color: #ffd7d7; }
.cl-hero-life__sub {
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.6;
	color: rgba(255, 255, 255, .92);
	margin: 0 auto 32px;
	max-width: 640px;
	text-shadow: 0 2px 10px rgba(13, 27, 42, .4);
}
.cl-hero-life__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-bottom: 26px;
}
.cl-hero-life__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font: 700 17px/1 var(--cl-font, 'Montserrat', sans-serif);
	padding: 20px 40px;
	border-radius: 12px;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.cl-hero-life__btn svg { width: 18px; height: 18px; }
.cl-hero-life__btn--primary {
	background: var(--cl-red, #DD0000);
	color: #fff;
	box-shadow: 0 14px 30px rgba(13, 27, 42, .4);
}
.cl-hero-life__btn--primary:hover {
	background: var(--cl-red-dark, var(--cl-red-hover, #bb0000));
	transform: translateY(-2px);
	color: #fff;
}
.cl-hero-life__btn--ghost {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, .65);
}
.cl-hero-life__btn--ghost:hover {
	background: #fff;
	color: #332C2B;
	border-color: #fff;
	transform: translateY(-2px);
}
.cl-hero-life__trust {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 20px;
	font-size: 14px;
	color: rgba(255, 255, 255, .92);
}
.cl-hero-life__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
}
.cl-hero-life__trust-item i { color: #fff; font-size: 14px; }
.cl-hero-life__stars { color: #f5a623; letter-spacing: 2px; }
@media (max-width: 880px) {
	.cl-hero-life { min-height: 480px; padding: 64px 18px; }
	.cl-hero-life__btn { width: 100%; max-width: 360px; justify-content: center; }
	.cl-hero-life__sub { font-size: 18px; }
	.cl-hero-life__trust { flex-direction: column; gap: 9px; }
}

/* ── Cart-of-the-Week band (templates 2/3) — reuses the hero-1 card DOM ──── */
.cl-hp-cotw { padding: 84px 24px; background: #f4f7fb; border-top: 1px solid #d8e0ec; }
.cl-hp-cotw .mgc-hp-container { max-width: 1180px; margin: 0 auto; }
.cl-hp-cotw__card {
	position: relative;
	display: block;
	max-width: 520px;
	margin: 0 auto;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 32px 60px -22px rgba(13, 27, 42, .30), 0 8px 20px rgba(13, 27, 42, .08);
	text-decoration: none;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.cl-hp-cotw__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 44px 72px -24px rgba(13, 27, 42, .36);
}
.cl-hp-cotw__card .mgc-hero2__card-img { aspect-ratio: 16 / 11; background: #eef2f7; overflow: hidden; }
.cl-hp-cotw__card .mgc-hero2__card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-hp-cotw__card .mgc-hero2__card-body { padding: 18px 20px 22px; }
.cl-hp-cotw__card .mgc-hero2__card-tag {
	display: inline-block;
	font: 700 13px/1 var(--cl-font, 'Montserrat', sans-serif);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--cl-red, #DD0000);
	margin-bottom: 9px;
}
.cl-hp-cotw__card .mgc-hero2__card-title {
	font-family: var(--cl-font, 'Montserrat', sans-serif);
	font-weight: 600;
	font-size: 20px;
	color: #332C2B;
	margin-bottom: 9px;
}
.cl-hp-cotw__card .mgc-hero2__card-prices { display: flex; align-items: baseline; gap: 10px; margin-bottom: 13px; }
.cl-hp-cotw__card .mgc-hero2__card-retail { color: #9aa6b2; text-decoration: line-through; font-size: 15px; }
.cl-hp-cotw__card .mgc-hero2__card-price { color: var(--cl-red, #DD0000); font: 700 25px/1 'Montserrat', sans-serif; }
.cl-hp-cotw__card .mgc-hero2__card-view {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 700 14px/1 var(--cl-font, 'Montserrat', sans-serif);
	color: #332C2B;
}
@media (max-width: 880px) {
	.cl-hp-cotw { padding: 56px 18px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   ENHANCED BODY PASS (2026-07-28, owner-approved five-point upgrade).
   Every selector is scoped under .cl-home--enhanced, which the dispatcher
   adds ONLY for templates in its $cl_hp_enhanced array — template 1 never
   gets the class, so its body stays pixel-frozen. See front-page-cl.php.
   ═════════════════════════════════════════════════════════════════════════ */

/* Section eyebrows: the footer's "VISIT US" treatment, centered over the
   centered section headers. Base .mgc-hp-eyebrow (red, brand font) comes
   from the inline baseline; this adds the centered-section variant. */
.cl-home--enhanced .mgc-hp-eyebrow--sec {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cl-red, #DD0000);
	margin: 0 0 10px;
}
.cl-home--enhanced .mgc-hp-section__header .mgc-hp-eyebrow--sec { text-align: center; }

/* Service split: the three proof bullets. */
.cl-home--enhanced .mgc-hp-svc-points {
	list-style: none;
	margin: 18px 0 26px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.cl-home--enhanced .mgc-hp-svc-points li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--cl-font, 'Montserrat', sans-serif);
	font-size: 14.5px;
	font-weight: 600;
	color: #3c4856;
}
.cl-home--enhanced .mgc-hp-svc-points svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	color: var(--cl-red, #DD0000);
}

/* Enhanced bottom CTA: image-backed with a deep wash, eyebrow, bigger title,
   closing trust row (the page opens on trust in the hero, closes on it here). */
.cl-home--enhanced .mgc-hp-cta-section { padding: 96px 24px !important; }
.cl-home--enhanced .mgc-hp-cta-section__overlay {
	background: linear-gradient(180deg, rgba(6, 9, 14, .82) 0%, rgba(6, 9, 14, .72) 55%, rgba(6, 9, 14, .86) 100%) !important;
}
.cl-home--enhanced .mgc-hp-cta-section__eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cl-red, #DD0000);
	margin: 0 0 12px;
	text-align: center;
}
.cl-home--enhanced .mgc-hp-cta-section__inner h2 {
	font-size: clamp(32px, 3.6vw, 48px);
	letter-spacing: -.015em;
}
.cl-home--enhanced .mgc-hp-cta-section__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 26px;
	margin: 26px 0 0;
	font: 600 13.5px/1.4 var(--cl-font, 'Montserrat', sans-serif);
	color: rgba(255, 255, 255, .78);
}
.cl-home--enhanced .mgc-hp-cta-section__trust-item { display: inline-flex; align-items: center; gap: 8px; }
.cl-home--enhanced .mgc-hp-cta-section__stars { color: #f5a623; letter-spacing: 2px; font-size: 14px; line-height: 1; }
.cl-home--enhanced .mgc-hp-cta-section__trust svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--cl-red, #DD0000); }

/* ═════════════════════════════════════════════════════════════════════════
   PREMIUM PASS (2026-07-29, owner: "make all the sections look even better
   and more premium... they like big and visual"). Same scoping contract as
   the enhanced pass above: everything under .cl-home--enhanced only.
   ═════════════════════════════════════════════════════════════════════════ */

/* 1) Section headers — bigger, tighter, more air below. */
.cl-home--enhanced .mgc-hp-section__title {
	font-size: clamp(32px, 4.2vw, 54px);
	letter-spacing: -1.5px;
	line-height: 1.06;
}
.cl-home--enhanced .mgc-hp-section__sub {
	font-size: 18px;
}
.cl-home--enhanced .mgc-hp-section__header {
	margin-bottom: 60px;
}

/* 2) Deals cards — photo-forward: taller image, slow zoom, deeper lift.
   The bg/img zoom pattern: transition on the img, scale from the card
   hover, image box clips (overflow hidden already on __image). */
.cl-home--enhanced .mgc-deal-card__img {
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.cl-home--enhanced .mgc-deal-card:hover .mgc-deal-card__img {
	transform: scale(1.06);
}
.cl-home--enhanced .mgc-deal-card:hover {
	box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
	transform: translateY(-4px);
}
.cl-home--enhanced .mgc-deal-card__price {
	font-size: 24px;
}

/* 3) View All Inventory — this block used to repaint the black button red,
   but only on the enhanced templates (2 to 6), which left template 1 with a
   black one. 2026-08-03 the button itself moved to .mgc-hp-btn--red in
   front-page-cl.php, so it is brand-colored on all six templates from the
   base stylesheet and this override had nothing left to override. Removed
   rather than left pointing at a class that no longer exists. */

/* 4) Splits — taller, and the image side gets a slow zoom on hover.
   The inline style puts the bg on the div itself; a ::before with
   background-image:inherit repaints the same image inside an
   overflow-hidden box, so scaling the ::before can never spill into
   the content half. Never scale .mgc-hp-split__image itself. */
.cl-home--enhanced .mgc-hp-split {
	min-height: 560px;
}
.cl-home--enhanced .mgc-hp-split__image {
	position: relative;
	overflow: hidden;
	min-height: 440px;
}
.cl-home--enhanced .mgc-hp-split__image::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.cl-home--enhanced .mgc-hp-split:hover .mgc-hp-split__image::before {
	transform: scale(1.05);
}

/* 5) Why cards — bigger icon with a soft red ring that tightens on hover. */
.cl-home--enhanced .mgc-hp-why__icon {
	width: 68px;
	height: 68px;
	box-shadow: 0 0 0 6px rgba(221, 0, 0, .08), 0 0 0 1px rgba(221, 0, 0, .16);
	transition: box-shadow .25s ease;
}
.cl-home--enhanced .mgc-hp-why__item:hover .mgc-hp-why__icon {
	box-shadow: 0 0 0 9px rgba(221, 0, 0, .12), 0 0 0 1px rgba(221, 0, 0, .28);
}
.cl-home--enhanced .mgc-hp-why__item {
	padding: 46px 26px 40px;
}
.cl-home--enhanced .mgc-hp-why__item h4 {
	font-size: 17px;
}

@media (max-width: 880px) {
	.cl-home--enhanced .mgc-hp-section__title {
		letter-spacing: -1px;
	}
	.cl-home--enhanced .mgc-hp-split {
		min-height: 0;
	}
	.cl-home--enhanced .mgc-hp-split__image {
		min-height: 320px;
	}
}

/* ═════════════════════════════════════════════════════════════════════════
   AUTHORIZED DEALER / BRANDS PANEL (2026-07-29, owner ask). Light strip:
   bold uppercase heading over one centered logo row (the owner's reference
   was white-on-black; house rule keeps sections light). Renders only when
   the dealer adds logos in the Theme Editor. Logos are 64px tall on
   desktop, 44px on phones, and scale to fit — recommended upload is a
   transparent PNG around 400x200.
   ═════════════════════════════════════════════════════════════════════════ */
.mgc-hp-brands {
	/* batch79 FINAL (owner: "I dont want it to have a black background I want
	   it to match the rest of the homepage but look the best possible").
	   Settled shape, three rounds in: heading + red rule stay; NO cards and
	   NO black band — the section carries no background of its own, so the
	   homepage band system paints it white or tint exactly like its
	   neighbours and the page keeps one rhythm. The wall itself is the
	   premium light-page convention: bare logos normalized to a uniform ink
	   silhouette (brightness(0) at partial opacity), generous open spacing.
	   The silhouette is also the safety: ANY upload — including a dealer's
	   white/reverse logo file — becomes visible dark ink on the light band.
	   No hover-to-color reveal on purpose: a white source file would vanish
	   at full color on this background, so hover deepens the ink and lifts
	   the mark instead. Logo size stays dealer-set via --hp-brand-h
	   (blank = 60px, field clamps 24-240). */
	padding: 68px 24px 72px;
}
.mgc-hp-brands__title {
	font-family: var(--cl-font, 'Montserrat', sans-serif);
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #17181c;
	text-align: center;
	margin: 0 0 14px;
}
.mgc-hp-brands__rule {
	display: block;
	width: 46px;
	height: 4px;
	border-radius: 2px;
	margin: 0 auto 44px;
	background: var(--cl-red, #DD0000);
}
.mgc-hp-brands__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	/* 2026-08-08 (owner): horizontal spacing is a Theme Editor slider
	   (Homepage -> Brands -> Logo spacing). Blank/unset keeps the 72 that
	   shipped, so untouched sites do not move. */
	gap: 40px var(--hp-brand-gap, 72px);
	max-width: 1160px;
	margin: 0 auto;
}
.mgc-hp-brands__logo {
	display: flex;
	align-items: center;
	justify-content: center;
}
.mgc-hp-brands__logo img {
	height: var(--hp-brand-h, 60px);
	width: auto;
	max-width: min(360px, 100%);
	object-fit: contain;
	display: block;
	/*
	 * 2026-08-08 (owner: "why are the logos showing up as gray squares").
	 * The ink-silhouette look used filter: brightness(0), which paints EVERY
	 * non-transparent pixel black — fine for a transparent PNG, but a logo
	 * saved as JPEG (or any file with a solid background) has no transparent
	 * pixels, so the whole rectangle went black and read as a grey block.
	 * mix-blend-mode: multiply gets the same uniform ink look from files
	 * that DO have transparency while a white/light logo background simply
	 * blends into the light band instead of turning into a slab. Hover
	 * returns the brand's real colours.
	 */
	filter: grayscale(1) contrast(1.06);
	mix-blend-mode: multiply;
	opacity: .72;
	transition: opacity .22s ease, transform .22s ease, filter .22s ease;
}
.mgc-hp-brands__logo:hover img,
.mgc-hp-brands__logo:focus-within img {
	filter: none;
	opacity: 1;
	transform: translateY(-2px);
}
/* 2026-08-08 (owner): Theme Editor -> Homepage -> Brands -> Logo colour =
   "Full colour always". The blend stays so a logo's own background still
   melts into the band; only the grey is dropped. */
.mgc-hp-brands--color .mgc-hp-brands__logo img { filter: none; opacity: 1; }
@media (max-width: 768px) {
	.mgc-hp-brands { padding: 46px 16px 50px; }
	.mgc-hp-brands__title { margin-bottom: 12px; }
	.mgc-hp-brands__rule { margin-bottom: 30px; }
	.mgc-hp-brands__row { gap: 24px 40px; }
	.mgc-hp-brands__logo img { height: min(calc(var(--hp-brand-h, 60px) * .72), 120px); max-width: 42vw; }
}