<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shop | A Taste of Africa Marketplace</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
  <style>
    :root {
      --forest: #0b3d2e;
      --ochre: #c9a227;
      --cream: #f4e9d8;
      --ink: #0b1f16;
      --muted: #d8ccb9;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { 
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background: radial-gradient(800px 600px at 10% 0%, rgba(201, 162, 39, 0.12), transparent 40%),
                  radial-gradient(700px 600px at 90% 10%, rgba(11, 61, 46, 0.22), transparent 45%),
                  var(--forest);
      color: var(--cream);
      line-height: 1.5;
      min-height: 100vh;
    }
    button { background: none; border: none; font: inherit; cursor: pointer; }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    
    @keyframes ping { 0% { transform: scale(1); opacity: 1; } 75%, 100% { transform: scale(2); opacity: 0; } }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
    @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
    
    header {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 20;
      padding: 16px 24px;
      backdrop-filter: blur(12px);
      background: rgba(11, 29, 24, 0.85);
      border-bottom: 2px solid rgba(201, 162, 39, 0.3);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    }

    .nav {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      padding: 0 12px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      color: var(--cream);
      font-weight: 700;
      letter-spacing: 0.01em;
      font-size: 18px;
      flex-shrink: 0;
    }

    .brand-logo {
      width: 100px;
      height: 100px;
      object-fit: contain;
      flex-shrink: 0;
      margin-top: -10px;
    }

    .nav-links {
      display: flex;
      gap: 2px;
      align-items: center;
      flex-wrap: wrap;
    }

    .nav-links a {
      font-weight: 500;
      color: var(--muted);
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 14px;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .nav-links a:hover {
      color: #ffe9a6;
      background: rgba(201, 162, 39, 0.1);
    }

    .nav-links a[href*="dashboard"] {
      margin-left: 8px;
      padding: 8px 14px;
      border: 1px solid rgba(201, 162, 39, 0.4);
      border-radius: 8px;
      color: var(--ochre);
      transition: all 0.2s ease;
    }

    .nav-links a[href*="dashboard"]:hover {
      background: rgba(201, 162, 39, 0.15);
      border-color: var(--ochre);
    }

    .pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 10px;
      border: 1px solid rgba(201, 162, 39, 0.4);
      color: #1b1b1b;
      background: #f8eecf;
      font-weight: 700;
      font-size: 14px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .pill:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(0,0,0,0.25);
    }

    .pill.secondary {
      background: transparent;
      color: var(--ochre);
      border-color: rgba(201, 162, 39, 0.5);
      font-weight: 600;
    }

    .pill.secondary:hover {
      background: rgba(201, 162, 39, 0.15);
      border-color: var(--ochre);
    }

    .cart-btn {
      position: relative;
      padding: 10px 18px;
      background: var(--ochre);
      color: var(--forest);
      border-radius: 10px;
      font-weight: 700;
      font-size: 14px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .cart-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(0,0,0,0.25);
    }
    
    @media (max-width: 800px) {
      header { padding: 14px 18px; }
      .nav { flex-direction: column; align-items: flex-start; gap: 10px; }
      .nav-links { flex-wrap: wrap; }
    }
  </style>
</head>
<body>

  <header>
    <div class="nav">
      <div class="brand">
        <img src="/atasteofafricanmarketplace/assets/images/logo.jpg" alt="A Taste of Africa Marketplace logo" class="brand-logo" />
      </div>
      <div class="nav-links">
        <a href="/atasteofafricanmarketplace/index.php">Home</a>
        <a href="/atasteofafricanmarketplace/index.php#tree">Tree of Life</a>
        <a href="/atasteofafricanmarketplace/all-coaches.php">All Coaches</a>
        <a href="/atasteofafricanmarketplace/store.php" style="color: #ffe9a6;">Apothecary</a>
      </div>
      <div class="nav-links">
        <button onclick="toggleCart()" class="cart-btn">
          🛒 Cart
          <span id="cart-count" style="position: absolute; top: -8px; right: -8px; background: rgb(34, 197, 94); color: white; min-width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; border: 2px solid white; padding: 0 6px;">0</span>
        </button>
        <a class="pill secondary" href="/atasteofafricanmarketplace/login-choice.php">Sign in</a>
        <a class="pill" href="/atasteofafricanmarketplace/register.php">Begin Journey</a>
        <a href="/atasteofafricanmarketplace/superadmin-login.php" style="color: #666; font-size: 12px; margin-left: 10px;">Admin</a>
      </div>
    </div>
  </header>

