@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/playfair-display-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 900;font-display:swap;src:url(fonts/playfair-display-latin-wght-italic.woff2) format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(fonts/nunito-latin-wght-normal.woff2) format("woff2")}
:root{color-scheme:light dark;--bg:#FFF9F8;--sf:#FCEFF1;--ink:#3B1F2B;--mut:#7D5A68;--ln:#F1D6DD;--pri:#A8325A;--hdr:#6B1D3A;--on:#fff;--acc:#F6B9C6;--bad:#B23A2E;--good:#2E7D4F;--ring:#C23B67;--acc-ink:#B0345E;--plum:#3B1F2B;--gold:#F5A524;--blush:#F6B9C6;--live:#2E9E5B;--dot:#E5484D;--night:#170B11;--fs-2xs:.75rem;--fs-xs:.8125rem;--fs-sm:.875rem;--fs-md:1rem;--fs-lg:1.125rem;--fs-xl:1.375rem;--fs-2xl:1.75rem;--fs-3xl:2.25rem;--fs-4xl:3rem;--r-sm:8px;--r-md:12px;--r-lg:16px;--shadow:0 1px 2px rgba(59,31,43,.06),0 6px 20px rgba(59,31,43,.07);--serif:"Playfair Display",Georgia,"Times New Roman",serif;--sans:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif}
@media(prefers-color-scheme:dark){:root{--bg:#1C1016;--sf:#29171F;--ink:#F9E9EE;--mut:#C79DAB;--ln:#47293A;--pri:#F290AC;--hdr:#4A1328;--on:#1C1016;--acc:#F6B9C6;--bad:#EF8A7A;--good:#6CC48C;--ring:#F6B9C6;--acc-ink:#F6B9C6}}
*{box-sizing:border-box}a{color:var(--pri)}body{margin:0;font:16px/1.55 var(--sans);background:var(--bg);color:var(--ink)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--acc);color:var(--plum);padding:8px;z-index:9}
.top{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--ln)}
.brand{font-weight:700;font-size:var(--fs-xl);color:var(--ink);text-decoration:none}nav{display:flex;flex-wrap:wrap;gap:4px 14px}nav a,nav button{color:var(--pri);background:none;border:0;font:inherit;cursor:pointer;padding:6px 2px;text-decoration:underline}
main{max-width:60rem;margin:0 auto;padding:16px}h1{font-size:var(--fs-2xl);margin:.2em 0 .6em}h2{font-size:var(--fs-lg);margin:1.2em 0 .4em}
.bad{color:var(--bad)}.good{color:var(--good)}.note{color:var(--mut)}
.card{background:var(--sf);border:1px solid var(--ln);border-radius:12px;padding:14px;margin:10px 0}.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
label{display:block;font-weight:600;margin:10px 0 4px}input,select,textarea{width:100%;font:inherit;padding:10px;border:1px solid var(--mut);border-radius:8px;background:var(--bg);color:var(--ink);min-height:44px}
input[type=checkbox],input[type=radio]{width:auto;min-height:auto}.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
button.btn,a.btn{display:inline-block;font:inherit;font-weight:600;padding:10px 16px;min-height:44px;border-radius:8px;border:1px solid var(--pri);background:var(--pri);color:var(--on);cursor:pointer;text-decoration:none;margin:6px 8px 0 0}
button.alt,a.alt{background:transparent;color:var(--pri)}button.danger{background:var(--bad);border-color:var(--bad);color:#fff}button:disabled{opacity:.6;cursor:wait}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.chip{display:inline-block;padding:2px 10px;border-radius:99px;font-size:var(--fs-sm);font-weight:700;background:var(--acc);color:var(--plum)}.chip.ok{background:var(--good);color:#fff}.chip.no{background:var(--bad);color:#fff}
.slots{display:flex;flex-wrap:wrap;gap:8px}.slots label{margin:0;border:1px solid var(--pri);border-radius:8px;padding:8px 12px;cursor:pointer;font-weight:600}.slots input:checked+span{text-decoration:underline}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.tabs button[aria-current=true]{outline:3px solid var(--ink);outline-offset:2px}
table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:8px;border-bottom:1px solid var(--ln);vertical-align:top}.tw{overflow-x:auto}
.foot{max-width:60rem;margin:24px auto;padding:0 16px;color:var(--mut);font-size:var(--fs-sm)}
ol.steps{display:flex;flex-wrap:wrap;gap:6px;padding:0;list-style:none;counter-reset:s;margin:8px 0 16px}
.steps li{counter-increment:s;border:1px solid var(--ln);border-radius:99px;padding:4px 12px;font-size:var(--fs-sm);color:var(--mut)}
.steps li::before{content:counter(s) ". "}.steps li.past{border-color:var(--good);color:var(--good)}
.steps li[aria-current=step]{background:var(--pri);color:var(--on);border-color:var(--pri);font-weight:700}
fieldset{border:1px solid var(--ln);border-radius:8px;margin:12px 0}legend{font-weight:600;padding:0 6px}
.ring{max-width:60rem;margin:8px auto 0;padding:0 16px}.ring .card{border-color:var(--acc);border-width:3px}
/* the call: the other person large, you small in the corner, controls underneath */
.vid{width:100%;border-radius:8px;background:#000}.mirror{transform:scaleX(-1)}
progress{width:100%;height:10px}
/* pop-up notices: errors stay until dismissed, confirmations fade by themselves */
.toasts{position:fixed;z-index:50;right:16px;top:16px;display:flex;flex-direction:column;gap:8px;width:min(26rem,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:flex-start;padding:12px 14px;border-radius:10px;border:2px solid var(--ln);background:var(--bg);color:var(--ink);box-shadow:0 8px 28px rgba(0,0,0,.28);font-weight:600;animation:toast-in .18s ease-out}
.toast.good{border-color:var(--good)}.toast.bad{border-color:var(--bad)}
.toast .toast-text{flex:1 1 12rem;min-width:0;overflow-wrap:anywhere}
.toast .toast-btn{font:inherit;font-weight:600;padding:6px 12px;min-height:36px;border-radius:8px;border:1px solid var(--pri);background:transparent;color:var(--pri);cursor:pointer}
.toast .toast-x{font:inherit;font-size:var(--fs-lg);line-height:1;min-width:36px;min-height:36px;border:0;background:transparent;color:var(--mut);cursor:pointer;border-radius:8px}
.toast button:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}
@media (max-width:640px){.toasts{top:auto;bottom:16px;left:16px;right:16px;width:auto}}
.metric b{display:block;font-size:var(--fs-2xl);line-height:1.2;margin:2px 0}.metric p{margin:4px 0 0}
/* booking: service chips, a strip of days, and a grid of times, all in one card */
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;scroll-snap-type:x proximity}
.chip-btn{flex:0 0 auto;scroll-snap-align:start;border:1px solid var(--pri);background:transparent;color:var(--pri);border-radius:99px;padding:6px 14px;min-height:40px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.chip-btn[aria-pressed=true]{background:var(--pri);color:var(--on)}.chip-btn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.times{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px}
.timepill{position:relative;margin:0;font-weight:600;display:block}.timepill input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.timepill span{display:block;text-align:center;border:1px solid var(--pri);border-radius:8px;padding:8px 4px;color:var(--pri);white-space:nowrap}
.timepill input:checked+span{background:var(--pri);color:var(--on)}.timepill input:focus-visible+span{outline:3px solid var(--ring);outline-offset:2px}
.book h3{font-size:var(--fs-md);margin:12px 0 6px;color:var(--mut)}
/* the incoming call */
.incoming{position:fixed;inset:0;z-index:300;background:rgba(23,11,17,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px}
.incoming-box{background:linear-gradient(180deg,var(--plum),var(--night));color:#fff;border-radius:24px;padding:28px 20px 18px;width:min(23rem,100%);text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.incoming-box h2{margin:18px 0 4px;font-size:var(--fs-xl);color:#fff}.incoming-box .note{color:rgba(255,255,255,.72)}.inc-what{margin:0;opacity:.9}
.incoming-box .count{font-weight:800;font-size:var(--fs-md);margin:6px 0 4px;color:var(--blush);font-variant-numeric:tabular-nums}
.inc-acts{display:flex;justify-content:space-around;gap:16px;margin:22px 0 6px}
.inc-btn{display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:none;color:#fff;font:inherit;font-weight:700;cursor:pointer;padding:0}
.inc-ring{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .15s}
.inc-btn:hover .inc-ring{transform:scale(1.06)}.inc-btn:focus-visible .inc-ring{outline:3px solid var(--gold);outline-offset:3px}.inc-btn .ic{width:30px;height:30px}
.inc-btn.yes .inc-ring{background:var(--live);animation:answer-nudge 1.6s ease-in-out infinite}.inc-btn.no .inc-ring{background:#C7423A}
.inc-tone{border:0;background:none;color:rgba(255,255,255,.75);text-decoration:underline;font:inherit;font-size:var(--fs-sm);cursor:pointer;padding:6px}
@keyframes answer-nudge{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-5px)}90%{transform:translateY(0)}}
/* the round initial that stands for the other person, with rings that pulse out while it rings */
.lav{position:relative;display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#F290AC,#A8325A);color:#fff;font-weight:800;font-size:var(--fs-2xl);flex:none}
.lav.big{width:112px;height:112px;font-size:var(--fs-4xl)}.lav .ic{width:44%;height:44%}
.lav.ringing::before,.lav.ringing::after,.lav.joining::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid rgba(242,144,172,.8);animation:lav-ring 2s ease-out infinite}
.lav.ringing::after{animation-delay:1s}.lav.joining::before{border-color:rgba(108,196,140,.9);animation-duration:1.2s}
@keyframes lav-ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.lav::before,.lav::after,.inc-btn.yes .inc-ring{animation:none!important}}
/* the Online and Available cards: words as well as colour */
.status-row{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.status{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;font-weight:700;font-size:var(--fs-sm);border:2px solid}
.status small{font-weight:600;opacity:.92}
.status.on{background:var(--good);border-color:var(--good);color:#fff}.status .dot{width:9px;height:9px;border-radius:50%;background:#fff;display:inline-block}
.status.open{border-color:var(--pri);color:var(--pri);background:transparent}
@media (prefers-reduced-motion:no-preference){.status.on .dot{animation:blink 1.6s ease-in-out infinite}}@keyframes blink{50%{opacity:.35}}
.filters{display:flex;flex-wrap:wrap;gap:8px 20px;margin:10px 0}.filters label{display:flex;align-items:center;gap:6px;margin:0;font-weight:600}
/* the rates, shown until the client chooses to book */
[hidden]{display:none!important}
.rate{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;padding:10px 0;border-top:1px solid var(--ln)}.rate:first-of-type{border-top:0}
.rate .note{margin:2px 0 0}.rate-end{display:flex;align-items:center;gap:10px;justify-content:flex-end;text-align:right;white-space:nowrap}
.btn.small{padding:6px 14px;min-height:40px;margin:0}.book-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.book-head h2{margin:0}
/* photos and the service choice */
.card .cover{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;margin-bottom:8px;background:var(--sf)}
.gallery-top{margin:8px 0 12px}.gallery-top .hero{display:block;width:100%;max-height:420px;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--sf)}
.thumbs{display:flex;gap:8px;overflow-x:auto;padding:8px 0}.thumb-btn{border:2px solid transparent;background:none;padding:0;border-radius:8px;cursor:pointer;flex:0 0 auto}
.thumb-btn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}.thumb-btn .thumb{width:84px;height:64px;object-fit:cover;border-radius:6px;display:block}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:10px 0}.photo-card .thumb{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:var(--sf)}.photo-card div{margin-top:6px}
.svc-pick{margin:8px 0}.svc-head{display:flex;align-items:center;gap:8px;font-weight:600;margin:0}.svc-opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-top:8px}

/* the home page: a green header with the search in it, categories and filters on the left, listings on the right */
.top{background:var(--hdr);color:#fff;border-bottom:0;gap:10px 18px;padding:10px 16px}
.top .brand{color:#fff;font-size:var(--fs-xl);letter-spacing:.2px}.top nav{align-items:center;gap:6px 14px}
.top nav a,.top nav button{color:#fff;text-decoration:none;font-weight:600;padding:8px 6px;border-radius:8px;min-height:40px;display:inline-flex;align-items:center}
.top nav a:hover,.top nav button:hover{background:rgba(255,255,255,.14)}
.top nav a.cta{background:var(--acc);color:var(--plum);padding:8px 16px}.top nav a.cta:hover{filter:brightness(1.06)}
.top nav a:focus-visible,.top nav button:focus-visible,.hsearch :focus-visible{outline:3px solid #fff;outline-offset:2px}
/* the typing caret already shows where you are in the search box; no frame around it (Jay, 2026-10-18) */
.hsearch input:focus,.hsearch input:focus-visible{outline:0;box-shadow:none}
.hsearch{display:flex;flex:1 1 22rem;max-width:44rem;gap:0;min-width:0}
.hsearch .hs-loc,.hsearch input,.hsearch button{border:0;min-height:44px;font:inherit;background:#fff;color:var(--plum);margin:0}
.hsearch .hs-loc{display:inline-flex;flex:0 0 auto;cursor:pointer;align-items:center;gap:6px;max-width:12rem;border-radius:10px 0 0 10px;padding:0 12px;border-right:1px solid #F1D6DD;white-space:nowrap;overflow:hidden}
.hsearch .hs-loc span:last-child{overflow:hidden;text-overflow:ellipsis}.hsearch .hs-loc .ico{width:18px;height:18px;color:var(--pri)}
.hsearch input{flex:1 1 auto;min-width:0;border-radius:0;padding:0 12px}
.hsearch button[type=submit]{border-radius:0 10px 10px 0;padding:0 16px;font-weight:700;background:#fff;color:var(--hdr);cursor:pointer;border-left:1px solid #F1D6DD}
main.wide{max-width:74rem}
.layout{display:grid;grid-template-columns:17rem minmax(0,1fr);gap:20px;align-items:start}.layout>*{min-width:0}
.side{display:flex;flex-direction:column;gap:14px}
.cats{display:block;background:var(--bg);border:1px solid var(--ln);border-radius:12px;overflow:hidden}
.cat{display:grid;grid-template-columns:2rem 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:10px 12px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ln)}
.cat:last-child{border-bottom:0}.cat .em{grid-row:1/3;font-size:var(--fs-xl);text-align:center}.cat .cn{font-weight:600}.cat small{color:var(--mut)}
.cat:hover{background:var(--sf)}.cat.on{background:var(--sf);box-shadow:inset 4px 0 0 var(--pri)}.cat:focus-visible{outline:3px solid var(--ring);outline-offset:-3px}
.filters-box{background:var(--bg);border:1px solid var(--ln);border-radius:12px;padding:10px 12px}.filters-box summary{font-weight:700;cursor:pointer;min-height:36px;display:flex;align-items:center}
.filters-box .filters{flex-direction:column;gap:6px;margin:10px 0}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:10px;margin-bottom:6px}
.qcard{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--ln);border-radius:12px;background:var(--sf);color:var(--ink);text-decoration:none}
.qcard .qi{font-size:var(--fs-2xl)}.qcard b{display:block}.qcard small{display:block;color:var(--mut)}
.qcard:hover{border-color:var(--pri)}.qcard.on{border-color:var(--pri);box-shadow:inset 0 0 0 2px var(--pri)}.qcard:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.fchips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}.fchip{padding:4px 12px;border:1px solid var(--pri);border-radius:99px;color:var(--pri);text-decoration:none;font-weight:600;background:var(--bg)}.fchip:hover{background:var(--sf)}
.listings{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));gap:14px}.listings>p{grid-column:1/-1}
.listing{display:block;border:1px solid var(--ln);border-radius:12px;overflow:hidden;background:var(--bg);color:var(--ink);text-decoration:none;transition:box-shadow .15s}
.listing:hover{box-shadow:0 6px 18px rgba(0,0,0,.18)}.listing:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.imgwrap{position:relative}.imgwrap .cover{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin:0;border-radius:0;background:var(--sf)}
.badge{position:absolute;top:8px;font-size:var(--fs-2xs);font-weight:700;padding:2px 9px;border-radius:99px;background:rgba(255,255,255,.94);color:var(--plum)}.badge.ver{right:8px}.badge.feat{left:8px;background:var(--acc)}
.lbody{padding:10px 12px 12px}.price{font-size:var(--fs-lg);font-weight:800}.lname{font-size:var(--fs-md);margin:2px 0;font-weight:700}.lmeta,.lrate{color:var(--mut);font-size:var(--fs-sm)}.lbody .status-row{margin:6px 0 0}
.carousel{position:relative}.track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 10px;scrollbar-width:thin}
.tile{flex:0 0 11.5rem;scroll-snap-align:start;color:var(--ink);text-decoration:none}.tile .cover{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:var(--sf);margin:0}
.tname{font-weight:700;margin-top:6px}.tile small{color:var(--mut)}.tile:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:10px}
.carr{position:absolute;top:35%;width:40px;height:40px;border-radius:50%;border:0;background:var(--bg);color:var(--ink);font-size:var(--fs-xl);line-height:1;box-shadow:0 2px 10px rgba(0,0,0,.3);cursor:pointer}.carr.prev{left:-10px}.carr.next{right:-10px}.carr:focus-visible{outline:3px solid var(--ring)}
.how li{margin:8px 0}
@media (max-width:860px){
  .layout{grid-template-columns:minmax(0,1fr)}.layout>*{min-width:0}.top .hsearch{order:3;flex-basis:100%;max-width:none}
  .cats{display:flex;overflow-x:auto;border-radius:12px}.cat{flex:0 0 auto;grid-template-columns:auto auto;border-bottom:0;border-right:1px solid var(--ln);padding:8px 12px}.cat .em{grid-row:auto;font-size:var(--fs-lg)}.cat small{display:none}
  .listings{grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:10px}.carr{display:none}
}

/* category icons, the category grid and bottom bar on a phone, and the dashboard's side panel */
.cicon{width:34px;height:34px;border-radius:8px;object-fit:cover;display:block;background:var(--sf)}
.cat .em{display:flex;align-items:center;justify-content:center}.cat.sub{grid-template-columns:1fr auto;padding-left:3rem;font-size:var(--fs-md)}.cat.sub small{grid-row:auto}.cat.sub .cn{font-weight:500}
.cgrid,.subchips{display:none}
.cpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:10px;margin:8px 0}
.ctile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:2px solid var(--ln);border-radius:12px;text-align:center;font-weight:600;cursor:pointer;margin:0}
.ctile .cicon{width:56px;height:56px;border-radius:12px}.ctile input{position:absolute;opacity:0;pointer-events:none}.ctile.on{border-color:var(--pri);background:var(--sf)}.ctile:focus-within{outline:3px solid var(--ring)}
.subpick{display:flex;flex-wrap:wrap;gap:8px}.subchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ln);border-radius:99px;padding:6px 12px;margin:0;font-weight:500;cursor:pointer}
.fchip.on{background:var(--pri);color:var(--on)}
.dash{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:20px;align-items:start}.dash>*{min-width:0}.dnav{display:flex;flex-direction:column;gap:4px;position:sticky;top:8px}
.dn{display:block;padding:.6rem .8rem;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600}.dn:hover{background:var(--sf)}.dn.on{background:var(--pri);color:var(--on)}.dn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.dbody{min-width:0}.bnav{display:none}
@media (min-width:861px){.subchips{display:none}}
@media (max-width:860px){
  .top{padding:8px 12px;gap:8px}.top nav{display:none}.top .brand{font-size:var(--fs-lg)}
  .hsearch{gap:8px}.hsearch .hs-loc,.hsearch input,.hsearch button{border-radius:12px;border:0}.hsearch .hs-loc{flex:0 0 38%;max-width:none}.hsearch button[type=submit]{padding:0 14px}
  .side .cats{display:none}.side .filters-box:not([open]) summary{font-weight:700}
  .cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px;margin:4px 0 10px}
  .ctile2{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink);text-decoration:none;text-align:center}
  .cbox{display:flex;align-items:center;justify-content:center;width:100%;max-width:5rem;aspect-ratio:1;border-radius:16px;background:var(--sf)}.cbox .cicon{width:70%;height:70%;border-radius:10px;background:transparent;object-fit:contain}
  .ctile2.on .cbox{box-shadow:0 0 0 3px var(--pri)}.clabel{font-size:var(--fs-sm);line-height:1.2;overflow-wrap:anywhere}
  .subchips{display:flex;gap:6px;overflow-x:auto;margin:0 0 10px;padding-bottom:4px}.subchips .fchip{flex:0 0 auto}
  .quick{grid-template-columns:repeat(2,minmax(0,1fr))}.listings{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash{grid-template-columns:1fr}.dnav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;position:static;gap:6px;padding-bottom:4px}.dn{flex:0 0 auto;white-space:nowrap}
  body{padding-bottom:4.6rem}.foot{display:none}
  .bnav{display:flex;position:fixed;z-index:40;left:0;right:0;bottom:0;background:var(--bg);border-top:1px solid var(--ln);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));justify-content:space-around}
  .bi{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;color:var(--mut);text-decoration:none;font:inherit;font-size:var(--fs-2xs);background:none;border:0;cursor:pointer;min-height:48px;border-radius:10px}
  .bi .bico{font-size:var(--fs-xl);line-height:1}.bi.on{color:var(--pri);font-weight:700}.bi:focus-visible{outline:3px solid var(--ring)}
}

/* the dashboard: the shop's name sits at the top of the side panel, and the content starts at the top beside it */
.dside{display:flex;flex-direction:column;gap:6px;position:sticky;top:8px;min-width:0}.dside .dnav{position:static}
.shopname{font-size:var(--fs-xl);margin:0;overflow-wrap:anywhere}.dside p{margin:0 0 6px}.dbody>.card:first-child,.dbody>h2:first-child{margin-top:0}
@media (max-width:860px){.dside{position:static}.shopname{font-size:var(--fs-xl)}}

