How do I style the search bar in Squarespace navigation?

The Squarespace 7.1 header search is triggered by a search icon in .header-actions-action--search. When clicked, it expands into a full-width or overlay search input using .header-search-form.

Style the expanded search input, its background overlay, and the close button to create a seamless search experience that matches your brand rather than the default minimal styling.

.header-search-form input[type="text"] {
  font-size: 24px;
  font-weight: 300;
  border: none;
  border-bottom: 2px solid #111;
  padding: 12px 0;
  background: transparent;
  width: 100%;
  color: #111;
}
.header-search-form input[type="text"]::placeholder {
  color: #aaa;
}
.header-search-form {
  background: rgba(255, 255, 255, 0.98);
  padding: 40px;
}