/* menu — a priced menu in sections.
   Multi-column rather than a grid: sections are wildly different lengths, and
   columns let a short one sit under a short one instead of leaving a hole. */
.menu__cols { columns: 2; column-gap: 64px; }
.menu__section { break-inside: avoid; margin: 0 0 40px; }
.menu__section-label { color: var(--text-subtle); margin: 0 0 4px; }
.menu__section-note { color: var(--text-muted); margin: 0 0 14px; }
.menu__list { margin: 0; }
/* Prices hidden: the list is a <ul>, so its bullets and indent come off. The
   row and item rules are class-based, so they carry over untouched. */
.menu__list--plain { list-style: none; padding: 0; }

.menu__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
}
.menu__item { display: flex; align-items: baseline; gap: 10px; margin: 0; min-width: 0; }
.menu__price { margin: 0 0 0 auto; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.menu__num {
  flex: 0 0 auto;
  width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 600;
}

@media (max-width: 767px) {
  .menu__cols { columns: 1; }
}