/* The salon map: /map, the strip on /directory, the small map on a salon page.
   Paper, ink and Bodoni from public.css. One colour of its own: the star. */
:root{--star:#9a7440;--map-ground:#efe9de}

/* ── The star, on every map. Its box is centred on her address. */
/* no position here: MapLibre places the marker absolutely, and a position rule
   on it would drop every star back into the page flow, off its address */
.mp-star{display:block;width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;color:inherit}
span.mp-star{cursor:default}
.mp-star.is-folded{display:none}
.mp-star-s{display:block;width:26px;height:26px;filter:drop-shadow(0 1px 1px rgba(37,34,30,.35))}
.mp-star-s svg{display:block;width:26px;height:26px;fill:var(--star);stroke:var(--paper);stroke-width:1.6;paint-order:stroke}
.mp-star.is-on .mp-star-s svg{fill:var(--ink)}
.mp-star-ct{position:absolute;left:17px;top:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--ink);color:var(--paper);font:600 11px/19px var(--body);text-align:center}
.mp-star-ct:empty{display:none}
.mp-star-lb{position:absolute;left:32px;top:50%;transform:translateY(-50%);font:italic 400 15px/1 var(--display);color:var(--ink);white-space:nowrap;text-shadow:0 0 3px var(--paper),0 0 3px var(--paper),0 0 6px var(--paper);pointer-events:none}
.mp-star.is-many .mp-star-lb{left:40px}
.mp-star.is-on .mp-star-lb{font-weight:600}
.mp-star:focus-visible{outline:2px solid #796248;outline-offset:3px}

.maplibregl-ctrl-attrib{font-size:10px!important;background:rgba(246,243,236,.85)!important}
.maplibregl-ctrl-group{border-radius:0!important;box-shadow:none!important;border:1px solid var(--rule)!important;background:var(--paper)!important}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--rule)!important}
.maplibregl-cooperative-gesture-screen{font:.9rem/1.4 var(--body)!important;background:rgba(37,34,30,.55)!important}
.mp-here{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink);background:rgba(37,34,30,.12)}
.mp-tag{background:var(--paper);border:1px solid var(--rule);padding:3px 8px;font:12px/1.35 var(--body);color:var(--ink);white-space:nowrap;box-shadow:0 4px 10px -6px rgba(37,34,30,.4)}
.mp-tag b{font-weight:600}
[data-tvs-map].is-failed{background:var(--stone)}