<!-- Hero Section -->
<section style="padding: 140px 24px 80px; background: rgba(11, 29, 24, 0.5);">
  <div style="max-width: 1280px; margin: 0 auto;">
    <div style="text-align: center; margin-bottom: 64px;">
      <div style="display: inline-flex; align-items: center; gap: 8px; background: rgba(11, 61, 46, 0.6); padding: 8px 16px; border-radius: 24px; margin-bottom: 24px; border: 1px solid rgba(201, 162, 39, 0.55);">
        <span style="width: 8px; height: 8px; background: var(--ochre); border-radius: 50%; animation: pulse 2s infinite;"></span>
        <span style="font-size: 10px; font-weight: 900; color: #ffe9a6; letter-spacing: 0.1em;">AUTHENTIC SOURCING</span>
      </div>
      
      <h1 style="font-family: 'Playfair Display', serif; font-size: clamp(32px, 6vw, 56px); font-weight: 700; color: #fffaf0; line-height: 1.1; margin-bottom: 24px;">
        The Heart of <span style="color: var(--ochre);">Wellness</span><br/>in Your Home
      </h1>
      
      <p style="font-size: 18px; color: var(--muted); max-width: 600px; margin: 0 auto 32px; line-height: 1.6;">
        Explore premium herbal products and wellness essentials sourced directly from trusted makers.
      </p>
      
      <button onclick="document.getElementById('products').scrollIntoView({behavior: 'smooth'})" class="pill">
        Shop Now →
      </button>
    </div>
  </div>
</section>

<!-- Products Section -->
<section id="products" style="padding: 80px 24px; background: rgba(11, 29, 24, 0.4);">
  <div style="max-width: 1280px; margin: 0 auto;">
    <div style="margin-bottom: 48px;">
      <h2 style="font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 700; color: #fffaf0; margin-bottom: 16px; letter-spacing: -0.02em;">Featured Products</h2>
      <div style="height: 4px; width: 80px; background: var(--ochre); border-radius: 4px; margin-bottom: 24px;"></div>
      
      <div style="display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px;">
        <button onclick="filterByCategory('')" class="cat-btn" data-cat="" style="padding: 12px 24px; background: var(--ochre); color: var(--forest); border: 2px solid var(--ochre); border-radius: 10px; font-size: 11px; font-weight: 900; letter-spacing: 0.05em; transition: all 0.2s;">ALL</button>
        <button onclick="filterByCategory('beauty')" class="cat-btn" data-cat="beauty" style="padding: 12px 24px; background: rgba(11, 29, 24, 0.6); color: var(--muted); border: 2px solid rgba(201, 162, 39, 0.3); border-radius: 10px; font-size: 11px; font-weight: 900; letter-spacing: 0.05em; transition: all 0.2s;">BEAUTY</button>
        <button onclick="filterByCategory('food')" class="cat-btn" data-cat="food" style="padding: 12px 24px; background: rgba(11, 29, 24, 0.6); color: var(--muted); border: 2px solid rgba(201, 162, 39, 0.3); border-radius: 10px; font-size: 11px; font-weight: 900; letter-spacing: 0.05em; transition: all 0.2s;">FOOD</button>
        <button onclick="filterByCategory('wellness')" class="cat-btn" data-cat="wellness" style="padding: 12px 24px; background: rgba(11, 29, 24, 0.6); color: var(--muted); border: 2px solid rgba(201, 162, 39, 0.3); border-radius: 10px; font-size: 11px; font-weight: 900; letter-spacing: 0.05em; transition: all 0.2s;">WELLNESS</button>
      </div>
    </div>

    <div id="products-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px;"></div>
  </div>
</section>

