/* Lodge-overzicht (/lodges/). Laadt alleen op die pagina, na site.css.

   Herontwerp 1 oktober 2026. Wat Mitchel vroeg: de breedte van het scherm
   gebruiken, de lodges visueler, en minder ruimte voor de filters. Dus:
   - een brede container van 1440 pixel (sinds 2 oktober 2026 de maat van de
     hele site, zie --wrap in site.css);
   - een titelband van één regel in plaats van een vol scherm;
   - de filters als pillen in een balk die onder de kop blijft plakken, en op
     een telefoon als onderlade achter één knop;
   - een raster van vier, drie, twee of één kolom, met de foto bovenaan in 3:2.

   Rustronde 2 oktober 2026: "Dit voelt nu heel druk. Mag wat meer rust in
   komen. Qua kleuren etc." Vergelijking: Airbnb en Booking. De regels sinds
   die dag:
   - één ondergrond: kop en filterbalk staan op bone, zonder zandband; alleen
     een haarlijn (inkt op 12%) scheidt de plakkende balk van het raster;
   - terracotta alleen voor echte acties (de knop in de sitekop, "Show N
     places" in de onderlade, "Compare side by side"); links en "Read more"
     in olijf of grijs met onderstreping;
   - pillen bone met een haarlijn, gekozen is olijf met bone tekst; actieve
     filters lichtzand met inkt;
   - kaarten zonder kader, schaduw of gekleurde badges: foto, naam, één grijze
     regel (prijsklasse, ligging, eigenaar), beschrijving, prijs.

   Wijzig je het aantal kolommen of de tussenruimte van het raster, pas dan ook
   de sizes van de kaartfoto in templates/lodges.html aan: die vertelt de
   browser hoe breed een kaart wordt, zodat hij de juiste WebP-breedte kiest. */

:root {
  --wrap-wide: var(--wrap);           /* sinds 2 okt 2026 gelijk aan de site */
  --bar-top: 68px;                    /* hoogte van de plakkende sitekop */
  --hair: rgba(38,41,28,.12);         /* inkt op 12%: de enige scheidslijn */
  --hair-strong: rgba(38,41,28,.32);  /* dezelfde lijn bij hover */
  --line: var(--hair);
  --chip: #EFE6D2;                    /* lichtzand voor actieve filters */
}

.lodges-wrap { max-width: var(--wrap-wide); margin-inline: auto; padding-inline: 24px; }
/* Sitekop en kruimelpad hadden hier een eigen bredere maat. Sinds 2 oktober
   2026 is 1440 de breedte van de hele site (--wrap in site.css) en lijnen ze
   vanzelf uit met het raster. */

/* Links op deze pagina: olijf of grijs, onderstreept, nooit terracotta. */
.clamp-more, .filter-more, .filter-clear, .filter-clear-all, .unchecked-toggle {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--font-ui); font-weight: 600; color: var(--olive-800);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: rgba(71,85,43,.45);
}
.clamp-more:hover, .filter-more:hover, .filter-clear:hover,
.filter-clear-all:hover, .unchecked-toggle:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ---- Kop ----------------------------------------------------------------- */
.lodges-head { padding-block: 20px 18px; }
.lodges-title {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 14px; row-gap: 2px;
}
.lodges-title h1 {
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem); font-weight: 700;
  line-height: 1.15; letter-spacing: -.01em; margin: 0;
}
.lodges-total {
  margin: 0; white-space: nowrap;
  font: 500 .95rem/1.4 var(--font-ui); color: var(--ink-soft);
}
.lodges-lede { margin-top: 6px; max-width: 1240px; }
.lodges-lede .lede { font-size: 1rem; line-height: 1.6; color: var(--ink-soft); max-width: none; margin: 0; }

/* Eén regel (op een telefoon twee) met "Read more" erachter als de tekst niet
   past. De knop verbergt zich als alles al zichtbaar is (lodges-filter.js). */
