/* ========================================
   Cart Page – BEM: .cart-*
   Uses design-system tokens.
   Page-specific additions atop design-system.
   ======================================== */

body.cart-page {
  margin: 0;
  background: var(--color-bg);
  font-family: var(--font-primary);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

.cart-header {
  background: var(--color-surface);
  border-bottom: var(--border-default);
  padding: var(--pad-md) var(--pad-lg);
  display: flex;
  align-items: center;
  gap: var(--gap-text);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}
.cart-header h1 {
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  flex: 1;
}
.cart-header-back {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.cart-header-back:hover {
  background: var(--color-divider);
}
.cart-header-back svg {
  font-size: 22px;
  color: var(--color-text);
}
.cart-header-count {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  font-weight: var(--weight-semibold);
}

.cart-layout {
  width: min(1240px, 100%);
  max-width: 100%;
  margin: 0 auto;
  padding: var(--pad-lg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: var(--gap-card);
  align-items: start;
}
.cart-main-col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-text);
  min-width: 0;
}
.cart-side-col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-text);
  position: sticky;
  top: 80px;
  align-self: start;
  min-width: 0;
}

.cart-card {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.cart-card-body {
  padding: var(--pad-card);
}

.cart-empty {
  padding: var(--pad-2xl) var(--pad-lg);
  text-align: center;
  max-width: 360px;
  margin: 0 auto;
}
@media (min-width: 769px) {
  .cart-layout:has(#cart-empty-state:not(.hidden)) { grid-template-columns: 1fr; }
  .cart-layout:has(#cart-empty-state:not(.hidden)) .cart-main-col { min-height: 55vh; justify-content: center; }
}
.cart-empty-illustration {
  width: 180px;
  height: 160px;
  margin: 0 auto var(--pad-lg);
  animation: ceBounce 2.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.cart-empty-illustration svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cart-empty-title {
  margin: 0 0 var(--pad-xs);
  font-size: 1.4rem;
  font-weight: var(--weight-bold);
  color: var(--color-text);
}
.cart-empty-sub {
  margin: 0 0 28px;
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}
.cart-empty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-text);
  padding: var(--pad-md) 36px;
  border: none;
  border-radius: var(--radius-btn);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-default);
  box-shadow: var(--shadow-btn);
}
.cart-empty-btn:hover {
  background: var(--color-primary-700);
  transform: var(--hover-lift);
  box-shadow: var(--shadow-btn-hover);
}

@keyframes ceBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.cart-product-card {
  display: flex;
  gap: var(--gap-text);
  padding: var(--pad-card);
  border-bottom: var(--border-width-thin) solid var(--color-divider);
  transition: background var(--transition-fast);
}
.cart-product-card:last-child { border-bottom: none; }
.cart-product-card:hover { background: var(--color-divider); }

.cart-product-card.out-of-stock {
  opacity: 0.6;
  position: relative;
}
.cart-product-card.out-of-stock::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-xs);
  z-index: 1;
  pointer-events: none;
}
.cart-product-card.out-of-stock::after {
  content: "نفد المخزون";
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  background: var(--color-danger);
  color: #fff;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}
.cart-product-card.out-of-stock:hover {
  background: transparent;
}
.cart-product-card.out-of-stock .cart-product-img-wrap img {
  filter: grayscale(1) blur(1px);
  opacity: 0.85;
}
.cart-product-card.out-of-stock .cart-product-name,
.cart-product-card.out-of-stock .cart-product-seller,
.cart-product-card.out-of-stock .cart-product-rating,
.cart-product-card.out-of-stock .cart-product-variant,
.cart-product-card.out-of-stock .cart-product-current,
.cart-product-card.out-of-stock .cart-product-old,
.cart-product-card.out-of-stock .cart-product-discount,
.cart-product-card.out-of-stock .cart-product-delivery,
.cart-product-card.out-of-stock .cart-product-line-total {
  text-decoration: line-through;
  color: var(--color-text-secondary) !important;
}
.cart-product-card.out-of-stock .cart-product-old {
  text-decoration: line-through;
}
.cart-stock-out-msg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  padding: 8px 12px;
  margin-top: 8px;
  border: var(--border-width-thin) solid var(--color-danger);
  border-radius: var(--radius-xs);
  background: var(--color-danger-bg);
  color: var(--color-danger);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
}
.cart-out-divider {
  height: 1px;
  margin: 0 var(--pad-card);
  background: var(--color-danger);
  opacity: 0.35;
}
.cart-product-card:last-child + .cart-out-divider {
  margin-bottom: var(--pad-md);
}
.cart-out-section-divider {
  height: 2px;
  margin: var(--pad-md) var(--pad-card);
  background: linear-gradient(90deg, transparent, var(--color-danger), transparent);
  opacity: 0.5;
  border-radius: 1px;
}

