/* =========================
   Search & Filter — Final Responsive Columns
   Three columns on desktop, single column on mobile
   Place this in Appearance → Customize → Additional CSS
   ========================= */

/* Base / reset for form area */
.searchandfilter {
  display: block;
  box-sizing: border-box;
  width: 100%;
}

/* paragraph inside form */
.searchandfilter p {
  margin-top: 1em;
  display: inline-block;
}

/* default list styling (will be overridden to grid below) */
.searchandfilter ul {
  margin: 0;
  padding: 0;
  list-style: visible;
}

/* list items base */
.searchandfilter li {
  list-style: visible;
  padding: 0; /* padding-right handled per-grid item */
  box-sizing: border-box;
}

/* headings / labels */
.searchandfilter label {
  display: block;
}
.searchandfilter h4 {
  margin: 15px 0;
  font-size: 16px;
}

/* preserve nested UL left margin behavior like original */
.searchandfilter ul > li > ul:not(.children) {
  margin-left: 0;
}

/* ===== Responsive grid for top-level lists (desktop = 3 cols) ===== */
/* apply grid only to top-level ULs inside .searchandfilter to avoid touching nested lists */
.searchandfilter > div ul,
.searchandfilter > ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
}

/* Ensure each top-level li is block and fills its grid cell */
.searchandfilter > div ul > li,
.searchandfilter > ul > li {
  display: grid;
  padding-right: 0;
}



/* ===== Tablet & Mobile: switch to single column ===== */
@media (max-width: 768px) {
  .searchandfilter > div ul,
  .searchandfilter > ul,
  .searchandfilter ul.sf-top-level,
  .searchandfilter ul.sf-fields {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* keep label & paragraph spacing tidy on mobile */
  .searchandfilter p,
  .searchandfilter li {
    display: block;
  }

  .searchandfilter h4 {
    font-size: 15px;
  }
}

/* ===== Widget areas: force single-column (per original behaviour) ===== */
.widget-area .searchandfilter li,
.widget-area .searchandfilter p {
  display: block;
}

/* ===== Optional: make radio/checkbox items look like inline buttons (comment/uncomment if wanted) ===== */
/* .searchandfilter ul > li .cat-item { display:inline-block; margin:6px 6px 6px 0; }
.searchandfilter ul > li .cat-item label {
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  user-select: none;
}
.searchandfilter ul > li .cat-item input[type="radio"],
.searchandfilter ul > li .cat-item input[type="checkbox"] {
  display: none;
}
.searchandfilter ul > li .cat-item input:checked + label {
  background: #111827;
  color: #fff;
  border-color: #111827;
} */