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>

app/[lang]/page.tsx

@@ -20,24 +20,24 @@ export default async function MenuPage({
     <>
       <Header dict={dict} />
 
+      {/* Sticky category nav — renders directly below header via sticky positioning */}
+      <BottomTabBar categories={categories} lang={lang} />
+
       <main
         className="relative min-h-screen"
-        style={{
-          paddingTop: 'var(--header-h)',
-          paddingBottom: 'calc(var(--tabbar-h) + 8px)',
-        }}
+        style={{ paddingTop: 'var(--header-h)', paddingBottom: '32px' }}
       >
         {/* Hero gradient fade from header */}
         <div
           aria-hidden="true"
-          className="h-8 w-full"
+          className="h-6 w-full"
           style={{
             background:
-              'linear-gradient(180deg, rgba(31,20,10,0.12) 0%, transparent 100%)',
+              'linear-gradient(180deg, rgba(31,20,10,0.10) 0%, transparent 100%)',
           }}
         />
 
-        {/* Decorative welcome strip */}
+        {/* Welcome strip */}
         <div className="px-4 pt-2 pb-1">
           <div
             className="rounded-2xl px-4 py-3 flex items-center gap-3"
@@ -67,7 +67,6 @@ export default async function MenuPage({
           </div>
         </div>
 
-        {/* Category sections */}
         {categories.map((category) => (
           <CategorySection
             key={category.id}
@@ -84,8 +83,6 @@ export default async function MenuPage({
         message={dict.whatsapp.message}
         label={dict.whatsapp.label}
       />
-
-      <BottomTabBar categories={categories} lang={lang} />
     </>
   )
 }

app/globals.css

@@ -14,7 +14,7 @@
   --gold: #C8A850;
   --muted: #8A7265;
   --header-h: 68px;
-  --tabbar-h: 72px;
+  --catnav-h: 49px;
 }
 
 @theme inline {
@@ -138,7 +138,7 @@ body::after {
 
 /* ─── Category section ────────────────────────────── */
 .category-section {
-  scroll-margin-top: calc(var(--header-h) + 10px);
+  scroll-margin-top: calc(var(--header-h) + var(--catnav-h) + 8px);
 }
 
 .category-reveal {