@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//thegamingsolutions.com/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.0.5") format("woff2");
}

@font-face {
	font-family: "star";
	font-weight: 400;
	font-style: normal;
	src: url("//thegamingsolutions.com/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("//thegamingsolutions.com/wp-content/plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("//thegamingsolutions.com/wp-content/plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("//thegamingsolutions.com/wp-content/plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
}

@font-face {
	font-family: "WooCommerce";
	font-weight: 400;
	font-style: normal;
	src: url("//thegamingsolutions.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("//thegamingsolutions.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"), url("//thegamingsolutions.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype"), url("//thegamingsolutions.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce") format("svg");
}

:root {
	--wd-text-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #767676;
	--wd-text-font-size: 14px;
	--wd-title-font: "Montserrat", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Montserrat", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 600;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Montserrat", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-primary-color: rgb(89,94,224);
	--wd-alternative-color: #fbbc34;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
	--btn-default-bgcolor: rgb(23,23,23);
	--btn-default-bgcolor-hover: rgb(25,25,25);
	--btn-accented-bgcolor: rgb(90,95,222);
	--btn-accented-bgcolor-hover: rgb(82,87,203);
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
}
.wd-popup.wd-age-verify {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: url(https://thegamingsolutions.com/wp-content/uploads/2021/09/hardware-popup.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	--wd-popup-width: 800px;
}
.woodmart-woocommerce-layered-nav .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title {
	background-color: rgb(16,16,16);
	background-image: none;
	background-size: cover;
	background-position: center center;
}
.wd-footer {
	background-color: rgb(0,0,0);
	background-image: url(https://thegamingsolutions.com/wp-content/uploads/2021/09/hardware-footer-bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
}
.page .wd-page-content {
	background-color: rgb(16,16,16);
	background-image: none;
}
.wd-popup.popup-quick-view {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #fff;
--btn-default-color-hover: #fff;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--btn-accented-box-shadow-active: none;
--btn-accented-bottom: 0px;
--wd-brd-radius: 0px;
}

@media (min-width: 1239px) {
.platform-Windows .wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}

@media (min-width: 1222px) {
html:not(.platform-Windows) .wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Customize Your Gaming PC | The Gaming Solutions</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
            color: #fff;
            min-height: 100vh;
            padding-bottom: 40px;
            overflow-x: hidden;
        }
        
        /* Header styles - Easy to edit with Elementor */
        .header {
            text-align: center;
            padding: 30px 20px;
            background: rgba(0, 0, 0, 0.7);
            position: relative;
            overflow: hidden;
            border-bottom: 2px solid #e60000;
        }
        
        .welcome-heading {
            font-size: 2.8rem;
            margin-bottom: 10px;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 800;
            text-shadow: 0 0 10px rgba(230, 0, 0, 0.5);
        }
        
        .main-heading {
            font-size: 2.2rem;
            color: #e60000;
            margin-bottom: 10px;
            font-weight: 700;
            letter-spacing: 1px;
        }
        
        /* Categories container - Easy to duplicate in Elementor */
        .categories-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
            max-width: 1400px;
            margin: 30px auto;
            padding: 0 20px;
        }
        
        .category {
            background: rgba(20, 20, 20, 0.8);
            border-radius: 10px;
            overflow: hidden;
            width: 100%;
            max-width: 650px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            border: 1px solid #333;
        }
        
        .category-header {
            background: linear-gradient(90deg, #1a1a1a, #2a2a2a);
            padding: 15px 20px;
            border-bottom: 2px solid #e60000;
        }
        
        .category-title {
            font-size: 1.8rem;
            color: #fff;
            text-align: center;
            font-weight: 600;
            letter-spacing: 1px;
        }
        
        /* Image containers - Easy to replace in Elementor */
        .category-image {
            width: 100%;
            height: 250px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #121212;
            overflow: hidden;
        }
        
        .category-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .category-image:hover img {
            transform: scale(1.03);
        }
        
        /* Components section - Easy to edit in Elementor */
        .components {
            padding: 20px;
        }
        
        .component-group {
            margin-bottom: 25px;
        }
        
        .group-title {
            font-size: 1.4rem;
            margin-bottom: 15px;
            color: #e60000;
            padding-bottom: 5px;
            border-bottom: 1px solid #444;
            display: flex;
            align-items: center;
        }
        
        .group-title i {
            margin-right: 10px;
            color: #e60000;
        }
        
        .component-options {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 15px;
        }
        
        .component-option {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid #444;
            border-radius: 8px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .component-option:hover {
            background: rgba(50, 50, 50, 0.7);
            border-color: #e60000;
            transform: translateY(-3px);
        }
        
        .component-option.selected {
            background: rgba(70, 0, 0, 0.3);
            border-color: #e60000;
            box-shadow: 0 0 15px rgba(230, 0, 0, 0.3);
        }
        
        .option-name {
            font-weight: 600;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
        }
        
        .option-price {
            color: #e60000;
            font-weight: 700;
        }
        
        .option-details {
            font-size: 0.9rem;
            color: #aaa;
            line-height: 1.5;
        }
        
        /* Order summary - Easy to style in Elementor */
        .order-summary {
            background: rgba(20, 20, 20, 0.9);
            max-width: 1000px;
            margin: 40px auto 30px;
            padding: 25px;
            border-radius: 10px;
            border: 1px solid #333;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        }
        
        .summary-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #444;
        }
        
        .summary-title {
            font-size: 1.8rem;
            color: #fff;
        }
        
        .total-price {
            font-size: 2rem;
            color: #e60000;
            font-weight: 700;
        }
        
        .selected-items {
            margin-bottom: 25px;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .selected-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #333;
        }
        
        .item-name {
            display: flex;
            align-items: center;
        }
        
        .item-price {
            color: #e60000;
            font-weight: 600;
        }
        
        .order-btn {
            display: block;
            width: 100%;
            padding: 16px;
            background: linear-gradient(90deg, #e60000, #b30000);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1.2rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .order-btn:hover {
            background: linear-gradient(90deg, #ff1a1a, #cc0000);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(230, 0, 0, 0.4);
        }
        
        .order-btn:active {
            transform: translateY(0);
        }
        
        /* Footer */
        .footer {
            text-align: center;
            padding: 20px;
            color: #777;
            font-size: 0.9rem;
            margin-top: 20px;
        }
        
        /* Elementor Editing Hints */
        .elementor-hint {
            position: absolute;
            top: 5px;
            right: 5px;
            background: rgba(230, 0, 0, 0.7);
            color: white;
            font-size: 0.7rem;
            padding: 2px 5px;
            border-radius: 3px;
            z-index: 10;
        }
        
        /* Responsive design */
        @media (max-width: 768px) {
            .categories-container {
                flex-direction: column;
                align-items: center;
            }
            
            .welcome-heading {
                font-size: 2.2rem;
            }
            
            .main-heading {
                font-size: 1.8rem;
            }
            
            .component-options {
                grid-template-columns: 1fr;
            }
        }
        
        /* Animation for the total price */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .pulse {
            animation: pulse 0.5s ease;
        }
    </style>
</head>
<body>
    <!-- Header Section - Edit text in Elementor -->
    <header class="header">
        <h1 class="welcome-heading">Welcome to The Gaming Solutions</h1>
        <h2 class="main-heading">Customize your PC according to your needs</h2>
    </header>
    
    <div class="categories-container">
        <!-- Category 1: PC Components - Duplicate this section for more categories -->
        <div class="category">
            <div class="category-header">
                <h3 class="category-title">PC Components</h3>
            </div>
            <div class="category-image">
                <span class="elementor-hint">Click to edit image</span>
                <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Gaming PC Components">
            </div>
            <div class="components">
                <!-- Processor Group - Duplicate this group for more components -->
                <div class="component-group">
                    <h4 class="group-title"><i class="fas fa-microchip"></i> Processor (CPU)</h4>
                    <div class="component-options">
                        <!-- Component Option 1 - Duplicate for more options -->
                        <div class="component-option" data-price="299" data-name="AMD Ryzen 5 5600X">
                            <span class="elementor-hint">Edit in Elementor</span>
                            <div class="option-name">
                                <span>AMD Ryzen 5 5600X</span>
                                <span class="option-price">$299</span>
                            </div>
                            <div class="option-details">6-Core, 12-Thread, 3.7GHz Base, 4.6GHz Boost</div>
                        </div>
                        
                        <div class="component-option" data-price="449" data-name="Intel Core i7-12700K">
                            <span class="elementor-hint">Edit in Elementor</span>
                            <div class="option-name">
                                <span>Intel Core i7-12700K</span>
                                <span class="option-price">$449</span>
                            </div>
                            <div class="option-details">12-Core (8P+4E), 20-Thread, 3.6GHz Base, 5.0GHz Boost</div>
                        </div>
                        
                        <div class="component-option" data-price="699" data-name="AMD Ryzen 9 7950X">
                            <span class="elementor-hint">Edit in Elementor</span>
                            <div class="option-name">
                                <span>AMD Ryzen 9 7950X</span>
                                <span class="option-price">$699</span>
                            </div>
                            <div class="option-details">16-Core, 32-Thread, 4.5GHz Base, 5.7GHz Boost</div>
                        </div>
                    </div>
                </div>
                
                <!-- Graphics Card Group -->
                <div class="component-group">
                    <h4 class="group-title"><i class="fas fa-gamepad"></i> Graphics Card (GPU)</h4>
                    <div class="component-options">
                        <div class="component-option" data-price="499" data-name="NVIDIA RTX 3060 Ti">
                            <span class="elementor-hint">Edit in Elementor</span>
                            <div class="option-name">
                                <span>NVIDIA RTX 3060 Ti</span>
                                <span class="option-price">$499</span>
                            </div>
                            <div class="option-details">8GB GDDR6, 4864 CUDA Cores, 1665 MHz Boost</div>
                        </div>
                        
                        <div class="component-option" data-price="799" data-name="AMD Radeon RX 6800 XT">
                            <span class="elementor-hint">Edit in Elementor</span>
                            <div class="option-name">
                                <span>AMD Radeon RX 6800 XT</span>
                                <span class="option-price">$799</span>
                            </div>
                            <div class="option-details">16GB GDDR6, 4608 Stream Processors, 2250 MHz Boost</div>
                        </div>
                        
                        <div class="component-option" data-price="1599" data-name="NVIDIA RTX 4090">
                            <span class="elementor-hint">Edit in Elementor</span>
                            <div class="option-name">
                                <span>NVIDIA RTX 4090</span>
                                <span class="option-price">$1599</span>
                            </div>
                            <div class="option-details">24GB GDDR6X, 16384 CUDA Cores, 2520 MHz Boost</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Category 2: Peripherals -->
        <div class="category">
            <div class="category-header">
                <h3 class="category-title">Gaming Peripherals</h3>
            </div>
            <div class="category-image">
                <span class="elementor-hint">Click to edit image</span>
                <img src="https://images.unsplash.com/photo-1600086827875-a7d91c97e1e8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Gaming Peripherals">
            </div>
            <div class="components">
                <!-- Monitor Group -->
                <div class="component-group">
                    <h4 class="group-title"><i class="fas fa-desktop"></i> Gaming Monitor</h4>
                    <div class="component-options">
                        <div class="component-option" data-price="249" data-name="24″ 1080p 144Hz">
                            <span class="elementor-hint">Edit in Elementor</span>
                            <div class="option-name">
                                <span>24″ 1080p 144Hz</span>
                                <span class="option-price">$249</span>
                            </div>
                            <div class="option-details">IPS Panel, 1ms Response, AMD FreeSync</div>
                        </div>
                        
                        <div class="component-option" data-price="449" data-name="27″ 1440p 165Hz">
                            <span class="elementor-hint">Edit in Elementor</span>
                            <div class="option-name">
                                <span>27″ 1440p 165Hz</span>
                                <span class="option-price">$449</span>
                            </div>
                            <div class="option-details">Nano IPS, 1ms, G-SYNC Compatible</div>
                        </div>
                        
                        <div class="component-option" data-price="899" data-name="34″ Ultrawide 1440p">
                            <span class="elementor-hint">Edit in Elementor</span>
                            <div class="option-name">
                                <span>34″ Ultrawide 1440p</span>
                                <span class="option-price">$899</span>
                            </div>
                            <div class="option-details">Curved, 144Hz, HDR600, USB-C</div>
                        </div>
                    </div>
                </div>
                
                <!-- Keyboard Group -->
                <div class="component-group">
                    <h4 class="group-title"><i class="fas fa-keyboard"></i> Mechanical Keyboard</h4>
                    <div class="component-options">
                        <div class="component-option" data-price="89" data-name="TKL Mechanical">
                            <span class="elementor-hint">Edit in Elementor</span>
                            <div class="option-name">
                                <span>TKL Mechanical</span>
                                <span class="option-price">$89</span>
                            </div>
                            <div class="option-details">RGB Backlit, Red Switches, Detachable Cable</div>
                        </div>
                        
                        <div class="component-option" data-price="129" data-name="Wireless Mechanical">
                            <span class="elementor-hint">Edit in Elementor</span>
                            <div class="option-name">
                                <span>Wireless Mechanical</span>
                                <span class="option-price">$129</span>
                            </div>
                            <div class="option-details">Bluetooth/2.4Ghz, Brown Switches, PBT Keycaps</div>
                        </div>
                        
                        <div class="component-option" data-price="199" data-name="Premium Aluminum">
                            <span class="elementor-hint">Edit in Elementor</span>
                            <div class="option-name">
                                <span>Premium Aluminum</span>
                                <span class="option-price">$199</span>
                            </div>
                            <div class="option-details">CNC Aluminum Frame, Hot-Swappable, Per-Key RGB</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Order Summary - Easy to style in Elementor -->
    <div class="order-summary">
        <div class="summary-header">
            <h3 class="summary-title">Your Custom Build</h3>
            <div class="total-price">$<span id="total">0</span></div>
        </div>
        
        <div class="selected-items" id="selected-items">
            <div class="selected-item">
                <div class="item-name">No items selected yet</div>
                <div class="item-price">$0</div>
            </div>
        </div>
        
        <button class="order-btn" id="order-btn">Proceed to Order</button>
    </div>
    
    <!-- Footer -->
    <div class="footer">
        <p>© 2023 The Gaming Solutions. All Rights Reserved. | Premium Gaming Equipment & Custom PC Builds</p>
    </div>
    
    <!-- Elementor Editing Guide -->
    <div class="elementor-guide" style="max-width: 1000px; margin: 20px auto; padding: 20px; background: rgba(30,30,30,0.8); border-radius: 8px; border-left: 4px solid #e60000;">
        <h3 style="color: #e60000; margin-bottom: 15px;">Elementor Editing Guide</h3>
        <ul style="list-style: none; line-height: 1.8;">
            <li><i class="fas fa-edit" style="color: #e60000; width: 20px;"></i> <strong>Text Editing:</strong> Click on any text to edit content directly</li>
            <li><i class="fas fa-image" style="color: #e60000; width: 20px;"></i> <strong>Image Replacement:</strong> Click on images to replace with your own</li>
            <li><i class="fas fa-dollar-sign" style="color: #e60000; width: 20px;"></i> <strong>Price Updates:</strong> Edit prices directly in the component options</li>
            <li><i class="fas fa-copy" style="color: #e60000; width: 20px;"></i> <strong>Add Components:</strong> Duplicate existing sections to add more products</li>
            <li><i class="fas fa-paint-brush" style="color: #e60000; width: 20px;"></i> <strong>Style Customization:</strong> Use Elementor's style options to modify colors and fonts</li>
        </ul>
    </div>
    
    <script>
        // Initialize variables
        let total = 0;
        let selectedItems = [];
        const totalElement = document.getElementById('total');
        const selectedItemsContainer = document.getElementById('selected-items');
        const orderBtn = document.getElementById('order-btn');
        
        // Add click event to all component options
        const componentOptions = document.querySelectorAll('.component-option');
        componentOptions.forEach(option => {
            option.addEventListener('click', () => {
                // Toggle selection
                option.classList.toggle('selected');
                
                // Get item data
                const price = parseInt(option.dataset.price);
                const name = option.dataset.name;
                
                // Check if item is selected
                if (option.classList.contains('selected')) {
                    // Add to total
                    total += price;
                    // Add to selected items
                    selectedItems.push({ name, price });
                } else {
                    // Remove from total
                    total -= price;
                    // Remove from selected items
                    selectedItems = selectedItems.filter(item => item.name !== name);
                }
                
                // Update UI
                updateTotal();
                updateSelectedItems();
            });
        });
        
        // Update total display
        function updateTotal() {
            totalElement.textContent = total;
            totalElement.classList.add('pulse');
            setTimeout(() => totalElement.classList.remove('pulse'), 500);
        }
        
        // Update selected items list
        function updateSelectedItems() {
            // Clear current items
            selectedItemsContainer.innerHTML = '';
            
            if (selectedItems.length === 0) {
                selectedItemsContainer.innerHTML = `
                    <div class="selected-item">
                        <div class="item-name">No items selected yet</div>
                        <div class="item-price">$0</div>
                    </div>
                `;
                return;
            }
            
            // Add each selected item
            selectedItems.forEach(item => {
                const itemElement = document.createElement('div');
                itemElement.className = 'selected-item';
                itemElement.innerHTML = `
                    <div class="item-name">${item.name}</div>
                    <div class="item-price">$${item.price}</div>
                `;
                selectedItemsContainer.appendChild(itemElement);
            });
        }
        
        // Order button functionality
        orderBtn.addEventListener('click', () => {
            if (selectedItems.length === 0) {
                alert('Please select at least one component before placing an order!');
                return;
            }
            
            alert(`Order placed successfully!\nTotal: $${total}\n\nThank you for choosing The Gaming Solutions!`);
            
            // Reset selections (optional)
            // componentOptions.forEach(option => option.classList.remove('selected'));
            // total = 0;
            // selectedItems = [];
            // updateTotal();
            // updateSelectedItems();
        });
        
        // Initialize the page
        updateSelectedItems();
    </script>
</body>
</html>