/* Termin experience. Shared surfaces; service colour is always paired with a name and icon.

   Nothing from the design system is declared again here.

   This file loads after app.css and used to redeclare fourteen of its tokens on the
   same bare :root - the neutrals, the ink, two radii, the container width and two of
   the three shadows. Every one of them silently won, so app.css documented a palette
   and a geometry that no screen has ever rendered, and the shadow ladder ended up with
   its largest step less blurred than its middle one. The values that were rendering
   now live in app.css, where the design system is written; what is left below is the
   only thing that was ever this file's own. */
:root {
    /* The chip for a category nobody anticipated. It is the brand tint, so an
       unknown service reads as belonging to the product rather than to a trade. */
    --category-bg: #DEF1F3;
    --category-ink: #1F6373;
}
[data-theme="hair"] { --category-bg: #EBEDF9; --category-ink: #574984; }
[data-theme="nails"] { --category-bg: #FBEAF0; --category-ink: #A03964; }
[data-theme="physio"] { --category-bg: #E3F1FC; --category-ink: #22658E; }
[data-theme="wellness"] { --category-bg: #E6F3E8; --category-ink: #396F46; }
[data-theme="barber"] { --category-bg: #F3ECE3; --category-ink: #805A35; }
[data-theme="beauty"] { --category-bg: #FCECE4; --category-ink: #984B2C; }
[data-theme="fitness"] { --category-bg: #EEF2D9; --category-ink: #55691B; }

/* The salon's own page takes the colour of its trade, and only there.

   The seven lines above tint one chip. These tint the page: on a salon profile the brand
   tokens themselves are redefined, so the service picker, the booking button and every
   hover belong to the trade rather than to the product. The selector is
   .provider-profile[data-theme] and not the bare attribute, on purpose - the same attribute
   rides on directory cards and favourite tiles, and a listing of twenty salons whose buttons
   are twenty different colours is harder to read, not more personal. The header and the
   footer sit outside <main>, so they stay the product's in every case.

   The values are not eyeballed. Each one reproduces the ratios measured for the turquoise in
   app.css: white on --c-brand 4.72, --c-brand-dark on white 7.67, the same on the tint 6.57,
   and the step from --c-brand to --c-brand-dark 1.62 - that last one being what makes a hover
   visible rather than merely different. They were solved for lightness at each trade's own
   hue, and the worst of the seven lands within 0.15 of every target. Re-derive rather than
   nudge one by hand: a value picked by eye here fails quietly, on somebody else's screen.

   --c-brand-light, and --c-brand in dark mode, are the category tint and ink from the block
   above, reused rather than picked again, so a trade has one colour and not two.
   --c-brand-vivid is deliberately absent: it is read only by the footer and the marketing
   banner, and both of those are outside <main>. */
.provider-profile[data-theme="hair"] { --c-brand: #7969AC; --c-brand-dark: #584A85; --c-brand-light: #EBEDF9; }
.provider-profile[data-theme="nails"] { --c-brand: #BE4A7B; --c-brand-dark: #8E3258; --c-brand-light: #FBEAF0; }
.provider-profile[data-theme="physio"] { --c-brand: #297AAB; --c-brand-dark: #1E587C; --c-brand-light: #E3F1FC; }
.provider-profile[data-theme="wellness"] { --c-brand: #428051; --c-brand-dark: #305D3A; --c-brand-light: #E6F3E8; }
.provider-profile[data-theme="barber"] { --c-brand: #976A3F; --c-brand-dark: #6D4D2D; --c-brand-light: #F3ECE3; }
.provider-profile[data-theme="beauty"] { --c-brand: #B55934; --c-brand-dark: #834126; --c-brand-light: #FCECE4; }
.provider-profile[data-theme="fitness"] { --c-brand: #647C20; --c-brand-dark: #495A17; --c-brand-light: #EEF2D9; }
@media (prefers-color-scheme: dark) {
    :root { --category-bg: #173840; --category-ink: #A4D6DC; }
    [data-theme="hair"] { --category-bg: #303047; --category-ink: #C8BDF2; }
    [data-theme="nails"] { --category-bg: #402938; --category-ink: #F5B6CC; }
    [data-theme="physio"] { --category-bg: #193848; --category-ink: #9ED6F9; }
    [data-theme="wellness"] { --category-bg: #213B2D; --category-ink: #A6DDB2; }
    [data-theme="barber"] { --category-bg: #3B3329; --category-ink: #E7C8A3; }
    [data-theme="beauty"] { --category-bg: #422E27; --category-ink: #F2B9A1; }
    [data-theme="fitness"] { --category-bg: #343C21; --category-ink: #D0DE94; }

    /* Dark mode swaps the pair over: the button becomes the light tone and carries dark text,
       so --c-brand-ink stops being white and becomes the trade's own darkest tone. The hover
       moves lighter rather than darker, exactly as the product's own does. */
    .provider-profile[data-theme="hair"] { --c-brand: #C8BDF2; --c-brand-dark: #E2DCF8; --c-brand-light: #303047; --c-brand-ink: #2A1773; }
    .provider-profile[data-theme="nails"] { --c-brand: #F5B6CC; --c-brand-dark: #FADCE6; --c-brand-light: #402938; --c-brand-ink: #5A0C28; }
    .provider-profile[data-theme="physio"] { --c-brand: #9ED6F9; --c-brand-dark: #DAEFFD; --c-brand-light: #193848; --c-brand-ink: #053553; }
    .provider-profile[data-theme="wellness"] { --c-brand: #A6DDB2; --c-brand-dark: #DEF2E3; --c-brand-light: #213B2D; --c-brand-ink: #163A1E; }
    .provider-profile[data-theme="barber"] { --c-brand: #E7C8A3; --c-brand-dark: #F5E8D8; --c-brand-light: #3B3329; --c-brand-ink: #432C11; }
    .provider-profile[data-theme="beauty"] { --c-brand: #F2B9A1; --c-brand-dark: #F8DCD0; --c-brand-light: #422E27; --c-brand-ink: #4B1E0A; }
    .provider-profile[data-theme="fitness"] { --c-brand: #D0DE94; --c-brand-dark: #F3F7E4; --c-brand-light: #343C21; --c-brand-ink: #333B12; }
}

body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { letter-spacing: -.045em; text-wrap: balance; }
h1 { font-weight: 650; }
h2 { font-weight: 600; }
.icon { width: 24px; height: 24px; flex-shrink: 0; vertical-align: middle; }
.text-brand { color: var(--c-brand); }
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; margin: 0 0 16px; color: var(--c-text-muted); }
.live-dot { width: 7px; height: 7px; flex: 0 0 7px; background: var(--c-brand); border-radius: 50%; box-shadow: 0 0 0 4px var(--c-brand-light); }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: .9375rem; text-decoration: none; }
.text-link .icon { width: 18px; }
.section-head { align-items: end; gap: 16px; margin-bottom: 22px; }
.section-head h2 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); margin: 0; }
.section-head .eyebrow { margin-bottom: 8px; }
.container { padding-inline: 28px; }
main { padding-block: 36px 72px; }
.site-header { background: var(--c-surface); }
.site-header__inner { min-height: 84px; padding: 16px 28px; gap: 24px; }
.brand { gap: 10px; flex-shrink: 0; }
.brand__mark { width: 38px; height: 38px; }
/* Whole pixels, and an even number of them, so the wordmark sits on the pixel grid: the 38px
   mark centres it exactly 7px down, and its box then starts and ends on whole device pixels
   at 1x, 1.5x and 2x, with the flat feet of the serifs ending there too. At 1.4rem it was
   22.4px tall and 0.8px off the grid, and every horizontal edge was split across two rows. */
.brand__word { height: 24px; }
.site-nav { gap: 14px; }
.site-nav a { font-weight: 600; font-size: .9375rem; border-radius: 999px; }
.site-nav a[aria-current="page"] { color: var(--c-brand-dark); background: var(--c-brand-light); }
.site-nav .nav-login { background: var(--c-text); color: var(--c-surface); padding-inline: 24px; }
.site-nav .nav-login:hover { background: var(--c-brand-dark); color: var(--c-brand-ink); }
.site-nav .nav-business { border: 1px solid var(--c-border); }
.site-nav-toggle { display: none; }
.btn { border-radius: 12px; font-weight: 650; }
.btn:not(.btn--secondary):not(.btn--ghost):not(.btn--danger):not(.btn--accent) { box-shadow: 0 3px 0 rgb(0 0 0 / .04); }
.card { box-shadow: var(--shadow-sm); }
.card__header { background: var(--c-bg); }
.badge { font-size: .8125rem; }
.page-head { padding-bottom: 22px; border-bottom: 1px solid var(--c-border); margin-bottom: 24px; }
.page-head h1 { font-size: clamp(1.75rem, 3vw, 2.6rem); }
input, select, textarea { transition: border-color .18s, box-shadow .18s; }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 4px var(--c-brand-light); }
table.data th { background: var(--c-bg); font-size: .875rem; }
table.data tbody tr:hover { background: var(--c-bg); }
.empty { padding: 48px 24px; border: 1px dashed var(--c-border-strong); border-radius: var(--radius-card); background: var(--c-surface); }

/* Discovery opens directly on the search. Category imagery belongs to browsing, never a provider's identity. */
.marketplace-home { padding-top: 0; background: var(--c-surface); }
.discovery { padding-top: 52px; padding-bottom: 34px; }
.discovery__intro { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.discovery h1 { font-size: clamp(2.3rem, 4.5vw, 3.7rem); line-height: 1.1; margin: 0 0 18px; font-weight: 600; letter-spacing: -.065em; }
.discovery__lead { max-width: 540px; color: var(--c-text-muted); margin: 0; font-size: 1.125rem; line-height: 1.6; }
.discovery__shortcut { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--c-border); border-radius: 18px; background: var(--c-bg); text-decoration: none; color: var(--c-text); }
.discovery__shortcut strong, .discovery__shortcut small { display: block; }
.discovery__shortcut strong { font-weight: 650; }
.discovery__shortcut small { font-size: .875rem; color: var(--c-text-muted); margin-top: 3px; }
.shortcut-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--c-brand-dark); background: var(--c-brand-light); border-radius: 14px; }
.discovery__shortcut > .icon { width: 18px; margin-left: 8px; }
.discovery-search { display: grid; grid-template-columns: 1.35fr 1fr 1fr auto; align-items: center; padding: 10px; margin: 32px 0 16px; border: 1px solid var(--c-border-strong); border-radius: 20px; background: var(--c-surface); box-shadow: var(--shadow); }
.discovery-search__field { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 4px 20px; border-right: 1px solid var(--c-border); }
.discovery-search__field > .icon { color: var(--c-text-muted); width: 21px; }
.discovery-search__field > div { flex: 1; min-width: 0; }
.discovery-search__field label { font-size: .8125rem; font-weight: 700; display: block; margin-left: 8px; }
.discovery-search__field input, .discovery-search__field select { min-width: 0; background: transparent; border: 0; border-radius: 6px; padding: 4px 8px; min-height: 44px; font-size: 1rem; }
.discovery-search__submit { min-height: 64px; margin-left: 12px; padding-inline: 26px; border-radius: 13px; }
.discovery__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.discovery__bottom .preset { min-height: 44px; padding: 8px 14px; font-size: .875rem; border-color: var(--c-border-strong); border-radius: 999px; background: var(--c-bg); }
.discovery__bottom .preset--deal { background: var(--c-accent-light); border-color: transparent; color: var(--c-accent-dark); }
.reassurance { display: inline-flex; align-items: center; gap: 7px; font-size: .875rem; color: var(--c-text-muted); }
.reassurance .icon { width: 17px; color: var(--c-brand); }
.explore-section { margin-top: 26px; margin-bottom: 46px; }
/* One shelf per group. Sized to its content and allowed to wrap, so shelves share a line while
   they fit and a long one takes the whole width and scrolls inside it. min-width: 0 is what lets a
   shelf of twelve shrink to the line instead of pushing the page sideways. */
.category-shelves { display: flex; flex-wrap: wrap; gap: 4px 40px; }
.category-shelf { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.category-shelf__title { margin: 0; padding-inline: 2px; font-size: .8125rem; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; }
.category-shelf__title a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--c-text-muted); text-decoration: none; }
.category-shelf__title a:hover { color: var(--c-brand-dark); }
.category-shelf__title .icon { width: 15px; height: 15px; }
.category-rail { display: flex; align-items: stretch; gap: 12px; overflow-x: auto; padding: 2px 2px 14px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.category-tile { display: flex; flex: 1 0 96px; flex-direction: column; align-items: center; gap: 12px; padding: 12px 8px; text-align: center; color: var(--c-text); text-decoration: none; font-size: .875rem; font-weight: 600; border-radius: 16px; scroll-snap-align: start; }
.category-tile:hover { background: var(--c-bg); color: var(--category-ink); }
.category-tile__icon { display: grid; place-items: center; height: 62px; width: 62px; border-radius: 20px; background: var(--category-bg); color: var(--category-ink); transition: transform .2s; }
.category-tile:hover .category-tile__icon { transform: translateY(-3px); }
.category-tile__icon .icon { width: 28px; height: 28px; }
.discovery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.discovery-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 22px; overflow: hidden; color: var(--c-text); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.discovery-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); color: var(--c-text); }
.discovery-card > img { display: block; width: 100%; height: auto; aspect-ratio: 1.8; object-fit: cover; }
.discovery-card__caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 21px; }
.discovery-card__caption .eyebrow { color: var(--category-ink); font-size: .75rem; margin-bottom: 7px; }
.discovery-card h3 { font-size: 1.125rem; font-weight: 550; margin: 0; line-height: 1.4; }
.circle-arrow { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid var(--c-border); border-radius: 50%; }
.circle-arrow .icon { width: 18px; }
.rail { gap: 16px; padding-bottom: 16px; }
.rail-card { border-radius: 20px; padding: 22px; background: var(--c-surface); box-shadow: none; transition: border-color .2s, box-shadow .2s; }
.rail-card:hover { border-color: var(--c-brand); box-shadow: var(--shadow-sm); }
.rail-card__top { margin-bottom: 14px; align-items: center; }
.rail-card__name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; }
.rail-card__meta { margin-top: 3px; }
.rail-card__service { display: block; font-size: .875rem; margin: 14px 0 10px; color: var(--c-text-muted); }
.rail-card__times { margin-top: 0; }
.service-avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; background: var(--category-bg); color: var(--category-ink); border-radius: 15px; }
.time-chip { border-radius: 9px; font-size: .9375rem; font-weight: 600; background: var(--c-brand-light); border-color: transparent; min-height: 44px; padding: 8px 14px; }
.time-chip--more { border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text-muted); }
.professional-banner { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 40px; border-radius: 24px; background: var(--c-ink); color: var(--c-ink-text); }
.professional-banner .eyebrow { color: var(--c-brand-vivid); margin-bottom: 12px; }
.professional-banner h2 { font-size: 1.8rem; margin-bottom: 10px; }
.professional-banner p:last-child { color: var(--c-ink-muted); max-width: 520px; margin-bottom: 0; }
.professional-banner .btn { flex-shrink: 0; background: var(--c-brand-vivid); color: var(--c-ink); }

/* Results keep location, price, service and bookable times together. */
.search-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.search-heading h1 { margin-bottom: 6px; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.search-heading p { margin: 0; color: var(--c-text-muted); }
.search-heading .eyebrow { margin-bottom: 12px; }
.filters { background: var(--c-surface); border-radius: 22px; box-shadow: var(--shadow-sm); padding: 24px; }
.filters .field__label { font-size: .875rem; }
.filters__actions { padding-top: 14px; border-top: 1px solid var(--c-border); }
.chip-row--filters { gap: 10px; padding-block: 8px 16px; }
.chip-row--filters .chip { display: inline-flex; gap: 8px; padding: 9px 15px; min-height: 46px; border-color: var(--c-border); background: var(--c-surface); font-size: .875rem; }
.chip-row--filters .chip .icon { width: 18px; height: 18px; color: var(--category-ink); }
.chip-row--filters .chip--on { background: var(--c-brand-light); border-color: var(--c-brand); color: var(--c-brand-dark); }
.results-head { margin-block: 20px; }
.salon-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.salon-card { padding: 24px; border-radius: 22px; border-top: 3px solid var(--category-ink); box-shadow: var(--shadow-sm); }
.salon-card__head { gap: 14px; }
.salon-card__logo { border-radius: 16px; background: var(--category-bg); color: var(--category-ink); }
.salon-card__logo--letter .icon { width: 27px; height: 27px; }
.salon-card__name { font-size: 1.125rem; font-weight: 600; letter-spacing: -.025em; }
.salon-card__name, .salon-card__meta, .salon-card__service-name, .rail-card__name { overflow-wrap: anywhere; }
.salon-card__service { margin: 20px 0 14px; padding-top: 16px; border-top: 1px solid var(--c-border); }
.salon-card__times { gap: 8px; }
.salon-card__day { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: .875rem; }
.salon-card__day .icon { width: 16px; height: 16px; }

/* Public profiles use the provider's own photography. An icon header covers custom categories. */
.provider-profile > .page-head { align-items: center; gap: 20px; justify-content: flex-start; }
.provider-profile > .page-head .service-avatar { width: 76px; height: 76px; border-radius: 24px; }
.provider-profile > .page-head .service-avatar .icon { width: 36px; height: 36px; }
.provider-profile > .page-head h1 { margin-bottom: 7px; }
.provider-profile > .page-head p { margin: 0; }
.provider-profile > .page-head .badge { margin-bottom: 12px; background: var(--category-bg); color: var(--category-ink); border: 0; }
.provider-profile .salon-hero { border-radius: 24px; margin-inline: 0; }
.provider-profile .page-head--under-hero { margin-top: 0; }
.provider-profile .service-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.provider-profile .service-picker a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px; border-radius: 14px; background: var(--c-surface); }
.provider-profile .service-picker a.is-active { background: var(--c-brand-light); color: var(--c-brand-dark); border-color: var(--c-brand); box-shadow: inset 4px 0 var(--c-brand); }
.provider-profile .service-picker a > span:first-child { font-weight: 650; }
.provider-profile .service-picker .text-xs { font-size: .875rem; text-align: right; }
.provider-booking { padding: 28px; border: 1px solid var(--c-border); border-radius: 24px; background: var(--c-surface); }
.steps { border-radius: 14px; padding: 18px 16px; background: var(--c-bg); border: 1px solid var(--c-border); }
.steps__dot { box-shadow: 0 0 0 4px var(--c-surface); }
.steps__name { font-size: .875rem; }
.summary-list { font-size: 1rem; }

/* Professional workspace: persistent navigation on desktop, a scrollable strip on phones. */
.workspace-label { display: flex; align-items: center; gap: 10px; color: var(--c-text-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 8px 14px 20px; }
.workspace-label .icon { width: 19px; }
.subnav { padding: 8px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 18px; gap: 5px; }
.subnav a { display: flex; align-items: center; gap: 12px; border-radius: 10px; font-size: .9375rem; padding: 12px 14px; min-height: 46px; text-decoration: none; color: var(--c-text-muted); white-space: nowrap; }
.subnav a .icon { width: 20px; height: 20px; }
.subnav a.is-active { color: var(--c-brand-dark); background: var(--c-brand-light); font-weight: 650; box-shadow: none; }
.subnav a:hover { color: var(--c-text); background: var(--c-bg); }
.business-chrome { margin-bottom: 24px; }
.workspace-heading { display: flex; align-items: center; gap: 16px; }
.workspace-heading > .service-avatar { background: var(--c-brand-light); color: var(--c-brand-dark); }
.workspace-heading h1 { margin-bottom: 4px; }
.workspace-heading p { color: var(--c-text-muted); font-size: .9375rem; margin: 0; }
.day-nav { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; padding: 12px; }
.day-nav__step { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 12px; }
.day-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border: 0; padding: 0; background: transparent; margin-block: 22px; }
.day-summary > span { display: block; border: 1px solid var(--c-border); border-radius: 18px; padding: 22px; background: var(--c-surface); font-family: var(--font-display); font-size: 1.125rem; }
.day-summary > span:last-child { background: var(--c-brand-light); color: var(--c-brand-dark); border-color: transparent; }
.employee-day { border: 1px solid var(--c-border); border-radius: 20px; background: var(--c-surface); overflow: hidden; margin-block: 24px; }
.employee-day__head { background: var(--c-bg); padding: 18px 24px; margin: 0; border-bottom: 1px solid var(--c-border); }
.employee-day__head h2 { margin: 0; font-size: 1.125rem; }
.timeline { border: 0; border-radius: 0; margin: 0; }
.timeline__entry { padding: 22px 24px; border-left: 3px solid var(--c-brand); }
.timeline__entry--free { border-left-color: var(--c-border-strong); background: var(--c-bg); }
.timeline__time { font-size: 1.25rem; }
.timeline__title { font-size: 1.0625rem; }
.add-booking { border-radius: 18px; }
.customer-home .customer-welcome { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 36px; }
.customer-welcome h1 { margin-bottom: 8px; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.customer-welcome p { margin: 0; color: var(--c-text-muted); }
.customer-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.customer-shortcuts .btn { justify-content: flex-start; align-items: flex-start; flex-direction: column; text-align: left; padding: 24px; gap: 18px; border: 1px solid var(--c-border); border-radius: 20px; background: var(--c-surface); }
.customer-shortcuts .icon { color: var(--c-brand); }

@media (min-width: 70rem) {
    main:has(> .business-chrome) { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 36px; align-content: start; max-width: 96rem; }
    main:has(> .business-chrome) > * { grid-column: 2; min-width: 0; }
    main:has(> .business-chrome) > .business-chrome { grid-column: 1; grid-row: 1 / span 50; align-self: start; position: sticky; top: 110px; max-height: calc(100dvh - 132px); overflow-y: auto; scrollbar-width: thin; margin: 0; }
    .business-chrome .subnav { display: flex; flex-direction: column; border: 0; background: transparent; margin: 0; }
    .business-chrome .subnav a.subnav__group-start { margin-top: 20px; }
}
@media (max-width: 69.9375rem) {
    .workspace-label { display: none; }
    .business-chrome .subnav { flex-wrap: nowrap; overflow-x: auto; }
    .discovery__shortcut { max-width: 300px; }
    .discovery-search { grid-template-columns: 1.1fr 1fr 1fr; }
    .discovery-search__field { padding-inline: 12px; }
    .discovery-search__submit { grid-column: 1 / -1; min-height: 50px; margin: 10px 0 0; }
    .discovery-search__field:nth-child(3) { border: 0; }
    .customer-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.9375rem) {
    .container { padding-inline: 20px; }
    main { padding-top: 24px; }
    .site-header__inner { min-height: 70px; padding: 12px 20px; flex-wrap: wrap; gap: 12px; }
    .brand__word { height: 20px; }
    .brand__mark { width: 32px; height: 32px; }
    .site-nav { flex: 1 0 100%; margin-left: 0; gap: 4px; padding-top: 12px; border-top: 1px solid var(--c-border); }
    .site-nav a { padding-inline: 12px; font-size: .9375rem; }
    .site-nav .nav-login { padding-inline: 18px; }
    .has-navigation-toggle .site-nav-toggle { display: inline-flex; margin-left: auto; min-height: var(--tap); padding: 8px 12px; gap: 8px; }
    .has-navigation-toggle .site-nav { display: none; }
    .site-header.is-expanded { max-height: calc(100dvh - 88px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
    .site-header.is-expanded .site-nav { display: grid; grid-template-columns: minmax(0, 1fr); }
    .has-navigation-toggle .site-nav a { border-radius: 12px; }
    .has-navigation-toggle .site-nav__logout .btn { width: 100%; justify-content: flex-start; min-height: var(--tap); }
    .marketplace-home { padding-top: 0; }
    .discovery { padding-top: 30px; padding-bottom: 8px; }
    .discovery__intro { display: block; }
    .discovery h1 { font-size: clamp(2rem, 8.8vw, 3.2rem); }
    .discovery .eyebrow { font-size: .75rem; margin-bottom: 16px; }
    .discovery__lead { font-size: 1rem; }
    .discovery__shortcut { display: none; }
    .discovery-search { grid-template-columns: 1fr 1fr; margin-top: 24px; padding: 12px; border-radius: 18px; }
    .discovery-search__field { padding: 8px 2px; gap: 7px; }
    .discovery-search__field > .icon { width: 18px; }
    .discovery-search__field--service { grid-column: 1 / -1; padding-bottom: 12px; margin-bottom: 4px; border: 0; border-bottom: 1px solid var(--c-border); }
    .discovery-search__field:nth-child(3) { padding-left: 12px; }
    .discovery-search__field label { font-size: .8125rem; }
    .discovery-search__field input, .discovery-search__field select { font-size: 1rem; padding-inline: 4px; }
    .discovery-search__field label { margin-left: 4px; }
    .discovery-search__submit { min-height: 52px; }
    .discovery__bottom { flex-wrap: wrap; gap: 14px; }
    .reassurance { font-size: .8125rem; }
    .explore-section { margin-top: 28px; margin-bottom: 32px; }
    .section-head { gap: 10px; margin-bottom: 16px; }
    .section-head .text-sm { font-size: .8125rem; }
    .section-head h2 { font-size: 1.3rem; }
    .text-link { font-size: .8125rem; gap: 4px; }
    .category-rail { gap: 4px; margin-right: -20px; padding-right: 20px; }
    .category-tile { flex: 0 0 92px; font-size: .8125rem; padding: 8px 4px; }
    .category-tile__icon { width: 54px; height: 54px; border-radius: 18px; }
    .discovery-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-right: -20px; padding: 0 20px 14px 0; }
    .discovery-card { flex: 0 0 82%; scroll-snap-align: start; border-radius: 18px; }
    .discovery-card__caption { padding: 18px; }
    .discovery-card h3 { font-size: 1rem; }
    .rail-card { flex-basis: 240px; }
    .professional-banner { padding: 26px; flex-direction: column; align-items: flex-start; gap: 24px; }
    .professional-banner h2 { font-size: 1.5rem; }
    .professional-banner .btn { width: 100%; }
    .search-heading { margin-bottom: 24px; }
    .search-heading p { font-size: .9375rem; }
    .search-heading > .service-avatar { display: none; }
    .salon-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .salon-card { padding: 20px; }
    .salon-card__name { font-size: 1.0625rem; }
    .salon-card__price { font-size: 1.0625rem; }
    .salon-card__head { gap: 10px; }
    .salon-card__logo { width: 44px; height: 44px; flex-basis: 44px; }
    .salon-card__service { margin-top: 16px; }
    .provider-profile .service-picker { grid-template-columns: minmax(0, 1fr); }
    .provider-profile > .page-head .service-avatar { width: 56px; height: 56px; border-radius: 18px; }
    .provider-profile > .page-head h1 { font-size: 1.7rem; }
    .provider-booking { padding: 18px; }
    .steps { padding: 16px 8px; }
    .steps__name { font-size: .8125rem; }
    .day-summary { gap: 12px; }
    .day-summary > span { padding: 18px 14px; font-size: 1rem; }
    .timeline__entry { padding: 18px 14px; }
    .employee-day__head { padding: 18px 14px; }
    .timeline__time { font-size: 1.125rem; }
    .workspace-heading > .service-avatar { display: none; }
    .workspace-heading h1 { font-size: 1.75rem; }
    .customer-home .customer-welcome { flex-wrap: wrap; }
    .customer-shortcuts { gap: 12px; }
    .customer-shortcuts .btn { padding: 20px 16px; font-size: .9375rem; }
    .tabbar { padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--c-surface); box-shadow: 0 -4px 24px rgb(21 43 53 / .06); }
    .tabbar a { gap: 4px; padding: 7px 5px; border-radius: 12px; }
    .tabbar a[aria-current="page"], .tabbar a.is-active { background: var(--c-brand-light); color: var(--c-brand-dark); }
}
@media (max-width: 23rem) {
    .container { padding-inline: 14px; }
    .site-header__inner { padding-inline: 14px; }
    .discovery-search { grid-template-columns: minmax(0, 1fr); }
    .discovery-search__field { border-right: 0; }
    .discovery-search__field:nth-child(3) { padding-left: 2px; border-top: 1px solid var(--c-border); }
    .category-rail, .discovery-grid { margin-right: -14px; padding-right: 14px; }
    .salon-card { padding: 16px; }
    .salon-card__logo { display: none; }
    .customer-shortcuts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .category-tile:hover .category-tile__icon, .discovery-card:hover { transform: none; }
}

/* Printed salon pages use the full sheet; the screen-only sidebar must not reserve a column. */
@media print {
    .business-chrome, .site-nav-toggle { display: none !important; }
    main:has(> .business-chrome) { display: block; max-width: none; }
}