/* ==========================================================================
 * 极简未来（jijianweilai）购物车主题 · 产品与服务列表页样式
 * 独立命名空间 jjw-*，仅作用于带 .jjw-page 的页面；不修改 module.css / inherit.css
 * ========================================================================== */

/* ------------------------------------------- ① 整页「左右摇摆」根治（预留滚动条槽位）
 * 症状：卡片（详情页是居中的主卡、列表页表现成栅格整体换列）**偶发**左右平移/抖动。
 * 成因：两处布局都按「可用宽度」算位置与列数 ——
 *       详情页主卡 max-width:1120px + margin:0 auto（按可用宽度居中）、
 *       列表页商品卡 repeat(auto-fill, minmax(...,1fr))（按可用宽度定列数）；
 *       而可用宽度 = 窗口宽 − 纵向滚动条宽（15~17px）。本页首屏之后仍会继续增高：
 *       jjw-list.js 注入规格行后收起描述块、jjw-config.js 注入折扣角标、弹幕文案与价格
 *       明细异步渲染、图片与 iconfont 迟到 —— 只要页面总高在视口高度附近来回跨越，
 *       滚动条就反复出现/消失 → 可用宽度 ±15px → 居中卡片左右平移、栅格列数跳变，
 *       这就是「整个页面卡片左右摇摆」，"有概率"= 取决于商品配置行数与窗口高度。
 * 修法：scrollbar-gutter: stable —— 文档始终预留滚动条槽位，可用宽度恒定，
 *       后到的内容再怎么增高也不会改变横向几何。
 *       ⚠️ 这里**故意不用** html{overflow-y:scroll}：html 的 overflow 一旦不是 visible，
 *          body{overflow-x:hidden}（themes/web/www/static/css/typo.css）就不再传播到视口，
 *          body 自己会变成滚动容器 → 详情页右栏 position:sticky 认的滚动容器变成 body
 *          （它永不滚动）→ 粘滞跟随直接失效。scrollbar-gutter 不改 overflow 传播，无此副作用。
 *       不支持该属性的浏览器会忽略它，退回原行为，不会坏版。 */
html {
    scrollbar-gutter: stable;
}

.jjw-page {
    overflow: visible !important;
    height: auto !important;
    /* 底色刷白（2026-09-21 第七轮）：站点 body.inherit{background:#f7f7f9}（inherit.css:64）
     * 是浅灰页面底色，而 .jjw-page 自身透明 —— 它的上/下 padding 区（20px / 48px）与
     * 左右留白就会露出灰底，在内容顶部、底部各形成一条横贯整宽的灰带
     * （用户反馈「整个页面顶部有一层灰色蒙版，但没覆盖整个页面」就是它：不是遮罩元素，
     *   而是页面底色从留白处透出来）。页面自身刷白后灰带消失，留白尺寸与卡片不受影响 */
    background: #fff;
    /* 左右留白：原主题给内容区的是「左 0 / 右 60」（侧栏时代写法），PC 侧栏去掉后左右都没了
     * → 这里补回左右内缩（1920 屏各 81px、1440 各 61px、1024 各 43px），与站点头部内缩对齐；
     * box-sizing 必须显式声明，否则 width:100% + 左右 padding 会撑出横向滚动条
     * 2026-09-21 第五轮：用户要求「整体页边距再增大」→ 上 0→20（详情页同款留白）、
     *   左右 clamp(24,3.5vw,72) → clamp(28,4.2vw,96)、下 40→48 */
    padding: 20px clamp(28px, 4.2vw, 96px) 48px;
    box-sizing: border-box;
}

/* hidden 属性兜底：作者样式里的 display 会压过 UA 的 [hidden]{display:none}，
 * 规格清单容器与「配置类型」行都靠 hidden 控制显隐，这里显式兜底。 */
.jjw-page [hidden] {
    display: none !important;
}

/* 去掉左侧栏后的骨架：单列全宽、页面自然滚动 */
.jjw-page .shopping-cart-content {
    display: block;
}

.jjw-page .shopping-cart-content .shopping-cart-product {
    height: auto;
    overflow: visible;
    padding: 0 0 var(--sky-gap);
}

.jjw-page .shopping-cart-content.style_default .shopping-cart-product {
    padding: 0 0 var(--sky-gap);
}

/* ---------------------------------------------------------------- 顶部筛选区 */
.jjw-bar {
    background: #fff;
    border: 1px solid var(--borderS);
    border-radius: 14px;
    padding: 18px 22px 6px;
    margin-bottom: 20px;   /* 2026-09-21 第五轮：卡片间隔适当扩大 18→20 */
    box-shadow: 0 6px 24px rgba(22, 93, 255, 0.05);
}

.jjw-bar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
}

.jjw-bar-title {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 2026-10-10 P8：换行 + 行距，给「商品组标题 / 标语」留出整行
       （把 .jjw-bar-title 变成两行：第一行 区域名 + 产品数，第二行 .jjw-region-note）。
       刻意把它放在 .jjw-bar-title **里面** —— jjw-partial.js 的局部刷新槽位就是这一格，
       放外面就得同时改 JS 的 SLOTS，多一处可能漂移的地方。 */
    flex-wrap: wrap;
    row-gap: 6px;
    min-width: 0;
}

.jjw-region-name {
    font-size: 22px;
    font-weight: 700;
    color: #1d2129;
    line-height: 1.3;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jjw-count {
    flex: none;
    font-size: 13px;
    color: #165dff;
    background: #eef4ff;
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
}

.jjw-count em {
    font-style: normal;
    font-weight: 700;
}

/* 搜索框（沿用原 id/类名，保证零冲突） */
.jjw-search {
    flex: none;
    width: 340px;
    position: relative;
}

.jjw-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    border: 1px solid var(--borderS);
    border-radius: 10px;
    padding: 0 12px;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.jjw-search-box:focus-within {
    border-color: #165dff;
    box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
}

.jjw-search-input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: #1d2129;
    height: 100%;
}

.jjw-search-icon {
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    color: #86909c;
    -webkit-mask: no-repeat center/contain;
    mask: no-repeat center/contain;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
}

.jjw-search-clear {
    flex: none;
    width: 16px;
    height: 16px;
    display: none;
    cursor: pointer;
    background: currentColor;
    color: #c9cdd4;
    -webkit-mask: no-repeat center/contain;
    mask: no-repeat center/contain;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.jjw-search-clear.is-show {
    display: block;
}

/* --------------------------------------------- 全局搜索下拉面板（jjw-list.js 渲染）
 * 容器由 JS 自建（.jjw-sr-panel，挂进 .jjw-search）；绝对定位、不参与文档流，
 * 因此它自身的滚动条不会影响页面几何 */
.jjw-page .jjw-sr-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 30;
    box-sizing: border-box;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--borderS);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(22, 93, 255, 0.14);
    max-height: min(60vh, 460px);
    overflow-y: auto;
}

