/* Phones: the customer side as an app, not a page.
   One flat ground under an opaque header and an opaque tab bar, so Safari
   (which colours the status bar and its own toolbar from them) shows no seam
   above the header or under the tab bar. Discover is shorter and its cards
   smaller; booking keeps Back and Continue on the screen's bottom edge with
   nothing behind them. Loaded after the older phone sheets; nothing here
   applies above 760px. */

.me-native-hub { display: none; }

@media (max-width: 760px) {
  html:has(> body.customer-mode) { background-color: #f7f6fa; }
  html body.customer-mode { --native-ground: #f7f6fa; --native-bar: #ffffff; --native-hairline: rgba(23, 19, 31, 0.1); background-color: var(--native-ground); }

  /* ---- Header: the ground's own colour, a hairline only once scrolled ---- */
  html body.customer-mode .customer-shell .customer-topbar {
    min-height: calc(50px + env(safe-area-inset-top));
    border-bottom: 0;
    background: var(--native-ground);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 0.5px 0 transparent;
    transition: box-shadow 0.2s ease;
  }
  html.rl-scrolled body.customer-mode .customer-shell .customer-topbar { box-shadow: 0 0.5px 0 var(--native-hairline); }
  html body.customer-mode .customer-mobile-header-actions a { min-height: 36px; padding: 0 12px; }

  /* ---- Tab bar: a slim rounded pill floating just above the bottom edge,
     as in the app. Only the safe area it truly needs is left under it. ---- */
  html body.customer-mode {
    --mobile-nav-height: 64px;
    --native-tabbar-gap: max(8px, calc(env(safe-area-inset-bottom) - 22px));
    /* What the bar really takes from the bottom of the screen. */
    --native-tabbar-total: calc(56px + var(--native-tabbar-gap));
  }
  html body.customer-mode .customer-shell .mobile-tabbar {
    left: 12px;
    right: 12px;
    bottom: var(--native-tabbar-gap);
    width: auto;
    height: 56px;
    min-height: 0;
    padding: 4px;
    gap: 2px;
    border: 0.5px solid rgba(23, 19, 31, 0.08);
    border-top: 0.5px solid rgba(23, 19, 31, 0.08);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: 0 10px 30px -12px rgba(23, 19, 31, 0.3), 0 1px 3px rgba(23, 19, 31, 0.06);
  }
  html body.customer-mode .customer-shell .mobile-tabbar .nav-link {
    min-height: 48px;
    height: 48px;
    padding: 4px 2px 3px;
    gap: 2px;
    border-radius: 24px;
    font-size: 10.5px;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.16s ease;
  }
  html body.customer-mode .customer-shell .mobile-tabbar .nav-link .icon { width: 22px; height: 22px; }
  html body.customer-mode .customer-shell .mobile-tabbar .nav-link.active { background: #f1edfb; color: #5236b3; }
  html body.customer-mode .customer-shell .mobile-tabbar .nav-link.active::before { content: none; }
  html body.customer-mode .customer-shell .mobile-tabbar .nav-link:active { transform: scale(0.92); }

  /* ---- Discover ----------------------------------------------------------
     At a glance: a title, the search, the categories, then salons. The
     marketing photo, the eyebrow line and the business promo stay on wider
     screens; the footer keeps only its help links. */
  html body.customer-mode .discover-page .search-copy .eyebrow { display: none; }
  html body.customer-mode .discover-page .visual-panel { display: none; }
  html body.customer-mode .discover-page .discover-promo-pro { display: none; }
  html body.customer-mode .customer-shell .customer-footer :is(.customer-footer-brand, .customer-footer-social) { display: none; }
  html body.customer-mode .customer-shell .customer-footer .customer-footer-column:first-of-type { display: none; }
  html body.customer-mode .customer-shell .customer-footer .customer-footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
  html body.customer-mode .customer-shell .customer-footer { margin-top: 12px; padding-top: 20px; }
  html body.customer-mode .customer-shell .customer-footer :is(a, strong) { min-height: 30px; font-size: 13px; }

  html body.customer-mode .discover-page { gap: 22px; }
  html body.customer-mode .discover-page .customer-main-grid { border-radius: 0; background: transparent; box-shadow: none; }
  html body.customer-mode .discover-page .search-panel { gap: 12px; padding: 4px 2px 0; background: transparent; }
  html body.customer-mode .discover-page .search-copy { gap: 6px; }
  html body.customer-mode .discover-page .search-copy .eyebrow { font-size: 10px; letter-spacing: 0.1em; }
  html body.customer-mode .discover-page .search-copy h1 { font-size: 26px; line-height: 1.12; letter-spacing: -0.02em; }
  /* The search field: one height, typing or not, with its icon and button on one centre line;
     16px, so iOS never zooms into it. */
  html body.customer-mode .discover-page .discover-search-form { height: 46px; min-height: 46px; padding: 4px 4px 4px 14px; align-items: center; gap: 8px; }
  html body.customer-mode .discover-page .discover-search-form input:is(*, :focus, :focus-visible) {
    height: 38px;
    min-height: 38px;
    padding: 0;
    font-size: 16px;
    line-height: 38px;
    align-self: center;
  }
  html body.customer-mode .discover-page .discover-search-submit { flex: 0 0 38px; width: 38px !important; height: 38px !important; min-height: 38px !important; align-self: center; }
  html body.customer-mode .discover-page .discover-search-location { align-self: center; }
  html body.customer-mode .discover-page .discover-search-shortcuts button { min-height: 34px; height: 34px; padding: 0 14px; font-size: 14px; }
  /* Salon rows: a title, no line under it, and smaller cards. */
  html body.customer-mode .discover-page .discover-row-heading p { display: none; }
  html body.customer-mode .discover-page :is(.discover-row-heading h2, .discover-marketplace-heading h2) { font-size: 19px; }
  html body.customer-mode .discover-page .discover-salon-section { gap: 10px; }
  html body.customer-mode .discover-page .discover-salon-track { grid-auto-columns: min(226px, 62%); gap: 10px; padding: 2px 1px 8px; scroll-padding-inline: 1px; }
  html body.customer-mode .discover-page .discover-salon-card { border-radius: 16px; }
  html body.customer-mode .discover-page .discover-salon-image { aspect-ratio: 16 / 10; height: auto; }
  html body.customer-mode .discover-page .discover-salon-body { gap: 6px; padding: 10px 12px 11px; }
  html body.customer-mode .discover-page .discover-salon-body h3 { font-size: 15px; line-height: 1.25; }
  html body.customer-mode .discover-page .discover-salon-body h3 .sample-salon-badge { margin-left: 6px; padding: 1px 6px; font-size: 9.5px; vertical-align: 2px; }
  html body.customer-mode .discover-page .discover-card-location { font-size: 12.5px; }
  html body.customer-mode .discover-page .discover-card-location span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body.customer-mode .discover-page .discover-card-tags { gap: 5px; }
  html body.customer-mode .discover-page .discover-card-tags span { padding: 3px 8px; font-size: 11.5px; }
  /* The photo already carries the card's badge and rating; the chips under
     the name only repeated them. */
  html body.customer-mode .discover-page .discover-card-tags { display: none; }
  html body.customer-mode .discover-page .discover-salon-body { justify-content: flex-start; }
  html body.customer-mode .discover-page .discover-card-footer { margin-top: auto; padding-top: 2px; font-size: 12px; }
  html body.customer-mode .discover-page .discover-card-book-link { min-height: 32px; font-size: 13px; }
  html body.customer-mode .discover-page :is(.discover-card-badge, .discover-card-rating) { font-size: 12px; }
  html body.customer-mode .discover-page .salon-save-button { width: 34px; height: 34px; min-height: 34px; }

  /* ---- Booking: no line under the header, nothing behind Back and Continue */
  html body.booking-workspace-mode { --native-ground: #f7f6f9; }
  html body.booking-workspace-mode:not(.booking-site) .booking-shellbar { border-bottom: 0; background: var(--native-ground); }
  html body.booking-workspace-mode.booking-site .booking-shellbar { border-bottom: 0; }
  html body.booking-workspace-mode .booking-main .booking-controls {
    border-top: 0;
    box-shadow: none;
    padding: 18px 16px max(10px, calc(env(safe-area-inset-bottom) - 8px));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
  }
  html body.booking-workspace-mode .booking-main .booking-controls > * { pointer-events: auto; }
  /* The page fades out under the buttons instead of stopping at a white band. */
  html body.booking-workspace-mode:not(.booking-site) .booking-main .booking-controls {
    background: linear-gradient(180deg, rgba(247, 246, 249, 0) 0%, rgba(247, 246, 249, 0.86) 42%, var(--native-ground) 78%);
  }
  html body.booking-workspace-mode:not(.booking-site) .booking-main .booking-controls .outline-button.customer { background: #fff; box-shadow: 0 6px 18px -12px rgba(23, 19, 31, 0.35); }
  html body.booking-workspace-mode:not(.booking-site) .booking-main .booking-controls :is(.outline-button, .solid-button).customer:not([data-action="booking-next"]) { height: 50px; min-height: 50px; border-radius: 16px; }
  /* One person and no one to add: the person row says nothing. */
  html body.booking-workspace-mode .booking-guest-tabs-shell:not(:has(.booking-guest-tabs-add)):not(:has(.booking-guest-tab-item + .booking-guest-tab-item)) { display: none; }
  html body.booking-workspace-mode .booking-title-bar h1 { font-size: 22px; }

  /* ---- My Hair: a home screen -------------------------------------------
     Who you are, what is next, four tiles for what is opened most, then two
     short lists. The desktop overview's discovery content stays on Discover. */
  html body.customer-mode.me-workspace-mode .me-workspace:has(> .me-native-hub) > :is(.me-page-header, .me-kpi-strip, .me-feature-grid, .me-overview-lower) { display: none; }
  html body.customer-mode.me-workspace-mode .me-workspace:has(> .me-native-hub) { gap: 14px; padding-top: 6px; }
  html body.customer-mode .me-native-hub { --hub-ink: #17131f; --hub-muted: #6b6478; --hub-accent: #6b4fd8; --hub-tint: #f1edfb; display: grid; gap: 14px; }
  html body.customer-mode .me-native-hub button { -webkit-tap-highlight-color: transparent; transition: transform 0.16s ease, background-color 0.16s ease; }
  html body.customer-mode .me-native-hub :is(.me-native-next, .me-native-pro, .me-native-tile):active { transform: scale(0.97); }

  html body.customer-mode .me-native-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 2px 2px 0; }
  html body.customer-mode .me-native-head p { margin: 0 0 2px; color: var(--hub-muted); font-size: 14px; font-weight: 550; }
  html body.customer-mode .me-native-head h1 { margin: 0; color: var(--hub-ink); font-size: 32px; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
  html body.customer-mode .me-native-avatar {
    display: grid; place-items: center; flex: none; overflow: hidden;
    width: 44px; height: 44px; min-height: 44px !important; padding: 0;
    border: 0; border-radius: 50%; background: #ece7f6; color: var(--hub-accent); font-size: 15px; font-weight: 750;
    box-shadow: 0 0 0 2px #fff, 0 6px 14px -8px rgba(23, 19, 31, 0.45);
  }
  html body.customer-mode .me-native-avatar img { width: 100%; height: 100%; object-fit: cover; }

  /* What is next. */
  html body.customer-mode .me-native-next {
    display: grid; grid-template-columns: 54px minmax(0, 1fr) 18px; align-items: center; gap: 12px;
    width: 100%; min-height: 82px !important; height: auto; margin: 0; padding: 12px 14px 12px 12px;
    border: 0; border-radius: 20px; background: #fff; color: var(--hub-ink); text-align: left;
    box-shadow: 0 1px 2px rgba(23, 19, 31, 0.04);
  }
  html body.customer-mode .me-native-next.is-soon { background: linear-gradient(120deg, #45c9a3 0%, #7486ee 55%, #8e5cec 100%); color: #fff; box-shadow: 0 14px 30px -18px rgba(116, 98, 230, 0.9); }
  html body.customer-mode .me-native-next-date { display: grid; justify-items: center; align-content: center; width: 54px; height: 58px; border-radius: 14px; background: var(--hub-tint); }
  html body.customer-mode .me-native-next.is-soon .me-native-next-date { background: rgba(255, 255, 255, 0.22); }
  html body.customer-mode .me-native-next-date small { color: var(--hub-accent); font-size: 11px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
  html body.customer-mode .me-native-next-date strong { font-size: 24px; font-weight: 800; line-height: 1.05; }
  html body.customer-mode .me-native-next-copy { display: grid; gap: 2px; min-width: 0; }
  html body.customer-mode .me-native-next-copy small { color: var(--hub-accent); font-size: 11px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
  html body.customer-mode .me-native-next-copy strong { overflow: hidden; font-size: 16.5px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
  html body.customer-mode .me-native-next-copy > span { overflow: hidden; color: var(--hub-muted); font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
  html body.customer-mode .me-native-next.is-soon :is(.me-native-next-date small, .me-native-next-copy small) { color: rgba(255, 255, 255, 0.9); }
  html body.customer-mode .me-native-next.is-soon .me-native-next-copy > span { color: rgba(255, 255, 255, 0.92); }
  html body.customer-mode .me-native-next > .icon { width: 18px; height: 18px; color: #b8b1c6; }
  html body.customer-mode .me-native-next.is-soon > .icon { color: rgba(255, 255, 255, 0.85); }
  html body.customer-mode .me-native-next.is-empty { grid-template-columns: 46px minmax(0, 1fr) auto; min-height: 0 !important; }
  html body.customer-mode .me-native-next-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--hub-tint); color: var(--hub-accent); }
  html body.customer-mode .me-native-next-icon .icon { width: 22px; height: 22px; }
  html body.customer-mode .me-native-next.is-empty .me-native-next-copy strong { font-size: 15.5px; }
  html body.customer-mode .me-native-next.is-empty .me-native-next-copy > span { white-space: normal; }
  html body.customer-mode .me-native-next.is-empty > button { height: 38px; min-height: 38px !important; padding: 0 18px; border-radius: 999px; font-size: 14px; }

  /* A professional's salons. */
  html body.customer-mode .me-native-pro {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 12px;
    width: 100%; min-height: 64px !important; margin: 0; padding: 10px 14px 10px 12px;
    border: 0; border-radius: 18px; background: linear-gradient(90deg, #f3eeff, #fff 75%); color: var(--hub-ink); text-align: left;
    box-shadow: 0 1px 2px rgba(23, 19, 31, 0.04);
  }
  html body.customer-mode .me-native-pro-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #45c9a3, #7486ee 55%, #8e5cec); color: #fff; }
  html body.customer-mode .me-native-pro-icon .icon { width: 20px; height: 20px; }
  html body.customer-mode .me-native-pro strong { display: block; font-size: 16px; font-weight: 700; }
  html body.customer-mode .me-native-pro small { display: block; color: var(--hub-muted); font-size: 13px; }
  html body.customer-mode .me-native-pro > .icon { width: 18px; height: 18px; color: #b8b1c6; }

  /* Four tiles. */
  html body.customer-mode .me-native-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html body.customer-mode .me-native-tile {
    position: relative; display: grid; align-content: start; justify-items: start; gap: 2px;
    width: 100%; min-height: 108px !important; height: auto; margin: 0; padding: 14px;
    border: 0; border-radius: 18px; background: #fff; color: var(--hub-ink); text-align: left;
    box-shadow: 0 1px 2px rgba(23, 19, 31, 0.04);
  }
  html body.customer-mode .me-native-tile-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 10px; border-radius: 12px; background: var(--hub-tint); color: var(--hub-accent); }
  html body.customer-mode .me-native-tile-icon .icon { width: 20px; height: 20px; }
  html body.customer-mode .me-native-tile:nth-child(2) .me-native-tile-icon { background: #e4f6ef; color: #1f7a5c; }
  html body.customer-mode .me-native-tile:nth-child(3) .me-native-tile-icon { background: #fcebf4; color: #b0397a; }
  html body.customer-mode .me-native-tile:nth-child(4) .me-native-tile-icon { background: #fff0ec; color: #c2453b; }
  html body.customer-mode .me-native-tile strong { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
  html body.customer-mode .me-native-tile small { overflow: hidden; max-width: 100%; color: var(--hub-muted); font-size: 12.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
  html body.customer-mode .me-native-tile-count { position: absolute; top: 14px; right: 14px; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--hub-accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }

  /* Two short lists, inset separators as on iOS. */
  html body.customer-mode .me-native-group { display: grid; gap: 6px; }
  html body.customer-mode .me-native-group h2 { margin: 4px 6px 0; color: var(--hub-muted); font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
  html body.customer-mode .me-native-group > div { overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(23, 19, 31, 0.04); }
  html body.customer-mode .me-native-row {
    position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px;
    width: 100%; min-height: 52px !important; height: auto; margin: 0; padding: 8px 14px;
    border: 0; border-radius: 0; background: #fff; color: var(--hub-ink); font-size: 16px; font-weight: 550; text-align: left; box-shadow: none;
  }
  html body.customer-mode .me-native-row + .me-native-row::before { content: ""; position: absolute; top: 0; left: 58px; right: 0; height: 0.5px; background: rgba(23, 19, 31, 0.12); }
  html body.customer-mode .me-native-row:active { background: #f6f3fc; }
  html body.customer-mode .me-native-row-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--hub-tint); color: var(--hub-accent); }
  html body.customer-mode .me-native-row-icon .icon { width: 17px; height: 17px; }
  html body.customer-mode .me-native-row > b { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--hub-accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
  html body.customer-mode .me-native-row > .icon:last-child { width: 16px; height: 16px; color: #c0bacb; }

  /* Sub-pages: the back bar is part of the header, not a band under it. */
  html body.customer-mode.me-workspace-mode .me-phone-back { border-bottom: 0; background: var(--native-ground); -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* ---- Booking, compact and native ----------------------------------------
     Back is the header's arrow, so the bottom carries one round Continue on
     the right (the last step keeps its full-width Book or Pay). The scroll
     leaves room under the last card so nothing sits behind the button. */
  html body.booking-workspace-mode .booking-main .booking-scroll { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  html body.booking-workspace-mode .booking-main .booking-controls {
    left: 0;
    right: 0;
    width: auto;
    display: flex !important;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 0;
    padding: 0 16px max(14px, calc(env(safe-area-inset-bottom) - 6px));
    background: none !important;
  }
  html body.booking-workspace-mode .booking-main .booking-controls [data-action="booking-prev"] { display: none; }
  html body.booking-workspace-mode .booking-main .booking-controls > :is(.solid-button, .outline-button):not([data-action="booking-next"]) { flex: 1 1 auto; }
  html body.booking-workspace-mode .booking-main .booking-controls [data-action="booking-next"] {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    min-height: 58px !important;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    box-shadow: 0 14px 28px -14px rgba(91, 63, 196, 0.85);
    transition: transform 0.18s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  }
  html body.booking-workspace-mode .booking-main .booking-controls [data-action="booking-next"]:disabled { box-shadow: none; }
  html body.booking-workspace-mode .booking-main .booking-controls [data-action="booking-next"]:not(:disabled):active { transform: scale(0.92); }
  html body.booking-workspace-mode .booking-main .booking-controls [data-action="booking-next"] .icon { width: 26px; height: 26px; margin: 0; stroke-width: 2.4; }
  html body.booking-workspace-mode .booking-main .booking-controls .booking-next-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  html body.booking-workspace-mode .booking-main .booking-controls [data-action="booking-next"] .booking-payment-spinner { width: 22px; height: 22px; margin: 0; }

  /* The person row and the categories stay at the top as they scroll, so they are slim. */
  html body.booking-workspace-mode .booking-guest-tabs-shell { padding-bottom: 6px; }
  html body.booking-workspace-mode .booking-guest-tabs-row { padding-top: 4px; }
  html body.booking-workspace-mode :is(.booking-guest-tab, .booking-guest-tabs-add) { min-height: 36px !important; height: 36px; }
  html body.booking-workspace-mode .booking-guest-tabs-add { width: 36px; }
  html body.booking-workspace-mode .booking-category-rail { padding: 4px 0 10px; }
  html body.booking-workspace-mode .booking-category-chip { min-height: 36px !important; height: 36px; padding: 0 14px; font-size: 14px; }
  html body.booking-workspace-mode .booking-category-arrow { width: 32px; height: 32px; min-height: 32px !important; }
  html body.booking-workspace-mode .booking-service-group { gap: 8px; }
  html body.booking-workspace-mode .booking-service-group > h3 { font-size: 16px; }
  html body.booking-workspace-mode .booking-guest-services { gap: 8px; }

  /* Service cards: name, length and price on two lines, the text kept short. */
  html body.booking-workspace-mode .booking-service-choice-shell > .choice-card {
    gap: 8px;
    padding: 12px 14px;
    border-radius: 16px;
  }
  html body.booking-workspace-mode .booking-service-copy { gap: 2px; }
  html body.booking-workspace-mode .booking-service-copy > strong { font-size: 15.5px; line-height: 1.3; }
  html body.booking-workspace-mode .booking-service-duration { font-size: 13px; }
  html body.booking-workspace-mode .booking-service-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 13px;
    line-height: 1.4;
  }
  html body.booking-workspace-mode .booking-service-copy :is(.booking-service-policy, .booking-service-note, b, em) { font-size: 12.5px; line-height: 1.35; }
  html body.booking-workspace-mode .booking-service-addon-hint { font-size: 12px; }
  html body.booking-workspace-mode .booking-service-foot { margin-top: 2px; }
  html body.booking-workspace-mode .booking-service-foot > b { font-size: 15px; }
  html body.booking-workspace-mode .booking-service-choice-shell .booking-service-select-marker { width: 32px; height: 32px; min-height: 32px; }
  html body.booking-workspace-mode .booking-service-choice-shell .booking-service-select-marker .icon { width: 15px; height: 15px; }

  /* Stylist cards: one compact row. */
  html body.booking-workspace-mode .booking-professional-option-shell { border-radius: 16px; }
  html body.booking-workspace-mode .booking-professional-option { gap: 12px; min-height: 0 !important; padding: 12px 52px 12px 12px; }
  html body.booking-workspace-mode .booking-professional-option > img { width: 52px; height: 52px; }
  html body.booking-workspace-mode .booking-professional-info { gap: 1px; }
  html body.booking-workspace-mode .booking-professional-info strong { font-size: 15.5px; }
  html body.booking-workspace-mode .booking-professional-info small { font-size: 13.5px; }
  html body.booking-workspace-mode .booking-professional-next { font-size: 12.5px; }
  html body.booking-workspace-mode .booking-professional-profile-button { min-height: 32px !important; font-size: 13px; }
  html body.booking-workspace-mode .booking-professional-select-marker { width: 28px; height: 28px; }

  /* References: two short rows to add photos to, and a smaller note. */
  html body.booking-workspace-mode .booking-photo-groups { gap: 10px; }
  html body.booking-workspace-mode .booking-photo-group { gap: 10px; padding: 12px; border-radius: 16px; }
  html body.booking-workspace-mode .booking-photo-group-head strong { font-size: 15px; }
  html body.booking-workspace-mode .booking-photo-group-head small { font-size: 12.5px; }
  html body.booking-workspace-mode .booking-photo-dropzone { min-height: 0 !important; padding: 12px; border-radius: 12px; }
  html body.booking-workspace-mode .booking-photo-dropzone > span { gap: 2px; }
  html body.booking-workspace-mode .booking-photo-dropzone strong { font-size: 14.5px; }
  html body.booking-workspace-mode .booking-photo-dropzone small { font-size: 12px; }
  html body.booking-workspace-mode .booking-customer-note { padding: 12px; border-radius: 16px; }
  html body.booking-workspace-mode .booking-customer-note textarea { min-height: 72px; height: 72px; padding: 10px 12px; }

  /* ---- A stylist's profile is a sheet over the page, not a new page ---- */
  html body .stylist-profile-modal-layer { place-items: end stretch; padding: 0; }
  html body:is(.customer-mode, .salon-site-mode, .booking-workspace-mode) .stylist-profile-modal-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-height: min(88dvh, calc(100dvh - 32px));
    border: 0;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -18px 50px rgba(32, 26, 48, 0.22);
    animation: native-sheet-up 0.34s cubic-bezier(.22, 1, .36, 1) both;
  }
  html body .stylist-profile-modal-card::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 7px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 4px;
    background: rgba(23, 19, 31, 0.18);
  }
  html body .stylist-profile-modal-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
  html body:is(.customer-mode, .salon-site-mode, .booking-workspace-mode) .stylist-profile-modal-header { min-height: 52px; padding: 10px 12px; }
  html body:is(.customer-mode, .salon-site-mode, .booking-workspace-mode) .stylist-profile-modal-header .icon-button { width: 36px; height: 36px; min-width: 36px; min-height: 36px !important; }
  html body:is(.customer-mode, .salon-site-mode, .booking-workspace-mode) .stylist-profile-modal-hero { gap: 8px; padding: 26px 18px 16px; }
  html body:is(.customer-mode, .salon-site-mode, .booking-workspace-mode) .stylist-profile-modal-hero > img { width: 84px; height: 84px; border-width: 3px; }
  html body:is(.customer-mode, .salon-site-mode, .booking-workspace-mode) .stylist-profile-modal-identity { gap: 4px; }
  html body:is(.customer-mode, .salon-site-mode, .booking-workspace-mode) .stylist-profile-modal-identity h2 { font-size: 23px; }
  html body:is(.customer-mode, .salon-site-mode, .booking-workspace-mode) .stylist-profile-modal-identity > span { font-size: 13.5px; line-height: 1.45; }
  html body:is(.customer-mode, .salon-site-mode, .booking-workspace-mode) .stylist-profile-modal-cta { width: 100%; min-height: 46px !important; height: 46px; margin-top: 4px; border-radius: 14px; }
  html body:is(.customer-mode, .salon-site-mode, .booking-workspace-mode) .stylist-profile-modal-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html body:is(.customer-mode, .salon-site-mode, .booking-workspace-mode) .stylist-profile-modal-stats > div { gap: 2px; padding: 10px 6px; text-align: center; }
  html body:is(.customer-mode, .salon-site-mode, .booking-workspace-mode) .stylist-profile-modal-stats strong { font-size: 17px; }
  html body:is(.customer-mode, .salon-site-mode, .booking-workspace-mode) .stylist-profile-modal-stats span { font-size: 10.5px; line-height: 1.25; }
  html body:is(.customer-mode, .salon-site-mode, .booking-workspace-mode) .stylist-profile-modal-section { padding: 16px; }
  @keyframes native-sheet-up { from { transform: translateY(100%); } }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  html body .stylist-profile-modal-card { animation: none !important; }
}