/* ============================================================
   Laravel-only additions on top of site.css
   (real logo, compare tray, explore map, compare table, index page)
   ============================================================ */

/* ---------- real logo in place of the SVG mark ---------- */
.brand .brand__mark--img{
  /* higher specificity than .brand__mark so the 40x40 tile rules are fully overridden */
  width:auto;height:34px;min-width:0;flex-shrink:0;
  background:none;box-shadow:none;border-radius:0;
  display:inline-flex;align-items:center;
}
.brand .brand__mark--img img{
  height:34px;width:auto;max-height:34px;max-width:none;
  object-fit:contain;display:block;
}
.footer .brand .brand__mark--img,
.footer .brand .brand__mark--img img{height:30px;max-height:30px}

/* ---------- language / currency switches in the top bar ---------- */
.topbar__right{display:flex;align-items:center;gap:16px}
.switch{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:100px;overflow:hidden}
.switch__opt{
  padding:3px 11px;font-size:.72rem;font-weight:600;letter-spacing:.06em;
  background:#0a0904;color:var(--muted-2);transition:all .22s var(--ease);
}
.switch__opt:hover{color:var(--text)}
.switch__opt.is-active{background:var(--accent);color:#fff}
.mobile-menu__switches{display:flex;gap:12px;margin-top:26px}

/* ---------- fixed compare rail, right edge, vertically centred ---------- */
.railcompare{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:1000;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 10px;border-radius:14px 0 0 14px;
  background:var(--surface);border:1px solid var(--line);border-right:0;
  color:var(--muted);box-shadow:-6px 0 22px -12px #000;
  transition:background .28s var(--ease),color .28s var(--ease),padding .28s var(--ease);
}
.railcompare:hover{background:var(--accent);color:#fff;padding-left:14px;padding-right:14px}
.railcompare__label{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
}
.railcompare__count{
  min-width:20px;height:20px;padding:0 5px;border-radius:100px;
  background:var(--accent);color:#fff;font-size:.68rem;font-weight:700;
  display:grid;place-items:center;
}
.railcompare:hover .railcompare__count{background:rgba(0,0,0,.32)}
.railcompare__count[data-zero="1"]{display:none}

/* add-to-compare feedback: a "+1" lifting off the button, and a bump on the
   rail counter so the click reads even with the tray off-screen */
.cmp-plus{
  position:fixed;z-index:1200;pointer-events:none;
  transform:translate(-50%,0);white-space:nowrap;
  padding:4px 9px;border-radius:999px;
  background:var(--accent);color:#0e0d06;
  font-size:.72rem;font-weight:600;letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(0,0,0,.32);
  animation:cmpPlus .9s cubic-bezier(.22,.68,.36,1) forwards;
}
@keyframes cmpPlus{
  0%{opacity:0;transform:translate(-50%,4px) scale(.85)}
  18%{opacity:1;transform:translate(-50%,-6px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-42px) scale(.95)}
}
.railcompare.is-bump{animation:cmpBump .42s ease}
@keyframes cmpBump{
  0%,100%{transform:translateY(-50%) scale(1)}
  40%{transform:translateY(-50%) scale(1.13)}
}
@media (max-width:900px){
  /* the rail is not vertically centred at this size, so do not translate */
  .railcompare.is-bump{animation:cmpBumpFlat .42s ease}
  @keyframes cmpBumpFlat{0%,100%{transform:none}40%{transform:scale(1.13)}}
}
@media (prefers-reduced-motion:reduce){
  .cmp-plus,.railcompare.is-bump{animation-duration:.01s}
}

/* Sit above the back-to-top and WhatsApp buttons on small screens. */
@media(max-width:820px){
  .railcompare{top:auto;bottom:158px;transform:none;padding:11px 9px;border-radius:12px 0 0 12px}
  .railcompare__label{display:none}
}

/* ---------- standalone page hero ---------- */
.phero{
  padding:64px 0 44px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(148,108,43,.10),transparent);
}
.phero__title{font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.2;letter-spacing:-.03em;margin-bottom:16px}

/* ---------- compare button on cards ---------- */
.card__compare{
  position:absolute;top:14px;right:58px;z-index:2;width:36px;height:36px;border-radius:50%;
  background:rgba(14,13,6,.62);border:1px solid var(--line-strong);backdrop-filter:blur(8px);
  display:grid;place-items:center;cursor:pointer;color:var(--text);
  transition:all .28s var(--ease);
}
.card__compare:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.card__compare.is-on{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- compare tray ---------- */
.tray{
  position:fixed;left:0;right:0;bottom:0;z-index:130;
  background:rgba(20,20,19,.97);backdrop-filter:blur(18px);
  border-top:1px solid var(--accent-line);box-shadow:0 -18px 44px -24px #000;
  transform:translateY(100%);transition:transform .4s var(--ease);
}
.tray:not([hidden]){transform:translateY(0)}
.tray[hidden]{display:block !important;transform:translateY(100%);pointer-events:none}
.tray__inner{display:flex;align-items:center;gap:24px;padding:16px 24px;flex-wrap:wrap}
.tray__label{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:500;flex-shrink:0}
.tray__label small{display:block;font-size:.72rem;color:var(--muted-2);font-weight:400}
/* One row, scrolled — not wrapped.

   Wrapping grew the tray a line at a time, and at four slots on a narrow
   window it was tall enough to cover the header behind it. The tray is fixed
   to the bottom, so it has to stay a predictable height whatever is in it. */
.tray__slots{
  display:flex;gap:10px;flex:1;flex-wrap:nowrap;min-width:0;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:thin;padding-bottom:2px;
}
.tray__slot{
  position:relative;display:flex;align-items:center;gap:9px;padding:7px 30px 7px 8px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:.79rem;
  max-width:230px;flex-shrink:0;
}
.tray__slot img{width:34px;height:30px;object-fit:cover;border-radius:6px;flex-shrink:0}
/* A flex item will not shrink below its content without this, so the title
   pushed straight through the slot and the ellipsis never engaged. */
.tray__slot > div{min-width:0;overflow:hidden}
.tray__slot b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tray__slot span{display:block;color:var(--accent-soft);font-size:.73rem}
.tray__slot button{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);width:19px;height:19px;
  border:0;border-radius:50%;background:rgba(255,255,255,.09);color:var(--muted);
  cursor:pointer;display:grid;place-items:center;font-size:13px;line-height:1;
}
.tray__slot button:hover{background:var(--accent);color:#fff}
.tray__actions{display:flex;gap:10px;flex-shrink:0}
.tray__actions .btn{padding:11px 22px;font-size:.84rem}
@media(max-width:760px){
  .tray__inner{gap:14px;padding:14px 18px}
  .tray__label small{display:none}
  .tray__actions{width:100%}
  .tray__actions .btn{flex:1}
}

/* ============================================================
   EXPLORE PAGE
   ============================================================ */
.explore{display:grid;grid-template-columns:346px minmax(0,1fr);height:calc(100vh - 78px);overflow:hidden}

.explore__filters{
  border-right:1px solid var(--line);background:var(--surface);
  overflow-y:auto;padding:26px 24px 40px;
}
.explore__filters h2{font-size:1.1rem;margin-bottom:4px}
.explore__filters > p{font-size:.82rem;color:var(--muted-2);margin-bottom:22px}
.fgroup{margin-bottom:22px}
.fgroup > label,.fgroup__title{
  display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);font-weight:600;margin-bottom:9px;
}
.fgroup input[type="text"],.fgroup select{
  width:100%;background:#141413;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 13px;font-size:.88rem;outline:none;transition:border-color .25s;
}
.fgroup input[type="text"]:focus,.fgroup select:focus{border-color:var(--accent)}
.fgroup select{
  appearance:none;cursor:pointer;padding-right:32px;
  background:#141413 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23946c2b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center;
}
.fgroup select option{background:var(--surface)}

.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{
  padding:8px 15px;border:1px solid var(--line-strong);border-radius:100px;background:transparent;
  color:var(--muted);font-size:.8rem;cursor:pointer;transition:all .25s var(--ease);
}
.chip:hover{border-color:var(--accent-line);color:var(--text)}
.chip.is-active{background:var(--accent);border-color:var(--accent);color:#fff}

.frange output{float:right;color:var(--accent-soft);font-weight:500;font-size:.82rem}
.frange input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:100px;
  background:var(--line-strong);outline:none;cursor:pointer;margin-top:6px;
}
.frange input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:2px solid var(--ink);cursor:pointer;box-shadow:0 0 0 3px var(--accent-dim);
}
.frange input[type="range"]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--accent);
  border:2px solid var(--ink);cursor:pointer;box-shadow:0 0 0 3px var(--accent-dim);
}

