.header_search_container {
  grid-area: search;
  position: relative;
  display: none;
  --border-radius: clamp(0.2rem, 0.15625vw, 0.3rem);
  padding: 1.1rem 5.12820vw;

  @media screen and (min-width: 1024px) {
    padding: 1.85rem 0;
    display: flex;
  }

  search-component {
    display: flex;
    padding: 0;
    width: 100%;
    position: relative;
  }

  .search_container_content_infos {
    --internal-padding: clamp(1.6rem, 1.04166vw, 2rem);
    display: none;
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    background-color: var(--color-white);
    padding: 0;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-top: 1px solid var(--color-off-white-secondary);
    z-index: 100;
    overflow: hidden;
    flex-direction: column;

    @media screen and (max-width: 1023px) {
      &:is(.header:has(.search-toggle:checked) .search_container_content_infos),
      &:is(.header:has(.search_input:focus)) .search_container_content_infos {
        display: flex;
      }
    }

    @media screen and (min-width: 1024px) {
      flex-direction: row;
      &:is(.header_search_container:has(input:focus, :hover) .search_container_content_infos) {
        display: flex;
      }
    }

    .suggestions_search_container,
    .predictive-search {
      padding: var(--internal-padding);
    }
  }

  .header__search {
    width: 100%;
  }

  .search-input__container {
    --input-horizontal-padding: clamp(1.6rem, 1.66666vw, 3.2rem);
    --input-vertical-padding: clamp(1rem, 0.72916vw, 1.4rem);
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    background-color: var(--color-white);
    width: 100%;
    position: relative;
    display: flex;

    @media screen and (max-width: 1023px) {
      &:is(.header:has(.search-toggle:checked) .search-input__container),
      &:is(.header:has(.search_input:focus) .search-input__container) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    @media screen and (min-width: 1024px) {
      &:is(.header_search_container:has(input:focus, :hover) .search-input__container) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    :is(button[type="submit"]) {
      display: none;
      position: absolute;
      border: none;
      background: transparent;
      color: var(--color-black-secondary);
      right: var(--input-horizontal-padding);
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      height: auto;

      :is(svg) {
        width: clamp(1.6rem, 1.25vw, 2.4rem);
      }
      @media screen and (max-width: 1023px) {
        &:is(.header:has(.search-toggle:checked) button[type="submit"]),
        &:is(.header:has(.search_input:focus)) button[type="submit"] {
          display: flex;
        }
      }
  
      @media screen and (min-width: 1024px) {
        &:is(.header_search_container:has(input:focus, :hover) button[type="submit"]) {
          display: flex;
        }
      }
    }

    .search_input {
      width: 100%;
      color: var(--color-black-secondary);
      font-family: var(--font-family-primary);
      font-size: clamp(1.2rem, 0.83333vw, 1.6rem);
      border: none;
      background: transparent;
      font-style: normal;
      font-weight: 400;
      padding: var(--input-vertical-padding) var(--input-horizontal-padding);

      &::selection {
        background-color: var(--color-cyan);
        color: var(--color-white);
      }
      
      &::placeholder {
        color: var(--color-gray-light);
        font-size: inherit;
        font-weight: 400;
      }

      &::-ms-clear {
        display: none;
      }

      &::-webkit-search-cancel-button {
        display: none;
      }
    }

    @media screen and (min-width: 1024px) {
      .search-input__container-icon-close {
        display: none;
      }
    }
  }

  .suggestions_search_container {
    display: flex;
    flex-direction: column;
    gap: clamp(1.6rem, 1.30208vw, 2.5rem);
    border-bottom: 1px solid var(--color-off-white-secondary);

    @media screen and (min-width: 1024px) {
      width: 14.50471%;
      min-width: 123px;
      border-bottom: none;
      border-right: 1px solid var(--color-off-white-secondary);
    }

    :is(*) {
      margin: 0;
      padding: 0;
      list-style: none;
      line-height: 100%;
    }

    .suggestions_search_container_title {
      display: inline-block;
      white-space: nowrap;
      word-break: keep-all;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: clamp(1.4rem, 0.83333vw, 1.6rem);
      font-weight: 500;
      color: var(--color-black);
    }

    .suggestions_search_item_link {
      display: inline-block;
      white-space: nowrap;
      word-break: keep-all;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: clamp(1.2rem, 0.72916vw, 1.4rem);
      color: var(--color-gray-text);
      text-decoration: none;
      padding: clamp(0.45rem, 0.3125vw, 0.6rem) 0;
      line-height: 120%;
      text-transform: capitalize;

      :is(b) {
        color: var(--color-cyan);
        font-weight: 500;
      }

      &:is(li:first-child a) {
        padding-top: 0;
      }
      &:is(li:last-child a) {
        padding-bottom: 0;
      }
    }
  }

  .predictive-search__content {
    :is(ul li) {
      :is(*) {
        padding: 0;
        margin: 0;
        text-decoration: none;
        color: var(--color-black);
      }

      :is(a) {
        display: flex;
        gap: clamp(1.2rem, 1.04166vw, 2rem);
      }

      :is(img) {
        aspect-ratio: 1/1;
        object-fit: cover;
        object-position: top;
        width: clamp(8.1rem, 4.79166vw, 9.2rem);
        height: clamp(8.1rem, 4.79166vw, 9.2rem);
        border-radius: 0.2rem;
      }

      .predictive-search__product-info {
        flex-shrink: 1;
      }
      &:not(:has(.predictive-search__product-scale)) .predictive-search__product-title {
        margin-bottom: 1.2rem;
      }
      .predictive-search__product-title {
        font-size: clamp(1.4rem, 0.9375vw, 1.8rem);
        font-weight: 700;
        line-height: 120%;
      }
      .predictive-search__product-scale {
        font-size: clamp(1rem, 0.72916vw, 1.4rem);
        font-weight: 400;
        color: var(--color-gray-text);
        line-height: 1;
        margin-bottom: 1.2rem;
      }
      .predictive-search__product-price {
        font-size: 1.6rem;
        font-weight: 500;
        line-height: 1;
        margin-bottom: 0.8rem;
      }
      .predictive-search__product-installment {
        font-size: 1.4rem;
        line-height: 1;
      }
    }

    .predictive-search__view-all {
      font-size: 1.4rem;
      font-weight: 500;
      color: var(--color-black);
      line-height: 120%;
      text-align: left;
      text-transform: capitalize;
      display: block;
      margin-top: 2.4rem;

      @media screen and (min-width: 1024px) {
        font-size: 1.2rem;
        margin-top: 0.9rem;
      }
    }
    .predictive-search__products-for {
      font-size: clamp(1.6rem, 1.04166vw, 1.8rem);
      font-weight: 400;
      color: var(--color-black);
      line-height: 100%;
      text-align: left;
      display: block;
      margin-bottom: clamp(1.4rem, 1.30208vw, 2.5rem);

      :is(b) {
        font-weight: 700;
        color: var(--color-cyan);
      }
    }
  }
}