/* Customer experience: Masa's existing burgundy palette, with a service-first layout. */
.masa-salon-page { font-family: "Masa Salon DM Sans", Tahoma, Arial, sans-serif; color: var(--sl-ink); }
.masa-salon-page .sl-app { --sl-container-max: 1280px; --sl-gutter: 20px; --sl-header-offset: 24px; --sl-radius: 16px; --sl-sm-radius: 10px; font-size: 15px; padding-block-end: 40px; }
.masa-salon-page .sl-container { --sl-container-max: 1280px; --sl-gutter: 20px; padding-block: 36px 48px; }
.masa-salon-page .sl-app .sl-h1, .masa-salon-page .sl-app main > h1 { margin-block: 0 24px; font-family: var(--sl-font); font-size: clamp(30px, 3.2vw, 44px); font-weight: 650; letter-spacing: -.035em; line-height: 1.15; }
.masa-salon-page .sl-app .sl-h2 { font-family: var(--sl-font); font-size: 24px; line-height: 1.25; letter-spacing: -.025em; font-weight: 650; }
.masa-salon-page .sl-app :is(input, select, textarea) { scroll-margin-block: 32px; }
.masa-salon-page .sl-app :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--sl-brand); outline-offset: 4px; }
.masa-salon-page .sl-app .sl-empty { max-inline-size: 65ch; padding: 24px; border: 1px dashed var(--sl-line); border-radius: 12px; background: var(--sl-surface); color: var(--sl-muted-surface); }
.masa-salon-page .sl-app .sl-btn { min-block-size: 46px; border-radius: 10px; font-size: 14px; line-height: 1.3; text-align: center; }
.masa-salon-page .sl-app .sl-btn-secondary:hover { background: var(--sl-brand-soft); border-color: var(--sl-brand); }
.masa-salon-page .sl-app .sl-discover-submit.sl-btn { position: static; inline-size: auto; block-size: auto; min-inline-size: 90px; min-block-size: 46px; padding: 12px 22px; border: 1px solid var(--sl-brand); overflow: visible; clip-path: none; white-space: normal; }
/* Compact shared header. These overrides apply to the Salon vertical only. */
body .masa-salon-page .masa-header-salon { border-block-end: 1px solid var(--sl-line); padding-block: 12px; }
body .masa-salon-page .masa-header-salon > .container { width: min(100%, 1280px); max-width: none; margin-inline: auto; padding-inline: 20px; }
body .masa-salon-page .masa-header-salon .masa-header-grid { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 12px; align-items: center; }
body .masa-salon-page .masa-header-salon .navbar-brand { grid-column: 1; grid-row: 1; margin: 0; padding: 0; }
body .masa-salon-page .masa-header-salon .navbar-brand img { inline-size: 78px; block-size: auto; }
body .masa-salon-page .masa-header-salon .masa-header-actions { grid-column: 2; grid-row: 1; justify-self: end; }
body .masa-salon-page .masa-header-salon .masa-mode-switch { grid-column: 1; grid-row: 2; padding: 3px; border-radius: 10px; justify-self: start; }
body .masa-salon-page .masa-header-salon .masa-mode-switch a { padding: 8px 10px; min-block-size: 38px; border-radius: 7px; font-size: 12px; }
body .masa-salon-page .masa-header-salon .masa-mode-switch svg { display: none; }
body .masa-salon-page .masa-header-salon .masa-header-search { grid-column: 2; grid-row: 2; min-inline-size: 0; }
body .masa-salon-page .masa-header-salon .masa-header-search :is(input, button) { min-height: 42px; }
/* The legacy Products header declares an important icon gap; keep the Salon tap targets compact. */
body .masa-salon-page .masa-header-salon .user-icons { gap: 0 !important; }
body .masa-salon-page .masa-header-salon .user-icons > div > a { min-inline-size: 38px; padding: 7px; }
body .masa-salon-home .masa-header-salon .masa-header-search { display: none; }
body .masa-salon-home .masa-header-salon .masa-mode-switch { grid-column: 1 / -1; }
.masa-salon-page .sl-app .sl-wide-nav { --sl-container-max: 1280px; --sl-gutter: 20px; gap: 28px; min-block-size: 58px; block-size: 58px; }
.masa-salon-page .sl-app .sl-wide-nav > a { font-size: 14px; font-weight: 600; }
.masa-salon-page .sl-app .sl-tabbar { box-shadow: 0 -4px 20px rgb(21 21 24 / 4%); }
/* Discovery: a composed introduction and a visible search action, then real catalogue data. */
.masa-salon-page .sl-discover { gap: 28px; }
.masa-salon-page .sl-discover-heading { margin: 0; }
.masa-salon-page .sl-discover-heading p { margin-block: 12px 0; font-size: 17px; max-inline-size: 54ch; }
.masa-salon-page .sl-home-intro { position: relative; padding: 36px 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; background: var(--sl-brand-soft); border-radius: 20px; }
.masa-salon-page .sl-home-intro .sl-h1 { font-family: var(--sl-display); font-weight: 400; font-size: clamp(44px, 6vw, 76px); max-inline-size: 12ch; margin: 0; letter-spacing: -.035em; }
.masa-salon-page .sl-home-intro-copy { max-inline-size: 54ch; }
.masa-salon-page .sl-home-intro-copy > p { margin-block: 16px 0; color: var(--sl-muted-surface); font-size: 17px; }
.masa-salon-page .sl-home-search { padding: 24px; border-radius: 14px; background: var(--sl-page); align-self: center; display: grid; gap: 16px; box-shadow: 0 8px 28px rgb(118 32 51 / 5%); }
.masa-salon-page .sl-discover-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 0; align-items: end; }
.masa-salon-page .sl-discover-search > label { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--sl-ink); }
.masa-salon-page .sl-discover-search > input { min-inline-size: 0; inline-size: 100%; min-block-size: 48px; border-radius: 10px; padding: 12px; border: 1px solid var(--sl-line); background: var(--sl-page); font: inherit; }
.masa-salon-page .sl-home-search .sl-location { margin: 0; }
.masa-salon-page .sl-home-search .sl-locchip { min-block-size: 44px; inline-size: 100%; justify-content: start; border: 0; border-block-start: 1px solid var(--sl-line); border-radius: 0; padding: 16px 0 0; }
.masa-salon-page .sl-discover-section > h2, .masa-salon-page .sl-discover-section-title { margin-block: 8px 16px; font-family: var(--sl-font); font-size: 26px; font-weight: 650; letter-spacing: -.03em; }
.masa-salon-page .sl-discover-categories ul { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0; list-style: none; }
.masa-salon-page .sl-discover-categories li { min-inline-size: 0; }
.masa-salon-page .sl-discover-categories a { flex-direction: row; justify-content: start; min-block-size: 64px; min-inline-size: 150px; padding: 12px 20px; gap: 12px; border-radius: 12px; background: var(--sl-page); font-weight: 600; }
.masa-salon-page .sl-discover-categories img { inline-size: 40px; block-size: 40px; }
.masa-salon-page .sl-discover-category-cta { display: none; }
.masa-salon-page .sl-discover-categories a:hover { border-color: var(--sl-brand); background: var(--sl-brand-soft); }
.masa-salon-page .sl-discover-grid { list-style: none; padding: 0; margin: 0; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.masa-salon-page .sl-discover-rail { display: grid; overflow: visible; scroll-snap-type: none; }
.masa-salon-page .sl-discover-card { padding: 0 0 16px; border: 0; border-block-end: 1px solid var(--sl-line); border-radius: 0; overflow: visible; background: transparent; box-shadow: none; }
.masa-salon-page .sl-discover-card > a { display: block; overflow: hidden; border-radius: 14px; }
.masa-salon-page .sl-discover-card img { aspect-ratio: 4 / 3; border-radius: 14px; }
.masa-salon-page .sl-discover-card .sl-discover-media-ph { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 14px; background: var(--sl-brand-soft); color: var(--sl-brand); padding: 24px; }
.masa-salon-page .sl-discover-card .sl-discover-media-ph::after { content: none; }
.masa-salon-page .sl-discover-card .sl-discover-media-ph svg { inline-size: 48px; block-size: 48px; stroke-width: 1; opacity: .65; }
.masa-salon-page .sl-discover-monogram { display: grid; place-items: center; inline-size: 88px; block-size: 88px; border: 1px solid currentColor; border-radius: 50%; font-family: var(--sl-display); font-size: 54px; line-height: 1; font-weight: 400; opacity: .8; }
.masa-salon-page .sl-discover-card[data-target-kind=service]:has(.sl-discover-media-ph) > a { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 16px; align-items: center; }
.masa-salon-page .sl-discover-card[data-target-kind=service] .sl-discover-media-ph { inline-size: 64px; block-size: 64px; padding: 16px; order: 0; }
.masa-salon-page .sl-discover-card[data-target-kind=service] .sl-discover-media-ph svg { inline-size: 28px; block-size: 28px; }
.masa-salon-page .sl-discover-card[data-target-kind=service]:has(.sl-discover-media-ph) > a > h3 { margin: 0; order: 0; }
.masa-salon-page .sl-discover-card h3 { font-size: 18px; font-weight: 650; line-height: 1.35; margin-block: 16px 8px; letter-spacing: -.015em; }
.masa-salon-page .sl-discover-card p { margin-block: 5px; font-size: 14px; }
.masa-salon-page .sl-discover-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: 14px; }
.masa-salon-page .sl-discover-actions > a:first-child { min-block-size: 40px; min-inline-size: 0; padding: 8px 0; border: 0; border-radius: 0; background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.masa-salon-page .sl-discover-save { margin: 0; }
.masa-salon-page .sl-discover-actions .sl-discover-heart { display: inline-flex; min-inline-size: 40px; inline-size: 40px; min-block-size: 40px; padding: 8px; border-radius: 50%; border-color: var(--sl-line); }
.masa-salon-page .sl-discover-duo { gap: 24px; }
.masa-salon-page .sl-discover-section-title:has(+ .sl-discover-categories) { margin-block-end: -12px; }
.masa-salon-page .sl-discover-duo-card { padding: 28px; border-radius: 16px; border: 0; background: var(--sl-surface); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.masa-salon-page .sl-discover-duo-card h2 { font-family: var(--sl-display); font-size: 32px; font-weight: 400; margin: 0; }
.masa-salon-page .sl-discover-toolbar { padding: 0 0 20px; border-block-end: 1px solid var(--sl-line); gap: 20px; }
.masa-salon-page .sl-discover-toolbar .sl-discover-search { max-inline-size: 720px; }
.masa-salon-page .sl-discover-types { display: flex; flex-wrap: wrap; gap: 8px; }
.masa-salon-page .sl-discover-filter-panel { background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: 14px; padding: 0; overflow: hidden; }
.masa-salon-page .sl-discover-filter-panel > summary { padding: 16px 20px; cursor: pointer; font-weight: 600; }
.masa-salon-page .sl-discover-filters { padding: 0 20px 20px; }
.masa-salon-page .sl-discover-filters > fieldset { border: 0; margin: 0; padding: 0; gap: 16px; }
.masa-salon-page .sl-discover-resultsbar { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: end; margin-block: 0 20px; }
.masa-salon-page .sl-discover-sortform { display: flex; gap: 8px; align-items: end; }
.masa-salon-page .sl-discover-hero { min-block-size: 160px; padding: 28px; border-radius: 16px; gap: 16px; }
.masa-salon-page .sl-discover-hero h2 { font-size: 34px; }
/* A salon footer, with relevant routes rather than Products newsletter placeholders. */
.sl-customer-footer { border-block-start: 1px solid var(--sl-line); background: var(--sl-surface); font-family: "Masa Salon DM Sans", Tahoma, Arial, sans-serif; }
.sl-customer-footer-inner { inline-size: min(100%, 1280px); margin-inline: auto; padding: 36px 20px; display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: center; }
.sl-customer-footer-brand img { display: block; max-inline-size: 104px; block-size: auto; }
.sl-customer-footer-brand p { color: var(--sl-muted-surface); font-size: 14px; margin-block: 16px 0; }
.sl-customer-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.sl-customer-footer nav a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--sl-brand); font-size: 14px; text-decoration: none; }
.sl-customer-footer a:hover { text-decoration: underline; }
@media (min-width: 768px) {
 .masa-salon-page .sl-app, .masa-salon-page .sl-container, .masa-salon-page .sl-app .sl-wide-nav { --sl-gutter: 32px; }
 .masa-salon-page .sl-app { padding-block-end: 0; }
 .masa-salon-page .sl-home-intro { grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); padding: 44px 36px; gap: 36px; min-block-size: 340px; }
 .masa-salon-page .sl-discover-categories[data-categories-kind=categories] ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
 .masa-salon-page .sl-discover-categories[data-categories-kind=categories] a { flex-direction: column; padding: 24px; min-block-size: 180px; }
 .masa-salon-page .sl-discover-categories[data-categories-kind=categories] .sl-discover-category-cta { display: block; font-weight: 400; font-size: 13px; color: var(--sl-muted-surface); }
 .sl-customer-footer-inner { padding-inline: 32px; }
}
@media (min-width: 768px) {
 body .masa-salon-page .masa-header-salon > .container { padding-inline: 32px; }
 body .masa-salon-page .masa-header-salon .masa-header-grid { grid-template-columns: 90px auto minmax(140px,1fr) auto; gap: 16px; }
 body .masa-salon-page .masa-header-salon .masa-mode-switch { grid-column: 2; grid-row: 1; }
 body .masa-salon-page .masa-header-salon .masa-header-search { grid-column: 3; grid-row: 1; }
 body .masa-salon-page .masa-header-salon .masa-header-actions { grid-column: 4; grid-row: 1; }
 body .masa-salon-home .masa-header-salon .masa-header-grid { grid-template-columns: 100px minmax(0,1fr) auto; }
 body .masa-salon-home .masa-header-salon .masa-header-actions { grid-column: 3; }
 body .masa-salon-page .masa-header-salon .masa-mode-switch a { font-size: 13px; padding-inline: 14px; }
}
@media (min-width: 1001px) { .masa-salon-page .sl-app, .masa-salon-page .sl-container, .masa-salon-page .sl-app .sl-wide-nav { --sl-gutter: 40px; } .masa-salon-page .sl-discover-rail { grid-template-columns: repeat(4,minmax(0,1fr)); } .sl-customer-footer-inner { padding-inline: 40px; } }
@media (max-width: 767px) {
 .masa-salon-page .sl-app { padding-block-end: calc(76px + env(safe-area-inset-bottom)); }
 .masa-salon-page .sl-container { padding-block: 28px 36px; }
 .masa-salon-page .sl-home-intro { padding: 28px 20px; gap: 28px; }
 .masa-salon-page .sl-home-search { padding: 18px; }
 .masa-salon-page .sl-discover-search { grid-template-columns: minmax(0,1fr); }
 .masa-salon-page .sl-discover-search .sl-btn { inline-size: 100%; }
 .masa-salon-page .sl-discover-rail { display: flex; overflow-x: auto; scroll-snap-type: inline proximity; padding-block-end: 16px; }
 .masa-salon-page .sl-discover-rail > li { flex: 0 0 82%; min-inline-size: 0; scroll-snap-align: start; }
 .masa-salon-page .sl-discover-duo-card { padding: 24px; }
 .masa-salon-page .sl-discover-sortform { inline-size: 100%; flex-wrap: wrap; }
 .masa-salon-page .sl-discover-sortform > .sl-field { flex: 1; }
 .sl-customer-footer-inner { padding-block-end: calc(100px + env(safe-area-inset-bottom)); }
}