/* WooCommerce My Account: narrow left menu, content gets the rest.
   Change --mlc-nav-width to make the menu wider/narrower. */
body.woocommerce-account.logged-in {
	--mlc-nav-width: 200px;
	--mlc-nav-gap: 32px;
}

/* Themes (esp. block themes) narrow & center the account block; align it with the page title instead. */
body.woocommerce-account.logged-in .woocommerce {
	max-width: none !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
}

@media (min-width: 769px) {
	body.woocommerce-account.logged-in .woocommerce {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--mlc-nav-gap);
	}
	body.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper,
	body.woocommerce-account.logged-in .woocommerce > .woocommerce-message,
	body.woocommerce-account.logged-in .woocommerce > .woocommerce-error,
	body.woocommerce-account.logged-in .woocommerce > .woocommerce-info {
		flex: 0 0 100%;
	}
	body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
		float: none !important;
		flex: 0 0 var(--mlc-nav-width);
		width: var(--mlc-nav-width) !important;
		max-width: var(--mlc-nav-width);
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
		float: none !important;
		flex: 1 1 0;
		width: auto !important;
		min-width: 0;
		margin: 0 !important;
		padding-left: 0 !important;
	}
}

@media (max-width: 768px) {
	body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
	body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
		float: none !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { margin-bottom: 24px !important; }
}

/* Elementor: the [woocommerce_my_account] shortcode sits inside Elementor containers/sections
   that are boxed (centered, fixed width) and padded. Remove that only for the containers that
   hold the account area, so it lines up with the page title on the left. */
body.woocommerce-account.logged-in :is(.e-con, .e-con-inner, .elementor-section, .elementor-container, .elementor-column, .elementor-widget-wrap, .elementor-element, .elementor-widget-container, .elementor-shortcode):has(.woocommerce-MyAccount-navigation) {
	max-width: none !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
	--padding-left: 0px;
	--margin-left: 0px;
	--content-width: 100%;
	--container-max-width: 100%;
}