.clamp { display: flex; align-items: flex-start; gap: 4px 12px; }
.clamp-text {
  flex: 1 1 auto; min-width: 0; margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--clamp-lines, 1); line-clamp: var(--clamp-lines, 1);
  overflow: hidden;
}
.clamp.is-open .clamp-text { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
.clamp-more { flex: none; font-size: .875rem; line-height: 1.6rem; white-space: nowrap; }

/* ---- Filterbalk ---------------------------------------------------------- */
.lodges-bar {
  position: sticky; top: var(--bar-top); z-index: 40;
  background: var(--bone); border-bottom: 1px solid var(--hair);
}
.lodges-bar.is-sheet-open { z-index: 60; }
.lodges-bar-inner {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 14px; padding-block: 12px;
}
.filter-bar { display: flex; flex: 0 1 auto; min-width: 0; margin: 0; }
.fsheet-body { display: flex; flex-wrap: wrap; gap: 8px; }
.fsheet-head, .fsheet-foot, .filter-open, .filter-scrim { display: none; }

.fgroup { position: relative; }
.fpill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px 0 16px; cursor: pointer;
  font: 500 .92rem/1 var(--font-ui); color: var(--ink);
  background: var(--bone); border: 1px solid var(--hair); border-radius: 999px;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.fpill:hover { border-color: var(--hair-strong); }
.fpill[aria-expanded="true"] { border-color: var(--ink); }
.fpill.is-active { background: var(--olive-800); border-color: var(--olive-800); color: var(--bone); }
.fpill-caret { flex: none; opacity: .7; transition: transform .15s ease; }
.fpill[aria-expanded="true"] .fpill-caret { transform: rotate(180deg); }
.fpill-n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: var(--bone); color: var(--olive-950); font-size: .74rem; font-weight: 700;
}

/* Het uitklappaneel onder een pil: wit, zoals een keuzelijst. */
.fpanel {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 2;
  width: 320px; max-width: calc(100vw - 32px); min-width: 0;
  margin: 0; padding: 4px 18px 14px; border: 0;
  background: #fff; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(28,34,16,.14), 0 0 0 1px var(--hair);
}
.fgroup.is-open .fpanel { display: block; }
.fpanel-wide { width: 500px; }
.fpanel-wide .frows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.fpanel legend {
  float: left; width: 100%; padding: 14px 0 6px;
  font: 600 .9rem/1.3 var(--font-ui); color: var(--ink);
}
.fpanel legend + * { clear: both; }

.filter-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--font-ui); font-size: .94rem; font-weight: 400; line-height: 1.3;
  padding: 7px 8px; margin: 0 -8px; border-radius: 8px;
  transition: background .12s ease;
}
.filter-row:hover { background: var(--bone); }
.filter-row input { accent-color: var(--olive-800); width: 18px; height: 18px; flex: none; margin: 0; cursor: inherit; }
.filter-label { flex: 1; min-width: 0; }
.filter-tally {
  font-family: var(--font-ui); font-size: .8rem; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--ink-soft); flex: none;
}
.filter-row.is-empty, .filter-row.is-zero { opacity: .4; }
.filter-row.is-empty { cursor: not-allowed; }
.filter-why {
  font-size: .82rem; color: var(--ink-soft); line-height: 1.45;
  border-left: 1px solid var(--hair-strong); padding-left: 10px; margin: 4px 0 8px 28px;
}
/* Uitleg die altijd zichtbaar is, niet alleen bij een leeg filter. */
.filter-why-always { color: var(--ink-soft); font-size: .82rem; line-height: 1.45; margin: 10px 0 2px; }
.filter-more { display: none; padding: 6px 0 2px; font-size: .88rem; }
.filter-source {
  font-size: .78rem; line-height: 1.5; color: var(--ink-soft);
  border-top: 1px solid var(--hair); padding-top: 10px; margin: 10px 0 0;
}

/* Aantal en sortering horen bij elkaar: past de balk niet op één regel, dan
   zakken ze samen naar rechts op de tweede regel. */
