.main-title {
  font-size: 0.28rem;
  color: #171725;
}
.cart-des {
  padding: 0.1rem;
  border-radius: 0.03rem;
  border: 1px solid #e6e7eb;
  box-sizing: border-box;
  overflow-y: auto;
  margin-bottom: 0.24rem;
}
.cart-des * {
  all: revert;
}
.main-content-box {
  box-sizing: border-box;
  padding-bottom: 0.1rem;
  width: 100%;
  border-radius: 0.03rem;
}
.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-box .el-select {
  width: 3.2rem;
  font-size: 0.15rem;
}
.search-box .el-select .el-input__inner {
  height: 0.46rem !important;
  line-height: 0.46rem;
}
.search-box .el-select .el-input__suffix .el-input__icon {
  line-height: 1;
}
.second-select {
  margin: 0 0.1rem;
}
.second-select .el-input__inner {
  height: 0.46rem;
  line-height: 0.46rem;
}
.search-input {
  width: 3.2rem;
}
.search-input .el-input__inner {
  height: 0.46rem !important;
  line-height: 0.46rem;
}
.search-btn {
  margin-left: 0.1rem;
  width: 0.8rem;
  height: 0.46rem;
  background: var(--color-primary);
  border-radius: 0.03rem;
  border: none;
  font-size: 0.16rem;
  color: rgba(255, 255, 255, 0.9);
}
.second-desc {
  height: 0.4rem;
  font-size: 0.14rem;
  color: var(--color-danger);
  background: rgba(220, 45, 45, 0.1);
  margin-top: 0.24rem;
  border-radius: 0.04rem;
}
.shopping-box {
  box-sizing: border-box;
  margin-top: 0.24rem;
  min-height: 3rem;
}
.goods-list-div {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 0.2rem;
  column-gap: 0.2rem;
}
.shopping-item {
  position: relative;
  box-sizing: border-box;
  min-height: 2.75rem;
  border: 1px solid #EDEDED;
  border-radius: 0.08rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 0.16rem;
}
.shopping-item .client-box {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 0.08rem;
  color: #fff;
  font-size: 14px;
  border-radius: 0px 0px 0px 8px;
}
.shopping-item .goods-name {
  margin-top: 0.18rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 0.3rem;
  padding: 0 0.16rem;
}
.shopping-item .goods-name .goods-name-text {
  font-size: 16px;
  font-weight: 700;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shopping-item .goods-name .qty-box {
  font-size: 12px;
  color: #CFD2E1;
  flex-shrink: 0;
  position: relative;
}
.shopping-item .goods-name .qty-box img {
  position: absolute;
  top: -0.2rem;
  right: 0;
  width: 0.55rem;
  height: 0.48rem;
}
.shopping-item .goods-name.sold-out .goods-name-text {
  color: #CFD2E1;
}
.shopping-item .goods-name.sold-out .qty-box {
  width: 0.55rem;
}
.shopping-item .goods-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.shopping-item .goods-active {
  margin-top: 0.12rem;
  padding: 0 0.16rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.08rem;
  row-gap: 0.08rem;
}
.shopping-item .goods-active .active-name {
  font-size: 12px;
  color: var(--color-primary);
  background: rgba(57, 124, 252, 0.1);
  padding: 0.03rem 0.08rem;
  border-radius: 2px;
}
.shopping-item .goods-tag {
  box-sizing: border-box;
  height: 0.36rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.08rem;
  column-gap: 0.16rem;
  background: rgba(57, 124, 252, 0.15);
  padding: 0 0.16rem;
}
.shopping-item .goods-tag .tag-item {
  position: relative;
  font-size: 12px;
  flex-shrink: 0;
  color: var(--color-primary);
  padding-left: 0.08rem;
}
.shopping-item .goods-tag .tag-item::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.04rem;
  height: 0.04rem;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(57, 124, 252, 0.45);
}
.shopping-item .goods-description {
  box-sizing: border-box;
  padding: 0.24rem 0.21rem 0.22rem 0.16rem;
  max-height: 400px;
  min-height: 150px;
  flex: 1;
  overflow: auto;
  font-size: 14px;
  white-space: normal;
  background: #F4F4F4;
}
.shopping-item .goods-description * {
  all: revert;
}
.shopping-item .goods-description ul {
  padding-left: 0.16rem;
  margin: 0;
}
.shopping-item .goods-description img {
  max-width: 100%;
}
.shopping-item .goods-description::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0px;
}
.shopping-item .goods-description:hover::-webkit-scrollbar {
  width: 4px;
}
.shopping-item .price-box {
  margin-top: 0.18rem;
  padding: 0 0.16rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 0.1rem;
}
.shopping-item .price-box .price-box-left {
  text-align: right;
  display: flex;
  align-items: flex-end;
  column-gap: 0.04rem;
}
.shopping-item .price-box .original-price {
  font-size: 12px;
  color: #CFD2E1;
  text-decoration: line-through;
}
.shopping-item .price-box .item-price {
  font-size: 24px;
  color: var(--color-price-text);
}
.shopping-item .price-box .item-price .item-price-prefix {
  font-size: 12px;
}
.shopping-item .price-box .item-price .item-price-cycle {
  font-size: 14px;
  color: #485169;
}
.shopping-item .price-box .buy-btn {
  height: 0.3rem;
}
.tips {
  color: #8692b0;
  font-size: 0.13rem;
  text-align: center;
}
.domain-box .register-type {
  display: flex;
  align-items: center;
}
.domain-box .register-type .el-divider {
  background-color: #D8D8D8;
  margin: 0 0.24rem;
}
.domain-box .register-type .reg-ridio {
  font-size: 0.14rem;
  color: #646464;
  cursor: pointer;
}
.domain-box .register-type .isActice {
  color: var(--color-primary);
}
.domain-box .domain-search {
  margin-top: 0.32rem;
  position: relative;
  display: flex;
  align-items: center;
}
.domain-box .domain-search .el-input {
  height: 0.56rem;
}
.domain-box .domain-search .el-input .el-input__inner {
  height: 0.56rem;
  line-height: 0.56rem;
}
.domain-box .domain-search .el-input-group__append {
  padding: 0;
  background: #ffffff;
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.domain-box .domain-search .input-btn {
  width: 1.7rem;
}
.domain-box .domain-search .suffix-box {
  width: 1.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #2B2B2B;
  font-size: 0.16rem;
  cursor: pointer;
}
.domain-box .domain-search .suffix-box .el-icon-arrow-down {
  font-size: 0.14rem;
  color: #8692b0;
  margin-left: 0.1rem;
}
.domain-box .domain-search .search-button {
  height: 0.56rem;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
  border: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: var(--color-primary);
  color: #ffffff;
  font-size: 0.16rem;
}
.domain-box .domain-search .suffix-list {
  z-index: 2;
  position: absolute;
  top: 0.56rem;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 2.7rem);
  padding: 0.3rem 0.23rem 0.3rem 0.46rem;
  background: #feffff;
  box-shadow: 0rem 0.05rem 0.1rem 0.01rem rgba(0, 0, 0, 0.1);
  border-radius: 0.03rem 0.03rem 0.03rem 0.03rem;
}
.domain-box .domain-search .suffix-list .suffix-item {
  margin-right: 0.16rem;
  margin-bottom: 0.16rem;
  width: 1.1rem;
  height: 0.4rem;
  border: 0.01rem solid #e6eaed;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.16rem;
  color: #2B2B2B;
  cursor: pointer;
}
.domain-box .domain-search .suffix-list .suffix-item:hover {
  background: rgba(0, 88, 255, 0.08);
}
.domain-box .domain-search .suffix-list .suffix-active {
  background: rgba(0, 88, 255, 0.08);
  border: 0.01rem solid var(--color-primary);
  color: var(--color-primary);
}
.domain-box .batch-search-box {
  margin-top: 0.32rem;
}
.domain-box .batch-search-box .batch-tips {
  box-sizing: border-box;
  color: #8692b0;
  font-size: 0.14rem;
  padding: 0.16rem;
  border-radius: 0.04rem;
  border: 0.01rem solid #EAEAEA;
}
.domain-box .batch-search-box .batch-tips .input-batch .el-textarea__inner {
  height: 1.3rem;
  border: none;
  padding: 0;
}
.domain-box .batch-search-box .batch-btn {
  margin-top: 0.16rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.domain-box .batch-search-box .batch-btn .upload-btn {
  display: flex;
  align-items: center;
  column-gap: 0.08rem;
  font-size: 0.12rem;
  color: var(--color-primary);
  cursor: pointer;
}
.domain-box .batch-search-box .batch-btn .el-button {
  height: 0.36rem;
}
.domain-box .domain-content {
  margin-top: 0.24rem;
  display: flex;
  column-gap: 0.4rem;
}
.domain-box .domain-content .domain-left {
  flex: 1;
}
.domain-box .domain-content .domain-left .domain-one {
  height: 100%;
}
.domain-box .domain-content .domain-left .domain-one .domain-one-list {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.domain-box .domain-content .domain-left .domain-one .search-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.16rem;
  color: #2B2B2B;
}
.domain-box .domain-content .domain-left .domain-one .search-title .search-fillter {
  display: flex;
  align-items: center;
  column-gap: 0.08rem;
  cursor: pointer;
}
.domain-box .domain-content .domain-left .domain-one .search-title .search-fillter.is_select {
  color: var(--color-primary);
}
.domain-box .domain-content .domain-left .domain-one .fillter-list {
  margin-top: 0.24rem;
  border-radius: 8px;
  box-sizing: border-box;
  border: 1px solid #EAEAEA;
  padding: 0.24rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.24rem;
}
.domain-box .domain-content .domain-left .domain-one .fillter-list .fillter-item {
  width: 1rem;
  height: 0.4rem;
  border: 0.01rem solid #e6eaed;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.14rem;
  color: #2B2B2B;
  cursor: pointer;
  border-radius: 0.04rem;
}
.domain-box .domain-content .domain-left .domain-one .fillter-list .fillter-item:hover {
  background: rgba(0, 88, 255, 0.08);
}
.domain-box .domain-content .domain-left .domain-one .fillter-list .fillter-item.is_select {
  background: rgba(0, 88, 255, 0.08);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.domain-box .domain-content .domain-left .domain-one .start-search {
  margin-top: 0.24rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 93%;
  border-radius: 8px;
  border: 0.01rem solid #EAEAEA;
}
.domain-box .domain-content .domain-left .domain-one .start-search img {
  width: 0.58rem;
  height: 0.57rem;
}
.domain-box .domain-content .domain-left .domain-one .start-search p {
  text-align: center;
  margin-top: 0.19rem;
  font-size: 0.18rem;
  color: #2B2B2B;
}
.domain-box .domain-content .domain-left .domain-one .domain-list {
  margin-top: 0.24rem;
  background: #ffffff;
  border: 1px solid #EAEAEA;
  border-radius: 8px;
  flex: 1;
  overflow-y: auto;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item {
  height: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.01rem solid #ededed;
  padding: 0 0.33rem 0 0.3rem;
  transition: background-color 0.25s ease;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item:hover {
  background-color: #f5f7fa;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-left .domain-name {
  font-size: 0.16rem;
  color: #2B2B2B;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-left .domain-status {
  margin-left: 0.42rem;
  font-size: 0.13rem;
  color: rgba(0, 0, 0, 0.6);
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-right {
  display: flex;
  align-items: center;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-right .premium-type {
  padding: 0.06rem 0.12rem;
  margin-right: 0.25rem;
  font-size: 0.14rem;
  color: #8692b0;
  border-radius: 0.16rem 0.16rem 0.16rem 0.16rem;
  background: #f3f3f5;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-right .whois-box {
  font-size: 0.14rem;
  color: #2B2B2B;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-right .whois-box:hover {
  color: var(--color-primary);
  cursor: pointer;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-right .pirce-box {
  cursor: pointer;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-right .pirce-box .original-price {
  color: #8692b0;
  font-size: 0.12rem;
  text-decoration: line-through;
  margin-right: 0.17rem;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-right .pirce-box .now-price {
  font-size: 0.12rem;
  color: var(--color-price-text);
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-right .add-btn {
  margin-left: 0.4rem;
  height: 0.36rem;
}
.domain-box .domain-content .domain-left .batch-box {
  height: 100%;
}
.domain-box .domain-content .domain-left .batch-box .batch-main {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-search {
  margin-top: 0.24rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 0.01rem solid #EAEAEA;
  border-radius: 0.08rem;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-search img {
  width: 0.58rem;
  height: 0.57rem;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-search p {
  text-align: center;
  margin-top: 0.19rem;
  font-size: 0.18rem;
  color: #2B2B2B;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .search-title {
  font-size: 0.16rem;
  color: #2B2B2B;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .avail-list {
  margin-top: 0.24rem;
  background: #ffffff;
  border: 0.01rem solid #EAEAEA;
  border-radius: 0.08rem 0.08rem 0 0;
  border-bottom: none;
  max-height: 5rem;
  overflow-y: auto;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .el-collapse {
  border: none;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item {
  height: 0.64rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.01rem solid #EAEAEA;
  padding: 0 0.24rem;
  transition: background-color 0.25s ease;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item:hover {
  background-color: #f5f7fa;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item:nth-last-of-type(1) {
  border-bottom: none;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-left .domain-name {
  font-size: 0.14rem;
  color: #2B2B2B;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-left .domain-status {
  margin-left: 0.42rem;
  font-size: 0.14rem;
  color: rgba(0, 0, 0, 0.6);
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right {
  display: flex;
  align-items: center;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right .premium-type {
  padding: 0.06rem 0.12rem;
  margin-right: 0.25rem;
  font-size: 0.14rem;
  color: #8692b0;
  border-radius: 0.16rem 0.16rem 0.16rem 0.16rem;
  background: #f3f3f5;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right .whois-box {
  font-size: 0.14rem;
  color: #2B2B2B;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right .whois-box:hover {
  color: var(--color-primary);
  cursor: pointer;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right .pirce-box {
  cursor: pointer;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right .pirce-box .oir-price {
  color: #8692b0;
  font-size: 0.14rem;
  text-decoration: line-through;
  margin-right: 0.17rem;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right .pirce-box .now-price {
  font-size: 0.12rem;
  color: var(--color-price-text);
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right .pirce-box .el-icon-arrow-down {
  font-size: 0.12rem;
  color: #8692b0;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right .add-btn {
  margin-left: 0.4rem;
  border-radius: 0.04rem;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .all-check {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0.24rem;
  height: 0.64rem;
  background: #F9F9F9;
  color: #2B2B2B;
  font-size: 0.14rem;
  border: 0.01rem solid #EAEAEA;
  border-top: none;
  border-radius: 0 0 0.08rem 0.08rem;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .all-check .el-button {
  color: #ffffff;
  font-size: 0.14rem;
  background: var(--color-primary);
}
.domain-box .domain-content .domain-left .batch-box .unavail-title {
  width: 100%;
  font-size: 0.16rem;
  color: #2B2B2B;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.domain-box .domain-content .domain-left .batch-box .unavail-title .open-text {
  cursor: pointer;
  font-size: 0.14rem;
  color: var(--color-primary);
}
.domain-box .domain-content .domain-left .batch-box .unavail-list {
  margin-top: 0.24rem;
  display: flex;
  flex-wrap: wrap;
  border-radius: 0.08rem;
  border: 0.01rem solid #e6e7eb;
}
.domain-box .domain-content .domain-left .batch-box .unavail-list .unavail-item {
  width: 50%;
  height: 0.64rem;
  box-sizing: border-box;
  padding: 0.17rem 0.24rem;
  border-bottom: 0.01rem solid #ededed;
}
.domain-box .domain-content .domain-left .batch-box .unavail-list .unavail-item:nth-child(odd) {
  position: relative;
}
.domain-box .domain-content .domain-left .batch-box .unavail-list .unavail-item:nth-child(odd)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 0.01rem;
  height: 0.32rem;
  background: #ededed;
}
.domain-box .domain-content .domain-left .batch-box .unavail-list .unavail-item .unavail-name {
  font-size: 0.14rem;
  color: #2B2B2B;
}
.domain-box .domain-content .domain-left .batch-box .unavail-list .unavail-item .unavail-reason {
  margin-left: 0.4rem;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.14rem;
}
.domain-box .domain-content .domain-right {
  box-sizing: border-box;
  width: 5.33rem;
  height: 7rem;
  flex-shrink: 0;
}
.domain-box .domain-content .domain-right .car-top {
  display: flex;
  justify-content: space-between;
  color: #2B2B2B;
  font-size: 0.16rem;
}
.domain-box .domain-content .domain-right .car-top .clear-car {
  cursor: pointer;
  color: #A2A2A2;
}
.domain-box .domain-content .domain-right .car-top .clear-car .icon {
  fill: #A2A2A2;
  margin-right: 0.08rem;
}
.domain-box .domain-content .domain-right .car-top .clear-car:hover {
  color: var(--color-danger);
}
.domain-box .domain-content .domain-right .car-top .clear-car:hover .icon {
  fill: var(--color-danger);
}
.domain-box .domain-content .domain-right .car-box {
  box-sizing: border-box;
  margin-top: 0.24rem;
  height: 5.3rem;
  border-radius: 8px;
  border: 0.01rem solid #EAEAEA;
  background: #ffffff;
  overflow-y: auto;
}
.domain-box .domain-content .domain-right .car-no {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.14rem;
  color: #8692b0;
}
.domain-box .domain-content .domain-right .car-list .car-item {
  padding: 0.16rem 0.32rem;
  border-bottom: 0.01rem solid #F6F7FB;
}
.domain-box .domain-content .domain-right .car-list .car-item:hover {
  background: #F7F8F9;
}
.domain-box .domain-content .domain-right .car-list .car-item:hover .car-del {
  display: block;
}
.domain-box .domain-content .domain-right .car-list .car-item:nth-last-of-type(1) {
  border-bottom: none;
}
.domain-box .domain-content .domain-right .car-list .car-item .caritem-top,
.domain-box .domain-content .domain-right .car-list .car-item .car-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.domain-box .domain-content .domain-right .car-list .car-item .car-bottom {
  color: #2B2B2B;
  margin-top: 0.16rem;
}
.domain-box .domain-content .domain-right .car-list .car-item .car-name {
  display: flex;
  align-items: center;
  column-gap: 0.16rem;
}
.domain-box .domain-content .domain-right .car-list .car-item .car-name .shop-name {
  font-size: 0.14rem;
  color: #2B2B2B;
}
.domain-box .domain-content .domain-right .car-list .car-item .car-del {
  display: none;
  cursor: pointer;
  color: #9E9E9E;
  font-size: 0.14rem;
}
.domain-box .domain-content .domain-right .car-list .car-item .car-del .icon {
  fill: #9E9E9E;
  margin-right: 0.04rem;
}
.domain-box .domain-content .domain-right .car-list .car-item .car-del:hover {
  color: var(--color-danger);
}
.domain-box .domain-content .domain-right .car-list .car-item .car-del:hover .icon {
  fill: var(--color-danger);
  margin-right: 0.04rem;
}
.domain-box .domain-content .domain-right .car-list .car-item .car-year .el-select {
  width: 0.96rem;
  height: 0.36rem;
  border-radius: 0.04rem;
}
.domain-box .domain-content .domain-right .car-list .car-item .car-price {
  font-size: 0.14rem;
  color: var(--color-price-text);
}
.car-money {
  padding: 0 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.26rem;
  font-size: 0.16rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.9);
}
.car-money .mon-right {
  font-size: 0.14rem;
}
.car-money .mon-right p {
  margin: 0;
}
.car-money .mon-right .original-price {
  text-decoration: line-through;
  color: #999;
}
.car-money .mon-right .original-price .hide {
  visibility: hidden;
}
.car-money .money-text {
  color: var(--color-price-text);
}
.car-settle {
  margin-top: 0.2rem;
}
.car-settle .settle-btn {
  width: 100%;
  background: var(--color-primary);
  font-size: 0.16rem;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 0;
}
.price-list {
  display: flex;
  font-size: 0.14rem;
}
.price-list .price-item > div {
  width: 0.85rem;
  height: 0.45rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.price-list .price-item .price-year {
  background: #f4f6fa;
}
.price-list .price-item .price-new {
  border-bottom: 1px solid #e6e7eb;
}
.blue-a-text {
  color: var(--color-primary);
  cursor: pointer;
}
/* v-cloak：Vue 挂载成功后会移除该属性。
   本页在未登录时接口返回 401，Vue 在 created 阶段抛错导致挂载中断，
   v-if 永远不会执行 —— 未编译的 {{lang.*}} 会原样裸露在页面上。
   用 v-cloak 兜底：挂载失败则始终隐藏，挂载成功则由 v-if 接管显隐。 */
[v-cloak] {
  display: none !important;
}

/* 上传批次弹窗：自绘浮层。
   原实现用 <el-dialog>，但 elDialog 未在 Vue components 中注册，
   内部 {{lang.*}} 不参与编译，会以 "[[lang.template_text131]]" 原样裸露在
   页面文档流末尾。现改为 v-if 控制 + 纯 CSS 浮层，未打开时整块不进 DOM。 */
.up-dialog__mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 2000;
}

.up-dialog__panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: var(--bx-radius);
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, .28);
  z-index: 2001;
  padding: 22px 24px 20px;
}

.up-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.up-dialog__close {
  width: 24px;
  height: 24px;
  line-height: 22px;
  text-align: center;
  font-size: 18px;
  color: var(--bx-text-mute);
  border-radius: var(--bx-radius-sm);
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.up-dialog__close:hover {
  background: var(--bx-bg-soft);
  color: var(--bx-text);
}

.up-dialog .dia-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--bx-text);
}

.up-dialog .dia-concent {
  margin-top: 14px;
}

.up-dialog .dia-concent .up-tips {
  font-size: 13px;
  line-height: 1.65;
  color: var(--bx-text-sub);
}

.up-dialog .dia-concent .file-box {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.up-dialog .dia-concent .file-box .file-name {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius-sm);
  height: 36px;
  line-height: 34px;
  padding: 0 12px;
  background: var(--bx-bg-soft);
  font-size: 13px;
  color: var(--bx-text);
}

.up-dialog .dia-concent .file-box .file-name:focus {
  outline: none;
  border-color: var(--bx-primary-border);
  background: #fff;
}

.up-dialog .dia-concent .file-box .file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  height: 36px;
  box-sizing: border-box;
  color: var(--bx-text-sub);
  font-size: 13px;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius-sm);
  background: #fff;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.up-dialog .dia-concent .file-box .file-btn:hover {
  border-color: var(--bx-primary-border);
  color: var(--bx-primary);
  background: var(--bx-primary-soft);
}

.up-dialog .dia-foter {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.up-dialog .dia-foter .confim-btn,
.up-dialog .dia-foter .cancel-btn {
  min-width: 88px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--bx-radius-sm);
  font-size: 13px;
}

.up-dialog .dia-foter .confim-btn {
  background: var(--bx-primary);
  border-color: var(--bx-primary);
  color: #fff;
}

.up-dialog .dia-foter .confim-btn:hover {
  background: var(--bx-primary-dark);
  border-color: var(--bx-primary-dark);
}

/* 原 .el-dialog__body padding 已由 .up-dialog__panel 承担 */
.up-dialog .dia-title {
  font-size: 0.24rem;
  color: #171725;
}
.up-dialog .dia-concent {
  margin-top: 0.3rem;
}
.up-dialog .dia-concent .up-tips {
  font-size: 0.16rem;
  color: #1e2736;
}
.up-dialog .dia-concent .file-box {
  margin-top: 0.1rem;
  display: flex;
  align-items: center;
}
.up-dialog .dia-concent .file-box .file-name {
  flex: 1;
  border: 0.01rem solid #e6e7eb;
  height: 0.46rem;
  line-height: 0.46rem;
  padding: 0 0.16rem;
  background: rgba(102, 107, 128, 0.08);
  font-size: 0.15rem;
}
.up-dialog .dia-concent .file-box .file-name:focus {
  outline: none;
  border: 0.01rem solid #e6e7eb;
}
.up-dialog .dia-concent .file-box .file-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.12rem 0.28rem;
  height: 0.46rem;
  box-sizing: border-box;
  color: #4e5259;
  font-size: 0.16rem;
  border: 0.01rem solid #e6e7eb;
  margin-left: 0.1rem;
  cursor: pointer;
}
.up-dialog .dia-foter {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0.4rem;
}
.up-dialog .dia-foter .confim-btn,
.up-dialog .dia-foter .cancel-btn {
  min-width: 1.12rem;
  border: none;
  border-radius: 0.03rem 0.03rem 0.03rem 0.03rem;
  font-size: 0.16rem;
}
.up-dialog .dia-foter .confim-btn {
  background: var(--color-primary);
  color: rgba(255, 255, 255, 0.9);
}
.up-dialog .dia-foter .cancel-btn {
  margin-left: 0.12rem;
  background: #e7e7e7;
  color: #1e2736;
}
.el-popover {
  max-width: none;
}
@media screen and (max-width: 915px) {
  .goods-list-div {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 750px) {
  .goods-list-div {
    grid-template-columns: repeat(1, 1fr);
  }
  .search-box .el-select .el-input__inner {
    height: 40px !important;
    line-height: 40px;
  }
  .second-select .el-input__inner {
    height: 40px !important;
    line-height: 40px;
  }
  .search-input .el-input__inner {
    height: 40px !important;
    line-height: 40px;
  }
  .search-btn {
    height: 40px;
  }
}
/* #region SSL 证书样式 */
.ssl-box {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  min-height: 600px;
}
.ssl-box .ssl-filter {
  margin-bottom: 20px;
}
.ssl-box .ssl-filter .filter-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.ssl-box .ssl-filter .filter-item .filter-label {
  width: 80px;
  font-size: 14px;
  color: #606266;
  flex-shrink: 0;
}
.ssl-box .ssl-filter .filter-item .el-radio-group {
  flex: 1;
}
.ssl-box .ssl-filter .el-radio-button__inner {
  min-width: 1.2rem;
  padding: 0 0.1rem;
  height: 0.4rem;
  line-height: 0.4rem;
  background: #f4f6fa;
  color: rgba(0, 0, 0, 0.9);
  border-color: #e6eaed;
  box-sizing: border-box;
}
.ssl-box .ssl-filter .el-radio-button.is-active .el-radio-button__inner {
  background: rgba(0, 88, 255, 0.08);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: -1px 0 0 0 var(--color-primary);
}
.ssl-box .ssl-content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.ssl-box .ssl-content .el-table {
  border: 1px solid #EBEEF5;
  border-bottom: 0;
}
.ssl-box .ssl-content .ssl-left {
  flex: 1;
  min-width: 0;
}
.ssl-box .ssl-content .ssl-right {
  width: 320px;
  background: #f5f7fa;
  border-radius: 4px;
  position: sticky;
  top: 0.2rem;
  height: calc(100vh - 300px);
  display: flex;
  flex-direction: column;
}
.ssl-box .ssl-content .ssl-right .right-title {
  padding: 0.15rem 0.2rem;
  font-size: 0.16rem;
  font-weight: bold;
  color: #303133;
  border-bottom: 1px solid #e4e7ed;
}
.ssl-box .ssl-content .ssl-right .right-content {
  padding: 0.2rem;
  flex: 1;
  overflow-y: auto;
}
.ssl-box .ssl-content .ssl-right .right-footer {
  padding: 0.2rem;
  border-top: 1px solid #e4e7ed;
  border-radius: 0 0 4px 4px;
  position: relative;
}
.ssl-box .ssl-content .ssl-right .right-footer .config-info-link {
  position: absolute;
  top: -0.12rem;
  left: 0.2rem;
  background: #f5f7fa;
  padding: 0 0.1rem;
  font-size: 0.14rem;
  color: var(--color-primary);
  cursor: pointer;
}
.ssl-box .ssl-content .ssl-right .right-footer .config-info-link:hover {
  color: var(--color-primary);
}
.ssl-box .ssl-content .ssl-right .config-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.15rem;
}
.ssl-box .ssl-content .ssl-right .config-item .el-input-number,
.ssl-box .ssl-content .ssl-right .config-item .el-select {
  flex: 1;
}
.ssl-box .ssl-content .ssl-right .config-item:last-child {
  margin-bottom: 0;
}
.ssl-box .ssl-content .ssl-right .config-item .config-label {
  min-width: 1rem;
  font-size: 0.14rem;
  color: #606266;
  flex-shrink: 0;
}
.ssl-box .ssl-content .ssl-right .config-item .count-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ssl-box .ssl-content .ssl-right .config-item .count-box .count-num {
  min-width: 3rem;
  text-align: center;
  font-size: 0.14rem;
  color: #303133;
}
.ssl-box .ssl-content .ssl-right .config-item.promo-code-area {
  padding-top: 0.15rem;
  border-top: 1px dashed #dcdfe6;
}
.ssl-box .ssl-content .ssl-right .config-item .original-price {
  font-size: 0.14rem;
  color: #999;
  text-decoration: line-through;
  margin-right: 4px;
}
.ssl-box .ssl-content .ssl-right .config-item.price-area {
  align-items: flex-start;
}
.ssl-box .ssl-content .ssl-right .config-item.price-area .price-display {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: 1;
}
.ssl-box .ssl-content .ssl-right .config-item.price-area .price-display .discount-code-number {
  padding: 2px 3px;
  font-size: 12px;
}
.ssl-box .ssl-content .ssl-right .config-item.price-area .price-display .price-main {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.ssl-box .ssl-content .ssl-right .config-item.price-area .price-display .price-main .currency {
  font-size: 12px;
  color: var(--color-price-text);
}
.ssl-box .ssl-content .ssl-right .config-item.price-area .price-display .price-main .amount {
  font-size: 0.28rem;
  font-weight: bold;
  color: var(--color-price-text);
}
.ssl-box .ssl-content .ssl-right .config-item.price-area .price-display .price-main .discount-info {
  color: #909399;
  cursor: pointer;
  margin-left: 4px;
}
.ssl-box .ssl-content .ssl-right .config-item.price-area .price-display .price-main .discount-info .total-icon {
  font-size: 0.14rem;
  color: #909399;
}
.ssl-box .ssl-content .ssl-right .config-item.price-area .price-display .promo-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ssl-box .ssl-content .ssl-right .config-item.buy-area {
  margin-top: 0.15rem;
  margin-bottom: 0;
}
.ssl-box .ssl-content .ssl-right .config-item.buy-area .buy-btn {
  width: 100%;
}
/* #endregion */
.ssl-config-detail-popover {
  width: 2.8rem !important;
  box-sizing: border-box;
  padding: 0 0.24rem;
  color: #595959;
}
.ssl-config-detail-popover .content .tit {
  padding: 0.2rem 0 0.16rem;
  border-bottom: 1px solid #e6eaed;
}
.ssl-config-detail-popover .content .con {
  padding: 0.1rem 0;
  color: #595959;
}
.ssl-config-detail-popover .content .con .c-item {
  display: flex;
  line-height: 0.28rem;
  justify-content: space-between;
  font-size: 0.13rem;
  white-space: nowrap;
  margin: 0;
}
.ssl-config-detail-popover .content .con .c-item .l-txt {
  max-width: 2rem;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   bxcloud (百兴互联企业级云服务器选购) 专属定制高品质设计主题规范
   ========================================================================== */

:root {
  /* 【v2 商务克制】主色由干枯玫瑰 → 深海军蓝。
     注：本文件末尾覆盖层（2280+ 行的 :root）才是真正生效的色板；
     这里只是为了代码一致性同步过来，避免未来误改后回退到粉系。
     CSS 变量按层叠性，后定义覆盖前定义。 */
  --bx-primary: #1f3b8a;
  --bx-primary-hover: #15295c;
  --bx-primary-active: #0e1f47;
  --bx-primary-light: #c8d2ec;
  --bx-primary-border: #d6dff3;
  --bx-text-main: #1a1d21;
  --bx-text-sub: #475569;
  --bx-text-muted: #64748b;
  --bx-bg-card: #ffffff;
  --bx-bg-card-sub: #f4f6fa;
  --bx-border-card: #e3e6ea;
  --bx-radius-card: 12px;
  --bx-radius-sm: 6px;
  --bx-shadow-card: 0 1px 2px rgba(15, 29, 64, .04), 0 1px 3px rgba(15, 29, 64, .03);
  --bx-shadow-hover: 0 8px 24px -6px rgba(15, 29, 64, .10), 0 2px 6px rgba(15, 29, 64, .04);
}

.bx-main-card {
  background: #f4f6fa;
  padding: 24px 30px;
  border-radius: 16px;
  box-sizing: border-box;
}

/* 顶部公告栏 (百兴互联商务风格) */
.bx-announcement-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #eef2fa 0%, #ffffff 100%);
  border: 1px solid #d6dff3;
  border-left: 4px solid var(--bx-primary);
  padding: 12px 18px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(31, 59, 138, 0.03);
}

.bx-announcement-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.bx-announcement-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.bx-announcement-badge {
  background: #c0392b;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
}

.bx-announcement-title {
  font-weight: 700;
  font-size: 14px;
  color: #0e1f47;
  white-space: nowrap;
}

.bx-announcement-text {
  font-size: 13px;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bx-announcement-right {
  display: flex;
  align-items: center;
  white-space: nowrap;
  margin-left: 16px;
  flex-shrink: 0;
}

.bx-announcement-time {
  font-size: 12px;
  color: #64748b;
  background: rgba(255, 255, 255, 0.85);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid #e3e6ea;
  display: inline-flex;
  align-items: center;
}

/* 分类胶囊选择区 (产品体系 / 部署节点) */
.bx-filter-section {
  background: #ffffff;
  border: 1px solid #e3e6ea;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.bx-filter-row {
  display: flex;
  align-items: center;
  min-height: 40px;
}

.bx-filter-row:not(:last-child) {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #f1f5f9;
}

.bx-filter-label {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  width: 96px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  user-select: none;
}

.bx-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  flex: 1;
  align-items: center;
}

.bx-pill {
  padding: 6px 16px;
  border-radius: var(--bx-radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  background: #f4f6fa;
  border: 1px solid #e3e6ea;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  user-select: none;
  line-height: 1.4;
}

.bx-pill:hover {
  color: var(--bx-primary);
  border-color: var(--bx-primary-light);
  background: #eef2fa;
  transform: translateY(-1px);
}

.bx-pill.active {
  color: #ffffff;
  background: linear-gradient(135deg, #15295c 0%, #1f3b8a 100%);
  border-color: #15295c;
  box-shadow: 0 3px 10px rgba(31, 59, 138, 0.25);
  font-weight: 600;
}

.bx-pill-sub {
  padding: 5px 12px;
  font-size: 12px;
}

.bx-pill-sub.active {
  background: linear-gradient(135deg, #1f3b8a 0%, #c8d2ec 100%);
  border-color: #1f3b8a;
}

.bx-hidden-mobile-select {
  display: none !important;
}

/* 搜索栏美化 */
.search-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}

.search-input {
  width: 280px !important;
}

.search-input .el-input__inner {
  height: 38px !important;
  line-height: 38px !important;
  border-radius: 8px 0 0 8px !important;
  border: 1px solid #e1e5ea !important;
  font-size: 13px;
  transition: all 0.2s ease;
}

.search-input .el-input__inner:focus {
  border-color: var(--bx-primary) !important;
}

.search-btn {
  height: 38px !important;
  margin-left: 0 !important;
  border-radius: 0 8px 8px 0 !important;
  background: var(--bx-primary) !important;
  border: 1px solid var(--bx-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 18px !important;
  transition: all 0.2s ease;
}

.search-btn:hover {
  background: var(--bx-primary-hover) !important;
  border-color: var(--bx-primary-hover) !important;
}

/* 商品卡片 Grid 布局 (企业级整齐自适应排版) */
.bx-goods-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)) !important;
  gap: 20px !important;
}

/* 云服务器商品卡片 */
.bx-cloud-card {
  background: var(--bx-bg-card) !important;
  border: 1px solid var(--bx-border-card) !important;
  border-radius: var(--bx-radius-card) !important;
  box-shadow: var(--bx-shadow-card) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  min-height: 380px !important;
}

.bx-cloud-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--bx-primary-light) !important;
  box-shadow: var(--bx-shadow-hover) !important;
}

/* 顶部推荐/特惠角标 */
.bx-badge {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  padding: 4px 12px !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 0 0 0 10px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  z-index: 2 !important;
  letter-spacing: 0.3px;
}

/* 卡片头部：名称与副标签 */
.bx-card-header {
  padding: 18px 20px 14px 20px;
  background: linear-gradient(180deg, #f4f6fa 0%, #ffffff 100%);
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}

.bx-header-content {
  width: 100%;
}

.bx-sub-badge {
  font-size: 11px;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-weight: 500;
}

/* 标签条 (试用/会员折扣/高防) */
.bx-tag-strip {
  background: #f4f6fa !important;
  height: 32px !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.bx-tag-item {
  color: #475569 !important;
  font-size: 11px !important;
  background: #ffffff;
  border: 1px solid #e3e6ea;
  border-radius: 4px;
  padding: 1px 6px;
  display: inline-flex;
  align-items: center;
}

.bx-tag-item::after {
  display: none !important;
}

/* 规格描述区 (精细化规整，杜绝杂乱与溢出) */
.bx-specs-box {
  padding: 16px 20px !important;
  background: #ffffff !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: #475569 !important;
  flex: 1 !important;
  min-height: 140px !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  border-bottom: 1px solid #f1f5f9 !important;
  box-sizing: border-box !important;
}

.bx-specs-box::-webkit-scrollbar {
  width: 4px;
}

.bx-specs-box::-webkit-scrollbar-thumb {
  background: #e1e5ea;
  border-radius: 4px;
}

.bx-specs-box ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.bx-specs-box li {
  position: relative !important;
  padding-left: 16px !important;
  margin-bottom: 6px !important;
  color: #475569 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.bx-specs-box li::before {
  content: "•" !important;
  position: absolute !important;
  left: 3px !important;
  top: 0 !important;
  color: var(--bx-primary) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

.bx-specs-box p {
  margin: 0 0 6px 0 !important;
  font-size: 13px !important;
  color: #475569 !important;
  line-height: 1.6 !important;
}

/* 卡片底部操作区 */
.bx-card-footer {
  padding: 14px 20px !important;
  background: #f4f6fa !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

.bx-active-tags {
  margin-bottom: 8px !important;
  min-height: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bx-active-pill {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
  font-size: 11px !important;
  border-radius: 4px !important;
  padding: 2px 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bx-active-pill:hover {
  background: #f0c2ba !important;
}

.bx-stock-row {
  margin-bottom: 8px;
}

.bx-stock-badge {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}

.bx-stock-badge.in-stock {
  color: #059669;
}

.bx-stock-badge.in-stock::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

.bx-stock-badge.out-of-stock {
  color: #6c7787;
}

.bx-stock-badge.out-of-stock::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e1e5ea;
}

/* 价格行与购买按钮 */
.bx-price-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-top: 4px !important;
  padding: 0 !important;
}

.bx-price-left {
  display: flex;
  flex-direction: column;
}

.bx-main-price {
  display: flex;
  align-items: baseline;
}

.bx-currency {
  font-size: 14px;
  font-weight: 700;
  color: var(--bx-primary);
  margin-right: 2px;
}

.bx-num {
  font-size: 24px;
  font-weight: 800;
  color: var(--bx-primary);
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.bx-cycle {
  font-size: 12px;
  color: #64748b;
  margin-left: 2px;
  font-weight: 500;
}

.bx-original-price {
  font-size: 11px;
  color: #6c7787;
  text-decoration: line-through;
  margin-top: 4px;
}

.bx-action-btn {
  background: var(--bx-primary) !important;
  border-color: var(--bx-primary) !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  height: 36px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 3px 8px rgba(31, 59, 138, 0.2) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px;
}

.bx-action-btn:hover {
  background: var(--bx-primary-hover) !important;
  border-color: var(--bx-primary-hover) !important;
  box-shadow: 0 5px 12px rgba(31, 59, 138, 0.3) !important;
  transform: translateY(-1px);
}

.bx-action-btn:active {
  transform: translateY(0);
}

.bx-action-btn:disabled {
  background: #e1e5ea !important;
  border-color: #e1e5ea !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
}

/* 响应式断点优化 */
@media screen and (max-width: 1200px) {
  .bx-goods-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media screen and (max-width: 992px) {
  .bx-main-card {
    padding: 16px;
  }
  .bx-announcement-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .bx-announcement-right {
    margin-left: 0;
  }
  .bx-goods-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media screen and (max-width: 768px) {
  .bx-goods-grid {
    grid-template-columns: 1fr !important;
  }
  .bx-filter-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .search-box {
    justify-content: stretch;
  }
  .search-input {
    flex: 1;
    width: auto !important;
  }
}


/* ==========================================================================
   bxcloud 企业级商务旗舰视觉系统 (Enterprise Business Styling)
   ========================================================================== */

:root {
  --bx-corp-blue: #15295c;
  --bx-corp-navy: #1a1d21;
  --bx-corp-border: #e3e6ea;
  --bx-corp-bg: #f4f6fa;
}

body {
  /* 【v2 商务】#f1f5f9 (slate-100) → #f8fafc (slate-50) —— 更白 */
  background-color: #f8fafc !important;
}

.template {
  background-color: #f8fafc !important;
}

.el-main {
  background-color: #f8fafc !important;
  padding: 24px !important;
}

.bx-main-card {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 1. 顶部公告栏：沉稳商务，科技蓝微渐变与精致阴影 */
.bx-announcement-banner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1px solid #e3e6ea !important;
  border-left: 4px solid #15295c !important;
  padding: 14px 20px !important;
  border-radius: 8px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.bx-announcement-badge {
  background: #1f3b8a !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.bx-announcement-title {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #1a1d21 !important;
  letter-spacing: -0.2px !important;
}

.bx-announcement-text {
  font-size: 13px !important;
  color: #475569 !important;
}

.bx-announcement-time {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  background: var(--bx-bg-soft) !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  border: 1px solid #e3e6ea !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* 2. 筛选面板：干净商务灰白色阶，指示灯小圆点 */
.bx-filter-section {
  background: #ffffff !important;
  border: 1px solid #e3e6ea !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.bx-filter-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 95px !important;
}

.bx-pill {
  padding: 6px 16px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  background: #f4f6fa !important;
  border: 1px solid #e3e6ea !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bx-pill-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6c7787;
  margin-right: 6px;
  display: inline-block;
  transition: background 0.2s;
}

.bx-pill:hover {
  color: #15295c !important;
  border-color: #d6dff3 !important;
  background: #eef2fa !important;
}

.bx-pill:hover .bx-pill-indicator {
  background: #c8d2ec;
}

.bx-pill.active {
  color: #ffffff !important;
  background: #15295c !important;
  border-color: #15295c !important;
  box-shadow: 0 2px 6px rgba(31, 59, 138, 0.25) !important;
}

.bx-pill.active .bx-pill-indicator {
  background: rgba(255, 255, 255, .9);
}

.bx-pill-sub.active {
  background: #1f3b8a !important;
  border-color: #1f3b8a !important;
}

/* 3. 搜索框优化 */
.search-box {
  margin-bottom: 20px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.search-input {
  width: 260px !important;
}

.search-input .el-input__inner {
  height: 38px !important;
  line-height: 38px !important;
  border-radius: 6px 0 0 6px !important;
  border: 1px solid #e1e5ea !important;
  font-size: 13px !important;
}

.search-btn {
  height: 38px !important;
  border-radius: 0 6px 6px 0 !important;
  background: #15295c !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 18px !important;
}

/* 4. 企业级云主机卡片 (Enterprise Server Card) */
.bx-goods-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  gap: 20px !important;
}

.bx-cloud-card {
  background: #ffffff !important;
  border: 1px solid #e3e6ea !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.bx-cloud-card:hover {
  transform: translateY(-3px) !important;
  border-color: #c8d2ec !important;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08) !important;
}

/* 顶部推荐角标 */
.bx-badge {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  padding: 3px 10px !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 0 0 0 6px !important;
  letter-spacing: 0.3px !important;
  z-index: 2 !important;
}

/* 卡片头部 */
.bx-card-header {
  padding: 16px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.bx-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 !important;
  overflow: hidden !important;
}

.bx-server-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  background: #eef2fa !important;
  color: #15295c !important;
  border: 1px solid #d6dff3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.bx-header-art {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #f4f6fa !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  border: 1px solid #e3e6ea !important;
}

.bx-status-pulse {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}

.bx-status-text {
  font-size: 11px !important;
  color: #059669 !important;
  font-weight: 600 !important;
}

/* 5. 规格参数列表：企业专业技术清单 */
.bx-specs-box {
  padding: 14px 16px !important;
  background: #ffffff !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: #475569 !important;
  flex: 1 !important;
  min-height: 170px !important;
  max-height: 250px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

.bx-specs-box ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.bx-specs-box li {
  position: relative !important;
  padding-left: 14px !important;
  margin-bottom: 5px !important;
  color: #475569 !important;
}

.bx-specs-box li::before {
  content: "■" !important;
  position: absolute !important;
  left: 0 !important;
  font-size: 8px !important;
  top: 1px !important;
  color: #c8d2ec !important;
}

/* 6. 卡片底部价格与操作 */
.bx-card-footer {
  padding: 14px 16px !important;
  background: #f4f6fa !important;
}

.bx-stock-badge {
  font-size: 12px !important;
  font-weight: 500 !important;
}

.bx-stock-badge.in-stock {
  color: #059669 !important;
}

.bx-price-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
}

.bx-currency {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #15295c !important;
}

.bx-num {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #15295c !important;
  letter-spacing: -0.5px !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif !important;
}

.bx-cycle {
  font-size: 12px !important;
  color: #64748b !important;
  margin-left: 2px !important;
}

.bx-action-btn {
  background: #15295c !important;
  border-color: #15295c !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(31, 59, 138, 0.2) !important;
  transition: all 0.18s ease !important;
}

.bx-action-btn:hover {
  background: #0e1f47 !important;
  border-color: #0e1f47 !important;
  box-shadow: 0 4px 10px rgba(142, 52, 85, 0.3) !important;
}

.bx-action-btn:disabled {
  background: #e1e5ea !important;
  border-color: #e1e5ea !important;
  box-shadow: none !important;
}








/* ==========================================================================
   bxcloud · 选购大厅 1:1 还原层
   参考基准：百兴互联选购页（左栏区域选择 / 参数表格卡片）
   配色策略：中性灰打底 + 单色点缀。粉色只出现在主 CTA、选中态、价格等
             关键处，注释/分隔/装饰一律走中性色，保证企业级的克制感。
   本层置于文件末尾，优先级最高，覆盖前面所有旧版卡片样式
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
  /* 主色：深海军蓝（Dusty Navy）—— B 端基础设施 / 政企云 / SLA / 合规语境最稳。
     不沿用上一版的"干枯玫瑰"是因为该色相偏暖偏柔，放在政企云采购语境下
     会被读成"促销/活动"。蓝系直接落到"安全/可信"的语义层。 */
  --bx-primary: #1f3b8a;
  --bx-primary-dark: #15295c;
  --bx-primary-light: #c8d2ec;
  --bx-primary-soft: #eef2fa;
  --bx-primary-border: #d6dff3;
  --bx-primary-ink: #0f1d40;
  /* 衍生色：投影 / 光晕。主色变蓝后，hover/active 投影的 rgba 也跟着切 */
  --bx-primary-shadow: rgba(31, 59, 138, .22);
  --bx-primary-glow: rgba(31, 59, 138, .12);

  /* 商品标题专用：商务红。色相独立于主色蓝 —— 商品标题是最先被看到的文字，
     红在白底上识别最强，且与"价格红"同色系形成视觉关联，
     整套企业级电商的标准做法。保留不变。 */
  --bx-title: #c0392b;
  --bx-title-hover: #9c2b1f;

  /* 辅助强调：墨绿（合规 / 安全 / 库存充足 / 成功提示）。
     蓝主色 + 绿强调 = 政企云经典双色调，跟"安全合规"语义完全契合。 */
  --bx-accent: #1f6e4f;
  --bx-accent-dark: #185c41;
  --bx-accent-soft: #ecf5f1;
  --bx-accent-border: #cde6dc;
  --bx-accent-shadow: rgba(31, 110, 79, .22);

  /* 促销点缀：香槟金（活动 / 限时 / 优惠）。
     仅用于活动标签 / 促销徽标，**绝不**用作主 CTA，避免被读成"非商务"。 */
  --bx-promo: #a4791a;
  --bx-promo-dark: #876218;
  --bx-promo-soft: #fdf6e3;
  --bx-promo-border: #ecdca4;
  --bx-promo-shadow: rgba(164, 121, 26, .18);

  /* 状态色：success / warning / danger / info —— 语义色不随主色变化 */
  --bx-success: #1f6e4f;
  --bx-success-soft: #ecf5f1;
  --bx-success-border: #cde6dc;
  --bx-warning: #a4791a;
  --bx-warning-soft: #fdf6e3;
  --bx-warning-border: #ecdca4;
  --bx-danger: #c0392b;
  --bx-danger-soft: #fbeae7;
  --bx-danger-border: #f0c2ba;
  --bx-info: #1f3b8a;
  --bx-info-soft: #eef2fa;
  --bx-info-border: #d6dff3;

  /* 禁用：弱化但不消失，让用户能区分"不可点"与"已点"。
     文字 #6c7787 对白底对比度 3.3:1，刚好越过 large-text 边界，禁用文字
     本来就不要求正常阅读强度，符合无障碍标准。 */
  --bx-disabled-bg: #f1f3f6;
  --bx-disabled-border: #e1e5ea;
  --bx-disabled-text: #6c7787;

  /* 中性色阶：承担页面 90% 的面积。
     文字色全部按 WCAG AA 重测：
       #1a1d21 → 16.4:1 ✅（主文字）
       #475569 → 7.6:1  ✅（次级文字，从 #5f6672 加深一档修"浅灰看不清"）
       #64748b → 5.7:1  ✅（弱化文字，原来 #8f96a1 仅 3.5:1 不合格）
       #b8bdc4 → 3.0:1  ⚠️ 仅用于占位 / 禁用，本身允许低对比度 */
  --bx-text: #1a1d21;
  --bx-text-sub: #475569;
  --bx-text-mute: #64748b;
  --bx-text-placeholder: #b8bdc4;
  --bx-text-disabled: #6c7787;
  --bx-border: #e3e6ea;
  --bx-border-strong: #d3d8de;
  --bx-dashed: #e8eaee;
  --bx-bg-soft: #f4f6fa;
  --bx-bg-base: #ffffff;
  --bx-radius: 8px;
  --bx-radius-sm: 6px;

  /* 阴影：原来的粉系投影 rgba 整体改深蓝
     —— 投影色由环境光决定，蓝主色页面配深蓝阴影才协调。 */
  --bx-shadow-card: 0 1px 2px rgba(15, 29, 64, .04), 0 1px 3px rgba(15, 29, 64, .03);
  --bx-shadow-hover: 0 8px 24px -6px rgba(15, 29, 64, .10), 0 2px 6px rgba(15, 29, 64, .04);
  --bx-shadow-btn: 0 4px 12px rgba(31, 59, 138, .22);

  /* 字体行高：正文 1.65（原 1.5）—— 字号不变、行高加大后中文阅读密度更松，
     这是"商务感"的字面层面。 */
  --bx-line-tight: 1.35;
  --bx-line-base: 1.65;
  --bx-line-loose: 1.8;

  /* 字重：标题 600（原 700 微调）—— 700 偏营销，600 偏商务。
     正文 400 保持，emphasis 500。 */
  --bx-fw-display: 600;
  --bx-fw-title: 600;
  --bx-fw-body: 400;
  --bx-fw-emph: 500;

  /* 别名：模板里某些 .search-btn / .el-xxx 样式引用了 --color-primary，
     这是早期 element-ui 主题变量，在本主题范围内没人定义它，浏览器会
     把它当作未定义回退到 unset（视觉上是色块丢失）。
     在这里同步映射到主色，避免出现"按钮/链接变透明"的诡异现象。 */
  --color-primary: var(--bx-primary);
  --color-danger: var(--bx-danger);
  --color-success: var(--bx-success);
  --color-warning: var(--bx-warning);

  /* 价格色：独立于主色蓝。电商语境下价格必须保留商务红 —— 红=价格是
     用户多年训练形成的视觉契约，换成蓝主色会让价格"消失"。
     主色负责"行动"，红色负责"金额"。两者分工清楚。 */
  --bx-price: #c0392b;
  --bx-price-strong: #a8281a;
  --bx-price-soft: #fbeae7;
}

/* ---------- 主容器放宽 ---------- */
.bx-main-card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* 隐藏旧版公告横幅与旧筛选面板 */
.bx-announcement-banner,
.bx-filter-section {
  display: none !important;
}

/* ---------- 顶部产品类型横向选项卡 + 搜索 ---------- */
.bx-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--bx-border);
  margin-bottom: 20px;
}

.bx-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.bx-type-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 15px;
  border-radius: var(--bx-radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--bx-text-sub);
  background: #fff;
  border: 1px solid var(--bx-border);
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
  user-select: none;
}

.bx-type-tab:hover {
  color: var(--bx-primary);
  border-color: var(--bx-primary-border);
  background: var(--bx-primary-soft);
}

/* 选中态：实心主题色，不加投影（投影会让它看起来像促销按钮） */
.bx-type-tab.active {
  color: #fff;
  background: var(--bx-primary);
  border-color: var(--bx-primary);
  font-weight: 500;
}

.bx-type-tab.active svg {
  stroke: #fff;
}

/* ---------- 两栏布局 ---------- */
.bx-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.bx-layout.is-domain {
  grid-template-columns: minmax(0, 1fr);
}

.bx-main-right {
  min-width: 0;
}

/* ---------- 左栏：选择区域 ---------- */
.bx-region-panel {
  position: sticky;
  top: 16px;
  background: #fff;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius);
  overflow: hidden;
}

.bx-region-head {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bx-text);
  border-bottom: 1px solid var(--bx-border);
}

.bx-region-list {
  max-height: 560px;
  overflow-y: auto;
  padding: 8px;
}

.bx-region-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 11px;
  border-radius: var(--bx-radius-sm);
  cursor: pointer;
  transition: background .16s ease;
  border: 1px solid transparent;
}

/* 左侧竖条标记 */
.bx-region-dot {
  flex-shrink: 0;
  width: 3px;
  height: 14px;
  margin-top: 3px;
  border-radius: 2px;
  background: var(--bx-border-strong);
  transition: background .16s ease, height .16s ease;
}

.bx-region-body {
  min-width: 0;
  flex: 1;
}

/* hover：只加中性灰底，不铺粉色 */
.bx-region-item:hover {
  background: var(--bx-bg-soft);
}

.bx-region-item:hover .bx-region-dot {
  background: var(--bx-primary-light);
}

/* 选中：中性灰底 + 主题色描边，左侧 dot 变长变粉作为选中标记。
   与 hover（仅浅灰底、无边框）形成清晰区分。 */
.bx-region-item.active {
  background: #f4f5f7;
  border-color: var(--bx-primary-border);
}

.bx-region-item.active .bx-region-dot {
  height: 20px;
  background: var(--bx-primary);
}

.bx-region-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bx-text);
  line-height: 1.35;
  min-width: 0;
}

.bx-region-name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 分类名前的国旗 */
.bx-region-flag {
  flex-shrink: 0;
  width: 18px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
  background: #f3f4f6;
}

/* 选中态名字：保持中性深色，识别交给左侧竖条和边框，不染粉字 */
.bx-region-item.active .bx-region-name {
  color: var(--bx-text);
}

/* 描述文字：企业级次级信息 —— 无底、无框、无装饰线，
   仅靠字号 / 颜色 / 缩进与主名形成层级。缩进量对齐到名称文字起点。
   【降级保留】模板已改用 .bx-region-tags 标签渲染；此处仅在
   旧模板 / 第三方覆写仍输出 .bx-region-sub 时兜底，不再承担主要职责。 */
.bx-region-sub {
  display: -webkit-box;
  margin-top: 4px;
  color: var(--bx-text-mute);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .1px;
  overflow: hidden;
  word-break: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
  transition: color .16s ease;
}

.bx-region-item:hover .bx-region-sub {
  color: var(--bx-text-sub);
}

.bx-region-item.active .bx-region-sub {
  color: var(--bx-text-sub);
}

/* ---------- 二级分组描述：卡片式标签 ---------- */
/* 后台在「描述」里用英文逗号分隔多项（如 "免备案,精品云"），
   JS 的 splitDescTags() 拆成数组，每个词渲染成一张独立小卡片。
   配色由 tagTone(index) 按下标从固定 8 色板取色 —— 保证同一行内
   相邻标签不同色，且刷新后稳定不跳色。 */

.bx-region-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.bx-region-tag {
  display: inline-flex;
  align-items: center;
  /* 上下 2px：11px 字号 + 1.6 行高 = 17.6px 内容高，加上 padding 与边框刚好 22px，
     是"卡片"而非"文字"的最小可辨识厚度。再薄会退化成带底色的文字。 */
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .2px;
  white-space: nowrap;
  /* 三态由下面的 tone-* 覆盖：底色 / 描边 / 文字色 */
  color: var(--bx-text-sub);
  background: var(--bx-bg-soft);
  border: 1px solid var(--bx-border);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

/* 8 套色板：低饱和 + 浅底深字，避免糖果色破坏企业风。
   每套定义 border / bg / ink 三个变量，供上方基类消费。
   描边色刻意比底色深 2~3 档 —— 若只深 1 档，22px 高的窄卡片上
   边框会糊进底色，整块看起来像一块色斑而不是卡片。
   【v2 商务克制】主色由粉变深蓝，rose 降饱和（避免与主色撞色相），
   slate / indigo 往蓝灰靠，amber / orange 降亮度。语义不变。 */

/* 1 柔石板粉 —— 比 v1 降饱和：原 #b04a6d 是粉玫瑰，现在主色是蓝，
   rose 不需要"第一顺位"了，它变成点缀色，淡到不抢主色戏份 */
.bx-region-tag.tone-rose {
  --t-border: #d8c9d3;
  --t-bg: #f6f1f4;
  --t-ink: #84607a;
}

/* 2 蓝灰 —— 升饱和往蓝靠，与主色同色相 */
.bx-region-tag.tone-slate {
  --t-border: #c2cee0;
  --t-bg: #f3f6fa;
  --t-ink: #445d80;
}

/* 3 暖驼 —— 降亮度，从 #a5761c 金黄 → #846638 偏褐驼，避免糖果黄 */
.bx-region-tag.tone-amber {
  --t-border: #e3d4ad;
  --t-bg: #faf6ec;
  --t-ink: #846638;
}

/* 4 青碧 —— 保留 v1（蓝绿系与主色不撞，且合规/海洋语义契合）*/
.bx-region-tag.tone-teal {
  --t-border: #aed4ce;
  --t-bg: #effaf7;
  --t-ink: #2c7d76;
}

/* 5 灰紫 —— 降饱和 */
.bx-region-tag.tone-violet {
  --t-border: #cabfe6;
  --t-bg: #f6f3fb;
  --t-ink: #6a55a3;
}

/* 6 苔绿 —— 保留 v1 */
.bx-region-tag.tone-green {
  --t-border: #b8d6b3;
  --t-bg: #f1f8ef;
  --t-ink: #4a8341;
}

/* 7 陶土 —— 降亮度，从亮橙 → 深陶 */
.bx-region-tag.tone-orange {
  --t-border: #ecc9af;
  --t-bg: #fcf3eb;
  --t-ink: #a35a30;
}

/* 8 钢蓝 —— 往中性靠，避免与主色 #1f3b8a 撞色相
   （v1 的 #4257a8 偏深蓝会跟主色混淆） */
.bx-region-tag.tone-indigo {
  --t-border: #bcc6de;
  --t-bg: #f3f5fa;
  --t-ink: #5b6a92;
}

/* 上色：所有 tone-* 统一在这里消费变量，新增色板只需再写三个变量值 */
.bx-region-tag[class*="tone-"] {
  color: var(--t-ink);
  background: var(--t-bg);
  border-color: var(--t-border);
}

/* 悬停 / 选中态：整体加深一档。用 filter 而非逐个改写 8 套色，
   避免维护成本翻倍；saturate 提升可辨识度，brightness 压出对比。 */
.bx-region-item:hover .bx-region-tag {
  filter: saturate(1.35) brightness(.97);
}

.bx-region-item.active .bx-region-tag {
  filter: saturate(1.5) brightness(.94);
  border-color: var(--t-ink);
}

.bx-region-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--bx-border);
  background: var(--bx-bg-soft);
  font-size: 11.5px;
  color: var(--bx-text-mute);
  line-height: 1.6;
}

.bx-region-foot a {
  color: var(--bx-primary);
  text-decoration: none;
}

.bx-region-foot a:hover {
  text-decoration: underline;
}

/* ---------- 区域横幅 ----------
   配色克制：左侧品牌色起，向右过渡到深海军蓝。
   蓝主色下整条横幅同色系推进（左品牌蓝 → 中过渡 → 右深海军），
   右侧靠"深海军+低饱和"压住，避免整条横幅"亮成一片"。
   云朵 SVG 元素色透明度 .10 不变，但这里用蓝黑色让深色底上仍可辨。 */
.bx-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 104px;
  padding: 20px 26px;
  border-radius: var(--bx-radius);
  background: linear-gradient(100deg, #1f3b8a 0%, #2944a0 26%, #1a3273 68%, #0f2347 100%);
  overflow: hidden;
  margin-bottom: 18px;
}

/* 左侧柔光：只在品牌色区域做一层纵深 */
.bx-banner::before {
  content: "";
  position: absolute;
  left: -90px;
  top: -120px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

.bx-banner-body {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.bx-banner-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  letter-spacing: .2px;
  word-break: break-word;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.bx-banner-flag {
  flex-shrink: 0;
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  background: rgba(255, 255, 255, .2);
}

.bx-banner-desc {
  margin-top: 8px;
  font-size: 13px;
  /* 【v2 商务】1.6 → 1.7 */
  line-height: 1.7;
  color: rgba(255, 255, 255, .92);
  max-width: 720px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bx-banner-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.bx-banner-tag {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .34);
  white-space: nowrap;
}

/* 描述标签：横幅是深色渐变底（主色 → 深灰），左栏那套浅底深字的 8 色板
   在这里会糊成一片 —— 深色同时吃掉浅底和深字，肉眼只剩一团灰。
   所以横幅内改用「实心版」色板：中高饱和实心底 + 白字。
   色相与左栏 tagTone() 一一对应，两处同一标签仍是同一色系。 */
.bx-banner-tag.is-desc {
  color: #fff;
  /* 兜底：万一 tone-* 类没加上，也保证是可读的深色卡片 */
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .38);
  padding-left: 20px;
  position: relative;
  backdrop-filter: blur(2px);
  /* 深色底上的卡片必须靠投影"浮"起来，否则会陷进背景里 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

/* 卡片左侧圆点：取卡片自身底色的高亮版，作为色系锚点 */
.bx-banner-tag.is-desc::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  /* 默认走主色亮调；有 tone-* 时由各色板覆盖 --b-dot */
  background: var(--b-dot, rgba(255, 255, 255, .75));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .16);
}

/* ---------- 横幅实心色板 ---------- */
/* 8 套，色相与左栏 tone-* 对齐。
   --b-bg 实心底色 / --b-bd 描边（比底色亮一档，勾出轮廓） / --b-dot 圆点
   【v2 商务克制】主色变深蓝后：rose 拉深成"酱玫红"（与蓝形成色相对比）；
   indigo 不能用 #2c3d7e —— 那跟主色 #1f3b8a 太接近，会读成一类色，
   改成偏紫蓝 #4a5680 拉开；amber / teal / violet / green / orange 全部
   沿用 v1 的对比度已验证色值。 */

/* 1 酱玫红：横幅左侧渐变现在是 #1f3b8a 蓝系，rose 用偏品红 #8e3a5f
   形成色相对比（蓝/红互补）。第一个标签依然要避免跟背景融 —— 但这里
   背景是蓝，rose 是玫红，色相差大，不需要刻意偏离。 */
.bx-banner-tag.is-desc.tone-rose {
  --b-bg: #8e3a5f;
  --b-bd: rgba(255, 255, 255, .46);
  --b-dot: #ffd6e4;
}

/* 2 深蓝灰 */
.bx-banner-tag.is-desc.tone-slate {
  --b-bg: #3a4a66;
  --b-bd: rgba(255, 255, 255, .40);
  --b-dot: #c3d2e8;
}

/* 3 琥珀。初版 #a06a12 对白字只有 4.6:1，刚过线。
   压深到 #8a5a0c 提到 ~6:1，小字号下明显更好认。 */
.bx-banner-tag.is-desc.tone-amber {
  --b-bg: #8a5a0c;
  --b-bd: rgba(255, 255, 255, .42);
  --b-dot: #ffdf9e;
}

.bx-banner-tag.is-desc.tone-teal {
  --b-bg: #16736a;
  --b-bd: rgba(255, 255, 255, .40);
  --b-dot: #9fe6db;
}

.bx-banner-tag.is-desc.tone-violet {
  --b-bg: #574289;
  --b-bd: rgba(255, 255, 255, .42);
  --b-dot: #d5c2ff;
}

.bx-banner-tag.is-desc.tone-green {
  --b-bg: #2f6430;
  --b-bd: rgba(255, 255, 255, .40);
  --b-dot: #b6e8ab;
}

.bx-banner-tag.is-desc.tone-orange {
  --b-bg: #9a4a25;
  --b-bd: rgba(255, 255, 255, .42);
  --b-dot: #ffc9a3;
}

/* 8 蓝紫：必须跟主色 #1f3b8a 区分。原 v1 #2c3d7e 色相/明度都接近主色，
   改成 #4a5680 偏紫蓝的钢蓝，拉开一个色阶，避免融进渐变背景。 */
.bx-banner-tag.is-desc.tone-indigo {
  --b-bg: #4a5680;
  --b-bd: rgba(255, 255, 255, .42);
  --b-dot: #c0cde8;
}

/* 上色：统一消费变量，新增色板只需再写三个值 */
.bx-banner-tag.is-desc[class*="tone-"] {
  color: #fff;
  background: var(--b-bg);
  border-color: var(--b-bd);
  backdrop-filter: none;
}

.bx-banner-tag.is-desc:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}

.bx-banner-cloud {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  /* 深蓝底上的云朵 —— 用更亮的蓝白，否则 0.10 的白在深蓝上几乎看不见 */
  color: rgba(180, 200, 240, .14);
  pointer-events: none;
  z-index: 2;
}

/* ---------- 搜索框 ---------- */
.bx-search-inline {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.bx-search-inline .search-input {
  width: 260px;
}

.bx-search-inline .search-input .el-input__inner {
  height: 38px !important;
  line-height: 38px !important;
  border-radius: var(--bx-radius-sm);
  border-color: var(--bx-border);
}

.bx-search-inline .search-btn {
  margin-left: 0;
  height: 38px;
  width: 76px;
  padding: 0;
  border-radius: var(--bx-radius-sm);
  background: var(--bx-primary);
  border-color: var(--bx-primary);
  font-size: 14px;
}

.bx-search-inline .search-btn:hover {
  background: var(--bx-primary-dark);
  border-color: var(--bx-primary-dark);
}

/* 移动端专用下拉筛选：桌面端隐藏（需盖过基础 .search-box{display:flex}） */
.main-content-box .search-box.bx-mobile-only,
.bx-mobile-only {
  display: none !important;
}

.bx-desktop-only {
  display: flex;
}

/* ---------- 卡片网格 ---------- */
.shopping-box {
  margin-top: 0 !important;
}

.goods-list-div {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  /* 行高自适应内容：参数多的卡片自然更高。
     不强制 1fr 等高，避免"内容少的卡片中间出现大片空白"。
     价格条靠 border-top 收口，即使高度不齐观感也成立。 */
  grid-auto-rows: auto !important;
  gap: 14px !important;
  width: 100% !important;
  align-items: start !important;
}

/* ---------- 卡片本体 ---------- */
.shopping-item {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  padding: 0 0 18px !important;
  background: #fff !important;
  border: 1px solid var(--bx-border) !important;
  border-radius: var(--bx-radius) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: box-shadow .2s ease, transform .2s ease !important;
}

.shopping-item:hover {
  /* 【v2 商务】hover 阴影改深蓝主色系，与新主语境一致 */
  box-shadow: 0 6px 20px rgba(15, 29, 64, .08) !important;
  transform: translateY(-1px);
  border-color: var(--bx-primary-border);
}

/* 推荐角标 */
.shopping-item .client-box {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #fff !important;
  border-radius: 0 0 0 var(--bx-radius) !important;
  z-index: 3;
}

/* ---------- 卡片标题 ---------- */
/* 标题区：中性浅灰底 + 左侧商务红竖条 */
.bx-card-title-row {
  position: relative;
  padding: 12px 16px 12px 20px;
  background: var(--bx-bg-soft);
  border-bottom: 1px solid var(--bx-border);
}

/* 左侧 4px 竖条：与标题文字同色，作为标题的视觉起点 */
.bx-card-title-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  background: var(--bx-title);
  border-radius: 0 2px 2px 0;
}

/* 有推荐角标时，标题区右侧留出角标宽度 */
.shopping-item:has(.client-box) .bx-card-title-row {
  padding-right: 68px;
}

/* 标题文字：商务红 + 加粗，作为卡片的第一视觉焦点
   限 3 行：卡片收窄后 2 行放不下长商品名，3 行可在不增高太多的情况下减少截断
   【v2 商务】font-weight 700 → 600 —— 700 偏营销，600 偏商务；
            行高 1.48 → 1.55（更松） */
.bx-card-title-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: var(--bx-fw-title);
  line-height: 1.55;
  color: var(--bx-title);
  letter-spacing: .1px;
  min-height: 42px;
  word-break: break-word;
  transition: color .18s ease;
}

.shopping-item:hover .bx-card-title-text {
  color: var(--bx-title-hover);
}

/* ---------- 规格参数表 ---------- */
/* flex:1 让参数区吃掉剩余高度，价格区因此稳定贴底 —— 解决等高卡片内部留白 */
.bx-spec-table {
  padding: 0 16px;
  margin-top: 14px;
  flex: 1;
}

.bx-spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--bx-dashed);
  font-size: 13px;
  /* 【v2 商务】1.5 → 1.65，更松 */
  line-height: 1.65;
}

.bx-spec-row:last-child {
  border-bottom: none;
}

.bx-spec-label {
  flex-shrink: 0;
  color: var(--bx-text-mute);
  white-space: nowrap;
}

.bx-spec-value {
  flex: 1;
  text-align: right;
  color: var(--bx-text);
  font-weight: 500;
  word-break: break-word;
}

/* 后台自定义 HTML 介绍：尊重原排版，同时约束在卡片内不溢出 */
.bx-spec-raw {
  padding: 0 16px;
  margin-top: 12px;
  flex: 1;
  font-size: 13px;
  line-height: 1.7;
  color: var(--bx-text-sub);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.bx-spec-raw img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.bx-spec-raw p {
  margin: 0 0 6px;
}

.bx-spec-raw p:last-child {
  margin-bottom: 0;
}

.bx-spec-raw ul,
.bx-spec-raw ol {
  margin: 6px 0;
  padding-left: 18px;
}

.bx-spec-raw li {
  margin-bottom: 3px;
}

.bx-spec-raw table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.bx-spec-raw th,
.bx-spec-raw td {
  padding: 5px 6px;
  border: 1px solid var(--bx-border);
  text-align: left;
}

.bx-spec-raw h1,
.bx-spec-raw h2,
.bx-spec-raw h3,
.bx-spec-raw h4 {
  margin: 8px 0 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bx-text);
}

.bx-spec-raw a {
  color: var(--bx-primary);
}

/* 后台商品介绍是 v-html 原样注入的完整 HTML，作者会用内联 style 做强调
   （如 <span style="color: red;">说明：...</span>）。
   这些是运营内容，必须原样呈现 —— 不要用 [style*="color"]{color:inherit} 之类的
   规则去"收敛色板"，那会直接吃掉用户后台写的格式。
   仅补强默认排版（下面 strong/b 的规则只在后台未指定颜色时生效）。 */

/* 后台未指定颜色时，加粗默认走正文色而非浏览器默认的纯黑 */
.bx-spec-raw strong:not([style]),
.bx-spec-raw b:not([style]) {
  color: var(--bx-text);
  font-weight: 600;
}

/* 介绍区完整展示（2026-10-24 改）：
   原来 max-height:260px + overflow-y:auto 会让长介绍出现内部滚动条，
   用户要求"显示完全、不要下滑"，故取消高度上限。 */
.bx-spec-raw,
.bx-spec-table {
  max-height: none;
  overflow-y: visible;
  overflow: visible;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ---------- 标签条 ---------- */
.shopping-item .goods-tag {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 0 16px !important;
  margin-top: 12px !important;
}

.shopping-item .goods-tag .tag-item {
  padding: 2px 8px !important;
  font-size: 11.5px !important;
  line-height: 1.6 !important;
  border-radius: 4px !important;
  color: var(--bx-primary) !important;
  background: var(--bx-primary-soft) !important;
  border: 1px solid var(--bx-primary-border) !important;
}

/* 活动标签 */
.shopping-item .goods-active {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 0 16px !important;
  margin-top: 8px !important;
  min-height: 0 !important;
}

.shopping-item .goods-active:empty {
  display: none !important;
}

.shopping-item .goods-active .active-name {
  padding: 2px 8px !important;
  font-size: 11.5px !important;
  line-height: 1.6 !important;
  border-radius: 4px !important;
  /* 【v2 商务】活动标签切到克制的香槟金系（--bx-promo），
     替代原 Tailwind 风的 #a4791a/#fdf6e3/#ecdca4（糖果橙） */
  color: var(--bx-promo-dark) !important;
  background: var(--bx-promo-soft) !important;
  border: 1px solid var(--bx-promo-border) !important;
  cursor: pointer;
  transition: filter .15s ease;
}

.shopping-item .goods-active .active-name:hover {
  filter: saturate(1.2) brightness(.96);
}

/* 把内容区推到底部，保证卡片等高时价格行对齐 */
.shopping-item .goods-content,
.shopping-item .price-box {
  margin-top: auto !important;
}

/* ---------- 价格行 ---------- */
/* 价格区固定在卡片底部，上方加一道分隔线：
   当卡片没有参数内容时，中间留白落在分隔线之上，视觉上成为"内容区留白"，
   而不是像布局塌陷。这是企业级卡片的常见结构。 */
.shopping-item .price-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 0 16px !important;
  padding-top: 14px !important;
  margin-top: auto !important;
  border-top: 1px solid var(--bx-border);
  padding-bottom: 0 !important;
}

/* 覆盖旧版价格块的所有强制样式 */
.shopping-item .price-box .price-box-left,
.shopping-item .bx-price-row .bx-price-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* 库存徽标 */
.bx-stock-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  flex-shrink: 0;
  margin-bottom: 5px;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 11.5px;
  line-height: 1.7;
  font-weight: 500;
}

/* 库存徽标 */
/* 【v2 商务】切到设计令牌。in 用墨绿（与 success 同系），out 用弱化中性灰（与 disabled 同系） */
.bx-stock-pill.is-in {
  color: var(--bx-success);
  background: var(--bx-success-soft);
  border: 1px solid var(--bx-success-border);
}

.bx-stock-pill.is-out {
  color: var(--bx-text-disabled);
  background: var(--bx-disabled-bg);
  border: 1px solid var(--bx-disabled-border);
}

.bx-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

/* 价格块禁止内部断行；空间不足时整块换行，而不是把数字拆碎 */
/* 【v2 商务】价格从主色蓝 → 商务红 --bx-price。理由见 :root 注释。 */
.shopping-item .price-box .item-price {
  display: flex !important;
  align-items: baseline !important;
  gap: 0 !important;
  color: var(--bx-price) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

.shopping-item .price-box .item-price .item-price-prefix {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--bx-price) !important;
  margin-right: 1px;
}

.shopping-item .price-box .item-price .bx-price-num {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--bx-price) !important;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.shopping-item .price-box .item-price .item-price-cycle {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--bx-price) !important;
  margin-left: 1px;
}

.bx-price-suffix {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--bx-text-mute) !important;
  margin-left: 4px;
}

.shopping-item .price-box .original-price {
  font-size: 12px !important;
  color: var(--bx-text-mute) !important;
  text-decoration: line-through !important;
  line-height: 1.4 !important;
}

.shopping-item .price-box .original-price .item-price-prefix {
  font-size: 12px !important;
  color: var(--bx-text-mute) !important;
}

/* ---------- 购买按钮 ---------- */
.shopping-item .price-box .buy-btn,
.shopping-item .buy-btn {
  flex-shrink: 0 !important;
  width: 100% !important;
  height: 38px !important;
  min-width: 0 !important;
  padding: 0 16px !important;
  border: none !important;
  border-radius: var(--bx-radius-sm) !important;
  background: var(--bx-primary) !important;
  border-color: var(--bx-primary) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background .18s ease, box-shadow .18s ease !important;
}

.shopping-item .buy-btn i {
  margin-right: 5px;
  font-size: 15px;
}

.shopping-item .buy-btn:hover:not(.is-disabled),
.shopping-item .price-box .buy-btn:hover:not(.is-disabled) {
  background: var(--bx-primary-dark) !important;
  border-color: var(--bx-primary-dark) !important;
  box-shadow: 0 4px 12px var(--bx-primary-shadow) !important;
}

/* 禁用按钮 —— 走设计令牌 */
.shopping-item .buy-btn.is-disabled,
.shopping-item .price-box .buy-btn.is-disabled {
  background: var(--bx-disabled-bg) !important;
  border-color: var(--bx-disabled-border) !important;
  color: var(--bx-text-disabled) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.shopping-item .buy-btn.is-disabled:hover,
.shopping-item .price-box .buy-btn.is-disabled:hover {
  background: var(--bx-disabled-bg) !important;
  border-color: var(--bx-disabled-border) !important;
  color: var(--bx-text-disabled) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ---------- 底部说明条 ---------- */
.cart-des {
  margin-top: 20px;
  padding: 14px 18px;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius);
  background: var(--bx-bg-soft);
  font-size: 13px;
  /* 【v2 商务】1.7 → 1.8，更松 */
  line-height: 1.8;
  color: var(--bx-text-sub);
}

/* ---------- 空状态 ---------- */
.no-goods {
  padding: 60px 0;
}

/* ---------- 响应式 ---------- */

/* 中等桌面：1366 是最常见的笔记本宽度，此时内容区约 950px，
   4 列会把卡片压到 195px —— 标题几乎每行只放 8 个字，阅读体验很差。
   所以断点提到 1440，1440 及以下降 3 列（卡片回到 ~300px，舒适区）。 */
@media screen and (max-width: 1440px) {
  .goods-list-div {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* 小桌面：1180 以下 3 列会让卡片宽度跌到 ~240px，标题严重换行 */
@media screen and (max-width: 1180px) {
  .goods-list-div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 平板：内容区进一步收窄，同时把左栏压到 190px 给卡片让位 */
@media screen and (max-width: 1024px) {
  .goods-list-div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .bx-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }
}

@media screen and (max-width: 915px) {
  .bx-layout,
  .bx-layout.is-domain {
    grid-template-columns: minmax(0, 1fr);
  }

  .bx-region-panel {
    position: static;
    max-height: 300px;
  }

  .bx-region-list {
    max-height: 240px;
  }

  .bx-desktop-only {
    display: none !important;
  }

  .bx-search-inline {
    display: none !important;
  }

  .bx-topbar {
    flex-wrap: wrap;
  }

  .bx-mobile-only,
  .main-content-box .search-box.bx-mobile-only {
    display: flex !important;
  }
}

@media screen and (max-width: 750px) {
  .goods-list-div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .bx-banner {
    padding: 18px 18px;
    min-height: 0;
  }

  .bx-banner-title {
    font-size: 18px;
  }

  .bx-banner-cloud {
    right: -20px;
    opacity: .6;
  }

  .bx-type-tabs {
    gap: 8px;
  }

  .bx-type-tab {
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
  }

  .shopping-item .price-box {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .shopping-item .price-box .buy-btn {
    width: 100% !important;
  }

  .bx-mobile-only {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }

  .bx-mobile-only .el-select,
  .bx-mobile-only .search-input {
    width: 100% !important;
  }

  .bx-mobile-only .second-select {
    margin: 0 !important;
  }
}