.jjw-page .jjw-sr-panel .jjw-sr-head {
    padding: 6px 10px 8px;
    font-size: 12px;
    color: #86909c;
}

.jjw-page .jjw-sr-panel .jjw-sr-head b {
    color: #165dff;
}

.jjw-page .jjw-sr-panel .jjw-sr-none {
    padding: 18px 10px;
    font-size: 13px;
    color: #86909c;
    text-align: center;
}

.jjw-page .jjw-sr-panel .jjw-sr-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}

.jjw-page .jjw-sr-panel .jjw-sr-item:hover,
.jjw-page .jjw-sr-panel .jjw-sr-item.is-on {
    background: #f2f7ff;
}

.jjw-page .jjw-sr-panel .jjw-sr-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    color: #1d2129;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jjw-page .jjw-sr-panel .jjw-sr-name b {
    color: #165dff;
    font-weight: 700;
}

.jjw-page .jjw-sr-panel .jjw-sr-sub {
    flex: 0 0 auto;
    max-width: 34%;
    font-size: 12px;
    color: #86909c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jjw-page .jjw-sr-panel .jjw-sr-price {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: #f53f3f;
    white-space: nowrap;
}

.jjw-page .jjw-sr-panel .jjw-sr-price i {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    color: #86909c;
}

.jjw-page .jjw-sr-panel .jjw-sr-out {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: #f2f3f5;
    font-size: 12px;
    color: #86909c;
}

.jjw-page .jjw-sr-panel .jjw-sr-item.is-out .jjw-sr-name {
    color: #86909c;
}

/* 旧侧栏搜索的容器（cart.js 的旧逻辑会往这里写它自己的下拉）：新版筛选条下不再使用，
 * 一并不论其内容直接隐藏，避免与自建面板同时出现 */
.jjw-page .sky-cart-search-results {
    display: none !important;
}

/* 每一行：行标签 + 内容 */
.jjw-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px dashed #eef0f4;
}

.jjw-row-label {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #165dff;
    background: #eef4ff;
    border-radius: 6px;
    padding: 6px 12px;
    white-space: nowrap;
    margin-top: 2px;
}

.jjw-row-label::before {
    content: "";
    width: 3px;
    height: 13px;
    border-radius: 2px;
    background: #165dff;
}

/* 2026-09-21（用户要求）：三行筛选条默认不选中；展开/收起只由行标签手动控制，并带平滑过渡。
 * 行标签已由 <div> 改成 <button>，这里清掉浏览器默认按钮样式 + 做出明显的「可点」外观。 */
.jjw-row-label {
    border: 1px solid #cfe0ff;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.jjw-row-label:hover {
    background: #e2edff;
    border-color: #a9c4ff;
    box-shadow: 0 2px 6px rgba(22, 93, 255, 0.12);
}

/* 「收起 / 展开」文字提示：让开合入口更明显（文案随状态切换，箭头同步转） */
.jjw-row-hint {
    font-size: 12px;
    font-weight: 400;
    color: #165dff;
    padding-left: 8px;
    border-left: 1px solid #cfe0ff;
}

.jjw-row-hint::after {
    content: "收起";
}

.jjw-row.is-collapsed .jjw-row-hint::after {
    content: "展开";
}

/* 收起时在标签里显示「已选项」，避免收起来后看不到自己选了什么；展开时由列表本身呈现 */
.jjw-row-current {
    font-size: 13px;
    font-weight: 400;
    color: #4e5969;
    max-width: 460px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jjw-row-current:not(:empty)::before {
    content: "：";
}

.jjw-row:not(.is-collapsed) .jjw-row-current {
    display: none;
}

/* 展开/收起箭头（<i> 是行内元素，必须先 inline-block 才能转）；
 * 尺寸/线宽放大一档，配合右侧的「展开/收起」文字，提示更明显 */
.jjw-row-toggle {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 4px;
    border-right: 2px solid #165dff;
    border-bottom: 2px solid #165dff;
    transform: rotate(45deg);   /* 展开：向下 */
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);   /* 与 JS 的 ROW_MS 对齐 */
}

.jjw-row.is-collapsed .jjw-row-toggle {
    transform: rotate(-45deg);  /* 收起：向右 */
}

/* 平滑过渡：高度 + 透明度由 jjw-list.js 驱动（ROW_MS = 240ms，与这里保持一致）。
 * 2026-09-21（用户反馈「展开收起有点卡」）优化：
 *   · 过渡只在动画期间挂上（.jjw-row-anim 由 JS 加/去）—— 平时不挂，窗口缩放/内容变化不会被误动画；
 *   · 属性写死 height / opacity（不再用 all），缓动改用 cubic-bezier(.4,0,.2,1)（起步快、收尾稳）；
 *   · 动画期间 contain:paint 把重绘限制在本行内，并关掉行内其它过渡（见下方规则），减少每帧工作量。 */
.jjw-row.jjw-row-anim .jjw-row-body {
    overflow: hidden;
    contain: paint;
    will-change: height;
    transition: height 0.24s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s linear;
}

/* 动画期间不让行内的 hover/阴影过渡抢帧（箭头的 transform 是合成层操作，保留） */
.jjw-row.jjw-row-anim .jjw-chip,
.jjw-row.jjw-row-anim .jjw-area,
.jjw-row.jjw-row-anim .jjw-row-label,
.jjw-row.jjw-row-anim .jjw-row-current,
.jjw-row.jjw-row-anim .jjw-row-hint {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .jjw-row.jjw-row-anim .jjw-row-body {
        transition: none;
    }
}

/* 物理隐藏放在动画结束后（jjw-row-hidden 由 JS 在收尾时加/去），
 * 不用 .is-collapsed 直接 display:none —— 否则过渡根本播不出来 */
.jjw-row.jjw-row-hidden .jjw-row-body {
    display: none;
}

.jjw-row.is-collapsed {
    align-items: center;
    padding: 10px 0;
}

/* 胶囊 chips（产品类型 / 配置类型） */
.jjw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.jjw-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--borderS);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 14px;
    color: #4e5969;
    background: #fff;
    line-height: 1.2;
    cursor: pointer;
    transition: color 0.18s, border-color 0.18s, background-color 0.18s, box-shadow 0.18s;
}

