/* 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);
}

/* Los dos paneles del buscador se montan SIEMPRE al enfocar, pero se quedan literalmente sin
   hijos cuando no hay nada que mostrar: el widget de LiveSearch devuelve un Fragment vacío
   mientras la query no llega al mínimo de 3 caracteres o no trae items, y FeaturedProductGrid
   devuelve null si la consulta al catálogo no trae productos (en stage, categoryPath=comprar
   responde 200 con items: []).
   En móvil el panel abierto es position: fixed con fondo blanco de la barra hasta abajo, así
   que un contenedor vacío seguía pintando la pantalla completa en blanco. Sin contenido no hay
   panel: así el buscador degrada al comportamiento de siempre (nada debajo del input). */
.search-autocomplete:empty,
.search-featured:empty {
 display: none;
}

.search-autocomplete .popover-container {
 width: 100%;
 max-width: none;
 box-sizing: border-box;
}

.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-overlay-close {
    display: none;
}

.search-bar {
 --search-input-right-padding: 48px;
 --search-bar-width: 100%;

 position: relative;

 .search-input {
        width: var(--search-bar-width);
        padding: 0 var(--search-input-right-padding) 0 42px;
        height: 42px;
        border-radius: 24px;
        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-neutral-50);
        color: var(--color-gray-1200);
        font-weight: normal;
        border: 1px solid var(--color-gray-700);
        box-sizing: border-box;

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

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

 .nav-search-button {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: 0;
        line-height: 1;
        padding-inline: 0;
        padding-block: 0;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;

  &:hover {
   cursor: pointer;
  }
 }
}

.search-actions-right {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    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;
    flex-shrink: 0;
}

.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/ultaIcons/close-round-grey.svg') no-repeat 50% 50%;
        border-radius: 100%;
        cursor: pointer;
    }
}

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

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

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

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

@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: 50%;
        right: 10px;
        transform: translateY(-50%);
        /* 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: 100%;
 }

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

@media (width < 1024px) {
 .search-bar {
    --search-input-right-padding: 48px;
 }

 .search-bar.is-open {
    z-index: 7;
 }

 .wishlist-wrapper {
  display: inline-flex;
 }

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

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

 .search-bar.is-open {
    --mobile-search-panel-top: calc(var(--nav-height) + 56px);
    --search-input-right-padding: 96px;
 }

 .search-bar.is-open .search-overlay-close {
    position: fixed;
    top: max(15px, env(safe-area-inset-top));
    right: 12px;
    z-index: 8;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
 }

 .search-bar.is-open .search-overlay-close::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: url('../../../../icons/X.svg') no-repeat 50% 50%;
    background-size: 24px 24px;
 }

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

 .search-bar.is-open .search-submit-button {
    display: flex;
 }

 .search-bar.is-open .search-autocomplete,
 .search-bar.is-open .search-featured {
    background-color: var(--color-white);
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: fixed;
    right: 0;
    top: var(--mobile-search-panel-top);
    width: auto;
    -webkit-overflow-scrolling: touch;
 }

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

 .search-bar.is-open .search-autocomplete {
    z-index: 6;
 }

 .search-bar .search-input {
    height: 40px;
 }

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

    width: 100%;

    .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);
    }
 }

 .search-bar.is-open .search-featured {
    z-index: 5;
 }

    .search-autocomplete {
        border: none
    }
}

@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;
 }
}