/* =========================
   BASE RESET
========================= */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f6f6f6;
  -webkit-font-smoothing: antialiased;
}

/* =========================
   CATEGORY BAR
========================= */
#categoryBar {
  position: sticky;
  top: 0;
  z-index: 500;
}

/* =========================
   MENU ROOT
========================= */
#menuRoot {
  padding-bottom: 90px; /* space for basket bar */
}

/* =========================
   MENU ITEM CARD
========================= */
.menu-item {
  background: white;
  margin: 10px;
  padding: 14px;
  border-radius: 12px;
  cursor: pointer;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.menu-item:active {
  transform: scale(0.98);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

/* =========================
   BASKET BAR
========================= */
#basket {
  z-index: 600;
}

/* =========================
   REMOVE MODAL SPECIFIC STYLES FROM HERE (they go in modal.css)
========================= */

/* These should be moved to modal.css or removed if redundant */

/* .modal-sheet, .modal-backdrop, .modifier-set-container */