@charset "utf-8";
/* ==========================================================================
 * 九序云 · 官网（web）视觉效果层  —  jjw-web.css
 * --------------------------------------------------------------------------
 * 作用域： body.jjw-web    （由 common/header.html 仅在 $pagetype=='web' 时输出）
 * 命名：   全部 jjww-* 前缀；选择器一律以 body.jjw-web 起头
 *
 * 设计原则（务必保持）
 *   ① 只覆盖「外观」，不接管后台/CMS 驱动的机制：
 *      · 后台注入的设计令牌一律以 var() 消费 —— 后台改色/改尺寸/改圆角，前台跟随：
 *        --buttoncolor / --Original / --radius / --maxwidth / --padding /
 *        --navheight / --navfontSize / --navfontWeight / --compprodmaxwidth /
 *        --compprodmaxheight / --compprosecondwidth / --partners_block* /
 *        --slide_below* / --slideHeight / --servicewidth / --serviceline
 *      · 不覆盖 background-image、grid-template-columns、swiper/slide 相关变量
 *        （这些由后台轮播/产品/伙伴配置直接决定）
 *      · 后台行内 style（页脚 background、产品卡 background-image、hero 高度）一律不动
 *   ② 不触碰 DOM 结构（除 2 行资源接入 + body 作用域类）；不引入任何新依赖
 *   ③ 视觉基准与购物车主题 jijianweilai 一致：蓝白扁平、#e1e6f0 描边、
 *      12/14/10/8px 圆角、20px 节奏、大留白、卡片化、柔和阴影
 *   ④ 加载顺序：本文件在 universalHead.html 中排在全部主题 CSS 之后、
 *      后台 {$CustomCss} 之前 —— 后台自定义 CSS 仍可覆盖本层
 * ========================================================================== */

/* ==========================================================================
 * 0. 令牌与页面基底
 * ========================================================================== */