.jjw-chip:hover {
    color: #165dff;
    border-color: #a9c4ff;
}

.jjw-chip.is-active {
    color: #165dff;
    border-color: #165dff;
    background: #f2f7ff;
    font-weight: 600;
}

.jjw-chip.is-active::before {
    content: "✓";
    font-size: 12px;
    font-weight: 700;
}

/* 配置类型 chips：2026-09-21（用户要求）
 *   · 不限宽、自适应：名称完整显示，不再做 220px 截断 / 省略号；
 *   · 「全部」单独占第一列（外层不换行），其余配置项放进 .jjw-chip-list 在右侧一列内换行，
 *     折行后的左边缘与「全部」右边第一个 chip 对齐；
 *   · 「全部」默认选中（由 jjw-list.js 打上 is-active）。 */
#jjw-config-chips {
    display: flex;
    flex-wrap: nowrap;        /* 「全部」固定在左列，不参与换行 */
    align-items: flex-start;  /* 「全部」与右侧第一行 chip 顶端对齐 */
}

#jjw-config-chips .jjw-chip-all {
    flex: none;
}

/* 2026-09-21（用户要求「同列上下对齐」）：右列改成**等高列网格**——
 * 每个配置项占一个格子，格子宽度相同（≥280px 自适应、剩余空间等分），
 * 因此换行后**同一列的左右边缘都对齐**；名称过长时在格子内换行（不再截断）。
 * 想让按钮宽度贴合文字（只对齐左边缘）就把 justify-items 改成 start。 */
#jjw-config-chips .jjw-chip-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    justify-items: stretch;   /* 同列按钮等宽、左右都对齐 */
    align-items: stretch;     /* 同一行按钮等高 */
    gap: 10px;
    flex: 1;
    min-width: 0;
    align-content: start;
}

#jjw-config-chips .jjw-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;          /* 不溢出容器即可，不再固定 220px 截断 */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left;
    line-height: 1.35;
    vertical-align: middle;
}

/* 地区卡片 */
.jjw-areas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;   /* 2026-09-21 第五轮：卡片间隔适当扩大 12→14 */
    flex: 1;
    min-width: 0;
}

.jjw-area {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--borderS);
    border-radius: 10px;
    background: #fff;
    padding: 12px 40px 12px 14px;
    min-height: 74px;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.jjw-area:hover {
    border-color: #a9c4ff;
    box-shadow: 0 4px 14px rgba(22, 93, 255, 0.08);
}

.jjw-area-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.jjw-flag {
    flex: none;
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
}

.jjw-area-name {
    font-size: 14px;
    font-weight: 600;
    color: #1d2129;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jjw-area-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.jjw-tag {
    font-style: normal;
    font-size: 12px;
    color: #4e5969;
    background: #f2f3f5;
    border-radius: 4px;
    padding: 2px 8px;
    line-height: 1.5;
}

.jjw-area-check {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: none;
}

.jjw-area-check::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor;
    -webkit-mask: no-repeat center/contain;
    mask: no-repeat center/contain;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.2 5.2L20 7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.2 5.2L20 7'/%3E%3C/svg%3E");
}

.jjw-area.is-active {
    background: linear-gradient(135deg, #3d7fff 0%, #0053fc 55%, #003bfc 100%);
    border-color: #0053fc;
    box-shadow: 0 6px 16px rgba(0, 83, 252, 0.25);
}

.jjw-area.is-active .jjw-area-name {
    color: #fff;
}

.jjw-area.is-active .jjw-tag {
    color: #fff;
    background: rgba(255, 255, 255, 0.22);
}

.jjw-area.is-active .jjw-area-check {
    display: block;
    color: #fff;
}

/* ------------------------------------------------- 登录提示（页面顶部白卡）
 * 2026-09-21 第五~六轮：登录提示由 product.tpl 单独 include（includes/logintip.tpl）渲染在
 * .jjw-page 的首位（筛选条之上）= 用户要的「页面顶部」，所以它是 **.jjw-page 的直接子元素**；
 * 这里用 `.jjw-page > .bgw` 精确圈定它，做成与 .jjw-bar / .product-card 同一套卡片语言：
 * 白底 + 1px 描边 + 12px 圆角 + 轻投影；内层 layui 引号块拍平（去蓝底蓝边框、文字色改深色），
 * 只保留语义图标（info 蓝），图标垂直居中。
 * ⚠️ 其它提示条（.jjw-bar 下方的「分类/产品提示」、页面最底部的「区域整体说明」
 *    product_footer.tpl）都是 .shopping-cart-product 里的嵌套 .bgw：
 *    用户明确要求**不要强制清除它们的原格式**（green/red/blue -theme 底色、边框、字色），
 *    因此本文件对嵌套层级的 .bgw 一律不做任何格式覆盖，只在商品栅格下方补一条间距。 */
.jjw-page > .bgw {
    background: #fff;
    border: 1px solid var(--borderS);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(22, 93, 255, 0.05);
    margin: 0 0 20px;
}

.jjw-page > .bgw > .layui-elem-quote {
    margin: 0;
    padding: 14px 20px 14px 52px;   /* 左侧 52px 留给 alert-icon 图标位（原主题同值） */
    background: transparent;
    border: 0;
    border-radius: 12px;
    color: #1d2129;
    line-height: 1.7;
}

/* 模板固定输出一个空 <p></p>，别让它占出行高 */
.jjw-page > .bgw > .layui-elem-quote > p:empty {
    display: none;
}

/* 图标垂直居中（原主题固定 top:12px，提示文案换行后压不住中线） */
.jjw-page > .bgw > .layui-elem-quote.alert-icon::before {
    top: 50%;
    transform: translateY(-50%);
}

.jjw-page > .bgw > .layui-elem-quote a {
    color: #165dff;
    font-weight: 600;
}

/* ------------------------------------------------------------- 商品（配置）卡 */
.jjw-page .sky-productList {
    /* 列数自适应：卡片进一步收窄（min 330 → 260）+ 卡片间距加大（gap 24 → 28）
     * 实测列数/卡宽（窗口宽 → 列数 → 卡宽，已计入左右 padding 与 15px 滚动条）：
     *   2560 → 8 列 / 269px　2200 → 7 列 / 261px　1920 → 6 列 / 267px
     *   1800 → 5 列 / 304px　1600 → 5 列 / 267px　1440 → 4 列 / 305px
     *   1366 → 4 列 / 288px　1280 → 4 列 / 268px　1024 → 3 列 / 289px　768 → 2 列
     * 这样整屏卡宽稳定落在 260~305px（旧值会在 1900 屏附近掉到 4 列 × 418px 的「宽胖」状态） */
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 28px;
    /* 商品栅格下方留出间距：紧跟着的是 product_footer.tpl 的「区域整体说明」提示卡
     * （原 margin-bottom:0 → 提示卡与最后一行商品卡直接贴在一起，用户要求「保持分隔」） */
    margin-bottom: 20px;
}

.jjw-page .product-card {
    border: 1px solid var(--borderS);
    border-radius: 12px;
    box-shadow: none;
    cursor: default;
    padding: 0;
    overflow: hidden;
}

.jjw-page .product-card:hover {
    border-color: #a9c4ff;
    box-shadow: 0 8px 22px rgba(22, 93, 255, 0.08);
}

.jjw-page .jjw-card * {
    font-family: inherit;
}

.jjw-card-body {
    padding: 18px 20px 0;
}

.jjw-page .product-card-header.jjw-card-head {
    background: transparent;
    padding: 0 0 12px;
    border-bottom: 1px solid #f0f2f5;
}

.jjw-page .product-card-header .header-title {
    align-items: flex-start;
    gap: 10px;
}

.jjw-page .product-card-header .header-title h5,
.jjw-page .jjw-card-name {
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 17px;
    font-weight: 700;
    color: #1d2129;
    line-height: 1.45;
    word-break: break-word;
}

.jjw-page .stock-info {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-left: 0;
    padding: 2px 10px;
    border-radius: 999px;
    background: #eafaf1;
    color: #00a854;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.jjw-page .stock-info:after {
    display: none;
}

/* 规格清单（对齐参考图：字号 14px、行距更松、图标 18px、标签深色） */
.jjw-spec {
    padding: 14px 0 6px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jjw-spec-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 26px;
    font-size: 14px;
    line-height: 1.6;
    text-align: left; /* 覆盖主题可能继承的居中/右对齐 */
}

.jjw-spec-ic {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 0;
    color: #4e5969;
}

.jjw-spec-ic svg {
    display: block;
    width: 18px;
    height: 18px;
}

.jjw-spec-k {
    flex: none;
    width: 90px; /* 容纳「支持玩家数」等 5 字标签（14px 字号） */
    color: #1d2129;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jjw-spec-v {
    flex: 1;
    min-width: 0;
    color: #1d2129;
    font-weight: 600;
    text-align: left;
    word-break: break-word;
}

.jjw-spec-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 2px;
    padding: 9px 12px;
    background: #f7f8fa;
    border-radius: 8px;
    font-size: 13px;
    color: #1d2129; /* 说明文字默认黑色（描述里自带颜色的 span 仍按自带颜色渲染） */
    line-height: 1.6;
    text-align: left;
}

