@media (max-width:640px){.page-hero{padding:36px 0 !important}.page-hero.small{padding:32px 0 !important}.page-hero .container{padding-left:16px !important;padding-right:16px !important}.page-hero h1{font-size:28px !important;line-height:1.15 !important}.page-hero p{font-size:15px !important;line-height:1.55 !important;max-width:40rem}.page-hero img,.hero img,.hero-image img{max-height:260px;width:100%;height:auto;object-fit:cover;border-radius:14px}.btn,button,input[type="submit"],a.button,a.btn{min-height:44px}.section{padding:28px 0 !important}.section .container{padding-left:16px !important;padding-right:16px !important}ul.checklist{padding-left:0 !important}ul.checklist li{margin:10px 0 !important}footer .container{padding-left:16px !important;padding-right:16px !important}footer .footer-grid,footer .grid{row-gap:14px}}@media (max-width:420px){.page-hero h1{font-size:26px !important}}:focus-visible{outline:2px solid #fe0000;outline-offset:2px}

/* Collapsible "Popular buyer searches" (keeps SEO text accessible, reduces page noise) */
details.seo-topics { margin-top: 12px; }
details.seo-topics > summary { cursor: pointer; font-weight: 700; padding: 10px 0; }
details.seo-topics[open] > summary { margin-bottom: 6px; }
details.seo-topics ul { margin-top: 6px; }



/* --- Form submit visibility on mobile (avoid keyboard covering submit) --- */
@media (max-width: 640px){
  form{ scroll-margin-bottom: 120px; }
  .form-card, .form-wrap, .form-container, .contact-form, .buyer-intake, .seller-intake{
    padding-bottom: 5rem !important;
  }
}

/* --- Footer mobile readability --- */
@media (max-width: 640px){
  footer, .site-footer{ line-height: 1.55; }
  footer a, .site-footer a{ padding:.15rem 0; display:inline-block; }
  footer .footer-cols, .site-footer .footer-cols{ row-gap: 1rem; }
}

/* === Mobile Friendliness Hardening (safe overrides) === */

/* Fluid media */
img, video, canvas, svg { max-width: 100%; height: auto; }

/* Prevent long strings from breaking layout */
body, .container, main, section, article { overflow-wrap: anywhere; word-break: break-word; }

/* Tables: allow horizontal scroll on small screens */
table { width: 100%; }
@media (max-width: 860px){
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Comfortable tap targets + readable nav on mobile */
@media (max-width: 860px){
  .nav-toggle{ min-width:44px; min-height:44px; padding:10px; }
  .main-nav a,
  .main-nav summary,
  nav.main-nav a,
  nav.main-nav summary{
    display:block;
    padding:12px 16px !important;
    line-height:1.25;
  }
  .main-nav{ max-height: calc(100vh - 72px); overflow:auto; -webkit-overflow-scrolling: touch; }
  .main-nav .nav-dd-menu a{ padding-left:22px !important; }
  .nav-search{ width:100%; }
  .nav-search input{ width:100%; min-height:44px; font-size:16px; }
}

/* Forms: avoid iOS zoom + improve spacing */
@media (max-width: 640px){
  input, select, textarea, button{ font-size:16px; }
  input, select, textarea{ min-height:44px; }
  button, .btn, a.btn{ min-height:44px; }
}

/* Prevent sticky elements from covering content on mobile safe areas */
@media (max-width: 640px){
  .sticky-cta, .sticky-bar, .sticky-bottom, .bottom-bar{
    padding-bottom: env(safe-area-inset-bottom);
  }
  body{ padding-bottom: env(safe-area-inset-bottom); }
}

/* Slightly tighter containers on small screens to avoid edge-to-edge text */
@media (max-width: 640px){
  .container{ padding-left:16px !important; padding-right:16px !important; }
}


/* Zain patch (safe-only): remove injected mobile bottom CTA bar (call/text) on mobile */
@media (max-width: 860px){
  .mobile-cta-bar{ display:none !important; }
  body{ padding-bottom: env(safe-area-inset-bottom) !important; }
}



/* SAFE-ONLY PATCH: remove bottom sticky CTA on mobile without affecting JS/menu */
@media (max-width:900px){#stickyCta,.sticky-cta{display:none !important;}body.has-sticky-cta{padding-bottom:0 !important;}}


/* =====================================================================
   MOBILE NAV + LAYOUT HOTFIX (SAFE-ONLY)
   - Ensures the hamburger menu reliably shows/hides the nav
   - Reverses an accidental mobile rule that turned paragraphs/lists into flex
   ===================================================================== */

@media (max-width: 860px){
  /* Undo accidental global flexing on mobile that can wreck layout
     (style.min.css currently forces body/p/a/li to inline-flex at <=860px). */
  body{ display:block !important; align-items:unset !important; justify-content:unset !important; }
  p{ display:block !important; align-items:unset !important; justify-content:unset !important; }
  li{ display:list-item !important; align-items:unset !important; justify-content:unset !important; }
  /* Keep normal inline links in content areas */
  a{ display:inline !important; align-items:unset !important; justify-content:unset !important; }
  /* Preserve buttons */
  a.btn, a.button, .btn, button{ display:inline-flex !important; }
  /* But keep nav links blocky / tappable */
  #mainNav a, nav.main-nav a{ display:block !important; }

  /* Header context for absolute-positioned mobile nav */
  .site-header .header-inner{ position:relative; }

  /* Make sure the toggle is visible/clickable on mobile */
  #navToggle, .nav-toggle, .site-header .nav-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    z-index:1202 !important;
  }


  /* Mobile nav behavior is controlled by js/mobile-menu-rebuild.js.
     We intentionally do NOT force #mainNav open/closed here to avoid
     fighting the JS drawer (safe-only). */

  /* Keep overlay above page content (actual visibility handled via body.nav-open) */
  #navOverlay.nav-overlay{ z-index: 2147483646 !important; }

}

/* SAFE-ONLY: ensure body scroll lock works with the JS "no-scroll" class
   (some pages/styles target body.nav-open; we support both). */
@media (max-width: 860px){
  body.no-scroll{ overflow:hidden !important; touch-action:none !important; }
}


/* ZAIN: Bounce improvements (safe-only) — keep hero CTAs above the fold on mobile */
@media (max-width: 640px){
  .hero{ padding-top:18px !important; padding-bottom:18px !important; min-height:auto !important; }
  .hero h1{ font-size:1.7rem !important; line-height:1.15 !important; margin-bottom:10px !important; }
  .hero p{ font-size:1rem !important; line-height:1.35 !important; margin-bottom:12px !important; }
  .hero .hero-actions{ display:flex !important; gap:10px !important; flex-wrap:wrap !important; }
  .hero .hero-actions a{ flex:1 1 160px !important; }
  /* Keep the hero subhead from pushing CTAs below the fold */
  .hero .hero-subhead{
    display:-webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow:hidden !important;
  }
  .hero .hero-mini-link{ margin-top:10px !important; font-weight:600 !important; }
  .hero .hero-mini-link a{ text-decoration: underline !important; }
}