Refactor Cart UI to Enhance Responsiveness and User Experience

- Replaced CartSheet and CartSidebar components with a new CartResponsive component that adapts to screen size, providing a unified cart experience.
- Implemented responsive animations for the cart, allowing it to slide in from the right on desktop and from the bottom on mobile.
- Updated styles and layout in tailwind.css to support new animation effects for the cart component.

app/layouts/default.vue

@@ -2,12 +2,8 @@
 import AppHeader from '~/components/navigation/AppHeader.vue'
 import BottomNav from '~/components/navigation/BottomNav.vue'
 import CartFAB from '~/components/Cart/CartFAB.vue'
-import CartSidebar from '~/components/Cart/CartSidebar.vue'
-import CartSheet from '~/components/Cart/CartSheet.vue'
+import CartResponsive from '~/components/Cart/CartResponsive.vue'
 import { Toaster } from '~/components/ui/sonner'
-
-// Determine which cart UI to show based on screen size
-const { isMobile } = useCartUI()
 </script>
 
 <template>
@@ -29,11 +25,8 @@ const { isMobile } = useCartUI()
     <!-- Floating Action Button (FAB) for Cart on Product Pages -->
     <CartFAB />
 
-    <!-- Cart Sidebar (Desktop: >= 1024px) -->
-    <CartSidebar v-if="!isMobile" />
-
-    <!-- Cart Sheet (Mobile: < 1024px) -->
-    <CartSheet v-if="isMobile" />
+    <!-- Responsive Cart (slides from right on desktop, bottom on mobile) -->
+    <CartResponsive />
 
     <!-- Toast Notifications -->
     <Toaster position="top-center" :duration="3000" rich-colors />