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.

assets/css/tailwind.css

@@ -836,6 +836,170 @@
    ======================================== */
 
 @layer utilities {
+  /* Animation utilities for Sheet/Dialog components */
+  @keyframes slideInFromRight {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideOutToRight {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes slideInFromBottom {
+    from {
+      transform: translateY(100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideOutToBottom {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(100%);
+    }
+  }
+
+  @keyframes slideInFromLeft {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideOutToLeft {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes slideInFromTop {
+    from {
+      transform: translateY(-100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideOutToTop {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(-100%);
+    }
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  /* Animation classes with data-state support */
+  [data-state="open"].animate-in,
+  .data-\[state\=open\]\:animate-in[data-state="open"] {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+  }
+
+  [data-state="closed"].animate-out,
+  .data-\[state\=closed\]\:animate-out[data-state="closed"] {
+    animation-duration: 0.2s;
+    animation-fill-mode: both;
+  }
+
+  [data-state="open"].fade-in-0,
+  .data-\[state\=open\]\:fade-in-0[data-state="open"] {
+    animation-name: fadeIn;
+  }
+
+  [data-state="closed"].fade-out-0,
+  .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
+    animation-name: fadeOut;
+  }
+
+  [data-state="open"].slide-in-from-right,
+  .data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
+    animation-name: slideInFromRight;
+  }
+
+  [data-state="closed"].slide-out-to-right,
+  .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
+    animation-name: slideOutToRight;
+  }
+
+  [data-state="open"].slide-in-from-bottom,
+  .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
+    animation-name: slideInFromBottom;
+  }
+
+  [data-state="closed"].slide-out-to-bottom,
+  .data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
+    animation-name: slideOutToBottom;
+  }
+
+  [data-state="open"].slide-in-from-left,
+  .data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
+    animation-name: slideInFromLeft;
+  }
+
+  [data-state="closed"].slide-out-to-left,
+  .data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
+    animation-name: slideOutToLeft;
+  }
+
+  [data-state="open"].slide-in-from-top,
+  .data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
+    animation-name: slideInFromTop;
+  }
+
+  [data-state="closed"].slide-out-to-top,
+  .data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
+    animation-name: slideOutToTop;
+  }
+
+  [data-state="open"].duration-500,
+  .data-\[state\=open\]\:duration-500[data-state="open"] {
+    animation-duration: 500ms;
+  }
+
+  [data-state="closed"].duration-300,
+  .data-\[state\=closed\]\:duration-300[data-state="closed"] {
+    animation-duration: 300ms;
+  }
+
   /* Container utilities */
   .container-main {
     @apply max-w-container-main mx-auto;