/* ==========================================================================
 * 极简未来 · 极简版列表页（PC）— **默认版式**（2026-09-27 起）；cookie jjw_layout=classic 时才走经典版
 *
 * 设计令牌全部沿用经典版（色板 / 圆角 / 字号 / 描边 / 阴影），保证两套版式同一个"语汇"：
 *   主蓝 #165dff · 渐变 #3d7fff→#0053fc→#003bfc · 文字 #1d2129/#4e5969/#86909c
 *   边框 var(--borderS)=#e5e6eb · 浅底 #f7faff/#f2f7ff · 圆角 14/10/8px
 *   卡片阴影 0 6px 24px rgba(22,93,255,.05)（与 .jjw-bar / .product-card 一致）
 *
 * 卡片本体继续吃 jjw-list.css 的既有规则（.jjw-page .product-card…），这里只补：
 *   左栏分类树、区域卡（hero）、卡片网格列宽、售罄/仅剩角标、窄屏兜底。
 * 类前缀统一 jjwl-，避免与经典版 jjw-* 选择器互相干扰。
 *
 * 间距节奏（2026-09-27 整体协调优化：全页只保留三级，不再出现 10/12/14/16/20 混用）：
 *   ① 区块间 = 20px —— 由 .jjwl-main 的 flex + gap 独占这一层
 *      （分类标题卡 hero / 商品组提示框 productnotice / 商品卡网格 / 底部整体说明 / 空态），
 *      与主题自带令牌 --sky-gap、--content-gap、--top-bottom-gap（三者都是 20px）同值；
 *      因此 hero 与 .sky-productList 自带的 margin-bottom 必须清零，否则会与 gap 叠成 40px。
 *   ② 卡片间 = 16px —— 卡片网格 gap 保持比区块间更小（组内 < 组间，才有"分组"观感）。
 *   ③ 卡片内 = 12/14/18/20px —— 沿用经典版实测值（.jjw-card-body / .jjw-card-foot），两版式一致。
 * 圆角同样分三级：容器块 14px（左栏 / hero / 空态 / 底部说明）、商品卡 12px（与经典版同值）、
 *   控件 8~10px（叶子 / 搜索框 / 按钮）；字色沿用 #1d2129 / #4e5969 / #86909c 三级。
 * ========================================================================== */

/* ------------------------------------------------------------------ 版式骨架 */
.jjwl-page .jjwl-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.jjwl-page .jjwl-side {
    background: #fff;
    border: 1px solid var(--borderS, #e5e6eb);
    border-radius: 14px;
    /* 上下留白对称（原 14/10 会让卡片底部显窄） */
    padding: 14px 12px 12px;
    box-shadow: 0 6px 24px rgba(22, 93, 255, 0.05);
    /* 2026-09-27（用户要求「侧边栏的上下滑动不要和整个商品区域整体（一起滚）」）：
     * 把左栏做成"自己会滚的一栏" —— 卡片高度封顶在可视区内
     * （= 吸顶偏移 + 上下各 16px 留白，偏移量与下面的 top 用同一套变量，改一处即可），
     * 搜索框钉在卡片顶部，分类树在它下面自己的区域里滚动（见 .jjwl-tree）。
     * ⚠️ 卡片本身仍然 overflow:visible —— 搜索下拉面板要继续能溢出卡片显示，
     *    所以滚动条只加在 .jjwl-tree 上，不加在卡片上。 */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--navheight, 62px) - var(--pageheight, 50px) - var(--topadheight, 0px) - 32px);
    /* 跟随滚动；刻意不设 overflow —— 搜索下拉面板要能溢出卡片显示 */
    position: sticky;
    /* 吸顶偏移必须让开**两条**固定条：站点导航（--navheight）+ 本页自带条
     * .navtop-standingPosition（module.css:14-29：position:fixed、top:var(--navheight)、
     * height:var(--pageheight)=50px；.shopping-cart-page 的 top 也按 --pageheight + --navheight 下压）。
     * 2026-09-27 修复：原先漏掉 --pageheight，滚动时左栏顶部约 50px 会被本页固定条盖住。 */
    top: calc(var(--navheight, 62px) + var(--pageheight, 50px) + var(--topadheight, 0px) + 16px);
}

