/*! My Account layout for the block build.
 *
 *  hype-rewards' assets/account-ui.css does almost all of the styling, but it
 *  only *decorates* — the two-column grid itself came from Elementor Pro's My
 *  Account widget, which does not exist here. Without it the navigation and the
 *  content stacked, and every one of the plugin's desktop rules (which are
 *  written against `.e-my-account-tabs-vertical`) had nothing to sit inside.
 *
 *  hype_my_account_shortcode() supplies the widget's class names; this supplies
 *  the geometry it used to bring with it. Everything below the grid is the
 *  plugin's job, not this file's.
 */

/* WooCommerce ships woocommerce-blocktheme.css only for block themes and caps
   .woocommerce at 1000px. Production is a classic theme and never loads it, so
   the account column came out 1000px inside a 1280px rail — the same trap the
   cart hit, and undone here the same way. */
.woocommerce-account .lg-content-area .woocommerce {
	max-width: none;
}

@media (min-width: 1025px) {
	/* Elementor's vertical-tabs layout: sidebar, then content.
	   The greeting strip is display:none above 1024 (the plugin's own rule), so
	   it takes no grid cell — display:none is out of grid flow entirely. */

	/* The plugin wraps the navigation in .hype-sidebar-card and closes it after,
	   so the card is the whole left column. */

	/* WooCommerce's own stylesheet floats these at 30%/68%; the grid owns the
	   columns now, and leaving the floats in place made the content column
	   overhang its track. */
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: auto;
	}
}

/* Below the handover the plugin takes over: it turns the same grid into a column
   stack, makes .hype-sidebar-card a full-bleed sticky pill row and shows the
   greeting strip and bottom nav. Hence the min-width gate above rather than a
   max-width undo.

   Except for four rules it cannot reach. The plugin collapses the page intro on
   mobile by Elementor element id:

       [data-id="f218676"]  the intro container
       [data-id="b82fb67"]  eyebrow    "YOUR ACCOUNT"
       [data-id="4ab256d"]  H1         "Manage your ... account"
       [data-id="abac40b"]  lede

   The porter strips `data-id` — it is Elementor runtime state — and carries the
   same identity as `.lg-e-<id>` instead. So the intro stayed on screen and ate
   ~300px above the greeting strip, where production goes straight to it.

   Restated in the ported naming rather than by putting `data-id` back on the
   markup: these are core/group blocks, and an attribute the block does not
   declare makes Gutenberg fail validation when the page is opened in the editor. */
@media (max-width: 1024px) {
	.woocommerce-account .lg-e-f218676 {
		padding: 0;
		background: transparent;
		min-height: 0;
	}

	.woocommerce-account .lg-e-f218676 > .lg-inner {
		padding: 0;
		gap: 0;
	}

	.woocommerce-account .lg-e-b82fb67,
	.woocommerce-account .lg-e-4ab256d,
	.woocommerce-account .lg-e-abac40b {
		display: none;
	}
}


/* Account pages sit on white (2026-09-28). The same change is made in theme.css and
   pages/<id>.css, but those ship under fixed names the CDN keeps for a year, so this
   file (new name) carries it with enough weight to beat a stale copy of either. */
body.wp-theme-hype.woocommerce-account main.lg-content-area {
	background: #fff !important;
}