Styling Woocommerce "My acount" page with elementor global variables

woocommerce-elementor.css

/* === */
/* Espace client */
/* === */

.woocommerce a.button.alt, .woocommerce a.button,.woocommerce #payment #place_order, .woocommerce-page #payment #place_order{
  background: transparent;
  border: 2px solid var(--e-global-color-primary);
  color: var(--e-global-color-primary);
  border-radius: 0;
  font-family: var(--e-global-typography-primary-font-family);
  font-size: 18px;
  text-transform: uppercase;
}
.woocommerce a.button.alt:hover,
 .woocommerce a.button:hover,
 .woocommerce #payment #place_order:hover, .woocommerce-page #payment #place_order:hover{
  color:white;
  background: var(--e-global-color-primary);
 }

 .woocommerce #content input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page #content input.button.alt:hover,
.woocommerce-page #respond input#submit.alt:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce-page button.button.alt:hover,
.woocommerce-page input.button.alt:hover {
  background: var(--e-global-color-primary) !important;
  background-color: var(--e-global-color-primary) !important;
  color: white !important;
  text-shadow: transparent !important;
  box-shadow: none;
  border-color: var(--e-global-color-primary) !important;
  font-family: var(--e-global-typography-secondary-font-family) !important;
  font-weight: var(--e-global-typography-secondary-font-weight) !important;
  font-size: var(--e-global-typography-secondary-font-size) !important;
  text-transform: var(--e-global-typography-secondary-text-transform) !important;
  padding: 12px 24px !important;
}

.woocommerce #content input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page #content input.button:hover,
.woocommerce-page #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover {
  background: var(--e-global-color-primary) !important;
  background-color: var(--e-global-color-primary) !important;
  color: white !important;
  text-shadow: transparent !important;
  box-shadow: none;
  border-color: var(--e-global-color-primary) !important;
  font-family: var(--e-global-typography-secondary-font-family) !important;
  font-weight: var(--e-global-typography-secondary-font-weight) !important;
  font-size: var(--e-global-typography-secondary-font-size) !important;
  text-transform: var(--e-global-typography-secondary-text-transform) !important;
  padding: 12px 24px !important;
}

.woocommerce #content input.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page #content input.button,
.woocommerce-page #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
  background: var(--e-global-color-primary) !important;
  color: white !important;
  text-shadow: transparent !important;
  border-color: var(--e-global-color-primary) !important;
  font-family: var(--e-global-typography-secondary-font-family) !important;
  font-weight: var(--e-global-typography-secondary-font-weight) !important;
  font-size: var(--e-global-typography-secondary-font-size) !important;
  text-transform: var(--e-global-typography-secondary-text-transform) !important;
  padding: 12px 24px !important;
}

.woocommerce #content input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page #content input.button.alt:hover,
.woocommerce-page #respond input#submit.alt:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce-page button.button.alt:hover,
.woocommerce-page input.button.alt:hover {
  background: var(--e-global-color-primary) !important;
  box-shadow: none;
  text-shadow: transparent !important;
  color: white !important;
  border-color: var(--e-global-color-primary) !important;
  font-family: var(--e-global-typography-secondary-font-family) !important;
  font-weight: var(--e-global-typography-secondary-font-weight) !important;
  font-size: var(--e-global-typography-secondary-font-size) !important;
  text-transform: var(--e-global-typography-secondary-text-transform) !important;
  padding: 12px 24px !important;
}
.woocommerce-MyAccount-navigation ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.woocommerce-MyAccount-navigation ul a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  margin-bottom: 2px;
  color: var(--e-global-color-text);
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.woocommerce-MyAccount-navigation ul a:hover {
  color: white;
  background-color: var(--e-global-color-primary);
}
.woocommerce-MyAccount-navigation ul .is-active a {
  color: white;
  background-color: var(--e-global-color-secondary);
  font-weight: bold;
}


/* === */
/* Tables & Blocks */
/* === */
.woocommerce table tbody > tr:nth-child(2n+1) > td, 
.woocommerce table tbody > tr:nth-child(2n+1) > th {
  background-color: #1e1e1e;
}

.woocommerce #add_payment_method #payment, 
.woocommerce .woocommerce-cart #payment, 
.woocommerce .woocommerce-checkout #payment {
  background: #1e1e1e;
}


/* === */
/* Messages, alerts */
/* === */
.woocommerce .woocommerce-error, 
.woocommerce .woocommerce-info, 
.woocommerce .woocommerce-message {
  background-color: var(--e-global-color-primary);
  color: white;
  border-top: 3px solid var(--e-global-color-accent);
}
.woocommerce .woocommerce-error a, 
.woocommerce .woocommerce-info a, 
.woocommerce .woocommerce-message a {
  color: var(--e-global-color-accent);
}

.woocommerce .woocommerce-error{
  border-top-color: #b81c23;
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before{
  color: var(--e-global-color-accent);
}


/* === */
/* Forms */
/* === */
.page-content .woocommerce form .form-row input.input-text, 
.page-content .woocommerce form .form-row textarea {
  background: transparent;
  color: var(--e-global-color-008cd0a);
  border-radius: 8px;
}