/* About/Host team cards: the Arthur D. Little wordmark is a very wide SVG (1000×105). Capped at
   132px wide it shrank to a ~14px strip. Let wide logos use the card width, capped at 26px tall. */
.expert-prev .ep-logo { height: auto !important; max-height: 26px !important; max-width: 100% !important; width: auto !important; }
.expert-prev .ep-logo[src*="arthurdlittle"] { max-width: min(100%, 240px) !important; }

/* Explore page: the district quick-filter chips under the hero duplicate the Where field. Removed (all sizes). */
.chips-row { display: none !important; }

/* ============================================================================
   Enhancement 02 — Mobile pass (phones ≤ 768px). Desktop untouched.
   Loaded after shared.css on every page. Each block names the problem it fixes.
   ========================================================================== */
@media (max-width: 768px) {

  /* --- 1. Header: taller tap zone, lang pill visible, menu as a full-screen overlay ---- */
  header .header-top-row, header > .ds-container { height: 60px !important; }
  header img[alt="Arabia Residence"] { height: 36px !important; }
  #menu-toggle { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin-inline-end: -8px; border-radius: 12px; }
  #menu-toggle:active { background: #F3F5F7; }
  #mobile-menu { position: fixed !important; inset: 0 !important; z-index: 120 !important; background: #fff !important; border: 0 !important;
    padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px)) !important; display: flex; flex-direction: column; overflow-y: auto; animation: mp-slide .22s ease-out; }
  #mobile-menu.hidden { display: none !important; }
  #mobile-menu nav { flex: 1; display: flex; flex-direction: column; gap: 0 !important; padding-top: 56px !important; }
  #mobile-menu nav > a { display: flex; align-items: center; min-height: 54px; padding: 0 !important; font-size: 18px !important; font-weight: 600 !important; color: #101C32 !important; border-bottom: 1px solid #ECEFF3; }
  #mobile-menu nav > a::after { content: ''; margin-inline-start: auto; width: 8px; height: 8px; border-top: 2px solid #9CA3AF; border-right: 2px solid #9CA3AF; transform: rotate(45deg); }
  [dir="rtl"] #mobile-menu nav > a::after { transform: rotate(-135deg); }
  #mobile-menu nav > div { margin-top: auto !important; padding-top: 20px !important; border: 0 !important; display: flex; flex-direction: column; gap: 10px; }
  #mobile-menu nav > div a { min-height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 15px !important; font-weight: 700 !important; }
  #mobile-menu nav > div a:not(.btn-primary) { border: 1.5px solid #DDE2EA; color: #101C32 !important; }
  .mp-menu-close { position: absolute; top: 12px; inset-inline-end: 16px; width: 44px; height: 44px; border-radius: 12px; border: 0; background: #F3F5F7; color: #101C32; font-size: 18px; display: flex; align-items: center; justify-content: center; }
  .mp-menu-logo { position: absolute; top: 18px; inset-inline-start: 20px; height: 34px; }
  @keyframes mp-slide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  /* Language pill lives in the header on phones too (shared.js mounts it; it was hidden). */
  header .lang-pill { display: inline-flex !important; height: 40px; }

  /* --- 2. Home hero: one screen, not two ---------------------------------------------- */
  .hero-weave { min-height: 0 !important; }
  .hw-center { padding: 28px 16px 12px !important; }
  .h1-hero { font-size: clamp(1.75rem, 7vw, 2.2rem) !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; }
  .hero-subtitle { font-size: 15px !important; line-height: 1.6 !important; margin-top: 10px !important; }
  .hw-center .flex.flex-wrap.gap-3 { display: none !important; } /* CTAs duplicate the search button + quick cats below */

  /* --- 3. Search: the site already swaps the bar for a compact "Where to?" trigger on
         phones (#mss-trigger). Make that trigger a real 60px tap target; hide the bar. --- */
  .hero-weave .search-bar.hw-dock { display: none !important; }
  #mss-trigger { min-height: 60px !important; border-radius: 999px !important; box-shadow: 0 14px 36px rgba(16,28,50,0.22) !important; }
  .mss-tg-main { font-size: 16px !important; font-weight: 700 !important; }
  .mss-tg-sub { font-size: 13px !important; }
  /* The desktop "living weave" (grid of flipping room tiles) doesn't earn its 180px on a
     phone: it fights the headline and is clipped by the frame. Hide it; keep the navy hero
     with the glow and put the headline + search trigger front and centre. */
  .hw-grid { display: none !important; }
  .hw-wrap { min-height: 0 !important; padding: 0 !important; }
  .hw-overlay { position: static !important; }
  .hw-center { padding: 40px 20px 28px !important; text-align: center; }
  .hero-weave { padding-bottom: 20px !important; }
  #mss-trigger { margin: 0 16px !important; width: calc(100% - 32px) !important; }
  /* Preview-only: on real phones there is no scrollbar; hide it here so the page is truly centred. */
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }

  /* --- 3b. Mobile search sheet (#mss): bigger rows, aligned in RTL, guided flow -------- */
  /* The sheet's own CSS applies flex-direction:row-reverse under [dir=rtl] ON TOP of the
     browser's RTL flip, so labels ended up on the wrong side. Undo the double flip. */
  [dir="rtl"] .mss-card-head, [dir="rtl"] .mss-foot, [dir="rtl"] .mss-dest li, [dir="rtl"] .mss-step, [dir="rtl"] #mss-trigger { flex-direction: row !important; }
  .mss-card-head, #mss-trigger, .mss-input, .mss-card-title { text-align: start !important; }
  .mss-top { padding: 12px 16px !important; }
  .mss-top h2 { font-size: 17px !important; }
  .mss-x { width: 44px !important; height: 44px !important; }
  .mss-scroll { padding: 12px !important; gap: 10px !important; }
  /* The sheet's column is a flex container, so the closed Where/Who cards were being SQUEEZED to a
     22px sliver (unreadable, untappable) and the open calendar was clipped. Cards keep their size;
     the sheet scrolls instead. */
  .mss-card { flex: none !important; }
  /* Keep the Who card within reach: the 5-month calendar scrolls inside its card. */
  .mss-card[data-c="when"].open .mss-card-body { max-height: 50vh; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  .mss-card.open .mss-card-body { overflow: visible !important; }
  .mss-card-head { min-height: 60px; padding: 0 18px !important; }
  .mss-card-head .mss-lab { font-size: 14px !important; line-height: 1.25 !important; }
  .mss-card-head .mss-val { font-size: 15px !important; max-width: 50vw !important; line-height: 1.25 !important; overflow: visible !important; }
  /* Arabic glyphs sit high inside a tall line box; tighten the box so the text reads centred. */
  html[lang="ar"] #mss, html[lang="ar"] #mss-trigger, html[lang="ar"] .search-pill { line-height: 1.35 !important; }
  /* Alexandria's glyphs sit low in their line box (tall ascender space for Arabic marks), so
     text that is mathematically centred reads as sitting near the bottom. Nudge it up. */
  .mss-card-head .mss-lab, .mss-card-head .mss-val, .mss-dn, .mss-st-t, .mss-st-s, .mss-tg-main, .mss-tg-sub, .mss-n, .mss-clear, .mss-go, .mss-top h2 { position: relative; top: -3px; }
  html[lang="ar"] .mss-card-head .mss-lab, html[lang="ar"] .mss-card-head .mss-val, html[lang="ar"] .mss-dn, html[lang="ar"] .mss-st-t, html[lang="ar"] .mss-st-s, html[lang="ar"] .mss-tg-main, html[lang="ar"] .mss-tg-sub, html[lang="ar"] .mss-n, html[lang="ar"] .mss-clear, html[lang="ar"] .mss-go, html[lang="ar"] .mss-top h2 { top: -1px; }
  .mss-card.open .mss-card-title { font-size: 20px !important; padding: 18px 18px 12px !important; letter-spacing: 0 !important; }
  .mss-card-body { padding: 0 14px 16px !important; }
  .mss-input { min-height: 50px; font-size: 16px !important; }
  .mss-dest { margin-top: 8px !important; }
  .mss-dest li { min-height: 56px; padding: 6px 6px !important; gap: 12px !important; }
  .mss-dest li:active { background: #F0F2F4; }
  .mss-dest .mss-pin { width: 40px !important; height: 40px !important; }
  .mss-dest .mss-dn { font-size: 15px !important; line-height: 1.35; flex: 1; min-width: 0; }
  .mss-mname { font-size: 15px !important; margin-bottom: 8px !important; }
  .mss-day { min-height: 44px !important; font-size: 14px !important; }
  .mss-step { min-height: 64px; padding: 10px 0 !important; }
  .mss-stp { width: 40px !important; height: 40px !important; font-size: 20px !important; }
  .mss-ctrl { gap: 12px !important; }
  .mss-n { min-width: 24px !important; font-size: 16px !important; }
  .mss-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important; gap: 12px; }
  .mss-clear { min-height: 48px; padding: 0 8px; }
  .mss-go { flex: 1; justify-content: center; min-height: 50px; border-radius: 12px !important; }

  /* --- 4. Trust strip: 3 tall centred blocks → compact icon-left rows ----------------- */
  .trust-strip { display: flex !important; flex-direction: column; gap: 10px !important; }
  .trust-item { display: grid !important; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: start !important; padding: 12px 14px !important; background: rgba(255,255,255,0.05); border-radius: 14px; }
  .trust-icon { grid-row: 1 / span 2; }
  .trust-item h3, .trust-item p { grid-column: 2; }
  .trust-icon { width: 40px !important; height: 40px !important; margin: 0 !important; }
  .trust-icon svg { width: 20px !important; height: 20px !important; }
  .trust-item h3 { font-size: 15px !important; margin: 0 !important; }
  .trust-item p { font-size: 13px !important; margin: 2px 0 0 !important; line-height: 1.5 !important; }
  section.bg-brand-dark.py-10 { padding-top: 28px !important; padding-bottom: 28px !important; }

  /* --- 5. Section rhythm: desktop paddings and 32px h2 were eating the screen ---------- */
  section.py-16, section.py-16.lg\:py-20, section.py-20 { padding-top: 40px !important; padding-bottom: 40px !important; }
  h2.text-3xl { font-size: 24px !important; line-height: 1.25 !important; }
  h2.text-3xl + p.text-gray-500 { font-size: 14.5px !important; margin-top: 4px !important; margin-bottom: 20px !important; }
  .ds-container { padding-left: 16px !important; padding-right: 16px !important; }

  /* --- 6. Offers: 4 × 240px stacked cards → compact icon-left cards ------------------- */
  section.bg-gray-50 .grid.sm\:grid-cols-2.lg\:grid-cols-4 { gap: 10px !important; }
  section.bg-gray-50 .grid.sm\:grid-cols-2.lg\:grid-cols-4 > a { display: grid !important; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; padding: 14px 16px !important; }
  section.bg-gray-50 .grid.sm\:grid-cols-2.lg\:grid-cols-4 > a > .w-12 { width: 44px !important; height: 44px !important; margin: 0 !important; grid-row: 1 / span 3; }
  section.bg-gray-50 .grid.sm\:grid-cols-2.lg\:grid-cols-4 > a > h3 { font-size: 15.5px !important; margin: 0 !important; }
  section.bg-gray-50 .grid.sm\:grid-cols-2.lg\:grid-cols-4 > a > p { font-size: 13px !important; line-height: 1.5; }
  section.bg-gray-50 .grid.sm\:grid-cols-2.lg\:grid-cols-4 > a > span { padding-top: 6px !important; margin-top: 0 !important; font-size: 13px !important; }

  /* --- 7. Attractions: 4 full-width portraits (2,100px) → 2 × 2 grid ------------------ */
  section.bg-white .grid.sm\:grid-cols-2.lg\:grid-cols-4:has(> a.aspect-\[3\/4\]) { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  a.aspect-\[3\/4\] .p-5 { padding: 12px !important; }
  a.aspect-\[3\/4\] h3 { font-size: 15px !important; }
  a.aspect-\[3\/4\] p { font-size: 12.5px !important; }
  a.aspect-\[3\/4\] span.text-xs { font-size: 10.5px !important; }

  /* --- 8. Value proposition (dark): 5 stacked tiles → 2-col grid ---------------------- */
  #features-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  #features-grid > .feature-card { padding: 14px 12px !important; }
  #features-grid > .feature-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  #features-grid .feature-card > div:first-child, #features-grid .feature-card .w-14, #features-grid .feature-card .w-12 { width: 40px !important; height: 40px !important; margin-bottom: 10px !important; }
  #features-grid .feature-card svg { width: 18px !important; height: 18px !important; }
  #features-grid .feature-card h3 { font-size: 14.5px !important; }
  #features-grid .feature-card p { font-size: 12.5px !important; line-height: 1.5 !important; }
  section.bg-brand-dark.grain p.mb-12 { margin-bottom: 24px !important; }

  /* --- 9. Property cards: touch targets, price legibility ----------------------------- */
  .carousel-btn { width: 36px !important; height: 36px !important; opacity: 1 !important; }
  .heart-btn { width: 40px !important; height: 40px !important; display: flex; align-items: center; justify-content: center; }
  .property-card .card-img { height: 200px !important; }
  #home-featured > .property-card { flex-basis: 84% !important; max-width: 84% !important; }

  /* --- 10. FAQ + text links: 44px rows ------------------------------------------------- */
  .faq-item > button { min-height: 52px; padding: 14px 16px !important; }
  a.text-brand-green.font-semibold.text-sm { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }

  /* --- 11. Footer: 4 columns of 21px links → 2 columns, 40px rows ---------------------- */
  footer .grid.grid-cols-2.md\:grid-cols-4 { gap: 24px 16px !important; }
  footer ul li a { display: inline-flex; align-items: center; min-height: 40px; }
  footer ul.space-y-2\.5 > li + li { margin-top: 0 !important; }
  .newsletter-block { padding: 16px !important; margin-bottom: 24px !important; }
  .newsletter-block .flex.flex-col.lg\:flex-row { gap: 12px !important; align-items: stretch !important; }
  .newsletter-block h3 { font-size: 16px !important; }
  .newsletter-block p { font-size: 12.5px !important; }
  .newsletter-block .newsletter-tabs { margin-bottom: 8px !important; }
  footer { padding-top: 32px !important; }
  footer .grid.grid-cols-2.md\:grid-cols-4 { margin-bottom: 24px !important; }
  .newsletter-block .flex.gap-2 { flex-direction: column; }
  .newsletter-block .nl-input, .newsletter-block .btn-primary { min-height: 48px; width: 100%; }
  /* Guest / Property owner → a real segmented switch: one pill track, two equal halves, the active
     half filled. Sits on its own row above the email field. */
  .newsletter-tabs { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 !important; padding: 4px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 9999px; margin-bottom: 10px !important; }
  .nl-tab { min-height: 40px; padding: 0 12px !important; border: 0 !important; border-radius: 9999px !important; font-size: 13.5px !important; font-weight: 600 !important; white-space: nowrap; }
  .nl-tab:not(.is-active) { background: transparent !important; color: rgba(255,255,255,0.7) !important; }
  .nl-tab.is-active { background: #00AF6C !important; color: #fff !important; box-shadow: 0 2px 8px rgba(0,175,108,0.35); }
  footer .flex.gap-3 a { width: 44px !important; height: 44px !important; }
  /* Bottom bar: legal links on one row (40px tall), currency + language switches on their own row
     below with clear breathing room, each a 44px control. */
  footer .border-t.border-white\/10 { gap: 18px !important; }
  footer .border-t.border-white\/10 > .flex.flex-wrap { display: grid !important; grid-template-columns: auto auto auto auto auto; justify-content: start; align-items: center; gap: 0 10px !important; }
  footer .border-t.border-white\/10 > .flex.flex-wrap > a { display: inline-flex; align-items: center; min-height: 40px; font-size: 12.5px !important; }
  footer .foot-switch-group { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 14px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); width: 100%; }
  footer .foot-switch { min-height: 44px; padding: 0 16px !important; font-size: 13.5px !important; flex: 1; justify-content: center; }
  /* Payment marks: 6 logos crammed into a 212px box on the left → one even row across the width */
  footer .pay-trust { display: flex !important; flex-direction: column; align-items: stretch; gap: 10px !important; }
  footer .pay-marks { width: 100% !important; display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 8px !important; justify-items: center; }
  footer .pay-marks .pay-logo { width: 100% !important; height: 30px !important; object-fit: contain; }
  footer .pay-trust p, footer .pay-trust span { text-align: center; font-size: 12px !important; }

  /* --- 12. Property page: price + Reserve reachable, gallery swipeable ----------------- */
  #pv-sticky-book { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
  #pv-sticky-book .pvsb-btn { min-height: 48px; padding: 0 24px; border-radius: 12px; font-weight: 700; }
  #pv-sticky-book .pvsb-price { font-size: 20px; font-weight: 800; }
  #pv-sticky-book .pvsb-suffix { font-size: 12.5px; font-weight: 500; color: #6B7280; }
  #hdr-share-btn, #hdr-save-btn { min-height: 44px; }
  #show-all-photos { min-height: 40px; }
  #bk-checkin-btn, #bk-checkout-btn, #bk-guests-btn { min-height: 56px !important; }
  .cal-day { min-height: 40px; }
  /* Reviews on property page: card list, not clipped */
  #pv-reviews .rv-card, .pv-review { width: auto !important; }

  /* --- 12b. Property page, Airbnb-style order on phones ---------------------------------
         Photos first (edge-to-edge, swipeable, counter), back/share/save as circles on the
         photo, title + rating below; the desktop booking card becomes a bottom sheet opened
         from the sticky Reserve bar; "You may also like" becomes a swipe rail. ------------- */
  .mp-pv .ds-container.pb-8 { padding: 0 !important; max-width: none !important; }
  .mp-pv .pv-gallery-wrap { position: relative; }
  .mp-pv .gallery-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 0 !important; height: auto !important; aspect-ratio: 4 / 3; grid-template-columns: none !important; }
  .mp-pv .gallery-grid::-webkit-scrollbar { display: none; }
  .mp-pv .gallery-grid > div:not(.pv-gallery-actions):not(.pv-photo-count) { display: block !important; flex: 0 0 100%; scroll-snap-align: start; height: 100% !important; }
  /* Videos button + photo counter are lifted out of the swipe track (JS) and pinned to the photo */
  .mp-pv .pv-gallery-actions { display: flex !important; position: absolute !important; bottom: 14px !important; inset-inline-start: 14px !important; right: auto !important; left: auto !important; z-index: 4; }
  .mp-pv #show-videos { display: inline-flex !important; align-items: center; gap: 6px; min-height: 36px !important; padding: 0 12px 0 10px !important; font-size: 12.5px !important; font-weight: 600; border-radius: 9999px !important; background: rgba(255,255,255,0.94) !important; box-shadow: 0 2px 10px rgba(16,28,50,0.18); }
  .mp-pv #show-videos svg { width: 16px !important; height: 16px !important; }
  /* Listings without a walkthrough video: property-view.html sets [hidden] on the button; the forced inline-flex
     above must not resurrect it (audit 2026-09-18). */
  .mp-pv #show-videos[hidden] { display: none !important; }
  .mp-pv .gallery-grid img { width: 100%; height: 100%; object-fit: cover; }
  .mp-pv #show-all-photos { display: none !important; }
  .mp-pv .pv-photo-count { display: inline-block !important; position: absolute !important; top: auto !important; bottom: 14px !important; inset-inline-end: 14px !important; left: auto !important; width: auto !important; z-index: 4; font-size: 12px; font-weight: 600; line-height: 1; padding: 7px 10px; border-radius: 999px; background: rgba(16,28,50,0.72); color: #fff; font-variant-numeric: tabular-nums; }
  .mp-pv .pv-photo-count:empty { display: none !important; }
  .mp-pv-actions { position: absolute; top: 12px; inset-inline: 12px; display: flex; align-items: center; z-index: 5; pointer-events: none; }
  .mp-pv-actions > * { pointer-events: auto; }
  .mp-pv-actions .mp-spacer { flex: 1; }
  .mp-pv-actions button { width: 40px !important; height: 40px !important; min-height: 0 !important; padding: 0 !important; border-radius: 9999px !important; background: rgba(255,255,255,0.94) !important; border: 0 !important; box-shadow: 0 2px 10px rgba(16,28,50,0.18); display: flex !important; align-items: center; justify-content: center; color: #101C32; margin-inline-start: 8px; }
  .mp-pv-actions button svg { width: 18px; height: 18px; }
  .mp-pv-actions button span { display: none !important; }
  .mp-pv .ds-container.pt-8.pb-4 { padding-top: 16px !important; padding-bottom: 0 !important; }
  .mp-pv #pv-title { font-size: 22px !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; }
  .mp-pv .ds-container.pb-16 { padding-bottom: 110px !important; }
  /* Booking card → bottom sheet */
  .mp-pv .booking-card-wrap { position: fixed; inset-inline: 0; bottom: 0; z-index: 130; max-height: 88vh; overflow-y: auto; background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -12px 44px rgba(16,28,50,0.28); transform: translateY(105%); transition: transform .32s cubic-bezier(.22,1,.36,1); padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .mp-pv .booking-card-wrap::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 999px; background: #D1D5DB; margin: 6px auto 10px; }
  .mp-pv .booking-card-wrap > div { border: 0 !important; box-shadow: none !important; }
  .mp-pv.mp-sheet-open .booking-card-wrap { transform: translateY(0); }
  .mp-pv .mp-sheet-backdrop { position: fixed; inset: 0; background: rgba(16,28,50,0.45); z-index: 125; opacity: 0; pointer-events: none; transition: opacity .25s; }
  .mp-pv.mp-sheet-open .mp-sheet-backdrop { opacity: 1; pointer-events: auto; }
  .mp-pv.mp-sheet-open { overflow: hidden; }
  .mp-pv.mp-sheet-open #pv-sticky-book { display: none !important; }
  .mp-sheet-close { position: absolute; top: 10px; inset-inline-end: 12px; width: 36px; height: 36px; border-radius: 999px; border: 0; background: #F3F5F7; color: #101C32; font-size: 15px; display: flex; align-items: center; justify-content: center; }
  /* Similar homes → swipe rail */
  .mp-pv #pv-similar-section .grid { display: flex !important; overflow-x: auto; gap: 12px !important; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 8px; }
  .mp-pv #pv-similar-section .grid::-webkit-scrollbar { display: none; }
  .mp-pv #pv-similar-section .grid > * { flex: 0 0 78%; scroll-snap-align: start; }
  .mp-pv #pv-similar-section { padding-top: 36px !important; padding-bottom: 36px !important; }

  .mp-pv-actions .mp-sr, .mp-pv-actions #hdr-save-label { display: none !important; }
  .mp-pv-actions button { gap: 0 !important; }

  /* Footer social icons: 44px targets were set earlier but the glyphs stayed 16px and read as lost. */
  footer a.w-9.h-9 { width: 44px !important; height: 44px !important; border-radius: 12px !important; background: rgba(255,255,255,0.08) !important; }
  footer a.w-9.h-9 svg { width: 22px !important; height: 22px !important; }
  footer a.w-9.h-9 + a.w-9.h-9 { margin-inline-start: 0 !important; }
  footer .flex:has(> a.w-9.h-9) { gap: 12px !important; justify-content: flex-start; }

  /* --- 12b. Booking calendar: the two-month desktop popover (≈820px tall) opened inside the
         booking sheet and rendered below the fold, half-clipped. On phones it becomes its own
         fixed sheet: one month at a time, 44px days, footer pinned. */
  .bk-cal-pop { position: fixed !important; inset: auto 0 0 0 !important; top: auto !important; width: 100% !important; max-height: 88vh !important; border-radius: 22px 22px 0 0 !important; transform: translateY(100%) !important; transform-origin: center bottom !important; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important; display: flex !important; flex-direction: column; z-index: 1300 !important; box-shadow: 0 -12px 40px rgba(16,28,50,0.22) !important; transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .2s !important; }
  .bk-cal-pop.open { transform: translateY(0) !important; }
  .bk-cal-pop::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 999px; background: #D1D5DB; margin: 0 auto 10px; flex: none; }
  .bk-cal-pop .cal-header { flex: none; padding: 0 0 10px !important; }
  .bk-cal-pop .cal-nav { width: 40px !important; height: 40px !important; background: #F3F5F7 !important; }
  .bk-cal-pop .cal-sys button { padding: 7px 14px !important; font-size: 13px !important; }
  .bk-cal-pop .cal-months { grid-template-columns: 1fr !important; gap: 0 !important; overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 0 !important; }
  .bk-cal-pop .cal-months > .cal-month:nth-child(n+2) { display: none !important; }
  .bk-cal-pop .cal-month-title { font-size: 15px !important; margin-bottom: 8px !important; }
  .bk-cal-pop .cal-day { font-size: 15px !important; min-height: 44px; }
  .bk-cal-pop .cal-price { font-size: 10px !important; }
  .bk-cal-pop .cal-footer { flex: none; padding: 12px 0 0 !important; }
  .bk-cal-pop .cal-apply { min-height: 48px !important; padding: 0 22px !important; font-size: 15px !important; }
  .bk-cal-pop .cal-clear { min-height: 44px !important; }
  [dir="rtl"] .bk-cal-pop { left: 0 !important; right: 0 !important; }
  body > .bk-cal-pop { opacity: 0; pointer-events: none; }
  body > .bk-cal-pop.open { opacity: 1; pointer-events: auto; }
  .mp-cal-backdrop { position: fixed; inset: 0; background: rgba(16,28,50,0.45); z-index: 1290; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .mp-cal-backdrop.is-on { opacity: 1; pointer-events: auto; }

  /* --- 12c. Modals (amenities, reviews, video) → bottom sheets on phones ------------------
         The centred desktop dialog sat high in the viewport with a blurred backdrop that
         smears on small screens. Sheets rise from the bottom, full width, thumb-reachable. */
  .ari-modal.is-open { align-items: flex-end !important; }
  .ari-modal__backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(16,28,50,0.5) !important; }
  .ari-modal--centered .ari-modal__panel, .ari-modal--reviews .ari-modal__panel, .ari-modal--video .ari-modal__panel { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: min(92vh, 100%) !important; border-radius: 22px 22px 0 0 !important; transform: translateY(100%) !important; transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .2s !important; }
  .ari-modal.is-visible .ari-modal__panel { transform: translateY(0) !important; opacity: 1 !important; }
  .ari-modal--reviews .ari-modal__panel { height: 88vh !important; }
  .ari-modal__panel::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 999px; background: #D1D5DB; margin: 8px auto 0; flex: none; }
  .ari-modal__header { padding: 8px 16px 12px !important; border-bottom-color: #ECEFF3 !important; }
  .ari-modal__title { font-size: 18px !important; }
  .ari-modal__close { width: 44px !important; height: 44px !important; background: #F3F5F7 !important; }
  .ari-modal__body { padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
  .amen-modal-group + .amen-modal-group { margin-top: 20px; }
  .amen-modal-group h3 { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.04em; text-transform: uppercase; color: #6B7488 !important; margin: 0 0 6px !important; }
  html[lang="ar"] .amen-modal-group h3 { letter-spacing: 0; text-transform: none; }
  .amen-modal-list { display: block !important; columns: 1 !important; }
  .amen-modal-list li { min-height: 48px; display: flex !important; align-items: center; gap: 14px; padding: 0 !important; border-bottom: 1px solid #F3F4F6; font-size: 15px !important; }
  .amen-modal-list li svg { width: 22px !important; height: 22px !important; flex: none; }
  [dir="rtl"] .ari-modal__header, [dir="rtl"] .ari-modal__head-actions { flex-direction: row !important; }
  .ari-modal--photos .ari-modal__panel { transform: none !important; }
  /* Share / Save: icon only on phones (header row, photo circles, photo-gallery modal) */
  #hdr-share-btn, #hdr-save-btn, .ari-modal__head-actions button { width: 40px !important; height: 40px !important; min-height: 0 !important; padding: 0 !important; border-radius: 9999px !important; justify-content: center; gap: 0 !important; }
  #hdr-share-btn > :not(svg), #hdr-save-btn > :not(svg), .ari-modal__head-actions button > :not(svg) { display: none !important; }
  .ari-modal__head-actions { gap: 8px !important; }

  /* --- 12b. Fresh visit: one bottom layer at a time (audit 2026-09-18) ---------------------
     While the cookie banner is showing, shared.js keeps body.consent-pending. The WhatsApp float and the Saudi
     Business Center seal (seal.js pins its iframe with inline fixed/z-index styles) stay out of the way, and on the
     property page the banner sits on top of the sticky Reserve bar instead of under it. Everything returns as soon
     as the banner is dismissed and the class is removed. */
  body.overlay-open .wa-float, body.overlay-open .sbc-verify-seal, body.overlay-open .sbc-seal-frame,
  body.menu-open .wa-float, body.menu-open .sbc-verify-seal, body.menu-open .sbc-seal-frame,
  body.consent-pending .wa-float, body.consent-pending .sbc-verify-seal, body.consent-pending .sbc-seal-frame,
  body.modal-open .wa-float, body.modal-open .sbc-verify-seal, body.modal-open .sbc-seal-frame,
  body.mp-sheet-open .wa-float, body.mp-sheet-open .sbc-verify-seal, body.mp-sheet-open .sbc-seal-frame { display: none !important; }
  /* Checkout is a form with its own sticky pay bar; the seal sat on the add-on heading and
     the trust row in the footer already carries it. */
  body:has(#ck-flow) .sbc-verify-seal, body:has(#ck-flow) .sbc-seal-frame { display: none !important; }
  /* The seal is fixed bottom-left: at full scroll it covered the footer language and
     currency switches, so a tap opened the government popup instead (audit 2026-09-18). */
  footer { padding-bottom: 76px !important; }   /* Tailwind pb-8 on the element otherwise wins */
  /* The app-shell nav covered the sign-in card's Terms and Privacy links, so a tap landed on
     the nav instead of the link (audit 2026-09-18). */
  main.auth-grid { padding-bottom: 88px; }
  body.consent-pending:has(#pv-sticky-book) #cookie-consent { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }

  /* --- 13. Checkout: summary first, add-ons as rows, one column, sticky pay bar ---------- */
  #ck-first, #ck-last, #ck-email, #ck-phone, #ck-country-btn { min-height: 52px !important; font-size: 16px !important; }
  #ck-confirm, #cks-btn { min-height: 52px !important; border-radius: 12px !important; }
  /* Checkout wraps the grid in #ck-flow (hidden once a payment returns), so the selector
     names it; `main > .grid` never matched and the summary rendered after Confirm. */
  main.ds-container > #ck-flow > .grid { display: flex !important; flex-direction: column; gap: 0 !important; }
  main.ds-container > #ck-flow > .grid > aside { order: -1; margin-bottom: 22px; }
  .summary-card { padding: 14px !important; border-radius: 16px !important; }
  .summary-card .summary-photo { width: 100% !important; height: 150px !important; border-radius: 12px !important; margin: 0 0 12px !important; object-fit: cover; }
  .summary-card #summary-title { font-size: 16px !important; }
  /* Dates and guests: one clean row each, label left, value + Change right */
  .summary-card .trip-edit-stack { display: flex; flex-direction: column; border-top: 1px solid #F3F4F6 !important; padding: 4px 0 !important; margin: 10px 0 0 !important; }
  .summary-card .trip-edit-row { display: flex !important; align-items: center; justify-content: space-between; gap: 12px !important; min-height: 44px; padding: 0 !important; border: 0 !important; border-bottom: 1px solid #F3F4F6 !important; }
  .summary-card .trip-edit-row:last-child { border-bottom: 0 !important; }
  .summary-card .trip-edit-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .summary-card .trip-edit-label { display: block !important; font-size: 11px !important; font-weight: 600; color: #6B7488 !important; text-transform: uppercase; letter-spacing: 0.04em; }
  html[lang="ar"] .summary-card .trip-edit-label { text-transform: none; letter-spacing: 0; }
  .summary-card .trip-edit-value { font-size: 14px !important; font-weight: 600; color: #101C32 !important; }
  .summary-card .trip-change-link { flex: none; font-size: 13px !important; font-weight: 600; padding: 8px 0 !important; min-height: 44px !important; display: inline-flex; align-items: center; }
  .summary-card #summary-rows { margin-top: 8px; padding-top: 10px !important; }
  .summary-card .price-total { margin-top: 4px !important; padding-top: 10px !important; }
  /* Sticky pay bar: total stays on one line; the button never wraps or overlaps */
  #ck-sticky { gap: 14px !important; }
  #ck-sticky .cks-info { flex: 0 1 auto !important; }
  #ck-sticky .cks-total { display: inline-flex !important; align-items: center; gap: 4px; font-size: 18px !important; white-space: nowrap !important; }
  #ck-sticky .cks-total .riyal { width: 13px; height: 13px; }
  #ck-sticky .cks-btn { flex: 1 1 auto !important; max-width: 62%; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; padding: 13px 16px !important; font-size: 14.5px !important; }
  #ck-sticky .cks-btn.is-long { font-size: 13px !important; }
  /* "Your stay" tiles duplicate the summary card on phones */
  main.ds-container section:has(> .grid.sm\:grid-cols-3 > .checkout-trip-card) { display: none !important; }
  /* Add-ons: cards → rows */
  #addons-grid { display: flex !important; flex-direction: column; gap: 0 !important; border: 1px solid #E5E7EB; border-radius: 14px; overflow: hidden; }
  #addons-grid .addon-card { display: grid !important; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px !important; border: 0 !important; border-bottom: 1px solid #F3F4F6 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; }
  #addons-grid .addon-card:last-child { border-bottom: 0 !important; }
  #addons-grid .addon-card.is-selected { background: #F0FDF6 !important; }
  #addons-grid .addon-icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; margin: 0 !important; }
  #addons-grid .addon-title { font-size: 14.5px !important; }
  #addons-grid .addon-sub, #addons-grid .addon-availability { font-size: 12px !important; line-height: 1.35 !important; }
  #addons-grid .addon-availability { display: none !important; }
  #addons-grid .addon-price { font-size: 13.5px !important; white-space: nowrap; }
  #addons-grid .addon-toggle { width: 24px !important; height: 24px !important; }
  /* Fields: one column */
  main.ds-container .grid.sm\:grid-cols-2 { grid-template-columns: 1fr !important; }
  /* Card logos: under the card option, not below the pay button */
  .ck-pay-trust { display: none !important; }
  #pay-methods .pay-option[data-method="card"] .text-xs { display: flex; gap: 6px; align-items: center; }
  /* Payment-unavailable notice: neutral, not amber */
  #pay-unavailable { background: #F6F8FA !important; border-color: #E5E7EB !important; color: #46506A !important; }
  #trip-edit-dates-btn, #trip-edit-guests-btn { min-height: 40px !important; min-width: 56px; }
  h1.text-3xl, h1.text-4xl { font-size: 26px !important; line-height: 1.2 !important; }

  /* --- 13a. Forms on phones: name fields stack (first name, then last name) and grow to 52px.
         Applies to the Host lead form (step 1), checkout and any two-column field grid. ------ */
  .form-step .grid.grid-cols-2, #ck-form .grid.grid-cols-2, form .grid.grid-cols-2:has(input) { grid-template-columns: 1fr !important; gap: 14px !important; }
  #lead-first, #lead-last, .form-step input[type="text"], .form-step input[type="email"], .form-step input[type="tel"], .form-step input[type="number"], .form-step select { min-height: 52px !important; font-size: 16px !important; }
  .form-step label { font-size: 14px !important; }
  /* Option buttons in the lead form (bedrooms "Studio/1 · 2 · 3 · 4+", yes/no, property count…):
     a 2-column grid of 52px tiles instead of four squeezed pills in one row. */
  .form-step .flex.gap-3:has(> button) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
  .form-step .flex.gap-3 > button { min-height: 52px; font-size: 15px !important; white-space: nowrap; }

  /* --- 13b. Home quick-category chips (All stays / Apartments / Villas…): removed.
         They duplicate the search and Explore filters and add a row of noise under the hero. */
  .home-cats { display: none !important; }

  /* --- 13c. Explore/Experiences search pill on phones ---------------------------------
         Expanded: 3 stacked rows of 56px + full-width Search.
         Scrolled (compact): the site collapsed it into three 21px centred lines with a
         floating 40px button. Make it ONE 52px summary row: Where · When · Who | filters | go. */
  .search-pill .seg { min-height: 56px !important; padding: 8px 16px !important; }
  .search-pill .seg-label { font-size: 11.5px !important; }
  .search-pill .seg-value, .search-pill .seg-compact { font-size: 15px !important; }
  .search-pill .search-go { height: 50px !important; }
  .pill-filters { min-height: 48px !important; }
  /* Compact (scrolled) state = ONE Airbnb-style summary pill + a separate round Filters button.
     Line 1: district in bold, line 2: dates · guests. Tap anywhere on it to expand the search. */
  body.scrolled:not(.pill-expanded) .search-pill { display: flex !important; flex-direction: row !important; align-items: center !important; height: 54px !important; padding: 0 16px !important; border-radius: 9999px !important; gap: 12px !important; }
  body.scrolled:not(.pill-expanded) .search-pill > .seg, body.scrolled:not(.pill-expanded) .search-pill > .search-go { display: none !important; }
  .mp-pill-summary { display: none; flex: 1; min-width: 0; align-items: center; gap: 12px; background: none; border: 0; padding: 0; text-align: start; color: #181818; font-family: inherit; }
  body.scrolled:not(.pill-expanded) .mp-pill-summary { display: flex; }
  .mp-pill-summary svg { width: 18px; height: 18px; flex: none; color: #181818; }
  .mp-pill-summary .mp-l1 { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
  .mp-pill-summary .mp-l2 { display: block; font-size: 12.5px; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; margin-top: 2px; }
  .pill-row { align-items: center; gap: 10px; }
  .pill-row > .pill-filters { display: none !important; width: 48px !important; height: 48px !important; min-height: 0 !important; padding: 0 !important; border-radius: 9999px !important; border: 1px solid rgba(0,0,0,0.14) !important; background: #fff !important; flex: none; align-items: center; justify-content: center; pointer-events: auto; }
  body.scrolled:not(.pill-expanded) .pill-row > .pill-filters { display: flex !important; }
  .pill-row > .pill-filters span { display: none !important; }
  .pill-row > .pill-filters svg { width: 18px; height: 18px; }
  body.scrolled .pill-shell { padding: 8px 0 10px !important; }

  /* --- 14. Explore: hero copy inside the screen; filter row on one line ---------------- */
  .sky-copy { padding-left: 16px !important; padding-right: 16px !important; overflow-wrap: anywhere; }
  .sky-copy h1 { font-size: clamp(1.7rem, 7vw, 2.2rem) !important; }
  .sky-hero { padding: 28px 0 120px !important; }

  /* --- 15. Cookie banner: compact, never covering the sticky CTA ---------------------- */
  #cookie-consent { padding: 12px 16px !important; }
  #cookie-consent .flex { gap: 10px !important; }
  #cookie-consent p { font-size: 12.5px !important; }
  #cookie-consent button { min-height: 44px; flex: 1; }

  /* --- 16. Arabic on phones: bigger body, no clipped descenders ---------------------- */
  html[lang="ar"] body { font-size: 15.5px; }
  html[lang="ar"] .text-sm { font-size: 14px !important; }
  html[lang="ar"] .text-xs, html[lang="ar"] .text-\[11px\], html[lang="ar"] .text-\[11\.5px\] { font-size: 12.5px !important; }
  html[lang="ar"] .h1-hero { line-height: 1.35 !important; }
}

/* Comparison switch: ?mp=off disables the mobile pass on that page (used by enhancement docs). */
html.mp-off .mp-pill-summary, html.mp-off #mp-sticky-price, html.mp-off .mp-sheet-handle { display: none !important; }

/* ============================================================================
   17. Founder review fixes (2026-09-10), phones ≤ 768px.
   ========================================================================== */
@media (max-width: 768px) {
  /* 17a. Header: hamburger visible again (opens the full-screen menu) with the language pill beside it.
         mobile-pass.js moves the pill out of the desktop-only nav wrapper into .mp-hdr-right. */
  header #menu-toggle { display: flex !important; }
  .mp-hdr-right { display: flex; align-items: center; gap: 4px; flex: none; }
  .mp-hdr-right .lang-pill { display: inline-flex !important; height: 36px !important; padding: 0 9px 0 11px !important; font-size: 13px !important; margin: 0 !important; }
  .mp-hdr-right .lang-pill-menu { right: 0; left: auto; }
  [dir="rtl"] .mp-hdr-right .lang-pill-menu { right: auto; left: 0; }
  /* Menu footer: the page markup gives the Sign In / Book a stay row Tailwind items-center, which stopped the two
     stacked buttons from filling the width. Stretch them. */
  #mobile-menu nav > div { align-items: stretch !important; }
  #mobile-menu nav > div a { width: 100%; }

  /* 17b. Property photo: the photo counter sits bottom-right and the Videos pill bottom-left, on the same
         physical sides in Arabic too. The §12b logical insets flipped only one of them in RTL, so they overlapped. */
  .mp-pv .pv-gallery-actions { left: 14px !important; right: auto !important; }
  .mp-pv .pv-photo-count { right: 14px !important; left: auto !important; }
  [dir="rtl"] .mp-pv .pv-gallery-actions { flex-direction: row !important; }

  /* 17c. About, team cards: 3-up at 390px squeezed each card to 136px and the Arthur D. Little wordmark to a
         14px strip. One swipe rail instead; every card is at least 200px wide and the next card peeks. */
  .experts-grid { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px !important; margin: 0 -16px !important; padding: 4px 16px 12px !important; max-width: none !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .experts-grid::-webkit-scrollbar { display: none; }
  .expert-card { flex: 0 0 max(200px, min(78vw, 300px)) !important; scroll-snap-align: start; }
  .expert-prev .ep-logo[src*="arthurdlittle"] { max-width: min(100%, 240px) !important; max-height: 26px !important; }
}

/* 17d. Explore on phones (founder, 2026-09-11): the desktop Where / When / Who popovers are replaced by the bottom sheet
   (mobile-pass.js routes the pill's segments there), so they must never open on a phone. */
@media (max-width: 768px) { #popover-where, #popover-when, #popover-who { display: none !important; } }