body.jjw-web {
    /* ---- 主色：始终由后台主色驱动（后台改色 → 前台跟随）---- */
    --jjww-primary: var(--buttoncolor, #165dff);
    --jjww-primary-deep: var(--Original, #165dff);
    --jjww-primary-soft: #f2f7ff;
    --jjww-primary-line: #cfe0ff;

    /* ---- 圆角 v2：取「基线 2–4px 近直角」与「购物车主题 12–14px」的中间值，
            并略偏平一侧；后台 --radius 仍在带内生效（改大最多到 10px）---- */
    --jjww-radius: clamp(6px, var(--radius, 8px), 10px); /* 结构件 / 大卡 */
    --jjww-radius-sm: clamp(4px, var(--radius, 6px), 8px); /* 按钮 / 小件 / 标签 */

    /* ---- 文本层级（取自基线 design-system 实测值）---- */
    --jjww-t1: #313a50; /* strong    · 标题 */
    --jjww-t2: #384257; /* primary   · 正文 */
    --jjww-t3: #7d8797; /* secondary · 描述 / 日期 */
    --jjww-t4: #9aa1ae; /* tertiary  · 弱化说明 */

    /* ---- 面与描边（实测值）---- */
    --jjww-line: #e2e6ed;
    --jjww-line-soft: #eceef3;
    --jjww-bg-soft: #f7f8fb;
    --jjww-bg-subtle: #fafbfc;
    --jjww-bg-warm: #f8efe5;

    /* ---- 阴影（实测值，中性灰，不再带蓝调）---- */
    --jjww-shadow-sm: 0 10px 28px rgba(49, 59, 78, .08); /* 静置卡 */
    --jjww-shadow: 0 16px 34px rgba(49, 59, 78, .13); /* hover */
    --jjww-shadow-lg: 0 22px 54px rgba(49, 59, 78, .12); /* 浮层 */

    /* ---- 节奏（基线 112 / 104，heading↔content 56）---- */
    --jjww-gap: 24px;
    --jjww-section-y: clamp(72px, 8vw, 112px);
    --jjww-heading-gap: clamp(36px, 4vw, 56px);
}

body.jjw-web {
    background-color: #fff;
    color: var(--jjww-t1);
}

/* 分区统一上下留白（后台未提供该维度，属纯外观节奏） */
body.jjw-web section {
    box-sizing: border-box;
}

body.jjw-web .systemproduct-layoutcontainer,
body.jjw-web .container_bg15,
body.jjw-web .container_bg1,
body.jjw-web .container_bg30,
body.jjw-web .container_bg27,
body.jjw-web .container_bg6 {
    padding-top: var(--jjww-section-y) !important;
    padding-bottom: var(--jjww-section-y) !important;
}

/* 容器：沿用后台 --maxwidth / --padding，仅做小屏安全收边 */
body.jjw-web .comp_container {
    box-sizing: border-box;
}

@media (max-width: 1400px) {
    body.jjw-web .comp_container {
        min-width: 0 !important;
    }
}

/* ==========================================================================
 * 1. 分区标题（模块标题 / 描述 / 查看全部）—— 消费后台 moduleTitle / moduleDescription
 * ========================================================================== */
body.jjw-web .sk-title-container {
    padding: 0 0 var(--jjww-heading-gap) !important; /* 基线 heading↔content 56px */
    gap: 14px;
}

/* 标题：左右点阵装饰（基线 section-title 实测 motif）—— 纯伪元素，不新增 DOM */
body.jjw-web .sk-title-container .sk-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font-size: clamp(26px, 2.4vw, 34px) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -.025em;
    color: var(--jjww-t1) !important;
    margin: 0 !important;
}

body.jjw-web .sk-title-container .sk-title::before,
body.jjw-web .sk-title-container .sk-title::after {
    content: "";
    flex: 0 1 62px;
    width: 62px;
    height: 7px;
    background-image: radial-gradient(circle, #758093 1.7px, transparent 1.9px);
    background-position: center;
    background-size: 9px 7px;
    background-repeat: repeat-x;
}

body.jjw-web .sk-title-container .sk-desc {
    font-size: clamp(13px, 1vw, 15px) !important;
    line-height: 1.7 !important;
    color: var(--jjww-t3) !important;
    max-width: 860px;
    margin-top: 16px;
}

body.jjw-web .sk-title-container .sk-desc a {
    color: var(--jjww-primary) !important;
    font-weight: 500;
    margin-left: 6px;
    white-space: nowrap;
    transition: opacity .2s ease;
}

body.jjw-web .sk-title-container .sk-desc a:hover {
    opacity: .75;
}

/* ==========================================================================
 * 2. 顶部导航（消费后台 --navheight / --navfontSize / --navfontWeight / 主色）
 *    注：阶段14 起 PC 端的基线样式层已换成 基线 的 8 层，其中并**没有**
 *    `.nav-layoutcontainer`（原 idcfx 层会把它改成 position:relative 顶掉吸顶，
 *    故此处曾有一条按 nav.css 原值复位的规则，已随该层删除，不再保留死代码）。
 * ========================================================================== */
body.jjw-web .horizontal-menu-navbar {
    width: auto;
    height: var(--navheight);
}

body.jjw-web .nav-layoutcontainer {
    box-shadow: none;
    border-bottom: 1px solid var(--jjww-line);
    z-index: 1000;
}

body.jjw-web .nav-layoutcontainer .horizontal-menu-navbar-menu > li > a {
    font-size: var(--navfontSize, 14px) !important;
    font-weight: var(--navfontWeight, 500) !important;
    color: var(--jjww-t1);
    transition: color .2s ease;
}

body.jjw-web .nav-layoutcontainer .horizontal-menu-navbar-menu > li > a:hover {
    color: var(--jjww-primary) !important;
}

body.jjw-web .nav-layoutcontainer .underline {
    height: 2px !important;
    border-radius: 2px;
    background: var(--jjww-primary) !important;
}

body.jjw-web .nav-layoutcontainer .navbar-menu-tag i {
    border-radius: 6px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
    line-height: 18px !important;
    color: #fff !important;
}

/* 搜索框 → 与购物车一致的圆角胶囊 */
body.jjw-web .nav-layoutcontainer .input-inner-wrapper .input-label {
    border-radius: 999px !important;
    border: 1px solid var(--jjww-line) !important;
    background: var(--jjww-bg-soft) !important;
    transition: border-color .2s ease, background .2s ease;
}

body.jjw-web .nav-layoutcontainer .input-inner-wrapper .input-label:hover,
body.jjw-web .nav-layoutcontainer .input-inner-wrapper .input-label:focus-within {
    border-color: var(--jjww-primary-line) !important;
    background: #fff !important;
}

body.jjw-web .nav-layoutcontainer .search-input {
    color: var(--jjww-t1) !important;
}

body.jjw-web .nav-layoutcontainer .search-input::placeholder {
    color: var(--jjww-t3) !important;
}

body.jjw-web .nav-layoutcontainer .navbar-public a {
    color: var(--jjww-t2) !important;
    transition: color .2s ease;
}

body.jjw-web .nav-layoutcontainer .navbar-public a:hover {
    color: var(--jjww-primary) !important;
}

body.jjw-web .nav-layoutcontainer .delimiter {
    background: var(--jjww-line) !important;
    opacity: .8;
}

body.jjw-web .nav-layoutcontainer .navbar-Login,
body.jjw-web .nav-layoutcontainer .navbar-mode-Register {
    border-radius: var(--jjww-radius-sm) !important;
    background: var(--jjww-primary) !important;
    border-color: var(--jjww-primary) !important;
    transition: filter .2s ease, transform .2s ease;
}

body.jjw-web .nav-layoutcontainer .navbar-Login:hover,
body.jjw-web .nav-layoutcontainer .navbar-mode-Register:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

body.jjw-web .nav-layoutcontainer .navbar-Register a,
body.jjw-web .nav-layoutcontainer .navbar-mode-Login a {
    color: var(--jjww-t1) !important;
    transition: color .2s ease;
}

body.jjw-web .nav-layoutcontainer .navbar-Register a:hover,
body.jjw-web .nav-layoutcontainer .navbar-mode-Login a:hover {
    color: var(--jjww-primary) !important;
}

body.jjw-web .nav-layoutcontainer .navbar-user-dropdown-container {
    border-radius: var(--jjww-radius) !important;
    border: 1px solid var(--jjww-line) !important;
    box-shadow: var(--jjww-shadow) !important;
    overflow: hidden;
}

body.jjw-web .nav-layoutcontainer .navbar-user-dropdown-item a:hover {
    background: var(--jjww-primary-soft) !important;
    color: var(--jjww-primary) !important;
}

/* 下拉大菜单容器 */
body.jjw-web .menu-dropdown-container {
    border-radius: 0 0 var(--jjww-radius) var(--jjww-radius);
    box-shadow: var(--jjww-shadow) !important;
}

/* ==========================================================================
 * 3. 顶部广告条（后台「顶部广告」模块；只做外观）
 * ========================================================================== */
body.jjw-web .announcement-container .announcement-row-container {
    border-radius: var(--jjww-radius-sm) !important;
}

body.jjw-web .announcement-container .announcement a {
    color: var(--jjww-t1);
    transition: color .2s ease;
}

body.jjw-web .announcement-container .announcement a:hover {
    color: var(--jjww-primary);
}

/* ==========================================================================
 * 4. 首屏轮播（★ 谨慎区：后台「轮播设置」控制 layout/height/左侧栏/文案/进度条/视频）
 *    —— 此处仅做「不改变布局机制」的外围修饰，绝不触碰 swiper/视频/按钮结构
 * ========================================================================== */
body.jjw-web .Rotation-layoutcontainer .swipervertical-title {
    transition: color .2s ease, font-weight .2s ease;
}

body.jjw-web .Rotation-layoutcontainer .swipervertical-title:hover,
body.jjw-web .Rotation-layoutcontainer .swipervertical-title.active {
    color: var(--jjww-primary) !important;
}

body.jjw-web .Rotation-layoutcontainer .active-title-line {
    background: var(--jjww-primary) !important;
    border-radius: 2px;
}

body.jjw-web .Rotation-layoutcontainer .home-button-prev,
body.jjw-web .Rotation-layoutcontainer .home-button-next {
    transition: background .2s ease, border-color .2s ease;
}

body.jjw-web .Rotation-layoutcontainer .home-button-prev:hover,
body.jjw-web .Rotation-layoutcontainer .home-button-next:hover {
    border-color: var(--jjww-primary) !important;
}

body.jjw-web .Rotation-layoutcontainer .home-pagination .swiper-pagination-bullet {
    border-radius: 2px;
}

body.jjw-web .Rotation-layoutcontainer .home-pagination .swiper-pagination-bullet-active {
    background: var(--jjww-primary) !important;
}

/* 首屏按钮：与购物车同款蓝渐变圆角（仅外观，不影响跳转与后台按钮文案） */
body.jjw-web .Rotation-layoutcontainer .Button-container .Button {
    border-radius: var(--jjww-radius-sm) !important;
    background: var(--buttPrimary, linear-gradient(180deg, #3d7fff 0%, #0053fc 64%, #003bfc 100%)) !important;
    border: 0 !important;
    box-shadow: 0 8px 20px rgba(22, 93, 255, .22);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

body.jjw-web .Rotation-layoutcontainer .Button-container .Button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(22, 93, 255, .3);
    filter: brightness(1.04);
}

/* ---- 4.1 首屏文字比例（基线 hero 实测：标题 46–50 / 描述 17 / 描述宽 620）----
   ★ 仅字号/字重/宽度等外观；`--slide*` 定位变量、swiper 结构、视频节点一律不动 ---- */
body.jjw-web .Rotation-layoutcontainer .swiper-text-container .Title-container .Title {
    font-size: clamp(30px, 3.4vw, 50px) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -.02em;
    padding: 12px 0 8px;
}

body.jjw-web .Rotation-layoutcontainer .swiper-text-container .Title-container .Describe {
    font-size: clamp(15px, 1.15vw, 17px) !important;
    line-height: 1.8 !important;
    max-width: 620px;
}

/* 文案上方的标语 → 胶囊小标签（购物车主题同款形态）*/
body.jjw-web .Rotation-layoutcontainer .swiper-text-container .Label-container .Content {
    display: inline-block;
    padding: 3px 12px;
    background: var(--jjww-primary-soft);
    border: 1px solid var(--jjww-primary-line);
    border-radius: 999px;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .12em;
}

body.jjw-web .Rotation-layoutcontainer .swiper-text-container .Label-container .Label {
    font-size: 13px !important;
    line-height: 1.7 !important;
}

/* 左侧标题列表（后台「轮播设置」逐条文案）*/
body.jjw-web .Rotation-layoutcontainer .swipervertical-title {
    font-size: 15px !important;
}

/* ---- 4.2 首屏底衬：跟随后台「每张幻灯片的 theme」取值，不写死 ----
   · theme=black（后台当前取值，深色字）→ 浅色雾面，保证深色字在图片上可读
   · theme=white（白字幻灯片）        → 深色雾面，保证白字可读
   纯伪元素、`pointer-events:none`，不改 DOM、不挡点击（onclick/openPage 照常）---- */
body.jjw-web .Rotation-layoutcontainer .swiper-leftAndRightLayout ~ .swiper-wrapper .swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
    rgba(255, 252, 250, .92) 0%,
    rgba(255, 252, 250, .62) 34%,
    rgba(255, 252, 250, .12) 62%,
    rgba(255, 255, 255, .06) 100%);
}

body.jjw-web .Rotation-layoutcontainer .swiper-leftAndRightLayout ~ .swiper-wrapper .swiper-slide[data-theme="white"]::after {
    background: linear-gradient(90deg,
    rgba(9, 20, 48, .78) 0%,
    rgba(9, 20, 48, .5) 38%,
    rgba(9, 20, 48, 0) 68%);
}

/* ==========================================================================
 * 5. 轮播下信任点条（后台「轮播下方导航」配置图标/标题/描述/底色/圆角/内距）
 *    卡片底色消费 --slide_belowBolor，尺寸消费 --slide_below* 变量
 * ========================================================================== */
body.jjw-web .bannerbelow-layoutcontainer .bannerbelow-row .bannerbelow-list {
    background-color: var(--slide_belowBolor, #fff) !important;
    border: 1px solid var(--jjww-line) !important;
    border-radius: var(--jjww-radius) !important;
    box-shadow: var(--jjww-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body.jjw-web .bannerbelow-layoutcontainer .bannerbelow-row .bannerbelow-list:hover {
    transform: translateY(-4px);
    border-color: var(--jjww-primary-line) !important;
    box-shadow: var(--jjww-shadow);
}

body.jjw-web .bannerbelow-layoutcontainer .bannerbelow-list .bannerbelow-icon-container {
    border-radius: var(--jjww-radius-sm);
    background: var(--jjww-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

body.jjw-web .bannerbelow-layoutcontainer .bannerbelow-list .bannerbelow-title,
body.jjw-web .bannerbelow-layoutcontainer .bannerbelow-list .bannerbelow-title span {
    font-size: clamp(15px, 1.05vw, 17px) !important;
    font-weight: 600 !important;
    color: var(--jjww-t1) !important;
    line-height: 1.45 !important;
}

body.jjw-web .bannerbelow-layoutcontainer .bannerbelow-list .bannerbelow-description,
body.jjw-web .bannerbelow-layoutcontainer .bannerbelow-list .bannerbelow-description span {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--jjww-t3) !important;
}

/* ==========================================================================
 * 6. 产品与服务（后台：模块标题/描述、左侧广告区、每行数量、分类图标、卡片尺寸变量）
 * ========================================================================== */
body.jjw-web .systemproduct-layoutcontainer .systemproduct-categories {
    gap: 12px !important;
    margin-bottom: clamp(24px, 2.6vw, 40px);
}

body.jjw-web .systemproduct-layoutcontainer .systemproduct-categories .systemproduct-category {
    border-radius: var(--jjww-radius) !important;
    border: 1px solid var(--jjww-line) !important;
    background: #fff !important;
    padding: 18px 12px !important;
    cursor: pointer;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

body.jjw-web .systemproduct-layoutcontainer .systemproduct-categories .systemproduct-category:hover {
    transform: translateY(-3px);
    border-color: var(--jjww-primary-line) !important;
    box-shadow: var(--jjww-shadow-sm);
}

/* 分类 Tab 选中态（站点脚本 module.product() 会为当前分类加 .active）——
   复位为「卡片 + 主色描边」，与基线的选中态一致；下划线由主题原有 ::after 负责 */
body.jjw-web .systemproduct-layoutcontainer .systemproduct-categories .systemproduct-category.active {
    border-color: var(--jjww-primary) !important;
    box-shadow: var(--jjww-shadow-sm);
}

body.jjw-web .systemproduct-layoutcontainer .systemproduct-categories .systemproduct-category.active .systemproduct-category-name {
    color: var(--jjww-primary) !important;
}

body.jjw-web .systemproduct-layoutcontainer .systemproduct-categories .systemproduct-category-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--jjww-t1);
}

body.jjw-web .systemproduct-layoutcontainer .systemproduct-right-product {
    gap: var(--jjww-gap) !important;
}

body.jjw-web .systemproduct-layoutcontainer .systemproduct-right-product .systemproduct-item {
    background-color: #fff !important;
    border: 1px solid var(--jjww-line) !important;
    border-radius: var(--jjww-radius) !important;
    box-shadow: var(--jjww-shadow-sm);
    padding: 24px !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body.jjw-web .systemproduct-layoutcontainer .systemproduct-right-product .systemproduct-item:hover {
    transform: translateY(-4px);
    border-color: var(--jjww-primary-line) !important;
    box-shadow: var(--jjww-shadow-lg);
}

body.jjw-web .systemproduct-layoutcontainer .systemproduct-item .systemproduct-name {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--jjww-t1) !important;
    line-height: 1.4 !important;
}

body.jjw-web .systemproduct-layoutcontainer .systemproduct-item .systemproduct-label {
    font-size: 12px !important;
    color: var(--jjww-t3) !important;
    margin-top: 4px;
}

body.jjw-web .systemproduct-layoutcontainer .systemproduct-item .systemproduct-desc {
    font-size: 13px !important;
    line-height: 1.7 !important;
    color: var(--jjww-t2) !important;
    margin-top: 10px;
}

body.jjw-web .systemproduct-layoutcontainer .systemproduct-item .systemproduct-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

body.jjw-web .systemproduct-layoutcontainer .systemproduct-item .systemproduct-tag span {
    background: var(--jjww-primary-soft) !important;
    color: var(--jjww-primary) !important;
    border: 1px solid var(--jjww-primary-line) !important;
    border-radius: 999px !important;
    padding: 2px 10px !important;
    font-size: 12px !important;
    line-height: 18px !important;
}

body.jjw-web .systemproduct-layoutcontainer .systemproduct-item .systemproduct-button,
body.jjw-web .systemproduct-layoutcontainer .systemproduct-item .systemproduct-button .button-gradient {
    border-radius: var(--jjww-radius-sm) !important;
    background: var(--buttPrimary, linear-gradient(180deg, #3d7fff 0%, #0053fc 64%, #003bfc 100%)) !important;
    border: 0 !important;
    color: #fff !important;
    transition: filter .2s ease, transform .2s ease;
}

body.jjw-web .systemproduct-layoutcontainer .systemproduct-item .systemproduct-button .button-gradient:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

body.jjw-web .systemproduct-layoutcontainer .systemproduct-item .systemproduct-tagline span {
    border-radius: 999px !important;
    background: #fff5e6 !important;
    color: #d46b08 !important;
    font-size: 12px !important;
}

body.jjw-web .systemproduct-layoutcontainer .systemproduct-item .systemproduct-country img {
    border-radius: var(--jjww-radius-sm);
}

/* 左侧宣传位（后台可配背景图/按钮 → 只做圆角与阴影） */
body.jjw-web .systemproduct-layoutcontainer .systemproduct-left-top,
body.jjw-web .systemproduct-layoutcontainer .systemproduct-right-bottom,
body.jjw-web .systemproduct-layoutcontainer .advertisement-right-position,
body.jjw-web .systemproduct-layoutcontainer .advertisement-content .advertisement-position {
    border-radius: var(--jjww-radius) !important;
    box-shadow: var(--jjww-shadow) !important;
    overflow: hidden;
}

body.jjw-web .systemproduct-layoutcontainer .systemproduct-left-gradient,
body.jjw-web .systemproduct-layoutcontainer .systemproduct-right-gradient,
body.jjw-web .systemproduct-layoutcontainer .advertisement-button .button-gradient,
body.jjw-web .systemproduct-layoutcontainer .advertisement-right-button {
    border-radius: var(--jjww-radius-sm) !important;
    background: var(--buttPrimary, linear-gradient(180deg, #3d7fff 0%, #0053fc 64%, #003bfc 100%)) !important;
    border: 0 !important;
    color: #fff !important;
}

/* ==========================================================================
 * 7. 解决方案（后台：方案列表/图片/简介/标签、左侧宽度变量 --solutionleftwidth）
 * ========================================================================== */
body.jjw-web .container_bg15 {
    background: var(--jjww-bg-soft) !important;
}

body.jjw-web .solution-container .solution-sidebar .sidebar-profile {
    border-radius: var(--jjww-radius) !important;
    overflow: hidden;
    box-shadow: var(--jjww-shadow) !important;
}

body.jjw-web .solution-container .solution-sidebar .sidebar-profile .social-link {
    border-radius: var(--jjww-radius-sm) !important;
    transition: background .2s ease, color .2s ease;
}

body.jjw-web .solution-container .solution-sidebar .social-link.facebook {
    background: var(--jjww-primary) !important;
    color: #fff !important;
}

body.jjw-web .solution-container .solution-sidebar .social-link.whole {
    background: #fff !important;
    color: var(--jjww-primary) !important;
    border: 1px solid var(--jjww-primary-line) !important;
}

body.jjw-web .solution-container .solution-sidebar .main-option-name {
    border-radius: var(--jjww-radius-sm) !important;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}

/* 方案选中态 → 基线「软底 + 主色 + 左侧强调条」语言（v1 为实心主色块） */
body.jjw-web .solution-container .solution-sidebar .main-option-name.active {
    background: var(--jjww-primary-soft) !important;
    color: var(--jjww-primary) !important;
    border-color: var(--jjww-primary-line) !important;
    box-shadow: inset 3px 0 0 0 var(--jjww-primary);
}

body.jjw-web .solution-container .solution-sidebar .solutionv-card-features li {
    color: var(--jjww-t2) !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
}

body.jjw-web .solution-container .solution-sidebar .skills-experience {
    border-radius: var(--jjww-radius) !important;
    border: 1px solid var(--jjww-line) !important;
    background: #fff !important;
    box-shadow: var(--jjww-shadow-sm);
}

/* ==========================================================================
 * 8. 「为什么选择我们」（后台 style=a/b 两套变体 → 只做外观，不改结构）
 * ========================================================================== */
body.jjw-web .chooseUs-container .chooseUs-min-container .chooseUs-row-a {
    gap: var(--jjww-gap) clamp(20px, 2.4vw, 32px) !important;
}

body.jjw-web .chooseUs-container .chooseUs-min-container .chooseUs-row-a .chooseUs-itme {
    height: auto !important;
    min-height: 168px;
    border: 1px solid var(--jjww-line) !important;
    border-radius: var(--jjww-radius) !important;
    box-shadow: var(--jjww-shadow-sm) !important;
    padding: 26px 28px !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body.jjw-web .chooseUs-container .chooseUs-min-container .chooseUs-row-a .chooseUs-itme:hover {
    transform: translateY(-4px);
    border-color: var(--jjww-primary-line) !important;
    box-shadow: var(--jjww-shadow-lg) !important;
}

body.jjw-web .chooseUs-container .chooseUs-itme .chooseUs-itme-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--jjww-t1) !important;
}

body.jjw-web .chooseUs-container .chooseUs-itme .chooseUs-itme-desc {
    font-size: 13.5px !important;
    line-height: 1.75 !important;
    color: var(--jjww-t2) !important;
}

body.jjw-web .chooseUs-container .chooseUs-itme .chooseUs-itme-tag {
    background: var(--jjww-primary-soft) !important;
    color: var(--jjww-primary) !important;
    border: 1px solid var(--jjww-primary-line) !important;
    border-radius: 999px !important;
    padding: 2px 10px !important;
    font-size: 12px !important;
}

body.jjw-web .chooseUs-container .chooseUs-itme .chooseUs-itme-icon img {
    border-radius: var(--jjww-radius-sm);
}

/* chooseB 变体（后台切换后同样协调） */
body.jjw-web .chooseUs-container .chooseUs-row .chooseUs-content {
    border-radius: var(--jjww-radius) !important;
}

body.jjw-web .chooseUs-container .chooseUs-row .chooseUs-product a {
    border-radius: var(--jjww-radius-sm) !important;
}

/* ==========================================================================
 * 9. 行业伙伴（后台：滚动/块阴影/边框、块尺寸 --partners_block*）
 *    ★ 滚动由站点脚本用 transform 驱动 → 不添加 transform 过渡，避免抢帧
 * ========================================================================== */
body.jjw-web .container_bg30 {
    background: #fff !important;
}

body.jjw-web .partners-container .partners-list-container {
    border-radius: var(--jjww-radius) !important;
}

body.jjw-web .partners-container .partners-item .partners-item-img,
body.jjw-web .partners-container .partners-item-container .partners-item {
    border-radius: var(--jjww-radius-sm) !important;
    border: 1px solid var(--jjww-line) !important;
    background: #fff !important;
    transition: border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}

body.jjw-web .partners-container .partners-item .partners-item-img:hover,
body.jjw-web .partners-container .partners-item-container .partners-item:hover {
    border-color: var(--jjww-primary-line) !important;
    box-shadow: var(--jjww-shadow-sm);
}

/* 编号（基线 01–12 编号语言）：绝对定位、不参与布局 → 不影响滚动动效与后台块尺寸
   counter 在「页」上复位（滚动模式会复制一页做无缝循环，两页各自从 01 起） */
body.jjw-web .partners-container .partners-list-container {
    counter-reset: jjww-partner;
}

body.jjw-web .partners-container .partners-list-container .partners-item-page {
    counter-reset: jjww-partner;
}

body.jjw-web .partners-container .partners-list-container .partners-item {
    position: relative;
}

body.jjw-web .partners-container .partners-list-container .partners-item::before {
    counter-increment: jjww-partner;
    content: counter(jjww-partner, decimal-leading-zero);
    position: absolute;
    top: 6px;
    left: 8px;
    z-index: 1;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: var(--jjww-t4);
    pointer-events: none;
    transition: color .22s ease;
}

body.jjw-web .partners-container .partners-list-container .partners-item:hover::before {
    color: var(--jjww-primary);
}

/* 滚动模式：左右边缘渐隐（基线 lane 观感）；静置网格模式（.block）不受影响 */
body.jjw-web .partners-container .partners-list-container[data-rolling="1"] {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

/* ==========================================================================
 * 10. 页脚（后台：footer.style=1/2、背景背景色行内、导航列、二维码、备案）
 *     ★ 行内 background 属后台控制 → 本层不覆盖背景色
 * ========================================================================== */
/* 页脚优势块 → 扁平化（基线语言：无卡背、无描边，hover 轻上浮）
   ★ 不覆盖后台行内 background，也不改任何 skin 的文字颜色 */
body.jjw-web .sky-footer-container .sky-footer-block {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: transform .22s ease, opacity .22s ease;
}

body.jjw-web .sky-footer-container .sky-footer-block:hover {
    transform: translateY(-3px);
    opacity: .86;
}

body.jjw-web .sky-footer-container .sky-footer-title {
    font-size: 14px !important;
    font-weight: 600 !important;
}

body.jjw-web .sky-footer-container .sky-footer-nav-heading {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .04em;
    margin-bottom: 16px !important;
}

body.jjw-web .sky-footer-container .sky-footer-nav-item a {
    font-size: 13px !important;
    line-height: 1.9 !important;
    transition: color .2s ease;
}

body.jjw-web .sky-footer-container .sky-footer-nav-item a:hover {
    color: var(--jjww-primary) !important;
}

body.jjw-web .sky-footer-container .sky-footer-left-itme a,
body.jjw-web .sky-footer-container .sky-footer-address,
body.jjw-web .sky-footer-container .sky-footer-copy {
    font-size: 13px !important;
    line-height: 1.9 !important;
}

/* 节奏：按基线页脚的分层比例（主区 40px、底条独立分隔线） */
body.jjw-web .sky-footer-container .sky-footer-main {
    padding: 40px 0 !important;
}

body.jjw-web .sky-footer-container .sky-footer-nav-row {
    gap: clamp(32px, 4vw, 64px);
}

body.jjw-web .sky-footer-container .sky-footer-bottom {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(127, 127, 127, .22);
}

body.jjw-web .sky-footer-container .sky-footer-ewm img {
    border-radius: var(--jjww-radius-sm) !important;
    border: 1px solid var(--jjww-line);
    background: #fff;
}

body.jjw-web .sky-footer-container .sky-footer-links a,
body.jjw-web .sky-footer-container .filing-title {
    font-size: 12.5px !important;
    transition: color .2s ease;
}

body.jjw-web .sky-footer-container .sky-footer-links a:hover {
    color: var(--jjww-primary) !important;
}

/* ==========================================================================
 * 11. 侧边快捷菜单 / 在线客服浮窗（后台「侧边菜单」开关与内容）
 * --------------------------------------------------------------------------
 * 【2026-10-10 P11】本节**不再**对该组件做任何外观覆盖（原 6 条规则已删）。
 *   原因：本文件是「首页专属层」（只随 viewPath=index 加载），原 §11 把首页的
 *   客服组件改成了「图标圆角 + hover 浅蓝 + 浮窗内层 .onlineservice_content
 *   再套一圈描边与投影 + consultation-button / onlineTop 圆角」；
 *   而内页（例如 /plan/electricity.html）只吃 footer.css 基线 ⇒ 同一组件两页观感
 *   不一致。用户指认「electricity 那个才是正常的」，据此删除覆盖，首页与内页
 *   统一走 footer.css 基线：图标方角、hover 灰底(hsla(210,7%,53%,.1)) + 主色
 *   (--Original)、浮窗 .onlineService_Body 单层白卡（4px 圆角 / 原阴影）。
 *   注：返回顶部按钮的「显隐 + 回顶」逻辑在 sideMenu.html 的内联 <style>/<script>
 *       里，与本文件无关，删本节不影响它。
 * ========================================================================== */

/* ==========================================================================
 * 12. 通用按钮基元（产品/方案/伙伴等处的渐变按钮统一，与购物车同款）
 * ========================================================================== */
body.jjw-web .button-gradient,
body.jjw-web .fancy-button.bg-gradient,
body.jjw-web .sk-button {
    border-radius: var(--jjww-radius-sm) !important;
    background: var(--buttPrimary, linear-gradient(180deg, #3d7fff 0%, #0053fc 64%, #003bfc 100%)) !important;
    box-shadow: 0 6px 16px rgba(22, 93, 255, .2);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

body.jjw-web .button-gradient:hover,
body.jjw-web .fancy-button.bg-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(22, 93, 255, .28);
    filter: brightness(1.04);
}

body.jjw-web .sk-button-white {
    border-radius: var(--jjww-radius-sm) !important;
}

/* ==========================================================================
 * 13. 进入动画（由 jjw-web.js 添加 .jjww-in 触发；禁用动效环境下自动失效）
 * ========================================================================== */
body.jjw-web .jjww-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .5s ease;
    will-change: opacity, transform;
}

body.jjw-web .jjww-reveal.jjww-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    body.jjw-web .jjww-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
 * 14. 响应式（外观层，仅收紧留白/字号/列呈现，不改后台列数变量）
 * ========================================================================== */
@media (max-width: 1200px) {
    body.jjw-web {
        --jjww-section-y: clamp(44px, 6vw, 72px);
    }

    body.jjw-web .chooseUs-container .chooseUs-min-container .chooseUs-row-a {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 992px) {
    body.jjw-web .sk-title-container .sk-title {
        font-size: 26px !important;
    }

    body.jjw-web .systemproduct-layoutcontainer .systemproduct-categories {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    body.jjw-web .systemproduct-layoutcontainer .systemproduct-categories {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    body.jjw-web .systemproduct-layoutcontainer .systemproduct-right-product .systemproduct-item {
        padding: 16px !important;
    }

    body.jjw-web .sk-title-container .sk-title {
        font-size: 22px !important;
    }
}

/* ==========================================================================
 * 15. 新增区块（阶段2）：产品索引矩阵 / 客户反馈 / 关于我们 / 最新动态
 *     · 全部选择器以 body.jjw-web 起头，类名一律 jjww-*
 *     · 区块底色由本层给出：container_bg28/29 原为花纹图 → 覆盖为纯色，
 *       与购物车主题的「蓝白扁平」一致；container_bg31/32 本主题未定义 → 显式给底
 *     · 当前启用状态（由 index.html 的 include 行决定）：
 *       15.1 / 15.2 / 15.5 / 15.7 → 在用（comp_partner、comp_solutionA、
 *       comp_network、comp_about、comp_cta）；
 *       15.3 产品卡网格、15.4 客户反馈、15.6 最新动态 → 对应模板当前未被任何
 *       页面引用（保留备用，规则先留着，重新启用即生效）
 * ========================================================================== */

/* 15.1 分区小标签（Eyebrow）：胶囊，基线 eyebrow 形态；置顶居中跟随 */
body.jjw-web .jjww-eyebrow {
    display: inline-block;
    padding: 3px 12px;
    background: var(--jjww-primary-soft);
    border: 1px solid var(--jjww-primary-line);
    border-radius: 999px;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 18px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--jjww-primary) !important;
}

/* 15.2 区块节奏与底色 */
body.jjw-web .jjww-feedback,
body.jjw-web .jjww-about,
body.jjw-web .jjww-updates,
body.jjw-web .jjww-cta {
    padding-top: var(--jjww-section-y) !important;
    padding-bottom: var(--jjww-section-y) !important;
}

body.jjw-web .jjww-feedback {
    background: #fff !important; /* 覆盖 container_bg29 花纹底 */
}

body.jjw-web .jjww-about {
    background: var(--jjww-bg-soft) !important; /* container_bg31 未定义 */
}

body.jjw-web .jjww-updates {
    background: #fff !important; /* container_bg32 未定义 */
}

/* 15.3 产品卡网格（cloud-products）：结构与类名对齐基线，基础样式原在 idcfx 层
        minecraft-home.css；该层已随阶段14 换成 基线 的 8 层并删除 → 若日后要
        重新启用 web/comp_platform.html（当前无人 include），需先为其补基础样式，
        本文件 §17 只提供令牌映射。
        原「左列表 + 右面板」方案的 .jjww-plat* 规则于 2026-10-01 清理
        （含 jjw-web.js 中对应的 Tab 逻辑，两端一并移除）。 */

/* 15.4 客户反馈（静态文案，4 卡） */
body.jjw-web .jjww-fb-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--jjww-gap);
}

body.jjw-web .jjww-fb-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(20px, 2vw, 28px);
    background: #fff;
    border: 1px solid var(--jjww-line);
    border-radius: var(--jjww-radius);
    box-shadow: var(--jjww-shadow-sm);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

body.jjw-web .jjww-fb-item:hover {
    transform: translateY(-4px);
    border-color: var(--jjww-primary-line);
    box-shadow: var(--jjww-shadow-lg);
}

body.jjw-web .jjww-fb-quote {
    margin: 0;
    font-size: 14.5px !important;
    line-height: 1.85 !important;
    color: var(--jjww-t2) !important;
}

body.jjw-web .jjww-fb-quote::before {
    content: "\201C";
    display: block;
    margin-bottom: 6px;
    font-size: 40px;
    line-height: .6;
    color: var(--jjww-primary);
    opacity: .18;
}

body.jjw-web .jjww-fb-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--jjww-line);
}

body.jjw-web .jjww-fb-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--jjww-primary-soft);
    border: 1px solid var(--jjww-primary-line);
    color: var(--jjww-primary);
    font-size: 15px;
    font-weight: 600;
}

body.jjw-web .jjww-fb-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.jjw-web .jjww-fb-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--jjww-t1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.jjw-web .jjww-fb-role {
    font-size: 12.5px !important;
    color: var(--jjww-t3) !important;
}

/* 15.5 关于我们（文案为模板静态内容；按钮走系统既有链接） */
body.jjw-web .jjww-about-wrap {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(24px, 3vw, 56px);
    align-items: center;
}

body.jjw-web .jjww-about-title {
    margin: 14px 0 0;
    font-size: clamp(24px, 2.3vw, 34px) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--jjww-t1) !important;
}

body.jjw-web .jjww-about-desc {
    margin: 16px 0 0;
    font-size: 15px !important;
    line-height: 1.9 !important;
    color: var(--jjww-t2) !important;
}

body.jjw-web .jjww-about-points {
    display: grid;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

body.jjw-web .jjww-about-points li {
    position: relative;
    padding-left: 22px;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    color: var(--jjww-t2) !important;
}

body.jjw-web .jjww-about-points li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 11px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--jjww-primary);
}

body.jjw-web .jjww-about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

body.jjw-web .jjww-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    height: 44px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--jjww-radius-sm);
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

body.jjw-web .jjww-btn-primary {
    background: var(--buttPrimary, linear-gradient(180deg, #3d7fff 0%, #0053fc 64%, #003bfc 100%)) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(22, 93, 255, .2);
}

body.jjw-web .jjww-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(22, 93, 255, .28);
}

body.jjw-web .jjww-btn-ghost {
    background: #fff !important;
    border-color: var(--jjww-primary-line) !important;
    color: var(--jjww-primary) !important;
}

body.jjw-web .jjww-btn-ghost:hover {
    background: var(--jjww-primary-soft) !important;
    border-color: var(--jjww-primary) !important;
    transform: translateY(-2px);
}

body.jjw-web .jjww-about-card {
    display: grid;
    padding: clamp(20px, 2.2vw, 32px);
    background: #fff;
    border: 1px solid var(--jjww-line);
    border-radius: var(--jjww-radius);
    box-shadow: var(--jjww-shadow-sm);
}

body.jjw-web .jjww-about-card-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 0;
}

body.jjw-web .jjww-about-card-item:first-child {
    padding-top: 0;
}

body.jjw-web .jjww-about-card-item:last-child {
    padding-bottom: 0;
}

body.jjw-web .jjww-about-card-item + .jjww-about-card-item {
    border-top: 1px solid var(--jjww-line);
}

body.jjw-web .jjww-about-card-k {
    font-size: 12.5px !important;
    letter-spacing: .04em;
    color: var(--jjww-t3) !important;
}

body.jjw-web .jjww-about-card-v {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.5;
    color: var(--jjww-t1) !important;
}

/* 15.6 最新动态（后台「最新新闻」模块的数据） */
body.jjw-web .jjww-upd-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: clamp(24px, 2.6vw, 40px);
}

body.jjw-web .jjww-upd-head-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

body.jjw-web .jjww-upd-title {
    margin: 0;
    font-size: clamp(22px, 2.1vw, 32px) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--jjww-t1) !important;
}

body.jjw-web .jjww-upd-desc {
    margin: 0;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: var(--jjww-t2) !important;
}

body.jjw-web .jjww-upd-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px !important;
    font-weight: 500;
    color: var(--jjww-primary) !important;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s ease;
}

