/* ==========================================================================
 * 极简未来（jijianweilai）购物车主题 · 配置/下单页（configureproduct）皮肤
 * 作用域 .shopping-cart-page.type_configureproduct（该页原有类），仅 PC 加载
 * 原则：只做覆盖式皮肤，不改 configureproduct.js / cart.js 依赖的任何类名与 id，
 *       不动表单结构与 DOM 层级；WAP 不加载本文件，移动端维持原样
 * 视觉语言与列表页（jjw-list.css）一致：白卡 + 12px 圆角 + #e5e6eb 描边、
 *       主色 #165dff、胶囊 chips、渐变主按钮；本文件在其上做「紧凑 + 居中收束」
 * 关键覆盖点（原主题值 → 现值）：
 *   .allocation-card 宽度      满宽 → max-width 1120px 居中
 *   .os-card 圆角              1px（--os-radius）→ 10px（内层 9px 同圆）
 *   .version-list 分隔线       #fafafa（不可见）→ #f2f3f5 + 圆角 + 阴影
 *   .sky-form-label 行高       1.5 + padding-top 7px → 36px（与下拉框文字对齐）
 * ========================================================================== */

/* --------------------------------------------------------------------- 骨架
 * 原主题把配置页做成「固定视口高 + 中间区内部滚动 + 底部结算条」的固定板式；
 * 这里改为整页自然滚动，并补上与列表页一致的左右留白；PC 左栏按要求去掉 */
.shopping-cart-page.type_configureproduct {
    height: auto !important;
    overflow: visible !important;
    /* 底色刷白（2026-09-21 第七轮）：站点 body.inherit{background:#f7f7f9} 是浅灰页面底色，
     * 本容器自身透明 → 顶部 20px / 底部 40px 留白与左右留白会露出灰底，形成横贯整宽的灰带
     * （用户反馈的「页面顶部灰色蒙版」同源）。刷白后灰带消失，留白尺寸不变 */
    background: #fff;
    /* 顶部必须留白：登录后「登录提示」(.bgw) 整块不再输出，若这里 top 为 0，
       商品详情卡与订单汇总卡会直接顶到内容区最上沿（用户反馈「登录后自动贴顶」） */
    padding: 20px clamp(24px, 3.5vw, 72px) 40px;
    box-sizing: border-box;
}

.shopping-cart-page.type_configureproduct .shopping-cart-content {
    display: block;
}

/* PC 左栏（搜索 + 分组菜单）：用户要求不做导航，风格与列表页统一 → 隐藏 */
.shopping-cart-page.type_configureproduct .shopping-cart-side {
    display: none !important;
}

.shopping-cart-page.type_configureproduct .shopping-cart-content .shopping-cart-product {
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* ------------------------------------------------------------------ 主卡片
 * 左右向屏幕中心收束：内容区限宽并居中（宽屏留白自然变大） */
.shopping-cart-page.type_configureproduct .allocation-card {
    display: block;
    height: auto !important;
    overflow: visible !important;
    max-width: 1120px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e5e6eb;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(22, 93, 255, 0.05);
}

.shopping-cart-page.type_configureproduct .allocation-card * {
    font-family: inherit;
}

/* 顶部蓝色提示块：与卡片圆角对齐 */
.shopping-cart-page.type_configureproduct .allocation-card > .bgw {
    border-radius: 12px 12px 0 0;
}

/* 卡片头：产品名 + 「购物车清单」胶囊入口（紧凑） */
.shopping-cart-page.type_configureproduct .allocation-card .allocation-header {
    padding: 14px 20px;
    margin-bottom: 0;
    background: #fff;
    box-shadow: none;
    border-bottom: 1px solid #f0f2f5;
    align-items: center;
    gap: 16px;
}

.shopping-cart-page.type_configureproduct .allocation-card .allocation-header .allocation-header-title h1 {
    font-size: 19px;
    font-weight: 700;
    color: #1d2129;
    line-height: 1.35;
    word-break: break-word;
}

.shopping-cart-page.type_configureproduct .allocation-card .allocation-header .allocation-header-shoppingCart {
    flex: none;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: 1px solid #d6e4ff;
    border-radius: 999px;
    background: #eef4ff;
    color: #165dff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    transition: all 0.2s;
}

.shopping-cart-page.type_configureproduct .allocation-card .allocation-header .allocation-header-shoppingCart:hover {
    background: #165dff;
    border-color: #165dff;
    color: #fff;
}

.shopping-cart-page.type_configureproduct .allocation-card .allocation-header .allocation-header-shoppingCart .inventory_number {
    color: inherit;
}

/* ------------------------------------------------------ 配置表单：行与标签 */
.shopping-cart-page.type_configureproduct .allocation-card .allocation-mian {
    padding: 4px 20px 16px;
    overflow: visible;
    background: #fff;
}

.shopping-cart-page.type_configureproduct .sky-config-form .sky-form-group {
    margin-bottom: 0;
}

/* 行距收紧：原来 16px 上下 + 28px 段距 → 10px + 0
 * align-items:flex-start：标签不再被拉伸，与控件从同一行顶开始排 */
.shopping-cart-page.type_configureproduct .sky-config-form .sky-form-group.sky-config-row {
    gap: 14px;
    padding: 10px 0;
    margin-bottom: 0;
    border-top: 1px solid #f0f2f5;
    align-items: flex-start;
}

.shopping-cart-page.type_configureproduct .sky-config-form .sky-form-group.sky-config-row:first-child {
    border-top: 0;
}

/* 标签与控件的垂直对齐（用户反馈「IP 数量与其后选框文字没对齐」）
 * 由「靠 line-height 凑」改为「同高 36px 盒子 + 同一套 flex 居中」：
 * 标签盒 36px、控件（.dropdown-toggle）36px，两者都从行顶开始，
 * 文字都用 align-items:center 居中 → 中心必然重合，不再受字体基线影响 */
.shopping-cart-page.type_configureproduct .sky-config-form .sky-form-group .sky-form-label {
    display: flex;
    align-items: center;
    height: 36px;
    min-height: 36px;
    padding-top: 0;
    line-height: 1.4;
    box-sizing: border-box;
    color: #1d2129;
    font-size: 14px;
    font-weight: 600;
}

.shopping-cart-page.type_configureproduct .sky-config-form .sky-form-group .sky-form-label .label-title {
    line-height: 1.4;
}

/* 周期 / 产品型号：与列表页 chips 同款（胶囊 + 描边，激活浅蓝），尺寸收紧 */
.shopping-cart-page.type_configureproduct .sky-config-form .sky-btn-group {
    gap: 10px;
}

.shopping-cart-page.type_configureproduct .sky-config-form .sky-btn-group .sky-config-btn,
.shopping-cart-page.type_configureproduct .sky-config-form .basicConfigurationItems .sky-config-btn-three {
    line-height: 32px;
    padding: 0 16px;
    border: 1px solid #e5e6eb;
    border-radius: 999px;
    background: #fff;
    color: #4e5969;
    font-size: 13px;
    transition: color 0.18s, border-color 0.18s, background-color 0.18s, box-shadow 0.18s;
}

/* 2026-09-21（用户要求 · 第二轮修正）：**不要把按钮挤成单列** —— 列宽按每个按钮的文字宽度自适应，
 * 容器能放几列就放几列（**不低于两列**），并且每一列的左右边缘对齐。
 *   · 主流浏览器：`grid` + `minmax(max-content, 1fr)` —— 每列至少能装下该列最宽的按钮（max-content），
 *     剩余空间再等分（1fr）；按钮 `width:100%` 撑满所在列 → **同列上下严格对齐**；
 *     auto-fill 的列数＝当前容器放得下的列数：名称短就多列（与改版前一样一行好几个），
 *     名称长就少列，不会只剩一列（除非单个名称宽过容器一半，那时只能单列）。
 *   · 老浏览器（不认 max-content 轨道）：退回 flex 自然宽度换行，观感等同改版前。
 *   注：只作用于 PC（:not(.mobileEnd)）；想固定列数就把 auto-fill 换成 repeat(2, minmax(0, 1fr))。 */
.shopping-cart-page.type_configureproduct:not(.mobileEnd) .sky-config-form .basicConfigurationItems .sky-config-btn-three {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 34px;
    line-height: 1.4;            /* 名称换行时不会把胶囊撑成椭圆 */
    padding: 6px 16px;
    text-align: center;
    white-space: normal;
}

.shopping-cart-page.type_configureproduct:not(.mobileEnd) .sky-config-form .basicConfigurationItems {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 10px !important;   /* 原规则是 gap:12px 4px !important —— 列间距 4px 太挤 */
}

@supports (grid-template-columns: repeat(auto-fill, minmax(max-content, 1fr))) {
    .shopping-cart-page.type_configureproduct:not(.mobileEnd) .sky-config-form .basicConfigurationItems {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(max-content, 1fr));
        align-items: stretch;
    }

    .shopping-cart-page.type_configureproduct:not(.mobileEnd) .sky-config-form .basicConfigurationItems .sky-config-btn-three {
        width: 100%;             /* 撑满所在列 → 同列严格对齐 */
    }
}

