/* input(111,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '#brand-tiles'
input: run-time error CSS1066: Unexpected end of file encountered */
/* ============================================================================
   Home — critical (above-the-fold) CSS.
   Preloaded via <link rel="preload"> in Views/Home/Index.cshtml @section
   Preloads. Covers the video hero, brand tiles, and the section-padding /
   backgrounds framework — everything needed to paint the first screen.

   Everything below-the-fold (USP, buyer protection, category cards, brand
   logos strip, CTA rail, SEO sections, responsive tweaks) lives in home.css.

   Consumes design tokens defined in tokens.css (loaded globally).
   ============================================================================ */

html, body, main {
	background: #fff;
	color: var(--ink);
}

#home-carousel {
	margin-bottom: 0;
}

.white-section, .grey-section, .black-section,
#brand-tiles, #usp-section, #NewArrivalsSection,
#cta-section, #category-cards, #buyer-protection,
section.home-seo-1, section.home-seo-2 {
	background: #fff;
	border-top: 0;
	border-bottom: 0;
}

section.home-seo-1, #cta-section, section.home-seo-2 {
	background: #f6f7f8;
}

/* Brand tiles — grey band */
#brand-tiles {
	background: #f6f7f8;
}

#brand-tiles, #NewArrivalsSection, #usp-section,
section.home-seo-1, #category-cards, #cta-section,
#buyer-protection, section.home-seo-2 {
	padding-top: var(--home-section-pad-y);
	padding-bottom: var(--home-section-pad-y);
}

@media (max-width: 768px) {
	#brand-tiles, #NewArrivalsSection, #usp-section,
	section.home-seo-1, #category-cards, #cta-section,
	#buyer-protection, section.home-seo-2 {
		padding-top: var(--home-section-pad-y-sm);
		padding-bottom: var(--home-section-pad-y-sm);
	}
}

#brand-tiles .container, #usp-section .container,
#NewArrivalsSection .container, #cta-section .container,
#category-cards .container, section.home-seo-1 .container,
section.home-seo-2 .container, #buyer-protection .container {
	padding-left: 12px;
	padding-right: 12px;
}

/* ── Brand tiles ─────────────────────── */
.brand-tile {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #f6f7f8;
	border: none;
	box-shadow: none;
	outline: none;
	isolation: isolate;
	transition: transform .18s ease;
}

	.brand-tile:hover {
		transform: translateY(-2px);
		border: none;
		box-shadow: none;
		outline: none;
	}

a.brand-tile, a.brand-tile:hover, a.brand-tile:focus,
a.brand-tile:active, a.brand-tile:visited {
	border: none;
	box-shadow: none;
	outline: none;
	text-decoration: none;
}

.brand-tile__bg,
.brand-tile__overlay {
	inset: -1px;
	border-radius: 0;
	transform: none;
	backface-visibility: visible;
}

.usp-card, .bp-card, .bp-cta, .category-card {
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--card-shadow);
	overflow: hidden;
	background: #fff;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	will-change: transform;
}

	.usp-card:hover, .bp-card:hover, .bp-cta:hover, .category-card:hover {
		transform: translateY(-2px);
#brand-tiles::before {
	display: none;
}