body.jjw-web .jjww-upd-more:hover {
    opacity: .78;
}

body.jjw-web .jjww-upd-list {
    background: #fff;
    border: 1px solid var(--jjww-line);
    border-radius: var(--jjww-radius);
    box-shadow: var(--jjww-shadow-sm);
    overflow: hidden;
}

body.jjw-web .jjww-upd-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px clamp(18px, 2vw, 26px);
    text-decoration: none !important;
    transition: background .2s ease;
}

body.jjw-web .jjww-upd-item + .jjww-upd-item {
    border-top: 1px solid var(--jjww-line);
}

body.jjw-web .jjww-upd-item:hover {
    background: var(--jjww-primary-soft);
}

body.jjw-web .jjww-upd-item-main {
    flex: 1 1 auto;
    min-width: 0;
}

body.jjw-web .jjww-upd-item-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

body.jjw-web .jjww-upd-tag {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 999px;
    background: var(--jjww-primary-soft);
    border: 1px solid var(--jjww-primary-line);
    color: var(--jjww-primary);
    font-size: 12px !important;
    line-height: 18px;
}

body.jjw-web .jjww-upd-date {
    font-size: 13px !important;
    font-variant-numeric: tabular-nums;
    color: var(--jjww-t3) !important;
}

body.jjw-web .jjww-upd-item-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.5;
    color: var(--jjww-t1) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .2s ease;
}

