/* Il foglio delle scelte di un piatto: pulsanti grandi, da toccare col pollice in piedi */
.ds { display: grid; gap: 14px; max-height: min(62vh, 560px); overflow-y: auto; padding: 2px 0 6px; }
.ds-grp { display: grid; gap: 8px; }
.ds-t { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: 15px; }
.ds-hint { font-weight: 600; font-size: 12px; color: var(--muted); }
.ds-grp.need .ds-hint { color: var(--danger); }
.ds-sub { font-size: 13px; color: var(--muted); }
.ds-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-chip {
  min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; text-align: left;
}
.ds-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-text, #fff); }
.ds-chip.rm[aria-pressed="true"] { border-color: var(--danger); background: var(--danger); color: #fff; }
.ds-qty { display: flex; align-items: center; justify-content: center; gap: 18px; }
.ds-qty button {
  width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface);
  color: var(--text); font: inherit; font-size: 24px; cursor: pointer;
}
.ds-qty output { min-width: 32px; text-align: center; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ds-go { margin-top: 10px; min-height: 50px; font-size: 16px; }
.ds-go:disabled { opacity: .55; }

/* I suggerimenti: una riga per piatto, col perché sopra il nome */
.sg { display: grid; gap: 6px; }
.sg-title { font-size: 13px; font-weight: 700; color: var(--muted); }
.sg-list { display: grid; gap: 6px; }
.sg-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; text-align: left; cursor: pointer;
  border: 1.5px dashed var(--accent); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; }
.sg-card img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; }
.sg-txt { display: grid; flex: 1; min-width: 0; }
.sg-why { font-size: 12px; color: var(--muted); }
.sg-nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-pr { font-variant-numeric: tabular-nums; font-size: 14px; }
.sg-add { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: var(--accent-text, #fff); font-weight: 800; font-size: 18px; }