<!-- Footer -->
<footer style="background: rgba(5, 12, 10, 0.9); color: var(--muted); padding: 64px 24px 32px; border-top: 1px solid rgba(201, 162, 39, 0.25);">
  <div style="max-width: 1280px; margin: 0 auto;">
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 48px; margin-bottom: 48px;">
      <div>
        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 20px;">
          <img src="/atasteofafricanmarketplace/assets/images/logo.jpg" alt="Logo" style="width: 80px; height: 80px; object-fit: contain; border-radius: 8px;" />
        </div>
        <p style="font-size: 14px; opacity: 0.8; line-height: 1.6; color: var(--muted);">Premium herbal products and wellness essentials for your holistic health journey.</p>
      </div>
      
      <div>
        <h4 style="font-weight: 900; font-size: 12px; margin-bottom: 16px; letter-spacing: 0.1em; color: #ffe9a6;">SHOP</h4>
        <div style="display: flex; flex-direction: column; gap: 12px; font-size: 14px; opacity: 0.8;">
          <a href="/atasteofafricanmarketplace/store.php?cat=beauty" style="color: var(--muted); text-decoration: none;">Beauty Products</a>
          <a href="/atasteofafricanmarketplace/store.php?cat=food" style="color: var(--muted); text-decoration: none;">Herbal Teas</a>
          <a href="/atasteofafricanmarketplace/store.php?cat=wellness" style="color: var(--muted); text-decoration: none;">Wellness Blends</a>
          <a href="/atasteofafricanmarketplace/store.php" style="color: var(--muted); text-decoration: none;">All Products</a>
        </div>
      </div>
      
      <div>
        <h4 style="font-weight: 900; font-size: 12px; margin-bottom: 16px; letter-spacing: 0.1em; color: #ffe9a6;">SUPPORT</h4>
        <div style="display: flex; flex-direction: column; gap: 12px; font-size: 14px; opacity: 0.8;">
          <a href="#" style="color: var(--muted); text-decoration: none;">Shipping Info</a>
          <a href="#" style="color: var(--muted); text-decoration: none;">Returns</a>
          <a href="#" style="color: var(--muted); text-decoration: none;">Contact Us</a>
          <a href="#" style="color: var(--muted); text-decoration: none;">FAQ</a>
        </div>
      </div>
      
      <div>
        <h4 style="font-weight: 900; font-size: 12px; margin-bottom: 16px; letter-spacing: 0.1em; color: #ffe9a6;">CONNECT</h4>
        <div style="display: flex; gap: 12px;">
          <div style="width: 40px; height: 40px; background: rgba(201, 162, 39, 0.15); border: 1px solid rgba(201, 162, 39, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;">f</div>
          <div style="width: 40px; height: 40px; background: rgba(201, 162, 39, 0.15); border: 1px solid rgba(201, 162, 39, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;">𝕏</div>
          <div style="width: 40px; height: 40px; background: rgba(201, 162, 39, 0.15); border: 1px solid rgba(201, 162, 39, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;">📷</div>
        </div>
      </div>
    </div>
    
    <div style="padding-top: 32px; border-top: 1px solid rgba(201, 162, 39, 0.2); text-align: center;">
      <p style="font-size: 12px; opacity: 0.6; color: var(--muted);">© 2026 A Taste of Africa Marketplace. All rights reserved.</p>
    </div>
  </div>
</footer>

<!-- Cart Drawer -->
<div id="cart-drawer" style="position: fixed; inset: 0; z-index: 2000; display: none;">
  <div style="position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7);" onclick="toggleCart()"></div>
  <div style="position: absolute; right: 0; top: 0; bottom: 0; width: 100%; max-width: 400px; background: rgba(11, 29, 24, 0.98); border-left: 2px solid rgba(201, 162, 39, 0.4); animation: slideIn 0.3s ease-out; display: flex; flex-direction: column; backdrop-filter: blur(12px);">
    <div style="padding: 24px; border-bottom: 1px solid rgba(201, 162, 39, 0.3); display: flex; align-items: center; justify-content: space-between;">
      <h2 style="font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: #fffaf0;">Your Cart</h2>
      <button onclick="toggleCart()" style="padding: 8px; font-size: 24px; color: var(--ochre); transition: transform 0.2s;" onmouseover="this.style.transform='rotate(90deg)'" onmouseout="this.style.transform='rotate(0)'">×</button>
    </div>

    <div id="cart-items" style="flex: 1; overflow-y: auto; padding: 24px;"></div>

    <div id="cart-summary" style="padding: 24px; border-top: 1px solid rgba(201, 162, 39, 0.3); background: rgba(11, 61, 46, 0.6); display: none;">
      <div style="display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 14px; color: var(--muted);">
        <span>Subtotal:</span>
        <span style="font-weight: 700; color: #fffaf0;">$<span id="subtotal">0.00</span></span>
      </div>
      <div style="padding: 16px 0; border-top: 1px solid rgba(201, 162, 39, 0.2); margin-bottom: 16px;">
        <div style="display: flex; justify-content: space-between; font-size: 18px; font-weight: 900; color: #fffaf0;">
          <span>Total:</span>
          <span>$<span id="total">0.00</span></span>
        </div>
      </div>
      <button class="pill" style="width: 100%; justify-content: center;">
        CHECKOUT
      </button>
    </div>
  </div>
