/* homes.css: Homes mode of the malta.com map (property listings from the island's agencies), the page's default view.
   Loaded from index.html; every rule is .hm-* or scoped to .stage.homes / html.homes so Places mode keeps its look.
   Same system as the page: white glass, red accent, ink text, Geist for UI, Fraunces for the listing title. */

/* the controls are buttons, not text: a drag across them selects nothing */
.hm-sw,.hm-top,.hm-pick-bg,.hm-head,.hm-dhead,.row2 .isl{-webkit-user-select:none;user-select:none}

/* ---------- Places mode: the quiet Homes pill at the top-left of the map, under the island row ---------- */
.hm-sw{position:absolute;z-index:6;left:9px;top:55px;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px 0 11px;border-radius:999px;font:600 14px/1 var(--ff-ui);color:var(--ink);white-space:nowrap;transition:opacity .3s ease}
.hm-sw[hidden]{display:none}
.hm-sw .ic{width:15px;height:15px;color:var(--red)}
.stage.touring .hm-sw{opacity:0;pointer-events:none}
.stage.homes .tour-btn{display:none}

/* ---------- Homes mode: the map card is shorter on phones (the results sheet sits under it) and nothing sits
   between the map and the Instagram section; the map controls step aside while the sheet is up ---------- */
@media (max-width:899px){
  html.homes .stage{height:clamp(300px,56vh,760px);height:clamp(300px,56svh,760px)}
  html.homes.lock .stage .ctrls,html.homes.lock .stage .info-pop{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
}
html.homes .bottom{display:none}
@media (max-width:379px){.hm-pills{gap:5px}.hm-pill{padding:0 10px}.hm-pill[data-pill=more] .ic:not(.ar){display:none}.hm-seg button{padding:0 11px}
  /* 360 px phones: "22,868 homes for sale" and the Sort pill share one row without the count being cut (two classes:
     the base rules further down would win over a single class) */
  .hm-head .hm-count{font-size:16px}.hm-head .hm-sort select{max-width:132px}}

/* ---------- the filter bar above the map card: Buy | Rent, the pills, Saved, the quiet Places pill. On phones two
   rows (the toggle and Places, then the pills scrolling sideways); on desktop one row ---------- */
.hm-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:8px;padding:2px 2px 8px}
.hm-top[hidden]{display:none}
.hm-bar{display:flex;align-items:center;gap:8px;min-width:0}
.hm-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;flex:none;height:40px;padding:3px;border-radius:999px;align-items:center;background:var(--soft);box-shadow:inset 0 0 0 1px var(--hair)}
/* the red knob slides between the two equal halves (Bean, 23 Oct 2026: a slide, not an instant switch) */
.hm-seg::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--red);box-shadow:0 2px 8px -3px rgba(163,14,34,.6);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.hm-seg:has(button:nth-child(2)[aria-pressed="true"])::before{transform:translateX(100%)}
@media (prefers-reduced-motion:reduce){.hm-seg::before{transition:none}}
.hm-seg button{position:relative;z-index:1;height:34px;padding:0 15px;border-radius:999px;font:500 14px/1 var(--ff-ui);color:var(--text-2);white-space:nowrap}
.hm-seg button[aria-pressed="true"]{color:#fff;font-weight:600}
.hm-places{grid-column:2;grid-row:1;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 11px;border-radius:999px;background:var(--soft);color:var(--text-2);font:500 14px/1 var(--ff-ui);white-space:nowrap}
.hm-places .ic{width:15px;height:15px;color:var(--red)}
.hm-pills{grid-column:1 / -1;grid-row:2;position:relative;z-index:3;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px 14px 18px;margin:-8px -14px -18px;-webkit-overflow-scrolling:touch}
.hm-pills::-webkit-scrollbar{display:none}
/* more pills to the right: the row fades at its edge */
.hm-pills.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 52px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 52px),transparent)}
.hm-pill{flex:none;position:relative;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:999px;font:500 14px/1 var(--ff-ui);color:var(--ink);white-space:nowrap;background:#fff;box-shadow:0 0 0 1px rgba(26,26,32,.14)}
.hm-pill .pb{display:inline-flex;align-items:center;gap:6px;height:100%;color:inherit;white-space:nowrap}
.hm-pill .pb::before{content:"";position:absolute;inset:-3px 0;border-radius:999px}
.hm-pill .ic{width:14px;height:14px;opacity:.5}
.hm-pill .ar{width:12px;height:12px;opacity:.5;margin-right:-4px}
.hm-pill.set{background:var(--ink);color:#fff;box-shadow:none}
.hm-pill.set .ic,.hm-pill.set .ar{opacity:.8}
.hm-pill .x{display:none;position:relative;width:26px;height:26px;margin:0 -8px 0 2px;border-radius:50%;place-items:center;background:rgba(255,255,255,.16);color:#fff}
.hm-pill .x .ic{width:12px;height:12px;opacity:1}
.hm-pill.set .x{display:grid}
.hm-pill.set .ar{display:none}
.hm-pill.open:not(.set){box-shadow:0 0 0 2px var(--ink)}
/* Saved: the heart fills once something is saved, the count beside it; pressed while the saved list shows */
.hm-saved .ic{color:var(--red);opacity:.9}
.hm-saved.has .ic{fill:var(--red)}
.hm-saved .n{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.hm-saved.set .ic{color:#fff;fill:#fff;opacity:1}
.hm-saved.set .n{color:rgba(255,255,255,.8)}
/* the keyboard ring goes round the pill, not round the text inside it */
@supports selector(:has(a)){
  .hm-pill .pb:focus-visible{outline:none}
  .hm-pill:has(.pb:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
}

/* ---------- the filter picker: a bottom sheet on phones, a popover under its pill on desktop ---------- */
.hm-pick-bg{position:fixed;inset:0;z-index:42;background:rgba(20,30,50,.12)}
.hm-pick-bg[hidden]{display:none}
.hm-pick{position:fixed;z-index:43;left:0;right:0;bottom:0;max-height:calc(100svh - 215px);display:flex;flex-direction:column;background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -18px 50px -12px rgba(20,30,50,.35);outline:none}
.hm-pick[hidden]{display:none}
.hm-pick:focus,.hm-pick:focus-visible,.hm-sheet:focus,.hm-sheet:focus-visible{outline:none}
.hm-pk-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 14px 6px 20px;font:600 18px/1.2 var(--ff-ui);letter-spacing:-.01em}
.hm-pk-h .sh-x{position:static;width:40px;height:40px;box-shadow:0 0 0 1px var(--hair)}
.hm-pk-b{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;min-height:0;padding:6px 20px 12px}
.hm-pk-f{display:flex;gap:8px;padding:10px 14px calc(12px + var(--sab));border-top:1px solid var(--hair);background:#fff}
.hm-pk-f .btn{flex:1;height:46px}
.hm-pk-f .btn.ghost{flex:0 0 auto;padding:0 18px}
.hm-h4{margin:12px 0 7px;font:600 12.5px/1.2 var(--ff-ui);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.hm-h4:first-child{margin-top:4px}
.hm-segrow{display:flex;gap:6px;flex-wrap:wrap}
.hm-segrow button{height:40px;min-width:54px;padding:0 14px;border-radius:999px;font:500 15px/1 var(--ff-ui);color:var(--ink);background:#fff;box-shadow:0 0 0 1px rgba(26,26,32,.14)}
.hm-segrow button[aria-pressed="true"]{background:var(--red);color:#fff;box-shadow:none}
.hm-chk{display:flex;flex-wrap:wrap;gap:6px}
.hm-chk button{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:999px;font:500 14px/1 var(--ff-ui);color:var(--ink);background:#fff;box-shadow:0 0 0 1px rgba(26,26,32,.14)}
.hm-chk button b{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.hm-chk button.zero{opacity:.5}
.hm-chk button[aria-pressed="true"]{background:var(--red);color:#fff;box-shadow:none}
.hm-chk button[aria-pressed="true"] b{color:rgba(255,255,255,.75)}
.hm-sel{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hm-sel label{display:block;font:500 12.5px/1.2 var(--ff-ui);color:var(--muted);margin:0 0 5px 2px}
.hm-sel select{width:100%;height:44px;border:0;border-radius:12px;padding:0 34px 0 12px;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center/14px;box-shadow:0 0 0 1px rgba(26,26,32,.14);font:500 15px/1 var(--ff-ui);color:var(--ink);-webkit-appearance:none;appearance:none}
.hm-search{position:relative;margin:2px 0 8px}
.hm-search input{width:100%;height:44px;border:0;border-radius:12px;padding:0 12px 0 40px;background:var(--soft);font:400 16px/1 var(--ff-ui);color:var(--ink);box-shadow:0 0 0 1px var(--hair)}
.hm-search input:focus{outline:none;box-shadow:0 0 0 2px var(--ink)}
.hm-search .ic{position:absolute;left:13px;top:12px;width:20px;height:20px;color:var(--muted);pointer-events:none}
.hm-locs{list-style:none;margin:0;padding:0}
.hm-locs li.none{padding:10px 2px;color:var(--muted);font-size:15px}
.hm-loc{display:flex;align-items:center;gap:10px;width:100%;height:44px;padding:0 4px 0 8px;border-radius:10px;font:400 15.5px/1 var(--ff-ui);color:var(--ink);text-align:left}
.hm-loc .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-loc .nm i{font-style:normal;color:var(--muted);font-size:13px;margin-left:6px}
.hm-loc b{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;font-size:14px}
.hm-loc .ck{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(26,26,32,.2);color:#fff}
.hm-loc .ck .ic{width:14px;height:14px;opacity:0}
.hm-loc[aria-pressed="true"]{background:var(--soft)}
.hm-loc[aria-pressed="true"] .ck{background:var(--red);box-shadow:none}
.hm-loc[aria-pressed="true"] .ck .ic{opacity:1}
.hm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:4px 0}
.hm-row .tx{font:500 15px/1.3 var(--ff-ui)}
.hm-row .tx small{display:block;font:400 13px/1.3 var(--ff-ui);color:var(--muted);margin-top:1px}
.hm-tog{flex:none;width:50px;height:30px;border-radius:999px;background:rgba(26,26,32,.14);position:relative;transition:background .2s}
.hm-tog::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.hm-tog[aria-pressed="true"]{background:var(--red)}
.hm-tog[aria-pressed="true"]::after{transform:translateX(20px)}
.hm-tog[disabled]{opacity:.4;cursor:default}

/* ---------- the results panel: a bottom sheet with three snap heights on phones (homes.js sets --hm-h; .off slides
   it away while the map card is scrolled out of view), the left panel on desktop ---------- */
.sheet.hm-sheet{z-index:40;height:var(--hm-h,220px);max-height:none;transition:transform .42s cubic-bezier(.2,.85,.25,1),visibility 0s linear .42s,height .34s cubic-bezier(.2,.85,.25,1)}
.sheet.hm-sheet.on{transition:transform .42s cubic-bezier(.2,.85,.25,1),visibility 0s,height .34s cubic-bezier(.2,.85,.25,1)}
.sheet.hm-sheet.on.off{transform:translateY(105%)}
.hm-sheet .sh-grab i{background:rgba(26,26,32,.18);box-shadow:none}
.hm-sheet .sh-body{display:flex;flex-direction:column;border-radius:0}
.hm-sheet.peek .sh-body{overflow:hidden}
.hm-head{flex:none;padding:24px 16px 10px;border-bottom:1px solid var(--hair)}
.hm-hrow{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px}
/* the count wraps to a second line when a town name makes it long ("8,201 homes to rent in Sliema") rather than cutting off */
.hm-count{margin:0;font:600 17px/1.2 var(--ff-ui);letter-spacing:-.01em;min-width:0;font-variant-numeric:tabular-nums}
.hm-count:focus{outline:none}
/* the failure line wraps (the sort is gone then) */
.hm-count.err{white-space:normal;font-size:16px}
.hm-sort{position:relative;flex:none;display:inline-flex;align-items:center;height:34px;border-radius:999px;background:var(--soft);color:var(--ink)}
.hm-sort select{height:34px;max-width:168px;padding:0 28px 0 12px;border:0;background:transparent;font:500 13.5px/1 var(--ff-ui);color:inherit;-webkit-appearance:none;appearance:none;cursor:pointer;text-overflow:ellipsis}
.hm-sort .ic{position:absolute;right:9px;top:10px;width:14px;height:14px;opacity:.6;pointer-events:none}
.hm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hm-chip{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 8px 0 11px;border-radius:999px;background:var(--ink);color:#fff;font:500 13.5px/1 var(--ff-ui)}
.hm-chip .ic{width:13px;height:13px;opacity:.8}
.hm-body{padding:10px 14px calc(16px + var(--sab))}
.hm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.hm-sheet.loading .hm-list{opacity:.55;transition:opacity .2s}
.hm-more-row{padding:14px 0 4px;text-align:center}
.hm-more-row .btn{width:100%;height:46px}
.hm-more-row .btn .n{font-weight:500;color:var(--muted);margin-left:6px}
.hm-empty{margin:4px 0 8px;padding:20px 16px;border-radius:14px;background:var(--soft);text-align:center;font:400 15px/1.45 var(--ff-ui);color:var(--text-2)}
.hm-empty b{display:block;font:600 17px/1.2 var(--ff-ui);color:var(--ink);margin-bottom:4px}
.hm-empty button{margin-top:10px;height:40px;padding:0 16px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(26,26,32,.14);font:600 14px/1 var(--ff-ui)}
.hm-line{margin:6px 2px 8px;font:400 15px/1.5 var(--ff-ui);color:var(--text-2)}
.hm-line button{height:30px;padding:0 12px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(26,26,32,.14);font:600 13.5px/1 var(--ff-ui);color:var(--ink);margin-left:4px;vertical-align:middle}
.hm-loading{padding:18px 20px;color:var(--muted);font-size:15px}

/* ---------- one card: the photo at 16:10 across the panel, the price bold, the facts, type and town, the agency,
   a heart; .compact puts the photo at the left (the peek sheet on phones, "More like this") ---------- */
.hcard{position:relative;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--hair),0 8px 20px -14px rgba(20,30,50,.35);transition:box-shadow .2s;color:var(--ink)}
.hcard .hc{display:block;width:100%;text-align:left;color:inherit}
.hcard .ph{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--soft-2) center/40px 40px no-repeat;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8B4AA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 11.2 12 4l8.5 7.2M5.5 9.6V20h13V9.6M10 20v-5.5h4V20'/></svg>")}
.hcard .ph img{display:block;width:100%;height:100%;object-fit:cover}
.hcard .ph.noimg img{display:none}
.bds{position:absolute;left:10px;top:10px;z-index:2;display:flex;gap:5px;pointer-events:none}
.bd{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:7px;font:600 11.5px/1 var(--ff-ui);letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.bd.st{color:var(--red)}
.bd.nw{background:var(--red);color:#fff}
.hcard .tx{display:flex;flex-direction:column;gap:3px;padding:11px 13px 12px}
.hcard .pr{font:600 19px/1.2 var(--ff-ui);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcard .fx{font:500 14.5px/1.3 var(--ff-ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* type, town and the agency badge: the badge drops under the type and town when the two will not share the line, so
   "Penthouse in St Julian's" is never cut short (the same rule as the pages' cards, site.css) */
.hcard .lo{display:flex;align-items:center;flex-wrap:wrap;gap:3px 8px;margin-top:2px;font:400 14px/1.3 var(--ff-ui);color:var(--muted);min-width:0}
.hcard .lo span{flex:1 1 auto;min-width:0}
.hcard .ag{flex:none;margin-left:auto;font:500 11.5px/1 var(--ff-ui);font-style:normal;letter-spacing:.02em;color:var(--text-2);padding:4px 7px;border-radius:6px;background:var(--soft)}
.hc-heart{position:absolute;right:10px;top:10px;z-index:2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.18);transition:transform .15s,color .15s}
.hc-heart .ic{width:18px;height:18px;transition:fill .15s}
.hc-heart[aria-pressed="true"]{color:var(--red)}
.hc-heart[aria-pressed="true"] .ic{fill:var(--red)}
.hc-heart:active{transform:scale(.88)}
.hcard.sel{box-shadow:0 0 0 2px var(--red),0 12px 24px -12px rgba(20,30,50,.4)}
/* the home just closed: Back lands on it, lightly marked */
.hcard.was{box-shadow:0 0 0 2px rgba(207,20,43,.4),0 8px 20px -14px rgba(20,30,50,.35)}
/* hovered from its bubble on the map, or picked by a bubble tap on a phone: the same red ring as the open home */
.hcard.hov,.hcard.pick{box-shadow:0 0 0 2px var(--red),0 12px 24px -12px rgba(20,30,50,.4)}
/* the keyboard ring on a card: the card clips its content (rounded corners), so the ring is the card's own shadow */
.hcard .hc:focus-visible{outline-offset:-4px;border-radius:16px}
@supports selector(:has(a)){
  .hcard .hc:focus-visible{outline:none}
  .hcard:has(.hc:focus-visible){box-shadow:0 0 0 3px var(--focus),0 8px 20px -14px rgba(20,30,50,.35)}
}
/* compact cards: the type and town stay on one line of their own */
.hcard.compact .lo span{white-space:nowrap}
.hcard.compact .hc,.hm-sheet.peek .hm-body>.hm-list>li>.hcard .hc{display:flex;min-height:96px}
.hcard.compact .ph,.hm-sheet.peek .hm-body>.hm-list>li>.hcard .ph{flex:none;width:124px;height:auto;min-height:96px;aspect-ratio:auto}
.hcard.compact .tx,.hm-sheet.peek .hm-body>.hm-list>li>.hcard .tx{flex:1;min-width:0;justify-content:center;gap:2px;padding:8px 12px}
.hcard.compact .pr,.hm-sheet.peek .hm-body>.hm-list>li>.hcard .pr{font-size:16px}
.hcard.compact .fx,.hm-sheet.peek .hm-body>.hm-list>li>.hcard .fx{font-size:13.5px}
.hcard.compact .lo,.hm-sheet.peek .hm-body>.hm-list>li>.hcard .lo{font-size:13px}
.hcard.compact .bds,.hm-sheet.peek .hm-body>.hm-list>li>.hcard .bds{left:6px;top:6px}
.hcard.compact .bd,.hm-sheet.peek .hm-body>.hm-list>li>.hcard .bd{height:20px;padding:0 6px;font-size:10px}
.hcard.compact .hc-heart,.hm-sheet.peek .hm-body>.hm-list>li>.hcard .hc-heart{width:30px;height:30px;right:8px;top:8px}
.hcard.compact .hc-heart .ic,.hm-sheet.peek .hm-body>.hm-list>li>.hcard .hc-heart .ic{width:15px;height:15px}
/* skeleton cards while the first page loads */
.hm-skel{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--hair);padding:0 0 14px}
.hm-skel .ph{display:block;width:100%;aspect-ratio:16/10;background:var(--soft-2)}
.hm-skel .l{display:block;height:12px;border-radius:6px;background:var(--soft-2);margin:12px 13px 0}
.hm-skel .l1{width:42%;height:16px}.hm-skel .l2{width:64%}.hm-skel .l3{width:50%}
.hm-skel .ph,.hm-skel .l{animation:hm-pulse 1.4s ease-in-out infinite}
.hm-sheet.peek .hm-skel .ph{display:none}
@keyframes hm-pulse{0%,100%{opacity:1}50%{opacity:.5}}
@media (hover:hover){
  .hcard:hover{box-shadow:0 0 0 1px var(--hair),0 14px 28px -14px rgba(20,30,50,.45)}
  .hcard.sel:hover{box-shadow:0 0 0 2px var(--red),0 14px 28px -14px rgba(20,30,50,.45)}
  .hm-pill,.hm-sw,.hm-seg button,.hm-places,.hm-loc,.hm-segrow button,.hm-chk button,.hm-chip,.hc-heart,.hm-back,.hm-thumbs button{transition:background-color .15s,box-shadow .15s,color .15s,opacity .15s,transform .15s}
  .hm-pill:not(.set):hover,.hm-places:hover{background:#fff;box-shadow:0 0 0 1px rgba(26,26,32,.14),0 3px 8px -2px rgba(20,30,50,.22),0 12px 26px -12px rgba(20,30,50,.32);color:var(--ink)}
  .hm-pill .x:hover{background:rgba(255,255,255,.3)}
  .hm-sw:hover{background:#fff}
  .hm-seg button:not([aria-pressed="true"]):hover{color:var(--ink)}
  .hm-loc:not([aria-pressed="true"]):hover{background:var(--soft)}
  .hm-segrow button:not([aria-pressed="true"]):hover,.hm-chk button:not([aria-pressed="true"]):hover{box-shadow:0 0 0 1px rgba(26,26,32,.3)}
  .hm-chip:hover{background:#000}
  .hc-heart:hover{transform:scale(1.06)}
  .hm-back:hover,.hm-arr:hover{background:#fff}
  .hm-thumbs button:hover{opacity:1}
}

/* ---------- the map tiers (homes.js): the town discs and the cluster pills are map layers; a home's bubble (tier 4,
   30 homes or fewer in view) is a DOM marker: a white pill with the home's photo as a round thumb at the left and the
   price short form at the right, a 2 px red ring and red text when selected, the ring alone on hover (from its card
   too); 2 px smaller on phones. The tooltip over a cluster pill is desktop only ---------- */
.hm-mk{position:absolute;top:0;left:0;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 2px;margin:0;border:0;border-radius:999px;background:#fff;color:var(--ink);
  font:600 13px/1 var(--ff-ui);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transition:opacity .15s,box-shadow .15s,color .15s;
  box-shadow:0 0 0 1px rgba(26,26,32,.12),0 3px 8px -2px rgba(10,20,40,.4);-webkit-tap-highlight-color:transparent}
.hm-mk .th{flex:none;width:28px;height:28px;border-radius:50%;overflow:hidden;background:var(--soft-2) center/15px 15px no-repeat;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8B4AA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 11.2 12 4l8.5 7.2M5.5 9.6V20h13V9.6M10 20v-5.5h4V20'/></svg>")}
.hm-mk .th img{display:block;width:100%;height:100%;object-fit:cover}
.hm-mk:hover,.hm-mk.hov{box-shadow:0 0 0 2px var(--red),0 4px 12px -2px rgba(10,20,40,.45)}
.hm-mk.sel{color:var(--red);box-shadow:0 0 0 2px var(--red),0 4px 12px -2px rgba(10,20,40,.45)}
.hm-mk.dim{display:none}
.hm-mk.out{pointer-events:none}
.hm-mk:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hm-tip{position:absolute;left:0;top:0;z-index:7;padding:6px 9px;border-radius:8px;background:rgba(26,26,32,.92);color:#fff;font:500 12.5px/1.2 var(--ff-ui);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.hm-tip[hidden]{display:none}
@media (max-width:899px){.hm-mk{height:30px;font-size:12.5px;padding-right:9px}.hm-mk .th{width:26px;height:26px}}

/* ---------- listing detail: Back and the heart over a 4:3 hero, the "1 / 14" badge, the thumbs, then the facts, the
   walk and "More like this" ---------- */
.hm-dhead{position:absolute;z-index:4;left:10px;right:10px;top:10px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.hm-dhead>*{pointer-events:auto}
/* the hero scrolled away: Back and the heart on a white bar, never over the text */
.hm-sheet.scrolled .hm-dhead{left:0;right:0;top:0;padding:10px;background:#fff;box-shadow:0 1px 0 var(--hair)}
.hm-back{display:inline-flex;align-items:center;gap:3px;height:36px;padding:0 13px 0 8px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);font:600 14px/1 var(--ff-ui);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.hm-back .ic{width:16px;height:16px}
.hm-dhead .hc-heart{position:static}
.hm-sheet.photo .sh-grab i{background:rgba(255,255,255,.9);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.hm-strip{position:relative;flex:none;background:var(--soft-2)}
.hm-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:4/3;-webkit-overflow-scrolling:touch}
.hm-track::-webkit-scrollbar{display:none}
.hm-ph{flex:none;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;background:var(--soft-2);cursor:zoom-in}
.hm-ph img{display:block;width:100%;height:100%;object-fit:cover}
.hm-ph.noimg img{display:none}
.hm-track.noimg{background:var(--soft-2) center/48px 48px no-repeat;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8B4AA' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 11.2 12 4l8.5 7.2M5.5 9.6V20h13V9.6M10 20v-5.5h4V20'/></svg>")}
.hm-strip .bds{left:10px;top:auto;bottom:10px}
.hm-arr{display:none;position:absolute;z-index:3;top:50%;width:38px;height:38px;margin-top:-19px;border-radius:50%;place-items:center;background:rgba(255,255,255,.94);box-shadow:var(--shadow);color:var(--ink)}
.hm-arr.l{left:10px}.hm-arr.r{right:10px}
.hm-arr .ic{width:18px;height:18px}
.hm-n{position:absolute;right:10px;bottom:10px;padding:4px 8px;border-radius:8px;background:rgba(26,26,32,.6);color:#fff;font:500 12px/1.2 var(--ff-ui);font-variant-numeric:tabular-nums}
.hm-thumbs{flex:none;display:flex;gap:6px;padding:8px 14px 0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.hm-thumbs::-webkit-scrollbar{display:none}
.hm-thumbs button{flex:none;width:72px;height:48px;border-radius:8px;overflow:hidden;background:var(--soft-2);box-shadow:0 0 0 1px var(--hair);opacity:.72;scroll-snap-align:center}
.hm-thumbs button img{display:block;width:100%;height:100%;object-fit:cover}
.hm-thumbs button.on{opacity:1;box-shadow:0 0 0 2px var(--red)}
.hm-thumbs button.noimg{display:none}
.hm-in{padding:14px 20px 8px}
.hm-price{margin:0;font:600 27px/1.1 var(--ff-ui);letter-spacing:-.02em}
.hm-title{margin:8px 0 0;font:600 24px/1.12 var(--ff-display);letter-spacing:-.015em;font-variation-settings:"opsz" 72}
.hm-facts{margin:8px 0 0;font:500 15.5px/1.3 var(--ff-ui);color:var(--ink)}
.hm-where{margin:4px 0 0;font:400 14.5px/1.35 var(--ff-ui);color:var(--muted)}
.hm-where .hm-ref{margin-left:10px;white-space:nowrap}
.hm-feat{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.hm-feat li{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;background:var(--soft);font:500 13px/1 var(--ff-ui);color:var(--text-2)}
.hm-desc{margin:14px 0 0;font:400 16px/1.55 var(--ff-ui);color:#2C2C34;white-space:pre-line}
.hm-desc.fold{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hm-readmore{display:inline-block;margin:6px 0 0;font:600 14.5px/1.2 var(--ff-ui);color:var(--red)}
.hm-note{margin:14px 0 0;padding:11px 13px;border-radius:12px;background:var(--soft);box-shadow:0 0 0 1px var(--hair);font:400 14px/1.45 var(--ff-ui);color:var(--text-2)}
.hm-agency{margin:14px 0 0;font:400 14px/1.4 var(--ff-ui);color:var(--muted)}
.hm-agency b{font-weight:600;color:var(--ink)}
.hm-also{margin:4px 0 0;font:400 14px/1.4 var(--ff-ui);color:var(--muted)}
.hm-also a{color:var(--ink);font-weight:500;border-bottom:1px solid rgba(26,26,32,.25)}
/* the link to the home's own page (every photo, the mortgage estimate, share and print) */
.hm-full{margin:6px 0 0;font:500 14px/1.4 var(--ff-ui)}
.hm-full a{color:var(--red);border-bottom:1px solid rgba(207,20,43,.35)}
.hm-sheet .walk{margin:16px -20px 0;padding:16px 20px 2px;border-top:1px solid var(--hair)}
.hm-sheet .walk:empty{display:none}
.hm-sheet .walk .hm-note{margin:0}
.hm-like{margin:16px -20px 0;padding:16px 14px 6px;border-top:1px solid var(--hair)}
.hm-like[hidden]{display:none}
.hm-like h3{margin:0 0 10px 6px;font:600 17px/1.25 var(--ff-ui);letter-spacing:-.01em}
.hm-like .hm-list{gap:8px}

/* ---------- the 10-minute walk (walk.js, css: false): WALK_CSS copied from walk.js so the page carries it; the
   module injects its own copy only when no stylesheet styles .wk-rn ---------- */
.wk-dot{position:absolute;display:block;width:26px;height:26px;padding:0;margin:0;border:0;border-radius:50%;background:#fff;color:var(--c,#44444C);cursor:pointer;
  box-shadow:0 0 0 1px rgba(26,26,32,.1),0 2px 6px -1px rgba(10,20,40,.45);transition:box-shadow .15s;-webkit-tap-highlight-color:transparent}
/* position:absolute, never relative: MapLibre places a marker element with its own absolute position and an inline
   transform; a relative dot would sit in flow and be pushed down by every dot added before it */
.wk-dot.t1{width:30px;height:30px}
.wk-gy{display:grid;place-items:center}
.wk-dot .wk-gy{position:absolute;inset:0}
.wk-gy svg{display:block;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wk-dot.t1 .wk-gy svg{width:17px;height:17px}
.wk-dot img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.wk-rk{position:absolute;top:-6px;right:-7px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--red,#CF142B);color:#fff;
  font:700 10.5px/17px var(--ff-ui,"Geist",system-ui,sans-serif);text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 1.5px #fff;pointer-events:none}
.wk-dot.sel{z-index:32!important;box-shadow:0 0 0 2px #fff,0 0 0 4.5px var(--red,#CF142B),0 6px 14px -3px rgba(10,20,40,.5)}
.wk-home{z-index:31;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--red,#CF142B);display:grid;place-items:center;pointer-events:none;
  box-shadow:0 0 0 1px rgba(26,26,32,.12),0 4px 12px -3px rgba(10,20,40,.45)}
.wk-home svg{width:17px;height:17px;display:block}
.wk{font-family:var(--ff-ui,"Geist",system-ui,sans-serif);color:var(--ink,#1A1A20)}
.wk-h{margin:0;font:600 17px/1.25 var(--ff-ui,"Geist",system-ui,sans-serif);letter-spacing:-.01em}
.wk-from{margin:6px 0 0;font:400 14px/1.45 var(--ff-ui,"Geist",system-ui,sans-serif);color:var(--muted,#6E6E78)}
.wk-from b{font-weight:600;color:var(--ink,#1A1A20)}
.wk-reset{display:inline-flex;align-items:center;height:28px;margin-left:6px;padding:0 11px;border-radius:999px;background:#fff;color:var(--ink,#1A1A20);
  font:600 13px/1 var(--ff-ui,"Geist",system-ui,sans-serif);box-shadow:0 0 0 1px rgba(26,26,32,.14);vertical-align:middle;cursor:pointer;border:0}
.wk-state{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:var(--soft,#F4F1EA);font:400 14px/1.45 var(--ff-ui,"Geist",system-ui,sans-serif);color:var(--text-2,#44444C)}
.wk-state button{margin-left:8px;height:28px;padding:0 11px;border-radius:999px;border:0;background:#fff;box-shadow:0 0 0 1px rgba(26,26,32,.14);font:600 13px/1 inherit;cursor:pointer;color:inherit}
.wk-rows{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--hair,rgba(26,26,32,.09))}
.wk-row{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--hair,rgba(26,26,32,.09))}
.wk-row.sel{background:var(--soft,#F4F1EA);box-shadow:inset 3px 0 0 var(--red,#CF142B)}
.wk-rb{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:54px;padding:7px 4px 7px 6px;border:0;background:none;text-align:left;color:inherit;font:inherit;cursor:pointer;border-radius:10px;-webkit-tap-highlight-color:transparent}
.wk-rn{flex:none;width:22px;height:22px;border-radius:50%;background:var(--red,#CF142B);color:#fff;display:grid;place-items:center;font:700 12px/1 var(--ff-ui,"Geist",system-ui,sans-serif);font-variant-numeric:tabular-nums}
.wk-ph{flex:none;position:relative;width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--soft,#F4F1EA);color:var(--c,#44444C);display:grid;place-items:center;box-shadow:0 0 0 1px var(--hair,rgba(26,26,32,.09))}
.wk-ph .wk-gy svg{width:18px;height:18px}
.wk-ph img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.wk-ph.noimg img{display:none}
.wk-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wk-nm{font:600 15px/1.3 var(--ff-ui,"Geist",system-ui,sans-serif);color:var(--ink,#1A1A20);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.wk-meta{display:flex;flex-wrap:wrap;gap:0 10px;font:400 13px/1.4 var(--ff-ui,"Geist",system-ui,sans-serif);color:var(--muted,#6E6E78);font-variant-numeric:tabular-nums}
.wk-mp{white-space:nowrap}
.wk-meta b{font-weight:600;color:var(--ink,#1A1A20)}
.wk-star{display:inline-block;width:13px;height:13px;fill:#E8A317;vertical-align:-2px;margin-right:1px}
.wk-gm{flex:none;display:inline-flex;align-items:center;gap:4px;height:32px;margin-right:6px;padding:0 10px 0 11px;border-radius:999px;background:#fff;color:var(--ink,#1A1A20);
  font:600 13px/1 var(--ff-ui,"Geist",system-ui,sans-serif);box-shadow:0 0 0 1px rgba(26,26,32,.14);text-decoration:none;white-space:nowrap}
.wk-gm svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wk-also{margin:10px 0 0;font:400 13.5px/1.5 var(--ff-ui,"Geist",system-ui,sans-serif);color:var(--muted,#6E6E78)}
@media (hover:hover){.wk-rb:hover{background:var(--soft,#F4F1EA)}.wk-gm:hover{background:var(--soft,#F4F1EA)}.wk-dot:hover{box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(26,26,32,.25),0 4px 10px -2px rgba(10,20,40,.5)}}
.hm-sheet .sh-act .btn-red{min-width:0;max-width:60%}
.hm-sheet .sh-act .btn-red .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-sheet .sh-act .btn-red .ic{flex:none}
/* narrow panels (360 px phones, the 351 px desktop panel under 1024 wide): "View at <agency>" keeps its words, the
   share and prev / next buttons give up a little width and the icon goes */
@media (max-width:374px),(min-width:900px) and (max-width:1023px){
  .hm-sheet .sh-act{gap:6px}
  .hm-sheet .sh-act .btn-red{max-width:none;flex:1 1 auto;padding:0 12px;font-size:14.5px}
  .hm-sheet .sh-act .btn-red .ic{display:none}
  .hm-sheet .sh-act [data-act=share]{padding:0 12px}
  .hm-sheet .sh-act .sh-nav{gap:4px}
  .hm-sheet .sh-act .sh-nav button{width:40px;height:40px}
  .hm-head .hm-count{font-size:16px}.hm-head .hm-sort select{max-width:132px}
}

/* ---------- desktop ---------- */
@media (min-width:900px){
  .hm-sw{left:14px;top:14px;height:40px}
  .hm-top{display:flex;align-items:center;gap:10px;padding:4px 4px 10px}
  .hm-bar{flex:none}
  .hm-pills{flex:1;min-width:0;margin:-8px -8px -18px;padding:8px 8px 18px}
  .hm-pill{height:40px;padding:0 13px}
  .hm-pick-bg{display:none}
  /* the picker hangs under its pill inside the frame card, over the map (homes.js sets --px, --py and --pmax) */
  .hm-pick{position:absolute;left:var(--px,50%);top:var(--py,120px);right:auto;bottom:auto;width:360px;max-width:calc(100% - 16px);max-height:var(--pmax,70vh);border-radius:16px;box-shadow:0 0 0 1px rgba(26,26,32,.08),0 18px 44px -14px rgba(20,30,50,.4);z-index:8}
  .hm-pick.wide{width:400px}
  .hm-pk-h{padding:14px 12px 4px 18px;font-size:17px}
  .hm-pk-h .sh-x{width:36px;height:36px}
  .hm-pk-b{padding:4px 18px 10px}
  .hm-pk-f{padding:10px 12px 12px;border-radius:0 0 16px 16px}
  .hm-pk-f .btn{height:42px}
  /* the panel: the page's own desktop sheet rule places it on the left of the map; always open in Homes mode */
  .sheet.hm-sheet{height:auto;max-height:none}
  .hm-sheet .sh-grab{display:none}
  .hm-sheet .sh-body{border-radius:0 0 18px 18px}
  .hm-head{padding:14px 16px 10px;border-radius:18px 18px 0 0}
  .hm-body{padding:12px 14px 16px}
  .hm-arr{display:grid}
  .hm-dhead{left:12px;right:12px;top:12px}
  .hm-price{font-size:26px}
  .hm-title{font-size:23px}
  .hm-desc{font-size:15.5px}
}
@media (min-width:900px) and (max-height:820px){.hm-title{font-size:21px}.hm-desc{font-size:15px;line-height:1.5}}
@media (prefers-reduced-motion:reduce){.sheet.hm-sheet{transition-duration:.001s}.hm-skel .ph,.hm-skel .l{animation:none}}
/* ---------- embed mode: the home page's map teaser loads /buy?embed=1 in an iframe (index.html sets html.embed):
   the map alone, edge to edge, no chrome, no interaction (the iframe has pointer-events none) ---------- */
html.embed,html.embed body{background:#BFE3EC;overflow:hidden}
html.embed #topbar,html.embed .menu-bg,html.embed .menu-sheet,html.embed .pagehead,html.embed #hm-top,html.embed #hm-sheet,html.embed .ctrls,html.embed .row2,html.embed .bottom,html.embed .ig,html.embed .footer-lite,html.embed #hm-pick,html.embed #hm-pick-bg,html.embed #hm-places,html.embed .scrim,html.embed .toast,html.embed .info-pop,html.embed .cine-top,html.embed .tourcap,html.embed .isl-title{display:none!important}
html.embed .frame{padding:0!important;max-width:none!important}
html.embed .frame-card{padding:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
html.embed .stage{height:100vh!important;height:100svh!important;min-height:0!important;border-radius:0!important;box-shadow:none!important}
html.embed .map{border-radius:0!important}