/* Mobile-only overrides that won't affect desktop */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }

  /* Typography & spacing */
  body { font-size: 16px; line-height: 1.5; }
  h1 { font-size: clamp(28px, 7vw, 40px); }
  h2 { font-size: clamp(22px, 6vw, 30px); }
  .section-title { font-size: clamp(22px, 5vw, 28px); }
  .content, main, .container { padding: 16px; }

  /* Images & media */
  img, video { max-width: 100%; height: auto; display: block; }

  /* Grids/cards (forces single column on phones) */
  .grid, .product-grid, .cards, .gallery {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* Nav: let it wrap nicely */
  header .nav, .nav { display: flex; flex-wrap: wrap; gap: 12px; }
  .nav a { padding: 10px 14px; }

  /* Buttons/inputs: full-width tap targets */
  .btn, button, .button { width: 100%; }
  input, select, textarea { font-size: 16px; } /* prevent iOS zoom */

  /* Rows that were side-by-side */
  .row, .price-row, .cta-row { flex-direction: column; align-items: stretch; gap: 12px; }

  /* Hero background sizing */
  .hero { min-height: 50vh; background-size: cover; background-position: center; }
}