/* =====================================================================
   Homepage sections
   ===================================================================== */

.home-section { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.home-section + .home-section { padding-top: 0; }
.home-section__title {
	font-size: var(--fs-h2);
	margin-bottom: 1.5rem;
	text-align: center;
}

/* ---------- Hero slider ---------- */
.hero-slider {
	position: relative;
	overflow: hidden;
}
.hero-slider__track {
	display: flex;
	scroll-snap-type: x mandatory;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.hero-slider__track::-webkit-scrollbar { display: none; }
.hero-slider__slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
	min-height: clamp(320px, 60vh, 720px);
}
.hero-slider__image {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.hero-slider__content {
	position: relative;
	z-index: 2;
	display: flex; align-items: center;
	min-height: clamp(320px, 60vh, 720px);
	color: #fff;
	background: linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,0));
	padding: 3rem 0;
}
.hero-slider__heading {
	font-size: clamp(2rem, 5vw, 3.5rem);
	color: #fff;
	max-width: 36ch;
	margin-bottom: .5em;
}
.hero-slider__text {
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	max-width: 50ch;
	margin-bottom: 1.5em;
	opacity: .9;
}
.hero-slider__arrow {
	position: absolute;
	top: 50%; transform: translateY(-50%);
	width: 3rem; height: 3rem;
	background: rgba(255,255,255,.85);
	color: var(--c-text);
	border-radius: 999px;
	font-size: 1.5rem;
	display: inline-flex; align-items: center; justify-content: center;
	transition: opacity .15s ease;
}
.hero-slider__arrow:hover { opacity: 1; }
.hero-slider__arrow--prev { left: 1rem; }
.hero-slider__arrow--next { right: 1rem; }
@media (max-width: 700px) {
	.hero-slider__arrow { display: none; }
}
.hero-slider__dots {
	position: absolute;
	bottom: 1rem;
	left: 0; right: 0;
	display: flex; gap: .5rem; justify-content: center;
}
.hero-slider__dots button {
	width: 8px; height: 8px;
	border-radius: 999px;
	background: rgba(255,255,255,.6);
	transition: background .15s ease, width .15s ease;
}
.hero-slider__dots button[aria-current="true"] {
	background: #fff;
	width: 22px;
}

/* ---------- Category grid ---------- */
.cat-grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(var(--cols, 4), 1fr);
}
@media (max-width: 800px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }

.cat-grid__item a {
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-surface);
	text-align: center;
	transition: transform .15s ease;
}
.cat-grid__item a:hover { transform: translateY(-2px); text-decoration: none; }
.cat-grid__image {
	display: block;
	aspect-ratio: 1/1;
	background-size: cover;
	background-position: center;
	background-color: var(--c-surface);
}
.cat-grid__name {
	display: block;
	padding: .9em .5em;
	font-weight: 500;
}

/* ---------- Banner row ---------- */
.banner-row {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(var(--cols, 3), 1fr);
}
@media (max-width: 800px) { .banner-row { grid-template-columns: 1fr; } }

.banner {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	aspect-ratio: 16/9;
}
.banner__image {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.banner:hover .banner__image { transform: scale(1.04); }
.banner__heading {
	position: absolute;
	left: 1.5rem; bottom: 1.5rem;
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	text-shadow: 0 2px 12px rgba(0,0,0,.4);
}

/* ---------- Products section ---------- */
.home-section--products .container { /* WC products grid handles its own layout */ }