/**
 * Cart & checkout: puur layout/stijl bovenop de native WooCommerce-markup
 * (geen eigen templates/JS-logica, zie brief §18-19).
 */

.woocommerce-cart-form table.shop_table,
.woocommerce-checkout table.shop_table {
	width: 100%;
	border-collapse: collapse;
}
.woocommerce-cart-form table.shop_table th,
.woocommerce-cart-form table.shop_table td {
	padding: var( --space-3 );
	border-bottom: 1px solid var( --border );
	text-align: left;
	vertical-align: middle;
}
.woocommerce-cart-form img { width: 64px; border-radius: var( --radius-sm ); }

.cart-collaterals .cart_totals {
	background: var( --surface-alt );
	padding: var( --space-4 );
	border-radius: var( --radius-md );
	margin-top: var( --space-5 );
}
.cart-collaterals .cart_totals table { width: 100%; }
.cart-collaterals .cart_totals th, .cart-collaterals .cart_totals td { padding: var( --space-2 ) 0; }
.cart-collaterals .order-total .amount { font-weight: 800; font-size: 1.2rem; }

.wc-proceed-to-checkout .checkout-button {
	display: flex;
	width: 100%;
	justify-content: center;
	margin-top: var( --space-3 );
}

/* Checkout: duidelijke, afleidingsvrije secties. */
.woocommerce-checkout h3 {
	margin-top: var( --space-6 );
	padding-bottom: var( --space-2 );
	border-bottom: 2px solid var( --border );
}
.woocommerce-checkout .form-row { margin-bottom: var( --space-3 ); }
.woocommerce-checkout #payment {
	background: var( --surface-alt );
	border-radius: var( --radius-md );
	padding: var( --space-4 );
	margin-top: var( --space-4 );
}
.woocommerce-checkout #place_order {
	width: 100%;
	margin-top: var( --space-4 );
}

/* Sticky "verder afrekenen"-CTA op mobiel blijft in beeld, verbetert UX (§6/§18) */
@media ( max-width: 640px ) {
	.wc-proceed-to-checkout {
		position: sticky;
		bottom: 0;
		background: var( --surface );
		padding: var( --space-3 ) 0;
		border-top: 1px solid var( --border );
	}
}