Update search-script.js

search-script.js

@@ -1,55 +1,4 @@
-<!-- HTML for Search Icon and Search Bar -->
+document.addEventListener('DOMContentLoaded', function() {
-<div class="header__icon--search">🔍 Click to search</div>
-
-<div id="search-bar" style="display: none;">
-    <input type="text" id="search-input" placeholder="Search products..." />
-    <div id="search-results" class="search-results"></div>
-</div>
-
-<style>
-    /* CSS for search bar styling */
-    .search-result-item {
-        display: flex;
-        padding: 10px;
-        border-bottom: 1px solid #ddd;
-    }
-    .search-result-image {
-        width: 60px;
-        height: 60px;
-        object-fit: cover;
-        margin-right: 10px;
-    }
-    .search-result-info {
-        flex: 1;
-    }
-    .search-result-meta {
-        display: flex;
-        justify-content: space-between;
-        font-size: 0.9em;
-        color: #555;
-    }
-    #search-bar.active {
-        display: block;
-    }
-    #search-bar {
-        margin-top: 10px;
-    }
-    .search-results {
-        max-height: 300px;
-        overflow-y: auto;
-        margin-top: 10px;
-    }
-    .header__icon--search {
-        cursor: pointer;
-        padding: 10px;
-        border: 1px solid #ccc;
-        display: inline-block;
-        margin-top: 20px;
-    }
-</style>
-
-<script>
-    document.addEventListener('DOMContentLoaded', function() {
     // Define product type keywords and their standardized forms
     const productTypes = {
         'mug': ['mug', 'cup'],
@@ -260,5 +209,4 @@
         searchBar.classList.toggle('active');
         searchBar.querySelector('input').focus();
     });
-    });
+});
-</script>