/* ==========================================================================
   lc-listings.css — Zillow-style split-screen map directory for /listings/
   Paired with lc-listings.js. Full-bleed shell CSS is injected by the
   mu-plugin (lc-listing-directory.php); this file styles the app itself.
   Clean/serif aesthetic — inherits the theme body font, serif price accents.
   ========================================================================== */

.lc-app {
  --lc-ink:      #1d2721;
  --lc-muted:    #6b7772;
  --lc-line:     #e3e6e3;
  --lc-bg:       #ffffff;
  --lc-bg-soft:  #f6f7f5;
  --lc-accent:   #2f6f57;   /* lowcountry green */
  --lc-gold:     #b8863b;   /* featured accent  */
  --lc-shadow:   0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  --lc-bar-h:    64px;

  box-sizing: border-box;
  color: var(--lc-ink);
  background: var(--lc-bg);
  font-size: 15px;
  line-height: 1.4;
}
.lc-app *, .lc-app *::before, .lc-app *::after { box-sizing: border-box; }

/* ---- Filter / header bar ------------------------------------------------ */
.lc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: var(--lc-bar-h);
  padding: 10px 16px;
  background: var(--lc-bg);
  border-bottom: 1px solid var(--lc-line);
  position: relative;
  z-index: 500;
}
.lc-bar__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lc-bar__spacer { flex: 1 1 auto; }

.lc-app input[type="text"],
.lc-app input[type="number"],
.lc-app select {
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--lc-line);
  border-radius: 8px;
  background: var(--lc-bg);
  color: var(--lc-ink);
  font: inherit;
  font-size: 14px;
  outline: none;
}
.lc-app input[type="number"] { width: 104px; }
.lc-app input:focus, .lc-app select:focus { border-color: var(--lc-accent); }
.lc-search { min-width: 200px; flex: 1 1 220px; }

.lc-count {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  color: var(--lc-ink);
}

.lc-btn {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--lc-line);
  border-radius: 8px;
  background: var(--lc-bg);
  color: var(--lc-ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.lc-btn:hover { background: var(--lc-bg-soft); }
.lc-btn--primary { background: var(--lc-accent); border-color: var(--lc-accent); color: #fff; }

/* Filters toggle + mobile Map/List toggle — hidden on desktop */
.lc-filters-toggle,
.lc-viewtoggle { display: none; }

/* ---- Save-this-search button (in the bar's right group) ----------------- */
.lc-sub-btn { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap; }
.lc-sub-btn svg { display: block; }
.lc-sub-btn[hidden] { display: none; }

/* ---- Alerts strip ------------------------------------------------------
   Sits between the bar and the panes: one line, dismissible, never over the
   content. Height is deliberately small — sizePanes() gives back whatever this
   takes, so an open strip shortens the map rather than covering it. */
.lc-sub {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 50px 12px 16px;   /* right gutter is the dismiss button's touch target */
  background: var(--lc-bg-soft);
  border-bottom: 1px solid var(--lc-line);
}
.lc-sub[hidden] { display: none; }
.lc-sub__text { flex: 1 1 260px; min-width: 0; }
.lc-sub__head { display: block; font-size: 14px; font-weight: 600; color: var(--lc-ink); }
.lc-sub__crit {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--lc-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lc-sub__form { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; }
.lc-sub__form[hidden] { display: none; }
.lc-sub__email {
  height: 40px;
  min-width: 200px;
  padding: 0 10px;
  border: 1px solid var(--lc-line);
  border-radius: 8px;
  background: var(--lc-bg);
  color: var(--lc-ink);
  font: inherit;
  font-size: 14px;
  outline: none;
}
.lc-sub__email:focus { border-color: var(--lc-accent); }
/* Honeypot: off-screen rather than display:none, which the simpler bots skip. */
.lc-sub__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lc-sub__msg { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--lc-ink); }
.lc-sub__msg[hidden] { display: none; }
.lc-sub__close {
  position: absolute; top: 4px; right: 4px;
  width: 40px; height: 40px;          /* a real touch target, not a 20px glyph */
  border: 0; background: none; cursor: pointer;
  color: var(--lc-muted);
  font-size: 20px; line-height: 1;
}
.lc-sub__close:hover { color: var(--lc-ink); }

/* ---- Split panes -------------------------------------------------------- */
.lc-panes {
  display: flex;
  align-items: stretch;
  height: calc(100vh - 220px);   /* JS overrides with a measured value */
  min-height: 480px;
}
.lc-list {
  width: 42%;
  min-width: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--lc-bg-soft);
  border-right: 1px solid var(--lc-line);
}
.lc-map {
  flex: 1 1 auto;
  width: 58%;
  min-height: 300px;
  background: #dfe4e2;
}

/* ---- "Alert me about this area" (floating, on the map) ------------------
   Anchored to the map because it is about what the map is showing. Bottom-left
   clears Leaflet's zoom control (top-left) and its attribution strip (bottom-
   right), which the 26px offset also sits above. Leaflet's own controls run to
   z-index 1000; this has to match to stay clickable over the tile pane.
   Disabled = the current viewport is too large (or too small) to report on;
   the button says why in its title and re-enables itself on the next zoom. */
.lc-area-cta {
  position: absolute;
  left: 12px;
  bottom: 26px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  box-shadow: var(--lc-shadow);
}
.lc-area-cta[hidden] { display: none; }
.lc-area-cta svg { display: block; flex: 0 0 auto; }
.lc-area-cta:disabled { opacity: .5; cursor: default; }
.lc-area-cta:disabled:hover { background: var(--lc-bg); }

/* ---- Cards grid --------------------------------------------------------- */
.lc-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
}
@media (max-width: 1200px) { .lc-cards { grid-template-columns: 1fr; } }

