/* ═══════════════════════════════════════════════════════════
   WooCommerce My Account Layout — Container vs Full-Width
   Purpose: avoid a global max-width on the account wrapper while preserving the theme
   container tokens (`--max-w`, `--px`) for content that should remain constrained.
   ═══════════════════════════════════════════════════════════ */

/* Full-width base: removes container constraints from WooCommerce’s account wrapper so inner sections can intentionally opt into full width (`width: 100vw`, `max-width: none`, etc.). */
.woocommerce-account .woocommerce {
  max-width: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Constrained container: apply to the specific account blocks that should match the theme’s default content width (centered + responsive side padding via `--px`). */
.wc-account-container {
  width: 100%;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--px);
  padding-right: var(--px);
  box-sizing: border-box;
}

/* Backward-compatible constrained layout: keeps WooCommerce’s default My Account 2-column wrapper aligned to the theme container while still allowing nested opt-in full-bleed sections. */
.woocommerce-account .woocommerce > .woocommerce-MyAccount {
  width: 100%;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--px);
  padding-right: var(--px);
  box-sizing: border-box;
}

/* Backward-compatible constrained layout: keeps WooCommerce’s default (not-logged-in) account forms aligned to the theme container without re-introducing a global `.woocommerce` max-width. */
.woocommerce-account .woocommerce > #customer_login,
.woocommerce-account .woocommerce > form.woocommerce-form-login,
.woocommerce-account .woocommerce > form.woocommerce-form-register,
.woocommerce-account .woocommerce > .woocommerce-ResetPassword {
  width: 100%;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--px);
  padding-right: var(--px);
  box-sizing: border-box;
}

/* Full-width helper (flow-safe): use when an element should ignore any inherited max-width but remain within the normal document flow (no viewport “breakout”). */
.wc-account-fullwidth {
  width: 100%;
  max-width: none;
}

/* Full-bleed helper (viewport breakout): use for bands/sections that must span the viewport width even when nested inside `.wc-account-container` or other constrained wrappers. */
.wc-account-fullbleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}