/* ============================================================
   智简魔方 V10 购物车主题 · 下单配置页（goods）  v20261026
   设计语言：腾讯云风格 · 简约浅蓝（与 settlement.css 同一套规范）
   规范：主色 #0052d9 / 价格红 #f0142f / 卡片 12px 圆角 /
        按钮实心无渐变 / 本文件为唯一视觉来源，禁止再叠加补丁
   注意：PC 端尺寸用 rem（html font-size 由系统按视口设置），
        移动端断点(<=768px)内用 px 精确控制
   ============================================================ */

:root {
  --cz-primary: #3d7bff;
  --cz-primary-hover: #2b6de5;
  --cz-primary-light: #ecf2fe;
  --cz-bg: #f4f6fa;
  --cz-card: #ffffff;
  --cz-text: #232a3d;
  --cz-text-2: #5c6780;
  --cz-text-3: #939cad;
  --cz-border: #e5e9f2;
  --cz-price: #f0142f;
  --cz-danger: #e54545;
  --cz-warning: #ff7d00;
  --cz-success: #16b779;
  --cz-radius: 12px;
  --cz-radius-s: 8px;
  --cz-shadow: 0 1px 4px rgba(15, 34, 87, 0.06);
  --cz-shadow-md: 0 4px 16px rgba(15, 34, 87, 0.08);
}

/* ============ 页面容器 ============ */
/* 主内容区铺浅灰底，让白色配置卡片浮起（仅本页生效） */
/* 修复：shell-redesign 的 .el-main padding-top:76px 与 element-comment 的
   margin-top:calc(40px+0.24rem) 是为会员中心页设计的；购物车页 body 顶部
   已有自身留白，两段叠加会把内容整体下推约 134px，这里统一收回 */
.el-main {
  background: var(--cz-bg);
  /* 24px：与悬浮顶栏(12+56)保持约 50px 间距；body 顶部另有约 1.45rem 的注入占位 */
  padding-top: 84px !important;
  margin-top: 0 !important;
}
.g-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 14.6rem;
  margin: 0 auto;
  padding-bottom: 1.2rem;
  font-size: 0.14rem;
  line-height: 1.5;
}

/* ============ 页面头部 ============ */
.g-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem;
  margin-bottom: 0.18rem;
}
.g-title {
  margin: 0;
  font-size: 0.24rem;
  font-weight: 600;
  color: var(--cz-text);
  letter-spacing: 0.005rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.g-head__right {
  flex-shrink: 0;
}

/* 切换商品按钮（白底描边次按钮，与系统主按钮区分） */
.g-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.06rem;
  height: 0.4rem;
  padding: 0 0.16rem;
  border-radius: var(--cz-radius-s);
  background: var(--cz-card);
  border: 1px solid var(--cz-border);
  color: var(--cz-text-2);
  font-size: 0.13rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  user-select: none;
}
.g-switch-btn:hover {
  color: var(--cz-primary);
  border-color: var(--cz-primary);
  background: var(--cz-primary-light);
}
.g-switch-btn .el-icon--right {
  font-size: 0.12rem;
}

/* 切换商品弹层 */
.goods-change-box {
  max-width: 100%;
}
.goods-change-box .goods-item-box {
  max-height: 500px;
  overflow-y: auto;
  padding: 0.16rem;
}
.goods-change-box .goods-item-box .goods-group-item {
  margin-bottom: 0.2rem;
}
.goods-change-box .goods-item-box .goods-group-item .goods-group-name {
  font-weight: 600;
  font-size: 0.14rem;
  color: var(--cz-text);
  margin-bottom: 0.1rem;
}
.goods-change-box .goods-item-box .goods-group-item .goods-group-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 0.1rem;
  row-gap: 0.08rem;
}
.goods-change-box .goods-item-box .goods-group-item .goods-group-info .option-name {
  cursor: pointer;
  font-size: 0.13rem;
  color: var(--cz-text-2);
  padding: 0.07rem 0.1rem;
  border-radius: 6px;
  background: #f5f7fb;
  transition: all 0.15s ease;
}
.goods-change-box .goods-item-box .goods-group-item .goods-group-info .option-name:hover {
  color: var(--cz-primary);
  background: var(--cz-primary-light);
}
.goods-change-box .goods-item-box .el-input__inner {
  border-radius: var(--cz-radius-s);
  border-color: var(--cz-border);
}