.lc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--lc-bg);
  border: 1px solid var(--lc-line);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--lc-shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}
.lc-card:hover,
.lc-card.is-active {
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
  transform: translateY(-2px);
}
.lc-card.is-active { outline: 2px solid var(--lc-accent); outline-offset: -2px; }

.lc-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #e7eae8;
  overflow: hidden;
}
.lc-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.lc-card__noimg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--lc-muted);
  font-size: 13px;
  background: var(--lc-bg-soft);
}
.lc-card__ribbon {
  position: absolute;
  top: 10px; left: 0;
  background: var(--lc-gold);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 0 4px 4px 0;
  box-shadow: var(--lc-shadow);
}
/* LCSaves heart. Over the photo, opposite the ribbon — the card body is spoken for by
   the attribution line and must not be crowded. Same visual language as the hotels and
   builders hearts so a save looks like a save everywhere on the platform. */
.lc-card__save {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  width: 30px; height: 30px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); color: #8a9490;
  box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: transform .1s, color .12s;
}
.lc-card__save:hover { transform: scale(1.08); color: #d6455f; }
.lc-card__save.is-on { color: #d6455f; }
.lc-card__save svg { display: block; fill: currentColor; }

.lc-card__body { padding: 10px 12px 12px; }
.lc-card__price {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--lc-ink);
  line-height: 1.1;
}
.lc-card__meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--lc-ink);
}
.lc-card__meta b { font-weight: 700; }
.lc-card__addr {
  margin-top: 6px;
  font-size: 13px;
  color: var(--lc-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lc-card__sub {
  font-size: 12px;
  color: var(--lc-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-top: 2px;
}
/* The paid disclosure. Ink on the card's white body, which measures 15.73:1 — never the muted
   token, which clears the floor by a fraction and is what this site uses to MEAN de-emphasis, and
   never white on the gold, which is a live 3.23:1 failure on the ribbon this rule replaces.

   Uppercase and letterspaced at the size .lc-card__sub already uses, so it reads as a label rather
   than as another line of listing data — and it sits directly above the attribution, so the two
   provenance facts are one group. Nothing new is introduced: the ink, the 6px step and the 12px
   size are all already in this file.

   ⛔ NO MEDIA QUERY, HERE OR ANYWHERE. It renders identically at every width: a disclosure that
   shrinks on the smaller screen is quietest exactly where the screen is most crowded. And no
   nowrap and no truncation — if the string is ever longer, wrapping to two lines is correct and
   clipping is not, which is the same rule the attribution below it carries. */
.lc-card__paid {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--lc-ink);
}
/* NAR IDX 7.58: attribution must be readable and no smaller than the median type in the
   listing display. The card runs 20/13/13/12px, so the median is 13px -- this matches
   .lc-card__meta exactly. Do not shrink it, and do not fade it into --lc-muted.

   ⚠ SIZE IS NOT AN AVAILABLE LEVER, AND THIS RULE HAS ALREADY BEEN BROKEN ONCE. It was set to
   11px directly beneath this comment and shipped. The reasoning was sound — at body-adjacent
   size the credit does compete with the price and the address — but the diagnosis pointed at the
   wrong property. The competition comes from the credit being the only --lc-ink line in the lower
   half of the card, under two --lc-muted ones, in a stack of five evenly spaced lines with no
   grouping. Shrinking it left a small line that was still the darkest thing down there.

   ⚠ THIS RULE IS SHARED WITH THE MAP POPUP (lc-listing-card.js builds both). The popup's own
   ramp is 18/12.5/12, median 12.5, so 13px clears the floor on both surfaces from this one
   declaration — which is deliberate, because it means the attribution cannot depend on two files
   landing in the same deploy. Rank is handled below, scoped to the card body, so the popup keeps
   the plain treatment where the credit sits above a call to action rather than closing a card. */
.lc-card__attrib {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--lc-ink);
}
/* Rank without touching size or ink: the credit stops being the fifth line of listing data and
   becomes the card's footer. A rule and real space are what say "different register" — at the
   same size and colour as the data above it, 4px of margin says "next line" instead. The hairline
   is the card's own border colour, so it reads as part of the card rather than as a new device. */
.lc-card__body .lc-card__attrib {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--lc-line);
}
/* The popup gets the space and NOT the rule. A line here would fence the credit in with the call
   to action beneath it, which belongs to neither the listing data above nor the attribution — and
   a four-line popup does not have enough stack to need a drawn register. Detaching it from the
   address is the whole job: at 6px it sat the same distance from the address as the action sat
   from it, so three unlike things read as one evenly spaced list. */
