/* 本文件负责出库购物车样式，配合 app.js 的购物车结账逻辑使用。 */
.cart-panel {
  background:
    linear-gradient(145deg, rgba(52, 84, 73, 0.1), rgba(255, 250, 240, 0.94)),
    var(--paper-strong);
}

.cart-list {
  display: grid;
  gap: 10px;
}

.cart-item {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
}

.cart-item small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.cart-item button {
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  color: #8c3f25;
  background: rgba(199, 118, 62, 0.14);
}

.cart-summary {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  align-items: baseline;
  margin-top: 16px;
}

.cart-summary strong {
  font-size: 1.45rem;
}

.cart-summary small {
  color: var(--muted);
}

@media (max-width: 560px) {
  .cart-summary {
    flex-direction: column;
  }

  .cart-item {
    grid-template-columns: 1fr 1fr;
  }
}