.jjw-spec-note-t {
    flex: 1;
    min-width: 0;
    text-align: left;
    word-break: break-word;
}

.jjw-spec-note .jjw-spec-ic {
    margin-top: 1px;
}

/* 无结构化规格时的降级：整段描述 */
.jjw-page .product-card-body {
    padding: 0;
}

.jjw-page .product-description {
    padding: 12px 0 4px;
    font-size: 13px;
    line-height: 1.7;
    color: #1d2129; /* 商品说明文字默认黑色 */
    word-break: break-word;
}

.jjw-has-spec .jjw-desc-wrap {
    display: none;
}

.jjw-card-foot {
    padding: 16px 20px 18px;
}

.jjw-page .product-card .product-Parameters {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border-top: 1px solid #f0f2f5;
    margin-top: 12px;
    padding-top: 14px;
}

.jjw-page .product-card .product-Parameters .pricing-info {
    display: flex;
    /* 2026-09-21（用户要求）：折后价与原价**同一行** —— 原价做成划线灰色跟在折后价右边；
     * 原来是 column，原价独占第二行，而且原价数字还被下面 .amount 的 22px/红色命中 → 一整行红字。 */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    flex: 1 1 140px;
    min-width: 0;
    text-align: left;
    /* 覆盖 module.css 的 padding:2px 20px 0，避免卡片内二次缩进 */
    padding: 0 !important;
}

.jjw-page .product-card .product-Parameters .amount {
    font-size: 22px;
    font-weight: 700;
    color: #f53f3f;
}

.jjw-page .product-card .product-Parameters .period,
.jjw-page .product-card .product-Parameters .currency {
    font-size: 12px;
    color: #86909c;
}

.jjw-page .product-card .product-Parameters .original-price {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 12px;
    color: #86909c;
}

/* 原价数字（含币符）：灰色小字 + 划线。
 * 选择器必须带 .original-price 这一层：本文件的 `.product-Parameters .amount`（22px、#f53f3f）
 * 与 module.css 的 `.original-price .amount`（12px、#777）**同为 4 类选择器**，本文件后加载 →
 * 原价数字被染成大红色，这就是之前第二行整行红字的原因；这里用 5 类选择器直接压回去。 */
.jjw-page .product-card .product-Parameters .original-price .currency,
.jjw-page .product-card .product-Parameters .original-price .amount {
    font-size: 12px;
    font-weight: 400;
    color: #86909c;
    text-decoration: line-through;
}

/* 折扣角标「(7.5折)」保持蓝色、不划线 */
.jjw-page .product-card .product-Parameters .original-price .discount {
    display: inline-block;
    color: #165dff;
    text-decoration: none;
}

.jjw-page .product-card .product-Parameters .trial-info {
    font-size: 12px;
    color: #ff7d00;
    /* 试用价（若有）仍独占一行：否则它会和折后价/原价挤在同一行 */
    flex-basis: 100%;
}

