header {
  z-index: 999;
  position: relative;
}
#MainContent:after {
  content: '';
  background: var(--page-background-color, #0004);
  opacity: 0;
  pointer-events: none;
  z-index: 900;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}
body:has(.search-bar.active) #MainContent:after {
  opacity: 1;
  pointer-events: auto;
}
.search-bar {
  background: var(--color-neutral-0);
}
.search-bar:not(.active)
  :is(.search-bar__header, .search-bar__content, .search-bar__field ~ .search-bar__cancel-button),
.search-bar.showing-suggestions
  :is(search-bar-searches, .search-bar__content:has(.search-bar-suggestions__list:empty)),
.search-bar:not(.showing-suggestions)
  :is(search-bar-suggestions, .search-bar__content:has(.search-bar-searches__list:empty)) {
  display: none;
}
.search-bar__header {
  min-height: 70px;
}
.search-bar__field {
  border: 1px solid var(--color-neutral-900);
  border-radius: 4px;
  height: 48px;
}
.search-bar__field:has(.search-bar__field-input:focus) {
  outline: 1px solid var(--color-neutral-900);
}
:is(
  .search-bar__field:has(input.has-value) .search-bar__field-button--submit,
  .search-bar__field:not(:has(input.has-value)) .search-bar__field-button--clear
) {
  display: none;
}
.search-bar__field-input {
  border: none;
  font-size: 16px;
}
.search-bar__field-input::placeholder {
  color: var(--color-neutral-700);
}
.search-bar__field-input:focus {
  outline: none;
}
.search-bar__field-button {
  border-radius: 4px;
  width: 52px;
  height: calc(100% - 8px);
  margin: 4px;
}
.search-bar__field-button:is(:hover, :focus) {
  background: var(--color-neutral-50);
}
.search-bar__cancel-button {
  white-space: nowrap;
}
.search-bar__content {
  overflow-y: auto;
}
.search-bar__content ul {
  padding: 0;
  list-style: none;
}
.search-bar__content li a {
  display: block;
}
.search-bar__content li a:hover {
  text-decoration: underline;
}
.search-bar__content li a:focus {
  outline: 2px solid var(--color-brand, #3a69ff);
  outline-offset: 2px;
  border-radius: 4px;
}
.search-bar__content li a:focus:not(:focus-visible) {
  outline: none;
}
@media screen and (min-width: 1024px) {
  .search-bar__content {
    border-radius: 0 0 8px 8px;
  }
}
@media screen and (max-width: 1023px) {
  .search-bar.active {
    z-index: 1;
    width: 100%;
    padding-inline: 16px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .header-menu-search .search-bar.active {
    z-index: 110;
    height: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .search-bar.active,
  .header-menu-search .search-bar {
    max-width: 100%;
  }
  .header-menu-search .search-bar__header {
    display: flex;
  }
  .header-menu-search .search-bar__field + .search-bar__cancel-button {
    display: none;
  }
  .header-menu-search .search-bar__content {
    padding-inline: var(--spacing-xs);
    position: static;
  }
}
@media screen and (min-width: 768px) {
  .search-bar {
    max-width: 500px;
  }
  .search-bar__content {
    background: var(--color-neutral-0);
    position: absolute;
    top: 100%;
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  .search-bar.active {
    min-height: 138px;
  }
}