body { box-sizing: border-box; }
    :root {
      --cream: #FFF7ED;
      --coffee: #6F4E37;
      --charcoal: #1F1F1F;
      --copper: #C08457;
      --steam: #F1F1F1;
    }
    * { font-family: 'Nunito', sans-serif; }
    h1, h2, h3, h4, h5 { font-family: 'Quicksand', sans-serif; }
    
    .steam-animation {
      position: absolute;
      width: 8px;
      height: 30px;
      background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,0.6));
      border-radius: 50%;
      animation: steam 2s ease-in-out infinite;
    }
    
    @keyframes steam {
      0% { transform: translateY(0) scaleX(1); opacity: 0; }
      15% { opacity: 1; }
      50% { transform: translateY(-30px) scaleX(1.5); opacity: 0.5; }
      100% { transform: translateY(-60px) scaleX(2); opacity: 0; }
    }
    
    .steam-1 { left: 30%; animation-delay: 0s; }
    .steam-2 { left: 50%; animation-delay: 0.5s; }
    .steam-3 { left: 70%; animation-delay: 1s; }
    
    .card-hover {
      transition: all 0.3s ease;
    }
    .card-hover:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 40px rgba(111, 78, 55, 0.15);
    }
    
    .glow-hover:hover {
      box-shadow: 0 0 30px rgba(192, 132, 87, 0.4);
    }
    
    .nav-link {
      position: relative;
      transition: color 0.3s ease;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--copper);
      transition: width 0.3s ease;
    }
    .nav-link:hover::after {
      width: 100%;
    }
    
    .btn-primary {
      background: linear-gradient(135deg, #C08457 0%, #8B5A3C 100%);
      transition: all 0.3s ease;
    }
    .btn-primary:hover {
      transform: scale(1.05);
      box-shadow: 0 10px 30px rgba(192, 132, 87, 0.4);
    }
    
    .page { display: none; }
    .page.active { display: block; }
    
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }
    .modal.active { display: flex; }
    
    .toast {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 16px 24px;
      border-radius: 12px;
      color: white;
      font-weight: 600;
      z-index: 2000;
      transform: translateX(150%);
      transition: transform 0.3s ease;
    }
    .toast.show { transform: translateX(0); }
    .toast.success { background: linear-gradient(135deg, #10B981, #059669); }
    .toast.error { background: linear-gradient(135deg, #EF4444, #DC2626); }
    
    .quick-view-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.7);
      z-index: 1500;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .quick-view-overlay.active { display: flex; }
    
    input:focus, select:focus, textarea:focus {
      outline: none;
      border-color: var(--copper);
      box-shadow: 0 0 0 3px rgba(192, 132, 87, 0.2);
    }
    
    .filter-btn.active {
      background: var(--copper);
      color: white;
    }
    
    .mug-icon {
      position: relative;
    }
    
    .pulse {
      animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    
    .fade-in {
      animation: fadeIn 0.5s ease;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .cookie-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--charcoal);
      color: white;
      padding: 20px;
      z-index: 2500;
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }
    .cookie-banner.show { transform: translateY(0); }
    
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: var(--cream); }
    ::-webkit-scrollbar-thumb { background: var(--copper); border-radius: 4px; }
    
    .hero-gradient {
      background: linear-gradient(135deg, #FFF7ED 0%, #FFE4C9 50%, #FFF7ED 100%);
    }
    
    .mobile-menu {
      transform: translateX(-100%);
      transition: transform 0.3s ease;
    }
    .mobile-menu.open { transform: translateX(0); }