Fix icon colors being overridden, and expand the palette

The .empty svg rule (styling the OrdersIcon/BasketIcon) was a plain
descendant selector, so it also matched — and, with higher specificity
than inherited color, overrode — the backdrop's own food-icon svgs
nested inside the same .empty box. Scope it to a direct child (> svg)
so it only targets the actual empty-state icon.

Also expands the backdrop palette from 3 to 6 colors (adds basil,
berry, and cocoa) for more variety across the icons.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/components/ordering/MenuBackdrop.tsx

@@ -46,7 +46,14 @@ const FriesIcon = () => (
 )
 
 const ICONS = [PizzaIcon, BurgerIcon, FriesIcon]
-const ICON_COLORS = ['#e2725b', '#d9a441', '#e8c468']
+const ICON_COLORS = [
+  '#e2725b', // tomato
+  '#d9a441', // crust
+  '#e8c468', // cheese
+  '#7a9d6e', // basil
+  '#a5678f', // berry
+  '#8a5a44', // cocoa
+]
 
 // Fixed, hand-placed positions rather than random ones — random values would
 // differ between the server-rendered and first client-rendered HTML and

src/components/orders/OrdersListView.module.scss

@@ -39,7 +39,9 @@
     animation: empty-state-enter 0.32s cubic-bezier(0.2, 0, 0, 1) both;
   }
 
-  svg {
+  // Direct child only — a plain descendant selector would also catch the
+  // backdrop's own icons (see MenuBackdrop), overriding their per-icon color.
+  > svg {
     width: 2.5rem;
     height: 2.5rem;
     margin-bottom: $space-2;

src/routes/basket.module.scss

@@ -33,7 +33,9 @@
   background: $color-surface;
   overflow: hidden;
 
-  svg {
+  // Direct child only — a plain descendant selector would also catch the
+  // backdrop's own icons (see MenuBackdrop), overriding their per-icon color.
+  > svg {
     width: 2.5rem;
     height: 2.5rem;
     margin-bottom: $space-2;