.explore__reset{width:100%;margin-top:6px}

/* --- map + results --- */
.explore__main{display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;position:relative}
.explore__map{width:100%;height:100%;background:#101010}
.explore__bar{
  position:absolute;top:16px;left:16px;right:16px;z-index:500;
  display:flex;justify-content:space-between;align-items:center;gap:12px;pointer-events:none;
}
.explore__count{
  pointer-events:auto;padding:9px 17px;border-radius:100px;font-size:.83rem;
  background:rgba(14,13,6,.86);border:1px solid var(--line-strong);backdrop-filter:blur(10px);
}
.explore__count b{color:var(--accent-soft)}
.explore__toggle{
  pointer-events:auto;display:flex;gap:2px;padding:4px;border-radius:100px;
  background:rgba(14,13,6,.86);border:1px solid var(--line-strong);backdrop-filter:blur(10px);
}
.explore__toggle button{
  border:0;background:transparent;color:var(--muted);padding:7px 15px;border-radius:100px;
  font-size:.79rem;cursor:pointer;transition:all .25s;display:flex;align-items:center;gap:7px;
}
.explore__toggle button.is-active{background:var(--accent);color:#fff}

.explore__results{
  border-top:1px solid var(--line);background:var(--ink);
  max-height:262px;overflow-y:auto;padding:16px 18px;
}
.explore__results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px}
.rescard{
  display:flex;gap:11px;padding:9px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);cursor:pointer;transition:all .28s var(--ease);
}
/* display:flex above outranks the hidden attribute's UA rule, so a card
   filtered out by the map viewport would otherwise stay on screen. */
