/*
 * Cart page — restyles WooCommerce's own default cart markup, no
 * template overrides (keeps AJAX quantity updates / hooks intact).
 * Page-level spacing/container comes from .page-content in layout.css
 * (Cart renders via [woocommerce_cart] inside page.php, not through the
 * shop/single-product content-wrapper hooks).
 */

/*
 * .page-content's full --space-section top padding is sized for editorial
 * pages; on Cart (just a form + summary box, no hero content above it)
 * the same value read as a big empty gap under the header. It's also
 * normally the full site container width (1400px) — fine for a product
 * grid, but here it just strands the right-aligned totals box in a sea
 * of empty space, so this narrows it to a form-appropriate column.
 */
body.woocommerce-cart .page-content {
	max-width: 960px;
	padding-top: var(--space-lg);
}

.woocommerce-cart-form table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-lg);
}

.woocommerce-cart-form table.shop_table th,
.woocommerce-cart-form table.shop_table td {
	padding: var(--space-sm);
	border-bottom: 1px solid var(--color-grey-light);
	text-align: left;
}

.woocommerce-cart-form .product-thumbnail img {
	width: 80px;
	height: auto;
	border-radius: var(--radius-sm);
}

.woocommerce-cart-form .qty {
	width: 64px;
	padding: var(--space-2xs) var(--space-sm);
	border: 1px solid var(--color-grey-light);
	border-radius: var(--radius-sm);
}

.woocommerce-cart-form__cart-item .product-remove a {
	font-size: 1.2em;
	color: var(--color-black);
}

.cart-collaterals {
	display: flex;
	justify-content: flex-end;
}

.cart_totals {
	width: 100%;
	max-width: 420px;
	padding: var(--space-lg);
	border-radius: var(--radius-lg);
	background-color: var(--color-grey-light);
}

.cart_totals .wc-proceed-to-checkout .checkout-button {
	width: 100%;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--color-grey-light);
	text-align: left;
}

.wc-proceed-to-checkout {
	margin-top: var(--space-lg);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.checkout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-xs) var(--space-lg);
	border-radius: var(--radius-pill);
	border: 2px solid var(--color-black);
	background-color: var(--color-black);
	color: var(--color-white);
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.checkout-button:hover {
	background-color: transparent;
	color: var(--color-black);
}