.shopping-cart-page.type_configureproduct .sky-config-form .sky-btn-group .sky-config-btn:hover,
.shopping-cart-page.type_configureproduct .sky-config-form .basicConfigurationItems .sky-config-btn-three:hover {
    color: #165dff;
    border-color: #a9c4ff;
    background: #fff;
}

.shopping-cart-page.type_configureproduct .sky-config-form .sky-btn-group .sky-config-btn.active,
.shopping-cart-page.type_configureproduct .sky-config-form .basicConfigurationItems .sky-config-btn-three.active {
    color: #165dff;
    border-color: #165dff;
    background: #f2f7ff;
    font-weight: 600;
}

.shopping-cart-page.type_configureproduct .sky-config-form .sky-btn-group .sky-config-btn.active.disabled {
    color: #86909c;
    border-color: #e5e6eb;
    background: #f7f8fa;
}

/* 周期折扣角标（享N折）：贴在周期胶囊的右上角
 *   · 角标是 <label class="btn sky-config-btn"> 的子元素 → 给胶囊 position:relative 作定位基准
 *     （官方 default 主题没有，area 主题靠内联 style 补，本主题原来缺失 → 角标会相对更外层祖先定位） */
.shopping-cart-page.type_configureproduct .sky-config-form .sky-btn-group .sky-config-btn {
    position: relative;
}

.shopping-cart-page.type_configureproduct .sky-config-form .sky-btn-group .cycle-select-discount {
    position: absolute;
    top: -9px;
    right: -6px;
    bottom: auto;
    padding: 0 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff7a45 0%, #f53f3f 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(245, 63, 63, 0.28);
    pointer-events: none;
}

/* ------------------------------------------------ 操作系统卡片（圆角矩形补全）
 * 原主题 --os-radius 只有 1px，且内层头部/版本行的圆角只在 hover/active 时才给 →
 * 卡片看起来是直角。这里：卡片 10px，头部常驻 9px 上圆角，版本行 9px 下圆角，
 * 中间加一条分隔线。注意不能用 overflow:hidden —— .version-list 是绝对定位下拉，会被裁掉 */
.shopping-cart-page.type_configureproduct .sky-config-form .os-container {
    gap: 14px;
}

.shopping-cart-page.type_configureproduct .sky-config-form .os-card {
    border: 1px solid #e5e6eb;
    border-radius: 10px;
    background: #fff;
    overflow: visible;
}

.shopping-cart-page.type_configureproduct .sky-config-form .os-card .os-header {
    padding: 9px 14px;
    border-radius: 9px 9px 0 0;
    background: #f7f8fa;
    gap: 8px;
}

.shopping-cart-page.type_configureproduct .sky-config-form .os-card .os-header .os-name {
    color: #1d2129;
    font-size: 14px;
    font-weight: 600;
}

.shopping-cart-page.type_configureproduct .sky-config-form .os-card .os-header .img_os {
    width: 18px;
    height: 18px;
}