body.jjw-web .jjww-upd-item:hover .jjww-upd-item-title {
    color: var(--jjww-primary) !important;
}

body.jjw-web .jjww-upd-item-desc {
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--jjww-t2) !important;
}

body.jjw-web .jjww-upd-item-icon {
    flex: 0 0 auto;
    color: var(--jjww-t3);
    opacity: .4;
    transition: color .2s ease, opacity .2s ease, transform .2s ease;
}

body.jjw-web .jjww-upd-item:hover .jjww-upd-item-icon {
    color: var(--jjww-primary);
    opacity: 1;
    transform: translateX(3px);
}

/* 15.7 底部 CTA 带（基线 enterprise-cta 形态：暖色带 + 左文案 + 右按钮）
   文案为模板静态内容；按钮复用 15.5 的 .jjww-btn 基元 */
body.jjw-web .jjww-cta {
    background: #fff !important;
}

body.jjw-web .jjww-cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(24px, 3vw, 40px);
    padding: clamp(32px, 3.4vw, 48px) clamp(28px, 3.4vw, 56px);
    background: var(--jjww-bg-warm) !important;
    border: 1px solid #ecdfd0;
    border-radius: var(--jjww-radius);
}

body.jjw-web .jjww-cta-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

body.jjw-web .jjww-cta-title {
    margin: 0;
    font-size: clamp(24px, 2.4vw, 34px) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--jjww-t1) !important;
}

body.jjw-web .jjww-cta-desc {
    margin: 0;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: var(--jjww-t2) !important;
}

body.jjw-web .jjww-cta-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* ==========================================================================
 * 17. 基线结构适配层（cloud-* / enterprise-* / nav-mega-* 类）
 *     这些类名来自 idcfx 版块结构，基础样式原在 minecraft-home.css（其对应层已随
 *     阶段14 换成 基线 的 8 层并删除）。PC 首页当前只经 web/comp_cta.html
 *     （底部 CTA 带，用到 .enterprise-cta / .cloud-shell）触及其中一小部分；
 *     其余仅在 m/comp_service、m/comp_workflow 与当前无人 include 的
 *     web/comp_service|comp_platform|comp_workflow.html 里出现。
 *     本层只做三件事：① 基线令牌 → 我方令牌/后台主色映射（其 --orange 等只定义在
 *     .cloud-home-page 内，我方未包该容器，故必须在此补齐）② 后端数据落位 ③ 被我方
 *     层覆写处的复位。**不改基线结构、不动其类名。**
 * ========================================================================== */

/* 17.1 令牌映射：基线暖橙 → 后台主色；文本/描边 → 本层 v2 令牌 */
body.jjw-web .cloud-products,
body.jjw-web .cloud-service,
body.jjw-web .enterprise-workflow {
    --orange: var(--jjww-primary);
    --ink: var(--jjww-t1);
    --muted: var(--jjww-t3);
    --line: var(--jjww-line);
}

/* 17.1b 部署路径（基线 enterprise-workflow + workflow-grid）色值对齐 */
body.jjw-web .enterprise-workflow {
    background: #fff;
}

body.jjw-web .enterprise-workflow .section-heading h2 {
    color: var(--jjww-t1);
    font-weight: 700;
}

body.jjw-web .enterprise-workflow .section-heading .eyebrow {
    color: var(--jjww-primary);
    letter-spacing: .16em;
}