</div>

<!-- Toast -->
<div id="toast" style="position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 3000; display: none;">
  <div style="background: rgba(11, 61, 46, 0.98); color: #fffaf0; padding: 16px 32px; border-radius: 16px; border: 1px solid rgba(201, 162, 39, 0.6); box-shadow: 0 8px 24px rgba(0,0,0,0.4); font-weight: 700; font-size: 14px; backdrop-filter: blur(12px);"></div>
</div>

<script>
const PRODUCTS = [
  {id: 1, name: "African Black Soap", category: "beauty", price: 12.99, rating: 4.9, reviews: 342, image: "https://images.unsplash.com/photo-1600857544200-b2f666a9a2ec?w=400", benefits: ["Deep Cleansing", "100% Natural"]},
  {id: 2, name: "Shea Butter", category: "beauty", price: 18.50, rating: 4.8, reviews: 156, image: "https://images.unsplash.com/photo-1628088306391-1631cdd36e7c?w=400", benefits: ["Moisturizing", "Vitamins A & E"]},
  {id: 3, name: "Shito Sauce", category: "food", price: 14.00, rating: 5.0, reviews: 89, image: "https://images.unsplash.com/photo-1589113110390-2646261d996d?w=400", benefits: ["Handmade", "Authentic"]},
  {id: 4, name: "Moringa Powder", category: "wellness", price: 22.00, rating: 4.7, reviews: 210, image: "https://images.unsplash.com/photo-1515699596648-261006143a11?w=400", benefits: ["Immune Support", "High Protein"]},
  {id: 5, name: "Hibiscus Petals", category: "wellness", price: 9.99, rating: 4.9, reviews: 124, image: "https://images.unsplash.com/photo-1596431965410-675035f8e562?w=400", benefits: ["Antioxidant Rich", "Heart Health"]},
  {id: 6, name: "Jollof Seasoning", category: "food", price: 8.50, rating: 4.8, reviews: 67, image: "https://images.unsplash.com/photo-1532336414038-cf19250c5757?w=400", benefits: ["No MSG", "All Natural"]}
];

let cart = JSON.parse(localStorage.getItem('hw_cart') || '[]');
let currentCategory = '';

function renderProducts() {
  const grid = document.getElementById('products-grid');
  const filtered = currentCategory ? PRODUCTS.filter(p => p.category === currentCategory) : PRODUCTS;
  
  grid.innerHTML = filtered.map(p => `
    <div style="background: rgba(12, 33, 26, 0.6); border: 1px solid rgba(201, 162, 39, 0.2); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.35); transition: all 0.3s; cursor: pointer; backdrop-filter: blur(10px);" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 12px 32px rgba(0,0,0,0.5)'" onmouseout="this.style.transform=''; this.style.boxShadow='0 8px 24px rgba(0,0,0,0.35)'">
      <div style="position: relative; padding-top: 100%; background: rgba(11, 29, 24, 0.8); overflow: hidden;">
        <img src="${p.image}" alt="${p.name}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9;" />
        <div style="position: absolute; top: 12px; left: 12px; background: rgba(201, 162, 39, 0.95); padding: 6px 12px; border-radius: 8px; font-size: 10px; font-weight: 900; color: var(--forest); letter-spacing: 0.05em;">${p.category.toUpperCase()}</div>
      </div>
      <div style="padding: 20px;">
        <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px;">
          <h3 style="font-size: 16px; font-weight: 900; color: #fffaf0; line-height: 1.3; flex: 1;">${p.name}</h3>
          <span style="font-size: 18px; font-weight: 900; color: var(--ochre); margin-left: 12px;">$${p.price.toFixed(2)}</span>
        </div>
        <div style="display: flex; align-items: center; gap: 4px; margin-bottom: 12px; color: var(--ochre);">
          ${'★'.repeat(Math.floor(p.rating))}${'☆'.repeat(5-Math.floor(p.rating))}
          <span style="font-size: 11px; color: var(--muted); margin-left: 4px;">(${p.reviews})</span>
        </div>
        <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;">
          ${p.benefits.map(b => `<span style="font-size: 9px; font-weight: 700; color: var(--forest); background: rgba(201, 162, 39, 0.3); padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(201, 162, 39, 0.4);">${b}</span>`).join('')}
        </div>
        <button onclick="addToCart(${p.id}); event.stopPropagation();" class="pill" style="width: 100%; justify-content: center;">
          ADD TO CART
        </button>
      </div>
    </div>
  `).join('');
}

