.search__input {
  font-size: 16px;
}

@media (min-width: 991px) {
  .search__input {
    font-size: var(--body-font-size);
  }
}

@media (min-width: 768px) {
  .header__search {
    margin: 0 0 15px;
  }

  predictive-search .search {
    margin: 0;
  }
}

predictive-search {
  container-type: inline-size;
  container-name: predictive-search;
}

predictive-search[open] {
  .search {
    left: 0;
    width: 100%;
    z-index: 32;
  }
}

@media screen and (min-width: 1200px) {
  predictive-search[open] {
    .search {
      width: 1000px;
      min-width: 100cqw;
      max-width: calc(100vw - (2 * var(--search-offset)));
      left: 0;
    }
  }
}

predictive-search {
  .search__input {
    padding-inline-start: 48px;
  }

  .search__submit {
    left: 16px;
    padding: 0;
  }

  .search__reset {
    right: 12px;
    height: 100%;
    width: 24px;
    padding: 0;
    --transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;

    .icon--close,
    .spinner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .icon--close {
      opacity: 1;
      visibility: visible;
      transition: var(--transition);
    }

    .spinner {
      display: flex;
      opacity: 0;
      visibility: hidden;
      transition: var(--transition);
    }
  }

  /* Hide reset button when search input is empty */
  .search__input:placeholder-shown~.search__reset {
    opacity: 0;
    pointer-events: none;
  }

  /* Show reset button when search input has content */
  .search__input:not(:placeholder-shown)~.search__reset {
    opacity: 1;
    pointer-events: auto;
  }

  &.loading-results {

    .search__reset,
    .search__input:not(:placeholder-shown)~.search__reset {
      pointer-events: none;

      .icon--close {
        opacity: 0;
        visibility: hidden;
      }

      .spinner {
        opacity: 1;
        visibility: visible;
      }
    }
  }

  .predictive-search {
    --gutter-sm: 12px;
    --gutter-md: 24px;
    --gutter-lg: 64px;
    --gutter: var(--gutter-sm);

    @media (min-width: 768px) {
      --gutter: var(--gutter-md);
    }

    width: calc(100% + var(--gutter));
    left: calc(var(--gutter) * -0.5);
    top: calc(var(--gutter) * -0.5);
    padding-top: calc(44px + var(--gutter));

    font-size: 0.82em;

    @media (min-width: 1200px) {
      font-size: 1em;
    }

    .predictive-search__scroller--suggestions {
      margin: 0;
    }

    .predictive-search__no-results {
      flex: 1;
    }

    .predictive-result--suggestion {
      padding: 3px var(--gutter) 0 var(--gutter);
      overflow: hidden;
    }

    .predictive-result--suggestion span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @media (min-width: 768px) {
      .predictive-result--suggestion {
        padding: 8px var(--gutter);
      }
    }

    .predictive-search__suggestions:not(:has(.predictive-result__list-suggestions li, .search-history li)) {
      display: none;
    }

    @media (max-width: 1199px) {
      .predictive-result__info .price__current {
        font-size: 1.15em;
      }
    }

    .predictive-search__item {
      position: relative;
    }

    .predictive-search__item .price__default .price__was_wrapper {
      font-size: 1em;
    }

    .predictive-search__list.predictive-result__list-suggestions {
      padding: calc(0.5 * var(--gutter)) 0;
    }

    .search-history {
      display: none;

      padding: calc(0.5 * var(--gutter)) 0;

      &:has(li) {
        display: block;
      }

      @media (min-width: 768px) {
        &:has(+ .predictive-search__list.predictive-result__list-suggestions) {
          padding-bottom: 0;
        }
      }

      li {
        display: flex;
        align-items: center;
        justify-content: space-between;

        a {
          color: var(--text-color);
          width: 100%;
          display: flex;
          align-items: center;

          svg {
            margin-right: 0.5rem;
            opacity: 0.7;
            flex-shrink: 0;
          }
        }

        .close {
          position: relative;
          width: 0.9em;
          height: 0.9em;
          flex-shrink: 0;
          margin-right: calc(1.5 * var(--gutter));

          @media (min-width: 768px) {
            margin-right: var(--gutter);
          }

          cursor: pointer;
          opacity: .65;

          svg {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
          }

          &:hover {
            opacity: 1;

            &:before {
              background-color: rgba(var(--text-color) / 0.15);
            }
          }
        }
      }
    }


    .predictive-search__results {
      @media (min-width: 768px) {
        display: grid;
        grid-template-columns: auto 300px;
      }

      tabbed-content {
        order: 1;
      }

      .predictive-result__info {
        display: flex;
        flex-flow: column;
      }

      .predictive-search__suggestions {
        order: 0;

        .predictive-search__list.predictive-result__list-suggestions {
          display: none;
        }

        @media (min-width: 768px) {
          .predictive-search__list.predictive-result__list-suggestions {
            display: block;
          }
        }
      }

      @media (min-width: 768px) {
        tabbed-content {
          order: 0;
        }
        .predictive-search__suggestions {
          order: 1;
        }
        #header-search-queries-tab {
          display: none;
        }
      }
      .predictive-search__view-all {
        padding-bottom: 20px;
      }
    }
  }
}

/* Exact SKU Match */
.exact_sku_match .product-sku__value {
  font-weight: 700;
  color: var(--loud);
}

/* Predictive results price matches the product card treatment */
.predictive-result__info .price {
  color: rgb(var(--text-color));
}

.predictive-result__info .price__current {
  font-weight: 700;
}