/* ==========================================================================
   1024yun 购物车主题 · 选购页「右侧配置明细」栏（仿阿里云）
   --------------------------------------------------------------------------
   配合 plugins/server/mf_cloud/template/cart/pc/{cart_theme}/goods.html
   （主题版模板在 .main-card 之后插入 <aside class="goods-aside">）

   定位思路（关键）：
     外壳 .el-main 的左右内边距各版本不一致（1.02rem / 0.8rem / 36px 都见过），
     用它来算 fixed 右栏的位置必然对不齐 → 这里【自己钉住】三个值：
       --page-pad 页面左右留白（同时写死给 .el-main）
       --aside-w  右栏宽度
       --aside-gap 右栏与表单的间隙
     右栏 right: var(--page-pad)、表单 padding-right: calc(--aside-w + --aside-gap)，
     两边同一套数值 → 任何窗口宽度都不会互相遮挡。
   ========================================================================== */

:root {
  --yun-accent: #7c3aed;
  --yun-accent-light: rgba(124, 58, 237, 0.08);
}

/* ---------- 当前配置明细卡（通用） ---------- */
.goods .config-summary {
  background: #fff;
  border: 1px solid #e9edf5;
  border-radius: 8px;
  overflow: hidden;
}
.goods .config-summary .cs-title {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #1e2736;
  background: #f7f9ff;
  border-bottom: 1px solid #e9edf5;
}
.goods .config-summary .cs-list {
  padding: 10px 16px 14px;
}
.goods .config-summary .c-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 7px 0;
  font-size: 12px;
  line-height: 18px;
  color: #1e2736;
}
.goods .config-summary .c-item .l-txt {
  flex: none;
  color: #8692b0;
  white-space: nowrap;
}
.goods .config-summary .c-item > :last-child {
  text-align: right;
  word-break: break-all;
}

/* ==========================================================================
   桌面（≥1281px）：两栏 + 右栏 fixed 垂直居中
   ========================================================================== */
