/**
 * MR Stiff Product Shop — checkout mobile ordering.
 *
 * Desktop is left exactly as it is: the order total stays in the right-hand
 * column. On mobile the totals column is moved *below* the main column, so the
 * order total lands under the "Place order" button.
 *
 * The checkout product slider and the checkout information list are appended
 * into the totals column by MSPS_Checkout, so they travel with it and get the
 * same responsive behaviour for free — no separate rules are needed for them.
 *
 * Scoped to the WooCommerce Checkout *block*, which is what this site uses. On
 * a classic/shortcode checkout the place-order button sits inside #order_review
 * together with the totals, so the same result cannot be reached by reordering
 * columns and is deliberately not attempted here.
 *
 * Only ordering is touched — no colours, spacing or widths are overridden.
 *
 * @package MrStiffProductShop
 */

@media (max-width: 781px) {

	/* The Checkout block renders the fields column (which contains the Place
	   order button) and the totals column as siblings. Flex + order re-sequences
	   them visually without touching the DOM, so nothing React manages is
	   disturbed and no re-render can undo it.

	   Both the server-rendered wrapper (.wp-block-woocommerce-checkout, whose
	   children are the *-fields-block / *-totals-block divs) and the class names
	   React swaps in after hydration (.wc-block-checkout__form wrapping
	   .wc-block-checkout__main) are covered, so the order holds before and
	   after the block mounts. */
	.wp-block-woocommerce-checkout,
	.wp-block-woocommerce-checkout .wc-block-checkout__form {
		display: flex;
		flex-direction: column;
	}

	.wp-block-woocommerce-checkout-fields-block,
	.wc-block-checkout__main {
		order: 1;
	}

	.wp-block-woocommerce-checkout-totals-block {
		order: 2;
	}
}