/* Cart visual compatibility layer. Structure, routes and template variables stay untouched. */
:root {
  --cart-ink: #101828;
  --cart-ink-soft: #344054;
  --cart-muted: #667085;
  --cart-line: #dfe4ec;
  --cart-line-soft: #edf0f5;
  --cart-surface: #ffffff;
  --cart-surface-soft: #f6f8fb;
  --cart-blue: var(--theme-color-13, #155eef);
  --cart-blue-dark: var(--theme-color-16, #0b4bd4);
  --cart-shadow-sm: 0 8px 24px rgba(16, 24, 40, 0.08);
  --cart-shadow-md: 0 18px 48px rgba(16, 24, 40, 0.12);
}

html,
body,
form {
  min-height: 100%;
  background: var(--cart-surface-soft) !important;
  color: var(--cart-ink);
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

body *,
body *::before,
body *::after {
  box-sizing: border-box;
  letter-spacing: 0;
}

/* Reconnect the cart to the public site's shared, glass header. */
.header-container-wrap {
  position: fixed !important;
  top: 0;
  right: 0;
  left: 0;
  z-index: 3000 !important;
  height: 68px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(223, 228, 236, 0.84) !important;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06) !important;
  -webkit-backdrop-filter: saturate(150%) blur(20px);
  backdrop-filter: saturate(150%) blur(20px);
}

.header-container,
.header-container:hover,
.header-container.white {
  min-height: 68px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.header-container .bor-header-container-top {
  width: 100% !important;
  height: 68px !important;
  min-height: 68px !important;
  margin: 0 !important;
  padding: 0 20px !important;
}

.header-container-left,
.header-container-right,
.header-container-left .et-diff-intro,
.header-container .header-container-topbar {
  height: 68px !important;
  min-height: 68px !important;
}

.header-container-left {
  padding-left: 0 !important;
}

.header-container-right {
  margin-left: auto !important;
  padding-right: 0 !important;
  justify-content: flex-end !important;
}

.navbar-brand.header-container-topbar {
  width: 158px !important;
  min-width: 158px;
  height: 40px !important;
  margin-right: 28px !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.header-container .nav-item {
  height: 68px !important;
  padding: 0 13px !important;
  line-height: 68px !important;
}

.header-container .cursor,
.header-container .nav-item > a,
.header-container .nav-item a {
  color: var(--cart-ink-soft) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.header-container .nav-item:hover .cursor,
.header-container .nav-item > a:hover,
.header-container .nav-item:hover > a {
  color: var(--cart-blue) !important;
}

.header-container .nav-item > span::after,
.header-container .nav-item > a::after {
  background: var(--cart-blue) !important;
}

.header-container .hot-tag {
  display: inline-flex !important;
  width: auto !important;
  min-width: 27px !important;
  height: 16px !important;
  min-height: 16px !important;
  margin-left: 5px !important;
  padding: 0 5px !important;
  align-items: center;
  justify-content: center;
  vertical-align: 1px;
  background: rgba(247, 144, 9, 0.12) !important;
  border: 1px solid rgba(247, 144, 9, 0.3) !important;
  border-radius: 4px !important;
  color: #dc6803 !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 14px !important;
  transform: none !important;
}

.header-container-right .bor-link,
.header-container-right .btn,
.header-container .login-btn,
.header-container .register-btn {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 15px !important;
  border-radius: 6px !important;
  line-height: 32px !important;
}

.header-container-right .bor-link.et-trial,
.header-container-right .bor-link.et-trial:hover {
  color: var(--cart-ink-soft) !important;
}

.header-container-right .bor-link.et-demonstract,
.header-container-right .bor-link.et-demonstract:hover {
  color: #ffffff !important;
  background: var(--cart-blue) !important;
}

.header-container .nav-item .nav-topbar-dropdown-wrap,
.nav-topbar-dropdown {
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.header-container .nav-item .nav-topbar-dropdown-wrap {
  top: 68px !important;
}

.nav-topbar-dropdown {
  border-top: 1px solid var(--cart-line-soft) !important;
  box-shadow: 0 24px 54px rgba(16, 24, 40, 0.12) !important;
}

/* Product title bar and category navigation. */
.navtop-standingPosition {
  position: fixed !important;
  top: 68px !important;
  right: 0;
  left: 0;
  z-index: 1200 !important;
  height: 52px !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--cart-line) !important;
  box-shadow: 0 3px 12px rgba(16, 24, 40, 0.04);
}

.nav-top-page {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 20px !important;
}

.return {
  min-width: auto !important;
  margin-right: 18px !important;
  color: var(--cart-muted) !important;
  font-size: 13px !important;
}

.return:hover {
  color: var(--cart-blue) !important;
}

.page-title {
  color: var(--cart-ink) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.page-desc,
.nav-test-ip {
  color: var(--cart-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

.category-nav {
  top: 120px !important;
  width: var(--sidebar_width) !important;
  height: calc(100vh - 120px) !important;
  padding: 0 12px 16px !important;
  background: #ffffff !important;
  border-right: 1px solid var(--cart-line) !important;
  box-shadow: 6px 0 20px rgba(16, 24, 40, 0.035) !important;
}

.search-section {
  padding: 16px 0 !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--cart-line-soft) !important;
}

.pro-search-box .form-control {
  height: 38px !important;
  border: 1px solid var(--cart-line) !important;
  border-radius: 6px !important;
  background: var(--cart-surface-soft) !important;
  color: var(--cart-ink) !important;
  box-shadow: none !important;
}

.pro-search-box .form-control:focus {
  border-color: var(--cart-blue) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12) !important;
}

.search-icon {
  color: var(--cart-muted) !important;
}

.category-item {
  background: transparent !important;
  border-bottom: 1px solid var(--cart-line-soft) !important;
}

.first-level {
  min-height: 46px;
  padding: 11px 10px !important;
  border-left: 0 !important;
  border-radius: 6px;
  color: var(--cart-ink-soft) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.first-level:hover,
.first-level.active {
  background: #eef4ff !important;
  color: var(--cart-blue) !important;
}

.submenu {
  background: transparent !important;
}

.submenu-item {
  margin: 2px 0;
  padding: 9px 10px 9px 18px !important;
  border-left: 0 !important;
  border-radius: 5px;
  color: var(--cart-muted) !important;
}

.submenu-item:hover,
.submenu-item.active {
  background: #f0f5ff !important;
  color: var(--cart-blue) !important;
}

.submenu-item.active {
  font-weight: 600;
}

.submenu-tag,
.idcef_tip {
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 4px !important;
  background: rgba(247, 144, 9, 0.1) !important;
  color: #b54708 !important;
  font-size: 11px !important;
  line-height: 20px !important;
}

/* Product grid and common configuration surfaces. */
.col-sm-12 {
  width: 100% !important;
  min-height: calc(100vh - 120px) !important;
  padding: 112px 24px 42px calc(var(--sidebar_width) + 24px) !important;
  background: var(--cart-surface-soft) !important;
}

.products-container {
  width: 100% !important;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 !important;
  overflow: visible !important;
}

/* Product notices, grid and service terms use one shared content edge. */
.col-sm-12 > .bgw,
.col-sm-12 > .announcement-wrapper,
.col-sm-12 > .ewy-elem-quote,
.col-sm-12 > .products-container {
  width: 100% !important;
  max-width: 1440px;
  margin: 0 auto 12px !important;
}

/* Login and notice blocks deliberately share the same left and right edges. */
.col-sm-12 > .bgw {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
  background: transparent !important;
}

.col-sm-12 > .bgw .login-alert {
  width: 100% !important;
  margin: 0 !important;
}

.col-sm-12 > .ewy-elem-quote.grey-theme {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto 12px !important;
}

.col-sm-12 > .ewy-elem-quote,
.products-container > .ewy-elem-quote.red-theme {
  padding: 12px 16px !important;
}

.products-container > .ewy-elem-quote.red-theme {
  width: 100% !important;
  margin: 12px 0 0 !important;
  border-radius: 6px !important;
}

.products-grid {
  width: 100% !important;
  margin-bottom: 0 !important;
}

.products-grid {
  gap: 16px !important;
}

.product-item,
.card,
.configoption_form .card,
.main-card {
  border: 1px solid var(--cart-line-soft) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04) !important;
}

.product-item {
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(16, 24, 40, 0.06) !important;
}

.product-item:hover {
  border-color: rgba(21, 94, 239, 0.38) !important;
  box-shadow: var(--cart-shadow-sm) !important;
  transform: translateY(-2px);
}

.product-header {
  padding: 16px !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--cart-line-soft) !important;
}

.product-title,
.card-title,
.configoption_form h5 {
  color: var(--cart-ink) !important;
  font-weight: 700 !important;
}

.product-body,
.product-footer {
  background: #ffffff !important;
}

.product-description,
.product-stock,
.price-main .period {
  color: var(--cart-muted) !important;
}

.price-main,
.price-main .currency,
.price-main .amount,
.member-daily-average {
  color: var(--cart-blue) !important;
}

.product-footer .btn,
.product-item .btn,
.button-base,
#addToCartBtn,
#addToCartBtnTwo,
.f-order .buy {
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--cart-blue) !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.product-footer .btn:hover,
.product-item .btn:hover,
.button-base:hover,
#addToCartBtn:hover,
#addToCartBtnTwo:hover,
.f-order .buy:hover {
  background: var(--cart-blue-dark) !important;
}

.ewy-elem-quote,
.announcement-wrapper,
.minimal-carousel {
  border-radius: 8px !important;
}

.ewy-elem-quote.blue-theme {
  color: #1849a9 !important;
  border: 1px solid #cfe0ff !important;
  background: #edf4ff !important;
}

.ewy-elem-quote.grey-theme,
.desc-box {
  border-color: var(--cart-line) !important;
  background: #ffffff !important;
}

.configoption_form {
  max-width: 1320px !important;
  margin-top: 140px !important;
  padding-bottom: 120px;
}

.configoption_form .container {
  margin-bottom: 0 !important;
}

.col-xl-12 {
  padding-top: 0 !important;
}

.form-control,
.bootstrap-select .dropdown-toggle {
  border-color: var(--cart-line) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.btn,
.btn-custom,
.btn-sm,
label.btn-primary.mr-2 {
  border-radius: 6px !important;
}

.btn-group .btn-sm.active,
.btn-custom-group .active,
label.btn-primary.mr-2.active {
  border-color: var(--cart-blue) !important;
  background: #eef4ff !important;
  color: var(--cart-blue) !important;
}

/* Fixed summary keeps the same visual hierarchy without obscuring controls. */
.bottom-total {
  z-index: 1250 !important;
  min-height: 76px !important;
  padding: 12px 28px 12px calc(var(--sidebar_width) + 28px) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid var(--cart-line) !important;
  box-shadow: 0 -10px 30px rgba(16, 24, 40, 0.08) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.actual-price,
.actual-price .currency,
.actual-price .amount {
  color: var(--cart-blue) !important;
}

.order-summary-panel {
  border: 1px solid var(--cart-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--cart-shadow-md) !important;
}

/* Vue v10 configuration pages share the same cart shell. */
.template {
  min-height: 100vh;
  padding: 140px 24px 120px calc(var(--sidebar_width) + 24px) !important;
  background: var(--cart-surface-soft) !important;
}

.template > .main-card {
  max-width: 1320px;
  margin: 0 auto;
  overflow: hidden;
}

.template .mf-cloud,
.template .mf-dcim {
  padding: 28px 0 !important;
}

.template .mf-cloud .con,
.template .mf-dcim .con {
  padding: 0 28px !important;
}

.template .el-tabs__item.is-active,
.template .el-radio-button.is-active .el-radio-button__inner,
.template .el-checkbox__input.is-checked + .el-checkbox__label {
  color: var(--cart-blue) !important;
}

.template .el-tabs__active-bar,
.template .el-slider__bar,
.template .el-checkbox__input.is-checked .el-checkbox__inner,
.template .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: var(--cart-blue) !important;
}

.template .el-radio-button.is-active .el-radio-button__inner,
.template .el-input__inner:focus,
.template .el-select .el-input.is-focus .el-input__inner {
  border-color: var(--cart-blue) !important;
  box-shadow: none !important;
}

.f-order {
  z-index: 1250 !important;
  height: 82px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid var(--cart-line) !important;
  box-shadow: 0 -10px 30px rgba(16, 24, 40, 0.08) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.f-order .l-empty {
  width: var(--sidebar_width) !important;
  height: 82px !important;
}

.f-order .el-main {
  padding: 0 28px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.f-order .right .buy {
  width: 148px !important;
  border-radius: 6px !important;
  background: var(--cart-blue) !important;
}

.f-order .bot-price .new,
.f-order .bot-price .new span {
  color: var(--cart-blue) !important;
}

@media (max-width: 768px) {
  .header-container-wrap {
    height: 60px !important;
  }

  .header-container .bor-header-container-top,
  .header-container-left,
  .header-container-right,
  .header-container .header-container-topbar {
    height: 60px !important;
    min-height: 60px !important;
  }

  .header-container .bor-header-container-top {
    width: 100% !important;
    padding: 0 14px !important;
  }

  .navtop-standingPosition {
    top: 60px !important;
    height: 48px !important;
  }

  .nav-top-page {
    width: 100%;
    padding: 0 16px !important;
  }

  .category-nav {
    top: 108px !important;
    height: calc(100vh - 108px) !important;
    box-shadow: var(--cart-shadow-md) !important;
  }

  .col-sm-12 {
    width: 100% !important;
    min-height: calc(100vh - 108px) !important;
    padding: 104px 12px 156px !important;
  }

  .col-sm-12 > .bgw,
  .col-sm-12 > .announcement-wrapper,
  .col-sm-12 > .ewy-elem-quote,
  .col-sm-12 > .products-container {
    max-width: none;
  }

  .col-sm-12 > .bgw {
    margin-top: 0 !important;
  }

  .products-grid {
    gap: 12px !important;
  }

  .configoption_form {
    margin-top: 126px !important;
    padding: 0 12px 156px !important;
  }

  .template {
    padding: 126px 12px 106px !important;
  }

  .template .mf-cloud,
  .template .mf-dcim {
    padding: 20px 0 !important;
  }

  .template .mf-cloud .con,
  .template .mf-dcim .con {
    padding: 0 16px !important;
  }

  .f-order {
    bottom: 0 !important;
  }

  .f-order .l-empty {
    display: none !important;
  }

  .bottom-total {
    bottom: 0 !important;
    padding: 10px 12px !important;
  }

  .sidebar-toggle {
    z-index: 1300 !important;
    border-radius: 50% !important;
    background: var(--cart-blue) !important;
  }
}

/* Cart header and first notice: mirror the compact cart layout. */
.header-container .bor-header-container-top {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  padding-right: 20px !important;
  padding-left: 20px !important;
}

.header-container-right {
  display: flex !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  justify-content: flex-end !important;
}

.header-container-right .bor-link.et-trial {
  margin-left: 0 !important;
  margin-right: 12px !important;
}

.header-container-right .bor-link.et-demonstract {
  margin-right: 0 !important;
}

/* The cart body already starts below its document header; avoid double top spacing. */
.col-sm-12 {
  padding-top: 67px !important;
}

.col-sm-12 > .bgw,
.col-sm-12 > .ewy-elem-quote.grey-theme {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto 12px !important;
}

.col-sm-12 > .bgw {
  padding: 0 !important;
  background: transparent !important;
}

.col-sm-12 > .bgw .login-alert {
  width: 100% !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .header-container .bor-header-container-top {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  /* Mobile body also begins below its document header. */
  .col-sm-12 {
    padding-top: 56px !important;
  }
}