<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QHAWEARÔäó | Authentic Clothing</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@300;400;600&family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
    <!-- Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --black: #000000;
            --cream: #f4f1ea;
            --red: #8b0000;
            --gray-text: #555;
            --header-height: 80px;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--cream);
            color: var(--black);
            line-height: 1.4;
            overflow-x: hidden;
        }

        /* --- UPDATED HEADER STYLE --- */
        header.site-nav {
            background: var(--black);
            height: var(--header-height);
            display: flex;
            align-items: center;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 2000;
            padding: 0 40px;
        }

        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: 1600px;
            margin: 0 auto;
        }

        /* Column 1: Logo */
        .logo-text {
            color: white;
            font-family: 'Archivo Black', sans-serif;
            font-size: 22px;
            letter-spacing: 2px;
            text-transform: uppercase;
            flex: 1; /* Takes 1/3 space */
        }

        /* Column 2: Centered Menu */
        .nav-links {
            display: flex;
            gap: 40px;
            flex: 1; /* Takes 1/3 space */
            justify-content: center;
        }

        .nav-links a {
            color: #ccc;
            text-decoration: none;
            font-family: 'Roboto Mono', monospace;
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            transition: 0.3s;
            white-space: nowrap;
        }

        .nav-links a:hover { color: white; }

        /* Column 3: Socials + Cart on Right */
        .nav-right-group {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 25px;
            flex: 1; /* Takes 1/3 space */
        }

        .nav-socials-icons {
            display: flex;
            gap: 15px;
        }

        .nav-socials-icons a {
            color: white;
            font-size: 18px;
            text-decoration: none;
            transition: 0.3s;
        }

        .nav-socials-icons a:hover { opacity: 0.7; }

        .cart-btn-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
            color: white;
            font-family: 'Roboto Mono', monospace;
            font-size: 12px;
            text-transform: uppercase;
            border-left: 1px solid #333;
            padding-left: 20px;
            cursor: pointer;
            transition: 0.3s;
        }
        
        .cart-btn-wrapper:hover { color: #ccc; }

        /* --- TYPOGRAPHY & LAYOUT --- */
        h1, h2, .heavy-title {
            font-family: 'Archivo Black', sans-serif;
            text-transform: uppercase;
            line-height: 0.9;
            letter-spacing: -2px;
        }

        .mono {
            font-family: 'Roboto Mono', monospace;
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: 2px;
            color: var(--gray-text);
        }

        .container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
        .section-padding { padding: 70px 0; }
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }

        /* Hero */
        .hero { padding-top: calc(var(--header-height) + 80px); padding-bottom: 80px; min-height: 85vh; display: flex; align-items: center; }
        .hero-text h1 { font-size: clamp(60px, 10vw, 120px); margin-bottom: 30px; }
        .hero-logo-main { width: 80%; max-width: 450px; }
        .red-dot { color: var(--red); }

        /* Manifesto */
        .manifesto-text { font-size: clamp(30px, 6vw, 94px); line-height: 1.1; letter-spacing: -1px; margin-bottom: 60px; }
        .values-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(0,0,0,0.1); padding-top: 40px; }
        .value-item { border-right: 1px solid rgba(0,0,0,0.1); padding: 0 20px; }
        .value-item:last-child { border-right: none; }
        .value-item h4 { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; margin-bottom: 10px; }

        /* Shop Cards */
        .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .product-card { background: #fff; padding-bottom: 20px; position: relative; border: 1px solid #eee; transition: all 0.3s ease; cursor: pointer; }
        .product-card:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0,0,0,0.15); border-color: var(--red); }
        .product-img-wrapper { aspect-ratio: 1 / 1; background: #e8e8e8; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
        .product-img-wrapper.shirt { aspect-ratio: 6 / 3; }
        .product-img-wrapper.hoodie { aspect-ratio: 1 / 1; }
        .product-img-wrapper.cotton { aspect-ratio: 1 / 1; }
        .product-img-wrapper.cap { aspect-ratio: 1 / 1; }
        .product-img-wrapper.sock { aspect-ratio: 1 / 1; }
        .product-img-wrapper img { transition: transform 0.4s ease; width: 100%; height: 100%; object-fit: cover; }
        .product-card:hover .product-img-wrapper img { transform: scale(1.08); }
        
        .add-to-cart-btn { background: var(--black); color: white; border: none; width: 100%; padding: 15px; cursor: pointer; font-family: 'Roboto Mono', monospace; font-size: 12px; margin-top: 15px; transition: all 0.3s ease; }
        .add-to-cart-btn:hover { background: var(--red); }

        /* Marquee */
        .marquee { background: var(--black); color: white; padding: 20px 0; overflow: hidden; white-space: nowrap; }
        .marquee-content { display: inline-block; padding-left: 100%; animation: marquee 26s linear infinite; font-family: 'Archivo Black', sans-serif; font-size: 28px; text-transform: uppercase; letter-spacing: 2px; }
        @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

        /* How to Order */
        .order-section { background: var(--black); color: white; padding: 120px 0; }
        .order-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 60px; }
        .step-num { font-family: 'Archivo Black', sans-serif; font-size: 80px; opacity: 0.2; display: block; margin-bottom: 20px; }
        .btn-white { background: var(--cream); color: var(--black); padding: 18px 40px; text-decoration: none; font-family: 'Roboto Mono', monospace; font-size: 12px; display: inline-block; margin-top: 40px; }

        /* Cart Sidebar */
        #cart-sidebar {
            position: fixed; right: -450px; top: 0; width: 400px; height: 100%;
            background: white; z-index: 3000; box-shadow: -10px 0 30px rgba(0,0,0,0.1);
            padding: 40px; transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        }
        #cart-sidebar.active { right: 0; }
        .cart-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--black); padding-bottom: 20px; margin-bottom: 30px; }
        .checkout-input { width: 100%; padding: 15px; margin-bottom: 10px; border: 1px solid #ddd; }

        /* Scroll Animation */
        .fade-in-section { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; }
        .fade-in-section.visible { opacity: 1; transform: translateY(0); }

        @media (max-width: 1000px) {
            header.site-nav { padding: 0 20px; }
            .nav-links { display: none; }
            .logo-text { flex: 1; }
            .nav-right-group { flex: 1; }
            .grid-2, .values-grid, .product-grid, .order-grid { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>

    <!-- --- HEADER --- -->
    <header class="site-nav">
        <div class="nav-container">
            <!-- Left: Logo -->
            <div class="logo-text">QHAWEARÔäó</div>
            
            <!-- Center: Navigation -->
            <nav class="nav-links">
                <a href="#shop">Shop</a>
                <a href="#manifesto">About</a>
                <a href="#order">How to Order</a>
                <a href="#footer">Contact</a>
            </nav>

            <!-- Right: Socials + Cart -->
            <div class="nav-right-group">
                <div class="nav-socials-icons">
                    <a href="https://wa.me/27768296508" title="WhatsApp"><i class="fab fa-whatsapp"></i></a>
                    <a href="https://www.instagram.com/qhawear_authentics" title="Instagram"><i class="fab fa-instagram"></i></a>
                    <a href="https://www.facebook.com/QhawearAuthenticClothing" title="Facebook"><i class="fab fa-facebook-f"></i></a>
                    <a href="https://www.tiktok.com/@qhawe_authentic" title="TikTok"><i class="fab fa-tiktok"></i></a>
                </div>
                
                <div class="cart-btn-wrapper" onclick="toggleCart()">
                    <i class="fa-solid fa-bag-shopping" style="font-size: 20px;"></i>
                    <span id="cart-count">MY CART (0)</span>
                </div>
            </div>
        </div>
    </header>

    <!-- Hero -->
    <section class="container hero">
        <div class="grid-2">
            <div class="hero-text">
                <p class="mono">/ DROP 01  /  EST. 2025</p>
                <h1>WEAR<br>WHO YOU<br>ARE<span class="red-dot">.</span></h1>
                <p>Built on identity, belonging, and authenticity. This is more than clothing ÔÇö it is a reflection of those who move with purpose.</p>
                <a href="#shop" class="btn-white" style="background: black; color:white; border:none;">EXPLORE PIECES ÔåÆ</a>
            </div>
            <div class="hero-image-side" style="text-align: right;">
                <img src="Assets/Logo-removebg.png" alt="QHAWEAR Logo" class="hero-logo-main">
            </div>
        </div>
    </section>

    <!-- Marquee Banner -->
    <div class="marquee">
        <div class="marquee-content">
            AUTHENTIC CLOTHING <span class="marquee-separator">Ôùå</span> LIMITED DROPS <span class="marquee-separator">Ôùå</span> 240-280 GSM <span class="marquee-separator">Ôùå</span> WEAR WHO YOU ARE <span class="marquee-separator">Ôùå</span> AUTHENTIC CLOTHING <span class="marquee-separator">Ôùå</span> LIMITED DROPS <span class="marquee-separator">Ôùå</span> 240-280 GSM <span class="marquee-separator">Ôùå</span> WEAR WHO YOU ARE
        </div>
    </div>

    <!-- Manifesto -->
    <section id="manifesto" class="container section-padding fade-in-section" style="border-top: 1px solid #ddd;">
        <p class="mono">/ 01 ÔÇö ABOUT</p>
        <div class="manifesto-text">
            More than clothing it is a reflection of those who move with purpose and wear who they are with pride.
        </div>
        <div class="values-grid">
            <div class="value-item"><h4>Premium</h4><p>240ÔÇô280 GSM selection.</p></div>
            <div class="value-item"><h4>Identity</h4><p>Designed for self-expression.</p></div>
            <div class="value-item"><h4>Limited</h4><p>No mass production drops.</p></div>
            <div class="value-item"><h4>Movement</h4><p>A community rooted in culture.</p></div>
        </div>
    </section>

    <!-- Shop -->
    <section id="shop" class="container section-padding fade-in-section" style="border-top: 1px solid #ddd;">
        <div style="display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:60px;">
            <h2 style="font-size: 60px;">THE DROP</h2>
            <p class="mono">AVAILABLE NOW</p>
        </div>

        <div class="product-grid">
            <div class="product-card">
                <div class="product-img-wrapper"><img src="Assets/Cotton/t10.jpeg"></div>
                <div style="padding: 0 20px; text-align: center;">
                    <h3 class="heavy-title" style="font-size: 16px;">Cotton T-Shirt</h3>
                    <p class="mono" style="color:var(--red);">R375.00</p>
                    <button class="add-to-cart-btn" onclick="openCottonCollection()">SHOP COTTON</button>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img-wrapper"><img src="Assets/Acid wash/t1.jpeg"></div>
                <div style="padding: 0 20px; text-align: center;">
                    <h3 class="heavy-title" style="font-size: 16px;">Acid Wash T-Shirt</h3>
                    <p class="mono" style="color:var(--red);">R425.00</p>
                    <button class="add-to-cart-btn" onclick="openAcidWashCollection()">SHOP ACID WASH</button>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img-wrapper"><img src="Assets/Jersey/WhatsApp Image 2026-05-04 at 08.51.23.jpeg"></div>
                <div style="padding: 0 20px; text-align: center;">
                    <h3 class="heavy-title" style="font-size: 16px;">Winter Hoodie</h3>
                    <p class="mono" style="color:var(--red);">R650.00</p>
                    <button class="add-to-cart-btn" onclick="openHoodieCollection()">SHOP HOODIES</button>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img-wrapper"><img src="Assets/Cap/cap1.jpeg"></div>
                <div style="padding: 0 20px; text-align: center;">
                    <h3 class="heavy-title" style="font-size: 16px;">Caps</h3>
                    <p class="mono" style="color:var(--red);">R250.00</p>
                    <button class="add-to-cart-btn" onclick="openCapCollection()">SHOP CAPS</button>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img-wrapper"><img src="Assets/socks/socks.png"></div>
                <div style="padding: 0 20px; text-align: center;">
                    <h3 class="heavy-title" style="font-size: 16px;">Socks</h3>
                    <p class="mono" style="color:var(--red);">R120.00</p>
                    <button class="add-to-cart-btn" onclick="openSocksCollection()">SHOP SOCKS</button>
                </div>
            </div>
        </div>
    </section>

    <!-- How to Order -->
    <section id="order" class="order-section fade-in-section">
        <div class="container">
            <div class="order-grid">
                <div>
                    <h2 style="font-size: 60px;">HOW TO<br>ORDER</h2>
                    <p style="margin-top:20px; color:#888;">Simple process. Premium service.</p>
                </div>
                <div class="step"><span class="step-num">01</span><h4>SELECT</h4><p>Choose item and size.</p></div>
                <div class="step"><span class="step-num">02</span><h4>CONFIRM</h4><p>Reach out via WhatsApp.</p></div>
                <div class="step"><span class="step-num">03</span><h4>SECURE</h4><p>Lock in with payment.</p></div>
            </div>
            <button class="btn-white" onclick="toggleCart()" style="border:none; cursor:pointer;">ORDER ÔåÆ</button>
        </div>
    </section>

    <footer id="footer" class="container section-padding" style="text-align: center; border-top: 1px solid #ddd;">
        <h2 class="heavy-title" style="font-size: 30px;">QHAWEARÔäó</h2>
        
        <!-- Contact Information -->
        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 25px 0; max-width: 900px; margin-left: auto; margin-right: auto;">
            <!-- WhatsApp -->
            <div style="text-align: center;">
                <a href="https://wa.me/27768296508" style="text-decoration: none; color: inherit; transition: all 0.3s ease; display: inline-block;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
                    <div style="font-size: 48px; color: var(--red); margin-bottom: 15px;"><i class="fab fa-whatsapp"></i></div>
                    <h4 class="heavy-title" style="font-size: 14px; margin-bottom: 8px;">WHATSAPP</h4>
                    <p class="mono" style="font-size: 12px;">+27 76 829 6508</p>
                </a>
            </div>
            
            <!-- Call -->
            <div style="text-align: center;">
                <a href="tel:+27765033963" style="text-decoration: none; color: inherit; transition: all 0.3s ease; display: inline-block;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
                    <div style="font-size: 48px; color: var(--red); margin-bottom: 15px;"><i class="fa-solid fa-phone"></i></div>
                    <h4 class="heavy-title" style="font-size: 14px; margin-bottom: 8px;">CALL</h4>
                    <p class="mono" style="font-size: 12px;">+27 76 503 3963</p>
                </a>
            </div>
            
            <!-- Email -->
            <div style="text-align: center;">
                <a href="mailto:qhaweer@gmail.com" style="text-decoration: none; color: inherit; transition: all 0.3s ease; display: inline-block;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
                    <div style="font-size: 48px; color: var(--red); margin-bottom: 15px;"><i class="fa-solid fa-envelope"></i></div>
                    <h4 class="heavy-title" style="font-size: 14px; margin-bottom: 8px;">EMAIL</h4>
                    <p class="mono" style="font-size: 12px;">qhaweer@gmail.com</p>
                </a>
            </div>
        </div>
        
        <p class="mono" style="font-size: 10px; margin-top: 40px;">┬® 2025 ALL RIGHTS RESERVED</p>
    </footer>

    <!-- Collection Modals (Acid, Cotton, Hoodie, Cap, Socks) -->
    <div id="acidwash-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:5000; overflow-y:auto;">
        <div style="padding:40px; max-width:1400px; margin:40PX auto;">
            <span style="cursor:pointer; font-size:28px; color:white; float:right;" onclick="closeAcidWashCollection()">Ô£ò</span>
            <h2 style="color:white; font-size:48px; margin-bottom:40px; font-family:'Archivo Black', sans-serif;">ACID WASH COLLECTION</h2>
            <div class="product-grid" id="acidwash-grid"></div>
        </div>
    </div>

    <div id="cotton-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:5000; overflow-y:auto;">
        <div style="padding:40px; max-width:1400px; margin:40px auto;">
            <span style="cursor:pointer; font-size:28px; color:white; float:right;" onclick="closeCottonCollection()">Ô£ò</span>
            <h2 style="color:white; font-size:48px; margin-bottom:40px; font-family:'Archivo Black', sans-serif;">COTTON COLLECTION</h2>
            <div class="product-grid" id="cotton-grid"></div>
        </div>
    </div>

    <div id="hoodie-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:5000; overflow-y:auto;">
        <div style="padding:40px; max-width:1400px; margin:40px auto;">
            <span style="cursor:pointer; font-size:28px; color:white; float:right;" onclick="closeHoodieCollection()">Ô£ò</span>
            <h2 style="color:white; font-size:48px; margin-bottom:40px; font-family:'Archivo Black', sans-serif;">HOODIE COLLECTION</h2>
            <div class="product-grid" id="hoodie-grid"></div>
        </div>
    </div>

    <div id="caps-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:5000; overflow-y:auto;">
        <div style="padding:40px; max-width:1400px; margin:40px auto;">
            <span style="cursor:pointer; font-size:28px; color:white; float:right;" onclick="closeCapCollection()">Ô£ò</span>
            <h2 style="color:white; font-size:48px; margin-bottom:40px; font-family:'Archivo Black', sans-serif;">CAPS COLLECTION</h2>
            <div class="product-grid" id="caps-grid"></div>
        </div>
    </div>

    <div id="socks-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:5000; overflow-y:auto;">
        <div style="padding:40px; max-width:1400px; margin:40px auto;">
            <span style="cursor:pointer; font-size:28px; color:white; float:right;" onclick="closeSocksCollection()">Ô£ò</span>
            <h2 style="color:white; font-size:48px; margin-bottom:40px; font-family:'Archivo Black', sans-serif;">SOCKS COLLECTION</h2>
            <div class="product-grid" id="socks-grid"></div>
        </div>
    </div>

    <!-- Cart Overlay -->
    <div id="cart-sidebar">
        <div class="cart-header">
            <h2 class="heavy-title" style="font-size: 20px;">YOUR BAG</h2>
            <span style="cursor:pointer; font-size:24px;" onclick="toggleCart()">Ô£ò</span>
        </div>
        <div id="cart-items-list" style="margin-bottom:40px;"></div>
        <div id="cart-total" class="heavy-title" style="font-size:20px; margin-bottom:30px; border-top: 1px solid #eee; padding-top: 20px;">TOTAL : R0</div>
        
        <div class="checkout-form">
            <input type="text" id="cust-name" class="checkout-input" placeholder="Your Name">
            <input type="text" id="cust-phone" class="checkout-input" placeholder="Phone Number">
            <input type="text" id="delivery-address" class="checkout-input" placeholder="Delivery Address">
            <button class="add-to-cart-btn" style="width:100%;" onclick="processCheckout()">CHECKOUT NOW</button>
        </div>
    </div>

    <script>
let cart = [];
let nextItemId = 0;

        // Scroll Animation
        function checkScroll() {
            const elements = document.querySelectorAll('.fade-in-section');
            elements.forEach(el => {
                if (el.getBoundingClientRect().top < window.innerHeight * 0.75) {
                    el.classList.add('visible');
                }
            });
        }
        window.addEventListener('scroll', checkScroll);
        window.addEventListener('load', checkScroll);

        // Collection Data
        const acidwashItems = [
            { name: 'Acid Wash V2 Cream', image: 'Assets/Acid wash/t7 v3 green.jpeg', price: 425 },
            { name: 'Acid Wash V5 Khaki', image: 'Assets/Acid wash/v5 khaki.jpeg', price: 425 },
            { name: 'Acid Wash V3 Black', image: 'Assets/Acid wash/t7 v3 black.jpeg', price: 425 },
            { name: 'Acid Wash V3 Red', image: 'Assets/Acid wash/t7 v3 red.jpeg', price: 425 },
            { name: 'Acid Wash V3 Cream', image: 'Assets/Acid wash/t7 v3 cream.jpeg', price: 425 },
            { name: 'Acid Wash V3 Grey', image: 'Assets/Acid wash/v4 grey.jpeg', price: 425 },
        ];

        const cottonItems = [
            { name: 'Cotton V1', image: 'Assets/Cotton/co.png', price: 375 },
            { name: 'Cotton V2', image: 'Assets/Cotton/t2.jpeg', price: 375 },
            { name: 'Cotton V3', image: 'Assets/Cotton/t3.jpeg', price: 375 },
            { name: 'Cotton V2-Alt', image: 'Assets/Cotton/t13.jpeg', price: 375 },
            { name: 'Cotton V3-Alt', image: 'Assets/Cotton/t17.jpeg', price: 375 },
        ];

        const hoodieItems = [{ name: 'Hoodie V1', image: 'Assets/Jersey/WhatsApp Image 2026-05-04 at 08.51.23.jpeg', price: 650 }];
        const capItems = [{ name: 'Cap V1', image: 'Assets/Cap/cap1.jpeg', price: 250 }];
        const socksItems = [{ name: 'Socks V1', image: 'Assets/socks/socks.png', price: 120 }];

        // Modal Logic
        function openAcidWashCollection() { renderCollection('acidwash-grid', acidwashItems); document.getElementById('acidwash-modal').style.display = 'block'; }
        function closeAcidWashCollection() { document.getElementById('acidwash-modal').style.display = 'none'; }
        
        function openCottonCollection() { renderCollection('cotton-grid', cottonItems); document.getElementById('cotton-modal').style.display = 'block'; }
        function closeCottonCollection() { document.getElementById('cotton-modal').style.display = 'none'; }

        function openHoodieCollection() { renderCollection('hoodie-grid', hoodieItems); document.getElementById('hoodie-modal').style.display = 'block'; }
        function closeHoodieCollection() { document.getElementById('hoodie-modal').style.display = 'none'; }

        function openCapCollection() { renderCollection('caps-grid', capItems); document.getElementById('caps-modal').style.display = 'block'; }
        function closeCapCollection() { document.getElementById('caps-modal').style.display = 'none'; }

        function openSocksCollection() { renderCollection('socks-grid', socksItems); document.getElementById('socks-modal').style.display = 'block'; }
        function closeSocksCollection() { document.getElementById('socks-modal').style.display = 'none'; }

        function renderCollection(gridId, items) {
            const grid = document.getElementById(gridId);
            grid.innerHTML = '';
            items.forEach(item => {
                grid.innerHTML += `
                    <div class="product-card" style="background:white;">
                        <div class="product-img-wrapper"><img src="${item.image}"></div>
                        <div style="padding: 0 20px; text-align: center;">
                            <h3 class="heavy-title" style="font-size: 14px;">${item.name}</h3>
                            <p class="mono" style="color:var(--red);">R${item.price}</p>
                            <select id="size-select-${nextItemId}" class="size-select" style="width:100%; padding:10px; margin-bottom:10px; border:1px solid #ddd; font-family:'Roboto Mono', monospace; font-size:12px;">
                                <option value="">Select Size</option>
                                <option value="XS">XS</option>
                                <option value="S">S</option>
                                <option value="M">M</option>
                                <option value="L">L</option>
                                <option value="XL">XL</option>
                                <option value="XXL">XXL</option>
                            </select>
                            <button class="add-to-cart-btn" onclick="addToCart('${item.name}', ${item.price}, this.previousElementSibling)">ADD TO CART</button>
                        </div>
                    </div>`;
                nextItemId++;
            });
        }

        function toggleCart() { document.getElementById('cart-sidebar').classList.toggle('active'); }

        function addToCart(name, price, sizeSelect) {
            const size = sizeSelect.value;
            if (!size) {
                alert('Please select a size (XS-XXL)');
                return;
            }
            const itemId = nextItemId++;
            cart.push({ id: itemId, name, price, size });
            renderCart();
            updateCartCount();
            sizeSelect.value = ''; // Reset
            if(!document.getElementById('cart-sidebar').classList.contains('active')) toggleCart();
        }

        function removeFromCart(itemId) {
            cart = cart.filter(item => item.id !== itemId);
            renderCart();
            updateCartCount();
        }

        function updateCartCount() {
            document.getElementById('cart-count').innerText = `MY CART (${cart.length})`;
        }

        function calculateTotal() {
            return cart.reduce((sum, item) => sum + item.price, 0);
        }

        function renderCart() {
            const list = document.getElementById('cart-items-list');
            const totalEl = document.getElementById('cart-total');
            list.innerHTML = '';
            const total = calculateTotal();
            cart.forEach((item) => {
                list.innerHTML += `
                    <div style="border:1px solid #eee; padding:15px; margin-bottom:10px; border-radius:4px;">
                        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:5px;">
                            <span class="mono">${item.name}</span>
                            <span class="mono">R${item.price}</span>
                        </div>
                        <div style="display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#666;">
                            <span>Size: ${item.size}</span>
                            <button onclick="removeFromCart(${item.id})" style="background:var(--red); color:white; border:none; padding:5px 12px; cursor:pointer; font-family:'Roboto Mono', monospace; font-size:11px; border-radius:3px;">Remove</button>
                        </div>
                    </div>`;
            });
            totalEl.innerText = `TOTAL: R${total}`;
        }

        function processCheckout() {
            const name = document.getElementById('cust-name').value;
            const phone = document.getElementById('cust-phone').value;
            const address = document.getElementById('delivery-address').value;
            if(!name || !phone || !address || cart.length === 0) { 
                alert("Please fill all details (name, phone, delivery address) and add items."); 
                return; 
            }
            let itemsList = cart.map(i => `ÔÇó ${i.name} (Size: ${i.size}) - R${i.price}`).join('\\n');
            const total = calculateTotal();
            const body = `Customer Details: \"\nName: ${name} \"\nPhone: ${phone}\"\nDelivery Address: ${address}\"\n \"\nOrder Items:\"\n${itemsList}\"\n\"\nTotal: R${total}\"\n\"\nThank you for your order!`;
            window.location.href = `mailto: qhaweer@gmail.com?subject=QHAWEAR ONLINE ORDER&body=${encodeURIComponent(body)}`;
            // Optional: Clear cart after
            // cart = []; renderCart(); updateCartCount();
        }
    </script>
</body>
</html>