body.jjw-web .enterprise-workflow .section-heading p {
    color: var(--jjww-t3);
}

body.jjw-web .enterprise-workflow .workflow-grid article {
    border-top-color: var(--jjww-line);
}

body.jjw-web .enterprise-workflow .workflow-grid article > span {
    color: var(--jjww-primary);
    font-variant-numeric: tabular-nums;
}

body.jjw-web .enterprise-workflow .workflow-grid h3 {
    color: var(--jjww-t1);
}

body.jjw-web .enterprise-workflow .workflow-grid p {
    color: var(--jjww-t3);
}

/* 17.2 与本站节奏对齐（基线 104px → 本层分区间距变量） */
body.jjw-web .cloud-section {
    padding-block: var(--jjww-section-y);
}

/* 17.3 产品卡网格：后端分类图标落位 + 强调色统一走主色 */
body.jjw-web .cloud-product-card {
    --accent: var(--jjww-primary);
    --soft: var(--jjww-primary-soft);
}

body.jjw-web .cloud-product-card .cloud-product-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 每张卡只露前 3 个子项（数据未删，仅视觉收敛；完整列表在下方产品区）*/
body.jjw-web .cloud-product-card ul li:nth-child(n + 4) {
    display: none;
}

body.jjw-web .cloud-product-card .card-btn {
    color: var(--jjww-primary);
}

body.jjw-web .cloud-product-card .card-btn i {
    display: none; /* 基线用 ::after 生成箭头 */
}

/* 17.4 分区标题：基线 .section-heading / .eyebrow 在本站的观感对齐 */
body.jjw-web .cloud-products .section-heading h2,
body.jjw-web .cloud-service .service-intro h2 {
    color: var(--jjww-t1);
    font-weight: 700;
}

body.jjw-web .cloud-products .section-heading .eyebrow,
body.jjw-web .cloud-service .eyebrow {
    color: var(--jjww-primary);
    letter-spacing: .16em;
}

body.jjw-web .cloud-products .section-heading p,
body.jjw-web .cloud-service .service-intro p {
    color: var(--jjww-t3);
}

/* 17.5 服务能力：基线写死的暖棕编号色 → 主色；正文 → 我方文本层级 */
body.jjw-web .cloud-service {
    background: var(--jjww-bg-soft);
    border-block: 1px solid var(--jjww-line);
}

body.jjw-web .cloud-service .cloud-service-grid article {
    border-top-color: var(--jjww-line);
}

body.jjw-web .cloud-service .cloud-service-grid article > span {
    color: var(--jjww-primary);
    font-variant-numeric: tabular-nums;
}

body.jjw-web .cloud-service .cloud-service-grid h3 {
    color: var(--jjww-t1);
}

body.jjw-web .cloud-service .cloud-service-grid p {
    color: var(--jjww-t3);
}

body.jjw-web .cloud-service .text-link {
    color: var(--jjww-primary);
}

body.jjw-web .cloud-service .service-intro small {
    color: var(--jjww-t4);
}

/* ==========================================================================
 * 16. 新区块响应式
 * ========================================================================== */
@media (max-width: 1200px) {
    body.jjw-web .jjww-fb-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    body.jjw-web .jjww-about-wrap {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 640px) {
    body.jjw-web .jjww-fb-grid {
        grid-template-columns: 1fr;
    }

    body.jjw-web .jjww-fb-item {
        gap: 16px;
    }

    body.jjw-web .jjww-upd-item {
        gap: 12px;
    }

    body.jjw-web .jjww-upd-item-icon {
        display: none;
    }

    body.jjw-web .jjww-btn {
        min-width: 0;
        flex: 1 1 auto;
    }
}

/* ==========================================================================
 * 18. 统一设计系统（跨层归一）—— 阶段11「整体重构」
 * --------------------------------------------------------------------------
 * 【历史】阶段11 时页面上并行着两套语言，本节用于把 idcfx 基线层
 *   （minecraft-home.css：紫/橙配色、容器 1240px、节奏 104px、卡片圆角 5/8/10px）
 *   统一到本主题的「后台主色 + 中性灰」。该 idcfx 层已于阶段14 整体删除，
 *   等价的接管改由 §19 针对 基线 的 8 层来做；本节对当时受影响的结构
 *   （.sk-title-container、.jjww-eyebrow、cloud-*/enterprise-* 等）仍然有效 ——
 *   后台模块 comp_partner / comp_solutionA / comp_network / comp_about 都在用。
 * 做法：本节在基线层**之后**加载，用同权重即可接管；一次性把基线层的
 *   本地令牌（--ink/--muted/--orange/--brand/--line/--edge/--accent/--soft/
 *   --section-gap）改指我方令牌，并把色/形/节奏/标题/按钮统一。
 * 之后只需维护 --jjww-* 令牌：后台改主色/圆角 → 两端一起变。
 * ========================================================================== */

/* ---- 18.1 令牌接管：.cloud-home-page 上的基线本地变量全部改指我方令牌 ---- */
body.jjw-web .cloud-home-page {
    --ink: var(--jjww-t1);
    --muted: var(--jjww-t3);
    --orange: var(--jjww-primary);
    --brand: var(--jjww-primary);
    --line: var(--jjww-line);
    --edge: var(--jjww-line);
    --accent: var(--jjww-primary);
    --soft: var(--jjww-primary-soft);
    --section-gap: var(--jjww-section-y);
    color: var(--jjww-t1);
}

/* ---- 18.2 容器：基线 .cloud-shell 与后台 .comp_container 取同一把尺 ---- */
body.jjw-web .cloud-shell,
body.jjw-web .cloud-home-page .cloud-shell {
    width: min(var(--maxwidth, 1240px), calc(100% - 64px));
    margin-inline: auto;
}

/* hero 原文把版面收窄到 960px，会让首屏与下方分区左右不齐 → 放开 */
body.jjw-web .cloud-home-page .hero-layout {
    max-width: none;
}

/* ---- 18.3 节奏：基线段落与本站旧区块共用同一套上下留白 ---- */
body.jjw-web .cloud-section,
body.jjw-web .cloud-home-page .cloud-section,
body.jjw-web .cloud-home-page .ai-model-section,
body.jjw-web .cloud-home-page .cloud-service,
body.jjw-web .cloud-home-page .enterprise-workflow,
body.jjw-web .qq-community {
    padding-top: var(--jjww-section-y) !important;
    padding-bottom: var(--jjww-section-y) !important;
}

/* ---- 18.4 分区标题：全站统一「左标题 + 右灰描述」，撤掉第二套标题形态 ---- */
body.jjw-web .section-heading,
body.jjw-web .cloud-home-page .section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: clamp(24px, 4vw, 48px);
    margin-bottom: var(--jjww-heading-gap);
}

/* 旧区块的 .sk-title-container 改成与 .section-heading 同形（原为居中 + 点阵） */
body.jjw-web .sk-title-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 12px;
    padding: 0 0 var(--jjww-heading-gap) !important;
}

body.jjw-web .sk-title-container .sk-title {
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 0 !important;
}

/* 撤掉点阵 motif：基线段落没有它，留着就是两套标题语言 */
body.jjw-web .sk-title-container .sk-title::before,
body.jjw-web .sk-title-container .sk-title::after {
    content: none !important;
    display: none !important;
}

body.jjw-web .sk-title-container .sk-desc {
    text-align: left !important;
}

/* 字号/字重/字色：两端同一规格 */
body.jjw-web .sk-title-container .sk-title,
body.jjw-web .cloud-home-page .section-heading h2,
body.jjw-web .cloud-home-page .service-intro h2,
body.jjw-web .cloud-home-page .qq-community-head h2 {
    font-size: clamp(26px, 2.4vw, 34px) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -.025em;
    color: var(--jjww-t1) !important;
    margin: 0 !important;
}

body.jjw-web .cloud-home-page .section-heading p,
body.jjw-web .cloud-home-page .service-intro > p,
body.jjw-web .sk-title-container .sk-desc {
    font-size: 14px !important;
    line-height: 1.75 !important;
    color: var(--jjww-t3) !important;
}

/* ---- 18.5 eyebrow：全站统一为同一枚胶囊（含 hero 内的紫色变体） ---- */
body.jjw-web .jjww-eyebrow,
body.jjw-web .cloud-home-page .eyebrow,
body.jjw-web .cloud-home-page .hero-copy .eyebrow,
body.jjw-web .cloud-home-page .qq-community-head .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px !important;
    margin-bottom: 16px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    line-height: 1.4 !important;
    color: var(--jjww-primary) !important;
    background: var(--jjww-primary-soft) !important;
    border: 1px solid var(--jjww-primary-line) !important;
    border-radius: 999px !important;
}

/* ---- 18.6 底色节奏：去掉基线的紫/粉紫/淡紫，统一「白 ↔ 软底」交替 ---- */
body.jjw-web .cloud-home-page .cloud-products,
body.jjw-web .cloud-home-page .ai-model-section {
    background: #fff !important;
    color: var(--jjww-t1) !important;
}

body.jjw-web .cloud-home-page .cloud-service,
body.jjw-web .cloud-home-page .enterprise-workflow {
    background: var(--jjww-bg-soft) !important;
    color: var(--jjww-t1) !important;
    border-block: 1px solid var(--jjww-line) !important;
}