.shopping-cart-page.type_configureproduct .sky-config-form .os-card .version-dropdown {
    margin-top: 0;
    border-top: 1px solid #f2f3f5;
}

.shopping-cart-page.type_configureproduct .sky-config-form .os-card .version-dropdown .dropdown-btn {
    padding: 8px 14px;
    border-radius: 0 0 9px 9px;
    background: #fff;
    font-size: 13px;
    color: #86909c;
    transition: background 0.2s;
}

.shopping-cart-page.type_configureproduct .sky-config-form .os-card .version-dropdown .dropdown-btn:hover {
    background: #f7faff;
    color: #165dff;
}

.shopping-cart-page.type_configureproduct .sky-config-form .os-card.active,
.shopping-cart-page.type_configureproduct .sky-config-form .os-card:hover {
    border-color: #165dff;
    box-shadow: 0 4px 14px rgba(22, 93, 255, 0.08);
}

.shopping-cart-page.type_configureproduct .sky-config-form .os-card.active .os-header,
.shopping-cart-page.type_configureproduct .sky-config-form .os-card:hover .os-header {
    background: #f2f7ff;
    border-radius: 9px 9px 0 0;
}

.shopping-cart-page.type_configureproduct .sky-config-form .os-card.active .os-header .os-name,
.shopping-cart-page.type_configureproduct .sky-config-form .os-card:hover .os-header .os-name {
    color: #165dff;
}

.shopping-cart-page.type_configureproduct .sky-config-form .os-card.active .version-dropdown .dropdown-btn {
    color: #165dff;
}

/* 系统版本下拉：原主题分隔线 #fafafa / 边框 #fefefe（几乎不可见）→ 换成清晰分隔 + 圆角阴影 */
.shopping-cart-page.type_configureproduct .sky-config-form .os-card .version-dropdown .version-list {
    width: 100%;
    margin-top: 6px;
    padding: 4px;
    background: #fff;
    border: 1px solid #e5e6eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(22, 93, 255, 0.12);
    max-height: 240px;
}

.shopping-cart-page.type_configureproduct .sky-config-form .os-card .version-dropdown .version-list li {
    padding: 9px 12px;
    border-top: 1px solid #f2f3f5;
    font-size: 13px;
    line-height: 1.5;
    color: #4e5969;
    transition: background 0.15s, color 0.15s;
}

.shopping-cart-page.type_configureproduct .sky-config-form .os-card .version-dropdown .version-list li:first-child {
    border-top: none;
}

.shopping-cart-page.type_configureproduct .sky-config-form .os-card .version-dropdown .version-list li:hover {
    background: #f2f7ff;
    color: #165dff;
}

.shopping-cart-page.type_configureproduct .sky-config-form .os-card .version-dropdown .version-list li.active {
    background: #eef4ff;
    color: #165dff;
    font-weight: 600;
}

.shopping-cart-page.type_configureproduct .sky-config-form .os-card .version-dropdown .version-list li[disabled] {
    color: #c9cdd4;
    background: #fff;
}

/* ------------------------------------------------ 下拉控件（IP 数量 / 端口 / 快照 / 数据中心等）
 * 统一 36px 高、8px 圆角、描边；display:inline-flex 是为了让框内文字垂直居中 */
.shopping-cart-page.type_configureproduct .sky-config-form .bootstrap-select {
    width: 100%;
}

.shopping-cart-page.type_configureproduct .sky-config-form .bootstrap-select > .dropdown-toggle {
    display: inline-flex !important;
    align-items: center;
    height: 36px !important;
    padding: 0 14px !important;
    border: 1px solid #e5e6eb !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #1d2129 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.shopping-cart-page.type_configureproduct .sky-config-form .bootstrap-select > .dropdown-toggle .filter-option {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

/* 关键对齐点：bootstrap-select 官方给 .filter-option 写了 height:100%，
 * 会让「1个」这类文字贴在 36px 框的顶部（而不是垂直居中）——这正是标签看着错位的根源之一。
 * 这里撤掉 100% 高度，改由 toggle 的 align-items:center 居中，与标签同一套机制 */
.shopping-cart-page.type_configureproduct .sky-config-form .bootstrap-select > .dropdown-toggle .filter-option,
.shopping-cart-page.type_configureproduct .sky-config-form .bootstrap-select > .dropdown-toggle .filter-option-inner,
.shopping-cart-page.type_configureproduct .sky-config-form .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    height: auto;
    line-height: 1.4;
}

.shopping-cart-page.type_configureproduct .sky-config-form .bootstrap-select > .dropdown-toggle .filter-option {
    display: flex;
    align-items: center;
    align-self: center;
}

.shopping-cart-page.type_configureproduct .sky-config-form .bootstrap-select > .dropdown-toggle:focus,
.shopping-cart-page.type_configureproduct .sky-config-form .bootstrap-select.show > .dropdown-toggle {
    border-color: #165dff !important;
    box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
}

.shopping-cart-page.type_configureproduct .sky-config-form .bootstrap-select > .dropdown-toggle:hover {
    border-color: #a9c4ff !important;
}

.shopping-cart-page.type_configureproduct .sky-config-form .dropdown-menu {
    border: 1px solid #e5e6eb;
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 8px 24px rgba(22, 93, 255, 0.12);
}

.shopping-cart-page.type_configureproduct .sky-config-form .dropdown-menu .inner {
    border-radius: 8px;
}

.shopping-cart-page.type_configureproduct .sky-config-form .dropdown-menu .dropdown-item {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: #4e5969;
}

.shopping-cart-page.type_configureproduct .sky-config-form .dropdown-menu .dropdown-item:hover,
.shopping-cart-page.type_configureproduct .sky-config-form .dropdown-menu .dropdown-item:focus {
    background: #f2f7ff;
    color: #165dff;
}

.shopping-cart-page.type_configureproduct .sky-config-form .dropdown-menu .dropdown-item.active,
.shopping-cart-page.type_configureproduct .sky-config-form .dropdown-menu .dropdown-item:active,
.shopping-cart-page.type_configureproduct .sky-config-form .dropdown-menu .dropdown-item.selected {
    background: #eef4ff;
    color: #165dff;
    font-weight: 600;
}