.rescard[hidden]{display:none}
.rescard:hover,.rescard.is-active{border-color:var(--accent);background:var(--surface-2)}
.rescard img{width:66px;height:56px;object-fit:cover;border-radius:7px;flex-shrink:0}
.rescard__body{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
.rescard__price{font-size:.88rem;font-weight:600;color:var(--accent-soft)}
.rescard__title{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rescard__meta{font-size:.72rem;color:var(--muted-2)}
.explore__empty{padding:34px;text-align:center;color:var(--muted-2);font-size:.88rem}

@media(max-width:960px){
  .explore{grid-template-columns:1fr;height:auto}
  .explore__filters{border-right:0;border-bottom:1px solid var(--line);max-height:none}
  .explore__main{height:auto}
  .explore__map{height:58vh}
  .explore__results{max-height:none}
}

/* --- leaflet skin --- */
.leaflet-container{background:#101010;font-family:inherit}
.leaflet-tile{filter:invert(1) hue-rotate(185deg) brightness(.86) contrast(.92) saturate(.4)}
.leaflet-control-zoom a{
  background:var(--surface) !important;color:var(--text) !important;
  border-color:var(--line) !important;
}
.leaflet-control-zoom a:hover{background:var(--accent) !important;color:#fff !important}
.leaflet-control-attribution{
  background:rgba(14,13,6,.8) !important;color:var(--muted-2) !important;font-size:10px !important;
}
.leaflet-control-attribution a{color:var(--muted) !important}

/* Price marker shaped like a map pin: bubble + pointer, tip on the coordinate. */
.pricepin-wrap{width:0 !important;height:0 !important}
.pricepin{
  position:absolute;left:0;bottom:0;transform:translate(-50%,0);
  display:flex;flex-direction:column;align-items:center;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
  cursor:pointer;
}
.pricepin__label{
  background:var(--accent);color:#fff;border-radius:100px;
  padding:6px 12px;font-size:.74rem;font-weight:700;letter-spacing:.01em;
  white-space:nowrap;border:2px solid rgba(255,255,255,.22);
  transition:background .2s var(--ease);
}
.pricepin__tail{
  width:0;height:0;margin-top:-1px;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:9px solid var(--accent);
  transition:border-top-color .2s var(--ease);
}
.pricepin:hover .pricepin__label,
.pricepin.is-active .pricepin__label{background:var(--accent-soft)}
.pricepin:hover .pricepin__tail,
.pricepin.is-active .pricepin__tail{border-top-color:var(--accent-soft)}
.pricepin:hover{z-index:600}

.leaflet-popup-content-wrapper{
  background:var(--surface);color:var(--text);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 26px 54px -22px rgba(0,0,0,.75);padding:0;overflow:hidden;
}
.leaflet-popup-content{margin:0;width:262px !important;line-height:inherit}
.leaflet-popup-tip{background:var(--surface);border:1px solid var(--line)}
.leaflet-popup-close-button{
  color:#fff !important;opacity:.85;z-index:3;
  width:26px !important;height:26px !important;
  top:9px !important;right:9px !important;padding:0 !important;
  border-radius:50%;background:rgba(14,13,6,.55) !important;backdrop-filter:blur(6px);
  display:grid !important;place-items:center;font-size:17px !important;line-height:1 !important;
}
.leaflet-popup-close-button:hover{background:var(--accent) !important;opacity:1}

.mappop__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.mappop__media img{width:100%;height:100%;object-fit:cover;display:block}
.mappop__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,13,6,.55),transparent 52%);
}
.mappop__status{
  position:absolute;left:10px;bottom:10px;z-index:2;
  padding:4px 11px;border-radius:100px;background:var(--accent);color:#fff;
  font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.mappop__body{padding:14px 15px 15px}
.mappop__price{font-size:1.08rem;font-weight:600;color:var(--accent-soft);letter-spacing:-.02em;line-height:1.2}
.mappop__title{
  font-size:.9rem;font-weight:500;margin:5px 0 3px;line-height:1.35;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mappop__loc{font-size:.76rem;color:var(--muted-2)}
.mappop__specs{
  display:flex;flex-wrap:wrap;gap:6px 0;margin:11px 0 13px;padding:0;list-style:none;
  font-size:.73rem;color:var(--muted);
}
.mappop__specs li{padding:0 9px;border-right:1px solid var(--line-strong);white-space:nowrap}
.mappop__specs li:first-child{padding-left:0}
.mappop__specs li:last-child{border-right:0}
.mappop__cta{width:100%;padding:10px;font-size:.8rem;font-weight:600;letter-spacing:.02em}

/* leaflet colours popup anchors blue — the CTA must stay legible on the accent */
.leaflet-popup-content a.btn,
.leaflet-popup-content a.btn:hover,
.leaflet-popup-content a.btn:focus{
  color:#fff !important;text-decoration:none !important;
  background:var(--accent);border-color:var(--accent);
}
.leaflet-popup-content a.btn:hover{background:var(--accent-soft);border-color:var(--accent-soft)}

/* ============================================================
   PROPERTY INDEX (search results)
   ============================================================ */
.plist{padding:44px 0 96px}
.plist__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.plist__bar{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:30px;
  padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
}
.plist__bar select,.plist__bar input{
  background:#141413;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 13px;font-size:.85rem;outline:none;min-width:132px;
}
.plist__bar select{
  appearance:none;cursor:pointer;padding-right:30px;
  background:#141413 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23946c2b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.plist__bar select option{background:var(--surface)}
.plist__bar .btn{margin-left:auto}
.plist__bar span[data-when]{display:contents}
/* display:contents above outranks the hidden attribute's UA rule */
.plist__bar span[data-when][hidden]{display:none}

/* advanced filters — a full-width row under the quick bar */
.advf{flex-basis:100%;border-top:1px solid var(--line);margin-top:4px;padding-top:12px}
.advf__toggle{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  font-size:.8rem;color:var(--muted);user-select:none;
}
.advf__toggle::-webkit-details-marker{display:none}
.advf__toggle:hover{color:var(--accent)}
.advf[open] .advf__toggle{color:var(--accent);margin-bottom:14px}
.advf__grid{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.advf__field{display:flex;flex-direction:column;gap:5px}
.advf__field > span{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.advf__field select,.advf__field input{width:100%;min-width:0}
.advf__field[hidden]{display:none}
.advf__actions{margin-top:14px}
.advf__clear{font-size:.78rem;color:var(--muted-2);text-decoration:underline}
.advf__clear:hover{color:var(--accent)}
.pagination-wrap{margin-top:48px;display:flex;justify-content:center}
.pagination-wrap nav{display:flex;gap:6px}
.pagination-wrap a,.pagination-wrap span{
  display:grid;place-items:center;min-width:38px;height:38px;padding:0 12px;
  border:1px solid var(--line-strong);border-radius:9px;font-size:.85rem;color:var(--muted);
}
.pagination-wrap nav{flex-wrap:wrap;justify-content:center}
.pagination-wrap a:hover{border-color:var(--accent);color:var(--text)}
/* the current page is a <span>, so it is styled directly rather than through
   a wrapper that the default Tailwind markup used to provide */
.pagination-wrap .is-current{
  background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;
}
.pagination-wrap .is-disabled{opacity:.35}
.pagination-wrap .is-gap{border-color:transparent;min-width:auto;padding:0 4px}

/* ============================================================
   COMPARE PAGE
   ============================================================ */
.cmp{padding:44px 0 96px}
.cmp__empty{
  padding:70px 30px;text-align:center;border:1px dashed var(--line-strong);
  border-radius:var(--radius-lg);background:var(--surface);
}
.cmp__empty p{color:var(--muted);margin:12px 0 24px;font-weight:300}
.cmp__scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.cmp__table{border-collapse:collapse;width:100%;min-width:720px}
.cmp__table th,.cmp__table td{
  padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);
  font-size:.87rem;vertical-align:top;
}
.cmp__table tr:last-child th,.cmp__table tr:last-child td{border-bottom:0}
.cmp__table th{
  color:var(--muted-2);font-weight:500;width:190px;position:sticky;left:0;
  background:var(--surface);z-index:1;
}
.cmp__table td{color:var(--text);min-width:214px}
.cmp__table tr.is-diff td{background:rgba(148,108,43,.07)}
.cmp__table tr.is-diff th{color:var(--accent-soft)}
.cmp__head td{padding:0 !important;background:transparent !important}
.cmp__card{padding:16px;position:relative}
.cmp__card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:12px}
.cmp__card h3{font-size:.95rem;font-weight:500;margin-bottom:5px}
.cmp__card .price{font-size:1.05rem;font-weight:600;color:var(--accent-soft)}
.cmp__card .loc{font-size:.78rem;color:var(--muted-2);margin-top:3px}
.cmp__card .btn{margin-top:12px;width:100%;padding:9px;font-size:.8rem}
.cmp__remove{
  position:absolute;top:24px;right:24px;width:28px;height:28px;border-radius:50%;
  background:rgba(14,13,6,.78);border:1px solid var(--line-strong);color:var(--text);
  cursor:pointer;display:grid;place-items:center;z-index:2;
}
.cmp__remove:hover{background:#b34b3a;border-color:#b34b3a}
.cmp__legend{display:flex;align-items:center;gap:9px;font-size:.8rem;color:var(--muted-2);margin-bottom:18px}
.cmp__legend i{width:22px;height:12px;border-radius:3px;background:rgba(148,108,43,.24);display:inline-block}

/* ============================================================
   LISTING PAGE — real map block
   ============================================================ */
.pmap{height:340px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line)}
.pmap-legend{
  display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;font-size:.79rem;color:var(--muted-2);
}
.pmap-legend span{display:flex;align-items:center;gap:8px}
.pmap-legend i{width:15px;height:11px;border-radius:2px;display:inline-block}
.pmap-legend i.parcel{background:rgba(148,108,43,.28);border:1.5px solid var(--accent)}
.pmap-legend i.marker{background:var(--accent);border-radius:50%;width:11px;height:11px}

/* ============================================================
   LIGHT THEME
   The accent stays as configured; neutrals flip.
   ============================================================ */
:root[data-theme="light"]{
  --ink:#faf8f4;
  --surface:#ffffff;
  --surface-2:#f3efe8;
  --line:rgba(20,17,10,.10);
  --line-strong:rgba(20,17,10,.18);
  --text:#1a1710;
  --muted:#5d574c;
  --muted-2:#8a8378;
  --shadow:0 20px 44px -22px rgba(60,45,20,.30);
}
:root[data-theme="light"] body{background:var(--ink);color:var(--text)}
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .footer{background:#f3efe8}
:root[data-theme="light"] .header{background:rgba(250,248,244,.82)}
:root[data-theme="light"] .header.is-stuck{background:rgba(250,248,244,.97)}
/* The background flips to white here but the text colour did not, leaving the
   unselected options on --muted-2 (#8a8378) — about 3.2:1 on white, under AA
   for 12px semibold. --muted is the light-mode equivalent tone. */
:root[data-theme="light"] .switch__opt{background:#fff;color:var(--muted)}
/* This themed rule outranks .switch__opt.is-active, so the selected option
   was painted white and its white label vanished into it. */
:root[data-theme="light"] .switch__opt.is-active{background:var(--accent);color:#fff}
:root[data-theme="light"] .mobile-menu{background:var(--ink)}
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .field textarea,
:root[data-theme="light"] .fgroup input[type="text"],
:root[data-theme="light"] .fgroup select,
:root[data-theme="light"] .plist__bar select,
:root[data-theme="light"] .plist__bar input,
:root[data-theme="light"] .newsletter__form input,
:root[data-theme="light"] .amenity,
:root[data-theme="light"] .calc__cell{background:#fff}
:root[data-theme="light"] .hero__bg img{opacity:.62}
:root[data-theme="light"] .hero__bg::after{
  background:
    linear-gradient(100deg,var(--ink) 6%,rgba(250,248,244,.86) 42%,rgba(250,248,244,.30) 100%),
    linear-gradient(to top,var(--ink) 1%,transparent 42%);
}
:root[data-theme="light"] .hero h1 em::after{opacity:.28}
/* sections that hard-code the near-black band */
:root[data-theme="light"] [style*="#0b0a04"]{background:#f3efe8 !important}
:root[data-theme="light"] .similar{background:#f3efe8}
:root[data-theme="light"] .card__media::after{
  background:linear-gradient(to top,rgba(20,17,10,.62),transparent 46%);
}
:root[data-theme="light"] .leaflet-tile{filter:none}
:root[data-theme="light"] .explore__count,
:root[data-theme="light"] .explore__toggle,
:root[data-theme="light"] .gallery__count,
:root[data-theme="light"] .gallery__nav,
:root[data-theme="light"] .card__fav,
:root[data-theme="light"] .card__compare{
  background:rgba(255,255,255,.9);color:var(--text);
}
/* Same trap as the language switch: the themed rule above outranks
   .card__fav.is-on, so a saved listing showed a white heart on a white
   circle. The selected state has to be restated at this specificity. */
:root[data-theme="light"] .card__fav.is-on,
:root[data-theme="light"] .card__compare.is-on{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
:root[data-theme="light"] .card__fav.is-on svg{fill:#fff;stroke:#fff}

/* The hint sits on a photo, so it keeps a dark plate and light text in both
   themes — inheriting --text turned it into dark-on-dark in light mode. */
:root[data-theme="light"] .gallery__zoom{
  background:rgba(14,13,6,.72);border-color:rgba(255,255,255,.28);
}

:root[data-theme="light"] .badge--dark{background:rgba(255,255,255,.9);color:var(--text)}
:root[data-theme="light"] .tray{background:rgba(255,255,255,.97)}

/* ---------- theme toggle ---------- */
.themetoggle{
  display:grid;place-items:center;width:30px;height:24px;border-radius:100px;
  border:1px solid var(--line);background:#0a0904;color:var(--muted-2);cursor:pointer;
  transition:color .22s,border-color .22s;
}
.themetoggle:hover{color:var(--accent-soft);border-color:var(--accent-line)}
:root[data-theme="light"] .themetoggle{background:#fff}
/* Both icons block, and no line box.
   The moon was block while the sun was left inline, so in dark mode the icon
   sat on a text baseline — the grid centred the span, and the glyph inside it
   rode a few pixels high with the descender space below. */
.themetoggle__sun{display:block;line-height:0}
.themetoggle__moon{display:none;line-height:0}
:root[data-theme="light"] .themetoggle__sun{display:none}
:root[data-theme="light"] .themetoggle__moon{display:block}
.themetoggle svg{display:block}

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.wafloat{
  position:fixed;z-index:128;display:inline-flex;align-items:center;gap:10px;
  padding:12px;border-radius:100px;background:var(--wa,#25D366);color:#fff;
  box-shadow:0 14px 32px -12px rgba(0,0,0,.6);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.wafloat:hover{transform:translateY(-3px);box-shadow:0 20px 40px -12px rgba(0,0,0,.7)}
.wafloat__icon{display:grid;place-items:center;flex-shrink:0}
.wafloat__label{font-size:.83rem;font-weight:600;padding-right:8px;white-space:nowrap}
.wafloat--bottom-right{right:20px;bottom:20px}
.wafloat--bottom-left{left:20px;bottom:20px}
.wafloat--middle-right{right:20px;top:50%;transform:translateY(-50%)}
.wafloat--middle-right:hover{transform:translateY(-50%) scale(1.04)}
.wafloat--middle-left{left:20px;top:50%;transform:translateY(-50%)}
.wafloat--middle-left:hover{transform:translateY(-50%) scale(1.04)}
/* keep clear of the back-to-top button */
.wafloat--bottom-right{right:78px}
@media(max-width:640px){
  .wafloat__label{display:none}
  .wafloat--bottom-right{right:72px}
}

/* ============================================================
   COOKIE CONSENT
   ============================================================ */
.cookie{
  position:fixed;left:16px;right:16px;z-index:140;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between;
  padding:16px 20px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--accent-line);
  box-shadow:0 -14px 40px -20px rgba(0,0,0,.8);
}
.cookie[hidden]{display:none}
.cookie--bottom{bottom:16px}
.cookie--top{top:96px}
.cookie__text{font-size:.85rem;color:var(--muted);flex:1;min-width:260px;font-weight:300}
.cookie__text a{color:var(--accent-soft);text-decoration:underline}
.cookie__actions{display:flex;gap:9px;flex-shrink:0}
.cookie__actions .btn{padding:10px 20px;font-size:.82rem}
@media(max-width:640px){
  .cookie{left:10px;right:10px;padding:14px}
  .cookie__actions{width:100%}
  .cookie__actions .btn{flex:1}
}

/* ============================================================
   LEGAL / PROSE PAGES
   ============================================================ */
.prose{max-width:74ch;color:var(--muted);font-weight:300;line-height:1.85;font-size:.95rem}
.prose h2{font-size:1.25rem;color:var(--text);margin:34px 0 12px}
.prose h3{font-size:1.02rem;color:var(--text);margin:26px 0 10px}
.prose p{margin-bottom:14px}
.prose ul{list-style:disc;padding-left:22px;margin:0 0 16px}
.prose li{margin-bottom:7px}
.prose a{color:var(--accent-soft);text-decoration:underline}

/* ============================================================
   BLOG
   ============================================================ */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:1000px){.postgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.postgrid{grid-template-columns:1fr}}

.postcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s;
}
.postcard:hover{transform:translateY(-7px);border-color:var(--accent-line);box-shadow:var(--shadow)}
.postcard__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.postcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.postcard:hover .postcard__media img{transform:scale(1.06)}
.postcard__cat{position:absolute;top:13px;left:13px;z-index:2}
.postcard__body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.postcard__meta{font-size:.76rem;color:var(--muted-2);letter-spacing:.03em}
.postcard__title{font-size:1.05rem;font-weight:500;line-height:1.35}
.postcard__title a{transition:color .25s}
.postcard:hover .postcard__title a{color:var(--accent-soft)}
.postcard__excerpt{font-size:.86rem;color:var(--muted);font-weight:300;line-height:1.65;flex:1}

.postfull{max-width:760px;margin:0 auto;padding-bottom:80px}
.postfull__title{font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.2;letter-spacing:-.03em;margin-bottom:14px}
.postfull__meta{font-size:.83rem;color:var(--muted-2);margin-bottom:28px}
.postfull__cover{width:100%;border-radius:var(--radius-lg);margin-bottom:34px;aspect-ratio:16/9;object-fit:cover}

/* ============================================================
   FAQ
   ============================================================ */
.faqwrap{max-width:840px;margin:0 auto}
.faqsearch{
  width:100%;background:var(--surface);border:1px solid var(--line);border-radius:100px;
  padding:14px 22px;font-size:.92rem;outline:none;margin-bottom:34px;
  transition:border-color .25s;
}
.faqsearch:focus{border-color:var(--accent)}
.faqgroup{margin-bottom:34px}
.faqgroup__title{
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-soft);margin-bottom:14px;font-weight:600;
}
.faqitem{
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);
  margin-bottom:10px;overflow:hidden;transition:border-color .28s;
}
.faqitem[open]{border-color:var(--accent-line)}
.faqitem__q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 20px;cursor:pointer;font-size:.94rem;font-weight:500;list-style:none;
}
.faqitem__q::-webkit-details-marker{display:none}
.faqitem__q svg{flex-shrink:0;color:var(--accent);transition:transform .28s var(--ease)}
.faqitem[open] .faqitem__q svg{transform:rotate(90deg)}
.faqitem__a{padding:0 20px 20px;font-size:.9rem}
.faqempty{text-align:center;color:var(--muted-2);padding:30px;font-size:.9rem}

.footer__blurb{font-size:.88rem;color:var(--muted);font-weight:300;margin:22px 0;line-height:1.75;max-width:34ch}
.footer__blurb p{margin-bottom:10px}
.footer__blurb p:last-child{margin-bottom:0}

/* ============================================================
   MOBILE
   Tightened spacing, larger tap targets, and fixes for the
   elements that stack awkwardly on a narrow screen.
   ============================================================ */
@media (max-width:900px){
  /* the generous desktop rhythm is far too much on a phone */
  .section{padding:64px 0}
  .section--tight{padding:48px 0}
  .sec-head{margin-bottom:34px}
  .phero{padding:40px 0 30px}
  .hero{min-height:auto;padding:60px 0 96px}
  .wrap{padding:0 18px}
}

@media (max-width:640px){
  .section{padding:52px 0}
  .hero{padding:48px 0 84px}
  .hero__actions{gap:10px}
  .hero__actions .btn{flex:1 1 100%;justify-content:center}
  .hero__trust{gap:14px 22px}
  .hero__trust-item{font-size:.78rem}

  /* stat counters read better two-up than squeezed to four */
  .stats__grid{grid-template-columns:repeat(2,1fr)}

  /* filter chip rows scroll instead of wrapping into a tall block */
  .filters,
  .search__tabs{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:4px;
  }
  .filters::-webkit-scrollbar,
  .search__tabs::-webkit-scrollbar{display:none}
  .filter{flex:0 0 auto}

  /* comfortable tap targets */
  .btn{padding:13px 22px}
  .nav__cta .btn{padding:11px 18px;font-size:.82rem}
  .card__fav,.card__compare{width:40px;height:40px}
  .card__compare{right:62px}

  .pd__tools{width:100%}
  .pd__tools .tool{flex:1 1 auto;justify-content:center}

  .listings__more .btn,
  .band__actions .btn{width:100%}

  .footer__bottom{flex-direction:column;gap:14px;text-align:center}
  .footer__bottom nav{justify-content:center;gap:16px}

  /* the compare rail must not cover content or the WhatsApp button */
  .railcompare{bottom:150px;padding:10px 8px}

  /* stack the cookie bar so buttons stay reachable */
  .cookie{flex-direction:column;align-items:stretch;gap:12px}
  .cookie__text{min-width:0}

  .prose{font-size:.92rem}
  .postfull__cover{border-radius:var(--radius);margin-bottom:24px}
  .faqitem__q{padding:15px 16px;font-size:.9rem}
  .faqsearch{padding:12px 18px}
}

@media (max-width:560px){
  /* the property detail sidebar cards were designed for a column */
  .agentcard{padding:20px}
  .agentcard__actions{grid-template-columns:1fr}
  .tour__slots{grid-template-columns:repeat(2,1fr)}
  .specs{grid-template-columns:repeat(2,1fr)}
  .gallery__thumbs{grid-template-columns:repeat(3,1fr)}

  /* a fixed-width popup overflows a small viewport */
  .leaflet-popup-content{width:min(78vw,262px) !important}

  .plist__bar{flex-direction:column;align-items:stretch}
  .plist__bar select,
  .plist__bar input,
  .plist__bar .btn{width:100%;margin-left:0}

  .explore__filters{padding:20px 18px 30px}
  .explore__map{height:52vh}
  .explore__bar{top:10px;left:10px;right:10px;flex-wrap:wrap;gap:8px}
  .explore__results{padding:12px}
  .explore__results-grid{grid-template-columns:1fr}

  .cmp__table th{width:132px;min-width:132px;font-size:.8rem}
  .cmp__table td{min-width:180px}
}

/* Respect notched devices. */
@supports (padding: max(0px)) {
  @media (max-width:640px){
    .wrap{
      padding-left:max(18px, env(safe-area-inset-left));
      padding-right:max(18px, env(safe-area-inset-right));
    }
    .cookie{bottom:max(16px, env(safe-area-inset-bottom))}
    .wafloat--bottom-right,
    .wafloat--bottom-left{bottom:max(20px, env(safe-area-inset-bottom))}
  }
}

/* ============================================================
   DUAL-HANDLE RANGE SLIDER
   Two native range inputs stacked on one track; the lower one
   is pointer-transparent except at its thumb, so both drag.
   ============================================================ */
.dualrange{margin-top:10px}
.dualrange__out{
  display:block;font-size:.78rem;color:var(--accent-soft);font-weight:500;
  letter-spacing:.02em;margin-bottom:12px;
}
.dualrange__track{position:relative;height:22px}
.dualrange__rail{
  position:absolute;top:9px;left:0;right:0;height:4px;border-radius:100px;
  background:var(--line-strong);
}
.dualrange__fill{
  position:absolute;top:9px;height:4px;border-radius:100px;background:var(--accent);
}
.dualrange input[type="range"]{
  position:absolute;top:0;left:0;width:100%;height:22px;margin:0;
  -webkit-appearance:none;appearance:none;background:none;pointer-events:none;
}
.dualrange input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:auto;
  width:17px;height:17px;border-radius:50%;background:var(--accent);
  border:2px solid var(--ink);cursor:grab;box-shadow:0 0 0 3px var(--accent-dim);
}
.dualrange input[type="range"]::-webkit-slider-thumb:active{cursor:grabbing}
.dualrange input[type="range"]::-moz-range-thumb{
  pointer-events:auto;width:17px;height:17px;border-radius:50%;
  background:var(--accent);border:2px solid var(--ink);cursor:grab;
  box-shadow:0 0 0 3px var(--accent-dim);
}
.dualrange input[type="range"]::-moz-range-track{background:none;border:none}

/* ============================================================
   GALLERY LIGHTBOX
   ============================================================ */
.gallery__stage{cursor:zoom-in}
.gallery__zoom{
  position:absolute;left:18px;bottom:18px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  /* The pill sits on a photo and its background is dark in either theme, so
     the label has to be light in either theme. Following --text meant that in
     light mode it turned near-black on near-black and disappeared. */
  padding:7px 14px;border-radius:100px;font-size:.76rem;color:#fff;
  background:rgba(14,13,6,.74);border:1px solid var(--line-strong);
  backdrop-filter:blur(10px);pointer-events:none;
}
.lightbox{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(6,5,2,.94);backdrop-filter:blur(6px);
}
.lightbox.is-open{display:grid;grid-template-rows:1fr auto;place-items:center}
.lightbox__img{
  max-width:94vw;max-height:82vh;object-fit:contain;
  border-radius:10px;box-shadow:0 30px 80px -30px #000;
}
.lightbox__bar{
  display:flex;align-items:center;gap:14px;padding:16px;
  font-size:.8rem;color:var(--muted);
}
.lightbox__nav,
.lightbox__close{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid var(--line-strong);color:#fff;
  transition:background .25s var(--ease);
}
.lightbox__nav:hover,.lightbox__close:hover{background:var(--accent);border-color:var(--accent)}
.lightbox__close{position:fixed;top:20px;right:20px;z-index:2}
@media(max-width:640px){
  .lightbox__img{max-width:96vw;max-height:74vh}
  .lightbox__close{top:12px;right:12px}
}

/* ============================================================
   STACKING ORDER
   Leaflet uses z-index 400–1000 for its panes and controls, which
   was painting maps over the sticky header. One explicit scale.
   ============================================================ */
.pmap,
.explore__map,
.map{ position:relative; z-index:0; isolation:isolate; }

.railcompare{ z-index:1000; }
.explore__bar{ padding-right:56px; }
.wafloat{ z-index:1000; }
.totop{ z-index:1000; }
.tray{ z-index:1100; }
.header{ z-index:1200; }
.topbar{ position:relative; z-index:1200; }
.mobile-menu{ z-index:1150; }
.cookie{ z-index:1300; }
.lightbox{ z-index:2000; }

/*
   Leaflet relies on its own pane z-indexes (tiles 200, overlay 400,
   markers 600, popups 700). Do NOT flatten them — doing so puts tiles
   over the markers and swallows pin clicks. Isolating the map container
   above is enough to keep the whole map under the site chrome.
*/
.explore__bar{ z-index:800; }

/* ============================================================
   ARTICLE TYPOGRAPHY
   The prose block was too tight for long-form reading.
   ============================================================ */
.postfull{padding-top:8px}
/* One measure for the whole article: .wrap gives the page gutters and
   .postfull sets the reading width. .prose adding its own 74ch cap on top
   made the text narrower than the cover image, so the two never lined up. */
.postfull .prose{max-width:none;font-size:1rem;line-height:1.9}
.postfull .prose > *:first-child{margin-top:0}
.postfull .prose p{margin:0 0 20px}
.postfull .prose h2{
  font-size:1.4rem;line-height:1.3;color:var(--text);
  margin:44px 0 14px;padding-top:26px;border-top:1px solid var(--line);
}
.postfull .prose h2:first-of-type{border-top:0;padding-top:0;margin-top:36px}
.postfull .prose h3{font-size:1.1rem;margin:32px 0 12px}
.postfull .prose ul,
.postfull .prose ol{margin:0 0 22px;padding-left:24px}
.postfull .prose li{margin-bottom:10px;padding-left:4px}
.postfull .prose strong{color:var(--text);font-weight:600}
.postfull .prose blockquote{
  margin:28px 0;padding:16px 22px;border-left:3px solid var(--accent);
  background:var(--surface);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--text);font-style:italic;
}
@media(max-width:640px){
  .postfull .prose{font-size:.95rem;line-height:1.85}
  .postfull .prose h2{font-size:1.22rem;margin:34px 0 12px;padding-top:22px}
  .postfull__title{margin-bottom:10px}
}

/* Zoom control must clear the floating count / layer bar. */
.explore__map .leaflet-top.leaflet-left{ top:56px; }
.explore__map .leaflet-control-zoom{ margin-left:16px; }
.pmap .leaflet-top.leaflet-left{ top:8px; }
.leaflet-control-zoom a{
  background:var(--surface) !important;color:var(--text) !important;
  border-color:var(--line) !important;
}
.leaflet-control-zoom a:hover{background:var(--accent) !important;color:#fff !important}

/* the count pill and layer toggle are the top layer of the map chrome */
.explore__count,
.explore__toggle{ z-index:4; }

/* ============================================================
   ERROR PAGES
   ============================================================ */
.errpage{
  min-height:70vh;display:grid;place-items:center;
  padding:80px 0;text-align:center;
  background:radial-gradient(760px 380px at 50% 0%, var(--accent-dim), transparent 70%);
}
.errpage__inner{max-width:620px}
.errpage__logo{height:56px;width:auto;margin:0 auto 28px;display:block;opacity:.9}
.errpage__code{
  font-size:clamp(4rem,13vw,7rem);font-weight:700;line-height:1;
  letter-spacing:-.05em;color:var(--accent);opacity:.28;margin-bottom:-.15em;
}
.errpage__title{font-size:clamp(1.5rem,3.6vw,2.2rem);letter-spacing:-.03em;margin-bottom:14px}
.errpage__body{color:var(--muted);font-weight:300;line-height:1.75;max-width:46ch;margin:0 auto 30px}
.errpage__actions{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.errpage__search{display:flex;gap:9px;margin-top:32px;max-width:420px;margin-inline:auto}
.errpage__search input{
  flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:100px;padding:13px 20px;font-size:.9rem;outline:none;transition:border-color .25s;
}
.errpage__search input:focus{border-color:var(--accent)}
@media(max-width:560px){
  .errpage{padding:56px 0}
  .errpage__actions .btn{flex:1 1 100%}
  .errpage__search{flex-direction:column}
  .errpage__search .btn{width:100%}
}

/* ============================================================
   LEAFLET OVERRIDES — HIGH SPECIFICITY
   leaflet.css is pushed into @stack('styles'), which renders AFTER
   app.css, so plain `.leaflet-popup-content-wrapper` rules lose to
   Leaflet's own. These selectors are deliberately more specific.
   ============================================================ */
.leaflet-container .leaflet-popup .leaflet-popup-content-wrapper{
  background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 26px 54px -22px rgba(0,0,0,.75);
  padding:0;overflow:hidden;
}
.leaflet-container .leaflet-popup .leaflet-popup-content{
  margin:0;padding:0;width:264px !important;line-height:inherit;color:var(--text);
}
.leaflet-container .leaflet-popup .leaflet-popup-tip{
  background:var(--surface);border:1px solid var(--line);box-shadow:none;
}
.leaflet-container .leaflet-popup .leaflet-popup-close-button{
  position:absolute;top:10px;right:10px;
  width:28px;height:28px;padding:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(14,13,6,.62);backdrop-filter:blur(6px);
  color:#fff;font:600 18px/1 system-ui,sans-serif;text-indent:0;
  border:1px solid rgba(255,255,255,.22);z-index:3;
}
.leaflet-container .leaflet-popup .leaflet-popup-close-button:hover{
  background:var(--accent);border-color:var(--accent);color:#fff;
}

/* the media block must sit flush to the card edges */
.leaflet-container .mappop{margin:0;padding:0}
.leaflet-container .mappop__media{
  margin:0;border-radius:0;aspect-ratio:16/10;
}
.leaflet-container .mappop__media img{display:block;width:100%;height:100%;object-fit:cover}
.leaflet-container .mappop__title{color:var(--text);opacity:1}
.leaflet-container .mappop__loc{color:var(--muted)}
.leaflet-container .mappop__specs{color:var(--muted)}
.leaflet-container .mappop__specs li{border-color:var(--line-strong)}

/* ============================================================
   NATIVE SELECT DROPDOWNS
   The option list is painted by the OS, so it ignores the page
   theme. Colouring the element itself is the only portable fix.
   ============================================================ */
select{ color-scheme:dark; }
:root[data-theme="light"] select{ color-scheme:light; }

select option,
select optgroup{
  background-color:#141413;
  color:#f3efe7;
  /* Chrome and Firefox on Windows do honour padding and line-height on an
     option even though the rest of the list is drawn by the OS, so the rows
     at least stop touching each other. */
  padding:9px 12px;
  line-height:1.6;
  min-height:2.2em;
}
select optgroup{font-weight:600;padding-top:12px}
:root[data-theme="light"] select option,
:root[data-theme="light"] select optgroup{
  background-color:#ffffff;
  color:#1a1710;
  padding:9px 12px;
  line-height:1.6;
  min-height:2.2em;
}
/* The selected row is painted with the OS highlight — a hard system blue that
   belongs to no theme. Where a browser honours it, use the brand accent. */
select option:checked,
select option[selected]{
  font-weight:600;
  background:var(--accent);
  color:#fff;
}

/*
 * Chrome 135+ hands the whole picker over once the select opts in, so the
 * dropdown can finally match the site: rounded, padded, brand highlight.
 *
 * Behind @supports, so every other browser keeps the native control it knows
 * how to render rather than an unstyled half-built one.
 */
@supports (appearance: base-select){
  select, ::picker(select){ appearance:base-select; }

  select{
    padding:10px 34px 10px 13px;
    border:1px solid var(--line);border-radius:var(--radius-sm);
    background:var(--surface);color:var(--text);
    font-size:.88rem;cursor:pointer;
  }
  select:hover{border-color:var(--accent-line)}
  select:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}

  select::picker-icon{color:var(--accent);transition:transform .25s var(--ease)}
  select:open::picker-icon{transform:rotate(180deg)}

  ::picker(select){
    margin-top:6px;padding:6px;
    border:1px solid var(--line-strong);border-radius:12px;
    background:var(--surface);
    box-shadow:0 18px 44px -18px rgba(0,0,0,.7);
    max-height:320px;overflow-y:auto;
  }

  select option{
    display:flex;align-items:center;gap:9px;
    padding:9px 12px;border-radius:8px;
    background:transparent;color:var(--text);
    font-size:.86rem;cursor:pointer;
  }
  select option:hover,
  select option:focus{background:var(--accent-dim);color:var(--text)}
  select option:checked{background:var(--accent);color:#fff}
  /* The tick Chrome inserts duplicates the highlight. */
  select option::checkmark{display:none}
}

/* Draft preview banner */
.preview-banner{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 18px;background:var(--accent);color:#fff;
  font-size:.83rem;font-weight:500;text-align:center;
}
.preview-banner strong{text-transform:capitalize}

/* ============================================================
   BOOK A VIEWING
   ============================================================ */
.tourbook{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:34px;align-items:start}
.tourbook__aside{position:sticky;top:104px}
.tourbook__steps{margin:0;padding-left:18px;color:var(--muted);font-size:.87rem;font-weight:300;line-height:1.7}
.tourbook__steps li{margin-bottom:9px;padding-left:4px}
.tour__slots--wide{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
@media(max-width:900px){
  .tourbook{grid-template-columns:1fr;gap:26px}
  .tourbook__aside{position:static}
}

/* Description block inside a listing card uses the prose styles at card scale. */
.blk .prose--tight{max-width:none;font-size:.94rem;line-height:1.85}
.blk .prose--tight p{margin-bottom:16px}
.blk .prose--tight p:last-child{margin-bottom:0}
.blk .prose--tight h2{font-size:1.05rem;margin:24px 0 10px}
.blk .prose--tight h3{font-size:.98rem;margin:20px 0 8px}

/* ============================================================
   ADVISOR DASHBOARD (front end)
   ============================================================ */
.agentd{padding:44px 0 96px}
.agentd__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.agentd__who{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--muted)}
.agentd__badge{
  font-size:.68rem;padding:3px 8px;border-radius:999px;
  background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-line);
}

.agentd__nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:26px;border-bottom:1px solid var(--line);padding-bottom:14px}
.agentd__tab{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:var(--radius-sm);
  font-size:.84rem;color:var(--muted);border:1px solid transparent;
}
.agentd__tab:hover{color:var(--text);background:var(--surface)}
.agentd__tab.is-active{color:var(--accent);background:var(--accent-dim);border-color:var(--accent-line)}
.agentd__new{margin-left:auto}

.agentd__flash{
  display:flex;gap:10px;align-items:flex-start;margin-bottom:22px;
  padding:13px 16px;border-radius:var(--radius);font-size:.86rem;
  background:rgba(35,140,80,.12);border:1px solid rgba(35,140,80,.35);color:#8fd6ab;
}
.agentd__flash.is-bad{background:rgba(190,60,60,.12);border-color:rgba(190,60,60,.4);color:#f0a3a3}
.agentd__flash ul{margin:6px 0 0;padding-left:18px;list-style:disc}
.agentd__flash li{margin-bottom:3px}

.agentd__stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));margin-bottom:26px}
.agentd__stat{
  padding:16px 18px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px;
}
.agentd__stat.is-warn{border-color:var(--accent-line)}
.agentd__stat.is-warn .agentd__stat-value{color:var(--accent)}
.agentd__stat-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.agentd__stat-value{font-size:1.6rem;font-weight:600;line-height:1.15;letter-spacing:-.02em}
.agentd__stat-hint{font-size:.72rem;color:var(--muted-2)}

.agentd__cols{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.agentd__panel{padding:20px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);margin-bottom:16px}
.agentd__panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.agentd__panel-head h2{font-size:1rem;font-weight:600}
.agentd__panel-head a{font-size:.78rem;color:var(--accent)}

.agentd__row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.agentd__row:last-child{border-bottom:0}
.agentd__row strong{display:block;font-size:.88rem;font-weight:500}
.agentd__row span{font-size:.76rem;color:var(--muted-2)}
.agentd__row-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}
.agentd__row-side small{font-size:.72rem;color:var(--muted-2)}
.agentd__row-side a{font-size:.76rem;color:var(--accent)}

.agentd__pill{
  font-size:.68rem;padding:2px 9px;border-radius:999px;
  background:rgba(255,255,255,.07);color:var(--muted);
}
.agentd__pill.is-new{background:var(--accent-dim);color:var(--accent)}
.agentd__pill.is-draft{background:rgba(255,255,255,.06);color:var(--muted-2)}

.agentd__empty{font-size:.84rem;color:var(--muted-2);padding:8px 0}
.agentd__empty a{color:var(--accent);text-decoration:underline}
.agentd__empty-state{text-align:center;padding:60px 20px;border:1px dashed var(--line);border-radius:var(--radius)}
.agentd__empty-state p{margin:14px 0 18px;color:var(--muted)}

.agentd__filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.agentd__filter input,.agentd__filter select{
  background:#141413;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 13px;font-size:.85rem;min-width:150px;
}

.agentd__table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.agentd__table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:640px}
.agentd__table th{
  text-align:left;padding:12px 14px;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2);border-bottom:1px solid var(--line);
}
.agentd__table td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.agentd__table tr:last-child td{border-bottom:0}
.agentd__table strong{display:block;font-weight:500}
.agentd__table small{font-size:.72rem;color:var(--muted-2)}
.agentd__actions{white-space:nowrap}
.agentd__actions a{color:var(--accent);margin-right:12px;font-size:.8rem}

.agentd__form{display:flex;flex-direction:column;gap:16px}
.agentd__fieldset{padding:22px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.agentd__fieldset h2{font-size:.98rem;font-weight:600;margin-bottom:16px}
.agentd__grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.agentd__field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.agentd__grid .agentd__field{margin-bottom:0}
.agentd__field--wide{grid-column:1/-1}
.agentd__field > span{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2)}
.agentd__field input,.agentd__field select,.agentd__field textarea{
  width:100%;background:#141413;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 13px;font-size:.88rem;font-family:inherit;color:var(--text);
}
.agentd__field textarea{resize:vertical;line-height:1.7}
.agentd__field input:focus,.agentd__field select:focus,.agentd__field textarea:focus{
  outline:none;border-color:var(--accent-line);
}
.agentd__field small{font-size:.72rem;color:var(--muted-2)}
.agentd__note{font-size:.78rem;color:var(--muted-2);margin-top:10px}
.agentd__preview{margin-top:14px;max-width:320px;width:100%;border-radius:var(--radius);aspect-ratio:16/9;object-fit:cover}

.agentd__submit{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 22px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);
}
.agentd__check{display:flex;align-items:center;gap:9px;font-size:.86rem;cursor:pointer}

.agentd__lead{display:flex;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}
.agentd__lead:last-of-type{border-bottom:0}
.agentd__lead-main strong{font-size:.9rem;font-weight:500}
.agentd__lead-prop{display:block;font-size:.76rem;color:var(--accent);margin:2px 0 7px}
.agentd__lead-main p{font-size:.83rem;color:var(--muted);line-height:1.7;max-width:70ch}
.agentd__lead-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;white-space:nowrap}
.agentd__lead-side small{font-size:.72rem;color:var(--muted-2)}
.agentd__lead-links{display:flex;gap:10px;font-size:.76rem}
.agentd__lead-links a{color:var(--accent)}