/* ============ 配置内容容器 ============ */
.g-card {
  position: relative;
  box-sizing: border-box;
  background: var(--cz-card);
  border: 1px solid var(--cz-border);
  border-radius: var(--cz-radius);
  box-shadow: var(--cz-shadow);
  /* PC 端留白放大一档（内 padding 32/40px 节奏），移动端媒体查询会覆盖回紧凑值 */
  padding: 0.34rem 0.4rem;
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}
/* 大配置卡不做位移，仅悬停时阴影微调（仅 PC 指针设备） */
@media (hover: hover) {
  .g-card:hover {
    box-shadow: var(--cz-shadow-md);
  }
}
.config-box .content {
  min-height: 3rem;
  font-size: 0.14rem;
  color: var(--cz-text-2);
  line-height: 1.7;
}

/* ============ 注入内容通用兜底 ============ */
.config-box .content h1,
.config-box .content h2,
.config-box .content h3,
.config-box .content h4 {
  color: var(--cz-text);
  font-weight: 600;
  line-height: 1.5;
}
.config-box .content a {
  color: var(--cz-primary);
  text-decoration: none;
}
.config-box .content img {
  max-width: 100%;
}
.config-box .content table {
  border-collapse: collapse;
}
.config-box .content input[type="text"],
.config-box .content input[type="number"],
.config-box .content input[type="password"],
.config-box .content select,
.config-box .content textarea {
  border: 1px solid var(--cz-border);
  border-radius: 6px;
  padding: 0.06rem 0.1rem;
  font-size: 0.13rem;
  color: var(--cz-text);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}
.config-box .content input:focus,
.config-box .content select:focus,
.config-box .content textarea:focus {
  border-color: var(--cz-primary);
}

/* ============ 通用订购表单结构（common-config） ============ */
.common-config .pro-tit {
  font-size: 0.2rem;
  font-weight: 600;
  color: var(--cz-text);
  margin-bottom: 0.18rem;
}
.common-config .config-tit {
  display: flex;
  align-items: center;
  gap: 0.08rem;
  font-size: 0.15rem;
  font-weight: 600;
  color: var(--cz-text);
  /* 分组之间留白放大（32px 上间距节奏） */
  margin: 0.32rem 0 0.16rem;
}
.common-config .config-tit::before {
  content: "";
  width: 0.03rem;
  height: 0.14rem;
  border-radius: 2px;
  background: var(--cz-primary);
}
.common-config .com-tit {
  font-size: 0.15rem;
  font-weight: 600;
  color: var(--cz-text);
}

/* 周期选择（腾讯云风格：描边胶囊，选中浅蓝底蓝字） */
.common-config .cycle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem;
}
.common-config .cycle .item {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  text-align: center;
  padding: 0.09rem 0.2rem;
  border: 1px solid var(--cz-border);
  border-radius: var(--cz-radius-s);
  background: #fff;
  font-size: 0.14rem;
  line-height: 1.3;
  color: var(--cz-text-2);
  cursor: pointer;
  transition: all 0.2s ease;
}
.common-config .cycle .item:hover {
  border-color: var(--cz-primary);
  color: var(--cz-primary);
}
.common-config .com-active {
  border-color: var(--cz-primary) !important;
  background: var(--cz-primary-light) !important;
  color: var(--cz-primary) !important;
  font-weight: 600;
}

