.predictive-search{
  position: relative;
  display: block;
}
.predictive-search .search-field{
  display: flex;
}
.predictive-search .search-field-inner{
  --_field-radius: calc(0.22px * var(--input-radius));
  display: flex;
  flex-grow: 1;
  background-color: rgb(var(--input-background));
  border: calc(var(--input-border-width) * 1px) solid rgb(var(--input-border) / var(--input-border-opacity));
  border-top-left-radius: var(--_field-radius);
  border-bottom-left-radius: var(--_field-radius);
  box-shadow: calc(var(--input-shadow-horizontal-offset) * 1px) calc(var(--input-shadow-vertical-offset) * 1px) calc(var(--input-shadow-blur) * 1px) rgba(0, 0, 0, var(--input-shadow-opacity));
}
.predictive-search .search-field-inner:has(input:focus-visible){
  background-color: rgb(var(--input-focus-background));
  border-color: rgb(var(--input-focus-border) / var(--input-border-opacity));
}
.predictive-search .search-field input{
  flex-grow: 1;
  background-color: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}
.predictive-search .search-field input[type="search"]::-webkit-search-cancel-button {
  display: none;
}
.predictive-search .search-field button[type="submit"]{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.predictive-search .search-field button[type="submit"] .search-icon{
  display: none;
}
.predictive-search .search-field .clear-btn{
  border: none;
  background-color: transparent;
  color: rgb(var(--input-text) / 0.5);
  font-size: var(--text-size);
  font-weight: 700;
  min-width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 0.625rem;
  padding-inline: calc(0.625rem * var(--body-scale));
  cursor: pointer;
  flex-shrink: 0;
}
.predictive-search .search-field .clear-btn[hidden]{
  display: none;
}
.predictive-search .search-field input:focus-visible + .clear-btn{
  color: rgb(var(--input-focus-text) / 0.5);
}
.predictive-search .search-field .close-btn{
  margin-inline-start: calc(1.5rem * var(--body-scale));
}
.predictive-search .predictive-search-result{
  position: absolute;
  top: calc(100% + var(--_search-wrapper-block-padding));
  left: 0;
  width: 100%;
}
.header-wrapper.floating .predictive-search .predictive-search-result{
  top: 50%;
  z-index: -1;
}
.header-wrapper.floating .predictive-search .predictive-search-result .search-suggestion{
  padding-top: 2.5rem;
}
@media(max-width: 767px){
  .predictive-search .search-field button[type=submit]{
    padding: calc(.625rem * var(--body-scale));
  }
  .predictive-search .search-field button[type="submit"] .search-icon{
    display: block;
  }
  .predictive-search .search-field button[type="submit"] .search-label{
    position: absolute;
    width: 1px;
    min-width: unset;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .predictive-search .search-field .close-btn{
    margin-inline-start:  calc(0.5rem * var(--body-scale));
  }
}


.search-suggestion{
  --_max-search-result-height: calc(100svh - var(--header-area-height) - 100px);
  --_suggestion-radius: calc(0.36px * var(--layout-radius));
  max-height: var(--_max-search-result-height);
  overflow-y: auto;
  background-color: rgb(var(--primary-background));
  padding: 2rem 1.5rem;
  border-top: 1px solid rgb(var(--border-color));
  border-bottom-right-radius: var(--_suggestion-radius);
  border-bottom-left-radius: var(--_suggestion-radius);
}
.search-suggestion .suggestion-heading{
  font-size: calc(1.25rem * var(--heading-scale));
  margin-bottom: 0.5em;
}
.search-suggestion ul{
  list-style: none;
}
.search-suggestion a{
  text-decoration: none;
  color: rgb(var(--link-color));
}
.search-suggestion .suggestion-group{
  margin-bottom: 2rem;
}
.search-suggestion .query-suggestion-group ul{
  display: flex;
  flex-wrap: wrap;
  gap: calc(0.5rem * var(--body-scale));
}
.search-suggestion .query-suggestion-group .suggestion-link{
  display: inline-block;
  --_query-color: rgb(var(--secondary-button-label));
  padding-inline: calc(0.75rem * var(--body-scale));
  padding-block: calc(0.5rem * var(--body-scale));
  border-radius: calc(0.17px * var(--layout-radius));
  background-color: rgb(var(--secondary-button-background));
  color: var(--_query-color);
}
.search-suggestion .query-suggestion-group .suggestion-link mark{
  background-color: transparent;
  color: var(--_query-color);
}
.search-suggestion .query-suggestion-group .suggestion-link span{
  font-weight: 700;
}
.search-suggestion .product-suggestion-group ul{
  display: flex;
  flex-wrap: wrap;
  gap: calc(1.5rem * var(--body-scale));
}
.search-suggestion .product-suggestion-card{
  width: 100%;
  max-width: calc(150px * var(--heading-scale));
  position: relative;
}
.search-suggestion .product-suggestion-card .product-badge{
  display: inline-block;
  padding-inline: calc(0.5rem * var(--body-scale));
  padding-block: calc(0.125rem * var(--body-scale));
  border-radius: calc(0.1px * var(--layout-radius));
  margin-bottom: calc(0.75rem * var(--body-scale));
}
.search-suggestion .product-suggestion-card .product-badge.sale{
  background-color: rgb(var(--secondary-button-background));
  color: rgb(var(--secondary-button-label));
}
.search-suggestion .product-suggestion-card .product-badge.sold{
  background-color: rgb(var(--disabled-background));
  color: rgb(var(--disabled-label));
}
.search-suggestion .product-suggestion-card .image-container{
  margin-bottom: calc(0.75rem * var(--body-scale));
}
.search-suggestion .product-suggestion-card img{
  aspect-ratio: 1;
  object-fit: contain;
}
.search-suggestion .product-suggestion-card .link-heading{
  font-size: calc(0.875rem * var(--heading-scale));
  margin-bottom: 0.75em;
}
.search-suggestion .collection-suggestion-group li:not(:last-child),
.search-suggestion .page-suggestion-group li:not(:last-child),
.search-suggestion .article-suggestion-group li:not(:last-child){
  margin-bottom: .75rem;
}
@media(max-width: 767px){
  .search-suggestion .product-suggestion-card{
    max-width: calc(100px * var(--heading-scale));
  }
}