/* ============================================
   CART PAGE LAYOUT - TOP RIGHT TOTALS
   Product Details (Left, Larger) | Cart Totals (Right, Smaller)
   Cross-sells appear below product details table
   ============================================ */

/* Container for cart form and totals - side by side at top */
/* Target the main WooCommerce container to ensure proper layout */
body.woocommerce-cart .woocommerce {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 32px !important;
	flex-wrap: wrap !important;
}

/* Also target parent containers to override any existing styles */
body.woocommerce-cart .entry-content .woocommerce,
body.woocommerce-cart .content-area .woocommerce,
body.woocommerce-cart main .woocommerce,
body.woocommerce-cart .site-main .woocommerce {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 32px !important;
	flex-wrap: nowrap !important;
}

/* Product Details Section - Takes up more space (65-70%) */
/* This section contains the product table and should be larger */
body.woocommerce-cart .woocommerce-cart-form {
	flex: 2 1 65% !important;
	min-width: 0 !important;
	margin-bottom: 0 !important;
	order: 1 !important;
	width: auto !important;
}

/* Cart Totals Section - Takes up less space (30-35%) - Top Right */
/* This section should be smaller and positioned on the right side at the top */
body.woocommerce-cart .cart-collaterals {
	margin-top: 0 !important;
	flex: 1 1 32% !important;
	max-width: 400px !important;
	position: sticky !important;
	top: 24px !important;
	align-self: flex-start !important;
	order: 2 !important;
	width: auto !important;
}

/* Ensure cart totals wrapper takes full width */
body.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100% !important;
}

/* Hide cross-sells inside cart-collaterals (they're moved below via PHP hook) */
body.woocommerce-cart .cart-collaterals .cross-sells {
	display: none !important;
}

/* Cross-sells section - positioned below product details table */
/* Cross-sells are moved inside the cart form via PHP hook (woocommerce_after_cart_table) */
body.woocommerce-cart .woocommerce-cart-form .cross-sells {
	width: 100% !important;
	margin-top: 32px !important;
	padding-top: 32px !important;
	border-top: 2px solid #F0EBE7 !important;
	clear: both !important;
	display: block !important;
}

/* Responsive - Stack on mobile/tablet */
@media (max-width: 1024px) {
	body.woocommerce-cart .woocommerce,
	body.woocommerce-cart .entry-content .woocommerce,
	body.woocommerce-cart .content-area .woocommerce,
	body.woocommerce-cart main .woocommerce,
	body.woocommerce-cart .site-main .woocommerce {
		flex-direction: column !important;
		flex-wrap: wrap !important;
	}
	
	body.woocommerce-cart .woocommerce-cart-form {
		flex: 1 1 100% !important;
		width: 100% !important;
		order: 1 !important;
	}
	
	body.woocommerce-cart .cart-collaterals {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		position: static !important;
		order: 1 !important;
	}
	
	body.woocommerce-cart .woocommerce-cart-form .cross-sells {
		margin-top: 24px !important;
	}
}

/* Large screens - Optimize spacing and proportions */
@media (min-width: 1200px) {
	body.woocommerce-cart .woocommerce-cart-form {
		flex: 2 1 68% !important;
	}
	
	body.woocommerce-cart .cart-collaterals {
		flex: 1 1 30% !important;
		max-width: 380px !important;
	}
}