/* 型号提示（#jxModelTip）：说明文字默认黑色 */
.shopping-cart-page.type_configureproduct .sky-config-form .form-group-text {
    margin-top: 2px;
    border-radius: 8px;
    background: #f7f8fa;
    font-size: 13px;
    color: #1d2129;
}

/* --------------------------------------------------------------- 结算条
 * 结构与 id 全部沿用（ordersummary.tpl 渲染后注入 .configoption_total） */
.shopping-cart-page.type_configureproduct .allocation-card .allocation-footer {
    padding: 12px 20px;
    min-height: 0;
    background: #fff;
    box-shadow: none;
    border-top: 1px solid #f0f2f5;
    border-radius: 0 0 12px 12px;
}

.shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .configurationName {
    color: #4e5969;
    font-size: 13px;
    font-weight: 400;
}

.shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .ordersummarybottom-prefix {
    color: #f53f3f;
    font-size: 14px;
    font-weight: 600;
}

.shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .ordersummarybottom-price {
    color: #f53f3f;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .configure-total-row {
    color: #86909c;
    font-size: 12px;
}

.shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .allocation-footer-l-b span {
    color: #86909c;
    font-size: 12px;
    line-height: 1.6;
}

/* 费用明细：描边胶囊 + 同色系弹层 */
.shopping-cart-page.type_configureproduct .allocation-card .btn-costDetails {
    align-items: center;
    padding: 7px 14px;
    border: 1px solid #e5e6eb;
    border-radius: 8px;
    background: #fff;
    color: #4e5969;
    font-size: 13px;
    line-height: 1.4;
    transition: all 0.2s;
}

.shopping-cart-page.type_configureproduct .allocation-card .btn-costDetails:hover {
    color: #165dff;
    border-color: #a9c4ff;
    background: #f7faff;
}

.shopping-cart-page.type_configureproduct .allocation-card .price-breakdown {
    border: 1px solid #e5e6eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(22, 93, 255, 0.12);
}

/* 加入购物车：与列表页「立即购买」同款渐变按钮 */
.shopping-cart-page.type_configureproduct .allocation-card .btn-buyNow,
.shopping-cart-page.type_configureproduct .allocation-card #addToCartBtn {
    flex: none;
    min-width: 140px;
    height: 38px;
    line-height: 38px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(90deg, #3d7fff 0%, #0053fc 55%, #003bfc 100%);
    transition: opacity 0.2s;
}

.shopping-cart-page.type_configureproduct .allocation-card .btn-buyNow:hover,
.shopping-cart-page.type_configureproduct .allocation-card #addToCartBtn:hover {
    opacity: 0.9;
    color: #fff;
}

/* ------------------------------------------------------------------ 响应式 */
@media (max-width: 1200px) {
    .shopping-cart-page.type_configureproduct .sky-config-form .sky-form-group .sky-form-label {
        min-width: 96px;
        max-width: 96px;
    }
}

@media (max-width: 992px) {
    .shopping-cart-page.type_configureproduct .sky-config-form .sky-form-group.sky-config-row {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 0;
    }

    .shopping-cart-page.type_configureproduct .sky-config-form .sky-form-group .sky-form-label {
        min-width: 100%;
        max-width: 100%;
        line-height: 1.5;
    }

    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .configoption_total {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .allocation-footer-r {
        justify-content: space-between;
    }

    .shopping-cart-page.type_configureproduct .allocation-card .btn-buyNow,
    .shopping-cart-page.type_configureproduct .allocation-card #addToCartBtn {
        width: 100%;
    }
}

/* ==================================================================== 2026-09-21 第二轮
 * ① 周期折扣角标：逻辑整体搬到前端（见 static/script/jjw-config.js），后端与模板零改动
 * ② 「IP数量」「主机名」等行与其它信息行排版统一
 * ③ 操作系统「版本」下拉：贴卡片下沿、与卡片同宽（对齐参考图）
 * ④ 整体布局：宽屏下「表单左栏 + 右侧常驻订单汇总栏」
 * ==================================================================== */

/* ---------------------------------------------- ② 主机名 / 主机密码 等带图标输入框 */
.shopping-cart-page.type_configureproduct .sky-config-form .sky-form-group.sky-config-row .sky-form-input-input-icon .form-control {
    height: 36px;
    padding: 0 14px 0 36px;
    border: 1px solid #e5e6eb;
    border-radius: 8px;
    background: #fff;
    color: #1d2129;
    font-size: 13px;
    box-shadow: none;
}

.shopping-cart-page.type_configureproduct .sky-config-form .sky-form-group.sky-config-row .sky-form-input-input-icon .form-control:disabled,
.shopping-cart-page.type_configureproduct .sky-config-form .sky-form-group.sky-config-row .sky-form-input-input-icon .form-control[readonly] {
    background: #fff;
    color: #1d2129;
    opacity: 1;
}

.shopping-cart-page.type_configureproduct .sky-config-form .sky-form-group.sky-config-row .sky-form-input-input-icon .form-control:focus {
    border-color: #165dff;
    box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
}

/* IP数量（多选型配置项）：与其它控件同一行高、同一列起点、同一字号
 * 用 :has() 只命中「含多选控件」的行，避免影响型号/周期等行；不支持 :has() 的浏览器自动退回原样 */
.shopping-cart-page.type_configureproduct .sky-config-form .sky-form-group.sky-config-row:has(.custom-control.custom-checkbox) > .sky-md-100,
.shopping-cart-page.type_configureproduct .sky-config-form .sky-form-group.sky-config-row:has(.custom-control.custom-checkbox) > .sky-md-25 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 24px;
    min-height: 36px;
}

.shopping-cart-page.type_configureproduct .sky-config-form .sky-form-group.sky-config-row .custom-control.custom-checkbox {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin: 0;
    padding-left: 1.6rem;
}