.bar-tools { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.results-count {
  margin: 0; white-space: nowrap;
  font: 500 .9rem/1.2 var(--font-ui); color: var(--ink-soft);
}
.results-sort {
  display: flex; align-items: center; gap: 8px; position: relative;
  font-family: var(--font-ui); font-size: .88rem; color: var(--ink-soft);
}
.results-sort select {
  height: 40px; padding: 0 36px 0 14px; cursor: pointer;
  font: 500 .9rem var(--font-ui); color: var(--ink);
  background: var(--bone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2326291C' stroke-opacity='.7' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--hair); border-radius: 999px;
  -webkit-appearance: none; appearance: none;
}
.results-sort select:hover { border-color: var(--hair-strong); }

/* Op een middelgroot scherm past "Sort" er niet meer bij; de select houdt
   zijn label voor schermlezers. */
@media (min-width: 900px) and (max-width: 1199px) {
  .results-sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fsheet-body { gap: 6px; }
  .fpill { gap: 6px; padding: 0 11px 0 13px; }
}

/* ---- Actieve filters en meldingen --------------------------------------- */
/* 40 pixel tussen de filterbalk en het raster. Staan er actieve filters of
   een melding, dan komen die in die ruimte en schuift het raster mee. */
.lodges-results { padding-block: 40px 80px; }
.active-filters:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -12px 0 24px; }
.active-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--font-ui); font-size: .85rem; font-weight: 500;
  background: var(--chip); color: var(--ink); border: 0;
  border-radius: 999px; padding: 6px 12px;
  transition: background .12s ease;
}
.active-chip:hover { background: var(--sand); }
.active-chip span { font-size: 1rem; line-height: 1; color: var(--ink-soft); }
.filter-clear-all { padding: 4px 6px; font-size: .85rem; color: var(--ink-soft); text-decoration-color: rgba(90,93,76,.45); }
.unchecked-note:not([hidden]) {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: -12px 0 24px; font-family: var(--font-ui); font-size: .9rem; color: var(--ink-soft);
}
.active-filters:not([hidden]) + .unchecked-note:not([hidden]) { margin-top: -12px; }
.unchecked-toggle { font-size: .88rem; }

/* ---- Raster en kaarten --------------------------------------------------- */
.lodge-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 32px 20px;
}
@media (min-width: 600px) { .lodge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .lodge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .lodge-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; } }

/* Geen kader en geen schaduw: de foto is de kaart, de tekst staat er los
   onder op de ondergrond, zoals bij Airbnb. */
.lodge-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.lodge-visual {
  display: block; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: 12px; background: var(--sand);
}
.lodge-visual picture { display: contents; }
.lodge-visual img, .lodge-visual svg {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.lodge-visual img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) {
  .lodge-card:hover .lodge-visual img { transform: scale(1.02); }
}