function filterByCategory(cat) {
  currentCategory = cat;
  renderProducts();
  
  document.querySelectorAll('.cat-btn').forEach(btn => {
    if (btn.dataset.cat === cat) {
      btn.style.background = 'var(--ochre)';
      btn.style.color = 'var(--forest)';
      btn.style.border = '2px solid var(--ochre)';
    } else {
      btn.style.background = 'rgba(11, 29, 24, 0.6)';
      btn.style.color = 'var(--muted)';
      btn.style.border = '2px solid rgba(201, 162, 39, 0.3)';
    }
  });
}

function addToCart(id) {
  const product = PRODUCTS.find(p => p.id === id);
  const existing = cart.find(item => item.id === id);
  
  if (existing) existing.qty += 1;
  else cart.push({...product, qty: 1});
  
  localStorage.setItem('hw_cart', JSON.stringify(cart));
  updateCartDisplay();
  showToast(`${product.name} added to cart!`);
}

function updateCartDisplay() {
  document.getElementById('cart-count').textContent = cart.reduce((sum, item) => sum + item.qty, 0);
  
  const itemsEl = document.getElementById('cart-items');
  const summaryEl = document.getElementById('cart-summary');
  
  if (cart.length === 0) {
    itemsEl.innerHTML = '<div style="height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px;"><div style="font-size: 48px; opacity: 0.3;">🛒</div><p style="color: var(--muted);">Your cart is empty</p></div>';
    summaryEl.style.display = 'none';
  } else {
    itemsEl.innerHTML = cart.map(item => `
      <div style="display: flex; gap: 16px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(201, 162, 39, 0.2);">
        <img src="${item.image}" style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px; flex-shrink: 0; border: 1px solid rgba(201, 162, 39, 0.3);" />
        <div style="flex: 1;">
          <h4 style="font-size: 14px; font-weight: 700; color: #fffaf0; margin-bottom: 4px;">${item.name}</h4>
          <p style="font-size: 12px; color: var(--ochre); margin-bottom: 8px;">$${item.price.toFixed(2)}</p>
          <div style="display: flex; align-items: center; gap: 8px;">
            <button onclick="updateQty(${item.id}, ${item.qty - 1})" style="width: 24px; height: 24px; background: rgba(201, 162, 39, 0.2); border: 1px solid rgba(201, 162, 39, 0.4); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ochre);">−</button>
            <span style="font-weight: 700; min-width: 20px; text-align: center; color: #fffaf0;">${item.qty}</span>
            <button onclick="updateQty(${item.id}, ${item.qty + 1})" style="width: 24px; height: 24px; background: rgba(201, 162, 39, 0.2); border: 1px solid rgba(201, 162, 39, 0.4); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ochre);">+</button>
            <button onclick="removeFromCart(${item.id})" style="margin-left: auto; color: #ef4444; font-size: 18px;">🗑</button>
          </div>
        </div>
      </div>
    `).join('');
    
    const subtotal = cart.reduce((sum, item) => sum + (item.price * item.qty), 0);
    document.getElementById('subtotal').textContent = subtotal.toFixed(2);
    document.getElementById('total').textContent = subtotal.toFixed(2);
    summaryEl.style.display = 'block';
  }
}

function updateQty(id, newQty) {
  if (newQty < 1) return removeFromCart(id);
  const item = cart.find(i => i.id === id);
  if (item) {
    item.qty = newQty;
    localStorage.setItem('hw_cart', JSON.stringify(cart));
    updateCartDisplay();
  }
}

function removeFromCart(id) {
  cart = cart.filter(item => item.id !== id);
  localStorage.setItem('hw_cart', JSON.stringify(cart));
  updateCartDisplay();
}

function toggleCart() {
  const drawer = document.getElementById('cart-drawer');
  drawer.style.display = drawer.style.display === 'none' ? 'block' : 'none';
}

function showToast(msg) {
  const toast = document.getElementById('toast');
  toast.querySelector('div').textContent = msg;
  toast.style.display = 'block';
  setTimeout(() => toast.style.display = 'none', 3000);
}

renderProducts();
updateCartDisplay();
</script>

</body>
</html>