.shopping-cart-page.type_configureproduct .sky-config-form .sky-form-group.sky-config-row .custom-control-label {
    color: #1d2129;
    font-size: 13px;
    line-height: 1.4;
}

.shopping-cart-page.type_configureproduct .sky-config-form .sky-form-group.sky-config-row .custom-control-label::before,
.shopping-cart-page.type_configureproduct .sky-config-form .sky-form-group.sky-config-row .custom-control-label::after {
    top: 50%;
    transform: translateY(-50%);
}

/* ---------------------------------------------- ③ 系统版本下拉：与卡片同宽、贴卡片下沿 */
.shopping-cart-page.type_configureproduct .sky-config-form .os-card {
    position: relative;
    overflow: visible;
}

.shopping-cart-page.type_configureproduct .sky-config-form .os-card .version-dropdown .version-list {
    left: 0;
    right: 0;
    top: 100%;
    bottom: auto;
    width: auto;
    box-sizing: border-box;
}

/* ---------------------------------------------- ④ 宽屏：左表单 + 右「订单汇总」 */
@media (min-width: 1200px) {
    .shopping-cart-page.type_configureproduct .allocation-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-areas: "tip tip" "head foot" "main foot";
        column-gap: 20px;
        align-items: start;
    }

    .shopping-cart-page.type_configureproduct .allocation-card .allocation-header {
        grid-area: head;
    }

    .shopping-cart-page.type_configureproduct .allocation-card .allocation-mian {
        grid-area: main;
    }

    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer {
        grid-area: foot;
        position: sticky;
        top: 16px;
        border: 1px solid #e5e6eb;
        border-radius: 12px;
        padding: 16px;
    }

    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .configoption_total {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .configoption_total::before {
        content: "订单汇总";
        display: block;
        color: #1d2129;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.4;
    }

    /* display:contents 把「费用明细容器 + 按钮」提到同一层，再用 order 排成
       明细 → 合计 → 按钮（与参考图右栏一致） */
    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .allocation-footer-r {
        display: contents;
    }

    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .details-container {
        order: 1;
        width: 100%;
    }

    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .allocation-footer-l {
        order: 2;
        border-top: 1px solid #f0f2f5;
        padding-top: 10px;
    }

    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer #addToCartBtn,
    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .btn-buyNow {
        order: 3;
        width: 100%;
        min-width: 0;
    }

    /* 费用明细由「悬停弹层」改为右栏常驻清单 */
    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .btn-costDetails {
        display: none;
    }

    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown {
        display: block !important;
        position: static !important;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        text-align: left;
    }

    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown table {
        width: 100%;
        font-size: 12px;
    }

    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown th,
    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown td {
        padding: 7px 0;
        border: 0;
        /* 明细行之间的分隔线：显式画出来（上一版把 border 清成 0，行与行粘连） */
        border-bottom: 1px solid #f2f3f5;
        background: transparent;
        text-align: right;
    }

    /* 末行不再画线，避免与下面的「费用合计」重复一条 */
    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown tr:last-child th,
    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown tr:last-child td {
        border-bottom: 0;
    }

    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown th:first-child,
    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown td:first-child {
        text-align: left;
        color: #4e5969;
    }

    /* 右栏 340px 装不下 5 列：隐藏「配置详情」「折扣优惠」，保留 名称 / 原价 / 折后价 */
    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown .config-details,
    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown .savings {
        display: none;
    }
}

/* ==================================================================== 2026-09-21 第三轮
 * ① 折算改惯例「享8.33折」（jjw-config.js：比率 ×10）
 * ② 周期胶囊统一为「3 文字宽」
 * ③ 右栏独立成卡（不再与左栏共用同一个底层卡片）
 * ④ 右栏跟随屏幕滚动 + 视口垂直居中
 * ==================================================================== */

/* ② 周期（试用/月/季/半年/年）胶囊：统一 4 文字宽、文字居中
 * ⚠️ 必须用 :has(input[name="billingcycle"]) 只限定「周期」这一组：
 *    CPU / 内存 / 系统盘 等选项同样是 .sky-btn-group > .sky-config-btn，
 *    给它们固定宽度会把「Lin30G,Win50G」这类长文本挤出胶囊（上一版踩过）。
 *    其余选项胶囊一律保持宽度自适应（不写 width 即为 auto）。
 *    不支持 :has() 的浏览器自动退回「周期也自适应」，不会坏版 */
.shopping-cart-page.type_configureproduct .sky-config-form .sky-btn-group:has(input[name="billingcycle"]) .sky-config-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(4em + 32px);
    padding: 0 16px;
    box-sizing: border-box;
    text-align: center;
}

@media (min-width: 1200px) {
    /* ③ 把原来的底层大卡片「拆掉」：左栏（卡片头 + 表单主体）拼成一张卡，右栏另起一张
     * overflow 必须显式改回 visible：module.css 给 .allocation-card 写了 overflow:hidden，
     * 而「祖先是 overflow 非 visible」会让子元素的 position:sticky 彻底失效（右栏就不会跟随滚动了） */
    .shopping-cart-page.type_configureproduct .allocation-card {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        overflow: visible;
    }

    .shopping-cart-page.type_configureproduct .allocation-card .allocation-header {
        background: #fff;
        border: 1px solid #e5e6eb;
        border-bottom: 0;
        border-radius: 12px 12px 0 0;
        margin-bottom: 0;   /* module.css 原本给了 2px，会把拼好的左卡中间挤出一道缝 */
    }

    .shopping-cart-page.type_configureproduct .allocation-card .allocation-mian {
        background: #fff;
        border: 1px solid #e5e6eb;
        border-radius: 0 0 12px 12px;
    }

    /* ④ 右栏：只做「跟随滚动」，不做内层滚动、不设 max-height
     * ⚠️ 千万不要给粘滞列加 max-height + overflow-y:auto：内层滚动条会随内容增减反复出现/消失，
     *    每次出现都让列宽 -15px → 文字重排 → 整页高度变化 → 外层滚动条再翻转 → 布局来回抖动
     *    （用户反馈「整个页面卡片左右摇摆」就是它）。右侧超出一屏时让它自然滚走即可 */
    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer {
        background: #fff;
        position: sticky;
        /* 站点顶部导航是 position:fixed（62px），公告条另占 --topadheight：
           粘滞列必须让开它们，否则滚动时会钻到导航底下、看着像「和顶部贴在一起」 */
        top: calc(var(--navheight, 62px) + var(--topadheight, 0px) + 16px);
    }

    /* ⑤ 登录提示（.bgw）：它在 DOM 里本就在卡片头之前，但改成 grid 后成了「未指定区域项」，
     *    被自动排放到了最底部；显式放进 tip 区 → 顶部导航栏下方、商品标题（h1）上方 */
    .shopping-cart-page.type_configureproduct .allocation-card .bgw {
        grid-area: tip;
        margin: 0 0 12px;
        border-radius: 12px;
    }
}

