/* [ssr_listing_search] — design 1a, "Split view, by the book".
   Light filter bar of dropdown pills, the category icon row, results left (2-up photo cards) and
   the WP Grid Builder map facet right. Full-bleed on purpose: the map runs to the viewport edge.

   Specificity contract. WPGB prints three stylesheets after this one: its base facets.css
   (0,2,x–0,3,x), the compiled facet Style (`.wpgb-facet.wpgb-style-2 …`, 0,4,x — style 2 is the
   site's default, applied to every facet rendered without a style) and the card/grid stylesheet
   (`.wp-grid-builder .wpgb-card div`, 0,2,1). Every rule here that touches WPGB markup therefore
   walks in through the section's own wrappers so it lands at (0,5,0) or higher without repeating
   a class: `.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-select`. Card rules
   lead with `.ssr-search .ssr-lcard`. */

.ssr-search {
  --s-ink:          var(--text-on-light, #2f2e30);
  --s-ink-strong:   var(--charcoal-900, #232324);
  --s-muted:        var(--text-on-light-muted, #6f6d73);
  --s-line:         var(--border-on-light, #d6d5d8);
  --s-line-strong:  var(--border-on-light-strong, #b3b1b6);
  --s-surface:      var(--surface-light, #ffffff);
  --s-surface-muted:var(--surface-light-muted, #f7f7f6);
  --s-dark:         var(--charcoal-800, #2f2e30);
  --s-dark-deep:    var(--charcoal-900, #232324);
  --s-c100:         var(--charcoal-100, #ececed);
  --s-c300:         var(--charcoal-300, #b3b1b6);
  --s-c500:         var(--charcoal-500, #6f6d73);
  --s-c600:         var(--charcoal-600, #57555a);
  --s-green:        var(--green-500, #d2e82e);
  --s-green-100:    var(--green-100, #f4fad1);
  --s-green-700:    var(--green-700, #8fa317);
  --s-amber-100:    #fdf1d6;
  --s-amber-700:    #9a6b12;
  /* the township overlay (search.js draws it; same two roles as the listing map: one hue for
     every township, the brand coral for the selected one, a charcoal line for a county) */
  --s-twp:          #1b6480;
  --s-twp-home:     var(--accent-cta, #ff5a5f);
  --s-twp-county:   var(--charcoal-700, #45434a);
  --s-display:      var(--font-display, Outfit, system-ui, sans-serif);
  --s-body:         var(--font-body, 'Public Sans', system-ui, sans-serif);
  --s-radius:       var(--radius-md, 8px);
  --s-radius-lg:    var(--radius-lg, 14px);
  --s-pill:         999px;
  --s-shadow-sm:    var(--shadow-sm, 0 1px 2px rgba(26,26,27,.06), 0 1px 1px rgba(26,26,27,.04));
  --s-shadow-md:    var(--shadow-md, 0 4px 12px rgba(26,26,27,.08), 0 2px 4px rgba(26,26,27,.05));
  --s-shadow-lg:    var(--shadow-lg, 0 16px 40px rgba(26,26,27,.14), 0 4px 10px rgba(26,26,27,.06));
  --s-ease:         cubic-bezier(.4, 0, .2, 1);
  --s-gutter:       32px;
  --s-results:      812px;   /* 1a: 812 of 1440 */
  --s-top:          0px;     /* the sticky site header's height, measured by search.js */
  --s-z:            10000;

  display: block;
  background: var(--s-surface);
  font-family: var(--s-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--s-ink);
}

.ssr-search *, .ssr-search *::before, .ssr-search *::after { box-sizing: border-box; }
.ssr-search p:not([class]) { display: contents; margin: 0; padding: 0; }
.ssr-search p:empty { display: none; }
/* Only the box model is reset here. Anything a button rule below sets — colour, family, size —
   is written as .ssr-search .ssr-search__x so it outranks this (0,1,1) selector; a bare
   .ssr-search__x (0,1,0) would lose to it, which is how the dark buttons shipped with invisible
   text on 2026-09-19. */
.ssr-search button { margin: 0; text-transform: none; letter-spacing: normal; box-shadow: none; }
.ssr-search .ssr-search__i { flex: none; display: block; }

/* WPGB gives every facet's fieldset a 40px margin-bottom for sidebar stacking; the section owns spacing. */
.ssr-search .ssr-search__fc > .wpgb-facet { margin: 0; width: 100%; }
.ssr-search .ssr-search__fc > .wpgb-facet > fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.ssr-search .ssr-search__fc > .wpgb-facet .wpgb-facet-title { display: none; }

/* ======================================================================================
   The bar
   ==================================================================================== */

.ssr-search__bar { border-bottom: 1px solid var(--s-line); }
.ssr-search__summary { display: none; }
.ssr-search__panelhead { display: none; }

.ssr-search__pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 66px;
  padding: 12px var(--s-gutter);
}
.ssr-search__spacer { flex: 1 1 auto; }
.ssr-search__sep { width: 1px; height: 28px; background: var(--s-line); margin: 0 6px; }

.ssr-search__pill {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  min-width: 0;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-radius);
  background: var(--s-surface);
  font-size: 14px;
  white-space: nowrap;
}
.ssr-search__pill.is-set { border: 1.5px solid var(--s-dark); }
.ssr-search__plabel { color: var(--s-c500); }
.ssr-search__pval { font-weight: 600; color: var(--s-dark); overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.ssr-search__pill.is-set .ssr-search__pval { font-weight: 700; color: var(--s-ink-strong); }
.ssr-search__picon { color: var(--s-ink); opacity: .7; }

/* --- select pills: the label and value are a non-interactive face laid over WPGB's combobox,
   so the whole pill is the widget's click target; the widget itself is reduced to its search
   input (transparent until focused) and its chevron. --- */
.ssr-search__pill--select { padding: 0 34px 0 14px; cursor: pointer; }
.ssr-search__pill--select .ssr-search__pface {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  pointer-events: none;
}
/* the chevron is the section's, so WPGB's 24px toggle can be hidden */
.ssr-search__pill--select::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  opacity: .6;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f2e30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* the widget covers the whole pill, invisible until its list is open (aria-expanded on the
   combobox, not focus: the input keeps focus after a choice, and the face must come back then) */
.ssr-search__pill--select .ssr-search__fc { position: absolute; inset: 0; z-index: 1; }
.ssr-search__pill--select:has(.wpgb-select-placeholder[aria-expanded="true"]) .ssr-search__pface { visibility: hidden; }
.ssr-search__pill--select .ssr-search__fc > .wpgb-facet,
.ssr-search__pill--select .ssr-search__fc > .wpgb-facet > fieldset { height: 100%; }
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-select-facet,
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-sort-facet,
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-per-page-facet { height: 100%; }
/* Combobox facets (city, county, status): WPGB's script builds the widget as a div AFTER the
   <label> that holds the screen-reader-only native select, so the label collapses to nothing
   and the widget takes the pill. Sort and per page are combobox:false — their native select IS
   the control (invisible, full-size, so the pill's click opens it), so their label keeps height. */
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-select-facet > label { display: block; height: 0; overflow: hidden; margin: 0; }
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-sort-facet > label,
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-per-page-facet > label { display: block; height: 100%; width: auto; margin: 0; box-sizing: border-box; }
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-select {
  position: relative;
  height: 100%;
  min-height: 0;
  width: 100%;
  margin: 0;
  flex-wrap: nowrap;
  padding: 0 34px 0 14px;
  border: 0;
  border-radius: var(--s-radius);
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--s-ink);
  cursor: pointer;
}
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet select.wpgb-select {
  /* the native select: sort and per page keep it as their control, invisible over the face */
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  padding-right: 34px;
}
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-select .wpgb-select-placeholder { padding: 0; height: 100%; min-width: 0; flex-wrap: nowrap; }
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-select .wpgb-select-values { flex-wrap: nowrap; height: 100%; }
/* the selected-value chips: the face shows the summary instead */
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-select .wpgb-select-values > div.wpgb-select-value { display: none; }
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-select .wpgb-select-placeholder > .wpgb-select-value { display: none; }
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-select .wpgb-select-placeholder input[type="text"] {
  font-size: 14px;
  color: var(--s-ink-strong);
  height: 100%;
  line-height: normal;
  opacity: 0;
  min-width: 0;
}
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-select .wpgb-select-placeholder input[type="text"]::placeholder { color: var(--s-c500); }
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-select .wpgb-select-placeholder[aria-expanded="true"] input[type="text"] { opacity: 1; }
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-select .wpgb-select-controls { display: none; }
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-select .wpgb-select-loader { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); padding: 0; }
/* The dropdown is appended to <body> by WPGB's script (with an inline width equal to the
   widget's, i.e. the pill's), so it cannot be reached from .ssr-search; the section adds
   body.ssr-search-page for it. Tokens are the global ones with fallbacks: --s-* is out of scope. */
body.ssr-search-page > .wpgb-select-dropdown {
  min-width: 260px;
  margin-top: 6px;
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg, 0 16px 40px rgba(26,26,27,.14), 0 4px 10px rgba(26,26,27,.06)), 0 0 0 1px var(--border-on-light, #d6d5d8);
  font-family: var(--font-body, 'Public Sans', system-ui, sans-serif);
  z-index: 10005;
}
body.ssr-search-page > .wpgb-select-dropdown ul li { font-size: 14px; line-height: 1.3; color: var(--text-on-light, #2f2e30); padding: 10px 14px; }
body.ssr-search-page > .wpgb-select-dropdown ul li li { padding-left: 26px; }
body.ssr-search-page > .wpgb-select-dropdown ul li.wpgb-focused { background: var(--surface-light-muted, #f7f7f6); }
body.ssr-search-page > .wpgb-select-dropdown ul li[aria-selected="true"] { background: var(--charcoal-800, #2f2e30); color: #fff; }
body.ssr-search-page > .wpgb-select-dropdown ul li[aria-disabled="true"] { color: var(--charcoal-300, #b3b1b6); }

/* --- popover pills (price, radius) --- */
.ssr-search__pill--pop { display: block; height: auto; border: 0; }
.ssr-search .ssr-search__pbtn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-radius);
  background: var(--s-surface);
  cursor: pointer;
  white-space: nowrap;
}
.ssr-search__pill--pop.is-set .ssr-search__pbtn { border: 1.5px solid var(--s-dark); }
.ssr-search__pill--pop.is-open .ssr-search__pbtn { border-color: var(--s-dark); }
.ssr-search__pchev { color: var(--s-ink); opacity: .6; transition: transform .15s var(--s-ease); }
.ssr-search__pill--pop.is-open .ssr-search__pchev { transform: rotate(180deg); }
.ssr-search__pop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: 320px;
  padding: 16px;
  background: var(--s-surface);
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius-lg);
  box-shadow: var(--s-shadow-lg);
}
.ssr-search__pill--pop.is-open .ssr-search__pop { display: block; }
.ssr-search__poplabels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--s-muted); }

/* number facet (price) */
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-number-facet { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-number-facet .wpgb-number-label { margin: 0; width: auto; display: block; }
/* geolocation facet (radius). The plugin puts the locate button INSIDE the field (absolute,
   top/right 0) and the search icon at its left edge; here the button is its own 40px box beside
   the field and the input clears the icon. The radius label is a text node + input + "mi". */
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-geolocation-facet .wpgb-geolocation-input { display: flex; gap: 8px; align-items: center; position: relative; }
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-geolocation-facet .wpgb-geolocation-input > label { flex: 1 1 auto; min-width: 0; margin: 0; position: relative; display: block; }
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-geolocation-facet .wpgb-geolocation-input input.wpgb-input { padding-left: 36px; }
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-geolocation-facet .wpgb-geolocation-input .wpgb-input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-geolocation-facet .wpgb-locate-button {
  position: static;
  top: auto;
  right: auto;
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-radius);
  background: var(--s-surface);
  color: var(--s-ink);
  cursor: pointer;
}
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-geolocation-facet .wpgb-locate-button:hover { border-color: var(--s-dark); }
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-geolocation-facet .wpgb-locate-button[hidden] { display: none; }
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-geolocation-facet .wpgb-locate-button svg { width: 18px; height: 18px; }
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-geolocation-facet .wpgb-geo-radius { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 13px; color: var(--s-muted); }
.ssr-search .ssr-search__pill .ssr-search__fc .wpgb-facet .wpgb-geolocation-facet .wpgb-geo-radius input {
  /* the map script sets an inline width sized to the value ("1" -> 16px); min-width outranks it */
  flex: none;
  min-width: 72px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-radius);
  box-shadow: none;
  text-align: center;
  font-size: 14px;
  color: var(--s-ink);
  background: var(--s-surface);
}

/* every text/number input WPGB renders inside the section */
.ssr-search .ssr-search__fc .wpgb-facet .wpgb-input,
.ssr-search .ssr-search__fc .wpgb-facet input[type="number"],
.ssr-search .ssr-search__fc .wpgb-facet input[type="search"],
.ssr-search .ssr-search__fc .wpgb-facet input[type="text"].wpgb-input {
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-radius);
  background: var(--s-surface);
  font-family: inherit;
  font-size: 14px;
  color: var(--s-ink);
  box-shadow: none;
  line-height: normal;
}
.ssr-search .ssr-search__fc .wpgb-facet .wpgb-input:focus,
.ssr-search .ssr-search__fc .wpgb-facet input[type="number"]:focus { border-color: var(--s-dark); outline: none; }
.ssr-search .ssr-search__fc .wpgb-facet .wpgb-input-icon { color: var(--s-muted); }

/* --- All filters --- */
.ssr-search__allwrap { display: flex; }
.ssr-search .ssr-search__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-radius);
  background: var(--s-surface);
  font-weight: 600;
  color: var(--s-dark);
  cursor: pointer;
}
.ssr-search .ssr-search__all:hover { border-color: var(--s-dark); }
.ssr-search__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--s-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.ssr-search__badge[hidden] { display: none; }

/* --- Reset in the bar: a quiet text link, shown by search.js only while something is set. It is
   the drawer's reset facet rendered a second time, so its text is the facet's "Reset all filters";
   the bar shows the shorter "Reset" (the accessible name keeps the full text). --- */
.ssr-search__resetwrap { display: flex; align-items: center; }
.ssr-search__resetwrap[hidden] { display: none; }
.ssr-search .ssr-search__resetwrap .ssr-search__fc .wpgb-facet .wpgb-reset,
.ssr-search .ssr-search__resetwrap .ssr-search__fc .wpgb-facet button { height: 40px; margin: 0; padding: 0 6px; border: 0; background: transparent; font: inherit; font-size: 0; color: var(--s-dark); cursor: pointer; box-shadow: none; }
.ssr-search .ssr-search__resetwrap .ssr-search__fc .wpgb-facet button::after { content: "Reset"; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ssr-search .ssr-search__resetwrap .ssr-search__fc .wpgb-facet button:hover { color: var(--s-ink-strong); }

/* --- Save search --- */
.ssr-search__savewrap { position: relative; }
.ssr-search .ssr-search__save {
  height: 36px;
  padding: 0 18px;
  border: 1.5px solid var(--s-dark);
  border-radius: var(--s-pill);
  background: transparent;
  font-family: var(--s-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--s-dark);
  cursor: pointer;
}
.ssr-search .ssr-search__save:hover { background: var(--s-surface-muted); }
.ssr-search__savepop {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 60;
  width: 320px;
  padding: 20px;
  background: var(--s-surface);
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius-lg);
  box-shadow: var(--s-shadow-lg);
}
.ssr-search__savewrap.is-open .ssr-search__savepop { display: block; }
.ssr-search__savepop::before { content: ""; position: absolute; top: -7px; right: 44px; width: 12px; height: 12px; background: var(--s-surface); border-left: 1px solid var(--s-line); border-top: 1px solid var(--s-line); transform: rotate(45deg); }
.ssr-search__savetitle { font-family: var(--s-display); font-size: 17px; font-weight: 700; color: var(--s-ink-strong); }
.ssr-search__savetext { font-size: 13px; line-height: 1.55; color: var(--s-c500); margin: 6px 0 14px; }

/* ======================================================================================
   The category row
   ==================================================================================== */

.ssr-search__cats { border-bottom: 1px solid var(--s-line); padding: 8px var(--s-gutter); }
.ssr-search .ssr-search__cats .ssr-search__fc .wpgb-facet .wpgb-button-facet { width: 100%; }
.ssr-search .ssr-search__cats .ssr-search__fc .wpgb-facet ul.wpgb-inline-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}
.ssr-search .ssr-search__cats .ssr-search__fc .wpgb-facet ul.wpgb-inline-list::-webkit-scrollbar { display: none; }
.ssr-search .ssr-search__cats .ssr-search__fc .wpgb-facet ul.wpgb-inline-list > li { flex: none; margin: 0; padding: 0; list-style: none; }
.ssr-search .ssr-search__cats .ssr-search__fc .wpgb-facet .wpgb-button {
  width: 78px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 0 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--s-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--s-c600);
  opacity: .85;
  cursor: pointer;
  transition: opacity .12s var(--s-ease), border-color .12s var(--s-ease);
}
.ssr-search .ssr-search__cats .ssr-search__fc .wpgb-facet .wpgb-button:hover { opacity: 1; border-bottom-color: var(--s-c300); background: transparent; color: var(--s-c600); }
.ssr-search .ssr-search__cats .ssr-search__fc .wpgb-facet .wpgb-button[aria-pressed="true"] { opacity: 1; border-bottom-color: var(--s-green); background: transparent; color: var(--s-ink-strong); font-weight: 700; }
.ssr-search .ssr-search__cats .ssr-search__fc .wpgb-facet .wpgb-button[aria-disabled="true"] { opacity: .3; cursor: default; }
.ssr-search .ssr-search__cats .ssr-search__fc .wpgb-facet .wpgb-button:focus-visible { outline: 2px solid var(--s-dark); outline-offset: -2px; border-radius: 4px; }
.ssr-search .ssr-search__cats .ssr-search__fc .wpgb-facet .wpgb-button .wpgb-button-label { white-space: nowrap; margin: 0; padding: 0; }
.ssr-search .ssr-search__cats .ssr-search__fc .wpgb-facet .wpgb-button .ssr-search__caticon { width: 26px; height: 26px; display: block; fill: currentColor; }

/* ======================================================================================
   Results + map
   ==================================================================================== */

.ssr-search__body { display: flex; align-items: flex-start; }
.ssr-search__results {
  flex: 0 0 var(--s-results);
  max-width: var(--s-results);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px 24px 30px var(--s-gutter);
}
.ssr-search__body--nomap .ssr-search__results { flex: 1 1 auto; max-width: none; padding-right: var(--s-gutter); }

/* heading row */
.ssr-search__rhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ssr-search__rtitle { min-width: 0; }
.ssr-search .ssr-search__rtitle .ssr-search__fc .wpgb-facet .wpgb-result-count {
  display: block;
  font-family: var(--s-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--s-ink-strong);
}
.ssr-search__rsub { font-size: 13px; color: var(--s-c500); margin-top: 2px; min-height: 1.2em; }
.ssr-search__rsub:empty { display: none; }
.ssr-search__rarea[hidden] { display: none; }
.ssr-search__rarea + .ssr-search__rplaces:not(:empty)::before { content: " · "; }
.ssr-search__pill--sort, .ssr-search__pill--perpage { height: 36px; font-size: 13px; flex: none; }
.ssr-search__pill--sort .ssr-search__pval, .ssr-search__pill--perpage .ssr-search__pval { font-weight: 600; color: var(--s-dark); }
.ssr-search__pill--sort.is-set, .ssr-search__pill--perpage.is-set { border: 1px solid var(--s-line-strong); }
.ssr-search__pill--sort, .ssr-search__pill--perpage { padding: 0 30px 0 12px; }
.ssr-search__pill--sort::after, .ssr-search__pill--perpage::after { right: 10px; }
.ssr-search .ssr-search__pill--sort .ssr-search__fc .wpgb-facet .wpgb-select,
.ssr-search .ssr-search__pill--perpage .ssr-search__fc .wpgb-facet .wpgb-select { padding-left: 12px; font-size: 13px; }
.ssr-search .ssr-search__pill--perpage .ssr-search__fc .wpgb-facet .wpgb-per-page-facet .wpgb-select,
.ssr-search .ssr-search__pill--perpage .ssr-search__fc .wpgb-facet .wpgb-per-page-facet > label { width: 100%; box-sizing: border-box; }

/* the grid: WPGB positions the cards; the section only sets the frame */
.ssr-search__grid { min-height: 240px; }
.ssr-search .ssr-search__grid .wp-grid-builder { margin: 0; }
.ssr-search .ssr-search__grid .wpgb-layout, .ssr-search .ssr-search__grid .wpgb-viewport { overflow: visible; }
.ssr-search .ssr-search__grid .wpgb-card { padding: 0; }
.ssr-search .ssr-search__grid .wpgb-card .wpgb-card-wrapper { height: 100%; }

/* no results */
.ssr-search .ssr-search__grid .wpgb-layout-message,
.ssr-search .ssr-search__grid .wpgb-no-results { padding: 32px 0; font-size: 15px; color: var(--s-muted); }

/* footer */
.ssr-search__rfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 6px; }
.ssr-search .ssr-search__fc--pages .wpgb-facet .wpgb-pagination-facet { margin: 0; }
.ssr-search .ssr-search__fc--pages .wpgb-facet ul.wpgb-pagination { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ssr-search .ssr-search__fc--pages .wpgb-facet ul.wpgb-pagination > li { margin: 0; padding: 0; list-style: none; }
.ssr-search .ssr-search__fc--pages .wpgb-facet ul.wpgb-pagination .wpgb-page a,
.ssr-search .ssr-search__fc--pages .wpgb-facet ul.wpgb-pagination .wpgb-page span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 4px;
  margin: 0;
  border: 0;
  border-radius: var(--s-radius);
  background: transparent;
  font-family: var(--s-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--s-dark);
  text-decoration: none;
  box-shadow: none;
  line-height: 1;
}
.ssr-search .ssr-search__fc--pages .wpgb-facet ul.wpgb-pagination .wpgb-page a:hover { background: var(--s-surface-muted); }
.ssr-search .ssr-search__fc--pages .wpgb-facet ul.wpgb-pagination .wpgb-page a[aria-current] { background: var(--s-dark); color: #fff; }
.ssr-search .ssr-search__fc--pages .wpgb-facet ul.wpgb-pagination .wpgb-page .wpgb-dots-page { color: var(--s-c300); min-width: 20px; }
.ssr-search .ssr-search__fc--pages .wpgb-facet ul.wpgb-pagination .wpgb-page-next a,
.ssr-search .ssr-search__fc--pages .wpgb-facet ul.wpgb-pagination .wpgb-page-prev a {
  width: 36px;
  border: 1px solid var(--s-line-strong);
  font-size: 0;
  color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f2e30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}
.ssr-search .ssr-search__fc--pages .wpgb-facet ul.wpgb-pagination .wpgb-page-prev a { transform: scaleX(-1); }

/* --- the map column --- */
.ssr-search__map {
  flex: 1 1 auto;
  min-width: 0;
  position: sticky;
  top: var(--s-top);
  height: calc(100vh - var(--s-top));
  background: var(--s-c100);
  border-left: 1px solid var(--s-line);
  overflow: hidden;
}
.ssr-search__mapinner { position: absolute; inset: 0; }
.ssr-search__mapinner .ssr-search__fc,
.ssr-search .ssr-search__mapinner .ssr-search__fc > .wpgb-facet,
.ssr-search .ssr-search__mapinner .ssr-search__fc > .wpgb-facet > fieldset { height: 100%; }
.ssr-search .ssr-search__map .ssr-search__fc .wpgb-facet .wpgb-map-facet {
  position: relative;
  height: 100%;
  padding-bottom: 0 !important; /* WPGB's inline ratio padding — the one honest !important */
}
.ssr-search__mapbar { display: none; }

/* "Update as I move the map" as a switch, top-left */
.ssr-search .ssr-search__map .ssr-search__fc .wpgb-facet .wpgb-map-pan-to-search {
  position: absolute;
  top: 16px;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  margin: 0;
  height: 40px;
  padding: 0 12px 0 8px;
  border-radius: var(--s-radius);
  background: var(--s-surface);
  box-shadow: var(--s-shadow-md);
  font-family: var(--s-body);
  z-index: 5;
}
.ssr-search .ssr-search__map .ssr-search__fc .wpgb-facet .wpgb-map-pan-to-search .wpgb-map-pan-label { font-family: var(--s-body) !important; font-size: 13px; font-weight: 600; color: var(--s-dark); margin: 0 0 0 8px; }
.ssr-search .ssr-search__map .ssr-search__fc .wpgb-facet .wpgb-map-pan-to-search .wpgb-checkbox-control {
  width: 40px;
  height: 24px;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: var(--s-c300);
  transition: background .15s var(--s-ease);
}
.ssr-search .ssr-search__map .ssr-search__fc .wpgb-facet .wpgb-map-pan-to-search .wpgb-checkbox-control::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(26,26,27,.3);
  transform: none;
  transition: transform .15s var(--s-ease);
}
.ssr-search .ssr-search__map .ssr-search__fc .wpgb-facet .wpgb-map-pan-to-search input:checked + .wpgb-checkbox-control { background: var(--s-dark-deep); border: 0; }
.ssr-search .ssr-search__map .ssr-search__fc .wpgb-facet .wpgb-map-pan-to-search input:checked + .wpgb-checkbox-control::after { transform: translateX(16px); }
.ssr-search .ssr-search__map .ssr-search__fc .wpgb-facet .wpgb-map-pan-to-search input:hover + .wpgb-checkbox-control { border: 0; }

/* the "Townships" switch: built by search.js, placed by Google's control API in the right-top
   column under the fullscreen button, so it rides along into fullscreen and never shares a row
   with the centred pan switch; its look matches that switch */
.ssr-search .ssr-search__twp { margin: 8px 10px 0 0; }
.ssr-search .ssr-search__twpbtn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 8px 0 12px;
  border: 0;
  border-radius: var(--s-radius);
  background: var(--s-surface);
  box-shadow: var(--s-shadow-md);
  font-family: var(--s-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--s-dark);
  cursor: pointer;
}
.ssr-search .ssr-search__twpbtn:focus-visible { outline: 2px solid var(--s-green-700); outline-offset: 2px; }
.ssr-search .ssr-search__twpswitch {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: 12px;
  background: var(--s-c300);
  transition: background .15s var(--s-ease);
}
.ssr-search .ssr-search__twpswitch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(26,26,27,.3);
  transition: transform .15s var(--s-ease);
}
.ssr-search .ssr-search__twpbtn[aria-checked="true"] .ssr-search__twpswitch { background: var(--s-dark-deep); }
.ssr-search .ssr-search__twpbtn[aria-checked="true"] .ssr-search__twpswitch::after { transform: translateX(16px); }
.ssr-search .ssr-search__twpbtn.is-busy .ssr-search__twpswitch { opacity: .6; }

/* the hover tip: a plain pointer-events:none div inside the map element, never an InfoWindow */
.ssr-search .ssr-search__twptip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  transform: translate(14px, -50%);
  max-width: 15rem;
  padding: .45rem .6rem;
  border-radius: var(--s-radius);
  background: rgba(255,255,255,.97);
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.12);
  font: 400 12.5px/1.45 var(--s-body);
  color: var(--s-ink);
  white-space: nowrap;
}
.ssr-search .ssr-search__twptip.is-flipped { transform: translate(calc(-100% - 14px), -50%); }
.ssr-search .ssr-search__twptip[hidden] { display: none; }
.ssr-search .ssr-search__twptip strong { font-weight: 600; }

/* township labels: a halo rather than a pill, so they sit over any basemap without one more box */
.ssr-search .ssr-search__twplbl {
  font: 600 11px/1.2 var(--s-body);
  color: #2b2f2c;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff;
}
.ssr-search .ssr-search__twplbl.is-home { font-family: var(--s-display); font-size: 12.5px; font-weight: 700; color: var(--accent-cta-hover, #ea3f45); }

/* price-pill markers */
.ssr-search .ssr-search__map .wpgb-marker .wpgb-marker-content,
.ssr-search .ssr-search__map .wpgb-marker-style-default {
  padding: 5px 9px;
  border-radius: var(--s-pill);
  background: var(--s-dark);
  color: #fff;
  border: 2px solid #fff;
  font-family: var(--s-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(26,26,27,.35);
}
.ssr-search .ssr-search__map .wpgb-marker-highlighted .wpgb-marker-content { background: var(--s-green); color: var(--s-ink-strong); }

/* ======================================================================================
   Cards  (.ssr-search .ssr-lcard = (0,2,0) beats WPGB's .wp-grid-builder .wpgb-card div reset)
   ==================================================================================== */

.ssr-search .ssr-lcard {
  position: relative;
  height: 100%;
  background: var(--s-surface);
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius-lg);
  overflow: hidden;
  box-shadow: var(--s-shadow-sm);
  transition: transform .2s var(--s-ease), box-shadow .2s var(--s-ease);
}
.ssr-search .ssr-lcard:hover { transform: translateY(-4px); box-shadow: var(--s-shadow-lg); }
.ssr-search .ssr-lcard .ssr-lcard__media { position: static; height: 236px; background: var(--s-c300); }
.ssr-search .ssr-lcard .ssr-lcard__link { display: block; height: 100%; }
.ssr-search .ssr-lcard .ssr-lcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ssr-search .ssr-lcard .ssr-lcard__link:focus-visible { outline: none; }
.ssr-search .ssr-lcard .ssr-lcard__link:focus-visible::after { outline: 3px solid var(--s-dark); outline-offset: -3px; border-radius: var(--s-radius-lg); }
.ssr-search .ssr-lcard .ssr-lcard__img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.ssr-search .ssr-lcard .ssr-lcard__over { display: contents; }
.ssr-search .ssr-lcard .ssr-lcard__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--s-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
  background: var(--s-c100);
  color: var(--s-dark);
}
.ssr-search .ssr-lcard .ssr-lcard__badge--warning { background: var(--s-green-100); color: var(--s-green-700); }  /* Coming Soon */
.ssr-search .ssr-lcard .ssr-lcard__badge--cta     { background: var(--s-amber-100); color: var(--s-amber-700); }  /* Pending / Under contract */
.ssr-search .ssr-lcard .ssr-lcard__badge--success { background: var(--s-dark); color: #fff; }                     /* Sold */
.ssr-search .ssr-lcard .ssr-lcard__fav,
.ssr-search .ssr-lcard .ssr-lcard__fav.favorite-button-mini {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 3;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(26,26,27,.45) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: background .15s var(--s-ease), transform .15s var(--s-ease);
}
.ssr-search .ssr-lcard .ssr-lcard__fav:hover { background: rgba(26,26,27,.65) !important; transform: scale(1.06); }
.ssr-search .ssr-lcard .ssr-lcard__fav.is-favorited { background: rgba(26,26,27,.65) !important; color: #fff !important; }
.ssr-search .ssr-lcard .ssr-lcard__fav .favorite-icon { display: flex; }
.ssr-search .ssr-lcard .ssr-lcard__body { padding: 14px 16px 16px; }
.ssr-search .ssr-lcard .ssr-lcard__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ssr-search .ssr-lcard .ssr-lcard__price { font-family: var(--s-display); font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--s-ink-strong); }
.ssr-search .ssr-lcard .ssr-lcard__area { font-size: 12px; font-weight: 600; color: var(--s-c500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssr-search .ssr-lcard .ssr-lcard__stats { font-size: 14px; color: var(--s-dark); margin-top: 4px; }
.ssr-search .ssr-lcard .ssr-lcard__addr { font-size: 13px; color: var(--s-c500); margin-top: 6px; }

/* ======================================================================================
   Drawer ("All filters") and its fields
   ==================================================================================== */

.ssr-search__more { display: none; }
.ssr-search--more .ssr-search__more {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100vw);
  z-index: calc(var(--s-z) + 2);
  background: var(--s-surface);
  box-shadow: var(--s-shadow-lg);
}
.ssr-search__morehead, .ssr-search__panelhead { align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--s-line); }
.ssr-search__morehead { display: flex; }
.ssr-search__moretitle, .ssr-search__paneltitle { margin: 0; font-family: var(--s-display); font-size: 20px; font-weight: 700; color: var(--s-ink-strong); }
.ssr-search .ssr-search__close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--s-ink); }
.ssr-search .ssr-search__close:hover { background: var(--s-surface-muted); }
.ssr-search__morebody { flex: 1 1 auto; overflow: auto; padding: 8px 24px 24px; display: flex; flex-direction: column; gap: 22px; }
.ssr-search__morefoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--s-line); background: var(--s-surface); }
.ssr-search .ssr-search__apply {
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--s-pill);
  background: var(--s-dark);
  color: #fff;
  font-family: var(--s-display);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.ssr-search .ssr-search__apply:hover { background: var(--s-dark-deep); }
.ssr-search .ssr-search__fc--reset .wpgb-facet .wpgb-reset,
.ssr-search .ssr-search__fc--reset .wpgb-facet button { border: 0; background: transparent; padding: 0; margin: 0; font: inherit; font-weight: 600; color: var(--s-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; box-shadow: none; }
.ssr-search .ssr-search__fc--reset .wpgb-facet button[disabled] { color: var(--s-c300); text-decoration: none; cursor: default; }

.ssr-search__field { display: flex; flex-direction: column; gap: 8px; }
.ssr-search__flabel { font-size: 14px; font-weight: 600; color: var(--s-ink); }

/* checkbox facet (property type) as chips */
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet ul.wpgb-hierarchical-list,
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet ul.wpgb-inline-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet ul > li { margin: 0; padding: 0; list-style: none; }
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-checkbox,
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-pill);
  background: var(--s-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--s-dark);
  cursor: pointer;
  box-shadow: none;
}
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-checkbox .wpgb-checkbox-control { display: none; }
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-checkbox[aria-pressed="true"],
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-button[aria-pressed="true"] { background: var(--s-dark); border-color: var(--s-dark); color: #fff; }
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-checkbox[aria-disabled="true"],
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-button[aria-disabled="true"] { opacity: .4; cursor: default; }
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-checkbox-label,
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-button-label { margin: 0; padding: 0; font-size: 13px; }
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-checkbox-label > span,
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-button-label > span { font-weight: 400; opacity: .7; }

/* range facets */
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-range-facet { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 6px 8px 0; }
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-range-facet .wpgb-range-facet-loader { display: contents; }
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-range-facet .wpgb-range-slider { order: 1; flex: 1 0 100%; height: 4px; margin: 10px 0 4px; border-radius: 2px; background: var(--s-c100); }
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-range-facet .wpgb-range-progress { background: var(--s-dark); height: 4px; border-radius: 2px; }
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-range-facet .wpgb-range-thumb { width: 22px; height: 22px; border: 2px solid var(--s-dark); border-radius: 50%; background: #fff; box-shadow: var(--s-shadow-sm); }
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-range-facet .wpgb-range-values { order: 2; font-size: 13px; color: var(--s-ink); font-weight: 600; margin: 0; }
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-range-facet .wpgb-range-clear { order: 3; margin-left: auto; border: 0; background: transparent; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--s-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; box-shadow: none; }
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-range-facet .wpgb-range-clear[disabled] { color: var(--s-c300); text-decoration: none; cursor: default; }

/* date + search facets */
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-date-facet,
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-search-facet { position: relative; }
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-date-facet > label,
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-search-facet > label { display: block; margin: 0; }
.ssr-search .ssr-search__field .ssr-search__fc .wpgb-facet .wpgb-clear-button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--s-muted); }

/* overlay */
.ssr-search__overlay { position: fixed; inset: 0; z-index: calc(var(--s-z) + 1); background: rgba(26,26,27,.6); }
.ssr-search__overlay[hidden] { display: none; }
html.ssr-search-lock, html.ssr-search-lock body { overflow: hidden; }

/* floating Map button and the map's List button: off until the layout stacks */
.ssr-search__fab { display: none; }
.ssr-search .ssr-search__mapbtn, .ssr-search .ssr-search__listbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--s-pill);
  background: var(--s-dark);
  color: #fff;
  font-family: var(--s-display);
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--s-shadow-lg);
  cursor: pointer;
}
.ssr-search__listcount:not(:empty)::before { content: " · "; }

