Implement shopping cart functionality with UI components and API integration

- Added CartItem, CartSummary, CartEmpty, CartSidebar, and CartSheet components for managing cart display and interactions.
- Integrated useCart and useCartUI composables for cart state management and UI control.
- Implemented API endpoints for cart operations, including fetching, adding, updating, and removing items.
- Enhanced user experience with loading states and notifications using vue-sonner for cart actions.
- Configured session management for guest and authenticated users, ensuring cart persistence across sessions.

This commit completes the shopping cart feature, enabling users to add items, view their cart, and proceed to checkout.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

app/components/navigation/CartButton.vue

@@ -26,12 +26,12 @@ function handleClick(e: Event) {
   <!-- Desktop cart button (visible only on lg and up) -->
   <button
     @click="handleClick"
-    class="hidden lg:flex items-center gap-2 rounded-lg px-4 py-2 transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 focus:ring-offset-transparent"
+    class="relative hidden lg:flex items-center gap-5 rounded-[25px] px-[30px] py-[10px] transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 focus:ring-offset-transparent"
     aria-label="Warenkorb öffnen"
   >
     <!-- Cart icon with item count badge -->
-    <div class="relative inline-flex">
-      <ShoppingCart class="h-6 w-6 text-white" />
+    <div class="relative inline-flex items-center justify-center">
+      <ShoppingCart class="h-6 w-6 text-white" strokeWidth="2" />
 
       <!-- Item count badge -->
       <Transition
@@ -44,7 +44,7 @@ function handleClick(e: Event) {
       >
         <Badge
           v-if="hasItems"
-          class="absolute -top-2 -right-2 h-5 min-w-[20px] px-1 flex items-center justify-center bg-red-500 text-white text-xs font-bold border-2 border-white"
+          class="absolute -top-2.5 -right-3.5 h-5.5 min-w-[22px] px-1.5 flex items-center justify-center bg-experimenta-accent text-white text-xs font-bold border-2 border-purple-darkest shadow-lg"
         >
           {{ itemCount > 99 ? '99+' : itemCount }}
         </Badge>
@@ -52,14 +52,13 @@ function handleClick(e: Event) {
     </div>
 
     <!-- Total price (desktop only) -->
-    <span class="text-sm font-semibold text-white">
+    <span class="text-base font-bold text-white tabular-nums">
       {{ formattedTotal }}
     </span>
 
-    <!-- Pulse animation when items are added -->
+    <!-- Static background -->
     <span
-      v-if="hasItems"
-      class="absolute inset-0 rounded-lg bg-experimenta-accent/20 animate-pulse opacity-50"
+      class="absolute inset-0 rounded-[25px] bg-white/10"
       aria-hidden="true"
     />
   </button>