/**
 * TrueGrad Theme — Cart CSS
 *
 * Scoped styles for WooCommerce Cart page.
 * Standard native WooCommerce checkout is controlled by WooCommerce core
 * and WooCommerce Direct Checkout plugin without theme overrides.
 *
 * @package TrueGrad
 */

/* ============================================================
   CART PAGE LAYOUT
   ============================================================ */

.woocommerce-cart .tg-main--woo {
  padding-block: var(--space-12);
}

.woocommerce-cart .woocommerce {
  display: grid !important;
  grid-template-columns: 1fr 360px !important;
  gap: var(--space-10) !important;
  align-items: start !important;
}

.woocommerce-cart .woocommerce-cart-form {
  grid-column: 1 !important;
}

.woocommerce-cart .cart-collaterals {
  grid-column: 2 !important;
}

/* ============================================================
   CART TABLE
   ============================================================ */

.woocommerce-cart table.shop_table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
}

.woocommerce-cart table.shop_table thead {
  background: var(--color-surface) !important;
}

.woocommerce-cart table.shop_table thead th {
  padding: var(--space-4) var(--space-5) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-semi) !important;
  color: var(--color-muted) !important;
  text-align: left !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.woocommerce-cart table.shop_table tbody td {
  padding: var(--space-5) !important;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.woocommerce-cart table.shop_table tbody tr:last-child td {
  border-bottom: none !important;
}

.woocommerce-cart table.shop_table .product-thumbnail img {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--color-border) !important;
}

.woocommerce-cart table.shop_table .product-name a {
  font-weight: var(--font-weight-semi) !important;
  color: var(--color-primary) !important;
  text-decoration: none !important;
}

.woocommerce-cart table.shop_table .product-name a:hover {
  color: var(--color-accent) !important;
}