Beh & Yo

/* With scripting disabled the JS never adds .is-open, so without this the input stays at its collapsed width:0/opacity:0 and is unreachable even though the form itself works via a plain GET submit. Give it the same open dimensions the .is-open rule uses. tabindex stays -1 in the markup (harmless with no JS to react to it) so nothing here needs to touch it. */ .floating-search__input { width: 220px; height: 48px; padding: 0 1rem; opacity: 1; pointer-events: auto; } @media (max-width: 768px) { .floating-search__input { width: min(180px, calc(100vw - 154px)); height: 44px; } }