/* 选项按钮（同周期选择规格） */
.common-config .click-select {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem;
}
.common-config .click-select .item {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.09rem 0.2rem;
  border: 1px solid var(--cz-border);
  border-radius: var(--cz-radius-s);
  background: #fff;
  font-size: 0.14rem;
  line-height: 1.3;
  color: var(--cz-text-2);
  cursor: pointer;
  transition: all 0.2s ease;
}
.common-config .click-select .item img {
  max-height: 0.22rem;
  width: auto;
  margin-right: 0.08rem;
  vertical-align: middle;
}
.common-config .click-select .item .el-icon-check {
  margin-left: 0.06rem;
  font-size: 0.12rem;
  flex-shrink: 0;
}
.common-config .click-select .item:hover {
  border-color: var(--cz-primary);
  color: var(--cz-primary);
}
.common-config .click-select .com-active {
  border-color: var(--cz-primary) !important;
  background: var(--cz-primary-light) !important;
  color: var(--cz-primary) !important;
  font-weight: 600;
}
.common-config .click-select .com-active::after {
  display: none;
}

/* 配置项说明 */
.common-config .config-item .des {
  font-size: 0.13rem;
  color: var(--cz-text-3);
}

/* 左右布局 */
.common-config .common-box {
  display: flex;
  justify-content: space-between;
  gap: 0.3rem;
  align-items: flex-start;
}
.common-config .l-config {
  flex: 1;
  min-width: 0;
}
.common-config .order-right {
  width: 3.6rem;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0.22rem;
  border: 1px solid var(--cz-border);
  border-radius: var(--cz-radius);
  background: var(--cz-card);
  box-shadow: var(--cz-shadow);
  position: sticky;
  top: 0.2rem;
}
/* 小卡片悬停：上浮 + 阴影加深 + 边框转蓝（仅 PC 指针设备生效） */
@media (hover: hover) {
  .common-config .order-right {
    transition: transform 0.25s ease, box-shadow 0.25s ease,
      border-color 0.25s ease;
  }
  .common-config .order-right:hover {
    transform: translateY(-2px);
    box-shadow: var(--cz-shadow-md);
    border-color: #c9d7f2;
  }
}
.common-config .order-right .right-title {
  font-size: 0.15rem;
  font-weight: 600;
  color: var(--cz-text);
  margin-bottom: 0.14rem;
}
.common-config .order-right .info .des {
  font-size: 0.13rem;
  color: var(--cz-text-3);
  margin-bottom: 0.06rem;
}
.common-config .order-right .f-btn {
  margin-top: 0.18rem;
}
.common-config .order-right .f-btn .el-button {
  width: 100%;
  border: none;
  border-radius: var(--cz-radius-s);
  height: 0.44rem;
  line-height: 0.44rem;
  padding: 0;
  background: var(--cz-primary) !important;
  color: #fff !important;
  font-size: 0.15rem;
  font-weight: 600;
  transition: background 0.2s ease;
}
.common-config .order-right .f-btn .el-button:hover {
  background: var(--cz-primary-hover) !important;
}

/* el-radio-button 类选项（与 click-select 同规格） */
.config-box .content .el-radio-button__inner,
.config-box .content .flow-bw {
  border: 1px solid var(--cz-border) !important;
  border-radius: var(--cz-radius-s) !important;
  margin: 0 0.08rem 0.08rem 0 !important;
  padding: 0.09rem 0.2rem !important;
  background: #fff !important;
  color: var(--cz-text-2) !important;
  font-size: 0.14rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: all 0.2s ease;
}
.config-box .content .el-radio-button__inner:hover,
.config-box .content .flow-bw:hover {
  color: var(--cz-primary) !important;
  border-color: var(--cz-primary) !important;
}
.config-box .content .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background: var(--cz-primary-light) !important;
  border-color: var(--cz-primary) !important;
  color: var(--cz-primary) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* ============ 底部订购栏（f-order） ============ */
.f-order {
  box-sizing: border-box;
  position: fixed;
  /* !important：插件样式会覆盖 left:0 导致底栏左端被侧边栏遮挡 */
  left: 190px !important;
  right: 0;
  bottom: 0;
  /* 低于侧边栏（.el-aside z-index:10），避免底栏压住左侧菜单 */
  z-index: 9;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--cz-border);
  box-shadow: 0 -4px 16px rgba(15, 34, 87, 0.06);
}
/* 后端渲染的底部订购栏内嵌了一层 class="el-main" 容器。
   必须清除系统 el-main 的默认 padding/overflow/flex 影响：
   否则移动端页面级 .el-main{padding-top:1.66rem} 会命中它，
   导致底部购买卡片顶部出现一大块空白 */
