.wqc-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.wqc-product {
  border: 1px solid #e5e5e5;
  padding: 14px;
  border-radius: 10px;
}
.wqc-title { margin: 10px 0 6px; }
.wqc-actions { margin-top: 10px; }
.wqc-add, .wqc-remove, .wqc-update-all, .wqc-clear, .wqc-submit {
  padding: 10px 12px;
  border: 1px solid #222;
  background: #fff;
  cursor: pointer;
  border-radius: 8px;
}
.wqc-table { width: 100%; border-collapse: collapse; }
.wqc-table th, .wqc-table td { border: 1px solid #ddd; padding: 8px; }
.wqc-row { margin: 10px 0; }
.wqc-row label { display:block; margin-bottom: 6px; }
.wqc-row input, .wqc-row textarea { width: 100%; padding: 10px; border:1px solid #ddd; border-radius: 8px; }
.wqc-feedback.ok { color: #0a7a2a; margin-top: 10px; }
.wqc-feedback.err { color: #b00020; margin-top: 10px; }

.wqc-feedback { margin-top: 10px; padding: 10px; border-radius: 6px; }
.wqc-ok { background: #e8f7ee; border: 1px solid #b7e1c4; }
.wqc-err { background: #fdeaea; border: 1px solid #f5b5b5; }
.wqc-add.is-loading { opacity: .6; pointer-events: none; }