.lc-pop__body .lc-card__attrib { margin-top: 9px; }

/* ---- List states / footer ---------------------------------------------- */
.lc-state {
  padding: 40px 24px;
  text-align: center;
  color: var(--lc-muted);
  font-size: 15px;
}
.lc-loadmore-wrap { padding: 4px 16px 20px; text-align: center; }
.lc-attr {
  padding: 14px 16px 22px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--lc-muted);
  border-top: 1px solid var(--lc-line);
}
.lc-spinner { padding: 18px; text-align: center; color: var(--lc-muted); font-size: 13px; }

/* ---- Price-bubble markers (L.divIcon) ----------------------------------
   Leaflet transforms the wrapper element to position it, so the wrapper is
   given zero size and the visible pill is an inner span centered on the
   coordinate via its own translate(-50%,-50%). */
.lc-marker-wrap { background: none !important; border: none !important; width: 0; height: 0; }
.lc-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-block;
  padding: 3px 9px;
  background: var(--lc-bg);
  color: var(--lc-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 1px 4px rgba(0,0,0,.28);
  white-space: nowrap;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.lc-marker--featured {
  background: var(--lc-gold);
  color: #fff;
  border-color: var(--lc-gold);
}
.lc-marker--active {
  transform: translate(-50%, -50%) scale(1.18);
  z-index: 1000 !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.4);
  background: var(--lc-accent);
  color: #fff;
  border-color: var(--lc-accent);
}
/* ---- Zillow-style marker popup card ------------------------------------ */
.lc-pop .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
}
.lc-pop .leaflet-popup-content {
  margin: 0;
  width: 212px !important;
  line-height: 1.35;
}
.lc-pop a.lc-pop__card,
.lc-pop__card {
  display: block;
  text-decoration: none;
  color: var(--lc-ink);
  cursor: pointer;
}
/* position: relative anchors the save heart; the popup card itself is the <a>, and an
   absolutely positioned button inside it would otherwise escape to the map pane. */
.lc-pop__media {
  position: relative;
  width: 100%;
  height: 132px;
  background: var(--lc-bg-soft);
  overflow: hidden;
}
/* Top-LEFT here, unlike the card, because Leaflet parks its popup close button in the
   top-right corner — side by side the two are a mis-tap waiting to happen. */