.f-order .el-main {
  padding: 0 !important;
  overflow: visible !important;
  flex: none !important;
  display: block !important;
  width: 100% !important;
}
.f-order .main-card {
  max-width: 14.6rem;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0.15rem 0.34rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem;
  flex-wrap: wrap;
}
.f-order .mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  flex: 1;
  min-width: 4rem;
}
.f-order .l-empty {
  width: 1.6rem;
}
/* 当前配置 / 配置费用：下划线文字链接 → 浅灰 chip 按钮 */
.f-order .mid a.link {
  display: inline-flex;
  align-items: center;
  height: 0.32rem;
  padding: 0 0.12rem;
  border: 1px solid var(--cz-border);
  border-radius: var(--cz-radius-s);
  background: #f7f9fc;
  color: var(--cz-text-2) !important;
  font-size: 0.13rem;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.f-order .mid a.link:hover {
  color: var(--cz-primary) !important;
  border-color: var(--cz-primary);
  background: var(--cz-primary-light);
}
.f-order .mid .line-empty {
  display: none;
}
.f-order .cur-content .c-item,
.f-order .free-content .c-item {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  line-height: 2;
  font-size: 0.13rem;
  color: var(--cz-text-2);
}
.f-order .cur-content .c-item .l-txt,
.f-order .free-content .c-item .l-txt {
  color: var(--cz-text);
  font-weight: 600;
}
.f-order .free-content {
  width: 60%;
}
.f-order .bot-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.06rem;
}
.f-order .bot-price .new {
  font-size: 0.22rem;
  font-weight: 700;
  color: var(--cz-price);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}
