Redesign nav: sticky horizontal scrollable category strip

19 categories can't fit in a fixed bottom tab bar. Replace with a
sticky horizontal pill strip that sits below the header, auto-scrolls
active tab into view via Intersection Observer, and shows emoji + label
at a readable size with teal active highlight.

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

components/MenuItemRow.tsx

@@ -28,7 +28,7 @@ export default function MenuItemRow({ item, lang, currency, index, isLast }: Pro
           boxShadow: 'inset 0 1px 2px rgba(255,255,255,0.8)',
         }}
       >
-        {item.emoji}
+        {item.emoji || '✨'}
       </div>
 
       {/* Text */}
@@ -39,18 +39,22 @@ export default function MenuItemRow({ item, lang, currency, index, isLast }: Pro
         >
           {item.name[l]}
         </p>
-        <p
-          className="font-body text-muted leading-relaxed mt-0.5 line-clamp-2"
-          style={{ fontSize: '0.72rem' }}
-        >
-          {item.description[l]}
-        </p>
+        {item.description && (
+          <p
+            className="font-body text-muted leading-relaxed mt-0.5 line-clamp-2"
+            style={{ fontSize: '0.72rem' }}
+          >
+            {item.description[l]}
+          </p>
+        )}
       </div>
 
       {/* Price pill */}
-      <span className="price-pill flex-shrink-0">
-        {currency}{item.price}
-      </span>
+      {item.price !== undefined && (
+        <span className="price-pill flex-shrink-0">
+          {currency}{item.price}
+        </span>
+      )}
     </div>
   )
 }