:root {
      --primary: #0891b2;
      --primary-dark: #0e7490;
      --secondary: #0f766e;
      --accent: #f59e0b;
      --light: #f8fafc;
      --dark: #1e293b;
      --success: #10b981;
      --danger: #ef4444;
    }
    
    body {
      font-family: 'Poppins', sans-serif;
      color: var(--dark);
      background-color: #f8fafc;
    }
    
    .glass-effect {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .product-card {
      transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .product-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    
    .cart-item {
      transition: all 0.3s ease;
    }
    
    .cart-item:hover {
      background-color: #f0f9ff;
    }
    
    .quantity-btn {
      transition: all 0.2s ease;
    }
    
    .quantity-btn:hover {
      background-color: var(--primary);
      color: white;
    }
    
    .promo-badge {
      animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    
    .empty-cart {
      animation: fadeIn 1s ease;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .cart-animation {
      animation: slideIn 0.5s ease;
    }
    
    @keyframes slideIn {
      from { opacity: 0; transform: translateX(-20px); }
      to { opacity: 1; transform: translateX(0); }
    }