/* Mobile readability & tap targets without touching templates */

/* Never block scrolling; allow horizontal scroll when needed */
html, body { overflow-x: auto; }

/* Allow header/nav to overflow horizontally if it needs more room */
header, .header, .navbar, nav { min-width: 480px; }

/* iPhone safe-area padding */
@supports (padding: max(0px)) {
  body { padding-bottom: max(env(safe-area-inset-bottom), 0px); }
}



@media (max-width: 480px) {
  /* 1) Bigger base text everywhere */
  html { font-size: clamp(18.7px, 3.75vw, 22px); }  /* ~18.7–22px base */
  body { line-height: 1.5; }

  /* 2) Header / nav links larger and spaced */
  header, nav a { font-size: 1.22rem; }
  nav a { padding: 1.06rem 1.2rem; display: inline-block; }

  /* 3) Buttons and inputs meet 44px tap target */
  button, .btn, input, select, textarea {
    font-size: 1.22rem;
    line-height: 1.25;
    padding: 1.06rem 1.25rem;
    min-height: 54px;
    width: 100%;
    box-sizing: border-box;
  }

  /* 4) Cards/containers less cramped */
  .container, .card, .panel, .box, .p-4 { padding: 1.25rem !important; }

  /* 5) Kill tiny utility text; force a sane minimum */
  .text-sm, .text-xs { font-size: 1.18rem !important; }

  /* 6) Tables → stacked “cards” on phones */
  table { font-size: 1.13rem; width: 100%; }
  table thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }
  tr {
    margin-bottom: .62rem;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: .63rem .75rem;
    background: #fff;
  }
  td { display: flex; justify-content: space-between; gap: .62rem; padding: .42rem 0; }

  /* 7) Grids collapse to one column */
  .grid { grid-template-columns: 1fr !important; }
  .col, .column { width: 100% !important; }

  /* 8) Header bar not microscopic */
  .site-header, .navbar { padding: .75rem 1rem; }

  /* 9) Make native selects readable but keep native UI */
  select, select option { font-size: 18.7px !important; } /* >=16px avoids iOS zoom */
  #payment_method {
    height: 56px;
    min-height: 56px;
    line-height: 1.35;
    padding: 13px;
    width: 100%;
    box-sizing: border-box;
  }
}