<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>London Silk Wholesale | Custom Cut Fabrics</title>
    <style>
        /* --- CSS VARIABLES --- */
        :root {
            --primary-color: #1a1a1a;       /* Dark Grey text */
            --accent-color: #aa8c30;        /* Antique Gold */
            --bg-color: #f4f4f4;            /* Light grey background */
            --card-bg: #ffffff;             /* White cards */
            --font-main: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            --font-serif: 'Times New Roman', serif; 
        }

        /* --- GLOBAL STYLES --- */
        body {
            margin: 0;
            padding: 0;
            font-family: var(--font-main);
            background-color: var(--bg-color);
            color: var(--primary-color);
            line-height: 1.6;
        }

        /* --- HEADER --- */
        header {
            text-align: center;
            padding: 60px 20px;
            background: var(--card-bg);
            border-bottom: 3px solid var(--accent-color);
        }

        h1 {
            font-family: var(--font-serif);
            font-size: 2.5rem;
            margin-bottom: 10px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .subtitle {
            font-style: italic;
            color: #666;
            margin-bottom: 30px;
        }

        .specs-banner {
            background: var(--primary-color);
            color: #fff;
            display: inline-block;
            padding: 8px 25px;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* --- PRODUCT GRID --- */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 20px;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 30px;
        }

        .product-card {
            background: var(--card-bg);
            border: 1px solid #e0e0e0;
            padding: 25px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            transition: transform 0.2s ease;
        }

        .product-card:hover {
            transform: translateY(-5px);
            border-color: var(--accent-color);
        }

        .placeholder-img {
            width: 100%;
            height: 180px;
            background-color: #eee;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #888;
            font-family: var(--font-serif);
            font-style: italic;
        }

        .product-title {
            font-family: var(--font-serif);
            font-size: 1.5rem;
            margin: 10px 0 5px 0;
            color: var(--primary-color);
        }

        .product-desc {
            font-size: 0.85rem;
            color: #666;
            margin-bottom: 15px;
            height: 40px; /* Keeps cards aligned even if text length varies */
        }

        .price-tag {
            font-weight: bold;
            font-size: 1.2rem;
            color: var(--accent-color);
            margin-bottom: 20px;
            display: block;
        }

        /* --- ORDER INPUTS --- */
        .order-controls {
            background: #fafafa;
            padding: 15px;
            border-radius: 4px;
        }

        .input-group {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        label {
            font-size: 0.75rem;
            text-transform: uppercase;
            font-weight: bold;
        }

        input[type="number"] {
            width: 60px;
            padding: 8px;
            border: 1px solid #ccc;
            text-align: center;
            font-weight: bold;
        }

        .total-display {
            display: block;
            margin-bottom: 10px;
            font-size: 0.9rem;
            color: var(--primary-color);
            font-weight: bold;
        }

        .btn {
            width: 100%;
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px;
            cursor: pointer;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 1px;
            transition: background 0.3s;
        }

        .btn:hover {
            background-color: var(--accent-color);
        }

        /* --- FOOTER --- */
        footer {
            text-align: center;
            padding: 50px 20px;
            background: #fff;
            border-top: 1px solid #eee;
            margin-top: 50px;
            color: #666;
        }

    </style>
</head>
<body>

    <header>
        <h1>London Silk Wholesale</h1>
        <p class="subtitle">Fine Fabrics for Trade & Design</p>
        <div class="specs-banner">
            Width: 44" (112cm) | Custom Cut by the Metre
        </div>
    </header>

    <main class="container">
        <div class="product-grid">

            <div class="product-card" data-price="18">
                <div class="placeholder-img">Image: Crepe de Chine</div>
                <h2 class="product-title">Crepe de Chine</h2>
                <p class="product-desc">16mm weight. Matte finish with subtle texture. Ideal for blouses.</p>
                <span class="price-tag">£18.00 / metre</span>
                
                <div class="order-controls">
                    <div class="input-group">
                        <label>Metres:</label>
                        <input type="number" min="5" value="5" oninput="calculateTotal(this)">
                    </div>
                    <span class="total-display">Total: £90.00</span>
                    <button class="btn" onclick="alert('Added to quote!')">Add to Quote</button>
                </div>
            </div>

            <div class="product-card" data-price="24">
                <div class="placeholder-img">Image: Silk Satin</div>
                <h2 class="product-title">Silk Charmeuse</h2>
                <p class="product-desc">19mm weight. High lustre face. The classic choice for evening wear.</p>
                <span class="price-tag">£24.00 / metre</span>
                
                <div class="order-controls">
                    <div class="input-group">
                        <label>Metres:</label>
                        <input type="number" min="5" value="5" oninput="calculateTotal(this)">
                    </div>
                    <span class="total-display">Total: £120.00</span>
                    <button class="btn" onclick="alert('Added to quote!')">Add to Quote</button>
                </div>
            </div>

            <div class="product-card" data-price="12">
                <div class="placeholder-img">Image: Habotai</div>
                <h2 class="product-title">Silk Habotai</h2>
                <p class="product-desc">8mm weight. Lightweight and smooth. Essential for luxury linings.</p>
                <span class="price-tag">£12.00 / metre</span>
                
                <div class="order-controls">
                    <div class="input-group">
                        <label>Metres:</label>
                        <input type="number" min="5" value="5" oninput="calculateTotal(this)">
                    </div>
                    <span class="total-display">Total: £60.00</span>
                    <button class="btn" onclick="alert('Added to quote!')">Add to Quote</button>
                </div>
            </div>

            <div class="product-card" data-price="15">
                <div class="placeholder-img">Image: Organza</div>
                <h2 class="product-title">Silk Organza</h2>
                <p class="product-desc">10mm weight. Sheer and stiff. Perfect for volume and structure.</p>
                <span class="price-tag">£15.00 / metre</span>
                
                <div class="order-controls">
                    <div class="input-group">
                        <label>Metres:</label>
                        <input type="number" min="5" value="5" oninput="calculateTotal(this)">
                    </div>
                    <span class="total-display">Total: £75.00</span>
                    <button class="btn" onclick="alert('Added to quote!')">Add to Quote</button>
                </div>
            </div>

        </div>
    </main>

    <footer>
        <p><strong>Wholesale Terms:</strong> Minimum order 5 metres per fabric.</p>
        <p>Prices Exclude VAT & Shipping.</p>
        <p>&copy; 2023 London Silk Wholesale Ltd.</p>
    </footer>

    <script>
        function calculateTotal(inputElement) {
            // 1. Find the parent card to get the price
            const card = inputElement.closest('.product-card');
            const pricePerMetre = parseFloat(card.getAttribute('data-price'));
            
            // 2. Get the quantity entered by user
            let quantity = parseInt(inputElement.value);
            
            // Safety check: if box is empty or < 0, assume 0
            if (isNaN(quantity) || quantity < 0) quantity = 0;

            // 3. Calculate Total
            const total = pricePerMetre * quantity;

            // 4. Update the text on the screen
            const display = card.querySelector('.total-display');
            display.textContent = 'Total: £' + total.toFixed(2);
        }
    </script>

</body>
</html>