.site-home-search.site-home-search {
  overflow: visible;
  isolation: isolate;
  z-index: 2;
}

.site-home-search .site-search-shell {
  position: relative;
  z-index: 20;
}

.site-search-field {
  position: relative;
  min-width: 0;
}

.site-search-field:focus-within {
  outline: 2px solid #3a8a41;
  outline-offset: -2px;
  border-radius: 0.5rem;
  z-index: 2;
}

.site-search-options {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  width: max(100%, 18rem);
  max-width: calc(100vw - 2.5rem);
  max-height: min(18rem, 40vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.25rem;
  border: 1px solid #d6d3d1;
  border-radius: 0.5rem;
  background: #fff;
  color: #44403c;
  box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
  z-index: 50;
  text-align: left;
}

.site-search-options[hidden] {
  display: none;
}

.site-search-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.625rem 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.4;
}

.site-search-option > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.site-search-option:hover,
.site-search-option[aria-selected="true"] {
  background: #f0f7f0;
  color: #1e4722;
}

.site-search-option small {
  flex-shrink: 0;
  max-width: 7rem;
  color: #78716c;
  font-size: 0.6875rem;
}

.site-search-empty {
  padding: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

@media (max-width: 639px) {
  .site-search-options {
    width: 100%;
  }

  .site-home-search .site-search-field input {
    font-size: 16px;
  }
}