.hp-section { margin-bottom: var(--gap-lg); }
.hp-section__title {
	margin-bottom: var(--gap-md);
	position: relative;
	padding-bottom: var(--gap-sm);
}
/* Small accent underline beneath homepage section titles -- the same
   "premium storefront" cue used for the nav hover state in header.css. */
.hp-section__title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	height: 3px;
	background: var(--color-primary);
	border-radius: 2px;
}
.hp-section__title--center { text-align: center; }
.hp-section__title--center::after { left: 50%; transform: translateX(-50%); }

.hp-hero {
	background-size: cover; background-position: center;
	min-height: 420px; display: flex; align-items: center;
	background-color: var(--color-bg-alt);
	position: relative;
}
/* Subtle scrim so hero text stays legible over any background photo,
   without needing a separate "has image" class from the Customizer. */
.hp-hero::before {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0));
}
.hp-hero__content { max-width: 560px; position: relative; z-index: 1; }
.hp-hero__content h1 { font-size: clamp(2rem, 4vw, 3rem); }

.hp-categories__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap-md); }
.category-card { position: relative; text-align: center; padding: var(--gap-md); }
.category-card img {
	border-radius: 50%;
	aspect-ratio: 1/1;
	object-fit: cover;
	margin: 0 auto 8px;
	transition: transform var(--transition-base);
}
.category-card:hover img { transform: scale(1.05); }
.category-card:hover { border-color: transparent; }

.product-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 25%; gap: var(--gap-md); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.product-carousel__slide { scroll-snap-align: start; }

.hp-banner { position: relative; overflow: hidden; border-radius: var(--radius); }
.hp-banner img { width: 100%; display: block; transition: transform var(--transition-base); }
.hp-banner:hover img { transform: scale(1.03); }

@media (max-width: 900px) {
	.hp-categories__grid { grid-template-columns: repeat(3, 1fr); }
	.product-carousel { grid-auto-columns: 60%; }
}