.cart-product-img-wrap {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--color-skeleton);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-product-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cart-product-name {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.cart-product-seller {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}
.cart-product-rating {
  font-size: var(--text-caption);
  color: var(--color-star);
}
.cart-product-variant {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-surface-muted, #f4f5f8);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  padding: 3px 10px;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-variant-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.cart-product-price-row {
  display: flex;
  align-items: center;
  gap: var(--gap-text);
  flex-wrap: wrap;
}
.cart-product-current {
  font-size: var(--text-body);
  font-weight: var(--weight-extrabold);
  color: var(--color-text);
}
.cart-product-old {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  text-decoration: line-through;
}
.cart-product-discount {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  color: var(--color-danger);
  background: var(--color-danger-bg);
  padding: var(--pad-xs);
  border-radius: 4px;
}
.cart-product-delivery {
  font-size: var(--text-caption);
  color: var(--color-success);
  font-weight: var(--weight-semibold);
}
.cart-product-meta {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  display: flex;
  gap: var(--gap-text);
  flex-wrap: wrap;
}

.cart-product-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-text);
  flex-shrink: 0;
}
.cart-qty-wrap {
  display: flex;
  align-items: center;
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}
.cart-qty-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--text-body);
  color: var(--color-text);
  transition: background var(--transition-fast);
}
.cart-qty-btn:hover { background: var(--color-divider); }
.cart-qty-btn:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.cart-qty-val {
  width: 36px;
  text-align: center;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  border-left: var(--border-width-thin) solid var(--color-border);
  border-right: var(--border-width-thin) solid var(--color-border);
  padding: var(--pad-xs) 0;
}
.cart-action-btns {
  display: flex;
  gap: 6px;
}
.cart-action-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  border: var(--border-width-thin) solid var(--color-border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}
.cart-action-btn:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
  background: var(--color-danger-bg);
}
.cart-action-btn.wishlist:hover {
  border-color: var(--color-star);
  color: var(--color-danger);
  background: var(--color-danger-bg);
}

.cart-summary-card { padding: var(--pad-card); }
.cart-summary-card h3 {
  margin: 0 0 var(--gap-text);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
}
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: var(--text-body-sm);
}
.cart-summary-row.total {
  font-size: var(--text-body);
  font-weight: var(--weight-extrabold);
  color: var(--color-text);
  padding-top: var(--gap-text);
  border-top: var(--border-width-thin) solid var(--color-border);
  margin-top: var(--pad-xs);
}
.cart-summary-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--pad-xs) 0;
}
.cart-summary-value { font-weight: var(--weight-bold); }
.free-shipping-badge {
  color: var(--color-success);
  font-weight: var(--weight-bold);
}

.cart-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-text);
  width: 100%;
  padding: var(--pad-md);
  border: none;
  border-radius: var(--radius-btn);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-default), transform var(--transition-default);
  margin-top: var(--pad-xs);
}
.cart-checkout-btn:hover {
  background: var(--color-primary-700);
}

.cart-coupon-card { padding: var(--pad-card); }
.cart-coupon-title {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  margin-bottom: var(--gap-text);
  display: flex;
  align-items: center;
  gap: var(--gap-text);
}
.cart-coupon-title svg {
  color: var(--color-primary);
  font-size: 20px;
}
.cart-coupon-row {
  display: flex;
  gap: var(--gap-text);
}
.cart-coupon-input {
  flex: 1;
  padding: var(--pad-sm) var(--gap-text);
  border: var(--border-width-medium) solid var(--color-border);
  border-radius: var(--radius-input);
  font-size: var(--text-body-sm);
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition-fast);
}
.cart-coupon-input:focus { border-color: var(--color-border-focus); }
.cart-coupon-btn {
  padding: var(--pad-sm) 18px;
  border: none;
  border-radius: var(--radius-input);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.cart-coupon-btn:hover { background: var(--color-primary-700); }
.cart-coupon-status {
  font-size: 0.8rem;
  margin-top: 6px;
  padding: 6px var(--pad-sm);
  border-radius: 4px;
  display: none;
}
.cart-coupon-status.show { display: block; }
.cart-coupon-status:not(.hidden) { display: block; }
.cart-coupon-status.error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}
.cart-coupon-status.success {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.cart-coupon-applied {
  display: flex;
  align-items: center;
  gap: var(--gap-text);
  margin-top: var(--gap-text);
  padding: var(--gap-text);
  background: var(--color-success-bg);
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--color-success);
  font-weight: var(--weight-semibold);
}
.cart-coupon-applied svg { font-size: 18px; }
.cart-coupon-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: var(--pad-xs);
  margin-inline-end: auto;
  transition: color var(--transition-fast);
}
.cart-coupon-remove:hover { color: var(--color-danger); }

