/* =====================================================================
   SHOPPING CART PAGE — page-specific styles
   REACT: maps to <CartPage> = <CartItemList> + <OrderSummary> (sticky)
   ===================================================================== */

.page-header {
  padding-block: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}
.page-header__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: var(--space-lg);
  align-items: start;
  padding-block: var(--space-lg) var(--space-2xl);
}

/* ---------- Cart items ---------- */
.cart-list { display: flex; flex-direction: column; }
.cart-item {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto auto;
  gap: var(--space-sm);
  align-items: start;
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.cart-item:first-child { padding-top: 0; }
.cart-item__thumb { width: 6.5rem; }
.cart-item__info > * + * { margin-top: 0.3rem; }
.cart-item__brand { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faint); }
.cart-item__name { font-size: 1rem; font-weight: 600; }
.cart-item__name a:hover { color: var(--color-primary); }
.cart-item__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.82rem; color: var(--color-text-soft); }
.cart-item__meta .sku { font-family: var(--font-mono); }
.cart-item__stock { font-size: 0.8rem; display: flex; align-items: center; gap: 0.4em; }
.cart-item__actions { display: flex; gap: 1rem; margin-top: 0.6rem; }
.cart-item__actions button { font-size: 0.82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.35em; }
.cart-item__actions button svg { width: 0.95em; height: 0.95em; }

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.qty-stepper button {
  width: 2.15rem; height: 2.15rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-soft);
  background: var(--color-surface-alt);
}
.qty-stepper button:hover { color: var(--color-primary); }
.qty-stepper button svg { width: 0.9rem; height: 0.9rem; }
.qty-stepper input {
  width: 2.6rem;
  height: 2.15rem;
  text-align: center;
  border: none;
  border-left: 1px solid var(--color-border-strong);
  border-right: 1px solid var(--color-border-strong);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.qty-stepper input:focus { outline: none; background: var(--color-primary-light); }

.cart-item__price { text-align: right; white-space: nowrap; }
.cart-item__price b { font-family: var(--font-mono); font-size: 1.05rem; }
.cart-item__price .unit { display: block; font-size: 0.78rem; color: var(--color-text-faint); margin-top: 0.2rem; }

@media (max-width: 640px) {
  .cart-item { grid-template-columns: 4.5rem minmax(0,1fr); }
  .cart-item__thumb { width: 4.5rem; }
  .cart-item__price { grid-column: 2; text-align: left; margin-top: 0.5rem; }
}

/* ---------- Saved for later ---------- */
.saved-for-later { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px dashed var(--color-border-strong); }
.saved-for-later h2 { margin-bottom: var(--space-sm); }
.cart-item--saved { opacity: 0.92; }
.cart-item--saved .cart-item__actions button:first-child { color: var(--color-primary); }

/* Order-summary card styles (.summary-card, .summary-row, .coupon-*,
   .summary-trust, .payment-icons) now live in css/global.css §6d-4 —
   shared with checkout.html so totals styling never drifts between
   the two screens. */

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


/* =====================================================================
   PELAGIQ DARK-OCEAN PALETTE — cart page refinement
   Content and layout intentionally unchanged.
   ===================================================================== */

.page-header {
  background: var(--color-abyss, #020C16);
  border-bottom-color: rgba(116,190,226,.18);
}

.cart-list .cart-item {
  background: #0A2638;
  border: 1px solid rgba(116,190,226,.18);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
}

.cart-list .cart-item:first-child { padding-top: var(--space-md); }
.cart-list .cart-item:last-child { margin-bottom: 0; }

.cart-item__brand {
  color: #789FB3;
}

.cart-item__name a,
.cart-item__price b {
  color: #F5FBFF;
}

.cart-item__name a:hover {
  color: #25D8FF;
}

.cart-item__meta,
.cart-item__price .unit {
  color: #A8BDCB;
}

.cart-item__actions button[data-save-for-later],
.cart-item__actions button[data-move-to-cart] {
  color: #25D8FF;
}

.cart-item__actions button[data-save-for-later]:hover,
.cart-item__actions button[data-move-to-cart]:hover {
  color: #F5FBFF;
}

.qty-stepper {
  background: #04192A;
  border-color: rgba(116,190,226,.28);
}

.qty-stepper button {
  color: #A8BDCB;
  background: #0D3045;
}

.qty-stepper button:hover {
  color: #25D8FF;
  background: #0A2638;
}

.qty-stepper input {
  color: #F5FBFF;
  background: #04192A;
  border-color: rgba(116,190,226,.28);
}

.qty-stepper input:focus {
  background: rgba(37,216,255,.08);
  box-shadow: inset 0 0 0 1px rgba(37,216,255,.28);
}

.saved-for-later {
  border-top-color: rgba(116,190,226,.25);
}

.saved-for-later .cart-item--saved {
  background: #0A2638;
  border-color: rgba(116,190,226,.16);
}

.summary-card {
  background: #0A2638;
  border-color: rgba(116,190,226,.22);
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
}

.summary-card h2,
.summary-card .summary-row--total,
.summary-card .summary-row--total b {
  color: #F5FBFF;
}

.summary-card .summary-row {
  border-color: rgba(116,190,226,.14);
}

.summary-card .summary-row--discount b,
.summary-card .coupon-applied,
.summary-card .coupon-applied button {
  color: #25D8FF;
}

.coupon-applied {
  background: rgba(37,216,255,.07);
  border-color: rgba(37,216,255,.20);
}

.coupon-row .input {
  background: #04192A;
  color: #F5FBFF;
  border-color: rgba(116,190,226,.24);
}

.coupon-row .input::placeholder {
  color: #789FB3;
}

.coupon-row .input:focus {
  border-color: #25D8FF;
  box-shadow: 0 0 0 3px rgba(37,216,255,.10);
}

.summary-trust {
  border-top-color: rgba(116,190,226,.16);
}

.summary-trust__row {
  color: #A8BDCB;
}

.summary-trust__row svg {
  color: #25D8FF;
}

.payment-icons span {
  background: #04192A;
  border-color: rgba(116,190,226,.18);
  color: #789FB3;
}

.product-card {
  border-color: rgba(116,190,226,.18);
  background: #04192A;
}

.product-card__body {
  background: #0A2638;
  border-top-color: rgba(116,190,226,.16);
}

.product-card__brand {
  color: #789FB3;
}

.product-card__name a {
  color: #F5FBFF;
}

.product-card__name a:hover {
  color: #25D8FF;
}

.product-card__price b {
  color: #F5FBFF;
}

.product-card__add {
  background: #087DF1;
  color: #F5FBFF;
}

.product-card__add:hover {
  background: #25D8FF;
  color: #020C16;
}

.product-card__save {
  background: rgba(4,25,42,.88);
  border-color: rgba(116,190,226,.20);
  color: #A8BDCB;
}

.product-card__save:hover {
  border-color: rgba(37,216,255,.38);
  color: #25D8FF;
  background: #0A2638;
}

@media (max-width: 640px) {
  .cart-list .cart-item {
    padding: var(--space-sm);
  }
}

/* ---------- Cart button controls — aligned with Orders controls ---------- */
.cart-layout button[type="button"] {
  appearance: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font: 600 .82rem var(--font-body);
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              color var(--duration-fast) ease,
              transform var(--duration-fast) ease;
}

.cart-layout button[type="button"]:hover {
  border-color: var(--color-secondary);
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.cart-layout button[type="button"]:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.cart-item__actions button[type="button"] {
  padding: .42rem .65rem;
}

.cart-item__actions button[type="button"] svg {
  flex: 0 0 auto;
}

.cart-item__actions button.btn--danger-ghost[type="button"] {
  border-color: transparent;
  background: transparent;
  color: var(--color-text-soft);
}

.cart-item__actions button.btn--danger-ghost[type="button"]:hover {
  border-color: rgba(255, 107, 107, .28);
  background: rgba(255, 107, 107, .08);
  color: #FF8C8C;
}

.saved-for-later .cart-item__actions button[type="button"] {
  padding: .42rem .65rem;
}

.saved-for-later .cart-item__actions button.btn--danger-ghost[type="button"] {
  padding: .42rem .65rem !important;
}

.summary-card .coupon-applied button[type="button"] {
  padding: .4rem .6rem;
}

.summary-card .coupon-applied button[type="button"]:hover {
  color: #FF8C8C;
  border-color: rgba(255, 107, 107, .28);
  background: rgba(255, 107, 107, .08);
}

/* Quantity controls keep their compact segmented-control treatment. */
.qty-stepper button[type="button"] {
  border: 0;
  border-radius: 0;
  background: var(--color-surface-alt);
  color: var(--color-text-soft);
  padding: 0;
  font: inherit;
}

.qty-stepper button[type="button"]:hover {
  border-color: transparent;
  background: var(--color-surface-sunken);
  color: var(--color-secondary);
}