/* ============================================================
   CART — "Kinetic Command" inventory panel
   Loaded only on cart page.
   Builds on .k-checkout-* tokens from kinetic.css.
   ============================================================ */

/* ---------- Layout ---------- */
.k-cart {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  position: relative;
  isolation: isolate;
}

/* Quadrillage cyan ambiant — repris de `.k-catalog::before`
 * (cf. `assets/css/kinetic-catalog.css`). Grille 40×40 en deux
 * linear-gradients cyan à 5%, masquée en diagonale (135°, opaque
 * → transparent à 80%) pour rester discrète derrière le panier.
 * `pointer-events: none` + `z-index: -1`, contenue par
 * `isolation: isolate` sur `.k-cart` : vit dans son propre
 * stacking context, sans bloquer les clics ni les popovers. */
.k-cart::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(135deg, #000 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 80%);
}

.k-cart__head {
  margin-bottom: 2.5rem;
  text-align: center;
}

.k-cart__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 0.25rem;
}

.k-cart__meta {
  font-size: 0.7rem;
  color: var(--k-muted);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin: 0;
}

.k-cart__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .k-cart__layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 2.5rem;
    align-items: start;
  }
}

/* ---------- Cart items ---------- */
.k-cart__items {
  min-width: 0;
  width: 100%;
}

/* Reset WooCommerce's own float/width on the cart form */
.woocommerce-cart-form {
  float: none;
}

/* Safety net: contain any residual overflow from the flex children */
.k-cart__items .k-checkout-items {
  overflow: hidden;
}

.k-cart-item {
  display: grid;
  /* minmax(0, 1fr) instead of plain 1fr: forces the column minimum to 0
     so it can shrink below content size — prevents overflow out of the
     parent flex container (.k-checkout-items). */
  grid-template-columns: 80px minmax(0, 1fr) auto auto;
  grid-template-areas: 'image info qty actions';
  align-items: center;
  gap: 1.5rem;
  /* As a flex item inside .k-checkout-items, prevent intrinsic
     min-width: auto from pushing the row wider than the container. */
  min-width: 0;
  width: 100%;
}

.k-cart-item .k-checkout-item__info {
  min-width: 0;
  overflow-wrap: break-word;
}

/* ── Mobile cart item ──────────────────────────────────────── */
@media (max-width: 639px) {
  .k-cart-item {
    grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'image info info'
      'image qty  actions';
    column-gap: 1.25rem;
    row-gap: 1rem;
    align-items: start;
  }

  .k-cart-item__qty { justify-self: start; }

  .k-cart-item__actions {
    min-width: 0;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
  }

  .k-cart-item__subtotal { font-size: 0.9rem; }
}

.k-cart-item .k-checkout-item__image { grid-area: image; }
.k-cart-item .k-checkout-item__info  { grid-area: info;  }
.k-cart-item__qty                    { grid-area: qty;   }
.k-cart-item__actions                { grid-area: actions; }

.k-checkout-item__name-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

.k-checkout-item__name-link:hover .k-checkout-item__name {
  color: var(--k-cyan);
}

.k-cart-item__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  min-width: 80px;
}

.k-cart-item__subtotal {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}

.k-cart-item__subtotal .woocommerce-Price-amount { color: inherit; }

/* ── Mobile global overrides ───────────────────────────────── */
@media (max-width: 639px) {
  .k-cart {
    padding: 2rem 1rem;
    /* Clip any sub-pixel overflow from grid track sizing */
    overflow-x: hidden;
  }

  /* Reduce glass-section padding on both columns so the 1fr grid
     track can fit within the cart's content area and stay centred. */
  .k-cart__items .k-checkout-section,
  .k-cart__summary .k-checkout-section {
    padding: 1.25rem 1rem;
  }

  /* Ensure the grid itself never exceeds its container */
  .k-cart__layout {
    width: 100%;
  }

  .k-cart__head { margin-bottom: 1.5rem; }
}

/* ---------- Quantity input ---------- */
.k-cart-item__qty .quantity {
  display: inline-flex;
  align-items: center;
  background: var(--k-surface-2);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--k-hairline);
  transition: border-color 200ms ease;
}