.cart-offers-link {
  display: flex;
  align-items: center;
  gap: var(--gap-text);
  padding: var(--pad-md) var(--pad-card);
  cursor: pointer;
  transition: background var(--transition-fast);
  border-radius: var(--radius-xs);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}
.cart-offers-link:hover { background: var(--color-primary-50); }
.cart-offers-link svg { font-size: 20px; }
.cart-offers-link .spacer { flex: 1; }

.cart-installment-card { padding: var(--pad-card); }
.cart-installment-title {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  margin-bottom: var(--gap-text);
  display: flex;
  align-items: center;
  gap: var(--gap-text);
}
.cart-installment-title svg {
  color: var(--color-primary);
  font-size: 20px;
}
.cart-installment-grid {
  display: flex;
  gap: var(--gap-text);
  flex-wrap: wrap;
}
.cart-installment-item {
  flex: 1;
  min-width: 80px;
  padding: var(--pad-sm) var(--gap-text);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-xs);
  text-align: center;
  font-size: var(--text-caption);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.cart-installment-item:hover {
  border-color: var(--color-border-focus);
  background: var(--color-primary-50);
}
.cart-installment-item .logo { font-size: var(--text-body); margin-bottom: var(--pad-xs); }
.cart-installment-item .label {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.cart-installment-item .sub {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.cart-slider-section {
  padding: var(--gap-text) var(--pad-card);
  min-width: 0;
  overflow: hidden;
}
.cart-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gap-text);
}
.cart-slider-header h3 {
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
}
.cart-slider-section .home-sideways-list {
  display: flex;
  gap: var(--gap-text);
  padding-bottom: var(--pad-xs);
  overflow-x: auto;
  max-width: 100%;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cart-slider-section .home-sideways-list::-webkit-scrollbar { display: none; }
.cart-slider-section .home-sideways-list .noon-product-card {
  min-width: 170px;
  max-width: 170px;
  flex: 0 0 170px;
  scroll-snap-align: start;
}

/* ── Skeleton ── */
.cart-skeleton-item {
  display: flex;
  gap: var(--gap-text);
  padding: var(--pad-card);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  margin-bottom: var(--gap-text);
}
.cart-skeleton-img {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--color-skeleton) 25%, var(--color-border) 50%, var(--color-skeleton) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  flex-shrink: 0;
}
.cart-skeleton-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--pad-sm);
}
.cart-skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--color-skeleton) 25%, var(--color-border) 50%, var(--color-skeleton) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.cart-skeleton-line.w70 { width: 70%; }
.cart-skeleton-line.w50 { width: 50%; }
.cart-skeleton-line.w30 { width: 30%; }
.cart-skeleton-line.h10 { height: 10px; }
.cart-skeleton-line.h28 { height: 28px; }
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Mobile sticky bar ── */
.cart-sticky-mobile {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100vw;
  background: var(--color-surface);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  z-index: var(--z-fixed);
  padding: var(--gap-text) var(--gap-text);
  padding-bottom: calc(var(--gap-text) + env(safe-area-inset-bottom, 0));
}
@media (max-width: 1023px) { .cart-sticky-mobile { bottom: 82px; } }
.cart-sticky-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-text);
  margin-bottom: var(--pad-sm);
}
.cart-sticky-price {
  font-size: var(--text-body);
  font-weight: var(--weight-extrabold);
  color: var(--color-text);
}
.cart-sticky-savings {
  font-size: var(--text-caption);
  color: var(--color-success);
  font-weight: var(--weight-semibold);
}
.cart-sticky-toggle {
  display: flex;
  align-items: center;
  gap: var(--pad-xs);
  background: none;
  border: none;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-family: inherit;
}
.cart-sticky-toggle .material-icons-outlined {
  font-size: 18px;
}
.cart-sticky-details {
  padding: var(--gap-text) 0;
  border-top: var(--border-width-thin) solid var(--color-divider);
  display: none;
}
.cart-sticky-details.open { display: block; }
.cart-sticky-details .detail-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 0.82rem;
}
.cart-sticky-details .detail-row.total {
  font-weight: var(--weight-extrabold);
  color: var(--color-text);
  font-size: var(--text-body-sm);
  padding-top: var(--gap-text);
  border-top: var(--border-width-thin) solid var(--color-border);
  margin-top: var(--pad-xs);
}

