<div class="store-layout">
    <!-- Products Section -->
    <main class="products-section">
        <div class="filters">
            <h3>Filter Products</h3>
            <select id="categoryFilter">
                <option value="all">All Categories</option>
                <option value="effects">LED Effects</option>
                <option value="software">Software</option>
                <option value="tutorials">Tutorials</option>
            </select>
            <select id="priceFilter">
                <option value="all">All Prices</option>
                <option value="0-10">Under $10</option>
                <option value="10-50">$10 - $50</option>
                <option value="50+">$50+</option>
            </select>
        </div>

        <div class="products-grid" id="productsGrid">
            <!-- Products will be dynamically loaded here -->
        </div>
    </main>

    <!-- Shopping Cart Sidebar -->
    <aside class="cart-sidebar">
        <div class="cart-header">
            <h3>Shopping Cart</h3>
            <button id="toggleCart" class="toggle-cart">🛒</button>
        </div>
        
        <div class="cart-content" id="cartContent">
            <div class="cart-items" id="cartItems">
                <p class="empty-cart">Your cart is empty</p>
            </div>
            
            <div class="cart-summary">
                <div class="cart-total">
                    <span>Total: $<span id="cartTotal">0.00</span></span>
                </div>
                <button id="checkoutBtn" class="checkout-btn" disabled>Proceed to Checkout</button>
                <button id="clearCartBtn" class="clear-cart-btn">Clear Cart</button>
            </div>
        </div>
    </aside>
</div>