/* the green top bar stays in view while the page scrolls; on a phone the brand scrolls away and the search row stays, as on other marketplaces */
:root{--hdr-h:64px;--bar-h:64px}
.top{position:fixed;top:0;left:0;right:0;z-index:30}
body{padding-top:var(--bar-h)}          /* the bar is fixed, not sticky: a browser scrolls toward the typing cursor of a sticky bar at the place the bar would be, and the page crept upward with every key */
html{scroll-padding-top:calc(var(--hdr-h) + 12px)}
.dside{top:calc(var(--hdr-h) + 12px)}.toasts{top:calc(var(--hdr-h) + 8px)}
@media (max-width:860px){
  :root{--hdr-h:68px;--bar-h:108px;--logo-h:32px}
  .top{row-gap:8px}
  .top .brand{display:flex;align-items:center;height:var(--logo-h)}
}

/* the phone's search bar, as on other marketplaces: a green bar with rounded bottom corners, an area box about a third wide, and a wide search box with the magnifier inside it */
@media (max-width:860px){
  .top{border-radius:0 0 22px 22px;padding-bottom:12px}
  .hsearch{position:relative;gap:8px;flex:1 1 100%;max-width:none}
  .hsearch .hs-loc,.hsearch input{height:48px;min-height:48px;border:0;border-radius:14px;font-size:var(--fs-md);background-color:#fff}
  .hsearch .hs-loc{flex:0 0 36%;width:36%;max-width:none;padding:0 12px;color:#7D5A68;font-weight:400}
  .hsearch input{flex:1 1 auto;min-width:0;padding:0 52px 0 14px;color:var(--plum)}.hsearch input::placeholder{color:#A98794;opacity:1}
  .hsearch button[type=submit]{position:absolute;right:0;top:0;bottom:0;width:52px;padding:0;border:0;border-radius:0 14px 14px 0;overflow:hidden;font-size:0;color:transparent;cursor:pointer;
    background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A98794' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") center/24px no-repeat}
}

/* the verified icon, the shop's name on the top bar, and the listing badge as an icon alone */
.vbadge{display:inline-block;flex:0 0 auto;width:18px;height:18px;margin-left:6px;vertical-align:-3px;background:center/18px 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232E9E5F'/%3E%3Cpath d='M7 12.5l3.4 3.4L17 9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.vbadge.on-dark{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='white'/%3E%3Cpath d='M7 12.5l3.4 3.4L17 9' fill='none' stroke='%230A7F46' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.top nav a.cta .nm,.who .nm{display:inline-block;max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.pstat{margin-left:8px;font-weight:600;opacity:.85}
.who{display:none;align-items:center;color:#fff;text-decoration:none;font-weight:700;max-width:60%}.who:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:6px}
.badge.ver{width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%}.badge.ver .vbadge{margin:0;width:20px;height:20px;background-size:20px 20px}
@media (max-width:860px){.who:not([hidden]){display:inline-flex;margin-left:auto}
  .who{flex:1 1 0;min-width:0;max-width:none;justify-content:flex-end}.who .nm{min-width:0;flex:0 1 auto}}   /* a long name shortens with … so the online switch and bell stay on the logo's row */

/* the left pane (categories and filters) stays in view beside the listings while the page scrolls, and scrolls inside itself when it is taller than the screen */
@media (min-width:861px){
  .layout .side,.dash .dside{position:sticky;top:calc(var(--hdr-h) + 12px);align-self:start;max-height:calc(100vh - var(--hdr-h) - 24px);max-height:calc(100dvh - var(--hdr-h) - 24px);
    overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:3px}
}

/* the pane is one block that scrolls as a whole: its two boxes (categories, then filters) are stacked inside it and are never squeezed separately */
@media (min-width:861px){
  .layout .side,.dash .dside{display:block}
  .layout .side>*+*{margin-top:14px}
}

/* the pane never grows into the space under the listings (the footer), so at the end of a page it is not pushed up beneath the top bar; the page measures both values */
:root{--below:90px}
@media (min-width:861px){
  .layout .side,.dash .dside{max-height:max(14rem,calc(100vh - var(--hdr-h) - 24px - var(--below)));max-height:max(14rem,calc(100dvh - var(--hdr-h) - 24px - var(--below)))}
}

/* the pane has no scroll bar: arrows at its top and bottom edges show only while there is more in that direction, with the content fading beneath them */
@media (min-width:861px){
  .layout .side,.dash .dside{overflow:visible;max-height:none;padding:0;display:block}
  .layout .side .sidescroll,.dash .dside .sidescroll{max-height:max(14rem,calc(100vh - var(--hdr-h) - 24px - var(--below)));max-height:max(14rem,calc(100dvh - var(--hdr-h) - 24px - var(--below)));
    overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;padding:3px}
  .sidescroll::-webkit-scrollbar{display:none}
  .sidescroll>*+*{margin-top:14px}
  .layout .side>.sarr,.dash .dside>.sarr{margin:0}
}
.sarr{position:absolute;left:0;right:0;z-index:3;height:40px;margin:0;padding:0;border:0;background-color:transparent;cursor:pointer;background-repeat:no-repeat;background-position:center,center;background-size:22px 22px,100% 100%}
.sarr.up{top:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 15l6-6 6 6' fill='none' stroke='%23A98794' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),linear-gradient(to bottom,var(--bg) 30%,transparent)}
.sarr.down{bottom:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23A98794' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),linear-gradient(to top,var(--bg) 30%,transparent)}
.sarr:hover{filter:brightness(1.25)}.sarr:focus-visible{outline:3px solid var(--ring);outline-offset:-3px}
@media (max-width:860px){.sarr{display:none}}

/* the listings as a grid of cards, or as one wide row each */
.rowhead{display:flex;align-items:center;justify-content:space-between;gap:10px}.rowhead h2{margin:.6em 0 .4em}
.seo{max-width:44rem;margin:0 auto;padding:8px 0}.seo h1{margin-top:.2em}.seo-list{padding-left:1.2em;line-height:1.9}
.rowhead h2{flex:1 1 auto;min-width:0}.sortby{flex:0 0 auto;display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--mut)}.sortsel{font:inherit;font-size:var(--fs-sm);color:var(--ink);background:var(--sf);border:1px solid var(--ln);border-radius:10px;padding:6px 28px 6px 10px;min-height:38px;max-width:46vw}@media(max-width:600px){.sort-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.sortsel{padding-right:22px}}
.vtoggle{flex:0 0 auto;width:40px;height:40px;padding:0;border:1px solid #F1D6DD;border-radius:10px;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:22px;cursor:pointer}
.vtoggle.grid{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233B1F2B'%3E%3Crect x='3' y='4' width='4' height='4' rx='1'/%3E%3Crect x='9' y='5' width='12' height='2' rx='1'/%3E%3Crect x='3' y='10' width='4' height='4' rx='1'/%3E%3Crect x='9' y='11' width='12' height='2' rx='1'/%3E%3Crect x='3' y='16' width='4' height='4' rx='1'/%3E%3Crect x='9' y='17' width='12' height='2' rx='1'/%3E%3C/svg%3E")}
.vtoggle.list{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233B1F2B'%3E%3Crect x='3' y='3' width='5' height='5' rx='1'/%3E%3Crect x='9.5' y='3' width='5' height='5' rx='1'/%3E%3Crect x='16' y='3' width='5' height='5' rx='1'/%3E%3Crect x='3' y='9.5' width='5' height='5' rx='1'/%3E%3Crect x='9.5' y='9.5' width='5' height='5' rx='1'/%3E%3Crect x='16' y='9.5' width='5' height='5' rx='1'/%3E%3Crect x='3' y='16' width='5' height='5' rx='1'/%3E%3Crect x='9.5' y='16' width='5' height='5' rx='1'/%3E%3Crect x='16' y='16' width='5' height='5' rx='1'/%3E%3C/svg%3E")}
.vtoggle:hover{border-color:var(--pri)}.vtoggle:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.lbio{display:none;margin:4px 0;color:var(--mut);font-size:var(--fs-md)}
.lchips{display:flex;gap:6px;margin:6px 0;overflow:hidden;white-space:nowrap}.lchip{flex:0 0 auto;background:var(--sf);border-radius:8px;padding:3px 10px;font-size:var(--fs-sm);color:var(--ink)}
.listings.list{grid-template-columns:1fr;gap:12px}
.listings.list .listing{display:flex}
.listings.list .imgwrap{flex:0 0 15rem;display:flex}.listings.list .imgwrap .cover{aspect-ratio:auto;width:100%;height:100%;min-height:11rem}
.listings.list .lbody{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:1fr auto;grid-template-areas:"name price" "bio bio" "chips chips" "meta meta" "rate rate" "status status";column-gap:14px;align-content:start;padding:14px 16px}
.listings.list .lname{grid-area:name;font-size:var(--fs-lg);margin:0}.listings.list .price{grid-area:price;text-align:right;white-space:nowrap}
.listings.list .lbio{grid-area:bio;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.listings.list .lchips{grid-area:chips}.listings.list .lmeta{grid-area:meta}.listings.list .lrate{grid-area:rate}.listings.list .lbody .status-row{grid-area:status}
@media (max-width:860px){.listings.list .imgwrap{flex-basis:38%}.listings.list .imgwrap .cover{min-height:8rem}.listings.list .lbody{padding:10px}.listings.list .price{font-size:var(--fs-md)}.listings.list .lname{font-size:var(--fs-md)}}

/* the bell with its unread count, and the notifications page */
.bellbox{position:relative;display:flex;align-items:center}
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;text-decoration:none;border:0;padding:0;background:none;color:inherit;cursor:pointer}
.bell:hover{background:rgba(255,255,255,.14)}.bell:focus-visible{outline:3px solid #fff;outline-offset:2px}
.bell .bico{display:block;width:24px;height:24px;background:center/24px 24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 6 2.5 7.5 2.5 7.5h-17S6 15 6 9z'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E")}
.bell .bcount{position:absolute;top:1px;right:0;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--dot);color:#fff;font-size:var(--fs-2xs);font-weight:700;line-height:18px;text-align:center;box-sizing:border-box}
.nlist{display:flex;flex-direction:column;border:1px solid var(--ln);border-radius:12px;overflow:hidden;background:var(--bg)}
.notif{display:block;padding:12px 16px 12px 20px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ln);position:relative}.notif:last-child{border-bottom:0}
.notif:hover{background:var(--sf)}.notif:focus-visible{outline:3px solid var(--ring);outline-offset:-3px}
.notif.unread{background:var(--sf)}.notif.unread::before{content:'';position:absolute;left:8px;top:18px;width:8px;height:8px;border-radius:50%;background:var(--pri)}
/* the bell's dropdown list, drawn like the online/offline panel */
.bell-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:40;width:22rem;max-width:calc(100vw - 24px);padding:14px 0 12px;border-radius:14px;background:var(--bg);color:var(--ink);border:1px solid var(--ln);box-shadow:0 12px 32px rgba(0,0,0,.35);text-align:left;font-weight:400}
.bell-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px 10px;font-size:var(--fs-md)}.bell-head .linkbtn{font-size:var(--fs-sm);text-decoration:none}
.bell-pop .note{margin:4px 16px 8px;font-size:var(--fs-sm)}
.bell-list{border:0;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);border-radius:0;max-height:min(60vh,26rem);overflow-y:auto}
.bell-pop .notif{padding:10px 16px 10px 22px;font-size:var(--fs-sm)}
.ntitle{font-weight:600}.notif.unread .ntitle{font-weight:800}.nbody{color:var(--mut);margin-top:2px;overflow-wrap:anywhere}.ntime{color:var(--mut);font-size:var(--fs-sm);margin-top:4px}
@media (max-width:860px){
  .bellbox{order:2;margin-left:8px}.bell{width:32px;height:28px}.who[hidden]~.topr .bellbox{margin-left:auto}
  .bell .bico{width:22px;height:22px;background-size:22px 22px}.bell .bcount{top:-3px;right:-2px}
}

/* disputes */
.dcard{display:block;color:var(--ink);text-decoration:none}.dcard:hover{border-color:var(--pri)}
.thread{display:flex;flex-direction:column;gap:8px;margin:8px 0}.msg{max-width:42rem;padding:8px 12px;border-radius:12px;background:var(--sf);border:1px solid var(--ln);overflow-wrap:anywhere}
.msg.mine{align-self:flex-end;background:var(--bg);border-color:var(--pri)}.msg.team{border-style:dashed}.decided{border:2px solid var(--pri)}
.evi{width:96px;height:72px;object-fit:cover;border-radius:8px;background:var(--sf)}

/* the Online now and Available now filters: the tick, the name, and a line of explanation under it */
.filters label.tick,.tick{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;margin:8px 0;font-weight:600;cursor:pointer}.tick input{width:auto;margin:0}.tick small{grid-column:2;font-weight:400;line-height:1.3}                  /* a rule for .filters label made these rows flex, so it is named here to win */

/* the page moves focus to its main area after each page change so a screen reader starts at the top; that must not draw a frame around the page */
#view:focus,#view:focus-visible{outline:0}

/* listing tiers: a badge on each card, a chip in headings and on the provider's cards, groups of listings, and the choice of tier and length */
.tierchip,.badge.tier{font-weight:800}.tierchip{display:inline-block;padding:2px 12px;border-radius:99px;font-size:var(--fs-sm);background:var(--sf);color:var(--ink);border:1px solid var(--ln)}
.tierchip.t-prime,.badge.tier.t-prime{background:var(--gold);color:var(--plum)}.tierchip.t-prime-vip,.badge.tier.t-prime-vip{background:#7B3FA0;color:#fff}
.tierchip.t-vip,.badge.tier.t-vip{background:var(--plum);color:#F5C453;box-shadow:inset 0 0 0 1px var(--gold)}
.badge.tier{left:8px}.tierchip.t-prime,.tierchip.t-prime-vip,.tierchip.t-vip{border-color:transparent}.tgroups{display:block}
.tgroup{margin:14px 0}.tgroup[hidden]{display:none}.thead{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:var(--fs-md)}
.tchoose{display:grid;gap:12px}.tcard p{margin:6px 0 10px}.tcard.t-vip{border:2px solid var(--gold)}
.durs{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:8px}.btn.dur,.dur{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 6px;min-height:56px;margin:0}.btn.dur b{font-size:var(--fs-md)}.btn.dur span{font-weight:600;opacity:.95}


/* ---------- the video call ---------- */
body.incall{overflow:hidden}
.call{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;height:100vh;height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);background:var(--night);color:#fff}
.cbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;background:rgba(0,0,0,.35)}
.cclock{display:flex;flex-direction:column;line-height:1.15}.clbl{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.06em;opacity:.8}
.ctime{font-size:var(--fs-xl);font-weight:800;font-variant-numeric:tabular-nums}.ctime.warn{color:var(--gold)}.ctime.bad{color:#FF8A75}.cused{opacity:.85}
.cpill{padding:4px 12px;border-radius:99px;background:rgba(255,255,255,.14);font-size:var(--fs-sm);text-align:center}.cpill.on{background:#A8325A}
.cbars{display:inline-flex;align-items:flex-end;gap:3px;height:20px}.cbars i{display:block;width:5px;border-radius:2px;background:rgba(255,255,255,.3)}
.cbars i:nth-child(1){height:6px}.cbars i:nth-child(2){height:10px}.cbars i:nth-child(3){height:15px}.cbars i:nth-child(4){height:20px}
.cbars.q0{opacity:.6}.cbars.q1 i:nth-child(1),.cbars.q2 i:nth-child(-n+2){background:#FF8A75}.cbars.q3 i:nth-child(-n+3),.cbars.q4 i{background:#fff}
.cstage{position:relative;flex:1;min-height:0;background:#000}
.cremote{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}.cremote.fill{object-fit:cover}
.cphoto,.cwait,.cdown{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:16px;font-weight:600}
.cphoto{background:radial-gradient(circle at 50% 40%,var(--plum),var(--night));color:rgba(255,255,255,.8)}.cdown{background:rgba(0,0,0,.72);gap:12px;z-index:5}
.cwait{z-index:2;background:radial-gradient(circle at 50% 40%,var(--plum),var(--night))}.cwait .lav{width:96px;height:96px;font-size:var(--fs-3xl);margin-bottom:6px}.cwait b{font-size:var(--fs-lg)}.cwait small{font-weight:400;opacity:.8;max-width:22rem}
.ctap{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:0;background:rgba(0,0,0,.6);color:#fff;font:inherit;cursor:pointer}
.ctap .ic{width:56px;height:56px;padding:18px;box-sizing:content-box;border-radius:50%;background:var(--live)}.ctap b{font-size:var(--fs-lg)}.ctap small{opacity:.8}
.cphoto[hidden],.cwait[hidden],.cdown[hidden],.cbanner[hidden],.cremotetag[hidden],.ctap[hidden]{display:none}
.cbanner{position:absolute;left:12px;right:12px;top:12px;z-index:6;padding:10px 14px;border-radius:10px;background:rgba(245,165,36,.96);color:var(--plum);font-weight:700;text-align:center}
.cremotetag{position:absolute;left:12px;bottom:12px;z-index:3;padding:3px 10px;border-radius:99px;background:rgba(0,0,0,.6);font-size:var(--fs-sm)}
.cself{position:absolute;right:12px;bottom:12px;z-index:3;width:26%;min-width:96px;max-width:220px;aspect-ratio:3/4;max-height:42%;border-radius:12px;overflow:hidden;border:2px solid rgba(255,255,255,.85);background:#2A1820}
.cself[hidden]{display:none}.cself.off::after{content:'Camera off';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#2A1820;font-size:var(--fs-xs)}
.cselfvid{width:100%;height:100%;object-fit:cover}.cself.flipped .cselfvid{transform:scaleX(-1)}
.cself.talking{border-color:#F290AC;box-shadow:0 0 0 3px rgba(242,144,172,.6)}.cstage.talking{box-shadow:inset 0 0 0 3px rgba(242,144,172,.7)}
.cfoot{position:relative}
.cdock{display:flex;justify-content:center;gap:6px;flex-wrap:nowrap;padding:10px 8px;background:rgba(0,0,0,.45)}
.cbtn{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1 1 0;min-width:0;max-width:92px;min-height:56px;margin:0;padding:6px 8px;border:0;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:var(--fs-2xs);cursor:pointer}
.cbtn:hover{background:rgba(255,255,255,.22)}.cbtn[aria-pressed=true]{background:#fff;color:var(--plum)}.cbtn[hidden]{display:none}.cbtn.end{background:#B3412F}.cbtn.end:hover{background:#C7523F}
.cbtn:focus-visible,.cmenuitem:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.clabel{white-space:nowrap}
.cpop{position:absolute;left:8px;right:8px;bottom:calc(100% + 8px);z-index:20;max-width:26rem;margin:0 auto;padding:12px;border-radius:14px;background:#2A1820;border:1px solid rgba(255,255,255,.2);max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px);overflow:auto}.cpop[hidden]{display:none}
.cpop label,.cpop h3{color:#fff}.cpop h3{margin:0 0 6px}.cpop select,.cpop input[type=range]{width:100%}.cpop .note{color:rgba(255,255,255,.75)}.cpop .btn.alt{color:#fff;border-color:rgba(255,255,255,.55);background:transparent}.cpop .btn.alt:hover{background:rgba(255,255,255,.12)}.cpop .tick{margin:10px 0}
.cmenuitem{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:9px 12px;margin:2px 0;border:1px solid transparent;border-radius:10px;background:transparent;color:#fff;font:inherit;text-align:left;cursor:pointer}
.cmenuitem small{opacity:.8}.cmenuitem[aria-checked=true]{border-color:#F290AC;background:rgba(242,144,172,.18)}.cmenuitem:hover{background:rgba(255,255,255,.1)}
/* the customer's waiting screen, which turns into the call */
.lobby{background:var(--night)}.lcam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);filter:saturate(.9)}.lcam[hidden]{display:none}
.lshade{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;padding:12px 16px 16px;background:linear-gradient(180deg,rgba(23,11,17,.55),rgba(23,11,17,.35) 40%,rgba(23,11,17,.85))}
.ltop{display:flex;align-items:center;gap:12px}.lclose{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;text-decoration:none;font-size:var(--fs-lg)}
.lpaid{font-size:var(--fs-sm);opacity:.85}
.lmid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
.lobby .lname{margin:18px 0 0;font-size:var(--fs-2xl);color:#fff}.lobby .lstate{margin:0;font-size:var(--fs-lg);font-weight:700;color:var(--blush)}.lobby .lsub{margin:0;max-width:24rem;opacity:.85}
.lsteps{display:flex;justify-content:center;gap:8px;margin:0 auto 14px;padding:0;list-style:none;width:min(22rem,100%)}
.lsteps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:var(--fs-xs);opacity:.55;position:relative}
.lsteps li b{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.6);font-size:var(--fs-sm)}
.lsteps li.now{opacity:1}.lsteps li.now b{border-color:#F290AC;background:#A8325A}.lsteps li.done{opacity:.9}.lsteps li.done b{border-color:var(--live);background:var(--live)}
.lfoot{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.lnote{margin:0;font-size:var(--fs-sm);opacity:.85;max-width:26rem}
.lobby .lchips,.lobby .lacts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.lobby .lchip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;background:rgba(255,255,255,.14);font-size:var(--fs-sm)}.lobby .lchip.ok{background:rgba(46,158,91,.85)}.lobby .lchip.off{background:rgba(199,66,58,.85)}
.lmeter{display:inline-flex;align-items:flex-end;width:6px;height:14px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}.lmeter i{display:block;width:100%;height:12%;background:#fff;transition:height .08s}
.lbtn{border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;border-radius:99px;padding:7px 14px;font:inherit;font-size:var(--fs-sm);cursor:pointer}.lbtn:hover{background:rgba(255,255,255,.12)}.lbtn[hidden]{display:none}
.lbtn:focus-visible,.lclose:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.lcard{max-width:26rem;margin:24px auto;text-align:center}.lcard .lav{margin:0 auto 8px}.lcard .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:10px 0 0}
.callsum dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:10px 0}.callsum dt{font-weight:700}.callsum dd{margin:0}
@media(max-width:640px){.cdock{gap:4px;padding:8px 6px}.cbtn{padding:6px 2px;font-size:var(--fs-2xs)}.cself{width:30%}}
@media(orientation:landscape) and (max-height:480px){.cbar{padding:4px 12px}.cdock{padding:4px}.cbtn{min-height:44px;flex-direction:row;justify-content:center;gap:6px}.cself{width:auto;height:38%;min-width:0;right:10px;bottom:8px}.cpop{max-height:calc(100vh - 110px)}}
/* the control icons are drawn in the text colour, so they follow it */
.ic{display:inline-block;width:24px;height:24px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ic-mic{--m:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%2014a3%203%200%200%200%203-3V5a3%203%200%200%200-6%200v6a3%203%200%200%200%203%203zm5-3a5%205%200%200%201-10%200H5a7%207%200%200%200%206%206.92V21h2v-3.08A7%207%200%200%200%2019%2011z'/%3E%3C/svg%3E")}
.ic-mic-off{--m:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M19%2011h-1.7c0%20.74-.16%201.43-.43%202.05l1.23%201.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5a3%203%200%200%200-5.94-.6l5.92%205.92v.85zM4.27%203L3%204.27l6.01%206.01V11a3%203%200%200%200%203%203c.22%200%20.44-.03.65-.08l1.66%201.66c-.71.33-1.5.52-2.31.52a5%205%200%200%201-5-5H5a7%207%200%200%200%206%206.92V21h2v-3.08c.91-.13%201.77-.45%202.54-.9L19.73%2021%2021%2019.73%204.27%203z'/%3E%3C/svg%3E")}
.ic-cam{--m:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M17%2010.5V7a1%201%200%200%200-1-1H4a1%201%200%200%200-1%201v10a1%201%200%200%200%201%201h12a1%201%200%200%200%201-1v-3.5l4%204v-11l-4%204z'/%3E%3C/svg%3E")}
.ic-cam-off{--m:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M21%206.5l-4%204V7a1%201%200%200%200-1-1H9.82L21%2017.18V6.5zM3.27%202L2%203.27%204.73%206H4a1%201%200%200%200-1%201v10a1%201%200%200%200%201%201h12c.2%200%20.39-.06.55-.15L19.73%2021%2021%2019.73%203.27%202z'/%3E%3C/svg%3E")}
.ic-flip{--m:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%206V3L8%207l4%204V8a4%204%200%200%201%203.46%206l1.46%201.46A6%206%200%200%200%2012%206zm0%2010a4%204%200%200%201-3.46-6L7.08%208.54A6%206%200%200%200%2012%2018v3l4-4-4-4v3z'/%3E%3C/svg%3E")}
.ic-vol{--m:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M3%209v6h4l5%205V4L7%209H3zm13.5%203A4.5%204.5%200%200%200%2014%208v8a4.5%204.5%200%200%200%202.5-4zM14%203.23v2.06a7%207%200%200%201%200%2013.42v2.06A9%209%200%200%200%2014%203.23z'/%3E%3C/svg%3E")}
.ic-vol-off{--m:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M16.5%2012A4.5%204.5%200%200%200%2014%208v2.18l2.45%202.45c.03-.2.05-.41.05-.63zm2.5%200c0%20.94-.2%201.82-.54%202.64l1.51%201.51A8.8%208.8%200%200%200%2021%2012c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86%205%203.54%205%206.71zM4.27%203L3%204.27%207.73%209H3v6h4l5%205v-6.73l4.25%204.25c-.67.52-1.42.93-2.25%201.18v2.06a8.99%208.99%200%200%200%203.69-1.81L19.73%2021%2021%2019.73l-9-9L4.27%203zM12%204L9.91%206.09%2012%208.18V4z'/%3E%3C/svg%3E")}
.ic-quality{--m:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M19%204H5a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2zm-8%2010H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v5zm7-1c0%20.55-.45%201-1%201h-1.75v1.5h-1.5V9H17c.55%200%201%20.45%201%201v3zm-1.5-2.5H15v2h1.5v-2z'/%3E%3C/svg%3E")}
.ic-expand{--m:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M7%2014H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12%207h-3v2h5v-5h-2v3zM14%205v2h3v3h2V5h-5z'/%3E%3C/svg%3E")}
.ic-shrink{--m:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5%2016h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6%2011h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'/%3E%3C/svg%3E")}
.ic-gear{--m:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M19.14%2012.94c.04-.3.06-.61.06-.94s-.02-.64-.07-.94l2.03-1.58a.5.5%200%200%200%20.12-.64l-1.92-3.32a.5.5%200%200%200-.61-.22l-2.39.96a7%207%200%200%200-1.62-.94l-.36-2.54a.5.5%200%200%200-.5-.42h-3.84a.5.5%200%200%200-.5.42l-.36%202.54c-.59.24-1.13.56-1.62.94l-2.39-.96a.5.5%200%200%200-.61.22L2.74%208.84a.5.5%200%200%200%20.12.64l2.03%201.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03%201.58a.5.5%200%200%200-.12.64l1.92%203.32c.12.22.37.29.59.22l2.39-.96c.5.38%201.03.7%201.62.94l.36%202.54c.05.24.26.42.5.42h3.84c.24%200%20.45-.18.5-.42l.36-2.54c.59-.24%201.13-.56%201.62-.94l2.39.96c.22.08.47%200%20.59-.22l1.92-3.32a.5.5%200%200%200-.12-.64l-2.01-1.58zM12%2015.6a3.6%203.6%200%201%201%200-7.2%203.6%203.6%200%200%201%200%207.2z'/%3E%3C/svg%3E")}
.ic-end{--m:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%209c-1.6%200-3.15.25-4.6.72v3.1c0%20.39-.23.74-.56.9-.98.49-1.87%201.12-2.66%201.85-.18.18-.43.28-.7.28-.28%200-.53-.11-.71-.29L.29%2013.08a.99.99%200%200%201-.29-.7c0-.28.11-.53.29-.71C3.34%208.78%207.46%207%2012%207s8.66%201.78%2011.71%204.67c.18.18.29.43.29.71%200%20.28-.11.53-.29.71l-2.48%202.48c-.18.18-.43.29-.71.29-.27%200-.52-.11-.7-.28a11.27%2011.27%200%200%200-2.67-1.85.996.996%200%200%201-.56-.9v-3.1A15.06%2015.06%200%200%200%2012%209z'/%3E%3C/svg%3E")}

/* the top bar: a logo, the bell, and one orange name tab that opens a menu */
.top .brand{display:flex;align-items:center}.logo{display:block;height:var(--logo-h,38px);width:auto}
@media (min-width:861px){.top{display:grid;grid-template-columns:1fr minmax(14rem,min(30rem,calc(100% - 800px))) 1fr;column-gap:18px;align-items:center}.top .brand{justify-self:start}.top .hsearch{width:100%;max-width:none}.topr{justify-self:end;display:flex;flex-wrap:nowrap;align-items:center;gap:8px 14px}.topr nav{flex-wrap:nowrap}.topr nav a,.topr nav button{white-space:nowrap}}
@media (max-width:860px){.topr{display:contents}}
.umenu{position:relative}
.top nav button.utab{gap:8px;padding:8px 12px 8px 16px;background:var(--acc);color:var(--plum)}.top nav button.utab:hover{background:var(--acc);filter:brightness(1.06)}
.utab .nm{display:inline-block;max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caret{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;transition:transform .15s}.utab[aria-expanded=true] .caret{transform:rotate(180deg)}
.upanel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:14rem;padding:6px;border-radius:12px;background:var(--bg);color:var(--ink);border:1px solid var(--ln);box-shadow:0 12px 32px rgba(0,0,0,.28)}.upanel[hidden]{display:none}
.top nav .upanel a,.top nav .upanel button.uitem{display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:44px;padding:10px 12px;border-radius:8px;background:none;color:var(--ink);font-weight:600;text-align:left;text-decoration:none}
.top nav .upanel a:hover,.top nav .upanel button.uitem:hover{background:var(--sf)}.top nav .upanel a:focus-visible,.top nav .upanel button.uitem:focus-visible{outline:3px solid var(--pri);outline-offset:-3px}
.usep{margin:6px 4px;border:0;border-top:1px solid var(--ln)}

/* the listings load as the person scrolls: a note at the end, and a marker the page watches */
.feedend{margin:18px 0;min-height:28px;text-align:center}.feednote{margin:0}.sentinel{height:1px}
.tgroup.repeat{margin-top:18px}.results{display:block;min-width:0}

/* the price on a card, and on the listing page */
.hourly b{font-size:var(--fs-lg)}.ask-note{font-weight:600}.svc-own{display:flex;flex-direction:column;gap:6px}.svc-own .btn{align-self:flex-start}

/* the shop dashboard: no search bar, a grouped menu with icons, and a home page of headline numbers */
.dashmode .hsearch{display:none}
.dashmode .top{justify-content:space-between}
@media (min-width:861px){.dashmode .topr{grid-column:3}}
/* the dashboard icons: each shape is a mask, so it takes the colour of the text around it */
.ico{display:inline-block;width:20px;height:20px;flex:0 0 auto;background:currentColor;-webkit-mask:center/contain no-repeat var(--i);mask:center/contain no-repeat var(--i)}
.i-home{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8M5 9.5V21h5v-6h4v6h5V9.5'/%3E%3C/svg%3E")}
.i-calendar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v15H4zM4 10h16M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.i-video{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h12v10H3zM15 11l6-4v10l-6-4'/%3E%3C/svg%3E")}
.i-flag{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E")}
.i-tag{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V3h9l9 9-9 9zM7.5 7.5h.01'/%3E%3C/svg%3E")}
.i-image{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18v14H3zM3 16l5-5 4 4 3-3 6 6M15.5 9h.01'/%3E%3C/svg%3E")}
.i-clock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 7v5l3 2'/%3E%3C/svg%3E")}
.i-star{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.8 5.7 6.2.9-4.5 4.4 1 6.2-5.5-2.9-5.5 2.9 1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E")}
.i-chat{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E")}
.i-user{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E")}
.i-eye{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12zM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E")}
.i-hand{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 11V5.5a1.5 1.5 0 0 1 3 0V11M11 10V4.5a1.5 1.5 0 0 1 3 0V11M14 10.5V6a1.5 1.5 0 0 1 3 0v8c0 4-2.5 7-6.5 7-2.6 0-4-1.4-5.5-3.5L3 14a1.6 1.6 0 0 1 2.6-1.8L8 15'/%3E%3C/svg%3E")}
.i-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E")}
.i-wallet{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H3zM3 7l13-3v3M16.5 13.5h.01'/%3E%3C/svg%3E")}
.i-arrow{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.i-alert{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2zM12 10v4M12 17.5h.01'/%3E%3C/svg%3E")}
.dash{grid-template-columns:15rem minmax(0,1fr);gap:28px}
.pd-public{display:inline-flex;align-items:center;gap:6px;color:var(--pri);font-weight:600;text-decoration:none;margin-top:4px;font-size:var(--fs-sm)}.pd-public .ico{width:16px;height:16px}
.pd-public:hover{text-decoration:underline}
.dgroup{display:block;margin:10px 12px 2px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.dn{display:flex;align-items:center;gap:12px;padding:.45rem .8rem;color:var(--mut)}.dn .ico{opacity:.85}
.dn:hover{color:var(--ink)}.dn.on{background:var(--pri);color:var(--on)}.dn.on .ico{opacity:1}
.pd-hello{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;justify-content:space-between;margin-bottom:6px}
.pd-hello h2{font-size:var(--fs-2xl);margin:0 0 2px}.pd-hello p{margin:0}.pd-period{padding:0;flex:0 0 auto}
.pd-alert{display:flex;gap:12px;align-items:flex-start;border-color:var(--acc)}.pd-alert>.ico{color:var(--acc-ink);margin-top:2px}
.pd-todo{border-color:var(--acc)}.pd-todo h3{margin:0 0 6px}.pd-todo ul{list-style:none;margin:0;padding:0}
.pd-todo li a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--ln);color:var(--ink);text-decoration:none;font-weight:600}
.pd-todo li:first-child a{border-top:0}.pd-todo li a .ico{color:var(--pri);width:18px;height:18px}.pd-todo li a:hover{color:var(--pri)}
.pd-cols{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:20px;align-items:start;margin-top:8px}
.pd-range{margin:0 0 10px;font-size:var(--fs-sm)}
.pd-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pd-kpi{display:flex;flex-direction:column;gap:2px;background:var(--sf);border:1px solid var(--ln);border-radius:14px;padding:16px}
.pd-kpi b{font-size:var(--fs-3xl);line-height:1.15;margin:2px 0}.pd-kpi .note{font-size:var(--fs-sm)}
.pd-klabel{font-weight:600;color:var(--mut)}
.pd-kico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--pri) 18%,transparent);color:var(--pri);margin-bottom:8px}
.pd-kpi:first-child .pd-kico{background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--acc-ink)}
.pd-funnel{margin-top:16px;padding:18px}.pd-funnel h3{margin:0}.pd-funnel ol{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.pd-fl{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:6px}.pd-fl span:first-child{font-weight:600}.pd-fl b{margin-left:auto;font-size:var(--fs-lg)}.pd-fl .note{flex-basis:100%;order:3;font-size:var(--fs-sm)}
.pd-bar{height:10px;border-radius:99px;background:var(--ln);overflow:hidden}.pd-bar i{display:block;height:100%;border-radius:99px;background:var(--pri)}
.pd-bar .w1{width:5%}.pd-bar .w2{width:10%}.pd-bar .w3{width:15%}.pd-bar .w4{width:20%}.pd-bar .w5{width:25%}.pd-bar .w6{width:30%}.pd-bar .w7{width:35%}.pd-bar .w8{width:40%}.pd-bar .w9{width:45%}.pd-bar .w10{width:50%}.pd-bar .w11{width:55%}.pd-bar .w12{width:60%}.pd-bar .w13{width:65%}.pd-bar .w14{width:70%}.pd-bar .w15{width:75%}.pd-bar .w16{width:80%}.pd-bar .w17{width:85%}.pd-bar .w18{width:90%}.pd-bar .w19{width:95%}.pd-bar .w20{width:100%}
.pd-more{margin-top:12px}.pd-more summary{cursor:pointer;font-weight:600;color:var(--pri);padding:8px 0;min-height:44px;display:flex;align-items:center}
.pd-smalls{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.pd-small{display:flex;flex-direction:column;gap:2px;border:1px solid var(--ln);border-radius:12px;padding:12px}.pd-small b{font-size:var(--fs-xl)}.pd-small .note{font-size:var(--fs-sm)}
.pd-next{margin:0;padding:18px;position:sticky;top:8px}.pd-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.pd-head h3{margin:0}
.pd-head a{display:inline-flex;align-items:center;gap:4px;color:var(--pri);font-weight:600;text-decoration:none;font-size:var(--fs-sm)}.pd-head a .ico{width:16px;height:16px}
.pd-next ul{list-style:none;margin:10px 0 0;padding:0}.pd-next li{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--ln)}.pd-next li:first-child{border-top:0}
.pd-next li div{display:flex;flex-direction:column;min-width:0}.pd-next li b{overflow-wrap:anywhere}
.pd-date{flex:0 0 auto;width:5.4rem;text-align:center;padding:6px 8px;border-radius:10px;background:color-mix(in srgb,var(--pri) 16%,transparent);color:var(--pri);font-weight:700;font-size:var(--fs-sm);line-height:1.25}
@media (max-width:1100px){.pd-cols{grid-template-columns:1fr}.pd-next{position:static;order:-1}}
@media (max-width:860px){.dash{grid-template-columns:1fr;gap:12px}.dgroup{display:none}.dn{padding:.5rem .8rem;border:1px solid var(--ln)}.dn .ico{width:18px;height:18px}
  .pd-hello h2{font-size:var(--fs-xl)}.pd-kpi{padding:14px}.pd-kpi b{font-size:var(--fs-2xl)}}
@media (max-width:420px){.pd-kpis{gap:8px}.pd-kpi{padding:12px}.pd-kico{width:32px;height:32px;margin-bottom:4px}.pd-kpi .note{display:none}}

/* the greeting in the top bar, where the search bar is on other pages, so it shows on every tab of the shop */
.hgreet{display:none;flex-direction:column;justify-content:center;min-width:0;color:#fff;line-height:1.25}
.hgreet b{font-size:var(--fs-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hgreet span{font-size:var(--fs-sm);opacity:.85;white-space:nowrap}
.dashmode .hgreet:not(:empty){display:flex}
@media (min-width:861px){.dashmode .hgreet{grid-column:2;justify-self:center;text-align:center;max-width:100%}}
@media (max-width:860px){.dashmode .hgreet{order:3;flex-basis:100%;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:0 10px}.hgreet b{font-size:var(--fs-md)}}

/* the shop pages: a heading with an icon, cards with a title, coloured words for a state, and a friendly note when a list is empty */
.pg-head{display:flex;align-items:flex-start;gap:14px;margin:4px 0 14px;flex-wrap:wrap}
.pg-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;background:color-mix(in srgb,var(--pri) 16%,transparent);color:var(--pri)}
.pg-title{flex:1 1 16rem;min-width:0}.pg-title h2{margin:0;font-size:var(--fs-xl);line-height:1.25}.pg-title p{margin:2px 0 0}
.pg-side{display:flex;align-items:center;gap:8px;flex:0 0 auto;align-self:center}.pg-side .chips{padding:0}
.pg-card{padding:18px;margin:0 0 16px;border-radius:14px}.pg-card>h3{margin:0 0 4px;font-size:var(--fs-lg)}.pg-card>h3+.note{margin:0 0 10px}
.pg-sub{margin:22px 0 10px;font-size:var(--fs-lg)}.pg-card .pg-sub{margin:20px 0 4px;padding-top:16px;border-top:1px solid var(--ln)}
.pg-cardhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:8px}.pg-cardhead h3{margin:0;font-size:var(--fs-lg)}.pg-cardhead .chips{align-items:center;padding:0}
.pg-urgent{border:2px solid var(--acc)}
.pg-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}.pg-foot .pd-public{margin-top:6px}
.pg-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:32px 16px;border:1px dashed var(--ln);border-radius:14px;margin:0 0 16px}
.pg-empty .pg-ico{width:52px;height:52px;border-radius:50%}.pg-empty b{font-size:var(--fs-lg)}.pg-empty p{margin:0;max-width:30rem}.pg-empty .btn{margin:8px 0 0}
.pg-tip{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--pri) 9%,transparent);color:var(--ink);font-size:var(--fs-sm)}
.pg-tip>.ico{color:var(--pri);width:18px;height:18px;margin-top:2px}.pg-card .pg-tip{margin:12px 0 0}
.pill{--pc:var(--mut);display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:99px;font-size:var(--fs-xs);font-weight:700;color:var(--pc);background:color-mix(in srgb,var(--pc) 14%,transparent);white-space:nowrap;vertical-align:middle}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pc)}
.pill.ok{--pc:var(--good)}.pill.info{--pc:var(--pri)}.pill.bad{--pc:var(--bad)}.pill.warn{--pc:var(--acc);color:var(--ink)}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.fgrid .span2{grid-column:1/-1}
.linkbtn{background:none;border:0;padding:4px 0;font:inherit;font-weight:600;color:var(--pri);cursor:pointer;text-decoration:underline}
.pd-bar .w0{width:0}
/* a switch: the tick box stays for keyboards and screen readers, and a sliding track shows its state */
label.sw{display:flex;align-items:center;gap:12px;margin:12px 0;font-weight:600;cursor:pointer;position:relative}
.sw input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.sw-track{flex:0 0 auto;width:44px;height:26px;border-radius:99px;background:var(--ln);position:relative;transition:background .15s}
.sw-track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.sw input:checked+.sw-track{background:var(--pri)}.sw input:checked+.sw-track::after{transform:translateX(18px)}
.sw input:focus-visible+.sw-track{outline:3px solid var(--ring);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.sw-track,.sw-track::after{transition:none}}
/* bookings and video requests: a date tile, what it is, and its price and buttons */
.bk-filter{margin:0 0 12px}.chip-btn .cnt{display:inline-block;min-width:1.5em;margin-left:8px;padding:0 6px;border-radius:99px;background:color-mix(in srgb,var(--pri) 16%,transparent);font-size:var(--fs-xs)}
.chip-btn[aria-pressed=true] .cnt{background:rgba(255,255,255,.25)}
.bk-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.bk{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;margin:0;padding:14px 16px;border-radius:14px}
.bk.due{border-color:var(--acc);border-width:2px}
.dtile{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4.2rem;padding:6px 4px;border-radius:12px;background:color-mix(in srgb,var(--pri) 14%,transparent);color:var(--pri);line-height:1.15}
.dtile b{font-size:var(--fs-xl)}.dtile small{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.bk-main{display:flex;flex-direction:column;gap:3px;min-width:0}.bk-main>b{font-size:var(--fs-md);overflow-wrap:anywhere}.bk-main .note{font-size:var(--fs-sm)}
.bk-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}.bk-price{font-size:var(--fs-lg)}
.bk-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.bk-acts .btn{margin:0;display:inline-flex;align-items:center;gap:6px}.bk-acts .ico{width:16px;height:16px}
.bk.new{box-shadow:inset 3px 0 0 var(--gold,#E9A23B)}.bk-decline:empty{display:none}.bk-decline{grid-column:1/-1;display:grid;gap:8px;padding-top:10px;border-top:1px solid var(--ln)}.bk-decline .chips{display:flex;flex-wrap:wrap;gap:6px}.bk-decline .bk-q{margin:0;font-weight:600}.bk-decline input{width:100%;box-sizing:border-box}.bk-decline .bk-acts{justify-content:flex-start}
.bk-side>.note{font-size:var(--fs-xs);margin-top:-6px}
/* video checkups */
.vd-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}.vd-cols.one{grid-template-columns:minmax(0,1fr)}.vd-cols>.card{margin:0}
.vd-live{border-width:2px}.vd-live.on{border-color:var(--good);background:color-mix(in srgb,var(--good) 8%,var(--sf))}
.vd-state{display:flex;align-items:center;gap:10px;font-size:var(--fs-lg);font-weight:700;margin:8px 0 4px}
.vd-dot{width:12px;height:12px;border-radius:50%;background:var(--mut)}.vd-live.on .vd-dot{background:var(--good);box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 25%,transparent)}
.vd-wait{font-weight:600;color:var(--ink);font-size:var(--fs-sm)}
/* opening hours: one row a day with a switch, and days off as tags */
.hr-list{display:flex;flex-direction:column;margin:4px 0 8px}
.hr-row{display:grid;grid-template-columns:12rem minmax(0,1fr);align-items:center;gap:8px 16px;padding:8px 0;border-top:1px solid var(--ln)}.hr-row:first-child{border-top:0}
.hr-row label.sw{margin:0}.hr-row.off b{color:var(--mut)}
.hr-times{display:flex;align-items:center;gap:10px}.hr-times input{width:auto;flex:0 1 9rem;min-width:0}
.hr-closed{color:var(--mut);font-weight:600}
.off-list{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.off-chip{display:inline-flex;align-items:center;gap:8px;padding:4px 4px 4px 12px;border-radius:99px;border:1px solid var(--ln);background:var(--bg);font-weight:600}.off-chip .ico{width:16px;height:16px;color:var(--pri)}
.off-x{border:0;background:transparent;color:var(--mut);width:32px;height:32px;border-radius:50%;cursor:pointer;font:inherit}.off-x:hover{background:var(--ln);color:var(--ink)}
.off-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.off-add input{width:auto;flex:0 1 12rem}.off-add .btn{margin:0}
/* services, photos and the listing */
.svc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:10px;margin:6px 0 4px}.svc-list>p,.svc-list>input{grid-column:1/-1;margin:0}
.svc-list .svc-pick{margin:0;background:var(--bg);border-radius:12px}.svc-list .svc-pick:has(input:checked){border-color:var(--pri);box-shadow:inset 0 0 0 1px var(--pri)}
.pg-own h3{margin:0 0 6px;font-size:var(--fs-lg)}.pg-own h3:not(:first-child){margin-top:20px;padding-top:16px;border-top:1px solid var(--ln)}.pg-own .svc-own{background:var(--bg)}
.pg-photos .photo-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.pg-photos .photo-card{background:var(--bg);border:1px solid var(--ln);border-radius:12px;padding:8px}.pg-photos .photo-card .btn{margin:6px 6px 0 0}
.pg-photos label:has(input[type=file]){border:2px dashed var(--pri);border-radius:14px;padding:16px;margin:14px 0 6px;color:var(--pri);background:color-mix(in srgb,var(--pri) 6%,transparent)}
.pg-photos label input[type=file]{margin-top:8px;border:0;background:transparent;padding:0}
.ls{display:flex;flex-direction:column;gap:8px}.ls.live{border:2px solid var(--good)}.ls .btn{align-self:flex-start;margin:4px 0 0}
.ls-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}.ls-top b{font-size:var(--fs-lg)}
.ls-left{margin:0}.ls-left b{font-size:var(--fs-xl)}
.pg-buy{margin-top:24px}.pg-buy>h3{font-size:var(--fs-lg);margin:0 0 6px}
/* the Upgrade card: the balance, then one card per higher tier with the top-up for each length (a chat's "Upgrade your package" scrolls here, below the fixed bar) */
.upg{margin-top:16px;border:2px solid var(--pri);scroll-margin-top:calc(var(--bar-h,64px) + 12px)}.upg>h3{margin:0 0 4px}.upg>.note{margin:0 0 12px}
.rnw{margin-top:16px}.rnw>h3{margin:0 0 4px}.rnw>.note{margin:0 0 12px}
.rnw-pay{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.rnw-pay .btn{display:inline-flex;align-items:center;gap:8px}.rnw-pay .btn .ico{width:18px;height:18px}.rnw-pay small{flex-basis:100%}
.rnw-auto{margin-top:14px;padding-top:12px;border-top:1px solid var(--ln)}.rnw-auto small{display:block;margin-top:4px}
.cmp{margin-top:16px}.cmp>h3{margin:0 0 4px}.cmp-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column}.cmp-list li{padding:12px 0;border-top:1px solid var(--ln)}
.cmp-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}.cmp-top .note{flex-basis:100%;font-size:var(--fs-sm)}.cmp-figs{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 8px;font-size:var(--fs-sm)}.cmp-fig b{font-size:var(--fs-md)}
.upg-bal{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;margin:0 0 14px;border-radius:12px;background:color-mix(in srgb,var(--pri) 9%,transparent)}
.upg-bal>.ico{width:22px;height:22px;color:var(--pri);flex:none;margin-top:2px}.upg-bal span{font-size:var(--fs-md)}.upg-bal b{font-size:var(--fs-lg)}.upg-bal small{display:block;margin-top:2px}
.upg-gives{list-style:none;margin:6px 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--fs-sm)}.upg-gives li{display:flex;align-items:center;gap:6px}.upg-gives .ico{width:16px;height:16px;color:var(--good)}
.upg-durs{grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr))}.upg-durs .btn.dur small{font-weight:400;font-size:var(--fs-xs);opacity:.8;text-align:center;line-height:1.3}.upg-durs .btn.dur:disabled{opacity:.6;cursor:not-allowed}
/* reviews */
.stars{color:var(--ln);letter-spacing:2px;font-size:var(--fs-md)}.stars .on{color:var(--gold)}
.rv-sum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 28px;align-items:center}
.rv-avg{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px}.rv-avg>b{font-size:var(--fs-3xl);line-height:1}
.rv-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rv-bars li{display:grid;grid-template-columns:2.6rem minmax(0,1fr) 2rem;align-items:center;gap:10px;font-size:var(--fs-sm)}.rv-bars .pd-bar i{background:var(--gold)}
.rv-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}.rv-top .pill{margin-left:auto}
.rv-body{margin:10px 0 0;font-size:var(--fs-md)}
.rv-reply{margin:12px 0 0;padding:10px 14px;border-left:3px solid var(--pri);border-radius:0 10px 10px 0;background:var(--bg)}.rv-reply p{margin:4px 0 0}
.rv-form{display:flex;gap:8px;align-items:flex-end;margin-top:12px}.rv-form textarea{min-height:44px}.rv-form .btn{flex:0 0 auto}
.dlist .dcard{display:block;text-decoration:none;color:var(--ink);border-radius:14px;padding:16px}.dlist .dcard:hover{border-color:var(--pri)}
@media (max-width:860px){.pg-title h2{font-size:var(--fs-xl)}.pg-ico{width:40px;height:40px}.vd-cols{grid-template-columns:minmax(0,1fr)}.pg-card{padding:14px}}
@media (max-width:600px){.fgrid{grid-template-columns:minmax(0,1fr)}
  .bk{grid-template-columns:auto minmax(0,1fr);gap:10px 12px}.bk-side{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;text-align:left;border-top:1px solid var(--ln);padding-top:10px}.bk-side>.note{margin:0}
  .hr-row{grid-template-columns:minmax(0,1fr)}.hr-times{padding-left:56px}.hr-closed{display:none}
  .rv-sum{grid-template-columns:minmax(0,1fr)}.rv-form{flex-direction:column;align-items:stretch}}
.bk-price{white-space:nowrap}
.pg-photos .photo-card div{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.pg-photos .photo-card .btn{margin:0}
.pg-photos input[type=file]::file-selector-button{font:inherit;font-weight:600;padding:8px 14px;min-height:40px;border-radius:8px;border:1px solid var(--pri);background:var(--pri);color:var(--on);margin-right:12px;cursor:pointer}
.pg-photos .photo-card .btn{padding:6px 10px;min-height:36px;font-size:var(--fs-sm)}
@media (max-width:600px){.hr-times{padding-left:0}.hr-times input{flex:1 1 0;padding:8px 6px}}

/* the heartbeat in the top bar: a beating green line while available for video checkups, a red flat line while offline, and a small panel to switch */
.ring:empty{display:none}
.live{position:relative;display:flex;align-items:center}
.live-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 12px;border-radius:99px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-weight:700;font-size:var(--fs-sm);cursor:pointer}
.live-btn:hover{background:rgba(255,255,255,.16)}.live-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.live-dot{position:relative;width:10px;height:10px;border-radius:50%;background:#F26B6B;flex:0 0 auto}
.live-btn.here .live-dot,.live-pop.here .live-dot{background:#4ADE80}
.live-btn.here .live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#4ADE80;animation:live-ping 1.6s ease-out infinite}
@keyframes live-ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.8);opacity:0}}
.live-ecg{width:40px;height:20px;flex:0 0 auto;background:rgba(242,107,107,.85);
  -webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 10h38'/%3E%3C/svg%3E");
  mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 10h38'/%3E%3C/svg%3E")}
.live-btn.here .live-ecg{background:linear-gradient(90deg,transparent 35%,#B9FFCF 47%,#fff 50%,transparent 62%) 0 0/300% 100% no-repeat,#4ADE80;animation:live-beat 1.6s linear infinite;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 11h9l2-4 3 9 4-15 4 14 2-4h14'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 11h9l2-4 3 9 4-15 4 14 2-4h14'/%3E%3C/svg%3E")}
@keyframes live-beat{from{background-position:100% 0,0 0}to{background-position:0% 0,0 0}}
@media (prefers-reduced-motion:reduce){.live-btn.here .live-dot::after,.live-btn.here .live-ecg{animation:none}}
.live-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:40;width:19rem;max-width:calc(100vw - 24px);padding:16px;border-radius:14px;background:var(--bg);color:var(--ink);border:1px solid var(--ln);box-shadow:0 12px 32px rgba(0,0,0,.35);text-align:left}
.live-head{display:flex;align-items:center;gap:10px;font-size:var(--fs-md)}.live-pop p{margin:6px 0 10px;font-size:var(--fs-sm);font-weight:400}
.live-pop .btn{width:100%;margin:0}.live-link{display:block;margin-top:10px;text-align:center;color:var(--pri);font-weight:600}
.live-pop.here{border-color:color-mix(in srgb,#4ADE80 50%,var(--ln))}
@media (max-width:860px){.live{order:2;margin-left:8px}.who[hidden]~.topr .live:not([hidden]){margin-left:auto}.who[hidden]~.topr .live:not([hidden])~.bellbox{margin-left:8px}
  .live-btn{height:32px;padding:0 10px;gap:6px}.live-ecg{width:30px;height:16px}}
@media (max-width:420px){.live-txt{display:none}.live-btn{padding:0 8px}}
/* on a phone the bell or the online switch may sit at the left of a wrapped second row, so their panels span the screen just under the bar */
@media (max-width:860px){
  .bell-pop,.live-pop{position:fixed;left:12px;right:12px;top:calc(var(--bar-h) + 6px);width:auto;max-width:none}
  html.viewing .bell-pop,html.viewing .live-pop{top:calc(var(--bar-h) + var(--vb-h) + 6px)}
  .bell-list{max-height:calc(100dvh - var(--bar-h) - 120px)}
}

/* video calls on several devices: the heartbeat holds steady while calls ring on another device, and that device's call shows here as a quiet notice */
.live-btn.away .live-dot,.live-pop.away .live-dot{background:#4ADE80}
.live-btn.away .live-ecg{background:rgba(74,222,128,.75);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 11h9l2-4 3 9 4-15 4 14 2-4h14'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 11h9l2-4 3 9 4-15 4 14 2-4h14'/%3E%3C/svg%3E")}
.live-pop.away .btn+.btn{margin-top:8px}
.qcall{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 16px;border-radius:14px;border:2px solid var(--acc);background:color-mix(in srgb,var(--acc) 10%,var(--sf))}
.qcall-ico{font-size:var(--fs-xl)}.qcall-txt{flex:1 1 16rem;min-width:0;display:flex;flex-direction:column}.qcall-txt .note{display:inline}
.qcall-acts{display:flex;gap:8px}.qcall-acts .btn{margin:0}

/* the listings page's left pane: on a computer a slim rail of category icons that opens over the listings, or stays open beside them when pinned */
.i-menu{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E")}
.i-sliders{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9M15 5v4M9 15v4'/%3E%3C/svg%3E")}
.i-pin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21zM12 7a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z'/%3E%3C/svg%3E")}
.rail-head,.ftile{display:none}
.i-pushpin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6l-3 4h10l-3-4V3M12 13v8'/%3E%3C/svg%3E")}
.fcount{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--pri);color:var(--on);font-size:var(--fs-2xs);font-weight:700;line-height:1}
.filters-box summary{gap:8px}.filters-box summary .ico{width:18px;height:18px;color:var(--pri)}.filters-box summary .fcount{margin-left:auto}
.fsec{margin:12px 0 4px}.flabel{display:block;margin:0 0 6px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.fsec label.sw{margin:6px 0;align-items:flex-start}.fsec label.sw .note{display:block;font-weight:400;font-size:var(--fs-sm);line-height:1.3}
.dchips{display:flex;flex-wrap:wrap;gap:6px}.dchips .chip-btn{min-height:34px;padding:4px 12px;font-size:var(--fs-sm)}
.fsec select{width:100%;margin:0}
.locbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;margin:8px 0 0}.locbtn .ico{width:16px;height:16px}.locbtn.on{border-color:var(--pri);color:var(--pri)}
@media (min-width:861px){
  .layout{transition:grid-template-columns .18s ease}
  .layout.rail{grid-template-columns:4.75rem minmax(0,1fr)}
  .layout .side{z-index:6;width:100%;transition:width .18s ease}
  .layout.rail .side{width:4.75rem}.layout.rail .side.open{width:18.5rem}
  .layout .side .sidescroll{background:var(--bg);border:1px solid var(--ln);border-radius:16px;padding:8px}
  .layout .side.open .sidescroll{box-shadow:0 18px 44px rgba(0,0,0,.24)}
  .layout .side .sidescroll>*+*{margin-top:8px}
  .rail-head{display:flex;align-items:center;gap:8px;min-height:44px}
  .rail-title{flex:1 1 auto;font-size:var(--fs-md);white-space:nowrap}
  .rail-open,.rail-pin,.ftile{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:12px;background:transparent;color:var(--ink);cursor:pointer;position:relative}
  .rail-pin{width:36px;height:36px;border-radius:50%;color:var(--mut)}.rail-pin[aria-pressed=true]{background:var(--pri);color:var(--on)}
  .rail-open:hover,.rail-pin:hover,.ftile:hover{background:var(--sf)}.rail-pin[aria-pressed=true]:hover{background:var(--pri)}
  .rail-open:focus-visible,.rail-pin:focus-visible,.ftile:focus-visible{outline:3px solid var(--ring);outline-offset:-3px}
  .layout .side .ftile{display:none}.side.pinned .rail-open{display:none}.side.pinned .rail-head{padding-left:6px}
  .layout .side .cats{background:transparent;border:0;border-radius:0;overflow:visible}
  .layout .side .cat{grid-template-columns:2.75rem minmax(0,1fr) auto;grid-template-rows:auto;column-gap:10px;padding:5px 6px;margin:2px 0;border:0;border-radius:12px}
  .layout .side .cat .em{grid-row:auto;width:2.75rem;height:2.75rem;border-radius:12px;background:var(--sf);transition:box-shadow .15s}
  .layout .side .cat .cicon{width:28px;height:28px;background:transparent;object-fit:contain}
  .layout .side .cat .cn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .layout .side .cat small{min-width:1.75rem;padding:1px 8px;border-radius:99px;background:var(--sf);font-size:var(--fs-2xs);font-weight:700;text-align:center}
  .layout .side .cat:hover{background:var(--sf)}.layout .side .cat:hover .em{background:var(--bg)}
  .layout .side .cat.on{background:color-mix(in srgb,var(--pri) 12%,transparent);box-shadow:none;color:var(--pri)}.layout .side .cat.on .em,.layout .side .cat.open .em{box-shadow:0 0 0 2px var(--pri)}
  .layout .side .cat.on small{background:var(--pri);color:var(--on)}
  .layout .side .cat.sub{grid-template-columns:minmax(0,1fr) auto;padding:6px 8px 6px 4.1rem;margin:0}
  .layout .side .filters-box{border:0;border-top:1px solid var(--ln);border-radius:0;padding:10px 6px 4px;margin-top:10px}
  .layout.rail .side:not(.open) .rail-head{justify-content:center}
  .layout.rail .side:not(.open) .rail-title,.layout.rail .side:not(.open) .rail-pin,.layout.rail .side:not(.open) .filters-box,
  .layout.rail .side:not(.open) .cat .cn,.layout.rail .side:not(.open) .cat small,.layout.rail .side:not(.open) .cat.sub{display:none}
  .layout.rail .side:not(.open) .cat{grid-template-columns:1fr;justify-items:center;padding:3px 0}
  .layout.rail .side:not(.open) .cat.on{background:transparent}
  .layout.rail .side:not(.open) .ftile{display:flex;margin:10px auto 0;border-top:1px solid var(--ln);border-radius:0 0 12px 12px;padding-top:6px;height:50px;width:100%;color:var(--pri)}
  .ftile .ico{width:22px;height:22px}.ftile .fcount{position:absolute;top:6px;right:6px}
}
.ctile2 .clabel{white-space:normal;max-width:100%}                                       /* the video call's .clabel rule keeps its labels on one line; a category's name wraps */
@media (min-width:861px) and (prefers-reduced-motion:reduce){.layout,.layout .side{transition:none}}

/* a service is just its name: the whole card is the tick box */
label.svc-pick{display:flex;align-items:center;gap:10px;padding:12px 14px;margin:8px 0;font-weight:600;cursor:pointer}
label.svc-pick input{width:auto;margin:0;flex:0 0 auto;accent-color:var(--pri)}label.svc-pick b{min-width:0;overflow-wrap:anywhere}
label.svc-pick:hover{border-color:var(--pri)}label.svc-pick:focus-within{outline:3px solid var(--ring);outline-offset:2px}

/* ---------- the provider's shop page ---------- */
.shop{padding-bottom:12px}
.shop-photos{margin:6px 0 18px}
.shop-gallery{display:grid;gap:8px;grid-template-columns:2fr 1fr 1fr;grid-template-rows:13rem 13rem;border-radius:18px;overflow:hidden;position:relative}
.shop-gallery.n1{grid-template-columns:1fr;grid-template-rows:26rem}.shop-gallery.n2{grid-template-columns:2fr 1fr;grid-template-rows:26rem}
.shop-gallery.n3{grid-template-columns:2fr 1fr}.shop-gallery.n4{grid-template-columns:2fr 1fr 1fr}.shop-gallery.n4 .g-side:nth-of-type(4){grid-column:2/4}
.g-tile{display:block;padding:0;margin:0;border:0;background:var(--sf);cursor:zoom-in;overflow:hidden;min-height:0}
.g-main{grid-row:1/3}.n1 .g-main,.n2 .g-main{grid-row:1}.n2 .g-side{grid-row:1}
.g-tile{position:relative;isolation:isolate}
.g-blur{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);object-fit:cover;filter:blur(22px) saturate(1.15) brightness(.85);margin:0;border-radius:0;z-index:-1;pointer-events:none}
.g-img{position:relative;display:block;width:100%;height:100%;object-fit:contain;margin:0;border-radius:0;transition:transform .35s ease,filter .2s}
.g-tile:hover .g-img{transform:scale(1.03);filter:brightness(1.05)}.g-tile:focus-visible{outline:3px solid var(--ring);outline-offset:-3px}
.g-all{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;border:1px solid rgba(0,0,0,.12);background:#fff;color:var(--plum);font:inherit;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.g-all .ico{width:18px;height:18px}.g-all:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.shop-swipe-wrap{display:none;position:relative}
.shop-head{margin:0 0 6px}
.shop-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.shop-title h1{flex:1 1 auto;min-width:0}
.shop-save{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}.shop-save .ico{width:16px;height:16px}.shop-save[aria-pressed=true]{background:var(--pri);color:var(--on)}
.shop-blocked{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 12px;padding:10px 14px;border-radius:var(--r-md);background:color-mix(in srgb,var(--bad) 10%,transparent);color:var(--ink)}.shop-blocked span:not(.ico){flex:1 1 12rem}
.shop-safe{border-top:1px solid var(--ln);padding-top:12px}.shop-safe .note{margin:0 0 4px}.shop-safe-acts{display:flex;gap:20px}.shop-safe-acts .linkbtn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--mut)}.shop-safe-acts .ico{width:16px;height:16px}
.shop-report{margin-top:10px}.rep-reasons{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:8px;margin:6px 0 10px}.rep-pill span{white-space:normal}.shop-report textarea{width:100%;box-sizing:border-box}.rep-acts{display:flex;gap:10px;margin-top:10px}
.saved-list{display:grid;gap:8px;margin:10px 0 18px}.saved-row{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--ln);border-radius:var(--r-md);background:var(--sf);color:var(--ink);text-decoration:none}.saved-row.gone{opacity:.6}.saved-pic{width:56px;height:56px;border-radius:var(--r-sm);object-fit:cover;flex:0 0 auto}.saved-t{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.shop-title h1{margin:0;font-size:var(--fs-3xl);line-height:1.15;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.shop-title h1 .vbadge{width:26px;height:26px;background-size:26px 26px;margin:0}
.shop-share{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}.shop-share .ico{width:16px;height:16px;transform:rotate(-45deg)}
.shop-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0;color:var(--mut);font-weight:600}
.shop-meta>*{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}.shop-meta .ico{width:18px;height:18px;color:var(--pri)}
.shop-meta a{color:var(--ink)}.shop-meta a:hover{text-decoration:underline}.stars-on{color:var(--gold)}
.shop-grid{display:grid;grid-template-columns:minmax(0,1fr) 23rem;gap:36px;align-items:start;margin-top:10px}
.shop-sec{padding:22px 0;border-top:1px solid var(--ln)}.shop-sec:first-child{border-top:0;padding-top:10px}.shop-sec>h2{margin:0 0 12px;font-size:var(--fs-xl)}
.shop-bio{font-size:var(--fs-lg);line-height:1.65;margin:0;white-space:pre-line}
.shop-svcs{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:10px}
.shop-svcs li{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--ln);border-radius:12px;background:var(--sf);font-weight:600}
.shop-svcs .ico{width:18px;height:18px;color:var(--pri);flex:0 0 auto}
.shop-rsum{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin:0 0 18px}
.shop-rbig{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.shop-rbig b{font-size:var(--fs-4xl);line-height:1}
.shop-bars{flex:1 1 14rem;display:flex;flex-direction:column;gap:5px;max-width:22rem}
.shop-bar{display:grid;grid-template-columns:2rem 1fr 1.5rem;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:600;color:var(--mut)}
.shop-track{height:8px;border-radius:99px;background:var(--ln);overflow:hidden}.shop-fill{display:block;height:100%;border-radius:99px;background:var(--gold)}.shop-fill.w0{width:0%}.shop-fill.w10{width:10%}.shop-fill.w20{width:20%}.shop-fill.w30{width:30%}.shop-fill.w40{width:40%}.shop-fill.w50{width:50%}.shop-fill.w60{width:60%}.shop-fill.w70{width:70%}.shop-fill.w80{width:80%}.shop-fill.w90{width:90%}.shop-fill.w100{width:100%}
.shop-reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:12px;margin:0 0 14px}
.shop-review{border:1px solid var(--ln);border-radius:14px;padding:14px 16px;background:var(--bg)}.shop-review p{margin:8px 0 0;line-height:1.5}
.shop-rv-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.shop-reply{margin:10px 0 0;padding:10px 12px;border-left:3px solid var(--pri);background:var(--sf);border-radius:0 10px 10px 0}.shop-reply b{font-size:var(--fs-sm)}.shop-reply p{margin:4px 0 0}
.shop-empty{display:flex;align-items:center;gap:12px;padding:16px;border:1px dashed var(--ln);border-radius:14px;color:var(--mut)}.shop-empty p{margin:0}.shop-empty .ico{color:var(--gold)}
.shop-side{position:sticky;top:calc(var(--hdr-h) + 16px)}
.shop-book{border-radius:18px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.12);margin:0}
.shop-book-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.shop-price b{display:block;font-size:var(--fs-2xl);line-height:1.1}.shop-price small{color:var(--mut);font-weight:600}
.shop-mini-rate{font-weight:700;white-space:nowrap}.shop-mini-rate small{color:var(--mut);font-weight:600}
.shop-h3{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin:16px 0 8px}.shop-h3 small{text-transform:none;letter-spacing:0;font-weight:500}
.shop-days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scroll-snap-type:x proximity;scrollbar-width:thin}
.shop-day{flex:0 0 3.6rem;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 2px;border:1px solid var(--ln);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;cursor:pointer;scroll-snap-align:start}
.shop-day small{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;color:var(--mut)}.shop-day b{font-size:var(--fs-xl);line-height:1.2}
.shop-day:hover{border-color:var(--pri)}.shop-day[aria-pressed=true]{background:var(--pri);border-color:var(--pri);color:var(--on)}.shop-day[aria-pressed=true] small{color:inherit;opacity:.85}
.shop-day:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.shop-book .times{grid-template-columns:repeat(auto-fill,minmax(4.6rem,1fr));max-height:11.5rem;overflow-y:auto;padding:2px}
.shop-pick{display:flex;align-items:center;gap:8px;margin:14px 0 10px;min-height:1.6em}.shop-pick b{margin-left:auto}.shop-pick .ico{width:18px;height:18px;color:var(--pri)}
.btn.shop-cta{display:block;width:100%;margin:0;padding:14px;font-size:var(--fs-md);border-radius:12px}
.btn.shop-cta:disabled{opacity:.55;cursor:not-allowed}
.shop-trust{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;color:var(--mut);font-size:var(--fs-sm)}
.shop-trust li{display:flex;align-items:center;gap:8px}.shop-trust .ico{width:16px;height:16px;color:var(--good)}
.shop-or{display:flex;align-items:center;gap:10px;margin:16px 0 12px;color:var(--mut);font-size:var(--fs-sm);font-weight:600}.shop-or::before,.shop-or::after{content:"";flex:1;height:1px;background:var(--ln)}
.btn.shop-wide{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:0 0 8px}.btn.shop-wide .ico{width:18px;height:18px}
.btn.shop-live{background:var(--good);border-color:var(--good);color:#fff}.shop-live .dot{width:9px;height:9px;border-radius:50%;background:#fff}
@media (prefers-reduced-motion:no-preference){.shop-live .dot{animation:blink 1.6s ease-in-out infinite}}
.shop-sub{margin:0 0 12px;font-size:var(--fs-sm)}
.shop-book .card{box-shadow:none;margin:8px 0}
.shop-bar-m{display:none}
.lightbox{position:fixed;inset:0;z-index:150;background:rgba(23,8,14,.94);display:flex;align-items:center;justify-content:center;padding:56px 16px}
.lb-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;margin:0}
.lb-x,.lb-nav{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;font:inherit;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center}
.lb-x{top:14px;right:14px;width:44px;height:44px;font-size:var(--fs-lg)}.lb-nav{top:50%;width:52px;height:52px;margin-top:-26px;font-size:var(--fs-3xl);line-height:1}.lb-nav.prev{left:14px}.lb-nav.next{right:14px}
.lb-x:hover,.lb-nav:hover{background:rgba(255,255,255,.26)}.lb-x:focus-visible,.lb-nav:focus-visible{outline:3px solid var(--ring)}
.lb-count{position:absolute;top:22px;left:50%;transform:translateX(-50%);color:#fff;font-weight:700}
@media (max-width:860px){
  .shop-gallery{display:none}
  .shop-swipe-wrap{display:block;margin:0 -16px}
  .shop-swipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.shop-swipe::-webkit-scrollbar{display:none}
  .g-slide{flex:0 0 100%;aspect-ratio:4/3;scroll-snap-align:start;cursor:pointer}
  .g-count{position:absolute;right:14px;bottom:12px;padding:3px 10px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;font-size:var(--fs-xs);font-weight:700}
  .shop-title h1{font-size:var(--fs-xl)}.shop-title h1 .vbadge{width:22px;height:22px;background-size:22px 22px}
  .btn.shop-share,.btn.shop-save{padding:0;width:44px;height:44px;justify-content:center}.shop-save .ico{width:20px;height:20px}.shop-share .ico{width:20px;height:20px}.shop-share-t{display:none}
  .shop-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .shop-side{position:static;order:-1;margin:14px 0 6px}
  .shop-book{box-shadow:none}
  .shop-reviews{grid-template-columns:minmax(0,1fr)}
  .shop-bar-m{display:flex;position:fixed;left:0;right:0;bottom:calc(4.4rem + env(safe-area-inset-bottom,0px));z-index:35;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--bg);border-top:1px solid var(--ln);box-shadow:0 -6px 18px rgba(0,0,0,.12)}
  .shop-bar-m b{font-size:var(--fs-lg)}.shop-bar-m small{color:var(--mut);font-weight:600}.shop-bar-rate{display:block}.shop-bar-m .btn{margin:0;flex:0 0 auto}
  .shop{padding-bottom:5rem}
}
@media (prefers-reduced-motion:reduce){.g-img{transition:none}}
/* the VIP Spotlight: the first card of each page of results, across the whole row */
.listings .listing.spot{grid-column:1/-1;display:flex;border:2px solid var(--gold);background:linear-gradient(120deg,rgba(245,196,83,.16),var(--bg) 60%)}
.listings .listing.spot .imgwrap{flex:0 0 46%;display:flex}.listings .listing.spot .imgwrap .cover{aspect-ratio:16/10;width:100%;height:100%;min-height:14rem}
.listings .listing.spot .lbody{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:18px 20px}
.listings .listing.spot .lname{font-size:var(--fs-xl);margin:0}.listings .listing.spot .price{font-size:var(--fs-lg)}
.listings .listing.spot .lbio{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:2px 0}
.spot-tag{display:inline-block;padding:3px 10px;border-radius:99px;background:var(--plum);color:#F5C453;font-size:var(--fs-xs);font-weight:800;letter-spacing:.02em}
.listings .listing.spot .spot-go{margin-top:auto;padding:8px 18px}.listings .listing.spot .status-row{margin:2px 0 8px}
@media (max-width:860px){.listings .listing.spot{display:block}.listings .listing.spot .imgwrap .cover{aspect-ratio:16/9;min-height:0}.listings .listing.spot .lbody{padding:12px 14px}.listings .listing.spot .lname{font-size:var(--fs-lg)}.listings .listing.spot .spot-go{margin-top:6px}}
.spot-go{display:inline-block;font-weight:700;padding:8px 18px;border-radius:8px;background:var(--pri);color:var(--on)}.listing.spot:hover .spot-go{filter:brightness(1.08)}
.listings{grid-auto-flow:row dense}                                                  /* a Spotlight further down never leaves a gap in the row before it */
/* ---- listing cards: the whole card opens the shop, the contact buttons sit above that link ---- */
.listing{position:relative}.lopen{color:inherit;text-decoration:none}.lopen::after{content:'';position:absolute;inset:0;z-index:1}
.lopen:focus-visible{outline:none}.listing:has(.lopen:focus-visible){outline:3px solid var(--ring);outline-offset:2px}
.lcontact{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.btn.lc-btn{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:0;padding:6px 8px;min-height:38px;font-size:var(--fs-sm);white-space:nowrap}.btn.lc-btn .ico{width:16px;height:16px}
.btn.wa,button.btn.wa{background:#25D366;border-color:#25D366;color:#06371B}.btn.wa:hover{filter:brightness(1.05)}
.lc-btn.shown{background:var(--sf);color:var(--pri);border-color:var(--pri)}
.badge.pics{top:auto;bottom:8px;left:8px;display:inline-flex;align-items:center;gap:4px;background:rgba(0,0,0,.62);color:#fff}.badge.pics .ico{width:14px;height:14px}
.lshots{display:none}.lshot{position:relative;overflow:hidden;isolation:isolate;background:var(--plum);min-height:0}
/* the list view has room for more photos: the cover, then up to two more beside it, each shown whole */
@media (min-width:861px){
  .listings.list .imgwrap.has-more{flex-basis:27rem;display:grid;grid-template-columns:3fr 2fr;grid-template-rows:minmax(0,1fr);gap:3px;min-height:14rem}
  .listings.list .imgwrap.has-more .cover{height:100%;min-height:0}
  .listings.list .lshots{display:grid;grid-auto-rows:minmax(0,1fr);gap:3px;min-height:0}.lshot .g-img{position:absolute;inset:0}
  .listings.list .lcontact{grid-column:1/-1;max-width:22rem}
}
.listings.list .lbody .lcontact{grid-area:auto;grid-column:1/-1}
.i-phone{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.4v2.8a1.9 1.9 0 0 1-2 1.9A18.6 18.6 0 0 1 2.9 5a1.9 1.9 0 0 1 1.9-2h2.8a1.9 1.9 0 0 1 1.9 1.6c.1.9.4 1.7.7 2.5a1.9 1.9 0 0 1-.4 2L8.6 10.3a15 15 0 0 0 5.1 5.1l1.2-1.2a1.9 1.9 0 0 1 2-.4c.8.3 1.6.6 2.5.7a1.9 1.9 0 0 1 1.6 1.9z'/%3E%3C/svg%3E")}
.i-whatsapp{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5l1.3-4.2A8.6 8.6 0 1 1 8 19.4z'/%3E%3Cpath d='M9 8.6c0 3.4 3 6.4 6.4 6.4l1-1.5-2-1-.9.8a4 4 0 0 1-2.8-2.8l.8-.9-1-2z' fill='black' stroke-width='1'/%3E%3C/svg%3E")}
/* ---- the shop: the number and WhatsApp side by side; WhatsApp also in the phone's bottom bar ---- */
.shop-contact{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 8px}.shop-contact .shop-wide{margin:0;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.shop-bar-m .shop-bar-wa{margin-left:auto;padding:10px;min-width:46px;display:inline-flex;align-items:center;justify-content:center}.shop-bar-wa .ico{width:22px;height:22px}
.btn.lc-btn{min-width:0}
/* on a phone the cards are narrow: the two buttons are icons side by side (WhatsApp keeps its green), and the number, once shown, takes the row */
@media (max-width:860px){.lcontact .lc-t{display:none}.btn.lc-btn{padding:6px;min-height:40px}.btn.lc-btn .ico{width:20px;height:20px}.lc-btn.shown{flex-basis:100%}.listings.list .price{white-space:normal}}
@media (max-width:860px){
  .listings.list .imgwrap.has-more{display:grid;grid-template-rows:minmax(0,2fr) minmax(0,1fr);gap:3px}.listings.list .imgwrap.has-more .cover{height:100%;min-height:0}
  .listings.list .lshots{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;min-height:0}
}
.shop-contact .shop-wide{white-space:nowrap;padding:10px 8px;min-width:0}
/* ---- the shop's quick ways in, right under the name: video now, call, WhatsApp ---- */
.shop-quick{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px}
.shop-quick .btn{margin:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;font-size:var(--fs-md);white-space:nowrap}.shop-quick .ico{width:19px;height:19px}
.shop-head>.shop-sub{margin:6px 0 0}
.shop-bar-m .shop-bar-call.shown{font-size:0;gap:0}
@media (max-width:860px){.shop-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px}.shop-quick .shop-live{grid-column:1/-1}.shop-quick .btn{padding:11px 10px}.shop-quick .shown{grid-column:1/-1}}
@media (max-width:860px){.shop-bar-m>div:first-child{white-space:nowrap;min-width:0}.shop-bar-m>div:first-child>small:not(.shop-bar-rate){display:none}.shop-bar-m{gap:8px}}
/* the listing's Video checkup button: live green, first in the row, a full row of its own in a narrow card on a computer */
.btn.lc-video{background:var(--good);border-color:var(--good);color:#fff;flex-basis:100%}.lcontact[hidden],.btn.lc-btn[hidden]{display:none}
.lbody .status-row:empty{display:none}
@media (max-width:860px){.btn.lc-video{flex-basis:0}}
@media (min-width:861px){.listings.list .imgwrap.has-more .cover{contain:size}}                              /* a tall photo must not stretch the row: the row takes the card's height, the photo fills it */
@media (min-width:861px){.listings.list .btn.lc-video{flex-basis:0}.listings.list .lcontact{max-width:34rem}}
.timg{position:relative}.carr[hidden]{display:none}
/* ---- a Featured tile on the home page with more than one photo: wider, the cover with up to two more beside it, each shown whole ---- */
.tshots{display:grid;grid-auto-rows:minmax(0,1fr);gap:3px;min-height:0}.tshots .lshot{border-radius:0}.tshots .g-img{position:absolute;inset:0}
.tile.has-more{flex-basis:19rem}
.tile.has-more .timg{display:grid;grid-template-columns:3fr 2fr;gap:3px;aspect-ratio:16/9;border-radius:10px;overflow:hidden}
.tile.has-more.n2 .timg{grid-template-columns:1fr 1fr}
.tile.has-more .cover{aspect-ratio:auto;height:100%;min-height:0;border-radius:0;contain:size}
@media (max-width:860px){.tile.has-more{flex-basis:16rem}}
.track .tile:not(.has-more){flex-basis:14.25rem}                                                     /* a one-photo tile keeps 4:3 at the same height as its neighbours */
@media (max-width:860px){.track .tile:not(.has-more){flex-basis:12rem}}
/* ---- the Spotlight card: the cover with up to two more photos beside it, each shown whole ---- */
.listings .listing.spot .imgwrap.has-more{display:grid;grid-template-columns:3fr 2fr;grid-template-rows:minmax(0,1fr);gap:3px;min-height:14rem}
.listings .listing.spot .imgwrap.n2{grid-template-columns:1fr 1fr}
.listings .listing.spot .imgwrap.has-more .cover{aspect-ratio:auto;height:100%;min-height:0;contain:size}
.listings .listing.spot .lshots{display:grid;grid-auto-rows:minmax(0,1fr);gap:3px;min-height:0}.listings .listing.spot .lshot .g-img{position:absolute;inset:0}
@media (max-width:860px){.listings .listing.spot .imgwrap.has-more{aspect-ratio:16/9;min-height:0}}
/* ---- the listing card shows the description, not the price (the price is on the shop page) ---- */
.listings .lbio{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--fs-sm);line-height:1.4}
.listings.list .lbody{grid-template-areas:"name" "bio" "chips" "meta" "rate" "status";grid-template-columns:1fr}
.listings.list .lbio{-webkit-line-clamp:2}.listings .listing.spot .lbio{-webkit-line-clamp:3}
.listings .listing.spot .lcontact{align-self:stretch;max-width:34rem}                                  /* the Spotlight body lines its items up at the start; the buttons still take a full row */
.shop-bar-m>div:first-child>small.shop-bar-from{display:block;font-size:var(--fs-2xs);color:var(--mut);line-height:1}           /* the phone bar is narrow: "From" sits above the price */

/* ---- classifieds: a row on the home page, a page of them, one classified, and the poster's own ---- */
.clacts{display:flex;align-items:center;gap:12px}.clacts a:not(.btn){font-weight:700;color:var(--pri);text-decoration:none}.clacts a:not(.btn):hover{text-decoration:underline}
.ccard{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--ln);border-radius:12px;overflow:hidden;color:var(--ink);text-decoration:none;min-width:0}
.ccard:hover{border-color:var(--pri)}.ccard:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.ctrack .ccard{flex:0 0 15rem;scroll-snap-align:start}
@media (max-width:860px){.ctrack .ccard{flex-basis:13rem}}
.cimg{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:4/3;background:var(--plum)}.cimg .g-img{position:absolute;inset:0}
.cimg.small{flex:0 0 7.5rem;width:7.5rem;border-radius:8px}
.cbody{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.ctag{align-self:flex-start;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--acc-ink)}
.ctitle{margin:0;font-size:var(--fs-md);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cmeta{display:flex;align-items:center;gap:4px;color:var(--mut);font-size:var(--fs-sm)}.cmeta .ico{width:14px;height:14px}
.cdesc{margin:0;color:var(--mut);font-size:var(--fs-sm);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cgrid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:14px;margin:12px 0}
.csearch{display:flex;gap:8px;max-width:36rem;margin:6px 0 4px}.csearch input{flex:1;min-width:0}
.clmine{display:flex;gap:14px;align-items:flex-start}.clmine-body{flex:1;min-width:0}.clmine-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
@media (max-width:520px){.clmine .cimg.small{flex-basis:5.5rem;width:5.5rem}}
.clform{max-width:40rem}.clform textarea{width:100%}
.cl-contact h3{margin:0 0 10px}.cl-contact>.note:first-child{margin:0;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em}

/* ---- the provider wallet and account pages ---- */
.wl-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start;margin-bottom:16px}
.wl-hero{margin:0;display:flex;flex-direction:column;gap:10px;border:2px solid color-mix(in srgb,var(--pri) 45%,var(--ln))}
.wl-big{font-size:var(--fs-3xl);line-height:1.1;letter-spacing:-.01em}
.wl-kpis{grid-template-columns:minmax(0,1fr)}.wl-kpis .pd-kpi{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 12px;padding:12px 14px}
.wl-kpis .pd-kico{margin:0;width:34px;height:34px}.wl-kpis .pd-kpi b{font-size:var(--fs-xl);margin:0 0 0 auto}.wl-kpis .pd-kpi .note{flex-basis:100%;font-size:var(--fs-xs)}
.wl-flow{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.wl-flow p{margin:0}
.wl-amount{width:100%;max-width:22rem}.wl-row{display:flex;gap:8px;align-items:center}.wl-row input{flex:1;min-width:0;font-size:var(--fs-lg);font-weight:700}
.wl-to{display:flex;gap:8px;align-items:center}.wl-to .ico{color:var(--pri);flex:0 0 auto}
.wl-code{max-width:12rem;font-size:var(--fs-xl);letter-spacing:.3em;text-align:center;font-weight:700}
.wl-links{display:flex;gap:18px;flex-wrap:wrap}
.wl-list{list-style:none;margin:0;padding:0}.wl-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--ln)}.wl-item:first-child{border-top:0}
.wl-item div{display:flex;flex-direction:column;min-width:0}.wl-item .pill{flex:0 0 auto}
.ac-row{display:flex;flex-direction:column;padding:8px 0;border-top:1px solid var(--ln)}.ac-row:first-of-type{border-top:0}.ac-row b{overflow-wrap:anywhere}
.ac-phone{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:4px 0 12px}.ac-phone b{font-size:var(--fs-xl)}
.ac-wait{margin:0 0 12px}
.pf-phone{display:flex;flex-direction:column;gap:2px;margin:.6rem 0}.pf-phone a{color:var(--pri);font-weight:600;font-size:var(--fs-sm)}
@media (max-width:860px){.wl-top{grid-template-columns:minmax(0,1fr)}.wl-big{font-size:var(--fs-3xl)}}
.wl-code::placeholder{letter-spacing:normal;font-size:var(--fs-md);font-weight:400}

/* the phone's bottom menu hides while scrolling down and returns on scrolling up; the shop's price bar moves down into its place */
@media (max-width:860px){
  .bnav{transition:transform .25s ease;will-change:transform}
  .bnav-away .bnav{transform:translateY(calc(100% + 2px))}
  .shop-bar-m{transition:bottom .25s ease}
  .bnav-away .shop-bar-m{bottom:0;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.bnav,.shop-bar-m{transition:none}}

/* romantic type: Playfair Display for headings and the shop names, Nunito for everything else */
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:.1px}
.tname,.brand{font-family:var(--serif)}
h1,h2,h3,.tname{font-variant-numeric:lining-nums}
.top{background:linear-gradient(100deg,var(--hdr) 40%,color-mix(in srgb,var(--hdr) 78%,#C2416A))}

/* the shop menu on a phone: one button naming the section you are in, which opens the whole menu in its groups over the page; a computer keeps the side menu */
.dmenu-btn{display:none}.sidescroll>.dmenu-btn+*{margin-top:0}
@media (max-width:860px){
  .dash .dside{position:relative;top:auto;z-index:5}
  .dmenu-btn{display:flex;align-items:center;gap:12px;width:100%;padding:.65rem 1rem;border:1px solid var(--ln);border-radius:12px;background:var(--sf);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
  .dmenu-btn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}.dmenu-btn>.ico{color:var(--pri)}
  .dmenu-t{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;line-height:1.25}.dmenu-t small{color:var(--mut);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
  .dmenu-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dmenu-btn[aria-expanded=true] .caret{transform:rotate(180deg)}
  .dash .dnav{display:none}
  .dash .dside.open .dnav{display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;position:absolute;top:calc(100% + 6px);left:0;right:0;padding:6px 6px 10px;
    background:var(--bg);border:1px solid var(--ln);border-radius:12px;box-shadow:0 12px 32px rgba(59,31,43,.22);max-height:max(14rem,calc(100vh - 300px));max-height:max(14rem,calc(100dvh - 300px));overflow-y:auto;overscroll-behavior:contain}
  .dash .dside.open .dgroup{display:block}
  .dash .dside.open .dn{border:0;white-space:normal;padding:.6rem .8rem}
}

/* video clips: on the shop page, and in the provider's Photos and videos */
.shop-clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.shop-clip{width:100%;aspect-ratio:9/16;max-height:420px;object-fit:contain;background:#000;border-radius:12px}
.clip-card video.thumb{aspect-ratio:9/16;max-height:320px;object-fit:contain;background:#000}
.pg-clips .clip-wait{display:flex;align-items:center;justify-content:center;min-height:240px;width:100%;border-radius:8px;border:1px dashed var(--ln);background:var(--sf);color:var(--mut);font-size:var(--fs-sm);text-align:center;padding:12px}
@media (max-width:600px){.shop-clips{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.shop-clip{scroll-snap-align:start;max-height:none}
  .pg-clips .photo-grid{grid-template-columns:repeat(2,1fr)}}
/* Photos that have not arrived yet show a spinning loading icon in their frame (pic() in app.js). The blurred backdrop copy needs none. */
img.is-loading:not(.g-blur){background-image:url(spinner.svg)!important;background-position:center!important;background-size:clamp(24px,22%,48px) auto!important;background-repeat:no-repeat!important}
.lb-img.is-loading{min-width:96px;min-height:96px}
.g-blur.is-loading{opacity:0}
/* The same loading icon wherever people wait: a message that is still going (.waiting, see tell() in app.js), a button whose request is on its way (.busy),
   and a page that is opening (body.page-loading). */
.waiting::before{content:"";display:inline-block;width:1.15em;height:1.15em;margin-right:.45em;vertical-align:-.22em;background:url(spinner.svg) center/contain no-repeat;flex:none}
:where(.btn.busy,button.busy){position:relative}.btn.busy,button.busy{-webkit-text-fill-color:transparent;pointer-events:none}
.btn.busy::after,button.busy::after{content:"";position:absolute;inset:0;margin:auto;width:1.3em;height:1.3em;background:currentColor;-webkit-mask:url(spinner.svg) center/contain no-repeat;mask:url(spinner.svg) center/contain no-repeat}  /* in the button's own text colour */
.btn.busy>*,button.busy>*{visibility:hidden}
body.page-loading #view{position:relative;min-height:12rem}
body.page-loading #view::after{content:"";position:absolute;left:50%;top:min(40vh,10rem);width:48px;height:48px;margin-left:-24px;background:url(spinner.svg) center/contain no-repeat;z-index:5}
body.page-loading #view>*{opacity:.35;transition:opacity .2s}
.clip-wait .waiting{display:inline-flex;align-items:center}
/* Until the visitor shares their location, the listings show no distance and this note offers to use it (search() in app.js). */
.locask{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:0 0 12px;padding:10px 14px;border:1px solid var(--ln);border-radius:12px;background:var(--sf)}
.locask>span{flex:1 1 12rem;text-align:left}.locask .btn{flex:none}
/* Where a provider works: county, location and near, with how the listing will read (placeFields() in app.js). */
.placef{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:4px 14px;align-items:end}.placef>p,.placef>button{grid-column:1/-1;margin:2px 0}.placef>button{justify-self:start}
.placef select,.placef input{width:100%}
/* the cover photo (set in the admin console): a picture in each empty side margin on wide screens, the full height of the window */
@media (min-width:1360px){
  body.has-cover::before,body.has-cover::after{content:"";position:fixed;top:0;bottom:0;z-index:-1;width:calc(50vw - 37rem);background:center/cover no-repeat}
  body.has-cover::before{left:0;background-image:var(--cover-l)}
  body.has-cover::after{right:0;background-image:var(--cover-r)}
  body.cover-mirror::after{transform:scaleX(-1)}
}
/* "Already paid? Enter M-Pesa code" under a payment */
.paidcode{margin:.75rem 0}.paidcode-link{font-size:var(--fs-md)}.paidcode .card{margin-top:.5rem}

/* The location picker (openPlacePicker() in app.js): All Kenya, then a county, then a town, like Jiji's. Three columns on a computer, one on a phone. */
.i-chev{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E")}
.i-back{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E")}
.placebtn{display:inline-flex;align-items:center;gap:6px;width:100%;justify-content:flex-start;margin-bottom:8px}
.pp-back-drop{position:fixed;inset:0;z-index:400;background:rgba(28,16,22,.55);display:flex;align-items:flex-start;justify-content:center;padding:max(4vh,16px) 16px}
.pp{background:var(--bg);color:var(--ink);border-radius:14px;width:min(62rem,100%);max-height:min(44rem,88vh);display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.3);overflow:hidden}
.pp-top{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--sf);border-bottom:1px solid var(--ln)}
.pp-head{flex:1 1 auto;min-width:0}.pp-find{flex:0 1 18rem;min-width:0;min-height:40px;border:1px solid var(--ln);border-radius:8px;padding:0 10px;font:inherit;background:var(--bg);color:var(--ink)}
.pp-x{border:0;background:none;font-size:var(--fs-2xl);line-height:1;color:var(--mut);cursor:pointer;padding:4px 6px}
.pp-all,.pp-back{border:0;background:none;font:inherit;color:var(--ink);cursor:pointer;padding:6px 0;display:inline-flex;align-items:center;gap:4px}.pp-all.on b{color:var(--pri)}
.pp-n{color:var(--mut);font-size:var(--fs-sm)}
.pp-list{overflow-y:auto;padding:12px 16px 16px;columns:3 17rem;column-gap:18px}
.pp-group{display:grid;grid-template-columns:18px 1fr;gap:4px;break-inside:avoid;margin-bottom:12px}
.pp-letter{font-weight:700;color:var(--pri);font-size:var(--fs-sm);padding-top:10px;text-align:center}
.pp-group.pop .pp-letter{writing-mode:vertical-rl;transform:rotate(180deg);text-transform:uppercase;letter-spacing:.08em;font-size:var(--fs-2xs);color:var(--mut);padding:8px 0;align-self:start}
.pp-group>div{background:var(--sf);border-radius:8px;overflow:hidden}
.pp-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:0;border-bottom:1px solid var(--ln);background:none;font:inherit;color:var(--ink);text-align:left;padding:9px 10px;cursor:pointer}
.pp-row:last-child{border-bottom:0}.pp-row:hover,.pp-row:focus-visible{background:var(--acc);color:var(--plum)}.pp-row b{font-weight:600}
.pp-row small{display:block;color:var(--mut);font-size:var(--fs-2xs)}.pp-row .ico{width:16px;height:16px;color:var(--mut)}
@media (max-width:640px){.pp-back-drop{padding:0}.pp{border-radius:0;max-height:100vh;height:100%}.pp-top{flex-wrap:wrap}.pp-find{flex:1 1 100%;order:3}}

/* ---------- messages: the list, one chat (newest at the bottom, the box to write in kept in reach), and the locked view below the packages that read chats ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.i-lock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11h14v10H5zM8 11V7a4 4 0 0 1 8 0v4M12 15v2'/%3E%3C/svg%3E")}
.mcount{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:auto;border-radius:10px;background:var(--dot);color:#fff;font-size:var(--fs-2xs);font-weight:700;line-height:1}
.dn .mcount{margin-left:auto}.dn.on .mcount{background:var(--on);color:var(--pri)}
.bi .bico{position:relative}.bdot{position:absolute;top:-4px;right:-10px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--dot);color:#fff;font-size:var(--fs-2xs);font-weight:700;line-height:17px;text-align:center;box-sizing:border-box}
.mpage{max-width:44rem;margin:0 auto}
.mlist{display:flex;flex-direction:column;border:1px solid var(--ln);border-radius:14px;overflow:hidden;background:var(--bg)}
.mrow{display:flex;align-items:center;gap:12px;padding:12px 14px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ln)}.mrow:last-child{border-bottom:0}.mrow:hover{background:var(--sf)}
.mrow.unread .mtop b,.mrow.unread .mtext{font-weight:800;color:var(--ink)}
.mav{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;background:var(--sf)}
.mav.ini{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#F290AC,#A8325A);color:#fff;font-weight:800;font-size:var(--fs-lg)}
.mmain{flex:1;min-width:0}
/* online dot and last seen (Jay, 2026-10-19): green while they are on the site, grey when not */
.mav-wrap{position:relative;display:inline-flex;flex:none}.pdot{position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-radius:50%;background:#9AA0A6;border:2px solid var(--bg);box-sizing:border-box}.pdot.on{background:#22C55E}
.chead .pdot{border-color:var(--bg)}.dm-mini .chead .pdot,.dm-pip .chead .pdot{border-color:var(--sf)}
.dm-avslot{display:inline-flex;flex:none}
.mname{display:flex;align-items:baseline;gap:8px;min-width:0}.mname b{min-width:0}.mpres{flex:none;font-size:var(--fs-2xs);color:var(--mut);white-space:nowrap}.dm-status .mpres{display:block;overflow:hidden;text-overflow:ellipsis}.mpres.on{color:var(--good);font-weight:700}
.dm-status .mpres{font-size:inherit}.mtop{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.mtop b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtop small{flex:none}
.mlast{display:flex;align-items:center;gap:8px;margin-top:2px}.mtext{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mut)}
.mlocked{display:inline-flex;align-items:center;gap:6px;color:var(--mut);font-style:italic}.mlocked .ico{width:15px;height:15px}
.mup{display:flex;gap:14px;align-items:flex-start;border:2px solid var(--pri);background:color-mix(in srgb,var(--pri) 7%,var(--bg))}.mup>.ico{width:28px;height:28px;color:var(--pri);margin-top:2px}.mup p{margin:4px 0 2px}.mup .btn{margin:8px 0 0}
.shop-msg .ico{width:19px;height:19px}
/* one conversation (chatPane() in app.js): a header pinned at the top, the messages as the only part that scrolls, and the box to write in pinned at the bottom.
   The same view is the Messages page (.dm-full), the small floating window (.dm-mini) and the picture-in-picture window (.dm-pip). */
.dm-chat{display:flex;flex-direction:column;min-height:0;background:var(--bg);color:var(--ink)}
.dm-full{max-width:46rem;margin:0 auto;height:var(--dm-fit,calc(100vh - var(--bar-h) - 30px));height:var(--dm-fit,calc(100dvh - var(--bar-h) - 30px))}
.dbody .dm-full{max-width:none}
.dm-body{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.dm-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 4px}
body.dm-mode main{padding-bottom:0}body.dm-mode .foot{display:none}
.chead{flex:none;display:flex;align-items:center;gap:12px;padding:6px 0 12px;border-bottom:1px solid var(--ln)}
.cback{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--ink);flex:none}.cback:hover{background:var(--sf)}.cback .ico{width:22px;height:22px}
.chead .mav{width:44px;height:44px}.cwho{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}.cwho b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cwho a{color:var(--ink);text-decoration:none;min-width:0;display:flex}.cwho a:hover b{text-decoration:underline}
.cacts{display:flex;align-items:center;gap:6px;flex:none}.dm-vslot{display:contents}
.dm-act{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;min-height:40px;padding:0 12px;margin:0;border:1px solid var(--ln);border-radius:99px;background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.dm-act:hover{background:var(--sf)}.dm-act .ico{width:19px;height:19px}
.dm-act.go{background:var(--good);border-color:var(--good);color:#fff}.dm-act.go:hover{background:var(--good);filter:brightness(1.08)}
.dm-act.off{opacity:.5;cursor:not-allowed}.dm-act.on{color:var(--mut);cursor:default}.dm-act.on:hover{background:transparent}
.cthread{display:flex;flex-direction:column;gap:6px;padding:14px 0 10px}
.cday{text-align:center;margin:10px 0 4px}.cday span{display:inline-block;padding:2px 12px;border-radius:99px;background:var(--sf);color:var(--mut);font-size:var(--fs-xs);font-weight:700}
.cb{position:relative;max-width:min(78%,32rem);align-self:flex-start;padding:8px 12px 6px;border-radius:18px 18px 18px 6px;background:var(--sf);border:1px solid var(--ln);overflow-wrap:anywhere;white-space:pre-wrap}
.cb.mine{align-self:flex-end;border-radius:18px 18px 6px 18px;background:var(--pri);border-color:var(--pri);color:var(--on)}
.dm-time{display:block;text-align:right;font-size:var(--fs-2xs);margin-top:2px;color:var(--mut)}.cb.mine .dm-time{color:color-mix(in srgb,var(--on) 80%,transparent)}
/* ticks under your own messages (Jay, 2026-10-19): one grey = sent, two grey = delivered, two green = read */
.i-tick1{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}.i-tick2{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12.5l4.5 4.5L15.5 7.5'/%3E%3Cpath d='M11 16l1 1L22.5 7.5'/%3E%3C/svg%3E")}
.dm-tick{display:inline-flex;align-items:center;vertical-align:-4px;margin-left:4px;color:var(--mut)}.dm-tick .ico{width:17px;height:17px}.dm-tick.t-read{color:var(--good)}
.cb.mine .dm-tick{color:color-mix(in srgb,var(--on) 72%,transparent)}.cb.mine .dm-tick.t-read{color:#5DFF95}
@media(prefers-color-scheme:dark){.cb.mine .dm-tick.t-read{color:#0B6B33}}
.mtext .dm-tick{margin:0 3px 0 0}
/* the other person is typing: three dots bouncing in a bubble of their own */
.dm-typingrow{display:flex;padding:0 0 10px}.cb.dm-typing{display:inline-flex;gap:5px;align-items:center;padding:12px 14px}
.dm-typing i{width:7px;height:7px;border-radius:50%;background:var(--mut);animation:dm-bounce 1.2s infinite ease-in-out}.dm-typing i:nth-child(2){animation-delay:.15s}.dm-typing i:nth-child(3){animation-delay:.3s}
@keyframes dm-bounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}
@media (prefers-reduced-motion:reduce){.dm-typing i{animation:dm-fade 1.2s infinite ease-in-out}}@keyframes dm-fade{0%,100%{opacity:.35}50%{opacity:1}}
.cb.pic{padding:4px}.cb.pic .dm-time{padding:0 8px 2px}.dm-photo{display:block}.dm-img{display:block;width:min(16rem,62vw);height:auto;min-height:6rem;max-height:20rem;object-fit:cover;border-radius:14px;background:var(--bg)}
.cb.locked .cblur{filter:blur(5px);user-select:none;-webkit-user-select:none;color:var(--ink)}
.dm-newpill{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:2;margin:0;padding:6px 14px;border:0;border-radius:99px;background:var(--pri);color:var(--on);font:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.dm-newpill[hidden]{display:none}
.ccompose{flex:none;display:flex;align-items:flex-end;gap:8px;padding:10px 0 12px;background:var(--bg);border-top:1px solid var(--ln);position:relative}
/* emoji (Jay, 2026-10-19): a button between the photo button and the box, on a computer only; a phone's keyboard has its own */
.i-smile{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 14.5c.9 1.2 2.1 1.8 3.5 1.8s2.6-.6 3.5-1.8'/%3E%3Cpath d='M9 9.5h.01M15 9.5h.01' stroke-width='2.6'/%3E%3C/svg%3E")}
.cpic.cemoji{display:none;border:0;background:none;padding:0}@media (hover:hover) and (pointer:fine){.cpic.cemoji{display:inline-flex}}
.dm-emojis{position:absolute;left:0;bottom:calc(100% + 6px);z-index:30;display:grid;grid-template-columns:repeat(8,36px);gap:2px;padding:8px;max-height:220px;overflow-y:auto;background:var(--bg);border:1px solid var(--ln);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.dm-emo{width:36px;height:36px;border:0;border-radius:8px;background:none;font-size:22px;line-height:1;cursor:pointer;padding:0}.dm-emo:hover,.dm-emo:focus-visible{background:var(--sf)}
.dm-mini .dm-emojis,.dm-pip .dm-emojis{grid-template-columns:repeat(6,34px)}.dm-mini .dm-emo,.dm-pip .dm-emo{width:34px;height:34px;font-size:20px}
.dm-chat>.mup,.dm-chat>.cnote{flex:none;margin:8px 0 12px}
.cinput{flex:1;min-width:0;resize:none;min-height:44px;max-height:140px;padding:10px 14px;border-radius:22px;border:1px solid var(--ln);background:var(--sf);color:var(--ink);font:inherit;line-height:1.35}
.cinput:focus-visible{outline:3px solid var(--ring);outline-offset:0}
.cpic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;flex:none;color:var(--pri);cursor:pointer;margin:0}.cpic:hover{background:var(--sf)}.cpic:focus-within{outline:3px solid var(--ring)}.cpic .ico{width:24px;height:24px}
.btn.csend{margin:0;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none}.csend .ico{width:22px;height:22px}
.cname{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;margin:4px 0;border:1px dashed var(--ln);border-radius:12px}.cname .note{flex:1 1 100%;margin:0}.cname input{flex:1;min-width:0}.cname .btn{margin:0}
.creport{flex:none}.creport textarea{width:100%;margin:8px 0 4px}.cnote{text-align:center;color:var(--mut)}.cempty{text-align:center;margin:24px 0 0}.cmore{text-align:center;font-size:var(--fs-sm)}
.dm-say{flex:none;margin:0;padding:0 10px;font-size:var(--fs-sm)}.dm-say:empty{display:none}
.i-block{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM5.6 5.6l12.8 12.8'/%3E%3C/svg%3E")}
.i-popout{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v7H4V5h7M14 4h6v6M20 4l-8 8'/%3E%3C/svg%3E")}
.i-open{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-6 6M4 20l6-6'/%3E%3C/svg%3E")}
.i-minus{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
.i-close{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}

/* the ⋮ menu in the header (Block, Report), like the account menu */
.dm-morebox{position:relative;display:inline-flex}.dm-more{padding:0}
.dm-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:13.5rem;padding:6px;border-radius:12px;background:var(--bg);color:var(--ink);border:1px solid var(--ln);box-shadow:0 12px 32px rgba(0,0,0,.28)}.dm-menu[hidden]{display:none}
.dm-mi{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;margin:0;padding:10px 12px;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;font-weight:600;text-align:left;cursor:pointer;white-space:nowrap}
.dm-mi:hover{background:var(--sf)}.dm-mi:focus-visible{outline:3px solid var(--pri);outline-offset:-3px}.dm-mi:disabled{color:var(--mut);cursor:default;opacity:1}.dm-mi:disabled:hover{background:none}.dm-mi .ico{width:19px;height:19px}
.i-dots{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3C/svg%3E")}
/* a client's list row: the picture opens the provider's shop, the rest of the row the chat */
.mlist .mrow{padding:0;gap:0}.mav-link{display:flex;flex:none;padding:12px 0 12px 14px;border-radius:50%}.mav-link:hover .mav{filter:brightness(1.08)}
.mgo{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:12px 14px;color:var(--ink);text-decoration:none}.mav-link+.mgo{padding-left:12px}
.chead .mav-link{padding:0}

/* the Messages list: its title stays pinned and only the list scrolls */
.dm-listpage{display:flex;flex-direction:column;min-height:0;height:var(--dm-fit,calc(100vh - var(--bar-h) - 30px));height:var(--dm-fit,calc(100dvh - var(--bar-h) - 30px))}
.dm-lhead{flex:none;display:flex;align-items:center;gap:14px;padding:4px 0 12px;border-bottom:1px solid var(--ln)}
.dm-ltitle{min-width:0}.dm-ltitle h1,.dm-ltitle h2{margin:0}.dm-ltitle .note{margin:2px 0 0}.mpage .dm-lico{display:none}.dm-lback{display:none}
.dm-lscroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:12px 2px 16px}
.dm-lscroll>.mup{margin-top:0}

/* the small windows: compact header, icon buttons, smaller boxes */
.dm-mini .chead,.dm-pip .chead{gap:8px;padding:8px 10px;background:var(--sf)}.dm-mini .mav,.dm-pip .mav{width:34px;height:34px;font-size:var(--fs-md)}
.dm-mini .cacts,.dm-pip .cacts{gap:2px}.dm-mini .dm-act,.dm-pip .dm-act{border:0;padding:0;min-width:36px;min-height:36px}.dm-mini .dm-act.go,.dm-pip .dm-act.go{border-radius:50%}
.dm-mini .dm-lbl,.dm-pip .dm-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dm-mini .dm-scroll,.dm-pip .dm-scroll{padding:0 10px}.dm-mini .cthread,.dm-pip .cthread{padding:8px 0}
.dm-mini .ccompose,.dm-pip .ccompose{padding:8px;gap:6px}.dm-mini .cinput,.dm-pip .cinput{min-height:40px;padding:8px 12px}
.dm-mini .cpic,.dm-pip .cpic,.dm-mini .btn.csend,.dm-pip .btn.csend{width:40px;height:40px;min-height:40px}
.dm-mini .cb,.dm-pip .cb{max-width:85%}.dm-mini .dm-img,.dm-pip .dm-img{width:min(12rem,60vw)}
.dm-mini>.mup,.dm-pip>.mup{margin:8px;padding:10px;gap:10px;font-size:var(--fs-sm)}.dm-mini>.cnote,.dm-pip>.cnote{margin:8px}
.dm-float{position:fixed;right:16px;bottom:16px;z-index:46;width:360px;height:min(520px,calc(100vh - var(--hdr-h) - 32px));height:min(520px,calc(100dvh - var(--hdr-h) - 32px));
  border:1px solid var(--ln);border-radius:16px;overflow:hidden;background:var(--bg);box-shadow:0 14px 40px rgba(0,0,0,.3)}
.dm-float[hidden]{display:none}.dm-float .dm-chat{height:100%}
.dm-bubble{display:none;position:relative;padding:0;margin:0;border:0;border-radius:50%;background:none;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.3)}.dm-bubble .mav{width:56px;height:56px}
.dm-bubble .bdot{top:0;right:0}.dm-bubble .bdot[hidden]{display:none}
.dm-float.min{width:auto;height:auto;border:0;border-radius:50%;overflow:visible;background:none;box-shadow:none}.dm-float.min .dm-chat{display:none}.dm-float.min .dm-bubble{display:block}
body.dm-pipbody{margin:0;padding:0;height:100vh;overflow:hidden;background:var(--bg)}body.dm-pipbody .dm-pip{height:100vh}

@media (max-width:860px){
  .shop-quick .shop-msg{grid-column:1/-1}
  .cb{max-width:85%}
  .bi>span:last-child{white-space:nowrap}.bnav .bi{padding:6px 0}
  /* the Messages screens take the whole phone screen: no top bar or search, no bottom bar, no shop menu or greeting. Only the messages (or the list) scroll,
     between the header and the box to write in, which follow the part of the screen the keyboard leaves (--dm-vvh and --dm-vvt, from visualViewport) */
  body.dm-mode .top,body.dm-mode .bnav,body.dm-mode .dash .dside,body.dm-mode .hgreet,body.dm-mode .pd-alert{display:none}
  body.dm-mode{padding:0;overflow:hidden}
  body.dm-mode .dm-full,body.dm-mode .dm-listpage{position:fixed;left:0;right:0;top:var(--dm-vvt,0px);z-index:45;max-width:none;margin:0;height:100vh;height:var(--dm-vvh,100dvh);background:var(--bg)}
  .dm-full .chead,.dm-lhead{gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) 8px 8px 4px;background:var(--bg)}
  .dm-full .chead .mav{width:38px;height:38px;font-size:var(--fs-md)}.dm-full .cwho small{font-size:var(--fs-xs)}
  .dm-full .cacts{gap:2px}.dm-full .dm-act{border:0;padding:0;min-width:40px;min-height:40px}.dm-full .dm-act.go{border-radius:50%;min-width:38px;min-height:38px}
  .dm-full .dm-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dm-full .dm-scroll{padding:0 10px}.dm-full .creport,.dm-full .cname{margin:6px 10px}
  .dm-full .ccompose{padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))}
  .dm-full>.mup,.dm-full>.cnote{margin:8px 8px calc(8px + env(safe-area-inset-bottom,0px))}
  .dm-lback{display:inline-flex}.dm-lico,.dm-ltitle .note{display:none}.dm-ltitle h1,.dm-ltitle h2{font-size:var(--fs-xl)}
  .dm-lscroll{padding:10px 10px calc(16px + env(safe-area-inset-bottom,0px))}
  body.dm-mode.page-loading #view::after{position:fixed;z-index:47}
  /* the small window on a phone: a panel above the bottom bar, or a bubble when minimised */
  .dm-float{left:8px;right:8px;width:auto;bottom:calc(4.8rem + env(safe-area-inset-bottom,0px));height:min(440px,60vh);height:min(440px,60dvh)}
  .bnav-away .dm-float{bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .dm-float.min{left:auto;right:12px;bottom:calc(10.6rem + env(safe-area-inset-bottom,0px))}.bnav-away .dm-float.min{bottom:calc(6.4rem + env(safe-area-inset-bottom,0px))}   /* above a shop's bottom bar */
}
/* "Get alerts on this device" (phone and computer notifications, src/push.js) */
.i-bell{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 5 2 7 2 7H4s2-2 2-7'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E")}
.pushcard{display:flex;gap:12px;align-items:flex-start;margin:0 0 12px}.pushcard p{margin:4px 0 10px}.pushbtns{display:flex;gap:8px;flex-wrap:wrap}.pg-empty .pushbtns{justify-content:center}

/* ---------- help chat with the team: a round button in the bottom right corner, a greeting beside it, and the chat panel above it ---------- */
.i-help{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M10 8.6a2 2 0 1 1 2.8 1.8c-.5.3-.8.7-.8 1.3'/%3E%3Cpath d='M12 13.5h.01'/%3E%3C/svg%3E")}
.help{position:fixed;right:20px;bottom:20px;z-index:44;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}.help>*{pointer-events:auto}
.help-fab{position:relative;width:58px;height:58px;border-radius:50%;border:0;background:var(--pri);color:var(--on);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(59,31,43,.28);transition:transform .15s}
.help-fab:hover{transform:scale(1.05)}.help-fab .ico{width:28px;height:28px}.help-fab .bdot{top:2px;right:2px}.help-fab .bdot[hidden]{display:none}
.help.open .help-fab .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.help-tease{position:relative;width:min(300px,calc(100vw - 40px));background:var(--bg);border:1px solid var(--ln);border-radius:16px 16px 4px 16px;padding:14px 14px 12px;box-shadow:0 10px 30px rgba(59,31,43,.18);animation:helpIn .25s ease}
.help-tease-text{all:unset;cursor:pointer;display:block;margin:0 22px 10px 0;color:var(--ink);line-height:1.45}
.help-x{position:absolute;top:6px;right:6px;width:30px;height:30px;border:0;border-radius:50%;background:none;color:var(--mut);cursor:pointer;font-size:var(--fs-sm)}.help-x:hover{background:var(--sf)}
.help-panel{width:min(370px,calc(100vw - 40px));height:min(540px,calc(100vh - 120px));height:min(540px,calc(100dvh - 120px));display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--ln);border-radius:18px;overflow:hidden;box-shadow:0 14px 40px rgba(59,31,43,.25);animation:helpIn .2s ease}
.help-head{position:relative;display:flex;align-items:center;gap:10px;padding:12px 44px 12px 14px;background:var(--pri);color:var(--on)}.help-head .help-x{top:50%;transform:translateY(-50%);color:var(--on)}.help-head .help-x:hover{background:rgba(255,255,255,.15)}
.help-av{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center}.help-who{display:flex;flex-direction:column;line-height:1.25}.help-who small{opacity:.85}
.help-msgs{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.help-m{max-width:82%;padding:8px 11px 5px;border-radius:14px;background:var(--sf);align-self:flex-start;border-bottom-left-radius:4px}
.help-m.me{align-self:flex-end;background:var(--pri);color:var(--on);border-radius:14px;border-bottom-right-radius:4px}.help-m.auto{background:transparent;border:1px dashed var(--ln)}
.help-m p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.help-m small{display:block;font-size:var(--fs-2xs);font-weight:700;color:var(--mut);margin-bottom:2px}.help-m time{display:block;text-align:right;font-size:var(--fs-2xs);opacity:.7;margin-top:2px}
.help-topics{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}.help-topic{font:inherit;font-size:var(--fs-sm);padding:.4rem .8rem;border-radius:999px;border:1px solid var(--pri);background:var(--bg);color:var(--pri);cursor:pointer}.help-topic:hover{background:var(--sf)}
.help-note{margin:4px 0;color:var(--mut);font-size:var(--fs-sm);text-align:center}
.help-form{display:flex;gap:8px;align-items:flex-end;padding:10px;border-top:1px solid var(--ln);background:var(--bg)}
.help-form textarea{flex:1;resize:none;font:inherit;padding:.55rem .75rem;border:1px solid var(--ln);border-radius:18px;background:var(--bg);color:var(--ink);max-height:120px;min-height:40px}
@keyframes helpIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.help-tease,.help-panel{animation:none}}
body.dm-mode .help,body:has(.dm-float) .help{display:none}
@media (max-width:860px){
  .help{right:14px;bottom:calc(5rem + env(safe-area-inset-bottom,0px));transition:bottom .25s ease}.bnav-away .help{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .help-fab{width:52px;height:52px}
  .help.open{left:0;right:0;top:0;bottom:0;gap:0;background:var(--bg)}.help.open .help-fab{display:none}
  .help.open .help-panel{width:100%;height:100%;border:0;border-radius:0;box-shadow:none}
}

/* ---------- a super administrator's read-only view of an account: a bar across the top of every page ---------- */
.viewbar{position:fixed;z-index:60;left:0;right:0;top:0;height:44px;box-sizing:border-box;display:flex;gap:12px;align-items:center;justify-content:center;padding:0 12px;background:#1F6FEB;color:#fff;font-size:var(--fs-sm)}
.viewbar .vb-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width:640px){.viewbar{font-size:var(--fs-xs);justify-content:space-between}.viewbar .vb-more{display:none}}
.viewbar .btn{background:#fff;color:#1F6FEB;border-color:#fff;min-height:32px;padding:.2rem .8rem;white-space:nowrap;flex:0 0 auto}
/* the bar sits above the top bar: everything placed from the top (the page itself, the top bar, pinned side panes, full-screen chat and help) moves down by its height.
   The script adds the same height to --hdr-h, which the pinned panes and scrolling already use. */
html.viewing{--vb-h:44px}
html.viewing body{padding-top:calc(var(--bar-h) + var(--vb-h))}html.viewing .top{top:var(--vb-h)}
html.viewing .help.open{top:var(--vb-h)}
@media (max-width:860px){html.viewing body.dm-mode .dm-full,html.viewing body.dm-mode .dm-listpage{top:calc(var(--dm-vvt,0px) + var(--vb-h));height:calc(100dvh - var(--vb-h));height:calc(var(--dm-vvh,100dvh) - var(--vb-h))}}

/* photo gallery: tick the photos to show (Jay, 2026-10-19) */
.pg-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}.pg-top label.btn{cursor:pointer}
.pg-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0;padding:10px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--ln)}.pg-bar.full{border-color:#2e7d32;background:color-mix(in srgb,#2e7d32 10%,var(--bg))}
.pg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:10px 0}
.pg-tick{background:var(--bg);border:1px solid var(--ln);border-radius:12px;padding:8px}.pg-tick.on{outline:3px solid var(--pri)}.pg-tick.off .pg-pic{opacity:.5;cursor:not-allowed}
.pg-pic{position:relative;display:block;cursor:pointer;margin:0}.pg-pic .thumb{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.pg-box{position:absolute;right:8px;top:8px;background:#fff;border-radius:8px;padding:4px;line-height:0;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.pg-box input[type=checkbox]{width:24px;height:24px;margin:0;accent-color:var(--pri);cursor:inherit}
.pg-num{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.65);color:#fff;font-size:var(--fs-2xs);font-weight:700;padding:2px 8px;border-radius:99px}
.pg-wait{position:absolute;left:6px;bottom:6px;background:#fff8e1;color:#7a5600;font-size:var(--fs-2xs);padding:2px 6px;border-radius:6px}
.pg-foot{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}.pg-foot .btn{padding:5px 9px;min-height:32px;font-size:var(--fs-xs);margin:0}.pg-del{margin-left:auto!important}
@media (max-width:760px){.pg-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- Empress: one voice for the whole site ----------
   Type: nine sizes (--fs-2xs to --fs-4xl). Playfair is for display sizes only (page titles, section heads, the wordmark); at card size it was too thin, so names on cards are Nunito.
   Colour: the brand tokens above, plus fixed ones (--plum, --gold, --blush, --live, --dot, --night) that stay the same in dark mode. One line-icon set (.ico) everywhere: no emoji in the interface. */
.i-plus{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E")}
.i-store{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9l1.5-5h13L20 9M4 9h16M4 9c0 1.7 1.3 3 3 3s3-1.3 3-3c0 1.7 1.3 3 2 3s2-1.3 2-3c0 1.7 1.3 3 3 3s3-1.3 3-3M5 12v8h14v-8M10 20v-5h4v5'/%3E%3C/svg%3E")}
.i-crown{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8l4 4 4-7 4 7 4-4-1.5 10h-13zM5.5 21h13'/%3E%3C/svg%3E")}
.i-heart{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7.2a4.3 4.3 0 0 1 7.5 2.6C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E")}

h1,h2{font-family:var(--serif);font-weight:600;letter-spacing:-.005em}
h3,.tname,.listing .lname{font-family:var(--sans);font-weight:700;letter-spacing:0}
h1{font-size:var(--fs-2xl);line-height:1.2}h2{font-size:var(--fs-xl);line-height:1.25}
.shopname,.listings .listing.spot .lname,.wordmark{font-family:var(--serif)}
.brand{font-family:var(--sans)}

/* the wordmark beside the lotus */
.top .brand{gap:10px;text-decoration:none}
.wordmark{font-weight:600;font-size:1.6rem;line-height:1;letter-spacing:.08em;color:#fff;white-space:nowrap}
@media (max-width:860px){.wordmark{font-size:1.35rem}}

/* the home page's stance */
.hero{margin:6px 0 18px}.hero h1{margin:0;font-size:var(--fs-3xl);font-weight:600}
.hero p{margin:6px 0 0;color:var(--mut);font-size:var(--fs-lg);max-width:38rem}
@media (max-width:860px){.hero{margin:2px 0 10px}.hero h1{font-size:var(--fs-xl)}.hero p{display:none}}

/* quick links: a line icon in a soft circle */
.qcard{gap:12px;padding:12px 14px;background:var(--bg);transition:border-color .15s,box-shadow .15s}
.qcard:hover{box-shadow:var(--shadow)}
.qcard .qi{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--sf);color:var(--pri)}.qcard .qi .ico{width:20px;height:20px}
.qcard .qi.q-live{color:var(--good)}
.qcard b{font-size:var(--fs-md)}.qcard small{font-size:var(--fs-sm)}
.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 25%,transparent)}

/* bottom bar on a phone: line icons */
.bi .bico{display:inline-flex}.bi .bico .ico{width:24px;height:24px}

/* the listing cards: lighter, one badge on the photo, the tick beside the name */
.listings:not(.list) .listing:not(.spot){border:0;border-radius:0;background:transparent;overflow:visible}
.listings:not(.list) .listing:not(.spot) .imgwrap{border-radius:var(--r-md);overflow:hidden}
.listings:not(.list) .listing:not(.spot) .lbody{padding:10px 2px 6px}
.listing .lname{display:flex;align-items:center;gap:6px;font-size:var(--fs-md)}.listing .lname .vbadge{margin:0;width:16px;height:16px;background-size:16px 16px;position:relative;z-index:2}
.listing .lname .lopen{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listings.list .listing,.listings .listing.spot{box-shadow:var(--shadow);border-color:transparent}
.listings .listing.spot .lname{font-size:var(--fs-2xl)}
.lmeta,.lrate{font-size:var(--fs-sm)}
.badge{font-size:var(--fs-2xs);letter-spacing:.02em}
.tile .timg{border-radius:var(--r-md);overflow:hidden}.tname{font-size:var(--fs-md)}

/* photos fade in once they arrive */
@keyframes pic-in{from{opacity:0}to{opacity:1}}
img.cover:not(.is-loading),img.g-img:not(.is-loading){animation:pic-in .35s ease-out}
@media (prefers-reduced-motion:reduce){img.cover,img.g-img{animation:none!important}}

/* the footer */
.foot{border-top:1px solid var(--ln);margin-top:40px;padding-top:24px;padding-bottom:28px}
.foot-in{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.foot-mark{font-family:var(--serif);font-size:var(--fs-lg);font-weight:600;letter-spacing:.08em;color:var(--ink)}
.foot-links{display:flex;gap:16px;margin-left:auto}.foot-links a{color:var(--mut);text-decoration:none}.foot-links a:hover{color:var(--pri)}
.foot-test{flex-basis:100%;font-size:var(--fs-xs);opacity:.8}

/* phone home: one row of pills (Filters, Online now, Available now, then the categories), so the shops start on the first screen */
@media (max-width:860px){
  .layout .side:has(.filters-box:not([open])){display:none}
  .cgrid{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 12px;padding:2px 16px 4px;scrollbar-width:none;scroll-snap-type:x proximity}.cgrid::-webkit-scrollbar{display:none}
  .ctile2{flex:0 0 auto;flex-direction:row;gap:8px;align-items:center;height:40px;padding:0 14px 0 6px;border:1px solid var(--ln);border-radius:99px;background:var(--bg);font:inherit;color:var(--ink);cursor:pointer;scroll-snap-align:start}
  .ctile2.cpill{padding-left:14px}.ctile2 .ico{width:18px;height:18px;color:var(--pri)}
  .ctile2 .cbox{width:28px;height:28px;max-width:none;border-radius:50%}.ctile2 .cbox .cicon{width:20px;height:20px}
  .ctile2 .clabel{font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
  .ctile2.on{background:var(--pri);border-color:var(--pri);color:var(--on)}.ctile2.on .ico{color:var(--on)}.ctile2.on .cbox{box-shadow:none}
  .ctile2 .fcount{min-width:20px;height:20px;border-radius:10px;background:var(--on);color:var(--pri);font-size:var(--fs-2xs);font-weight:800;display:grid;place-items:center}
  .ctile2:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
  .quick .qcard.qf{display:none}
  .quick{margin:4px 0 8px}.qcard{padding:10px 12px}.qcard .qi{width:34px;height:34px}.qcard small{display:none}
  .featured h2{margin-top:6px}
}

/* a shop on a phone: the bottom bar steps aside while the booking card is on screen, and the help button sits above the bar instead of on its button */
@media (max-width:860px){
  .shop-bar-m{transition:bottom .25s ease,transform .25s ease,opacity .2s}
  .shop-bar-m.away{transform:translateY(calc(100% + 4.6rem));opacity:0;pointer-events:none}
  body:has(.shop-bar-m:not(.away)) .help:not(.open){bottom:calc(4.4rem + 82px + env(safe-area-inset-bottom,0px))}
  body.bnav-away:has(.shop-bar-m:not(.away)) .help:not(.open){bottom:calc(82px + env(safe-area-inset-bottom,0px))}
}

/* the shop menu in four groups: a little tighter, so Money and Settings are in view without scrolling */
.dash .dnav{gap:2px}.dash .dn{padding:.32rem .8rem;line-height:1.4}.dash .dgroup{margin:12px 12px 4px}.dash .dgroup:first-child{margin-top:2px}
@media (max-width:860px){.dash .dside.open .dn{padding:.42rem .8rem}.dash .dside.open .dgroup{margin:10px 12px 2px}}
/* sign-in, sign-up and password recovery */
.auth{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);max-width:980px;margin:24px auto;background:var(--bg);border:1px solid var(--ln);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.auth-art{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:40px 36px;min-height:520px;color:#fff;background:radial-gradient(120% 80% at 0% 0%,#C24A76 0%,transparent 60%),linear-gradient(160deg,#8E2550 0%,var(--hdr) 55%,#3E0F22 100%)}
.auth-art::after{content:"";position:absolute;inset:16px;border:1px solid rgba(255,255,255,.18);border-radius:12px;pointer-events:none}
.auth-lotus{position:absolute;top:36px;left:36px;width:56px;height:56px;filter:brightness(0) invert(1);opacity:.92}
.auth-quote{margin:0;font:600 var(--fs-3xl)/1.15 var(--serif);letter-spacing:-.01em}
.auth-line{margin:0;color:rgba(255,255,255,.78);font-size:var(--fs-md)}
.auth-main{padding:44px 48px;display:flex;flex-direction:column;justify-content:center}
.auth-main h1{margin:0;font:600 var(--fs-2xl)/1.2 var(--serif)}
.auth-sub{margin:6px 0 18px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 6px;background:var(--sf);border:1px solid var(--ln);border-radius:99px}
.seg button{font:inherit;font-weight:700;min-height:40px;border:0;border-radius:99px;background:transparent;color:var(--mut);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--bg);color:var(--ink);box-shadow:0 1px 3px rgba(59,31,43,.14)}
.seg button:focus-visible,.pw-eye:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.auth-form label{font-size:var(--fs-sm);margin:14px 0 6px}
:is(.auth-form,.wiz) :is(input:not([type=radio]):not([type=checkbox]):not([type=file]),select,textarea){border-color:var(--ln);background:var(--bg);border-radius:10px;padding:12px 14px;min-height:48px;transition:border-color .15s,box-shadow .15s}
:is(.auth-form,.wiz) :is(input:not([type=radio]):not([type=checkbox]):not([type=file]),select,textarea):focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 22%,transparent)}
.pw-wrap{position:relative;display:block;font-weight:400}
.pw-wrap input{padding-right:64px!important}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);font:inherit;font-size:var(--fs-sm);font-weight:700;color:var(--pri);background:none;border:0;border-radius:6px;padding:6px 8px;cursor:pointer}
.btn.wide{display:block;width:100%;margin:20px 0 0;min-height:50px;border-radius:10px;font-size:var(--fs-md)}
.auth-forgot{margin:8px 0 0;text-align:right;font-size:var(--fs-sm)}
.auth-forgot a,.auth-foot a{font-weight:700;text-decoration:none}.auth-forgot a:hover,.auth-foot a:hover{text-decoration:underline}
.auth-foot{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--ln);color:var(--mut);font-size:var(--fs-sm);text-align:center}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin:16px 0 0;padding:10px 16px;border:1px solid var(--ln);border-radius:10px;background:#fff;color:#1f1f1f;font-weight:600;text-decoration:none}
.gbtn:hover{background:#f7f7f7}.gbtn:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.or-line{display:flex;align-items:center;gap:12px;margin:14px 0 0;color:var(--mut);font-size:var(--fs-sm)}.or-line::before,.or-line::after{content:"";flex:1;border-top:1px solid var(--ln)}
.auth-terms{margin:14px 0 0;color:var(--mut);font-size:var(--fs-sm);text-align:center}.auth-terms a{font-weight:700}
.ag-links{margin:16px 0 0;font-size:var(--fs-sm);color:var(--mut)}.ag-links a{color:inherit}
.legal{max-width:720px;margin:0 auto}.legal h2{margin:28px 0 8px}.legal p{line-height:1.65}
.auth-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0}.auth-row .btn{margin:0}
.auth-pick{display:flex;gap:8px;flex-wrap:wrap;border:0;padding:0;margin:16px 0 0}.auth-pick legend{padding:0;margin-bottom:6px;font-size:var(--fs-sm)}
.auth-pick label{display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px;border:1px solid var(--ln);border-radius:10px;cursor:pointer;font-weight:600}
.auth-pick label:has(input:checked){border-color:var(--pri);background:var(--sf)}
.pw-fold{margin:4px 0 0}
@media(max-width:760px){
  .auth{grid-template-columns:1fr;margin:0 -16px;border-radius:0;border-left:0;border-right:0;box-shadow:none}
  .auth-art{min-height:0;padding:22px 20px 20px 92px;justify-content:center}
  .auth-art::after{display:none}
  .auth-lotus{top:50%;left:20px;transform:translateY(-50%);width:52px;height:52px}
  .auth-quote{font-size:var(--fs-xl)}.auth-line{font-size:var(--fs-sm)}
  .auth-main{padding:26px 20px 30px}
}
.card.wiz{background:var(--bg);padding:8px 24px 24px;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.wiz h2{font:600 var(--fs-xl)/1.25 var(--serif);margin:18px 0 6px}
@media(max-width:760px){.card.wiz{padding:4px 16px 18px;margin:8px -4px}}
.auth-pick input,.wiz input[type=checkbox],.wiz input[type=radio]{accent-color:var(--pri)}
@media(max-width:760px){ol.steps{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:8px -16px 12px;padding:0 16px}ol.steps::-webkit-scrollbar{display:none}.steps li{white-space:nowrap;flex:0 0 auto}}
/* ---------- the video call, simplified (Jay, 2026-10-20): who and how long on top, five controls below, the rest in sheets ---------- */
body.incall #view>*{opacity:1}body.incall #view::after{display:none}      /* the waiting screen keeps its page "opening" for as long as it waits: never dim it */
.ic-plus{--m:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm5%2011h-4v4h-2v-4H7v-2h4V7h2v4h4v2z'/%3E%3C/svg%3E")}
.call .cbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px 18px;background:linear-gradient(180deg,rgba(23,11,17,.92),rgba(23,11,17,.7));border-bottom:1px solid rgba(255,255,255,.06)}
.cpeer{display:flex;align-items:center;gap:10px;min-width:0}.cpeer>div{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.cpeer b{font:600 var(--fs-md)/1.2 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lav.small{width:38px;height:38px;font-size:var(--fs-md);font-weight:700}
.call .cpill{padding:0;background:none;border-radius:0;font-size:var(--fs-xs);color:rgba(255,255,255,.7);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call .cpill.on{background:none;color:#8FE0AE}.call .cpill.on::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 3px rgba(61,220,132,.2);vertical-align:1px}
.call .cclock{flex-direction:row;align-items:baseline;gap:6px;padding:6px 16px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.call .ctime{font:600 var(--fs-2xl)/1 var(--serif);font-variant-numeric:tabular-nums;letter-spacing:.01em}.call .clbl{font-size:var(--fs-xs);opacity:.7;text-transform:none;letter-spacing:0}
.call .cbars{justify-self:end}
.call .cbanner{left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);display:flex;align-items:center;gap:12px;padding:8px 10px 8px 16px;border-radius:99px;background:rgba(23,11,17,.88);color:#fff;font-weight:600;border:1px solid rgba(245,165,36,.6);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.call .cbanner .btn{margin:0;min-height:34px;padding:4px 14px;border-radius:99px;background:var(--gold);border-color:var(--gold);color:var(--plum)}
.call .cdock{gap:14px;padding:14px 12px 16px;background:linear-gradient(0deg,rgba(23,11,17,.95),rgba(23,11,17,.75))}
.call .cbtn{flex:0 0 auto;width:64px;max-width:none;min-height:0;gap:6px;padding:0;background:none;border-radius:0;font-size:var(--fs-2xs);color:rgba(255,255,255,.85)}
.call .cbtn .ic{width:56px;height:56px;padding:16px;box-sizing:border-box;border-radius:50%;background-color:transparent;-webkit-mask:none;mask:none;position:relative}
.call .cbtn .ic::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.12);transition:background .15s}
.call .cbtn .ic::after{content:"";position:absolute;inset:16px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.call .cbtn:hover .ic::before{background:rgba(255,255,255,.22)}.call .cbtn:hover{background:none}
.call .cbtn[aria-pressed=true]{background:none;color:#fff}.call .cbtn[aria-pressed=true] .ic{color:var(--plum)}.call .cbtn[aria-pressed=true] .ic::before{background:#fff}
.call .cbtn[aria-expanded=true] .ic::before{background:rgba(255,255,255,.3)}
.call .cbtn.gold .ic{color:var(--plum)}.call .cbtn.gold .ic::before{background:var(--gold)}.call .cbtn.gold:hover .ic::before{background:#FFB940}
.call .cbtn.end{background:none}.call .cbtn.end .ic::before{background:#D9453B}.call .cbtn.end:hover .ic::before{background:#E85A50}
.call .cbtn:focus-visible{outline:none}.call .cbtn:focus-visible .ic::before{box-shadow:0 0 0 3px var(--gold)}
.call .cpop{bottom:calc(100% + 10px);max-width:24rem;padding:16px 16px 18px;border-radius:18px;background:rgba(36,20,28,.97);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 48px rgba(0,0,0,.45)}
.csheet-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}.call .cpop h3{margin:0;font:600 var(--fs-lg)/1.2 var(--serif)}
.cused{margin:0;font-size:var(--fs-xs);color:rgba(255,255,255,.65);font-variant-numeric:tabular-nums}
.cx{border:0;background:rgba(255,255,255,.1);color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;font:inherit}
.ctools{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px;margin-bottom:14px}.ctools:empty{display:none}
.ctool{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.05);color:#fff;font:inherit;font-size:var(--fs-xs);cursor:pointer}
.ctool[hidden]{display:none}.ctool:hover{background:rgba(255,255,255,.1)}.ctool .ic{width:22px;height:22px}
.crow{display:grid;gap:8px;margin:0 0 14px}.crow .clbl{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.6)}
.crow:has(input[type=range]){grid-template-columns:1fr auto}.crow:has(input[type=range]) .clbl{grid-column:1/-1}.crow input[type=range]{accent-color:#F290AC;min-height:0}
.cchips{display:flex;flex-wrap:wrap;gap:6px}.cchips.three{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.cchip{border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;border-radius:99px;padding:6px 12px;font:inherit;font-size:var(--fs-sm);cursor:pointer}
.cchip:hover{background:rgba(255,255,255,.08)}.cchip[aria-checked=true],.cchip[aria-pressed=true]{background:#fff;color:var(--plum);border-color:#fff}
.cchip.big{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border-radius:14px}.cchip.big b{font-size:var(--fs-md)}.cchip.big small{opacity:.75}
.cchip.big[aria-checked=true]{background:var(--gold);border-color:var(--gold);color:var(--plum)}
.call .cpop label{font-size:var(--fs-sm)}.call .cpop input[type=tel],.call .cpop select{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:10px}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--plum)}.btn.gold:hover{background:#FFB940}
.cnote{margin:10px 0 0;font-size:var(--fs-sm);color:rgba(255,255,255,.75);text-align:center}.cnote.bad{color:#FFB3A6}
.cmore{margin:0 0 10px;border-top:1px solid rgba(255,255,255,.1);padding-top:10px}.cmore summary{cursor:pointer;font-size:var(--fs-sm);color:rgba(255,255,255,.85)}
.clink{display:block;width:100%;margin-top:6px;padding:10px;border:0;border-top:1px solid rgba(255,255,255,.1);background:none;color:rgba(255,255,255,.75);font:inherit;font-size:var(--fs-sm);cursor:pointer}.clink:hover{color:#fff}
@media(max-width:640px){
  .call .cbar{grid-template-columns:1fr auto;padding:10px 14px}.call .cbars{display:none}
  .call .cdock{gap:6px;padding:12px 6px 14px}.call .cbtn{width:auto;flex:1 1 0;max-width:72px}.call .cbtn .ic{width:52px;height:52px}.call .cbtn .ic::after{inset:15px}
  .call .cpop{left:0;right:0;bottom:100%;max-width:none;border-radius:20px 20px 0 0;border-bottom:0}
}
/* how a checkup ended, and calling again */
.endcard{max-width:30rem;margin:24px auto;padding:28px 24px;text-align:center;background:var(--bg);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.endcard .lav{margin:0 auto 12px}.endcard h1{margin:0 0 4px;font:600 var(--fs-2xl)/1.2 var(--serif)}.endcard>p{margin:4px 0 0}
.endcard dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(6rem,1fr));gap:8px;margin:18px 0 6px}
.endcard dl>div{padding:10px 8px;border:1px solid var(--ln);border-radius:12px;background:var(--sf)}.endcard dt{font-size:var(--fs-xs);font-weight:600;color:var(--mut)}.endcard dd{margin:2px 0 0;font:600 var(--fs-lg)/1.2 var(--serif)}
.endcard .btn.wide{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px}.endcard .btn.wide .ic{width:20px;height:20px}
.again{margin-top:16px;padding-top:6px;text-align:left}.again .row{grid-template-columns:7rem 1fr}.again input{border-color:var(--ln);border-radius:10px}.again>.note{text-align:center}
.badge.pics{gap:5px}.badge.pics .ico+span{margin-right:4px}.badge.pics span:last-child{margin-right:0}

/* The Android apps (html.in-app, web/app.js): taps don't flash grey, pulling down at the top doesn't reload the page, and holding a button or menu item
   doesn't select its words or open the link menu, as in a native app. Text people read (chats, descriptions) can still be selected. */
html.in-app{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
html.in-app :is(button,.btn,.bi,.bnav,.top,nav,.chip,.tab,.help-fab,label){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* In the app a new page slides in a little, and buttons, tabs and cards press in when touched. Off for anyone who asks their phone for less motion. */
@keyframes page-in{from{opacity:.4;transform:translateX(14px)}to{opacity:1;transform:none}}
html.in-app #view.enter{animation:page-in .22s cubic-bezier(.2,.8,.2,1)}
html.in-app :is(button,.btn,.bi,.card a,a.card,.chip){transition:transform .12s ease}
html.in-app :is(button,.btn,.bi,a.card,.chip):active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){html.in-app #view.enter{animation:none}html.in-app :is(button,.btn,.bi,a.card,.chip):active{transform:none}}

/* ---------- swipe: shops one at a time (web/app.js swipeOpen) ---------- */
.i-cards{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3.2' y='5.5' width='11' height='15' rx='2.4' transform='rotate(-12 8.7 13)'/%3E%3Crect x='9' y='3.5' width='11' height='15' rx='2.4' transform='rotate(8 14.5 11)' fill='black' fill-opacity='.18'/%3E%3Cpath d='M14.6 13.6s-2.4-1.4-2.4-3a1.3 1.3 0 0 1 2.4-.7 1.3 1.3 0 0 1 2.4.7c0 1.6-2.4 3-2.4 3z' fill='black' stroke-width='1.2'/%3E%3C/svg%3E")}
.i-undo{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E")}
.hswipe{display:inline-flex;align-items:center;gap:7px;position:relative;font:inherit;font-weight:700;font-size:var(--fs-sm);color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:.5rem 1rem .5rem .8rem;cursor:pointer;transition:background .15s,transform .15s}
.hswipe:hover{background:rgba(255,255,255,.2)}.hswipe:hover .ico{transform:rotate(-8deg)}.hswipe .ico{width:22px;height:22px;transition:transform .15s}
.hswipe.fresh::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid var(--acc);animation:swPing 2.2s ease-out infinite}
@keyframes swPing{0%{opacity:.8;transform:scale(.96)}70%,100%{opacity:0;transform:scale(1.12)}}
@media (min-width:861px){.top .brand,.top .hswipe{grid-column:1;grid-row:1}.top .hswipe{justify-self:end}}                 /* in the logo's column, against the search */
@media (max-width:860px){.hswipe{display:none}}

.sw-back{position:fixed;inset:0;z-index:60;background:rgba(28,16,22,.62);display:grid;place-items:center;padding:16px;animation:helpIn .2s ease}
@media (min-width:861px){.sw-back{background:rgba(28,16,22,.45);-webkit-backdrop-filter:blur(14px) saturate(.9);backdrop-filter:blur(14px) saturate(.9)}}
.swd{position:relative;width:min(420px,100%);height:min(760px,calc(100vh - 32px));height:min(760px,calc(100dvh - 32px));display:flex;flex-direction:column;background:var(--bg);border-radius:24px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.sw-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 10px 6px 14px}
.sw-tabs{display:flex;gap:4px;background:var(--sf);border-radius:999px;padding:3px}
.sw-tab{font:inherit;font-size:var(--fs-sm);font-weight:600;border:0;background:none;color:var(--mut);padding:.4rem .95rem;border-radius:999px;cursor:pointer}
.sw-tab.on{background:var(--bg);color:var(--pri);box-shadow:0 1px 4px rgba(59,31,43,.12)}
.sw-tab.pop{animation:swPop .45s ease}@keyframes swPop{40%{transform:scale(1.18)}}
.sw-dist{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--pri);background:var(--sf);border:0;border-radius:999px;padding:.4rem .8rem;cursor:pointer}.sw-dist .ico{width:16px;height:16px}
.sw-x{width:38px;height:38px;border:0;border-radius:50%;background:none;color:var(--mut);display:grid;place-items:center;cursor:pointer}.sw-x:hover{background:var(--sf)}
.sw-body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;padding:0 12px 12px}
.sw-scroll{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.swd.expanded .sw-scroll{overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth}
.sw-deck{position:relative;flex:1;min-height:0}
.swd.expanded .sw-deck{flex:0 0 auto;height:min(60vh,520px);height:min(60dvh,520px)}
.sw-note{margin:0;padding:0 16px 10px;text-align:center;min-height:0}.sw-note:empty{display:none}

.sw-card{position:absolute;inset:0;border-radius:20px;overflow:hidden;background:var(--sf);box-shadow:0 10px 30px rgba(59,31,43,.22);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.sw-card.drag{transition:none;cursor:grabbing}.sw-card.fly{transition:transform .28s ease-in}.sw-card.settle{transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.sw-card.sw-next{transform:scale(.94) translateY(14px);filter:brightness(.92);pointer-events:none}.sw-card.sw-next.rise{transform:none;filter:none}
.sw-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.sw-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,8,14,.92) 0%,rgba(20,8,14,.55) 32%,rgba(20,8,14,0) 58%),linear-gradient(to bottom,rgba(20,8,14,.35),rgba(20,8,14,0) 18%);pointer-events:none}
.sw-bars{position:absolute;top:10px;left:12px;right:12px;display:flex;gap:4px;z-index:2}.sw-bars span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35)}.sw-bars span.on{background:#fff}
.sw-stamp{position:absolute;top:44px;z-index:3;font-weight:800;font-size:2rem;letter-spacing:.08em;padding:.1rem .6rem;border:4px solid;border-radius:10px;opacity:0;pointer-events:none}
.sw-stamp.like{left:22px;color:#4ade80;transform:rotate(-14deg)}.sw-stamp.nope{right:22px;color:#fb7185;transform:rotate(14deg)}
.sw-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 16px 14px;color:#fff}
.sw-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}.sw-tags .badge{position:static}
.sw-live,.sw-open{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:700;padding:.2rem .6rem;border-radius:999px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px)}
.sw-live i{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:swLive 1.6s infinite}@keyframes swLive{70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}}
.sw-name{margin:0;display:flex;align-items:center;gap:8px;font-size:var(--fs-2xl);line-height:1.15;color:#fff}.sw-name .vbadge{margin:0}
.sw-meta{margin:4px 0 0;opacity:.88;font-size:var(--fs-sm)}
.sw-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.sw-chips span{font-size:var(--fs-xs);padding:.2rem .6rem;border-radius:999px;border:1px solid rgba(255,255,255,.4)}
.sw-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.sw-info-btn{display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:var(--fs-sm);font-weight:600;color:#fff;background:rgba(255,255,255,.16);border:0;border-radius:999px;padding:.35rem .9rem;cursor:pointer}.sw-info-btn .ico{width:16px;height:16px}
.swd.expanded .sw-info-btn{display:none}
.sw-video{display:inline-flex;align-items:center;gap:6px;background:#22c55e;border-color:#22c55e;color:#06210f}.sw-video .ico{width:18px;height:18px}

.sw-acts{display:flex;align-items:center;justify-content:center;gap:16px;padding:14px 0 2px}
.sw-act{width:56px;height:56px;border-radius:50%;border:1px solid var(--ln);background:var(--bg);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px rgba(59,31,43,.14);transition:transform .12s}
.sw-act:hover{transform:scale(1.08)}.sw-act:active{transform:scale(.92)}.sw-act .ico{width:26px;height:26px}
.sw-act.undo,.sw-act.open{width:44px;height:44px}.sw-act.undo .ico,.sw-act.open .ico{width:20px;height:20px}
.sw-act.undo{color:#d97706}.sw-act.nope{color:#e11d48}.sw-act.open{color:#2563eb}.sw-act.open .ico{transform:rotate(-90deg);transition:transform .2s}.swd.expanded .sw-act.open .ico{transform:rotate(90deg)}.sw-act.like{color:#16a34a}

.sw-detail{padding:16px 4px 8px}
.sw-d-head h3{margin:0;display:flex;align-items:center;gap:8px;font-size:var(--fs-xl)}.sw-d-head p{margin:4px 0 0;color:var(--mut);font-size:var(--fs-sm)}
.sw-d-price{margin-top:6px;font-weight:700;color:var(--pri)}
.sw-d-btns{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}.sw-d-btns .btn{display:inline-flex;align-items:center;gap:6px}
.sw-d-sec{margin-top:16px}.sw-d-sec h4{margin:0 0 6px;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}.sw-d-sec p{margin:0;line-height:1.45}
.sw-d-svcs{list-style:none;margin:0;padding:0;display:grid;gap:6px}.sw-d-svcs li{padding:8px 12px;border-radius:12px;background:var(--sf)}.sw-d-svcs small{margin-left:8px;color:var(--mut)}.sw-d-svcs p{margin:2px 0 0;font-size:var(--fs-sm)}
.sw-d-pics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.sw-d-pics img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;display:block}
.sw-d-clips{display:grid;gap:8px}.sw-d-clips video{width:100%;border-radius:12px;background:#000;max-height:360px}
.sw-d-rev{padding:10px 12px;border-radius:12px;background:var(--sf);margin-bottom:8px}.sw-d-rev .stars{color:#f59e0b;font-size:var(--fs-sm)}.sw-d-rev p{margin:4px 0 0;font-size:var(--fs-sm)}
.sw-d-full{display:flex;align-items:center;justify-content:center;gap:4px;margin:18px 0 6px;font-weight:600}.sw-d-full .ico{width:16px;height:16px}
.sw-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px}
.sw-empty p{margin:0 0 8px}.sw-empty-ico{width:64px;height:64px;border-radius:50%;background:var(--sf);color:var(--pri);display:grid;place-items:center;margin-bottom:6px}.sw-empty-ico .ico{width:30px;height:30px}

.sw-match{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;
  background:radial-gradient(circle at 50% 35%,rgba(168,50,90,.95),rgba(28,16,22,.96) 70%);color:#fff;animation:helpIn .25s ease;border-radius:20px}
.sw-match-pic{position:relative;width:132px;height:132px;border-radius:50%;overflow:hidden;border:4px solid #fff;margin-bottom:8px;animation:swPop .6s ease}
.sw-match-pic img{width:100%;height:100%;object-fit:cover}
.sw-match-heart{position:absolute;right:4px;bottom:4px;width:36px;height:36px;border-radius:50%;background:#fff;color:#e11d48;display:grid;place-items:center}
.sw-match b{font-size:var(--fs-xl)}.sw-match p{margin:0 0 10px;opacity:.9}
.sw-match-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.sw-match-btns .btn{display:inline-flex;align-items:center;gap:6px}
.sw-match-btns .btn.alt{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}

.sw-likes{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-content:start;padding-top:4px}
.sw-like{position:relative;border-radius:14px;overflow:hidden;background:var(--sf)}
.sw-like a{display:block;color:var(--ink);text-decoration:none}.sw-like img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.sw-like b,.sw-like small{display:block;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sw-like b{padding-top:8px}.sw-like small{color:var(--mut);padding-bottom:10px}
.sw-unlike{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(20,8,14,.55);color:#fff;display:grid;place-items:center;cursor:pointer}.sw-unlike .ico{width:16px;height:16px}

@media (max-width:860px){
  .sw-back{padding:0;background:var(--bg)}
  .swd{width:100%;height:100%;border-radius:0;box-shadow:none;padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media (prefers-reduced-motion:reduce){.hswipe.fresh::after,.sw-live i,.sw-match,.sw-match-pic,.sw-back,.sw-tab.pop{animation:none}.sw-card,.sw-card.fly,.sw-card.settle{transition:none}}
/* the age check every visitor answers once, over the whole site */
html.gated,html.gated body{overflow:hidden}
.agegate{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(23,11,17,.72);backdrop-filter:blur(16px) saturate(.9);-webkit-backdrop-filter:blur(16px) saturate(.9)}
.ag-card{width:min(26rem,100%);padding:28px 24px 24px;border-radius:20px;background:var(--bg);color:var(--ink);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.ag-logo{display:block;width:60px;height:60px;margin:0 auto 12px;padding:8px;box-sizing:border-box;border-radius:50%;background:var(--hdr)}
.ag-card h2{margin:0 0 8px;font-size:var(--fs-2xl)}.ag-text{margin:0 0 20px;color:var(--mut);font-size:var(--fs-md);min-height:1.5em}
.ag-btns{display:flex;flex-direction:column;gap:10px}.ag-btns .btn{width:100%;margin:0}