.search-content {
  position: relative;
  width: 100%;

  .search-box {
    display: flex;
    align-items: center;
    padding: .8rem;
    background-color: #2e2e2e;

    #search {
      width: 100%;
      background-color: transparent;
      border: none;
      outline: none;
      color: #fff;
      font-size: 1.2rem;
    }

    .search-btn {
      width: 2rem;
      height: 2rem;
      border: none;
      background: none;
      outline: none;
      background-image: url('/sites/default/files/2025-11/search-btn.webp');
      background-size: 80%;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
    }
  }

  .property {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 1rem;
    align-items: center;

    &:before {
      content: "LOCATION:";
      font-weight: 700;
    }
  }

  .search-cat {
    display: flex;
    margin-top: 1rem;
    align-items: center;
    gap: 2rem;

    a {
      padding: .5rem 0;
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;

      &.active {
        border-bottom: solid 2px #de692e;
      }
    }

    &:before {
      content: "FILTER:";
      font-weight: 700;
    }
  }

  .filter-container {
    grid-column: 1 / span 2;
    margin: 1rem 0;
    background-color: #312a24;

    .cat-group {
      display: flex;
      padding: 0 1rem;
      gap: 1rem 2rem;
      flex-wrap: wrap;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition-property: max-height, padding, opacity;
      transition: .3s $ease;

      &.active {
        opacity: 1;
        padding: 1rem;
        max-height: 50vh;
      }
    }
  }

  input[type=checkbox],
  input[type=radio] {
    display: none;
  }

  input[type=checkbox]+label,
  input[type=radio]+label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    cursor: pointer;

    &::before {
      content: "";
      border: solid 2px #de692e;
      width: 1rem;
      height: 1rem;
    }
  }

  input[type=radio]+label::before {
    width: .5rem;
    height: .5rem;
    border-radius: 100vmax;
    outline: solid 2px #de692e;
    border: solid 3px black;
  }

  input[type=checkbox]:checked+label::before {
    background-image: url('/sites/default/files/2025-11/check.png');
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
  }

  input[type=radio]:checked+label::before {
    background-color: #EC9225;
  }
}

.store-container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2rem 1rem;

  .store-content {
    background-color: #292c30;

    img {
      width: 100%;
      max-height: 204px;
      aspect-ratio: 4/3;
    }

    .contents {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 1rem;

      // min-height: 30rem;
      .title {
        margin: 0 0 .25rem;
        font-size: 1.2rem;
        font-weight: 700;
        text-align: left;
      }

      .location {
        margin: 0 0 .25rem;
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        text-align: left;
      }

      .location {
        font-weight: 400;
      }

      .benefits {
        margin: 1rem 0 0;
        font-style: italic;
        font-weight: 400;
        font-size: .8rem;
        text-align: left;
      }
    }
  }
}

@media (max-width: 900px) {

  .search-content .property,
  .search-content .search-cat {
    flex-wrap: wrap;
    // justify-content: center;
    gap: 1rem;

    &::before {
      display: block;
      width: 100%;
      text-align: center;
    }
  }

  .search-content .search-cat {
    padding-top: 1rem;
    border-top: solid 1px #555;
  }

  .store-container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .store-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .store-container {
    grid-template-columns: 1fr;
  }
}