diff --git a/src/modules/restaurant/views/ItemPage.vue b/src/modules/restaurant/views/ItemPage.vue
index 2b971f7..3342a57 100644
--- a/src/modules/restaurant/views/ItemPage.vue
+++ b/src/modules/restaurant/views/ItemPage.vue
@@ -103,7 +103,7 @@ function back() {
 </script>
 
 <template>
-  <main class="container mx-auto max-w-2xl px-4 pb-32 pt-3 sm:py-6">
+  <main class="container mx-auto max-w-2xl px-4 pb-32 pt-3 sm:pt-6">
     <Button variant="ghost" size="sm" class="mb-3" @click="back">
       <ArrowLeft class="mr-2 h-4 w-4" />
       Back
@@ -197,9 +197,14 @@ function back() {
         />
       </section>
 
-      <!-- Sticky bottom bar with qty stepper + add-to-cart -->
+      <!-- Sticky bottom bar with qty stepper + add-to-cart.
+           Sits flush above BottomNav (h-14 + safe-area inset) on every
+           breakpoint. Previously `bottom-16` left an 8px gap on mobile
+           (BottomNav is h-14 = 56px, not 64px), and `sm:bottom-0` made
+           it overlap the nav on desktop. -->
       <div
-        class="fixed inset-x-0 bottom-16 z-20 border-t border-border bg-background/95 px-4 py-3 backdrop-blur sm:bottom-0"
+        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))"
       >
         <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">