/* ------------------------------------------------------------------ 手机端（≤768px）
 * 手机购买页与 PC 是同一套标记（见 includes/currency.tpl 的 WAP 分支：同一份 jjw-config.css），
 * 这里把 PC 版式压到手机尺寸。选择器统一带 .shopping-cart-page.mobileEnd.type_configureproduct：
 *   ① 比本文件其它 PC 规则多一个类 → 必然覆盖；
 *   ② 与 mobileend.css 的手机规则等权重，靠「本文件在 mobileend.css 之后加载」取胜。
 * 只调尺寸/间距/换行，不改结构；PC 端（机身无 .mobileEnd）完全不受影响。 */
@media (max-width: 768px) {
    /* 主卡片：贴满可用宽度 */
    .shopping-cart-page.mobileEnd.type_configureproduct .allocation-card {
        max-width: none;
        margin: 0;
    }

    /* 配置行：标签整行（继承 ≤992px 的纵向排列），行距与字号收一档 */
    .shopping-cart-page.mobileEnd.type_configureproduct .sky-config-form .sky-form-group.sky-config-row {
        gap: 6px;
        padding: 12px 0;
    }

    .shopping-cart-page.mobileEnd.type_configureproduct .sky-config-form .sky-form-group .sky-form-label {
        height: auto;
        min-height: 0;
        min-width: 0;
        max-width: none;
        font-size: 13px;
        color: #4e5969;
    }

    .shopping-cart-page.mobileEnd.type_configureproduct .sky-config-form .form-group-text {
        font-size: 12px;
    }

    /* 规格/周期胶囊：**自适应宽度的圆角矩形**。
     * 注意：必须同时给出「高度 + line-height:1」——主题 config.css 给的是 line-height:32px，
     * 若只在纵向加 padding，胶囊会变成近正方形，叠加主题的 border-radius:999px 后渲染成椭圆
     * （用户反馈「CPU 和内存的框椭圆太丑」就是它）。宽度按内容自适应，不写死。 */
    .shopping-cart-page.mobileEnd.type_configureproduct .sky-config-form .sky-btn-group {
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .shopping-cart-page.mobileEnd.type_configureproduct .sky-config-form .sky-btn-group .sky-config-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        height: 34px;
        line-height: 1;
        padding: 0 14px;
        border-radius: 10px;
        font-size: 13px;
    }

    /* 操作系统卡：一行一张，避免横向挤压 */
    .shopping-cart-page.mobileEnd.type_configureproduct .sky-config-form .os-container {
        flex-wrap: wrap;
        gap: 10px;
    }

    .shopping-cart-page.mobileEnd.type_configureproduct .sky-config-form .os-card {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .shopping-cart-page.mobileEnd.type_configureproduct .sky-config-form .os-card .version-dropdown .version-list {
        max-height: 220px;
    }

    /* 下拉（系统版本等）：整行宽 + 40px 触控高度 */
    .shopping-cart-page.mobileEnd.type_configureproduct .sky-config-form .bootstrap-select {
        width: 100% !important;
    }

    .shopping-cart-page.mobileEnd.type_configureproduct .sky-config-form .bootstrap-select > .dropdown-toggle {
        width: 100%;
        height: 40px;
        font-size: 13px;
    }

    /* 结算条：mobileend.css 已把它固定在页面底部（页面底部留有 200px 占位）。
     * 这里显式改成纵向堆叠（价格信息 → 说明 → 整宽按钮），并把三段的间距、字号一起压紧，
     * 让固定在底部的这块更紧凑、少占屏幕。
     *
     * ⚠️ 2026-09-21（用户反馈「只压缩了文字高度，框架高度还是原样」）：
     * 之前只改了「费用合计行」和按钮本身，整条结算条只矮了 20px 左右 —— 因为条子的高度是
     * 由「内容的自然高度」决定的，占大头的三块没动：
     *   · 说明块 .allocation-footer-l-b：块自身 font-size:14px、行高继承 body 的 1.5，
     *     行盒按 14×1.5=21px 撑，两句说明就是 42px（span 上的 11px/1.45 管不到行盒高度）；
     *   · 按钮那一行 .allocation-footer-r：被同行「费用明细」胶囊（padding 7px + 13px 字 ≈ 32px）撑高；
     *   · 各处 margin/gap/padding（合计约 34px）。
     * 所以这一轮把这三块一起压：说明 → 单行省略（14px）、胶囊 → 20px、间距 → 最小，
     * 并把 mobileend.css 预留的 200px 底部空间同步收掉。
     * 当前高度账：6 + (17+2) + (2+14+2) + (4+28) + 6 ≈ 81px（按钮后来按用户要求由 19px 增到 28px，
     * 这一行由按钮决定；说明/间距仍是压缩后的值）。
     *
     * 2026-09-21（用户要求「费用合计和加入购物车这个区块的底层框架高度提高 30%」）：
     * 框架高度 = 内容自然高度，想单独把「底层框架」抬高，用 min-height 直接锁：
     * 81 × 1.3 ≈ 105px；多出来的 ~24px 用 justify-content:center 上下均分，
     * 避免全部堆在按钮下方（看着像底部漏了一块空）。 */
    .shopping-cart-page.mobileEnd.type_configureproduct .allocation-card .allocation-footer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        min-height: 105px;   /* 底层框架高度：≈81px × 1.3（2026-09-21 的高度账推导） */
        gap: 4px;
        padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        border-top: 1px solid #f0f2f5;
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
    }

    /* 结算条给页面底部预留的占位高度：**必须 ≥ 框架实际高度 + 它被抬高了多少**，
     * 否则正文尾部会被固定条盖住。
     * mobileend.css 原来是 200px（给约 156px 的老条子留的），框架 105px → 这里 125px
     * （105 + 安全区/余量）。
     * 【2026-10-10 阶段29】结算条已整体抬到官网手机底部导航 .footer-m 之上
     * （mobileend.css 把 bottom 由 0 改成 --wapfooter_navheight），占位必须同步加上这
     * 74px，否则被抬起来的那一段会盖住正文。
     * 【2026-10-12 还原】购物车手机页的底部导航已在模板层删除（common/footer.html 跳过 m_bottom）
     * ⇒ 抬升随之取消，占位回到原来的 125px。 */
    .shopping-cart-page.mobileEnd.type_configureproduct .allocation-card .allocation-mian {
        padding-bottom: 125px;
    }

    /* 2026-09-21（用户要求）：费用合计行高度压到一半 —— 34px → 17px。
     * 这行本来不是被可见文字撑高的：module.css 在标题行里塞了一个纯占位元素
     * .pricePositioning（width:1px、opacity:0，但 font-size:28px），它按继承的行高
     * 1.2 算出 33.6px ≈ 34px，整行高度就由它决定（价格只有 18px）。所以：
     *   ① 手机端把该占位元素归零，避免它继续撑高；
     *   ② 标题行显式给 17px + align-items:center，锁死为原高度的 50%。 */
    .shopping-cart-page.mobileEnd.type_configureproduct .allocation-card .allocation-footer .pricePositioning {
        font-size: 0;
        line-height: 0;
        width: 0;
    }

    .shopping-cart-page.mobileEnd.type_configureproduct .allocation-card .allocation-footer .ordersummarybottom-title {
        gap: 4px;
        height: 17px;
        align-items: center;
        line-height: 1;
    }

    .shopping-cart-page.mobileEnd.type_configureproduct .allocation-card .allocation-footer .configurationName {
        font-size: 12px;
    }

    .shopping-cart-page.mobileEnd.type_configureproduct .allocation-card .allocation-footer .ordersummarybottom-price {
        font-size: 18px;
    }

    .shopping-cart-page.mobileEnd.type_configureproduct .allocation-card .allocation-footer .configure-total-row,
    .shopping-cart-page.mobileEnd.type_configureproduct .allocation-card .allocation-footer .allocation-footer-l-b span {
        font-size: 11px;
        line-height: 1.3;
    }

    /* 「费用合计」这块的上下外边距：6/4 → 2/2 */
    .shopping-cart-page.mobileEnd.type_configureproduct .allocation-card .allocation-footer .allocation-footer-l-t {
        margin: 0 0 2px;
    }

    /* 说明块 —— 上一轮漏掉的最大一块。
     * 只给 span 设 11px 压不住高度：行盒高度取「所在块的行高」与「span 行高」的较大者，
     * 而 .allocation-footer-l-b 自身是 14px、行高继承 body 的 1.5 → 每行 21px，两句说明就是 42px。
     * 现在把块本身也设成 11px/1.3（单行 14.3px）并做单行省略号：42px → 14px。 */
    .shopping-cart-page.mobileEnd.type_configureproduct .allocation-card .allocation-footer .allocation-footer-l-b {
        margin: 2px 0;
        font-size: 11px;
        line-height: 1.3;
    }

    .shopping-cart-page.mobileEnd.type_configureproduct .allocation-card .allocation-footer .allocation-footer-l-b span {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* 按钮那一行（mobileend.css 把 .allocation-footer-r 设成 row-reverse）：
     * · 它被同行的「费用明细」胶囊撑到约 32px —— 按钮压到 19px 也没用，整行还是 32px，
     *   所以这里把胶囊一起压到 20px（下一段规则），行高才真的跟着降；
     * · margin-top 10px → 4px（这一行的上边距是纯留白）；
     * · 显式 height 的按钮在默认 align-items:stretch 下会贴顶，改用垂直居中。 */
    .shopping-cart-page.mobileEnd.type_configureproduct .allocation-card .allocation-footer .allocation-footer-r {
        align-items: center;
        margin-top: 4px;
    }

    /* 费用明细胶囊：padding 7px 14px + 13px 字 ≈ 32px 高，是那一行的实际高度来源。
     * 压到 20px（描边／颜色等由 PC 规则沿用）。手机上它被整宽的按钮挤到可视区外，
     * 但尺寸仍参与这一行的行高计算，必须一起改。 */
    .shopping-cart-page.mobileEnd.type_configureproduct .allocation-card .allocation-footer .btn-costDetails {
        height: 20px;
        line-height: 18px;
        padding: 0 10px;
        font-size: 12px;
        border-radius: 6px;
    }

    /* 2026-09-21（用户要求）：加入购物车按钮高度 —— 先由 38px 压到 19px（-50%），
     * 再按用户要求「增加 50%」：19 × 1.5 = 28.5 → 取 28px。字号保持 14px，只动高度。
     * 高度改回 28px 后，这一行的高度改由按钮决定（费用明细胶囊 20px < 28px）。 */
    .shopping-cart-page.mobileEnd.type_configureproduct .allocation-card .btn-buyNow,
    .shopping-cart-page.mobileEnd.type_configureproduct .allocation-card #addToCartBtn {
        width: 100%;
        min-width: 0;
        height: 28px;
        line-height: 28px;
        margin: 0;
        padding: 0 16px;
        font-size: 14px;
    }

    /* 费用明细弹层：手机上留出安全边距 */
    .shopping-cart-page.mobileEnd.type_configureproduct .allocation-card .price-breakdown {
        max-width: calc(100vw - 32px);
    }
}

