body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #fff; }
/* шире вся страница */
.wrap {
  max-width: 1400px;     /* было 1100px */
  margin: 32px auto;
}

.h2 { text-align:center; font-size: 28px; margin-bottom: 16px; }

/* левая колонка больше, расстояние между блоками больше */
.grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr;  /* было 1.8fr 1fr */
  gap: 56px;                         /* было 48px */
  align-items: start;
}

/* контейнер фото растягиваем на всю свою колонку */
.photo {
  border: 4px solid #3fa2ff;
  border-radius: 16px;
  padding: 12px;
  width: 100%;
  max-width: none;                   /* снимаем ограничение 720px */
  justify-self: start;               /* прижимаем к таблице, можно оставить center */
}

/* само изображение заполняет контейнер и не “ломается” по высоте */
.photo img {
  display: block;
  width: 100%;
  height: auto;                      /* если нужно ограничить высоту: max-height: 620px; object-fit: contain; */
  border-radius: 12px;
}


.table { width:100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { border: 2px solid #2f7ccf; padding: 8px 10px; text-align: left; }
.table th { background: #eef6ff; text-align: center; }
.table td:nth-child(1), .table td:nth-child(4), .table td:nth-child(5) { text-align: center; }

.total { text-align:right; margin-top: 8px; font-weight: 700; color: #1c60aa; }

.btns { display:flex; gap:16px; margin-top: 20px; }
.btn { background:#2f7ccf; color:#fff; border:none; padding:10px 16px; border-radius:10px; cursor:pointer; }
.btn.secondary { background:#4aa3df; }

/* таблица результатов */
.menu-table {
  table-layout: fixed;            /* фиксированная раскладка = прогнозируемые ширины */
  width: 100%;
}

/* шапка таблицы — пожирнее */
.menu-table thead th { 
  font-weight: 700; 
}

/* содержимое — тоже чуть жирнее (или убери, если не нужно) */
.menu-table tbody td { 
  font-weight: 600; 
}

.menu-table th,
.menu-table td {
  white-space: nowrap;            /* НЕ переносить */
  overflow: hidden;               /* прятать лишнее */
  text-overflow: ellipsis;        /* ставить … если не влезло */
}

/* рекомендуемые ширины колонок (можно подогнать под себя) */
.menu-table colgroup col:nth-child(1) { width: 48px; }   /* № */
.menu-table colgroup col:nth-child(2) { width: 320px; }  /* Название блюда */
.menu-table colgroup col:nth-child(3) { width: 160px; }  /* Тип блюда */
.menu-table colgroup col:nth-child(4) { width: 100px; }  /* Кол-во */
.menu-table colgroup col:nth-child(5) { width: 100px; }  /* Цена */