/* ==========================================================================
   Miason Milano — responsive.css
   Ritocchi globali responsive (mobile first). Le sezioni hanno regole proprie.
   ========================================================================== */

@media (max-width: 1199px) {
  :root { --section-spacing: 80px; }
}

@media (max-width: 989px) {
  .section-intro { margin-bottom: 36px; }
  .trust-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 749px) {
  :root { --section-spacing: 64px; }
  html, body { overflow-x: hidden; }
  .page-width { padding: 0 16px; }
  h1 { font-size: calc(2rem * var(--heading-scale)); }
  .btn { padding: 14px 26px; }
  .trust-row { grid-template-columns: 1fr; gap: 12px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .newsletter__form { flex-direction: column; }
  .newsletter__form input,
  .newsletter__form .btn { width: 100%; }
  .footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
}

@media (max-width: 480px) {
  .product-grid { gap: 18px 12px; }
}