/* Lazy Bite — responsive.css : centralised breakpoints.
   Load LAST so these overrides win. Layouts are reorganised, never just shrunk. */

/* ---------- <= 1200px : large laptop ---------- */
@media (max-width: 1200px) {
  .menu-layout { grid-template-columns: 1fr 300px; }
  .checkout-layout { grid-template-columns: 1fr 340px; }
  .track-layout { grid-template-columns: 1fr 320px; }
  .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
  .footer-grid > :nth-child(5) { grid-column: span 3; }
}

/* ---------- <= 1080px : dashboards collapse the sidebar to a drawer ---------- */
@media (max-width: 1080px) {
  .dash, .dash.is-collapsed { grid-template-columns: 1fr; }
  .dash-side { position: fixed; top: 0; left: 0; width: 264px; transform: translateX(-102%); }
  .dash-side.is-open { transform: none; box-shadow: var(--shadow-xl); }
  .dash.is-collapsed .dash-side a span, .dash.is-collapsed .dash-side .navlabel,
  .dash.is-collapsed .dash-side__brand span, .dash.is-collapsed .dash-side__user div { display: block; }
  .dash.is-collapsed .dash-side a { justify-content: flex-start; }
  .dash-burger { display: grid; }
  .two-col, .three-col, .menu-manager, .wizard { grid-template-columns: 1fr; }
  .wizard-steps { position: static; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 6px; }
  .wizard-steps li { flex: none; }
}

/* ---------- <= 1024px : marketing + customer layout shifts ---------- */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; text-align: left; }
  .hero__visual { order: -1; max-width: 520px; }
  .hero-float--a { left: 0; } .hero-float--b { right: 0; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step__line { display: none; }
  .install-card { grid-template-columns: 1fr; }
  .search-layout { grid-template-columns: 1fr; }
  .filters { display: none; }
  .filters.is-open { display: grid; position: fixed; inset: auto 0 0 0; top: auto; max-height: 80vh; z-index: var(--z-modal);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-xl); }
  .filter-sheet-btn { display: inline-flex; }
  .menu-layout { grid-template-columns: 1fr; }
  .cart-rail { display: none; }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-nav { position: static; display: flex; overflow-x: auto; gap: 4px; }
  .profile-nav button { flex: none; white-space: nowrap; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .auth { grid-template-columns: 1fr; }
  .auth__aside { display: none; }
}

/* ---------- <= 900px : header becomes hamburger, checkout stacks ---------- */
@media (max-width: 900px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn-ghost { display: none; }
  .checkout-layout, .track-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :nth-child(5) { grid-column: auto; }
  .footer-brand { grid-column: span 2; }
  .app-nav { display: none; }
  .bottom-nav { display: flex; }
  .app-search { max-width: none; }
  .kanban { grid-auto-columns: minmax(258px, 78vw); }
}

/* ---------- <= 768px : tablet portrait / large phone ---------- */
@media (max-width: 768px) {
  .section { padding-block: clamp(36px, 8vw, 56px); }
  .section-head { flex-direction: column; align-items: flex-start; }
  .grid-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .hero__proof { gap: var(--sp-5); }
  .modal { align-items: flex-end; padding: 0; }
  .modal__panel { width: 100%; max-height: 90vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translateY(100%); }
  .modal.is-open .modal__panel { transform: none; }
  .drawer { width: 100%; }
  .toast-stack { left: 12px; right: 12px; bottom: calc(var(--bottomnav-h) + 12px); width: auto; }
  .table { min-width: 620px; }
  .dash-content { padding: 16px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .rd-head { margin-top: -46px; }
  .rd-card { padding: var(--sp-4); }
  .menu-nav { top: 60px; }
  .cta-band { border-radius: var(--radius-lg); }
}

/* ---------- <= 620px : phones ---------- */
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-auto { grid-template-columns: 1fr; }
  .grid-auto-sm { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .hero__cta .btn { flex: 1; }
  .app-header__inner { height: 60px; gap: 10px; }
  .loc-btn { max-width: 140px; padding: 6px 8px; }
  .loc-btn small { display: none; }
  .loc-btn strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-header .app-search { display: none; }
  .app-header--search .app-search { display: block; }
  .slot-grid { grid-template-columns: repeat(2, 1fr); }
  .f-card__media { width: 96px; }
  .f-card__media img { width: 96px; height: 96px; }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .pin-input input { width: 46px; height: 56px; font-size: 1.25rem; }
  .demo-roles__grid { grid-template-columns: 1fr; }
  .social-row { grid-template-columns: 1fr; }
  .table-toolbar { flex-direction: column; align-items: stretch; }
  .prep-next__order strong { font-size: 1.5rem; }
  .kcard__actions { flex-direction: column; }
  .order-keyfacts { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- <= 430px : compact phones ---------- */
@media (max-width: 430px) {
  .container { padding-inline: var(--sp-4); }
  .btn-lg { padding: 13px 20px; font-size: var(--fs-base); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .qr-box { width: 148px; height: 148px; }
  .grid-auto-sm { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- <= 360px : smallest supported ---------- */
@media (max-width: 360px) {
  :root { --fs-base: .9rem; }
  .slot-grid { grid-template-columns: 1fr; }
  .pin-display span { width: 40px; height: 50px; font-size: 1.2rem; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .bottom-nav, .cart-fab, .dash-side, .dash-top, .toast-stack, .btn { display: none !important; }
  body { background: #fff; }
  .card, .panel { box-shadow: none; border-color: #ccc; }
}