/* =========================================================
   CART
   ========================================================= */

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  margin-top: 28px;
  align-items: start;
}

.cart-empty { margin-top: 28px; }

/* ---------- ITEMS ---------- */
.cart-list { display: grid; gap: 16px; }

.cart-item {
  display: grid;
  grid-template-columns: 92px 1fr auto 96px 40px;
  align-items: center;
  gap: 18px;
  padding: 14px 18px 14px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay);
  transition: opacity var(--ease), transform var(--ease);
}

.ci-img {
  width: 92px; height: 92px;
  border-radius: var(--radius-md);
  background: var(--peach-soft);
  overflow: hidden;
  box-shadow: var(--shadow-clay-sm);
}
.ci-img img { width: 100%; height: 100%; object-fit: cover; }

.ci-info h3 { font-size: 1rem; line-height: 1.35; margin-bottom: 4px; }
.ci-info h3 a:hover { color: var(--primary); }
.ci-unit { color: var(--text-soft); font-weight: 700; font-size: .92rem; }
.ci-unit s { margin-left: 6px; color: var(--text-light); font-weight: 600; }
.ci-warn { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--danger-soft); color: var(--danger); font-size: .75rem; font-weight: 800; }

.ci-total { text-align: right; font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; color: var(--mint-deep); }

.ci-remove {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--surface);
  color: var(--text-soft);
  box-shadow: var(--shadow-clay-sm);
  transition: color var(--ease), background var(--ease);
}
.ci-remove:hover { color: var(--danger); background: var(--danger-soft); }

.cart-continue { margin-top: 6px; }
.cart-continue i { margin-right: 6px; }

/* ---------- SUMMARY ---------- */
.cart-summary {
  position: sticky; top: 96px;
  padding: 24px;
  background: var(--peach-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-clay);
}
.cart-summary h3 { margin-bottom: 16px; font-size: 1.2rem; }

.ship-box { margin-bottom: 18px; padding: 14px 16px; background: var(--surface-2); border-radius: var(--radius-md); }
.ship-box p { margin-bottom: 8px; font-size: .88rem; font-weight: 800; color: var(--mint-deep); }
.ship-track { height: 10px; border-radius: var(--radius-pill); background: var(--mint-soft); box-shadow: var(--shadow-inset); overflow: hidden; }
.ship-fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--mint), var(--mint-dark)); transition: width .4s ease; }

.sum-rows { margin-bottom: 20px; }
.sum-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-weight: 700; }
.sum-rows > div + div { border-top: 2px dashed var(--peach); }
.sum-rows dt { color: var(--text-soft); }
.sum-total { font-family: var(--font-head); font-size: 1.25rem; }
.sum-total dt { color: var(--text); }
.sum-total dd { color: var(--primary); }
.sum-note { margin-top: 12px; text-align: center; font-size: .82rem; color: var(--text-soft); font-weight: 600; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 20px; }
  .cart-summary { position: static; }
}

@media (max-width: 600px) {
  .cart-item {
    grid-template-columns: 76px 1fr 36px;
    grid-template-areas:
      "img info remove"
      "img qty  total";
    gap: 10px 14px;
    padding: 12px;
  }
  .ci-img { grid-area: img; width: 76px; height: 76px; align-self: start; }
  .ci-info { grid-area: info; }
  .cart-item .qty { grid-area: qty; justify-self: start; }
  .ci-total { grid-area: total; align-self: center; }
  .ci-remove { grid-area: remove; width: 34px; height: 34px; align-self: start; }
  .cart-item .qty button { width: 30px; height: 30px; }
  .cart-item .qty input { width: 36px; }
}