body { font-family: Arial; background:#f4f4f4; margin:0; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,220px); gap:16px; padding:16px; }
.card { background:#fff; padding:16px; border-radius:14px; box-shadow:0 4px 10px #0002; cursor:pointer; }
.card.selected { border:3px solid #d4a017; }
.preco { color:green; font-weight:bold; }
.total-box { position:fixed; bottom:0; width:100%; background:#2e7d32; color:#fff; text-align:center; padding:14px; font-size:22px; }
.card small { color: #777; font-size: 13px;}
.card {
  border: 2px solid #ddd;
  padding: 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.2s;
}

.card.selected {
  border-color: #c9a227;
  background: #fff9e6;
}