/* ===== WooCommerce — Cart ===== */
.woocommerce-cart-form {
  background: var(--color-surface);
  border: var(--border-strong);
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: var(--space-2) var(--space-5);
}
.woocommerce-cart-form table.shop_table {
  margin-bottom: 0;
}
.woocommerce-cart-form .product-thumbnail img,
.woocommerce table.shop_table td.product-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.woocommerce-cart-form .product-name a {
  font-weight: var(--fw-semibold);
  color: var(--gray-900);
}
.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-subtotal {
  font-family: var(--font-display);
  font-weight: var(--fw-figure);
  color: var(--primary-600);
}
.woocommerce-cart-form .product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--gray-50);
  color: var(--gray-400) !important;
  font-size: 0; /* hides WooCommerce's "×" glyph — 01b-icons.css draws the icon via ::before */
  text-decoration: none !important;
}
.woocommerce-cart-form .product-remove a.remove:hover {
  background: var(--danger-50);
  color: var(--danger-600) !important;
}
/* Note: .actions is a <td colspan="6"> in a table-layout:fixed table. Setting
   display:flex directly on it breaks colspan (Chrome wraps it in an anonymous
   table-cell that ignores the colspan, collapsing it to the first column's
   width) — so it must stay a real table-cell, and the flex layout goes on an
   inline-flex wrapper for its children instead. */
.woocommerce-cart-form .actions {
  padding: var(--space-4) 0;
}
.woocommerce-cart-form .coupon {
  display: inline-flex;
  gap: var(--space-2-5);
  align-items: center;
  flex-wrap: wrap;
  vertical-align: middle;
  margin-right: var(--space-3);
}
.woocommerce-cart-form .coupon input.input-text:not(.qty) {
  width: 200px; /* needs this specificity to beat the full-width rule in 02-buttons-forms.css */
}
.woocommerce-cart-form .actions button[name="update_cart"] {
  vertical-align: middle;
  background: var(--color-surface);
  color: var(--ink);
}
.woocommerce-cart-form .actions button[name="update_cart"]:hover {
  background: var(--cream-200);
}
.woocommerce-cart-form .actions button[name="update_cart"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Desktop: items on the left, totals as a sticky sidebar on the right. */
.woocommerce-cart .woocommerce {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}
.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-cart .wc-empty-cart-message,
.woocommerce-cart .return-to-shop {
  grid-column: 1 / -1; /* empty cart: span the full width instead of falling into the totals column */
}
@media (min-width: 1024px) {
  .woocommerce-cart .woocommerce {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
  .woocommerce-cart .cart-collaterals {
    position: sticky;
    top: 96px;
  }
}
.cart_totals h2,
#order_review_heading {
  font-size: var(--text-lg);
  font-weight: var(--fw-heading);
  margin-bottom: var(--space-4);
}
.cart_totals table.shop_table td,
.cart_totals table.shop_table th {
  border-bottom-color: var(--gray-200);
}
.cart_totals .order-total .amount {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-figure);
  color: var(--primary-600);
}
.wc-proceed-to-checkout {
  margin-top: var(--space-4);
}
.wc-proceed-to-checkout a.checkout-button {
  width: 100%;
}
.cart-empty.woocommerce-info {
  justify-content: center;
  font-size: var(--text-base);
  padding: var(--space-8) var(--space-6);
  flex-direction: column;
  text-align: center;
}
.return-to-shop {
  text-align: center;
  margin-top: var(--space-4);
}