.template .menu-top .el-menu-item,
.template .menu-top .el-submenu__title,
.template .menu-top .el-menu-item .iconfont,
.template .menu-top .el-submenu__title .iconfont,
.template .menu-top .el-menu-item .aside-menu-text,
.template .menu-top .el-submenu__title .aside-menu-text,
.gtc-commerce-shell .menu-top .el-menu-item,
.gtc-commerce-shell .menu-top .el-submenu__title,
.gtc-commerce-shell .menu-top .el-menu-item .iconfont,
.gtc-commerce-shell .menu-top .el-submenu__title .iconfont,
.gtc-commerce-shell .menu-top .el-menu-item .aside-menu-text,
.gtc-commerce-shell .menu-top .el-submenu__title .aside-menu-text {
  color: var(--gtc-color-ink) !important;
}

.template .menu-top .el-menu-item,
.template .menu-top .el-submenu__title,
.gtc-commerce-shell .menu-top .el-menu-item,
.gtc-commerce-shell .menu-top .el-submenu__title {
  background-color: transparent !important;
}

.template .menu-top .el-menu-item:hover,
.template .menu-top .el-submenu__title:hover,
.gtc-commerce-shell .menu-top .el-menu-item:hover,
.gtc-commerce-shell .menu-top .el-submenu__title:hover {
  background-color: var(--gtc-color-brand-soft) !important;
  color: var(--gtc-color-brand-hover) !important;
}

.template .menu-top .el-menu-item:hover .iconfont,
.template .menu-top .el-submenu__title:hover .iconfont,
.template .menu-top .el-menu-item:hover .aside-menu-text,
.template .menu-top .el-submenu__title:hover .aside-menu-text,
.gtc-commerce-shell .menu-top .el-menu-item:hover .iconfont,
.gtc-commerce-shell .menu-top .el-submenu__title:hover .iconfont,
.gtc-commerce-shell .menu-top .el-menu-item:hover .aside-menu-text,
.gtc-commerce-shell .menu-top .el-submenu__title:hover .aside-menu-text {
  color: var(--gtc-color-brand-hover) !important;
}

.template .menu-top .el-menu-item.is-active,
.template .menu-top .el-submenu.is-active > .el-submenu__title,
.gtc-commerce-shell .menu-top .el-menu-item.is-active,
.gtc-commerce-shell .menu-top .el-submenu.is-active > .el-submenu__title {
  background-color: var(--gtc-color-brand-soft) !important;
  color: var(--gtc-color-brand) !important;
}

.template .menu-top .el-menu-item.is-active .iconfont,
.template .menu-top .el-menu-item.is-active .aside-menu-text,
.template .menu-top .el-submenu.is-active > .el-submenu__title .iconfont,
.template .menu-top .el-submenu.is-active > .el-submenu__title .aside-menu-text,
.gtc-commerce-shell .menu-top .el-menu-item.is-active .iconfont,
.gtc-commerce-shell .menu-top .el-menu-item.is-active .aside-menu-text,
.gtc-commerce-shell .menu-top .el-submenu.is-active > .el-submenu__title .iconfont,
.gtc-commerce-shell .menu-top .el-submenu.is-active > .el-submenu__title .aside-menu-text {
  color: var(--gtc-color-brand) !important;
}

.template .top-back,
.gtc-commerce-shell .top-back {
  width: calc(100% - var(--gtc-aside-width)) !important;
  max-width: calc(100% - var(--gtc-aside-width));
}

@media (max-width: 767px) {
  .template .top-back,
  .gtc-commerce-shell .top-back {
    width: 100% !important;
    max-width: 100%;
  }

  .template .drawer-menu,
  .gtc-commerce-shell .drawer-menu {
    width: min(var(--gtc-aside-width), calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px);
    background: var(--gtc-color-surface) !important;
    border-right: 1px solid var(--gtc-color-border);
  }

  .template .drawer-menu .el-drawer__body,
  .gtc-commerce-shell .drawer-menu .el-drawer__body {
    background: var(--gtc-color-surface);
  }
}