.predictive-search {
  display: none;
  position: absolute;
  top: calc(100% + 0.1rem);
  left: -0.1rem;
  border-width: var(--popup-border-width);
  border-style: solid;
  border-color: var(--genstore-neutral-border-100);
  background-color: rgb(var(--color-background));
  z-index: 3;
  border-bottom-right-radius: var(--popup-corner-radius);
  border-bottom-left-radius: var(--popup-corner-radius);
  box-shadow: var(--popup-shadow-horizontal-offset)
    var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
  -webkit-overflow-scrolling: touch;
}

.predictive-search--search-template {
  z-index: 2;
  width: calc(100% + 0.2rem);
  max-height: 25rem;
  overflow: auto;
}

.predictive-search__results-groups-wrapper {
  display: flex;
  gap: var(--genstore-spacing-gap-600);
  overflow: auto;
}
.predictive-search--header {
  padding: var(--genstore-spacing-vertical-800);
}
@media screen and (max-width: 749px) {
  .predictive-search--header {
    right: 0;
    left: 0;
    top: 100%;
  }

  .predictive-search__results-groups-wrapper {
    flex-direction: column;
  }

  .predictive-search__results-groups-wrapper:not(
      .predictive-search__results-groups-wrapper--no-suggestions
    ) {
    /* On mobile, when there are no suggestions the first .predictive-search__results-groups-wrapper
     * is virtually empty due to a display: hidden on the predictive-search__pages-wrapper child.
     * This causes the gap to render and look like a big top margin */
    gap: 0rem;
  }
}

@media screen and (min-width: 750px) {
  .predictive-search {
    border-top: none;
    width: calc(100% + 0.2rem);
  }

  .header predictive-search {
    position: relative;
  }
}

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

.predictive-search__result-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2rem;
}

.predictive-search__result-group:first-child .predictive-search__pages-wrapper {
  display: none;
}

@media screen and (min-width: 750px) {
  .predictive-search__results-groups-wrapper--no-products
    .predictive-search__result-group:nth-child(2),
  .predictive-search__result-group:last-child
    .predictive-search__pages-wrapper {
    display: none;
    background-color: red;
  }
  .predictive-search__result-group:first-child
    .predictive-search__pages-wrapper {
    display: initial;
  }
  .predictive-search__result-group:first-child {
  }
  .predictive-search__results-groups-wrapper--no-products
    .predictive-search__result-group:first-child,
  .predictive-search__result-group:only-child {
    flex-grow: 1;
  }
}

.predictive-search__heading {
  padding: 0.25rem 0;
  font-size: var(--genstore-sizing-200);
  font-weight: var(--genstore-fontWeight-regular);
  color: var(--genstore-neutral-texticon-550);
  line-height: var(--genstore-lineHeight-700);
  font-feature-settings: 'liga' off;
  font-family: Outfit;
  letter-spacing: normal;
}

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

predictive-search:not([loading]) .predictive-search__loading-state,
predictive-search:not([loading]) .predictive-search-status__loading {
  display: none;
}

predictive-search[loading] .predictive-search__loading-state {
  display: flex;
  justify-content: center;
  padding: 1rem;
}

predictive-search[loading] .predictive-search__search-for-button {
  display: none;
}

predictive-search[loading]
  .predictive-search__results-groups-wrapper
  ~ .predictive-search__loading-state {
  display: none;
}

predictive-search[loading]
  .predictive-search__results-groups-wrapper
  ~ .predictive-search__search-for-button {
  display: initial;
}

.predictive-search__list-item {
  padding: var(--genstore-spacing-vertical-200) 0;
  color: var(--genstore-neutral-texticon-900);
  font-feature-settings: 'liga' off;
  font-family: Outfit;
  font-size: var(--genstore-fontSize-250);
  font-style: normal;
  font-weight: var(--genstore-fontWeight-regular, 200);
  line-height: var(--genstore-lineHeight-700); /* 184.615% */
  margin-bottom: var(--genstore-spacing-gap-200);
}

