#barra-de-busqueda-de-audifonos {
  --input-border-radius: clamp(0.5rem, 0.3239rem + 0.7512vw, 1rem);
  --button-border-radius: clamp(0.5rem, 0.368rem + 0.5634vw, 0.875rem);
  position: relative;
  width: max-content;
  margin-inline: auto;

  form {
    position: relative;
  }

  input[name='busqueda'] {
    width: clamp(20rem, 12.9577rem + 30.0469vw, 40rem);
    border: 1px solid #9e9c9c;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: var(--input-border-radius);
    padding: 0.625rem 1.25rem;
    &::placeholder {
      color: #9ba1a5;
      font-size: clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);
    }
    &:hover {
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5);
    }

    /* ellipsis en moviles para evitar cortar texto */

    @media (width < 1000px) {
      & {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 3.75rem;

        &::placeholder {
          font-weight: 400;
        }
      }
    }
  }

  button[type='submit'] {
    --gap: 0.175rem;
    position: absolute;
    right: var(--gap);
    top: 50%;
    transform: translateY(-50%);
    background: #1e59bc;
    height: calc(100% - (var(--gap) * 2));
    width: clamp(2.5rem, 2.2359rem + 1.1268vw, 3.25rem);
    border-radius: var(--button-border-radius);
    border: none;
    cursor: pointer;
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -40%);

      @media (width < 980px) {
        width: 1.25rem;
        height: 1.25rem;
      }
    }
  }
}

/* Estilos con contenedor de sugerencias */

#barra-de-busqueda-de-audifonos {
  background: #fff;
  border-radius: var(--input-border-radius);
  border: 0.5px solid #9e9c9c;
  position: relative;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

  input {
    border: 1px solid #9e9c9c !important;
  }

  & .contenedor-de-sugerencias {
    padding: 0;
    opacity: 0;
    max-height: 53.5vh;
    position: absolute;
    overflow: hidden;
    width: 100%;
    background: #fff;
    border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
    border: 1px solid #9e9c9c;
    color: #101010;

    ul {
      padding: 0 !important;
      list-style: none;
    }

    li {
      padding: 0.5rem 0.75rem;
      width: 100%;
      display: none;
      cursor: pointer;
      border-radius: 3px;
      font-size: clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-right: 0.5rem;

      &:hover,
      &:focus {
        background: #efefef;
      }
    }
  }

  &:has(li) {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: var(--input-border-radius) var(--input-border-radius) 0 0 !important;

    input {
      border-radius: clamp(0.5rem, 0.3239rem + 0.7512vw, 1rem);

      border-radius: var(--input-border-radius) var(--input-border-radius) 0 0 !important;
      box-shadow: none;
    }

    .contenedor-de-sugerencias {
      opacity: 1;
      padding: 10px 8px;
      z-index: 3;
    }

    .contenedor-de-sugerencias li {
      display: block;
    }
  }
}