body.jjw-web .cloud-home-page .enterprise-cta {
    background: var(--jjww-bg-warm, #f8efe5) !important;
    border: 1px solid var(--jjww-line) !important;
    color: var(--jjww-t1) !important;
}

body.jjw-web .qq-community {
    background: #fff;
    border-top: 1px solid var(--jjww-line);
}

/* 基线社群段是 3 列栅格；我方只有 1 个群 → 单卡铺满，避免 1/3 宽的错位感 */
body.jjw-web .cloud-home-page .qq-community-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* ---- 18.7 形：圆角 / 描边 / 阴影统一到 v2 令牌 ---- */
body.jjw-web .cloud-home-page #cloud-products .cloud-product-card,
body.jjw-web .cloud-home-page .ai-model-card,
body.jjw-web .cloud-home-page .cloud-service-grid article,
body.jjw-web .cloud-home-page .workflow-grid article,
body.jjw-web .cloud-home-page .qq-group-card {
    border-radius: var(--jjww-radius) !important;
    border: 1px solid var(--jjww-line) !important;
    box-shadow: var(--jjww-shadow-sm);
}

body.jjw-web .cloud-home-page .cloud-product-icon,
body.jjw-web .cloud-home-page .card-btn,
body.jjw-web .cloud-home-page .qq-card-badge {
    border-radius: var(--jjww-radius-sm) !important;
}

/* ---- 18.8 按钮：统一尺度与主色（顺带修掉 --brand 未定义导致 primary-link 透明） ---- */
body.jjw-web .cloud-home-page .primary-link,
body.jjw-web .cloud-home-page .hero-actions .primary-link {
    background: var(--jjww-primary) !important;
    border-color: var(--jjww-primary) !important;
    color: #fff !important;
    border-radius: var(--jjww-radius-sm) !important;
    box-shadow: var(--jjww-shadow-sm);
}

body.jjw-web .cloud-home-page .text-link,
body.jjw-web .cloud-home-page .hero-actions .text-link {
    color: var(--jjww-t2) !important;
    background: transparent !important;
    border-color: transparent !important;
}

body.jjw-web .cloud-home-page .card-btn {
    color: var(--jjww-primary) !important;
}

/* ---- 18.9 hero：紫签名色 → 后台主色深色端；正文/指标卡统一到同一套 ---- */
body.jjw-web .cloud-home-page .enterprise-hero,
body.jjw-web .enterprise-hero {
    background:
        linear-gradient(115deg, rgba(10, 14, 28, .92) 0%, rgba(10, 14, 28, .58) 55%, rgba(10, 14, 28, .38) 100%),
        linear-gradient(115deg, #101a33 0%, var(--jjww-primary-deep) 100%) !important;
    color: #fff;
    border: 0 !important;
}

body.jjw-web .cloud-home-page .hero-copy h1,
body.jjw-web .cloud-home-page .hero-copy h1 span {
    color: #fff !important;
}

body.jjw-web .cloud-home-page .hero-copy p {
    color: rgba(255, 255, 255, .82) !important;
}

body.jjw-web .cloud-home-page .hero-metric-deck .metric-card {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: var(--jjww-radius-sm) !important;
    color: #fff !important;
}

body.jjw-web .cloud-home-page .hero-metric-deck .metric-card strong {
    color: #fff !important;
}

body.jjw-web .cloud-home-page .hero-metric-deck .metric-card small {
    color: rgba(255, 255, 255, .66) !important;
}

body.jjw-web .cloud-home-page .hero-hud-chip,
body.jjw-web .cloud-home-page .hud-sub-chip {
    border-radius: var(--jjww-radius-sm) !important;
}

body.jjw-web .cloud-home-page .portrait-radar-ring.ring-1 {
    border-color: rgba(255, 255, 255, .22) !important;
}

body.jjw-web .cloud-home-page .portrait-radar-ring.ring-2 {
    border-color: rgba(255, 255, 255, .14) !important;
}

body.jjw-web .cloud-home-page .portrait-glow {
    background: radial-gradient(ellipse, rgba(255, 255, 255, .16), transparent 66%) !important;
}

/* ==========================================================================
 * 19. 设计系统接管（基线设计系统 → 本站购物车风格）—— 阶段14
 * --------------------------------------------------------------------------
 * 首页结构基于基线设计系统，其 8 个样式层原样落地（见 universalHead.html）。
 * 但它自带珊瑚红品牌色（#ff6868）与暖底（#fff8f6），与本站购物车主题
 * （`--buttoncolor` 驱动 + 蓝白扁平 + #e1e6f0 描边）不是一套。
 * 本节在最后加载，把它的令牌整体接管 —— 之后只改这一节即可全局换肤：
 *   主色/强调   → 后台 --buttoncolor
 *   文本/描边/面 → 购物车主题色系（#212529 / #4e5969 / #86909c / #e1e6f0 / #f7f8fa）
 *   圆角        → 本主题 --jjww-radius（阶段3 拍板的 6–10px 带）
 *   节奏/内容宽  → --jjww-section-y 与后台 --maxwidth
 * 对方 8 层保持原样不动，便于日后与其官网对照。
 * ========================================================================== */
body.jjw-web {
    --site-brand: var(--buttoncolor, #165dff);
    --site-brand-hover: var(--buttoncolor, #165dff);
    --site-brand-active: var(--buttoncolor, #165dff);
    --site-brand-soft: #f2f7ff;
    --site-brand-faint: rgba(22, 93, 255, .08);

    --site-text-primary: #212529;
    --site-text-secondary: #4e5969;
    --site-text-tertiary: #86909c;
    --site-text-disabled: #c9cdd4;
    --site-text-inverse: #fff;

    --site-surface-muted: #f7f8fa;
    --site-surface-subtle: #fafbfc;
    --site-surface-raised: #fff;

    --site-outline: #e1e6f0;
    --site-outline-soft: #eceef3;
    --site-outline-strong: #d9dee8;

    --site-info: var(--buttoncolor, #165dff);
    --site-success: #00b42a;
    --site-warning: #ff7d00;
    --site-danger: #f53f3f;

    --site-radius-structural: var(--jjww-radius-sm);
    --radius-control: var(--jjww-radius-sm);
    --radius-card: var(--jjww-radius);
    --radius-panel: var(--jjww-radius);

    /* 基线 8 层的版式是按 **1480px 画布**写死像素的：
       hero 视频 --video-render-width:1421px + 热区 left:785/1078/1324/1078（注释即写 "1480 × 620"）、
       .advantages-layout 530px+910px。--fixed-width 只被基线自己的类消费
       （.content-width / .nav-inner / .hero-inner / .hero-media-frame / .hero-overlay /
         .product-advantages / .platform-chain），本站自有导航/页脚不使用这些类，
       故这里把它恢复成基线的原始画布 1480px，否则热区与 530+910 会错位。
       注意：后台 --maxwidth 是 1440，与画布差 40px（左右各 20px）——这是
       「基线版式」与「本站自有页头/页脚宽度」的固有差值；把后台 --maxwidth 调到 1480 可完全对齐。 */
    --fixed-width: 1480px;
    --site-content-width: var(--maxwidth, 1480px);
    --site-section-space: var(--jjww-section-y);
    --site-section-space-compact: var(--jjww-section-y);
    --site-heading-content-gap: clamp(28px, 3vw, 48px);
}

/* 容器宽度：本文件**不再**覆盖 .content-width（阶段17-b 校正）
   原先这里写过 `body.jjw-web .content-width { width: min(var(--maxwidth,1480px), calc(100% - 64px)) }`，
   是一条**从未生效的死规则** —— 基线 overrides.css 里有
     .nav-inner, .hero-inner, .content-width { width: var(--fixed-width) !important; max-width: none !important;
                                              margin-left: auto; margin-right: auto; }
   `!important` 胜过任何非 important 声明，所以容器实际宽度一直是 `--fixed-width`。
   现在 §18 已把 `--fixed-width` 恢复成基线的 1480px 画布，容器随之正确，
   故删除该死规则，避免后人误以为容器宽由 `--maxwidth` 决定。 */

/* ---- 19.1 Hero：暖珊瑚底 → 中性软底，暖色光晕改主色 ---- */
body.jjw-web .hero {
    /* 基线原值 #fff：现在 hero 用的是真视频，留白带必须与视频底色同白，
       否则宽屏下视频左侧那条未覆盖区会露出 #f7f8fa 的灰缝。 */
    background: #fff;
}

body.jjw-web .hero-overlay {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, .96) 0%,
        rgba(255, 255, 255, .80) 34%,
        rgba(247, 248, 250, .28) 68%,
        rgba(247, 248, 250, .36) 100%) !important;
}

body.jjw-web .hero::before,
body.jjw-web .hero::after {
    opacity: .20 !important;
    filter: blur(80px) !important;
    background: radial-gradient(ellipse at center, #cfe0ff 0%, transparent 72%) !important;
}

/* ---- 19.2 主 CTA：购物车主按钮形态 ---- */
body.jjw-web .hero-cta,
body.jjw-web .site-primary-cta-hover {
    background: var(--buttPrimary, linear-gradient(180deg, #3d7fff 0%, #0053fc 64%, #003bfc 100%)) !important;
    border-color: transparent !important;
    color: #fff !important;
    border-radius: var(--jjww-radius-sm) !important;
    box-shadow: var(--jjww-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
}

body.jjw-web .hero-cta:hover,
body.jjw-web .site-primary-cta-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--jjww-shadow);
}

/* ---- 19.3 Hero 底衬：已撤（阶段17-b）
   阶段17 之前 hero 没有真素材，这里用自绘网格 + 主色光晕当底衬。阶段17 已把基线
   的 5 段视频原样落地，这两个伪元素是 .hero-media-frame 的 ::before/::after，
   位置在 .hero-video 之后 → 会盖在视频上（网格纹 + 一层光晕），故整组删除。
   基线没有这两条规则，删掉即回到对方原样。 */

/* ---- 19.4 产品优势：几何全部回到基线原值（阶段17-b 修正）
   script.js 里这些坐标是**写死的常量**，围绕「910×740 大面板」推导：
     illustrationScale = 740 / 830            （SVG viewBox 高 830 → 显示高必须正好 740）
     illustrationOffsetX = 49.34
     restingFaceOrigins / activeFaceOrigins   （六张卡在 910×740 里的落点）
   并把 stage.getBoundingClientRect() 的局部像素直接代进上式。
   ⇒ .advantages-stage 必须是**恰好 910×740**、且未被 CSS transform 缩放，
     否则光标定位与命中判定全部错位。所以这里不再改它的尺，交给 overrides.css：
       .content-width       = var(--fixed-width) = 1480（§18 已恢复）
       .advantages-layout   = padding 0 20px + grid 530px / 910px → 内宽 1440 = 530 + 910
       .advantages-stage    = 910px × 740px
       .advantages-illustration = 910px × 740px（viewBox 1020×830 与 910×740 近乎同比）
   下列唯一保留的覆盖是 .advantages-list 的高度：基线写死 740px，本站单条文案更长，
   在桌面列宽下会溢出 —— 它只影响左列自身高度，不参与上面任何坐标推导，改成 auto 是安全的。 */
body.jjw-web .advantages-list {
    height: auto; /* 基线原值 740px；本站文案更长，改由内容撑开 */
}

/* ---- 19.5 三条产品线：结构同基线 platform-chain（左示意 ↔ 右 Tab + 标签） ---- */
body.jjw-web .platform-chain {
    min-width: 0; /* 原写死 1480px：本站内容宽 = 后台 --maxwidth，交给容器决定 */
    background:
        radial-gradient(circle at 14% 44%, var(--site-brand-faint), transparent 28%),
        linear-gradient(180deg, #fbfcfd 0%, #fff 74%);
}

body.jjw-web .platform-chain-showcase {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 88px);
}

body.jjw-web .platform-chain-artwork,
body.jjw-web .platform-chain-artwork-shell {
    width: 100%;
}

body.jjw-web .platform-chain-content {
    width: 100%;
    min-width: 0;
}

/* 示意图：本站自绘内联 SVG（对方此处是其自家产品界面截图，不引用） */
body.jjw-web .platform-chain-shot-body {
    background: #fff;
}

body.jjw-web .jjww-shot-art {
    width: 100%;
    height: 100%;
    display: block;
    color: var(--buttoncolor, #1652d9);
}

/* ---- 19.6 暖色残留收口：对方写死的珊瑚红 → 本站主色 ---- */
body.jjw-web .home-notice-type,
body.jjw-web .home-notice-more span,
body.jjw-web .home-notice-more:hover,
body.jjw-web .home-notice-item:hover .home-notice-title {
    color: var(--buttoncolor, #1652d9);
}

body.jjw-web .tilt-card-shell.is-hovered .highlight-card img {
    filter: drop-shadow(0 6px 8px var(--site-brand-faint));
}

body.jjw-web .platform-chain-tab.is-active {
    color: var(--buttoncolor, #1652d9);
}

body.jjw-web .platform-chain-tab:focus-visible,
body.jjw-web .advantages-stage:focus-visible {
    outline-color: var(--buttoncolor, #1652d9);
    box-shadow: 0 0 0 3px var(--site-brand-faint);
}

body.jjw-web .platform-chain-indicator {
    background: var(--buttoncolor, #1652d9);
}

body.jjw-web .platform-chain-shot-dots i:first-child {
    background: var(--buttoncolor, #1652d9);
}

body.jjw-web .platform-chain-tags li:hover {
    color: var(--buttoncolor, #1652d9);
    background: var(--site-brand-soft);
}

/* ---- 19.7 响应式收口：已撤（阶段17-b）
   原先这里自己写了 1200px / 992px 两个断点改 .advantages-layout、.advantages-stage、
   .advantages-list、.platform-chain-showcase。核对后确认全部与基线自带的
   responsive-shell.css 重复且更早/更粗 —— 对方在 **@media (max-width: 1180px)** 里已经：
     · .product-advantages .advantages-layout → flex 纵向堆叠
     · .product-advantages .advantages-stage  → width:100%; height:clamp(300px,72vw,740px)
     · .product-advantages .advantages-visual-stack/.advantages-illustration → 100% × 100%
     · .product-advantages .advantage-item/.advantage-detail/.advantage-trigger 等全部改流式
     · .platform-chain-showcase → repeat(2, minmax(0,1fr))，更窄处 → 1fr
   自己再写一份会与它打架（例如 min-height:420px 会盖掉对方的 clamp 高度），故整块删除，
   完全交给 responsive-shell.css —— 这也是「照搬」应有的样子。 */

/* ==========================================================================
 * 20. 尾段接管（home-partners / about-us / global-cta）—— 阶段16
 * --------------------------------------------------------------------------
 * 阶段16 把首页尾段也换成基线结构（伙伴墙 / 关于我们 / 底部 CTA）。
 * 与 §19 同一纪律：对方 8 层原样不动，所有接管集中在本文件。
 * ========================================================================== */

/* ---- 20.1 令牌补齐：对方 site-components.css 里还有一组 coral 与其派生 ---- */
body.jjw-web {
    --site-coral: var(--buttoncolor, #1652d9);
    --site-coral-dark: var(--buttoncolor, #1652d9);
    --site-coral-soft: var(--buttoncolor, #1652d9);
    /* 首屏左侧光晕：对方的暖珊瑚 → 中性主色淡光 */
    --site-v10-hero-glow: radial-gradient(circle at 15% 43%, var(--site-brand-faint), transparent 35%);
    --site-surface-page: #fff;
}

/* ---- 20.2 关于我们：对方写死 685 + 110 + 685，改流式 ---- */
body.jjw-web .about-us {
    min-width: 0;
}

body.jjw-web .about-showcase {
    grid-template-columns: minmax(0, 685fr) minmax(0, 685fr);
    gap: clamp(48px, 6vw, 88px);
    min-height: 0;
}

body.jjw-web .about-copy {
    height: auto;
}

body.jjw-web .about-visual {
    width: 100%;
    height: auto;
}

body.jjw-web .jjww-about-art {
    width: 100%;
    height: auto;
    display: block;
    color: var(--buttoncolor, #1652d9);
}

/* ---- 20.3 伙伴墙：本文件只渲染 logo 泳道（后台无品牌名/描述字段，不伪造）---- */
body.jjw-web .home-partners {
    min-width: 0;
}

body.jjw-web .home-partner-network {
    grid-template-columns: minmax(0, 1fr);
}

body.jjw-web .home-partner-card {
    align-items: center;
    justify-content: center;
}

/* ---- 20.4 底部 CTA：对方是珊瑚底 + 白底主按钮，改后台主色 ---- */
body.jjw-web .global-cta {
    background: var(--site-coral);
}

body.jjw-web .global-cta-copy h2 {
    font-size: clamp(26px, 2.6vw, 38px);
}

/* ---- 20.5 本轮接入的基线视觉（图标底 / 跟随光标 / 面板光晕）暖色收口 ----
   对应的静态 SVG（advantage-*-active.svg、advantage-theme-outline-*.svg、
   home-about.svg）已把其中的 #F16662 / #FF6868 替换为品牌蓝 #0052D9 ——
   SVG 文件内的颜色无法跟着后台主色走，改后台主色时这 9 个文件需同步（见记忆）。 */
body.jjw-web .highlight-card-icon {
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--buttoncolor, #1652d9) 72%, #fff),
        var(--buttoncolor, #1652d9)) !important;
    box-shadow: 0 8px 16px color-mix(in srgb, var(--buttoncolor, #1652d9) 24%, transparent) !important;
}

body.jjw-web .advantage-reticle {
    filter:
        drop-shadow(0 0 1px rgba(255, 255, 255, .98))
        drop-shadow(0 3px 7px color-mix(in srgb, var(--buttoncolor, #1652d9) 34%, transparent)) !important;
}

body.jjw-web .advantage-reticle b {
    background: var(--buttoncolor, #1652d9) !important;
    box-shadow: 0 0 0 1px var(--buttoncolor, #1652d9) !important;
}

body.jjw-web .advantage-reticle i {
    border-color: var(--buttoncolor, #1652d9) !important;
}

body.jjw-web .advantage-reticle::before,
body.jjw-web .advantage-reticle::after {
    background: var(--buttoncolor, #1652d9) !important;
}

body.jjw-web .advantage-cursor-bubble,
body.jjw-web .advantage-cursor-bubble::before {
    background: var(--buttoncolor, #1652d9) !important;
}

body.jjw-web .advantage-cursor-bubble {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--buttoncolor, #1652d9) 24%, transparent) !important;
}

body.jjw-web .advantages-stage::before {
    background: radial-gradient(circle 180px at var(--stage-pointer-x) var(--stage-pointer-y),
        color-mix(in srgb, var(--buttoncolor, #1652d9) 8%, transparent),
        color-mix(in srgb, var(--buttoncolor, #1652d9) 3%, transparent) 42%,
        transparent 72%) !important;
}

body.jjw-web .about-cta:hover {
    box-shadow: 0 12px 28px color-mix(in srgb, var(--buttoncolor, #1652d9) 25%, transparent);
}

body.jjw-web .about-cta:focus-visible {
    outline-color: var(--buttoncolor, #1652d9) !important;
}

/* ==========================================================================
 * 21. 珊瑚色兜底（阶段17-c）—— 扫掉最后几处写死的基线暖色
 * --------------------------------------------------------------------------
 * 做法：把页面上真实出现的类拿去 8 层 CSS 里做交叉扫描，逐条筛出**仍带珊瑚色**的规则。
 * 扫出的漏网项（其余项 §19.6 / §20.5 已接管）：
 *   overrides.css        .about-cta { background: #f66562 }        ← 关于我们那枚实心红按钮
 *   site-components.css  .global-cta-button-primary { color: var(--site-coral-dark) }
 *   overrides.css        .platform-chain-indicator { background: linear-gradient(90deg,#ff6868,#ff8f78) }
 *   site-components.css  .global-cta { background: var(--site-coral) }
 * 本节的纪律：品牌色一律**直连 `--buttoncolor`**，不再经 `--site-coral` 这一跳，并加 `!important`。
 * 这样即使令牌块将来被裁掉，最差也是本主题默认蓝 #165dff，**绝不会退回珊瑚红**。
 * ========================================================================== */

body.jjw-web .about-cta,
body.jjw-web .about-cta:hover,
body.jjw-web .about-cta:focus-visible {
    background: var(--buttPrimary, linear-gradient(180deg, #3d7fff 0%, #0053fc 64%, #003bfc 100%)) !important;
    color: #fff !important;
    border-color: transparent !important;
}

body.jjw-web .global-cta {
    background: var(--buttoncolor, #165dff) !important;
}

body.jjw-web .global-cta-button-primary,
body.jjw-web .global-cta-button-primary:hover {
    color: var(--buttoncolor, #165dff) !important;
}

body.jjw-web .platform-chain-indicator {
    background: var(--buttoncolor, #165dff) !important;
}

/* ==========================================================================
 * 22. 伙伴 logo 弹幕（阶段18）—— 居中 · 无缝横向滚动
 * --------------------------------------------------------------------------
 * 为什么不用 home-partners.js：
 *   它入口是硬门禁（实测源码）：
 *     if (!stage || !feature || !logo || !name || !category || !description || !link ||
 *         !live || !laneElements.length) return;
 *   并且要求**每张卡都带 `data-name`**。本站后台「行业伙伴」模块只有图片
 *   （没有品牌名 / 描述 / 官网字段），不该为了点亮动效去编造品牌资料
 *   ⇒ 该脚本在本主题按空转处理（它自己会 return，无副作用），
 *     滚动改由下面这段纯 CSS 驱动。
 *
 * 无缝原理（改数字前先读）：
 *   模板把每条轨道的卡片**渲染两遍**，则轨道宽  W = 2 × 单程 − gap。
 *   一次循环需要的位移 = 单程内容 + 一个 gap = (W + gap) / 2 = W/2 + gap/2
 *   ⇒ `translate3d(calc(-50% - var(--jjww-partner-gap) / 2), 0, 0)`
 *     正好等于一个单程，接缝处不跳。
 *   ⚠️ `--jjww-partner-gap` 必须与 home-partners.css 里 `.home-partner-track { gap }`
 *      的实际值（20px）保持一致，否则每循环一次会错半个 gap。
 *
 * 相邻两条轨道反向滚动，观感更接近原版「对开弹幕」。
 * 鼠标移入泳道区暂停，方便看清 logo；系统开启"减少动效"时完全静止。
 * ========================================================================== */

body.jjw-web {
    --jjww-partner-gap: 20px;      /* ← 必须与 .home-partner-track 的 gap 一致 */
    --jjww-partner-duration: 52s;  /* 一整圈的时间，越长越慢 */
}

@keyframes jjww-partner-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-50% - var(--jjww-partner-gap) / 2), 0, 0); }
}

body.jjw-web .home-partner-track {
    animation: jjww-partner-marquee var(--jjww-partner-duration) linear infinite;
    will-change: transform;
}

body.jjw-web .home-partner-lane:nth-child(even) .home-partner-track {
    animation-direction: reverse;
}

body.jjw-web .home-partner-lanes:hover .home-partner-track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    body.jjw-web .home-partner-track {
        animation: none;
    }
}

/* ==========================================================================
 * 23. 版式：侧边距加大 + 上下更紧凑（阶段19）
 * --------------------------------------------------------------------------
 * 两条诉求：
 *   ① 「整体侧边距加大」—— 原来 `--fixed-width` 被钉成常量 1480px（基线画布），
 *      窗口一窄就几乎没有边距、还会被裁；现在改成**跟随窗口的流式画布**：
 *          --jjww-canvas = min(后台 --maxwidth, 100% - 2 × gutter)
 *      并让 CMS 容器（.comp_container，页头/页脚/后台模块在用）取同一把尺，
 *      这样导航与各段落左右严格对齐，窄窗口也自动留出边距。
 *   ② 「上下结构更加紧凑」—— 把分区间距与标题→内容间距收一档，并接管基线那层
 *      写死的 120px / 92px / 82px 节奏。
 *
 * ⚠️ 改画布宽度前必读（否则会重犯阶段17 的错）：
 *   · 优势区大面板必须**恰好 910×740**（script.js 里 illustrationScale=740/830 是常量），
 *     所以 .advantages-layout 改成「左列 1fr + 右列固定 910px」：
 *     容器变窄时压的是左列，超出部分从右侧裁 —— 而插画右边缘约 175px 本来就是空白，
 *     裁掉看不出来。左列给 360px 下限，保证六条文案不被压扁。
 *   · hero 的 4 个热区原本按 1480 画布写死 left，画布一变就错位。视频是**右对齐**的
 *     （right:0 + translateX(144px) + object-position:right center），故把热区改成
 *     **右锚**，就与画布宽度无关了（右锚值 = 1480 − 原 left − 原 width）。
 * ========================================================================== */

/* 内容尺令牌 `--jjww-gutter` / `--jjww-canvas` 的**定义已上移到 jjw-nav.css 的 :root**
   （阶段21）：页头导航是官网与购物车共用的组件，购物车页不加载本文件，
   令牌必须放在两边都加载的层里，否则购物车页算不出画布宽。此处只消费，别再定义一遍。 */
body.jjw-web {
    /* 覆盖阶段17-b 钉死的常量画布，改回流式 */
    --fixed-width: var(--jjww-canvas);
}

/* CMS 容器（页头导航 / 页脚 / 后台模块）与基线段落同一把尺 */
body.jjw-web .comp_container,
body.jjw-web .comp_container_100 {
    width: var(--jjww-canvas) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* hero 热区改右锚（值与 overrides.css 的 1480 画布一一对应，勿随手改） */
body.jjw-web .gpu-interaction-zone {
    left: auto;
    right: 410px;              /* 1480 − 785 − 285 */
}

body.jjw-web .server-room-interaction-zone {
    left: auto;
    right: 164px;              /* 1480 − 1078 − 238 */
}

body.jjw-web .cabinet-interaction-zone {
    left: auto;
    right: 5px;                /* 1480 − 1324 − 151 */
}

body.jjw-web .panel-interaction-zone {
    left: auto;
    right: 5px;                /* 1480 − 1078 − 397 */
}

/* 优势区：左列弹性 + 右列固定 910（见本节顶部说明） */
body.jjw-web .advantages-layout {
    grid-template-columns: minmax(360px, 1fr) 910px;
    padding: 0;
}

/* ---- 上下节奏收紧 ---- */
body.jjw-web {
    --jjww-section-y: clamp(52px, 5.2vw, 84px);      /* 原 clamp(72px, 8vw, 112px) */
    --jjww-heading-gap: clamp(24px, 2.6vw, 40px);    /* 原 clamp(36px, 4vw, 56px) */
}

/* 接管基线 V10 节奏层里写死的分区间距 */
body.jjw-web .product-advantages,
body.jjw-web .platform-chain,
body.jjw-web .customer-feedback {
    padding-top: var(--jjww-section-y) !important;
    padding-bottom: 0 !important;
}

body.jjw-web .product-advantages,
body.jjw-web .home-notice + .product-advantages {
    padding-top: var(--jjww-section-y) !important;   /* 基线写死 120px */
}

body.jjw-web .about-us {
    padding-top: var(--jjww-section-y) !important;
    padding-bottom: 56px !important;                 /* 基线 96px */
}

body.jjw-web .advantages-heading,
body.jjw-web .platform-chain-heading,
body.jjw-web .feedback-heading,
body.jjw-web .about-heading {
    margin-bottom: var(--jjww-heading-gap) !important;
}

/* ==========================================================================
 * 24. 全部产品分类（阶段19）—— 首页一眼看全 15 个分类与其中的全部商品
 * --------------------------------------------------------------------------
 * 数据来自后台「产品与服务」$system_comp，商品链接直接用后台给的 {$co.url}
 * （形如 /cart?fid=1&gid=69），本主题**不拼接、不改写** URL。
 * 渐进增强：默认**全部分类依次铺开**（= 完整清单，无 JS 也能看全、能点）；
 * 有 JS 时 jjw-web.js §4 给容器加 .is-tabbed，才收成「左分类栏 + 右商品网格」。
 * ========================================================================== */

body.jjw-web .jjww-catalog {
    padding: var(--jjww-section-y) 0 0;
    background: #fff;
}

body.jjw-web .jjww-catalog-body {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/* ---- 左：分类导航 ---- */
body.jjw-web .jjww-catalog-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 640px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

body.jjw-web .jjww-catalog-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--site-outline, #e1e6f0);
    border-radius: var(--radius-control, 8px);
    background: #fff;
    color: #475467;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

body.jjw-web .jjww-catalog-tab:hover {
    border-color: var(--buttoncolor, #165dff);
    color: var(--buttoncolor, #165dff);
}

body.jjw-web .jjww-catalog-tab.is-active {
    border-color: var(--buttoncolor, #165dff);
    background: var(--site-brand-soft, #f2f7ff);
    color: var(--buttoncolor, #165dff);
    font-weight: 600;
}

body.jjw-web .jjww-catalog-tab-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    object-fit: contain;
}

body.jjw-web .jjww-catalog-tab-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.jjw-web .jjww-catalog-tab-count {
    margin-left: auto;
    flex: 0 0 auto;
    color: #98a2b3;
    font-size: 12px;
    font-style: normal;
}

/* ---- 右：分类内容 ---- */
body.jjw-web .jjww-catalog-panels {
    min-width: 0;
}

body.jjw-web .jjww-catalog-panel {
    display: block;                 /* 无 JS：全部分类依次铺开 */
    padding-bottom: var(--jjww-section-y);
}

body.jjw-web .jjww-catalog-body.is-tabbed .jjww-catalog-panel {
    display: none;
    padding-bottom: 0;
}

body.jjw-web .jjww-catalog-body.is-tabbed .jjww-catalog-panel.is-active {
    display: block;
}

body.jjw-web .jjww-catalog-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--site-outline-soft, #eceef3);
}

body.jjw-web .jjww-catalog-panel-head h3 {
    margin: 0;
    color: #212529;
    font-size: 20px;
    font-weight: 650;
    letter-spacing: -.01em;
}

body.jjw-web .jjww-catalog-panel-head p {
    margin: 0;
    color: #86909c;
    font-size: 13px;
    line-height: 1.7;
}

body.jjw-web .jjww-catalog-panel-all {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--buttoncolor, #165dff);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

body.jjw-web .jjww-catalog-panel-all i {
    width: 6px;
    height: 6px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
}

body.jjw-web .jjww-catalog-goods {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.jjw-web .jjww-catalog-link {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 112px;
    padding: 16px 18px;
    border: 1px solid var(--site-outline, #e1e6f0);
    border-radius: var(--radius-card, 10px);
    background: #fff;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body.jjw-web .jjww-catalog-link:hover {
    border-color: var(--buttoncolor, #165dff);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--buttoncolor, #165dff) 12%, transparent);
    transform: translateY(-2px);
}

body.jjw-web .jjww-catalog-name {
    min-width: 0;                 /* 允许在 flex 行里换行，长商品名不会把卡片撑破 */
    overflow-wrap: anywhere;
    color: #212529;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.4;
}

body.jjw-web .jjww-catalog-desc {
    color: #86909c;
    font-size: 12.5px;
    line-height: 1.65;
}

/* 商品行首：国家图标 + 名称 + 推荐标签 同一行（阶段22；对齐导航菜单 .list-product-title 的形态） */
body.jjw-web .jjww-catalog-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* 国家图标：/upload/common/country/{代码}.png（后台维护，实测本站 12 个国家代码文件齐全） */
body.jjw-web .jjww-catalog-country {
    flex: 0 0 auto;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .08);
}

/* 没有国家代码时的回退：站点自己的 icon（{$www.ico}）。方图，按圆形裁，避免被当国旗拉扁 */
body.jjw-web .jjww-catalog-country.is-fallback {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: contain;
    box-shadow: none;
}

/* 推荐标签（后台商品的 tagline / label） */
body.jjw-web .jjww-catalog-tag {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--buttoncolor, #165dff) 10%, #fff);
    color: var(--buttoncolor, #165dff);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

body.jjw-web .jjww-catalog-empty {
    margin: 0;
    color: #98a2b3;
    font-size: 13px;
}

/* 窄屏：分类栏转到上方横向滚动，商品网格自适应 */
@media (max-width: 1180px) {
    body.jjw-web .jjww-catalog-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    body.jjw-web .jjww-catalog-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 6px;
    }

    body.jjw-web .jjww-catalog-tab {
        width: auto;
        flex: 0 0 auto;
    }

    body.jjw-web .jjww-catalog-panel-head {
        margin-bottom: 12px;
    }
}

/* ==========================================================================
 * 25. 统一内容尺：正文 / 页脚 / 页头导航 共用同一条左右边线（阶段20–21）
 * --------------------------------------------------------------------------
 * 症状（用户反馈）：「整体内容的侧边距都是 0，要对齐底部的导航栏」。
 *   实测窄于 1480px 的窗口下正文左右只剩 24px，页脚还有 ~80px，两把尺不一致。
 * 根因（两条，缺一不可）：
 *   ① 缓存：阶段18 / 19 改了本文件却没抬 `&jjw=` 后缀，浏览器一直吃阶段17-c 的旧 CSS
 *      —— 阶段19 新写的画布 / 侧边距在老 URL 下永远不生效。已抬到 `jjw=20`（阶段20）
 *      与 `jjw=21`（阶段21）。以后改这些文件，**必须同时抬后缀**。
 *   ② 宽度：基线 responsive-shell.css 在 `@media (max-width:1479px)` 里用
 *        .content-width, .nav-inner, .hero-inner, .highlight-grid {
 *            width: calc(100% - 48px) !important; max-width: 1480px !important }
 *      把内容列钉成「窗口 − 48px」；该文件在 overrides.css 之后、本文件之前加载，
 *      而本文件自阶段17-b 起不再声明 .content-width 宽度 → 窄窗下没人能压这条 !important。
 *      页脚走的是后台 .comp_container（§23 已钉到 --jjww-canvas），于是两者分叉。
 * 做法：全站只认一条边线
 *   --jjww-canvas = min(后台 --maxwidth, 100% - 2 × --jjww-gutter)   （定义见 jjw-nav.css）
 *   ① 内容列（.content-width 一族）任何宽度都等于 --jjww-canvas；
 *   ② 页头导航背景仍满宽，只把**内容**压到同一条边线 → 规则在 static/css/jjw-nav.css
 *      （页头是官网与购物车共用组件，不能只写在只挂官网的本文里）；
 *   ③ 页脚 / 后台容器盒子本来就等于 --jjww-canvas，再取消它自己叠加的后台 --padding
 *      （64px），否则页脚文字比正文再往里缩 64px，看着仍然没对齐。
 *
 * ⚠️ 反面写法（别用）：想让正文去够「页脚文字」而把内容列再收 2×--padding ——
 *    优势区大面板必须恰好 910×740（script.js 里 illustrationScale 是常量），
 *    画布再收 128px 会把 910 那一列挤出容器、裁进画面，窄窗直接露馅。
 *    ⇒ 正确方向是「把页脚多出来的那 64px 内边距去掉」，不是把正文再压窄。
 *
 * ⚠️ 内容列宽度的下限（阶段21 记录）：优势区 .advantages-layout 需要
 *    360px + 910px = 1270px；窗口 ≲ 1300px 时画布已 < 1095px，
 *    插画右缘那 ~175px 空白吃满后开始裁进画面。要再加大留白就得动
 *    --jjww-gutter（jjw-nav.css :root 一处），或改 script.js 的插画缩放常量。
 * ========================================================================== */

/* ① 内容列：任何宽度都用同一把尺（压掉 responsive-shell 的 calc(100% - 48px)） */
body.jjw-web .content-width,
body.jjw-web .nav-inner,
body.jjw-web .hero-inner,
body.jjw-web .highlight-grid {
    width: var(--jjww-canvas) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ② 页头导航的对齐规则**已移出本文件 → static/css/jjw-nav.css**（阶段21）。
      原因：页头是官网与购物车共用的同一组件，而本文件只挂在「官网 + PC」，
      购物车页拿不到 ⇒ 官网页头缩进了、购物车页头仍满宽，同一个组件两种样子。
      jjw-nav.css 挂在 `{if $client=='pc'}`，两边同时生效。
      ⚠️ 以后别把页头样式写回这里，也别写进 jjw-wap.css（购物车 WAP 同样不加载）。 */

/* ③ 页脚容器（footerA / footerB 两种外壳都带 .footerContainer-h）：
      盒子宽度沿用 §23 的 --jjww-canvas，但去掉 .comp_container 自己叠加的 0 var(--padding)，
      让页脚文字 / 分割线与正文落在同一条边线上 */
body.jjw-web .footerContainer-h .comp_container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}