@media screen and (min-width: 1281px) {
  .goods {
    --page-pad: 0.7rem;   /* 原 1.02rem，收窄后把宽度让给表单和右栏 */
    --aside-w: 320px;     /* 原 280px，「订购时长/配置费用」等不再折行 */
    --aside-gap: 20px;
  }

  /* ① 钉住页面左右留白，和右栏用同一个变量 */
  .goods .el-main {
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
  }

  /* ② 两栏；右栏是 fixed，脱离文档流，这里给它让位 */
  .goods .goods-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--aside-gap);
    padding-right: calc(var(--aside-w) + var(--aside-gap));
  }
  .goods .goods-layout > .mf-cloud {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    /* 底部栏已并入右栏，不再为它留 1.2rem */
    padding-bottom: 0.24rem;
  }

  /* ③ 右栏：固定、垂直居中、不随页面滚动 */
  /* 两张卡都不允许被 flex 压扁（否则优惠码那行会被挤掉） */
  .goods .goods-aside > * {
    flex: 0 0 auto;
  }
  .goods .goods-aside {
    position: fixed;
    top: 50%;
    right: var(--page-pad);
    transform: translateY(-50%);
    z-index: 10;
    width: var(--aside-w);
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 2px;
    box-sizing: border-box;
  }
  .goods .goods-aside::-webkit-scrollbar {
    width: 4px;
  }
  .goods .goods-aside::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.12);
  }

  /* ④ 订购栏在右栏里的形态 */
  .goods .goods-aside .f-order {
    position: static;
    width: 100%;
    height: auto;
    left: auto;
    bottom: auto;
    display: block;
    background: transparent;
    z-index: auto;
  }
  .goods .goods-aside .f-order .l-empty {
    display: none;
  }
  .goods .goods-aside .f-order .el-main {
    background: transparent;
    box-shadow: none;
    padding: 0 !important;
  }
  .goods .goods-aside .f-order .main-card {
    display: block;
    background: #fff;
    border: 1px solid #e9edf5;
    border-radius: 8px;
    padding: 12px 14px;
  }
  .goods .goods-aside .f-order .main-card > .left,
  .goods .goods-aside .f-order .main-card > .mid,
  .goods .goods-aside .f-order .main-card > .right {
    width: 100%;
  }
  .goods .goods-aside .f-order .main-card > .left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 12px;
  }
  .goods .goods-aside .f-order .main-card > .left .time,
  .goods .goods-aside .f-order .main-card > .left .num {
    flex: 1 1 0;
    min-width: 0;
    max-width: 50%;
    margin: 0;
    display: flex;
    align-items: center;
    column-gap: 6px;
  }
  /* 标签不许折行（原来「订购时长」被挤成两行） */
  .goods .goods-aside .f-order .main-card > .left .l-txt {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
  }
  .goods .goods-aside .f-order .main-card > .left .el-select,
  .goods .goods-aside .f-order .main-card > .left .el-input-number {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  /* 数字被 ± 按钮挤没了的修复 */
  .goods .goods-aside .f-order .left .num .el-input-number .el-input__inner {
    padding-left: 24px;
    padding-right: 24px;
    text-align: center;
  }
  .goods .goods-aside .f-order .left .num .el-input-number .el-input-number__decrease,
  .goods .goods-aside .f-order .left .num .el-input-number .el-input-number__increase {
    width: 24px;
  }
  .goods .goods-aside .f-order .main-card > .mid {
    padding: 8px 0;
    margin: 8px 0;
    border-top: 1px solid #f0f2f7;
    border-bottom: 1px solid #f0f2f7;
  }
  .goods .goods-aside .f-order .bot-price {
    margin-left: 0;
  }
  /* 「配置费用」与「￥20.00」都不许折行。
     坑：.mid 是 flex，中文文本作为 flex item 时 min-width:auto 会退化到 1 个字符，
     于是「配置费用」被挤成竖排 —— 必须显式给它 max-content 宽度。 */
  .goods .goods-aside .f-order .bot-price .l-txt,
  .goods .goods-aside .f-order .mid > span:first-of-type,
  .goods .goods-aside .f-order .mid .link {
    flex: 0 0 auto;
    min-width: max-content;
    white-space: nowrap;
    font-size: 12px;
  }
  .goods .goods-aside .f-order .bot-price,
  .goods .goods-aside .f-order .bot-price .new,
  .goods .goods-aside .f-order .bot-price .price {
    flex: 0 0 auto;
    min-width: max-content;
    white-space: nowrap;
    word-break: keep-all;
  }
  .goods .goods-aside .f-order .main-card > .mid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 8px;
  }
  /* 「配置费用」原本是悬停链接，摘要卡已常驻 → 降级成普通小字标签 */
  .goods .goods-aside .f-order .mid > span:first-of-type .link {
    color: #8692b0;
    font-size: 12px;
    font-weight: 400;
    cursor: default;
    text-decoration: none;
  }
  .goods .goods-aside .f-order .mid > span:first-of-type .link:hover {
    color: #8692b0;
  }
  .goods .goods-aside .f-order .main-card > .right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    gap: 10px;
  }
  .goods .goods-aside .f-order .right .buy {
    flex: 1 1 auto;
    width: auto;
    height: 38px;
    line-height: 38px;
    text-align: center;
  }
  .goods .goods-aside .f-order .right .add-cart {
    flex: 0 0 42px;
    width: 42px;
    height: 38px;
  }
}

/* ==========================================================================
   窄屏（≤1280px）：回到原生形态 —— 右栏回常规流，底部固定栏恢复
   ========================================================================== */
