<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carrinho - <?= htmlspecialchars($config['store_name'] ?? 'Loja') ?></title>
    <link rel="stylesheet" href="/css/theme.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
        .header { background: var(--color-white, #fff); border-bottom: 1px solid #e5e7eb; padding: 1rem 0; }
        .header-content { max-width: 1200px; margin: 0 auto; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 1.5rem; font-weight: bold; color: var(--color-olive, #556b2f); }
        .nav { display: flex; gap: 1rem; }
        .nav a { color: #374151; text-decoration: none; }
        .container { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; }
        .cart-item { display: flex; gap: 1rem; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 1rem; }
        .cart-summary { background: #f9fafb; padding: 1.5rem; border-radius: 8px; margin-top: 2rem; }
        .btn { display: inline-block; padding: 0.75rem 2rem; background: var(--color-orange, #ff6a00); color: white; text-decoration: none; border-radius: 4px; border: none; cursor: pointer; }
    </style>
</head>
<body>
    <header class="header">
        <div class="header-content">
            <a href="/loja" class="logo"><?= htmlspecialchars($config['store_name'] ?? 'Loja') ?></a>
            <nav class="nav">
                <a href="/loja">Início</a>
                <a href="/loja/carrinho">Carrinho</a>
            </nav>
        </div>
    </header>

    <main class="container">
        <h1>Carrinho de Compras</h1>
        <div id="cart-items" style="margin-top: 2rem;">
            <p>Carrinho vazio</p>
        </div>
        <div class="cart-summary">
            <h2>Resumo</h2>
            <p>Subtotal: <span id="subtotal">R$ 0,00</span></p>
            <p>Frete: <span id="frete">R$ 0,00</span></p>
            <p><strong>Total: <span id="total">R$ 0,00</span></strong></p>
            <a href="/loja/checkout" class="btn" style="margin-top: 1rem; display: block; text-align: center;">Finalizar Compra</a>
        </div>
    </main>

    <script>
        // Implementar lógica de carrinho
        document.addEventListener('DOMContentLoaded', () => {
            loadCart();
        });
        
        function loadCart() {
            // Carregar do localStorage ou API
            const cart = JSON.parse(localStorage.getItem('cart') || '[]');
            // Renderizar itens
        }
    </script>
</body>
</html>

