help me update the search input, make it bigger on mobile

index.html

@@ -139,7 +139,6 @@
             max-width: 500px;
             margin: 0 auto;
         }
-        
         .search-input {
             width: 100%;
             background: var(--glass-bg-dark);
@@ -155,8 +154,31 @@
             z-index: 5;
             min-height: 50px;
         }
-        
-        .search-input::placeholder {
+
+        @media (max-width: 768px) {
+            .search-input {
+                font-size: 18px;
+                padding: 20px 24px 20px 56px;
+                min-height: 60px;
+            }
+            .search-icon {
+                font-size: 18px;
+                left: 20px;
+            }
+            .search-clear {
+                right: 18px;
+                font-size: 18px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .search-input {
+                font-size: 16px;
+                padding: 18px 20px 18px 52px;
+                min-height: 56px;
+            }
+        }
+.search-input::placeholder {
             color: var(--text-muted);
         }
         
@@ -726,17 +748,7 @@
             .header-text {
                 font-size: 2rem;
             }
-
-            .search-input {
-                padding: 12px 16px 12px 40px;
-                font-size: 14px;
-            }
-
-            .search-icon {
-                left: 12px;
-            }
-
-            .price-section {
+.price-section {
                 padding: 0.75rem;
             }