.service-salons-page { min-height: 70vh; }
.service-salons-hero { padding: 64px 0 26px; background: radial-gradient(circle at 15% 10%, rgba(219,94,151,.13), transparent 28%), linear-gradient(180deg,#faf7fc 0%,#fff 100%); }
.service-salons-hero-card { min-height: 330px; padding: 28px; display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 36px; align-items: stretch; border: 1px solid #e6deea; border-radius: 34px; background: #fff; box-shadow: 0 30px 80px rgba(46,28,57,.09); }
.service-salons-hero-media { min-height: 270px; position: relative; overflow: hidden; border-radius: 26px; background: #eee7f2; }
.service-salons-hero-media::after { content:""; position:absolute; inset:55% 0 0; background:linear-gradient(transparent,rgba(28,18,34,.4)); }
.service-salons-hero-media img { width:100%; height:100%; object-fit:cover; object-position:center; }
.service-salons-hero-media > span { position:absolute; z-index:2; right:16px; bottom:16px; padding:7px 11px; border-radius:10px; color:#fff; background:rgba(33,22,40,.66); backdrop-filter:blur(10px); font-size:.78rem; font-weight:900; }
.service-salons-hero-copy { min-width:0; display:flex; flex-direction:column; justify-content:center; }
.service-salons-hero-copy > a { width:max-content; color:var(--public-primary); font-size:.82rem; font-weight:850; }
.service-salons-hero-copy > small { margin-top:20px; color:var(--public-muted); font-size:.82rem; }
.service-salons-hero-copy h1 { margin:4px 0 10px; font-size:clamp(2rem,4.2vw,3.6rem); line-height:1.3; }
.service-salons-hero-copy > p { max-width:780px; margin:0; color:var(--public-muted); font-size:1rem; line-height:2; }
.service-salons-hero-stats { margin-top:25px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.service-salons-hero-stats > span { min-width:0; padding:14px; display:flex; flex-direction:column; border:1px solid #eee7f1; border-radius:17px; background:#fbf9fc; }
.service-salons-hero-stats b { font-size:.88rem; }
.service-salons-hero-stats small { margin-top:4px; color:var(--public-muted); font-size:.72rem; }
.service-salons-directory { padding:44px 0 100px; }
.service-salons-heading { margin-bottom:22px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.service-salons-heading > div:first-child > span { color:var(--public-primary); font-size:.8rem; font-weight:900; }
.service-salons-heading h2 { margin:5px 0; font-size:clamp(1.6rem,2.8vw,2.45rem); }
.service-salons-heading p { margin:0; color:var(--public-muted); line-height:1.9; }
.service-salons-sort-note { padding:9px 12px; border-radius:11px; color:var(--public-muted); background:#f4eff6; font-size:.75rem; white-space:nowrap; }
.service-salons-alert { margin-bottom:18px; padding:14px 17px; border:1px solid #efcaca; border-radius:14px; color:#9c3b4b; background:#fff1f3; }
.service-salons-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.service-salon-card { min-width:0; padding:20px; display:flex; flex-direction:column; border:1px solid #e8e1eb; border-radius:26px; background:#fff; box-shadow:0 15px 40px rgba(46,28,57,.055); transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease; }
.service-salon-card:hover { transform:translateY(-4px); border-color:rgba(116,76,152,.3); box-shadow:0 25px 58px rgba(46,28,57,.11); }
.service-salon-card.is-owned { opacity:.9; background:#fbf9fc; }
.service-salon-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.service-salon-brand { min-width:0; display:flex; align-items:center; gap:11px; }
.service-salon-logo { width:58px; height:58px; flex:0 0 58px; display:grid; place-items:center; overflow:hidden; border:1px solid #e8e0ec; border-radius:18px; color:var(--public-primary); background:#f5eef7; font-size:1.1rem; font-weight:950; }
.service-salon-logo img { width:100%; height:100%; padding:3px; object-fit:contain; }
.service-salon-brand > span:last-child { min-width:0; display:flex; flex-direction:column; }
.service-salon-brand small { color:var(--public-muted); font-size:.72rem; }
.service-salon-brand strong { margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1rem; }
.service-salon-public-badge { padding:6px 9px; border-radius:9px; color:#198365; background:#e9f8f2; font-size:.68rem; font-weight:850; white-space:nowrap; }
.service-salon-description { min-height:52px; margin:15px 0; color:var(--public-muted); font-size:.8rem; line-height:1.85; }
.service-salon-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.service-salon-metrics > span { min-width:0; padding:12px 10px; display:flex; flex-direction:column; border:1px solid #eee7f1; border-radius:14px; background:#fbf9fc; }
.service-salon-metrics small { color:var(--public-muted); font-size:.67rem; }
.service-salon-metrics strong { margin-top:5px; color:var(--public-primary); font-size:.79rem; line-height:1.6; }
.service-salon-specialists { margin-top:14px; padding:12px 0; display:flex; align-items:center; gap:11px; border-top:1px solid #f0eaf2; border-bottom:1px solid #f0eaf2; }
.service-salon-specialist-stack { min-width:78px; display:flex; direction:ltr; }
.service-salon-specialist-stack i { width:34px; height:34px; margin-left:-9px; display:grid; place-items:center; overflow:hidden; border:2px solid #fff; border-radius:50%; color:var(--public-primary); background:#eee5f2; font-size:.7rem; font-style:normal; font-weight:900; }
.service-salon-specialist-stack i:first-child { margin-left:0; }
.service-salon-specialist-stack img { width:100%; height:100%; object-fit:cover; }
.service-salon-specialists > span:last-child { min-width:0; display:flex; flex-direction:column; }
.service-salon-specialists strong { font-size:.76rem; }
.service-salon-specialists small { margin-top:3px; color:var(--public-muted); font-size:.68rem; line-height:1.65; }
.service-salon-primary-action,.service-salon-secondary-action { min-height:50px; margin-top:14px; padding:11px 15px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:14px; text-align:center; font-size:.8rem; font-weight:900; }
.service-salon-primary-action { color:#fff; background:linear-gradient(135deg,var(--public-primary),#d65c98); box-shadow:0 12px 24px rgba(113,73,149,.18); }
.service-salon-primary-action:hover { color:#fff; transform:translateY(-1px); }
.service-salon-secondary-action { color:var(--public-primary); border:1px solid #dfd3e5; background:#fff; }
.service-salon-guest-actions { margin-top:auto; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr); gap:9px; }
.service-salon-guest-actions .service-salon-primary-action,.service-salon-guest-actions .service-salon-secondary-action { margin-top:14px; }
.service-salon-owned-note { margin-top:14px; padding:12px 14px; display:flex; flex-direction:column; border:1px solid #ecd4d7; border-radius:13px; color:#8e3d4d; background:#fff4f5; }
.service-salon-owned-note strong { font-size:.76rem; }
.service-salon-owned-note small { margin-top:4px; font-size:.69rem; }
@media (max-width:900px) { .service-salons-hero-card { grid-template-columns:260px minmax(0,1fr); gap:24px; } .service-salons-grid { grid-template-columns:1fr; } }
@media (max-width:700px) { .service-salons-hero { padding-top:34px; } .service-salons-hero-card { padding:18px; grid-template-columns:1fr; border-radius:26px; } .service-salons-hero-media { min-height:230px; } .service-salons-hero-copy h1 { font-size:2rem; } .service-salons-hero-stats { grid-template-columns:1fr; } .service-salons-heading { align-items:flex-start; flex-direction:column; } .service-salons-sort-note { white-space:normal; } .service-salon-card { padding:16px; border-radius:22px; } .service-salon-metrics { grid-template-columns:1fr 1fr; } .service-salon-metrics > span:first-child { grid-column:1/-1; } .service-salon-guest-actions { grid-template-columns:1fr; gap:0; } .service-salon-guest-actions .service-salon-secondary-action { margin-top:8px; } }