/**
 * Fix WooCommerce checkout notice placement in grid-based checkout layouts.
 *
 * AJAX checkout updates prepend notices inside form.checkout without spanning
 * all grid columns, which squeezes error text into the first sidebar column.
 */

form.checkout.woocommerce-checkout > .woocommerce-NoticeGroup,
.wc-checkout > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
	width: 100%;
	margin-bottom: 2rem;
}

form.checkout.woocommerce-checkout > .woocommerce-NoticeGroup {
	order: -10;
}

form.checkout.woocommerce-checkout > .woocommerce-NoticeGroup .woocommerce-error,
form.checkout.woocommerce-checkout > .woocommerce-NoticeGroup .woocommerce-info,
form.checkout.woocommerce-checkout > .woocommerce-NoticeGroup .woocommerce-message {
	width: 100%;
}

form.checkout.woocommerce-checkout > .woocommerce-NoticeGroup .woocommerce-error li,
form.checkout.woocommerce-checkout > .woocommerce-NoticeGroup .woocommerce-info li,
form.checkout.woocommerce-checkout > .woocommerce-NoticeGroup .woocommerce-message li {
	white-space: normal;
}