/* ============================================================
   cart.css — Cart table, quantity controls, order summary
   ============================================================ */

.cart-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-block: var(--space-xl) var(--space-lg);
}
.cart-head h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.cart-head .count { color: var(--color-text-muted); font-weight: 500; }

.cart-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-xl);
  align-items: start;
  padding-bottom: var(--space-2xl);
}

/* Cart items as table-like rows */
.cart-items {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cart-row {
  display: grid;
  grid-template-columns: 90px 1fr auto auto auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-card);
}
.cart-row:last-child { border-bottom: none; }
.cart-row .thumb {
  width: 90px; height: 80px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-bg-secondary);
}
.cart-row .info .name { font-weight: 600; }
.cart-row .info .cat {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--color-accent);
}
.cart-row .unit-price { font-family: var(--font-mono); color: var(--color-text-muted); }
.cart-row .line-total { font-family: var(--font-mono); font-weight: 700; min-width: 90px; text-align: right; }

.cart-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.cart-qty button { width: 34px; height: 36px; font-size: 1.1rem; }
.cart-qty button:hover { background: var(--color-bg-secondary); }
.cart-qty span {
  min-width: 34px;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
}
.cart-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition: color var(--transition), background var(--transition);
}
.cart-remove .ic-svg { width: 18px; height: 18px; }
.cart-remove:hover { color: var(--color-danger); background: var(--color-bg-secondary); }

/* Order summary */
.order-summary {
  position: sticky;
  top: calc(var(--navbar-height) + var(--space-md));
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.order-summary h2 { font-size: 1.25rem; margin-bottom: var(--space-md); }
.summary-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0;
  color: var(--color-text-muted);
}
.summary-row span:last-child { font-family: var(--font-mono); color: var(--color-text-primary); }
.summary-row.free span:last-child { color: var(--color-success); font-weight: 700; }
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-weight: 800;
  font-size: 1.2rem;
}
.summary-total span:last-child { font-family: var(--font-mono); color: var(--color-primary); }
.order-summary .btn { margin-top: var(--space-lg); }

.continue-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  color: var(--color-primary);
  font-weight: 600;
}

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
  .order-summary { position: static; }
}

/* Mobile: collapse cart rows to cards */
@media (max-width: 560px) {
  .cart-row {
    grid-template-columns: 70px 1fr auto;
    grid-template-areas:
      "thumb info remove"
      "thumb qty   total";
    row-gap: var(--space-sm);
  }
  .cart-row .thumb { grid-area: thumb; width: 70px; height: 70px; }
  .cart-row .info { grid-area: info; }
  .cart-row .unit-price { display: none; }
  .cart-qty { grid-area: qty; }
  .cart-row .line-total { grid-area: total; text-align: right; }
  .cart-remove { grid-area: remove; justify-self: end; }
}