/* ==================================================================== 2026-09-27
 * 订单汇总「费用明细」：原价为 0 的明细行自动排到末尾 + 可折叠（PC）
 *   · 行序由 jjw-config.js 调整（有价行 → 折叠条 → 零价行 → 合计行）；
 *   · 这里只负责「默认收起 / 展开后显示」与折叠条外观；
 *   · 手机端（.mobileEnd）：零价行不做隐藏、折叠条隐藏 → 渲染与改动前一致。
 * ==================================================================== */

/* 默认收起：仅 PC 隐藏零价行 */
.shopping-cart-page.type_configureproduct:not(.mobileEnd) .allocation-card .allocation-footer .price-breakdown .ordersummary-table .jjw-zero-row {
    display: none;
}

/* 展开后恢复为普通表格行 */
.shopping-cart-page.type_configureproduct:not(.mobileEnd) .allocation-card .allocation-footer .price-breakdown .ordersummary-table.jjw-zero-open .jjw-zero-row {
    display: table-row;
}

/* 折叠条所在行：整行左对齐、不画分隔线（列数固定 5，colspan 撑满） */
.shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown .jjw-zero-toggle-row td {
    text-align: left !important;
    padding: 8px 0 10px;
    border-bottom: 0;
}

.shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown .jjw-zero-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid #a9c4ff;
    border-radius: 999px;
    background: #f7faff;
    color: #165dff;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown .jjw-zero-toggle:hover {
    background: #eaf2ff;
    border-color: #7eaaff;
}

.shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown .jjw-zero-toggle:focus {
    outline: none;
}

.shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown .jjw-zero-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform 0.2s;
}

.shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown .ordersummary-table.jjw-zero-open .jjw-zero-arrow {
    transform: rotate(180deg);
}

/* 手机端：折叠条不显示（零价行本就不隐藏，与改动前一致） */
.shopping-cart-page.type_configureproduct.mobileEnd .allocation-card .allocation-footer .price-breakdown .jjw-zero-toggle-row {
    display: none;
}

/* ==================================================================== 2026-09-27
 * 「产品名称」行的商品名（.jjw-pname，见 priceBreakdown.tpl）
 *   · 宽屏（≥1200px）右栏只有 340px，「配置详情」列被隐藏 → 商品名看不到；
 *     故在名称格里补一份，且仅在该断点显示（与隐藏配置详情列的断点一致）。
 *   · 其它断点（悬停弹层 5 列）与手机端本就有「配置详情」列 → 默认隐藏，避免重复显示。
 * ==================================================================== */
.shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown .jjw-pname {
    display: none;
}

@media (min-width: 1200px) {
    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown .jjw-pname {
        display: block;
        margin-top: 2px;
        color: #4e5969;
        font-weight: 400;
        line-height: 1.4;
        word-break: break-word;
    }
}

/* ==================================================================== 2026-09-27（第二轮修订）
 * 宽屏（≥1200px）明细表被挤压的修复
 *   根因（第一条）：module.css 把明细列写死宽度（config-name 140px + original-price 160px +
 *     discounted-price 120px，另两列在宽屏已隐藏），右栏只有 340px（内容区约 308px）→ 必然溢出。
 *   根因（第二条，上一版没修掉的真凶）：module.css 有 `.ordersummary-table *` 统一 `white-space:nowrap`，
 *     而上一版只覆盖了 `th, td` —— **单元格里的 <span>（如 .jjw-pname 那个长商品名）仍是 nowrap**，
 *     于是「配置名称」列被长名字撑宽，第 3 列被挤出 `.price-breakdown{overflow:hidden}` 直接裁掉
 *     （用户截图里只露出半个「折扣优惠」就是这个）。
 *   修法：① `white-space:normal` 覆盖到 **所有后代元素**；② 表格改 `table-layout:fixed` +
 *     名称列自适应、两个金额列各 33%，长商品名只能换行、无法撑破表格。
 *   只在本断点内生效；不改 module.css、不影响手机端与 <1200px 的悬停弹层。
 * ==================================================================== */
@media (min-width: 1200px) {
    /* 明细表列宽（2026-09-27 第三版修订）
     *   上一版用 `table-layout:fixed` + 名称列 auto + 两金额列各 33% → **反而把「配置名称」压成一字一行**
     *   （用户截图）：固定布局下宽度分配与内容无关，被 display:none 隐藏的两列及百分比互相挤压，
     *   名称列拿不到应有的剩余宽度。
     *   改为：**自动布局** + 两个金额列用「`width:1%` + `white-space:nowrap`」的经典收缩写法
     *   （列宽＝该列内容宽度，金额不折行），**只有名称列可伸缩** → 长商品名正常换行，金额整块完整。 */
    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown .ordersummary-table {
        table-layout: auto;
    }

    /* 覆盖 module.css 的 `.ordersummary-table *{white-space:nowrap}` —— 必须覆盖到 span 等所有后代，
       否则单元格里的长商品名仍按 nowrap 把整表撑宽 */
    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown .ordersummary-table * {
        white-space: normal;
        overflow-wrap: break-word;
    }

    /* 名称列吃剩余宽度（module.css 写死的 140px 被这里覆盖） */
    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown .ordersummary-table .config-name {
        width: auto;
    }

    /* 两个金额列按内容收缩 + 不折行：既不会把金额拆行，也不会抢名称列的空间。
       `padding-left` 是必需的：上文 `th, td { padding: 7px 0 }` 的横向内边距为 0，
       否则「原价」与「折扣优惠」两列会直接贴在一起（用户截图里表头挤成「原价折扣优惠(无折扣)」）。 */
    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown .ordersummary-table .original-price,
    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown .ordersummary-table .discounted-price {
        width: 1%;
        white-space: nowrap;
        padding-left: 12px;
    }

    /* 行内容垂直居中：商品名换成两行时，右侧金额与名称的中线对齐（否则金额贴在行顶） */
    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown .ordersummary-table th,
    .shopping-cart-page.type_configureproduct .allocation-card .allocation-footer .price-breakdown .ordersummary-table td {
        vertical-align: middle;
    }
}