<script setup lang="ts">
// scroll-body="false": Prevents body scrolling when modals/dialogs are open.
// When set to false, the body element's overflow is locked while any modal component
// (like Dialog, Sheet, etc.) is open, preventing background content from scrolling.
// This improves UX by keeping focus on the modal content.
//
// Bug fix: Without this setting, opening dropdown menus (e.g., the user profile menu
// when clicking the avatar icon) would cause the body to receive a padding-right of
// 15px, which shifted the entire page content 15px to the left. This prop prevents
// that unwanted padding injection and layout shift.
import { ConfigProvider } from 'reka-ui'

// Import cart UI components
const { isMobile } = useCartUI()
</script>

<template>
  <ConfigProvider :scroll-body="false">
    <div>
      <NuxtPage />

      <!-- Cart UI: Render appropriate component based on screen size -->
      <!-- Mobile: Bottom sheet, Desktop: Right sidebar -->
      <CartSheet v-if="isMobile" />
      <CartSidebar v-else />
    </div>
  </ConfigProvider>
</template>

<style>
/* Critical CSS - Loaded immediately to prevent FOUC */
html {
  background-color: #1e1440;
  /* purple-darkest */
  color: #f8fafc;
  /* white/slate-50 */
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}
</style>
