Coveo: Added search on homepage + fixed mobile renderings

Author: lamATnginx

assets/css/v2/style.css

@@ -499,6 +499,8 @@ ol li:last-child {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
+    flex-wrap: wrap;
+    column-gap: 2rem;
     align-items: center;
     width: 100%;
 
@@ -509,7 +511,7 @@ ol li:last-child {
 
     .header__search {
       display: block;
-      width: 14rem;
+      width: auto;
     }
 
     .header__product-selector {
@@ -734,6 +736,16 @@ ol li:last-child {
     }
   }
 
+  .grid-container {
+    grid-template-rows: auto 1fr auto; /* Remove the set height for header */
+
+    &:has(.homepage) {
+      .header-container .header__search {
+        display: block;
+      }
+    }
+  }
+
   .header__product-selector {
     display: none;
   }
@@ -829,7 +841,7 @@ nav {
 
   .homepage-section {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 500px));
+    grid-template-columns: repeat(auto-fit, minmax(0, 500px));
     gap: 1.5rem;
 
     justify-content: center;
@@ -1163,6 +1175,14 @@ body:not(:has(.main-layout)) header atomic-search-interface {
   }
 }
 
+@media (max-width: 568px) {
+  /* Change the order of the search when wrapping to new line on header */
+  .header__search {
+    order: 2;
+    padding-block: 1rem;
+  }
+}
+
 /* MARK: Product Selector
 */