Points now subtract from costs

web/app/globals.css

@@ -2417,6 +2417,71 @@ body {
   text-align: center;
 }
 
+.cart-points-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+.cart-points-balance-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.9rem;
+  color: #374151;
+}
+
+.cart-points-balance-row strong {
+  color: #7c3aed;
+  font-weight: 700;
+}
+
+.cart-points-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.9rem;
+  color: #374151;
+  cursor: pointer;
+  user-select: none;
+}
+
+.cart-points-label:has(.cart-points-checkbox:disabled) {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.cart-points-checkbox {
+  width: 1rem;
+  height: 1rem;
+  accent-color: #7c3aed;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.cart-points-msg {
+  font-size: 0.82rem;
+  color: #6b7280;
+  margin: 0;
+  font-style: italic;
+}
+
+.cart-points-applied-detail {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #f5f3ff;
+  border: 1px solid #ddd6fe;
+  border-radius: 6px;
+  padding: 0.4rem 0.7rem;
+  font-size: 0.85rem;
+  color: #5b21b6;
+  font-weight: 500;
+}
+
 .cart-coupon-section {
   display: flex;
   flex-direction: column;