.hero-banner { position: relative; background-color: var(--color-background); padding: var(--spacing-16) 0; }
.hero-banner .container { display: flex; align-items: center; gap: var(--spacing-8); }
.hero-content h1 { font-size: var(--font-size-4xl); margin-bottom: var(--spacing-4); }
.hero-content p { font-size: var(--font-size-lg); margin-bottom: var(--spacing-6); }
.hero-ctas { display: flex; gap: var(--spacing-4); }
.hero-banner img { width: 50%; border-radius: var(--border-radius-lg); }
.bestsellers-carousel .carousel { display: flex; gap: var(--spacing-4); overflow-x: auto; }
.carousel-item { min-width: 300px; }
.promotions-spotlight .promo-banner { margin-bottom: var(--spacing-8); }
.categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--spacing-4); }
.category-card { padding: var(--spacing-6); background-color: var(--color-neutral-100); border-radius: var(--border-radius-lg); text-align: center; transition: box-shadow var(--transition); }
.category-card:hover { box-shadow: var(--shadow-lg); }
.new-arrivals-scroll { display: flex; gap: var(--spacing-4); overflow-x: auto; }
.arrival-item { min-width: 250px; position: relative; }
.badge { position: absolute; top: var(--spacing-2); right: var(--spacing-2); background-color: var(--color-warning); color: var(--color-text); padding: var(--spacing-1) var(--spacing-2); border-radius: var(--border-radius-sm); font-size: var(--font-size-xs); }
.brands-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-4); }
.brand-card { text-align: center; }
.loyalty-program .benefits-icons { display: flex; justify-content: center; gap: var(--spacing-6); margin: var(--spacing-6) 0; }
.reviews-slider { display: flex; gap: var(--spacing-4); overflow-x: auto; }
.review-item { min-width: 300px; }
.picks-carousel { display: flex; gap: var(--spacing-4); overflow-x: auto; }
.pick-item { min-width: 250px; }
.newsletter-form { display: flex; gap: var(--spacing-4); margin-bottom: var(--spacing-6); }
.support-links { display: flex; justify-content: center; gap: var(--spacing-6); }
@media (max-width: 768px) { .hero-banner .container { flex-direction: column; text-align: center; } .hero-banner img { width: 100%; } .hero-ctas { justify-content: center; } .categories-grid, .brands-grid { grid-template-columns: 1fr; } .benefits-icons, .support-links { flex-direction: column; align-items: center; } }