.k-cart-item__qty .quantity:focus-within {
  border-color: rgba(0, 212, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08);
}

.k-cart-item__qty .quantity label,
.k-cart-item__qty .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.k-cart-item__qty input[type="number"].qty,
.k-cart-item__qty input.k-qty__input {
  width: 56px;
  height: 40px;
  background: transparent;
  border: none;
  color: var(--k-text);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
  outline: none;
}

.k-cart-item__qty input[type="number"].qty::-webkit-outer-spin-button,
.k-cart-item__qty input[type="number"].qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Optional +/- controls injected by JS */
.k-qty-btn {
  width: 36px;
  height: 40px;
  background: transparent;
  border: none;
  color: var(--k-text, #f9f5fd);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.k-qty-btn:hover {
  background: rgba(0, 212, 255, 0.1);
  color: var(--k-cyan);
}

.k-qty-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ---------- Toolbar (coupon + update) ---------- */
.k-cart__toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--k-hairline);
}

.k-cart__coupon {
  flex: 1;
  min-width: 200px;
}

@media (max-width: 639px) {
  .k-cart__toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.875rem;
  }

  .k-cart__coupon {
    min-width: 0;
    width: 100%;
  }

  .k-cart__update { width: 100%; }
}

.k-cart__coupon-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--k-muted);
  margin-bottom: 0.5rem;
}

.k-cart__coupon-row {
  display: flex;
  gap: 0.5rem;
}

.k-field__input--plain {
  position: static;
  padding: 0 1rem;
  height: 44px;
  background: var(--k-surface-2);
  border: 1px solid var(--k-hairline);
  border-radius: 8px;
  color: var(--k-text);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  flex: 1;
  min-width: 0;
  transition: border-color 200ms ease;
}

.k-field__input--plain:focus {
  border-color: rgba(0, 212, 255, 0.5);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08);
}

.k-cart__update {
  align-self: flex-end;
}

.k-btn--ghost {
  background: transparent;
  border: 1px solid var(--k-hairline);
  color: var(--k-text);
  padding: 0 1.25rem;
  height: 44px;
  border-radius: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 200ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.k-btn--ghost:hover:not(:disabled) {
  border-color: rgba(0, 212, 255, 0.5);
  color: var(--k-cyan);
}

/* ---------- Summary sidebar ---------- */
.k-cart__summary {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0; /* grid item: prevent intrinsic width from expanding the 1fr track */
}

@media (min-width: 1024px) {
  .k-cart__summary {
    position: sticky;
    top: 88px;
  }
}

.k-cart-totals {
  margin: 0.5rem 0 1.5rem;
}

.k-cart-totals__list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.k-cart-totals__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  margin: 0;
}

.k-cart-totals__row dt {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--k-muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 0;
}

.k-cart-totals__row dd {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--k-text);
  margin: 0;
  text-align: right;
}

.k-cart-totals__row dd .amount,
.k-cart-totals__row dd .woocommerce-Price-amount { color: inherit; }

.k-cart-totals__row--coupon dd { color: var(--k-green); }

.k-cart-totals__row--total {
  padding-top: 1rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--k-hairline);
  align-items: center;
}

.k-cart-totals__row--total dt {
  color: var(--k-cyan);
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.k-cart-totals__row--total dd {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--k-text);
  white-space: nowrap;
}

.k-cart-totals__row--total dd .woocommerce-Price-amount,
.k-cart-totals__row--total dd .amount {
  white-space: nowrap;
}

.k-cart-totals__row--shipping dt,
.k-cart-totals__row--tax dt {
  line-height: 1.4;
}

.k-cart-totals__row--shipping small,
.k-cart-totals__row--tax small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.55rem;
  color: var(--k-muted);
  text-transform: none;
  letter-spacing: 0.05em;
}

.k-cart-totals__row--shipping ul.woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.k-cart-totals__row--shipping ul.woocommerce-shipping-methods li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.75rem;
}

.k-cart-totals__row--shipping ul.woocommerce-shipping-methods label {
  color: var(--k-text);
  cursor: pointer;
  flex: 1;
}

/* Proceed to checkout button (WC wraps its own CTA)
   Legacy woocommerce.css (.checkout-button) and the WC plugin's
   own .button.alt both color this button. We lock it to cyan
   with a high-specificity selector. */
