/* 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;
  }
}