/* tools */
.search-featured {
    --product-card-image-container-padding: 27px;

    position: absolute;
    top: var(--search-featured-top, 49px);
    right: var(--search-featured-right, -16px);
    max-width: 100vw;

    .product-card__image {
        aspect-ratio: 112 / 112;
    }
}

.search-featured .featured-product-grid {
    background-color: var(--color-white);
}

.search-autocomplete {
 z-index: 100;
 position: absolute;
 box-sizing: border-box;
 top: var(--search-featured-top, 49px);
 right: var(--search-featured-right, -16px);
 border: 1px solid var(--color-gray-300);
}

.livesearch.view-all {
    text-decoration: underline;
}

.livesearch.product-image-wrapper {
    background-color: var(--color-gray-50);
    padding: 27px;
}

.livesearch.brand {
    color: var(--color-gray-1100);
}

.livesearch.product-name {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}

.suggestions-link-container {
    color: var(--color-gray-600);

    svg {
        min-width: 13px;
    }
}

.livesearch.suggestions-header {
    align-self: flex-start;
}

header .nav-search-input .search_autocomplete .popover-container {
 width: 100%;
}

.search-input-wrapper {
    position: relative;
}

.search-bar {
 --search-bar-width: 100%;

 position: relative;

 .search-input {
        width: var(--search-bar-width);
        padding: 6px 20px 6px 32px;
        border-radius: 16px;
        border-color: var(--color-gray-1200);
        font: var(--type-headline-1-font);
        letter-spacing: var(--type-headline-1-letter-spacing);
        text-overflow: ellipsis;
        background-color: var(--color-gray-50);
        color: var(--color-gray-1200);
        font-weight: normal;
        cursor: pointer;
        border: .5px solid var(--color-gray-700);

  &::placeholder {
   color: rgba(0 0 0 / 80%);
  }

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

 .nav-search-button {
        position: absolute;
        left: 3px;
        top: 3px;
        background: transparent;
        border: 0;
        line-height: 1;
        padding-inline: 0;
        padding-block: 0;
        padding: 6px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;

  &:hover {
   cursor: pointer;
  }
 }
}

.search-actions-right {
    position: absolute;
    right: 4px;
    top: 3px;
    background: none;
    border: 0;
    line-height: 1;
    padding-inline: 0;
    padding-block: 0;
    padding: 6px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 16px;
}

.search-clear-button,
.search-submit-button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;

    &::before {
        content: '';
        display: block;
        background: url('../../../../icons/X.svg') no-repeat 50% 50%;
        cursor: pointer;
    }
}

.search-clear-button {
    display: flex;
    align-items: center;

    &::before {
        height: 1.2rem;
        width: 1.2rem;
    }
}

.search-submit-button {
    display: flex;
    align-items: center;

    &::before {
        height: 1.6rem;
        width: 1.6rem;
        background: url('../../../../icons/arrow.svg') no-repeat 50% 50%;
    }
}

.nav-tools > div:has(.mobile-search-button) {
 flex-grow: 1;
}

.mobile-search-button {
 background-color: var(--color-gray-50);
 border: .5px solid var(--color-gray-700);
 border-radius: 16px;
 padding: 6px 16px;
 font: var(--type-headline-1-font);
 font-weight: normal;
 letter-spacing: 0;
 cursor: pointer;
 display: inline-flex;
 justify-content: space-between;
 align-items: center;
 color: var(--color-gray-1200);
 width: 100%;

 &::after {
  background-image: url('../../../../icons/search.svg');
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
  content: '';
  width: 16px;
  height: 16px;
  display: block;
 }
}

/* Modal search */
.search-modal-container {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1000;
}

.search-modal-content {
 display: flex;
 flex-direction: column;
 background: var(--color-white);
 padding: 24px 16px 22px;
 width: 100%;
 box-sizing: border-box;
 row-gap: 15px;
}

.modal-close-button {
 background: none;
 border: none;
 font-size: 1.6rem;
 cursor: pointer;
 align-self: flex-end;
}

@media (width >= 1024px) {
 .search-featured,
 .search-autocomplete {
    --search-featured-top: 49px;
    --search-featured-right: -67px;
 }

 .search-featured {
    max-width: 784px;

    .featured-product-grid {
        padding-bottom: 42px;
    }

    .product-card__name {
        height: 58px;
        -webkit-line-clamp: 3;
    }

    .featured-product-grid__header {
        max-height: 18px;
    }
 }

 .search-actions-right {
        top: 5px;
        right: 10px;
        background-color: var(--color-gray-50);
}

    .suggestions-container {
        border-right: 1px solid var(--color-gray-300);
    }

    .search-submit-button {
        display: none;
    }

 .search-featured .featured-product-grid {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
 }

 .search-bar {
  --search-bar-width: clamp(12.3rem, -26.477rem + 37.831vw, 28rem);
 }

 .custom-search-button {
  display: none;
 }
}

@media (width < 1024px) {
 html:has(.search-modal-container) {
    overflow: hidden;
 }

 .wishlist-wrapper {
  display: none;
 }

 .popover-container:has(.suggestions-container) .view-all-wrapper {
    display: none;
 }

 .search-clear-button::after {
    content: '|';
    margin-left: 16px;
    font-size: 1.65rem;
}

 .search-autocomplete {
    min-width: 100vw;
    border-width: 1px 0 0;
 }

 .search-featured {
    --featured-product-grid-flex-flow: wrap;

    width: 100vw;

    .featured-product-grid {
        padding: 16px;
    }

    .featured-product-grid__list {
        --product-card-search-image-container-min-width: 100%;

        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
 }
}

@media (width < 526px) {
    .search-featured {
       .featured-product-grid__list {
           grid-template-columns: repeat(2, 1fr);
       }
    }
}

/* Escritorio angosto: entre el hamburguesa (1024px) y ~1340px la barra de categorías
   no cabe y se corta (el tope está medido: a 1300px faltan 16px, a 1340px sobran 9).
   En esa franja el buscador cede ancho —a 1250px pasa de 208px a 165px, o sea 43px
   de vuelta—. Arriba de 1340px conserva su ancho original.

   No bajar el mínimo: debajo de ~150px el placeholder se corta y el campo deja de
   leerse como buscador. Si hiciera falta más espacio, conviene colapsarlo a lupa
   en lugar de seguir encogiéndolo. */
@media (width >= 1024px) and (width <= 1340px) {
 .search-bar {
  --search-bar-width: clamp(10rem, -19.54rem + 28.85vw, 22rem);
 }
}

/* Debajo de 1150px el buscador baja a su mínimo útil: el ancho justo para que se
   siga leyendo "Buscar". Sale de medir con la tipografía real del input —la
   palabra ocupa 48px— más 32px de padding izquierdo (donde va la lupa), 20px de
   padding derecho y 2px de bordes: 102px. Se dejan 108px para que el redondeo de
   fuentes no se lo coma.

   De paso corrige el piso anterior de 100px, que cortaba la palabra por 2px.

   Este es el suelo: más angosto ya no se lee y habría que cambiar el input por un
   icono de lupa que expanda al hacer clic. */
@media (width >= 1024px) and (width < 1150px) {
 .search-bar {
  --search-bar-width: 10.8rem;
 }
}