/* ═══════════════════════════════════════════════════════════════════════════
   LM DISCOVER — MOBILE STYLESHEET (Phase 2.4)
   Phone:  <= 767px (single-column cards, bottom-sheet filters, sticky icon row)
   Tablet: 768px – 1023px (2-col cards, desktop filterbar wraps)
   Desktop: >= 1024px (existing layout, no overrides)
   Loaded AFTER lm-discover.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hide mobile filterbar elements on desktop ────────────── */
.lm-md-filterbar,
.lm-md-search-wrap,
.lm-md-iconrow-wrap,
.lm-md-iconrow-spacer,
.lm-md-chips-row { display: none; }

/* ════════════════════════════════════════════════════════════════
   TABLET — 768 to 1023px
   - Existing 2-col grid kicks in via desktop CSS (max-width: 1023px)
   - Allow desktop filter bar to scroll horizontally instead of cramping
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  .dc-filterbar-r9 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .dc-filterbar-r9::-webkit-scrollbar { display: none; }
  .dc-filters-row2 { flex-wrap: wrap; }
  .dc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-card.is-double { grid-column: span 2; }
}

/* ════════════════════════════════════════════════════════════════
   PHONE — <= 767px
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* iOS / touch baseline.
     Use overflow-x:clip (modern) instead of hidden — clip doesn't create a
     scroll container, so position:sticky on descendants works correctly.
     Older browsers fall back to overflow:hidden via the duplicate declaration. */
  html, body {
    overflow-x: hidden;
    overflow-x: clip;
  }
  .lm-discover-page * { -webkit-tap-highlight-color: transparent; }
  .lm-discover-page input,
  .lm-discover-page textarea,
  .lm-discover-page select { font-size: 16px !important; }

  /* Body has 56px padding-top from mobile header (set in lm-profile-mobile.css).
     Ensure that style applies on people page too. */
  body { padding-top: 56px !important; padding-left: 0 !important; padding-right: 0 !important; }

  /* Hide desktop chrome */
  .lm-sidebar, .lm-topbar { display: none !important; }
  .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; }

  /* Hide desktop filter row 1 (the chip-buttons row) but keep the parent
     .dc-filterbar container so we can show row 2 (results count + sort)
     between our sticky icon row and the cards. */
  .lm-discover-page .dc-filterbar {
    display: block !important;
    position: static !important;
    background: var(--lm-bg, #f8fafc) !important;
    border: 0 !important;
    padding: 10px 14px 8px !important;
    margin: 0 !important;
  }
  .lm-discover-page .dc-filterbar form { padding: 0 !important; margin: 0 !important; }
  .lm-discover-page .dc-filterbar-r9 { display: none !important; }

  /* Row 2: results count on left, sort dropdown on right */
  .lm-discover-page .dc-filters-row2 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    gap: 10px !important;
  }
  .lm-discover-page .dc-filters-row2-left {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: 0;
  }
  .lm-discover-page .dc-filters-row2-right {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
  }
  .lm-discover-page .dc-filters-row2 .dc-result-count {
    font-size: 13.5px !important;
    color: var(--lm-text, #0f172a) !important;
    white-space: nowrap;
    overflow: visible !important;
  }
  .lm-discover-page .dc-filters-row2 .dc-result-count strong {
    font-weight: 700 !important;
    color: var(--lm-primary-text, #065f46) !important;
  }
  /* Disable the desktop's gradient fade on the left wrap (added when chips
     exist) — on mobile the chips live in a separate row, so the fade just
     cuts off the 'talents' word. */
  .lm-discover-page .dc-filters-row2-left::after,
  .lm-discover-page .dc-filters-row2-left.has-chips::after {
    display: none !important;
    content: none !important;
  }
  /* Hide elements that mobile filterbar already provides */
  .lm-discover-page .dc-filters-row2 .dc-chips-inline,
  .lm-discover-page .dc-filters-row2 .dc-chip-clear-persist,
  .lm-discover-page .dc-filters-row2 .dc-more-btn {
    display: none !important;
  }
  /* Sort wrap kept visible on mobile */
  .lm-discover-page .dc-filters-row2 .dc-sort-wrap {
    display: inline-flex !important;
  }
  .lm-discover-page .dc-filters-row2 .dc-sort {
    padding: 6px 10px !important;
    font-size: 13px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--lm-text, #0f172a) !important;
  }
  .lm-discover-page .dc-filters-row2 .dc-sort .dc-sort-label {
    color: var(--lm-muted, #64748b);
    margin-right: 2px;
  }
  .lm-discover-page .dc-filters-row2 .dc-sort .dc-sort-value {
    font-weight: 600;
  }
  /* Sort dropdown menu — make sure it overlays cards instead of being clipped */
  .lm-discover-page .dc-sort-wrap .dc-pop {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 100% !important;
    z-index: 60;
  }

  /* Discover page reflow */
  .lm-discover-page {
    background: var(--lm-bg, #f8fafc) !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .dc-grid-wrap {
    padding: 0 12px 16px !important;
  }
  .dc-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .dc-card.is-double { grid-column: auto !important; }

  /* ════════════════════════════════════════════════════════════════
     MOBILE FILTER BAR
     - Search wrap is NORMAL flow (scrolls away with the page)
     - Icon row + chips wrap is STICKY at top:56px so buttons always visible
     - Both are direct children of .lm-discover-page so sticky binds to the
       whole page scroll area (not constrained by an inner wrapper).
     ════════════════════════════════════════════════════════════════ */

  /* Re-show mobile filterbar elements (they're display:none on desktop) */
  .lm-md-search-wrap,
  .lm-md-iconrow-wrap,
  .lm-md-iconrow-spacer { display: block; }

  /* Search wrap — non-sticky, scrolls with content */
  .lm-md-search-wrap {
    padding: 10px 12px 4px;
    background: var(--lm-surface, #fff);
  }
  .lm-md-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    background: var(--lm-bg, #f1f5f9);
    border: 1px solid var(--lm-border, #e2e8f0);
    border-radius: 12px;
    padding: 0 14px;
  }
  .lm-md-search svg { color: var(--lm-muted, #64748b); flex: 0 0 auto; }
  .lm-md-search-input {
    flex: 1;
    border: 0; outline: none; background: transparent;
    font: inherit; font-size: 15px !important;
    color: var(--lm-text, #0f172a);
  }
  .lm-md-search-input::placeholder { color: var(--lm-muted, #64748b); }

  /* Icon row wrapper — HYBRID:
     - Default: in normal flow (sits right under the search field)
     - When the search field has scrolled out from under the mobile header,
       JS adds .is-stuck on body, which switches the wrap to position:fixed
       and shows the spacer to preserve layout height.
     This avoids the broken-sticky scenarios from Sngine ancestor wrappers
     (overflow/transform/contain), and it keeps the search visible on first load. */
  .lm-md-iconrow-wrap {
    position: relative;
    z-index: 50;
    background: var(--lm-surface, #fff);
    border-bottom: 1px solid var(--lm-border, #e2e8f0);
    padding: 6px 12px 8px;
    box-sizing: border-box;
  }
  .lm-md-iconrow-spacer { display: none; }

  /* Stuck state — search has scrolled out from under the mobile header */
  body.lm-md-iconrow-stuck .lm-md-iconrow-wrap {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    width: 100%;
    box-shadow: 0 1px 0 var(--lm-border, #e2e8f0);
  }
  body.lm-md-iconrow-stuck .lm-md-iconrow-spacer {
    display: block;
    /* JS sets actual height. Default fallback if JS not yet run. */
    height: 64px;
    flex: 0 0 auto;
  }

  /* 4-icon row — flex equal-width, horizontal scroll only if very cramped */
  .lm-md-iconrow {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -12px;
    padding: 0 12px;
  }
  .lm-md-iconrow::-webkit-scrollbar { display: none; }

  .lm-md-iconbtn {
    flex: 1 1 0;
    min-width: 50px;
    min-height: 52px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    background: var(--lm-bg, #f1f5f9);
    border: 0;
    border-radius: 10px;
    color: var(--lm-text, #0f172a);
    font: inherit;
    font-size: 11px;
    line-height: 1.1;
    cursor: pointer;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    transition: background .12s ease, color .12s ease;
  }
  /* When scroll-mode kicks in (overflow), prevent flex-shrink */
  .lm-md-iconrow.is-scroll .lm-md-iconbtn {
    flex: 0 0 64px;
  }
  .lm-md-iconbtn:active { background: var(--lm-border, #e2e8f0); }
  .lm-md-iconbtn-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    color: inherit;
  }
  .lm-md-iconbtn-lbl {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.005em;
    white-space: nowrap;
    color: inherit;
  }
  .lm-md-iconbtn.is-active {
    background: var(--lm-text, #0f172a);
    color: #fff;
  }
  .lm-md-iconbtn.is-active .lm-md-iconbtn-ic,
  .lm-md-iconbtn.is-active .lm-md-iconbtn-lbl { color: #fff; }
  .lm-md-iconbtn-badge {
    position: absolute;
    top: 4px; right: 6px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--lm-primary, #10b981);
    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-md-iconbtn.is-active .lm-md-iconbtn-badge {
    box-shadow: 0 0 0 2px var(--lm-text, #0f172a);
  }

  /* ── Active filter chips row 2 (mobile) ───────────────── */
  .lm-md-chips-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px -12px -8px;
    padding: 4px 12px 6px;
    position: relative;
  }
  .lm-md-chips-row[hidden] { display: none; }
  .lm-md-chips-scroll {
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0;
    /* Fade right edge so chips disappear under the Clear-all button */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
  }
  .lm-md-chips-scroll::-webkit-scrollbar { display: none; }
  .lm-md-chips-scroll .dc-chip {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--lm-primary-soft, #d1fae5);
    color: var(--lm-primary-text, #065f46);
    border: 1px solid transparent;
    white-space: nowrap;
  }
  .lm-md-chips-scroll .dc-chip-x {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: transparent; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: inherit; cursor: pointer; padding: 0;
  }
  .lm-md-clear-all {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--lm-border, #e2e8f0);
    background: var(--lm-surface, #fff);
    color: var(--lm-text, #0f172a);
    font: inherit; font-size: 12px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
    cursor: pointer;
    z-index: 1;
    box-shadow: -8px 0 8px var(--lm-surface, #fff);
  }

  /* ════════════════════════════════════════════════════════════════
     BOTTOM-SHEET PATTERN — used for both desktop popovers (.dc-pop)
     adopted as sheets, and for the new combo sheet.
     ════════════════════════════════════════════════════════════════ */

  /* Generic mobile-sheet scrim & sheet containers */
  .lm-md-sheet-scrim {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  .lm-md-sheet-scrim:not([hidden]) { opacity: 1; pointer-events: auto; }
  .lm-md-sheet-scrim[hidden] { display: none; }
  .lm-md-sheet {
    width: 100%;
    max-height: 88vh;
    background: var(--lm-surface, #fff);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.32,.72,0,1);
    will-change: transform;
    font-family: var(--lm-font, "Inter", system-ui, sans-serif);
    color: var(--lm-text, #0f172a);
  }
  .lm-md-sheet-scrim:not([hidden]) .lm-md-sheet { transform: translateY(0); }
  .lm-md-sheet-handle {
    width: 40px; height: 4px;
    border-radius: 2px;
    background: var(--lm-muted-2, #cbd5e1);
    margin: 8px auto 0;
    flex: 0 0 auto;
  }
  .lm-md-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--lm-border-2, #f1f5f9);
    flex: 0 0 auto;
  }
  .lm-md-sheet-title {
    margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  }
  .lm-md-sheet-close {
    width: 36px; height: 36px;
    border: 0; background: var(--lm-bg, #f1f5f9);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--lm-text, #0f172a); cursor: pointer; padding: 0;
  }
  .lm-md-sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 18px 20px;
  }
  /* Sheet footer: Reset 25% / Apply 75% — uniform across all bottom-sheets */
  .lm-md-sheet-foot {
    flex: 0 0 auto;
    display: flex; align-items: stretch;
    gap: 8px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--lm-border-2, #f1f5f9);
    background: var(--lm-surface, #fff);
  }
  .lm-md-sheet-reset {
    flex: 0 0 25%;
    height: 48px;
    border: 1px solid var(--lm-border, #e2e8f0);
    background: var(--lm-surface, #fff);
    color: var(--lm-text, #0f172a);
    font: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border-radius: 12px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .lm-md-sheet-reset:hover { background: var(--lm-bg, #f1f5f9); }
  .lm-md-sheet-apply {
    flex: 1 1 auto;
    height: 48px;
    border: 0;
    background: var(--lm-text, #0f172a);
    color: #fff;
    border-radius: 12px;
    font: inherit; font-size: 15px; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
  }
  .lm-md-sheet-apply-count {
    font-size: 13px; opacity: 0.85; font-weight: 500;
  }

  /* ── Combined Genders/Age/Rate sheet — subsections ── */
  .lm-md-sub {
    padding: 6px 0 18px;
    border-bottom: 1px solid var(--lm-border-2, #f1f5f9);
  }
  .lm-md-sub:last-child { border-bottom: 0; padding-bottom: 4px; }
  .lm-md-sub-title {
    margin: 0 0 12px;
    font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lm-muted, #64748b);
    display: flex; justify-content: space-between; align-items: baseline;
  }
  .lm-md-sub-val {
    text-transform: none; letter-spacing: -0.005em;
    font-size: 14px; font-weight: 700; color: var(--lm-text, #0f172a);
  }
  .lm-md-pills {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  /* Genders pills row — fit 4 (All/Female/Male/Non-binary) on ONE line at 360px.
     Use flex equal-share with min-width: 0 + small padding/font so 'Non-binary' fits. */
  .lm-md-pills-gender {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: 100%;
  }
  .lm-md-pills-gender .lm-md-pill {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-align: center !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lm-md-pill {
    height: 40px;
    padding: 0 16px;
    border: 0;
    background: var(--lm-bg, #f1f5f9);
    color: var(--lm-text, #0f172a);
    border-radius: 999px;
    font: inherit; font-size: 14px; font-weight: 500;
    cursor: pointer;
    min-height: 44px;
  }
  .lm-md-pill.is-on {
    background: var(--lm-text, #0f172a);
    color: #fff;
  }

  /* Mobile range slider — large hit zones, ≥32px gap between sliders is
     handled by .lm-md-sub padding above. */
  .lm-md-range {
    position: relative;
    height: 44px;
    padding: 16px 14px;
    box-sizing: border-box;
  }
  .lm-md-range-track {
    position: relative;
    height: 4px;
    background: var(--lm-border, #e2e8f0);
    border-radius: 2px;
  }
  .lm-md-range-fill {
    position: absolute;
    top: 0; bottom: 0;
    background: var(--lm-text, #0f172a);
    border-radius: 2px;
  }
  .lm-md-range-thumb {
    position: absolute;
    top: 50%;
    width: 44px; height: 44px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    z-index: 1;
    touch-action: none;
  }
  .lm-md-range-thumb::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 26px; height: 26px;
    margin: -13px 0 0 -13px;
    background: #fff;
    border: 2px solid var(--lm-text, #0f172a);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    transition: transform .12s ease;
  }
  .lm-md-range-thumb + .lm-md-range-thumb { z-index: 2; }
  .lm-md-range-thumb:active::before,
  .lm-md-range-thumb.is-dragging::before { transform: scale(1.1); }
  .lm-md-range-thumb.is-dragging { z-index: 3; }

  /* ════════════════════════════════════════════════════════════════
     DESKTOP-POPOVER → BOTTOM-SHEET ADAPTER
     The .dc-pop elements are normally absolutely-positioned popovers.
     On mobile we adopt them into a single host (#lm-md-pop-host) that
     visually IS a bottom sheet. Override .dc-pop styles here.
     ════════════════════════════════════════════════════════════════ */
  .lm-md-pop-scrim {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
  }
  .lm-md-pop-scrim:not([hidden]) { opacity: 1; pointer-events: auto; }
  .lm-md-pop-scrim[hidden] { display: none; }
  .lm-md-pop-host {
    width: 100%;
    max-height: 88vh;
    min-height: 50vh;
    background: var(--lm-surface, #fff);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.32,.72,0,1);
    font-family: var(--lm-font, "Inter", system-ui, sans-serif);
    color: var(--lm-text, #0f172a);
  }
  .lm-md-pop-scrim:not([hidden]) .lm-md-pop-host { transform: translateY(0); }
  .lm-md-pop-handle {
    width: 40px; height: 4px;
    border-radius: 2px;
    background: var(--lm-muted-2, #cbd5e1);
    margin: 8px auto 0;
    flex: 0 0 auto;
  }
  .lm-md-pop-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px 10px;
    border-bottom: 1px solid var(--lm-border-2, #f1f5f9);
    flex: 0 0 auto;
  }
  .lm-md-pop-head h3 {
    margin: 0; font-size: 16px; font-weight: 700;
  }
  .lm-md-pop-head .lm-md-sheet-close { background: var(--lm-bg, #f1f5f9); }
  .lm-md-pop-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* The adopted .dc-pop element lives here */
  }
  .lm-md-pop-foot {
    flex: 0 0 auto;
    display: flex; align-items: stretch;
    gap: 8px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--lm-border-2, #f1f5f9);
    background: var(--lm-surface, #fff);
  }

  /* When a .dc-pop is adopted, neutralize its desktop popover styling */
  .lm-md-pop-body > .dc-pop {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none !important;
    display: flex !important; flex-direction: column !important;
    box-sizing: border-box !important;
  }
  .lm-md-pop-body > .dc-pop[hidden] { display: flex !important; }
  /* Specifically override calendar pop's min-width (desktop sets 580px) */
  .lm-md-pop-body > .dc-cal-pop,
  .lm-md-pop-body > .dc-location-pop,
  .lm-md-pop-body > .dc-pop-categorized {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Hide the desktop popover footer (Apply / Clear) — we have our own */
  .lm-md-pop-body .dc-location-foot,
  .lm-md-pop-body .dc-cal-foot,
  .lm-md-pop-body .dc-cat-foot { display: none !important; }

  /* Make popover internal lists use full sheet width and breathe */
  .lm-md-pop-body .dc-location-search,
  .lm-md-pop-body .dc-cat-search {
    margin: 14px 18px 8px;
  }
  .lm-md-pop-body .dc-location-list,
  .lm-md-pop-body .dc-cat-list {
    padding: 0 12px;
    overflow-y: visible;
    max-height: none;
  }
  .lm-md-pop-body .dc-loc-country-head-r10,
  .lm-md-pop-body .dc-pop-item {
    min-height: 48px;
    padding-top: 10px; padding-bottom: 10px;
  }
  .lm-md-pop-body .dc-loc-cities li button {
    min-height: 44px;
  }
  .lm-md-pop-body .dc-cal-pop {
    overflow: visible !important;
    position: relative !important;
  }

  /* ── Calendar header: range display + quick chips, both ONE line ── */
  .lm-md-pop-body .dc-cal-head {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 18px 4px !important;
    margin: 0 !important;
  }
  .lm-md-pop-body .dc-cal-range-display {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lm-md-pop-body .dc-cal-range-display > span { white-space: nowrap; }
  .lm-md-pop-body .dc-cal-quick {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lm-md-pop-body .dc-cal-quick::-webkit-scrollbar { display: none; }
  .lm-md-pop-body .dc-cal-quick button {
    flex: 0 0 auto;
    padding: 6px 12px !important;
    font-size: 12.5px !important;
    border-radius: 999px !important;
    min-height: 32px;
    white-space: nowrap;
  }

  /* ── Calendar nav: [<] Month YYYY [>] all on ONE line ── */
  .lm-md-pop-body .dc-cal-nav {
    display: grid !important;
    grid-template-columns: 36px 1fr 36px !important;
    align-items: center !important;
    padding: 8px 18px 4px !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  .lm-md-pop-body .dc-cal-navbtn {
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid var(--lm-border, #e2e8f0) !important;
    background: var(--lm-surface, #fff) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }
  /* Month label injected into nav by JS — sits between the two arrows */
  .lm-md-pop-body .dc-cal-nav .dc-cal-month-label {
    grid-column: 2 / 3 !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--lm-text, #0f172a) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Hide the in-grid month head since it's now in the nav row */
  .lm-md-pop-body .dc-cal-monthhead { display: none !important; }
  /* ── Single-month calendar on mobile ──
     Desktop renders 2 months in a 2-col grid (.dc-cal-months) with min-width 580px.
     We hide the second month and switch to single-column layout. */
  .lm-md-pop-body .dc-cal-months {
    display: block !important;
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
    padding: 0 18px !important;
    margin: 0 !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* The desktop renders months as <div> children inside .dc-cal-months. Hide all but first. */
  .lm-md-pop-body .dc-cal-months > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .lm-md-pop-body .dc-cal-months > * ~ * {
    display: none !important;
  }
  /* Day-of-week header — full 7-col grid using container width */
  .lm-md-pop-body .dc-cal-dow {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Day grid — 7 columns, equal width, full container width */
  .lm-md-pop-body .dc-cal-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .lm-md-pop-body .dc-cal-cell {
    height: 38px !important;
    min-width: 0 !important;
    font-size: 13.5px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }
  .lm-md-pop-body .dc-cal-monthhead {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  .lm-md-pop-body .dc-location-selected { display: none !important; }

  /* Worldwide button at top of location sheet */
  .lm-md-pop-body .dc-location-worldwide {
    margin: 0 18px 6px !important;
    padding: 14px 12px !important;
    background: var(--lm-bg, #f1f5f9) !important;
    border-radius: 10px !important;
    width: calc(100% - 36px) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  .lm-md-pop-body .dc-location-worldwide > span:first-of-type {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
  }
  .lm-md-pop-body .dc-location-worldwide .dc-location-count {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    white-space: nowrap !important;
  }

  /* ── Location sheet inner rows — full visibility, no truncation ── */
  .lm-md-pop-body .dc-loc-country-head-r10 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    flex-wrap: nowrap !important;
  }
  .lm-md-pop-body .dc-loc-country-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
    min-width: 0 !important;
    text-align: left !important;
    padding: 4px 0 !important;
    overflow: hidden !important;
  }
  .lm-md-pop-body .dc-loc-country-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }
  .lm-md-pop-body .dc-loc-select-all {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    min-height: 32px !important;
  }
  /* City rows — checkmark + name on one line */
  .lm-md-pop-body .dc-loc-city {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px 14px !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    font: inherit;
  }
  .lm-md-pop-body .dc-loc-city-name {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .lm-md-pop-body .dc-loc-city-count { flex: 0 0 auto; }

  /* ════════════════════════════════════════════════════════════════
     TALENT CARDS — single column, condensed content
     ════════════════════════════════════════════════════════════════ */

  .dc-card,
  .dc-card.is-double,
  .dc-card.is-vip,
  .dc-card.is-elite,
  .dc-card.is-pro {
    grid-column: auto !important;
    display: block !important;
    border-radius: 14px !important;
  }

  /* ── is-double (VIP / Elite) cards on mobile ────────────────
     Desktop renders these as a 2-column body (info-left + info-right).
     On mobile we collapse to a single stack and SHOW all content. */
  .dc-card.is-double {
    display: flex !important;
    flex-direction: column !important;
  }
  .dc-card.is-double .dc-card-photo {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    aspect-ratio: 4/5 !important;
  }
  .dc-card.is-double .dc-card-info-left,
  .dc-card.is-double .dc-card-info-right {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 14px !important;
    gap: 6px !important;
    border: 0 !important;
  }
  .dc-card.is-double .dc-card-info-left {
    padding-top: 14px !important;
    padding-bottom: 4px !important;
    gap: 6px !important;
  }
  .dc-card.is-double .dc-card-info-right {
    padding-top: 4px !important;
    padding-bottom: 14px !important;
    gap: 8px !important;
  }
  /* CTA in info-right gets the full-width grid layout */
  .dc-card.is-double .dc-card-cta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 4px !important;
  }
  /* Reorder info-right children on mobile: stats → socials → featured → CTA.
     Desktop renders them as feat → stats → socials → CTA, so use flex order
     to push featured below stats and socials. */
  .dc-card.is-double .dc-card-info-right .dc-card-stats { order: 1 !important; }
  .dc-card.is-double .dc-card-info-right .dc-card-socials { order: 2 !important; }
  .dc-card.is-double .dc-card-info-right .dc-card-feat { order: 3 !important; }
  .dc-card.is-double .dc-card-info-right .dc-card-cta { order: 4 !important; }
  /* Typography for double-card text on mobile (matches standard card sizes) */
  .dc-card.is-double .dc-card-name { font-size: 19px !important; }
  .dc-card.is-double .dc-card-name svg.dc-verified { width: 18px !important; height: 18px !important; }
  .dc-card.is-double .dc-card-loc { font-size: 14px !important; margin-top: 0 !important; }
  .dc-card.is-double .dc-card-service { font-size: 15px !important; font-weight: 600 !important; }
  .dc-card.is-double .dc-card-stats { font-size: 13.5px !important; gap: 7px !important; margin-top: 4px !important; }
  .dc-card.is-double .dc-card-price strong { font-size: 17px !important; }
  .dc-card.is-double .dc-card-price-from { font-size: 13px !important; }
  .dc-card.is-double .dc-card-bio { font-size: 13.5px !important; line-height: 1.45 !important; -webkit-line-clamp: 2 !important; margin-top: 4px !important; }
  .dc-card.is-double .dc-card-langs { margin-top: 6px !important; gap: 5px !important; }
  .dc-card.is-double .dc-lang-pill { font-size: 11.5px !important; padding: 3px 9px !important; }

  /* Photo area — full card width, swipeable.
     aspect-ratio 1/1 (square) keeps photo from cropping the head off
     when the source image is portrait/headshot. */
  .dc-card-photo {
    aspect-ratio: 1/1 !important;
    height: auto !important;
    max-height: 480px;
    border-radius: 14px 14px 0 0 !important;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
    background: var(--lm-bg, #f1f5f9);
  }
  .dc-card-photo .dc-photo-frame {
    background-size: cover !important;
    background-position: 50% 25% !important;
  }
  /* Photo dots: always visible on mobile (no hover) */
  .dc-card-photo .dc-photo-dots {
    opacity: 1 !important;
    bottom: 12px !important;
  }
  .dc-photo-dot {
    width: 6px !important; height: 6px !important;
  }

  /* R20H: Bookmark + tier sit TOGETHER in top-RIGHT (consistent with
     desktop). Bookmark on the LEFT of the tier badge with a fixed gap.
     Inherit desktop's .dc-card-tr `position: absolute; top:10; right:10;
     inline-flex; gap` — only enlarge the bookmark for touch. */
  .dc-card-tr {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    gap: 8px !important;
  }
  .dc-card-bookmark {
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
  }

  /* ── VERIFIED CHECKMARK — solid green badge with white check ─── */
  .dc-card-name svg.dc-verified,
  .dc-qp-name + svg.dc-verified,
  .dc-qp-name svg.dc-verified {
    width: 16px !important; height: 16px !important;
    flex-shrink: 0;
    color: var(--lm-primary, #10b981) !important;
    overflow: visible;
  }
  /* SVG has 2 paths: outer badge + inner check.
     Make outer badge solid green, inner check stroke white. */
  .dc-card-name svg.dc-verified > path:first-child,
  .dc-qp-name svg.dc-verified > path:first-child,
  .dc-qp-name + svg.dc-verified > path:first-child {
    fill: var(--lm-primary, #10b981) !important;
    stroke: var(--lm-primary, #10b981) !important;
  }
  .dc-card-name svg.dc-verified > path:last-child,
  .dc-qp-name svg.dc-verified > path:last-child,
  .dc-qp-name + svg.dc-verified > path:last-child {
    fill: none !important;
    stroke: #fff !important;
    stroke-width: 2.5 !important;
  }

  /* ── Mobile name swap: show short name "First L." instead of full name ── */
  .dc-card-name .dc-name-full { display: none !important; }
  .dc-card-name .dc-name-short { display: inline !important; }

  /* ── STANDARD cards (Pro and free) — SHORT body ──
     Hide languages, bio, socials, and featured services to keep cards compact.
     Only photo + name + flag/loc + role + stats + price + CTA visible. */
  .dc-card:not(.is-double) .dc-card-langs,
  .dc-card:not(.is-double) .dc-card-bio,
  .dc-card:not(.is-double) .dc-card-socials,
  .dc-card:not(.is-double) .dc-card-feat,
  .dc-card:not(.is-double) .dc-card-feat-mobile {
    display: none !important;
  }

  /* ── Card body content ── */
  .dc-card-body {
    padding: 14px !important;
    display: flex !important; flex-direction: column !important;
    gap: 6px !important;
  }
  /* Stack on small screens: name gets its own full-width line (no longer
     truncated by the rate label), the rate/"Rates on request" sits below it. */
  .dc-card-namerow {
    display: flex !important; flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  .dc-card-name {
    font-size: 19px !important; font-weight: 700 !important;
    letter-spacing: -0.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1 1 auto; min-width: 0;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
  }
  /* Slightly larger verified checkmark to match larger name */
  .dc-card-name svg.dc-verified {
    width: 18px !important; height: 18px !important;
  }
  /* Price row on ONE line (FROM €450/day) */
  .dc-card-price {
    flex: 0 0 auto;
    text-align: right !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 4px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }
  .dc-card-price-from { font-size: 13px !important; color: var(--lm-muted, #64748b) !important; }
  .dc-card-price strong { font-size: 17px !important; font-weight: 700 !important; }

  /* Location row: pin/flag + city + country */
  .dc-card-loc {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 14px !important;
    color: var(--lm-muted, #64748b) !important;
    margin: 0 !important;
    flex-wrap: wrap;
  }
  .dc-card-loc .dc-flag { font-size: 16px; }
  /* Role */
  .dc-card-service {
    font-size: 15px !important;
    color: var(--lm-text, #0f172a) !important;
    font-weight: 600 !important;
    margin: 2px 0 0 !important;
  }

  /* Languages pills */
  .dc-card-langs {
    display: flex !important; flex-wrap: wrap !important;
    gap: 5px !important;
    margin-top: 4px !important;
  }
  .dc-lang-pill {
    font-size: 11px !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    background: var(--lm-bg, #f1f5f9) !important;
    color: var(--lm-text, #0f172a) !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
  }

  /* Bio — short truncated paragraph */
  .dc-card-bio {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: var(--lm-muted, #64748b) !important;
    margin: 4px 0 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Stats: one line, generous size */
  .dc-card-stats {
    display: flex !important;
    margin-top: 6px !important;
    font-size: 12.5px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow: hidden;
    align-items: center;
  }
  .dc-card-stats .dc-dot-soft { flex-shrink: 0; }
  .dc-card-stats > span { white-space: nowrap; }
  .dc-card-stat-rating { display: inline-flex !important; align-items: center !important; gap: 3px !important; }

  /* Social reach pill — colored backdrop block */
  .dc-card-socials {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 8px !important;
    padding: 8px 12px !important;
    background: var(--lm-bg, #f1f5f9) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    flex-wrap: wrap;
  }
  .dc-card-socials .dc-social-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-weight: 600;
  }
  .dc-card-socials .dc-social-icon {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .dc-card-socials .dc-social-icon svg { width: 16px !important; height: 16px !important; }
  .dc-card-socials .dc-social-count { font-size: 12.5px; }
  .dc-card-socials .dc-social-total {
    margin-left: auto;
    font-size: 13px; font-weight: 700;
    color: var(--lm-primary-text, #065f46);
  }

  /* Featured services block (mobile-only on standard cards;
     also shown on is-double cards now). Max 3 visible. */
  .dc-card-feat,
  .dc-card-feat-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-top: 10px !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .dc-card-feat-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 0 4px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--lm-muted, #64748b) !important;
  }
  .dc-card-feat-title svg { color: inherit; flex-shrink: 0; }
  .dc-card-feat-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    background: transparent !important;
    border: 1px solid var(--lm-border, #e2e8f0) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  .dc-card-feat-row + .dc-card-feat-row { margin-top: 4px; }
  .dc-card-feat-name {
    color: var(--lm-text, #0f172a) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1; min-width: 0;
  }
  .dc-card-feat-price {
    flex: 0 0 auto;
    font-weight: 700 !important;
    color: var(--lm-text, #0f172a) !important;
    font-family: var(--lm-font-mono, monospace);
    font-size: 13px !important;
  }
  /* Hide 4th+ services. The title is :first-child, so feat-rows start at child 2. */
  .dc-card-feat .dc-card-feat-row:nth-of-type(n+4),
  .dc-card-feat-mobile .dc-card-feat-row:nth-of-type(n+4) {
    display: none !important;
  }
  /* On is-double, also hide the bottom-border on .dc-card-feat (desktop adds dashed) */
  .dc-card.is-double .dc-card-feat { border-bottom: 0 !important; padding-bottom: 0 !important; }

  /* CTA buttons — full-width row, tier-colored already from desktop CSS */
  .dc-card-cta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  .dc-card-cta .dc-btn-primary,
  .dc-card-cta .dc-btn-secondary {
    height: 44px !important;
    padding: 0 12px !important;
    font-size: 13.5px !important;
    border-radius: 10px !important;
    width: 100% !important;
  }

  /* Empty state */
  .dc-empty {
    margin: 24px 12px !important;
    padding: 32px 16px !important;
  }

  /* ════════════════════════════════════════════════════════════════
     QUICK PROFILE — full-height bottom sheet (90vh)
     The desktop modal markup (.dc-qp-scrim/.dc-qp/.dc-qp-grid) is reused;
     we just restyle for mobile so it slides up as a sheet.
     ════════════════════════════════════════════════════════════════ */
  .dc-qp-scrim.is-open {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .dc-qp {
    width: 100% !important;
    max-width: 100% !important;
    height: 90vh !important;
    max-height: 90vh !important;
    border-radius: 18px 18px 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.32,.72,0,1);
  }
  .dc-qp-scrim.is-open .dc-qp,
  .dc-qp-scrim:not([hidden]) .dc-qp { transform: translateY(0); }

  .dc-qp::before {
    content: "";
    width: 40px; height: 4px;
    border-radius: 2px;
    background: var(--lm-muted-2, #cbd5e1);
    margin: 8px auto 4px;
    flex: 0 0 auto;
  }
  .dc-qp-close {
    top: 14px !important; right: 14px !important;
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
    background: var(--lm-bg, #f1f5f9) !important;
    z-index: 10;
  }
  /* R20H: QP bookmark — sizing only. Position handled by parent
     .dc-qp-corner-actions wrapper (sits to LEFT of tier badge). */
  .dc-qp-bookmark {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    z-index: 5;
  }
  /* QP grid → flex column on mobile so we can use `order:` to reposition
     sections (Services & rates moves to the very end). The col wrappers
     (.dc-qp-about-col / .dc-qp-char-col) use display:contents to flatten
     their children directly into the grid's flex axis, allowing the inner
     sections to be ordered independently across columns. */
  .dc-qp-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
  }
  /* Photo col: override desktop's display:flex so the photo renders as a
     normal block child of the flex grid (with aspect-ratio honored). */
  .dc-qp-photo-col {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    order: 1 !important;
    flex: 0 0 auto !important;
  }
  .dc-qp-about-col,
  .dc-qp-char-col {
    display: contents !important;
  }
  /* Order the now-flat sections. Services & Rates (12) lands AFTER all of
     stats/socials/characteristics/measurements (6-11).
     Sections that have their OWN gray background (stats, socials, char-list,
     meas-grid) get horizontal margin to inset them from the sheet edges with
     breathing room. Title rows above them get matching padding and bottom
     space to separate from the gray block below. */
  .dc-qp-about-col > .dc-qp-namerow                    { order: 2 !important; padding: 14px 18px 0 !important; }
  .dc-qp-about-col > .dc-qp-loc                        { order: 3 !important; padding: 0 18px !important; }
  .dc-qp-about-col > .dc-qp-langs                      { order: 4 !important; padding: 0 18px !important; margin-bottom: 4px !important; }
  /* About: tight to langs above, generous space below before the next section */
  .dc-qp-about-col > .dc-qp-section.dc-qp-about        { order: 5 !important; padding: 2px 18px 22px !important; margin: 0 !important; }
  /* Stats grid — inset with margin so it doesn't touch screen edges */
  .dc-qp-char-col  > .dc-qp-stats {
    order: 6 !important;
    margin: 6px 18px 12px !important;
    padding: 14px !important;
    border-radius: 12px !important;
  }
  /* Socials block — same inset width, no longer a narrow strip */
  .dc-qp-char-col  > .dc-qp-socials-block {
    order: 7 !important;
    margin: 0 18px 18px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }
  /* Personal Characteristics title */
  .dc-qp-char-col  > .dc-qp-char-title:nth-of-type(1) {
    order: 8 !important;
    margin: 6px 18px 8px !important;
    padding: 0 0 6px 0 !important;
  }
  /* Personal Characteristics rows — gray block, inset */
  .dc-qp-char-col  > .dc-qp-char-list {
    order: 9 !important;
    margin: 0 18px 18px !important;
    padding: 4px 14px !important;
    border-radius: 12px !important;
  }
  /* Measurements title */
  .dc-qp-char-col  > .dc-qp-char-title:nth-of-type(2) {
    order: 10 !important;
    margin: 6px 18px 8px !important;
    padding: 0 0 6px 0 !important;
  }
  /* Measurements grid — gray block, inset */
  .dc-qp-char-col  > .dc-qp-meas-grid {
    order: 11 !important;
    margin: 0 18px 18px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }
  .dc-qp-about-col > .dc-qp-section.dc-qp-services {
    order: 12 !important;
    padding: 14px 18px 18px !important;
    margin: 0 !important;
    border-top: 1px solid var(--lm-border-2, #f1f5f9) !important;
  }
  .dc-qp-photo {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background-position: 50% 25% !important;
    background-size: cover !important;
    position: relative;
  }
  /* R20H: QP tier-corner & bookmark on mobile — positioning is handled by
     the parent .dc-qp-corner-actions wrapper (bookmark to the LEFT of tier
     with fixed gap, like desktop). Mobile rules below are visual-only;
     don't re-add top/left/right/position here or you'll break the wrapper. */
  .dc-qp-tier-corner {
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .dc-qp-tier-corner .dc-card-tier {
    padding: 4px 10px !important;
    font-size: 10.5px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    line-height: 1 !important;
  }
  /* QP bookmark on mobile: transparent fill with thin outline, so only
     the contour + icon read against the photo. */
  .dc-qp-bookmark {
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: 1.5px solid rgba(255,255,255,0.95) !important;
    color: #fff !important;
    box-shadow: 0 1px 6px rgba(15,23,42,0.25) !important;
  }
  .dc-qp-bookmark:hover { background: rgba(255,255,255,0.12) !important; }
  .dc-qp-bookmark.is-saved {
    background: rgba(255,255,255,0.18) !important;
    color: #fff !important;
  }
  .dc-qp-about-col,
  .dc-qp-char-col {
    padding: 14px 18px !important;
    border-left: 0 !important;
    border-top: 0 !important;
  }
  /* Remove all internal horizontal dividers on mobile QP */
  .dc-qp-char-title { border-bottom: 0 !important; padding-bottom: 0 !important; }
  .dc-qp-about-col > .dc-qp-section.dc-qp-services { border-top: 0 !important; }

  /* QP namerow — name + tier badge LEFT, price RIGHT, all on ONE LINE */
  .dc-qp-namerow {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
  }
  .dc-qp-namerow-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
  }
  .dc-qp-name {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .dc-qp-namerow .dc-card-tier {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    letter-spacing: 0.04em;
    line-height: 1 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .dc-qp-price {
    flex: 0 0 auto !important;
    text-align: right !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
  }
  .dc-qp-price-from {
    font-size: 12.5px !important;
    color: var(--lm-muted, #64748b) !important;
  }
  .dc-qp-price strong,
  #lm-qp-rate {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #16a34a !important;
  }

  /* Larger location + role line */
  .dc-qp-loc {
    font-size: 14.5px !important;
    margin-top: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap;
  }
  .dc-qp-loc .dc-flag { font-size: 16px; }
  .dc-qp-loc .dc-qp-loc-bullet {
    margin: 0 4px;
    color: var(--lm-muted-2, #cbd5e1);
  }
  .dc-qp-foot {
    flex: 0 0 auto !important;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom)) !important;
    background: var(--lm-surface, #fff) !important;
    border-top: 1px solid var(--lm-border-2, #f1f5f9) !important;
    display: flex !important; gap: 10px !important;
    position: sticky; bottom: 0;
  }
  .dc-qp-foot .dc-btn-primary,
  .dc-qp-foot .dc-btn-secondary {
    height: 48px !important;
    flex: 1;
    border-radius: 12px !important;
    font-size: 15px !important;
  }

  /* ── QP services list — 3-row layout per service on mobile ──
     Layout:
       Row 1: Service name (full width)
       Row 2: [EVENT SERVICE tag] · · · · · · · · · · · · [Price]
       Row 3: Request Booking button (full width)
     Desktop's flex row is overridden via CSS Grid. */
  .dc-qp-svc-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "name name"
      "tag price"
      "btn btn" !important;
    align-items: center !important;
    gap: 8px 12px !important;
    padding: 14px !important;
  }
  .dc-qp-svc-info {
    grid-area: unset !important;
    /* The desktop wraps name+tag inside .dc-qp-svc-info. We unwrap it visually
       by displaying it as contents and letting the children participate in the grid. */
    display: contents !important;
  }
  .dc-qp-svc-name {
    grid-area: name !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  .dc-qp-svc-tag {
    grid-area: tag !important;
    justify-self: start !important;
    align-self: center !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    padding: 3px 8px !important;
  }
  .dc-qp-svc-right {
    /* Desktop wraps price+button inside .dc-qp-svc-right. We unwrap the same way. */
    display: contents !important;
  }
  .dc-qp-svc-price {
    grid-area: price !important;
    justify-self: end !important;
    align-self: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    color: var(--lm-text, #0f172a) !important;
  }
  .dc-qp-svc-btn {
    grid-area: btn !important;
    width: 100% !important;
    height: 42px !important;
    padding: 0 16px !important;
    font-size: 13.5px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    margin-top: 4px !important;
  }

  /* ════════════════════════════════════════════════════════════════
     MORE FILTERS DRAWER — convert from right-anchored to bottom-sheet
     ════════════════════════════════════════════════════════════════ */
  .lm-mf-scrim.is-open {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }
  .lm-mf-drawer {
    width: 100% !important;
    max-width: 100% !important;
    height: 92vh !important;
    max-height: 92vh !important;
    border-radius: 18px 18px 0 0 !important;
    transform: translateY(100%) !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
  }
  .lm-mf-scrim.is-open .lm-mf-drawer,
  .lm-mf-scrim:not([hidden]) .lm-mf-drawer { transform: translateY(0) !important; }
  .lm-mf-drawer::before {
    content: "";
    display: block;
    width: 40px; height: 4px;
    border-radius: 2px;
    background: var(--lm-muted-2, #cbd5e1);
    margin: 8px auto 0;
  }

  /* ── Hide bottom nav while a sheet is open ───────────────── */
  body.lm-md-sheet-open .lm-m-bottomnav { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE token tweaks
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html.lm-dark .lm-md-filterbar {
    background: var(--lm-surface, #0f172a);
    border-bottom-color: var(--lm-border, #1e293b);
  }
  /* Dark theme: lift the search bar above the page background.
     Previously bg matched --lm-bg making it almost invisible. */
  html.lm-dark .lm-md-search,
  html[data-lm-theme="dark"] .lm-md-search {
    background: var(--lm-surface-2, #1e2836) !important;
    border-color: var(--lm-border, #2d3748) !important;
  }
  html.lm-dark .lm-md-search:focus-within,
  html[data-lm-theme="dark"] .lm-md-search:focus-within {
    border-color: var(--lm-primary, #10b981) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important;
  }
  html.lm-dark .lm-md-search-input,
  html[data-lm-theme="dark"] .lm-md-search-input { color: var(--lm-text, #e6edf3); }
  html.lm-dark .lm-md-search-input::placeholder,
  html[data-lm-theme="dark"] .lm-md-search-input::placeholder { color: var(--lm-muted, #8b95a3); }
  html.lm-dark .lm-md-search svg,
  html[data-lm-theme="dark"] .lm-md-search svg { color: var(--lm-muted, #8b95a3); }
  html.lm-dark .lm-md-iconbtn,
  html[data-lm-theme="dark"] .lm-md-iconbtn { background: var(--lm-surface, #151b23); color: var(--lm-text); border: 1px solid var(--lm-border); }
  /* Active state in dark mode = brand green, not jarring white */
  html.lm-dark .lm-md-iconbtn.is-active,
  html[data-lm-theme="dark"] .lm-md-iconbtn.is-active {
    background: var(--lm-primary, #2ea16f);
    border-color: var(--lm-primary, #2ea16f);
    color: #fff;
  }
  html.lm-dark .lm-md-iconbtn.is-active .lm-md-iconbtn-ic,
  html.lm-dark .lm-md-iconbtn.is-active .lm-md-iconbtn-lbl,
  html[data-lm-theme="dark"] .lm-md-iconbtn.is-active .lm-md-iconbtn-ic,
  html[data-lm-theme="dark"] .lm-md-iconbtn.is-active .lm-md-iconbtn-lbl { color: #fff; }
  /* Count badge inverts: white pill with green text on the green button */
  html.lm-dark .lm-md-iconbtn.is-active .lm-md-iconbtn-badge,
  html[data-lm-theme="dark"] .lm-md-iconbtn.is-active .lm-md-iconbtn-badge {
    background: #fff;
    color: var(--lm-primary-strong, #0a5439);
    box-shadow: 0 0 0 2px var(--lm-primary, #2ea16f);
  }
  html.lm-dark .lm-md-sheet,
  html.lm-dark .lm-md-pop-host { background: var(--lm-surface); }
  html.lm-dark .lm-md-pill { background: var(--lm-bg, #0b1220); color: #fff; }
  html.lm-dark .lm-md-pill.is-on { background: #fff; color: #0f172a; }
  html.lm-dark .lm-md-sheet-apply { background: #fff; color: #0f172a; }
}