/* ============================================================
   responsive.css -- Global mobile breakpoint catch-all (component-local responsive tweaks stay in their own file).
   Part of the split from the original single style.css.
   ============================================================ */

/* ---------- RESPONSIVE ---------- */
@media (max-width: 480px) {
  body { font-size: 15px; }
  .panel { padding: 1.25rem; }
  .hero { padding: 3rem 1rem 2rem; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .checkout-bar { flex-direction: column; align-items: stretch; text-align: center; }
  .site-nav { padding: 0.65rem 1rem; }
  .wiki-article { padding: 1.25rem; }
  .article-nav { flex-direction: column; align-items: stretch; }
}