.wc-proceed-to-checkout {
  margin-top: 1.5rem;
}

.k-cart .wc-proceed-to-checkout a.checkout-button,
.k-cart .wc-proceed-to-checkout a.checkout-button.button,
.k-cart .wc-proceed-to-checkout a.checkout-button.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 0 1.5rem;
  background: var(--k-cyan, #00d4ff);
  color: #0a0a0f;
  border: none;
  border-radius: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 200ms ease, transform 200ms ease, background 200ms ease;
}

.k-cart .wc-proceed-to-checkout a.checkout-button:hover,
.k-cart .wc-proceed-to-checkout a.checkout-button.button.alt:hover {
  background: color-mix(in oklab, var(--k-cyan, #00d4ff) 92%, white);
  box-shadow: 0 0 24px rgba(0, 212, 255, 0.4);
  color: #0a0a0f;
}

.k-cart .wc-proceed-to-checkout a.checkout-button:active {
  transform: translateY(1px);
}

/* Trust badges inside summary */
.k-cart__trust {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--k-hairline);
  flex-wrap: wrap;
}

/* Continue shopping link */
.k-cart__continue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--k-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 0.5rem 0;
  transition: color 200ms ease;
}

.k-cart__continue:hover {
  color: var(--k-cyan);
}

/* ---------- Empty state ---------- */
.k-cart--empty {
  max-width: 600px;
  padding: 6rem 1.5rem;
}

.k-cart-empty {
  text-align: center;
  background: rgba(var(--k-glass-rgb), 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--k-hairline);
  border-radius: 16px;
  padding: 4rem 2rem;
}

.k-cart-empty__icon {
  width: 64px;
  height: 64px;
  color: rgba(0, 212, 255, 0.4);
  margin: 0 auto 1.5rem;
  display: block;
}

.k-cart-empty__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
}

.k-cart-empty__desc {
  color: var(--k-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 2rem;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Status dot reused from checkout ---------- */
.k-cart-item .k-status-dot {
  width: 6px;
  height: 6px;
  background: var(--k-green);
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.5rem;
  box-shadow: 0 0 6px var(--k-green);
}

/* ---------- WooCommerce notices on cart page ---------- */
.k-cart .woocommerce-message,
.k-cart .woocommerce-info,
.k-cart .woocommerce-error {
  max-width: 1200px;
  margin: 0 auto 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.25);
  color: var(--k-text, #f9f5fd);
  font-size: 0.85rem;
  list-style: none;
}

.k-cart .woocommerce-error {
  background: rgba(255, 59, 92, 0.08);
  border-color: rgba(255, 59, 92, 0.3);
}

/* ---------- Light mode ---------- */
html[data-theme="light"] .k-cart__title,
html[data-theme="light"] .k-cart-empty__title {
  color: var(--k-text);
}

html[data-theme="light"] .k-field__input--plain {
  background: var(--k-surface-2);
  color: var(--k-text);
  border-color: var(--k-hairline);
}

/* ── Mobile touch targets ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Cart stepper +/- buttons */
  .k-qty-btn {
    width: 44px;
    height: 44px;
    touch-action: manipulation;
  }

  /* Cart item qty input field */
  .k-cart-item__qty input[type="number"].qty,
  .k-cart-item__qty input.k-qty__input {
    height: 44px;
  }
}

/* ── Cross-sells — "Complétez votre setup" ─────────────────────────────
   Reuses the .k-related-card visuals from kinetic.css (loaded first as a
   dependency). Static responsive grid: the cart page does not enqueue
   keen-slider, so this is a grid, not a carousel. */
.k-cart-crosssell {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--k-hairline, rgba(255, 255, 255, 0.08));
}

.k-cart-crosssell__head {
  text-align: center;
  margin-bottom: 2.5rem;
}

.k-cart-crosssell__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  margin: 0.5rem 0 0;
}

.k-cart-crosssell__grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
}

@media (min-width: 640px) {
  .k-cart-crosssell__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .k-cart-crosssell__grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, calc(25% - 1.5rem)));
    justify-content: center;
  }
}

html[data-theme="light"] .k-cart-crosssell__title {
  color: var(--k-text);
}