/* Location page template. SHP design system: monochrome, Poppins, squared controls.
   Radius: buttons/inputs/tags 0, alerts 4, cards 8. Never above 8. */
:root {
  --neutral-0: #fcfcfc; --neutral-50: #f2f2f2; --neutral-100: #e5e5e5; --neutral-300: #b3b3b3;
  --neutral-500: #8a8a8a; --neutral-700: #585757; --neutral-1000: #2b2b2b; --white: #ffffff;
  --bg: var(--neutral-0); --bg-sunken: var(--neutral-50); --bg-raised: var(--white);
  --text-strong: var(--neutral-1000); --text-weak: var(--neutral-700);
  --stroke-weak: var(--neutral-100); --stroke-strong: var(--neutral-300);
  --fill-strong: var(--neutral-1000); --fill-hover: var(--neutral-700); --fill-press: var(--neutral-500);
  --success: #067a57; --warning-text: #8f6c1a; --warning-bg: #fff9ec; --warning-fill: #ffc02e;
  --error: #c73a3a; --info: #1a74a8; --info-bg: #eff8fe;
  --radius-sm: 0; --radius-md: 4px; --radius-lg: 8px; --radius-full: 1000px;
  --shadow-sm: 0 2px 4px -2px rgba(21,24,40,.08), 0 4px 8px -2px rgba(21,24,40,.04);
  --shadow-lg: 0 8px 8px -4px rgba(21,24,40,.04), 0 20px 24px -4px rgba(21,24,40,.08);
  --shadow-button: 0 0 6.5px 4px rgba(0,0,0,.07), 0 4px 8px -2px rgba(0,0,0,.04);
  --focus-ring: 0 0 0 4px rgba(43,43,43,.16);
  --ease: cubic-bezier(0.2,0,0,1); --fast: 120ms; --base: 200ms;
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: 28px; --max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text-strong); font-family: var(--font); font-size: 16px; line-height: 24px; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; color: var(--text-weak); }
hr { border: 0; border-top: 1px solid var(--stroke-weak); margin: 0; width: 100%; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--fill-strong); outline-offset: 2px; box-shadow: var(--focus-ring); }
.ico { flex-shrink: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--white); padding: 12px 16px; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--text-weak); }
.fine { font-size: 13px; line-height: 18px; color: var(--text-weak); }
.center { text-align: center; }
.u { text-decoration: underline; text-underline-offset: 3px; }
.stub { font-size: 13px; color: var(--neutral-500); }
.h4, .sec h2.h4 { font-size: 20px; line-height: 28px; font-weight: 600; }

/* Chrome stand-ins (the real theme header/footer replace these) */
.site-header { background: var(--white); border-bottom: 1px solid var(--stroke-weak); }
.site-header__in { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.logo img { height: 30px; width: auto; }
.site-footer { margin-top: 96px; background: var(--bg-sunken); border-top: 1px solid var(--stroke-weak); padding: 48px 0 120px; }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; }
.site-footer img { height: 26px; width: auto; }

/* Breadcrumb */
.pagebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--text-strong); text-decoration: underline; text-underline-offset: 3px; }
.back:hover { color: var(--text-weak); }
.crumbs { padding-top: 20px; font-size: 14px; color: var(--text-weak); }
.pagebar .crumbs { padding-top: 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs a { color: var(--text-weak); }
.crumbs [aria-current] { color: var(--text-strong); font-weight: 500; }

/* Buttons: sharp corners */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { min-height: 52px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: var(--radius-sm); font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease); border: 0; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--fill-strong); color: var(--white); box-shadow: var(--shadow-button); }
.btn--primary:hover { background: var(--fill-hover); color: var(--white); }
.btn--primary:active { background: var(--fill-press); }
.btn--secondary { background: transparent; color: var(--text-strong); border: 1px solid var(--fill-strong); }
.btn--secondary:hover { background: var(--bg-sunken); }
.btn--tertiary { background: var(--bg-sunken); color: var(--text-strong); }
.btn--tertiary:hover { background: var(--neutral-100); }
.btn--block { width: 100%; }
.link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; background: var(--bg-sunken); border-radius: 0;
  font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--text-strong); white-space: nowrap; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 32px; padding-bottom: 64px; }
.hero__text { display: flex; flex-direction: column; gap: 20px; }
.hero h1 { font-size: 44px; line-height: 52px; letter-spacing: -0.5px; font-weight: 700; }
.lead { font-size: 18px; line-height: 28px; color: var(--text-weak); max-width: 520px; }
.badge { align-self: flex-start; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--fill-strong);
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hero__media { min-width: 0; }
.hero__img { width: 100%; height: 420px; object-fit: cover; border-radius: var(--radius-lg); }
.hero__map { position: relative; height: 420px; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-sunken); border: 1px solid var(--stroke-weak); }
.hero__map iframe { width: 100%; height: 100%; border: 0; }
.hero__map .needs { position: absolute; left: 12px; right: 12px; bottom: 12px; }
.hero--hub { grid-template-columns: minmax(0, 1fr); padding-bottom: 40px; }

/* Live status */
.status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; font-weight: 500; min-height: 24px; }
.status__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--neutral-300); }
.status__detail { color: var(--text-weak); font-weight: 400; }
[data-state="open"] .status__dot { background: var(--success); }
[data-state="open"] .status__label { color: var(--success); }
[data-state="closing_soon"] .status__dot { background: var(--warning-fill); }
[data-state="closing_soon"] .status__label { color: var(--warning-text); }
[data-state="closed"] .status__dot { background: var(--error); }
[data-state="closed"] .status__label { color: var(--error); }
.near__status { font-size: 14px; font-weight: 500; color: var(--text-weak); }
.near__status[data-state="open"] { color: var(--success); }
.near__status[data-state="closing_soon"] { color: var(--warning-text); }
.near__status[data-state="closed"] { color: var(--error); }

/* Trust strip */
.trust { background: var(--white); border-top: 1px solid var(--stroke-weak); border-bottom: 1px solid var(--stroke-weak); }
.trust__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 24px; padding-bottom: 24px; }
.trust__item { display: flex; align-items: center; gap: 16px; padding: 0 32px; text-decoration: none; }
.trust__item:first-child { padding-left: 0; }
.trust__item + .trust__item { border-left: 1px solid var(--stroke-weak); }
.trust__num { font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.5px; }
.trust__txt { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 20px; color: var(--text-weak); }
.trust__txt b { color: var(--text-strong); font-size: 16px; line-height: 24px; font-weight: 600; }
.trust__rating .trust__txt b { font-size: 14px; line-height: 20px; }
.trust__ico { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--bg-sunken); }
.stars { display: flex; gap: 4px; }
.star--on { fill: var(--fill-strong); stroke: var(--fill-strong); }
.star--off { fill: none; stroke: var(--neutral-300); }

/* Body: content + sticky booking card */
.body { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 48px; align-items: start; padding-top: 80px; }
.body__main { display: flex; flex-direction: column; gap: 80px; min-width: 0; }
.body__side { position: sticky; top: 24px; }
.sec { display: flex; flex-direction: column; gap: 24px; }
.wrap.sec { margin-top: 80px; }
.sec h2 { font-size: 32px; line-height: 40px; font-weight: 700; }
.sec__head { display: flex; flex-direction: column; gap: 8px; }
.sec__head p { color: var(--text-weak); max-width: 620px; }
.sec__head.row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 16px; }
.sec--tint { padding: 24px; background: var(--bg-sunken); border-radius: var(--radius-lg); gap: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.stack { display: flex; flex-direction: column; gap: 28px; }
.stack-s { display: flex; flex-direction: column; gap: 12px; }
.block { display: flex; flex-direction: column; gap: 12px; }
.block h3 { font-size: 16px; line-height: 24px; font-weight: 600; }
.map { height: 280px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--stroke-weak); background: var(--bg-sunken); }
.map iframe { width: 100%; height: 100%; border: 0; }
.iconlist { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 22px; color: var(--text-weak); }
.iconlist li { display: flex; gap: 12px; }
.parking-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.parking-media img { border-radius: var(--radius-md); }

/* Hours table */
.hours { width: 100%; border-collapse: collapse; font-size: 15px; }
.hours th, .hours td { padding: 8px 0; border-bottom: 1px solid var(--stroke-weak); color: var(--text-weak); font-weight: 400; text-align: left; }
.hours td { text-align: right; }
.hours tr.today th, .hours tr.today td { color: var(--text-strong); font-weight: 600; }
.today__tag { font-weight: 400; color: var(--text-weak); }
.special li, .note { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius-md); background: var(--info-bg); color: var(--info); font-size: 14px; line-height: 20px; }
.note { background: var(--bg-sunken); color: var(--text-weak); font-size: 15px; line-height: 22px; }
.note b { color: var(--text-strong); }

/* Services */
.svc-col h3 { font-size: 18px; line-height: 26px; font-weight: 600; margin-bottom: 12px; }
.svc { border-top: 1px solid var(--stroke-weak); }
.svc li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--stroke-weak); }
.svc li > span { display: flex; flex-direction: column; gap: 4px; }
.svc b { font-weight: 600; }
.svc li > span > span { font-size: 15px; line-height: 22px; color: var(--text-weak); }
.svc-women { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--bg-sunken); border-radius: var(--radius-lg); font-size: 15px; line-height: 22px; }
.svc-women .btn { align-self: flex-start; min-height: 48px; font-size: 15px; }

/* First visit */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.steps li { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 2px solid var(--stroke-weak); font-size: 15px; line-height: 22px; color: var(--text-weak); }
.steps li.on { border-top-color: var(--fill-strong); }
.steps__n { font-size: 14px; font-weight: 600; }
.steps b { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text-strong); }

.yesno { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 22px; }
.yesno li { display: flex; gap: 12px; }
.yesno .yes .ico { color: var(--success); }
.yesno .no { color: var(--text-weak); }

/* Booking card */
.card { background: var(--bg-raised); border: 1px solid var(--stroke-weak); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.book { display: flex; flex-direction: column; gap: 20px; padding: 28px; }
.book h2 { font-size: 22px; line-height: 30px; font-weight: 700; }
.book .muted { font-size: 14px; line-height: 20px; margin-top: 4px; }
.book .fine.center { margin-top: -8px; }
.book__q { font-size: 15px; font-weight: 600; }
.book .btn--secondary, .book .btn--tertiary { min-height: 48px; font-size: 15px; }
.book__online { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; }
.book__online > span { display: flex; flex-direction: column; gap: 4px; }
.book__online b { font-size: 15px; }
.book__online span span { font-size: 14px; line-height: 20px; color: var(--text-weak); }
.book__online:hover b { text-decoration: underline; text-underline-offset: 3px; }
.promo { padding: 12px 16px; background: var(--bg-sunken); border-radius: var(--radius-md); font-size: 14px; line-height: 20px; }
.notify { display: flex; flex-direction: column; gap: 12px; }
.notify label { font-size: 14px; font-weight: 600; }
.notify input { height: 48px; padding: 0 16px; border: 1px solid var(--stroke-strong); border-radius: 0; background: var(--white); color: var(--text-strong); font-size: 15px; }
.notify input:focus { outline: none; border-color: var(--fill-strong); box-shadow: var(--focus-ring); }
.notify input[aria-invalid="true"] { border-color: var(--error); }
.field-error { font-size: 13px; color: var(--error); }
.notify__done { display: flex; gap: 8px; align-items: center; color: var(--success); font-weight: 500; }
.notify__done[hidden] { display: none; }

/* Gallery, team, reviews */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 16px; }
.gallery figure:first-child { grid-column: span 2; grid-row: span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.team li { display: flex; flex-direction: column; gap: 4px; }
.team img { aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 8px; }
.reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.reviews .card { padding: 24px; display: flex; flex-direction: column; gap: 12px; }

/* FAQ */
.faq { border-top: 1px solid var(--stroke-weak); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--stroke-weak); }
.faq summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-size: 17px; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { margin-left: auto; transition: transform var(--base) var(--ease); }
.faq details[open] summary .ico { transform: rotate(180deg); }
.faq details p { padding: 0 40px 20px 0; color: var(--text-weak); }

/* Nearby and hub */
.nearby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.near { display: flex; flex-direction: column; gap: 8px; padding: 24px; text-decoration: none; transition: box-shadow var(--base) var(--ease), transform var(--base) var(--ease); }
.near:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.near b { font-size: 17px; }
.near > span { font-size: 14px; line-height: 20px; color: var(--text-weak); }
.near--all { background: var(--bg-sunken); box-shadow: none; }

/* Mobile action bar */
.mbar { display: none; }

/* Review mode: missing data and unconfirmed answers. Hidden from customers. */
.needs, .needs-faq, .review-only { display: none !important; }
html.review .review-only { display: flex !important; }
html.review .needs { display: flex !important; gap: 8px; align-items: flex-start; padding: 12px 12px; border: 1px dashed var(--warning-text);
  background: var(--warning-bg); color: var(--warning-text); border-radius: var(--radius-md); font-size: 13px; line-height: 18px; }
html.review .needs-faq { display: block !important; background: var(--warning-bg); }
html.review .needs-faq .tag { background: var(--warning-fill); }

@media (max-width: 1024px) {
  .body { grid-template-columns: minmax(0, 1fr); }
  .body__side { position: static; order: -1; }
  .book { max-width: 560px; }
  .nearby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  :root { --gutter: 16px; }
  .pagebar { padding-top: 4px; }
  .pagebar .crumbs { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 8px; padding-bottom: 32px; }
  .hero__media { order: -1; margin: 0 calc(var(--gutter) * -1); }
  .hero__img, .hero__map { height: 230px; border-radius: 0; border-left: 0; border-right: 0; }
  .hero h1 { font-size: 30px; line-height: 38px; }
  .lead { font-size: 16px; line-height: 24px; }
  .hero .btns { display: none; }
  .trust__in { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .trust__item { padding: 0; }
  .trust__item + .trust__item { border-left: 0; border-top: 1px solid var(--stroke-weak); padding-top: 16px; }
  .body { padding-top: 40px; gap: 40px; }
  .body__side { order: 0; }
  .body__main { gap: 48px; }
  .wrap.sec { margin-top: 48px; }
  .sec h2 { font-size: 24px; line-height: 32px; }
  .grid2, .steps, .gallery, .team, .reviews, .nearby { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .gallery { grid-auto-rows: 220px; }
  .gallery figure:first-child { grid-column: auto; grid-row: auto; }
  .sec__head.row { flex-direction: column; align-items: flex-start; }
  .book { padding: 20px; }
  .mbar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--white); border-top: 1px solid var(--stroke-weak); box-shadow: 0 -4px 12px rgba(21,24,40,.06); }
  .mbar__btn { flex: 1 1 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: 1px solid var(--stroke-strong); text-decoration: none; font-size: 12px; font-weight: 600; }
  .mbar__btn--main { flex: 2 1 0; flex-direction: row; gap: 8px; background: var(--fill-strong); border-color: var(--fill-strong); color: var(--white); font-size: 16px; }
  .site-footer .wrap { flex-direction: column; gap: 12px; align-items: flex-start; }
}

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


/* Store finder (hub and /stores). Mirrors the live superhairpieces.com/stores page:
   measured 2026-09-28. Status colours are the live ones; see HANDOFF for contrast. */
.is-finder .site-footer { margin-top: 0; }
/* The map page is an app, like Google Maps: header plus finder fill the window exactly and
   the page itself never scrolls; only the list, the store panel and the map move (Mehmet,
   1 Oct). No footer here; the theme's footer stays on every other page. Below 560px of
   finder height (very short windows) the page may scroll rather than squash the map. */
