predictive-search {
  width: 100%;
  display: block;
}

predictive-search:not([open]) .predictive-search {
  display: none !important;
}

predictive-search[open] .search-recommendations {
  display: none !important;
}

predictive-search[open] .predictive-search,
predictive-search[loading] .predictive-search {
  display: block !important;
}

predictive-search .spinner {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 0;
}

predictive-search[loading] .predictive-search__loading-state {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  padding: 1rem;
}

predictive-search:not([loading]) .predictive-search__heading .spinner,
predictive-search:not([loading]) .predictive-search__loading-state,
predictive-search:not([loading]) .predictive-search-status__loading,
predictive-search[loading] .predictive-search__heading ~ .predictive-search__loading-state,
predictive-search[loading] .predictive-search__results-list:first-child,
predictive-search[loading] .predictive-search__search-for-button,
predictive-search[loading] .predictive-search__results-groups-wrapper ~ .predictive-search__loading-state,
predictive-search[loading] .predictive-search__results-groups-wrapper ~ .predictive-search__search-for-button {
  display: none;
}

.predictive-search:focus-visible {
  outline: none !important;
}

.predictive-search__heading {
  display: block;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 0.1rem solid var(--color-borders);
  margin: 2rem 0;
  padding: 1.5rem 0 2rem;
  color: rgba(var(--color-foreground), 0.5);
}

/* Search form container */
.header-search__form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
}

.header-search__close {
  min-width: var(--min-height);
  min-height: var(--min-height);
  display: grid;
  place-content: center;
  cursor: pointer;
}

.search__button.field__button {
  top: 50%;
  width: 4.4rem;
  transform: translateY(-50%);
  min-width: 48px;
  padding-right: var(--padding);
  padding-left: var(--padding);
}

.reset__button.field__button {
  right: calc(var(--input-border-width) + 4.4rem);
  top: 50%;
  width: 4.4rem;
  transform: translateY(-50%);
}

.predictive-search__result-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.predictive-search__search-for-button {
  margin-top: 3rem;
}

.predictive-search__item {
  display: flex;
  padding: 1rem 0;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.predictive-search__image {
  grid-area: product-image;
  object-fit: contain;
  font-family: "object-fit: contain";
}

.predictive-search__item--link-with-thumbnail {
  display: grid;
  grid-template-columns: 5rem 1fr;
  grid-column-gap: 2rem;
  grid-template-areas: "product-image product-content";
  align-items: center;
}

.predictive-search__item-content {
  grid-area: product-content;
  display: flex;
  flex-direction: column;
}

.predictive-search__item-content--centered {
  justify-content: center;
}

.predictive-search__item-heading {
  margin: 0;
}

.predictive-search__item-query-result *:not(mark) {
  font-weight: bolder;
}

.predictive-search__item-query-result mark {
  color: rgba(var(--color-foreground), 0.75);
}

.predictive-search__item-vendor + .predictive-search__item-heading,
.predictive-search .price {
  margin-top: 0.5rem;
}

.predictive-search__item--term {
  justify-content: space-between;
  align-items: center;
  padding: 1.3rem 2rem;
  word-break: break-all;
}

@media screen and (min-width: 768px) {
  .predictive-search__item--term {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.search__input.field__input {
  margin-top: 1px;
  padding-right: 8rem;
}

.predictive-search__list-item[aria-selected=true] > *,
.predictive-search__list-item:hover > * {
  text-decoration: underline;
}

/* Drawer search */
.drawer-search__content {
  padding: 0 var(--drawer-padding) var(--drawer-padding) var(--drawer-padding);
}