@media (max-width:720px){
  .agentd__new{margin-left:0;width:100%;justify-content:center}
  .agentd__lead,.agentd__row{flex-direction:column;gap:8px}
  .agentd__lead-side,.agentd__row-side{align-items:flex-start}
  .agentd__submit{flex-direction:column;align-items:stretch}
}
/* dashboard link sits beside the main CTA, hidden on small screens where
   the burger menu takes over */
/* The two buttons sit side by side, so they share a height rather than each
   deriving one from its own padding and font size. */
.nav__cta .btn{height:46px;padding-top:0;padding-bottom:0}
.nav__dash{padding-left:18px;padding-right:18px;font-size:.82rem}
@media(max-width:1080px){.nav__dash{display:none}}

/* ============================================================
   SITE GUIDE — bottom-right walkthrough
   ============================================================ */
.guide__launch{
  /* bottom-LEFT on the public site: the right corner already carries
     WhatsApp, back-to-top and the compare rail */
  position:fixed;left:20px;bottom:20px;z-index:1150;
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 16px 11px 12px;border-radius:100px;cursor:pointer;
  background:var(--surface);border:1px solid var(--accent-line);color:var(--text);
  box-shadow:0 10px 30px -12px #000;
  font-size:.82rem;font-weight:500;font-family:inherit;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.guide__launch:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
.guide__launch-mark{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:var(--accent);color:#0e0d06;
  display:grid;place-items:center;font-size:.78rem;font-weight:700;
}
.guide__launch:hover .guide__launch-mark{background:rgba(0,0,0,.3);color:#fff}

/* Clear the WhatsApp button when it is also bottom-right. */
.guide__spot{
  position:fixed;z-index:1140;pointer-events:none;border-radius:12px;
  border:2px solid var(--accent);
  /* the ring doubles as the page dimmer, so there is no separate overlay to
     keep in sync with the highlighted element */
  box-shadow:0 0 0 9999px rgba(6,6,4,.72),0 0 22px rgba(148,108,43,.55);
  transition:top .28s var(--ease),left .28s var(--ease),width .28s var(--ease),height .28s var(--ease);
}

.guide__pop{
  position:fixed;z-index:1160;width:min(320px,calc(100vw - 24px));
  padding:16px 18px 14px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--accent-line);
  box-shadow:0 22px 50px -20px #000;
  transition:top .28s var(--ease),left .28s var(--ease);
}
.guide__pop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.guide__step{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.guide__x{
  width:24px;height:24px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.07);color:var(--muted);
  display:grid;place-items:center;font-size:17px;line-height:1;
}
.guide__x:hover{background:var(--accent);color:#fff}
.guide__title{font-size:.96rem;font-weight:600;margin-bottom:6px;line-height:1.35}
.guide__body{font-size:.83rem;color:var(--muted);line-height:1.7;margin-bottom:14px}
.guide__actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.guide__skip{
  background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:.78rem;color:var(--muted-2);text-decoration:underline;padding:0;
}
.guide__skip:hover{color:var(--text)}
.guide__nav{display:flex;gap:8px}
.guide__btn{padding:8px 15px;font-size:.79rem}
.guide__btn:disabled{opacity:.4;cursor:not-allowed}

/* While the guide runs, the launcher would sit on top of the dimmer. */
body.guide-on .guide__launch{opacity:0;pointer-events:none}

@media (max-width:640px){
  .guide__launch{left:14px;bottom:14px;padding:10px 14px 10px 10px}
  .guide__launch-label{display:none}
  .guide__pop{width:calc(100vw - 20px)}
}
@media (prefers-reduced-motion:reduce){
  .guide__spot,.guide__pop{transition:none}
}
/* WhatsApp can be configured to the left; step over it when it is.

   The class the markup emits is wafloat--{wa_position}, so the value is
   "bottom-left", never "left" — this selector matched nothing and the two
   buttons stacked on top of each other in the corner.

   Only the bottom-left case collides: middle-left is vertically centred. */
body:has(.wafloat--bottom-left) .guide__launch{bottom:96px}

/* ============================================================
   SCROLLBARS — the default chrome-grey bar reads as a browser
   artefact against a dark page, especially on in-page scrollers
   like the explore filters and wide tables.
   ============================================================ */
html{scrollbar-width:thin;scrollbar-color:var(--accent-line) transparent}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--accent-line);border-radius:100px;
  border:2px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* In-page scrollers get a slimmer bar so it does not compete with content. */
.explore__filters,.agentd__table-wrap,.advf__grid,.cmp__scroll,.tray__slots{
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
}
.explore__filters::-webkit-scrollbar,
.agentd__table-wrap::-webkit-scrollbar{width:8px;height:8px}

/* advisor form: draft notice, documents */
.agentd__draft{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 14px;border-radius:var(--radius-sm);font-size:.8rem;
  background:var(--accent-dim);border:1px solid var(--accent-line);color:var(--accent-soft);
}
.agentd__link-btn{
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:inherit;color:var(--accent);text-decoration:underline;
}
.agentd__link-btn:hover{color:var(--text)}
.agentd__docs{margin-top:16px}
.agentd__docform{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.agentd__inline{display:inline}

/* listing identifiers: the reference and the public address, not the row id */
.agentd__ident{
  display:flex;flex-wrap:wrap;align-items:center;gap:22px;
  padding:14px 18px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
}
.agentd__ident-item{display:flex;flex-direction:column;gap:3px;min-width:0}
.agentd__ident-item small{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)}
.agentd__ident-item strong{font-size:.92rem;font-weight:600;letter-spacing:.02em;color:var(--accent)}
.agentd__ident-item code{
  font-size:.82rem;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.agentd__ident-link{margin-left:auto;font-size:.8rem;color:var(--accent);white-space:nowrap}
@media(max-width:640px){
  .agentd__ident{gap:14px}
  .agentd__ident-link{margin-left:0}
}

/* password re-confirmation before a sensitive download */
.confirmpw{display:grid;place-items:center;min-height:60vh;padding:60px 0}
.confirmpw__card{
  width:100%;max-width:420px;padding:34px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
}
.confirmpw__title{font-size:1.4rem;margin-bottom:10px}
.confirmpw__note{font-size:.86rem;color:var(--muted);line-height:1.7;margin-bottom:22px}
.confirmpw__error{
  margin:-6px 0 14px;font-size:.82rem;color:#f0a3a3;
}
.confirmpw__back{display:inline-block;margin-top:18px;font-size:.82rem;color:var(--muted-2)}
.confirmpw__back:hover{color:var(--accent)}

/* ---------- article page: one measure ----------
   The breadcrumb used to span the full 1220px wrapper while the article sat
   centred at 760px, so their left edges disagreed and the article read as a
   box inside a box. */
.wrap.postpage{max-width:808px;padding-top:44px}
.wrap.postpage .postfull{max-width:none;margin:0;padding-bottom:64px}

/* ---------- trailing "more from…" band ----------
   It had no padding of its own, so the cards butted straight into the
   footer with nothing between them. */
.similar{
  padding:72px 0 88px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.014);
}
.similar .sec-head{margin-bottom:34px}
@media(max-width:720px){
  .similar{padding:52px 0 64px}
}

/* ---------- pagination ---------- */
.pagination-wrap{margin-top:56px;display:block}
.pager{display:flex;flex-direction:column;align-items:center;gap:14px}
.pager__links{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.pager__links a,.pager__links span{
  display:grid;place-items:center;min-width:40px;height:40px;padding:0 13px;
  border:1px solid var(--line-strong);border-radius:10px;
  font-size:.86rem;color:var(--muted);
  transition:border-color .25s,color .25s,background .25s;
}
.pager__links a:hover{border-color:var(--accent);color:var(--text);background:var(--accent-dim)}
.pager__links .is-current{
  background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;
}
.pager__links .is-disabled{opacity:.32}
.pager__links .is-gap{border-color:transparent;min-width:auto;padding:0 4px}
.pager__count{font-size:.8rem;color:var(--muted-2)}
@media(max-width:520px){
  .pager__links a,.pager__links span{min-width:36px;height:36px;padding:0 10px;font-size:.82rem}
}

/* ============================================================
   CUSTOM DROPDOWN
   Built by assets/js/select.js, which keeps the real <select>
   in the DOM and hides it here. If that script never runs, none
   of this applies and the browser's own control is what shows.
   ============================================================ */

.xsel{position:relative;width:100%}

/* Not clipped or display:none — several of these selects are required, and a
   control the browser cannot focus makes constraint validation fail silently
   with "an invalid form control is not focusable". Transparent and
   click-through keeps validation working and the bubble anchored. */
.xsel__native{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;pointer-events:none;appearance:none;border:0;padding:0;margin:0;
}

.xsel__btn{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:10px;width:100%;
  background:#141413;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 13px;font:inherit;font-size:.88rem;color:var(--text);
  text-align:left;cursor:pointer;outline:none;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.xsel__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xsel.is-empty .xsel__value{color:var(--muted-2)}
.xsel__btn:hover{border-color:var(--accent-line)}
.xsel__btn:focus-visible,
.xsel.is-open .xsel__btn{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.xsel__btn:disabled{opacity:.45;cursor:not-allowed}
.xsel__btn:disabled:hover{border-color:var(--line)}

.xsel__chev{flex-shrink:0;color:var(--accent);transition:transform .25s var(--ease)}
.xsel.is-open .xsel__chev{transform:rotate(180deg)}

.xsel__menu{
  position:absolute;z-index:60;left:0;right:0;top:calc(100% + 6px);
  margin:0;padding:5px;list-style:none;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);box-shadow:var(--shadow);
  max-height:264px;overflow-y:auto;overscroll-behavior:contain;
  /* visibility rather than the hidden attribute: a display change in the
     same frame as the opacity change means the open never animates. */
  opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none;
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s .16s;
}
.xsel.is-open .xsel__menu{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.xsel--up .xsel__menu{top:auto;bottom:calc(100% + 6px);transform:translateY(4px)}
.xsel.is-open.xsel--up .xsel__menu{transform:none}

.xsel__opt{
  display:flex;align-items:center;gap:8px;
  padding:9px 11px;border-radius:8px;
  font-size:.86rem;color:var(--muted);cursor:pointer;
  transition:background .15s,color .15s;
}
.xsel__opt.is-active{background:var(--accent-dim);color:var(--text)}
.xsel__opt[aria-selected="true"]{color:var(--text);font-weight:500}
.xsel__opt[aria-selected="true"]::after{
  content:"";margin-left:auto;flex-shrink:0;
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}
.xsel__opt[aria-disabled="true"]{opacity:.4;cursor:not-allowed}

/* ---- per-context sizing, matching the control each one replaced ---- */

/* Hero search: the widget cell already draws the border. */
.search__field .xsel__btn{
  background:transparent;border:0;padding:0;font-size:.93rem;box-shadow:none;
}
.search__field .xsel__btn:hover,
.search__field .xsel__btn:focus-visible{border:0;box-shadow:none}
.search__field .xsel__btn:focus-visible .xsel__value{text-decoration:underline}
.search__field .xsel__menu{left:-14px;right:-14px;top:calc(100% + 14px)}

.plist__bar .xsel{width:auto;min-width:132px}
.plist__bar .xsel__btn{padding:10px 13px;font-size:.85rem}

.field .xsel__btn{padding:13px 15px;font-size:.92rem}

/* Light mode gets the same white fill the native controls get. */
:root[data-theme="light"] .xsel__btn{background:#fff}
:root[data-theme="light"] .search__field .xsel__btn{background:transparent}

@media (prefers-reduced-motion:reduce){
  .xsel__menu,.xsel__chev{transition:none}
}