/* ================================================================
   Cart Page — Mobile-first
   ================================================================ */

.cart-page { padding-block: var(--space-10) var(--space-20); min-height: 60vh; }

.cart-page__header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.cart-page__title {
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: var(--weight-semibold);
  letter-spacing: -.03em;
}
.cart-page__count { font-size: var(--text-sm); color: var(--color-text-3); margin-top: var(--space-1); }

/* Flash message */
.cart-flash {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
}
.cart-flash--error { background: rgba(229,72,77,.08); color: var(--color-danger); border: 1px solid rgba(229,72,77,.2); }
.cart-flash--success { background: rgba(48,164,108,.08); color: var(--color-success); border: 1px solid rgba(48,164,108,.2); }

/* ── Layout ────────────────────────────────────────────────────── */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

/* ── Items ─────────────────────────────────────────────────────── */
.cart-items-list { display: flex; flex-direction: column; gap: var(--space-3); }

.cart-item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  position: relative;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.cart-item:hover { border-color: var(--color-border-2); box-shadow: var(--shadow-sm); }

.cart-item__img {
  width: 88px; height: 88px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  background: var(--color-bg-2);
  display: block;
}

.cart-item__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.cart-item__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: var(--space-8);
}
.cart-item__variant { font-size: var(--text-xs); color: var(--color-text-3); }

.cart-item__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
}
.cart-item__price {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.cart-item__mrp {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--color-text-3);
  text-decoration: line-through;
}
.cart-item__unit-price { font-size: var(--text-xs); color: var(--color-text-3); margin-top: 2px; }

/* Qty */
.cart-qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--color-border-2);
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
}
.cart-qty__btn {
  width: 30px; height: 30px;
  border: none; background: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text);
  font-size: 1.1rem;
  transition: background var(--duration-fast);
  flex-shrink: 0;
}
.cart-qty__btn:hover { background: var(--color-bg-2); }
.cart-qty__val {
  min-width: 26px;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: 0 var(--space-1);
  pointer-events: none;
  user-select: none;
}

/* Remove */
.cart-item__remove {
  position: absolute;
  top: var(--space-3); right: var(--space-3);
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  border: 1.5px solid transparent;
  background: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-3);
  transition: all var(--duration-fast);
}
.cart-item__remove:hover { border-color: var(--color-danger); color: var(--color-danger); background: rgba(229,72,77,.06); }

/* ── Empty State ───────────────────────────────────────────────── */
.cart-empty {
  text-align: center;
  padding: var(--space-20) 0;
  grid-column: 1 / -1;
}
.cart-empty__icon { font-size: 3.5rem; opacity: .25; margin-bottom: var(--space-6); }
.cart-empty__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: -.02em; margin-bottom: var(--space-3); }
.cart-empty__sub { color: var(--color-text-2); font-size: var(--text-sm); margin-bottom: var(--space-8); max-width: 300px; margin-inline: auto; }

/* ── Summary ───────────────────────────────────────────────────── */
.cart-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.cart-summary__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-text-2);
  padding-block: var(--space-2);
}
.cart-summary__row--discount { color: var(--color-success); }
.cart-summary__row--discount .cs-val { color: var(--color-success); font-weight: var(--weight-medium); }
.cart-summary__row--total {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

/* ── Coupon ────────────────────────────────────────────────────── */
.coupon-block { padding-block: var(--space-5); border-top: 1px solid var(--color-border); margin-top: var(--space-3); }
.coupon-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-3); margin-bottom: var(--space-3); }
.coupon-form { display: flex; gap: var(--space-2); }
.coupon-input {
  flex: 1;
  height: 42px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  outline: none;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: border-color var(--duration-fast);
  min-width: 0;
}
.coupon-input:focus { border-color: var(--color-text); }
.coupon-input::placeholder { text-transform: none; letter-spacing: 0; color: var(--color-text-3); }
.coupon-apply-btn {
  height: 42px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border-2);
  background: var(--color-bg-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--duration-fast);
  flex-shrink: 0;
  font-family: var(--font-sans);
}
.coupon-apply-btn:hover { background: var(--color-text); color: var(--color-text-inv); border-color: var(--color-text); }
.coupon-apply-btn:disabled { opacity: .5; pointer-events: none; }

.coupon-msg {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  display: none;
  align-items: center;
  gap: var(--space-2);
}
.coupon-msg.is-success { display: flex; background: rgba(48,164,108,.1); color: var(--color-success); }
.coupon-msg.is-error   { display: flex; background: rgba(229,72,77,.1);  color: var(--color-danger); }

.coupon-applied-row {
  display: none;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  margin-top: var(--space-2);
}
.coupon-applied-row.is-visible { display: flex; }
.coupon-applied-row__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(48,164,108,.1);
  color: var(--color-success);
  font-weight: var(--weight-semibold);
  letter-spacing: .04em;
}
.coupon-remove-btn {
  background: none; border: none;
  font-size: var(--text-xs);
  color: var(--color-text-3);
  cursor: pointer;
  text-decoration: underline;
  transition: color var(--duration-fast);
  font-family: var(--font-sans);
}
.coupon-remove-btn:hover { color: var(--color-danger); }

/* ── Checkout Btn ──────────────────────────────────────────────── */
.cart-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--color-text);
  color: var(--color-text-inv);
  border: none;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  margin-top: var(--space-5);
  transition: all var(--duration-base) var(--ease);
  font-family: var(--font-sans);
}
.cart-checkout-btn:hover { background: var(--color-accent-hover); }
.cart-checkout-btn:disabled { opacity: .45; pointer-events: none; }

/* ── Skeleton ──────────────────────────────────────────────────── */
.cart-skeleton { display: flex; flex-direction: column; gap: var(--space-3); }
.cart-skeleton-item {
  height: 112px;
  border-radius: var(--radius-xl);
  background: linear-gradient(90deg, var(--color-bg-2) 25%, var(--color-surface) 50%, var(--color-bg-2) 75%);
  background-size: 200% 100%;
  animation: skShimmer 1.4s infinite;
}
@keyframes skShimmer { to { background-position: -200% 0; } }

/* ── Responsive ────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .cart-layout {
    grid-template-columns: 1fr 320px;
    gap: var(--space-8);
  }
  .cart-summary { position: sticky; top: 90px; }
  .cart-item { grid-template-columns: 100px 1fr; }
  .cart-item__img { width: 100px; height: 100px; }
}

@media (min-width: 1024px) {
  .cart-layout { grid-template-columns: 1fr 360px; }
}

@media (max-width: 360px){
  .cart-item { grid-template-columns: 1fr; }
}