/* ======================================================================================
   Widths
   ==================================================================================== */

/* 1024–1439: the same split, the results column a share of the width */
@media (max-width: 1439px) {
  .ssr-search { --s-results: min(812px, 58%); --s-gutter: 24px; }
  .ssr-search__results { padding: 20px 20px 28px var(--s-gutter); }
}

/* ≤1023: results and map stack; the map is a full-screen layer behind the floating button */
@media (max-width: 1023px) {
  .ssr-search__body { display: block; }
  .ssr-search__results { max-width: none; padding: 20px var(--s-gutter) 110px; }
  .ssr-search__map {
    position: fixed;
    inset: 0;
    z-index: var(--s-z);
    height: auto;
    border: 0;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .3s var(--s-ease), visibility 0s .3s;
  }
  .ssr-search--map .ssr-search__map { transform: none; visibility: visible; transition: transform .3s var(--s-ease); }
  .ssr-search__mapbar {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 6;
    pointer-events: none;
  }
  .ssr-search__mapbar .ssr-search__listbtn { pointer-events: auto; }
  .ssr-search--js .ssr-search__fab {
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: calc(var(--s-z) - 1);
    pointer-events: none;
  }
  .ssr-search__fab .ssr-search__mapbtn { pointer-events: auto; }
  .ssr-search--map .ssr-search__fab, .ssr-search--more .ssr-search__fab, .ssr-search--panel .ssr-search__fab { display: none; }
}