.predictive-search__list-item[aria-selected='true'] > *,
.predictive-search__list-item:hover > *,
.predictive-search__item[aria-selected='true'],
.predictive-search__item:hover {
  color: var(--genstore-neutral-texticon-900);
  /* background-color: rgba(var(--color-foreground), 0.04); */
}

.predictive-search__list-item[aria-selected='true']
  .predictive-search__item-heading,
.predictive-search__list-item:hover .predictive-search__item-heading {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

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

.predictive-search__item--link-with-thumbnail {
  display: grid;
  grid-template-columns: 3rem 1fr;
  grid-column-gap: var(--genstore-spacing-gap-600);
  grid-template-areas: 'product-image product-content';
}

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

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

.predictive-search__item-vendor {
  font-size: 0.9rem;
}

.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-query-result mark {
  background-color: transparent;
}

.predictive-search__item .price {
  color: rgba(var(--color-foreground), 0.7);
  font-size: 1.2rem;
}

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

.predictive-search__item--term {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: var(--genstore-spacing-gap-300);
  justify-content: space-between;
  align-items: center;
  word-break: break-all;
  line-height: calc(1 + 0.4 / var(--font-body-scale));
  font-size: var(--genstore-fontSizes-250, 13px);
  font-style: normal;
  font-weight: var(--genstore-fontWeights-regular, 200);
  line-height: var(--genstore-lineHeight-700);
}

/* 184.615% */

.predictive-search__item--term:hover {
    text-decoration: underline;
  }

@media screen and (min-width: 750px) {
  .predictive-search__item--term {
    padding-top: 1rem;
    border: none;
  }
}
#predictive-search-results-products-list .predictive-search__list-item {
    padding: var(--genstore-spacing-vertical-400) 0;
    margin-bottom: 0;
    line-height: var(--genstore-lineHeight-500); /* 153.846% */
    text-transform: capitalize;
  }
.predictive-search__item--term .icon-arrow {
  width: calc(var(--font-heading-scale) * 1.4rem);
  height: calc(var(--font-heading-scale) * 1.4rem);
  flex-shrink: 0;
  margin-left: calc(var(--font-heading-scale) * 2rem);
  color: rgb(var(--color-foreground));
}

.predictive-search__image {
  width: 3rem;
  height: 3rem;
  grid-area: product-image;
  object-fit: cover;
}

.predictive-search__item__icon {
  transform: rotate(270deg);
}
.predictive-search__item__jump {
  padding: var(--genstore-spacing-vertical-300) 0;
  font-style: normal;
  line-height: var(--genstore-lineHeight-700); /* 184.615% */
}
.split__line {
  height: 1px;
  background-color: var(--genstore-neutral-border-50);
  margin: var(--genstore-spacing-gap-300) 0;
}
.predictive-search__result-block-group {
  padding: var(--genstore-spacing-gap-400) 0;
}
.predictive-search-products-block-wrapper {
  display: flex;
  gap: var(--genstore-spacing-gap-800);
  flex-wrap: wrap;
}
.predictive-search-products-block-wrapper .search-products-block-item {
    width: 7.81rem;
  }
.predictive-search-products-block-wrapper .search-products-block-item .search-products-block-item__img_wrapper img {
        display: block;
        width: 7.81rem;
        height: 7.81rem;
        object-fit: cover;
      }
.predictive-search-products-block-wrapper .search-products-block-item .search-products-block-item__title {
      padding: var(--genstore-spacing-vertical-300)
        var(--genstore-spacing-horizontal-200);
      color: var(--genstore-neutral-texticon-900);
      font-family: Outfit;
      font-size: var(--genstore-fontSize-250);
      font-style: normal;
      font-weight: var(--genstore-fontWeight-regular);
      line-height: var(--genstore-lineHeight-500); /* 153.846% */
      cursor: pointer;
    }
.predictive-search-products-block-wrapper .search-products-block-item:hover{
      text-decoration: underline;
    }