@media screen and (max-width: 1280px) {
  .goods .goods-layout {
    display: block;
    padding-right: 0;
  }
  .goods .goods-layout > .mf-cloud {
    padding-bottom: 1.2rem;
  }
  /* 窄屏（单栏）时存储表格恢复满宽，别被 70% 压得太窄 */
  .goods .mf-cloud .store-item .el-table {
    width: 100% !important;
  }
  .goods .goods-aside {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    z-index: auto;
    width: auto;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    margin-top: 16px;
  }
  .goods .goods-aside .f-order {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.2rem;
    z-index: 4;
  }
  .goods .goods-aside .f-order .l-empty {
    display: block;
    height: 1.2rem;
    width: 190px;
  }
  .goods .goods-aside .f-order .el-main {
    background: #fff;
    box-shadow: 0 -0.03rem 0.12rem rgba(0, 0, 0, 0.08);
  }
  .goods .goods-aside .f-order .main-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    border-radius: 0;
    padding: 0;
  }
  .goods .goods-aside .f-order .main-card > .left,
  .goods .goods-aside .f-order .main-card > .mid,
  .goods .goods-aside .f-order .main-card > .right {
    width: auto;
  }
}

/* ==========================================================================
   表单「紧凑化」：缩小行距 / 控件高度 / 分区留白（所有断点生效）
   注：这里刻意用 px 而不是 rem —— 站点 rem 随窗口缩放，1440 屏下
       0.28rem 只有 21px，会小到看不清；px 在 1440~1920 都是舒服的密度。
   ========================================================================== */
.goods .mf-cloud {
  padding-top: 16px;
}

/* ① 行间距：22px → 10px */
.goods .mf-cloud .el-form-item {
  margin-bottom: 10px;
}
.goods .mf-cloud .el-form-item__label {
  font-size: 13px;
  line-height: 30px;
  padding-right: 10px;
}
.goods .mf-cloud .el-form-item__content {
  line-height: 30px;
}

/* ② 分区标题留白 */
.goods .mf-cloud .com-tit {
  margin: 6px 0 8px;
  font-size: 13px;
  line-height: 20px;
}

/* ③ 控件高度：约 40px → 30px
   注意：插件是 `.mf-cloud .el-form .el-input__inner{height:.4rem;line-height:.4rem}`，
   权重和本文件同级，必须带上 .el-form 才能盖住；
   而且 height / line-height / padding 必须【一起改】，只改 padding 会让文字偏下。 */
.goods .mf-cloud .el-form .el-input__inner,
.goods .mf-cloud .el-form .el-select .el-input__inner {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}
.goods .mf-cloud .el-form .el-select .el-input__icon {
  line-height: 30px;
}
.goods .mf-cloud .el-form .el-input-number {
  line-height: 30px;
}

/* ④ 单选按钮组：高度/行高/内边距/最小宽一起改，保证文字垂直居中 */
.goods .mf-cloud .el-form .el-radio-button__inner {
  height: 30px;
  line-height: 30px;
  padding: 0 12px;
  min-width: 72px;
  font-size: 12px;
}
.goods .mf-cloud .el-radio__label,
.goods .mf-cloud .el-checkbox__label {
  font-size: 12px;
  padding-left: 8px;
}

/* ⑤ 说明文字 */
.goods .mf-cloud .s-tip {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.5;
}
.goods .mf-cloud .demand-des {
  font-size: 12px;
  line-height: 1.5;
}

/* ⑥ 套餐卡：内边距与行高收紧 */
.goods .mf-cloud .cloud-box {
  margin-top: 0;
}
.goods .mf-cloud .cloud-box .cloud-item {
  margin-top: 8px;
}
.goods .mf-cloud .cloud-box .cloud-item .inner {
  padding-bottom: 12px;
}
.goods .mf-cloud .cloud-box .cloud-item .top {
  line-height: 34px;
  padding: 0 14px;
  font-size: 13px;
}
.goods .mf-cloud .cloud-box .info {
  padding: 6px 14px 0;
}
.goods .mf-cloud .cloud-box .info p {
  line-height: 22px;
  font-size: 12px;
}

