/* ============== Cart Page ============== */
.shop-page { background: #fff; padding: 30px 0 80px; }
.shop-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-bottom: 30px; font-size: 13px; color: #999;
}
.shop-steps .step { display: flex; align-items: center; gap: 8px; }
.shop-steps .step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid #ddd; background: #fff; color: #999; font-weight: 600;
}
.shop-steps .step.active { color: #111; font-weight: 600; }
.shop-steps .step.active .num { background: #111; color: #fff; border-color: #111; }
.shop-steps .divider { flex: 0 0 60px; height: 1px; background: #ddd; }

.page-title-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 20px;
}
.shop-title { font-size: 28px; font-weight: 600; margin: 0 0 6px; color: #111; }
.shop-subtitle { font-size: 13px; color: #666; margin: 0; }
.title-meta a { font-size: 13px; color: #111; text-decoration: underline; }

.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: flex-start; }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } }

.cart-table { background: #fff; }
.cart-head {
  display: grid; grid-template-columns: 80px 1fr 130px 120px 40px;
  padding: 12px 0; border-bottom: 1px solid #eee; font-size: 12px;
  color: #666; text-transform: uppercase; letter-spacing: 0.5px;
}
.cart-row {
  display: grid; grid-template-columns: 80px 1fr 130px 120px 40px;
  gap: 16px; padding: 20px 0; border-bottom: 1px solid #f0f0f0; align-items: center;
}
.cart-row .product-img img {
  width: 80px; height: 80px; object-fit: cover; background: #f5f5f5; border-radius: 4px;
}
.cart-row .product-info .brand { font-size: 12px; color: #999; margin: 0 0 4px; }
.cart-row .product-info .name { font-size: 15px; font-weight: 500; margin: 0 0 6px; color: #111; }
.cart-row .product-info .name a { color: inherit; text-decoration: none; }
.cart-row .product-info .meta {
  display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: #666;
}
.cart-row .product-info .meta i { color: #999; margin-right: 4px; }

.qty-stepper {
  display: inline-flex; align-items: center; border: 1px solid #ddd; border-radius: 4px;
  overflow: hidden; height: 38px;
}
.qty-stepper button {
  width: 34px; height: 100%; background: #fff; border: 0; cursor: pointer;
  color: #111; font-size: 12px;
}
.qty-stepper button:hover { background: #f5f5f5; }
.qty-stepper input {
  width: 50px; height: 100%; border: 0; border-left: 1px solid #ddd; border-right: 1px solid #ddd;
  text-align: center; font-size: 14px; -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-row .price { text-align: right; font-size: 15px; font-weight: 600; color: #111; }
.cart-row .remove-btn {
  background: transparent; border: 0; color: #999; cursor: pointer; font-size: 16px;
}
.cart-row .remove-btn:hover { color: #e0245e; }

/* Empty cart */
.empty-cart {
  padding: 80px 20px; text-align: center; color: #888;
  border: 1px dashed #eee; border-radius: 8px;
}
.empty-cart .icon { font-size: 64px; color: #ddd; display: block; margin-bottom: 20px; }
.empty-cart h2 { font-size: 22px; color: #111; margin: 0 0 8px; font-weight: 600; }
.empty-cart p { margin: 0 0 24px; font-size: 14px; }
.empty-cart a.btn {
  display: inline-block; padding: 12px 28px; background: #111; color: #fff;
  text-decoration: none; font-size: 13px; font-weight: 600; border-radius: 4px;
}

/* Order summary */
.cart-summary {
  background: #fafafa; padding: 24px; border-radius: 8px; position: sticky; top: 100px;
}
.cart-summary h3 { font-size: 16px; font-weight: 600; margin: 0 0 18px; color: #111; }
.summary-row {
  display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: #333;
}
.summary-row .label { color: #666; }
.summary-row .free { color: #2e7d32; font-weight: 600; }
.summary-row.total {
  border-top: 1px solid #eee; padding-top: 14px; margin-top: 8px;
  font-size: 16px; font-weight: 700; color: #111;
}
.summary-row.total .label { color: #111; }
.promo-input { display: flex; gap: 8px; margin: 14px 0; }
.promo-input input {
  flex: 1; height: 40px; padding: 0 12px; border: 1px solid #ddd;
  border-radius: 4px; font-size: 13px;
}
.promo-input button {
  height: 40px; padding: 0 18px; background: #fff; border: 1px solid #111;
  border-radius: 4px; font-size: 13px; cursor: pointer;
}
.cart-summary .btn {
  display: block; width: 100%; padding: 14px; background: #111; color: #fff;
  text-align: center; text-decoration: none; font-weight: 600; font-size: 14px;
  border-radius: 4px; margin-top: 12px; box-sizing: border-box;
}
.secure-note { text-align: center; margin-top: 14px; font-size: 12px; color: #999; }
.secure-note i { margin-right: 4px; }
.promo-applied {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; margin: 6px 0 0; font-size: 13px;
  background: #e8f5e9; color: #2e7d32; border-radius: 4px;
}
.promo-applied .promo-remove {
  background: none; border: none; color: #2e7d32; cursor: pointer;
  font-size: 16px; padding: 0 4px; line-height: 1;
}
.summary-row .discount-amount { color: #2e7d32; font-weight: 600; }
.promo-input input.promo-error {
  border-color: #c62828 !important;
  box-shadow: 0 0 0 1px #c62828;
  transition: border-color 0.15s;
}
.promo-input input:focus { outline: none; border-color: #111; }