.products { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--gray); border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.card-img {
  background: var(--navy); border-radius: 10px;
  font-size: 3rem; text-align: center; padding: 22px 0;
}
.card h3 { color: var(--navy); font-size: 1rem; }
.muted { color: #667; font-size: .85rem; }
.card .btn { margin-top: 6px; padding: 10px; }

.row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px solid #dde;
}
.del { background: none; border: 0; color: #c0392b; font-size: 1.1rem; margin-left: 10px; cursor: pointer; }
.total { margin: 20px 0; color: var(--navy); }
.pay { width: 100%; }

@media (min-width: 700px) {
  .products { grid-template-columns: repeat(4, 1fr); }
}