/* ⑦ 表格：单元格垂直居中 + 下拉占满格宽 + 小字号 */
.goods .mf-cloud .el-table th.el-table__cell,
.goods .mf-cloud .el-table td.el-table__cell {
  padding: 5px 0;
  vertical-align: middle;
}
.goods .mf-cloud .el-table .cell {
  line-height: 20px;
  font-size: 12px;
}
/* 插件把表格里的下拉写死 2rem，单元格变窄后会顶出去 */
.goods .mf-cloud .el-table .el-select {
  width: 100%;
}
.goods .mf-cloud .el-table .el-select .el-input__inner {
  height: 28px;
  line-height: 28px;
}


/* ==========================================================================
   溢出修复：插件里几个容器按 rem 写死了 max-width，右栏占位后表单变窄，
   这些容器比表单还宽 → 内容被卡片边缘切掉（镜像第 5 张卡、"添加数据盘"等）
   ========================================================================== */
/* 这些容器插件都按 rem 写死了 max-width（10.5rem/9.9rem/11rem/13rem），
   右栏占位后表单只有 ~680px，它们全都比表单宽 → 右侧被卡片边缘切掉。
   统一放开成 100%，让它们跟着表单宽度走。 */
.goods .mf-cloud .image-ul,
.goods .mf-cloud .image-box,
.goods .mf-cloud .store,
.goods .mf-cloud .login-box,
.goods .mf-cloud .group-box,
.goods .mf-cloud .el-table {
  max-width: 100%;
}
/* 镜像卡：原来是「固定宽 1.9rem + 每张 margin-right」，最后一张的右边缘
   停在容器内 → 和下面 100% 宽的存储表格对不齐。
   改成用 gap + flex 等分：每行卡片自动填满整行，右边缘 = 容器右边缘 = 表格右边缘。 */
.goods .mf-cloud .image-ul,
.goods .mf-cloud .image-box {
  width: 100%;
  gap: 8px;
}
.goods .mf-cloud .image-item,
.goods .mf-cloud .empty-image {
  flex: 1 1 1.8rem;
  width: auto;
  min-width: 1.2rem;
  margin-right: 0;
  margin-bottom: 0;
}


/* ==========================================================================
   滑块刻度（0M / 1000M 那两个小字）：不要压到滑块手柄上
   插件用 `.marks{margin-top:-0.24rem}` 硬把刻度提到滑块行里，
   再叠加我们压缩过的行距 → 刻度正好落到手柄位置，被手柄盖住。
   这里把负边距收回去，让刻度落回滑块下方。
   ========================================================================== */
.goods .mf-cloud .marks {
  margin-top: 0;
  height: auto;
  line-height: 1.4;
  padding-bottom: 2px;
}
.goods .mf-cloud .marks .item {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}
/* 滑块行本身留够高度，避免手柄溢出到下一行 */
.goods .mf-cloud .el-form-item .el-slider {
  min-height: 32px;
}


/* ==========================================================================
   「使用优惠码」单独一行
   原结构：.bot-price > .old（flex 行）= 原价 + <discount-code> + <event-code>
   挤在一起时优惠码会被压成半行、和价格贴在一起。
   这里让它 flex-basis:100% 强制换行，占满整行。
   ========================================================================== */
.goods .goods-aside .f-order .bot-price .old {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 6px;
  column-gap: 6px;
}
.goods .goods-aside .f-order .bot-price .old > .discount-popover,
.goods .goods-aside .f-order .bot-price .old > .common-event-code {
  flex: 0 0 100%;
  margin-top: 2px;
}
.goods .goods-aside .f-order .bot-price .old .discount-text {
  display: inline-block;
  font-size: 12px;
  line-height: 20px;
  padding: 0 8px;
  border-radius: 3px;
  background: var(--yun-accent-light, rgba(255, 106, 0, 0.1));
  color: #ff6a00;
  white-space: nowrap;
}


