search: apply the injection-proven width override (forces search-form/field width:auto + input 220px, beats Boost)

c2f92745acdb4afa2fc6a4106a5b3dfd9e49e8fa · 2026-07-15 10:05:39 -0700 · Steve Abrams

Files touched

M assets/custom.css

Diff

commit c2f92745acdb4afa2fc6a4106a5b3dfd9e49e8fa
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed Jul 15 10:05:39 2026 -0700

    search: apply the injection-proven width override (forces search-form/field width:auto + input 220px, beats Boost)
---
 assets/custom.css | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/assets/custom.css b/assets/custom.css
index 313508f..7e7d170 100644
--- a/assets/custom.css
+++ b/assets/custom.css
@@ -1427,19 +1427,25 @@ input.add-to-cart:hover,
   pointer-events: none;
   transition: max-width 0.3s ease, opacity 0.2s ease;
 }
-.header-quick-search.search-open .search-form {
-  max-width: 26ch;
-  overflow: visible;
-  opacity: 1;
-  pointer-events: auto;
+/* OPEN state — proven to beat Boost's width pin (verified via live injection: 54px -> 220px) */
+.header-content-right .header-quick-search.search-open .search-form {
+  max-width: 240px !important;
+  width: auto !important;
+  overflow: visible !important;
+  opacity: 1 !important;
+  pointer-events: auto !important;
 }
-.header-quick-search .search-form__field {
+.header-content-right .header-quick-search.search-open .search-form__field {
   width: auto !important;
+  max-width: none !important;
+  overflow: visible !important;
   margin: 0 !important;
 }
-.header-quick-search .search-form__input {
-  width: 20ch !important;
+.header-content-right .header-quick-search .search-form__input.input {
+  width: 220px !important;
+  min-width: 220px !important;
   max-width: none !important;
+  flex: 0 0 220px !important;
   padding: 6px 10px !important;
   border: 1px solid rgba(0, 0, 0, 0.28) !important;
   border-radius: 4px !important;
@@ -1449,11 +1455,13 @@ input.add-to-cart:hover,
   display: none !important;
 }
 @media (max-width: 539px) {
-  .header-quick-search.search-open .search-form {
-    max-width: 62vw;
+  .header-content-right .header-quick-search.search-open .search-form {
+    max-width: 66vw !important;
   }
-  .header-quick-search .search-form__input {
-    width: 100% !important;
+  .header-content-right .header-quick-search .search-form__input.input {
+    width: 64vw !important;
+    min-width: 0 !important;
+    flex: 0 0 64vw !important;
   }
 }

← 4803440 header: right cluster flex at all widths (was stacking on de · back to Dw Theme Hamburger · header: dead-center the logo/wordmark on all viewports (abso 1690a77 →