/* ── /map */
.map-page main{min-height:auto}
.mp-mast{padding:clamp(2rem,4vw,3.25rem) 0 0}
.mp-mast h1{font:400 clamp(2.4rem,4.6vw,4.2rem)/1.06 var(--display);letter-spacing:-.04em;margin:.9rem 0 0;max-width:22ch;text-wrap:balance}
.mp-mast .sub{font-size:1rem;color:var(--ink-2);margin:.9rem 0 0}
.mp-mast .sub svg{width:15px;height:15px;fill:var(--star);vertical-align:-2px}
.mp-tools{display:flex;flex-wrap:wrap;gap:10px 10px;align-items:center;padding-top:1.4rem;padding-bottom:1.2rem}
.mp-tools form{flex:0 1 420px;display:flex;min-width:0}
.mp-tools input{width:100%;min-width:0;min-height:48px;border:1px solid var(--rule);border-radius:0;background:transparent;padding:.75rem 1rem;color:var(--ink);font-size:1rem}
.mp-tools input::placeholder{color:var(--muted)}
.mp-tools input:focus-visible{outline:2px solid #796248;outline-offset:2px}
.mp-chip{min-height:48px;padding:0 1rem;border:1px solid var(--rule);background:transparent;color:var(--ink);font-size:.875rem;white-space:nowrap;display:inline-flex;align-items:center;gap:.45rem}
.mp-chip:hover{background:var(--stone)}
.mp-chip[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mp-chip svg{width:14px;height:14px;fill:var(--star)}
.mp-chip[aria-pressed=true] svg{fill:#e6c58f}
.mp-chip .n{opacity:.7}
.mp-states{display:flex;flex-wrap:wrap;gap:0 1.1rem;margin-left:auto}
.mp-states button{background:none;border:0;padding:0;min-height:44px;font-size:.84rem;color:var(--ink-2);border-bottom:1px solid transparent}
.mp-states button:hover,.mp-states button:focus-visible{color:var(--ink);border-color:var(--ink)}
.mp-split{display:grid;grid-template-columns:400px minmax(0,1fr);height:min(80svh,860px);min-height:560px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.mp-list{border-right:1px solid var(--rule);overflow:auto;background:var(--paper);overscroll-behavior:contain}
.mp-list{scrollbar-width:thin;scrollbar-color:var(--rule-2) transparent}.mp-list::-webkit-scrollbar{width:6px}.mp-list::-webkit-scrollbar-thumb{background:var(--rule-2)}
.mp-l-head{position:sticky;top:0;z-index:2;background:var(--paper);padding:16px 24px 12px;border-bottom:1px solid var(--rule-2);display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0}
.mp-l-head b{font:400 1.3rem/1.2 var(--display);color:var(--ink)}
.mp-l-head span{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mp-l-sec{margin:0;padding:14px 24px 6px;font:500 .7rem/1.5 var(--body);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);display:flex;gap:.4rem;align-items:center}
.mp-l-sec svg{width:12px;height:12px;fill:var(--star)}
.mp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .8rem;padding:13px 24px;border-top:1px solid var(--rule-2);text-decoration:none;color:var(--ink)}
.mp-row:hover,.mp-row:focus-visible,.mp-row.is-sel{background:var(--stone)}
.mp-row .mp-nm{font-size:1rem;line-height:1.35;overflow-wrap:anywhere}
.mp-row .mp-mi{font-size:.78rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.mp-row .mp-ad{grid-column:1/-1;font-size:.83rem;color:var(--muted);line-height:1.5}
.mp-row-f{grid-template-columns:52px minmax(0,1fr) auto;align-items:center}
.mp-row-f img{width:52px;height:64px;object-fit:cover;grid-row:span 2;background:var(--stone)}
.mp-row-f .mp-nm{font:400 1.2rem/1.2 var(--display);letter-spacing:-.01em}
.mp-row-f .mp-ad{grid-column:2/-1}
.mp-l-more{margin:0;padding:16px 24px 28px;font-size:.83rem;color:var(--muted);border-top:1px solid var(--rule-2)}
.mp-l-empty{padding:28px 24px}
.mp-l-empty h2{font:400 1.7rem/1.2 var(--display);margin:0;letter-spacing:-.02em}
.mp-l-empty p{color:var(--ink-2);font-size:.93rem;margin:.8rem 0 0}
.mp-mapbox{position:relative;background:var(--map-ground)}
.mp-map{position:absolute;inset:0}
.mp-near{position:absolute;right:14px;top:14px;z-index:3;background:var(--paper);border:1px solid var(--rule);min-height:44px;padding:0 .9rem;font-size:.82rem;color:var(--ink);display:flex;align-items:center;gap:.45rem}
.mp-near:hover{background:var(--stone)}
.mp-near svg{width:14px;height:14px;stroke:var(--ink);fill:none;stroke-width:1.6}
.mp-after{padding:1.4rem 0 3rem;font-size:.9rem;color:var(--ink-2)}

/* ── The card */
.maplibregl-popup.mp-pop .maplibregl-popup-content{padding:0;border-radius:0;background:var(--paper);box-shadow:0 18px 40px -12px rgba(37,34,30,.45);border:1px solid var(--rule)}
.maplibregl-popup.mp-pop.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:#5e574e;border-width:10px 8px 0}
.mp-card{position:relative;width:330px;font:15px/1.55 var(--body);color:var(--ink)}
.mp-card-f{width:420px}
.mp-in{padding:18px 20px 16px}
.mp-k{display:flex;gap:.4rem;align-items:center;margin:0;font:500 .68rem/1.5 var(--body);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.mp-k svg{width:12px;height:12px;fill:var(--star)}
.mp-card h3{font:400 1.6rem/1.12 var(--display);letter-spacing:-.02em;margin:.35rem 0 0;padding-right:1.2rem}
.mp-ad{font-size:.86rem;color:var(--ink-2);margin:.5rem 0 0}
.mp-nw{white-space:nowrap;color:inherit}
.mp-take{font:italic 400 1.05rem/1.4 var(--display);margin:.7rem 0 0}
.mp-nb{display:flex;gap:.6rem;align-items:center;margin:.9rem 0 0;padding:.6rem .75rem;background:#efe8da;color:var(--ink);text-decoration:none}
.mp-nb span{display:flex;flex-direction:column;min-width:0}
.mp-nb small{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.mp-nb b{font:italic 400 1.1rem/1.25 var(--display)}
.mp-nb:hover{background:var(--stone)}
.mp-nb svg{width:14px;height:14px;fill:var(--star);flex:none}
.mp-nb em{font-style:normal;font-size:.82rem;color:var(--ink-2);margin-left:auto;white-space:nowrap}
.mp-acts{display:flex;border-top:1px solid var(--rule)}
.mp-acts a{flex:1;min-height:46px;display:flex;align-items:center;justify-content:center;font-size:.85rem;text-decoration:none;color:var(--ink)}
.mp-acts a+a{border-left:1px solid var(--rule)}
.mp-acts a.mp-p{background:var(--ink);color:var(--paper)}
.mp-acts a:hover{background:var(--stone)}.mp-acts a.mp-p:hover{background:#3a352f}
.mp-x{position:absolute;right:6px;top:4px;z-index:2;border:0;background:none;font-size:22px;line-height:1;color:var(--muted);padding:8px}
.mp-x:focus{outline:none}.mp-x:focus-visible{outline:2px solid #796248}
.mp-top{display:grid;grid-template-columns:130px minmax(0,1fr)}
.mp-top img{width:130px;height:100%;min-height:180px;object-fit:cover;display:block;background:var(--stone)}

/* ── /directory: the strip */
.dir-map{position:relative;display:block;height:300px;margin-top:1.75rem;border-block:1px solid var(--rule);background:var(--map-ground);text-decoration:none;color:var(--ink)}
.dir-map .m{position:absolute;inset:0}
.dir-map .open{position:absolute;left:16px;bottom:16px;z-index:3;background:var(--ink);color:var(--paper);padding:.8rem 1.1rem;font-size:.875rem}
.dir-map:hover .open{background:#3a352f}
.dir-map .key{position:absolute;right:12px;top:12px;z-index:3;background:rgba(246,243,236,.92);padding:.45rem .8rem;font-size:.75rem;color:var(--ink-2);display:flex;gap:1rem;align-items:center}
.dir-map .k-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink);margin-right:.35rem;vertical-align:1px}
.dir-map .key svg{width:13px;height:13px;fill:var(--star);vertical-align:-2px;margin-right:.3rem}

/* ── A salon page: the small map and the nearest star */
.lst-map[data-tvs-map]{position:relative;height:330px;margin-top:2rem;background:var(--map-ground);border:1px solid var(--rule)}
.lst-map .open{position:absolute;left:10px;bottom:10px;z-index:3;background:var(--paper);border:1px solid var(--rule);padding:.4rem .7rem;font-size:.78rem;color:var(--ink);text-decoration:none}
.lst-map .open:hover{background:var(--stone)}
.lst-nb{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;padding:.9rem 1rem;background:#efe8da;border:1px solid var(--rule);border-top:0;text-decoration:none;color:var(--ink);font-size:.92rem}
.lst-nb:hover{background:var(--stone)}
.lst-nb svg{width:16px;height:16px;fill:var(--star);flex:none}
.lst-nb b{font:italic 400 1.15rem/1.1 var(--display)}
.lst-nb span{margin-left:auto;color:var(--ink-2);font-size:.86rem;white-space:nowrap}

@media (max-width:1000px){.mp-states{margin-left:0;width:100%}}
@media (max-width:760px){
  .mp-tools form{flex:1 1 100%}
  .mp-split{display:block;position:relative;height:calc(100svh - 78px);min-height:520px}
  .mp-mapbox{position:absolute;inset:0}
  .mp-list{position:absolute;left:0;right:0;bottom:0;z-index:5;max-height:38%;border-right:0;border-top:1px solid var(--rule);box-shadow:0 -16px 30px -18px rgba(37,34,30,.4);transition:max-height .25s ease}
  .mp-list.is-open,.mp-list.is-card{max-height:78%}
  .mp-list::before{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--rule);margin:9px auto 0}
  .mp-l-head{cursor:pointer;padding:8px 20px 10px}
  .mp-row{padding:12px 20px}
  .mp-list .mp-card,.mp-list .mp-card-f{width:100%}
  .mp-list .mp-top{grid-template-columns:112px minmax(0,1fr);padding:12px 0 0 16px}
  .mp-list .mp-top img{width:112px;min-height:150px}
  .mp-list{scrollbar-width:none}.mp-list::-webkit-scrollbar{display:none}
  .mp-near{top:auto;bottom:calc(38% + 12px);right:12px}
  .dir-map{height:220px}
}