/* shop-mobile-fix.css — shared mobile overflow fix for all shop.blun.ai subpages
   Referenced by every shop-*.html page. Fixes finding #497: body text clips right edge on mobile.
   Root cause: topbar nav overflow, containers without max-width safety, missing word-break. */

/* Safety net: prevent any horizontal overflow on the page */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Global word-wrap safety for all text elements */
p, li, h1, h2, h3, h4, td, th, blockquote, figcaption, label, span, a {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Ensure images and media never exceed container */
img, svg, video, iframe, object, embed {
  max-width: 100%;
}

@media (max-width: 768px) {
  /* --- Topbar: hide entirely on mobile — the canonical nav (injected by
       blun_shared_chrome) provides a hamburger menu for primary navigation.
       Keeps only the canonical nav visible to avoid double headers. --- */
  .topbar { display: none; }

  /* --- Shell / main containers: safe padding --- */
  .shell { padding-left: 20px !important; padding-right: 20px !important; }

  /* --- Hero sections: prevent grid overflow --- */
  .hero { padding-left: 20px !important; padding-right: 20px !important; }
  .hero-inner { max-width: 100%; }

  /* --- All-access pricing card (pricing page) --- */
  .all-access { padding: 28px 20px !important; }
  .all-access .price { font-size: 56px; }

  /* --- Sub-card grid (pricing page) --- */
  .sub-card { padding: 28px 20px; }

  /* --- Relay note (pricing page) --- */
  .relay-note { padding: 20px; }

  /* --- Feature grids: single column --- */
  .features { grid-template-columns: 1fr !important; }

  /* --- Stats row: 2 columns --- */
  .stats { grid-template-columns: repeat(2, 1fr); }

  /* --- Values grid (about page) --- */
  .values { grid-template-columns: 1fr; }

  /* --- Categories grid (sourcing page) --- */
  .cats { grid-template-columns: repeat(2, 1fr); }

  /* --- Stories grid (for-sellers) --- */
  .stories { grid-template-columns: 1fr; }

  /* --- Proof stats row (for-sellers hero) --- */
  .proof { flex-direction: column; gap: 12px; }
  .proof .div { width: 100%; height: 1px; }

  /* --- Mock dashboard (for-sellers): prevent overflow --- */
  .hero-mock { overflow: hidden; }
  .mock-row .perf { min-width: 0; }
  .mock-foot { flex-wrap: wrap; }

  /* --- CTA cards: safe padding --- */
  .cta-card { padding: 28px 20px; }

  /* --- Footer (bcf-grid in features page) --- */
  .bcf-grid { grid-template-columns: 1fr; }
  .bcf-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }

  /* --- Footer (foot class used in newer pages) --- */
  .foot { flex-direction: column; gap: 12px; padding: 32px 20px 24px; }

  /* --- Section padding: consistent safe margins --- */
  .section { padding-left: 20px; padding-right: 20px; }

  /* --- Fineprint (pricing page) --- */
  .fineprint { padding: 20px; }

  /* --- Search bar (sourcing page): prevent overflow --- */
  .search { max-width: 100%; }
  .search input { min-width: 0; }

  /* --- Tables: horizontal scroll if needed --- */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* --- Large headings: prevent overflow --- */
  h1.massive { font-size: clamp(32px, 8vw, 48px); }
  h1.hero-h { word-break: break-word; }
}

/* Extra-small devices (< 400px) */
@media (max-width: 400px) {
  .shell { padding-left: 16px !important; padding-right: 16px !important; }
  .hero { padding-left: 16px !important; padding-right: 16px !important; }
  .all-access .price { font-size: 44px; }
  .cats { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
}