/**
 * [WNL] WoodMart Fixes — Mobile Checkout Column Reorder (v1.1.0)
 *
 * Active checkout: Elementor woodmart_layout post 2195 ("Checkout form Pets"). Root container
 * .elementor-element-134cb877 has flex_direction:row → flex_direction_mobile:column. On <=767px the
 * LEFT column wrapper (.elementor-element-455f6c7b, 60% / 50% tablet width) stacks ABOVE the RIGHT
 * column wrapper (.elementor-element-194a8af0). The left col contains:
 *   .elementor-element-ab2f050  — billing + shipping card
 *   .elementor-element-fb186a5  — payment selector + Place Order button (rendered together by the
 *                                  wd_checkout_payment_methods widget — these are inseparable as it's
 *                                  WC's own <div id="payment"> block)
 * The right col wrapper contains:
 *   .elementor-element-194a8af0 (itself the wrapper with sticky:yes) → wd_checkout_order_review
 *
 * Default mobile order: customer/shipping → payment+place_order → ORDER_SUMMARY (last). Place Order
 * button therefore renders ~179px ABOVE the order summary on a 375x812 viewport — the regression.
 *
 * Fix strategy: at <=767px set display:contents on the left col wrapper so its two children become
 * flex children of the root container. Then use `order:` to interleave: customer/shipping (1) →
 * order summary (2) → payment+place_order (3). Final mobile sequence matches standard WC checkout
 * (order_review BEFORE payment block):
 *   1. customer/shipping (ab2f050)
 *   2. order summary (194a8af0)
 *   3. payment selector + Place Order button (fb186a5)
 *
 * Also disable 194a8af0 sticky on mobile — sticky is irrelevant once columns are stacked, and the
 * transform was causing the card to jump position during scroll.
 *
 * Desktop (>=768px) is fully untouched. Two-column sticky layout still works as designed.
 *
 * Cooperates with v1.0.0 preloader fix (separate file). Independent CSS surface, no overlap.
 */

@media (max-width: 767px) {
	/* Flatten the left column wrapper so its children participate directly in the root container's flex layout */
	.elementor-element.elementor-element-455f6c7b {
		display: contents !important;
	}

	/* Interleave: customer/shipping (1) -> order summary (2) -> payment + Place Order (3) */
	.elementor-element.elementor-element-ab2f050 {
		order: 1 !important;
	}
	.elementor-element.elementor-element-194a8af0 {
		order: 2 !important;
	}
	.elementor-element.elementor-element-fb186a5 {
		order: 3 !important;
	}

	/* Suppress 194a8af0 sticky transform on mobile (Elementor adds inline transform via the sticky JS) */
	.elementor-element.elementor-element-194a8af0,
	.elementor-element.elementor-element-194a8af0.elementor-sticky--active {
		position: static !important;
		transform: none !important;
		top: auto !important;
		bottom: auto !important;
	}
}