/* =============================================================
   CART.CSS — Cart, wishlist, pricing summary
   ============================================================= */

.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--s-6); align-items: start; }

.cart-item { display: grid; grid-template-columns: 110px 1fr auto; gap: var(--s-4); padding: var(--s-4); background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); position: relative; transition: box-shadow var(--t-base); }
.cart-item:hover { box-shadow: var(--sh-sm); }
.cart-item.removing { opacity: 0; transform: translateX(40px); transition: all var(--t-base); }
.cart-item .ci-img { aspect-ratio: 3/4; border-radius: var(--r-sm); overflow: hidden; background: var(--c-bg-soft); }
.cart-item .ci-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item .ci-body { display: flex; flex-direction: column; gap: 6px; }
.cart-item .ci-brand { font-weight: var(--fw-bold); }
.cart-item .ci-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.cart-item .ci-meta .pill { border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); padding: 4px 10px; font-size: var(--fs-xs); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.cart-item .ci-price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.cart-item .ci-actions { display: flex; gap: 16px; margin-top: 8px; }
.cart-item .ci-actions button { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-text-soft); }
.cart-item .ci-actions button:hover { color: var(--c-primary); }
.cart-item .ci-remove { position: absolute; top: 12px; right: 12px; color: var(--c-muted); }
.cart-item .ci-remove:hover { color: var(--c-danger); }
.cart-item .ci-delivery { font-size: var(--fs-xs); color: var(--c-text-soft); margin-top: 4px; }
.cart-item .ci-delivery b { color: var(--c-success); }

/* summary */
.summary { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-5); position: sticky; top: calc(var(--nav-h) + 16px); }
.summary h4 { text-transform: uppercase; font-size: var(--fs-sm); letter-spacing: .05em; color: var(--c-muted); margin-bottom: var(--s-4); }
.summary-row { display: flex; justify-content: space-between; padding: 9px 0; font-size: var(--fs-base); }
.summary-row .lbl { color: var(--c-text-soft); }
.summary-row .val { font-weight: var(--fw-semibold); }
.summary-row .free { color: var(--c-success); font-weight: var(--fw-bold); }
.summary-row.disc .val { color: var(--c-success); }
.summary-total { display: flex; justify-content: space-between; padding-top: var(--s-4); margin-top: var(--s-3); border-top: 1px solid var(--c-border); font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.savings-banner { background: var(--c-success-bg); color: var(--c-success); padding: 10px 14px; border-radius: var(--r-sm); font-weight: var(--fw-semibold); font-size: var(--fs-sm); margin-top: var(--s-4); text-align: center; }

/* coupon box */
.coupon-box { display: flex; gap: 8px; margin: var(--s-4) 0; }
.coupon-box .input { flex: 1; }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; background: var(--c-success-bg); border: 1px dashed var(--c-success); border-radius: var(--r-sm); padding: 12px 14px; margin: var(--s-4) 0; }
.coupon-applied .code { font-weight: var(--fw-bold); color: var(--c-success); }

/* gift option */
.gift-toggle { display: flex; align-items: center; justify-content: space-between; padding: 14px; border: 1px dashed var(--c-border-strong); border-radius: var(--r-sm); margin: var(--s-4) 0; }

/* free-ship progress */
.ship-progress { background: var(--c-bg-alt); border-radius: var(--r-md); padding: var(--s-4); margin-bottom: var(--s-5); }
.ship-progress p { font-size: var(--fs-sm); margin-bottom: 8px; }

/* wishlist grid reuses product-grid */
.wishlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: var(--s-5); }

@media (max-width: 980px){ .cart-layout { grid-template-columns: 1fr; } .summary { position: static; } }
@media (max-width: 560px){ .cart-item { grid-template-columns: 90px 1fr; } }