JS advanced cart

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping cart</title>
</head>
<style> 
body {
    margin: 0;
    min-height: 100vh;
    padding: 0;
}

header {
    background-color: purple;
    height: 80px;
    width: 100%;
    color: white;
    display: flex;
    margin: 0;
    padding: 0;
}

main {
    min-height: 100vh;
    margin-right: 300px; /* leaves space for the fixed cart panel */
}

footer {
    background-color: purple;
    height: 80px;
    width: 100%;
    color: white;
    display: flex;
    margin: 0;
    padding: 0;
}

.Logo {
    width: fit-content;
    height: 100%;
    border: 1px solid red;
    font-size: 40px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    margin-left: 20px;
}

.Logo a {
    text-decoration: none;
    color: white;
    cursor: pointer;
}

.Logo a:hover {
    transform: translateY(-4px);
    transition: .2s ease;
}

.Product {
    background-color: white;
    width: fit-content;
    padding: 15px;
    margin: 20px;
}

.Product:hover {
    zoom: 1.1;
    transition: 0.2s;
    cursor: pointer;
}

/* Cart panel fixed to the right */
#cart-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    background-color: #f3e8f7;
    border-left: 2px solid purple;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    box-sizing: border-box;
    z-index: 100;
}

#cart-panel h2 {
    margin: 0 0 1rem 0;
    font-size: 18px;
    color: purple;
    border-bottom: 1px solid purple;
    padding-bottom: 0.5rem;
}

#cart-items {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#cart-empty {
    color: #999;
    font-size: 14px;
    text-align: center;
    margin-top: 2rem;
}

.ctdiv {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
}

.ctdiv .item-name {
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
}

.ctdiv .item-detail {
    color: #666;
    margin-bottom: 6px;
}

.ctdiv .item-subtotal {
    color: purple;
    font-weight: bold;
    margin-bottom: 6px;
}

.ctdiv button {
    background: none;
    border: 1px solid #e44;
    color: #e44;
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 12px;
}

.ctdiv button:hover {
    background: #e44;
    color: white;
}

#cart-total {
    border-top: 2px solid purple;
    padding-top: 1rem;
    margin-top: 0.5rem;
    font-size: 16px;
    font-weight: bold;
    color: purple;
    text-align: right;
}

#checkout-btn {
    margin-top: 0.75rem;
    width: 100%;
    padding: 10px;
    background-color: purple;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
}

#checkout-btn:hover {
    background-color: #5a005a;
}
</style>
<body>
    <header> 
        <h1 class="Logo"><a href='home.html'>G L H</a></h1>
    </header>

    <main>
        <div class="Products">
            <div class="Product">
                <h1>Milk</h1>
                <img src="images/Milk.jpg" alt="Milk for sale, picture of milk in a glass bottle, being sold">
                <p>Price: £2.20/L</p>
                <p>Locally sourced 100% organic fresh milk.<br>
                Supplier: <a href='producers.html'>Andrew LTD</a></p>
                <input type="number" placeholder="Enter quantity (L)" id="qty1" min="1">
                <button onclick="AddToCart('Milk', 2.20, document.getElementById('qty1').value)">Add to cart</button>
            </div>
        </div>
    </main>

    <!-- Fixed cart panel on the right -->
    <div id="cart-panel">
        <h2>🛒 Your Cart</h2>
        <div id="cart-items">
            <p id="cart-empty">No items yet</p>
        </div>
        <div id="cart-total">Amount to pay: £0.00</div>
        <button id="checkout-btn">Checkout</button>
    </div>

    <footer></footer>

<script> 
let total = 0;
let cart = [];

function AddToCart(name, price, qty) {
    qty = parseInt(qty);
    if (!qty || qty <= 0) return;

    const existing = cart.find(i => i.name === name);
    if (existing) {
        existing.qty += qty;
        existing.subtotal = existing.qty * existing.price;
        total += qty * price;
    } else {
        const subtotal = qty * price;
        cart.push({ name, price, qty, subtotal });
        total += subtotal;
    }

    UpdateCart();
}

function RemoveFromcart(index) {
    total -= cart[index].subtotal;
    cart.splice(index, 1);
    UpdateCart();
}

function UpdateCart() {
    const cartItems = document.getElementById('cart-items');
    const emptyMsg = document.getElementById('cart-empty');
    cartItems.innerHTML = '';

    if (cart.length === 0) {
        cartItems.innerHTML = '<p id="cart-empty" style="color:#999;font-size:14px;text-align:center;margin-top:2rem;">No items yet</p>';
    } else {
        cart.forEach((item, index) => {
            cartItems.innerHTML += `
                <div class="ctdiv">
                    <div class="item-name">${item.name}</div>
                    <div class="item-detail">${item.qty} × £${item.price.toFixed(2)}</div>
                    <div class="item-subtotal">£${item.subtotal.toFixed(2)}</div>
                    <button onclick="RemoveFromcart(${index})">Remove</button>
                </div>
            `;
        });
    }

    document.getElementById('cart-total').textContent =
        "Amount to pay: £" + total.toFixed(2);
}
</script>
</html>