diff --git a/src/modules/events/views/EventDetailPage.vue b/src/modules/events/views/EventDetailPage.vue
index d4d98dd..96280d7 100644
--- a/src/modules/events/views/EventDetailPage.vue
+++ b/src/modules/events/views/EventDetailPage.vue
@@ -451,8 +451,13 @@ function goToMyTickets() {
         @update:is-open="showReturnDialog = $event"
       />
 
-      <!-- Sticky buy bar — see showStickyCta. Sits above the bottom nav
-           (h-14 + safe-area inset) and mirrors the inline CTA. -->
+      <!-- Sticky buy bar — see showStickyCta. Pinned flush above the
+           bottom nav via the height it publishes (--bottom-nav-height,
+           BottomNav.vue) and mirrors the inline CTA. -->
+      <!-- Teleported to <body>: inside the page the bar would inherit the
+           parent's space-y margin (margins offset fixed boxes too) and
+           float 24px above the nav. -->
+      <Teleport to="body">
       <Transition
         enter-active-class="transition duration-200 ease-out"
         enter-from-class="translate-y-4 opacity-0"
@@ -460,9 +465,9 @@ function goToMyTickets() {
         leave-to-class="translate-y-4 opacity-0"
       >
         <div
-          v-if="showStickyCta"
-          class="fixed left-0 right-0 z-40 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80"
-          style="bottom: calc(3.5rem + env(safe-area-inset-bottom))"
+          v-if="showStickyCta && event"
+          class="fixed inset-x-0 z-40 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80"
+          style="bottom: var(--bottom-nav-height)"
           role="region"
           :aria-label="t('events.detail.tickets')"
         >
@@ -497,6 +502,7 @@ function goToMyTickets() {
           </div>
         </div>
       </Transition>
+      </Teleport>
 
       <!-- External references -->
       <div v-if="event.tags.length > 0" class="space-y-2">