/* Nuvio phone experience (applies below 640px). Loaded on every customer-facing page. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; }
a, button, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: rgba(124, 108, 255, .18); }

@media (max-width: 639px) {
  /* Smaller headings/large text on phones. `html body` beats Tailwind's single-class rules; small text is left alone. */
  html body .text-base { font-size: .9375rem; line-height: 1.5; }
  html body .text-lg   { font-size: 1rem;     line-height: 1.5; }
  html body .text-xl   { font-size: 1.125rem; line-height: 1.4; }
  html body .text-2xl  { font-size: 1.25rem;  line-height: 1.3; }
  html body .text-3xl  { font-size: 1.5rem;   line-height: 1.25; }
  html body .text-4xl  { font-size: 1.75rem;  line-height: 1.2; }
  html body .text-5xl  { font-size: 2rem;     line-height: 1.15; }
  html body .text-6xl  { font-size: 2.25rem;  line-height: 1.1; }

  /* iOS zooms the whole page when a focused field is under 16px */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }

  /* Comfortable touch targets (44px) */
  .btn-primary, .btn-secondary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
  .tap { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* Product grids: 2 columns, tighter cards */
  .product-card-body { padding: .75rem; }
  .product-card-actions { padding: 0 .75rem .75rem; }
}