/* Salon card: the ONE place that styles a salon card (drawn by card.js). Used by the city finders, the home page and the list pages. */
:root{--bg:#fbf9f6;--card:#fff;--ink:#1d1b20;--mute:#6a6570;--line:#ebe6df;--accent:#6d2f5a;--accent2:#a24a86;--yes:#1f7a4d;--no:#b3402f;--unk:#8a857d;--r:16px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding-bottom:20px}
.sc{display:grid;grid-template-columns:60px minmax(0,1fr);gap:14px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:inherit;transition:transform .18s,box-shadow .18s,border-color .18s;animation:rise .45s ease-out both;min-width:0}
.sc.ph{grid-column:1/-1;grid-template-columns:40% minmax(0,1fr);align-items:stretch;gap:20px}.sc.ph .pic{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;border-radius:12px;align-self:start;background:#f6f1f4}.sc .inf{min-width:0;display:flex;flex-direction:column}
.sc:not(.ph){display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));align-content:start;gap:8px;--s:90px}.sc:not(.ph) .inf,.sc:not(.ph) .tiles{display:contents}.sc:not(.ph) .ico{width:100%;height:auto;aspect-ratio:1;padding:16%;border-radius:18px}.sc:not(.ph) .hd{grid-column:span 3;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:0 6px}.sc:not(.ph) .hd .addr{margin:3px 0 0}.sc:not(.ph) .tl{width:auto;height:auto;aspect-ratio:1}
.sc:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px #6d2f5a77;border-color:#dccfe2}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ic{width:100%;height:100%;display:block}
.ic .m{fill:var(--m)}.ic .d{fill:var(--d)}.ic .l{fill:var(--l)}.ic .w{fill:#fff}.ic .b{fill:var(--b)}.ic .g{fill:var(--g)}.ic .s{fill:none;stroke:var(--m);stroke-width:2.4;stroke-linecap:round}
.t-hair{--m:#8e4a7c;--d:#4f2146;--l:#fff3fa}
.t-barber{--m:#d64545;--b:#2f6db5;--d:#7d8794}
.t-nails{--m:#e0527a;--d:#3d2a40}
.t-beauty{--m:#e0556f;--d:#3d3340;--g:#d9a441}
.t-massage{--m:#4fa583;--d:#2c6a52;--l:#d9efe4}
.sc .ico{position:relative;width:60px;height:60px;padding:9px;border-radius:18px;box-shadow:inset 0 0 0 1px #0000000d}
.sc h3{margin:0;font-size:24px;line-height:1.2;overflow-wrap:anywhere}
.sc .addr{margin:3px 0 8px;font-size:13px;color:var(--mute);overflow-wrap:anywhere}
.sc .q{font-size:12.5px;color:#3c3842;font-style:italic;margin:0 0 8px;overflow-wrap:anywhere}
.sc .tiles{display:grid;grid-template-columns:repeat(var(--c,3),var(--s,72px));grid-auto-rows:var(--s,72px);gap:8px;justify-content:space-between;align-content:center;margin-top:6px}
.sc.ph .tiles{flex:1;min-height:92px;contain:size}
.sc .tl{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--s,72px)*.04);padding:calc(var(--s,72px)*.06);border-radius:calc(var(--s,72px)*.16);border:1px solid var(--line);text-align:center;overflow:hidden;min-width:0}
.sc .tl .ti{width:calc(var(--s,72px)*.38);height:calc(var(--s,72px)*.38);display:block;flex:none}.sc .tl .ti svg{width:100%;height:100%;display:block}
.sc .tl b{font-size:clamp(10px,calc(var(--s,72px)*.135),15px);line-height:1.15;font-weight:600;overflow-wrap:anywhere}
.sc .tl small{font-size:clamp(9px,calc(var(--s,72px)*.11),12px);line-height:1.1;opacity:.8}
.sc .tl .bd{position:absolute;top:calc(var(--s,72px)*.06);right:calc(var(--s,72px)*.06);width:calc(var(--s,72px)*.2);height:calc(var(--s,72px)*.2);border-radius:50%;background:currentColor;display:flex;align-items:center;justify-content:center}
.sc .tl .bd svg{width:70%;height:70%;color:#fff}
.sc .tl.yes{color:var(--yes);border-color:#bfe0cd;background:#f1faf5}
.sc .tl.no{color:var(--no);border-color:#efc9c2;background:#fdf4f2}
.sc .tl.unknown{color:var(--unk);background:#f6f4f0}
.sc .tl.cat{border-color:transparent}
.sc .tl.pf{color:var(--accent);border-color:#e2cfdb;background:#faf3f7}
.sc .tl .ring{width:calc(var(--s,72px)*.4);height:calc(var(--s,72px)*.4);border-radius:50%;background:conic-gradient(var(--accent2) calc(var(--p)*1%),#eadde5 0);display:flex;align-items:center;justify-content:center;flex:none}
.sc .tl .ring i{width:76%;height:76%;border-radius:50%;background:#faf3f7;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:calc(var(--s,72px)*.12);color:var(--accent)}
.morebtn{display:block;margin:6px auto 30px;padding:12px 26px;border:1.5px solid var(--accent);border-radius:999px;background:#fff;color:var(--accent);font-weight:600;cursor:pointer}
@media(max-width:760px){
 .grid{grid-template-columns:minmax(0,1fr)}
 .sc{padding:14px;gap:12px;grid-template-columns:52px minmax(0,1fr)}
 .sc .ico{width:52px;height:52px;padding:7px;border-radius:15px}
 .sc.ph{grid-template-columns:minmax(0,1fr);gap:12px}.sc.ph .pic{width:100%;max-height:none}.sc.ph .tiles{flex:none;min-height:0;contain:none}
 .sc:not(.ph) .hd{grid-column:span 2}
}
@media(prefers-reduced-motion:reduce){.sc{animation:none!important;transition:none!important}}