diff --git a/src/components/ordering/MenuBackdrop.tsx b/src/components/ordering/MenuBackdrop.tsx
index 379a83f..cfd96a1 100644
--- a/src/components/ordering/MenuBackdrop.tsx
+++ b/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
diff --git a/src/components/orders/OrdersListView.module.scss b/src/components/orders/OrdersListView.module.scss
index 37f5a5d..d21b6b9 100644
--- a/src/components/orders/OrdersListView.module.scss
+++ b/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;
diff --git a/src/routes/basket.module.scss b/src/routes/basket.module.scss
index dd35430..0822f76 100644
--- a/src/routes/basket.module.scss
+++ b/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;