/* Customer side on phones.
   One type scale and one spacing rhythm for every customer page at phone
   width, loaded after the older phone sheets so it settles their conflicts.
   Page titles 24px, section titles 18px, card titles 16px, body 14px, meta
   13px, labels 11px. A 16px gutter, 16px card radius, 44px touch targets.
   Nothing here applies above 760px. */

.me-phone-back,
.me-phone-profile,
.me-phone-hub { display: none; }

@media (max-width: 760px) {
  body.customer-mode {
    --m-gutter: 16px;
    --m-ink: #17131f;
    --m-muted: #6b6478;
    --m-line: #ebe6f2;
    --m-soft: #f6f3fc;
    --m-ground: #f7f6fa;
    --m-radius: 16px;
    --m-accent: var(--rl-violet, #916be8);
    --m-accent-ink: var(--rl-violet-ink, #5236b3);
  }

  /* ---- Shell ------------------------------------------------------------ */
  body.customer-mode .customer-shell .customer-topbar { border-bottom-color: var(--m-line); }
  body.customer-mode .customer-mobile-header-actions a {
    min-height: 40px; min-width: 40px; padding: 0 12px; gap: 6px;
    border: 1px solid var(--m-line); border-radius: 999px;
    background: #fff; color: var(--m-ink); font-size: 13px; font-weight: 600;
  }
  body.customer-mode .customer-shell .mobile-tabbar {
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); gap: 4px;
    border-top: 1px solid var(--m-line); background: rgba(255, 255, 255, 0.96);
  }
  body.customer-mode .customer-shell .mobile-tabbar .nav-link {
    gap: 3px; min-height: 50px; border-radius: 12px; color: #77708a;
    font-size: 11px; font-weight: 600; letter-spacing: 0;
  }
  body.customer-mode .customer-shell .mobile-tabbar .nav-link .icon { width: 22px; height: 22px; }
  body.customer-mode .customer-shell .mobile-tabbar .nav-link.active { color: var(--m-accent-ink); background: transparent; }
  body.customer-mode .customer-shell .mobile-tabbar .nav-link.active .icon { stroke-width: 2.2; }
  body.customer-mode .customer-shell .mobile-tabbar .nav-link.active::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--m-accent); transform: translateX(-50%);
  }

  /* The footer's link columns fold into a short two-column list. */
  body.customer-mode .customer-shell .customer-footer { padding: 28px var(--m-gutter) calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 24px); }
  body.customer-mode .customer-shell .customer-footer a { min-height: 36px; font-size: 14px; }

  /* ---- My Hair frame ---------------------------------------------------- */
  body.customer-mode.me-workspace-mode .me-dashboard { display: block; border: 0; border-radius: 0; box-shadow: none; background: var(--m-ground); }
  body.customer-mode.me-workspace-mode .me-account-rail { display: none; }
  body.customer-mode.me-workspace-mode .me-workspace {
    display: flex; flex-direction: column; gap: 16px;
    padding: 12px var(--m-gutter) 28px; background: var(--m-ground);
    height: auto; max-height: none; overflow: visible;
  }

  body.customer-mode.me-workspace-mode .me-phone-back {
    position: sticky; top: calc(var(--mobile-header-height) + env(safe-area-inset-top)); z-index: 30;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    margin: -12px calc(-1 * var(--m-gutter)) 0; padding: 4px 8px;
    border-bottom: 1px solid var(--m-line); background: rgba(247, 246, 250, 0.94); backdrop-filter: blur(14px);
  }
  body.customer-mode.me-workspace-mode .me-phone-back::after { content: ""; width: 88px; }
  body.customer-mode.me-workspace-mode .me-phone-back button {
    display: inline-flex; align-items: center; gap: 2px; width: 88px; min-height: 44px; padding: 0 6px;
    border: 0; background: transparent; color: var(--m-accent-ink); font-size: 15px; font-weight: 600; box-shadow: none;
  }
  body.customer-mode.me-workspace-mode .me-phone-back button .icon { width: 20px; height: 20px; transform: rotate(180deg); }
  body.customer-mode.me-workspace-mode .me-phone-back strong { overflow: hidden; color: var(--m-ink); font-size: 16px; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

  /* Sub-page headers: the back bar names the page, so the header is smaller. */
  body.customer-mode.me-workspace-mode .me-page-header { gap: 12px; margin: 0; padding: 0; }
  body.customer-mode.me-workspace-mode .me-page-header .eyebrow { margin: 0 0 4px; color: var(--m-accent-ink); font-size: 11px; letter-spacing: .08em; }
  body.customer-mode.me-workspace-mode .me-page-header h1 { margin: 0; font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; }
  body.customer-mode.me-workspace-mode .me-page-header > div > span { font-size: 14px; }
  body.customer-mode.me-workspace-mode .me-workspace > .me-phone-back ~ .me-page-header .eyebrow { display: none; }

  /* Shared section cards. */
  body.customer-mode.me-workspace-mode :is(.me-content-section, .me-looks-feature, .me-featured-services) {
    gap: 14px; padding: 16px; border: 1px solid var(--m-line); border-radius: var(--m-radius); background: #fff; box-shadow: none;
  }
  body.customer-mode.me-workspace-mode .me-section-heading { align-items: center; gap: 12px; margin: 0; }
  body.customer-mode.me-workspace-mode .me-section-heading .eyebrow { margin: 0 0 3px; font-size: 11px; letter-spacing: .08em; }
  body.customer-mode.me-workspace-mode .me-section-heading :is(h2, h3) { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; }
  body.customer-mode.me-workspace-mode .me-section-heading .text-button { min-height: 44px; padding: 0 2px; font-size: 14px; white-space: nowrap; }
  body.customer-mode.me-workspace-mode .me-count { min-width: 26px; height: 26px; font-size: 12px; }

  /* ---- Overview --------------------------------------------------------- */
  body.customer-mode.me-workspace-mode .me-phone-profile {
    order: -2; display: grid; grid-template-columns: 48px minmax(0, 1fr) 44px; align-items: center; gap: 12px;
  }
  body.customer-mode.me-workspace-mode .me-phone-profile .me-rail-avatar { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #eee9f5; color: var(--m-accent-ink); font-weight: 700; }
  body.customer-mode.me-workspace-mode .me-phone-profile .me-rail-avatar img { width: 100%; height: 100%; object-fit: cover; }
  body.customer-mode.me-workspace-mode .me-phone-profile > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
  body.customer-mode.me-workspace-mode .me-phone-profile strong { overflow: hidden; color: var(--m-ink); font-size: 17px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
  body.customer-mode.me-workspace-mode .me-phone-profile small { color: var(--m-muted); font-size: 13px; }
  body.customer-mode.me-workspace-mode .me-phone-profile-settings {
    display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0;
    border: 1px solid var(--m-line); border-radius: 50%; background: #fff; color: var(--m-ink);
  }
  body.customer-mode.me-workspace-mode .me-phone-profile-settings .icon { width: 20px; height: 20px; }

  /* The greeting is the page title; the profile row above names the person. */
  body.customer-mode.me-workspace-mode .me-workspace:has(> .me-phone-profile) > .me-page-header { order: -3; }
  body.customer-mode.me-workspace-mode .me-workspace:has(> .me-phone-profile) > .me-page-header .eyebrow { display: none; }
  body.customer-mode.me-workspace-mode .me-workspace:has(> .me-phone-profile) > .me-page-header h1 { font-size: 26px; }
  body.customer-mode.me-workspace-mode .me-kpi-strip { display: none; }
  body.customer-mode.me-workspace-mode .me-feature-grid,
  body.customer-mode.me-workspace-mode .me-overview-lower { display: contents; }
  body.customer-mode.me-workspace-mode .me-feature-grid > .me-booking-feature { order: -1; }
  body.customer-mode.me-workspace-mode .me-phone-hub { order: 0; }
  body.customer-mode.me-workspace-mode .me-feature-grid > .me-featured-services { order: 1; }
  body.customer-mode.me-workspace-mode .me-overview-lower > * { order: 2; }

  /* Every section, one full-width row each: easy to read, easy to hit. */
  body.customer-mode.me-workspace-mode .me-phone-hub {
    display: grid; overflow: hidden; border: 1px solid var(--m-line); border-radius: var(--m-radius); background: #fff;
  }
  body.customer-mode.me-workspace-mode .me-phone-hub-row {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px;
    width: 100%; min-height: 56px; margin: 0; padding: 8px 14px;
    border: 0; border-top: 1px solid #f1eef6; border-radius: 0; background: #fff;
    color: var(--m-ink); font-size: 16px; font-weight: 600; text-align: left; box-shadow: none;
  }
  body.customer-mode.me-workspace-mode .me-phone-hub-row:first-child { border-top: 0; }
  body.customer-mode.me-workspace-mode .me-phone-hub-row:active { background: var(--m-soft); }
  body.customer-mode.me-workspace-mode .me-phone-hub-icon {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--m-soft); color: var(--m-accent-ink);
  }
  body.customer-mode.me-workspace-mode .me-phone-hub-icon .icon { width: 19px; height: 19px; }
  body.customer-mode.me-workspace-mode .me-phone-hub-label { display: grid; gap: 1px; min-width: 0; }
  body.customer-mode.me-workspace-mode .me-phone-hub-label small { color: var(--m-muted); font-size: 13px; font-weight: 500; }
  body.customer-mode.me-workspace-mode .me-phone-hub-row > b {
    min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--m-soft);
    color: var(--m-accent-ink); font-size: 13px; font-weight: 700; line-height: 24px; text-align: center;
  }
  body.customer-mode.me-workspace-mode .me-phone-hub-row > b.is-unread { background: var(--m-accent); color: #fff; }
  body.customer-mode.me-workspace-mode .me-phone-hub-row > .icon { width: 18px; height: 18px; color: #b2abc0; }
  /* A salon owner's workspace stands out without looking selected. */
  body.customer-mode.me-workspace-mode .me-phone-hub-row.is-pro { background: linear-gradient(90deg, #f7f2ff, #fff 70%); }
  body.customer-mode.me-workspace-mode .me-phone-hub-row.is-pro .me-phone-hub-icon { background: var(--rl-brand-gradient); color: #fff; }

  /* Next appointment: photo on top, facts in one tight block, two actions. */
  body.customer-mode.me-workspace-mode .me-booking-feature {
    display: flex; flex-direction: column-reverse; overflow: hidden; min-height: 0;
    border: 1px solid var(--m-line); border-radius: var(--m-radius); background: #fff; box-shadow: none;
  }
  body.customer-mode.me-workspace-mode .me-booking-feature > img { width: 100%; height: 150px; min-height: 0; object-fit: cover; }
  body.customer-mode.me-workspace-mode .me-feature-media { position: relative; height: 132px; min-height: 0; }
  body.customer-mode.me-workspace-mode .me-feature-media img { width: 100%; height: 100%; object-fit: cover; }
  body.customer-mode.me-workspace-mode .me-feature-date {
    position: absolute; left: 12px; bottom: 12px; top: auto; display: grid; justify-items: center; gap: 0;
    min-width: 64px; padding: 6px 10px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px -8px rgba(23, 19, 31, .45);
  }
  body.customer-mode.me-workspace-mode .me-feature-date span { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  body.customer-mode.me-workspace-mode .me-feature-date strong { font-size: 24px; line-height: 1.1; }
  body.customer-mode.me-workspace-mode .me-feature-date b { font-size: 11px; font-weight: 600; color: var(--m-ink); }
  body.customer-mode.me-workspace-mode .me-feature-copy { display: grid; gap: 10px; padding: 14px 16px 16px; }
  body.customer-mode.me-workspace-mode .me-feature-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  body.customer-mode.me-workspace-mode .me-feature-label { flex-basis: 100%; margin: 0; color: var(--m-accent-ink); font-size: 11px; letter-spacing: .08em; }
  body.customer-mode.me-workspace-mode .me-feature-copy h2 { margin: 0; font-size: 20px; line-height: 1.2; }
  body.customer-mode.me-workspace-mode .me-feature-meta { display: grid; gap: 6px; }
  body.customer-mode.me-workspace-mode .me-feature-meta span { display: flex; align-items: center; gap: 8px; color: #3e3849; font-size: 14px; }
  body.customer-mode.me-workspace-mode .me-feature-meta .icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--m-muted); }
  body.customer-mode.me-workspace-mode .me-feature-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0;
    border: 1px solid var(--m-line); border-radius: 12px; background: #fbfafd;
  }
  body.customer-mode.me-workspace-mode .me-feature-facts > span { display: grid; gap: 2px; min-width: 0; padding: 8px 10px; border: 0; border-left: 1px solid var(--m-line); background: transparent; }
  body.customer-mode.me-workspace-mode .me-feature-facts > span:first-child { border-left: 0; }
  body.customer-mode.me-workspace-mode .me-feature-facts small { color: var(--m-muted); font-size: 11px; }
  body.customer-mode.me-workspace-mode .me-feature-facts b { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  body.customer-mode.me-workspace-mode .me-feature-copy .button-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; margin: 2px 0 0; }
  body.customer-mode.me-workspace-mode .me-feature-copy .button-row > button { width: 100%; min-width: 0; min-height: 44px; height: 44px; padding: 0 10px; font-size: 14px; }
  body.customer-mode.me-workspace-mode .me-feature-copy .button-row > .icon-button { width: 44px; padding: 0; }
  body.customer-mode.me-workspace-mode .me-booking-feature:not(.has-appointment) .me-feature-copy .button-row { grid-template-columns: 1fr 1fr; }

  /* Featured services and recommended salons: compact rows. */
  body.customer-mode.me-workspace-mode .me-service-list,
  body.customer-mode.me-workspace-mode .me-salon-list { display: grid; gap: 0; }
  body.customer-mode.me-workspace-mode .me-salon-row { padding-block: 12px; }
  body.customer-mode.me-workspace-mode .me-salon-title strong { font-size: 15px; }
  body.customer-mode.me-workspace-mode .me-looks-feature { padding: 0; overflow: hidden; }
  body.customer-mode.me-workspace-mode .me-looks-feature-footer { padding: 14px 16px 16px; gap: 12px; }
  body.customer-mode.me-workspace-mode .me-looks-feature-footer h2 { font-size: 18px; }
}

@media (max-width: 760px) {
  /* Overview: the profile row carries the greeting, so the big header goes. */
  body.customer-mode.me-workspace-mode .me-workspace:has(> .me-phone-profile) > .me-page-header { display: none; }
  body.customer-mode.me-workspace-mode .me-phone-profile strong { font-size: 20px; letter-spacing: -0.01em; }
  body.customer-mode.me-workspace-mode .me-booking-feature { flex-direction: column; }
  body.customer-mode.me-workspace-mode .me-booking-feature > .me-feature-media { order: -1; }
  body.customer-mode.me-workspace-mode .me-feature-facts { width: 100%; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
  body.customer-mode.me-workspace-mode .me-feature-copy .button-row > button { padding: 0 6px; }

  /* Sub-pages: the back bar names the page; a header only stays for its actions. */
  body.customer-mode.me-workspace-mode .me-phone-back { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: 0 4px; }
  body.customer-mode.me-workspace-mode .me-phone-back::after { content: none; }
  body.customer-mode.me-workspace-mode .me-phone-back button { width: auto; justify-self: start; white-space: nowrap; }
  body.customer-mode.me-workspace-mode .me-phone-back ~ .me-page-header > div:first-child { display: none; }
  body.customer-mode.me-workspace-mode .me-phone-back ~ .me-page-header:not(:has(> :nth-child(2))) { display: none; }

  /* Recommended salons: the Book button sits on the row, not under it. */
  body.customer-mode.me-workspace-mode .me-salon-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
  body.customer-mode.me-workspace-mode .me-salon-row > img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
  body.customer-mode.me-workspace-mode .me-salon-row p { margin: 2px 0 0; font-size: 13px; }
  body.customer-mode.me-workspace-mode .me-salon-row small { font-size: 12px; }
  body.customer-mode.me-workspace-mode .me-salon-row > button { min-height: 40px; height: 40px; padding: 0 14px; font-size: 14px; }

  /* ---- Appointments ------------------------------------------------------
     Cards sit straight on the page (no card inside a card), with a one-line
     date band, one primary action and three small ones. */
  body.customer-mode.me-workspace-mode .me-content-section:has(.customer-appointment-feature) { padding: 0; border: 0; background: transparent; gap: 12px; }
  body.customer-mode.me-workspace-mode .me-content-section:has(.customer-appointment-feature) > .me-section-heading { padding: 0 2px; }
  body.customer-mode.me-workspace-mode .me-later-appointments { display: grid; gap: 12px; margin: 8px 0 0; padding: 0; border: 0; }
  body.customer-mode.me-workspace-mode .customer-appointment-feature-list { display: grid; gap: 12px; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature {
    display: block; overflow: hidden; margin: 0; border: 1px solid var(--m-line); border-radius: var(--m-radius); background: #fff; box-shadow: none;
  }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-date {
    display: flex; align-items: baseline; gap: 6px; min-height: 0; padding: 10px 16px;
    border: 0; border-bottom: 1px solid var(--m-line); background: var(--m-soft); color: var(--m-accent-ink);
  }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature.is-soon .customer-appointment-feature-date { background: linear-gradient(90deg, #45c9a3 0%, #7486ee 55%, #8e5cec 100%); color: #fff; text-shadow: 0 1px 2px rgba(29, 24, 48, .28); }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature.is-soon .customer-appointment-feature-date :is(span, small, strong, b, i) { color: #fff; }
  /* One line, centred: the Today chip, then "September 25" and "Friday". */
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-date { align-items: center; gap: 10px; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-date:has(.customer-appointment-feature-fulldate) > :is(span:not(.customer-appointment-feature-fulldate), strong, small) { display: none; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-fulldate { display: flex; align-items: baseline; gap: 8px; min-width: 0; text-transform: none; letter-spacing: 0; font-size: inherit; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-fulldate b { font-size: 17px; font-weight: 750; letter-spacing: -.01em; line-height: 1.2; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-fulldate i { font-size: 14px; font-style: normal; font-weight: 550; opacity: .92; line-height: 1.2; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-day { margin: 0 !important; line-height: 1.2; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-date :is(span, small) { color: inherit; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-date strong { color: inherit; font-size: 20px; line-height: 1; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-day { align-self: center; margin-right: 4px; padding: 3px 8px; border-radius: 999px; background: #fff; color: var(--m-accent-ink); font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-copy { display: grid; gap: 8px; padding: 14px 16px 16px; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-heading { margin: 0; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-copy h2 { margin: 0; font-size: 20px; line-height: 1.2; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-daytag { display: none; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-copy h3 { margin: 0; font-size: 15px; font-weight: 650; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-copy > p { display: flex; gap: 6px; margin: 0; color: var(--m-muted); font-size: 13px; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-copy > p .icon { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-policy-timeline { margin: 2px 0; padding: 10px 12px; border-radius: 12px; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-policy-timeline header strong { font-size: 13px; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature .button-row {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0;
  }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature .button-row > button {
    width: 100%; min-width: 0; min-height: 44px; height: 44px; margin: 0; padding: 0 6px; font-size: 14px; white-space: nowrap;
  }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature .button-row > button:first-child { grid-column: 1 / -1; }
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature :is(.customer-appointment-map, .customer-appointment-map-fallback) { display: none; }
}

@media (max-width: 760px) {
  body.customer-mode.me-workspace-mode .me-phone-back::after { content: ""; }
  body.customer-mode.me-workspace-mode .me-salon-row > button { grid-column: 3; grid-row: 1; }
  /* The photo's date tile already says Today or Tomorrow. */
  body.customer-mode.me-workspace-mode .me-feature-heading .customer-day-pill { display: none; }
}

/* ---- Chats ---------------------------------------------------------------
   The inbox and the open conversation each take the whole screen. A desktop
   rule gave the list a fixed 230px column here, which squeezed the inbox. */
@media (max-width: 760px) {
  body.customer-mode.me-workspace-mode .customer-chats-layout,
  body.customer-mode.me-workspace-mode .customer-chats-layout.has-details { grid-template-columns: minmax(0, 1fr); }
  body.customer-mode.me-workspace-mode .customer-chat-details { display: none; }
  body.customer-mode.me-workspace-mode .me-workspace:has(> .customer-chats) { padding-bottom: 0; gap: 0; }
  body.customer-mode.me-workspace-mode .me-workspace > .customer-chats {
    height: calc(var(--mobile-viewport-height, 100dvh) - var(--mobile-header-height) - var(--mobile-nav-height) - 45px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: 380px; margin: 0 calc(-1 * var(--m-gutter));
  }
  body.customer-mode.me-workspace-mode .customer-chats-layout { height: 100%; border: 0; border-radius: 0; box-shadow: none; background: #fff; }
  body.customer-mode.me-workspace-mode .customer-chat-list { width: 100%; border: 0; }
  body.customer-mode.me-workspace-mode .customer-chat-list > header { padding: 12px var(--m-gutter) 8px; }
  body.customer-mode.me-workspace-mode .customer-chat-list > header h2 { font-size: 18px; }
  body.customer-mode.me-workspace-mode .customer-chat-search { margin: 0 var(--m-gutter) 8px; min-height: 44px; border-radius: 12px; }
  body.customer-mode.me-workspace-mode .customer-chats .customer-chat-salon-row {
    min-height: 72px !important; gap: 12px; margin: 0; padding: 10px var(--m-gutter); border-radius: 0; border-bottom: 1px solid #f1eef6;
  }
  body.customer-mode.me-workspace-mode .customer-chats .customer-chat-salon-row .customer-chat-avatar { flex-basis: 48px; width: 48px; height: 48px; border-radius: 50%; }
  body.customer-mode.me-workspace-mode .customer-chat-row-heading strong { font-size: 16px; }
  body.customer-mode.me-workspace-mode .customer-chat-row-heading time { font-size: 12px; }
  body.customer-mode.me-workspace-mode .customer-chat-preview { font-size: 14px; }
  body.customer-mode.me-workspace-mode .customer-chat-unread { min-width: 22px; height: 22px; font-size: 12px; }

  /* An open conversation has its own back button, so the My Hair bar steps aside. */
  body.customer-mode.me-workspace-mode .me-workspace:has(.customer-chats.is-room-open) > .me-phone-back { display: none; }
  body.customer-mode.me-workspace-mode .me-workspace:has(.customer-chats.is-room-open) { padding-top: 0; }
  body.customer-mode.me-workspace-mode .me-workspace > .customer-chats.is-room-open {
    height: calc(var(--mobile-viewport-height, 100dvh) - var(--mobile-header-height) - var(--mobile-nav-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  body.customer-mode.me-workspace-mode .customer-chat-room { grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
  body.customer-mode.me-workspace-mode .customer-chat-room-header { min-height: 56px; padding: 6px 12px 6px 4px; gap: 4px; }
  body.customer-mode.me-workspace-mode .customer-chat-back { min-width: 44px; min-height: 44px; }
  body.customer-mode.me-workspace-mode .customer-chat-back .icon { width: 22px; height: 22px; }
  body.customer-mode.me-workspace-mode .customer-chat-salon-link :is(strong) { font-size: 16px; }
  body.customer-mode.me-workspace-mode .customer-chat-salon-link small { font-size: 12px; }
  body.customer-mode.me-workspace-mode .customer-chat-stream.appointment-message-thread { padding: 14px 12px; }
  body.customer-mode.me-workspace-mode .customer-chat-stream.appointment-message-thread article { max-width: 84%; font-size: 15px; }
  body.customer-mode.me-workspace-mode .customer-chat-compose-top { display: none; }
  body.customer-mode.me-workspace-mode .customer-chat-composer.appointment-message-composer { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--m-line); }
  body.customer-mode.me-workspace-mode .customer-chat-send { width: 44px; min-width: 44px; height: 44px; }
  html.mobile-keyboard-open body.customer-mode.me-workspace-mode .me-workspace > .customer-chats.is-room-open {
    height: calc(var(--mobile-viewport-height, 100dvh) - var(--mobile-header-height) - env(safe-area-inset-top));
  }
}

@media (max-width: 760px) {
  /* My Hair runs edge to edge; the page itself adds no inset. */
  body.customer-mode.me-workspace-mode .customer-shell > .page-wrap { margin: 0; padding: 0 0 calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 8px); }
  body.customer-mode.me-workspace-mode .customer-shell > .page-wrap:has(.customer-chats) { padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
  body.customer-mode.me-workspace-mode .me-workspace:has(> .customer-chats) { padding-top: 12px; }
}

@media (max-width: 760px) {
  /* The bottom bar is cleared once, by whatever ends the page (the footer, or
     the page itself where there is no footer), not by the body as well. */
  body.customer-mode { padding-bottom: 0; }
  body.customer-mode.me-workspace-mode .customer-shell > .page-wrap { width: 100%; max-width: none; }
}

/* ---- My Hair sub-pages --------------------------------------------------- */
@media (max-width: 760px) {
  /* A header that only holds an action shows it as a compact button. */
  body.customer-mode.me-workspace-mode .me-salons-view > .me-page-header > div:first-child { display: none; }
  body.customer-mode.me-workspace-mode .me-salons-view { display: grid; gap: 16px; }
  body.customer-mode.me-workspace-mode .me-page-header > button,
  body.customer-mode.me-workspace-mode .me-page-header-actions > button { width: 100%; min-height: 44px; height: 44px; font-size: 14px; }

  /* Lists of cards sit on the page rather than inside another card. */
  body.customer-mode.me-workspace-mode :is(.me-history-section, .me-notifications-section, .me-content-section:has(> .me-saved-list), .me-content-section:has(> .customer-row-list)) {
    gap: 10px; padding: 0; border: 0; border-radius: 0; background: transparent;
  }
  body.customer-mode.me-workspace-mode :is(.me-history-section, .me-notifications-section, .me-content-section:has(> .me-saved-list), .me-content-section:has(> .customer-row-list)) > .me-section-heading { padding: 0 2px; }

  /* Saved salons: photo, name and place, then price and two buttons. */
  body.customer-mode.me-workspace-mode .me-saved-list { gap: 10px; }
  body.customer-mode.me-workspace-mode .me-saved-row {
    display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; margin: 0; padding: 12px;
    border: 1px solid var(--m-line); border-radius: var(--m-radius); background: #fff;
  }
  body.customer-mode.me-workspace-mode .me-saved-photo { width: 84px; height: 84px; }
  body.customer-mode.me-workspace-mode .me-saved-photo img { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; }
  body.customer-mode.me-workspace-mode .me-saved-heart { top: 2px; right: 2px; width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
  body.customer-mode.me-workspace-mode .me-saved-copy { display: grid; align-content: start; gap: 4px; min-width: 0; }
  body.customer-mode.me-workspace-mode .me-saved-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  body.customer-mode.me-workspace-mode .me-saved-title strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
  body.customer-mode.me-workspace-mode .me-saved-title span { flex-shrink: 0; font-size: 13px; }
  body.customer-mode.me-workspace-mode .me-saved-copy p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--m-muted); font-size: 13px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  body.customer-mode.me-workspace-mode .me-saved-copy p .icon { display: none; }
  body.customer-mode.me-workspace-mode .me-saved-tags { display: flex; flex-wrap: nowrap; gap: 4px; overflow: hidden; }
  body.customer-mode.me-workspace-mode .me-saved-tags > * { flex-shrink: 0; font-size: 12px; }
  body.customer-mode.me-workspace-mode .me-saved-actions { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 0; padding: 10px 0 0; border-top: 1px solid #f1eef6; }
  body.customer-mode.me-workspace-mode .me-saved-actions small { color: var(--m-ink); font-size: 14px; font-weight: 650; }
  body.customer-mode.me-workspace-mode .me-saved-actions > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  body.customer-mode.me-workspace-mode .me-saved-actions button { width: 100%; min-height: 44px; height: 44px; padding: 0 8px; font-size: 14px; box-shadow: none; }

  /* Payments: one summary strip, then rows with the amount on the right. */
  body.customer-mode.me-workspace-mode .me-payment-summary {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; overflow: hidden;
    border: 1px solid var(--m-line); border-radius: var(--m-radius); background: #fff;
  }
  body.customer-mode.me-workspace-mode .me-payment-summary .me-kpi { display: block; min-height: 0; padding: 12px; border: 0; border-left: 1px solid var(--m-line); border-radius: 0; background: transparent; box-shadow: none; }
  body.customer-mode.me-workspace-mode .me-payment-summary .me-kpi:first-child { border-left: 0; }
  body.customer-mode.me-workspace-mode .me-payment-summary .me-kpi > span:first-child,
  body.customer-mode.me-workspace-mode .me-payment-summary .me-kpi em { display: none; }
  body.customer-mode.me-workspace-mode .me-payment-summary .me-kpi small { display: block; overflow: hidden; color: var(--m-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  body.customer-mode.me-workspace-mode .me-payment-summary .me-kpi strong { display: block; overflow: hidden; margin-top: 2px; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
  body.customer-mode.me-workspace-mode .customer-row-list:not(.customer-notification-list) { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--m-line); border-radius: var(--m-radius); background: #fff; }
  body.customer-mode.me-workspace-mode .customer-payment-row {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 2px;
    min-height: 0; margin: 0; padding: 12px 14px; border: 0; border-top: 1px solid #f1eef6; border-radius: 0; background: transparent;
  }
  body.customer-mode.me-workspace-mode .customer-payment-row:first-child { border-top: 0; }
  body.customer-mode.me-workspace-mode .customer-payment-row > .customer-payment-icon { grid-row: 1 / 3; }
  body.customer-mode.me-workspace-mode .customer-payment-row > div { grid-row: 1 / 3; grid-column: 2; min-width: 0; }
  body.customer-mode.me-workspace-mode .customer-payment-row > div strong { display: block; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
  body.customer-mode.me-workspace-mode .customer-payment-row > div span { font-size: 13px; }
  body.customer-mode.me-workspace-mode .customer-payment-row > b { grid-column: 3; grid-row: 1; justify-self: end; font-size: 15px; }
  body.customer-mode.me-workspace-mode .customer-payment-row > .status-badge { grid-column: 3; grid-row: 2; justify-self: end; margin: 0; }

  /* History: date and status on one line, facts in a 2 by 2 block. */
  body.customer-mode.me-workspace-mode .me-history-timeline { display: grid; gap: 10px; padding: 0; }
  body.customer-mode.me-workspace-mode .me-history-timeline::before { display: none; }
  body.customer-mode.me-workspace-mode .me-history-card { margin: 0; padding: 0; border: 1px solid var(--m-line); border-radius: var(--m-radius); background: #fff; box-shadow: none; }
  body.customer-mode.me-workspace-mode .me-history-card::before { display: none; }
  body.customer-mode.me-workspace-mode .me-history-card-header { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px 14px 10px; border: 0; }
  body.customer-mode.me-workspace-mode .me-history-card-icon { width: 36px; height: 36px; border-radius: 10px; }
  body.customer-mode.me-workspace-mode .me-history-card-title { display: grid; gap: 2px; }
  body.customer-mode.me-workspace-mode .me-history-card-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; }
  body.customer-mode.me-workspace-mode .me-history-card-title h3 { margin: 2px 0 0; font-size: 16px; }
  body.customer-mode.me-workspace-mode .me-history-card-title p { margin: 0; color: var(--m-muted); font-size: 13px; }
  body.customer-mode.me-workspace-mode .me-history-card-meta { margin: 0 14px; border-radius: 12px; }
  body.customer-mode.me-workspace-mode .me-history-card-meta > div { padding: 8px 10px; }
  body.customer-mode.me-workspace-mode .me-history-card-meta dt { font-size: 11px; }
  body.customer-mode.me-workspace-mode .me-history-card-meta dd { font-size: 13px; }
  body.customer-mode.me-workspace-mode .me-history-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px 14px; border: 0; }
  body.customer-mode.me-workspace-mode .me-history-card-actions > button { width: 100%; min-height: 44px; height: 44px; margin: 0; padding: 0 8px; font-size: 14px; }

  /* Notifications: rows in one card, icon, two lines, chevron. */
  body.customer-mode.me-workspace-mode .customer-notification-list { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--m-line); border-radius: var(--m-radius); background: #fff; }
  body.customer-mode.me-workspace-mode .customer-notification-row { min-height: 64px; margin: 0; padding: 12px 14px; gap: 12px; border: 0; border-top: 1px solid #f1eef6; border-radius: 0; }
  body.customer-mode.me-workspace-mode .customer-notification-row:first-child { border-top: 0; }
  body.customer-mode.me-workspace-mode .customer-notification-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; }
  body.customer-mode.me-workspace-mode .customer-notification-title { font-size: 15px; }
  body.customer-mode.me-workspace-mode .customer-notification-body { font-size: 13px; }

  /* Settings: one column, 16px fields, a two-button footer. */
  body.customer-mode.me-workspace-mode .me-settings-panel { overflow: hidden; border: 1px solid var(--m-line); border-radius: var(--m-radius); background: #fff; box-shadow: none; }
  body.customer-mode.me-workspace-mode .me-settings-panel > .me-section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 16px; }
  body.customer-mode.me-workspace-mode .me-settings-profile { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 0 16px 16px; }
  body.customer-mode.me-workspace-mode .me-settings-profile > .outline-button { grid-column: 2; justify-self: start; min-height: 40px; height: 40px; font-size: 14px; }
  body.customer-mode.me-workspace-mode .me-settings-group { gap: 14px; padding: 16px; }
  body.customer-mode.me-workspace-mode .me-settings-group h3 { font-size: 16px; }
  body.customer-mode.me-workspace-mode .me-settings-group .profile-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body.customer-mode.me-workspace-mode .me-settings-group .profile-grid > label,
  body.customer-mode.me-workspace-mode .me-settings-group .profile-grid label { gap: 6px; font-size: 13px; }
  body.customer-mode.me-workspace-mode .me-settings-group .profile-grid :is(input, select),
  body.customer-mode.me-workspace-mode .me-settings-group .prelook-select-trigger { min-height: 46px; height: 46px; font-size: 16px; }
  body.customer-mode.me-workspace-mode .me-settings-group textarea { min-height: 96px; font-size: 16px; }
  body.customer-mode.me-workspace-mode .verified-phone-setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
  body.customer-mode.me-workspace-mode .verified-phone-setting > button { min-height: 46px; height: 46px; white-space: nowrap; }
  body.customer-mode.me-workspace-mode .language-picker.customer { padding: 12px; border-radius: 14px; }
  body.customer-mode.me-workspace-mode .language-choice-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  body.customer-mode.me-workspace-mode .language-choice { min-height: 52px; }
  body.customer-mode.me-workspace-mode .me-account-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  body.customer-mode.me-workspace-mode .me-account-actions > button { width: 100%; min-height: 44px; height: 44px; font-size: 14px; }
  body.customer-mode.me-workspace-mode .me-settings-footer {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--m-line);
  }
  body.customer-mode.me-workspace-mode .me-settings-footer > button { width: 100%; min-height: 48px; height: 48px; margin: 0; padding: 0 10px; font-size: 15px; flex: none; }

  /* Support and AI looks: the same card treatment. */
  body.customer-mode.me-workspace-mode .rl-support-card { padding: 16px; border-radius: var(--m-radius); }
  body.customer-mode.me-workspace-mode .rl-support-actions > button { width: 100%; }
  body.customer-mode.me-workspace-mode .me-empty-showcase > div { padding: 14px 16px 18px; gap: 8px; }
  body.customer-mode.me-workspace-mode .me-empty-showcase h2 { font-size: 20px; }
  body.customer-mode.me-workspace-mode .me-empty-showcase p { font-size: 14px; }

  /* Salons workspace (owners): the salon card and shortcuts, tighter. */
  body.customer-mode.me-workspace-mode .pro-account-salons > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  body.customer-mode.me-workspace-mode .pro-account-salon-card { border-radius: 14px; }
  body.customer-mode.me-workspace-mode .pro-account-shortcut-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  body.customer-mode.me-workspace-mode .pro-account-shortcut { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 10px; min-height: 64px; padding: 10px; text-align: left; }
  body.customer-mode.me-workspace-mode .pro-account-shortcut > span { grid-row: 1 / 3; width: 36px; height: 36px; }
  body.customer-mode.me-workspace-mode .pro-account-shortcut strong { font-size: 14px; }
  body.customer-mode.me-workspace-mode .pro-account-shortcut small { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 760px) {
  body.customer-mode.me-workspace-mode .me-saved-heart { top: 4px; right: 4px; left: auto; bottom: auto; transform: none; }
  body.customer-mode.me-workspace-mode .me-history-card-header { align-items: start; text-align: left; }
  body.customer-mode.me-workspace-mode .me-history-card-title { justify-items: start; text-align: left; }
  body.customer-mode.me-workspace-mode .me-history-card-kicker { flex-direction: row; justify-content: flex-start; width: auto; }
  body.customer-mode.me-workspace-mode .me-history-card-kicker time { color: var(--m-muted); font-weight: 600; }

  /* Owner's salon: a shorter photo, the details, then one clear Open dashboard. */
  body.customer-mode.me-workspace-mode .pro-account-salons > header { text-align: left; }
  body.customer-mode.me-workspace-mode .pro-account-salons > header > div { flex: 1; min-width: 0; }
  body.customer-mode.me-workspace-mode .pro-account-salon-primary { display: grid; gap: 0; padding: 0; }
  body.customer-mode.me-workspace-mode .pro-account-salon-avatar.has-image { width: 100%; height: 150px; border-radius: 0; }
  body.customer-mode.me-workspace-mode .pro-account-salon-avatar.has-image img { width: 100%; height: 100%; object-fit: cover; }
  body.customer-mode.me-workspace-mode .pro-account-salon-copy { display: grid; gap: 8px; padding: 14px 14px 0; text-align: left; justify-items: start; }
  body.customer-mode.me-workspace-mode .pro-account-salon-copy h3 { font-size: 20px; }
  body.customer-mode.me-workspace-mode .pro-account-salon-copy p { margin: 0; color: var(--m-muted); font-size: 13px; }
  body.customer-mode.me-workspace-mode .pro-account-salon-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  body.customer-mode.me-workspace-mode .pro-account-salon-links > button { width: 100%; min-height: 44px; height: 44px; padding: 0 6px; font-size: 13px; white-space: nowrap; }
  body.customer-mode.me-workspace-mode .pro-account-salon-links > button .icon { width: 16px; height: 16px; }
  body.customer-mode.me-workspace-mode .pro-account-salon-open { width: auto; min-height: 50px; height: 50px; margin: 12px 14px 14px; border-radius: 12px; font-size: 16px; }
  body.customer-mode.me-workspace-mode .pro-account-salon-summary > div { padding: 12px 14px; }
}

@media (max-width: 760px) {
  body.customer-mode.me-workspace-mode .me-salons-view .pro-account-salon-card.is-expanded .pro-account-salon-avatar { height: 150px; min-height: 0; }
  body.customer-mode.me-workspace-mode .me-salons-view .pro-account-salon-card.is-expanded .pro-account-salon-copy { padding: 14px 14px 0; }
  body.customer-mode.me-workspace-mode .me-salons-view .pro-account-salon-card.is-expanded .pro-account-salon-copy h3 { font-size: 20px; letter-spacing: -0.02em; }
  body.customer-mode.me-workspace-mode .me-salons-view .pro-account-salon-card.is-expanded .pro-account-salon-open {
    display: flex; justify-content: center; justify-self: stretch; width: auto; min-height: 50px; height: 50px; margin: 14px; font-size: 16px;
  }
  /* The one-salon list needs no second card around it. */
  body.customer-mode.me-workspace-mode .me-salons-view .pro-account-salons { padding: 0; border: 0; background: transparent; }
  body.customer-mode.me-workspace-mode .me-salons-view .pro-account-salon-card { overflow: hidden; border: 1px solid var(--m-line); border-radius: var(--m-radius); background: #fff; }
}
@media (max-width: 760px) {
  body.customer-mode.me-workspace-mode .me-salons-view .pro-account-salons > header { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---- Footer: a short two-column list instead of five tall stacks ------- */
@media (max-width: 760px) {
  body.customer-mode .customer-shell .customer-footer { margin-top: 24px; padding: 24px var(--m-gutter) calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 16px); }
  body.customer-mode .customer-footer-main { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  body.customer-mode .customer-footer-brand { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  body.customer-mode .customer-footer-brand > button { display: none; }
  body.customer-mode .customer-footer-brand .brand-wordmark { width: 118px; height: auto; }
  body.customer-mode .customer-footer-brand small { font-size: 12px; }
  body.customer-mode .customer-footer-column { display: grid; align-content: start; gap: 0; }
  body.customer-mode .customer-footer-column strong { margin: 0 0 4px; font-size: 13px; }
  body.customer-mode .customer-shell .customer-footer .customer-footer-column a { min-height: 34px; margin: 0; padding: 0; font-size: 14px; }
  body.customer-mode .customer-footer-social span { display: flex; align-items: center; min-height: 34px; font-size: 14px; }
  body.customer-mode .customer-footer-bottom { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 14px; font-size: 12px; }
  /* The page before a footer only needs a small gap; the footer clears the bar. */
  body.customer-mode:not(.me-workspace-mode) .customer-shell > .page-wrap:has(+ .mobile-tabbar + .customer-footer) { padding-bottom: 8px; }

  /* ---- Discover -------------------------------------------------------- */
  body.customer-mode .discover-page :is(.discover-row-heading, .discover-marketplace-heading) p { max-width: none; font-size: 13px; }
  body.customer-mode .discover-page :is(.discover-row-heading, .discover-marketplace-heading) h2 { font-size: 20px; }
  /* The hero, calmer: smaller type, a slimmer search bar and pills, and the
     photo shown whole at its own 3:2 shape with the look card under it
     instead of over it. (The search text stays 16px: smaller makes iOS zoom.) */
  body.customer-mode .discover-page .search-panel { gap: 12px; padding: 16px 14px 12px; }
  body.customer-mode .discover-page .search-copy { gap: 6px; }
  body.customer-mode .discover-page .search-copy .eyebrow { font-size: 10px; letter-spacing: .1em; }
  body.customer-mode .discover-page .search-copy h1 { font-size: 24px; line-height: 1.12; letter-spacing: -.02em; }
  body.customer-mode .discover-page .search-copy > p:last-child {
    display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    font-size: 13px; line-height: 1.45;
  }
  body.customer-mode .discover-search-tools { gap: 8px; }
  body.customer-mode .discover-search-form { min-height: 42px; height: 42px; padding: 3px 3px 3px 12px; gap: 6px; box-shadow: 0 4px 14px #33244010; }
  body.customer-mode .discover-search-form input { min-height: 34px; height: 34px; }
  body.customer-mode .discover-search-location .icon { width: 17px; height: 17px; }
  body.customer-mode .discover-search-submit { width: 34px; height: 34px; min-width: 34px; min-height: 34px; flex-basis: 34px; }
  body.customer-mode .discover-search-submit .icon { width: 16px; height: 16px; }
  body.customer-mode .discover-search-shortcuts { gap: 6px; padding: 2px 0 4px; }
  body.customer-mode .discover-search-shortcuts > button { min-height: 32px; height: 32px; padding: 0 12px; font-size: 12px; }
  body.customer-mode .discover-page .visual-panel {
    display: grid; gap: 10px; height: auto; min-height: 0; padding: 0 14px 14px;
    overflow: visible; border-radius: 0; background: transparent;
  }
  body.customer-mode .discover-page .visual-panel > img {
    position: static; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; border-radius: 14px;
  }
  body.customer-mode .discover-page .visual-panel::before,
  body.customer-mode .discover-page .visual-panel::after { display: none; }
  body.customer-mode .discover-page .floating-summary {
    position: static; inset: auto; width: auto; margin: 0; padding: 10px 12px; border-color: #ece7f2; box-shadow: none; backdrop-filter: none;
  }

  /* ---- Salons directory ----------------------------------------------- */
  body.customer-mode .directory-search-actions {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px;
    padding: 0; border: 0; background: transparent; box-shadow: none;
  }
  body.customer-mode .directory-search-actions .directory-search-divider { display: none; }
  body.customer-mode .directory-search-actions .directory-search {
    min-height: 48px; height: 48px; border: 1px solid var(--m-line); border-radius: 14px; background: #fff; box-shadow: 0 6px 18px -14px rgba(23, 19, 31, .4);
  }
  body.customer-mode .directory-search-actions .directory-search input { font-size: 16px; }
  body.customer-mode .directory-search-actions .discovery-filter-trigger {
    display: grid; place-items: center; width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0;
    border: 1px solid var(--m-line); border-radius: 14px; background: #fff; color: var(--m-ink);
  }
  body.customer-mode .directory-search-actions .discovery-filter-trigger > span:not(:has(svg)) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  body.customer-mode .directory-list .directory-salon-row {
    display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 12px; row-gap: 10px;
    padding: 12px; border: 1px solid var(--m-line); border-radius: var(--m-radius); background: #fff;
  }
  body.customer-mode .directory-list .directory-salon-media { position: relative; width: 88px; height: 88px; }
  body.customer-mode .directory-list .directory-salon-row .salon-thumb { width: 88px !important; height: 88px !important; border-radius: 12px; }
  body.customer-mode .directory-list .directory-media-save { top: 0; right: 0; width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
  body.customer-mode .directory-list .salon-row-main { display: grid; align-content: start; gap: 5px; min-width: 0; }
  body.customer-mode .directory-list .directory-salon-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  body.customer-mode .directory-list .directory-salon-heading h3 { overflow: hidden; margin: 0; font-size: 16px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  body.customer-mode .directory-list .directory-salon-heading p { display: -webkit-box; overflow: hidden; margin: 2px 0 0; color: var(--m-muted); font-size: 13px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  body.customer-mode .directory-list .directory-rating { font-size: 13px; }
  body.customer-mode .directory-list .tag-row { flex-wrap: nowrap; gap: 4px; overflow: hidden; }
  body.customer-mode .directory-list .tag-row > span { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background: var(--m-soft); color: var(--m-accent-ink); font-size: 12px; }
  body.customer-mode .directory-list .directory-meta { color: var(--m-muted); font-size: 13px; }
  body.customer-mode .directory-list .directory-meta b { color: var(--m-ink); }
  body.customer-mode .directory-list .directory-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  body.customer-mode .directory-list .directory-actions > button { width: 100%; min-height: 44px; height: 44px; font-size: 15px; }
  /* The floating List / Map switch never covers the last salon. */
  body.customer-mode .directory-list { padding-bottom: 76px; }
  body.customer-mode .directory-mobile-view-switch { border: 1px solid var(--m-line); box-shadow: 0 10px 30px -12px rgba(23, 19, 31, .45); }
  body.customer-mode .directory-mobile-view-switch button { min-height: 44px; font-size: 14px; }
  body.customer-mode .directory-mobile-view-switch button.active { background: var(--m-ink); color: #fff; }
}
@media (max-width: 760px) {
  /* Older phone sheets pin these columns and sizes with !important. */
  body.customer-mode .directory-list .directory-salon-row { grid-template-columns: 88px minmax(0, 1fr) !important; }
  body.customer-mode .directory-list .directory-salon-media { width: 88px !important; height: 88px !important; }
}

/* ---- Salon page ----------------------------------------------------------
   A tidy header, one info card, services that read as a menu, and a Book now
   bar that stays in reach above the tab bar. */
.salon-profile-phone-book { display: none; }
@media (max-width: 760px) {
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-public-profile { padding-bottom: 76px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-heading { position: relative; display: block; padding: 0; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-heading > div:first-child { display: grid; gap: 6px; padding-right: 0; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-back { justify-self: start; min-height: 44px; margin: 0 0 0 -6px; padding: 0 6px; font-size: 14px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-heading-actions { position: absolute; top: 0; right: 0; display: flex; gap: 8px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-heading-actions .icon-button { width: 44px; height: 44px; border-radius: 50%; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-heading h1 { margin: 2px 0 0; font-size: 28px; line-height: 1.12; letter-spacing: -0.03em; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-heading-tagline { margin: 0; font-size: 16px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-heading-description { margin: 0; color: var(--m-muted); font-size: 14px; line-height: 1.45; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-heading-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 13px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-heading-meta strong { font-size: 13px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-heading-meta button { min-height: 44px; font-size: 13px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-gallery { margin-top: 8px; border-radius: var(--m-radius); overflow: hidden; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-gallery,
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-gallery figure,
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-gallery img { max-height: 240px; }

  /* Section tabs stay under the header while the page scrolls. */
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-section-nav {
    position: sticky; top: calc(var(--mobile-header-height) + env(safe-area-inset-top)); z-index: 20;
    display: flex; gap: 4px; overflow-x: auto; margin: 4px calc(-1 * var(--m-gutter)) 0; padding: 0 var(--m-gutter);
    border-bottom: 1px solid var(--m-line); background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px); scrollbar-width: none;
  }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-section-nav::-webkit-scrollbar { display: none; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-section-nav button { flex: 0 0 auto; min-height: 48px; padding: 0 10px; font-size: 15px; }

  /* The rail's card repeats the header and the Book bar; keep only its facts. */
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-book-card { gap: 0; padding: 0; border: 1px solid var(--m-line); border-radius: var(--m-radius); box-shadow: none; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-book-card > .salon-profile-book-card-heading,
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-book-card > .salon-profile-book-button,
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-book-card > .salon-profile-card-actions { display: none; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-book-card .salon-profile-hours-toggle { min-height: 56px; padding: 8px 14px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-book-card { --salon-profile-detail-inline: 14px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-detail-list > div { min-height: 56px; padding-block: 9px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-detail-list :is(dt) { font-size: 12px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-detail-list :is(dd) { font-size: 14px; }

  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-body { gap: 20px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-main { gap: 28px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-section { gap: 12px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-section-heading { gap: 4px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-section-heading p { font-size: 11px; letter-spacing: .08em; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-section-heading h2 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-section-heading span { font-size: 14px; color: var(--m-muted); }

  /* Services: name and price on one line, a short description, one Book. */
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-category-rail { margin: 0 calc(-1 * var(--m-gutter)); padding: 0 var(--m-gutter); scrollbar-width: none; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-category-rail button { min-height: 40px; font-size: 14px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-group > h3 { margin: 8px 0 8px; font-size: 18px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-list { gap: 0; overflow: hidden; border: 1px solid var(--m-line); border-radius: var(--m-radius); background: #fff; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
    min-height: 0; margin: 0; padding: 14px; border: 0; border-top: 1px solid #f1eef6; border-radius: 0; background: transparent; box-shadow: none;
  }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-row:first-child { border-top: 0; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-row > div:first-child { display: grid; gap: 3px; min-width: 0; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-row h4 { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.3; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-row p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--m-muted); font-size: 13px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-row > div:first-child > span { color: #8a8398; font-size: 12px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-action { display: grid; justify-items: end; gap: 6px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-action strong { font-size: 15px; font-weight: 700; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-action button { min-width: 64px; min-height: 36px; height: 36px; padding: 0 14px; font-size: 14px; }

  /* Stylists: photo beside the name, both buttons the same size. */
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-stylist-grid { gap: 10px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-stylist-card {
    display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 6px 12px;
    padding: 14px; border: 1px solid var(--m-line); border-radius: var(--m-radius); background: #fff; box-shadow: none; text-align: left;
  }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-stylist-card > img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-stylist-card > div:not([class]) { display: grid; gap: 3px; min-width: 0; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-stylist-card h3 { margin: 0; font-size: 16px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-stylist-card p { margin: 0; font-size: 12px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-stylist-card > div > span { color: var(--m-muted); font-size: 13px; line-height: 1.4; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-stylist-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-stylist-actions > button { width: 100%; min-height: 44px; height: 44px; border-radius: 12px; font-size: 14px; text-decoration: none; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-stylist-actions > .salon-profile-stylist-view { border: 1px solid var(--m-line); background: #fff; color: var(--m-ink); }

  /* About: shorter map, compact hours and holidays. */
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-map-frame { height: 200px; min-height: 0; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-map-card > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; font-size: 14px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-weekly-hours li { min-height: 40px; font-size: 14px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-holiday-hours { display: grid; gap: 0; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-holiday-hours li { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 0; border: 0; border-top: 1px solid #f1eef6; border-radius: 0; background: transparent; box-shadow: none; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-holiday-hours li strong { font-size: 14px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-holiday-hours li small { font-size: 12px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-holiday-hours li > span { flex-shrink: 0; font-size: 12px; text-align: right; }

  /* The Book now bar, just above the tab bar. */
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-phone-book {
    position: fixed; z-index: 110; left: 0; right: 0; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 10px var(--m-gutter); border-top: 1px solid var(--m-line); background: rgba(255, 255, 255, .97); backdrop-filter: blur(16px);
    box-shadow: 0 -8px 24px -18px rgba(23, 19, 31, .4);
  }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-phone-book > span { display: grid; gap: 1px; min-width: 0; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-phone-book strong { overflow: hidden; color: var(--m-ink); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-phone-book small { overflow: hidden; color: var(--m-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-phone-book .salon-profile-book-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-width: 150px; min-height: 48px; height: 48px; margin: 0; padding: 0 22px; border-radius: 14px; font-size: 16px; }
  html.mobile-keyboard-open body.customer-mode .salon-profile-phone-book { display: none; }
}
@media (max-width: 760px) {
  /* Every section title has the same weight; sections are closer together. */
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-section + .salon-profile-section { padding-top: 24px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-section-heading h2,
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-stylist-card h3 { font-weight: 700; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-holiday-hours li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-holiday-hours li time { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-holiday-hours li > span { text-align: left; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-review-summary { padding: 16px; border-radius: var(--m-radius); }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-review-summary strong { font-size: 34px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-empty { padding: 20px 16px; border-radius: var(--m-radius); font-size: 14px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-policy-card { padding: 16px; border-radius: var(--m-radius); }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-policy-groups { gap: 10px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-policy-groups > article { padding: 14px; border-radius: 14px; }
}

/* ---- Booking -------------------------------------------------------------
   What was picked stays visible above the buttons, the guest chips and the
   month grid are shorter, and the two photo groups sit side by side. */
.booking-phone-summary { display: none; }
@media (max-width: 760px) {
  body.booking-workspace-mode .booking-main .booking-controls { grid-template-columns: minmax(76px, .3fr) minmax(0, 1fr); gap: 8px 10px; padding-top: 8px; }
  body.booking-workspace-mode .booking-phone-summary {
    grid-column: 1 / -1; display: grid; gap: 1px; min-width: 0; padding: 0 2px;
  }
  body.booking-workspace-mode .booking-phone-summary > span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  body.booking-workspace-mode .booking-phone-summary strong { color: #17131f; font-size: 14px; font-weight: 700; }
  body.booking-workspace-mode .booking-phone-summary b { color: #17131f; font-size: 15px; font-weight: 700; }
  body.booking-workspace-mode .booking-phone-summary small { overflow: hidden; color: #6b6478; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  body.booking-workspace-mode .booking-main .booking-controls > button.customer { min-height: 48px; height: 48px; font-size: 15px; white-space: nowrap; }

  body.booking-workspace-mode .booking-main .stepper button strong { font-size: 12px; }
  body.booking-workspace-mode .booking-title-bar h1 { font-size: 24px; letter-spacing: -0.02em; }

  body.booking-workspace-mode .booking-main .booking-guest-tab { min-height: 36px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; }
  body.booking-workspace-mode .booking-main .booking-guest-tabs-add { width: 36px; min-width: 36px; height: 36px; min-height: 36px; border-radius: 999px; }
  body.booking-workspace-mode .booking-main .booking-guest-tabs-shell { padding-bottom: 10px; }

  body.booking-workspace-mode .booking-main .choice-card { padding: 12px 14px; border-radius: 14px; }
  body.booking-workspace-mode .booking-main .choice-card strong { font-size: 16px; }

  body.booking-workspace-mode .booking-month-calendar .booking-month-day { min-height: 40px; height: 40px; font-size: 14px; }
  body.booking-workspace-mode .booking-month-calendar .booking-month-weekdays span { font-size: 11px; }
  body.booking-workspace-mode .booking-time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  body.booking-workspace-mode .booking-time-grid button { min-height: 44px; font-size: 14px; }

  body.booking-workspace-mode .booking-reference-workspace .booking-photo-groups,
  body.booking-workspace-mode .booking-photo-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  body.booking-workspace-mode .booking-photo-group { padding: 12px; }
  body.booking-workspace-mode .booking-photo-group-head { grid-template-columns: 28px minmax(0, 1fr) auto; }
  body.booking-workspace-mode .booking-photo-group-head h3 { font-size: 14px; }
  body.booking-workspace-mode .booking-photo-group-icon { width: 28px; height: 28px; }
  body.booking-workspace-mode .booking-photo-dropzone { display: grid; place-items: center; grid-template-columns: 1fr; min-height: 96px; padding: 10px; text-align: center; }
}
@media (max-width: 760px) {
  body.booking-workspace-mode .booking-photo-groups .booking-photo-group-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  body.booking-workspace-mode .booking-photo-groups .booking-photo-group-icon { display: none; }
  body.booking-workspace-mode .booking-photo-groups .booking-photo-group-head h3 { font-size: 14px; line-height: 1.2; }
  body.booking-workspace-mode .booking-photo-groups .booking-photo-count { flex-shrink: 0; font-size: 11px; }
  body.booking-workspace-mode .booking-photo-groups .booking-photo-dropzone small { display: none; }
}

/* ---- AI Try-on (coming soon) --------------------------------------------- */
@media (max-width: 760px) {
  body.customer-mode .tryon-coming-soon { gap: 12px; }
  body.customer-mode .tryon-coming-soon-hero { gap: 0; padding: 0; border-radius: 20px; overflow: hidden; }
  body.customer-mode .tryon-coming-soon-copy { gap: 10px; padding: 20px 18px 8px; }
  body.customer-mode .tryon-coming-soon-copy .eyebrow { margin: 4px 0 0; font-size: 11px; letter-spacing: .08em; }
  body.customer-mode .tryon-coming-soon-copy h1 { margin: 0; font-size: 28px; line-height: 1.12; letter-spacing: -0.03em; }
  body.customer-mode .tryon-coming-soon-copy > p:not(.eyebrow) { margin: 0; font-size: 15px; line-height: 1.5; }
  body.customer-mode .tryon-coming-soon-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
  body.customer-mode .tryon-coming-soon-actions > button { width: 100%; min-height: 48px; padding: 0 8px; font-size: 15px; }
  body.customer-mode .tryon-coming-soon-promises { gap: 6px; font-size: 14px; }
  body.customer-mode .tryon-coming-soon-visual { min-height: 0; height: auto; padding: 12px 0 22px; }
  body.customer-mode .tryon-coming-soon-visual > aside { display: none; }
  body.customer-mode .tryon-coming-soon-orbit { width: 280px; height: 280px; inset: auto; left: 50%; top: 24px; transform: translateX(-50%); }
  body.customer-mode .tryon-coming-soon-visual .tryon-style-switcher.is-hero { width: 200px; }
  body.customer-mode .tryon-coming-soon-details { gap: 8px; }
  body.customer-mode .tryon-coming-soon-details article { padding: 14px; border-radius: var(--m-radius); }
  body.customer-mode .tryon-coming-soon-details strong { font-size: 15px; }
  body.customer-mode .tryon-coming-soon-details p { font-size: 13px; }
}
@media (max-width: 760px) {
  body.customer-mode.me-workspace-mode .me-booking-feature.has-appointment .me-feature-copy .button-row { grid-template-columns: minmax(0, 1fr) auto 44px; }
  body.customer-mode.me-workspace-mode .me-booking-feature.has-appointment .me-feature-copy .button-row > .outline-button { padding: 0 14px; white-space: nowrap; }
}
@media (max-width: 760px) {
  /* Two tags fit a phone row; a third was cut mid-word. */
  body.customer-mode .directory-list .tag-row > span:nth-child(n + 3),
  body.customer-mode.me-workspace-mode .me-saved-tags > :nth-child(n + 3) { display: none; }
}

/* ---- Salon page and booking on phones: lighter rows and bars, and bars
   that step aside while scrolling down (ui/customer-motion.js toggles
   body.rl-chrome-hidden). ---------------------------------------------------- */
@media (max-width: 760px) {
  /* A service: name and price, the description across, then the time and a
     small Book. Every row lines up the same way. */
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name price" "desc desc" "meta book";
    align-items: center; column-gap: 12px; row-gap: 4px; padding: 14px 16px;
  }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-row > div:first-child,
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-row > .salon-profile-service-action { display: contents; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-row { min-height: 0; gap: 4px 12px; border-radius: 0; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-row h4 { grid-area: name; min-width: 0; margin: 0; font-size: 16px; font-weight: 650; line-height: 1.3; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-row h4 button { font: inherit; text-align: left; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-row [data-service-description] { grid-area: desc; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 0; color: #6f6879; font-size: 13px; line-height: 1.45; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-row [data-service-duration] { grid-area: meta; align-self: center; color: #8a8398; font-size: 12px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-row .salon-profile-service-action strong { grid-area: price; justify-self: end; color: #17131f; font-size: 14px; font-weight: 700; white-space: nowrap; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-service-row .salon-profile-service-action button {
    grid-area: book; justify-self: end; min-width: 0; min-height: 34px !important; height: 34px; margin-top: 4px; padding: 0 16px;
    border-radius: 999px; font-size: 13px; font-weight: 700; box-shadow: none;
  }

  /* Book now: a slimmer bar and button. */
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-phone-book { gap: 10px; padding: 8px var(--m-gutter); }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-phone-book strong { font-size: 15px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-phone-book small { font-size: 11px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-phone-book .salon-profile-book-button {
    min-width: 0; min-height: 40px !important; height: 40px; padding: 0 18px; gap: 6px; border-radius: 12px; font-size: 15px; box-shadow: none;
  }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-phone-book .salon-profile-book-button .icon { width: 16px; height: 16px; }

  /* Back and Continue: slimmer, and laid over the step so they can slide away. */
  body.booking-workspace-mode .booking-main.panel { position: relative; overflow: clip; }
  body.booking-workspace-mode .booking-main .booking-controls {
    position: absolute !important; left: 0; right: 0; bottom: 0;
    gap: 6px 10px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  body.booking-workspace-mode .booking-main .booking-controls > button.customer { min-height: 42px !important; height: 42px; padding: 0 12px; border-radius: 12px; font-size: 14px; }
  body.booking-workspace-mode .booking-phone-summary strong { font-size: 13px; }
  body.booking-workspace-mode .booking-phone-summary b { font-size: 14px; }
  body.booking-workspace-mode .booking-scroll { padding-bottom: calc(var(--rl-controls-h, 110px) + 16px); scroll-padding-bottom: calc(var(--rl-controls-h, 110px) + 16px); }

  /* Your hair now and The look you want: the same box twice. Titles hold two
     lines of room, so both upload areas start and end on the same lines. */
  body.booking-workspace-mode .booking-photo-groups { align-items: stretch; }
  body.booking-workspace-mode .booking-photo-groups .booking-photo-group { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
  body.booking-workspace-mode .booking-photo-groups .booking-photo-group-head { align-items: flex-start; min-height: 34px; }
  body.booking-workspace-mode .booking-photo-groups .booking-photo-dropzone { height: 100%; min-height: 110px; margin: 0; }

  /* Sliding away and back. */
  body.customer-mode .customer-topbar,
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-phone-book,
  body.booking-workspace-mode .booking-main .booking-controls {
    transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
  }
  /* The tabs follow the header by their sticky offset: it only moves them
     while they are stuck, so no gap opens under them anywhere else. */
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-section-nav { transition: top 300ms cubic-bezier(.22, 1, .36, 1); }
  body.rl-chrome-hidden.customer-mode .customer-topbar { transform: translateY(-100%); }
  body.rl-chrome-hidden.customer-mode .salon-profile-section-nav { top: env(safe-area-inset-top, 0px); }
  body.rl-chrome-hidden.customer-mode .salon-profile-phone-book { transform: translateY(calc(100% + 2px)); }
  body.rl-chrome-hidden.booking-workspace-mode .booking-main .booking-controls { transform: translateY(calc(100% + 2px)); }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) :is(.customer-topbar, .salon-profile-section-nav, .salon-profile-phone-book),
  body.booking-workspace-mode .booking-main .booking-controls { transition: none; }
}

/* ---- Tighter salon page and a full-height map on phones ------------------ */
@media (max-width: 760px) {
  /* The tabs scroll sideways only. */
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-section-nav { overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x; min-height: 0; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-section-nav button { min-height: 44px !important; height: 44px; font-size: 14px; }

  /* Hours, location, phone and the rest: one compact line each. */
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-book-card .salon-profile-hours-toggle { min-height: 0 !important; padding: 8px 12px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-book-card .salon-profile-hours-toggle small { font-size: 11px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-book-card .salon-profile-hours-toggle strong { font-size: 14px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-detail-list > div { min-height: 0; padding-block: 8px; padding-left: 50px !important; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-detail-list .salon-profile-detail-icon { left: 12px !important; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-detail-list dt { font-size: 11px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-detail-list dd { margin-top: 1px; font-size: 14px; line-height: 1.35; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-detail-list .salon-profile-detail-link { display: inline; min-height: 0 !important; padding: 0; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) :is(.salon-profile-detail-icon, .salon-profile-hours-clock) { width: 30px; height: 30px; min-width: 30px; border-radius: 9px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) :is(.salon-profile-detail-icon, .salon-profile-hours-clock) .icon { width: 16px; height: 16px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-hours-chevron { width: 28px; height: 28px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-body { gap: 16px; padding-top: 12px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-main { gap: 24px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-section-heading h2 { font-size: 20px; }

  /* Salons: the page is pinned to the visible screen, so the map reaches the
     tab bar whatever Safari's toolbar is doing, and nothing scrolls the page
     itself. The search row is slimmer; Search this area sits at the top of
     the map and the List / Map switch floats at its foot. */
  body.customer-mode.salon-directory-mode .customer-shell { position: fixed; inset: 0; height: auto; overflow: hidden; }
  body.customer-mode.salon-directory-mode .customer-shell > .page-wrap { padding-bottom: 0 !important; }
  body.customer-mode.salon-directory-mode .salon-directory-page { padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)) !important; }
  body.customer-mode.salon-directory-mode .salon-directory-controls { padding: 6px 12px; }
  body.customer-mode.salon-directory-mode .directory-search-actions { min-height: 40px; }
  body.customer-mode.salon-directory-mode .directory-search-actions .directory-search { min-height: 40px; height: 40px; }
  body.customer-mode.salon-directory-mode .directory-search input { min-height: 38px !important; height: 38px; padding-block: 0; }
  body.customer-mode.salon-directory-mode .directory-search-actions .discovery-filter-trigger { min-height: 40px !important; min-width: 40px; height: 40px; width: 40px; }
  body.customer-mode .directory-search-area-button { top: 12px !important; bottom: auto !important; left: 50%; min-height: 36px !important; padding: 8px 14px; font-size: 13px; }
  body.customer-mode .directory-mobile-view-switch { bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 12px); padding: 3px; }
  body.customer-mode .directory-mobile-view-switch button { min-height: 36px !important; height: 36px; padding: 0 14px; font-size: 13px; }
}

/* ---- Phone buttons that are meant to be small ----------------------------
   styles.css holds every customer button at 44px with !important on phones;
   these are sized on purpose, so they say so with !important too. */
@media (max-width: 760px) {
  /* Discover search: a round 34px button inside a 42px bar, text centred. */
  body.customer-mode .discover-search-form { align-items: center; }
  body.customer-mode .discover-search-submit { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; flex: 0 0 34px; padding: 0; border-radius: 50%; }
  body.customer-mode .discover-search-form input { align-self: center; line-height: 34px; }
  body.customer-mode .discover-search-shortcuts > button { min-height: 32px !important; min-width: 0 !important; }

  /* Salon page stylists: two slim buttons. */
  /* Two slim pills under the stylist's words, not two half-card slabs. */
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-stylist-card > .salon-profile-stylist-actions { grid-column: 2 / -1; display: flex; gap: 8px; margin-top: 2px; }
  :is(body.customer-mode, body.pro-mode .salon-home-editor-canvas) .salon-profile-stylist-actions > button {
    width: auto; min-height: 32px !important; height: 32px; min-width: 0 !important; padding: 0 14px;
    border-radius: 999px; font-size: 13px; font-weight: 650; box-shadow: none;
  }
}
@media (max-width: 760px) {
  /* The date line reads as words, not as the old all-caps date parts. */
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-date .customer-appointment-feature-fulldate,
  body.customer-mode.me-workspace-mode .me-dashboard .customer-appointment-feature-date .customer-appointment-feature-fulldate :is(b, i) { text-transform: none; letter-spacing: 0; }
}

/* ---- My Hair: nothing is ever wider than the screen ------------------------
   A long name, email, address or service with no space in it used to widen
   its grid column past the screen; the page clipped the overflow, so cards
   ran to the right edge with no margin. Every box may shrink below its
   content and long words wrap, so both margins hold. */
@media (max-width: 760px) {
  body.me-workspace-mode .me-workspace,
  body.me-workspace-mode .me-workspace * { min-width: 0; }
  body.me-workspace-mode .me-workspace :is(h1, h2, h3, h4, p, span, strong, small, b, em, dd, dt, a, li, button, label) { overflow-wrap: anywhere; }
  body.me-workspace-mode .me-workspace :is(img, video, canvas, svg:not(.icon)) { max-width: 100%; }
  /* Lines that stay on one line end in an ellipsis inside their card. */
  body.me-workspace-mode .me-workspace .me-history-card-title { grid-template-columns: minmax(0, 1fr); }
  body.me-workspace-mode .me-workspace .me-history-card-title > * { max-width: 100%; }
}

/* ---- The first-load screen sits in the middle of the page -----------------
   On My Hair the page rules set the main area's height to its content, so the
   loading card sat under the header. It fills the space below the header and
   centres there, whatever page is loading. */
body.customer-mode .customer-hydration-shell { display: flex; flex-direction: column; height: 100dvh; min-height: 0; overflow: hidden; }
body.customer-mode .customer-hydration-shell > .customer-hydration-topbar { flex: none; }
body.customer-mode .customer-hydration-shell > .customer-hydration-main {
  display: grid; flex: 1 1 auto; place-items: center;
  height: auto !important; min-height: 0 !important;
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom)) !important;
}