.f-order .bot-price .new span {
  font-size: 0.22rem;
}
.f-order .bot-price .old {
  /* 按钮行：优惠码 + 代金券同行排列，本身不加删除线 */
  display: flex;
  align-items: center;
  gap: 0.1rem;
  text-decoration: none;
  color: var(--cz-text-3);
  font-size: 0.13rem;
}
.f-order .bot-price .old .show {
  text-decoration: line-through;
}
.f-order .right {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  flex-shrink: 0;
}
.f-order .right .add-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.06rem;
  height: 0.44rem;
  line-height: 1;
  padding: 0 0.18rem;
  border: 1px solid var(--cz-primary);
  border-radius: var(--cz-radius-s);
  background: #fff;
  color: var(--cz-primary);
  font-size: 0.14rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.f-order .right .add-cart:hover {
  background: var(--cz-primary-light);
}
.f-order .right .buy {
  height: 0.44rem;
  line-height: 0.44rem;
  padding: 0 0.36rem;
  border: none;
  border-radius: var(--cz-radius-s);
  background: var(--cz-primary);
  color: #fff;
  font-size: 0.15rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.f-order .right .buy:hover {
  background: var(--cz-primary-hover);
}

/* 优惠码 / 代金券触发按钮（两页统一规格） */
.f-order .discount-text,
.sg-cash-btn {
  display: inline-block;
  box-sizing: border-box;
  padding: 0.04rem 0.12rem;
  border: 1px solid #ffb84d;
  border-radius: var(--cz-radius-s);
  background: #fffaf3;
  color: var(--cz-warning) !important;
  font-size: 0.13rem;
  line-height: 1.5;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  transition: all 0.2s ease;
}
.f-order .discount-text:hover {
  border-color: var(--cz-warning);
  background: #fff4e5;
}
/* 代金券按钮与优惠码按钮同尺寸，仅颜色区分 */
.sg-cash-btn {
  margin-left: 0.02rem;
  border-color: #ffb3b3;
  background: #fff5f5;
  color: var(--cz-price) !important;
}
.sg-cash-btn:hover {
  border-color: var(--cz-price);
  background: #ffeded;
}
.f-order .discount-content {
  margin-top: 0.04rem;
}
.f-order .discount-content .discount-btn {
  height: 0.34rem;
  line-height: 0.32rem;
  padding: 0 0.14rem;
  border-radius: 6px;
  border: 1px dashed #ffb84d;
  color: var(--cz-warning);
  background: #fffaf3;
  font-size: 0.12rem;
  cursor: pointer;
}
.f-order .s-tip {
  font-size: 0.12rem;
  color: var(--cz-text-3);
}

/* ============ 云主机模块（mf-cloud / mf-dcim） ============ */
.mf-cloud {
  padding: 0 0 1rem !important;
}
.mf-cloud .cloud-item .top {
  line-height: 0.44rem !important;
  padding: 0 0.16rem !important;
  border-radius: var(--cz-radius-s) !important;
  font-size: 0.14rem !important;
  color: var(--cz-text) !important;
  font-weight: 600;
  background: #f7f9fc !important;
  border: 1px solid var(--cz-border);
}
.mf-cloud .info .name {
  font-size: 0.13rem;
  color: var(--cz-text-2);
}
.mf-dcim .image-item {
  box-sizing: border-box;
  border: 1px solid var(--cz-border);
  border-radius: var(--cz-radius-s);
  background: #fbfcfe;
  padding: 0.1rem 0.12rem;
  transition: all 0.2s ease;
}
.mf-dcim .image-item:hover {
  border-color: var(--cz-primary);
}
.mf-dcim .image-item .name {
  font-size: 0.14rem;
  color: var(--cz-text);
  font-weight: 600;
}
.mf-dcim .image-item .version {
  font-size: 0.12rem;
  color: var(--cz-text-3);
}
.mf-dcim .empty-image {
  border: 1px dashed var(--cz-border);
  border-radius: var(--cz-radius-s);
  color: var(--cz-text-3);
  font-size: 0.13rem;
  background: #fbfcfe;
}
.mf-dcim .empty-image i {
  font-size: 0.14rem;
}

/* ============ Element UI 通用覆盖 ============ */
.config-box .content .el-input__inner,
.config-box .content .el-textarea__inner {
  border-radius: 6px;
  border-color: var(--cz-border);
  font-size: 0.13rem;
  color: var(--cz-text);
}
.config-box .content .el-input__inner:focus,
.config-box .content .el-textarea__inner:focus {
  border-color: var(--cz-primary);
}
.config-box .content .el-input-number {
  border-radius: 6px;
}
.config-box .content .el-tabs__item {
  color: var(--cz-text-2);
  font-size: 0.14rem;
}
.config-box .content .el-tabs__item.is-active {
  color: var(--cz-primary);
}
.config-box .content .el-tabs__active-bar {
  background: var(--cz-primary);
}
/* 下拉浮层（挂在 body） */
.el-select-dropdown .el-select-dropdown__item.selected {
  color: var(--cz-primary);
}

/* ============ 滑块（PC） ============ */
.el-slider__runway {
  height: 4px !important;
  background: #e9edf5 !important;
  border-radius: 2px !important;
}
.el-slider__bar {
  height: 4px !important;
  background: var(--cz-primary) !important;
  border-radius: 2px !important;
}
.el-slider__button {
  width: 14px !important;
  height: 14px !important;
  border: 2px solid var(--cz-primary) !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 4px rgba(0, 82, 217, 0.3) !important;
}

/* 滑块两端边界值（插件渲染 span.min / span.max）：窄容器下禁止竖排折行 */
.config-box .content span.min,
.config-box .content span.max {
  white-space: nowrap;
  min-width: auto;
}

/* 购物车图标按钮内小图标尺寸（跟随按钮高度） */
.f-order .discount-content .discount-btn i.el-icon-shopping-cart-2,
.f-order .discount-content .discount-btn i[class*="shopping-cart"] {
  font-size: 0.2rem;
  line-height: 1;
  vertical-align: -0.03rem;
  margin-right: 0.03rem;
}
.f-order .right .add-cart svg,
.f-order .right .add-cart i.el-icon-shopping-cart-2,
.f-order .right .add-cart i[class*="shopping-cart"] {
  vertical-align: middle;
}

/* ============ 代金券选择弹窗（goods 页自绘，响应式） ============ */
.sg-voucher-mask {
  position: fixed;
  inset: 0;
  background: rgba(21, 30, 51, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 0.16rem;
}
.sg-voucher-dialog {
  background: #fff;
  border-radius: 10px;
  width: 4.2rem;
  max-width: 92vw;
  box-shadow: 0 8px 32px rgba(15, 34, 87, 0.18);
  overflow: hidden;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.sg-voucher-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.14rem 0.16rem;
  border-bottom: 1px solid var(--cz-border);
}
.sg-voucher-title {
  margin: 0;
  font-size: 0.16rem;
  font-weight: 600;
  color: var(--cz-text);
}
.sg-voucher-close {
  cursor: pointer;
  font-size: 0.22rem;
  line-height: 1;
  color: var(--cz-text-3);
  padding: 0 0.02rem;
}
.sg-voucher-close:hover {
  color: var(--cz-text);
}
.sg-voucher-body {
  padding: 0.1rem 0.16rem 0;
  overflow-y: auto;
  flex: 1;
}
.sg-voucher-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.12rem 0.14rem;
  border: 1px solid var(--cz-border);
  border-radius: var(--cz-radius-s);
  margin-bottom: 0.08rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.sg-voucher-row:hover {
  border-color: var(--cz-primary);
  background: var(--cz-primary-light);
}
.sg-voucher-code {
  font-weight: 600;
  color: var(--cz-text);
  font-size: 0.14rem;
  word-break: break-all;
}
.sg-voucher-amount {
  color: var(--cz-price);
  font-weight: 600;
  font-size: 0.14rem;
  white-space: nowrap;
  margin-left: 0.12rem;
}
.sg-voucher-foot {
  padding: 0.1rem 0.16rem 0.14rem;
  text-align: center;
}
.sg-voucher-cancel {
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
  border: none;
  border-radius: var(--cz-radius-s);
  background: #f2f4f9;
  color: var(--cz-text-2);
  font-size: 0.14rem;
  cursor: pointer;
}
.sg-voucher-cancel:hover {
  background: #e9edf5;
}

/* ============ 配置表单加载失败态（goods.js 注入） ============ */
.sg-form-fail {
  text-align: center;
  padding: 0.5rem 0 0.4rem;
  color: var(--cz-text-3);
}
.sg-form-fail i {
  font-size: 0.44rem;
}
.sg-form-fail p {
  margin: 0.1rem 0 0.2rem;
  font-size: 0.14rem;
}
.sg-form-retry {
  height: 0.36rem;
  line-height: 0.34rem;
  padding: 0 0.24rem;
  border: 1px solid var(--cz-primary);
  border-radius: var(--cz-radius-s);
  background: #fff;
  color: var(--cz-primary);
  font-size: 0.13rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.sg-form-retry:hover {
  background: var(--cz-primary-light);
}

/* ============ 通用修复 ============ */
.name {
  background: transparent !important;
}
.el-aside {
  width: 190px !important;
}
.el-menu-item i {
  width: auto !important;
}
.template > .tit {
  margin: 0 !important;
  margin-bottom: 0.23rem !important;
}

/* 防止结算页底部栏残留到商品配置页（v17 修复，保留） */
.st-footer,
.st-footer__inner {
  display: none !important;
}

/* ============ 响应式（<=1100px 窄屏） ============ */
@media screen and (max-width: 1100px) {
  .common-config .common-box {
    flex-direction: column;
  }
  .common-config .order-right {
    width: 100%;
    position: static;
  }
  .f-order {
    left: 0 !important;
    height: auto !important;
  }
  .f-order .main-card {
    gap: 0.14rem;
  }
  .f-order .l-empty {
    width: 0;
  }
  .g-page {
    padding-bottom: 1.4rem !important;
  }
}

/* ============ 移动端特调（<=768px） ============ */
@media screen and (max-width: 768px) {
  .el-aside {
    display: none !important;
  }
  /* 主内容区：顶部菜单悬浮补偿 + 页边距 */
  .el-main {
    padding-top: 1.66rem !important;
    padding-left: 0.14rem !important;
    padding-right: 0.14rem !important;
    padding-bottom: 0.3rem !important;
    font-size: 13px !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .g-page {
    height: auto !important;
    display: block !important;
    padding: 0 0 0.2rem !important;
  }
  .config-box.g-card {
    flex: none !important;
    display: block !important;
    min-height: 0 !important;
  }
  .config-box .content {
    flex: none !important;
    overflow: visible !important;
  }

  /* 页头 */
  .g-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
  }
  .g-title {
    font-size: 19px;
  }
  .g-switch-btn {
    height: 36px;
    font-size: 13px;
    padding: 0 12px;
  }
  .g-card {
    padding: 14px !important;
    border-radius: 10px !important;
  }

  /* 表单分组 */
  .common-config .pro-tit {
    font-size: 18px;
    margin-bottom: 14px;
  }
  .common-config .config-tit {
    font-size: 14px;
    margin: 18px 0 10px;
  }
  .common-config .config-item .des {
    font-size: 13px;
  }
  .el-form-item__label {
    float: none !important;
  }
  .el-form-item__content {
    margin-left: 0 !important;
  }

  /* 周期选择：3 列网格，触控友好 */
  .common-config .cycle {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px;
  }
  .common-config .cycle .item {
    min-width: 0 !important;
    padding: 9px 6px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    margin: 0 !important;
  }
  /* 选项按钮：加大触控面积；宽度随内容，禁止插件 50% 宽导致文字折行 */
  .common-config .click-select {
    gap: 8px;
  }
  .common-config .click-select .item {
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    min-height: 36px;
    width: auto !important;
    white-space: nowrap;
  }
  .common-config .click-select {
    margin-top: 0 !important;
  }
  .el-form .el-radio-button__inner,
  .el-form .flow-bw,
  .config-box .content .el-radio-button__inner,
  .config-box .content .flow-bw {
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    margin-right: 8px !important;
    margin-bottom: 8px !important;
  }
  .el-icon-check:before {
    font-size: 12px !important;
  }

  /* 滑块：修复 min/max/输入框文字竖排折行 */
  .el-slider {
    margin: 10px 0 !important;
  }
  /* 滑块：插件渲染的 span.min/.max 边界数字会被滑块圆钮遮挡，移动端直接隐藏
     （输入框已显示当前值，数字冗余），滑条两侧留出呼吸空间 */
  .config-box .content span.min,
  .config-box .content span.max {
    display: none !important;
  }
  .el-slider__min,
  .el-slider__max {
    display: none !important;
  }
  /* 滑块圆钮与轨道垂直居中（插件模板把 wrapper 定位偏上，这里校正） */
  .el-slider__button-wrapper {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  .el-slider__runway {
    margin: 0 6px !important;
  }
  .el-slider__button,
  .el-slider__button-wrapper .el-slider__button {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 2px solid var(--cz-primary) !important;
    box-shadow: 0 1px 4px rgba(0, 82, 217, 0.3) !important;
  }
  .el-slider .el-tooltip__popper {
    display: none !important;
  }
  .el-input-number {
    width: 90px !important;
    min-width: 90px !important;
    line-height: 34px !important;
    flex-shrink: 0;
  }
  .el-input-number .el-input__inner {
    padding: 0 !important;
  }
  .el-slider .el-input-number {
    width: 64px !important;
  }
  .el-input-number__decrease,
  .el-input-number__increase {
    height: 30px !important;
    width: 28px !important;
    line-height: 30px !important;
  }
  /* 输入类控件统一高度 */
  .el-input__inner {
    height: 36px !important;
    line-height: 36px !important;
    font-size: 13px !important;
  }
  /* 时长/系统选择下拉：仅美化观感（hover 蓝边），交互保持插件原样 */
  .config-box .content .el-select .el-input__inner,
  .f-order .time .el-select .el-input__inner {
    background: #fff !important;
    border-color: var(--cz-border) !important;
    border-radius: 8px !important;
    transition: border-color 0.2s ease;
  }
  .config-box .content .el-select .el-input__inner:hover,
  .f-order .time .el-select .el-input__inner:hover {
    border-color: var(--cz-primary) !important;
  }
  .el-input__icon {
    line-height: 36px !important;
  }
  .el-select-dropdown__item {
    font-size: 13px !important;
  }
  .el-tabs .el-tabs__item {
    font-size: 14px !important;
    padding: 0 0 8px 0 !important;
    margin-bottom: 0 !important;
  }

  /* 云模块 */
  .cloud-box .cloud-item .top,
  .mf-cloud .cloud-item .top {
    line-height: 38px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
  }
  .cloud-box .info .name {
    width: 100px !important;
  }
  .image-item {
    width: 100% !important;
    height: auto !important;
  }
  .image-item .name,
  .image-item .version {
    font-size: 13px !important;
  }
  .empty-image i {
    font-size: 13px !important;
  }
  .el-tooltip__popper.is-light {
    font-size: 12px !important;
  }

  /* ---- 底部订购栏：改为 in-flow 卡片，紧贴配置卡下方 ---- */
  .f-order {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 12px 0 0 !important;
    border-radius: 10px !important;
    border: 1px solid var(--cz-border) !important;
    border-top: 1px solid var(--cz-border) !important;
    box-shadow: var(--cz-shadow) !important;
    background: var(--cz-card) !important;
  }
  .f-order .main-card {
    padding: 12px 16px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .f-order .l-empty {
    display: none !important;
  }
  /* 时长行：label 与下拉同一行不折行；label 与卡片左缘留出间距 */
  .f-order .left {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px;
  }
  .f-order .left .time {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 10px !important;
    padding-left: 4px !important;
  }
  .f-order .left .time .l-txt {
    white-space: nowrap !important;
    font-size: 13px !important;
    margin-right: 2px !important;
  }
  .f-order .left .time .el-select {
    flex: 1 !important;
  }
  .f-order .left .time .el-select .el-input__inner {
    width: 100% !important;
  }
  /* 当前配置/配置费用 chips 靠左同行（间距收紧）；价格行独占一行 */
  .f-order .mid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .f-order .mid a.link {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 1;
  }
  .f-order .mid .bot-price {
    width: 100%;
  }
  .f-order .cur-content .c-item,
  .f-order .free-content .c-item {
    line-height: 1.8 !important;
    font-size: 12px !important;
    width: 100% !important;
  }
  /* 价格行：原价删除线与现价同行 */
  .f-order .bot-price {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px dashed var(--cz-border);
  }
  .f-order .bot-price .new {
    font-size: 20px !important;
  }
  .f-order .bot-price .new span {
    font-size: 20px !important;
  }
  .f-order .bot-price .old {
    font-size: 11px !important;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  /* 优惠码/代金券按钮移动端加大 */
  .f-order .discount-text,
  .sg-cash-btn {
    font-size: 12px !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
  }
  /* 按钮行：两按钮等宽 */
  .f-order .right {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .f-order .right .add-cart,
  .f-order .right .buy {
    flex: 1 !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
    padding: 0 !important;
    text-align: center;
  }
  /* 移动端加入购物车按钮隐藏图标只留文字（若有文字） */
  .f-order .right .add-cart i.el-icon-shopping-cart-2 {
    display: none !important;
  }

  /* 切换商品弹层 */
  .goods-change-box {
    max-width: 88% !important;
  }
  .goods-change-box .goods-item-box .goods-group-item .goods-group-info {
    grid-template-columns: repeat(2, 1fr);
  }
  .goods-group-name {
    font-size: 13px !important;
  }
  .option-name {
    font-size: 12px !important;
  }

  /* 右侧摘要卡 */
  .common-config .order-right {
    width: 100% !important;
    position: relative !important;
    padding: 16px !important;
    margin-top: 12px !important;
  }
  .common-config .order-right .f-btn .el-button {
    height: 44px !important;
    line-height: 44px !important;
  }

  /* 代金券弹窗移动端近全宽 */
  .sg-voucher-dialog {
    width: 100%;
    max-width: none;
  }

  /* 云模块底部留白 */
  .mf-cloud {
    padding: 10px 0 0.2rem !important;
  }
}