.hero { background-size: cover; background-position: center; padding: var(--spacing-20) 0; color: #ffffff; text-align: center; }
.hero .container { max-width: 800px; }
.categories ul { list-style: none; padding: 0; }
.categories li { margin-bottom: var(--spacing-2); }
.recommended-products .grid { gap: var(--spacing-6); }
.new-arrivals .grid { gap: var(--spacing-6); }
@media (max-width: 768px) { .grid-cols-3 { grid-template-columns: 1fr; } .grid-cols-2 { grid-template-columns: 1fr; } }
section { padding: var(--spacing-10) 0; }