/* 右侧主列 = 极简版的「区块节奏容器」：hero / 卡片网格 / 底部说明 / 空态之间全部靠这里的
 * gap 分隔，各区块自身不再写 margin-bottom（见文件头「间距节奏①」） */
.jjwl-page .jjwl-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* 搜索框：在左栏里占满宽度（其余样式仍由 jjw-list.css 提供） */
.jjwl-page .jjwl-search .jjw-search-box {
    width: 100%;
}

/* 2026-09-27（用户反馈「侧边栏顶部搜索框超出对齐」）修复：
 * jjw-list.css 的 .jjw-search 是给经典版顶部条写的 flex:none; width:340px；
 * 放进 268px 左栏（内容宽 268−12×2 = 244px）后会横向溢出卡片约 96px，
 * 连带 JS 自建的下拉面板（left:0;right:0 按父元素宽度定位）一起偏出。
 * 这里按卡片内容宽自适应。用 .jjwl-side .jjwl-search 压过 jjw-list.css 里 .jjw-search
 * 的固定宽及它的 ≤1200px 媒体查询（媒体查询不提高优先级）；选择器不再带 .jjwl-page，
 * 使配置页（无 .jjwl-page）里的抽屉搜索框同样自适应，避免 340px 固定宽溢出抽屉。 */
.jjwl-side .jjwl-search {
    width: auto;
    max-width: 100%;
    /* 搜索框钉在卡片顶部、不参与内部滚动（滚动只发生在下面的分类树里） */
    flex: 0 0 auto;
}

/* 分类树 = 左栏的"内部滚动区"：未到两端时只滚树自己；滚到两端后接力滚动整页
   （overscroll 用默认 auto，让滚动链穿透），避免侧栏到底后正文被截断在屏幕外。 */
.jjwl-page .jjwl-side .jjwl-tree {
    flex: 1 1 auto;
    min-height: 0;            /* flex 子项要能被压缩，overflow 才会真正生效 */
    overflow-y: auto;
    overscroll-behavior: auto;
    scrollbar-width: thin;    /* 左栏内容宽较窄，用细滚动条不挤内容 */
    scrollbar-color: #c9cdd4 transparent;
}

.jjwl-page .jjwl-side .jjwl-tree::-webkit-scrollbar {
    width: 6px;
}

.jjwl-page .jjwl-side .jjwl-tree::-webkit-scrollbar-thumb {
    background: #d5d9e0;
    border-radius: 3px;
}

.jjwl-page .jjwl-side .jjwl-tree::-webkit-scrollbar-track {
    background: transparent;
}

.jjwl-page .jjwl-search {
    margin-bottom: 12px;   /* 搜索框→分类树：组内间距（小于区块间 20px） */
}

/* ------------------------------------------------------------------ 分类树 */
.jjwl-tree-title {
    color: #86909c;
    font-size: 12px;
    padding: 2px 10px 6px;   /* 左缘 10px = 下方分组标题文字左缘，两行左对齐 */
}

.jjwl-group {
    border-radius: 8px;
}

/* 一级行 = 开关（2026-09-27 用户要求「分类菜单一级菜单应支持收缩与展开」）：
 * 整行都可点（脚本委托在 .jjwl-group-head 上），类型名链接仍跳转；
 * 配合 hover 底色 + cursor，让"可点"一眼可见（原先只有右侧 22px 小箭头能点）。 */
.jjwl-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 6px 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.18s;
}

.jjwl-group-head:hover {
    background: #f7faff;
}

