@layer overrides {
/* ── Responsive tweaks ─────────────────────────────────── */
@media (max-width: 1200px) {
  .recipe-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .recipe-grid { grid-template-columns: repeat(2, 1fr); }
  .drawer { width: 100%; }
  .drawer-footer { padding-bottom: env(safe-area-inset-bottom); }
}
@media (max-width: 700px) {
  .recipe-grid { grid-template-columns: 1fr; gap: 8px; }
}
}