feat(layout): publish the bottom nav's rendered height as --bottom-nav-height

BottomNav measures itself (ResizeObserver) and writes
`--bottom-nav-height` on <html>; index.css declares the 0px default. Any
element that must sit flush above the nav pins with
`bottom: var(--bottom-nav-height)` instead of re-deriving
`3.5rem + env(safe-area-inset-bottom)` and drifting when the device's
inset, border or font scaling differs from that guess. The restaurant
item page's add-to-cart bar is migrated to it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ByAwHU4pRnyE58YocQvAas

src/assets/index.css

@@ -96,6 +96,10 @@
 /* Default palette: Catppuccin (Latte for light, Mocha for dark).
    Other palettes are scoped via :root[data-theme="<name>"] in themes/*.css. */
 :root {
+  /* Rendered height of the fixed BottomNav (h-14 + safe-area + border), kept
+     current by BottomNav.vue. Pin anything that must sit flush above the nav
+     with `bottom: var(--bottom-nav-height)`; 0 when no nav is mounted. */
+  --bottom-nav-height: 0px;
   --background: oklch(0.9578 0.0058 264.5321);
   --foreground: oklch(0.4355 0.0430 279.3250);
   --card: oklch(1.0000 0 0);

src/components/layout/BottomNav.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import type { Component } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
 
 export interface BottomTab {
   /** Translated label shown under the icon. */
@@ -33,6 +35,22 @@ interface Props {
 
 const props = defineProps<Props>()
 
+// Publish the nav's rendered height (h-14 + safe-area padding + border,
+// whatever the device makes of it) as `--bottom-nav-height` on <html>, so
+// anything that needs to sit flush above the nav — sticky action bars,
+// toasts — can use `bottom: var(--bottom-nav-height)` instead of
+// re-deriving the CSS and drifting when insets or font scaling differ.
+const navRef = ref<HTMLElement | null>(null)
+function publishHeight() {
+  const h = navRef.value?.getBoundingClientRect().height ?? 0
+  document.documentElement.style.setProperty('--bottom-nav-height', `${Math.round(h)}px`)
+}
+useResizeObserver(navRef, publishHeight)
+onMounted(publishHeight)
+onBeforeUnmount(() => {
+  document.documentElement.style.setProperty('--bottom-nav-height', '0px')
+})
+
 const router = useRouter()
 
 function onTabClick(tab: BottomTab) {
@@ -51,6 +69,7 @@ function isTabActive(tab: BottomTab): boolean {
 
 <template>
   <nav
+    ref="navRef"
     class="fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
     style="padding-bottom: env(safe-area-inset-bottom)"
   >

src/modules/restaurant/views/ItemPage.vue

@@ -198,13 +198,12 @@ function back() {
       </section>
 
       <!-- Sticky bottom bar with qty stepper + add-to-cart.
-           Sits flush above BottomNav (h-14 + safe-area inset) on every
+           Sits flush above BottomNav on every breakpoint via the height
-           breakpoint. Previously `bottom-16` left an 8px gap on mobile
+           the nav publishes (--bottom-nav-height, BottomNav.vue) — no
-           (BottomNav is h-14 = 56px, not 64px), and `sm:bottom-0` made
+           hand-derived h-14 + safe-area arithmetic to drift. -->
-           it overlap the nav on desktop. -->
       <div
         class="fixed inset-x-0 z-20 border-t border-border bg-background/95 px-4 py-3 backdrop-blur"
-        style="bottom: calc(3.5rem + env(safe-area-inset-bottom))"
+        style="bottom: var(--bottom-nav-height)"
       >
         <div class="container mx-auto flex max-w-2xl items-center gap-3">
           <div class="inline-flex items-center rounded-full border border-border bg-card">