.jjwl-group-name {
    flex: 1 1 auto;
    min-width: 0;
    color: #1d2129;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jjwl-group-head:hover .jjwl-group-name,
.jjwl-group.is-current .jjwl-group-name {
    color: #165dff;
}

/* 展开/收起箭头：点击热区放大到 26×26（原 22）、线宽加粗到 2px（原 1.6），
 * margin-right:-2px 抵消放大后箭头中心的偏移，箭头视觉位置与叶子标签右缘保持原对齐。 */
.jjwl-caret {
    flex: 0 0 auto;
    position: relative;
    width: 26px;
    height: 26px;
    margin-right: -2px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.jjwl-caret::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid #86909c;
    border-bottom: 2px solid #86909c;
    transform: translate(-50%, -70%) rotate(45deg);
    transition: transform 0.2s;
}

.jjwl-group-head:hover .jjwl-caret::before {
    border-right-color: #165dff;
    border-bottom-color: #165dff;
}

.jjwl-group.is-open .jjwl-caret::before {
    transform: translate(-50%, -30%) rotate(-135deg);
}

/* 叶子相对分组标题内缩 + 一条 1px 导引线：原先分组名与叶子文字左缘完全相同（都是 22px），
 * 看不出从属关系；改后分组名文字 22px、叶子文字 36px（12 卡片内缩 + 5 + 9 + 10）。 */
.jjwl-group-body {
    display: none;
    margin: 2px 0 6px 5px;
    padding: 0 0 0 9px;
    border-left: 1px solid #f0f2f5;
}

.jjwl-group.is-open .jjwl-group-body {
    display: block;
}

.jjwl-leaf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #4e5969;
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.18s, border-color 0.18s, background-color 0.18s;
}

.jjwl-leaf:hover {
    color: #165dff;
    border-color: #dbe7ff;
    background: #f7faff;
}

.jjwl-leaf.is-active {
    color: #165dff;
    border-color: #a9c4ff;
    background: #f2f7ff;
    font-weight: 600;
}

.jjwl-leaf-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jjwl-tag {
    flex: 0 0 auto;
    font-style: normal;
    font-size: 11px;
    line-height: 1.5;
    color: #165dff;
    background: #eaf2ff;
    border-radius: 4px;
    padding: 1px 6px;
}

/* ------------------------------------------------------------ 区域卡（hero） */
.jjwl-page .jjwl-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--borderS, #e5e6eb);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 0;   /* 区块间距由 .jjwl-main 的 gap 统一给（原 20px 会叠成 40px） */
    box-shadow: 0 6px 24px rgba(22, 93, 255, 0.05);
}

.jjwl-page .jjwl-hero-main {
    min-width: 0;
}

.jjwl-page .jjwl-hero-title {
    margin: 0;
    color: #1d2129;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

.jjwl-page .jjwl-hero-desc {
    margin-top: 8px;
    /* 区域说明是后台填写的富文本 → 只给间距与换行，不覆盖字体/颜色/行高
     * （2026-09-27 用户要求：不要强制清除说明、公告等内容的原有格式），按内容自身 HTML 渲染 */
    word-break: break-word;
}

/* 【2026-10-10 P8】商品组标语 —— 区域卡标题下方整行（经典版同款信息落在 .jjw-bar-title 第二行）。
 * 只在分组同时有「商品组标题」headline 时才输出（见 lite/hero.tpl）：
 * 没有 headline 的分组，它的 tagline 只是短标签，位置在左栏分类树对应分类的右侧（.jjwl-tag）。 */
.jjwl-page .jjwl-hero-note {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.7;
    color: #4e5969;
}

.jjwl-page .jjwl-note-tagline {
    min-width: 0;
    word-break: break-word;
}

/* 右侧竖排：产品数胶囊（与标题同一视觉行）+ 版式切换条（次级控件，落在卡片右下）。
 * 产品数由"灰色裸文字"改成经典版 .jjw-count 同款胶囊语汇（#eef4ff 底 / 999 圆角 / 13px / 主蓝），
 * 两套版式对同一信息用同一套控件语汇。 */
.jjwl-page .jjwl-hero-meta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    padding-top: 3px;   /* 与 22px 标题同一视觉行 */
}

.jjwl-page .jjwl-hero-count {
    flex: 0 0 auto;
    color: #165dff;
    background: #eef4ff;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    line-height: 1.5;
    white-space: nowrap;
}

.jjwl-page .jjwl-hero-count em {
    font-style: normal;
    color: #165dff;
    font-size: 14px;
    font-weight: 700;
}