/* ==========================================================================
   订购卡排版（2026-10-19 18:20 重排）
   DOM：.main-card 的子元素 = .left(时长/数量) / .mid(当前配置+竖虚线+配置费用)
        / .demand-box(价格) / .right(按钮)
   目标：
     订购时长 [1个]   订购数量 [− 1 +]
     ─────────────────────────────
     配置费用                   ￥20.00
                            使用优惠码
     [🛒]            [ 立即购买 ]
   ========================================================================== */

.goods .goods-aside .f-order .main-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 10px;
}
/* 第 1 行：时长 + 数量 */
.goods .goods-aside .f-order .main-card > .left {
  flex: 0 0 100%;
}
/* 第 3 行：按钮 */
.goods .goods-aside .f-order .main-card > .right {
  flex: 0 0 100%;
}
/* 第 2 行：左「配置费用」+ 右价格 */
.goods .goods-aside .f-order .main-card > .mid {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.goods .goods-aside .f-order .main-card > .demand-box {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}

/* 「当前配置」悬停入口 + 竖虚线：摘要卡就在上方，重复了 → 隐藏 */
.goods .goods-aside .f-order .main-card > .mid > .el-popover__reference-wrapper:first-of-type,
.goods .goods-aside .f-order .main-card > .mid > .line-empty {
  display: none;
}

/* 链接去下划线，压成灰色小标签 */
.goods .goods-aside .f-order .mid .link,
.goods .goods-aside .f-order .mid a.link {
  text-decoration: none;
  color: #8692b0;
  font-size: 12px;
  font-weight: 400;
  cursor: default;
  white-space: nowrap;
}

/* 价格：右对齐、橙色、加大 */
.goods .goods-aside .f-order .bot-price {
  margin-left: 0;
}
.goods .goods-aside .f-order .bot-price .new {
  text-align: right;
}
.goods .goods-aside .f-order .bot-price .new .price,
.goods .goods-aside .f-order .bot-price .price {
  color: #ff6a00;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
/* 原价 + 优惠码：靠右、优惠码单独一行 */
.goods .goods-aside .f-order .bot-price .old {
  justify-content: flex-end;
  margin-top: 2px;
}
/* 优惠码做成纯文字链接（不要边框/底色） */
.goods .goods-aside .f-order .bot-price .old .discount-text {
  display: inline-block;
  background: transparent;
  border: 0;
  padding: 0;
  line-height: 18px;
  font-size: 12px;
  color: #ff6a00;
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   紫橙云 · 配置页右栏(桌面端)
   2026-10-26 重写版:结算区右侧固定竖栏 + 卡片式分隔 + 当前配置明细常驻
   参考阿里云「配置概要 / 价格概要 / 合计金额」结构
   作用域:仅 >=961px,手机端保持原底部结算条
   ========================================================================== */
@media screen and (min-width: 961px) {

  /* ---------- ① 右栏容器 ---------- */
  .goods .f-order {
    /* 自营商品模板里 .f-order 是 static,必须显式固定 */
    position: fixed !important;
    top: 58px;
    right: 0;
    left: auto;
    bottom: 0;
    width: 320px;
    height: auto !important;
    padding: 16px 14px;
    box-sizing: border-box;
    background: #f6f5fb;
    border-left: 1px solid #ece9f5;
    border-top: 0;
    box-shadow: -6px 0 24px rgba(20, 32, 60, 0.06);
    overflow-y: auto;
    scrollbar-gutter: stable;
    z-index: 900;
  }
  .goods .f-order .l-empty { display: none; }
  /* 自营商品页面自带的「当前配置详情」块:与下方配置明细重复,桌面端隐藏 */
  .goods .config-summary { display: none !important; }
  .goods .f-order .el-main {
    padding: 0 !important;
    height: auto !important;
    background: transparent;
    box-shadow: none;
  }
  .goods .f-order .main-card {
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px;
    min-height: 100%;
    padding: 0 !important;
    background: transparent;
    box-shadow: none;
  }

  /* ---------- ② 三张卡片 ---------- */
  .goods .f-order .main-card > .left,
  .goods .f-order .main-card > .mid,
  .goods .f-order .main-card > .right {
    width: 100% !important;
    align-self: stretch !important;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
    /* 原始模板给 .mid 设了 padding:8px 0,会把明细文字顶到卡片边缘,这里统一 */
    padding: 16px !important;
    background: #fff;
    border: 1px solid #ece9f5;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(20, 32, 60, 0.04);
    text-align: left;
  }
  .goods .f-order .main-card > .left {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    /* 行距与下方「配置明细」一致:明细相邻行视觉间距=6+6=12px,
       这里每行 padding 2px,故 gap 取 8px(2+8+2=12) */
    gap: 8px;
  }
  .goods .f-order .main-card > .mid {
    /* 明细区吃掉剩余高度并内部滚动,结算卡因此始终贴在栏底 */
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 !important;
  }
  /* 明细标题滚动时吸顶 */
  .goods .f-order .main-card > .mid::before {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
  }
  .goods .f-order .main-card > .mid::-webkit-scrollbar { width: 4px; }
  .goods .f-order .main-card > .mid::-webkit-scrollbar-thumb {
    background: #ded9ee;
    border-radius: 4px;
  }
  .goods .f-order .main-card > .right {
    flex: 0 0 auto;
    margin-top: auto !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
  }

  /* ---------- ③ 卡片标题 ---------- */
  .goods .f-order .main-card > .left::before,
  .goods .f-order .main-card > .mid::before {
    display: block;
    width: 100%;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid #f2eff9;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #1e2736;
    text-align: left;
  }
  .goods .f-order .main-card > .left::before { content: "配置概要"; }
  .goods .f-order .main-card > .mid::before { content: "配置明细"; }

  /* ---------- ④ 订购时长 / 订购数量 ---------- */
  /* 覆盖自营商品模板的 max-width:50%(会把控件压到 126px) */
  .goods .goods-aside .f-order .main-card > .left .time,
  .goods .goods-aside .f-order .main-card > .left .num {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }
  .goods .f-order .main-card > .left .time,
  .goods .f-order .main-card > .left .num {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 2px 0;
  }
  .goods .f-order .main-card > .left .l-txt {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 13.5px;
    color: #485169;
  }
  .goods .f-order .main-card > .left .el-select,
  .goods .f-order .main-card > .left .el-input-number {
    flex: 0 0 148px !important;
    width: 148px !important;
    max-width: 148px !important;
    min-width: 0;
  }

  /* ---------- ⑤ 当前配置明细(克隆自弹层,静态展示) ---------- */
  /* 原 el-popover 是悬停触发、会自己重新定位,不能强制常显(会飞出卡片盖住页面)。
     改由 goods-sidebar.js 把 .con 内容克隆到 .yun-config-list,原弹层保持隐藏。 */
  .goods .f-order .main-card > .mid > span:first-child {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .goods .f-order .cur-content,
  .goods .f-order .cur-content + .el-popover__reference-wrapper {
    display: none !important;
  }
  .goods .f-order .yun-config-list {
    display: block;
    width: 100%;
    min-width: 0;
    font-size: 13.5px;
  }
  /* 每行:左标签 92px / 右值占满剩余,长串自动换行 */
  .goods .f-order .yun-config-list .c-item {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    column-gap: 10px;
    align-items: start;
    width: 100% !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    border: 0 !important;
    overflow: visible !important;
    font-size: 13.5px;
    line-height: 1.55;
    text-align: right;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .goods .f-order .yun-config-list .c-item .l-txt {
    text-align: left;
    min-width: 0 !important;
    color: #8692b0;
    white-space: nowrap;
  }

  /* ---------- ⑥ 合计金额行(JS 搬到底部卡) ---------- */
  /* 金额未搬到右卡前先在明细卡里隐藏,避免加载瞬间在原位闪一下 */
  .goods .f-order .main-card > .mid .bot-price {
    display: none !important;
  }
  .goods .f-order .main-card > .right .yun-cost-label {
    display: none !important;
  }
  .goods .f-order .main-card > .right .yun-total-bar {
    order: 1;
    flex: 1 1 100% !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 8px;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 0 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #f2eff9 !important;
  }
  .goods .f-order .main-card > .right .yun-total-bar::before {
    content: "合计金额";
    font-size: 13.5px;
    color: #485169;
    white-space: nowrap;
  }
  /* 优惠码入口保留:单独一行贴右,橙色小链接 */
  .goods .f-order .main-card > .right .yun-total-bar .l-txt {
    display: none !important;
  }
  .goods .f-order .main-card > .right .yun-total-bar .old {
    display: block !important;
    order: 2;
    flex: 0 0 100%;
    width: 100%;
    text-align: right;
    margin: 2px 0 0 !important;
    padding: 0 !important;
  }
  .goods .f-order .main-card > .right .yun-total-bar .old > div {
    display: inline-block;
  }
  .goods .f-order .main-card > .right .yun-total-bar .discount-popover {
    display: inline-block !important;
  }
  .goods .f-order .main-card > .right .yun-total-bar .discount-text {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid rgba(249, 115, 22, 0.35);
    border-radius: 4px;
    background: rgba(249, 115, 22, 0.06);
    font-size: 12px;
    line-height: 1.4;
    color: #f97316 !important;
    cursor: pointer;
  }
  .goods .f-order .main-card > .right .yun-total-bar .discount-text:hover {
    background: rgba(249, 115, 22, 0.12);
    border-color: #f97316;
  }
  .goods .f-order .main-card > .right .yun-total-bar .new {
    order: 1;
  }
  .goods .f-order .main-card > .right .yun-total-bar .new {
    margin-left: auto;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: #ea580c !important;
  }

  /* ---------- ⑦ 按钮行 + 协议提示 ---------- */
  .goods .f-order .main-card > .right > span {
    order: 2;
    flex: 0 0 44px;
  }
  .goods .f-order .main-card > .right .buy {
    order: 3;
    flex: 1 1 auto;
    height: 44px;
    margin-left: 0;
    font-size: 15px;
  }
  .goods .f-order .main-card > .right .add-cart {
    width: 44px;
    height: 44px;
  }
  .goods .f-order .main-card > .right::before {
    content: "点击立即购买即表示同意服务协议";
    order: 5;
    flex: 0 0 100%;
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #a8b0c2;
    text-align: center;
  }

  /* ---------- ⑧ 内容区让位 ---------- */
  .goods .el-main {
    padding-right: 336px !important;
  }

  /* ---------- ⑨ 兼容自营商品的 .goods-aside 两栏结构 ----------
     该结构里 .goods-aside 是固定容器(原本垂直居中)、.f-order 是内部静态块。
     这里让容器从导航下沿贴到底部,.f-order 退回静态、透明,卡片样式照旧生效。 */
  .goods .goods-aside {
    position: fixed !important;
    top: 58px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    transform: none !important;
    width: 320px !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    box-sizing: border-box;
    padding: 16px 14px !important;
    background: #f6f5fb;
    border-left: 1px solid #ece9f5;
    box-shadow: -6px 0 24px rgba(20, 32, 60, 0.06);
    overflow-y: auto;
    scrollbar-gutter: stable;
    z-index: 900;
  }
  .goods .goods-aside > .f-order .el-main {
    height: auto !important;
    min-height: 0 !important;
  }
  /* 直接用视口高度兜底:100% 链在 static 容器里不可靠,保证合计卡贴到栏底 */
  .goods .goods-aside > .f-order .main-card {
    min-height: calc(100vh - 58px - 32px) !important;
  }
  .goods .goods-aside > .f-order {
    height: 100% !important;
    min-height: 100% !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
}