/* ═══════════════════════════════════════════════════════════════════════════
   LM PROFILE — MOBILE STYLESHEET (Phase 2.2)
   Active < 768px. Wraps every rule in @media (max-width: 767px).
   Loaded AFTER lm-profile.css so mobile rules override desktop.
   Baseline: 360px (Samsung Galaxy A). Tested up to 767px.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Phase H R60: on mobile force every .lm-tier-sm badge (sidebar
     account, switch modal, profile.tpl modals) to render at FULL-SIZE
     .lm-tier proportions — same as the profile hero. The compact sm
     variant looks lost on mobile; user wants consistency with the big
     badge from /people. */
  .lm-tier-sm {
    padding: 5px 10px !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    border-radius: 5px !important;
    gap: 5px !important;
  }
  .lm-tier-sm svg {
    width: 10px !important;
    height: 10px !important;
  }

  /* ── iOS / touch baseline ─────────────────────────────── */
  html, body { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
  * { -webkit-tap-highlight-color: transparent; }
  /* Prevent iOS zoom-on-focus by forcing 16px input font-size */
  input, textarea, select { font-size: 16px !important; }

  /* Tap targets — 44×44 minimum (Apple HIG) */
  .lm-icon-btn, .lm-icon-btn-pop, .lm-btn, .lm-tab,
  .lm-action-icon-btn, .lm-port-filter-btn, .lm-cdrop-trigger,
  .lm-fab, .lm-cover-edit-btn, .lm-modal-close {
    min-height: 44px;
  }

  /* ════════════════════════════════════════════════════════
     CHROME — hide desktop sidebar/topbar, show mobile header
     ════════════════════════════════════════════════════════ */
  .lm-sidebar { display: none !important; }
  .lm-topbar { display: none !important; }

  /* Mobile header (rendered globally via _lm_mobile_header.tpl) */
  .lm-m-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: 56px;
    background: var(--lm-surface, #fff);
    border-bottom: 1px solid var(--lm-border, #e2e8f0);
    display: grid;
    grid-template-columns: 44px 1fr 44px 44px;
    align-items: center;
    padding: 0 6px;
  }
  .lm-m-header-btn {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--lm-text, #0f172a);
    border-radius: 10px;
    background: transparent;
    border: 0;
    position: relative;
    cursor: pointer;
  }
  .lm-m-header-btn:active { background: var(--lm-surface-2, #f1f5f9); }
  /* R20z: Avatar trigger replaces hamburger */
  .lm-m-header-avatar-btn { padding: 0 !important; }
  .lm-m-header-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    border: 1.5px solid var(--lm-border, #e2e8f0);
    background: var(--lm-surface-2, #f1f5f9);
  }
  .lm-m-header-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .lm-m-header-logo {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-weight: 700; font-size: 15px; letter-spacing: -0.02em;
    color: var(--lm-primary-strong, #0a5439);
    text-decoration: none;
  }
  .lm-m-header-logo-mark {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--lm-primary-soft, #e7f4ec);
    color: var(--lm-primary-strong, #0a5439);
  }
  .lm-m-header-badge {
    position: absolute; top: 6px; right: 4px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--lm-surface, #fff);
  }
  .lm-m-header-dot {
    position: absolute; top: 8px; right: 8px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #dc2626;
    box-shadow: 0 0 0 2px var(--lm-surface, #fff);
  }

  /* Body offset — clear desktop sidebar reservation, add space for fixed mobile header */
  body {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 56px !important;
  }

  /* Sign page — no top gap, logo fills the empty space */
  .lm-sign-container { margin-top: 0 !important; padding-top: 0 !important; }
  .lm-sign-mobile-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0 24px;
  }
  .lm-sign-mobile-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--lm-primary, #0a5439);
  }
  .lm-sign-mobile-logo-mark {
    width: 48px; height: 48px;
    background: rgba(10,84,57,.1);
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lm-primary, #0a5439);
  }
  .lm-sign-mobile-logo-text {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--lm-primary, #0a5439);
  }
  .lm-profile-page { padding-left: 0 !important; padding-top: 0 !important; }

  /* Hide Sngine's chrome that we don't want on mobile */
  .x-sidebar-width, .x-sidebar-fixed, .x-sidebar { display: none !important; }
  .x-content-width { width: 100% !important; max-width: 100% !important; }
  .main-wrapper > .container,
  .main-wrapper > .container-fluid { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }
  body::before, body::after { display: none !important; }
  .search-wrapper-prnt { display: none !important; }

  /* ════════════════════════════════════════════════════════
     PROFILE PAGE LAYOUT — single column reflow
     ════════════════════════════════════════════════════════ */
  .lm-profile-page {
    background: var(--lm-bg, #f8fafc) !important;
  }
  .lm-content {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }
  .lm-content-center {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* ════════════════════════════════════════════════════════
     HERO — cover, avatar, name, action bar
     Order on mobile (matches /designs/LocalModels Mobile.html prototype):
     1. Cover (always at top, outside .lm-hero-body)
     2. Avatar (overlaps cover)
     3. Name + verified + tier
     4. Role (subtitle line 1)
     5. Location (subtitle line 2)
     6. Stats
     7. Social bar (horizontal scroll)
     8. Icon buttons (5x square)
     9. Check Availability primary
     ════════════════════════════════════════════════════════ */
  .lm-hero {
    border-radius: 0 !important;
    margin: 0 0 8px !important;
    box-shadow: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--lm-border, #e2e8f0) !important;
  }
  .lm-hero-cover {
    height: 160px !important;
    border-radius: 0 !important;
  }
  .lm-cover-edit-btn {
    top: 12px !important; right: 12px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  /* hero-body is a flex column; we use `order:` on children to reorder */
  .lm-hero-body {
    padding: 0 16px 16px !important;
    text-align: center;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .lm-avatar-wrap {
    order: 1 !important;
    /* Sit ON the cover bottom border: avatar center exactly at the green/white seam.
       Negative margin equals half of the avatar height. */
    margin: -72px auto 14px !important;
    width: 144px !important;
    height: 144px !important;
    display: block !important;
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
  }
  .lm-avatar {
    width: 144px !important; height: 144px !important;
    border-width: 4px !important;
  }
  .lm-avatar-online {
    width: 18px !important; height: 18px !important;
    border-width: 3px !important;
  }
  /* Identity (name+role+location+stats) — order 2 */
  .lm-hero-info { order: 2 !important; }
  /* Reorder INSIDE .lm-hero-info so socials sit BELOW title-row+stats+trust */
  .lm-hero-info { display: flex !important; flex-direction: column !important; }
  .lm-hero-title-row { order: 1 !important; }
  .lm-social-bar { order: 2 !important; }
  .lm-m-social-row-section { order: 3 !important; }
  /* Action bar (icons + Check Availability) — order 3 */
  .lm-hero-action-bar { order: 3 !important; }
  /* Inside action bar: icon buttons FIRST, primary CTA LAST */
  .lm-hero-action-bar .lm-icon-btn-lg,
  .lm-hero-action-bar .lm-more-wrap { order: 1 !important; }
  .lm-hero-action-bar .lm-btn-primary,
  .lm-hero-action-bar > a.lm-btn,
  .lm-hero-action-bar > .lm-btn-secondary:not(.lm-icon-btn-lg) { order: 2 !important; }

  /* Action bar: primary CTA full width, icon buttons in fixed 44x44 row, centered */
  .lm-hero-action-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
    padding: 0 12px;
    position: static !important;
  }
  /* Primary CTA — full width */
  .lm-hero-action-bar .lm-btn-primary {
    flex: 0 0 90% !important;
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
  }
  /* Edit profile (owner) — full width too */
  .lm-hero-action-bar > a.lm-btn,
  .lm-hero-action-bar > .lm-btn-secondary:not(.lm-icon-btn-lg) {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 44px !important;
  }
  /* Icon buttons — fixed 44x44 squares so all 5 fit on smallest width with gap */
  .lm-hero-action-bar .lm-icon-btn-lg,
  .lm-hero-action-bar .lm-more-wrap > .lm-icon-btn-lg {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    padding: 0 !important;
    min-width: 44px !important;
    max-width: 44px !important;
    box-sizing: border-box !important;
  }
  .lm-hero-action-bar .lm-more-wrap {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }

  /* R20y: trust signals row — show with placeholder values (4h / 96% / 98%) */
  .lm-trust-signals {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 10px !important;
    font-size: 12.5px !important;
    color: var(--lm-muted, #64748b) !important;
  }
  .lm-trust-signals span { display: inline-flex !important; align-items: center !important; gap: 4px !important; }
  .lm-trust-signals strong { color: var(--lm-text, #0f172a) !important; font-weight: 700 !important; }
  .lm-trust-signals svg { color: var(--lm-primary, #10b981) !important; flex: 0 0 auto; }

  /* ── Portfolio sub-filter chips: horizontal scroll on one row ─── */
  /* Parent must NOT clip overflow, otherwise children can't scroll */
  .lm-tab-pane, .lm-tab-body, .lm-tabs-content {
    overflow: visible !important;
  }
  .lm-port-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    overflow: visible !important;
  }
  .lm-port-filter {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    /* CRITICAL: explicit width so flex container doesn't expand to content width.
       calc accounts for the negative margin extending into parent padding. */
    width: calc(100% + 24px) !important;
    max-width: calc(100vw) !important;
    min-width: 0 !important;
    margin: 0 -12px !important;
    padding: 0 12px 6px !important;
    gap: 6px !important;
    cursor: grab;
    touch-action: pan-x !important;
    scroll-snap-type: none !important;
    /* Fade RIGHT edge only so pills disappear behind the parent background
       as they scroll off-screen on the right. Left edge stays solid because
       the sticky sort wrap (with its own opaque background) masks pills
       scrolling under it on the left. */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
  }
  .lm-port-filter:active { cursor: grabbing; }
  .lm-port-filter::-webkit-scrollbar { display: none; }
  .lm-port-filter-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 5px 11px !important;
    min-height: 28px !important;
    line-height: 1.35 !important;
    font-size: 12.5px !important;
    user-select: none;
    border-radius: 999px !important;
  }
  .lm-port-filter-btn svg { width: 12px !important; height: 12px !important; }
  /* Sort dropdown — when JS moves it INTO the filter row, render as icon-only */
  .lm-port-filter .lm-portfolio-sort-wrap.lm-portfolio-sort-mobile {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin-left: auto !important; /* push to far right of scroll content */
    padding-left: 8px !important;
  }
  .lm-portfolio-sort-mobile .lm-portfolio-sort {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--lm-border, #e2e8f0) !important;
    background: var(--lm-surface, #fff) !important;
    color: var(--lm-text, #0f172a) !important;
  }
  /* Hide the "Sort: Recent" label + chevron — keep only first icon (clock/sliders) */
  .lm-portfolio-sort-mobile .lm-portfolio-sort > span,
  .lm-portfolio-sort-mobile .lm-portfolio-sort > svg:last-of-type { display: none !important; }
  .lm-portfolio-sort-mobile .lm-portfolio-sort > svg:first-of-type {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
  }
  /* Dropdown menu opens upward / aligned right when sort is at row end */
  .lm-portfolio-sort-mobile .lm-portfolio-sort-menu {
    right: 0 !important;
    left: auto !important;
  }

  /* Identity block — center everything, smaller fonts */
  .lm-hero-info {
    text-align: center !important;
    padding: 0 !important;
    margin-top: 12px !important;
  }
  .lm-hero-title-row {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .lm-hero-name {
    font-size: 26px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
  }
  .lm-hero-subtitle {
    font-size: 13.5px !important;
    margin-top: 4px !important;
    text-align: center !important;
    /* Stack role and location on separate lines */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
  }
  /* Hide the desktop ' · ' separator on mobile (each piece is its own line) */
  .lm-hero-subtitle .lm-hero-sep { display: none !important; }
  .lm-hero-role { display: block; }
  /* Location: pin + city + flag (flag on the RIGHT of city) */
  .lm-hero-location {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .lm-hero-loc-pin { flex: 0 0 auto; }
  .lm-hero-loc-flag { display: inline-block; }
  .lm-hero-stats {
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-top: 8px !important;
    gap: 8px !important;
    font-size: 15px !important;
  }
  .lm-hero-stats > * { white-space: nowrap; }

  /* Verified / tier badges next to name — smaller on mobile */
  .lm-hero-verified, .lm-hero-name svg { width: 16px !important; height: 16px !important; }
  /* Phase H R61: removed mobile shrink for .lm-tier — user wants the
     same full-size VIP/ELITE badge over the photo as on desktop /
     /people. The previous override (font 10, padding 3/8) made the
     badge feel like a tag-pill instead of the brand statement. */

  /* ── Hero CTA bar (Check Availability + Chat) — full width ── */
  .lm-hero-cta-row,
  .lm-hero-actions,
  .lm-profile-actions {
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  .lm-hero-cta-row .lm-btn,
  .lm-hero-actions .lm-btn,
  .lm-profile-actions .lm-btn {
    width: 100% !important;
    height: 44px !important;
  }

  /* ════════════════════════════════════════════════════════
     SOCIAL ROW — horizontal scroll
     ════════════════════════════════════════════════════════ */
  .lm-social-row,
  .lm-social-stats {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    padding: 0 16px !important;
    -webkit-overflow-scrolling: touch;
  }
  .lm-social-row::-webkit-scrollbar,
  .lm-social-stats::-webkit-scrollbar { display: none; }
  .lm-social-row > *, .lm-social-stats > * { flex: 0 0 auto !important; }

  /* ════════════════════════════════════════════════════════
     TABS — horizontal scroll, sticky under mobile header
     ════════════════════════════════════════════════════════ */
  .lm-tabs-wrap {
    border-radius: 0 !important;
    margin: 0 0 8px !important;
    background: var(--lm-surface, #fff) !important;
    position: sticky;
    top: 56px;
    z-index: 30;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .lm-tabs {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    padding: 0 8px !important;
    gap: 4px !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    touch-action: pan-x !important;
  }
  .lm-tabs::-webkit-scrollbar { display: none; }
  .lm-tab {
    flex: 0 0 auto !important;
    padding: 12px 12px !important;
    font-size: 13.5px !important;
    white-space: nowrap;
    min-height: 44px;
  }

  /* ════════════════════════════════════════════════════════
     PORTFOLIO — 2-col masonry, smaller filter chips
     ════════════════════════════════════════════════════════ */
  .lm-tab-body, .lm-tab-pane {
    padding: 12px 12px !important;
  }
  .lm-port-filters,
  .lm-port-filter-row {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    margin: 0 -12px 12px !important;
    padding: 0 12px !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
  }
  .lm-port-filters::-webkit-scrollbar,
  .lm-port-filter-row::-webkit-scrollbar { display: none; }
  .lm-port-filter-btn {
    flex: 0 0 auto !important;
    padding: 5px 11px !important;
    min-height: 28px !important;
    line-height: 1.35 !important;
    font-size: 12.5px !important;
    white-space: nowrap;
    border-radius: 999px !important;
  }
  .lm-port-grid,
  .lm-portfolio-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .lm-port-tile {
    border-radius: 10px !important;
  }

  /* ════════════════════════════════════════════════════════
     SERVICES & RATES — prototype-style card:
     Title → "EVENT SERVICE" tag below → description →
     bottom row: price (left) + Book button (right)
     ════════════════════════════════════════════════════════ */
  .lm-svc-grid, .lm-services-grid, .lm-services {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .lm-service {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px !important;
    gap: 0 !important;
    background: var(--lm-surface, #fff) !important;
    border: 1px solid var(--lm-border, #e2e8f0) !important;
    border-radius: 12px !important;
  }
  .lm-service-main {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  /* Reorder head: title FIRST, kind badge BELOW */
  .lm-service-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .lm-service-head .lm-service-title {
    order: 1 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--lm-text, #0f172a) !important;
    margin: 0 !important;
    line-height: 1.25 !important;
  }
  .lm-service-head .lm-service-kind {
    order: 2 !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
  }
  /* Hide kind icon (just text "EVENT SERVICE") */
  .lm-service-head .lm-service-kind svg { display: none !important; }
  .lm-service-desc {
    margin: 12px 0 16px !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: var(--lm-muted, #64748b) !important;
  }
  /* Hide secondary meta row (14-day notice etc) on mobile to declutter */
  .lm-service-meta { display: none !important; }
  /* Bottom side: price LEFT, button RIGHT, on same row */
  .lm-service-side {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
    margin: 0 !important;
  }
  .lm-service-side .lm-service-price {
    flex: 1 1 auto !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 4px !important;
  }
  .lm-service-side .lm-service-amount {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--lm-text, #0f172a) !important;
    letter-spacing: -0.005em !important;
  }
  .lm-service-side .lm-service-unit {
    font-size: 12.5px !important;
    color: var(--lm-muted, #64748b) !important;
    font-weight: 500 !important;
  }
  .lm-service-side .lm-btn {
    flex: 0 0 auto !important;
    height: 44px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
  }
  /* Shorten button label "Request Booking" → "Book" via CSS.
     Order icon (SVG) before "Book" text so icon stays on the LEFT. */
  .lm-service-side .lm-btn.lm-open-booking { font-size: 0 !important; }
  .lm-service-side .lm-btn.lm-open-booking::before {
    content: "Book";
    font-size: 14px;
    font-weight: 600;
    order: 2;
  }
  .lm-service-side .lm-btn.lm-open-booking > svg {
    order: 1;
    flex-shrink: 0;
  }
  .lm-service-side .lm-btn.lm-open-booking::after {
    content: "";
    display: none;
  }

  .lm-review { padding: 14px !important; }
  /* Mobile review header: stack brand row first, stars below — but stars
     are aligned with the NAME's left edge (not the avatar). Use padding-left
     equal to avatar width + gap so stars start at name X position. */
  .lm-review-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  /* Bump avatar size on mobile so the icon feels balanced with bigger name text */
  .lm-review .lm-ph-square,
  .lm-review-brand > .lm-ph-square {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
  }
  /* Brand block — set explicit gap for predictable indent calc */
  .lm-review-brand {
    gap: 12px !important;
    align-items: center !important;
  }
  /* Stars row — indent by avatar(44) + gap(12) = 56px so stars start at name X */
  .lm-review-stars {
    padding-left: 56px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    width: auto !important;
  }
  .lm-review-rating {
    white-space: nowrap !important;
    margin-left: 4px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  /* ════════════════════════════════════════════════════════
     RIGHT RAIL → moves below content on mobile
     ════════════════════════════════════════════════════════ */
  .lm-rail {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-left: 0 !important;
    border-top: 0 !important; /* removed divider per user feedback */
    padding: 0 !important;
    margin-top: 8px;
    overflow: visible !important;
  }
  .lm-side-card,
  .lm-rail .lm-card,
  .lm-about,
  .lm-quick-info,
  .lm-measurements,
  .lm-agencies,
  .lm-past-clients,
  .lm-account-info {
    border-radius: 12px !important;
    margin: 0 12px 12px !important;
    border: 1px solid var(--lm-border, #e2e8f0) !important;
    background: var(--lm-surface, #fff) !important;
  }

  /* R20C: KYC verified — UPPERCASE + spaced letters per design */
  .lm-kyc-badge {
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 700 !important;
  }

  /* Bio/About — compact rows on mobile */
  .lm-bio { font-size: 13.5px !important; line-height: 1.55 !important; }
  .lm-bio-meta {
    font-size: 13px !important;
    gap: 0 !important;
    margin: 0 !important;
  }
  .lm-bio-meta-cols {
    grid-template-columns: 1fr !important; /* one column on mobile */
    gap: 0 !important;
  }
  /* R20N: Mobile About — 2-column GRID with fixed label column, values
     LEFT-aligned inside their column (not pushed to far right edge).
     Thin dividers between rows for a clean premium table-like layout. */
  .lm-bio-row {
    display: grid !important;
    grid-template-columns: 130px 1fr !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    align-items: center !important;
    padding: 11px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--lm-border-2, #eef2f6) !important;
  }
  /* Last row in each section — no trailing divider */
  .lm-bio-meta > .lm-bio-row:last-child,
  .lm-bio-meta-cols > .lm-bio-row:last-child {
    border-bottom: 0 !important;
  }
  .lm-bio-row dt {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: var(--lm-muted, #64748b) !important;
    font-weight: 500 !important;
    text-align: left !important;
    letter-spacing: 0.01em;
  }
  .lm-bio-row dd {
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    text-align: left !important;
    justify-self: start !important;
    color: var(--lm-text, #0f172a) !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }
  /* "Not specified" / "None" — left-aligned, muted readable */
  .lm-bio-row .lm-about-field-empty {
    text-align: left !important;
    font-weight: 500 !important;
  }
  /* Country flag in About — full rectangular emoji, no rounding/clipping */
  .lm-bio-row dd .lm-flag-emoji {
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    background: transparent !important;
    line-height: 1 !important;
    vertical-align: -1px;
  }
  /* Section labels (MEASUREMENTS, TRAVEL, ACCOUNT) — bold heading above table */
  .lm-about-extra .lm-about-section-label {
    margin: 14px 0 2px !important;
    padding: 0 !important;
    border-top: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: var(--lm-text, #0f172a) !important;
    text-transform: uppercase !important;
  }
  /* Section labels (MEASUREMENTS, etc.) — tighter */
  .lm-bio-section-label, .lm-rail .lm-card-section-label {
    margin: 8px 0 4px !important;
    font-size: 11px !important;
  }
  /* Account info rows on mobile — same compact spacing */
  .lm-account-info .lm-bio-row,
  .lm-rail .lm-account-row,
  .lm-rail .lm-card .lm-bio-row {
    padding: 6px 0 !important;
  }

  /* Hide rail footer on mobile (replaced by global mobile footer) */
  .lm-rail-footer { display: none !important; }

  /* ════════════════════════════════════════════════════════
     STICKY CTA — full viewport width, no margins, two buttons fill bar
     ════════════════════════════════════════════════════════ */
  .lm-sticky-cta,
  .lm-sticky-cta.is-visible {
    position: fixed !important;
    bottom: 64px !important; /* above bottom nav */
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    height: auto !important;
    align-items: stretch !important;
    border: 0 !important;
    border-top: 1px solid var(--lm-border, #e2e8f0) !important;
    border-radius: 0 !important;
    box-shadow: 0 -4px 12px rgba(15,23,42,0.06);
    background: var(--lm-surface, #fff);
    z-index: 80;
    box-sizing: border-box !important;
    /* Override desktop's translateX(-50%) which was centering it */
    transform: none !important;
  }
  /* Hide the avatar+name+meta block on mobile — buttons fill width */
  .lm-sticky-cta-info { display: none !important; }
  .lm-sticky-cta-actions {
    display: flex !important;
    flex: 1 1 auto !important;
    gap: 8px !important;
    width: 100% !important;
  }
  /* Chat ~30%, Check Availability ~70% — primary CTA dominant per prototype */
  .lm-sticky-cta-actions .lm-btn-secondary {
    flex: 0 0 30% !important;
    height: 44px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    white-space: nowrap;
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .lm-sticky-cta-actions .lm-btn-primary {
    flex: 1 1 auto !important;
    height: 44px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    white-space: nowrap;
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .lm-sticky-cta-actions .lm-btn-secondary span,
  .lm-sticky-cta-actions .lm-btn-primary span { display: inline !important; }

  /* ════════════════════════════════════════════════════════
     BOTTOM NAV (rendered via _lm_bottom_nav.tpl)
     ════════════════════════════════════════════════════════ */
  .lm-m-bottomnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    height: 64px;
    background: var(--lm-surface, #fff);
    border-top: 1px solid var(--lm-border, #e2e8f0);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .lm-m-nav-item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    color: var(--lm-muted, #64748b);
    font-size: 10px;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    min-height: 44px;
  }
  .lm-m-nav-item.is-active { color: var(--lm-primary-strong, #0a5439); }
  .lm-m-nav-item svg { width: 22px; height: 22px; stroke-width: 1.7; }

  /* Notification badge — circular pill anchored to top-right of icon */
  .lm-m-nav-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 22px);
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e53e3e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--lm-surface, #fff);
    pointer-events: none;
  }
  .lm-m-nav-badge-dispute { background: #e06c2e; }

  /* ════════════════════════════════════════════════════════
     DRAWER (rendered via _lm_drawer.tpl)
     ════════════════════════════════════════════════════════ */
  .lm-m-scrim {
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.55);
    backdrop-filter: blur(2px);
    z-index: 110;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .lm-m-scrim.is-visible { opacity: 1; pointer-events: auto; }
  .lm-m-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 85%;
    max-width: 320px;
    background: var(--lm-surface, #fff);
    z-index: 120;
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
    box-shadow: 4px 0 20px rgba(0,0,0,0.18);
  }
  .lm-m-drawer.is-open { transform: translateX(0); }
  .lm-m-drawer-head {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--lm-border, #e2e8f0);
  }
  .lm-m-drawer-head a { text-decoration: none; color: inherit; }
  .lm-m-drawer-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    overflow: hidden; flex: 0 0 auto;
    background: var(--lm-surface-2, #f1f5f9);
    display: block;
  }
  .lm-m-drawer-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .lm-m-drawer-info { flex: 1; min-width: 0; display: block; }
  .lm-m-drawer-name {
    font-size: 14px; font-weight: 700;
    display: flex; align-items: center; gap: 4px;
    color: var(--lm-text, #0f172a);
  }
  .lm-m-drawer-name svg { color: var(--lm-primary, #10b981); flex: 0 0 auto; }
  .lm-m-drawer-handle { font-size: 12px; color: var(--lm-muted, #64748b); }
  .lm-m-drawer-close {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--lm-muted, #64748b);
    border-radius: 50%;
    background: transparent; border: 0; cursor: pointer;
  }
  .lm-m-drawer-close:active { background: var(--lm-surface-2, #f1f5f9); }

  .lm-m-drawer-search {
    margin: 12px 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--lm-surface-2, #f1f5f9);
    border: 1px solid var(--lm-border, #e2e8f0);
    color: var(--lm-text, #0f172a);
    width: calc(100% - 32px);
    font-size: 14px !important; /* override 16px to keep drawer compact */
  }
  .lm-m-drawer-body { flex: 1; overflow-y: auto; padding: 6px 0; }
  .lm-m-drawer-section { padding: 6px 0; }
  .lm-m-drawer-section + .lm-m-drawer-section {
    border-top: 1px solid var(--lm-border, #e2e8f0);
  }
  .lm-m-drawer-item {
    display: flex; align-items: center; gap: 14px;
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--lm-text, #0f172a);
    min-height: 48px;
    text-align: left;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .lm-m-drawer-item svg {
    color: var(--lm-muted, #64748b);
    flex: 0 0 auto;
    width: 20px; height: 20px;
  }
  .lm-m-drawer-item:active { background: var(--lm-surface-2, #f1f5f9); }
  .lm-m-drawer-item.is-danger { color: #dc2626; }
  .lm-m-drawer-item.is-danger svg { color: #dc2626; }
  .lm-m-drawer-item-meta {
    margin-left: auto;
    color: var(--lm-muted, #64748b);
    font-size: 12.5px;
  }
  .lm-m-drawer-item-caret {
    margin-left: auto;
    color: var(--lm-muted, #64748b);
    flex: 0 0 auto;
  }

  /* Guest header: icon | logo | Sign Up button (no fixed-width 44px slots) */
  .lm-m-header-guest {
    grid-template-columns: 44px 1fr auto;
  }

  /* Sign Up button in mobile header (shown when logged out) */
  .lm-m-header-signin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 18px;
    background: var(--lm-primary, #0a5439);
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    margin-right: 4px;
  }
  .lm-m-header-signin:hover { color: #fff; text-decoration: none; }

  /* Auth buttons in drawer for logged-out visitors */
  .lm-m-drawer-auth {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .lm-m-drawer-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
  }
  .lm-m-drawer-auth-signin {
    background: var(--lm-primary, #0a5439);
    color: #fff;
  }
  .lm-m-drawer-auth-signin:hover { color: #fff; text-decoration: none; background: #083d2a; }
  .lm-m-drawer-auth-signup {
    background: var(--lm-surface-2, #f1f5f9);
    color: var(--lm-text, #0f172a);
    border: 1px solid var(--lm-border, #e2e8f0);
  }
  .lm-m-drawer-auth-signup:hover { color: var(--lm-text, #0f172a); text-decoration: none; }

  /* R20z: Night-mode toggle pill (iOS-style switch) */
  .lm-m-toggle {
    margin-left: auto;
    width: 38px; height: 22px;
    background: #cbd5e1;
    border-radius: 999px;
    position: relative;
    transition: background .18s;
    flex: 0 0 38px;
    display: inline-block;
  }
  .lm-m-toggle-knob {
    position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform .2s cubic-bezier(.5,0,.4,1.4);
    display: block;
  }
  html[data-lm-theme="dark"] .lm-m-toggle {
    background: var(--lm-primary-strong, #0a5439);
  }
  html[data-lm-theme="dark"] .lm-m-toggle .lm-m-toggle-knob {
    transform: translateX(16px);
  }

  /* ════════════════════════════════════════════════════════
     BOTTOM SHEETS — convert existing modals to slide-up sheets
     ════════════════════════════════════════════════════════ */
  /* Booking modal + Buy Content modal → bottom sheet */
  .lm-booking-modal-scrim,
  .lm-buy-scrim,
  .lm-modal-scrim {
    align-items: flex-end !important;
    /* Override base `place-items: center` so the grid track stretches
       to viewport width — otherwise `width: 100%` on .lm-modal resolves
       against an auto-sized track and leaves gutters. */
    justify-items: stretch !important;
    justify-content: stretch !important;
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    background: rgba(15,23,42,0.55) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden !important;
  }
  .lm-booking-modal,
  .lm-buy-modal,
  .lm-modal,
  #lm-email-scrim .lm-modal,
  #lm-report-scrim .lm-modal,
  #lm-block-scrim .lm-modal,
  #lm-share-scrim .lm-modal,
  #lm-switch-scrim .lm-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 95vh !important;
    border-radius: 18px 18px 0 0 !important;
    margin: 0 !important;
    animation: lmm-slide-up 0.28s cubic-bezier(.2,.8,.2,1);
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  @keyframes lmm-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  /* Drag handle at top of every sheet (purely decorative, drag-to-dismiss handled by JS) */
  .lm-booking-modal::before,
  .lm-buy-modal::before,
  .lm-modal::before {
    content: "";
    display: block;
    width: 44px; height: 5px;
    background: var(--lm-border, #e2e8f0);
    border-radius: 999px;
    margin: 8px auto 4px;
    flex: 0 0 auto;
  }
  .lm-modal-head, .lm-booking-modal-head, .lm-buy-head {
    padding: 8px 16px 12px !important;
    flex: 0 0 auto;
    border-radius: 0 !important;
    position: static !important;
  }
  .lm-modal-body, .lm-booking-modal-body, .lm-buy-body {
    padding: 12px 16px 16px !important;
    overflow-y: auto !important;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
  }
  .lm-modal-foot, .lm-booking-modal-foot, .lm-buy-foot {
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid var(--lm-border, #e2e8f0) !important;
    flex: 0 0 auto;
    background: var(--lm-surface, #fff) !important;
  }
  /* Buy modal — internal columns stack vertically on mobile */
  .lm-buy-grid,
  .lm-buy-cols {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 12px !important;
  }
  /* Booking modal split layout (calendar | form) → stack vertically */
  .lm-booking-modal-grid,
  .lm-booking-modal-cols,
  .lm-booking-grid {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 12px !important;
  }
  .lm-booking-cal, .lm-booking-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .lm-booking-row-2 {
    grid-template-columns: 1fr !important;
  }
  /* Calendar inside booking modal — fit to viewport */
  .lm-booking-modal .lm-cal,
  .lm-booking-cal {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
  }
  .lm-booking-modal .lm-cal-grid,
  .lm-booking-cal .lm-cal-grid {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 1px !important;
    width: 100% !important;
  }
  .lm-booking-modal .lm-cal-day {
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    font-size: 12.5px !important;
    aspect-ratio: 1 !important;
  }
  .lm-booking-modal .lm-cal-dow {
    font-size: 9.5px !important;
    padding: 4px 0 !important;
  }
  /* Time grid: keep 3-col (hour | minute | duration preset) on one row.
     Use minmax(0, ...) so children can shrink below their intrinsic width. */
  .lm-booking-time-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) !important;
    gap: 4px !important;
  }
  .lm-booking-time-grid > * {
    min-width: 0 !important;
    width: 100% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 13px !important;
  }
  /* Body / sheet — clip horizontal overflow */
  .lm-booking-modal-body, .lm-modal-body { overflow-x: hidden !important; }
  .lm-booking-modal { overflow-x: hidden !important; }
  /* Booking modal padding/scroll body */
  .lm-booking-body {
    padding: 12px 14px 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .lm-booking-head {
    padding: 8px 14px 12px !important;
    border-radius: 0 !important;
  }
  .lm-booking-head-ic { width: 28px !important; height: 28px !important; }
  .lm-booking-title { font-size: 15px !important; }
  .lm-booking-subtitle { font-size: 11.5px !important; }

  /* ════════════════════════════════════════════════════════
     R20A: Request Sent confirmation — match prototype mobile
     Big centered checkmark, large title, summary, stacked
     full-width buttons (Open Chat primary green + Close outline)
     ════════════════════════════════════════════════════════ */
  .lm-booking-confirm-banner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    background: transparent !important;
    border: 0 !important;
    padding: 24px 16px 12px !important;
  }
  .lm-booking-confirm-banner-ic {
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
    border-radius: 50% !important;
    background: var(--lm-primary-soft, #e7f4ec) !important;
    color: var(--lm-primary-strong, #0a5439) !important;
    border: 0 !important;
  }
  .lm-booking-confirm-banner-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    color: var(--lm-text, #0f172a) !important;
    line-height: 1.2 !important;
  }
  .lm-booking-confirm-banner-sub {
    font-size: 14px !important;
    color: var(--lm-muted, #64748b) !important;
    margin-top: 4px !important;
  }
  /* Summary card padding */
  .lm-booking-confirm-summary {
    margin: 4px 0 0 !important;
    background: var(--lm-surface-2, #f1f5f9) !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 6px 14px !important;
  }
  .lm-booking-confirm-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    border-bottom: 0 !important;
    font-size: 14px !important;
  }
  .lm-booking-confirm-row svg,
  .lm-booking-confirm-ic svg,
  .lm-booking-confirm-k svg {
    width: 18px !important;
    height: 18px !important;
    color: var(--lm-muted, #64748b) !important;
    flex: 0 0 auto !important;
  }
  .lm-booking-confirm-ic {
    flex: 0 0 22px !important;
    width: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .lm-booking-confirm-k {
    /* Hidden on mobile — prototype shows no labels, just icon + value */
    display: none !important;
  }
  .lm-booking-confirm-v {
    color: var(--lm-text, #0f172a) !important;
    font-weight: 500 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* Booking footer — stack info text above button row, full-width buttons */
  .lm-booking-foot {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
    padding: 12px 14px 14px !important;
    border-radius: 0 !important;
  }
  /* Confirmation footer — buttons stack vertically, full width */
  .lm-booking-confirm-actions {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .lm-booking-confirm-actions .lm-btn {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 52px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
  }
  /* R20H: keep "No charges yet" helper visible on confirmation state too */
  #lm-booking-confirm-state .lm-booking-foot-info { display: flex !important; }
  /* Simplify confirmation header — just "Request Sent" + X close, no green icon and subtitle */
  #lm-booking-confirm-state .lm-booking-head {
    padding: 8px 14px 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
  }
  #lm-booking-confirm-state .lm-booking-head-ic { display: none !important; }
  #lm-booking-confirm-state .lm-booking-subtitle { display: none !important; }
  #lm-booking-confirm-state .lm-booking-title {
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  /* Replace "Request sent — Name" with just "Request Sent" via CSS */
  #lm-booking-confirm-state .lm-booking-title { font-size: 0 !important; }
  #lm-booking-confirm-state .lm-booking-title::before {
    content: "Request Sent";
    font-size: 16px;
    font-weight: 700;
    color: var(--lm-text, #0f172a);
  }
  .lm-booking-foot-info {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    display: block !important;
  }
  .lm-booking-foot-info svg { vertical-align: -1px; margin-right: 4px; display: inline-block; }
  /* The button-row sibling div — stretch to full width with two equal buttons */
  .lm-booking-foot > div[style*="display:flex"],
  .lm-booking-foot > div[style*="display: flex"] {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .lm-booking-foot > div[style*="display:flex"] > .lm-btn,
  .lm-booking-foot > div[style*="display: flex"] > .lm-btn {
    flex: 1 1 0 !important;
    height: 44px !important;
    width: auto !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  /* Cancel — narrower so primary CTA gets more space */
  .lm-booking-foot > div[style*="display:flex"] > .lm-btn-secondary,
  .lm-booking-foot > div[style*="display: flex"] > .lm-btn-secondary {
    flex: 0 0 90px !important;
  }

  /* ════════════════════════════════════════════════════════
     R20C: Unified mobile modal action buttons
     Primary 75% / Secondary 25% / 12px gap / 48px height
     Applied to: Block User, Report User, Booking modals
     ════════════════════════════════════════════════════════ */
  /* Modal foot container — flex row with 12px gap */
  .lm-modal-foot,
  .lm-booking-foot,
  .lm-modal-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0)) !important;
    align-items: stretch !important;
    background: var(--lm-surface, #fff) !important;
    border-top: 1px solid var(--lm-border, #e2e8f0) !important;
  }
  /* Override the booking confirm-actions which stacks vertically (open chat / close) */
  .lm-modal-foot .lm-btn,
  .lm-modal-actions .lm-btn,
  .lm-booking-foot > div[style*="display:flex"] > .lm-btn,
  .lm-booking-foot > div[style*="display: flex"] > .lm-btn {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  /* Primary = 75%, Secondary = 25% (Cancel narrower) */
  .lm-modal-foot .lm-btn-primary,
  .lm-modal-actions .lm-btn-primary,
  .lm-booking-foot > div[style*="display:flex"] > .lm-btn-primary,
  .lm-booking-foot > div[style*="display: flex"] > .lm-btn-primary {
    flex: 1 1 75% !important;
    width: auto !important;
  }
  .lm-modal-foot .lm-btn-secondary,
  .lm-modal-actions .lm-btn-secondary,
  .lm-booking-foot > div[style*="display:flex"] > .lm-btn-secondary,
  .lm-booking-foot > div[style*="display: flex"] > .lm-btn-secondary {
    flex: 0 0 25% !important;
    min-width: 0 !important;
    width: auto !important;
  }
  /* Danger primary (Block button) — keep red color, same width treatment */
  .lm-modal-foot .lm-btn-danger,
  .lm-modal-actions .lm-btn-danger {
    flex: 1 1 75% !important;
  }

  /* ════════════════════════════════════════════════════════
     R20C: Sticky modal footer — Send Availability button always
     visible while user scrolls inside the sheet
     ════════════════════════════════════════════════════════ */
  .lm-booking-modal {
    display: flex !important;
    flex-direction: column !important;
    max-height: 95vh !important;
  }
  /* Confirmation state: fit content naturally — no dead space below summary.
     Both the state container and the body shrink to content. */
  #lm-booking-confirm-state {
    flex: 0 1 auto !important;
    min-height: 0 !important;
  }
  #lm-booking-confirm-state .lm-booking-body {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 16px 16px 4px !important;
  }
  #lm-booking-form-state, #lm-booking-confirm-state {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .lm-booking-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* padding-bottom: 100px !important; */
  }
  /* Footer sticks at bottom of the sheet, always visible */
  .lm-booking-foot {
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
  }
  /* The "info text" above buttons — compact, smaller, less padding */
  .lm-booking-foot-info {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    color: var(--lm-muted, #64748b) !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
  }
  /* Stack info above buttons row */
  .lm-booking-foot {
    flex-wrap: wrap !important;
  }
  .lm-booking-foot > .lm-booking-foot-info {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .lm-booking-foot > div[style*="display:flex"],
  .lm-booking-foot > div[style*="display: flex"],
  .lm-booking-foot > .lm-booking-confirm-actions {
    flex: 1 1 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
  }

  /* Same sticky footer for Report and Block modals */
  .lm-modal {
    display: flex !important;
    flex-direction: column !important;
    max-height: 95vh !important;
  }
  .lm-modal-body { flex: 1 1 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
  .lm-modal-foot {
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    flex-wrap: wrap !important;
  }
  /* Helper text style above buttons in Report/Block modals — match Booking */
  .lm-modal-foot-info,
  .lm-modal-foot > p,
  .lm-modal-foot > div:not([class*="btn"]):first-child {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    color: var(--lm-muted, #64748b) !important;
  }
  /* Stack helper text full-width above the button row */
  .lm-modal-foot > .lm-modal-foot-info,
  .lm-modal-foot > p {
    flex: 1 1 100% !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 4px !important;
  }
  /* Button row spans full width below the helper */
  .lm-modal-foot > div[style*="display:flex"],
  .lm-modal-foot > div[style*="display: flex"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
  }
  /* Hide empty placeholder divs (Block modal uses one) so they don't add a 12px gap */
  .lm-modal-foot > div:empty { display: none !important; }
  /* Form fields full width inside sheets */
  .lm-modal .lm-input,
  .lm-modal .lm-select,
  .lm-modal .lm-textarea,
  .lm-booking-modal input[type="text"],
  .lm-booking-modal input[type="email"],
  .lm-booking-modal input[type="tel"],
  .lm-booking-modal input[type="date"],
  .lm-booking-modal input[type="time"],
  .lm-booking-modal textarea,
  .lm-booking-modal select { width: 100% !important; box-sizing: border-box !important; }
  /* .lm-time-grid (different element from .lm-booking-time-grid) — keep 2-col */
  .lm-time-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* Submit buttons — full width */
  .lm-modal-foot .lm-btn,
  .lm-booking-modal-foot .lm-btn { width: 100% !important; }

  /* ════════════════════════════════════════════════════════
     Share modal — match prototype mobile (3x2 social, 2x2 messengers, no QR)
     ════════════════════════════════════════════════════════ */
  .lm-share-net.lm-share-net-6 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
  .lm-share-net.lm-share-net-4 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .lm-share-net-btn {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 8px 4px !important;
    border: 0 !important;
    background: transparent !important;
    gap: 6px !important;
  }
  .lm-share-net-ic {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .lm-share-net-btn span:not(.lm-share-net-ic) {
    font-size: 12px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    max-width: none !important;
    color: var(--lm-text, #0f172a) !important;
    font-weight: 500 !important;
  }
  /* Hide QR section on mobile (per prototype) — both label and box */
  .lm-share-qr,
  .lm-share-qr-label { display: none !important; }
  /* Group labels (SOCIAL MEDIA / MESSENGERS & EMAIL) */
  .lm-share-group-label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--lm-muted, #64748b) !important;
    margin: 16px 0 10px !important;
    font-weight: 600 !important;
  }
  /* Drop the verbose subtitle on mobile */
  #lm-share-scrim .lm-modal-sub { display: none !important; }

  /* Modal close button — bigger tap target */
  .lm-modal-close, .lm-booking-modal-close {
    width: 36px !important; height: 36px !important;
  }

  /* ════════════════════════════════════════════════════════
     LIGHTBOX — full-screen on mobile
     ════════════════════════════════════════════════════════ */
  .lm-lightbox {
    padding: 0 !important;
  }
  .lm-lightbox-stage,
  .lm-lightbox-frame {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    border-radius: 0 !important;
  }
  .lm-lightbox-side,
  .lm-lightbox-comments {
    display: none !important; /* swipe-only photo viewing on mobile */
  }

  /* ════════════════════════════════════════════════════════
     MISC / utility tweaks
     ════════════════════════════════════════════════════════ */
  /* Hide FAB stacks + Sngine chat sidebar widget — they overlap bottom nav */
  .x_btm_actions,
  .lm-fab,
  .lm-fab-stack { display: none !important; }
  /* The .chat-sidebar (right rail of online users) — hide on mobile.
     Phase H R56: BUT the LM .chat-sidebar.lm-chat-fab (bottom-right
     contact stack) stays visible so users get the same quick-chat
     access as desktop. */
  .chat-sidebar:not(.lm-chat-fab) { display: none !important; }

  /* ════════════════════════════════════════════════════════
     SNGINE /messages PAGE — mobile two-pane → single column
     ════════════════════════════════════════════════════════ */
  /* The page lays out a left conversations list + right conversation panel.
     On mobile, show one or the other based on URL state (Sngine adds
     .no_hide to the sidebar when on the all-conversations view). */
  .x_side_msg_bar { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; }
  /* When a specific conversation is open, hide the conversations sidebar */
  body:not(.n_chat) .x_side_msg_bar:not(.no_hide) { display: none !important; }
  /* Conversation panel takes full width */
  .x_menu_sidebar_content.msg, .js_conversation-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
  /* Conversation header (name+actions) — sticky top, clear of mobile header */
  .panel-messages > div:first-child {
    padding: 8px 12px !important;
  }
  /* Panel-messages — fit between mobile header (56) and bottom nav (64) */
  .panel-messages {
    height: calc(100vh - 56px - 64px) !important;
    max-height: calc(100vh - 56px - 64px) !important;
  }
  /* Chat conversations scroll area */
  .panel-messages .chat-conversations, .panel-messages .js_scroller {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* ── Chat widget popup: full-screen on mobile ─────────── */
  /* Sngine renders chat-widget popups bottom-right. On mobile, slide them
     up as a full-screen sheet covering the page. Don't blanket-hide them
     (then the open trigger does nothing) — let JS open them and we
     reposition via CSS. */
  .chat-widget.chat-box,
  .chat-widget.opened {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .chat-widget.chat-box .chat-widget-head,
  .chat-widget.opened .chat-widget-head {
    position: sticky !important;
    top: 0 !important;
    height: 56px !important;
    padding: 0 12px !important;
    border-bottom: 1px solid var(--lm-border, #e2e8f0) !important;
    background: var(--lm-surface, #fff) !important;
    z-index: 1 !important;
    flex: 0 0 auto !important;
  }
  .chat-widget.chat-box .chat-widget-content,
  .chat-widget.opened .chat-widget-content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    height: auto !important;
  }
  .chat-widget.chat-box .chat-widget-input,
  .chat-widget.opened .chat-widget-input {
    flex: 0 0 auto !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0)) !important;
    border-top: 1px solid var(--lm-border, #e2e8f0) !important;
    background: var(--lm-surface, #fff) !important;
  }
  .chat-widget.chat-box .chat-widget-input textarea,
  .chat-widget.opened .chat-widget-input textarea {
    min-height: 40px !important;
    font-size: 16px !important; /* prevent iOS zoom */
  }
  /* Conversations list */
  .chat-widget .chat-conversations {
    height: auto !important;
    max-height: none !important;
    padding: 8px 12px !important;
  }
  /* Closed state — keep hidden so it doesn't take up space */
  .chat-widget:not(.opened):not(.chat-box) { display: none !important; }
  /* Closed but minimized chat box — also hide on mobile */
  .chat-widget.minimized { display: none !important; }

  /* Lower z-index of any leftover Sngine top-bars so mobile header sits above */
  .top-bar { display: none !important; }

  /* Modals/dropdowns: ensure they sit above sticky CTA + bottom nav */
  .lm-booking-modal-scrim, .lm-modal-scrim { z-index: 130 !important; }
  .lm-pop-panel { z-index: 130 !important; }

  /* No horizontal scroll guard */
  .lm-profile-page, .lm-content, .lm-content-center { max-width: 100vw !important; }

  /* ════════════════════════════════════════════════════════
     R20y: Prototype-style placeholder lists/pills replacing the
     earlier square-thumb carousels.
     ════════════════════════════════════════════════════════ */
  /* List with small 32px square thumb (Recent Bookings, Modeling Agencies) */
  .lm-mlist {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: 12px;
  }
  .lm-mlist-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: center;
  }
  .lm-mlist-mark {
    width: 32px; height: 32px;
    border-radius: 6px;
    background: var(--lm-surface-2, #f1f5f9);
  }
  .lm-mlist-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--lm-text, #0f172a);
    display: inline-flex; align-items: center; gap: 4px;
    line-height: 1.25;
  }
  .lm-mlist-meta {
    font-size: 12px;
    color: var(--lm-muted, #64748b);
    margin-top: 1px;
    line-height: 1.3;
  }

  /* Similar talent — horizontal-snap carousel of placeholder cards */
  .lm-msimilar-scroll, .lm-similar-scroll.lm-msimilar-scroll {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    scroll-snap-type: x mandatory !important;
    margin: 0 -14px !important;
    padding: 4px 14px 8px !important;
    touch-action: pan-x !important;
  }
  .lm-msimilar-scroll::-webkit-scrollbar { display: none; }
  .lm-msimilar-card {
    flex: 0 0 auto !important;
    width: 150px !important;
    scroll-snap-align: start;
    background: var(--lm-surface, #fff) !important;
    border: 1px solid var(--lm-border, #e2e8f0) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    text-decoration: none !important;
    color: var(--lm-text, #0f172a) !important;
  }
  .lm-msimilar-avatar {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: var(--lm-surface-2, #f1f5f9) !important;
    margin-bottom: 4px;
  }
  .lm-msimilar-name {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--lm-text, #0f172a) !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .lm-msimilar-role {
    font-size: 11.5px !important;
    color: var(--lm-muted, #64748b) !important;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lm-msimilar-price {
    margin-top: 4px;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--lm-text, #0f172a) !important;
  }

  /* Pills (Past Clients) */
  .lm-mpills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .lm-mpill {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--lm-surface-2, #f1f5f9);
    border: 1px solid var(--lm-border, #e2e8f0);
    font-size: 12px;
    font-weight: 500;
    color: var(--lm-text, #0f172a);
  }

  /* ════════════════════════════════════════════════════════
     R20y: Mobile social row — TOTAL + per-platform horizontal scroll
     ════════════════════════════════════════════════════════ */
  /* Hide the desktop social bar on mobile — replaced by .lm-m-social-row */
  .lm-social-bar { display: none !important; }
  .lm-m-social-row-section {
    margin: 8px 0 0;
    padding: 8px 0 4px;
  }
  .lm-m-social-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 10px left/right gutter so first card isn't glued to viewport edge */
    padding: 4px 10px 4px;
    touch-action: pan-x;
    scroll-snap-type: x mandatory;
  }
  .lm-m-social-row::-webkit-scrollbar { display: none; }
  .lm-m-social-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 96px;
    padding: 8px 12px;
    border: 1px solid var(--lm-border, #e2e8f0);
    border-radius: 12px;
    background: var(--lm-surface, #fff);
    display: flex; align-items: center; gap: 8px;
    text-decoration: none;
    color: var(--lm-text, #0f172a);
  }
  .lm-m-social-icon {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--lm-surface-2, #f1f5f9);
    color: var(--lm-text, #0f172a);
    flex: 0 0 auto;
  }
  .lm-m-social-card[data-net="ig"] .lm-m-social-icon { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af); color: #fff; }
  .lm-m-social-card[data-net="tt"] .lm-m-social-icon { background: #000; color: #fff; }
  .lm-m-social-card[data-net="x"]  .lm-m-social-icon { background: #000; color: #fff; }
  .lm-m-social-card[data-net="fb"] .lm-m-social-icon { background: #1877f2; color: #fff; }
  .lm-m-social-card[data-net="tw"] .lm-m-social-icon { background: #9146ff; color: #fff; }
  .lm-m-social-num { font-weight: 700; font-size: 13px; letter-spacing: -0.01em; line-height: 1.1; }
  .lm-m-social-num-xl { font-size: 18px !important; font-weight: 800 !important; letter-spacing: -0.02em; line-height: 1.05; color: var(--lm-primary-strong, #0a5439); }
  .lm-m-social-net { font-size: 10.5px; color: var(--lm-muted, #64748b); text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2; margin-top: 1px; }
  .lm-m-social-card.is-reach {
    padding: 6px 14px;
    justify-content: center !important;
    text-align: center !important;
  }
  .lm-m-social-card.is-reach .lm-m-social-icon { display: none; }
  .lm-m-social-card.is-reach > div {
    text-align: center !important;
    width: 100%;
  }
  .lm-m-social-card.is-reach .lm-m-social-num,
  .lm-m-social-card.is-reach .lm-m-social-net {
    text-align: center !important;
  }
  /* R20J: per-platform cards — show only the number (hide IG/TIKTOK/X/FB/TWITCH labels)
     and center the number vertically next to the platform icon. */
  .lm-m-social-card:not(.is-reach) .lm-m-social-net { display: none !important; }
  .lm-m-social-card:not(.is-reach) > div {
    display: flex;
    align-items: center;
  }

  /* ════════════════════════════════════════════════════════
     #2: Hide "2 followers" stat on mobile
     ════════════════════════════════════════════════════════ */
  .lm-hero-stats .lm-hero-followers,
  .lm-hero-stats .lm-dot-followers { display: none !important; }

  /* ════════════════════════════════════════════════════════
     #6: More breathing room between icon buttons row and Check Availability primary
     ════════════════════════════════════════════════════════ */
  .lm-hero-action-bar .lm-btn-primary { margin-top: 12px !important; font-size: 15px; }

  /* ════════════════════════════════════════════════════════
     #7: Sort moved to START of filter row, dropdown opens as overlay
     ════════════════════════════════════════════════════════ */
  .lm-port-filter .lm-portfolio-sort-mobile {
    flex: 0 0 auto !important;
    margin: 0 4px 0 0 !important;
    align-self: center !important;
    /* Sticky-left so it stays visible even when user scrolls chips horizontally */
    position: sticky !important;
    left: 0 !important;
    /* Wrapper itself is transparent. Soft gradient mask sits in ::before
       below with z-index: -1 (behind the sort button but above pills). */
    background: transparent !important;
    z-index: 10 !important;
    padding: 0 8px 0 0 !important;
    /* New stacking context so ::before z-index: -1 stays inside this box
       and pills (siblings outside) sit beneath the mask correctly. */
    isolation: isolate;
  }
  /* R20L: soft gradient mask BEHIND the sort button.
     - Anchored INSIDE the sticky element so it follows the sort horizontally.
     - Extends LEFT to fill the .lm-port-filter padding area (12px) — visually
       reaching the page edge since .lm-port-filter has margin: 0 -12px so its
       padding box already touches the viewport.
     - Right edge soft-fades from page-bg → transparent so pills disappear
       smoothly under the sort instead of clipping against a hard rectangle.
     - z-index: -1 keeps it BEHIND the sort circle (which renders normally
       above) but its parent's `isolation: isolate` keeps -1 inside this box
       so the pill siblings (outside this stacking context) end up below it. */
  .lm-portfolio-sort-mobile::before {
    content: "";
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: -12px;   /* into .lm-port-filter padding-left → page edge */
    right: -28px;  /* fade tail extends past sort's right edge */
    background: linear-gradient(to right,
      var(--lm-bg, #ffffff) 0,
      var(--lm-bg, #ffffff) calc(100% - 28px),
      transparent 100%);
    z-index: -1;
    pointer-events: none;
  }
  html[data-lm-theme="dark"] .lm-portfolio-sort-mobile::before {
    background: linear-gradient(to right,
      #151b23 0,
      #151b23 calc(100% - 28px),
      transparent 100%);
  }
  .lm-portfolio-sort-mobile .lm-portfolio-sort {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--lm-border, #e2e8f0) !important;
    background: var(--lm-surface, #fff) !important;
    color: var(--lm-text, #0f172a) !important;
  }
  .lm-portfolio-sort-mobile .lm-portfolio-sort > span,
  .lm-portfolio-sort-mobile .lm-portfolio-sort > svg:last-of-type { display: none !important; }
  .lm-portfolio-sort-mobile .lm-portfolio-sort > svg:first-of-type {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
  }
  /* Dropdown menu — JS sets position:fixed inline so it overlays photos */
  .lm-portfolio-sort-mobile .lm-portfolio-sort-menu {
    background: var(--lm-surface, #fff) !important;
    border: 1px solid var(--lm-border, #e2e8f0) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15) !important;
    padding: 4px !important;
  }

  /* ════════════════════════════════════════════════════════
     PORTFOLIO — show 4 by default on mobile, "View More" loads rest
     ════════════════════════════════════════════════════════ */
  /* Hide cards beyond index 4 (5th and onward, 0-based n+5 = 5th child) */
  .lm-portfolio-grid:not(.is-expanded) .lm-portfolio-card:nth-child(n+5) {
    display: none !important;
  }
  /* Loadmore button — always show on mobile if > 4 cards exist (handled by JS) */
  .lm-portfolio-loadmore {
    display: flex !important;
    justify-content: center !important;
    margin: 12px 0 4px !important;
  }
  .lm-portfolio-loadmore .lm-btn {
    width: 100% !important;
    height: 44px !important;
    font-size: 13px !important;
  }

  /* ════════════════════════════════════════════════════════
     NOTIFICATIONS / SAVED dropdowns → mobile bottom sheet
     ════════════════════════════════════════════════════════ */
  /* If a topbar pop-panel opens on mobile (it shouldn't via mobile header,
     but defensively style it as a slide-up sheet so it never appears as a
     tiny desktop dropdown). */
  .lm-pop-panel {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 85vh !important;
    border-radius: 18px 18px 0 0 !important;
    z-index: 200 !important;
    transform: translateY(0) !important;
    box-shadow: 0 -16px 40px rgba(15,23,42,0.25) !important;
    margin: 0 !important;
  }
  .lm-pop-panel::before {
    content: "";
    display: block;
    width: 44px; height: 5px;
    background: var(--lm-border, #e2e8f0);
    border-radius: 999px;
    margin: 8px auto 4px;
  }

  /* R20J: Portfolio sort dropdown — left-anchored to trigger on mobile.
     Override the desktop `right: 0` rule so JS-set `left` wins cleanly. */
  .lm-portfolio-sort-mobile .lm-portfolio-sort-menu.is-open {
    right: auto !important;
  }

} /* /max-width: 767px */

/* ── DARK THEME mobile-specific overrides ───────────────── */
@media (max-width: 767px) {
  html[data-lm-theme="dark"] .lm-m-header { background: var(--lm-surface) !important; border-color: var(--lm-border) !important; }
  html[data-lm-theme="dark"] .lm-m-header-logo { color: #5fcc94 !important; }
  html[data-lm-theme="dark"] .lm-m-header-logo-mark { background: rgba(16,185,129,0.16) !important; color: #5fcc94 !important; }
  html[data-lm-theme="dark"] .lm-m-bottomnav { background: var(--lm-surface) !important; border-color: var(--lm-border) !important; }
  html[data-lm-theme="dark"] .lm-m-nav-item { color: var(--lm-muted) !important; }
  html[data-lm-theme="dark"] .lm-m-nav-item.is-active { color: #5fcc94 !important; }
  html[data-lm-theme="dark"] .lm-m-nav-badge { border-color: var(--lm-surface, #0f1923); }
  html[data-lm-theme="dark"] .lm-m-drawer-auth-signup {
    background: rgba(255,255,255,.07);
    border-color: var(--lm-border);
    color: var(--lm-text);
  }
  html[data-lm-theme="dark"] .lm-m-drawer { background: var(--lm-surface) !important; }
  html[data-lm-theme="dark"] .lm-m-drawer-head,
  html[data-lm-theme="dark"] .lm-m-drawer-section + .lm-m-drawer-section { border-color: var(--lm-border) !important; }
  html[data-lm-theme="dark"] .lm-m-drawer-item { color: var(--lm-text) !important; }
  html[data-lm-theme="dark"] .lm-m-drawer-search {
    background: var(--lm-surface-2) !important;
    border-color: var(--lm-border) !important;
    color: var(--lm-text) !important;
  }
}

/* ── DESKTOP (>= 768px): hide all mobile-only elements ──── */
@media (min-width: 768px) {
  .lm-m-header,
  .lm-m-bottomnav,
  .lm-m-drawer,
  .lm-m-scrim,
  .lm-sign-mobile-logo,
  /* Mobile-only social row — desktop uses original .lm-social-bar */
  .lm-m-social-row-section { display: none !important; }
  /* Loadmore button rendered for mobile threshold (>4) — hide on desktop
     unless desktop threshold (>12) was actually exceeded. */
  .lm-loadmore-mobile-only { display: none !important; }
}

/* ════════════════════════════════════════════════════════
   PROTOTYPE-STYLE LISTS / PILLS / SIMILAR — apply at ALL viewports
   so iPad (768-1100px) and desktop (>=1100px) right-rail empty-state
   placeholders also look good (not raw text).
   ════════════════════════════════════════════════════════ */
.lm-mlist {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 12px;
}
.lm-mlist-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: center;
}
.lm-mlist-mark {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--lm-surface-2, #f1f5f9);
  overflow: hidden;
  flex-shrink: 0;
}
/* Phase H R67: Recent bookings — show client avatar (page logo or user
   photo) instead of green placeholder block. */
.lm-mlist-mark--avatar {
  background: var(--lm-surface-2, #f1f5f9);
  display: block;
  text-decoration: none;
}
.lm-mlist-mark--avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
/* Phase H R68: round avatar for individual users (freelance photographer
   booked as Yourself), keep the original 6px-radius square for brand Pages
   (Pragmatic, Stake — they read as logo tiles). */
.lm-mlist-mark--user { border-radius: 50%; }
.lm-mlist-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lm-text, #0f172a);
  display: inline-flex; align-items: center; gap: 4px;
  line-height: 1.25;
  flex-wrap: wrap;
}
.lm-mlist-link {
  color: inherit;
  text-decoration: none;
}
.lm-mlist-link:hover {
  color: var(--lm-primary, #10b981);
  text-decoration: none;
}
.lm-mlist-meta {
  font-size: 12px;
  color: var(--lm-muted, #64748b);
  margin-top: 1px;
  line-height: 1.3;
}

.lm-mpills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lm-mpill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--lm-surface-2, #f1f5f9);
  border: 1px solid var(--lm-border, #e2e8f0);
  font-size: 12px;
  font-weight: 500;
  color: var(--lm-text, #0f172a);
}

/* Similar-talent placeholder cards — horizontal scroll at all viewports */
.lm-msimilar-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  margin: 0 -2px;
  padding: 4px 2px 8px;
}
.lm-msimilar-scroll::-webkit-scrollbar { display: none; }
.lm-msimilar-card {
  flex: 0 0 auto;
  width: 150px;
  scroll-snap-align: start;
  background: var(--lm-surface, #fff);
  border: 1px solid var(--lm-border, #e2e8f0);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: var(--lm-text, #0f172a);
}
.lm-msimilar-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--lm-surface-2, #f1f5f9);
  margin-bottom: 4px;
}
.lm-msimilar-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lm-text, #0f172a);
  display: inline-flex; align-items: center; gap: 4px;
}
.lm-msimilar-role {
  font-size: 11.5px;
  color: var(--lm-muted, #64748b);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lm-msimilar-price {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--lm-text, #0f172a);
}

/* ════════════════════════════════════════════════════════
   SIDEBAR — at <= 1100px (collapsed to 80px), Create button
   should show only the "+" icon, no "Create" label
   ════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .lm-create-btn {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    margin: 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  /* Hide everything except the SVG plus icon */
  .lm-create-btn > *:not(svg) { display: none !important; }
  .lm-create-wrap { display: flex !important; justify-content: center !important; }
}

/* ════════════════════════════════════════════════════════════
   R20M: Mobile tier-themed booking CTAs (ELITE / VIP)
   Override mobile service-side and sticky-CTA primary buttons so
   they match the user's tier badge. Selectors are scoped to the
   mobile breakpoint to avoid touching desktop layouts.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* ELITE — black/navy gradient, gold border + text/icon */
  .lm-profile-page.is-tier-elite .lm-btn-primary.lm-open-booking,
  .lm-profile-page.is-tier-elite #lm-booking-submit,
  .lm-profile-page.is-tier-elite .lm-service-side .lm-btn.lm-open-booking {
    background: linear-gradient(135deg, #1f2937, #0f172a) !important;
    color: #f5deb3 !important;
    border: 1px solid #d4a93f !important;
  }
  .lm-profile-page.is-tier-elite .lm-btn-primary.lm-open-booking svg,
  .lm-profile-page.is-tier-elite #lm-booking-submit svg,
  .lm-profile-page.is-tier-elite .lm-service-side .lm-btn.lm-open-booking > svg {
    color: #f5deb3 !important;
    stroke: #f5deb3 !important;
  }
  /* The mobile Book button uses ::before for label text — recolor it too */
  .lm-profile-page.is-tier-elite .lm-service-side .lm-btn.lm-open-booking::before {
    color: #f5deb3 !important;
  }

  /* VIP — cream-gold gradient, dark brown text/icon (light theme) */
  .lm-profile-page.is-tier-vip .lm-btn-primary.lm-open-booking,
  .lm-profile-page.is-tier-vip #lm-booking-submit,
  .lm-profile-page.is-tier-vip .lm-service-side .lm-btn.lm-open-booking {
    background: linear-gradient(135deg, #fef7d6, #f5deb3) !important;
    color: #6e4a04 !important;
    border: 1px solid #d4a93f !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(180, 83, 9, 0.15) !important;
  }
  .lm-profile-page.is-tier-vip .lm-btn-primary.lm-open-booking svg,
  .lm-profile-page.is-tier-vip #lm-booking-submit svg,
  .lm-profile-page.is-tier-vip .lm-service-side .lm-btn.lm-open-booking > svg {
    color: #6e4a04 !important;
    stroke: #6e4a04 !important;
    fill: none !important;
  }
  .lm-profile-page.is-tier-vip .lm-service-side .lm-btn.lm-open-booking::before {
    color: #6e4a04 !important;
  }

  /* Phase H R22: VIP CTA — deeper right-side gold in dark mode so the
     visual rhythm matches light mode. Light gradient (cream→pale-gold)
     looks "all light" against a dark page. Cream→rich-gold restores the
     light-on-left, rich-on-right contrast. Box-shadow nuked so the inset
     highlight doesn't add a brighter glow on dark surfaces. Mirrors
     lm-profile.css:6547 (desktop). */
  html[data-lm-theme="dark"] .lm-profile-page.is-tier-vip .lm-btn-primary.lm-open-booking,
  html[data-lm-theme="dark"] .lm-profile-page.is-tier-vip #lm-booking-submit,
  html[data-lm-theme="dark"] .lm-profile-page.is-tier-vip .lm-service-side .lm-btn.lm-open-booking {
    background: linear-gradient(135deg, #fef7d6, #e6c468) !important;
    color: #6e4a04 !important;
    border: 1px solid #d4a93f !important;
    box-shadow: none !important;
  }
  html[data-lm-theme="dark"] .lm-profile-page.is-tier-vip .lm-btn-primary.lm-open-booking svg,
  html[data-lm-theme="dark"] .lm-profile-page.is-tier-vip #lm-booking-submit svg,
  html[data-lm-theme="dark"] .lm-profile-page.is-tier-vip .lm-service-side .lm-btn.lm-open-booking > svg {
    color: #6e4a04 !important;
    stroke: #6e4a04 !important;
    fill: none !important;
  }
  html[data-lm-theme="dark"] .lm-profile-page.is-tier-vip .lm-service-side .lm-btn.lm-open-booking::before {
    color: #6e4a04 !important;
  }

  /* Phase H R21: same lock for ELITE — desktop has no explicit dark
     override (ELITE base is dark navy, reads fine in both themes), but
     mobile occasionally inherits Bootstrap's dark btn-overrides. Pin the
     ELITE colors with !important so the user sees the same button on
     every theme switch. */
  html[data-lm-theme="dark"] .lm-profile-page.is-tier-elite .lm-btn-primary.lm-open-booking,
  html[data-lm-theme="dark"] .lm-profile-page.is-tier-elite #lm-booking-submit,
  html[data-lm-theme="dark"] .lm-profile-page.is-tier-elite .lm-service-side .lm-btn.lm-open-booking {
    background: linear-gradient(135deg, #1f2937, #0f172a) !important;
    color: #f5deb3 !important;
    border: 1px solid #d4a93f !important;
  }
  html[data-lm-theme="dark"] .lm-profile-page.is-tier-elite .lm-btn-primary.lm-open-booking svg,
  html[data-lm-theme="dark"] .lm-profile-page.is-tier-elite #lm-booking-submit svg,
  html[data-lm-theme="dark"] .lm-profile-page.is-tier-elite .lm-service-side .lm-btn.lm-open-booking > svg {
    color: #f5deb3 !important;
    stroke: #f5deb3 !important;
  }
  html[data-lm-theme="dark"] .lm-profile-page.is-tier-elite .lm-service-side .lm-btn.lm-open-booking::before {
    color: #f5deb3 !important;
  }

  /* ── Messenger: dark theme fixes ── */
  html[data-lm-theme="dark"] .btn.btn-gray {
    background: var(--lm-surface-2, #1e2836);
    color: var(--lm-text, #e2e8f0);
  }
  html[data-lm-theme="dark"] .btn.btn-gray:hover {
    background: var(--lm-surface-3, #263040);
  }
  /* Back button in conversation header */
  .lm-msg-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lm-text, #0f172a);
    border-radius: 8px;
    text-decoration: none;
    transition: background 120ms;
  }
  .lm-msg-back-btn:hover { background: var(--lm-surface-2, #f1f5f9); }
  html[data-lm-theme="dark"] .lm-msg-back-btn { color: var(--lm-text, #e2e8f0); }
  html[data-lm-theme="dark"] .lm-msg-back-btn:hover { background: var(--lm-surface-2, #1e2836); }

  /* Modal inputs/textareas — user prefers compact 13px over iOS no-zoom 16px.
     Trade-off: iOS Safari will zoom on focus, but visual density wins. */
  .lm-modal .lm-input,
  .lm-modal .lm-textarea,
  .lm-modal .lm-select,
  #lm-email-scrim .lm-input,
  #lm-email-scrim .lm-textarea,
  #lm-report-scrim .lm-input,
  #lm-report-scrim .lm-textarea,
  #lm-block-scrim .lm-input,
  #lm-block-scrim .lm-textarea {
    font-size: 13px !important;
    padding: 7px 10px !important;
    line-height: 1.4 !important;
  }
  .lm-modal .lm-textarea,
  #lm-email-scrim .lm-textarea {
    min-height: 70px !important;
  }
  /* Shrink the pre-filled note textarea so it doesn't eat the whole screen */
  #lm-email-note {
    min-height: 60px !important;
    max-height: 110px !important;
    overflow-y: auto !important;
  }
  /* Modal title + meta text — drop a notch on mobile */
  .lm-modal .lm-modal-title,
  #lm-email-scrim .lm-modal-title,
  #lm-report-scrim .lm-modal-title,
  #lm-block-scrim .lm-modal-title {
    font-size: 15px !important;
  }
  .lm-modal .lm-modal-sub,
  #lm-email-scrim .lm-modal-sub,
  #lm-report-scrim .lm-modal-sub,
  #lm-block-scrim .lm-modal-sub {
    font-size: 11px !important;
  }
  .lm-modal .lm-field-label,
  #lm-email-scrim .lm-field-label,
  #lm-report-scrim .lm-field-label,
  #lm-block-scrim .lm-field-label {
    font-size: 11.5px !important;
  }
  .lm-modal .lm-help,
  #lm-email-scrim .lm-help,
  #lm-report-scrim .lm-help,
  #lm-block-scrim .lm-help {
    font-size: 10.5px !important;
  }

}