/* 版式切换条（includes/skinbar）的「导航栏内」样式已移到 jjw-list.css —— 2026-09-27 起经典版也放在
 * 导航栏右侧，而本文件只在极简版加载，放这里会漏掉经典版。本文件不再负责它的定位。 */

/* ------------------------------------------- 商品组提示框（includes/productnotice）
 * 2026-09-27 补回：此前 lite/product.tpl 漏 include 这个块，极简版里整块看不到
 * （经典版有、极简版没有）。现在它在主列里独立成块：分类标题卡 → 提示框 → 商品卡，与经典版同序。
 * ⚠️ 只做**块间距归一**，不碰它自身的主题格式（蓝底引用框 / 边框 / 图标 / 字色 / 富文本）：
 * 内层 .layui-elem-quote 自带 margin-bottom:12px，会让它与下方商品卡的间距变成 20+12=32px，
 * 破坏 .jjwl-main 的 20px 区块节奏 —— 这里只把这一条 margin 清零，其余属性一概不动。 */
.jjwl-page .jjwl-main > .bgw > .layui-elem-quote {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------- 卡片网格 */
/* 列数（2026-09-27 用户要求「浏览器缩放后要像经典版那样自动匹配每列数量，不要无限拉宽卡片」）：
 * 由「写死 3 列」改为与经典版同机制的 auto-fill —— 列数 = floor(主列宽 / 320px)，
 * 每张卡宽度被夹在 320〜640px 之间：窗口变宽 / 浏览器缩小只**增列**，不会再无限拉宽。
 * 320px 是用户改定的最小列宽（先试过 400px：默认比例下只剩 2 列，用户要求改回 320）。
 * 主列宽 W = 窗口 − 滚动条 − 左右留白 clamp(28,4.2vw,96) − 左栏 268 − 栏距 20；实测（W → 列数×卡宽）：
 *   1366 → 950 → 2 列×475　1440 → 1016 → 3 列×339　1600 → 1162 → 3 列×387
 *   1920 → 1456 → 4 列×364　2560 → 2065 → 6 列×344
 * （卡片本体样式仍由 jjw-list.css 提供，这里只定列数。
 *   原「≤1300px 交回 auto-fill 320px」的媒体查询已删除 —— 基础规则本身就是 auto-fill，留着是多余的。
 *   ≤1200px 的单列兜底与 ≤768px 手机固定单列见下方各自的媒体查询块。） */
/* 商品区**不设自己的滚动**（2026-09-27 用户要求撤销上一版的做法）：它随整页一起滚，
 * 客户打开页面即可从头往下浏览全部商品，不用先在一个小窗口里滚。 */
.jjwl-page.jjw-page .sky-productList.jjwl-cards {
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 14px;            /* 组内间距 < 区块间 20px */
    margin-bottom: 0;     /* 覆盖 jjw-list.css 的 20px：区块间距由 .jjwl-main 的 gap 统一给 */
}

/* 2026-10-01：侧栏加宽到 340 后主区变窄，为保证 1440 默认仍 3 列：最小列宽 320→300、间距 16→14，
   并同步收缩卡片内边距与字号（3 列下内容不挤、比例协调）。 */
.jjwl-page.jjw-page .jjw-card-body { padding: 14px 16px 0; }
.jjwl-page.jjw-page .jjw-card-head { padding-bottom: 10px; }
.jjwl-page.jjw-page .jjw-card-name { font-size: 16px; }
.jjwl-page.jjw-page .jjw-spec-row { font-size: 13px; }
.jjwl-page.jjw-page .product-description { font-size: 12px; }
.jjwl-page.jjw-page .jjw-card-foot { padding: 14px 16px 16px; }
.jjwl-page.jjw-page .product-card .product-Parameters .amount { font-size: 20px; }

/* ------------------------------------------------- 卡片等高 + 页脚贴底（行内对齐）
 * 网格默认 align-items:stretch 已让同排卡片等高，但页脚是紧跟内容流的 —— 名称 1 行 / 2 行、
 * 规格 3 行 / 5 行的卡片，价格行与购买按钮会落在不同高度（同排看起来参差）。
 * 改成纵向 flex 后，卡片正文吃掉剩余空白，页脚永远贴卡片底部。
 * .product-Parameters 原有的 margin-top:12px 被 auto 取代（同权重、本文件后加载），
 * 与正文的分隔仍由页脚自身的 padding-top:14px 保证。 */
.jjwl-page .jjwl-card {
    display: flex;
    flex-direction: column;
}

.jjwl-page .jjwl-card .jjw-card-body {
    flex: 1 1 auto;
}

.jjwl-page .jjwl-card .jjwl-card-foot {
    margin-top: auto;
}

.jjwl-page .jjw-card-head {
    position: relative;
    gap: 8px;
}

.jjwl-badge {
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 1.6;
    border-radius: 4px;
    padding: 1px 7px;
    white-space: nowrap;
}

.jjwl-badge.is-soldout {
    color: #86909c;
    background: #f2f3f5;
}

.jjwl-badge.is-low {
    color: #ff7d00;
    background: #fff7e8;
    border: 1px solid #ffd591;
}

/* ------------------------------------------------- 空态：也进入同一套卡片语言
 * 原来是一段裸文字直接躺在白底页面上，夹在 hero 白卡与底部说明卡之间显得突兀。 */
.jjwl-page .jjwl-main > .jjwl-empty {
    background: #fff;
    border: 1px solid var(--borderS, #e5e6eb);
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(22, 93, 255, 0.05);
}

/* ------------------------------------------- 底部「区域整体说明」：刻意不做任何格式覆盖
 * 2026-09-27（用户要求，与经典版同一条规则）：不要强制清除商品说明、底部公告等内容的原有格式。
 * 这块是后台填写的富文本公告（本站在管区域实测渲染为 green-theme + icon-success 的引用条），
 * 因此完全保留主题自带的底色 / 边框 / 字色 / 内边距与图标，它与上方卡片的间距由 .jjwl-main 的 gap 负责。
 * （上一轮曾把它拍白卡，已按用户要求撤销。） */

/* ------------------------------------------------------------------ 窄屏兜底 */
/* 极简版只服务 PC；窗口不够宽时把左栏落到卡片上方，避免两栏互相挤压 */
@media (max-width: 1200px) {
    .jjwl-page .jjwl-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .jjwl-page .jjwl-side {
        position: static;
        /* 落到卡片上方后不再需要"卡片内滚动"，交给整页正常滚动 */
        max-height: none;
    }

    .jjwl-page .jjwl-side .jjwl-tree {
        overflow: visible;
    }
}

/* ------------------------------------------------------------------ 手机端（≤768px）
 * 2026-09-27 第四轮（用户要求「手机端也要和 PC 同样的双样式」）：极简版不再只服务 PC ——
 * 本文件在手机端也会加载。**但手机端缺省＝经典**（ui69 起）：currency.tpl 的手机分支只在
 * cookie jjw_layout=lite 时才引入本文件；未设置 或 classic 时手机端**不加载**它（本块也就不生效）。
 * 两端共用同一套版式规则（未设置→PC 极简 / 手机经典；lite→两端极简；classic→两端经典）。
 *   · ≤1200px 的「单列 + 左栏落到上方」兜底被手机端直接复用，这里只把尺寸/留白压到手机量级；
 *   · 左栏卡（全局搜索 + 分类区域树）**保留**：搜索框就是 #jjw-search-input（jjw-list.js 的全局搜索），
 *     分类树当前组默认展开、其余收起，点地区叶子由 jjw-partial.js 就地刷新商品区（手机端也已接管）；
 *   · 页面壳的定位（让开 fixed 导航条）本块不处理：极简壳实际渲染出的类名是 `fullScreenmobileEnd`
 *     （fullScreen 与 mobileEnd 被模板引擎粘成了一个词），mobileend.css 的 .mobileEnd 规则匹配不到它 ——
 *     页面盒模型与顶部让位统一由 **jjw-list.css 末尾**的「手机 / 平板端（不依赖 768 断点）」块补齐
 *     （ui70 已把该块由本文件迁到 jjw-list.css —— 手机端两种版式都加载 jjw-list.css，留在这里经典版式拿不到）；
 *   · 只调尺寸与留白，不改结构；**不覆盖商品说明富文本的原有格式**（与经典版同一条红线）。 */
@media (max-width: 768px) {
    /* 用 .Positionawp 兄弟钩子限定为 wap 端：PC 端页面壳没有这个兄弟 → PC 不受影响
       （原来写的是 .jjwl-page.mobileEnd，因类名粘连从来没生效过） */
    .navtop-standingPosition.Positionawp ~ .shopping-cart-page.jjwl-page {
        padding: 0 8px;
    }

    .jjwl-page .jjwl-layout,
    .jjwl-page .jjwl-main {
        gap: 14px;
    }

    /* 左栏卡：手机端变成左侧抽屉（2026-10-01）——默认收起，点皮肤条左侧「分类」按钮滑出 */
    .jjwl-sidebar-toggle {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        padding: 4px 12px;
        border: 1px solid #e5e6eb;
        border-radius: 8px;
        background: #fff;
        color: #1d2129;
        font-size: 12px;
        line-height: 1.4;
        margin-right: auto;
        cursor: pointer;
    }
    .jjwl-sidebar-toggle:hover { color: #165dff; border-color: #a9c4ff; background: #f7faff; }

    .shopping-cart-page .jjwl-side {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: min(82vw, 320px);
        max-height: none;
        margin: 0;
        padding: 14px 12px 12px;
        border-radius: 0 14px 14px 0;
        /* 抽屉底色：列表页靠 .jjwl-page .jjwl-side 提供白底；配置页没有 .jjwl-page，
           此规则未加底色 → 抽屉透明、内容浮在页面之上（用户反馈「透明」）。补上白底与盒模型。
           选择器加 .shopping-cart-page 前缀是为了压过 ≤1200px 的 `.jjwl-page .jjwl-side{position:static}`：
           否则列表页侧栏仍是 static，占据网格一列 → 分类与卡片排成一列、收起后留白。 */
        background: #fff;
        box-sizing: border-box;
        box-shadow: 0 0 24px rgba(22, 93, 255, 0.14);
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        z-index: 1000;
        overflow-y: auto;
    }
    .shopping-cart-page .jjwl-side.is-open {
        transform: translateX(0);
    }
    .shopping-cart-page .jjwl-side .jjwl-tree {
        overflow-y: auto;
    }

    .jjwl-side-mask {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 999;
    }
    body.jjwl-side-open .jjwl-side-mask { display: block !important; }

    /* 次顶部导航「商品分类名称」唤起的是经典版产品面板 —— 极简版隐藏它，改用上面的侧边栏抽屉 */
    #sky-wap-productSelector { display: none !important; }

    .jjwl-page .jjwl-tree-title {
        font-size: 13px;
    }

    /* 区域卡（hero）：手机端多余（导航栏已显示产品名），整卡去掉；
       但本组带「商品组标题 / 标语」时保留这张卡（只显示标语行，标题/说明/产品数仍隐藏），
       否则标语在手机端无处显示（左侧分类树已在 P8 撤掉叶子上的标语）。 */
    .jjwl-page .jjwl-hero {
        display: none;
    }

    .jjwl-page .jjwl-hero.has-note {
        display: block;
        padding: 12px 16px;
    }

    .jjwl-page .jjwl-hero.has-note .jjwl-hero-title,
    .jjwl-page .jjwl-hero.has-note .jjwl-hero-desc,
    .jjwl-page .jjwl-hero.has-note .jjwl-hero-meta {
        display: none;
    }

    .jjwl-page .jjwl-hero.has-note .jjwl-hero-note {
        margin-top: 0;
    }

    .jjwl-page .jjwl-hero-title {
        font-size: 17px;
    }

    .jjwl-page .jjwl-hero-desc {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.7;
    }

    /* 商品卡网格：手机端固定单列、卡片间距收一档 */
    .jjwl-page.jjw-page .sky-productList.jjwl-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}