/* ============================================================
   DIRECTORY (consumer) — self-contained light design system.
   Powers the calm consumer directory: home, country, city, area,
   claimed salon and unclaimed skeleton listings. Does NOT depend on
   theme.css (the B2B stylesheet); all tokens live here.
   Benchmark: a calm consumer directory (Fresha / Booksy), true to
   the Lash Create brand (peach canvas, near-black grotesk, copper
   Instrument-Serif accents), never an over-branded marketing page.
   ============================================================ */

:root{
  --ink:#1b120c; --panel:#131110; --paper:#fbf6f1; --paper2:#f6ede3;
  --peach:#f7e0d2; --peach2:#f1cdba;
  --rose:#c0784f; --rose-d:#a5623c; --rose-deep:#8a3f29;
  --band:linear-gradient(100deg,#f2cdb4 0%,#e4ab93 50%,#d39a85 100%);
  --line:rgba(27,18,12,.12); --line-2:rgba(27,18,12,.2); --muted:#7a6b60; --star:#c0784f;
  --serif:'Instrument Serif',Georgia,serif;
  --ease:cubic-bezier(.22,1,.36,1);
  /* Softer, layered "premium" shadow — matches the polished home. */
  --shadow:0 2px 6px -3px rgba(27,18,12,.18),0 30px 66px -30px rgba(124,63,44,.42);
  --shadow-sm:0 1px 3px -1px rgba(27,18,12,.14),0 16px 34px -22px rgba(124,63,44,.34);
  --r:22px; --r-lg:26px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--ink);background:var(--paper);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1340px;margin:0 auto;padding:0 clamp(18px,4vw,32px)}
.serif{font-family:var(--serif);font-weight:400;font-style:italic}

/* ---------- shared type ---------- */
.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--rose);
  display:inline-flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:38px;height:1.5px;background:var(--rose);flex:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(160deg,#33251c,var(--ink) 60%);color:#fbe4d6;
  font-weight:700;font-size:14px;letter-spacing:.02em;padding:15px 28px;border-radius:14px;text-decoration:none;
  border:0;cursor:pointer;font-family:inherit;transition:background .2s,transform .2s,box-shadow .2s;
  box-shadow:inset 0 1px 0 rgba(247,224,210,.16),0 14px 30px -16px rgba(27,18,12,.6)}
