<style>
#predictive-search-results {
  background: #fff;
  width: 100%;
  border: 1px solid #d9d9d9;
  color: #505050;
  font-size: 14px;
  border-radius: 4px;
  border-top: none;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
.predictive-search__item-wrapper {
  display: flex;
  border-bottom: 1px solid #d9d9d9;
}
.predictive-search__item-wrapper:hover {
  background: #f7f7f7;
  text-decoration: none !important;
}
.predictive-search__item {
  padding: 5px 25px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.predictive-search__image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  background-color: #eeeeee;
}

.predictive-search-results-bottom {
  display: flex;
  justify-content: center;
  padding: 10px;
}
.predictive-search__item-heading {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

{%- if predictive_search.performed -%}
  <div id="predictive-search-results">
    <div id="predictive-search-results-list" class="predictive-search__results-list" role="listbox" aria-labelledby="predictive-search-products">
      {%- for product in predictive_search.resources.products -%}
          <a href="{{ product.url }}" class="predictive-search__item-wrapper" tabindex="-1">
            <div class="predictive-search__item">

              <div class="predictive-search__image-wrapper">
                {%- if product.featured_media != blank -%}
                <img class="predictive-search__image"
                  src="{{ product.featured_media | img_url: '50x' }}"
                  alt="{{ product.featured_media.alt }}"
                  width="35"
                  height="{{ 35 | divided_by: product.featured_media.preview_image.aspect_ratio }}"
                >
                {%- else -%}
                  {{ 'product-1' | placeholder_svg_tag }}


                {%- endif -%}
              </div>
              

                <span class="predictive-search__item-heading">{{ product.title }}</span>
            </div>
          </a>
      {%- endfor -%}
      <div class="predictive-search-results-bottom">
        Resultados para “{{ predictive_search.terms }}”

      </div>
      </div>

  </div>
{%- endif -%}