@media (max-width: 50rem) {
  .product-type-variable > * + * {
	margin-top: 1.5rem;
  }

  .product-type-variable > :last-child {
	margin-bottom: 3rem;
  }
  .dashboard__welcome {
    font-weight: 600;
    font-size: 1.1rem;
  }

  .dashboard__intro {
    font-weight: 400;
    font-size: 0.9rem;
    margin-bottom: 2rem;
  }
    .menu.is-user-menu li {
      border-top: 1px solid var(--color-gray)
    }

      .menu.is-user-menu li:last-of-type {
        border-bottom: 1px solid var(--color-gray);
      }

  .user-dashboard.is-desktop {
    display: none;
  }

  /**
   * The hardest part of user menu navigation.
   * If the user is on the main account page, i.e. dashboard, show bottom menu.
   * On any endpoints show back navigation and hide full menu.
   */
  .logged-in.woocommerce-account .woocommerce {
    /* Force showing navigation elements for dekstop and mobile. */
  }
      .logged-in.woocommerce-account .woocommerce .woocommerce-MyAccount-mobile-navigation.is-endpoint {
        /* Is endpoint is current page, show short menu. */
        display: block;
        margin-bottom: 2rem;
      }

      .logged-in.woocommerce-account .woocommerce .woocommerce-MyAccount-mobile-navigation.is-dashboard {
        /* If it's dashboard, hide it. */
        display: none;
      }

      .logged-in.woocommerce-account .woocommerce .woocommerce-MyAccount-mobile-navigation .MyAccount-mobile-navigation__arrow {
        margin-top: 4px;
        float: left;
      }

      .logged-in.woocommerce-account .woocommerce .woocommerce-MyAccount-mobile-navigation .MyAccount-mobile-navigation__endpoint-title {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        clear: none;
        margin: 0 auto;
      }

    .logged-in.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation.is-endpoint {
      /* Hide full menu from endpoint views. */
      display: none;
    }

.woocommerce-MyAccount-navigation.is-dashboard .user-info {
  display: none;
}
}