/* ≤767: the bar becomes a summary pill that opens one panel holding every filter */
@media (max-width: 767px) {
  .ssr-search { --s-gutter: 16px; }
  .ssr-search--js .ssr-search__summary { display: flex; gap: 8px; padding: 12px var(--s-gutter); }
  .ssr-search__sumbtn {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--s-line-strong);
    border-radius: var(--s-pill);
    background: var(--s-surface);
    box-shadow: var(--s-shadow-sm);
    text-align: left;
    cursor: pointer;
  }
  .ssr-search__sumtext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--s-ink-strong); }
  .ssr-search__sumtext .ssr-search__summuted { font-weight: 400; color: var(--s-c500); }
  .ssr-search__sumfilters {
    position: relative;
    flex: none;
    width: 46px;
    height: 46px;
    border: 1px solid var(--s-line-strong);
    border-radius: 50%;
    background: var(--s-surface);
    box-shadow: var(--s-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--s-ink);
  }
  .ssr-search__sumfilters .ssr-search__badge { position: absolute; top: -4px; right: -4px; border: 2px solid var(--s-surface); box-sizing: content-box; min-width: 16px; height: 16px; font-size: 10px; }

  .ssr-search--js .ssr-search__panel { display: none; }
  .ssr-search--js.ssr-search--panel .ssr-search__panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: calc(var(--s-z) + 2);
    background: var(--s-surface);
  }
  .ssr-search--panel .ssr-search__panelhead { display: flex; }
  .ssr-search__panelbody { flex: 1 1 auto; overflow: auto; min-height: 0; }
  .ssr-search__pills { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px var(--s-gutter) 4px; min-height: 0; }
  .ssr-search__sep, .ssr-search__allwrap, .ssr-search__spacer, .ssr-search__resetwrap { display: none; }
  .ssr-search__pills .ssr-search__pill { height: 46px; width: 100%; }
  .ssr-search__pills .ssr-search__pill--pop { height: auto; }
  .ssr-search .ssr-search__pbtn { width: 100%; height: 46px; }
  .ssr-search__pchev { margin-left: auto; }
  .ssr-search__pval { max-width: none; }
  .ssr-search__pop { position: static; width: auto; margin-top: 8px; box-shadow: none; }
  .ssr-search__savewrap { width: 100%; }
  .ssr-search__save { width: 100%; height: 44px; }
  .ssr-search__savepop { position: static; width: auto; margin-top: 10px; box-shadow: none; }
  .ssr-search__savepop::before { display: none; }
  /* the drawer's contents flow inside the panel; its foot sticks to the bottom of the scroll */
  .ssr-search__more, .ssr-search--more .ssr-search__more { display: contents; }
  .ssr-search__morehead { display: none; }
  .ssr-search__morebody { padding: 14px var(--s-gutter) 24px; overflow: visible; }
  .ssr-search__morefoot { position: sticky; bottom: 0; padding: 12px var(--s-gutter) calc(12px + env(safe-area-inset-bottom, 0px)); }

  .ssr-search__cats { padding: 8px 12px 0; }
  .ssr-search .ssr-search__cats .ssr-search__fc .wpgb-facet ul.wpgb-inline-list { gap: 4px; }
  .ssr-search .ssr-search__cats .ssr-search__fc .wpgb-facet .wpgb-button { width: 68px; gap: 5px; padding: 8px 0; font-size: 11px; }
  .ssr-search .ssr-search__cats .ssr-search__fc .wpgb-facet .wpgb-button .ssr-search__caticon { width: 24px; height: 24px; }

  .ssr-search__results { gap: 14px; padding: 14px var(--s-gutter) 120px; }
  .ssr-search .ssr-search__rtitle .ssr-search__fc .wpgb-facet .wpgb-result-count { font-size: 17px; }
  .ssr-search__rsub { display: none; }
  .ssr-search__rhead { align-items: center; }
  .ssr-search__pill--sort { border: 0; height: 32px; padding: 0 22px 0 0; flex: none; }
  .ssr-search__pill--sort::after { right: 2px; }
  .ssr-search .ssr-search__pill--sort .ssr-search__fc .wpgb-facet .wpgb-select { padding-left: 0; }
  .ssr-search .ssr-lcard .ssr-lcard__media { height: 214px; }
  .ssr-search .ssr-lcard .ssr-lcard__price { font-size: 21px; }
  .ssr-search .ssr-lcard .ssr-lcard__body { padding: 12px 14px 14px; }
  .ssr-search__rfoot { flex-wrap: wrap; }
  /* under Google's own top row of controls, which a 375px map has no room beside */
  .ssr-search .ssr-search__map .ssr-search__fc .wpgb-facet .wpgb-map-pan-to-search { top: 62px; left: 12px; transform: none; height: 36px; }
  .ssr-search .ssr-search__map .ssr-search__fc .wpgb-facet .wpgb-map-pan-to-search .wpgb-map-pan-label { font-size: 12px; }
  /* under the pan switch's row (top 62 + 36), since a 375px map has no room for both side by side */
  .ssr-search .ssr-search__twp { margin-top: 56px; }
  .ssr-search .ssr-search__twpbtn { height: 36px; font-size: 12px; }
}

/* no JS: everything renders open and inline; the map keeps its ratio box */
.ssr-search:not(.ssr-search--js) .ssr-search__more { display: block; position: static; box-shadow: none; }
.ssr-search:not(.ssr-search--js) .ssr-search__morehead, .ssr-search:not(.ssr-search--js) .ssr-search__morefoot .ssr-search__apply { display: none; }
.ssr-search:not(.ssr-search--js) .ssr-search__pop { display: block; position: static; width: auto; box-shadow: none; }
@media (max-width: 1023px) {
  .ssr-search:not(.ssr-search--js) .ssr-search__map { position: relative; inset: auto; transform: none; visibility: visible; height: 70vh; }
}