.jjw-page .product-card .product-Parameters .buy-now-button {
    flex: 0 0 auto;
    display: inline-block;
    /* 覆盖 module.css 的 width:100% + margin-top:12px：只占按钮自身宽度，与价格同一行 */
    width: auto !important;
    margin: 0;
    box-sizing: border-box;
    min-width: 112px;
    max-width: 100%;
    height: 38px;
    line-height: 38px;
    padding: 0 18px;
    text-align: center;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(90deg, #3d7fff 0%, #0053fc 55%, #003bfc 100%);
    transition: opacity 0.2s;
}

.jjw-page .product-card .product-Parameters .buy-now-button:hover {
    opacity: 0.9;
    color: #fff;
}

.jjw-page .product-card .product-Parameters .buy-now-button.SellOut {
    background: #c9cdd4;
    color: #fff;
    cursor: not-allowed;
}

/* 筛选/搜索隐藏态 & 空结果提示 */
.jjw-hide {
    display: none !important;
}

.jjw-empty {
    padding: 48px 0;
    text-align: center;
    color: #86909c;
    font-size: 14px;
}

/* ------------------------------------------------------------------ 响应式 */
@media (max-width: 1400px) {
    .jjw-areas {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

@media (max-width: 1200px) {
    .jjw-search {
        width: 260px;
    }
}

@media (max-width: 992px) {
    .jjw-bar-head {
        flex-direction: column;
        align-items: stretch;
    }

    .jjw-search {
        width: 100%;
    }

    .jjw-row {
        flex-direction: column;
        gap: 10px;
    }

    .jjw-areas {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* ---------------------------------------------------------------- 手机端（≤768px）
 * 手机端由 includes/wapbar.tpl 提供「全局搜索 + 配置筛选」，产品/地区交给主题自带的
 * 移动端选择器（head.tpl 的 #sky-wap-productSelector），因此这里不重复那两行。
 * 本块只调尺寸/间距/换行，且全部限定在媒体查询内 —— PC 样式（媒体查询最大 992px）不受影响。
 * 注意 mobileend.css 的规则多带 .shopping-cart-page.mobileEnd 前缀（权重更高），
 * 需要覆盖的少数属性（如购买按钮行高）按同权重写法在后声明，靠加载顺序取胜。 */
@media (max-width: 768px) {
    /* 页面留白：左右收窄（mobileend.css 还给 .sky-productList 加了 8px 内缩，合起来约 16px） */
    .jjw-page {
        padding: 12px 8px 24px;
    }

    /* ---- 顶部条：搜索 + 配置筛选 ---- */
    .jjw-wapbar {
        background: #fff;
        border: 1px solid var(--borderS);
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 12px;
        box-shadow: 0 4px 16px rgba(22, 93, 255, 0.05);
    }

    .jjw-wapbar .jjw-search {
        width: 100%;
    }

    .jjw-wapbar .jjw-row {
        flex-direction: column;
        gap: 8px;
        margin-top: 10px;
        padding: 10px 0 0;
        border-top: 1px solid #f0f2f5;
    }

    /* 配置筛选：横向一行滚动，避免换行把顶部条撑高 */
    .jjw-wapbar .jjw-chips {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .jjw-wapbar .jjw-chips::-webkit-scrollbar {
        display: none;
    }

    .jjw-wapbar .jjw-chip {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* ---- 搜索结果面板 ---- */
    .jjw-page .jjw-sr-panel {
        max-height: 52vh;
    }

    .jjw-page .jjw-sr-panel .jjw-sr-item {
        padding: 10px 8px;
    }

    .jjw-page .jjw-sr-panel .jjw-sr-sub {
        max-width: 40%;
    }

    /* ---- 卡片：单列、间距收紧 ---- */
    .jjw-page .sky-productList {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 14px;
    }

    .jjw-card-body {
        padding: 14px 14px 0;
    }

    .jjw-page .product-card-header.jjw-card-head {
        padding: 0 0 10px;
    }

    .jjw-page .product-card-header .header-title h5,
    .jjw-page .jjw-card-name {
        font-size: 16px;
    }

    .jjw-card-foot {
        padding: 12px 14px 14px;
    }

    .jjw-page .product-card .product-Parameters {
        margin-top: 10px;
        padding-top: 12px;
        gap: 8px;
    }

    .jjw-page .product-card .product-Parameters .amount {
        font-size: 20px;
    }

    /* ---- 规格清单：标签列收窄、行距略紧 ---- */
    .jjw-spec {
        padding: 10px 0 4px;
        gap: 9px;
    }

    .jjw-spec-row {
        font-size: 13px;
        gap: 8px;
        min-height: 22px;
    }

    .jjw-spec-ic,
    .jjw-spec-ic svg {
        width: 16px;
        height: 16px;
    }

    .jjw-spec-k {
        width: 74px;
    }

    .jjw-spec-note,
    .jjw-spec-note-t {
        font-size: 13px;
    }

    /* 原样展示的富文本说明：手机上字号略小、行距收紧 */
    .jjw-page .product-description {
        padding: 10px 0 2px;
        font-size: 14px;
        line-height: 1.7;
    }

    /* ---- 购买按钮：与 mobileend.css 的 line-height:46px 同权重覆盖（本文件后加载） ---- */
    .jjw-page.mobileEnd .shopping-cart-content .shopping-cart-product .sky-productList .product-Parameters .buy-now-button {
        height: 34px;
        line-height: 34px;
    }

    .jjw-page .product-card .product-Parameters .buy-now-button {
        min-width: 96px;
        padding: 0 14px;
        font-size: 13px;
    }

    /* 空结果提示 */
    .jjw-empty {
        padding: 28px 0;
    }
}

@media (max-width: 400px) {
    .jjw-spec-k {
        width: 66px;
    }

    .jjw-page .product-card .product-Parameters .buy-now-button {
        min-width: 88px;
    }
}

/* ------------------------------------------------- 局部刷新（static/script/jjw-partial.js）
 * 点分类/地区时就地替换商品区域。加载反馈分两层（2026-09-27 用户要求）：
 *   ① 蒙版：只降「商品卡网格」子元素的透明度 —— 不给网格整体降透明，否则塞在里面的加载动画会跟着发灰；
 *   ② 加载动画：**与速科模板的设置同源** —— 站点公共头部按后台「预加载动画」渲染出
 *      <div id="loadingModal">…<div class="loader"><div id="bars6"><span>×8</span></div></div>…</div>，
 *      由 jjw-partial.js 整棵克隆成 .jjw-loading-mask 挂进 .jjw-page；动画本体继续吃
 *      themes/web/www/static/css/loading.css 里 #<动画名> 的规则 → 后台换动画这里零改动。
 *   容器是透明 fixed 层：只当定位参照（#bars6 是 absolute + top/left:50%，于是居中在屏幕上，
 *   与速科预加载时的呈现一致），不铺底色、不吃点击。
 * 替换成功时旧节点连同类一起被换掉；请求失败/超时就显式移除。角色名只由该脚本使用。 */
.sky-productList.jjw-loading {
    position: relative;
    pointer-events: none;
}
.sky-productList.jjw-loading > * {
    opacity: 0.45;
    transition: opacity 0.15s;
}
.jjw-loading-mask {
    display: none;
}
.jjw-page.jjw-page-loading .jjw-loading-mask {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: transparent;
    pointer-events: none;
    overflow: hidden;
}

/* ------------------------------------------------- 版式切换条（includes/skinbar）
 * 2026-09-27 用户要求：**经典版与极简版都**把它放在「顶部导航栏右侧」。
 * 它由 includes/head.tpl 渲染在 .navtop-standingPosition > .nav-top-page 内（导航栏对两版式都加载，
 * 所以这两条规则放在 jjw-list.css 而不是 jjw-lite.css）；skinbar.tpl 自带 <style> 里是 margin:0 0 14px，
 * 这里用「2 个类 > 1 个类」的优先级覆盖：
 *   ① margin-left:auto → 父级是 justify-content:flex-start，靠它顶到导航栏最右；
 *   ② 去掉 14px 下外边距并把标签/胶囊缩一档，免得在 50px 高的导航栏里显得挤、把栏撑高；
 *   ③ flex:0 0 auto —— **切换条不被分类说明挤压**（2026-09-27 ui73，用户要求）。
 *      .nav-top-page 是 flex（module.css:23-29），标题块 .nav-top-page-title 与切换条默认都是 flex-shrink:1，
 *      负空间按「各自基础宽度」比例分摊；标题块里那行分类说明 <p> 是长文本（max-content 上千像素），
 *      把标题块的基础宽度撑得远大于切换条 → 收缩额度几乎全落到切换条上，胶囊被压成竖排「经 / 典」。
 *      让切换条退出收缩（宽度＝内容宽），负空间便 100% 由标题块吸收，即「切换条挤压分类说明」而非反向。
 *      （手机端的切换条渲染在 </nav> 之外，不属于 .navtop-standingPosition 的后代，本选择器不匹配它。） */
.navtop-standingPosition .jjwl-skinbar {
    margin: 0 0 0 auto;
    flex: 0 0 auto;         /* 不参与压缩：宽度＝「页面版式 经典 极简」的内容宽 */
}

.navtop-standingPosition .jjwl-skinbar .jjwl-skinbar-label {
    font-size: 12px;
}

.navtop-standingPosition .jjwl-skinbar .jjwl-skinbar-item {
    padding: 4px 12px;
    font-size: 12px;
}

/* ============================================================================
 * 手机 / 平板端（**不依赖 768 断点**）
 * 2026-09-27 第五轮（用户实测：竖屏手机 + 平板横屏；授权「是，先试一下方案B」）
 *
 * 本块只修两处「为什么手机/平板只能用经典版式」的缺陷。
 * **2026-09-27 ui70（授权「是」）：本块由 jjw-lite.css 迁到本文件（jjw-list.css）** —— 手机端缺省
 *   已改为经典，而 jjw-lite.css 只在「极简版式」下加载，经典版式（含平板横屏）拿不到这些定位；
 *   jjw-list.css 在 wap 的两种版式下都加载、PC 端不加载（见 includes/currency.tpl）。
 * 未动 mobileend.css / module.css / cart.js / cart/server / 站点主题（themes/web/www）。
 *
 * 缺陷①（平板横屏，视口 >768px）：面板 #sky-wap-productSelector 的**全部**样式都写在 mobileend.css 里，
 *   而 mobileend.css 整个文件包在一个 @media (max-width:768px) 内 —— 视口一过 768px，面板一点样式都没有，
 *   退回普通文档流，于是「顶在整页最上方、和商品区连成一片」（用户原话）。
 *   同理掉回文档流的还有顶部购物车条 .navtop-standingPosition.Positionawp：module.css 给它的 top 用了
 *   本站未定义的 --navheight，需要按站点头高 --wapnavheight 让位，内部布局也要补回来。
 *
 * 缺陷②（竖屏手机，≤768px）：极简壳渲染出来的类名是 `fullScreenmobileEnd` —— fullScreen 与 mobileEnd
 *   被模板引擎粘成了一个词，所以 mobileend.css 里所有 `.shopping-cart-page.mobileEnd{...}` 规则
 *   **匹配不到极简壳**，极简壳因此拿不到手机盒模型（position:initial / height:max-content / max-width:100% /
 *   overflow:initial）；经典壳的类名是分开的 `fullScreen mobileEnd`，所以经典端一直正常 ——
 *   这正是「手机端目前只能使用经典样式」的直接原因。这里用极简壳独有的 .jjwl-page 等价补齐（不改模板）。
 *
 * 安全性：下面所有选择器都带 wap 独有钩子（.Positionawp / .sky-wap-product-selector / .Positionawp ~ .jjwl-page），
 *   PC 页面里这些元素不存在 → PC 端渲染与行为完全不受影响（PC 只是多几 KB CSS）。
 *   数值照抄 mobileend.css 的等价规则；本文件在其之后加载，≤768px 时等特异性下覆盖为相同值
 *   → 手机端观感与此前一致，只有 >768px 才真正补上缺失的定位。
 * ============================================================================ */

/* ①-1 面板本体：整屏自左侧滑入（不再依赖 768 断点） */
.sky-wap-product-selector {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
}

.sky-wap-product-selector.active {
    transform: translateX(0);
}

/* ①-2 面板内部骨架（照抄 mobileend.css 393-539 的等价规则，去掉其对 768 断点的依赖） */
.sky-wap-product-selector .product-selector-body {
    width: 100%;
    height: 100%;
    display: flex;
    background: #fff;
    flex-direction: column;
}

.sky-wap-product-selector .product-selector-body .product-selector-header {
    display: flex;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #eff1f4;
}

.sky-wap-product-selector .product-selector-body .product-selector-header span {
    font-size: 16px;
    font-weight: 400;
    color: #333;
}

.sky-wap-product-selector .product-selector-body .product-selector-header span:first-child {
    flex-grow: 1;
}

.sky-wap-product-selector .product-selector-body .product-selector-header span:nth-child(2) {
    font-weight: bold;
    text-align: center;
}

.sky-wap-product-selector .product-selector-body .product-selector-header i.develop {
    cursor: pointer;
    color: #999;
}

.sky-wap-product-selector .product-selector-body .product-selector-main {
    display: flex;
    flex: 1;
    justify-content: space-between;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

.sky-wap-product-selector .product-selector-body .product-selector-main .sky-wap-products {
    display: flex;
    flex-direction: column;
    height: calc(var(--vh, 1vh) * 100);
    overflow-x: scroll;
}

.sky-wap-product-selector .product-selector-body .product-selector-main .sky-wap-products.sky-wap-primary {
    padding-top: 12px;
    padding-bottom: 160px;
    background-color: #f4f8ff;
}

.sky-wap-product-selector .product-selector-body .product-selector-main .sky-wap-products.sky-wap-primary .sky-wap-product {
    padding: 16px 10px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    font-size: 15px;
    max-width: 110px;
    width: 110px;
    min-width: 110px;
}

.sky-wap-product-selector .product-selector-body .product-selector-main .sky-wap-products.sky-wap-primary .sky-wap-product.highlight {
    background-color: #fff;
    color: var(--Original);
    font-weight: 500;
    position: relative;
}

.sky-wap-product-selector .product-selector-body .product-selector-main .sky-wap-products.sky-wap-primary .sky-wap-product.highlight:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: var(--Original);
}

.sky-wap-product-selector .product-selector-body .product-selector-main .sky-wap-products.sky-wap-secondary {
    padding-top: 12px;
    padding-bottom: calc(var(--vh, 1vh) * 100 - 118px);
    flex: 1;
    width: 100%;
    display: flex;
    overflow-y: auto;
}

.sky-wap-product-selector .product-selector-body .product-selector-main .sky-wap-products.sky-wap-secondary .sky-wap-sub-products {
    margin-bottom: 20px;
    padding: 0 10px;
}

.sky-wap-product-selector .product-selector-body .product-selector-main .sky-wap-products.sky-wap-secondary .sky-wap-sub-products .sky-wap-sub-product-name {
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 16px;
    color: #000;
}

.sky-wap-product-selector .product-selector-body .product-selector-main .sky-wap-products.sky-wap-secondary .sky-wap-sub-products .sky-wap-sub-products-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.sky-wap-product-selector .product-selector-body .product-selector-main .sky-wap-products.sky-wap-secondary .sky-wap-sub-products .sky-wap-sub-products-list .sky-wap-sub-product {
    padding: 8px 0;
    border: 1px solid #d4d6d9;
    border-radius: 2px;
    width: 100%;
    text-align: center;
    font-size: 13px;
    position: relative;
}

.sky-wap-product-selector .product-selector-body .product-selector-main .sky-wap-products.sky-wap-secondary .sky-wap-sub-products .sky-wap-sub-products-list .sky-wap-sub-product a {
    display: block;
    font-size: 14px;
    color: #333;
    text-decoration: none;
}

.sky-wap-product-selector .product-selector-body .product-selector-main .sky-wap-products.sky-wap-secondary .sky-wap-sub-products .sky-wap-sub-products-list .sky-wap-sub-product .tagline {
    position: absolute;
    bottom: 80%;
    right: 4px;
    background: #ff7f50;
    padding: 2px 8px;
    color: #fff;
    border-radius: 2px;
}

.sky-wap-product-selector .product-selector-body .product-selector-main .sky-wap-products.sky-wap-secondary .sky-wap-sub-products .sky-wap-sub-products-list .sky-wap-sub-product.active {
    background-color: #f4f8ff;
    color: var(--cart_mainColor);
}

.sky-wap-product-selector .product-selector-body .product-selector-main .sky-wap-products.sky-wap-secondary .sky-wap-sub-products .sky-wap-sub-products-list .sky-wap-sub-product.active a {
    color: var(--cart_mainColor);
}

/* ①-3 顶部购物车条：让开站点头（62px）+ 内部布局（>768px 时 mobileend.css 不生效） */
.navtop-standingPosition.Positionawp {
    top: var(--wapnavheight);
}

.navtop-standingPosition.Positionawp .nav-top-page {
    justify-content: space-between;
    width: 100%;
}

.navtop-standingPosition.Positionawp .nav-top-page .nav-top-page-icon {
    display: flex;
    align-items: center;
}

.navtop-standingPosition.Positionawp .nav-top-page .nav-top-page-icon span {
    font-size: 15px;
}

.navtop-standingPosition.Positionawp .nav-top-page .nav-top-page-icon i {
    color: #ccc;
    font-weight: 400;
}

.navtop-standingPosition.Positionawp .nav-top-page .nav-top-page-inventory {
    color: #9e9e9e;
    font-size: 14px;
    display: flex;
    gap: 3px;
}

.navtop-standingPosition.Positionawp .nav-top-page .nav-top-page-inventory .quantity {
    color: #ff9800;
}

/* ② 极简壳的手机盒模型：等价于 mobileend.css 的 .shopping-cart-page.mobileEnd，但改用极简壳独有的
    .jjwl-page（那个 mobileEnd 词被粘住了匹配不上）。
    不设 margin-top：页面上方由同级的 .jjwl-skinbar--wap 自己的 margin 让位（它带 50+62+8px 的偏移），
    与当前手机端观感保持一致；configureproduct / viewcart 用的是另一套壳（类名正常分开），不受本块影响。 */
.navtop-standingPosition.Positionawp ~ .shopping-cart-page.jjwl-page {
    position: initial;
    height: max-content;
    max-width: 100%;
    width: 100%;
    overflow: initial;
}

/* ==========================================================================
 * 商品卡精修（全版式 · 2026-10-09）
 * 用户三点要求：①内容不再互相挤压 ②取消"说明行"被误判后的灰底加重
 *   ③标题与内容用实黑线隔开、内容每行用灰白虚线隔开、整体紧凑
 *
 * 落点说明（为什么要写在本文件）：本文件在 **PC 极简 / PC 经典 / 手机极简 / 手机经典**
 *   四种组合下都加载（currency.tpl PC:21、WAP:39），是唯一覆盖全部版式的卡片样式层；
 *   元素钩子统一用两版式共有的 .jjw-card / .jjw-card-head / .jjw-card-body / .jjw-card-foot /
 *   .jjw-spec / .jjw-spec-row / .jjw-spec-note / .jjw-spec-k / .jjw-spec-v / .jjw-desc，
 *   不依赖极简独有的 jjwl-* 类。
 * 优先级：极简版下 jjw-lite.css 在本文件之后加载，其旧值多为 3 类选择器（0,3,0）——
 *   故本块关键规则统一用 `.jjw-page .product-card.jjw-card .xxx`（4 类）压过，不依赖加载顺序。
 * 尺寸：不再按断点分叉，手机端与 PC 同一组数值（描述 12px、规格行 13px、标签列 72px、内边距 12/14）。
 * 覆盖对象含**商品描述自带的内联 <style>**（.tftable / .hby_adv），用「更高优先级 + !important」压过。
 * ========================================================================== */

/* -------------------------------------------- ① 标题 ↔ 内容：灰实分隔线
 * 原 jjw-list.css 基线与 jjw-lite.css 均为 #f0f2f5 浅灰实线；
 * 曾试纯黑 #1d2129（用户反馈「突兀」）→ 改为站内主黑加 35% 不透明度：
 * 白底上等效约 #b9bcc2，比内容行的灰白虚线 #e5e6eb 深一档、保住层级，又比纯黑柔和。 */
.jjw-page .product-card.jjw-card .jjw-card-head {
    border-bottom: 1px solid rgba(29, 33, 41, 0.35);
}

/* -------------------------------------------- ② 内容行：灰白虚线分隔 + 取消说明行灰底
 * 行间不再靠 gap 撑开，改由每行自身 padding + 虚线负责；
 * `.jjw-spec > *` 直接命中 .jjw-spec-row 与 .jjw-spec-note —— 后者原本是
 * #f7f8fa 灰底 + 8px 圆角块（用户反馈的「阴影加重」），从此与普通行同一套行样式。 */
.jjw-page .jjw-card .jjw-spec {
    gap: 0;
    padding: 2px 0;
}

.jjw-page .jjw-card .jjw-spec > * {
    background: none;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 5px 0;
}

.jjw-page .jjw-card .jjw-spec > * + * {
    border-top: 1px dashed #e5e6eb;
}

.jjw-page .jjw-card .jjw-spec .jjw-spec-row,
.jjw-page .jjw-card .jjw-spec .jjw-spec-note {
    align-items: flex-start;
    min-height: 0;
    font-size: 13px;
    line-height: 1.5;
}

.jjw-page .jjw-card .jjw-spec .jjw-spec-note .jjw-spec-note-t {
    color: #1d2129;
}

/* -------------------------------------------- ③ 紧凑：卡体 / 页脚 / 描述字号 */
.jjw-page .product-card.jjw-card .jjw-card-body {
    padding: 12px 14px 0;
}

.jjw-page .product-card.jjw-card .jjw-card-foot {
    padding: 12px 14px 14px;
}

.jjw-page .product-card.jjw-card .product-description {
    padding: 0;
    font-size: 12px;
    line-height: 1.5;
}

/* -------------------------------------------- ④ 防挤压（路径 B：JS 生成的规格清单）
 * 标签列固定 72px（title 属性仍保留完整文字），把余量让给值列；
 * 长值只换行、不断词，不再挤压标签。 */
.jjw-page .jjw-card .jjw-spec .jjw-spec-k {
    flex: 0 0 72px;
    width: 72px;
}

.jjw-page .jjw-card .jjw-spec .jjw-spec-ic,
.jjw-page .jjw-card .jjw-spec .jjw-spec-ic svg {
    width: 16px;
    height: 16px;
}

.jjw-page .jjw-card .jjw-spec .jjw-spec-ic {
    margin-top: 1px;
}

.jjw-page .jjw-card .jjw-spec .jjw-spec-v {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* -------------------------------------------- ⑤ 防挤压 + 虚线（路径 A：描述整段 HTML）
 * 例：本站「香港特价」的 <table class="tftable">（描述自带 font-size:14px / padding:4px 6px /
 * td:first-child 加粗改色）—— 表格定宽 + 首列定宽 + 顶对齐：标签不换行、跨卡片左缘对齐、
 * 值列不再横向溢出。 */
.jjw-page .product-description table {
    width: 100% !important;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

.jjw-page .product-description table td {
    padding: 5px 0 !important;
    vertical-align: top;
    white-space: normal;
    overflow-wrap: anywhere;
}

.jjw-page .product-description table td:first-child {
    width: 64px;
    padding-right: 8px !important;
    color: #86909c !important;
    font-weight: 400 !important;
}

.jjw-page .product-description table tr + tr > td {
    border-top: 1px dashed #e5e6eb;
}

/* 描述由 convertToContentItem 输出时（后台开启「优化商品描述」的区域），行结构是 .content-item */
.jjw-page .product-description .content-item + .content-item {
    border-top: 1px dashed #e5e6eb;
    padding: 5px 0;
}

/* 描述自带的右侧浮动徽标（.hby_adv，例「睿频3.7Ghz」）：取消浮动改为值后内联徽标，
 * 窄卡下不再压住标签或掉到下一行 */
.jjw-page .product-description .hby_adv {
    float: none !important;
    display: inline-block;
    margin: 0 0 0 6px;
    vertical-align: 1px;
}

/* ==========================================================================
 * 【2026-10-10 P8】商品组标语 —— 放回「商品区域顶部」
 *
 * 数据源（速科原模板同源）：`shd_product_groups.headline`（标题）/ `.tagline`（标语）
 *   —— 冻结进 static/data/product.php 的 `children[].custom.headline / .tagline`。
 *   速科原模板把 name / headline / tagline 摆在商品区域顶部的蓝卡里
 *   （cart/default/sidebar-categories.tpl）。
 *
 * 症状（用户反馈）：标语被当成「推荐标签」塞进地区卡片里（.jjw-area-tags > .jjw-tag），
 *   又长又挤还挤错位置；而标题（headline）**哪里都没显示**。
 * 现在：只把**长标语 tagline** 落在这里（区域名下方整行），且要求分组同时有 headline
 *   —— 没有 headline 的分组，它的 tagline 只是短标签，位置在**分类列表对应分类的右侧**
 *   （.jjw-area-tags > .jjw-tag，见 filterbar.tpl）；两者都没有时容器留空，
 *   交给 jjw-list.js 的 fillAreaTags() 按分组名关键词生成短标签。
 * ========================================================================== */
.jjw-region-note {
    flex: 1 1 100%;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #4e5969;
}

.jjw-region-tagline {
    min-width: 0;
    word-break: break-word;
}

/* ==========================================================================
 * 【2026-10-10 P8】结算页（viewcart）在 PC 上没让开固定条 —— 内容触顶
 *
 * 结算页的外壳是 .shopping-cart-viewcart.comp_container，**不是** .shopping-cart-page，
 * 拿不到 module.css 给列表 / 配置页的
 *   top: calc(var(--pageheight) + var(--navheight) + var(--distanceFromPage))
 * ⇒ 内容从文档顶部开始，被「站点固定导航(62px) + 购物车顶部条(50px)」压住（用户反馈「触顶」）。
 * 手机端 mobileend.css 早就给同一个节点写过 padding（--wapnavheight + --pageheight + gap），
 * PC 端漏写 —— 这里补同一条（同一套令牌，数值口径与手机端一致）。
 * 本文件只在 PC 加载（includes/currency.tpl 的 {if $client=='pc'}），无需再套媒体查询。
 * ========================================================================== */
.shopping-cart-viewcart .sky-viewcart-body {
    padding-top: calc(var(--navheight, 62px) + var(--pageheight, 50px) + var(--top-bottom-gap, 20px));
    padding-bottom: 40px;
}