/* The standard salon page (11-03 redesign). app.js renderPublicSalonProfile
   draws it with sp- classes that no older layer styles, so this one file
   decides its look; it loads after every older customer layer. Inter, the site's ink and violet, white
   cards on soft violet shadows instead of grey borders, glass bars, and the
   brand gradient kept for Book now, the selected tab line and the map pin.
   The layout follows the page's own width (container queries), so Pro Home
   and the setup previews show it the way customers see it. */

.salon-page {
  --sp-ink: #1d1a24;
  --sp-text: #24212b;
  --sp-muted: #6d6778;
  --sp-soft-text: #4b4556;
  --sp-ground: #fbf9ff;
  --sp-band: #f7f6fa;
  --sp-card: #ffffff;
  --sp-line: #ebe7f3;
  --sp-line-soft: #f0edf5;
  --sp-violet: #6a48d0;
  --sp-violet-ink: #5236b3;
  --sp-violet-soft: #f4f0fd;
  --sp-violet-line: #d9cdf8;
  --sp-green: #1f7a5c;
  --sp-green-soft: #e8f7f0;
  --sp-green-dot: #2fb488;
  --sp-closed: #8a3d4c;
  --sp-closed-soft: #fbeef1;
  --sp-closed-dot: #d0607a;
  --sp-gradient: linear-gradient(135deg, #4fcfa9 0%, #5468d6 22%, #7a52dd 62%, #6a48d0 100%);
  --sp-line-gradient: linear-gradient(90deg, #8ff7d2, #93a2f7 50%, #916be8);
  --sp-shadow: 0 1px 2px rgba(29, 26, 36, 0.05), 0 12px 32px -18px rgba(82, 54, 179, 0.2);
  --sp-shadow-hover: 0 1px 2px rgba(29, 26, 36, 0.06), 0 20px 42px -20px rgba(82, 54, 179, 0.36);
  --sp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sp-gutter: clamp(16px, 4vw, 40px);
  --sp-max: 1280px;
  --sp-sticky: calc(var(--sp-topbar, 0px));
  color: var(--sp-text);
  background: var(--sp-ground);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.salon-public-profile.salon-page { width: 100%; max-width: none; margin: 0; padding: 0; }
.salon-page [hidden] { display: none !important; }
.salon-page :is(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
.salon-page :is(ul, ol) { padding: 0; list-style: none; }
.salon-page :is(button, a, input) { font: inherit; letter-spacing: normal; }
.salon-page button { color: inherit; cursor: pointer; }
.salon-page button:disabled { cursor: not-allowed; }
/* Text-like buttons (a service name, the rating, Directions in the meta line,
   a photo) take their content's height, not the app's 44px control minimum. */
.salon-page :is(.sp-service-name, .sp-rating, .sp-meta-link, .sp-photo-open, .sp-map-hit) { min-width: 0; min-height: 0 !important; }
.salon-page a { color: inherit; text-decoration: none; }
.salon-page .icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Keyboard focus: a mint-to-violet ring, never a shift in layout. */
.salon-page :is(button, a, input):focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #8a6fe6, 0 0 0 7px rgba(143, 247, 210, 0.45);
}

/* The page fills the window; its content keeps to 1280px. */
html body.salon-site-mode .customer-shell > .page-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
html body.salon-site-mode,
html body.salon-site-mode :is(#app, .app-shell, .customer-shell, .page-wrap) {
  --native-ground: #fbf9ff;
  background: #fbf9ff;
}

.salon-page .sp-frame {
  container: sp / inline-size;
  --sp-pad: max(var(--sp-gutter), calc((100% - var(--sp-max)) / 2));
  width: 100%;
}

/* ---- Hero ------------------------------------------------------------- */
.salon-page .sp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "back back" "copy actions" "gallery gallery";
  align-items: end;
  gap: 12px 32px;
  padding: 16px var(--sp-pad) 0;
}
.salon-page .sp-back {
  grid-area: back;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-left: -8px;
  padding: 0 14px 0 8px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--sp-muted);
  font-size: 14px;
  font-weight: 700;
  transition: background-color 160ms ease, color 160ms ease;
}
.salon-page .sp-back .icon { transform: rotate(180deg); stroke-width: 2.2; }
.salon-page .sp-back:hover { background: var(--sp-violet-soft); color: var(--sp-violet-ink); }
.salon-page .sp-hero-copy { grid-area: copy; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.salon-page .sp-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.salon-page .sp-hero h1 {
  color: var(--sp-ink);
  font-family: inherit;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}
.salon-page .sp-tagline { max-width: 680px; color: var(--sp-text); font-size: 19px; font-weight: 500; line-height: 1.4; text-wrap: pretty; }
.salon-page .sp-description { max-width: 680px; color: var(--sp-muted); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.salon-page .sp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--sp-muted); font-size: 15px; }
.salon-page .sp-meta > * { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.salon-page .sp-rating { padding: 0; border: 0; background: none; color: var(--sp-ink); }
.salon-page .sp-rating .icon { width: 16px; height: 16px; fill: #916be8; stroke: #916be8; }
.salon-page .sp-rating strong { font-weight: 750; }
.salon-page .sp-rating span { color: var(--sp-muted); font-weight: 500; }
.salon-page .sp-rating:hover span { color: var(--sp-violet-ink); }
.salon-page .sp-new { padding: 3px 10px; min-height: 0 !important; border-radius: 999px; background: var(--sp-violet-soft); color: var(--sp-violet-ink); font-size: 13px; font-weight: 750; }
.salon-page .sp-new .icon { width: 14px; height: 14px; }
.salon-page .sp-place .icon { width: 15px; height: 15px; }
.salon-page :is(.sp-status, .sp-book-status, .sp-status-pill) i {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #b9b1c9;
}
.salon-page .sp-status { font-weight: 650; color: var(--sp-muted); }
.salon-page .sp-status.is-open { color: var(--sp-green); }
.salon-page .sp-status.is-closed { color: var(--sp-closed); }
.salon-page .is-open > i { background: var(--sp-green-dot); box-shadow: 0 0 0 4px rgba(47, 180, 136, 0.16); animation: sp-open-dot 2.6s ease-in-out infinite; }
.salon-page .is-closed > i { background: var(--sp-closed-dot); box-shadow: 0 0 0 4px rgba(208, 96, 122, 0.14); }
@keyframes sp-open-dot { 50% { box-shadow: 0 0 0 6px rgba(47, 180, 136, 0.06); } }
.salon-page .sp-meta-link { padding: 0; border: 0; background: none; color: var(--sp-violet-ink); font-weight: 700; }
.salon-page .sp-meta-link:hover { color: var(--sp-violet); text-decoration: underline; text-underline-offset: 3px; }

.salon-page .sp-hero-actions { grid-area: actions; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.salon-page .sp-pill-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  background: #fff;
  color: var(--sp-text);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(36, 33, 43, 0.06);
  transition: box-shadow 180ms ease, border-color 180ms ease, color 180ms ease, transform 120ms ease;
}
.salon-page .sp-pill-button .icon { width: 17px; height: 17px; }
.salon-page .sp-pill-button:hover { border-color: var(--sp-violet-line); box-shadow: 0 10px 24px -14px rgba(82, 54, 179, 0.45); }
.salon-page .sp-pill-button:active { transform: scale(0.97); }
.salon-page .sp-save.is-active { border-color: #f3c6d3; color: #c2416a; }
.salon-page .sp-save { position: relative; overflow: visible; }
.salon-page .sp-save .icon { transition: fill 160ms ease; }
.salon-page .sp-save.is-active .icon { fill: currentColor; }
/* A ring and eight sparks thrown out from the heart on save. */
.salon-page .sp-save-burst {
  position: absolute;
  left: 27px;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  animation: sp-burst-life 640ms linear forwards;
}
.salon-page .sp-save-burst::before {
  content: "";
  position: absolute;
  left: -16px;
  top: -16px;
  width: 32px;
  height: 32px;
  border: 2px solid #f08aaa;
  border-radius: 50%;
  animation: sp-burst-ring 520ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.salon-page .sp-save-burst i {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--spark, #c2416a);
  transform: rotate(var(--angle)) translateY(0) scale(1);
  animation: sp-burst-spark 560ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.salon-page .sp-save-burst i:nth-child(1) { --angle: 0deg; }
.salon-page .sp-save-burst i:nth-child(2) { --angle: 45deg; --spark: #916be8; }
.salon-page .sp-save-burst i:nth-child(3) { --angle: 90deg; --spark: #4fcfa9; }
.salon-page .sp-save-burst i:nth-child(4) { --angle: 135deg; --spark: #f08aaa; }
.salon-page .sp-save-burst i:nth-child(5) { --angle: 180deg; }
.salon-page .sp-save-burst i:nth-child(6) { --angle: 225deg; --spark: #916be8; }
.salon-page .sp-save-burst i:nth-child(7) { --angle: 270deg; --spark: #4fcfa9; }
.salon-page .sp-save-burst i:nth-child(8) { --angle: 315deg; --spark: #f08aaa; }
@keyframes sp-burst-ring { from { opacity: 1; transform: scale(0.3); } to { opacity: 0; transform: scale(1.5); border-width: 0.5px; } }
@keyframes sp-burst-spark { from { opacity: 1; transform: rotate(var(--angle)) translateY(-6px) scale(1); } to { opacity: 0; transform: rotate(var(--angle)) translateY(-24px) scale(0.3); } }
@keyframes sp-burst-life { to { opacity: 1; } }
.salon-page .sp-website-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--sp-violet);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 10px 24px -14px rgba(106, 72, 208, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
}
.salon-page .sp-website-link .icon:last-child { width: 14px; height: 14px; transition: transform 200ms var(--sp-ease); }
.salon-page .sp-website-link:hover { background: var(--sp-violet-ink); box-shadow: 0 14px 28px -14px rgba(82, 54, 179, 0.85); }
.salon-page .sp-website-link:hover .icon:last-child { transform: translate(2px, -2px); }

/* ---- Photos: a mosaic of four on desktop ------------------------------ */
.salon-page .sp-gallery { grid-area: gallery; position: relative; margin-top: 12px; }
.salon-page .sp-gallery-track {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
  grid-template-rows: 217px 217px;
  gap: 6px;
  overflow: hidden;
  border-radius: 24px;
}
.salon-page .sp-photo { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #ece8f1; }
.salon-page .sp-photo:nth-child(n + 5) { display: none; }
.salon-page .sp-photo-1 { grid-row: 1 / 3; grid-column: 1; }
.salon-page .sp-photo-2 { grid-column: 2 / 4; grid-row: 1; }
.salon-page .sp-photo-3 { grid-column: 2; grid-row: 2; }
.salon-page .sp-photo-4 { grid-column: 3; grid-row: 2; }
.salon-page .has-1 .sp-gallery-track { grid-template-columns: minmax(0, 1fr); grid-template-rows: 440px; }
.salon-page .has-1 .sp-photo-1 { grid-row: 1; }
.salon-page .has-2 .sp-gallery-track { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: 440px; }
.salon-page .has-2 .sp-photo-1 { grid-row: 1; }
.salon-page .has-2 .sp-photo-2 { grid-column: 2; }
.salon-page .has-3 .sp-gallery-track { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.salon-page .has-3 .sp-photo-2 { grid-column: 2; grid-row: 1; }
.salon-page .has-3 .sp-photo-3 { grid-column: 2; grid-row: 2; }
.salon-page .sp-photo-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; }
.salon-page .sp-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms ease;
  animation: sp-photo-in 320ms var(--sp-ease) backwards;
  will-change: transform;
}
.salon-page .sp-photo-2 img { animation-delay: 40ms; }
.salon-page .sp-photo-3 img { animation-delay: 80ms; }
.salon-page .sp-photo-4 img { animation-delay: 120ms; }
@keyframes sp-photo-in { from { opacity: 0; } }
.salon-page .sp-photo-open:hover img { transform: scale(1.025); filter: saturate(1.04) brightness(1.02); }
.salon-page .sp-gallery-all {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--sp-ink);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 24px -12px rgba(29, 26, 36, 0.4);
  transition: background-color 160ms ease, transform 120ms ease;
}
.salon-page .sp-gallery-all:hover { background: #fff; }
.salon-page .sp-gallery-all:active { transform: scale(0.97); }
.salon-page .sp-gallery-count { display: none; }
.salon-page .sp-gallery-add {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--sp-violet-ink);
  box-shadow: 0 8px 24px -12px rgba(29, 26, 36, 0.45);
}
.salon-page .sp-gallery-add .icon { width: 20px; height: 20px; }
.salon-page .sp-gallery-empty { grid-area: gallery; margin-top: 12px; }

/* ---- Section tabs: a glass strip under the Refinelook bar ------------- */
.salon-page .sp-tabs {
  position: sticky;
  top: var(--sp-sticky);
  z-index: 30;
  margin-top: 28px;
  padding-inline: var(--sp-pad);
  border-bottom: 1px solid var(--sp-line);
  background: rgba(251, 249, 255, 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  transition: top 300ms var(--sp-ease);
}
.salon-page .sp-tabs-track {
  position: relative;
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.salon-page .sp-tabs-track::-webkit-scrollbar { display: none; }
.salon-page .sp-tab {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--sp-muted);
  font-size: 15px;
  font-weight: 700;
  transition: color 160ms ease;
}
.salon-page .sp-tab:hover { color: var(--sp-ink); }
.salon-page .sp-tab[aria-current="true"] { color: var(--sp-ink); font-weight: 750; }
.salon-page .sp-tab-count {
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1eff5;
  color: #5d5767;
  font-size: 12px;
  font-weight: 700;
  transition: background-color 160ms ease, color 160ms ease;
}
.salon-page .sp-tab[aria-current="true"] .sp-tab-count { background: var(--sp-violet-soft); color: var(--sp-violet-ink); }
.salon-page .sp-tabs-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--sp-line-w, 0px);
  height: 3px;
  border-radius: 3px;
  background: var(--sp-line-gradient);
  transform: translateX(var(--sp-line-x, 0px));
  pointer-events: none;
}
.salon-page .sp-tabs.is-placed .sp-tabs-line { transition: transform 220ms var(--sp-ease), width 220ms var(--sp-ease); }

/* ---- Body: the page and the booking card beside it -------------------- */
.salon-page .sp-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  align-items: start;
  gap: 40px;
  padding: 40px var(--sp-pad) 96px;
}
.salon-page .sp-main { display: flex; flex-direction: column; gap: 72px; min-width: 0; }
.salon-page .sp-rail { position: sticky; top: calc(var(--sp-sticky) + 72px); align-self: start; }
.salon-page [id^="site-"] { scroll-margin-top: calc(var(--sp-sticky) + 76px); }
.salon-page .sp-section { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.salon-page .sp-section-head { display: flex; flex-direction: column; gap: 8px; }
.salon-page .sp-eyebrow { color: var(--sp-violet-ink); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.salon-page .sp-section-head h2 { color: var(--sp-ink); font-family: inherit; font-size: 28px; font-weight: 750; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.salon-page .sp-lead { max-width: 640px; color: var(--sp-muted); font-size: 16px; line-height: 1.55; }
.salon-page .sp-lead:empty, .salon-page .sp-eyebrow:empty { display: none; }
.salon-page .sp-empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--sp-shadow);
}
.salon-page .sp-empty strong { color: var(--sp-ink); font-size: 15px; font-weight: 750; }
.salon-page .sp-empty span { color: var(--sp-muted); font-size: 14px; }
.salon-page .sp-more-button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--sp-violet-line);
  border-radius: 999px;
  background: #fff;
  color: var(--sp-violet-ink);
  font-size: 15px;
  font-weight: 700;
  transition: box-shadow 180ms ease, background-color 180ms ease;
}
.salon-page .sp-more-button .icon { transform: rotate(90deg); transition: transform 360ms var(--sp-ease); }
.salon-page .sp-more-button[aria-expanded="true"] .icon { transform: rotate(-90deg); }
/* The long menu while it grows or shrinks (ui/salon-page.js): its cards keep
   their shadows, and categories on their way out fade as they go. */
.salon-page .sp-service-groups { overflow-clip-margin: 32px; }
.salon-page .sp-service-groups.is-closing [data-salon-services-later] { opacity: 0.2; transform: translateY(-6px); transition: opacity 360ms ease, transform 480ms var(--sp-ease); }
.salon-page .sp-more-button:hover { background: var(--sp-violet-soft); box-shadow: 0 10px 22px -16px rgba(82, 54, 179, 0.6); }

/* ---- Services --------------------------------------------------------- */
.salon-page .sp-services { display: flex; flex-direction: column; gap: 18px; }
.salon-page .sp-search {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  height: 52px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--sp-muted);
  box-shadow: 0 1px 2px rgba(29, 26, 36, 0.05), 0 10px 28px -18px rgba(82, 54, 179, 0.3);
  transition: box-shadow 180ms ease;
}
.salon-page .sp-search:focus-within { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #8a6fe6, 0 14px 30px -18px rgba(82, 54, 179, 0.45); }
.salon-page .sp-search .icon { width: 18px; height: 18px; }
/* The pill is the field: the app's focus surface (focus.css) stays off the
   input, so no grey box appears inside it. */
.salon-page .sp-search { --text-entry-focus-surface: transparent; --text-entry-border: transparent; }
.salon-page .sp-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--sp-ink);
  font-size: 15px;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.salon-page .sp-search input::-webkit-search-cancel-button { cursor: pointer; }
.salon-page .sp-chips-wrap { position: relative; min-width: 0; }
.salon-page .sp-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 4px 2px 10px;
  margin: -4px -2px -10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.salon-page .sp-chips::-webkit-scrollbar { display: none; }
.salon-page [data-salon-chips].can-back .sp-chips { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px); mask-image: linear-gradient(90deg, transparent 0, #000 56px); }
.salon-page [data-salon-chips].can-forward .sp-chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%); }
.salon-page [data-salon-chips].can-back.can-forward .sp-chips { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); }
.salon-page .sp-chips-arrow {
  position: absolute;
  top: 0;
  right: -6px;
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--sp-violet-ink);
  box-shadow: 0 8px 20px -12px rgba(82, 54, 179, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
  transition: opacity 180ms ease, transform 220ms var(--sp-ease), background-color 160ms ease;
}
.salon-page .sp-chips-arrow.is-back { right: auto; left: -6px; }
.salon-page .sp-chips-arrow.is-back .icon { transform: rotate(180deg); }
.salon-page .sp-chips-arrow:hover { background: var(--sp-violet-soft); }
.salon-page [data-salon-chips].can-back .sp-chips-arrow.is-back,
.salon-page [data-salon-chips].can-forward .sp-chips-arrow:not(.is-back) { opacity: 1; pointer-events: auto; transform: none; }
.salon-page .sp-chip {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  background: #fff;
  color: var(--sp-text);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
.salon-page .sp-chip span { color: var(--sp-muted); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.salon-page .sp-chip:hover { border-color: var(--sp-violet-line); }
.salon-page .sp-chip:active { transform: scale(0.97); }
.salon-page .sp-chip[aria-pressed="true"] { border-color: var(--sp-violet); background: var(--sp-violet); color: #fff; box-shadow: 0 8px 18px -12px rgba(106, 72, 208, 0.8); }
.salon-page .sp-chip[aria-pressed="true"] span { color: #e9e1ff; }
.salon-page .sp-service-groups { display: flex; flex-direction: column; gap: 26px; margin-top: 6px; }
.salon-page .sp-service-group { display: flex; flex-direction: column; gap: 10px; }
.salon-page .sp-service-group > h3 { display: flex; align-items: baseline; gap: 8px; color: var(--sp-ink); font-family: inherit; font-size: 16px; font-weight: 750; }
.salon-page .sp-service-group > h3 span { color: var(--sp-muted); font-size: 13px; font-weight: 600; }
.salon-page .sp-service-group-description { max-width: none; margin-top: -4px; color: var(--sp-muted); font-size: 14px; line-height: 1.5; }
.salon-page .sp-service-list { padding: 6px; border-radius: 20px; background: #fff; box-shadow: var(--sp-shadow); }
.salon-page .sp-service {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 16px 16px 18px;
  border-radius: 14px;
  cursor: pointer;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
.salon-page .sp-service + .sp-service::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 16px;
  height: 1px;
  background: var(--sp-line-soft);
  transition: opacity 180ms ease;
}
.salon-page .sp-service:hover { background: #fbf9ff; box-shadow: 0 0 0 1px #ece6fb, 0 14px 30px -18px rgba(82, 54, 179, 0.45); }
.salon-page .sp-service:hover::before,
.salon-page .sp-service:hover + .sp-service::before { opacity: 0; }
.salon-page .sp-service-copy { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.salon-page .sp-service-copy h4 { font: inherit; }
.salon-page .sp-service-name {
  padding: 0;
  border: 0;
  background: none;
  color: var(--sp-ink);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
  overflow-wrap: anywhere;
}
.salon-page .sp-service-copy > p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--sp-muted);
  font-size: 14px;
  line-height: 1.45;
}
.salon-page .sp-service-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 2px; color: var(--sp-muted); font-size: 13px; font-weight: 600; }
.salon-page .sp-service-length { display: inline-flex; align-items: center; gap: 5px; }
.salon-page .sp-service-length .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.salon-page .sp-tag { padding: 2px 8px; border-radius: 999px; background: var(--sp-violet-soft); color: var(--sp-violet-ink); font-size: 12px; font-weight: 700; }
.salon-page .sp-service-action { display: flex; align-items: center; gap: 20px; flex: none; }
.salon-page .sp-service-price { min-width: 76px; color: var(--sp-ink); font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.salon-page .sp-service-price.is-free { color: var(--sp-green); }
.salon-page .sp-book-soft {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--sp-violet-soft);
  color: var(--sp-violet-ink);
  font-size: 15px;
  font-weight: 700;
  transition: color 200ms ease, box-shadow 200ms ease, transform 120ms ease;
}
.salon-page .sp-book-soft::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--sp-gradient);
  opacity: 0;
  transition: opacity 200ms ease;
}
.salon-page :is(.sp-service:hover, .sp-stylist:hover) .sp-book-soft:not(:disabled),
.salon-page .sp-book-soft:not(:disabled):is(:hover, :focus-visible) {
  color: #fff;
  text-shadow: 0 1px 1px rgba(40, 24, 96, 0.25);
  box-shadow: 0 8px 18px -12px rgba(106, 72, 208, 0.75);
}
.salon-page :is(.sp-service:hover, .sp-stylist:hover) .sp-book-soft:not(:disabled)::before,
.salon-page .sp-book-soft:not(:disabled):is(:hover, :focus-visible)::before { opacity: 1; }
.salon-page .sp-book-soft:not(:disabled):active { transform: scale(0.96); }
.salon-page .sp-book-soft:disabled { background: var(--sp-band); color: var(--sp-muted); font-size: 13px; }
.salon-page .sp-services-none { padding: 20px 22px; border-radius: 18px; background: var(--sp-band); color: var(--sp-muted); font-size: 15px; }

/* ---- Stylists --------------------------------------------------------- */
.salon-page .sp-stylists { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.salon-page .sp-stylist {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--sp-shadow);
  transition: box-shadow 260ms ease, transform 320ms var(--sp-ease);
}
.salon-page .sp-stylist:hover { box-shadow: var(--sp-shadow-hover); transform: translateY(-3px); }
.salon-page .sp-stylist:active { transform: translateY(-1px) scale(0.99); }
.salon-page .sp-stylist-open {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: 0 !important;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  cursor: pointer;
}
.salon-page .sp-stylist-actions .sp-book-soft { position: relative; z-index: 2; margin-left: auto; }
.salon-page .sp-stylist-arrow {
  display: grid;
  flex: none;
  width: 32px;
  height: 32px;
  margin-left: auto;
  place-items: center;
  border-radius: 999px;
  background: var(--sp-violet-soft);
  color: var(--sp-violet-ink);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 220ms ease, transform 320ms var(--sp-ease);
}
.salon-page .sp-stylist-arrow .icon { width: 15px; height: 15px; }
.salon-page .sp-stylist:is(:hover, :focus-within) .sp-stylist-arrow { opacity: 1; transform: none; }
.salon-page .sp-stylist-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.salon-page .sp-stylist-photo { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #ece6fb; transition: box-shadow 220ms ease; }
.salon-page .sp-stylist:hover .sp-stylist-photo { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #b9a6f2; }
.salon-page .sp-stylist-head > div { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.salon-page .sp-stylist h3 { color: var(--sp-ink); font-family: inherit; font-size: 17px; font-weight: 750; overflow-wrap: anywhere; }
.salon-page .sp-stylist-head p { color: var(--sp-muted); font-size: 13px; font-weight: 600; }
.salon-page .sp-stylist-bio { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--sp-soft-text); font-size: 14px; line-height: 1.5; }
.salon-page .sp-stylist-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.salon-page .sp-stylist-tags li { padding: 5px 10px; border-radius: 999px; background: var(--sp-violet-soft); color: var(--sp-violet-ink); font-size: 12.5px; font-weight: 650; }
.salon-page .sp-stylist-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }

/* ---- Reviews ---------------------------------------------------------- */
.salon-page .sp-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; align-items: stretch; }
.salon-page .sp-review-summary,
.salon-page .sp-review,
.salon-page .sp-review-empty {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--sp-shadow);
}
.salon-page .sp-review-summary { gap: 8px; background: linear-gradient(160deg, #fff 40%, var(--sp-violet-soft)); }
.salon-page .sp-review-score { color: var(--sp-ink); font-size: 52px; font-weight: 750; line-height: 1; letter-spacing: -0.04em; }
.salon-page .sp-review-stars, .salon-page .sp-review-rating { display: flex; align-items: center; gap: 3px; color: #916be8; }
.salon-page .sp-review-stars .icon, .salon-page .sp-review-rating .icon { width: 17px; height: 17px; }
.salon-page .sp-review-rating b { margin-left: 6px; color: var(--sp-ink); font-size: 13px; font-weight: 750; }
.salon-page .sp-review-summary h3 { margin-top: 6px; color: var(--sp-ink); font-family: inherit; font-size: 15px; font-weight: 750; }
.salon-page .sp-review-summary p { color: var(--sp-muted); font-size: 14px; line-height: 1.5; }
.salon-page .sp-review > header { display: flex; align-items: center; gap: 12px; min-width: 0; }
.salon-page .sp-review-avatar { display: grid; flex: none; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: var(--sp-violet-soft); color: var(--sp-violet-ink); font-weight: 750; }
.salon-page .sp-review > header > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.salon-page .sp-review > header strong { color: var(--sp-ink); font-size: 15px; font-weight: 750; overflow-wrap: anywhere; }
.salon-page .sp-review > header small { color: var(--sp-muted); font-size: 13px; }
.salon-page .sp-review-tag { margin-left: auto; flex: none; max-width: 50%; padding: 4px 10px; overflow: hidden; border-radius: 999px; background: var(--sp-band); color: #5d5767; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.salon-page .sp-review-tag.is-stylist { background: var(--sp-violet-soft); color: var(--sp-violet-ink); }
.salon-page .sp-review h4 { color: var(--sp-ink); font-family: inherit; font-size: 15px; font-weight: 750; }
.salon-page .sp-review > p { color: var(--sp-text); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.salon-page .sp-review-photos { display: flex; gap: 8px; overflow-x: auto; }
.salon-page .sp-review-photos img { width: 72px; height: 72px; flex: none; border-radius: 12px; object-fit: cover; }
.salon-page .sp-review blockquote { padding: 12px 14px; border-radius: 14px; background: var(--sp-band); }
.salon-page .sp-review blockquote strong { display: block; color: var(--sp-ink); font-size: 13px; font-weight: 750; }
.salon-page .sp-review blockquote p { margin-top: 4px; color: var(--sp-soft-text); font-size: 14px; line-height: 1.5; }
.salon-page .sp-review .rl-safety-action { align-self: flex-start; }

/* ---- About & visit ---------------------------------------------------- */
.salon-page .sp-about-copy { max-width: 680px; color: var(--sp-text); font-size: 16px; line-height: 1.6; }
.salon-page .sp-visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: stretch; }
.salon-page .sp-card { min-width: 0; border-radius: 20px; background: #fff; box-shadow: var(--sp-shadow); }
.salon-page .sp-hours { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.salon-page .sp-hours > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.salon-page .sp-card h3 { color: var(--sp-ink); font-family: inherit; font-size: 16px; font-weight: 750; }
.salon-page .sp-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--sp-band); color: var(--sp-muted); font-size: 12px; font-weight: 750; white-space: nowrap; }
.salon-page .sp-status-pill i { width: 6px; height: 6px; }
.salon-page .sp-status-pill.is-open { background: var(--sp-green-soft); color: var(--sp-green); }
.salon-page .sp-status-pill.is-closed { background: var(--sp-closed-soft); color: var(--sp-closed); }
.salon-page .sp-hours-list { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; }
.salon-page .sp-hours-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 12px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--sp-text);
  line-height: 22px;
}
.salon-page .sp-hours-list li.is-closed, .salon-page .sp-hours-list li.is-neutral { color: var(--sp-muted); }
.salon-page .sp-hours-list li.is-today { background: var(--sp-violet-soft); color: var(--sp-ink); font-weight: 750; }
/* The light sits inside the day's first line, centred on it, so a day with
   two ranges still lines up with its light and its first range. */
.salon-page .sp-hours-day { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; min-height: 22px; }
.salon-page .sp-hours-times { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; text-align: right; }
.salon-page .sp-hours-times > span { line-height: 22px; }
.salon-page .sp-hours-times > span { white-space: nowrap; }
/* Green for open, red for closed, amber for changed hours. */
.salon-page .sp-light {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c9c3d3;
}
.salon-page .is-open .sp-light { background: var(--sp-green-dot); box-shadow: 0 0 0 3px rgba(47, 180, 136, 0.16); }
.salon-page .is-closed .sp-light { background: var(--sp-closed-dot); box-shadow: 0 0 0 3px rgba(208, 96, 122, 0.14); }
.salon-page .is-special .sp-light { background: #e0a43a; box-shadow: 0 0 0 3px rgba(224, 164, 58, 0.18); }
.salon-page .sp-hours-list li.is-today.is-open .sp-light { animation: sp-open-dot 2.6s ease-in-out infinite; }
.salon-page .sp-hours-list small { padding: 1px 7px; border-radius: 999px; background: #fff; color: var(--sp-violet-ink); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.salon-page .sp-hours-fallback { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: var(--sp-band); }
.salon-page .sp-hours-fallback strong { color: var(--sp-ink); font-size: 15px; }
.salon-page .sp-hours-fallback span { color: var(--sp-muted); font-size: 14px; }
.salon-page .sp-holidays { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding: 14px 12px 0; border-top: 1px solid var(--sp-line-soft); }
.salon-page .sp-holidays .sp-mini-heading { padding-left: 18px; }
.salon-page .sp-mini-heading { color: var(--sp-muted); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.salon-page .sp-holiday-list { display: flex; flex-direction: column; gap: 6px; }
.salon-page .sp-holiday-list { gap: 10px; }
.salon-page .sp-holiday-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 2px 12px; color: var(--sp-text); font-size: 14px; line-height: 21px; }
.salon-page .sp-holiday-list time { display: flex; flex-direction: column; min-width: 0; }
.salon-page .sp-holiday-list .sp-hours-day { min-height: 21px; }
.salon-page .sp-holiday-list .sp-hours-times > span { line-height: 21px; }
/* The date lines up under the holiday's name, past its light. */
.salon-page .sp-holiday-list time small { padding-left: 18px; color: var(--sp-muted); font-size: 12.5px; line-height: 19px; }
.salon-page .sp-holiday-list .sp-hours-times { color: var(--sp-muted); font-size: 13px; }
.salon-page .sp-holiday-list li.is-closed .sp-hours-times { color: var(--sp-closed); }
.salon-page .sp-holiday-list li.is-open .sp-hours-times > span:first-child { color: var(--sp-green); }
.salon-page .sp-holiday-empty { color: var(--sp-muted); font-size: 14px; }

/* The map: light, tinted mint to violet, with a pin that drops in and
   breathes. Hovering lifts the pin and brightens the wash; the Mapbox
   image itself never moves or crops. */
.salon-page .sp-location { display: flex; flex-direction: column; overflow: hidden; }
.salon-page .sp-map {
  position: relative;
  isolation: isolate;
  aspect-ratio: 960 / 600;
  overflow: hidden;
  background: #eef0f4;
}
.salon-page .sp-map .mapbox-static-preview { display: block; width: 100%; height: 100%; object-fit: contain; }
.salon-page .sp-map .mapbox-static-preview-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--sp-muted); font-size: 14px; }
.salon-page .sp-map-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 54%, rgba(145, 107, 232, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(143, 247, 210, 0.22), rgba(147, 162, 247, 0.16) 52%, rgba(145, 107, 232, 0.24));
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.salon-page .sp-map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 0;
  height: 0;
  pointer-events: none;
}
.salon-page .sp-map-head {
  position: absolute;
  left: -26px;
  top: -60px;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 2.5px solid transparent;
  border-radius: 50% 50% 50% 6px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #8ff7d2, #93a2f7 55%, #916be8) border-box;
  color: var(--sp-violet);
  box-shadow: 0 14px 26px -12px rgba(82, 54, 179, 0.6);
  transform: rotate(-45deg);
  transition: transform 320ms var(--sp-ease), box-shadow 320ms ease;
}
.salon-page .sp-map-head .icon { width: 21px; height: 21px; transform: rotate(45deg); }
.salon-page .sp-map-shadow {
  position: absolute;
  left: -14px;
  top: -5px;
  width: 28px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(rgba(29, 26, 36, 0.32), transparent 70%);
  transition: transform 320ms var(--sp-ease), opacity 320ms ease;
}
.salon-page .sp-map-pulse {
  position: absolute;
  left: -48px;
  top: -48px;
  width: 96px;
  height: 96px;
  border: 2px solid rgba(145, 107, 232, 0.5);
  border-radius: 50%;
  background: radial-gradient(rgba(143, 247, 210, 0.22), rgba(145, 107, 232, 0.08) 60%, transparent 70%);
  opacity: 0;
  transform: scale(0.3);
  animation: sp-map-pulse 3.2s cubic-bezier(0.2, 0.7, 0.3, 1) 900ms infinite;
}
.salon-page .sp-map-pulse.is-late { animation-delay: 2.5s; }
@keyframes sp-map-pulse {
  0% { opacity: 0; transform: scale(0.3); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.7); }
}
.salon-page .sp-map-label {
  position: absolute;
  left: 0;
  top: -98px;
  max-width: 220px;
  padding: 6px 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--sp-ink);
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 10px 24px -14px rgba(29, 26, 36, 0.5);
  transform: translateX(-50%);
  transition: transform 320ms var(--sp-ease);
}
.salon-page .sp-map-place {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--sp-soft-text);
  font-size: 12.5px;
  font-weight: 700;
  pointer-events: none;
}
.salon-page .sp-map-place .icon { width: 13px; height: 13px; color: var(--sp-violet); }
.salon-page .sp-map-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: none;
}
.salon-page .sp-map-directions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--sp-violet-ink);
  font-size: 13px;
  font-weight: 750;
  box-shadow: 0 8px 20px -12px rgba(29, 26, 36, 0.45);
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.salon-page .sp-map-directions .icon { width: 13px; height: 13px; transition: transform 200ms var(--sp-ease); }
.salon-page .sp-map:hover .sp-map-head { transform: translateY(-6px) rotate(-45deg); box-shadow: 0 22px 30px -14px rgba(82, 54, 179, 0.65); }
.salon-page .sp-map:hover .sp-map-shadow { opacity: 0.6; transform: scale(0.8); }
.salon-page .sp-map:hover .sp-map-label { transform: translate(-50%, -6px); }
.salon-page .sp-map:hover .sp-map-wash { opacity: 0.75; }
.salon-page .sp-map:hover .sp-map-directions { background: var(--sp-violet); color: #fff; box-shadow: 0 12px 24px -12px rgba(106, 72, 208, 0.8); }
.salon-page .sp-map:hover .sp-map-directions .icon { transform: translate(2px, -2px); }
/* The pin drops in once the visit section reveals. */
.salon-page [data-salon-profile-reveal] .sp-map-head,
.salon-page [data-salon-profile-reveal] .sp-map-label { opacity: 0; }
.salon-page [data-salon-profile-reveal].is-visible .sp-map-head { opacity: 1; animation: sp-pin-drop 680ms cubic-bezier(0.34, 1.4, 0.5, 1) 180ms both; }
.salon-page [data-salon-profile-reveal].is-visible .sp-map-label { opacity: 1; animation: sp-pin-label 420ms var(--sp-ease) 560ms both; }
.salon-page [data-salon-profile-reveal].is-visible .sp-map-shadow { animation: sp-pin-shadow 680ms var(--sp-ease) 180ms both; }
@keyframes sp-pin-drop { from { opacity: 0; transform: translateY(-34px) rotate(-45deg); } 60% { opacity: 1; } }
@keyframes sp-pin-label { from { opacity: 0; transform: translate(-50%, 6px); } }
@keyframes sp-pin-shadow { from { opacity: 0; transform: scale(0.3); } }
.salon-page .sp-map-fallback { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 200px; background: var(--sp-band); color: var(--sp-muted); }
.salon-page .sp-location-body { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 22px; }
.salon-page .sp-location-address { display: flex; flex-direction: column; gap: 4px; }
.salon-page .sp-location-address p { color: var(--sp-text); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.salon-page .sp-contact-list { display: flex; flex-direction: column; gap: 10px; }
.salon-page .sp-contact-list li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.salon-page .sp-contact-icon { display: grid; flex: none; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--sp-violet-soft); color: var(--sp-violet); }
.salon-page .sp-contact-list li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.salon-page .sp-contact-list small { color: var(--sp-muted); font-size: 12px; font-weight: 650; }
.salon-page .sp-contact-list a { display: inline-flex; align-items: center; gap: 5px; color: var(--sp-violet-ink); font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.salon-page .sp-contact-list a .icon { width: 13px; height: 13px; }
.salon-page .sp-contact-list a:hover { color: var(--sp-violet); text-decoration: underline; text-underline-offset: 3px; }
.salon-page .sp-location-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.salon-page .sp-outline-button,
.salon-page .sp-soft-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--sp-violet-line);
  border-radius: 999px;
  background: #fff;
  color: var(--sp-violet-ink);
  font-size: 14px;
  font-weight: 700;
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
}
.salon-page .sp-soft-button { flex: none; border-color: transparent; background: var(--sp-violet-soft); }
.salon-page :is(.sp-outline-button, .sp-soft-button):hover { background: var(--sp-violet-soft); box-shadow: 0 10px 22px -16px rgba(82, 54, 179, 0.6); }
.salon-page :is(.sp-outline-button, .sp-soft-button):active { transform: scale(0.97); }
.salon-page .sp-outline-button .icon, .salon-page .sp-soft-button .icon { width: 14px; height: 14px; }
.salon-page .sp-qr { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 18px 22px; }
.salon-page .sp-qr-code {
  flex: none;
  width: 84px;
  height: 84px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--sp-line);
  cursor: zoom-in;
  transition: box-shadow 220ms ease, transform 320ms var(--sp-ease);
}
.salon-page .sp-qr-code img { display: block; width: 100%; height: 100%; }
.salon-page .sp-qr-code:hover { box-shadow: 0 0 0 1px var(--sp-violet-line), 0 14px 28px -16px rgba(82, 54, 179, 0.55); transform: scale(1.06); }
.salon-page .sp-qr-copy { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.salon-page .sp-qr-copy p { color: var(--sp-muted); font-size: 14px; line-height: 1.5; }

/* ---- Policies --------------------------------------------------------- */
.salon-page .sp-policies { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.salon-page .sp-policy { display: flex; gap: 14px; padding: 20px; border-radius: 20px; background: #fff; box-shadow: var(--sp-shadow); transition: box-shadow 200ms ease; }
.salon-page .sp-policy:hover { box-shadow: var(--sp-shadow-hover); }
.salon-page .sp-policy-icon { display: grid; flex: none; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: var(--sp-violet-soft); color: var(--sp-violet); }
.salon-page .sp-policy-icon .icon { width: 18px; height: 18px; }
.salon-page .sp-policy > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.salon-page .sp-policy h3 { color: var(--sp-ink); font-family: inherit; font-size: 15px; font-weight: 750; }
.salon-page .sp-policy p { color: var(--sp-text); font-size: 14px; line-height: 1.5; }
.salon-page .sp-policy p.is-muted { color: var(--sp-muted); font-size: 13px; }
.salon-page .sp-policy-note { padding: 14px 18px; border-radius: 16px; background: var(--sp-band); color: var(--sp-soft-text); font-size: 14px; line-height: 1.55; }
.salon-page .sp-report {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: -36px;
  padding: 10px 20px;
  border-radius: 18px;
  background: var(--sp-band);
  color: var(--sp-muted);
}
.salon-page .sp-report p { font-size: 14px; }
.salon-page .sp-report .rl-safety-action { color: var(--sp-violet-ink); font-weight: 700; text-decoration: none; }
.salon-page .sp-report .rl-safety-action:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Booking card: glass that follows the page ------------------------ */
.salon-page .sp-book-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 2px rgba(29, 26, 36, 0.05), 0 28px 60px -30px rgba(82, 54, 179, 0.4);
}
.salon-page .sp-book-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.salon-page .sp-book-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.salon-page .sp-book-head > div > span { color: var(--sp-muted); font-size: 13px; font-weight: 700; }
.salon-page .sp-book-head strong { color: var(--sp-ink); font-size: 34px; font-weight: 750; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.salon-page .sp-book-head strong.is-name { font-size: 22px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.salon-page .sp-book-head small { color: var(--sp-muted); font-size: 13px; }
.salon-page .sp-badge { flex: none; padding: 6px 10px; border-radius: 999px; background: var(--sp-violet-soft); color: var(--sp-violet-ink); font-size: 12px; font-weight: 800; }
.salon-page .sp-book-status { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--sp-band); color: var(--sp-text); font-size: 14px; font-weight: 650; }
.salon-page .sp-book-status.is-open { color: var(--sp-green); }
.salon-page .sp-book-status.is-closed { color: var(--sp-closed); }

/* Book now: the brand gradient with a soft light that crosses it every few
   seconds, and again at once under the pointer. A stylist's profile window
   books with the same button. */
.stylist-profile-modal-card {
  --sp-gradient: linear-gradient(135deg, #4fcfa9 0%, #5468d6 22%, #7a52dd 62%, #6a48d0 100%);
  --sp-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
html body .stylist-profile-modal-card .sp-book-now.stylist-profile-modal-cta {
  min-width: 190px;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: normal;
}
:is(.salon-page, .stylist-profile-modal-card) .sp-book-now {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 24px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--sp-gradient);
  background-size: 140% 100%;
  background-position: 0% 50%;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(40, 24, 96, 0.25);
  box-shadow: 0 12px 26px -14px rgba(106, 72, 208, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transition: background-position 600ms var(--sp-ease), box-shadow 220ms ease, transform 120ms ease;
}
:is(.salon-page, .stylist-profile-modal-card) .sp-book-now .icon { width: 18px; height: 18px; stroke-width: 2.2; transition: transform 240ms var(--sp-ease); }
:is(.salon-page, .stylist-profile-modal-card) .sp-book-now::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -40%;
  z-index: -1;
  width: 34%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.08) 70%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(0) skewX(-20deg);
  animation: sp-sheen 5.6s cubic-bezier(0.45, 0, 0.25, 1) 1.4s infinite;
  pointer-events: none;
}
@keyframes sp-sheen {
  0% { transform: translateX(0) skewX(-20deg); opacity: 0; }
  4% { opacity: 1; }
  24% { transform: translateX(520%) skewX(-20deg); opacity: 1; }
  25%, 100% { transform: translateX(520%) skewX(-20deg); opacity: 0; }
}
:is(.salon-page, .stylist-profile-modal-card) .sp-book-now:not(:disabled):hover {
  background-position: 100% 50%;
  box-shadow: 0 18px 32px -14px rgba(106, 72, 208, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
:is(.salon-page, .stylist-profile-modal-card) .sp-book-now:not(:disabled):hover::after { animation: sp-sheen-now 900ms cubic-bezier(0.45, 0, 0.25, 1) both; }
@keyframes sp-sheen-now {
  from { transform: translateX(0) skewX(-20deg); opacity: 1; }
  to { transform: translateX(520%) skewX(-20deg); opacity: 1; }
}
:is(.salon-page, .stylist-profile-modal-card) .sp-book-now:not(:disabled):hover .icon { transform: translateX(3px); }
:is(.salon-page, .stylist-profile-modal-card) .sp-book-now:not(:disabled):active { transform: scale(0.98); }
:is(.salon-page, .stylist-profile-modal-card) .sp-book-now:disabled { background: #d9d4e2; color: #6d6778; text-shadow: none; box-shadow: none; }
:is(.salon-page, .stylist-profile-modal-card) .sp-book-now:disabled::after { display: none; }
.salon-page .sp-book-facts { display: flex; flex-direction: column; gap: 8px; color: var(--sp-soft-text); font-size: 13.5px; }
.salon-page .sp-book-facts li { display: flex; gap: 8px; }
.salon-page .sp-book-facts .icon { margin-top: 1px; color: var(--sp-violet); stroke-width: 2.4; }
.salon-page .sp-book-website {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(143, 247, 210, 0.16), rgba(145, 107, 232, 0.12));
  box-shadow: inset 0 0 0 1px rgba(145, 107, 232, 0.18);
  transition: box-shadow 200ms ease, background-color 200ms ease;
}
.salon-page .sp-book-website-icon { display: grid; flex: none; width: 36px; height: 36px; place-items: center; border-radius: 12px; background: #fff; color: var(--sp-violet); box-shadow: 0 6px 14px -10px rgba(82, 54, 179, 0.6); }
.salon-page .sp-book-website > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.salon-page .sp-book-website small { color: var(--sp-muted); font-size: 12px; font-weight: 650; }
.salon-page .sp-book-website strong { overflow: hidden; color: var(--sp-violet-ink); font-size: 14.5px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.salon-page .sp-book-website > .icon { color: var(--sp-violet-ink); transition: transform 200ms var(--sp-ease); }
.salon-page .sp-book-website:hover { box-shadow: inset 0 0 0 1px rgba(145, 107, 232, 0.45), 0 12px 24px -18px rgba(82, 54, 179, 0.6); }
.salon-page .sp-book-website:hover > .icon { transform: translate(2px, -2px); }
.salon-page .sp-book-actions { display: flex; gap: 8px; padding-top: 16px; border-top: 1px solid var(--sp-line-soft); }
.salon-page .sp-book-actions > * {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--sp-violet-soft);
  color: var(--sp-violet-ink);
  font-size: 14px;
  font-weight: 700;
  transition: background-color 180ms ease, transform 120ms ease;
}
.salon-page .sp-book-actions > *:hover { background: #ebe3fc; }
.salon-page .sp-book-actions > *:active { transform: scale(0.97); }

/* The phone bar: hidden while the booking card shows. */
.salon-page .sp-phone-book { display: none; }

/* ---- Narrower: one column; the bar books -------------------------------- */
@container sp (max-width: 999px) {
  .salon-page .sp-body { grid-template-columns: minmax(0, 1fr); padding-bottom: 120px; }
  .salon-page .sp-rail { display: none; }
  .salon-page .sp-visit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 999px) {
  .salon-page:not(.salon-home-editor-mode) .sp-phone-book {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--native-tabbar-total, 0px) + 12px);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 560px;
    margin-inline: auto;
    padding: 10px 10px 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 18px 40px -18px rgba(82, 54, 179, 0.45);
    transition: transform 300ms var(--sp-ease), opacity 300ms ease;
  }
  .salon-page .sp-phone-book > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .salon-page .sp-phone-book strong { overflow: hidden; color: var(--sp-ink); font-size: 17px; font-weight: 750; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
  .salon-page .sp-phone-book small { color: var(--sp-muted); font-size: 12.5px; font-weight: 600; }
  :is(.salon-page, .stylist-profile-modal-card) .sp-book-now.is-compact { flex: none; min-height: 48px; padding: 0 22px; font-size: 15px; }
  body.rl-chrome-hidden .salon-page .sp-phone-book { transform: translateY(calc(100% + 24px)); opacity: 0; }
}

/* ---- Phones: the photos edge to edge, the page a sheet over them ------- */
@container sp (max-width: 760px) {
  .salon-page .sp-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "gallery" "copy"; gap: 0; padding: 0; }
  .salon-page .sp-hero-copy { gap: 6px; padding: 18px var(--sp-pad) 0; }
  .salon-page.has-photos .sp-hero-copy { position: relative; z-index: 1; margin-top: -24px; border-radius: 24px 24px 0 0; background: var(--sp-ground); }
  .salon-page .sp-hero h1 { font-size: 30px; letter-spacing: -0.03em; line-height: 1.1; }
  .salon-page .sp-tagline { font-size: 16px; line-height: 1.35; }
  .salon-page .sp-description { font-size: 14.5px; }
  .salon-page .sp-meta { gap: 4px 12px; font-size: 14px; }
  .salon-page .sp-hero-actions { grid-area: copy; align-self: start; justify-self: end; gap: 8px; padding: 14px var(--sp-pad) 0; }
  .salon-page:not(.has-photos) .sp-hero-actions { position: static; grid-area: auto; justify-self: start; padding: 12px var(--sp-pad) 0; }
  .salon-page.has-photos .sp-back,
  .salon-page.has-photos .sp-hero-actions { position: absolute; z-index: 3; top: 12px; grid-area: auto; }
  .salon-page.has-photos .sp-back { left: 12px; }
  .salon-page.has-photos .sp-hero-actions { right: 12px; padding: 0; }
  .salon-page .sp-hero { position: relative; }
  .salon-page:not(.has-photos) .sp-back { grid-area: auto; margin: 8px var(--sp-pad) 0; }
  .salon-page.has-photos :is(.sp-back, .sp-pill-button, .sp-website-link) {
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--sp-ink);
    box-shadow: 0 6px 18px -10px rgba(29, 26, 36, 0.45);
  }
  .salon-page.has-photos .sp-website-link { color: var(--sp-violet); }
  .salon-page.has-photos .sp-save.is-active { color: #c2416a; }
  .salon-page.has-photos .sp-save-burst { left: 50%; }
  .salon-page.has-photos :is(.sp-back, .sp-pill-button, .sp-website-link) > span,
  .salon-page.has-photos .sp-website-link > .icon:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .salon-page.has-photos :is(.sp-back, .sp-pill-button, .sp-website-link) .icon { width: 19px; height: 19px; }
  .salon-page .sp-gallery { margin: 0; }
  .salon-page .sp-gallery-track {
    display: flex;
    height: 300px;
    overflow-x: auto;
    border-radius: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .salon-page .sp-gallery-track::-webkit-scrollbar { display: none; }
  .salon-page .sp-photo,
  .salon-page .sp-photo:nth-child(n + 5) { display: block; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .salon-page .sp-photo-open:hover img { transform: none; }
  .salon-page .sp-gallery-all { display: none; }
  .salon-page .sp-gallery-count {
    position: absolute;
    right: 12px;
    bottom: 36px;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(29, 26, 36, 0.62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }
  .salon-page .sp-gallery-add { bottom: 36px; }
  .salon-page .sp-tabs { margin-top: 16px; }
  .salon-page .sp-tabs-track { gap: 22px; margin-inline: calc(-1 * var(--sp-pad)); padding-inline: var(--sp-pad); scroll-padding-inline: var(--sp-pad); }
  .salon-page .sp-tab { min-height: 48px; font-size: 14px; }
  .salon-page .sp-tab-count { padding: 1px 7px; font-size: 11.5px; }
  .salon-page .sp-body { padding-top: 24px; }
  .salon-page .sp-main { gap: 52px; }
  .salon-page .sp-section-head h2 { font-size: 22px; letter-spacing: -0.02em; }
  .salon-page .sp-lead { font-size: 15px; }
  .salon-page .sp-search { max-width: none; height: 48px; }
  .salon-page .sp-chips { margin-inline: calc(-1 * var(--sp-pad)); padding-inline: var(--sp-pad); scroll-padding-inline: var(--sp-pad); }
  .salon-page .sp-chips-arrow { display: none; }
  .salon-page .sp-chip { padding: 0 16px; }
  .salon-page .sp-service-groups { gap: 20px; }
  .salon-page .sp-service-list { padding: 4px; }
  .salon-page .sp-service { align-items: flex-start; gap: 12px; padding: 14px; }
  .salon-page .sp-service + .sp-service::before { left: 14px; right: 14px; }
  .salon-page .sp-service-action { flex-direction: column; align-items: flex-end; gap: 8px; }
  .salon-page .sp-service-price { min-width: 0; }
  .salon-page .sp-book-soft { padding: 0 18px; font-size: 14px; }
  .salon-page .sp-service-copy > p { font-size: 13.5px; }
  .salon-page .sp-review-score { font-size: 44px; }
  .salon-page .sp-qr { flex-wrap: wrap; }
  .salon-page .sp-qr .sp-soft-button { width: 100%; justify-content: center; }
  .salon-page .sp-report { margin-top: -28px; }
}

/* Inside Pro Home the tabs stick to the canvas top. */
.salon-home-editor-canvas .salon-page { --sp-sticky: 0px; }
.salon-home-editor-canvas .salon-page [data-salon-profile-reveal] { opacity: 1; transform: none; }

/* A salon page drawn again in place keeps still. */
body.salon-profile-settled .salon-page :is(.sp-photo img, .sp-map-head, .sp-map-label, .sp-map-shadow) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .salon-page *,
  .salon-page *::before,
  .salon-page *::after { animation: none !important; transition: none !important; }
  :is(.salon-page, .stylist-profile-modal-card) .sp-book-now::after { display: none; }
  .salon-page [data-salon-profile-reveal] .sp-map-head,
  .salon-page [data-salon-profile-reveal] .sp-map-label { opacity: 1; }
}

/* ---- Loading outline: the page's own shape ---------------------------- */
.salon-page.sp-loading { min-height: 100vh; }
.salon-page.sp-loading .sp-frame { display: flex; flex-direction: column; gap: 24px; padding: 28px var(--sp-pad) 96px; }
.salon-page.sp-loading :is(span, strong, i) {
  display: block;
  border-radius: 12px;
  background: linear-gradient(90deg, #efecf5 0%, #f7f5fb 50%, #efecf5 100%);
  background-size: 200% 100%;
  animation: sp-skeleton 1.4s ease-in-out infinite;
}
@keyframes sp-skeleton { to { background-position: -200% 0; } }
.salon-page .sp-loading-heading { display: flex; flex-direction: column; gap: 12px; }
.salon-page .sp-loading-heading span { width: 96px; height: 16px; }
.salon-page .sp-loading-heading strong { width: min(420px, 70%); height: 44px; }
.salon-page .sp-loading-heading i { width: min(560px, 90%); height: 18px; }
.salon-page .sp-loading-gallery { display: grid; grid-template-columns: 2fr 0.8fr 0.8fr; grid-template-rows: 217px 217px; gap: 6px; overflow: hidden; border-radius: 24px; }
.salon-page .sp-loading-gallery span { border-radius: 0; }
.salon-page .sp-loading-gallery span:first-child { grid-row: 1 / 3; }
.salon-page .sp-loading-gallery span:nth-child(2) { grid-column: 2 / 4; }
.salon-page .sp-loading-tabs { display: flex; gap: 28px; padding: 18px 0; border-bottom: 1px solid #ebe7f3; }
.salon-page .sp-loading-tabs span { width: 72px; height: 18px; }
.salon-page .sp-loading-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 40px; }
.salon-page .sp-loading-body > div { display: flex; flex-direction: column; gap: 12px; }
.salon-page .sp-loading-body > div span { height: 84px; border-radius: 20px; }
.salon-page .sp-loading-body aside { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 24px; background: #fff; box-shadow: 0 28px 60px -30px rgba(82, 54, 179, 0.3); }
.salon-page .sp-loading-body aside span { height: 22px; }
.salon-page .sp-loading-body aside span:nth-child(2) { height: 54px; border-radius: 999px; }
@container sp (max-width: 999px) {
  .salon-page .sp-loading-body { grid-template-columns: minmax(0, 1fr); }
  .salon-page .sp-loading-body aside { display: none; }
}
@container sp (max-width: 760px) {
  .salon-page.sp-loading .sp-frame { padding-top: 0; padding-inline: 0; }
  .salon-page .sp-loading-gallery { order: -1; grid-template-columns: 1fr; grid-template-rows: 300px; border-radius: 0; }
  .salon-page .sp-loading-gallery span:not(:first-child) { display: none; }
  .salon-page .sp-loading-gallery span:first-child { grid-row: auto; }
  .salon-page :is(.sp-loading-heading, .sp-loading-tabs, .sp-loading-body) { padding-inline: var(--sp-pad); }
}
@media (prefers-reduced-motion: reduce) {
  .salon-page.sp-loading :is(span, strong, i) { animation: none; }
}

/* Stars in the brand violet. */
.salon-page .customer-review-stars { color: #e3dcf3; font-size: 18px; letter-spacing: 0.06em; }
.salon-page .customer-review-stars > b { color: #916be8; }
.salon-page .sp-review-rating .customer-review-stars { font-size: 15px; }

/* ---- A stylist's profile window, in the salon page's design ------------
   The same Inter type, ink and violet, white cards on soft violet shadows,
   kickers and headings as the page under it. */
html body .stylist-profile-modal-layer .stylist-profile-modal-backdrop { background: rgba(29, 26, 36, 0.32); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
html body .stylist-profile-modal-card {
  --sp-ink: #1d1a24;
  --sp-text: #24212b;
  --sp-muted: #6d6778;
  --sp-violet: #6a48d0;
  --sp-violet-ink: #5236b3;
  --sp-violet-soft: #f4f0fd;
  --sp-line: #ebe7f3;
  --sp-card-shadow: 0 1px 2px rgba(29, 26, 36, 0.05), 0 12px 32px -18px rgba(82, 54, 179, 0.2);
  border: 0;
  border-radius: 28px;
  background: #fbf9ff;
  color: var(--sp-text);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-shadow: 0 40px 90px -30px rgba(29, 26, 36, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.6);
  animation: sp-modal-in 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sp-modal-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
html body .stylist-profile-modal-card :is(h2, h3, h4, p, strong, span, small, button) { font-family: inherit; letter-spacing: normal; }
html body .stylist-profile-modal-card .stylist-profile-modal-header {
  min-height: 68px;
  padding: 12px 16px 12px 24px;
  border-bottom: 1px solid var(--sp-line);
  background: rgba(251, 249, 255, 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}
html body .stylist-profile-modal-card .stylist-profile-modal-header span { color: var(--sp-muted); font-size: 12.5px; font-weight: 600; }
html body .stylist-profile-modal-card .stylist-profile-modal-header strong { color: var(--sp-ink); font-size: 16px; font-weight: 750; }
html body .stylist-profile-modal-card .stylist-profile-modal-header .icon-button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  background: #fff;
  color: var(--sp-text);
  box-shadow: 0 4px 16px rgba(36, 33, 43, 0.06);
  transition: box-shadow 180ms ease, border-color 180ms ease, color 180ms ease, transform 120ms ease;
}
html body .stylist-profile-modal-card .stylist-profile-modal-header .icon-button:hover { border-color: #d9cdf8; color: var(--sp-violet-ink); box-shadow: 0 10px 24px -14px rgba(82, 54, 179, 0.45); }
html body .stylist-profile-modal-card .stylist-profile-modal-header .icon-button:active { transform: scale(0.95); }
html body .stylist-profile-modal-card .stylist-profile-modal-hero {
  gap: 28px;
  padding: 36px 36px 28px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(143, 247, 210, 0.16), transparent 55%),
    radial-gradient(120% 140% at 100% 0%, rgba(145, 107, 232, 0.14), transparent 55%),
    #fbf9ff;
}
html body .stylist-profile-modal-card .stylist-profile-modal-hero > img {
  border: 0;
  border-radius: 32px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px #e7defa, 0 22px 40px -20px rgba(82, 54, 179, 0.5);
}
html body .stylist-profile-modal-card .stylist-profile-modal-identity { gap: 8px; }
html body .stylist-profile-modal-card .stylist-profile-modal-identity > p { color: var(--sp-violet-ink); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
html body .stylist-profile-modal-card .stylist-profile-modal-identity h2 { color: var(--sp-ink); font-size: clamp(32px, 4vw, 44px); font-weight: 750; line-height: 1.05; letter-spacing: -0.035em; }
html body .stylist-profile-modal-card .stylist-profile-modal-identity > span { color: var(--sp-muted); font-size: 15.5px; line-height: 1.55; }
html body .stylist-profile-modal-card .stylist-profile-modal-chips span { padding: 5px 10px; background: var(--sp-violet-soft); color: var(--sp-violet-ink); font-size: 12.5px; font-weight: 650; }
html body .stylist-profile-modal-card .stylist-profile-modal-stats {
  gap: 12px;
  padding: 0 36px 8px;
  border: 0;
  background: transparent;
}
html body .stylist-profile-modal-card .stylist-profile-modal-stats > div {
  gap: 4px;
  padding: 16px 18px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--sp-card-shadow);
}
html body .stylist-profile-modal-card .stylist-profile-modal-stats strong { color: var(--sp-ink); font-size: 22px; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
html body .stylist-profile-modal-card .stylist-profile-modal-stats span { color: var(--sp-muted); font-size: 13px; font-weight: 600; }
html body .stylist-profile-modal-card .stylist-profile-modal-section { padding: 36px; border: 0; }
html body .stylist-profile-modal-card .stylist-profile-modal-section + .stylist-profile-modal-section { border-top: 1px solid var(--sp-line); }
html body .stylist-profile-modal-card .stylist-profile-section-heading .eyebrow { margin: 0 0 8px; color: var(--sp-violet-ink); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
html body .stylist-profile-modal-card .stylist-profile-section-heading h3 { color: var(--sp-ink); font-size: 26px; font-weight: 750; line-height: 1.15; letter-spacing: -0.025em; }
html body .stylist-profile-modal-card .stylist-profile-section-heading > span { padding: 5px 12px; border-radius: 999px; background: var(--sp-violet-soft); color: var(--sp-violet-ink); font-size: 12.5px; font-weight: 750; }
html body .stylist-profile-modal-card .stylist-profile-about p { color: var(--sp-text); font-size: 16px; line-height: 1.6; }
html body .stylist-profile-modal-card .stylist-profile-facts article {
  gap: 14px;
  padding: 18px 20px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--sp-card-shadow);
}
html body .stylist-profile-modal-card .stylist-profile-facts article > .icon {
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 12px;
  background: var(--sp-violet-soft);
  color: var(--sp-violet);
}
html body .stylist-profile-modal-card .stylist-profile-facts span { color: var(--sp-muted); font-size: 12.5px; font-weight: 650; }
html body .stylist-profile-modal-card .stylist-profile-facts strong { color: var(--sp-ink); font-size: 15px; font-weight: 750; }
html body .stylist-profile-modal-card .stylist-profile-portfolio-grid figure { border: 0; border-radius: 18px; box-shadow: var(--sp-card-shadow); overflow: hidden; }
html body .stylist-profile-modal-card .stylist-profile-portfolio-grid img { transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1); }
html body .stylist-profile-modal-card .stylist-profile-photo-open:hover img { transform: scale(1.03); }
html body .stylist-profile-modal-card :is(.stylist-profile-modal-empty, .stylist-profile-modal-loading, .stylist-profile-modal-error) {
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--sp-card-shadow);
}
html body .stylist-profile-modal-card .stylist-profile-modal-empty .icon { color: var(--sp-violet); }
html body .stylist-profile-modal-card .stylist-profile-modal-empty strong { color: var(--sp-ink); font-size: 15px; font-weight: 750; }
html body .stylist-profile-modal-card .stylist-profile-modal-empty span { color: var(--sp-muted); font-size: 14px; }
html body .stylist-profile-modal-card .stylist-profile-review-card { border: 0; border-radius: 20px; background: #fff; box-shadow: var(--sp-card-shadow); }
html body .stylist-profile-modal-card .stylist-profile-review-card > p { color: var(--sp-text); font-size: 15px; line-height: 1.6; }
html body .stylist-profile-modal-card .stylist-profile-safety { padding: 0 36px 32px; }
@media (max-width: 760px) {
  html body .stylist-profile-modal-card { border-radius: 24px 24px 0 0; }
  html body .stylist-profile-modal-card .stylist-profile-modal-header { padding: 10px 12px 10px 18px; }
  html body .stylist-profile-modal-card .stylist-profile-modal-hero { gap: 14px; padding: 24px 18px 18px; }
  html body .stylist-profile-modal-card .stylist-profile-modal-identity h2 { font-size: 30px; }
  html body .stylist-profile-modal-card .stylist-profile-modal-stats { gap: 8px; padding: 0 16px 4px; }
  html body .stylist-profile-modal-card .stylist-profile-modal-stats > div { padding: 12px 8px; border-radius: 14px; }
  html body .stylist-profile-modal-card .stylist-profile-modal-stats strong { font-size: 18px; }
  html body .stylist-profile-modal-card .stylist-profile-modal-stats span { font-size: 11px; }
  html body .stylist-profile-modal-card .stylist-profile-modal-section { padding: 24px 18px; }
  html body .stylist-profile-modal-card .stylist-profile-section-heading h3 { font-size: 22px; }
  html body .stylist-profile-modal-card .stylist-profile-safety { padding: 0 18px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .stylist-profile-modal-card { animation: none; }
  html body .stylist-profile-modal-card * { transition: none !important; }
}