fix: WP-Admin CSS conflicts and add-to-cart redirect

- Fix CSS conflicts between WP-Admin and SPA (radio buttons, chart text)
- Add Tailwind important selector scoped to #woonoow-admin-app
- Remove overly aggressive inline SVG styles from Assets.php
- Add targeted WordPress admin CSS overrides in index.css
- Fix add-to-cart redirect to use woocommerce_add_to_cart_redirect filter
- Let WooCommerce handle cart operations natively for proper session management
- Remove duplicate tailwind.config.cjs

customer-spa/src/pages/Cart/index.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useCartStore, type CartItem } from '@/lib/cart/store';
 import { useCartSettings } from '@/hooks/useAppearanceSettings';
+import { updateCartItemQuantity, removeCartItem, clearCartAPI, fetchCart } from '@/lib/cart/api';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -13,37 +14,96 @@ import {
 } from '@/components/ui/dialog';
 import Container from '@/components/Layout/Container';
 import { formatPrice } from '@/lib/currency';
-import { Trash2, Plus, Minus, ShoppingBag, ArrowLeft } from 'lucide-react';
+import { Trash2, Plus, Minus, ShoppingBag, ArrowLeft, Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
 
 export default function Cart() {
   const navigate = useNavigate();
-  const { cart, removeItem, updateQuantity, clearCart } = useCartStore();
+  const { cart, setCart } = useCartStore();
   const { layout, elements } = useCartSettings();
   const [showClearDialog, setShowClearDialog] = useState(false);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  
+  // Fetch cart from server on mount to sync with WooCommerce
+  useEffect(() => {
+    const loadCart = async () => {
+      try {
+        const serverCart = await fetchCart();
+        setCart(serverCart);
+      } catch (error) {
+        console.error('Failed to fetch cart:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    
+    loadCart();
+  }, [setCart]);
   
   // Calculate total from items
   const total = cart.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
 
-  const handleUpdateQuantity = (key: string, newQuantity: number) => {
+  const handleUpdateQuantity = async (key: string, newQuantity: number) => {
     if (newQuantity < 1) {
       handleRemoveItem(key);
       return;
     }
-    updateQuantity(key, newQuantity);
+    
+    setIsUpdating(true);
+    try {
+      const updatedCart = await updateCartItemQuantity(key, newQuantity);
+      setCart(updatedCart);
+    } catch (error) {
+      console.error('Failed to update quantity:', error);
+      toast.error('Failed to update quantity');
+    } finally {
+      setIsUpdating(false);
+    }
   };
 
-  const handleRemoveItem = (key: string) => {
-    removeItem(key);
-    toast.success('Item removed from cart');
+  const handleRemoveItem = async (key: string) => {
+    setIsUpdating(true);
+    try {
+      const updatedCart = await removeCartItem(key);
+      setCart(updatedCart);
+      toast.success('Item removed from cart');
+    } catch (error) {
+      console.error('Failed to remove item:', error);
+      toast.error('Failed to remove item');
+    } finally {
+      setIsUpdating(false);
+    }
   };
 
-  const handleClearCart = () => {
-    clearCart();
-    setShowClearDialog(false);
-    toast.success('Cart cleared');
+  const handleClearCart = async () => {
+    setIsUpdating(true);
+    try {
+      const updatedCart = await clearCartAPI();
+      setCart(updatedCart);
+      setShowClearDialog(false);
+      toast.success('Cart cleared');
+    } catch (error) {
+      console.error('Failed to clear cart:', error);
+      toast.error('Failed to clear cart');
+      setShowClearDialog(false);
+    } finally {
+      setIsUpdating(false);
+    }
   };
 
+  // Show loading state while fetching cart
+  if (isLoading) {
+    return (
+      <Container>
+        <div className="text-center py-16">
+          <Loader2 className="mx-auto h-16 w-16 text-gray-400 mb-4 animate-spin" />
+          <p className="text-gray-600">Loading cart...</p>
+        </div>
+      </Container>
+    );
+  }
+
   if (cart.items.length === 0) {
     return (
       <Container>