/* Mobile fit.
   Loaded last so it can correct anything earlier that assumes a desktop
   width. The goal is narrow: nothing should ever scroll sideways, and
   nothing should be cut off on a 320px phone. */

/* A page must never scroll sideways. When it does, the cause is almost
   always one wide child, the rules below catch the usual culprits, and
   this stops the whole layout shifting in the meantime. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Media scales down instead of forcing the page wider. */
img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Long unbroken strings, tracking IDs, URLs, emails, wrap instead of
   pushing the page out. */
body {
  overflow-wrap: break-word;
}

@media (max-width: 640px) {
  /* Any fixed width becomes a maximum. Cards, modals and panels sized for
     desktop then fit a phone without each needing its own media query. */
  .modal, .ds-card, .req-card, .quote-card, .shop-card, .co-card,
  .sm-card, .sp-card, .dz-card, .sa-card, .dl-card, .testimonial-card,
  .step-card, .product-card {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Form controls are the most common overflow: a fixed-width input plus
     padding easily exceeds a narrow screen. */
  input, select, textarea, .ds-input {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Multi-column grids collapse rather than squeezing columns to nothing. */
  .qf-row,
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Wide tables scroll inside their own box, not the page. */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Comfortable tap targets, 44px is the usual accessibility floor, and
     it matters most for people who are not steady with a thumb. */
  button, .ds-btn, .btn-primary, .btn-ghost, a.ds-btn {
    min-height: 44px;
  }

  /* Room for the fixed bottom navigation so it never covers content. */
  body { padding-bottom: env(safe-area-inset-bottom, 0); }

  /* Header actions wrap instead of overflowing off-screen. */
  .header-actions, .shop-head, .shop-tabs, .radar-controls {
    flex-wrap: wrap;
  }

  /* 16px minimum on inputs: below that, iOS zooms the whole page when a
     field is focused, which looks like the site "jumping". */
  input, select, textarea {
    font-size: 16px;
  }
}

/* Very narrow phones, reduce padding rather than let content clip. */
@media (max-width: 380px) {
  .quote-page, .shop-page, .radar-wrap, .doc {
    padding-left: 12px;
    padding-right: 12px;
  }
}