.lc-pop__save {
  position: absolute; top: 7px; left: 7px; z-index: 5;
  width: 28px; height: 28px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); color: #8a9490;
  box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: transform .1s, color .12s;
}
.lc-pop__save:hover { transform: scale(1.08); color: #d6455f; }
.lc-pop__save.is-on { color: #d6455f; }
.lc-pop__save svg { display: block; fill: currentColor; }
.lc-pop__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-pop__media--empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--lc-muted); font-size: 12px;
}
.lc-pop__body { padding: 8px 11px 10px; }
.lc-pop__price {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px; font-weight: 700; line-height: 1.1;
  color: var(--lc-ink);
}
.lc-pop__meta { font-size: 12.5px; color: var(--lc-ink); margin-top: 3px; }
.lc-pop__meta b { font-weight: 700; }
.lc-pop__addr {
  font-size: 12px; color: var(--lc-muted); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lc-pop__cta {
  margin-top: 7px;
  font-size: 12px; font-weight: 700;
  color: var(--lc-accent);
  letter-spacing: .01em;
}
.lc-pop__card:hover .lc-pop__cta { text-decoration: underline; }
.lc-pop__state { padding: 20px 16px; text-align: center; color: var(--lc-muted); font-size: 13px; }
/* Legacy popup classes (unused now, harmless) */
.lc-pop-price { font-weight: 700; font-size: 15px; }
.lc-pop-meta { font-size: 13px; color: #555; margin-top: 2px; }

/* ---- Mobile: FIXED bottom action bar + single pane --------------------- */
@media (max-width: 960px) {
  .lc-app {
    --lc-bar-h: auto;
    /* Clearance for the site-wide mobile bottom nav that this app's bar sits directly ABOVE.

       The default is the home-indicator inset and nothing else, because the default is the
       case where NO BAR EXISTS: lc-mobile-nav.js adds html.lc-bottombar-on only once it has
       actually built one, so if that script fails or is blocked there is nothing to clear and
       reserving a bar's height would be dead space above an empty edge.

       The gated rule below is the same convention lc-mobile-nav.css uses for its own body
       padding, and it is used here rather than `var(--lc-bottombar-h, …)` for a reason worth
       stating: that variable is declared on :root as a static 56px, so it is ALWAYS defined
       and a var() fallback written against it is unreachable. Writing it that way silently
       dropped the env() inset and left an iPhone's app bar 34px too low until the measurement
       landed. */
    --lc-sitenav-h: env(safe-area-inset-bottom, 0px);
  }

  /* The measured height, which already includes the safe-area inset — so this must NOT add
     env() a second time. The copy that used to sit here said 56px and was wrong wherever a
     directory hands a control into the shared bar's tools row, which grows it: measured at
     414 on the listings page, the shared bar was 105px and this bar was docked 49px inside
     it, so the whole of its last wrapped line — the area chip — sat behind the nav and read
     as simply missing. A constant kept in sync by hand is a constant that will not be. */
  html.lc-bottombar-on .lc-app { --lc-sitenav-h: var(--lc-bottombar-h); }

  .lc-filters-toggle { display: inline-flex; align-items: center; flex: 0 0 auto; }
  .lc-viewtoggle {
    display: inline-flex;
    flex: 0 0 auto;
    border: 1px solid var(--lc-line);
    border-radius: 8px;
    overflow: hidden;
  }
  .lc-viewtoggle button {
    border: 0;
    background: var(--lc-bg);
    color: var(--lc-ink);
    font: inherit; font-size: 14px;
    padding: 8px 16px;
    cursor: pointer;
  }
  .lc-viewtoggle button.is-on { background: var(--lc-accent); color: #fff; }

  /* ---- The bar, re-cast as an app-style fixed bottom action bar ---------
     Pinned to the bottom of the viewport, docked directly above the site's
     own mobile bottom nav (fixed at bottom:0). Two compact rows stacked in a
     column: [Filters · search] then [count · List/Map]. Nothing is pushed
     down from the top anymore — the map/list get the full height above. */
  .lc-bar {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--lc-sitenav-h);
    z-index: 980;                       /* above the map, below site nav (985) */

    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    min-height: 0;
    padding: 8px 12px;

    border-bottom: 0;
    border-top: 1px solid var(--lc-line);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
  }

  /* Row 1: Filters button + search (search fills the rest). 16px font keeps
     iOS Safari from zooming the viewport on focus. */
  .lc-search { flex: 1 1 auto; min-width: 0; font-size: 16px; }

  /* Kill the desktop spacer inside the column layout. */
  .lc-bar__spacer { display: none; }

  /* Row 2 (last group): count, save-search, List/Map toggle, spread across the row. */
  .lc-bar > .lc-bar__group:last-child {
    width: 100%;
    justify-content: space-between;
  }
  .lc-count { font-size: 13px; }

  /* The bar is a fixed two-row strip on phones; the label does not fit beside a count and
     a view toggle, so the bell carries it. aria-label on the button keeps it named. */
  .lc-sub-btn { padding: 0 12px; }
  .lc-sub-btn span { display: none; }

  /* The area control KEEPS its label on a phone. It is not in the crowded bar — it has the
     bottom of the map to itself — and it is the only thing on screen that explains what
     framing an area does. Losing the words here would make it an unexplained icon. */
  .lc-area-cta { left: 10px; bottom: 22px; padding: 0 12px; font-size: 13px; }

  /* The strip is the app's first in-flow element here (the bar is fixed to the bottom), so
     it reads as a banner at the top of the results. Full-width form, 16px input — anything
     smaller makes iOS Safari zoom the viewport on focus. */
  .lc-sub { padding: 10px 40px 12px 12px; gap: 8px; }
  .lc-sub__form { flex: 1 1 100%; }
  .lc-sub__email { flex: 1 1 auto; min-width: 0; font-size: 16px; }

  /* Filters expand UPWARD as an overlay panel off the bar's top edge. The bar
     is position:fixed, so it is this panel's containing block and bottom:100%
     lands exactly on the bar's top — the base bar height stays constant. */
  .lc-bar__group--filters {
    position: absolute;
    left: 0; right: 0;
    bottom: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 12px;
    background: var(--lc-bg);
    border-top: 1px solid var(--lc-line);
    box-shadow: 0 -6px 16px rgba(0, 0, 0, .12);
    display: none;
  }
  .lc-bar.is-open .lc-bar__group--filters { display: flex; }
  .lc-bar__group--filters select,
  .lc-bar__group--filters input[type="number"] { width: 100%; font-size: 16px; }

  /* ---- Panes: single view; height is set in px by sizePanes() -----------
     The calc() below is only a pre-JS fallback (≈ theme header + this bar +
     site nav). JS overrides it with a measured value and calls
     invalidateSize(), so the map always gets a correct height. */
  .lc-panes {
    display: block;
    height: calc(100vh - 220px);
    min-height: 0;
  }
  .lc-list, .lc-map {
    width: 100%;
    border-right: 0;
  }
  .lc-panes[data-view="list"] .lc-map  { display: none; }
  /* The list is NOT its own scroller on mobile -- the cards flow and the PAGE scrolls.
     A pane of fixed height here sits below a screenful of heading and crops the first card,
     which reads as the end of the page rather than the first of two thousand listings; and
     a scroll gesture inside it either moves a hidden inner scrollbar or does nothing,
     with no way for the reader to tell which they are getting. Measured before this rule
     on /downstairs-primary-bedroom/ at 414x896: 0.78 of a card visible.
     sizePanes() clears the inline height to match; both halves are needed. */
  .lc-panes[data-view="list"] {
    height: auto;
    min-height: 0;
  }
  .lc-panes[data-view="list"] .lc-list {
    display: block;
    height: auto;
    overflow: visible;
  }
  .lc-panes[data-view="map"]  .lc-list { display: none; }
  .lc-panes[data-view="map"]  .lc-map  { display: block; height: 100%; }

  .lc-cards { grid-template-columns: 1fr; }
}

/* ---- Mobile filters relocated into the site bottom bar's funnel reveal ----
   The bottom bar (lc-mobile-nav.js) exposes a funnel "Filters" reveal; its
   addReveal MOVES the .lc-bar__group--filters node into its docked
   .lc-bottombar__panel on mobile and returns it to its home (.lc-bar) on
   desktop. lc-listings.js adds .lc-has-bottombar to the app root only after
   that handover succeeds. Two things follow, both gated so the inline
   .lc-bar.is-open fallback is untouched when the bar/addReveal is absent:

   1. Hide the old inline "Filters" text toggle — the funnel replaces it.
   2. The panel lives at <body> level, OUTSIDE .lc-app, so the app's --lc-*
      tokens and its `.lc-app select/input` skin no longer reach the moved
      group. Undo the group's inline-overlay positioning (it is a plain stacked
      column inside the panel) and re-declare the tokens, box-sizing, and the
      full select/number-input skin. DESKTOP (>=960px) is untouched. */
@media (max-width: 959px) {
  .lc-has-bottombar .lc-filters-toggle { display: none; }

  .lc-bottombar__panel .lc-bar__group--filters {
    --lc-ink:     #1d2721;
    --lc-muted:   #6b7772;
    --lc-line:    #e3e6e3;
    --lc-bg:      #ffffff;
    --lc-bg-soft: #f6f7f5;
    --lc-accent:  #2f6f57;
    --lc-gold:    #b8863b;

    /* Undo the inline overlay (position:absolute; bottom:100%; shadow…) the
       group carries inside .lc-app — in the reveal panel it is just a column.
       Higher specificity than the base `.lc-bar__group--filters{display:none}`
       so the moved group stays visible. */
    position: static;
    top: auto; right: auto; bottom: auto; left: auto;
    margin: 0;
    padding: 12px;
    background: none;
    border-top: 0;
    box-shadow: none;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .lc-bottombar__panel .lc-bar__group--filters,
  .lc-bottombar__panel .lc-bar__group--filters *,
  .lc-bottombar__panel .lc-bar__group--filters *::before,
  .lc-bottombar__panel .lc-bar__group--filters *::after { box-sizing: border-box; }

  .lc-bottombar__panel .lc-bar__group--filters select,
  .lc-bottombar__panel .lc-bar__group--filters input[type="number"] {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--lc-line);
    border-radius: 8px;
    background: var(--lc-bg);
    color: var(--lc-ink);
    font: inherit;
    font-size: 16px;              /* keeps iOS Safari from zooming on focus */
    outline: none;
    -webkit-appearance: none;
    appearance: none;
  }
  .lc-bottombar__panel .lc-bar__group--filters select:focus,
  .lc-bottombar__panel .lc-bar__group--filters input[type="number"]:focus {
    border-color: var(--lc-accent);
  }
}

/* Small phones: let cards breathe */
@media (max-width: 420px) {
  .lc-search { min-width: 140px; }
  .lc-app input[type="number"] { width: 84px; }
}

/* ---------------------------------------------------------------------------
 * Preset chips — the page's own filter, shown so it can be removed
 *
 * A preset page (/waterfront-homes/, /homes-with-a-pool/) is this directory with
 * one condition already applied. The condition has no control in the bar, so
 * without a chip the narrowing is invisible: results would be withheld by a rule
 * the visitor never set and cannot find. The chip states the rule and removes it.
 *
 * Deliberately not styled as a button. It reads as a state that happens to be
 * dismissible; a button would compete with the filter controls directly above it
 * for the same attention, and the primary action here is browsing, not filtering.
 * ------------------------------------------------------------------------- */
.lc-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--lc-bg-soft);
  border-bottom: 1px solid var(--lc-line);
}
.lc-preset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 6px 0 12px;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: var(--lc-ink);
  background: var(--lc-bg);
  border: 1px solid var(--lc-accent);
  border-radius: 0;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lc-preset__txt { white-space: nowrap; }
/* The × carries the affordance, so it gets the weight and the hit area rather
   than the label — clicking the words is a happy accident, not the instruction. */
.lc-preset__x {
  display: block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  color: var(--lc-muted);
}
.lc-preset:hover,
.lc-preset:focus-visible { background: var(--lc-accent); color: #fff; }
.lc-preset:hover .lc-preset__x,
.lc-preset:focus-visible .lc-preset__x { color: #fff; }