/* ============================================================
   HOUSE OF WOK — Responsive Rules
   Tested widths: 320, 360, 375, 390, 414, 430, 768, 1024, 1366+
   Header on mobile = brand + cart button + burger only
   (Reserve / Order live in the off-canvas & floating CTA).
   ============================================================ */

@media (max-width: 1180px) {
  .main-nav a.nav-link, .main-nav button.nav-drop-btn { padding: 9px 10px; font-size: 0.9rem; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid .footer-contact-col { grid-column: 1 / -1; }
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1024px) {
  :root { --header-h: 70px; }
  .main-nav { display: none; }
  .burger { display: block; }
  /* keep the bar uncluttered: cart button + burger always fit */
  .header-cta .btn-ghost,
  .header-cta .btn-red { display: none; }
  .header-cta { gap: 8px; margin-left: auto; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: -1; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .cart-layout { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .container { width: calc(100% - 32px); }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-bottom: 60px; }
  .hero-clean { padding-top: 12px; }
  .hero-ctas .btn { width: 100%; }

  .page-hero h1 { max-width: 100%; }
  .menu-toolbar-inner { flex-direction: column; align-items: stretch; border-radius: var(--radius); }
  .menu-filter { justify-content: flex-start; }
  .menu-toolbar { top: calc(var(--header-h) - 6px); }

  /* menu cards: grid, one card per row */
  .menu-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .menu-grid .menu-item { flex: initial; }

  /* gallery: one image per row, larger crop */
  .gallery-grid { grid-template-columns: 1fr; gap: 16px; }
  .gallery-grid figure { aspect-ratio: 4 / 3; }

  .form-grid { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-legal-inner { justify-content: center; text-align: center; }

  .float-actions { right: 14px; bottom: 14px; }
  .float-btn { width: 50px; height: 50px; }
  .float-order { height: 50px; padding: 0 18px; font-size: 0.9rem; }

  .loc-card { padding: 22px; }
  .cart-bar { width: calc(100% - 32px); padding: 10px 10px 10px 18px; gap: 10px; }
  .cart-bar .cb-info { font-size: 0.9rem; }
  .cart-bar .btn { padding: 9px 14px; font-size: 0.82rem; }

  /* cart rows: photo left (spans both rows), name + price on top,
     qty stepper + remove underneath */
  .cart-item {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "media info price"
      "media ctrl ctrl";
    gap: 6px 12px; row-gap: 10px; padding: 12px;
  }
  .cart-item .ci-media { grid-area: media; width: 64px; height: 64px; }
  .cart-item .ci-info { grid-area: info; }
  .cart-item .ci-price { grid-area: price; align-self: start; }
  .cart-item .qty-ctrl { grid-area: ctrl; justify-self: start; }
  .cart-item .ci-remove { grid-area: ctrl; justify-self: end; align-self: center; }
  .cart-promo { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  /* tighter menu cards: smaller photo thumb */
  .menu-item .mi-media { width: 88px; height: 88px; border-radius: 12px; }
  .menu-grid .menu-item { gap: 12px; padding: 13px; }
  .menu-item .mi-name { font-size: 0.98rem; }
  .menu-item .mi-top { flex-direction: column; align-items: flex-start; gap: 2px; }
  .menu-item .mi-foot { justify-content: stretch; }
  .menu-item .mi-foot .add-btn { width: 100%; justify-content: center; }
}

@media (max-width: 360px) {
  .brand-name b { font-size: 1.06rem; }
  .brand-name span { display: none; }
  .brand-logo { width: 38px; height: 38px; }
  .btn { padding: 12px 20px; }
  .chips-scroll .chip { padding: 8px 13px; font-size: 0.8rem; }
  .cart-btn, .burger { width: 42px; height: 42px; }
}

/* large desktop */
@media (min-width: 1600px) {
  :root { --container: 1280px; }
}

/* landscape phones: shrink hero */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; }
}