header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .85);
  border-bottom: 1px solid #dedede;
}


/* Mutual exclusive search: 600px = wp:navigation overlayMenu "mobile" breakpoint */
header.wp-block-template-part .wp-block-search.search-mobile {
  display: none;
}

/* Mobile menu range. Lower bound: below 300px the inline input is too
   narrow to be usable, so fall back to the desktop search inside the
   opened overlay menu (search-mobile stays hidden from base rule). */
@media (min-width: 450px) and (max-width: 599.98px) {
  header.wp-block-template-part .wp-block-search.search-mobile {
    display: block;
  }

  header.wp-block-template-part .wp-block-navigation .wp-block-search.search-desktop {
    display: none;
  }
}

/* Search have to be always show at any screen size, but this range
   have just enough to show but will break in new line if not handle input width */
@media (min-width: 600px) and (max-width: 700px) {
  header.wp-block-template-part .wp-block-navigation .wp-block-search.search-desktop .wp-block-search__input {
    max-width: 10ch;
  }
}

header.wp-block-template-part .wp-block-search .wp-block-search__inside-wrapper {
  padding: 0;
  border-radius: 30px;
  border-color: var(--border);
  background-color: var(--surface-200);
}

header.wp-block-template-part .wp-block-search .wp-block-search__input {
  background-color: var(--surface-200);
}

header.wp-block-template-part .wp-block-search .wp-block-search__input:not(:focus) {
  max-width: 10ch;
}

header.wp-block-template-part .wp-block-search .wp-block-search__button {
  margin: 0;
  padding: 5px;
  background-color: var(--surface-200);
  color: currentColor;
}