.search-content {
  position: relative;
  width: 100%;
  .search-box {
    display: flex;
    align-items: center;
    padding: 0.8rem;
    background-color: var(--background-accent);
    #search {
      width: 100%;
      background-color: transparent;
      border: none;
      outline: none;
      color: currentColor;
      font-size: var(--text-lg);
    }
    .search-btn {
      width: 2rem;
      height: 2rem;
      border: none;
      background: none;
      outline: none;
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%231d1c1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>');
      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: 0.5rem 0;
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;
      &.active {
        border-bottom: solid 2px var(--primary);
      }
    }
    &:before {
      content: "FILTER:";
      font-weight: 700;
    }
  }

  .filter-container {
    grid-column: 1 / span 2;
    margin: 1rem 0;
    /* background-color: $solaire-brown; */
    .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: 0.3s var(--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: 0.5rem;
    font-weight: 700;
    cursor: pointer;
    &::before {
      content: "";
      border: solid 2px var(--primary);
      width: 1rem;
      height: 1rem;
    }
  }

  input[type="radio"] + label::before {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 100vmax;
    outline: solid 2px var(--primary);
    border: solid 3px black;
  }

  input[type="checkbox"]:checked + label::before {
    background-image: url("/themes/solaire-north/icons/check.svg");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
  }

  input[type="radio"]:checked + label::before {
    background-color: var(--primary);
  }
}

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

  .store-content {
    /* background-color: var(--background-accent); */
    img {
      width: 100%;
      max-height: 204px;
      aspect-ratio: 4/3;
    }
    .contents {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 1rem 0 0;
      /* // min-height: 30rem; */
      .title {
        margin: 0 0 0.25rem;
        font-size: var(--text-lg);
        font-weight: 700;
        text-align: left;
      }
      .location {
        margin: 0 0 0.25rem;
        font-size: var(--text-sm);
        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: var(--text-sm);
        text-align: left;
      }
    }
  }
}

.dark,
[data-theme="dark"] {
  .search-content {
    & .search-box {
      .search-btn {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23fbbe75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>');
      }
    }
  }
}