/* ── Bottom sheet ── */
.cart-sheet-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-backdrop);
  z-index: var(--z-backdrop);
  display: none;
}
.cart-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  z-index: var(--z-modal);
  padding: var(--gap-text) var(--pad-card) calc(var(--gap-text) + env(safe-area-inset-bottom, 0));
  transform: translateY(100%);
  transition: transform var(--duration-drawer) var(--ease-out);
  max-height: 85vh;
  overflow-y: auto;
}
.cart-sheet.open { transform: translateY(0); }
.cart-sheet-overlay.open { display: block; }
.cart-sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-badge);
  background: var(--color-border);
  margin: 0 auto var(--gap-text);
}
.cart-sheet-header {
  display: flex;
  align-items: center;
  gap: var(--gap-text);
  margin-bottom: var(--gap-text);
}
.cart-sheet-header svg {
  color: var(--color-success);
  font-size: 28px;
}
.cart-sheet-title {
  font-weight: var(--weight-bold);
  font-size: var(--text-body-sm);
}
.cart-sheet-subtitle {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}
.cart-sheet-product {
  display: flex;
  gap: var(--gap-text);
  padding: var(--gap-text);
  background: var(--color-divider);
  border-radius: var(--radius-xs);
  margin-bottom: var(--gap-text);
}
.cart-sheet-product img {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: contain;
  background: var(--color-surface);
  flex-shrink: 0;
}
.cart-sheet-product-info { flex: 1; }
.cart-sheet-product-name {
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-sm);
}
.cart-sheet-product-price {
  font-weight: var(--weight-extrabold);
  color: var(--color-text);
  font-size: var(--text-body-sm);
  margin-top: var(--pad-xs);
}
.cart-sheet-cart-count {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--gap-text);
}
.cart-sheet-btns {
  display: flex;
  gap: var(--pad-sm);
}
.cart-sheet-btn {
  flex: 1;
  padding: var(--gap-text);
  border-radius: var(--radius-xs);
  text-align: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-body-sm);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}
.cart-sheet-btn.secondary {
  border: var(--border-width-medium) solid var(--color-border);
  background: transparent;
  color: var(--color-text);
}
.cart-sheet-btn.secondary:hover { background: var(--color-divider); }
.cart-sheet-btn.primary {
  border: none;
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.cart-sheet-btn.primary:hover { background: var(--color-primary-700); }
.cart-sheet-suggestions { margin-top: var(--gap-text); }
.cart-sheet-suggestions h4 {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--pad-sm);
}
.cart-sheet-suggestions .cart-slider-scroll {
  display: flex;
  gap: var(--pad-sm);
  overflow-x: auto;
  padding-bottom: var(--pad-xs);
}

/* ── Responsive ── */
@media (max-width: 1023px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-side-col { display: none; }
  .cart-sticky-mobile { display: block; }
  body.cart-page.cart-has-items { padding-bottom: 160px; }
}

@media (max-width: 640px) {
  .cart-header {
    padding: var(--gap-text) var(--pad-md);
    gap: var(--pad-sm);
    flex-wrap: wrap;
  }
  .cart-header h1 {
    font-size: var(--text-body);
    flex: 1 1 auto;
  }
  .cart-header-count {
    width: 100%;
    padding-inline-start: 46px;
  }
  .cart-layout {
    padding: var(--gap-text);
    gap: var(--gap-text);
  }
  .cart-card,
  .cart-summary-card,
  .cart-coupon-card,
  .cart-installment-card,
  .cart-slider-section { max-width: 100%; }
  .cart-product-card {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: var(--gap-text);
    padding: var(--pad-md);
  }
  .cart-product-img-wrap {
    width: 84px;
    height: 84px;
  }
  .cart-product-info { grid-column: 2; min-width: 0; }
  .cart-product-name { font-size: var(--text-body-sm); }
  .cart-product-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-text);
  }
  .cart-qty-wrap,
  .cart-action-btns { flex-shrink: 0; }
  .cart-coupon-row { flex-direction: column; }
  .cart-coupon-btn,
  .cart-coupon-input { width: 100%; }
  .cart-installment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cart-sticky-mobile { padding: var(--gap-text); }
  .cart-sticky-row { align-items: flex-start; }
  .cart-sticky-toggle { flex-shrink: 0; }
  .cart-slider-section .home-sideways-list .noon-product-card {
    min-width: 155px;
    max-width: 155px;
    flex: 0 0 155px;
  }
}