.lodge-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 12px 2px 0; }
.lodge-card h2 {
  font: 600 1.05rem/1.3 var(--font-display); letter-spacing: 0; margin: 0; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.lodge-card h2 a { color: inherit; text-decoration: none; }
.lodge-card h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lodge-meta {
  margin: 2px 0 0; color: var(--ink-soft);
  font: 400 .875rem/1.45 var(--font-ui);
}
/* Waar de kaarten smal zijn (tussen 600 en 1440 pixel is een kaart 266 tot
   312 pixel breed) één maat kleiner, zodat "High-end · Inside the park ·
   Safari company" op één regel blijft. Alleen de regels met "unconfirmed"
   lopen dan nog door naar een tweede regel. */
@media (min-width: 600px) and (max-width: 1439px) { .lodge-meta { font-size: .8125rem; } }
.lodge-desc {
  margin: 6px 0 0; font-size: .9rem; line-height: 1.5; color: var(--ink-soft);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* De prijsregel staat altijd onderaan, zodat de prijzen in een rij op één
   hoogte staan. Daaronder het seizoen, klein en op één regel, met rechts het
   vinkje om te vergelijken. Geen scheidslijn. */
.lodge-card-foot { margin-top: auto; padding-top: 10px; }
.lodge-price {
  margin: 0; font: 600 1rem/1.35 var(--font-ui); color: var(--ink);
}
.lodge-price small { font-weight: 400; font-size: .85rem; color: var(--ink-soft); }
.lodge-foot-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 1.4rem;
}
.lodge-open {
  min-width: 0; font-family: var(--font-ui); font-size: .8rem; line-height: 1.4; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lodge-card-bk { margin: auto 0 0; padding-top: 10px; font-size: .78rem; line-height: 1.4; }
.lodge-card-bk + .lodge-card-foot { margin-top: 0; padding-top: 4px; }
.lodge-card-bk a {
  font-family: var(--font-ui); color: var(--ink-soft);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.lodge-card-bk a:hover { color: var(--ink); }

/* Vergelijken: klein en grijs, rechts op de seizoensregel. Met een muis verschijnt het
   bij hover of focus, en blijft het staan zodra je iets aanvinkt; op een
   touchscreen staat het er altijd. */
.lodge-compare {
  flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 2px 0; margin-left: auto;
  font: 500 .8rem/1 var(--font-ui); color: var(--ink-soft);
  transition: opacity .15s ease, color .12s ease;
}
.lodge-compare:hover { color: var(--ink); }
.lodge-compare input { width: 15px; height: 15px; margin: 0; accent-color: var(--olive-800); cursor: pointer; }
.lodge-compare:has(input:checked) { color: var(--olive-800); font-weight: 600; }
.lodge-compare:has(input:focus-visible) { outline: 3px solid var(--terracotta); outline-offset: 2px; border-radius: 4px; }
.lodge-compare.is-blocked { opacity: .45; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .lodge-compare { opacity: 0; }
  .lodge-card:hover .lodge-compare,
  .lodge-card:focus-within .lodge-compare,
  .lodge-grid:has(.cmp-box:checked) .lodge-compare { opacity: 1; }
  .lodge-grid:has(.cmp-box:checked) .lodge-compare.is-blocked { opacity: .45; }
}

/* ---- Goed om te weten: het korte antwoord en het eigendomsverhaal -------- */
.lodges-about {
  margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--hair);
}
.lodges-about h2 { font-size: 1.35rem; font-weight: 700; margin: 0 0 14px; }
.lodges-about p { max-width: 70ch; margin: 0 0 14px; font-size: 1rem; line-height: 1.7; color: var(--ink); }
.lodges-small { margin-top: 32px; max-width: 90ch; }
.lodges-about + .lodges-small { margin-top: 28px; }
.lodges-small p { font-size: .85rem; line-height: 1.6; }
.lodges-small p:first-child { margin-top: 0; }

/* ---- Vergelijken: balk en venster ---------------------------------------- */
/* De balk komt pas in beeld als er iets gekozen is, en blijft onderin staan. */
.cmp-bar { position: sticky; bottom: 14px; z-index: 20; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 12px;
  background: var(--olive-950); color: var(--bone); border-radius: 12px;
  padding: 14px 18px; margin: 24px 0 0; box-shadow: 0 8px 24px rgba(28,34,16,.22); }
.cmp-count { margin: 0; font-family: var(--font-ui); font-size: .92rem; }
.cmp-actions { display: flex; align-items: center; gap: 12px; }
.cmp-actions .btn { padding: 9px 16px; font-size: .88rem; }
/* .btn is gemaakt voor links; op een <button> blijft anders de standaardrand
   van de browser staan (2px outset). */
.cmp-actions .btn, .fsheet-apply { border: 0; cursor: pointer; }
.cmp-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.cmp-clear { background: none; border: 0; color: rgba(246,240,226,.75); cursor: pointer;
  font-family: var(--font-ui); font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }

.cmp-dialog { border: 0; border-radius: 12px; padding: 0; max-width: min(96vw, 1000px);
  background: var(--bone); color: var(--ink); }
.cmp-dialog::backdrop { background: rgba(20,24,12,.6); }
.cmp-dialog-head { display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 12px; }
.cmp-dialog-head h2 { margin: 0; font-size: 1.35rem; }
.cmp-close { background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer;
  color: var(--ink-soft); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cmp-table th, .cmp-table td { padding: 11px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--hair); }
.cmp-table thead th { font-family: var(--font-display); font-size: 1rem; }
.cmp-table thead a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cmp-table tbody th { font-family: var(--font-ui); font-size: .85rem; font-weight: 600;
  color: var(--ink-soft); white-space: nowrap; width: 1%; }
.cmp-blank { color: var(--ink-soft); font-style: italic; }

/* ---- Telefoon en tablet: één knop, filters in een onderlade -------------- */
@media (max-width: 899px) {
  .lodges-head { padding-block: 16px 14px; }
  .lodges-lede { --clamp-lines: 2; --clamp-bg: var(--bone); }
  .lodges-lede .lede { font-size: .95rem; line-height: 1.55; }
  /* Op een smal scherm kost een knop naast de tekst te veel breedte. Dan
     staat "Read more" over het eind van de laatste regel, met een vervaging. */
  .clamp { position: relative; }
  .clamp:not(.is-open) .clamp-more {
    position: absolute; right: var(--clamp-r, 0); bottom: var(--clamp-b, 0);
    padding-left: 2.6em;
    background: linear-gradient(90deg, rgba(246,240,226,0), var(--clamp-bg) 2.2em);
  }

  .lodges-bar-inner { flex-wrap: nowrap; gap: 8px; padding-block: 10px; }
  .bar-tools { display: contents; }
  .filter-open {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    height: 40px; padding: 0 16px; cursor: pointer;
    font: 500 .92rem/1 var(--font-ui); color: var(--ink);
    background: var(--bone); border: 1px solid var(--hair); border-radius: 999px;
  }
  .filter-open-tally {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    display: inline-grid; place-items: center;
    background: var(--olive-800); color: var(--bone); font-size: .74rem; font-weight: 700;
  }
  .filter-open-tally[hidden] { display: none; }

  /* De sorteerkeuze als pil; de echte select ligt er onzichtbaar overheen,
     zodat de telefoon zijn eigen keuzelijst opent. */
  .results-sort {
    order: 2; flex: none; height: 40px; padding: 0 14px;
    background: var(--bone); border: 1px solid var(--hair); border-radius: 999px;
    font-weight: 500; font-size: .92rem; color: var(--ink);
  }
  .results-sort::after {
    content: ""; width: 12px; height: 12px; opacity: .7;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2326291C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  .results-sort.is-active { background: var(--olive-800); border-color: var(--olive-800); color: var(--bone); }
  .results-sort.is-active::after { filter: invert(1); opacity: .9; }
  .results-sort:focus-within { outline: 3px solid var(--terracotta); outline-offset: 2px; }
  .results-sort select {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; font-size: 16px; border: 0;
  }
  .results-count { order: 3; margin-left: auto; font-size: .85rem; }

  .filter-scrim:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 1;
    background: rgba(20,24,12,.5);
  }
  .filter-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
    flex-direction: column; max-height: 88vh; max-height: 88dvh;
    background: var(--bone); border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgba(20,24,12,.22);
    transform: translateY(100%); visibility: hidden;
    transition: transform .28s cubic-bezier(.2,.7,.2,1), visibility 0s linear .28s;
  }
  .filter-bar.is-open {
    transform: none; visibility: visible;
    transition: transform .28s cubic-bezier(.2,.7,.2,1);
  }
  .fsheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 12px 10px 20px; border-bottom: 1px solid var(--hair);
  }
  .fsheet-title { margin: 0; font-size: 1.15rem; }
  .fsheet-close {
    width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
    background: none; color: var(--ink-soft); font-size: 1.8rem; line-height: 1;
  }
  .fsheet-close:hover { background: var(--chip); color: var(--ink); }
  .fsheet-body {
    display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto;
    overscroll-behavior: contain; padding: 0 20px 10px;
  }
  .fsheet-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--hair); background: var(--bone);
  }
  .filter-clear { padding: 8px 4px; font-size: .95rem; }
  .filter-clear:disabled { color: var(--ink-soft); opacity: .5; cursor: default; text-decoration: none; }
  .fsheet-apply { padding: 12px 22px; }
  .fsheet-apply:hover { transform: none; }

  .fpill { display: none; }
  .fgroup { position: static; border-bottom: 1px solid var(--hair); }
  .fgroup:last-child { border-bottom: 0; }
  .fpanel, .fpanel-wide {
    display: block; position: static; width: auto; max-width: none;
    padding: 0 0 14px; background: none; border-radius: 0; box-shadow: none;
  }
  .fpanel legend { padding: 16px 0 6px; font-size: .95rem; }
  .fpanel-wide .frows { display: block; }
  .filter-row { padding: 9px 8px; font-size: 1rem; }
  .filter-row:hover { background: var(--chip); }
  .filter-row input { width: 20px; height: 20px; }
  .filter-group.is-collapsed .filter-row:nth-of-type(n+7) { display: none; }
  .filter-more { display: inline-block; }

  .lodges-results { padding-top: 28px; }
  .active-filters:not([hidden]), .unchecked-note:not([hidden]) { margin-top: -8px; margin-bottom: 20px; }
  .lodges-about { margin-top: 48px; padding-top: 28px; }
}
html.fsheet-lock { overflow: hidden; }

@media (max-width: 420px) {
  .lodges-bar-inner { gap: 6px; }
  .filter-open, .results-sort { padding-inline: 13px; }
}