body.is-finder { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
body.is-finder > main { flex: 1 1 auto; min-height: 0; }
body.is-finder .site-header { flex: none; }
body.is-finder .site-footer { display: none; }
/* The panel floats over a full-size map, so changing its width never resizes the
   map (which would make Leaflet jump). Panel content has a fixed width, so it does
   not reflow while the panel grows or shrinks; the panel edge simply slides. */
.sf { position: relative; height: 100%; min-height: 560px; overflow: hidden; --list-w: 400px; --dp-w: min(760px, 56vw); }
.sf-panel { position: absolute; top: 0; left: 0; bottom: 0; z-index: 2; width: var(--list-w); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: var(--white); color: #1a1a1a; box-shadow: 1px 0 0 #e5e5e5, 12px 0 32px rgba(21,24,40,.07);
  transition: width .6s cubic-bezier(.22,1,.36,1); }
.sf-panel--detail { width: var(--dp-w); background: var(--bg); }
.sf-panel > * { width: var(--list-w); }
.sf-panel > .dp { width: var(--dp-w); }
/* Content swap: old content eases out, new content eases in (hub-map.js). */
.sf-panel > * { transition: opacity .22s cubic-bezier(.2,0,0,1), transform .32s cubic-bezier(.22,1,.36,1); }
.sf-panel.is-out > * { opacity: 0; transform: translateX(-16px); }
.sf-panel.is-in > * { opacity: 0; transform: translateX(16px); transition: none; }
.sf-head { padding: 16px 28px 8px; display: flex; flex-direction: column; gap: 8px; }
.sf-head .sf-title { font-size: 22px; line-height: 33px; font-weight: 600; color: #444; }
.sf-intro { font-size: 13px; line-height: 19.5px; color: #6d6d6d; }
.sf-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #2b2b2b; text-decoration: underline; text-underline-offset: 3px; }
.sf-area__title { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 28px 28px 12px; background: none; border: 0;
  font-size: 17px; line-height: 25.5px; font-weight: 600; color: #1a1a1a; text-align: left; cursor: pointer; }
.sf-area__title::after { content: '\2015'; font-weight: 400; color: #444; }
.sf-area__title[aria-expanded="false"]::after { content: '+'; font-size: 22px; }
.sf-list { padding: 0; }
/* Rows run edge to edge so the selected row can be tinted; the divider stays inset like live. */
.sf-row { position: relative; padding: 16px 28px 20px; transition: background var(--fast) var(--ease); }
.sf-row::after { content: ''; position: absolute; left: 27px; right: 27px; bottom: 0; border-bottom: 1px solid #e5e5e5; }
.sf-row.is-active { background: #f2f2f2; }
.sf-row.is-active .sf-name a { text-decoration: underline; text-underline-offset: 3px; }
.salon-card { cursor: pointer; }
.sf-name { display: flex; align-items: center; gap: 8px; }
.sf-name__text { font-size: 15px; line-height: 22.5px; font-weight: 500; color: #1a1a1a; }
.sf-name a { font-size: 15px; line-height: 22.5px; font-weight: 500; color: #1a1a1a; text-decoration: none; }
.sf-badge { padding: 4px 8px; background: #f2f2f2; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 10px; line-height: 15px; font-weight: 700; letter-spacing: .5px; color: #555; }
.sf-rating { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px; line-height: 16.5px; }
.sf-rating__n { font-weight: 600; }
.sf-rating__c { color: #6b7280; }
.sf-stars { display: flex; gap: 4px; }
.sf-meta { display: flex; flex-direction: column; margin-top: 4px; font-size: 13px; line-height: 19.5px; color: #6d6d6d; }
.sf-phone { color: #6d6d6d; text-decoration: none; }
.sf-status { min-height: 19.5px; }
.sf-status__label { font-weight: 500; }
.sf-status[data-state="open"] .sf-status__label { color: #138808; }
.sf-status[data-state="closing_soon"] .sf-status__label { color: #e19e17; }
.sf-status[data-state="closed"] .sf-status__label { color: #ff5252; }
.sf-status[data-state="opening_soon"] .sf-status__label { color: #e19e17; }
.sf-actions { display: flex; align-items: center; gap: 20px; margin-top: 12px; }
.sf-book { display: inline-flex; align-items: center; gap: 8px; padding: 12px 12px; background: #f7f7f7; border: 1px solid #ccc; border-radius: 4px;
  font-size: 14px; line-height: 21px; font-weight: 500; color: #3c3c3c; text-decoration: none; }
.sf-book:hover { background: #eee; }
.sf-details { font-size: 13px; line-height: 15px; font-weight: 500; color: #2b2b2b; text-decoration: underline; text-underline-offset: 3px; }
.sf-other { padding: 24px 28px; font-size: 13px; color: #6d6d6d; }
.sf-map { position: absolute; inset: 0; background: #ddd; z-index: 0; }

/* Pins, from the live page's CSS. Card corners capped at 8px (live uses 10px). */
.leaflet-salon-marker { background: none !important; border: 0 !important; overflow: visible !important; }
.salon-icon { position: relative; width: 36px; height: 36px; cursor: pointer; }
.salon-card { position: absolute; left: 50%; bottom: calc(100% + 44px); transform: translateX(-50%); transform-origin: center bottom; width: 140px;
  display: block; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.18); text-decoration: none;
  transition: transform .25s cubic-bezier(.2,0,0,1), box-shadow .25s; }
.leaflet-salon-marker:hover .salon-card, .salon-icon.is-selected .salon-card { transform: translateX(-50%) translateY(-4px) scale(1.06); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
/* Leaflet sets width: auto on marker-pane images; the card photo must fill the card. */
.leaflet-container .salon-card-image { display: none; width: 100% !important; height: 80px; object-fit: cover; }
.leaflet-container .salon-icon.is-selected .salon-card-image { display: block; }
.salon-card-name { display: block; padding: 8px 12px; font: 500 14px/1.2 var(--font); color: #1a1a1a; text-align: center; }
.icon-flag { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 40px; height: 71px; display: flex; align-items: center; justify-content: center; }
/* Leaflet sets z-index: 200 on every svg in the map pane; keep the pin under its flag disc. */
.leaflet-container .icon-flag > svg { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
.pin-flag-disc { position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.35); pointer-events: none; z-index: 4; display: flex; }
.pin-flag-disc svg { width: 100%; height: 100%; }
.leaflet-marker-pane .leaflet-salon-marker:has(.is-selected), .leaflet-marker-pane .leaflet-salon-marker:hover { z-index: 999 !important; }
.salon-cluster { position: relative; width: 36px; height: 36px; border-radius: 50%; background: #2b2b2b; color: #fff; font: 600 16px/1 var(--font);
  display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform var(--fast) var(--ease); }
.leaflet-salon-marker:hover .salon-cluster, .leaflet-salon-marker:focus-visible .salon-cluster { transform: scale(1.1); }
.salon-cluster .pin-flag-disc { top: -14px; right: -12px; }
.pin-flag-disc + .pin-flag-disc { right: 4px; z-index: 3; }
.leaflet-container { font-family: var(--font); }
@media (prefers-reduced-motion: reduce) { .salon-card { transition: none; } }

@media (max-width: 767px) {
  .sf { display: flex; flex-direction: column-reverse; height: auto; min-height: 0; overflow: visible; }
  /* clip, not hidden: stops the swap's 16px slide from scrolling the page sideways
     without making the panel a scroll box (the sticky tabs keep working). */
  .sf-panel, .sf-panel--detail { position: static; width: 100%; overflow: visible; overflow-x: clip; box-shadow: none; transition: none; }
  .sf-panel > *, .sf-panel > .dp { width: auto; }
  .sf-map { position: relative; inset: auto; height: 45vh; min-height: 300px; transition: height .4s cubic-bezier(.22,1,.36,1); }
  .sf--detail .sf-map { height: 240px; min-height: 0; }
}


/* ---------- Location drawer ---------- */
.dp { padding: 20px 40px 72px; }
.dp .wrap { max-width: none; padding: 0; margin: 0; }
.dp-top { display: flex; align-items: center; justify-content: space-between; }
.dp-share { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--stroke-weak); color: var(--text-strong); cursor: pointer; }
.dp-share:hover { background: var(--bg-sunken); }
.dp-share[data-copied]::after { content: 'Link copied'; position: absolute; transform: translate(-70px, 34px); font-size: 12px; background: var(--fill-strong); color: #fff; padding: 4px 8px; white-space: nowrap; }
.dp-photo { margin-top: 12px; position: relative; }
.dp-photo img { width: 100%; height: 280px; object-fit: cover; border-radius: var(--radius-lg); background: var(--bg-sunken); }
.dp-photo .needs { position: absolute; left: 12px; right: 12px; bottom: 12px; }
.dp-head { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.dp-eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-weak); }
.dp-head h1 { font-size: 32px; line-height: 40px; letter-spacing: -0.5px; font-weight: 700; }
.dp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.dp-rating { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--text-weak); text-decoration: none; }
.dp-rating b { color: var(--text-strong); font-weight: 600; }
.dp-rating .sf-stars img { width: 14px; height: 14px; }
a.dp-rating:hover span { text-decoration: underline; text-underline-offset: 3px; }
.dp-lead { font-size: 16px; line-height: 24px; color: var(--text-weak); max-width: 620px; }
.dp-actions { margin-top: 24px; display: flex; gap: 8px; }
.dp-actions .btn { flex: 1 1 0; min-width: 0; padding: 0 16px; }
.dp-actions .btn--primary { flex-grow: 1.7; }
.dp-actions .btn--secondary { border-color: var(--stroke-strong); }
.dp-tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 28px; margin: 32px -40px 0; padding: 0 40px; background: var(--bg); border-bottom: 1px solid var(--stroke-weak); overflow-x: auto; scrollbar-width: none; }
.dp-tabs a { flex-shrink: 0; padding: 16px 0 12px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 500; color: var(--text-weak); text-decoration: none; }
.dp-tabs a:hover { color: var(--text-strong); }
.dp-tabs a[aria-current="true"] { color: var(--text-strong); border-bottom-color: var(--fill-strong); }
.dp-sec, .dp .sec { margin-top: 40px; scroll-margin-top: 64px; display: flex; flex-direction: column; gap: 16px; }
.dp .wrap.sec { margin-top: 48px; }
.dp-sec > h2, .dp .sec h2 { font-size: 24px; line-height: 32px; font-weight: 700; }
.dp .sec h2.h4 { font-size: 18px; line-height: 26px; font-weight: 600; }
.dp-facts { background: var(--white); border: 1px solid var(--stroke-weak); border-radius: var(--radius-lg); }
.dp-facts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 16px; padding: 16px 20px; align-items: start; }
.dp-facts li + li { border-top: 1px solid var(--stroke-weak); }
.dp-facts li > .ico { margin-top: 0; color: var(--text-strong); }
.dp-facts li > div { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 22px; }
.dp-facts address, .dp-strong { color: var(--text-strong); }
.dp-facts span { color: var(--text-weak); }
.dp-facts .dp-strong { color: var(--text-strong); }
.dp-facts a:not(.link) { color: var(--text-strong); font-weight: 500; }
.dp-facts .link { font-size: 14px; }
.dp-yes > .ico { color: var(--success) !important; }
.dp .block { margin-top: 4px; }
.dp-card { padding: 24px; background: var(--white); border: 1px solid var(--stroke-weak); border-radius: var(--radius-lg); gap: 12px; }
.dp-card > h2 { font-size: 20px; line-height: 28px; }
.notify__row { display: flex; gap: 8px; }
.notify__row input { flex: 1 1 auto; min-width: 0; }
.notify__row .btn { min-height: 48px; }
.dp-help { background: var(--bg-sunken); border-color: transparent; }
/* AI try-on: the dark feature card used on the quiz result page and the men's hub, sized for the panel */
.dp-tryon { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 12px; padding: 22px 20px 22px 24px; border-radius: var(--radius-lg); background: #2b2b2b; color: #fff; overflow: hidden; }
.dp-tryon__copy { position: relative; flex: 1 1 0; min-width: 0; }
.dp-tryon__eyebrow { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.dp-tryon__eyebrow svg { width: 12px; height: 12px; }
.dp-tryon h2 { margin: 0 0 6px; color: #fff; }
.dp-tryon p:not(.dp-tryon__eyebrow) { margin: 0 0 14px; font-size: 14px; line-height: 20px; color: rgba(255,255,255,.75); }
.dp-tryon__btn { min-height: 40px; padding: 0 20px; background: #fff; color: #2b2b2b; border-color: #fff; font-size: 14px; }
.dp-tryon__btn:hover { background: #e5e5e5; border-color: #e5e5e5; }
.dp-tryon__fan { position: relative; flex: none; width: 112px; height: 116px; }
.dp-tryon__fan img { position: absolute; top: 10px; width: 64px; height: 84px; object-fit: cover; object-position: center top; border-radius: 6px; border: 2px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,.35); background: #fff; }
.dp-tryon__fan img:nth-child(1) { left: 0; transform: rotate(-8deg) translateY(6px); }
.dp-tryon__fan img:nth-child(2) { left: 24px; top: 0; width: 68px; height: 90px; z-index: 2; }
.dp-tryon__fan img:nth-child(3) { left: 46px; transform: rotate(8deg) translateY(6px); }
.dp-help__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dp-help__btns .btn { min-height: 48px; font-size: 15px; background: var(--white); border-color: var(--stroke-strong); }
.dp-help__online { display: flex; align-items: center; gap: 16px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--stroke-weak); text-decoration: none; }
.dp-help__online > span { flex: 1 1 auto; display: flex; flex-direction: column; font-size: 14px; line-height: 20px; color: var(--text-weak); }
.dp-help__online b { font-size: 15px; color: var(--text-strong); }
.dp-help__online:hover b { text-decoration: underline; text-underline-offset: 3px; }
.dp .grid2 { gap: 32px; }
.dp .steps { gap: 20px; }
.dp .faq { max-width: none; }
.dp .nearby { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dp .near { box-shadow: none; }
.leaflet-top.leaflet-right { margin-top: 4px; }

@media (max-width: 767px) {
  .dp { padding: 16px 28px 48px; }
  .dp-tabs { margin: 28px -28px 0; padding: 0 28px; }
}
@media (max-width: 767px) {
  .dp { padding: 12px 16px 40px; }
  .dp-photo { margin: 8px -16px 0; }
  .dp-photo img { height: 220px; border-radius: 0; }
  .dp-head h1 { font-size: 26px; line-height: 34px; }
  .dp-actions { display: none; }
  .dp-tabs { margin: 24px -16px 0; padding: 0 16px; gap: 24px; }
  .dp .grid2, .dp .steps, .dp .nearby, .dp-help__btns { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sf-panel, .sf-panel > * { transition: none !important; }
}

  background: var(--fill-strong); color: var(--white); font-size: 14px; font-weight: 600; }

/* Other countries in the store list. */
.sf-area__title { gap: 12px; }
.sf-area__count { margin-left: auto; margin-right: 12px; font-size: 13px; font-weight: 400; color: #6d6d6d; }
.sf-area + .sf-area .sf-area__title { border-top: 1px solid #e5e5e5; padding-top: 24px; }
.sf-new { padding: 4px 8px; background: var(--fill-strong); color: #fff; border-radius: 4px; font-size: 10px; line-height: 15px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.sf-partner { margin-top: 0; font-size: 12px; line-height: 18px; font-weight: 500; color: #6d6d6d; }
.sf-details .ico { display: inline; vertical-align: -2px; margin-left: 4px; }

/* Another country's store opened on this site: point to its own market site. */
.dp-market { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--info-bg); color: var(--info); border-radius: var(--radius-md);
  font-size: 14px; line-height: 20px; text-decoration: none; }
.dp-market span { flex: 1 1 auto; }
.dp-market:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* On a location page the empty map is a way back to the list. */
.sf--detail .sf-map.leaflet-grab { cursor: pointer; }
.sf--detail .sf-map.leaflet-dragging, .sf--detail .leaflet-dragging .leaflet-grab { cursor: grabbing; }

/* Country tabs on the stores list. Square chips per the SHP radius rules. */
.sf-tabs { display: flex; gap: 4px; padding: 12px 20px 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #e5e5e5; }
.sf-tab { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; background: transparent; border: 0; border-radius: 0;
  font: 500 15px/1 var(--font); color: #444; cursor: pointer; transition: background var(--fast) var(--ease); }
.sf-tab:hover { background: #f5f5f5; }
.sf-tab[aria-selected="true"] { background: #f0f0f0; color: #1a1a1a; }
.sf-tab .flag { border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.sf-tab__name { display: none; }
.sf-tab[aria-selected="true"] .sf-tab__name { display: inline; }
.sf-tab[aria-selected="true"] .sf-tab__n::before { content: '('; }
.sf-tab[aria-selected="true"] .sf-tab__n::after { content: ')'; }
.sf-tab:focus-visible { outline: 2px solid var(--fill-strong); outline-offset: -2px; }
.sf-tabs + .sf-area .sf-list { padding-top: 8px; }

/* Location type chips (icons from the design canvas). */
.type-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.type-chips li { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 8px; background: #f2f2f2; border-radius: 0;
  font-size: 12px; line-height: 16px; font-weight: 500; color: #2b2b2b; }
.type-chips img { width: 18px; height: 18px; object-fit: contain; }
.dp-head .type-chips { margin-top: 0; }
.dp-head .type-chips li { height: 32px; font-size: 13px; padding: 0 12px 0 12px; }
.dp-head .type-chips img { width: 20px; height: 20px; }

.dp-reassure { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--text-weak); }
.dp-reassure .ico { color: var(--success); }

/* Near me: ZIP / postal code search and "Use my location". */
.sf-near { padding: 4px 28px 12px; display: flex; flex-direction: column; gap: 8px; }
.sf-near__row { display: flex; gap: 8px; }
.sf-near input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--stroke-strong); border-radius: 0; background: var(--white);
  font-size: 15px; color: var(--text-strong); }
.sf-near input:focus { outline: none; border-color: var(--fill-strong); box-shadow: var(--focus-ring); }
.sf-near__go { height: 44px; padding: 0 16px; border: 0; border-radius: 0; background: var(--fill-strong); color: var(--white); font: 600 14px/1 var(--font); cursor: pointer; }
.sf-near__go:hover { background: var(--fill-hover); }
.sf-near__me { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0; background: none; border: 0;
  font: 500 13px/1 var(--font); color: #2b2b2b; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sf-near__me[aria-busy="true"] { opacity: .6; }
.sf-near__me.is-on .ico { color: var(--info); }
.sf-near__msg { font-size: 13px; line-height: 18px; color: #6d6d6d; min-height: 0; }
.sf-near__msg:empty { display: none; }
.sf-dist { margin-left: auto; font-size: 13px; font-weight: 500; color: #6d6d6d; white-space: nowrap; }
.dp-dist { font-size: 14px; color: var(--text-weak); }

/* You are here. */
.sf-me { background: none; border: 0; }
.sf-me__dot { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--info); border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.25); box-sizing: border-box; }
/* Static: the SHP system has no decorative looping animation. */
.leaflet-container .sf-me__acc { fill: #1a74a8; fill-opacity: .1; stroke: #1a74a8; stroke-opacity: .3; stroke-width: 1; }
.sf-locate a { display: flex !important; align-items: center; justify-content: center; color: #2b2b2b; }
.sf-locate a.is-on { color: var(--info); }
.sf-locate a[aria-busy="true"] { opacity: .6; }
.sf-rating__brand { display: inline-flex; align-items: center; gap: 4px; }
.sf-rating__brand b { font-weight: 600; }

/* Meet the team, including placeholder cards until real stylists are supplied. */
.team__ph { aspect-ratio: 4 / 5; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; background: var(--bg-sunken);
  border: 1px dashed var(--stroke-strong); border-radius: var(--radius-lg); color: var(--neutral-500); }
.team-sec--placeholder .team b, .team-sec--placeholder .team .muted { color: var(--neutral-500); }
.team li > span { font-size: 14px; line-height: 20px; }
.dp .team { gap: 16px; }
@media (max-width: 767px) { .dp .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Google Maps style: list | store panel | map ---------- */
.sf { --detail-w: 480px; }
.sf-detail { position: absolute; top: 0; bottom: 0; left: var(--list-w); width: var(--detail-w); z-index: 3; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: var(--white); box-shadow: 1px 0 0 #e5e5e5, 12px 0 32px rgba(21,24,40,.10); }
.sf-detail[hidden] { display: none; }
@media (min-width: 768px) and (max-width: 1279px) {
  /* Not enough width for list + panel + map: the panel covers the list. */
  .sf-detail { left: 0; }
}

.sf-detail .dp { padding: 0 0 56px; }
.sf-detail .dp > * { margin-left: 24px; margin-right: 24px; }
.sf-detail .dp > .dp-hero, .sf-detail .dp > .dp-tabs { margin-left: 0; margin-right: 0; }
.dp-hero { position: relative; height: 220px; background: var(--bg-sunken); }
.dp-hero img { width: 100%; height: 100%; object-fit: cover; }
.dp-hero__none { height: 100%; }
.dp-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--text-strong); box-shadow: var(--shadow-sm); text-decoration: none; }
.dp-close:hover { background: var(--bg-sunken); }
.dp-hero .needs { position: absolute; left: 12px; right: 64px; bottom: 12px; }
.sf-detail .dp-head { margin-top: 20px; gap: 8px; }
.sf-detail .dp-head h1 { font-size: 22px; line-height: 30px; letter-spacing: 0; }
.sf-detail .dp-tabs { margin: 16px 0 0; padding: 0 24px; gap: 24px; background: var(--white); }
.dp-quick { display: flex; gap: 8px; padding: 20px 0 4px; }
.qa { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; background: none; border: 0;
  font: 500 13px/1.2 var(--font); color: var(--text-strong); text-align: center; text-decoration: none; cursor: pointer; }
.qa__ico { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--bg-sunken); color: var(--text-strong);
  transition: background var(--fast) var(--ease); }
.qa:hover .qa__ico { background: var(--neutral-100); }
.qa--main .qa__ico { background: var(--fill-strong); color: var(--white); }
.qa--main:hover .qa__ico { background: var(--fill-hover); }
.qa:focus-visible { outline: none; }
.qa:focus-visible .qa__ico { outline: 2px solid var(--fill-strong); outline-offset: 2px; }
.sf-detail .dp-reassure { margin-top: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--stroke-weak); }
.sf-detail .dp-sec, .sf-detail .dp .sec { margin-top: 28px; }
.sf-detail .dp .wrap.sec { margin-top: 32px; }
.sf-detail .dp-sec > h2, .sf-detail .dp .sec h2 { font-size: 20px; line-height: 28px; }
.sf-detail .dp-lead { font-size: 15px; line-height: 22px; }
.sf-detail .dp .grid2, .sf-detail .dp .nearby, .sf-detail .dp-help__btns { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.sf-detail .dp .team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sf-detail .dp-facts li { padding: 16px 16px; }

@media (max-width: 767px) {
  .sf-detail { position: static; width: 100%; box-shadow: none; transition: none; overflow: visible; overflow-x: clip; }
  .sf--detail .sf-panel { display: none; }
  .sf-detail .dp > * { margin-left: 16px; margin-right: 16px; }
  .sf-detail .dp-tabs { padding: 0 16px; }
  .dp-hero { height: 200px; }
}
@media (prefers-reduced-motion: reduce) { .sf-detail, .sf-detail > * { transition: none !important; } }
@media (max-width: 767px) {
  /* Phones use the fixed action bar at the bottom instead. */
  .sf-detail .dp-quick { display: none; }
  .sf-detail .dp-reassure { margin-top: 16px; }
}

/* ---------- Store panel, Google Maps place style in SHP tokens ---------- */
/* Tabs: three equal tabs with a charcoal underline. */
.sf-detail .dp-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; margin-top: 16px; border-bottom: 1px solid var(--stroke-weak); }
.dp-tab { height: 48px; background: none; border: 0; border-bottom: 2px solid transparent; font: 500 14px/1 var(--font); color: var(--text-weak); cursor: pointer; }
.dp-tab:hover { color: var(--text-strong); } /* no grey fill: the underline marks the tab (Mehmet, 30 Sep) */
.dp-tab[aria-selected="true"] { color: var(--text-strong); border-bottom-color: var(--fill-strong); font-weight: 600; }
.dp-tab:focus-visible { outline: 2px solid var(--fill-strong); outline-offset: -2px; }
.js .dp-pane:not(.is-on) { display: none; }
.dp-pane > * { margin-top: 20px; }
.dp-pane > .dp-quick { margin-top: 0; }
.sf-detail .dp > .dp-pane { margin-left: 0; margin-right: 0; }
.sf-detail .dp-pane > * { margin-left: 24px; margin-right: 24px; }
.sf-detail .dp-pane > .dp-info { margin-left: 0; margin-right: 0; }

.dp-more { align-self: flex-start; padding: 0; background: none; border: 0; cursor: pointer; font-family: var(--font); }
.dp-block { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--stroke-weak); }
.dp-block > h2 { font-size: 18px; line-height: 26px; font-weight: 600; }

/* Info rows: icon, text; full-bleed hover like a list. */
.dp-info { border-top: 1px solid var(--stroke-weak); border-bottom: 1px solid var(--stroke-weak); padding: 8px 0; }
.dp-info li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 20px; align-items: start; padding: 12px 24px; }
.dp-info li:hover { background: #f7f7f7; }
.dp-info li > .ico { margin-top: 0; color: var(--text-strong); }
.dp-info li > div { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 22px; }
.dp-info address { color: var(--text-strong); }
.dp-info span { color: var(--text-weak); }
.dp-info a:not(.link) { color: var(--text-strong); text-decoration: none; }
.dp-info a:not(.link):hover { text-decoration: underline; text-underline-offset: 3px; }
.dp-info .link { font-size: 14px; }
.dp-hours summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; font-size: 15px; line-height: 22px; color: var(--text-strong); }
.dp-hours summary::-webkit-details-marker { display: none; }
.dp-hours summary .ico { transition: transform var(--base) var(--ease); color: var(--text-weak); }
.dp-hours[open] summary .ico { transform: rotate(180deg); }
.dp-hours .hours { margin-top: 8px; font-size: 14px; }
.dp-hours .hours th, .dp-hours .hours td { padding: 8px 0; }

/* Photos strip. */
.dp-photos { display: grid; grid-auto-flow: column; grid-auto-columns: 136px; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -24px; padding: 0 24px; }
.dp-photo-tile { position: relative; width: 136px; height: 136px; padding: 0; border: 0; background: var(--bg-sunken); border-radius: var(--radius-lg); overflow: hidden; cursor: zoom-in; }
.dp-photo-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--base) var(--ease); }
.dp-photo-tile:hover img { transform: scale(1.04); }
.dp-photo-tile span { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; background: rgba(20,22,30,.62); color: #fff; font: 500 12px/1.3 var(--font); border-radius: var(--radius-md); }
.dp-hero img { cursor: zoom-in; }

/* Reviews: score, star breakdown, cards. */
.dp-rsum { display: flex; align-items: center; gap: 20px; }
.dp-rsum__score { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.dp-rsum__score b { font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.5px; }
.dp-rsum__score a { font-size: 14px; color: var(--text-weak); }
.dp-rsum__score .sf-stars img { width: 16px; height: 16px; }
.dp-rsum--big { padding: 20px 0 4px; }
.dp-rsum--none { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 22px; }
.dp-rbars { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.dp-rbars li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12px; color: var(--text-weak); }
.dp-rbar { height: 8px; background: var(--bg-sunken); border-radius: var(--radius-full); overflow: hidden; }
.dp-rbar > span { display: block; height: 100%; background: #f4b400; border-radius: var(--radius-full); }
.dp-rbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.dp-rbtns .btn { min-height: 44px; font-size: 14px; padding: 0 16px; }
.dp-reviews { display: flex; flex-direction: column; }
.dp-review { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--stroke-weak); }
.dp-review__who { display: flex; align-items: center; gap: 12px; }
.dp-review__who > span:last-child { display: flex; flex-direction: column; font-size: 14px; line-height: 20px; }
.dp-review__avatar { width: 36px; height: 36px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; background: var(--neutral-100); font-weight: 600; color: var(--text-strong); }
.dp-review__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dp-review p { font-size: 15px; line-height: 22px; color: var(--text-strong); }
.dp-review--ph { opacity: .7; }
html.review .dp-reviews.review-only { display: flex !important; flex-direction: column; }

/* Photo viewer. */
.dp-viewer { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(12,12,14,.94); color: #fff; }
.dp-viewer::backdrop { background: rgba(12,12,14,.6); }
.dp-viewer figure { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 56px 72px; box-sizing: border-box; }
.dp-viewer img { max-width: 100%; max-height: calc(100% - 40px); object-fit: contain; border-radius: var(--radius-lg); }
.dp-viewer figcaption { font-size: 14px; color: rgba(255,255,255,.8); }
.dp-viewer__btn { position: absolute; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); color: #fff; border: 0; font-size: 26px; line-height: 1; cursor: pointer; }
.dp-viewer__btn:hover { background: rgba(255,255,255,.22); }
.dp-viewer__close { top: 16px; right: 16px; font-size: 20px; }
.dp-viewer__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.dp-viewer__next { right: 16px; top: 50%; transform: translateY(-50%); }
.dp-viewer__btn[hidden] { display: none; }

@media (max-width: 767px) {
  .sf-detail .dp-pane > * { margin-left: 16px; margin-right: 16px; }
  .dp-info li { padding: 12px 16px; }
  .dp-photos { margin: 0 -16px; padding: 0 16px; }
}
@media (max-width: 767px) { .dp-viewer figure { padding: 56px 12px; } }

/* List cards: the whole card opens the store; Book and Directions on the right. */
.sf-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.sf-row--link { cursor: pointer; }
.sf-row--link:hover { background: #f7f7f7; }
.sf-row--link.is-active, .sf-row--link.is-active:hover { background: #f0f0f0; }
.sf-row__open { text-decoration: none; }
.sf-row__open::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.sf-row__open:focus-visible { outline: none; }
.sf-row__open:focus-visible::after { outline: 2px solid var(--fill-strong); outline-offset: -2px; }
.sf-row .sf-phone, .sf-row__acts { position: relative; z-index: 1; }
.sf-row__acts { display: flex; gap: 4px; padding-top: 4px; }
.sf-qa { width: 60px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; font: 500 11px/1.2 var(--font); color: var(--text-strong); }
.sf-qa__ico { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--bg-sunken); transition: background var(--fast) var(--ease); }
.sf-qa:hover .sf-qa__ico { background: var(--neutral-100); }
.sf-row--link:hover .sf-qa__ico { background: #ececec; }
.sf-qa:focus-visible { outline: none; }
.sf-qa:focus-visible .sf-qa__ico { outline: 2px solid var(--fill-strong); outline-offset: 2px; }
.sf-row.is-active .sf-name a { text-decoration: none; }

/* Live Google reviews (Places API). */
.dp-review__photo { width: 36px; height: 36px; border-radius: var(--radius-full); object-fit: cover; }
.dp-review--google b a { color: inherit; text-decoration: none; }
.dp-review--google b a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dp-greviews[hidden], .dp-gattr[hidden] { display: none; }
.dp-gattr { font-size: 12px; line-height: 18px; color: var(--text-weak); }
.dp-gattr a { color: var(--text-strong); }
html.review .has-google-reviews .dp-reviews.review-only { display: none !important; }
.sf-flag { display: inline-flex; flex-shrink: 0; }
.sf-flag .flag { border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

/* Flag right after the last word of the name, even when the name wraps. */
.sf-row .sf-name { display: block; }
.sf-row .sf-name > a, .sf-row .sf-name > .sf-name__text { display: inline; }
.sf-row .sf-flag { display: inline-flex; vertical-align: -3px; margin-left: 8px; }
.sf-row .sf-new { display: inline-block; vertical-align: 2px; margin-left: 8px; }
/* On a hovered or selected card (grey), chips and action squares turn white so they stay visible. */
.sf-row--link:hover .type-chips li, .sf-row.is-active .type-chips li,
.sf-row--link:hover .sf-qa__ico, .sf-row.is-active .sf-qa__ico { background: var(--white); }
.sf-row--link:hover .sf-qa:hover .sf-qa__ico, .sf-row.is-active .sf-qa:hover .sf-qa__ico { background: var(--neutral-100); }
.sf-nowrap { white-space: nowrap; }

/* Men / Women chips. */
.type-chips li svg { width: 16px; height: 16px; color: var(--text-strong); flex-shrink: 0; }

/* Filters floating on the map (Google Maps style, SHP square chips). */
.sf-filters { position: absolute; top: 12px; left: calc(var(--list-w) + 12px); right: 64px; z-index: 4; display: flex; flex-wrap: wrap; gap: 8px; pointer-events: none; }
.sf--detail .sf-filters { left: calc(var(--list-w) + var(--detail-w) + 12px); }
.sf-filters > * { pointer-events: auto; }
.sf-fmenu { position: relative; }
.sf-fchip { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--white); border: 0; border-radius: 0;
  box-shadow: 0 1px 3px rgba(21,24,40,.18), 0 2px 8px rgba(21,24,40,.08); font: 500 14px/1 var(--font); color: var(--text-strong); cursor: pointer; white-space: nowrap; }
.sf-fchip:hover { background: var(--bg-sunken); }
.sf-fchip.is-on { background: var(--fill-strong); color: var(--white); }
.sf-fchip.is-on svg { color: var(--white); }
.sf-fchip:focus-visible { outline: 2px solid var(--fill-strong); outline-offset: 2px; }
.sf-fchip[hidden] { display: none; }
.sf-fpop { position: absolute; top: 46px; left: 0; min-width: 220px; padding: 8px 0; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 5; }
.sf-fpop[hidden] { display: none; }
.sf-opt { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 16px; font-size: 14px; cursor: pointer; }
.sf-opt:hover { background: var(--bg-sunken); }
.sf-opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--fill-strong); }
.sf-opt img { width: 18px; height: 18px; object-fit: contain; }
.sf-empty { padding: 20px 28px; font-size: 14px; line-height: 20px; color: var(--text-weak); }
.sf-empty .link { display: inline; padding: 0; background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.sf-tab.is-empty { opacity: .45; }
@media (min-width: 768px) and (max-width: 1279px) { .sf--detail .sf-filters { left: calc(var(--detail-w) + 12px); } }
@media (max-width: 767px) {
  .sf-filters { position: static; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 12px 16px; right: auto; background: var(--white); border-bottom: 1px solid var(--stroke-weak); }
  .sf--detail .sf-filters { display: none; }
}

/* Parking row: notes and photo guides. */
.dp-parking { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.dp-parking__tile { position: relative; width: 112px; height: 84px; padding: 0; border: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-sunken); cursor: zoom-in; }
.dp-parking__tile img { width: 100%; height: 100%; object-fit: cover; }
.dp-parking__tile span { position: absolute; left: 6px; bottom: 6px; padding: 4px 8px; background: rgba(20,22,30,.62); color: #fff; font: 500 11px/1.3 var(--font); border-radius: var(--radius-md); }
.sf-row[hidden] { display: none !important; }

/* Highlight card under the head (Google Maps "Visit Site" style). */
.dp-promo { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding: 16px 20px; background: var(--white); border: 1px solid var(--stroke-weak); border-radius: var(--radius-lg); }
.dp-promo__title { font-size: 16px; line-height: 24px; font-weight: 600; }
.dp-promo p { font-size: 14px; line-height: 20px; color: var(--text-weak); }
.dp-promo__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.dp-promo__foot span { font-size: 13px; color: var(--text-weak); }
.dp-promo__foot .btn { min-height: 40px; padding: 0 16px; font-size: 14px; }

/* Placeholder review cards (until live Google reviews load). */
.dp-reviews--ph[hidden] { display: none; }
.dp-review--ph { opacity: 1; }
.dp-review--ph b, .dp-review--ph .muted, .dp-review--ph p { color: var(--neutral-500); }
.dp-review--ph .sf-stars { opacity: .45; }
.dp-review__who { position: relative; }
.dp-review__tag { margin-left: auto; height: 22px; font-size: 11px; color: var(--text-weak); }
.dp-review__who > span:nth-child(2) { display: flex; flex-direction: column; font-size: 14px; line-height: 20px; }
.sf-row .sf-dist { display: block; margin: 0 0 0; font-size: 13px; line-height: 18px; font-weight: 500; color: #6d6d6d; }

/* Sections that reuse the page .wrap class inside the store panel: no full-width box,
   so the panel's side margins are respected (nearby cards, team, FAQ). */
.dp .wrap, .sf-detail .dp-pane > .wrap { width: auto; max-width: none; box-sizing: border-box; }
.sf-detail .dp .nearby { grid-template-columns: minmax(0, 1fr); }
.sf-detail .dp .near { min-width: 0; }

/* Copy and call buttons on info rows: shown on hover or focus, always on touch screens. */
.dp-info li.dp-info__row { grid-template-columns: 22px minmax(0, 1fr) auto; position: relative; }
.dp-row-acts { display: flex; gap: 4px; align-self: center; opacity: 0; transition: opacity var(--fast) var(--ease); }
.dp-info__row:hover .dp-row-acts, .dp-info__row:focus-within .dp-row-acts { opacity: 1; }
@media (hover: none) { .dp-row-acts { opacity: 1; } }
.dp-act { position: relative; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; color: var(--text-strong); cursor: pointer; }
.dp-act:hover { background: var(--neutral-100); }
.dp-act:focus-visible { outline: 2px solid var(--fill-strong); outline-offset: 1px; }
.dp-act.is-copied { color: var(--success); }
.dp-act[data-tip]:hover::after, .dp-act[data-tip]:focus-visible::after, .dp-act.is-copied::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; z-index: 6; padding: 8px 12px; background: var(--fill-strong); color: #fff;
  font: 500 12px/1.3 var(--font); white-space: nowrap; border-radius: var(--radius-md); pointer-events: none; }
.dp-gparking { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 0; }
.dp-gparking[hidden] { display: none; }
.dp-gparking li { font-size: 14px; color: var(--text-weak); }
.dp-gparking li:not(.dp-gparking__src)::before { content: '✓ '; color: var(--success); }
.dp-gparking__src { width: 100%; font-size: 12px !important; }
.dp-info__parking[hidden] { display: none; }

/* Stylist placeholder portrait. */
.team__ph { position: relative; border: 0; background: linear-gradient(180deg, #efeeec 0%, #e4e2df 100%); overflow: hidden; }
.team__ph svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 88%; fill: #cfcbc6; }
.team__ph span { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; background: rgba(255,255,255,.85); color: var(--text-weak); font: 500 11px/1.3 var(--font); border-radius: var(--radius-md); }
/* Rows with copy/call buttons: icon, text and buttons share one vertical centre. */
.dp-info li.dp-info__row { align-items: center; }
.dp-info li.dp-info__row > .ico { margin-top: 0; }

/* "Please book an appointment before you visit." (SHP info alert, 4px). */
.dp-booknote { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 12px 16px; background: var(--info-bg); color: var(--info); border-radius: var(--radius-md); font-size: 14px; line-height: 20px; }
.dp-booknote .ico { flex-shrink: 0; margin-top: 0; }
.dp-booknote b { color: var(--text-strong); font-weight: 600; }
.dp-booknote span { color: var(--text-strong); }
.dp-booknote a { color: var(--text-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 767px) { .sf-detail .dp-booknote { margin-top: 16px; } }
/* Quiet version (Mehmet: the blue box drew too much attention). */
.dp-booknote { padding: 0; background: none; color: var(--text-weak); gap: 8px; margin-top: 16px; font-size: 13px; line-height: 19px; }
.dp-booknote .ico { width: 16px; height: 16px; color: var(--text-weak); margin-top: 0; }
.dp-booknote b { font-weight: 500; color: var(--text-weak); }
.dp-booknote span { color: var(--text-weak); }
.dp-booknote a { font-weight: 500; }
/* Chip icons: one 18px box for all. The PNG icons carry about 2px of white space,
   so the edge-to-edge Men/Women drawings get the same inset to match optically. */
.type-chips li svg, .type-chips li img { width: 18px; height: 18px; flex-shrink: 0; box-sizing: border-box; }
.type-chips li svg { padding: 4px; }
/* One divider between sections: the next block's top border is enough. */
.dp-info { border-bottom: 0; }
/* Section dividers run the full panel width (Google style); content keeps its margins. */
.sf-detail .dp-pane > .dp-block { margin-left: 0; margin-right: 0; padding-left: 24px; padding-right: 24px; }
@media (max-width: 767px) { .sf-detail .dp-pane > .dp-block { padding-left: 16px; padding-right: 16px; } }
/* Full-width divider above "Other salons near", like the lines between the blocks above it. */
.sf-detail .dp-pane > .sec.wrap[aria-labelledby="h-near"] { margin-left: 0; margin-right: 0; padding: 24px 24px 0; border-top: 1px solid var(--stroke-weak); }
@media (max-width: 767px) { .sf-detail .dp-pane > .sec.wrap[aria-labelledby="h-near"] { padding-left: 16px; padding-right: 16px; } }
/* Live status sits in the hours row, as on Google Maps: "Closed · Opens Tue at 10:00 AM"
   with the chevron right after it. The weekly summary is the no-JavaScript fallback. */
.dp-hours summary { justify-content: flex-start; }
.dp-hours__status { font-size: 15px; line-height: 22px; color: var(--text-strong); }
.dp-hours__status:not(:empty) + .dp-hours__sum { display: none; }
/* Store name in regular weight, like the place name on Google Maps (Mehmet, 29 Sep). */
.sf-detail .dp-head h1, .dp-head h1 { font-weight: 400; }
/* Quick actions spread evenly across the panel, one equal column each, as on Google Maps
   (Mehmet, 29 Sep: the left-packed row looked unbalanced). */
.dp-quick { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 20px 0 16px; }
.dp-quick .qa { gap: 12px; font-size: 14px; }
/* Pin motion, as on Google Maps: the pin grows from its tip when its row is hovered
   or it is selected, and pops once when a store opens. Never loops. */
.icon-flag { transform-origin: 50% 100%; transition: transform .2s cubic-bezier(.2,0,0,1); }
.salon-icon.is-hover .icon-flag, .leaflet-salon-marker:hover .icon-flag { transform: translateX(-50%) scale(1.15); }
.salon-icon.is-selected .icon-flag { transform: translateX(-50%) scale(1.25); animation: sf-pin-pop .32s cubic-bezier(.2,0,0,1); }
.salon-icon.is-hover .salon-card { transform: translateX(-50%) translateY(-8px) scale(1.06); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.salon-icon.is-selected .salon-card { transform: translateX(-50%) translateY(-12px) scale(1.06); }
.leaflet-marker-pane .leaflet-salon-marker:has(.is-hover) { z-index: 1000 !important; }
@keyframes sf-pin-pop { 0% { transform: translateX(-50%) scale(1); } 60% { transform: translateX(-50%) scale(1.35); } 100% { transform: translateX(-50%) scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .icon-flag, .salon-card { transition: none; animation: none !important; } }

/* ---------- Phones: the finder as Google Maps on a phone (assets/sheet.js) ----------
   The map fills the screen under the header. The panel that is showing (the stores
   list or a store page) is a bottom sheet over it, resting at min, peek or full.
   Square corners per the SHP radius rules; the grip bar is the cue that it drags. */
.sheet-grip { display: none; }
@media (max-width: 767px) {
  html.sheet-on, html.sheet-on body { overflow: hidden; height: 100%; overscroll-behavior: none; }
  html.sheet-on .mbar, html.sheet-on .site-footer { display: none; }
  .sf--sheet { position: fixed; top: var(--sheet-top, 73px); left: 0; right: 0; bottom: 0; height: auto; min-height: 0; display: block; overflow: hidden; }
  .sf--sheet .sf-map { position: absolute; inset: 0; height: auto; min-height: 0; transition: none; }
  .sf--sheet .is-sheet { position: absolute; inset: 0; width: auto; z-index: 3; background: var(--white); box-shadow: 0 -2px 16px rgba(21,24,40,.18);
    overflow-x: clip; overflow-y: hidden; overscroll-behavior: contain; touch-action: none; will-change: transform; }
  /* will-change: transform would, like a transform, trap the filter menus' position: fixed. */
  .sf--sheet .is-sheet.is-full { overflow-y: auto; touch-action: pan-y; box-shadow: none; will-change: auto; }
  .sf--sheet .is-sheet.is-snapping { transition: transform .34s cubic-bezier(.2,0,0,1); }
  .sf--sheet .is-sheet.is-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
  .sf--sheet .is-sheet > .sheet-grip { display: block; position: sticky; top: 0; z-index: 6; width: auto; height: 20px; margin: 0 !important; background: var(--white); cursor: grab; }
  /* The grip never scrolls the content, so a drag on it always moves the sheet. */
  .sf--sheet .is-sheet > .sheet-grip { touch-action: none; }
  .sf--sheet .sheet-grip::before { content: ''; position: absolute; left: 50%; top: 8px; width: 36px; height: 4px; margin-left: -20px; background: var(--neutral-300); }

  /* The stores list: filter chips float on the map, as on Google Maps; the map's
     buttons move down to make room. */
  .sf--sheet:not(.sf--detail) .sf-filters { position: absolute; top: 0; left: 0; right: 0; z-index: 4; padding: 12px 16px; background: none; border: 0; pointer-events: none; }
  .sf--sheet:not(.sf--detail) .sf-fchip { box-shadow: var(--shadow-sm); }
  .sf--sheet:not(.sf--detail) .leaflet-top.leaflet-right { margin-top: 64px; }
  .sf--sheet .sf-panel > * { width: auto; }
  .sf--sheet .sf-panel .sf-head { padding: 0 16px 8px; }
  .sf--sheet .sf-panel .sf-head .sf-title { font-size: 20px; line-height: 28px; }
  .sf--sheet .sf-panel { padding-bottom: env(safe-area-inset-bottom); }
  .sf--sheet .sf-panel .sf-near { padding: 4px 16px 12px; }
  .sf--sheet .sf-panel .sf-tabs { padding: 4px 8px 12px; }
  .sf--sheet .sf-panel .sf-row { padding: 16px 16px 20px; }
  .sf--sheet .sf-panel .sf-row::after { left: 16px; right: 16px; }
  .sf--sheet .sf-panel .sf-area__title, .sf--sheet .sf-panel .sf-empty, .sf--sheet .sf-panel .sf-other { padding-left: 16px; padding-right: 16px; }

  /* A store: no photo on top (the Photos strip and the pin's map card show the
     storefront); the close button sits beside the name. */
  .sf--sheet .dp-hero { position: static; height: 0; background: none; }
  .sf--sheet .dp-hero > img, .sf--sheet .dp-hero > .dp-hero__none, .sf--sheet .dp-hero > .needs { display: none; }
  .sf--sheet .dp-close { position: absolute; top: 20px; right: 12px; z-index: 7; width: 36px; height: 36px; background: var(--bg-sunken); box-shadow: none; }
  .sf--sheet .dp-head { margin-top: 0; padding-right: 44px; }
  .sf--sheet .dp-head h1 { font-size: 22px; line-height: 28px; }
  .sf--sheet .dp-tabs { position: sticky; top: 20px; z-index: 5; margin-top: 12px; }
  .sf--sheet .dp-quick { display: grid; padding: 16px 0 12px; }
  .sf--sheet .dp-quick .qa__ico { width: 44px; height: 44px; }
  .sf--sheet .dp-pane > .dp-promo { margin-top: 8px; }
  .sf--sheet .dp { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* Desktop: opening a store slides its panel out from under the list, left to right,
   like a drawer (Mehmet, 30 Sep). The panel sits below the list so it appears from
   behind it; between 768 and 1279px it covers the list, so it slides in from the
   screen edge instead. Closing runs it in reverse (.is-leaving), back under the list.
   Switching between stores with the panel already open does not replay it.
   hub-map.js adds .is-entering for one frame. */
@media (min-width: 768px) {
  .sf-detail { transition: transform .38s cubic-bezier(.22,1,.36,1); }
  .sf-detail.is-entering { transform: translateX(-100%); transition: none; }
  .sf-detail.is-leaving { transform: translateX(-100%); pointer-events: none; }
}
@media (min-width: 1280px) { .sf-detail { z-index: 1; } }
@media (prefers-reduced-motion: reduce) { .sf-detail.is-entering, .sf-detail.is-leaving { transform: none; } }

/* The phone number on a list card calls only on touch screens. With a mouse, a click
   on it opens the store like the rest of the card; otherwise the browser asked to open
   a phone app (Mehmet, 30 Sep). The store panel still has Call. */
@media (hover: hover) and (pointer: fine) { .sf-row .sf-phone { pointer-events: none; } }

/* Meet the team in the store panel: one row of three. More than three stylists scroll
   sideways (swipe, trackpad, or the ‹ › buttons from location.js), snapping card by
   card, with the next card peeking in so it is clear there are more (Mehmet, 30 Sep). */
.sf-detail .dp .team { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 24px) / 3); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sf-detail .dp .team::-webkit-scrollbar { display: none; }
.sf-detail .dp .team > li { scroll-snap-align: start; min-width: 0; }
/* A smaller peek than before (3.35), so Men and Women chips still fit on one line. */
.sf-detail .dp .team:has(> li:nth-child(4)) { grid-auto-columns: calc((100% - 24px) / 3.1); }
.team-sec .sec__head { position: relative; }
.team-nav { display: none; }
@media (hover: hover) and (pointer: fine) {
  .team-nav { position: absolute; top: 0; right: 0; display: flex; gap: 4px; }
  .team-sec .sec__head { padding-right: 88px; }
}
.team-nav__btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; background: var(--bg-sunken); border: 0; color: var(--text-strong); cursor: pointer; }
.team-nav__btn:hover:not(:disabled) { background: var(--neutral-100); }
.team-nav__btn:disabled { color: var(--neutral-300); cursor: default; }
.team-nav__btn:focus-visible { outline: 2px solid var(--fill-strong); outline-offset: 2px; }
.team-nav__btn--next svg { transform: scaleX(-1); }
/* In the phone sheet the stylists row still swipes sideways; at full it also lets the
   sheet scroll vertically. */
@media (max-width: 767px) {
  .sf--sheet .is-sheet .team { touch-action: pan-x; }
  .sf--sheet .is-sheet.is-full .team { touch-action: pan-x pan-y; }
}

/* Store panel sections share one heading style (Photos and Reviews: 18px semibold),
   and Meet the team gets the same full-width divider above it as Photos
   (Mehmet, 30 Sep: the team heading was bigger and bolder, with no line). */
.sf-detail .dp-pane > .sec h2, .sf-detail .dp-pane > .dp-sec:not(.dp-card) > h2 { font-size: 18px; line-height: 26px; font-weight: 600; }
.sf-detail .dp-pane > .team-sec { margin: 20px 0 0; padding: 20px 24px 0; border-top: 1px solid var(--stroke-weak); gap: 12px; }
.sf-detail .dp-pane > .team-sec .sec__head { gap: 4px; }
.sf-detail .dp-pane > .team-sec .sec__head p { font-size: 14px; line-height: 20px; }
@media (max-width: 767px) { .sf-detail .dp-pane > .team-sec { padding-left: 16px; padding-right: 16px; } }

/* "No matching locations in the USA" pop-up (hub-map.js offerOtherCountry). Square
   corners per the SHP radius rules. */
.sf-ask { width: min(420px, calc(100vw - 32px)); padding: 24px; border: 0; background: var(--white); color: var(--text-strong); box-shadow: var(--shadow-lg); }
.sf-ask::backdrop { background: rgba(21,24,40,.45); }
.sf-ask__t { font-size: 18px; line-height: 26px; font-weight: 600; }
.sf-ask__p { margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--text-weak); }
.sf-ask__btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.sf-ask__btns .btn { min-height: 44px; padding: 0 20px; font-size: 15px; }
@media (max-width: 480px) { .sf-ask__btns { flex-direction: column-reverse; } .sf-ask__btns .btn { width: 100%; } }

/* Phones: the list sheet never runs under the filter chips. They hide as the sheet
   reaches them, and at full they sit pinned under its grip (assets/sheet.js). */
@media (max-width: 767px) {
  .sf--sheet.sf--chips-under > .sf-filters { visibility: hidden; }
  .sf--sheet .sf-panel > .sf-filters { position: sticky; top: 20px; left: auto; right: auto; z-index: 5; width: auto; margin: 0 !important;
    padding: 4px 16px 12px; background: var(--white); border-bottom: 1px solid var(--stroke-weak); pointer-events: auto; }
  .sf--sheet .sf-panel > .sf-filters .sf-fchip { box-shadow: none; border: 1px solid var(--stroke-weak); }
}

/* Action buttons: the same gap above the icons as below the labels (Mehmet, 30 Sep).
   The row has top padding only; the next section's top margin is the gap below. */
.sf-detail .dp-quick { padding-bottom: 0; }
.sf-detail .dp-pane > .dp-quick + * { margin-top: 20px; }
@media (max-width: 767px) {
  .sf--sheet .dp-quick { padding: 16px 0 0; }
  .sf--sheet .dp-pane > .dp-quick + * { margin-top: 16px; }
}

/* Real stylists without a photo yet: their initial on the grey tile (Mehmet, 30 Sep). */
.team__ph--initial { display: flex; align-items: center; justify-content: center; }
.team__ph.team__ph--initial span { position: static; padding: 0; background: none; border-radius: 0; font: 600 44px/1 var(--font); color: var(--neutral-500); }
.team li > .team__role { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-weak); }
.team li > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Phones: about two and a half cards across, swiping sideways, so names and
   specialties have room (three across left each card about 110px wide). */
@media (max-width: 767px) {
  .sf-detail .dp .team, .sf-detail .dp .team:has(> li:nth-child(4)) { grid-auto-columns: calc((100% - 24px) / 2.4); }
}
/* Stylist cards: Men / Women chips instead of a sentence, a size smaller than the store's. */
.team .team__for { margin-top: 4px; gap: 4px; }
.team .team__for li { flex-direction: row; align-items: center; height: 24px; padding: 0 4px 0 4px; gap: 4px; font-size: 12px; line-height: 1; }
.team .team__for li svg, .team .team__for li img { width: 15px; height: 15px; padding: 4px; }
.team li > .team__with { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--text-weak); }
.team .team__with + .team__for { margin-top: 0; }

/* "Book online": a full-width button under the action row, as on Google Maps.
   Tonal grey like the other actions, square corners per the SHP radius rules. */
.dp-book { display: flex; align-items: center; justify-content: center; gap: 12px; height: 48px; background: var(--bg-sunken); color: var(--text-strong);
  font: 600 15px/1 var(--font); text-decoration: none; transition: background var(--fast) var(--ease); }
.dp-book:hover { background: var(--neutral-100); }
.dp-book:focus-visible { outline: 2px solid var(--fill-strong); outline-offset: 2px; }
.sf-detail .dp-pane > .dp-quick + .dp-book { margin-top: 16px; }
@media (max-width: 767px) { .sf--sheet .dp-pane > .dp-quick + .dp-book { margin-top: 12px; } }
.sf-detail .dp-pane > .dp-book + * { margin-top: 20px; }
@media (max-width: 767px) { .sf--sheet .dp-pane > .dp-book + * { margin-top: 16px; } }

/* Action row as equal tiles (Mehmet, 30 Sep, option A): icon over label inside a grey
   tile, filling the row, so three actions no longer float apart. The one dark action
   is "Book online" when there is one, otherwise the first tile (Call to book,
   Directions, Notify me). Square corners per the SHP radius rules. */
.sf-detail .dp-quick { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.sf-detail .dp-quick .qa { gap: 8px; padding: 12px 4px 12px; background: var(--bg-sunken); font-size: 13px; line-height: 1.2; transition: background var(--fast) var(--ease); }
.sf-detail .dp-quick .qa:hover { background: var(--neutral-100); }
.sf-detail .dp-quick .qa__ico, .sf--sheet .dp-quick .qa__ico { width: 24px; height: 24px; background: none; color: inherit; }
.sf-detail .dp-quick .qa:hover .qa__ico { background: none; }
.sf-detail .dp-quick .qa--main { background: var(--fill-strong); color: var(--white); }
.sf-detail .dp-quick .qa--main:hover { background: var(--fill-hover); }
.sf-detail .dp-quick .qa--main .qa__ico { background: none; color: var(--white); }
.sf-detail .dp-quick .qa:focus-visible { outline: 2px solid var(--fill-strong); outline-offset: 2px; }
.sf-detail .dp-quick .qa:focus-visible .qa__ico { outline: none; }
.sf-detail .dp-book { background: var(--fill-strong); color: var(--white); }
.sf-detail .dp-book:hover { background: var(--fill-hover); }
.sf-detail .dp-pane > .dp-quick + .dp-book, .sf--sheet .dp-pane > .dp-quick + .dp-book { margin-top: 8px; }

/* Type chips sit in the head under the rating (Mehmet, 30 Sep), at the list cards'
   smaller size so the three usually fit on one line on a phone. */
.sf-detail .dp-head .type-chips { margin-top: 4px; gap: 8px; }
.sf-detail .dp-head .type-chips li { height: 28px; padding: 0 8px 0 8px; gap: 4px; font-size: 13px; }
.sf-detail .dp-head .type-chips li svg, .sf-detail .dp-head .type-chips li img { width: 18px; height: 18px; }
@media (max-width: 767px) {
  /* Only the name needs room beside the ✕; the chips get the full width, in one row
     that scrolls sideways if a store ever has more. */
  .sf--sheet .dp-head { padding-right: 0; }
  .sf--sheet .dp-head h1 { padding-right: 44px; }
  .sf--sheet .dp-head .type-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; touch-action: pan-x; }
  .sf--sheet .dp-head .type-chips::-webkit-scrollbar { display: none; }
  .sf--sheet .dp-head .type-chips li { flex-shrink: 0; }
}
/* A subtle edge on every stylist tile, so photos on white (Omar) don't melt into the page. */
.team > li > img, .team > li > .team__ph { box-sizing: border-box; border: 1px solid var(--stroke-weak); }

/* ---------- Stylist profile, inside the store panel (location.js) ----------
   Replaces the panel's content while open and slides in from the right, like the
   drawer. Square corners per the SHP radius rules. */
.team > li { position: relative; }
.team__open { position: absolute; inset: 0; z-index: 1; }
.team__open:focus-visible { outline: 2px solid var(--fill-strong); outline-offset: 3px; }
.team > li:hover b { text-decoration: underline; text-underline-offset: 3px; }
.sty-list, .sty[hidden] { display: none; }
.dp--profile > :not(.sty-list) { display: none !important; }
.dp--profile > .sty-list { display: block; margin: 0 !important; }
.sty { display: flex; flex-direction: column; gap: 20px; padding: 0 24px 40px; animation: sty-in .32s cubic-bezier(.22,1,.36,1); }
@keyframes sty-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sty { animation: none; } }
.sty__bar { position: sticky; top: 0; z-index: 4; margin: 0 -24px; padding: 8px 12px; background: var(--white); border-bottom: 1px solid var(--stroke-weak); }
.sf--sheet .sty__bar { top: 20px; }
.sty__back { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 8px; background: none; border: 0; font: 500 15px/1 var(--font); color: var(--text-strong); cursor: pointer; }
.sty__back:hover { background: var(--bg-sunken); }
.sty__back:focus-visible { outline: 2px solid var(--fill-strong); outline-offset: 2px; }
.sty__head { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 16px; align-items: end; }
.sty__head > img, .sty__head > .team__ph { width: 136px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); box-sizing: border-box; border: 1px solid var(--stroke-weak); }
.sty__who { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; }
.sty__who .sty__name { font-size: 24px; line-height: 30px; font-weight: 600; }
.sty__at { font-size: 14px; line-height: 20px; color: var(--text-weak); }
.sty__who .team__with { font-size: 12px; line-height: 16px; color: var(--text-weak); margin-top: 8px; }
.sty__who .team__for { display: flex; gap: 4px; }
.sty__who .team__for li { height: 26px; padding: 0 8px 0 8px; gap: 4px; font-size: 13px; }
.sty .dp-book { background: var(--fill-strong); color: var(--white); }
.sty .dp-book:hover { background: var(--fill-hover); }
.sty__note { margin-top: -12px; font-size: 13px; line-height: 18px; color: var(--text-weak); }
.sty__block { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--stroke-weak); }
.sty__block .sty__h { font-size: 18px; line-height: 26px; font-weight: 600; }
.sty__block .sty__sub { font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: 8px; }
.sty__bio { font-size: 15px; line-height: 22px; color: var(--text-strong); }
.sty__bio--ph { color: var(--neutral-500); }
.sty__bio--ph .tag { display: inline-block; margin-right: 8px; padding: 4px 8px; background: var(--bg-sunken); font-size: 11px; font-weight: 600; color: var(--text-weak); vertical-align: 1px; }
.sty__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sty__day { height: 36px; display: flex; align-items: center; justify-content: center; font: 600 13px/1 var(--font); }
.sty__day--on { background: var(--fill-strong); color: var(--white); }
.sty__day--req { background: var(--white); color: var(--text-strong); border: 1px dashed var(--stroke-strong); }
.sty__day--off { background: var(--bg-sunken); color: var(--neutral-500); }
.sty__days { font-size: 15px; line-height: 22px; }
.sty__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sty__cols > div:only-child { grid-column: 1 / -1; }
.sty__svc { display: flex; flex-direction: column; gap: 8px; }
.sty__svc li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 14px; line-height: 20px; }
.sty__svc .ico { margin-top: 0; color: var(--success); }
.sty__also { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 767px) { .sty { padding-left: 16px; padding-right: 16px; } .sty__bar { margin: 0 -16px; } }
@media (max-width: 380px) { .sty__cols { grid-template-columns: minmax(0, 1fr); } .sty__head { grid-template-columns: 112px minmax(0, 1fr); } .sty__head > img { width: 112px; } }
.sty__block .sty__sub { margin-top: 0; }
.sty__who .team__role { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-weak); }
/* Focus moves to the name for screen readers; no focus box for that. */
.sty .sty__name:focus, .sty .sty__name:focus-visible { outline: none; box-shadow: none; }
/* A chevron after the name says the card opens a profile (Mehmet, 30 Sep: on phones
   there is no hover to hint at it). */
.team li > b.team__name { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: normal; overflow: visible; }
.team__name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team__name > .ico { flex-shrink: 0; color: var(--text-strong); transition: transform var(--fast) var(--ease); }
.team > li:hover .team__name > .ico { transform: translateX(2px); }
.team > li:hover b { text-decoration: none; }
.team > li:hover .team__name > span { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Photos, like Google Maps (location.js) ----------
   Row: a wide "All" tile with the count, then a tile per category (Outside, Inside,
   Team, Parking), labels on a soft shade at the bottom. */
.dp-photos { grid-auto-columns: auto; }
.dp-photo-tile { width: 136px; height: 136px; cursor: pointer; }
.dp-photo-tile--all { width: 208px; }
.dp-photo-tile span { left: 0; right: 0; bottom: 0; padding: 24px 12px 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  background: linear-gradient(transparent, rgba(0,0,0,.62)); border-radius: 0; font: 600 14px/1.2 var(--font); }
.dp-photo-tile span small { font-weight: 400; font-size: 12px; opacity: .9; }
.dp-photo-tile:focus-visible { outline: 2px solid var(--fill-strong); outline-offset: 2px; }
.dp-parking__tile { cursor: pointer; }

/* Album: a white column (header, tabs, grid) beside a dark stage on desktop; on phones
   the grid, then one photo full screen. Square corners per the SHP radius rules. */
.pa { position: fixed; inset: 0; z-index: 60; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text-strong); overflow: hidden; }
.pa:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); }
.pa[hidden] { display: none; }
/* Desktop: the stores list stays. The white column takes the store panel's place and
   the photo covers the map, inside the store finder (the album is mounted in .sf). */
@media (min-width: 768px) {
  .pa { position: absolute; top: 0; bottom: 0; left: var(--list-w); right: 0; z-index: 10; }
  .pa:not([hidden]) { grid-template-columns: var(--detail-w) minmax(0, 1fr); }
}
@media (min-width: 768px) and (max-width: 1279px) { .pa { left: 0; } }
/* Animation: the column slides in from the left edge of the panel, the stage fades in
   and the photo settles from 96%; each new photo crossfades. Closing runs it back. */
.pa__side { background: var(--white); }
.pa__side, .pa__stage { transition: transform .34s cubic-bezier(.22,1,.36,1), opacity .26s ease; }
.pa:not(.is-open) .pa__side { transform: translateX(-24px); opacity: 0; }
.pa:not(.is-open) .pa__stage { opacity: 0; }
.pa.is-closing .pa__side, .pa.is-closing .pa__stage { transition-duration: .22s, .18s; }
.pa__img { opacity: 0; transform: scale(.96); transition: opacity .28s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.pa__img.is-in { opacity: 1; transform: none; }
@media (max-width: 767px) {
  /* Tablets and phones: full screen, rising from below. */
  .pa:not(.is-open) .pa__side { transform: translateY(24px); }
  .pa__stage { transition: opacity .22s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .pa__side, .pa__stage, .pa__img { transition: none !important; transform: none !important; }
}
.pa__side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--stroke-weak); }
.pa__top { display: flex; align-items: center; gap: 8px; padding: 12px 16px 8px 8px; }
.pa__heading { min-width: 0; }
.pa__title { font-size: 18px; line-height: 24px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa__sub { font-size: 13px; line-height: 18px; color: var(--text-weak); }
.pa__icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
.pa__icon:hover { background: var(--bg-sunken); }
.pa__icon:focus-visible, .pa__tab:focus-visible, .pa__thumb:focus-visible, .pa__nav:focus-visible { outline: 2px solid var(--fill-strong); outline-offset: -2px; box-shadow: none; }
.pa__tabs { display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 8px; border-bottom: 1px solid var(--stroke-weak); }
.pa__tabs::-webkit-scrollbar { display: none; }
.pa__tab { flex-shrink: 0; height: 44px; padding: 0 12px; background: none; border: 0; border-bottom: 2px solid transparent; font: 500 14px/1 var(--font); color: var(--text-weak); cursor: pointer; }
.pa__tab span { font-weight: 400; color: var(--text-weak); }
.pa__tab:hover { color: var(--text-strong); }
.pa__tab[aria-selected="true"] { color: var(--text-strong); font-weight: 600; border-bottom-color: var(--fill-strong); }
.pa__grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; align-content: start; }
.pa__thumb { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: var(--bg-sunken); overflow: hidden; cursor: pointer; }
.pa__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pa__thumb span { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 8px 8px; background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; font: 500 12px/1.2 var(--font); text-align: left; }
.pa__thumb.is-on::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--fill-strong); }
.pa__stage { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #121212; color: #fff; }
.pa__stagebar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 12px 16px; }
.pa__stagebar .pa__icon:hover { background: rgba(255,255,255,.14); }
.pa__toGrid { display: none; }
.pa__count { margin-right: auto; font-size: 14px; color: rgba(255,255,255,.85); }
.pa__figure { flex: 1 1 auto; min-height: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 64px 88px 28px; box-sizing: border-box; }
.pa__img { max-width: 100%; max-height: calc(100% - 32px); object-fit: contain; }
.pa__cap { font-size: 14px; line-height: 20px; color: rgba(255,255,255,.85); }
.pa__nav { position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin-top: -24px; padding: 0; background: rgba(255,255,255,.14); color: #fff; border: 0; cursor: pointer; }
.pa__nav:hover { background: rgba(255,255,255,.26); }
.pa__nav[hidden] { display: none; }
.pa__prev { left: 16px; }
.pa__next { right: 16px; }
@media (max-width: 767px) {
  .pa__side { border-right: 0; }
  .pa__stage { position: absolute; inset: 0; display: none; z-index: 3; }
  .pa.is-single .pa__stage { display: flex; }
  .pa__toGrid { display: flex; }
  .pa__count { margin: 0 auto; }
  .pa__figure { padding: 64px 0 28px; }
  .pa__nav { width: 40px; height: 40px; margin-top: -20px; background: rgba(0,0,0,.35); }
  .pa__prev { left: 8px; }
  .pa__next { right: 8px; }
  .pa__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; }
}
@media (max-width: 420px) { .pa__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pa:focus, .pa:focus-visible { outline: none; box-shadow: none; }
/* On a phone's grid nothing is "current" yet; the marker only means something beside the stage. */
@media (max-width: 767px) { .pa__thumb.is-on::after { display: none; } }
@media (min-width: 768px) and (max-width: 767px) {
  /* Tablets: one column too, the photo opening over the grid like on phones. */
  .pa__stage { position: absolute; inset: 0; display: none; z-index: 3; }
  .pa.is-single .pa__stage { display: flex; }
  .pa__toGrid { display: flex; }
}
/* Photos fill the stage (small ones scale up), as on Google Maps. */
.pa__figure { padding-left: 80px; padding-right: 80px; }
.pa__img { width: 100%; height: calc(100% - 32px); max-height: none; object-fit: contain; }
@media (max-width: 767px) { .pa__figure { padding-left: 0; padding-right: 0; } }

/* Four tabs: Overview, Services, Reviews, About (Mehmet, 30 Sep). */
.sf-detail .dp-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Services tab: the store's full service list with the stylists who do each. */
.svc-who { display: block; font-size: 13px; line-height: 18px; color: var(--text-weak); }

/* About tab: the store's Google Business Profile details, as Google Maps lays them out. */
.sf-detail .dp-pane > .g-about { margin-left: 0; margin-right: 0; }
.g-about__grp { padding: 20px 24px; border-bottom: 1px solid var(--stroke-weak); }
.g-about__grp h3 { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0 0 12px; }
.g-about__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.g-about__list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 15px; line-height: 22px; }
.g-about__list .ico { margin-top: 0; color: var(--text-strong); }
@media (max-width: 767px) { .g-about__grp { padding-left: 16px; padding-right: 16px; } }
.sf-detail .dp-pane > .g-about { margin-top: 0; }
/* Services list without names: two columns, like the About tab's groups. */
@media (max-width: 380px) { .store-svc__list { grid-template-columns: minmax(0, 1fr); } }

/* Desktop: the filter chips glide with the store panel as it opens and closes, same
   speed and easing as the drawer (Mehmet, 30 Sep), instead of jumping. */
@media (min-width: 768px) {
  .sf-filters { transition: left .38s cubic-bezier(.22,1,.36,1); }
}
@media (prefers-reduced-motion: reduce) { .sf-filters { transition: none; } }
/* More room between the tiles and Book online (Mehmet, 30 Sep): 16px, twice the tile gap. */
.sf-detail .dp-pane > .dp-quick + .dp-book, .sf--sheet .dp-pane > .dp-quick + .dp-book { margin-top: 16px; }

/* One icon size per chip, drawn edge to edge like the PNG icons (Mehmet, 30 Sep: the
   Men / Women drawings looked small). Icon boxes are sizes, not spacing, so no padding.
   Store chips (list cards, store head): 18px. Stylist chips: 16px. Map filter chips: 20px. */
.type-chips li svg, .type-chips li img,
.sf-detail .dp-head .type-chips li svg, .sf-detail .dp-head .type-chips li img { width: 18px; height: 18px; padding: 0; box-sizing: border-box; object-fit: contain; }
.team .team__for li svg, .team .team__for li img, .sty__who .team__for li svg { width: 16px; height: 16px; padding: 0; }
.sf-fchip > svg, .sf-fchip > img { width: 20px; height: 20px; padding: 0; flex-shrink: 0; object-fit: contain; }
/* Same chip anatomy everywhere: 18px icon, 8px to the label, 8px / 12px sides. */
.type-chips li, .sf-detail .dp-head .type-chips li { gap: 8px; padding: 0 12px 0 8px; }
.team .team__for li, .sty__who .team__for li { gap: 4px; padding: 0 8px 0 4px; }
.team .team__for li, .sty__who .team__for li { padding: 0 4px; }
@media (min-width: 768px) { .sf-detail .dp .team:has(> li:nth-child(4)) { grid-auto-columns: calc((100% - 24px) / 3.05); } }
@media (max-width: 767px) { .sf-detail .dp .team, .sf-detail .dp .team:has(> li:nth-child(4)) { grid-auto-columns: calc((100% - 24px) / 2.3); } }
@media (max-width: 370px) { .sf-detail .dp .team, .sf-detail .dp .team:has(> li:nth-child(4)) { grid-auto-columns: calc((100% - 24px) / 2.15); } }

/* Stars sit edge to edge like Google's (the artwork has its own 2px inset), a size up
   (Mehmet, 30 Sep: they looked small): 16px on list cards with 13px text, 18px in the
   store head, 20px in the reviews summary. */
.sf-stars, .stars { gap: 0; }
.sf-rating { font-size: 13px; line-height: 20px; }
.sf-rating .sf-stars img { width: 16px; height: 16px; }
.dp-rating .sf-stars img { width: 18px; height: 18px; }
.dp-rsum__score .sf-stars img { width: 20px; height: 20px; }

/* WhatsApp chooser: chat or call (location.js). Square corners, 4px grid; green only
   for the functional Online state. */
.wa { width: min(420px, calc(100vw - 32px)); padding: 24px; border: 0; background: var(--white); color: var(--text-strong); box-shadow: var(--shadow-lg); }
.wa::backdrop { background: rgba(21,24,40,.45); }
.wa__t { font-size: 18px; line-height: 24px; font-weight: 600; }
.wa__p { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--text-weak); }
.wa__opts { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.wa__opt { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; background: var(--bg-sunken); color: var(--text-strong); text-decoration: none; transition: background var(--fast) var(--ease); }
.wa__opt:hover { background: var(--neutral-100); }
.wa__opt:focus-visible { outline: 2px solid var(--fill-strong); outline-offset: 2px; box-shadow: none; }
.wa__ico { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--white); }
.wa__txt { display: flex; flex-direction: column; min-width: 0; }
.wa__txt b { font-size: 15px; line-height: 20px; font-weight: 600; }
.wa__txt span { font-size: 13px; line-height: 20px; color: var(--text-weak); }
.wa__status { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; font-size: 12px; font-weight: 600; }
.wa__status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.wa__status--on { color: #138808; background: #e7f4e4; }
.wa__status--off { color: var(--text-weak); background: var(--white); }
.wa__hours { margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--text-weak); }
.wa__cancel { width: 100%; min-height: 44px; margin-top: 16px; }
/* Request a call back (location.js): the WhatsApp chooser's dialog, with a short form. */
.cb__form { display: flex; flex-direction: column; gap: 12px; }
.cb__form .wa__p { margin-top: -8px; }
.cb__f { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; border: 0; font-size: 14px; line-height: 20px; font-weight: 500; }
.cb__f em { font-style: normal; font-weight: 400; color: var(--text-weak); }
.cb__f input:not([type=radio]), .cb__f textarea { width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 12px; border: 1px solid var(--stroke-strong); border-radius: 0; background: var(--white); font: 400 15px/24px var(--font); color: var(--text-strong); }
.cb__f textarea { resize: vertical; }
.cb__f input:focus, .cb__f textarea:focus { outline: none; border-color: var(--fill-strong); box-shadow: var(--focus-ring); }
.cb__f input[aria-invalid="true"] { border-color: var(--error, #d93025); }
.cb__time legend { padding: 0; margin-bottom: 4px; }
.cb__time { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.cb__time label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; background: var(--bg-sunken); font-weight: 500; cursor: pointer; }
.cb__time input { accent-color: var(--fill-strong); margin: 0; }
.cb__err { color: var(--error, #d93025); font-size: 14px; line-height: 20px; }
.cb__done { display: flex; flex-direction: column; gap: 8px; }
.cb__done[hidden] { display: none; }
/* The Men / Women drawings are solid shapes and read heavier than the line-art PNGs at the
   same size (Mehmet, 30 Sep): one step smaller. */
.type-chips li.type-chip--men svg, .type-chips li.type-chip--women svg,
.sf-detail .dp-head .type-chips li.type-chip--men svg, .sf-detail .dp-head .type-chips li.type-chip--women svg { width: 16px; height: 16px; }
.team .team__for li.type-chip--men svg, .team .team__for li.type-chip--women svg,
.sty__who .team__for li.type-chip--men svg, .sty__who .team__for li.type-chip--women svg { width: 14px; height: 14px; }
.sf-fchip[data-ftoggle] > svg { width: 18px; height: 18px; }
/* Call back form, matching the live superhairpieces.com form (square fields per the SHP
   radius rules, 4px grid). */
.cb { position: relative; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.cb__x { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; color: var(--text-strong); cursor: pointer; }
.cb__x:hover { background: var(--bg-sunken); }
.cb .wa__t { padding-right: 48px; font-size: 22px; line-height: 28px; }
.cb__form { gap: 16px; }
.cb__form .wa__p { margin-top: -12px; }
.cb__f { gap: 8px; }
.cb__l { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb__l i { font-style: normal; color: var(--error, #d93025); }
.cb__f select, .cb__phone input { width: 100%; box-sizing: border-box; min-height: 48px; padding: 8px 12px; border: 1px solid var(--stroke-strong); border-radius: 0; background: var(--white); font: 400 15px/24px var(--font); color: var(--text-strong); }
.cb__f select { appearance: none; padding-right: 40px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232b2b2b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
.cb__f select:focus, .cb__phone input:focus { outline: none; border-color: var(--fill-strong); box-shadow: var(--focus-ring); }
.cb__f [aria-invalid="true"] { border-color: var(--error, #d93025); }
.cb__phone { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 8px; }
.cb__fe { font-size: 13px; line-height: 20px; color: var(--error, #d93025); }
.cb__fe[hidden] { display: none; }
.cb__consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14px; line-height: 20px; color: var(--text-weak); cursor: pointer; }
.cb__consent input { width: 20px; height: 20px; margin: 0; accent-color: var(--fill-strong); }
.cb__consent.has-error { color: var(--error, #d93025); }
.cb__submit { width: 100%; min-height: 48px; }
.cb__sum { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; padding: 16px; background: var(--bg-sunken); }
.cb__sum div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 20px; }
.cb__sum dt { color: var(--text-weak); }
.cb__sum dd { margin: 0; font-weight: 500; }
@media (max-width: 420px) { .cb__phone { grid-template-columns: 124px minmax(0, 1fr); } }
.cb__f > input { min-height: 48px; }
.cb input:focus-visible, .cb select:focus-visible { outline: none; }
/* Five tiles (Kennesaw: Notify me … Share) on phones: labels one size smaller to stay on one line. */
@media (max-width: 767px) { .sf-detail .dp-quick:has(> :nth-child(5)) .qa { font-size: 12px; padding-left: 0; padding-right: 0; white-space: nowrap; } }
@media (max-width: 370px) { .sf-detail .dp-quick:has(> :nth-child(5)) .qa { font-size: 11px; } }

/* Action buttons as circles, like Google Maps (Mehmet, 30 Sep: "I like circles"): a 48px
   round icon on a light grey disc above its label, no tile behind. The one dark action is
   still "Book online" (square bar) or, without it, the first circle (Notify me, Call to
   book). Circles for icon action buttons are now part of the SHP radius rules. */
.sf-detail .dp-quick { gap: 8px; }
.sf-detail .dp-quick .qa, .sf-detail .dp-quick .qa:hover { background: none; padding: 0; gap: 8px; }
.sf-detail .dp-quick .qa__ico, .sf--sheet .dp-quick .qa__ico { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-sunken); color: var(--text-strong); transition: background var(--fast) var(--ease); }
.sf-detail .dp-quick .qa:hover .qa__ico { background: var(--neutral-100); }
.sf-detail .dp-quick .qa--main, .sf-detail .dp-quick .qa--main:hover { background: none; color: var(--text-strong); }
.sf-detail .dp-quick .qa--main .qa__ico { background: var(--fill-strong); color: var(--white); }
.sf-detail .dp-quick .qa--main:hover .qa__ico { background: var(--fill-hover); }
.sf-detail .dp-quick .qa:focus-visible { outline: none; }
.sf-detail .dp-quick .qa:focus-visible .qa__ico { outline: 2px solid var(--fill-strong); outline-offset: 2px; }
@media (max-width: 767px) { .sf--sheet .dp-quick .qa__ico { width: 44px; height: 44px; } }
/* Square icon boxes after all (Mehmet, 30 Sep): same layout as the circles, 0px corners
   per the SHP radius rules. */
.sf-detail .dp-quick .qa__ico, .sf--sheet .dp-quick .qa__ico { border-radius: 0; }
@media (max-width: 767px) { .sf--sheet .dp-quick .qa__ico { width: 48px; height: 48px; } } /* same height as Book online on phones too */

/* "Couldn't reach us?" prompt under the actions after a call (location.js): highlighted
   with a dark left edge and a gentle slide-in; square per the SHP radius rules. */
.dp-cbnudge { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 12px 12px 16px;
  background: var(--bg-sunken); border-left: 4px solid var(--fill-strong); }
.dp-cbnudge[hidden] { display: none; }
.sf-detail .dp-pane > .dp-cbnudge { margin-top: 16px; }
.dp-cbnudge.is-in { animation: cbnudge-in .4s cubic-bezier(.22,1,.36,1); }
@keyframes cbnudge-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dp-cbnudge.is-in { animation: none; } }
.dp-cbnudge__ico { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--white); }
.dp-cbnudge__txt { display: flex; flex-direction: column; min-width: 0; }
.dp-cbnudge__txt b { font-size: 15px; line-height: 20px; font-weight: 600; }
.dp-cbnudge__txt span { font-size: 13px; line-height: 20px; color: var(--text-weak); }
.dp-cbnudge__btn { min-height: 40px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.dp-cbnudge__x { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; color: var(--text-weak); cursor: pointer; }
.dp-cbnudge__x:hover { background: var(--white); color: var(--text-strong); }
@media (max-width: 480px) {
  .dp-cbnudge { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .dp-cbnudge__btn { grid-column: 1 / -1; width: 100%; }
  .dp-cbnudge__x { grid-row: 1; grid-column: 3; }
}
/* The panel is narrow even on desktop: text and ✕ on the first line, the button full width below. */
.dp-cbnudge { grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: 12px; }
.dp-cbnudge__btn { grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 44px; }
.dp-cbnudge__x { grid-row: 1; grid-column: 3; align-self: start; }
/* The prompt sits between the action row and Book online: same 16px rhythm on both sides,
   and a white outlined button so Book online stays the one dark action. */
.sf-detail .dp-pane > .dp-quick + .dp-cbnudge, .sf-detail .dp-pane > .dp-cbnudge + .dp-book { margin-top: 16px; }
.dp-cbnudge__btn.btn--secondary { background: var(--white); border: 1px solid var(--fill-strong); color: var(--text-strong); }
.dp-cbnudge__btn.btn--secondary:hover { background: var(--neutral-50); }
/* Stylist profile: the last review needs no line of its own; the next block's top line
   separates them (was two lines, Mehmet 30 Sep). */
.sty__reviews .dp-review:last-child { border-bottom: 0; padding-bottom: 0; }

/* Pickup point: its artwork is 4:3, so at a square 18px it drew 13px tall and looked
   smaller than the other type icons (Mehmet, 1 Oct). Same 18px height, 24px wide. */
.type-chips li img[src$="type-pickup-point.png"],
.sf-detail .dp-head .type-chips li img[src$="type-pickup-point.png"],
.sf-opt img[src$="type-pickup-point.png"] { width: 24px; height: 18px; }

/* ---------- Store pages header (Mehmet, 1 Oct: the stores app's dark bar) ----------
   56px, #2b2b2b. Logo mark left; the store tools centred (the selected one on a lighter
   square); the phone number and the cart right. Phones: the tools that aren't selected
   show their icon only, and the phone shows its icon only. */
.shb { position: relative; height: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 48px; background: #2b2b2b; border-bottom: 0; color: #e0e0e0; font-size: 14px; line-height: 20px; }
.shb a { color: inherit; text-decoration: none; }
.shb svg { flex: none; display: block; }
.shb :focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255,255,255,.28); }
.shb__logo { justify-self: start; display: flex; align-items: center; }
.shb__logo img { display: block; width: 36px; height: auto; }
.shb__tools { display: flex; align-items: center; gap: 12px; }
.shb__tool { height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 4px; transition: background .12s cubic-bezier(.2,0,0,1); }
.shb__tool:hover { background: rgba(255,255,255,.06); }
.shb__tool.is-on { background: rgba(255,255,255,.1); color: var(--white); font-weight: 600; }
.shb__end { justify-self: end; display: flex; align-items: center; gap: 48px; }
.shb__phone { display: inline-flex; align-items: center; gap: 12px; }
.shb__phone span { text-decoration: underline; text-underline-offset: 3px; }
.shb__phone:hover, .shb__cart:hover { color: var(--white); }
.shb__cart { display: inline-flex; }
@media (max-width: 767px) {
  .shb { padding: 0 12px 0 16px; }
  .shb__logo img { width: 32px; }
  .shb__tools { gap: 4px; }
  .shb__tool { padding: 0 8px; }
  .shb__tool:not(.is-on) span, .shb__phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .shb__tool:not(.is-on) { width: 36px; justify-content: center; padding: 0; }
  .shb__end { gap: 12px; }
  .shb__phone, .shb__cart { width: 40px; height: 40px; justify-content: center; align-items: center; }
  .shb__cart svg { width: 24px; height: 24px; }
}
/* Placeholder review photos, laid out like Google's (Mehmet, 1 Oct): three photos as one
   large on the left and two stacked on the right; one photo on its own. Grey tiles. */
.dp-rphotos { display: grid; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
.dp-rphotos li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--neutral-100); color: var(--neutral-500); font-size: 12px; line-height: 16px; }
.dp-rphotos--3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 4 / 3; }
.dp-rphotos--3 li:first-child { grid-row: span 2; }
.dp-rphotos--1 { grid-template-columns: 1fr; width: min(240px, 60%); aspect-ratio: 4 / 3; }
.shb__tool img, .shb__phone img { display: block; width: 20px; height: 20px; }

/* ---------- Store tools: Prepay, Service Plan (.ca), Bundle (.com) ----------
   Tabs in the header; each opens a panel over the finder, under the header, that
   scrolls on its own (the page never does). Content from the live /stores/ pages. */
.tool { position: fixed; top: 56px; left: 0; right: 0; bottom: 0; z-index: 1500; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); }
.tool[hidden] { display: none; }
.tool__in { max-width: 880px; margin: 0 auto; padding: 48px 28px 96px; }
.tool__head { margin-bottom: 40px; }
.tool__head .tool__title { margin: 0 0 12px; font-size: 32px; line-height: 40px; font-weight: 700; }
.tool__head p { margin: 0; max-width: 640px; color: var(--text-weak); font-size: 18px; line-height: 28px; }
.tool__head p b { color: var(--text-strong); font-weight: 600; }
.tool__head--split { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: center; }
.tool__head--split .tool__cta { margin-top: 24px; }
.tool .tool__sub { margin: 0 0 20px; font-size: 20px; line-height: 28px; font-weight: 600; }
.tool__steps { margin: 0 0 32px; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 32px; }
.tool__steps > li { counter-increment: step; position: relative; padding-left: 48px; }
.tool__steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--fill-strong); color: var(--white); font-size: 14px; font-weight: 600; }
.tool__steps > li > b { display: block; min-height: 32px; padding-top: 4px; margin-bottom: 16px; font-size: 18px; line-height: 24px; font-weight: 600; }
.tool__steps p { margin: 0 0 16px; color: var(--text-weak); }
.tool__packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tool__pack { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid var(--stroke-strong); background: var(--white); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.tool__pack input { position: absolute; opacity: 0; pointer-events: none; }
.tool__pack:has(input:checked) { border-color: var(--fill-strong); box-shadow: inset 0 0 0 1px var(--fill-strong); }
.tool__pack:has(input:focus-visible) { box-shadow: var(--focus-ring), inset 0 0 0 1px var(--fill-strong); }
.tool__price { font-size: 24px; line-height: 32px; font-weight: 700; }
.tool__bonus { font-size: 14px; line-height: 20px; color: var(--text-weak); }
.tool__img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.tool__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tool__pair figure { margin: 0; }
.tool__pair img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.tool__pair figcaption { margin-top: 8px; font-size: 14px; line-height: 20px; font-weight: 500; }
.tool__cta { min-width: 200px; }
.tool__note { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--text-weak); }
.tool__note a { color: var(--text-strong); }
.tool__perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0 0 48px; padding: 0; list-style: none; }
.tool__perks li { padding: 24px; background: var(--white); border: 1px solid var(--stroke-weak); border-radius: var(--radius-lg); }
.tool__perks img { display: block; width: 40px; height: 40px; margin-bottom: 16px; }
.tool__perks b { display: block; margin-bottom: 8px; font-weight: 600; }
.tool__perks p { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-weak); }
.tool__faq { margin-top: 48px; }
.tool__q { border-top: 1px solid var(--stroke-weak); }
.tool__q:last-child { border-bottom: 1px solid var(--stroke-weak); }
.tool__q summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 500; cursor: pointer; list-style: none; }
.tool__q summary::-webkit-details-marker { display: none; }
.tool__q summary svg { flex: none; transition: transform .2s cubic-bezier(.2,0,0,1); }
.tool__q[open] summary svg { transform: rotate(180deg); }
.tool__a { padding: 0 0 20px; color: var(--text-weak); font-size: 15px; line-height: 24px; }
.tool__a p { margin: 0 0 12px; }
.tool__a ul { margin: 0 0 12px; padding-left: 20px; }
.tool__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.tool__field { display: flex; flex-direction: column; gap: 8px; max-width: 420px; margin-bottom: 4px; }
.tool__field span { font-size: 14px; line-height: 20px; font-weight: 600; }
.tool__field select { height: 48px; padding: 0 12px; border: 1px solid var(--stroke-strong); background: var(--bg-sunken); color: var(--text-weak); font: inherit; }
.tool__browse { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 16px 12px 12px; border: 1px solid var(--stroke-weak); background: var(--white); color: var(--text-strong); font-weight: 600; text-decoration: none; }
.tool__browse:hover { background: var(--bg-sunken); }
.tool__browse img { display: block; width: 40px; height: 40px; }
.tool-signin { width: min(420px, calc(100vw - 32px)); padding: 32px 24px 24px; border: 0; background: var(--white); color: var(--text-strong); box-shadow: var(--shadow-lg); }
.tool-signin::backdrop { background: rgba(20,22,30,.4); }
.tool-signin .tool__title { margin: 0 0 8px; font-size: 20px; line-height: 28px; font-weight: 600; }
.tool-signin p { margin: 0; color: var(--text-weak); }
.tool-signin .tool__btns .btn { flex: 1; }
.tool-signin__x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; }
@media (max-width: 767px) {
  .tool__in { padding: 32px 16px 64px; }
  .tool__head .tool__title { font-size: 28px; line-height: 36px; }
  .tool__head p { font-size: 16px; line-height: 24px; }
  .tool__head--split { grid-template-columns: 1fr; gap: 24px; }
  .tool__steps > li { padding-left: 44px; }
  .tool__packs { grid-template-columns: 1fr; }
  .tool__pack { flex-direction: row; align-items: baseline; justify-content: space-between; padding: 16px; }
  .tool__perks { grid-template-columns: 1fr; gap: 12px; }
  .tool__cta { width: 100%; }
}
/* Prices in the Services tab (Mehmet, 1 Oct): every service, opening to its options. */
.dp-prices__cols { display: flex; flex-direction: column; gap: 24px; }
.dp-prices h4 { margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 600; }
.dp-prices__list { margin: 0; padding: 0; list-style: none; }
.dp-prices__list > li { border-bottom: 1px solid var(--stroke-weak); }
.dp-prices__list > li:first-child { border-top: 1px solid var(--stroke-weak); }
.dp-prices__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; }
.dp-prices__row span { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 22px; }
.dp-prices__row small, .dp-prices__svc ul small { font-size: 13px; line-height: 18px; color: var(--text-weak); }
.dp-prices__row b { flex: none; font-size: 15px; line-height: 22px; font-weight: 600; }
.dp-prices__svc summary { cursor: pointer; list-style: none; }
.dp-prices__svc summary::-webkit-details-marker { display: none; }
.dp-prices__svc summary svg { flex: none; align-self: center; transition: transform .2s cubic-bezier(.2,0,0,1); }
.dp-prices__svc[open] summary svg { transform: rotate(180deg); }
.dp-prices__svc ul { margin: 0 0 12px; padding: 0 0 0 16px; list-style: none; border-left: 2px solid var(--stroke-weak); }
.dp-prices__svc ul li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0; }
.dp-prices__svc ul span { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 20px; }
.dp-prices__svc ul b { flex: none; font-size: 14px; line-height: 20px; font-weight: 600; }
.dp-prices__note { margin: 12px 0 0; font-size: 13px; line-height: 20px; color: var(--text-weak); }
/* Parking videos: thumbnails that play on the page (Mehmet, 1 Oct). Portrait videos
   (all of Scarborough's) get portrait tiles, four across, with YouTube's black side
   bars cropped off; the label sits under the picture. */
.dp-vids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.dp-vids:has(.dp-vid--tall) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dp-info .dp-vid, .dp-vid { display: flex; flex-direction: column; gap: 8px; color: var(--text-strong); text-decoration: none; }
.dp-vid__pic { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md, 4px); background: var(--neutral-1000); }
.dp-vid--tall .dp-vid__pic { aspect-ratio: 9 / 16; }
.dp-vid__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.dp-vid--tall .dp-vid__pic img { position: absolute; top: 0; left: 50%; width: auto; max-width: none; height: 100%; aspect-ratio: 4 / 3; transform: translateX(-50%); }
.dp-vid:hover .dp-vid__pic img { opacity: .9; }
.dp-vid__play { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: rgba(0,0,0,.6); color: var(--white); }
.dp-vid__label { font-size: 12px; line-height: 16px; font-weight: 500; }
.yt { width: min(960px, calc(100vw - 32px)); padding: 0; border: 0; background: #000; color: #fff; overflow: visible; }
.yt::backdrop { background: rgba(12,12,14,.88); }
.yt__frame { position: relative; aspect-ratio: 16 / 9; }
.yt--short { width: min(400px, calc(100vw - 32px)); }
.yt--short .yt__frame { aspect-ratio: 9 / 16; max-height: calc(100dvh - 120px); }
.yt__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt__t { margin: 0; padding: 12px 16px; font-size: 14px; line-height: 20px; font-weight: 500; }
.yt__x { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: #fff; cursor: pointer; }
/* Services menu groups: For women / At the location (Mehmet, 1 Oct) */
.sf-opt__h { margin: 0; padding: 12px 16px 4px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-weak); }
.sf-opt__h:first-child { padding-top: 4px; }
.sf-opt svg { flex: none; width: 18px; height: 18px; }
.sf-fpop[data-fpop="svc"] { min-width: 248px; }
.sf-fpop[data-fpop="svc"] .sf-opt span { white-space: nowrap; }
/* The info list's row grid (icon column + text) must not reach the video tiles inside it. */
.dp-info .dp-vids > li { display: block; padding: 0; }
.dp-vids { margin-top: 12px; }
/* Video groups: "By car …" / "By TTC …", two portrait tiles each, side by side. */
.dp-vgroup { margin-top: 16px; }
.dp-vgroup__h { margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-strong); }
.dp-vgroup .dp-vids { margin: 0; }
.dp-vgroup .dp-vids:has(.dp-vid--tall) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dp-vid__label { color: var(--text-weak); }
/* Store card chips run the full width of the card, under the name column and the
   Book / Directions buttons, so they sit side by side (Mehmet, 1 Oct). */
.sf-row__chips { grid-column: 1 / -1; margin-top: 0; }
/* Prices as a salon menu (Mehmet, 1 Oct): Men / Women switch, three tiles, one list.
   Without JavaScript both lists show, each with its heading, and every service shows. */
/* Men / Women: plain tabs with an underline, like the store's own tabs (Mehmet, 1 Oct:
   no grey bar). */
.dp-pseg { display: flex; gap: 24px; margin-bottom: 20px; border-bottom: 1px solid var(--stroke-weak); }
.dp-pseg__b { height: 40px; padding: 0; border: 0; background: none; font: 600 15px/20px Poppins, sans-serif; color: var(--text-weak); cursor: pointer; }
.dp-pseg__b:hover { color: var(--text-strong); }
.dp-pseg__b[aria-selected="true"] { color: var(--text-strong); box-shadow: inset 0 -2px 0 var(--fill-strong); }
html:not(.js) .dp-pseg { display: none; }
html.js .dp-ppane[data-off] { display: none; }

.dp-ppane + .dp-ppane { margin-top: 24px; }
.dp-pt-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.dp-pt { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--white); border: 1px solid var(--stroke-weak); border-radius: var(--radius-lg); }
.dp-pt__k { font-size: 13px; line-height: 18px; color: var(--text-weak); }
.dp-pt__v { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--text-strong); }
.dp-pt__s { font-size: 12px; line-height: 16px; color: var(--text-weak); }
.dp-prices h4 { margin: 0 0 4px; font-size: 14px; line-height: 20px; font-weight: 600; }
.dp-plist { margin: 0; padding: 0; list-style: none; }
.dp-plist li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--stroke-weak); }
.dp-plist span { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 22px; }
.dp-plist small { font-size: 13px; line-height: 18px; color: var(--text-weak); }
.dp-plist b { flex: none; font-size: 15px; line-height: 22px; font-weight: 600; }
html.js .dp-plist.is-collapsed li:nth-child(n+7) { display: none; }
html:not(.js) .dp-plist__more { display: none; }
.dp-plist__more { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-weight: 600; }
@media (max-width: 420px) { .dp-pt { padding: 12px; } .dp-pt__v { font-size: 20px; line-height: 28px; } }
.dp-plist__more { padding: 0; border: 0; background: none; color: var(--text-strong); font: 600 14px/20px Poppins, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
html.js .dp-ppane + .dp-ppane { margin-top: 0; }
/* Price accordions: Installation, Maintenance, Other services, Consultation (Mehmet, 1 Oct). */
.dp-paccs { border-top: 1px solid var(--stroke-weak); }
.dp-pacc { border-bottom: 1px solid var(--stroke-weak); }
.dp-pacc summary { display: flex; align-items: center; gap: 12px; min-height: 56px; cursor: pointer; list-style: none; font-size: 16px; line-height: 24px; font-weight: 600; }
.dp-pacc summary::-webkit-details-marker { display: none; }
.dp-pacc summary span { flex: 1; }
.dp-pacc summary b { font-weight: 600; }
.dp-pacc summary svg { flex: none; transition: transform .2s cubic-bezier(.2,0,0,1); }
.dp-pacc[open] summary svg { transform: rotate(180deg); }
.dp-pacc .dp-plist { margin: 0 0 12px; }
.dp-pacc .dp-plist li { padding: 8px 0; border-bottom: 0; }
.dp-pacc .dp-plist span { font-size: 14px; line-height: 20px; }
.dp-pacc .dp-plist b { font-size: 14px; line-height: 20px; }
/* Services tab: the tabs' own line is enough above Prices (Mehmet, 1 Oct: one line, not two). */
#dpp-services > .dp-prices { border-top: 0; }
/* Services menu: every icon in the same 24 × 18 box, so the labels line up (the
   Pickup point icon is wider than the others; Mehmet, 1 Oct). */
.sf-opt img, .sf-opt img[src$="type-pickup-point.png"] { width: 24px; height: 18px; object-fit: contain; flex: none; }
/* Labels that would cover another label hide until there is room (hub-map.js);
   hovering the pin still shows its name. */
.salon-icon.is-crowded .salon-card { opacity: 0; pointer-events: none; }
.leaflet-salon-marker:hover .salon-icon.is-crowded .salon-card { opacity: 1; }
.leaflet-salon-marker:hover { z-index: 1000 !important; }
/* Phones: a filter menu is a drawer from the bottom over a blurred page (Mehmet, 1 Oct). */
.sf-drawer__head { display: none; }
.sf-drawer-scrim { position: fixed; inset: 0; z-index: 2400; background: rgba(20,22,30,.32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .2s cubic-bezier(.2,0,0,1); }
.sf-drawer-scrim.is-on { opacity: 1; }
.sf-fpop.sf-fpop--drawer { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 2500; min-width: 0; max-height: 80dvh; overflow-y: auto; padding: 0 0 calc(16px + env(safe-area-inset-bottom)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--white); box-shadow: var(--shadow-lg); transform: translateY(100%); transition: transform .28s cubic-bezier(.2,0,0,1); }
.sf-fpop.sf-fpop--drawer.is-on { transform: none; }
.sf-fpop--drawer .sf-drawer__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 8px 0 20px; margin-bottom: 8px; background: var(--white); border-bottom: 1px solid var(--stroke-weak); }
.sf-fpop--drawer .sf-drawer__head b { font-size: 16px; line-height: 24px; font-weight: 600; }
.sf-drawer__x { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--text-strong); cursor: pointer; }
.sf-fpop--drawer .sf-opt { min-height: 48px; padding: 0 20px; font-size: 16px; line-height: 24px; }
.sf-fpop--drawer .sf-opt input { width: 20px; height: 20px; }
html.sf-drawer-open, html.sf-drawer-open body { overflow: hidden; }
.sf-drawer__foot { display: none; }
.sf-fpop--drawer .sf-drawer__foot { position: sticky; bottom: 0; display: block; padding: 12px 20px 0; background: var(--white); }
/* Phone sheets: a new store's content fades in (sheet.js). */
@keyframes dpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sf--sheet .dp.dp--in { animation: dpIn .26s cubic-bezier(.2,0,0,1); }
@media (prefers-reduced-motion: reduce) { .sf--sheet .dp.dp--in { animation: none; } }
/* Phones and tablets: Clear first in the filter row, so it is never off screen. */
@media (max-width: 767px) { .sf-filters .sf-fclear { order: -1; } }
/* Map labels beside their pins, as light text with a white halo (Mehmet, 1 Oct: the cards
   were heavy, floated away from their pins and covered other pins). The selected store
   keeps its card with the photo above the pin. */
.leaflet-container .salon-icon:not(.is-selected) .salon-card { left: calc(50% + 24px); bottom: auto; top: -16px; width: max-content; max-width: 136px; overflow: visible; background: none; border-radius: 0; box-shadow: none; transform: translateY(-50%); transition: opacity .15s; }
.leaflet-container .salon-icon:not(.is-selected) .salon-card-name { padding: 0; font: 600 13px/16px var(--font); color: var(--text-strong); text-align: left; text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 1px 4px #fff; }
.leaflet-salon-marker:hover .salon-icon:not(.is-selected) .salon-card, .salon-icon.is-hover:not(.is-selected) .salon-card { transform: translateY(-50%); box-shadow: none; }
.leaflet-salon-marker:hover .salon-icon:not(.is-selected) .salon-card-name, .salon-icon.is-hover:not(.is-selected) .salon-card-name { text-decoration: underline; text-underline-offset: 3px; }
/* With flags showing (more than one country), leave room for the flag at the pin's top right. */
.sf-map:not(.sf-map--one) .salon-icon:not(.is-selected) .salon-card { left: calc(50% + 32px); }
.sf-map--one .pin-flag-disc { display: none; }
/* A label whose right side is taken sits to the left of its pin instead (hub-map.js). */
.leaflet-container .salon-icon.is-left:not(.is-selected) .salon-card { left: auto; right: calc(50% + 24px); }
.leaflet-container .salon-icon.is-left:not(.is-selected) .salon-card-name { text-align: right; }

/* FAQ, calmer (Mehmet, 1 Oct: "too crowded, I cannot read it"): short questions in
   regular-weight 16px; local questions, then general ones. */
.faq-wrap { display: flex; flex-direction: column; gap: 24px; max-width: 820px; }
.faq summary { min-height: 52px; padding: 12px 0; gap: 16px; font: 500 16px/24px var(--font); color: var(--text-strong); }
.faq summary .ico { color: var(--text-weak); flex: none; }
@media (hover: hover) { .faq summary:hover > .faq__q { text-decoration: underline; text-underline-offset: 4px; } }
.faq details p { padding: 0 32px 16px 0; font-size: 15px; line-height: 24px; }
.dp .faq summary, .sf-detail .faq summary { font-size: 15px; }


/* The SEO line under the store's name (SEO team, 2 Oct): quiet, one line. */
.dp-kw { display: block; margin-top: 4px; font: 400 14px/20px var(--font); letter-spacing: 0; color: var(--text-weak); }

/* SEO outline (2 Oct): visible section headings in the store panel. */
.dp-h2 { margin: 24px 0 8px; font-size: 18px; line-height: 26px; font-weight: 600; }
.block .dp-h2 { margin-top: 0; }
.dp-prices > h2 { font-size: 18px; line-height: 26px; font-weight: 600; }
.dp-ppane__h { margin: 0 0 12px; font-size: 16px; line-height: 24px; font-weight: 600; }
.faq summary .faq__q { margin: 0; font: inherit; color: inherit; }

/* Accordions (location.js eases the height): the chevron turns with it, both ways. */
details > summary .ico, details > summary > svg { transition: transform .24s cubic-bezier(.2,0,0,1); }
details.is-closing > summary .ico, details.is-closing > summary > svg { transform: none !important; }
@media (prefers-reduced-motion: reduce) { details > summary .ico, details > summary > svg { transition: none; } }

/* What a location offers, as plain text, not boxes (Mehmet, 2 Oct: the grey chips
   looked like the Directions / Call buttons, so people would try to tap them).
   Small icon and grey text per item, like the category line on Google Maps; the icons
   keep the items apart (a dot would start a wrapped line). */
.type-chips, .dp-head .type-chips, .sf-detail .dp-head .type-chips { gap: 4px 16px; align-items: center; }
.type-chips li, .dp-head .type-chips li, .sf-detail .dp-head .type-chips li,
.sf-row--link:hover .type-chips li, .sf-row.is-active .type-chips li {
  height: auto; min-height: 20px; padding: 0; gap: 4px; background: none; border: 0; box-shadow: none;
  font-size: 13px; line-height: 20px; font-weight: 400; color: var(--text-weak); cursor: default; }
.type-chips li img, .type-chips li svg,
.dp-head .type-chips li img, .sf-detail .dp-head .type-chips li img { width: 16px; height: 16px; opacity: .8; }

/* Tab underline that slides between tabs (location.js adds it; without JavaScript the
   selected tab keeps its own underline). */
.dp-pseg.has-ink { position: relative; } /* .dp-tabs is already sticky, which positions the underline */
.tab-ink { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--fill-strong); pointer-events: none; }
.dp-tabs.has-ink .dp-tab[aria-selected="true"] { border-bottom-color: transparent; }
.dp-pseg.has-ink .dp-pseg__b[aria-selected="true"] { box-shadow: none; }


/* Stylist photo: tap to see it larger (Mehmet, 2 Oct). */
.sty__zoom { display: block; width: 136px; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-lg); }
.sty__zoom > img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); box-sizing: border-box; border: 1px solid var(--stroke-weak); }
.sty__zoom:focus-visible { outline: 2px solid var(--fill-strong); outline-offset: 2px; }
@media (max-width: 380px) { .sty__zoom { width: 112px; } }
.photo-zoom { width: min(480px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; background: none; overflow: visible; }
.photo-zoom::backdrop { background: rgba(20, 22, 30, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.photo-zoom img { display: block; width: 100%; max-height: calc(100dvh - 32px); object-fit: contain; border-radius: var(--radius-lg); background: var(--white); }
.photo-zoom__x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: var(--white); color: var(--text-strong); cursor: pointer; box-shadow: var(--shadow-sm); }
.photo-zoom[open] { animation: photoZoomIn .24s cubic-bezier(.2,0,0,1); }
.photo-zoom[open]::backdrop { animation: photoZoomFade .24s cubic-bezier(.2,0,0,1); }
@keyframes photoZoomIn { from { opacity: 0; transform: scale(.96); } }
@keyframes photoZoomFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .photo-zoom[open], .photo-zoom[open]::backdrop { animation: none; } }

/* Action buttons and Book online above the tabs, on every tab (2 Oct). */
.dp-cta > .dp-quick + *, .dp-cta > .dp-cbnudge + .dp-book { margin-top: 16px; }
.sf-detail .dp-cta { margin: 0 24px; }
.sf-detail .dp-cta > .dp-quick { padding-top: 24px; } /* a little more room under the name and what it offers (Mehmet, 2 Oct), instead of a line */
@media (max-width: 767px) { .sf-detail .dp-cta { margin: 0 16px; } }
@media (max-width: 767px) { .sf--sheet .dp-cta > .dp-quick { padding-top: 20px; } .sf--sheet .dp-cta > .dp-quick + * { margin-top: 12px; } }
.dp-cta { display: block; }
/* The address list starts right under the tabs now (buttons moved above them, 2 Oct):
   no second line there; the tabs' own line is enough. */
.dp-pane > h2.sr:first-child + .dp-info, .dp-pane > .dp-info:first-child { border-top: 0; }

/* Desktop: a tab on the side panel's edge hides the list (and the store panel) so the
   map fills the window, and brings them back (Mehmet, 2 Oct). */
.sf-collapse { display: none; }
@media (min-width: 768px) {
  .sf-collapse { position: absolute; top: 50%; left: var(--list-w); z-index: 6; display: grid; place-items: center; width: 24px; height: 48px; margin-top: -24px; padding: 0; border: 0; border-left: 1px solid var(--stroke-weak); background: var(--white); color: var(--text-strong); box-shadow: 4px 0 12px rgba(21,24,40,.12); cursor: pointer; transition: left .38s cubic-bezier(.22,1,.36,1); }
  .sf-collapse:hover { background: var(--bg-sunken); }
  .sf-collapse:focus-visible { outline: 2px solid var(--fill-strong); outline-offset: 2px; }
  .sf-collapse .ico { transition: transform .24s cubic-bezier(.2,0,0,1); }
  .sf--detail .sf-collapse { left: var(--detail-w); }
  .sf-panel { transition: transform .38s cubic-bezier(.22,1,.36,1); }
  .sf--collapsed .sf-panel { transform: translateX(-100%); visibility: hidden; transition: transform .38s cubic-bezier(.22,1,.36,1), visibility 0s .38s; }
  .sf--collapsed .sf-detail { transform: translateX(-100%); }
  .sf--collapsed .sf-collapse { left: 0; }
  .sf--collapsed .sf-collapse .ico { transform: rotate(180deg); }
  .sf--collapsed .sf-filters, .sf--collapsed.sf--detail .sf-filters { left: 36px; }
  .sf-filters { transition: left .38s cubic-bezier(.22,1,.36,1); }
}
@media (min-width: 1280px) {
  .sf--detail .sf-collapse { left: calc(var(--list-w) + var(--detail-w)); }
  .sf--collapsed .sf-detail { transform: translateX(calc(-100% - var(--list-w))); }
  .sf--collapsed.sf--detail .sf-collapse { left: 0; }
}
@media (prefers-reduced-motion: reduce) { .sf-collapse, .sf-panel, .sf-filters, .sf-collapse .ico { transition: none; } }

/* Photo tiles sit side by side from the left; they never stretch apart (2 Oct). */
.dp-photos { justify-content: start; }

/* iPads (768–1023px) get the desktop layout, as Google Maps does on an iPad (Mehmet,
   2 Oct): the side panel takes the left half, the store page covers the list, and the
   map fills the rest. Phones (under 768px) keep the bottom sheet. */
@media (min-width: 768px) and (max-width: 1023px) {
  .sf { --list-w: 50vw; --detail-w: 50vw; }
  /* The filter chips: one row that scrolls sideways over the map, not three. */
  .sf-filters, .sf--detail .sf-filters { right: 56px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; pointer-events: auto; }
  .sf-filters::-webkit-scrollbar { display: none; }
  .sf-filters > * { flex-shrink: 0; }
  /* Header: the phone number stays on one line. */
  .shb__end { gap: 24px; }
  .shb__phone span { white-space: nowrap; }
}

/* Under the last store when filters are on: how many show, and Clear filters (2 Oct). */
.sf-filtered { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 28px 32px; text-align: center; }
.sf-filtered[hidden] { display: none; }
.sf-filtered__n { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-weak); }
.sf-filtered__btn { gap: 8px; }
@media (max-width: 767px) { .sf--sheet .sf-panel .sf-filtered { padding-left: 16px; padding-right: 16px; } }

/* Under the price tiles: the prices are for our systems; another brand's costs more (5 Oct). */
.dp-pt-note { margin: 12px 0 0; font-size: 13px; line-height: 20px; color: var(--text-weak); }

/* Where it is, for stores that share a city: a short grey line under the address, and on
   the other store's card in "Other locations near" (SEO lead and Mehmet, 6 Oct). */
.dp-near { display: block; font-size: 14px; line-height: 20px; color: var(--text-weak); }
.near .near__area { font-size: 13px; line-height: 20px; color: var(--text-weak); }