#search {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100dvh;
  z-index: 1032;

  .search-box {
    position: relative;
    width: 100%;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    .btn-close {
      align-self: flex-end;
    }

    input {
      text-transform: uppercase;
      font-weight: 400;
    }

    .results {
      flex-grow: 1;
      overflow-x: auto;
      padding: 1rem 0;

      .error-server {
        display: none;
        text-align: center;
        text-transform: uppercase;
        font-weight: 500;
        color: red;
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
        gap: 1em;

        li {
          position: relative;
          background-color: #b59b4b;

          a {
            display: flex;
            gap: 1rem;
            text-decoration: none;
            color: white;
          }

          img {
            width: 120px;
            height: 120px;
            object-fit: cover;
          }

          .details {
            flex-grow: 1;

            .product {
              text-transform: uppercase;
              font-weight: 600;
              font-size: 18px;
            }

            .type {
              font-weight: 500;
              color: rgb(226, 226, 226);
            }
          }
        }
      }

      @media (width >= 768px) {
        ul {
          grid-template-columns: repeat(2, 1fr);
          grid-auto-rows: 1fr;
        }
      }
    }

    @media (width >= 1024px) {
      margin: 2rem auto;
      max-width: 840px;
      border: 1px solid #cdcdcd;
      border-radius: 1rem;
    }
  }
}