.btn:hover{background:linear-gradient(160deg,#3d2c21,#241811 60%);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(247,224,210,.2),0 20px 40px -18px rgba(27,18,12,.66)}
.btn.light{background:#fff;color:var(--ink)}
.btn.light:hover{background:var(--peach)}
.arr{font-weight:400}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.ghost{display:inline-flex;align-items:center;gap:10px;padding:17px 30px;border-radius:100px;
  border:1px solid var(--line-2);color:var(--ink);font-weight:600;font-size:14px;letter-spacing:.04em;
  text-decoration:none;background:transparent;cursor:pointer;font-family:inherit;transition:background .2s,border-color .2s}
.ghost:hover{background:rgba(27,18,12,.05);border-color:rgba(27,18,12,.35)}
.ghost .arr{transition:transform .3s var(--ease)}
.ghost:hover .arr{transform:translateX(5px)}
.ghost.sm{padding:10px 18px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* ---------- top nav (sticky, consumer-native) ---------- */
.topbar{position:sticky;top:0;z-index:900;background:rgba(251,246,241,.85);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.topbar .row{padding:16px clamp(20px,4vw,40px);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{width:28px;height:28px;object-fit:contain;display:block}
.brand .wm{font-weight:700;letter-spacing:.34em;text-transform:uppercase;font-size:14px;color:var(--ink)}
.cnav{display:flex;gap:2px;background:rgba(255,255,255,.55);backdrop-filter:blur(12px);
  border:1px solid rgba(27,18,12,.07);border-radius:100px;padding:6px}
.cnav a{font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#5a4a40;
  padding:9px 18px;border-radius:100px;transition:background .2s,color .2s}
.cnav a:hover{color:var(--ink);background:rgba(255,255,255,.7)}
.cnav a[aria-current="page"]{color:var(--ink);background:#fff;box-shadow:0 1px 3px rgba(27,18,12,.08)}
.spacer{flex:1}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:13px;color:var(--muted);font-weight:600;padding:22px 0 0;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.crumbs a{transition:color .2s}
.crumbs a:hover{color:var(--rose-d)}
.crumbs .sep{opacity:.5}
.crumbs .cur{color:var(--ink)}

/* ============================================================
   LISTING / SALON PROFILE (claimed + unclaimed skeleton share this)
   ============================================================ */
.profile{margin-top:16px}
.cover{position:relative;height:clamp(150px,26vw,224px);border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg,#fdeade 0%,#f3c3ae 55%,#dd9280 120%);
  box-shadow:var(--shadow)}
.cover::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 100% at 14% 4%,rgba(255,255,255,.5),transparent 52%)}
.cover .motif{position:absolute;z-index:0;top:24px;right:30px;width:74px;height:74px;opacity:.28;
  stroke:#7c3f2c;fill:none;stroke-width:1.3}
.cover .flag{position:absolute;z-index:1;left:22px;top:20px;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(6px);border-radius:100px;padding:8px 14px;
  font-size:12px;font-weight:800;letter-spacing:.04em;color:#6e3f2c}
.cover .flag i{width:7px;height:7px;border-radius:50%;background:var(--rose);display:block}
.cover .photocue{position:absolute;z-index:1;right:22px;bottom:20px;font-size:12.5px;font-weight:600;
  color:#7c3f2c;opacity:.8}
/* claimed salons put a real banner photo in the cover */
.cover img.banner{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:brightness(.9)}

/* claimed profile — larger banner with the identity overlaid (light theme) */
.profile.claimed .cover{height:clamp(300px,42vw,440px);align-items:flex-end}
.profile.claimed .cover-grad{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(24,14,9,.82) 0%,rgba(24,14,9,.34) 34%,rgba(24,14,9,0) 62%)}
.profile.claimed .cover-head{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:flex-end;gap:clamp(16px,2vw,22px);padding:clamp(20px,3vw,36px)}
.profile.claimed .avatar{width:clamp(74px,8vw,96px);height:clamp(74px,8vw,96px);margin-top:0;align-self:flex-end;
  border:4px solid rgba(255,255,255,.94);border-radius:22px;box-shadow:0 16px 36px -16px rgba(0,0,0,.65)}
.profile.claimed .pmeta{padding-bottom:2px}
.profile.claimed .pmeta h1{color:#fff;letter-spacing:-.025em;text-shadow:0 2px 26px rgba(0,0,0,.4)}
.profile.claimed .pstat{color:rgba(255,255,255,.92);margin-top:9px}
.profile.claimed .pstat .rate{color:#fff}
.profile.claimed .pstat .rate small{color:rgba(255,255,255,.72)}
.profile.claimed .pstat .cat{color:#ffd7bf}
.profile.claimed .pstat .dot{background:rgba(255,255,255,.42)}
.profile.claimed .pstat .src{color:rgba(255,255,255,.74)}
.profile.claimed .pactions{display:flex;gap:9px;flex-wrap:wrap;padding:18px 2px 0}
.avail-line{display:flex;align-items:center;gap:8px;margin:12px 2px 0;padding:0;
  font-size:13.5px;font-weight:700;letter-spacing:.01em;color:var(--muted)}
.avail-line.today{color:var(--rose-deep)}
.avail-line .dotlive{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.avail-line.today .dotlive{background:var(--rose);box-shadow:0 0 0 0 rgba(192,120,79,.5);animation:availpulse 2.4s var(--ease) infinite}
@keyframes availpulse{0%{box-shadow:0 0 0 0 rgba(192,120,79,.45)}70%{box-shadow:0 0 0 7px rgba(192,120,79,0)}100%{box-shadow:0 0 0 0 rgba(192,120,79,0)}}

.phead{display:flex;align-items:flex-end;gap:22px;padding:0 clamp(6px,2vw,20px);margin-top:16px;position:relative;z-index:2}
.avatar{width:104px;height:104px;flex:none;border-radius:26px;display:grid;place-items:center;
  font-family:var(--serif);font-style:italic;font-size:52px;color:var(--rose-deep);background:#fff;
  border:5px solid #fff;box-shadow:var(--shadow);overflow:hidden;align-self:flex-start;margin-top:-72px}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:21px}
.pmeta{flex:1;min-width:0;padding-bottom:4px}
.pmeta h1{font-size:clamp(26px,3.8vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.04}
.pstat{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:11px;font-size:14.5px;font-weight:600;color:#5b4d43}
.pstat .rate{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:800}
.pstat .rate .stars{color:var(--star);letter-spacing:1px;font-size:15px}
.starbar{position:relative;display:inline-block;white-space:nowrap;line-height:1;vertical-align:middle}
.starbar::before{content:"★★★★★";color:#e0d7cf}
.starbar .fill{position:absolute;top:0;left:0;overflow:hidden;white-space:nowrap;color:var(--star)}
.pstat .rate small{color:var(--muted);font-weight:600}
.pstat .dot{width:4px;height:4px;border-radius:50%;background:#c9b6a8}
.pstat .cat{color:var(--rose-d);font-weight:800}
.pstat .src{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-weight:600;font-size:13px}
.pstat .src svg{width:13px;height:13px}
.pactions{display:flex;gap:9px;flex:none;padding-bottom:6px}
.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:14px;font-weight:600;letter-spacing:.04em;
  padding:13px 22px;border-radius:100px;border:1px solid var(--line-2);background:transparent;color:var(--ink);
  transition:border-color .2s,background .2s}
.pbtn:hover{border-color:rgba(27,18,12,.35);background:rgba(27,18,12,.05)}
.pbtn svg{width:16px;height:16px;stroke:var(--rose);fill:none;stroke-width:2}
.pbtn.solid{background:linear-gradient(160deg,#33251c,var(--ink) 60%);color:#fbe4d6;border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(247,224,210,.16),0 12px 26px -14px rgba(27,18,12,.6)}
.pbtn.solid:hover{background:linear-gradient(160deg,#3d2c21,#241811 60%)}
.pbtn.solid svg{stroke:#fbe4d6}

/* claim funnel banner (the single deliberate saturated CTA) */
.claim{margin-top:26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:linear-gradient(120deg,#2a1712,#5c2f1f);color:#fff;border-radius:20px;padding:20px 24px;
  box-shadow:0 28px 56px -34px rgba(42,23,18,.8)}
.claim .ct{flex:1;min-width:240px}
.claim b{font-size:19px;font-weight:800;letter-spacing:-.01em}
.claim b em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--peach)}
.claim p{margin-top:4px;font-size:14px;color:#f0cebd;font-weight:500;max-width:60ch}
.claim .btn{white-space:nowrap;flex:none}

/* body layout */
.layout{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(22px,3vw,34px);padding:30px 0 60px;align-items:start}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,28px);margin-bottom:18px}
.card h2{font-size:21px;font-weight:800;letter-spacing:-.015em;color:var(--ink);margin-bottom:15px;line-height:1.1}
.card h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;color:var(--rose-deep)}
.card h2 + .lead{margin-top:-2px}
/* claimed-page cards: soft lift + uppercase labels echoing the booking page */
.layout .card{box-shadow:var(--shadow-sm)}
.layout .card .chead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:16px}
.layout .card .chead h2{margin:0;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-deep);line-height:1.2}
.layout .card .csub{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card p{color:#5b4d43;line-height:1.7}
.card p + p{margin-top:12px}
.hl{font-family:var(--serif);font-style:italic;color:var(--rose-deep)}

.svc{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.svc span{background:linear-gradient(155deg,#fdeade,#f6cdbb);border:1px solid rgba(138,63,41,.14);
  border-radius:100px;padding:9px 15px;font-size:13.5px;font-weight:700;color:#7c3f2c}
.note{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:16px;
  padding-top:15px;border-top:1px solid var(--line)}

/* verified client reviews (claimed listings) */
.reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.rv{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.rv-st{color:var(--star);letter-spacing:1.5px;font-size:15px;margin-bottom:8px}
.rv blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.5;color:var(--ink)}
.rv figcaption{margin-top:10px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--muted)}

.dir-map{height:280px;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.maplink{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:13.5px;color:var(--rose-d);font-weight:800}

/* aside cards */
.links a{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);
  font-weight:700;font-size:14.5px;transition:color .2s}
.links a:first-of-type{padding-top:2px}
.links a:last-child{border:0;padding-bottom:0}
.links a:hover{color:var(--rose-d)}
.links svg{width:19px;height:19px;stroke:var(--rose);fill:none;stroke-width:2;flex:none}
.links .mut{color:var(--muted);font-weight:600;font-size:13px;margin-left:auto}

.hours{list-style:none;font-size:14px}
.hours li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);color:#5b4d43;font-weight:600}
.hours li:last-child{border:0}
.hours .today{color:var(--ink);font-weight:800}
.hours .closed{color:#b06a5a}

.owner-aside{background:linear-gradient(155deg,#fdeade,#f3c3ae);border:1px solid rgba(138,63,41,.16)}
.owner-aside h2{color:var(--rose-deep)}
.owner-aside p{color:#6e3f2c}
.owner-aside .btn{margin-top:16px}
.owner-aside .free{margin-top:12px;font-size:12px;font-weight:700;color:#7c3f2c;opacity:.85}

/* claimed-salon extras: work/facility gallery, team, embedded map */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery .shot{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;background:#f4e7dd;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.gallery .shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
/* soft base scrim so date badges read + the tiles feel editorial, not flat */
.gallery .shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(20,13,9,.34) 0%,rgba(20,13,9,0) 34%);
  opacity:.85;transition:opacity .4s var(--ease)}
.gallery .shot:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.gallery .shot:hover img{transform:scale(1.07)}
.gallery .shot:hover::after{opacity:1}
/* recent-work mosaic: one feature tile + smaller supporting shots, date-badged */
.gallery.mosaic{grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:14px}
.gallery.mosaic .shot.feat{grid-column:span 2;grid-row:span 2;border-radius:var(--r-lg)}
.gallery .shotdate{position:absolute;left:11px;bottom:11px;z-index:1;background:rgba(20,13,9,.52);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.03em;padding:5px 11px;border-radius:100px;border:1px solid rgba(255,255,255,.14)}
.dir-map iframe{width:100%;height:100%;border:0}
.staff{display:grid;gap:15px}
.staff .member{display:flex;align-items:center;gap:13px}
.staff .member img,.staff .member .init{width:48px;height:48px;border-radius:50%;flex:none}
.staff .member img{object-fit:cover}
.staff .member .init{display:grid;place-items:center;background:#f4e7dd;border:1px solid var(--line);
  color:var(--rose-deep);font-family:var(--serif);font-style:italic;font-size:22px}
.staff .nm{font-weight:700;font-size:15px;letter-spacing:-.01em}
.staff .ro{font-size:13px;color:var(--muted);font-weight:600}
.book-hours{color:#5b4d43;line-height:1.7;font-size:14.5px}
.card.links h2{margin-bottom:8px}

/* ============================================================
   HERO GALLERY (claimed) — Fresha-style 1+4 tiled, opens a lightbox.
   Feature tile = the app-chosen banner (#sp-banner); the rest pool the
   salon's recent-work + facility photos.
   ============================================================ */
.hero-gallery{margin-top:18px;display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;
  gap:10px;height:clamp(300px,42vw,470px)}
.hg-tile{position:relative;overflow:hidden;border:0;padding:0;cursor:pointer;background:#f4e7dd;
  border-radius:16px;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.hg-tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.hg-tile::after{content:"";position:absolute;inset:0;background:rgba(20,13,9,0);transition:background .3s var(--ease)}
.hg-tile:hover img{transform:scale(1.05)}
.hg-tile:hover::after{background:rgba(20,13,9,.08)}
.hg-tile:focus-visible{outline:3px solid var(--rose);outline-offset:2px}
.hg-feat{grid-row:1/3;border-radius:var(--r-lg)}
.hg-count{position:absolute;z-index:2;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;
  background:rgba(251,246,241,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--ink);font-size:13px;font-weight:800;letter-spacing:.01em;padding:9px 14px;border-radius:100px;
  box-shadow:0 6px 18px -8px rgba(27,18,12,.5)}
.hg-count svg{stroke:var(--rose-deep)}
.hg-more::after{background:rgba(20,13,9,.16)}
@media(max-width:900px){
  .hero-gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto}
  .hg-feat{grid-column:1/3;aspect-ratio:16/10;grid-row:auto}
  .hg-tile:not(.hg-feat){aspect-ratio:1}
}
@media(max-width:560px){
  .hero-gallery{gap:8px}
  .hg-tile:nth-child(4){display:none}
}

/* gallery block (Option B) — tiled gallery kept in the body, under the
   branded banner hero; heading matches the uppercase card labels */
.gallery-block{margin-top:clamp(22px,3vw,34px)}
.gallery-block .chead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px}
.gallery-block .chead h2{margin:0;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-deep);line-height:1.2}
.gallery-block .csub{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.gallery-block .hero-gallery{margin-top:0}

/* identity row — sits on paper under the hero gallery (dark text) */
.id-row{display:flex;align-items:center;gap:20px;margin-top:22px;flex-wrap:wrap}
.id-row .avatar{margin-top:0;align-self:center;width:88px;height:88px;flex:none}
.id-row .pmeta{flex:1;min-width:240px;padding-bottom:0}
.id-row .pactions{padding-bottom:0}
.id-row .avail-line{margin:10px 0 0}
@media(max-width:640px){
  .id-row{align-items:flex-start}
  .id-row .pactions{width:100%}
  .id-row .pbtn{flex:1 1 40%;justify-content:center}
  .id-row .pbtn.solid{flex-basis:100%}
}

/* full-width map band closing the page — spans both columns so it always
   lines up edge to edge, with the address in the card subtitle */
.mapband{margin:0 0 64px;box-shadow:var(--shadow-sm)}
.mapband .chead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:16px}
.mapband .chead h2{margin:0;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-deep);line-height:1.2}
.mapband .csub{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mapband .dir-map{height:clamp(300px,32vw,420px)}
.mapband .maplink{margin-top:14px}
@media(max-width:880px){.mapband .dir-map{height:300px}}

/* ---------- lightbox (full-screen photo browser) ---------- */
.lb-scrim{position:fixed;inset:0;z-index:950;display:flex;align-items:center;justify-content:center;
  gap:clamp(6px,2vw,26px);padding:clamp(14px,4vw,48px);background:rgba(16,10,7,.93);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lb-scrim[hidden]{display:none}
.lb-stage{margin:0;max-width:min(1100px,92vw);display:flex;flex-direction:column;align-items:center;gap:14px}
.lb-stage img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:14px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.lb-count{color:rgba(255,255,255,.82);font-size:13px;font-weight:700;letter-spacing:.06em}
.lb-close{position:absolute;top:clamp(12px,2.5vw,26px);right:clamp(12px,2.5vw,26px);width:44px;height:44px;
  border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s}
.lb-close:hover{background:rgba(255,255,255,.22)}
.lb-nav{flex:none;width:52px;height:52px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.lb-nav:hover{background:rgba(255,255,255,.22)}
@media(max-width:560px){.lb-nav{position:absolute;bottom:22px;z-index:3}.lb-prev{left:24px}.lb-next{right:24px}}

/* country hub: city tiles */
.hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;padding:30px 0 64px}
.hubtile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;transition:.16s}
.hubtile:hover{border-color:var(--rose);box-shadow:0 12px 30px rgba(27,18,12,.10);transform:translateY(-2px)}
.hubtile h3{font-size:18px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px}
.hubtile p{font-size:13.5px;color:var(--muted);font-weight:600}

/* ============================================================
   CITY / COUNTRY / AREA HUB — two-pane list + map, filters, SEO body
   ============================================================ */
.hero-search{background:radial-gradient(120% 92% at 50% -12%,#fdf4ec 0%,#f7e6d9 46%,#f0d4c0 100%);border-bottom:1px solid var(--line);padding:40px 0 28px;text-align:center}
.hero-search .crumbs{padding:0 0 12px;justify-content:center}
.hero-search h1{font-size:clamp(30px,4.4vw,46px);line-height:1.04;margin:.1em auto .25em;max-width:18ch;font-weight:800;letter-spacing:-.02em}
.hero-search h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;color:var(--rose)}
.hero-search p.lead{font-size:17px;color:#5b4d43;max-width:56ch;margin:0 auto 22px}
.searchbar{display:flex;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(27,18,12,.10);border-radius:16px;padding:10px;max-width:720px;margin:0 auto;text-align:left}
.searchbar .fld{display:flex;align-items:center;gap:9px;flex:1;min-width:180px;padding:8px 12px;border-radius:10px}
.searchbar .fld+.fld{border-left:1px solid var(--line)}
.searchbar input{border:0;outline:0;font:inherit;background:transparent;width:100%;min-width:0;color:var(--ink)}
.searchbar input::placeholder{color:#a68a78}
.searchbar svg{width:18px;height:18px;stroke:var(--rose);fill:none;stroke-width:2;flex:none}
.searchbar .go{background:var(--ink);color:#fdf2eb;border:0;border-radius:12px;padding:0 26px;font:inherit;
  font-weight:700;letter-spacing:.02em;cursor:pointer;transition:background .2s}
.searchbar .go:hover{background:#33231a}

/* filter / sort bar */
.filters{position:sticky;top:57px;z-index:800;background:var(--paper);border-bottom:1px solid var(--line);padding:12px 0}
.filters .wrap{max-width:1440px;padding:0 clamp(20px,4vw,56px)}
.filters .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:600;
  color:#4a3d34;cursor:pointer;white-space:nowrap;font-family:inherit;transition:border-color .2s,color .2s,background .2s}
.chip:hover{border-color:var(--rose)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.svc.on{background:var(--rose);border-color:var(--rose);color:#fff}
.filters .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-right:2px}
.filters select{font:inherit;font-weight:600;font-size:13.5px;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:8px 12px;color:#4a3d34}
.divider{width:1px;height:24px;background:var(--line);margin:0 4px}

/* two-pane list + map */
.splithead{max-width:1680px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.split{display:grid;grid-template-columns:minmax(420px,560px) 1fr;gap:24px;align-items:stretch;
  max-width:1680px;margin:0 auto 64px;padding:0 clamp(20px,4vw,56px)}
.split.nomap{grid-template-columns:1fr;max-width:760px;margin:0 auto}
.slist{padding:0;width:100%}
#rows .srow:last-child{margin-bottom:0}
.split.nomap .slist{margin:0 auto}
.count{font-size:14px;color:var(--muted);margin:4px 0 16px}
.count b{color:var(--ink)}
/* image-led salon cards (Fresha style): consistent 1:1 logo tile, premium tick */
#rows{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin:0}
.srow{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:0;margin:0;transition:.16s;cursor:pointer;text-align:left}
.srow:hover,.srow.hot{border-color:var(--rose);box-shadow:0 12px 34px rgba(27,18,12,.12);transform:translateY(-2px)}
.srow .cover{position:relative;aspect-ratio:1/1;height:auto;margin:14px 14px 0;background:linear-gradient(155deg,#fbeee4,#f2d7c5);
  display:grid;place-items:center;overflow:hidden;border-radius:14px;border:1px solid var(--line)}
.srow .cover img{width:100%;height:100%;object-fit:cover;object-position:center}
.srow .cover .mono{font-weight:800;font-size:64px;line-height:1;color:#a5623c}
.srow .rbody{padding:12px 15px 15px;display:flex;flex-direction:column;gap:4px}
.srow .nm{display:flex;align-items:center;gap:5px;min-width:0}
.srow h2,.srow h3{margin:0;font-size:16.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcount{font-weight:500;font-size:.72em;color:var(--muted);letter-spacing:-.005em;font-style:normal;white-space:nowrap}
/* rose-gold "premium" verified tick + hover tooltip (claimed salons only) */
.vtick{position:relative;display:inline-flex;flex:none;cursor:help}
.vtick svg{width:17px;height:17px;display:block;filter:drop-shadow(0 1px 1px rgba(120,60,40,.25))}
.vtick::after{content:"Lash Create Premium user";position:absolute;bottom:calc(100% + 9px);left:50%;
  transform:translateX(-50%) translateY(4px);background:var(--ink);color:#fff;font-size:11.5px;font-weight:600;
  white-space:nowrap;padding:6px 10px;border-radius:8px;opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;box-shadow:0 8px 22px rgba(27,18,12,.28);z-index:6}
.vtick::before{content:"";position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink);opacity:0;transition:opacity .18s;z-index:6}
.vtick:hover::after,.vtick:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
.vtick:hover::before,.vtick:focus-visible::before{opacity:1}
.srow .rate{display:flex;align-items:center;gap:4px;font-size:13px;color:#4a3d34;margin-top:1px}
.srow .rate .stars{color:var(--star)}
.srow .rate b{font-weight:700;color:var(--ink)}
.srow .rate .n{color:var(--muted)}
.srow .meta{font-size:13px;color:var(--muted);display:flex;gap:5px;align-items:center;margin:0}
.srow .meta svg{width:14px;height:14px;stroke:var(--rose);fill:none;stroke-width:2;flex:none}
.srow .cat{font-size:12.5px;color:var(--muted);margin-top:1px}
.srow .site{font-size:12.5px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.mapwrap{height:100%;min-height:420px}
.mapwrap .dir-map{width:100%;height:100%;border:0;border-radius:16px}
.leaflet-container{background:#efe7df;font-family:inherit}
.pin{filter:drop-shadow(0 3px 4px rgba(27,18,12,.35))}
a.pop{display:block;font-family:'Hanken Grotesk',sans-serif;text-decoration:none;color:var(--ink);cursor:pointer}
.pop b{font-size:14px;display:block}
.pop .r{color:var(--star);font-size:12px;display:inline-block;margin-top:2px}
.pop .popcta{display:block;margin-top:6px;color:var(--rose-deep);font-weight:700;font-size:12.5px}
a.pop:hover .popcta{text-decoration:underline}
a.pop:hover b{color:var(--rose-deep)}
.no-results{background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px;text-align:center}
.no-results h3{font-size:20px;font-weight:800;margin-bottom:8px}
.no-results p{color:var(--muted);max-width:44ch;margin:0 auto}

/* business acquisition band (peach) */
.owner{background:var(--peach);color:var(--ink);padding:46px 0;border-top:1px solid rgba(27,18,12,.08)}
.owner .in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.owner h2{font-weight:800;font-size:31px;letter-spacing:-.02em;line-height:1.05;margin:0 0 6px;color:var(--ink)}
.owner h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;color:var(--rose-deep)}
.owner p{margin:0;color:#6b5849;max-width:52ch}
.owner .btn{white-space:nowrap;flex:none}

/* SEO city body + internal links */
.seo{padding:46px 0;border-top:1px solid var(--line)}
.seo h2{font-weight:800;font-size:28px;letter-spacing:-.02em;line-height:1.06;margin:0 0 12px;color:var(--ink)}
.seo h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;color:var(--rose-deep)}
.seo p{color:#5b4d43;max-width:74ch;line-height:1.65;margin:0 0 14px}
.seo p a{color:var(--rose-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:20px}
.linkgrid a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-weight:600;font-size:14px}
.linkgrid a:hover{border-color:var(--rose);color:var(--rose)}
.linkgrid small{display:block;color:var(--muted);font-weight:500;font-size:12px}
.nearbygrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin:20px 0 0}
.nearbygrid .srow{margin:0}
.nearby-salons .more{display:inline-block;margin-top:18px;font-weight:700;font-size:14.5px;color:var(--rose-d)}
.nearby-salons .more:hover{color:var(--rose)}
.seo .seo-sub{font-size:15px;font-weight:700;color:var(--ink);margin:26px 0 0;letter-spacing:-.01em}
.faq{margin-top:22px;max-width:74ch}
.faq details{border-top:1px solid var(--line);padding:2px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative;font-weight:700;font-size:16px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-weight:400;font-size:22px;color:var(--rose-deep);transition:transform .2s}
.faq details[open] summary::after{content:"\2013"}
.faq details p{color:#5b4d43;line-height:1.65;margin:0 0 16px}
.faq details p a{color:var(--rose-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}

@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .mapwrap{position:relative;top:0;height:360px;order:-1;border-radius:16px;overflow:hidden;margin:16px 22px 0}
  .mapwrap .dir-map{border-radius:16px}
  .slist{margin:0 auto}
}

/* ---------- footer (dark anchor; full B2B links live here for SEO) ---------- */
.foot{background:var(--panel);color:#cbb9ab;padding:52px 0 32px}
.foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
.foot .brand .wm{color:#fff}
.foot .blurb{max-width:32ch;font-size:14px;line-height:1.6;margin-top:14px;color:#b7a698}
.foot h3{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px;font-weight:700}
.foot ul{list-style:none;display:grid;gap:9px}
.foot a{font-size:14px;color:#cbb9ab;transition:color .2s}
.foot a:hover{color:var(--rose)}
.foot .base{border-top:1px solid rgba(255,255,255,.1);margin-top:30px;padding-top:18px;font-size:12.5px;color:#8a7a6d}

@media(max-width:880px){
  .layout{grid-template-columns:1fr}
  .cnav{display:none}
  .foot .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .phead{flex-direction:column;align-items:flex-start;gap:14px}
  .pactions{width:100%;flex-wrap:wrap}
  .pbtn{flex:1 1 40%;justify-content:center}
  .pbtn.solid{flex-basis:100%}
  .foot .cols{grid-template-columns:1fr}
  .profile.claimed .cover{height:clamp(240px,58vw,320px)}
  .profile.claimed .cover-head{flex-direction:column;align-items:flex-start;gap:12px}
  /* In the stacked (column) cover, the row-layout align-self:flex-end would shove
     the logo to the right edge, detaching it from the name — pin it back left. */
  .profile.claimed .avatar{align-self:flex-start;width:clamp(64px,17vw,80px);height:clamp(64px,17vw,80px)}
  .gallery.mosaic{grid-template-columns:repeat(2,1fr)}
  .gallery.mosaic .shot.feat{grid-column:span 2;grid-row:span 1}
}
/* ---------- booking widget drawer (claimed listing) ---------- */
.bw-scrim{position:fixed;inset:0;background:rgba(20,12,8,.55);opacity:0;visibility:hidden;
  transition:opacity .28s ease;z-index:900;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.bw-scrim.open{opacity:1;visibility:visible}
.bw-drawer{position:fixed;top:0;right:0;height:100%;width:440px;max-width:100vw;background:var(--paper);
  box-shadow:-16px 0 48px rgba(20,12,8,.28);transform:translateX(100%);
  transition:transform .32s var(--ease);z-index:901;display:flex;flex-direction:column}
.bw-drawer.open{transform:translateX(0)}
.bw-bar{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);
  background:#fff;flex:none}
.bw-bar .t{flex:1;font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.bw-bar .t span{color:var(--rose-d)}
.bw-close{width:34px;height:34px;border:0;border-radius:50%;background:var(--peach);color:var(--ink);cursor:pointer;
  font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center}
.bw-close:hover{background:var(--peach2)}
.bw-frame{flex:1;border:0;width:100%;background:var(--paper)}
@media(max-width:560px){.bw-drawer{width:100vw}}

/* ---------- booking policy card + popout ---------- */
.card.pol .pol-key{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:9px}
.card.pol .pol-key li{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.4;color:var(--ink)}
.card.pol .pol-key li svg{width:17px;height:17px;flex:none;margin-top:1px;color:var(--rose)}
.pol-btn{display:inline-flex;align-items:center;gap:5px;width:100%;justify-content:center;
  border:1px solid var(--line-2);border-radius:99px;background:var(--paper2);color:var(--ink);
  font:inherit;font-size:13px;font-weight:700;padding:10px 14px;cursor:pointer;transition:border-color .15s,background .15s}
.pol-btn:hover{border-color:var(--peach2);background:#fff}
.pol-scrim{position:fixed;inset:0;background:rgba(20,12,8,.5);opacity:0;visibility:hidden;
  transition:opacity .25s ease;z-index:880;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.pol-scrim.open{opacity:1;visibility:visible}
.pol-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);opacity:0;visibility:hidden;
  width:min(440px,calc(100vw - 32px));max-height:min(82vh,660px);overflow:auto;background:#fff;border-radius:20px;
  box-shadow:var(--shadow);z-index:881;transition:transform .28s var(--ease),opacity .28s,visibility .28s}
.pol-modal.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible}
.pol-head{display:flex;align-items:center;gap:12px;padding:18px 20px 14px;position:sticky;top:0;background:#fff;
  border-bottom:1px solid var(--line)}
.pol-head h3{margin:0;flex:1;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.pol-x{width:32px;height:32px;border:0;border-radius:50%;background:var(--peach);color:var(--ink);cursor:pointer;
  font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;flex:none}
.pol-x:hover{background:var(--peach2)}
.pol-body{padding:6px 20px 20px}
.pol-sec{padding:14px 0;border-bottom:1px solid var(--line)}
.pol-sec:last-child{border-bottom:0;padding-bottom:2px}
.pol-sec h4{margin:0 0 6px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--rose-d)}
.pol-sec p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink)}
.pol-notes{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.pol-notes li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--ink)}
.pol-notes li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--peach2);flex:none;margin-top:7px}

/* ---- my-appointments (magic-link, no login) ---- */
.mine{max-width:660px;margin:0 auto;padding:clamp(20px,4vw,44px) 20px 60px}
.mine-head{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.mine-head .logo{width:56px;height:56px;border-radius:16px;object-fit:cover;border:1px solid var(--line);background:#fff;flex:none}
.mine-head .salon{font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--rose-deep);text-transform:uppercase}
.mine-head h1{font-size:clamp(28px,5vw,38px);line-height:1.05;margin:2px 0 0}
.mine-head h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--rose-deep)}
.mine-note{font-size:13px;color:var(--muted);margin:14px 0 28px;display:flex;align-items:center;gap:8px}
.mine-note svg{width:15px;height:15px;stroke:var(--rose);fill:none;stroke-width:2;flex:none}
.mine h2.grp{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-deep);margin:30px 0 14px}
.appt{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 20px;margin-bottom:14px}
.appt .when{flex:none;width:62px;text-align:center;border-right:1px solid var(--line);padding-right:16px}
.appt .when .d{font-size:26px;font-weight:800;line-height:1;color:var(--ink)}
.appt .when .mo{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--rose-d);margin-top:3px}
.appt .when .yr{font-size:11px;color:var(--muted);margin-top:2px}
.appt .body{flex:1;min-width:0}
.appt .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.appt .time{font-weight:800;font-size:15px}
.pill{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:100px;border:1px solid var(--line)}
.pill.ok{color:var(--rose-deep);background:var(--peach);border-color:transparent}
.pill.pending{color:var(--muted);background:var(--paper2)}
.pill.done{color:var(--muted);background:transparent}
.appt .svc{margin:8px 0 0;color:#5b4d43;font-size:14px;line-height:1.5}
.appt .due{margin:8px 0 0;font-size:13px;color:var(--muted)}
.appt .due b{color:var(--ink);font-weight:800}
.appt .acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.appt .acts a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:9px 16px;border-radius:100px;border:1px solid var(--line-2);color:var(--ink);text-decoration:none;transition:background .2s var(--ease),border-color .2s var(--ease)}
.appt .acts a.primary{background:var(--rose);border-color:var(--rose);color:#fff}
.appt .acts a.primary:hover{background:var(--rose-d);border-color:var(--rose-d)}
.appt .acts a:not(.primary):hover{background:var(--peach);border-color:transparent}
.appt.past{padding:14px 18px}
.appt.past .when .d{font-size:20px}
.mine-empty{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px;text-align:center;color:var(--muted)}
.mine-empty a{color:var(--rose-d);font-weight:800}
.mine-foot{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.6}
.mine-foot a{color:var(--rose-d);font-weight:700}
.mine-skel{height:120px;border-radius:20px;background:linear-gradient(100deg,var(--paper2) 30%,#fff 50%,var(--paper2) 70%);background-size:200% 100%;animation:mineshimmer 1.3s linear infinite;margin-bottom:14px}
@keyframes mineshimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(max-width:520px){.appt .when{width:52px;padding-right:12px}.appt{gap:12px;padding:16px}}

/* ===================================================================
   City / town results pages — streamlined search + two-pane sticky map
   =================================================================== */
/* Slim, sticky search header (replaces the tall gradient hero on results) */
.rhead{position:sticky;top:57px;z-index:850;background:rgba(251,246,241,.92);
  backdrop-filter:blur(14px);padding:14px 0}
.rhead .in{max-width:1680px;margin:0 auto;padding:0 clamp(20px,4vw,56px);
  display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.rhead .titles{min-width:220px;flex:0 1 auto}
.rhead .crumbs{padding:0 0 3px;font-size:12px;display:flex;align-items:center;gap:6px;color:var(--muted)}
.rhead .crumbs a{color:var(--muted);text-decoration:none}
.rhead .crumbs a:hover{color:var(--rose-d)}
.rhead .crumbs .sep{color:var(--line-2)}
.rhead h1{font-size:clamp(19px,2.1vw,25px);line-height:1.1;margin:0;font-weight:800;letter-spacing:-.02em}
.rhead h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--rose)}
/* Compact single-row search pill */
.cbar{display:flex;align-items:center;gap:2px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:5px 5px 5px 6px;box-shadow:0 6px 22px rgba(27,18,12,.07);
  flex:1 1 380px;max-width:640px;margin-left:auto}
.cbar .fld{display:flex;align-items:center;gap:8px;flex:1;min-width:120px;padding:7px 14px;border-radius:999px}
.cbar svg{width:17px;height:17px;stroke:var(--rose);fill:none;stroke-width:2;flex:none}
.cbar input{border:0;outline:0;font:inherit;background:transparent;width:100%;min-width:0;color:var(--ink)}
.cbar input::placeholder{color:#a68a78}
.cbar .go{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;flex:none;background:var(--ink);border:0;cursor:pointer}
.cbar .go svg{stroke:#fdf2eb;width:18px;height:18px}
.cbar .go:hover{background:#33231a}

/* Sticky filter strip under the search header */
.rfilters{position:sticky;top:135px;z-index:840;background:var(--paper);padding:11px 0}
.rfilters .in{max-width:1680px;margin:0 auto;padding:0 clamp(20px,4vw,56px);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rfilters .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.rfilters select{font:inherit;font-weight:600;font-size:13.5px;border:1px solid var(--line);
  background:#fff;border-radius:999px;padding:8px 30px 8px 14px;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a6b60' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.rfilters .maptoggle{display:none}

/* Full-width count line above the split → first card + map top align */
.rsubhead{max-width:1680px;margin:0 auto;padding:16px clamp(20px,4vw,56px) 0}
.rsubhead .rcount{font-size:14px;color:#4a3d34;margin:0}
.rsubhead .rcount b{color:var(--ink)}

/* Two-pane: scrolling list left, tall sticky map right */
.rsplit{max-width:1680px;margin:0 auto;padding:12px clamp(20px,4vw,56px) 44px;
  display:grid;grid-template-columns:minmax(430px,600px) 1fr;gap:26px;align-items:start}
.rsplit.nomap{grid-template-columns:1fr;max-width:820px}
.rsplit.nomap .rlist{margin:0 auto}
.rlist{min-width:0}
/* cell stretches to the row height (driven by the list); map sticks inside it */
.rmap-col{align-self:stretch;position:relative;min-height:420px}
.mapstick{position:sticky;top:183px}
.mapstick .dir-map{width:100%;height:520px;border-radius:18px;border:1px solid var(--line);
  box-shadow:0 14px 44px rgba(27,18,12,.10)}

/* Fresha-style rating pin: black badge, rose-gold star + rating number.
   The divIcon has a zero footprint (iconSize 0) so the badge sizes to its own
   content — no clipping when the label is "View" — and we center it over the
   geo point with a translate, sitting just above a small pointer tail. */
.ratepin-ic{overflow:visible}
.ratepin{position:absolute;left:0;top:0;transform:translate(-50%,-100%);
  background:var(--ink);color:#fff;font:700 13px/1 'Hanken Grotesk',sans-serif;
  padding:7px 11px;border-radius:999px;box-shadow:0 4px 12px rgba(27,18,12,.30);
  border:2px solid #fff;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  transform-origin:50% 100%;transition:transform .14s ease,background .14s ease}
.ratepin::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid var(--ink);
  filter:drop-shadow(0 2px 1px rgba(27,18,12,.18))}
.ratepin .st{color:var(--rose);font-size:12px;margin-top:-1px}
.ratepin:hover,.ratepin.hot{background:var(--rose);transform:translate(-50%,-100%) scale(1.08);z-index:1000}
.ratepin:hover::after,.ratepin.hot::after{border-top-color:var(--rose)}
.leaflet-popup-content .pop b{font-size:14px}
.leaflet-popup-content .pop .r{color:var(--rose)}

/* stars in list rows need room so glyphs don't clip */
.srow .rate{line-height:1.35}
.srow .rate .stars{font-size:14.5px;line-height:1.35;letter-spacing:1.5px;display:inline-block}

@media(max-width:1080px){
  .rsplit{grid-template-columns:1fr;gap:0}
  .rmap-col{align-self:auto;position:fixed;inset:auto 0 0 0;top:auto;height:70vh;z-index:1200;
    transform:translateY(101%);transition:transform .3s ease;padding:0;border-radius:20px 20px 0 0;overflow:hidden}
  .rmap-col.show{transform:translateY(0)}
  .mapstick{position:static;height:100%}
  .mapstick .dir-map{height:100%!important;border-radius:20px 20px 0 0;box-shadow:none}
  .rfilters .maptoggle{display:inline-flex;align-items:center;gap:7px;margin-left:auto;
    background:var(--ink);color:#fff;border:0;border-radius:999px;padding:9px 16px;font-weight:700;font-size:13.5px;cursor:pointer}
  .rfilters .maptoggle svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2}
  .cbar{flex-basis:100%;margin-left:0;max-width:none}
  .rhead .in{gap:12px}
}

/* phones: stack the search pill into a readable full-width form, and drop the
   hardcoded sticky offsets (they assume a single-row header height) */
@media(max-width:640px){
  .rhead{position:static;padding:16px 0 4px}
  .rfilters{position:static}
  .rhead .in{gap:14px}
  .rhead .titles{text-align:center;min-width:0;width:100%}
  .rhead .crumbs{justify-content:center}
  .cbar{flex-direction:column;align-items:stretch;border-radius:16px;padding:6px;gap:0;margin:0;width:100%}
  .cbar .fld{width:100%;min-width:0;padding:13px 14px;border-radius:10px}
  .cbar .fld+.fld{border-top:1px solid var(--line)}
  .cbar .go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:auto;
    padding:13px;border-radius:12px;margin-top:6px}
  .cbar .go::after{content:"Search";color:#fdf2eb;font-weight:700}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}