/* ============================================================
   精品牙科网 — 前台样式 (仅 _LayoutPage1)  P0 设计令牌版
   Bootstrap 5 电商 · 简洁大气优雅 · 不污染后台
   颜色系统：10 级同色系色阶 + 语义令牌；主题切换见 themes.css
   ============================================================ */

/* ═══════════════ 设计令牌 ═══════════════ */
:root {
    /* ── 品牌色阶（10 级 50→900）默认经典橙 ──
       2026-08-11 重构：明快亮橙 + 中性色（白/深灰/近黑）纳入，替代旧"同色相渐变"；
       旧配色注释保留（重构成功后再删）：
       --jp-c-50:#FFF4EC; --jp-c-100:#FFE5D1; --jp-c-200:#FFC9A3; --jp-c-300:#FFA86E; --jp-c-400:#FF7A33;
       --jp-c-500:#FF5C01; --jp-c-600:#E04E00; --jp-c-700:#B83F00; --jp-c-800:#5C1E00; --jp-c-900:#3D1300;
    */
    --jp-c-50: #FFF8F3; /* 极浅暖白：区块浅底/页面白略带温度 */
    --jp-c-100: #FFEFE2; /* 极浅橙：选中/标签浅底 */
    --jp-c-200: #FFE0C9; /* 浅橙：浅边框/toast */
    --jp-c-300: #FFC9A3; /* 过渡 */
    --jp-c-400: #FFA25C; /* hover 浅/渐变 */
    --jp-c-500: #FF6B00; /* ★ 主色（亮橙） */
    --jp-c-600: #E85400; /* 主按钮 */
    --jp-c-700: #C74000; /* 按钮 hover */
    --jp-c-800: #3F3F3F; /* 深灰：深文字/强调 */
    --jp-c-900: #1A1A1A; /* 近黑：黑色元素 */
    /* ── 语义令牌（映射色阶；组件只用语义令牌）── */
    --jp-primary: var(--jp-c-500);
    --jp-primary-hover: var(--jp-c-600);
    --jp-primary-active: var(--jp-c-700);
    --jp-primary-deep: var(--jp-c-600);
    --jp-primary-soft: var(--jp-c-100);
    --jp-primary-softer: var(--jp-c-50);
    --jp-primary-border: var(--jp-c-200);
    --jp-accent: var(--jp-c-500); /* 强调（购物车角标等） */
    /* 2026-08-11 令牌收敛：组件只用语义令牌，色阶仅 themes.css 覆盖 */
    --jp-primary-deepest: var(--jp-c-900); /* 最深：深色骨架背景（菜单栏/页脚/搜索框/全部分类） */
    --jp-primary-deep-strong: var(--jp-c-800); /* 次深：深色强调文字 / 深色按钮 hover */
    --jp-primary-mid: var(--jp-c-300); /* 中浅：下划线/描边（二级 hover 下划线） */
    /* 骨架角色层（2026-08-11：top/bottom 走 chrome，不固定最深档；橙=白底橙点缀，青/蓝=深块，夜=近黑） */
    --jp-chrome: #FFFFFF; /* 骨架背景（默认橙=白底） */
    --jp-chrome-fg: #3F3F3F; /* 骨架主文字（默认橙=深灰） */
    --jp-chrome-fg-soft: #8A8A8A; /* 骨架次文字/链接 */
    --jp-page-bg: #FFFFFF; /* 页面背景（默认橙=白） */
    /* 中性灰阶（2026-08-11 收敛散落灰字面值；组件统一引用） */
    --jp-gray-200: #EAEAEA; /* 浅边框：顶条底边 */
    --jp-gray-300: #B9B9B9; /* 中：顶条图标 */
    --jp-gray-400: #B0B0B0; /* 中：卡片 hover 边框 */
    --jp-gray-500: #8A8A8A; /* 深：次要文字（顶条文字） */
    --jp-gray-600: #777777; /* 更深：面包屑/角标 */
    --jp-gray-700: #666666; /* 最深：链接 hover/购物车/登录注册 */
    --jp-gray-800: #4A4A4A; /* 近黑：面包屑 hover */
    --jp-gray-900: #333333; /* 近黑：登录注册 hover */
    /* 动效令牌（2026-08-11 统一 transition 时长与缓动） */
    --jp-ease: cubic-bezier(.4,0,.2,1);
    --jp-dur-fast: .15s;
    --jp-dur: .25s;
    --jp-dur-slow: .4s;
    /* 边框等级（2026-08-11 统一：常规默认 / 强调 hover / 骨架深） */
    --jp-border-default: var(--jp-line);
    --jp-border-strong: var(--jp-gray-400);
    --jp-border-chrome: var(--jp-c-800); /* 骨架深边框（橙=深灰、青/蓝=深青/深蓝、夜=中灰） */
    /* 字号刻度（2026-08-11 type scale：说明/小/正文/标题/区块/页面） */
    --jp-fs-caption: .75rem; /* 说明/角标 */
    --jp-fs-small: .8125rem; /* 小字 */
    --jp-fs-body: .875rem; /* 正文/卡片 */
    --jp-fs-title: 1rem; /* 标题 */
    --jp-fs-heading: 1.375rem; /* 区块标题 */
    --jp-fs-display: 1.5rem; /* 页面大标题 */
    --jp-price: var(--jp-gray-800); /* 价格固定色：统一深灰（2026-08-11 原 --jp-ink 近黑，统一为灰） */
    /* 价格字号刻度（2026-08-11） */
    --jp-fs-price-sm: .875rem; /* 排行/规格/搜索/侧栏 */
    --jp-fs-price: 1.15rem; /* 产品卡 */
    --jp-fs-price-lg: 1.75rem; /* 详情大价 */
    /* ── 中性色 ── */
    --jp-ink: #232323; /* 标题/深色区（顶条/页脚） */
    --jp-body: #555555; /* 正文 */
    --jp-muted: #8A8A8A; /* 次要说明 */
    --jp-placeholder: #A6A6A6; /* Placeholder 统一浅灰（2026-08-11 令牌） */
    --jp-line: #DEE2E6; /* 边框/分隔线 —— 统一中性灰，不随主题变色（2026-08-08，原 #F0E6E0 暖灰） */
    --jp-bg: #FAF5F0; /* 区块浅底 */
    --jp-surface: #FFFFFF; /* 卡片/内容面 */
    /* ── 功能色 ── */
    --jp-success: #16A34A;
    --jp-danger: #E23B3B; /* 促销角标/错误 */
    --jp-warning: #F5A623; /* 清仓角标 */
    --jp-info: #2563EB;
    /* ── 形状与阴影 ── */
    --jp-radius: 10px;
    --jp-radius-sm: 6px;
    --jp-shadow-sm: 0 1px 3px rgba(35,35,35,.06);
    --jp-shadow: 0 10px 30px rgba(35,35,35,.08);
    /* ── 字体 ──
       系统字体栈，零 CDN 零下载（自托管中文全量字体 5-15MB 不可取）。
       跨平台映射：Win=Segoe UI+微软雅黑 / macOS=-apple-system+苹方(PingFang) / Linux=Roboto+Noto Sans CJK SC
       部署目标 Ubuntu 服务器 + Windows/Linux/macOS 客户端；栈尾 sans-serif 兜底保证任何平台都有字。
       未来如需品牌感：可自托管小体积拉丁字体(100-300KB)放栈首，中文仍走系统栈。 */
    --jp-font-display: "Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
    --jp-font-body: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
    /* ── 兼容旧变量（迁移期；后续逐步移除）── */
    --blue: var(--jp-primary);
    --blue-dark: var(--jp-primary-deep);
    --blue-light: var(--jp-primary-soft);
    --red: var(--jp-danger);
    --amber: var(--jp-warning);
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-300: #e5e7eb;
    --gray-500: #6b7280;
    --gray-700: var(--jp-body);
    --gray-900: var(--jp-ink);
    --radius: var(--jp-radius-sm);
    --radius-lg: var(--jp-radius);
    --shadow: var(--jp-shadow-sm);
    --shadow-md: var(--jp-shadow);
}

body {
    font-family: var(--jp-font-body);
    color: var(--jp-body);
    /* 2026-08-12：页面底改 --jp-page-bg（=卡片面 --jp-surface 的下一位），night 下页面与卡片拉开层级；浅色主题两者同白无变化 */
    background: var(--jp-page-bg);
    -webkit-font-smoothing: antialiased;
}
/* 主题切换：仅页面背景轻微过渡；深色骨架（菜单栏/页脚/顶条/全部分类）直接设背景色立即切换，
   避免过渡时骨架与内部元素不同步导致"闪色再归位"（2026-08-11） */
body {
    transition: background-color var(--jp-dur-slow) var(--jp-ease), color var(--jp-dur-slow) var(--jp-ease);
}

::selection {
    background: var(--jp-primary);
    color: #fff;
}

a {
    color: var(--jp-primary);
    text-decoration: none;
}
/* 需要下划线提示可点击的链接（2026-08-12，如"添加地址"）；下划线颜色跟随文字色（非浏览器默认蓝） */
.link-underline {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: currentColor;
}
/* 文章详情：专题/返回上一页 灰色下划线，不随主题色（2026-08-14） */
.gray-link {
    color: var(--jp-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .gray-link:hover {
        color: var(--jp-ink);
    }
/* 2026-08-11 颜色克制：链接 hover 仅变灰，不再用主题色 */
a:hover {
    color: var(--jp-gray-700);
}

:focus-visible {
    outline: 2px solid var(--jp-primary);
    outline-offset: 2px;
}

/* Bootstrap 主色跟随主题 */
/* 【修改说明】2026-08-20：改为覆盖 Bootstrap 按钮 CSS 变量——此前只覆盖 background/border，
   :active(按下)状态仍走 Bootstrap 默认 --bs-btn-active-bg（#0a58ca 蓝）→ 主题色下按下闪现蓝色。
   现 normal/hover/active/disabled 全状态都跟随主题色。 */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--jp-primary);
    --bs-btn-border-color: var(--jp-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--jp-primary-hover);
    --bs-btn-hover-border-color: var(--jp-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--jp-primary-active);
    --bs-btn-active-border-color: var(--jp-primary-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--jp-primary-soft);
    --bs-btn-disabled-border-color: var(--jp-primary-soft);
}

.btn-outline-primary {
    --bs-btn-color: var(--jp-primary);
    --bs-btn-border-color: var(--jp-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--jp-primary);
    --bs-btn-hover-border-color: var(--jp-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--jp-primary-active);
    --bs-btn-active-border-color: var(--jp-primary-active);
}

.text-primary {
    color: var(--jp-primary) !important;
}

/* === Header === */
/* === Nav === */
.navbar-custom {
    background: var(--jp-primary);
    padding: 0;
}

    .navbar-custom .nav-link {
        color: rgba(255,255,255,0.92);
        padding: 12px 18px;
        font-weight: 500;
        font-size: .9rem;
        transition: .15s;
    }

        .navbar-custom .nav-link:hover, .navbar-custom .nav-link.active {
            background: var(--jp-primary-hover);
            color: #fff;
        }

/* === Section Heading === */
.section-heading {
    font-size: var(--jp-fs-heading);
    font-weight: 700;
    color: var(--jp-ink);
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--jp-line);
    margin-bottom: 1rem;
}

/* === Product Card（2026-08-11：图片完整显示、无边框、标题在图片下方、价格灰、hover 标题区换操作按钮） === */
.prod-card {
    background: transparent;
    border-radius: var(--jp-radius);
    overflow: hidden;
    position: relative;
    transition: box-shadow var(--jp-dur) var(--jp-ease);
}

    .prod-card:hover {
        box-shadow: var(--jp-shadow);
    }

    .prod-card .prod-img-wrap {
        position: relative;
        background: var(--jp-bg);
    }

    .prod-card .prod-img {
        width: 100%;
        aspect-ratio: 1/1;
        object-fit: contain;
        display: block;
        border-radius: 0;
    }

    .prod-card .prod-body {
        padding: 10px 12px;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .prod-card .prod-title {
        order: 1;
        font-size: var(--jp-fs-body);
        font-weight: 500;
        line-height: 1.4;
        color: var(--jp-gray-800);
        text-decoration: none;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.4rem;
        margin-bottom: 4px;
        transition: opacity var(--jp-dur) var(--jp-ease);
    }

    .prod-card:hover .prod-title {
        opacity: 0;
        pointer-events: none;
    }

    .prod-card .prod-price {
        order: 2;
        font-size: var(--jp-fs-price);
        font-weight: 700;
        color: var(--jp-price);
        font-variant-numeric: tabular-nums;
    }
        /* 【修改说明】2026-08-12：价格后的单位（/套 等）非粗体、小一号（相对价格）、次要色 */
        .prod-card .prod-price .unit {
            font-weight: 400;
            font-size: var(--jp-fs-price-sm);
            color: var(--jp-muted);
        }
    /* hover 操作按钮：盖在标题位置，标题淡出、按钮淡入（桌面） */
    .prod-card .prod-actions {
        order: 3;
        position: absolute;
        left: 12px;
        right: 12px;
        top: 10px;
        display: flex;
        justify-content: center;
        gap: .45rem;
        opacity: 0;
        transition: opacity var(--jp-dur) var(--jp-ease);
        z-index: 2; /* 2026-08-11 修复：透明标题 <a> 仍在 DOM 且层叠在上层，按钮须提升层级，否则点击按钮误触发标题链接跳详情页 */
    }

    .prod-card:hover .prod-actions {
        opacity: 1;
    }

    .prod-card .prod-actions button {
        border: 0;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        padding: 4px 12px;
        cursor: pointer;
    }

    .prod-card .prod-actions .add {
        background: var(--jp-primary);
        color: #fff;
    }

        .prod-card .prod-actions .add:hover {
            background: var(--jp-primary-hover);
        }

    .prod-card .prod-actions .fav {
        background: var(--jp-surface);
        color: var(--jp-gray-700);
        border: 1px solid var(--jp-line);
    }

        .prod-card .prod-actions .fav:hover {
            border-color: var(--jp-gray-400);
        }
/* 触屏设备（pointer:coarse）：按钮常显在价格下方，标题不移除（2026-08-11，无真 hover） */
@media (pointer: coarse) {
    .prod-card .prod-actions {
        position: static;
        opacity: 1;
        margin-top: 6px;
    }

    .prod-card:hover .prod-actions {
        opacity: 1;
    }

    .prod-card:hover .prod-title {
        opacity: 1;
        pointer-events: auto;
    }

    .prod-card .prod-actions button {
        flex: 1;
    }
}
/* 促销/甩卖圆形角标（2026-08-11）：单字 促/甩，图片右上角带边距 */
.prod-flag {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    z-index: 2;
}

.prod-flag-cuxiao {
    background: var(--jp-danger);
}

.prod-flag-qingcang {
    background: #D97706;
}

/* === Badges === */
/* 促销/清仓角标：实底高对比，避免与主题色混淆（2026-08-08） */
.badge-promo {
    background: var(--jp-danger);
    color: #fff;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: .6875rem;
    font-weight: 700;
}

.badge-clear {
    background: #D97706;
    color: #fff;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: .6875rem;
    font-weight: 700;
}

/* === Spec Pills（未选中透明无底色；选中后背景 = 价格框背景 var(--jp-primary-softer)，2026-08-08） === */
.spec-pill {
    display: inline-block;
    padding: 6px 16px;
    border: 2px solid var(--jp-line);
    border-radius: 100px;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 500;
    margin: 0 6px 6px 0;
    transition: .15s;
}

    .spec-pill:hover, .spec-pill.active {
        border-color: var(--jp-primary);
        background: var(--jp-primary-softer);
    }
/* 规格多选（胶囊多选：无复选框，点击整胶囊切换选中；未选中透明，选中后主色边框+价格框浅色，2026-08-10） */
.spec-pill-check {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 6px 16px;
    border: 2px solid var(--jp-line);
    border-radius: 100px;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 500;
    margin: 0 6px 6px 0;
    transition: .15s;
    user-select: none;
}
    /* 复选框视觉隐藏（2026-08-10：去掉复选框显示，仅保留其 :checked 驱动选中态与 change 事件；胶囊点击仍切换选中） */
    .spec-pill-check input.spec-chk {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
        padding: 0;
    }

    .spec-pill-check:hover {
        border-color: var(--jp-primary);
    }
    /* 选中：仅边框+背景变化，文字保持原色（2026-08-08） */
    .spec-pill-check:has(input:checked) {
        border-color: var(--jp-primary);
        background: var(--jp-primary-softer);
    }

/* 产品咨询（tab-review） */
.zixun-item {
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius);
    padding: .8rem 1rem;
}

    .zixun-item + .zixun-item {
        margin-top: .6rem;
    }

    .zixun-item .zq {
        font-weight: 600;
        color: var(--jp-ink);
    }

    .zixun-item .za {
        color: var(--jp-body);
        margin-top: .3rem;
    }

/* 规格购物车表格行删除按钮（字体图标，无边框，title 原生提示"删除"） */
.spec-del {
    border: none;
    background: none;
    color: var(--jp-danger);
    padding: 4px 6px;
    border-radius: var(--jp-radius-sm);
    cursor: pointer;
    line-height: 1;
}

    .spec-del i {
        font-size: 15px;
        vertical-align: -.1em;
    }

    .spec-del:hover, .spec-del:focus {
        background: var(--jp-primary-softer);
    }

/* 品牌徽章：浅灰底 + 深字链接（产品详情页 2026-08-08；"品牌："为纯文字标签） */
.brand-badge {
    background: #EEF1F4; /* 浅灰，中性不随主题 */
    color: var(--jp-body);
    font-weight: 600;
    font-size: .875rem;
    line-height: 1;
    padding: .38em .7em;
    border-radius: var(--jp-radius-sm);
    text-decoration: none;
}

    .brand-badge:hover {
        background: #E1E5E9;
        color: var(--jp-ink);
    }

/* === Price Box === */
.price-box {
    background: var(--jp-primary-softer);
    border-radius: var(--jp-radius);
    padding: 16px 20px;
}

.text-price {
    color: var(--jp-price);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* 价格组件（2026-08-11 方案3：￥小号 + 小数更小 + 数字等宽）；外层控制字号/颜色 */
.jp-price {
    font-variant-numeric: tabular-nums;
}

    .jp-price .cur {
        font-size: .6em;
        margin-right: 2px;
        font-weight: 600;
    }

    .jp-price .dec {
        font-size: .75em;
        font-weight: 600;
    }

/* === User Sidebar === */
.user-nav {
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius);
    overflow: hidden;
}

    .user-nav a {
        display: block;
        padding: 10px 16px;
        color: var(--jp-body);
        font-size: .9rem;
        font-weight: 500;
        border-left: 3px solid transparent;
        transition: .15s;
    }

        .user-nav a:hover {
            background: var(--jp-primary-soft);
            color: var(--jp-primary);
            border-left-color: var(--jp-primary);
        }

        .user-nav a.active {
            background: var(--jp-primary-soft);
            color: var(--jp-primary-deep);
            border-left-color: var(--jp-primary-deep);
            font-weight: 600;
        }

/* ====== 用户中心首页（2026-08-12 重设计：简洁大气 · 黑白灰 + 单一主色点缀） ====== */
/* 欢迎区：下缘「主色短杠 压 浅灰细线」双线（签名细节） */
.uc-welcome {
    padding-bottom: 1.1rem;
    position: relative;
    margin-bottom: .25rem;
}

    .uc-welcome::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: var(--jp-line);
    }

    .uc-welcome::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 3.5rem;
        height: 3px;
        background: var(--jp-primary);
        border-radius: 2px;
        z-index: 1;
    }

.uc-eyebrow {
    font-size: var(--jp-fs-caption);
    letter-spacing: .2em;
    color: var(--jp-muted);
}

.uc-greet {
    font-size: var(--jp-fs-display);
    font-weight: 700;
    color: var(--jp-ink);
    margin: .35rem 0 0;
    line-height: 1.25;
}

.uc-date {
    font-size: var(--jp-fs-small);
    color: var(--jp-muted);
    white-space: nowrap;
}
/* 状态速览 tile：中性面 + 细边框，悬停 图标/边框 变主色 + 右箭头浮现 */
.uc-stat {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem 1.1rem;
    background: var(--jp-surface);
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius);
    color: var(--jp-body);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    height: 100%;
}

    .uc-stat > i:first-child {
        font-size: 1.4rem;
        color: var(--jp-c-600);
        line-height: 1;
        transition: color .15s;
    }

.uc-stat-name {
    font-size: var(--jp-fs-body);
    font-weight: 600;
    color: var(--jp-ink);
}

.uc-stat-arrow {
    margin-left: auto;
    font-size: .8rem;
    color: var(--jp-muted);
    opacity: 0;
    transform: translateX(-2px);
    transition: opacity .15s, transform .15s;
}

.uc-stat:hover {
    border-color: var(--jp-c-300);
    box-shadow: var(--jp-shadow-sm);
    transform: translateY(-1px);
}

    .uc-stat:hover > i:first-child {
        color: var(--jp-primary);
    }

    .uc-stat:hover .uc-stat-arrow {
        opacity: 1;
        transform: translateX(0);
    }
/* 公告条：浅底 + 细边框，正文两行截断 */
.uc-notice {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-top: 1.4rem;
    padding: .8rem 1rem;
    background: var(--jp-bg);
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius);
    color: var(--jp-body);
    text-decoration: none;
    transition: border-color .15s;
}

    .uc-notice > i {
        font-size: 1.1rem;
        color: var(--jp-c-600);
        line-height: 1.4;
        flex-shrink: 0;
    }

.uc-notice-tag {
    flex-shrink: 0;
    font-size: .7rem;
    font-weight: 600;
    color: var(--jp-ink);
    background: var(--jp-primary-soft);
    border-radius: 4px;
    padding: .12rem .45rem;
    margin-top: .08rem;
}

.uc-notice-text {
    font-size: var(--jp-fs-small);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.uc-notice:hover {
    border-color: var(--jp-c-300);
}
/* 区块标题：主色竖条 */
.uc-section {
    margin-top: 1.75rem;
}

.uc-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--jp-fs-title);
    font-weight: 700;
    color: var(--jp-ink);
    margin-bottom: .9rem;
}

.uc-title-bar {
    width: 4px;
    height: 1.05em;
    background: var(--jp-primary);
    border-radius: 2px;
}
/* 促销卡：中性面，缩略图 + 名称两行 + 价格 */
/* 【修改说明】2026-08-12：今日促销改标准产品卡 _ProductCard，原 .uc-promo* 紧凑卡样式已删除 */

/* === Brand Tile === */
.brand-tile {
    display: block;
    text-align: center;
    padding: 24px 16px;
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius);
    transition: .2s;
    color: inherit;
}

    .brand-tile:hover {
        border-color: var(--jp-primary);
        box-shadow: var(--jp-shadow);
        color: inherit;
    }
/* 2026-08-14：资料图谱汇总页已取消（/CataLogs 直接落地金霸王图谱），原 .catalog-hero/.catalog-section/.catalog-plate
   画廊样式随 Views/CataLogs/Index.cshtml 一并删除，需要时可按 git/本注释恢复 */

/* ===== 资料图谱 · 图谱索引侧栏（2026-08-14 重做：卡片式索引，衬线首字徽章，吸顶） ===== */
.catalog-index {
    padding: 0;
    position: sticky;
    top: 122px;
    overflow: hidden;
}

.catalog-index-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .95rem 1.1rem;
    background: var(--jp-primary-softer);
    border-bottom: 1px solid var(--jp-line);
}

    .catalog-index-head:hover {
        text-decoration: none;
    }

.catalog-index-icon {
    font-size: 1.2rem;
    line-height: 1;
    color: var(--jp-primary);
}

.catalog-index-title {
    display: block;
    font-weight: 700;
    font-size: var(--jp-fs-title);
    color: var(--jp-ink);
    line-height: 1.25;
}

.catalog-index-sub {
    display: block;
    font-size: .6rem;
    letter-spacing: .2em;
    color: var(--jp-muted);
    margin-top: 2px;
}

.catalog-index-body {
    padding: .45rem 1rem 1.1rem;
}

.catalog-index-group {
    font-size: .68rem;
    letter-spacing: .14em;
    font-weight: 700;
    color: var(--jp-muted);
    margin: .8rem 0 .25rem;
}

    .catalog-index-group:first-child {
        margin-top: .55rem;
    }

.catalog-index ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .catalog-index ul li + li {
        margin-top: 2px;
    }

    .catalog-index ul li a {
        display: flex;
        align-items: center;
        gap: .55rem;
        padding: .4rem .5rem;
        font-size: 13.5px;
        color: var(--jp-body);
        border-radius: 8px;
        transition: color var(--jp-dur) var(--jp-ease), background var(--jp-dur) var(--jp-ease);
    }

        .catalog-index ul li a:hover {
            color: var(--jp-primary);
            background: var(--jp-primary-softer);
        }

        .catalog-index ul li a.active {
            color: var(--jp-primary-deep);
            font-weight: 600;
            background: var(--jp-primary-softer);
        }

.catalog-index-dot {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    display: grid;
    place-items: center;
    font-family: var(--jp-font-display);
    font-size: .74rem;
    font-weight: 700;
    color: var(--jp-muted);
    background: var(--jp-surface);
    border: 1px solid var(--jp-line);
    border-radius: 7px;
}

.catalog-index ul li a:hover .catalog-index-dot {
    color: var(--jp-primary);
    border-color: var(--jp-primary-border);
}

.catalog-index ul li a.active .catalog-index-dot {
    color: var(--jp-primary);
    border-color: var(--jp-primary);
}

/* ===== 资料图谱 · 详情页品牌简介卡（2026-08-14：衬线标题 + 正文钳制可展开） ===== */
.catalog-intro {
    padding: 1.1rem 1.25rem 1.2rem;
}

.catalog-intro-title {
    font-family: var(--jp-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--jp-ink);
}

.catalog-intro-body {
    margin: .55rem 0 0;
    font-size: var(--jp-fs-small);
    color: var(--jp-muted);
    line-height: 1.9;
}

    .catalog-intro-body.is-clamped {
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.catalog-intro-more {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--jp-primary);
    font-size: var(--jp-fs-small);
    font-weight: 600;
    cursor: pointer;
}

    .catalog-intro-more:hover {
        color: var(--jp-primary-hover);
    }

/* === Footer === */
/* 2026-08-10 重构：信任条(原 _PolicyBar)并入页脚顶部，统一深色底部区块；间距极致压缩 */
/* 全页脚文字统一浅灰系（2026-08-10）：wordmark .85 / 标题 .72 / slogan .6 / 链接 .6，无纯白，避免扎眼 */
/* 2026-08-11 页脚背景改菜单栏同款深主色 --jp-c-900：全站深色统一为主题色系，取消中性黑 --jp-ink */
/* 页脚（2026-08-11 改版）：取消深色背景（沉闷），透明 + 顶部分隔灰线 + 页面文字色 */
.footer {
    background: transparent;
    color: var(--jp-muted);
    border-top: 1px solid var(--jp-line);
    padding: 18px 0 12px;
}
    /* 2026-08-11：页脚背景回滚（透明），保留顶部灰线 */
    .footer .wordmark {
        font-size: 1.15rem;
        color: var(--jp-ink);
    }

.footer-slogan {
    margin-top: .35rem;
    color: var(--jp-muted);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .1em;
}

.footer h5 {
    color: var(--jp-ink);
    font-weight: 600;
}
/* 链接列标题下主色短下划线（2026-08-10）；2026-09-16：h6→div 修复标题层级跳级，样式不变 */
.footer .footer-col-title {
    color: var(--jp-ink);
    font-weight: 600;
    position: relative;
    padding-bottom: 5px;
    margin-bottom: 8px;
}
    /* 页脚列标题下短线：主色点缀（night 下主色为浅灰） */
    .footer .footer-col-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 22px;
        height: 2px;
        background: var(--jp-primary);
        border-radius: 2px;
    }

.footer a {
    color: var(--jp-muted);
}

    .footer a:hover {
        color: var(--jp-primary);
    }
/* 链接行高收紧（2026-08-10） */
.footer-links li {
    line-height: 1.35;
}

/* === Forms === */
.form-control, .form-select {
    border-radius: var(--jp-radius-sm);
    border-color: var(--jp-line);
}

    .form-control:focus, .form-select:focus {
        border-color: var(--jp-primary);
        box-shadow: 0 0 0 3px var(--jp-primary-softer);
    }

.form-label {
    font-weight: 600;
    font-size: .85rem;
}
/* ====== Placeholder 统一浅灰令牌（2026-08-11，前台全部表单生效，含登录/注册） ====== */
.form-control::placeholder, .form-select::placeholder, textarea::placeholder {
    color: var(--jp-placeholder);
    opacity: 1; /* 覆盖 Firefox 默认透明度，保证浅灰一致 */
}

.btn {
    font-weight: 600;
    border-radius: var(--jp-radius-sm);
}

.btn-lg {
    border-radius: var(--jp-radius);
}

/* ====== 前台复选框选中 = 主题 500 色（2026-08-11；Bootstrap 默认蓝不贴合前台主题） ====== */
.form-check-input:checked {
    background-color: var(--jp-primary);
    border-color: var(--jp-primary);
}

/* ====== 表单校验红框（2026-08-11）：is-invalid 红边框换主题 danger 色（验证码等前端校验） ====== */
.form-control.is-invalid {
    border-color: var(--jp-danger);
}

/* ====== 注册页「创建我的账号」按钮（2026-08-11）：未勾选服务条款 = 200 浅阶(disabled)；勾选后 = 500 主色 ====== */
#btnRegister {
    background: var(--jp-c-200);
    color: #fff;
    border: 0;
    opacity: 1; /* 覆盖 Bootstrap disabled 默认 opacity .65，保证 200 色准确显示 */
    transition: background var(--jp-dur) var(--jp-ease);
}

    #btnRegister:not(:disabled) {
        background: var(--jp-c-500);
    }

        #btnRegister:not(:disabled):hover {
            background: var(--jp-c-600);
        }
/* ═══ 夜晚灰 night（浅灰护眼底）配套 ═══
   2026-08-12 用户定调：night 改浅灰底深字、主色石墨灰 → 全站"主色底+白字"默认即可用，无需反色；
   仅剩一处：tone-red 横幅去红色相，保持黑白灰极简 */
[data-theme="night"] .banner-bar.tone-red {
    background: linear-gradient(90deg, var(--jp-c-700), var(--jp-c-600));
}

/* === Breadcrumb === */
/* 面包屑下方 border 线已去除、背景无色（2026-08-08） */
.breadcrumb-wrap {
    background: transparent;
    padding: 8px 0;
    font-size: .875rem;
}

/* === Pagination === */
/* 分页参考后台 Tabler 风格（2026-08-08）：页码无边框（Tabler border-width:0）+ 小内边距 + 透明底 + hover 浅底 + active 主色填充 */
.pagination .page-link {
    font-size: .875rem;
    padding: .3rem .6rem;
    color: var(--jp-body);
    border: 0;
    border-radius: var(--jp-radius-sm);
    margin: 0 1px;
    background: transparent;
}

    .pagination .page-link:hover {
        background: var(--jp-primary-softer);
        color: var(--jp-primary);
    }

.pagination .page-item.active .page-link {
    background: var(--jp-primary);
    color: #fff;
}

/* === Gallery === */
/* 产品图灯箱：放大封顶 600×600（2026-08-08，原 modal-xl 过大） */
/* 2026-08-14：图谱灯箱改用手写 → lightbox2（本地化零 CDN，CSS 在 wwwroot/lib/lightbox2/css/lightbox.min.css），
   原手写 #catalogLightbox 深色灯箱样式已删除 */

/* 产品首图（2026-08-10 加边框+内边距，无色背景；3 档方形缩小约 30%——<576:168 / 576-991:252 / ≥992:336） */
.product-main-img {
    text-align: center;
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius);
    padding: 14px;
}

    .product-main-img .product-main-img-el {
        display: block;
        width: 100%;
        max-width: 168px; /* 240→168（-30%） */
        aspect-ratio: 1;
        object-fit: contain;
        margin: 0 auto;
    }

@media (min-width: 576px) {
    .product-main-img .product-main-img-el {
        max-width: 252px;
    }
    /* 360→252（-30%） */
}

@media (min-width: 992px) {
    .product-main-img .product-main-img-el {
        max-width: 336px;
    }
    /* 480→336（-30%） */
}
/* 有规格图廊时可点击放大 + 右下角放大提示 */
.product-main-img.gallery-clickable {
    cursor: zoom-in;
}

.zoom-hint {
    position: absolute;
    bottom: 18px;
    right: 18px;
    background: rgba(35,35,35,.55);
    color: #fff;
    font-size: .72rem;
    padding: 3px 10px;
    border-radius: 100px;
    pointer-events: none;
}
/* 规格缩略条（2026-08-10）：横向滚动，点击切换主图 */
.gallery-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.gallery-thumb {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid var(--jp-line);
    border-radius: var(--jp-radius-sm);
    cursor: pointer;
    transition: .15s;
    overflow: hidden;
}

    .gallery-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .gallery-thumb.active, .gallery-thumb:hover {
        border-color: var(--jp-primary);
    }

/* 规格图放大模态框（2026-08-10，参考 Dental Details 图廊：大图 + 前后箭头 + 计数器 + 模态缩略条）
   2026-08-10 调整：更宽更高、图片最大 600×600、四周留白不贴边（顶部让位关闭按钮） */
#galleryModal .modal-dialog {
    max-width: 1100px;
}
/* 900 → 1100（左右各 +100px，宽高比更舒展） */
#galleryModal .modal-content {
    border-radius: 16px;
    overflow: hidden;
}

#galleryModal .modal-body {
    padding: 0;
    position: relative;
}

#galleryModal .btn-close {
    position: absolute;
    top: 16px;
    right: 18px;
    z-index: 20;
}

.gallery-modal-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    padding: 46px 32px 52px;
    background: var(--jp-surface);
    position: relative;
}

    .gallery-modal-img-wrap img {
        max-width: 600px;
        max-height: 600px;
        object-fit: contain;
    }

.gallery-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    border: 1px solid var(--jp-line);
    color: var(--jp-ink);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: .15s;
}

    .gallery-modal-nav:hover {
        background: #fff;
        box-shadow: var(--jp-shadow-sm);
    }

.gallery-modal-prev {
    left: 12px;
}

.gallery-modal-next {
    right: 12px;
}

.gallery-modal-counter {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(35,35,35,.6);
    color: #fff;
    padding: 2px 12px;
    border-radius: 12px;
    font-size: .78rem;
    z-index: 10;
}

.gallery-modal-strip {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    overflow-x: auto;
    justify-content: center;
    border-top: 1px solid var(--jp-line);
}

.gallery-modal-thumb {
    flex: 0 0 56px;
    height: 56px;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    opacity: .6;
    transition: .15s;
}

    .gallery-modal-thumb.active {
        border-color: var(--jp-primary);
        opacity: 1;
    }

    .gallery-modal-thumb:hover {
        opacity: .9;
    }

    .gallery-modal-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* === Cart Table === */
/* 统一前端表格边框灰：--bs-border-color 锁到 --jp-line（表头/单元格/表格外框同色） */
.table {
    --bs-border-color: var(--jp-line);
}
/* 相关文章表格（产品详情 tab）：标题/专题名链接——对齐 文章列表 .article-title 风格（2026-08-13）：
   默认无下划线黑字；hover 只加下划线、不变色、无背景 */
#tab-article .table a {
    color: var(--jp-ink);
    text-decoration: none;
}

    #tab-article .table a:hover {
        color: var(--jp-ink);
        text-decoration: underline;
    }
/* 产品详情-相关文章：桌面表格 / 移动卡片（2026-08-13，1024 断点定律） */
.art-list-table {
    display: none;
}

.art-list-cards {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

@media (min-width: 1024px) {
    .art-list-table {
        display: block;
    }

    .art-list-cards {
        display: none;
    }
}

.art-card {
    display: block;
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius);
    padding: .7rem .85rem;
    color: var(--jp-body);
    text-decoration: none;
    transition: border-color var(--jp-dur) var(--jp-ease), box-shadow var(--jp-dur) var(--jp-ease);
}

    .art-card:hover {
        border-color: var(--jp-primary-border);
        box-shadow: var(--jp-shadow-sm);
    }

.art-card-title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--jp-ink);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.art-card:hover .art-card-title {
    color: var(--jp-primary);
}

.art-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .4rem;
    font-size: .78rem;
    color: var(--jp-muted);
}

.art-card-topic {
    color: var(--jp-primary);
}

.cart-table thead th {
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--jp-muted);
}
/* 【修改说明】2026-08-13：去 text-transform:uppercase（对中文无效，反留多余字距）；letter-spacing .04em→.02em */

/* 已发货订单：快递单号列 100px 省略，hover 全显（title） */
.ems-cell {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 订单详情金额：￥/元 小一号（2026-08-12） */
.cny-sm, .unit-sm {
    font-size: .75em;
}
/* 订单详情实付金额：非粗体（去 .text-price 的 700），较原 fs-5 减小 2 号（2026-08-12） */
.pay-amount {
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--jp-price);
    font-variant-numeric: tabular-nums;
}
/* 订单详情表格：行文字 + 合计行文字 灰色，与实付金额颜色一致（2026-08-12） */
#div_showdetails .table td {
    color: var(--jp-price);
}
/* 品牌名列：max 200px，超出省略（2026-08-12） */
.brand-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 购买记录表格：行文字灰色（2026-08-12） */
.pr-table td {
    color: var(--jp-price);
}
/* 订单详情合计/实付金额：显式锁定全局系统字体栈（含微软雅黑），防组件覆盖 */
#div_showdetails tfoot td,
#div_showdetails .text-price {
    font-family: var(--jp-font-body);
}

/* 订单/购买记录页 tab 选项卡（2026-08-12）：默认灰字，当前主题色 */
.nav-tabs .nav-link {
    color: var(--jp-muted);
}

    .nav-tabs .nav-link:hover {
        color: var(--jp-ink);
    }

    .nav-tabs .nav-link.active {
        color: var(--jp-primary);
        border-bottom-color: var(--jp-surface);
        font-weight: 600;
    }

/* ====== 购物车显示细节（2026-08-12） ====== */
/* 产品名链接：默认灰 / hover 主色（调换全局 a 的默认/hover） */
.cart-table .pname {
    color: var(--jp-gray-700);
}

    .cart-table .pname:hover {
        color: var(--jp-primary);
    }
/* 单位与货号：去圆点，留间距 */
.cart-table .cart-huohao {
    margin-left: .6rem;
}
/* 价格：￥ 小一号非粗体(300)，数字 500（单价/小计/合计） */
.cart-table .text-price {
    font-weight: 500;
}

    .cart-table .text-price .cny,
    #cartTotal .cny {
        font-size: .8em;
        font-weight: 300;
    }

#cartTotal {
    font-weight: 700;
    color: var(--jp-primary-deep);
}
/* 【修改说明】2026-08-13：购物车为交易重点页，合计金额用品牌色强调（用户中心唯一重点色；行内 单价/小计 仍浅灰） */

/* === Theme Switcher（2026-08-12：下拉菜单——小号图标按钮，色系浅色底） === */
.jpyk-theme {
    display: inline-block;
}
/* 2026-08-12：图标小按钮；背景 = 色系 100 阶浅色（非白，能代表当前配色），hover 时 title 提示"切换主题配色" */
.jpyk-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    color: var(--jp-c-600);
    background: var(--jp-c-100);
    border: 1px solid var(--jp-c-200);
    border-radius: var(--jp-radius-sm);
}
    /* 2026-08-12：按钮放大 */
    .jpyk-theme-btn:hover {
        color: var(--jp-c-700);
        border-color: var(--jp-c-300);
    }

    .jpyk-theme-btn::after {
        display: none;
    }
/* 去 dropdown-toggle 三角 */
.jpyk-theme-menu {
    min-width: 8.5rem;
    padding: .35rem;
}

.jpyk-theme-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: var(--jp-body);
    padding: .32rem .6rem;
    border-radius: var(--jp-radius-sm);
}

    .jpyk-theme-option:hover {
        background: var(--jp-bg);
        color: var(--jp-ink);
    }

    .jpyk-theme-option.active {
        background: var(--jp-primary-softer);
        color: var(--jp-ink);
        font-weight: 600;
    }

.jpyk-theme-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--jp-line);
    flex-shrink: 0;
}

.jpyk-theme-check {
    margin-left: auto;
    color: var(--jp-primary);
    font-size: .8rem;
    opacity: 0;
}

.jpyk-theme-option.active .jpyk-theme-check {
    opacity: 1;
}

/* ═══════════════ 前台母版组件（P2 重构后）═══════════════ */
/* 顶条 */
/* 顶条（2026-08-11）：白底 + 浅灰底边 + 灰字，固定不随主题切换（避免深色主题下顶条与菜单栏成平行深色条） */
.ht-topbar {
    background: #f9f9f9;
    color: var(--jp-muted);
    font-size: .8125rem;
}
/* 2026-08-11：顶条背景 #f9f9f9，去下方边框线 */
/* 2026-08-12：顶条 z-index 1040 > sticky 主头部 1030，主题下拉展开不被搜索框区域遮挡 */
.ht-topbar {
    position: relative;
    z-index: 1040;
}

    .ht-topbar a {
        color: var(--jp-muted);
        font-size: .8125rem;
    }

        .ht-topbar a:hover {
            color: var(--jp-primary);
        }

    .ht-topbar .ht-phone i {
        color: var(--jp-gray-300);
    }
/* 顶条账户区（2026-08-12：登录/注册、会员中心/登出，从主头部移入顶条最右侧） */
.ht-account {
    font-size: .8125rem;
}

    .ht-account .ht-account-link {
        color: var(--jp-muted);
        white-space: nowrap;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
        /* 2026-08-12：登录/注册/用户中心/登出 加下划线提示可点击 */
        .ht-account .ht-account-link:hover {
            color: var(--jp-primary);
        }

    .ht-account .ht-account-sep {
        color: var(--jp-line);
        margin: 0 .12rem;
    }
    /* 2026-08-16：顶条「最新通知！」链接——灰色，与欢迎语同色，不随主题切换 */
    .ht-topbar .ht-notice-link {
        color: var(--jp-muted);
        text-decoration: underline;
        text-underline-offset: 3px;
        white-space: nowrap;
    }
        .ht-topbar .ht-notice-link:hover {
            color: var(--jp-ink);
        }
    /* 2026-08-12：登录/注册分隔线收紧，避免视野分散 */
    .ht-account .ht-user-ico {
        font-size: 1rem;
        vertical-align: -2px;
        margin-right: .15rem;
        color: var(--jp-c-600);
    }
/* 2026-08-12：欢迎语全屏显示（用户要求小屏也显示），不隐藏 */

/* 主头部（吸顶）：去底部横线（2026-08-11 与菜单行横线重复显凌乱），吸顶时靠 .is-stuck 阴影分隔 */
.header-middle {
    background: var(--jp-surface);
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: box-shadow .2s;
}

    .header-middle.is-stuck {
        box-shadow: var(--jp-shadow);
    }
/* 品牌字标（2026-08-10 改用无衬线系统栈：Windows 下 --jp-font-display 衬线栈一路落到 SimSun 宋体，非常难看；
   改用 --jp-font-body → Win 雅黑 / mac 苹方，粗体现代干净） */
.wordmark {
    font-family: var(--jp-font-body);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--jp-ink);
    line-height: 1;
}

    .wordmark small {
        display: block;
        font-family: var(--jp-font-body);
        font-size: .7rem;
        letter-spacing: .13em;
        color: var(--jp-ink);
        font-weight: 600;
        margin-top: 4px;
    }
/* 2026-08-14：去掉橙色点（.dot 已删）；域名同主标色 var(--jp-ink)（中性色，不随主题变换）；字号 .85rem→.7rem（小 2 号） */
/* 搜索框：边框色=搜索按钮色(主题主色)，背景白色（2026-08-08） */
/* 搜索框（2026-08-11）：边框 + 按钮用最深色，融入深色骨架；购物车/CTA 保留 500 作唯一品牌点 */
.searchbox .input-group {
    border: 1px solid var(--jp-primary);
    border-radius: var(--jp-radius);
    overflow: hidden;
}
/* 2026-08-11：边框与搜索按钮同色（主色） */
.searchbox .form-control {
    border: 0;
    background: var(--jp-surface);
    font-size: .875rem;
}

    .searchbox .form-control:focus {
        box-shadow: none;
        background: var(--jp-surface);
    }
/* 搜索框 focus 态统一（2026-08-11）：聚焦时外层加主色浅光圈，与普通表单一致 */
.searchbox:focus-within .input-group {
    box-shadow: 0 0 0 3px var(--jp-primary-softer);
}
/* 搜索按钮：主色底（橙点缀，青/蓝/夜随主色），不再用最深档；2026-09-16：min-height 44px 满足触摸目标 */
.searchbox .btn {
    background: var(--jp-primary);
    border: 0;
    border-radius: 0;
    padding: .6rem 1.3rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .searchbox .btn:hover {
        background: var(--jp-primary-hover);
    }
/* ====== 头部账户区（2026-08-11 重构：购物车主色焦点 + 用户名深墨 + 登出弱化 + 登录/注册主色） ====== */
.account-col {
    position: relative;
    display: flex;
    align-items: center;
}

.cart-block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
}
/* 【修改说明】2026-08-13：购物车改圆角浅色胶囊底（风格色系浅色 --jp-primary-soft），并居中于账户列中线
   （= 搜索框与最右侧的中点，桌面/移动一致）；角标贴胶囊右上角；hover 背景升一档（c-200）。
   定位用 flex 居中（account-col flex + cart-block justify-content:center），不依赖绝对定位，桌面/移动都稳 */
.cart-ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .6rem;
    font-size: 1.85rem;
    line-height: 1;
    color: var(--jp-c-500);
    text-decoration: none;
    border-radius: .65rem;
    background: var(--jp-primary-soft);
    transition: background var(--jp-dur) var(--jp-ease), color var(--jp-dur) var(--jp-ease);
}

    .cart-ico:hover {
        background: var(--jp-primary-border);
        color: var(--jp-c-600);
    }

    .cart-ico .badge {
        position: absolute;
        top: -4px;
        right: -8px;
        background: var(--jp-c-500);
        color: #fff;
        font-size: 10px;
    }
/* 汉堡：贴账户列最右（移动端），垂直随行居中 */
.cart-block .mb-hamburger {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
/* 加购角标微动效（2026-08-11）：加购成功弹跳一下 */
@keyframes cart-pop {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

.cart-ico .badge.cart-pop {
    animation: cart-pop .45s ease;
}
/* 【修改说明】2026-08-12：头部账户区（.auth-links/.cart-user/.cart-username/.logout-link）已整体移入顶条右侧（.ht-account），旧竖排样式删除 */

/* 导航条：左垂直菜单 + 右水平菜单 */
/* 菜单栏上方的 border 线已去除（2026-08-08，原 border-top: 1px solid var(--jp-line)） */
/* 菜单行：色系最深色 --jp-c-900 背景 + 白字（2026-08-11 试做：深底白字对比度达标，替代主色底） */
/* 菜单行（2026-08-11 改版）：取消背景色（大面积深底沉闷），透明 + 底部灰线分隔 */
.header-bottom {
    background: transparent;
    border-bottom: 1px solid var(--jp-line);
}
/* 全部分类：拉伸满栏高（2026-08-11），width 100% 铺满列 */
.vert-wrap {
    position: relative;
    width: 100%;
    align-self: stretch;
}
/* 全部分类按钮：主色底白字（橙点缀；青/蓝=主色青/蓝、夜=石墨灰主色）+ 右侧折叠箭头 */
.vert-title {
    background: var(--jp-primary);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    height: 100%;
    padding: .3rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: var(--jp-radius) var(--jp-radius) 0 0;
}

.vert-arrow {
    flex-shrink: 0;
    font-size: 13px;
    opacity: .8;
    transition: transform var(--jp-dur) var(--jp-ease);
}

.vert-wrap:hover .vert-arrow {
    transform: rotate(180deg);
}

.vert-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--jp-surface);
    border: 1px solid var(--jp-line);
    border-top: 0;
    z-index: 100;
    box-shadow: var(--jp-shadow);
    display: block;
    border-radius: 0 0 var(--jp-radius) var(--jp-radius);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0s, opacity .18s ease;
}
/* 2026-08-12 hover-intent：默认隐藏，离开立即收起 */
.vert-wrap:hover .vert-list, .vert-wrap:focus-within .vert-list {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s linear .35s, opacity .18s ease .35s;
}
/* 2026-08-12 hover-intent：鼠标停留 350ms 才展开，防划过误触；键盘 focus 仍可展开 */
.vert-list > li {
    position: relative;
}
    /* 一级分类（全部分类展开后左侧列表）：字重 600、字号 15px；hover 用 800 色（2026-08-11） */
    .vert-list > li > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .78rem 1.1rem;
        color: var(--jp-ink);
        font-size: 15px;
        font-weight: 600;
        border-bottom: 1px solid var(--jp-line);
    }

        .vert-list > li > a i {
            font-size: 11px;
            color: var(--jp-muted);
        }

    .vert-list > li:hover {
        background: #f9f9f9;
    }
        /* 【修改说明】2026-08-12：一级分类 hover 背景对齐顶条「欢迎光临」灰底 */
        .vert-list > li:hover > a {
            color: var(--jp-primary-deep-strong);
        }
            /* 【修改说明】2026-08-12：一级 hover 加下划线（仅文字，不带右侧箭头），颜色=链接色（currentColor 自动跟随） */
            .vert-list > li:hover > a > span {
                text-decoration: underline;
                text-underline-offset: 3px;
                text-decoration-thickness: 2px;
            }

.vert-panel {
    position: absolute;
    left: 100%;
    top: 0;
    background: var(--jp-surface);
    border: 1px solid var(--jp-line);
    border-left: 0;
    box-shadow: var(--jp-shadow);
    padding: 1.4rem;
    display: block;
    width: 660px;
    z-index: 200;
    border-radius: 0 var(--jp-radius) var(--jp-radius) 0;
    max-height: 480px;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0s, opacity .18s ease;
}
/* 2026-08-12 hover-intent：默认隐藏，离开立即收起 */
.vert-list > li:hover .vert-panel, .vert-list > li:focus-within .vert-panel {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s linear .35s, opacity .18s ease .35s;
}
/* 2026-08-12 hover-intent：子面板停留 350ms 才展开，防误触 */
/* 二级：配色 800 色标题，hover 加下划线（颜色=链接色 800） */
.vert-panel .lv2 {
    display: inline-block;
    font-weight: 700;
    color: var(--jp-primary-deep-strong);
    font-size: 13.5px;
    margin: 0 0 .5rem;
    padding-bottom: .2rem;
    border-bottom: 2px solid transparent;
    transition: border-color .15s;
}
    /* 【修改说明】2026-08-12：下划线颜色改为链接颜色（原 --jp-primary-mid 浅色） */
    .vert-panel .lv2:hover {
        border-color: var(--jp-primary-deep-strong);
    }
/* 面板内分组：flex 均匀排列（gap 统一间距），避免固定三列留空隙、换行错位（2026-08-09） */
.vert-groups {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 2rem;
    align-items: flex-start;
}

.vert-group {
    flex: 0 0 auto;
    max-width: 210px;
}
    /* 三级小分类：flex 横排自动换行，避免纵向列表留空隙 */
    .vert-group .lv3 {
        display: flex;
        flex-wrap: wrap;
        gap: .2rem 1rem;
    }

    .vert-group .lv3-item {
        color: var(--jp-body);
        font-size: 12.5px;
        white-space: nowrap;
        transition: color .15s;
    }
        /* 【修改说明】2026-08-12：三级 hover 加下划线，颜色=链接色（--jp-primary，currentColor 自动跟随） */
        .vert-group .lv3-item:hover {
            color: var(--jp-primary);
            text-decoration: underline;
            text-underline-offset: 3px;
            text-decoration-thickness: 1.5px;
        }
/* 水平菜单：深色菜单栏上白字；hover/active 不换配色，改白色下划线（2026-08-11）
   下划线用 ::before 伪元素（bottom:10px 距栏底边，栏高不变）
   ⚠️ 不用 ::after——dropdown-toggle（资料图谱/促销活动）的三角箭头就是 ::after，会冲突覆盖导致箭头消失 */
.hnav .nav-link {
    position: relative;
    color: var(--jp-ink);
    font-weight: 600;
    font-size: 15px;
    padding: 1.02rem 1.15rem;
    white-space: nowrap;
}

    .hnav .nav-link::before {
        content: "";
        position: absolute;
        left: 1.15rem;
        right: 1.15rem;
        bottom: 10px;
        height: 2px;
        background: var(--jp-primary);
        border-radius: 2px;
        opacity: 0;
        transition: opacity .15s;
    }

    .hnav .nav-link:hover::before, .hnav .nav-link.active::before {
        opacity: 1;
    }

    .hnav .nav-link .hot {
        color: var(--jp-danger);
        font-size: 11px;
        vertical-align: super;
        margin-left: 2px;
    }

.mega {
    width: min(920px, 96vw);
    left: 50%;
    transform: translateX(-50%);
    border: 0;
    border-radius: 0 0 var(--jp-radius) var(--jp-radius);
    box-shadow: var(--jp-shadow);
    padding: 1.6rem 1.9rem;
}

    .mega h6 {
        font-size: 13px;
        font-weight: 700;
        color: var(--jp-ink);
        margin-bottom: .7rem;
    }

    .mega .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .mega .chip {
        border: 1px solid var(--jp-line);
        border-radius: 999px;
        padding: 4px 12px;
        font-size: 12.5px;
        color: var(--jp-body);
    }

        .mega .chip:hover {
            border-color: var(--jp-primary);
            color: var(--jp-primary);
        }

/* 信任条（2026-08-10 并入深色页脚顶部：紧凑单行、40px 图标；整体降为浅灰系，避免纯白扎眼、喧宾夺主；xs 隐藏）
   图标/标题/副标题均浅灰：图标 .55、标题 .72、副标题 .42，深底固定可见不随主题(典雅灰主色 #4A4A4A 深底近不可见，故弃用主色) */
/* 信任条：页面文字色（2026-08-11 随页脚透明版式），分隔线 --jp-line */
.policy {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--jp-line);
    padding-bottom: 10px;
    margin-bottom: 14px;
}

    .policy .policy-item {
        flex: 1 1 45%;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 4px 8px;
        color: var(--jp-muted);
    }

        .policy .policy-item svg {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            color: var(--jp-primary);
        }
    /* 2026-08-11：政策图标用搜索按钮色（主色） */
    .policy .pt-text {
        text-align: left;
        line-height: 1.25;
    }

        .policy .pt-text b {
            display: block;
            color: var(--jp-ink);
            font-size: 12px;
            font-weight: 600;
        }

        .policy .pt-text span {
            display: block;
            color: var(--jp-muted);
            font-size: 11px;
        }
/* <md 每行 2 项；md 每行 3 项；≥1024 单行等宽 5 项，项间发丝竖线（2026-08-11 断点统一；政策条仅 ≥1024 显示） */
@media (min-width: 768px) {
    .policy .policy-item {
        flex: 1 1 33%;
    }
}

@media (min-width: 1024px) {
    .policy .policy-item {
        flex: 1 1 auto;
    }

        .policy .policy-item + .policy-item {
            border-left: 1px solid var(--jp-line);
        }
}

/* 移动端 <1024：隐藏信任条 + 页脚链接列，仅留底部版权行（2026-08-11：由 xs 扩为 <1024） */
@media (max-width: 1023.98px) {
    .policy {
        display: none;
    }

    .footer-links {
        display: none;
    }
}
/* 版权行：仅 <1024 显示（≥1024 版权/工作时间已并入第 4 列，2026-08-10）
   ⚠️ 必须 !important：该 div 带 Bootstrap .d-flex（display:flex !important），普通 display:none 盖不过 */
@media (min-width: 1024px) {
    .footer-bottom {
        display: none !important;
    }
}

/* 回顶按钮（2026-09-16：42→44 满足触摸目标） */
.back-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--jp-primary);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    border: 0;
    box-shadow: var(--jp-shadow);
}

    .back-top.show {
        display: flex;
    }

    .back-top:hover {
        background: var(--jp-primary-hover);
    }

/* 移动端底部 Tab 导航（2026-08-09）：<lg 固定底部 5 项，搜索中间放大，购物车角标 */
.mobile-tab {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 54px;
    background: var(--jp-surface);
    border-top: 1px solid var(--jp-line);
    display: flex;
    z-index: 1050;
    box-shadow: 0 -2px 10px rgba(35,35,35,.06);
}

    .mobile-tab .tab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: var(--jp-muted);
        text-decoration: none;
        font-size: 11px;
        position: relative;
    }

        .mobile-tab .tab-item i {
            font-size: 20px;
            line-height: 1;
        }

        .mobile-tab .tab-item.active {
            color: var(--jp-primary);
        }

        .mobile-tab .tab-item.tab-search i {
            background: var(--jp-primary);
            color: #fff;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-top: -14px;
            box-shadow: 0 4px 10px rgba(35,35,35,.18);
        }

        .mobile-tab .tab-item.tab-search.active i {
            background: var(--jp-primary-hover);
        }

    .mobile-tab .tab-badge {
        position: absolute;
        top: 4px;
        right: calc(50% - 22px);
        font-size: 9px;
        padding: 1px 5px;
        min-width: 15px;
        background: var(--jp-danger);
    }
/* 移动端固定 Tab 占用底部：内容留白 + 回顶按钮上移，避免遮挡（2026-08-11：<1024，与底部极简统一） */
@media (max-width: 1023.98px) {
    body {
        padding-bottom: 60px;
    }

    .back-top {
        bottom: 64px;
    }
}

@media (min-width: 1024px) {
    .mobile-tab {
        display: none;
    }
}

/* 移动端产品详情底部操作条（2026-08-09）：<lg 固定底部，加入购物车 + 立即咨询，替代底部 Tab */
.mobile-buybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 54px;
    display: flex;
    z-index: 1050;
    border-top: 1px solid var(--jp-line);
    background: var(--jp-surface);
    box-shadow: 0 -2px 10px rgba(35,35,35,.06);
}

    .mobile-buybar .buybar-btn {
        flex: 1;
        border: 0;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }

.buybar-zixun {
    background: var(--jp-surface);
    color: var(--jp-primary);
}

.buybar-cart {
    background: var(--jp-primary);
    color: #fff;
}

    .buybar-cart:active {
        background: var(--jp-primary-hover);
    }

@media (min-width: 1024px) {
    .mobile-buybar {
        display: none;
    }
}

/* === Responsive === */
/* ═══ 2026-08-11 重构定律：移动/桌面断点 1024 —— <1024 移动布局，≥1024 桌面布局（1024 归桌面端） ═══
   说明：Bootstrap 内建断点 lg=992，故用自定义类 + 媒体查询覆盖；全站新增移动元素均遵循此断点 */
/* 桌面 Logo / 账户链接：≥1024 显示 */
.logo-lg {
    display: none;
}
/* 移动汉堡：<1024 显示 */
/* 2026-08-12：去虚胖——图标放大、padding 收紧、边框改浅色（.btn. 前缀提优先级压过 Bootstrap .btn-outline-secondary） */
.mb-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .15rem .3rem;
    border-color: var(--jp-line);
    color: var(--jp-body);
}

    .mb-hamburger i {
        font-size: 1.35rem;
        line-height: 1;
    }

.btn.mb-hamburger:hover {
    border-color: var(--jp-c-300);
    color: var(--jp-ink);
    background: var(--jp-bg);
}
/* 桌面导航条（全部分类+水平菜单）：默认隐藏，≥1024 显示 */
.header-bottom {
    display: none;
}

@media (min-width: 1024px) {
    .logo-lg {
        display: block;
    }

    .mb-hamburger {
        display: none;
    }

    .header-bottom {
        display: block;
    }

    #mbNav {
        display: none !important;
    }
    /* 移动折叠菜单桌面强制隐藏 */
}

@media (max-width: 1023.98px) {
    /* 搜索行：Logo 隐藏后 搜索 65% + 账户 35%（账户含登录注册或购物车+汉堡，2026-08-11） */
    .header-middle .search-col {
        flex: 0 0 65%;
        max-width: 65%;
    }

    .header-middle .account-col {
        flex: 0 0 35%;
        max-width: 35%;
    }
    /* 【修改说明】2026-08-13：购物车居中逻辑已上移至基础样式（桌面/移动一致），此处不再重复；汉堡仍贴最右 */
    /* 顶条联系方式隐藏（1024 以下走移动简洁顶条） */
    .ht-phone {
        display: none !important;
    }
    /* 列表页：左栏挂件隐藏、移动筛选按钮显示 */
    .jp-side-lg {
        display: none !important;
    }

    .list-mobile-filter {
        display: flex !important;
    }
}

@media (max-width: 767.98px) {
    .section-heading {
        font-size: 1.1rem;
    }
}

/* ═══════════════ 前台共享组件（P4）═══════════════ */
/* 促销/清仓角标 */
.flag {
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 6px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    z-index: 2;
}

    .flag.cuxiao {
        background: var(--jp-danger);
    }

    .flag.qingcang {
        background: var(--jp-ink);
    }

.hover-btns .add {
    background: var(--jp-primary);
    color: #fff;
}

.hover-btns .fav {
    background: rgba(255,255,255,.94);
    color: var(--jp-ink);
}

/* 面包屑（2026-08-11 强化为"页头→内容"的分隔标记：首页图标 + 链接实线下划线；原虚线改实线更醒目） */
.breadcrumb-wrap {
    padding: 10px 0;
}

    .breadcrumb-wrap .breadcrumb {
        --bs-breadcrumb-divider-color: var(--jp-muted);
    }

    .breadcrumb-wrap .breadcrumb-item {
        display: flex;
        align-items: center;
    }

        .breadcrumb-wrap .breadcrumb-item + .breadcrumb-item::before {
            color: var(--jp-muted);
        }

        .breadcrumb-wrap .breadcrumb-item a {
            color: var(--jp-gray-600); /* 2026-08-11 颜色克制：面包屑固定灰，不随主题 */
            text-decoration: underline;
            text-underline-offset: 4px;
            text-decoration-thickness: 1.5px;
            font-weight: 500;
            transition: color .15s;
        }

            .breadcrumb-wrap .breadcrumb-item a:hover {
                color: var(--jp-gray-800);
            }
/* 首页图标（breadcrumb-home，置于首项前；固定灰） */
.breadcrumb-home {
    color: var(--jp-gray-600);
}

/* 副分类/品牌条 */
.subcat {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .subcat li a {
        font-size: 13px;
        color: var(--jp-body);
    }

        .subcat li a:hover {
            color: var(--jp-primary);
        }

        .subcat li a::before {
            content: "·";
            margin-right: 5px;
            color: var(--jp-primary-soft);
        }

/* 通栏横幅 */
.banner-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--jp-radius);
    height: 86px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .12em;
    text-align: center;
    padding: 0 1rem;
}

    .banner-bar:hover {
        color: #fff;
    }

    .banner-bar.tone-orange {
        background: linear-gradient(90deg, var(--jp-primary-deep), var(--jp-primary));
    }

    .banner-bar.tone-red {
        background: linear-gradient(90deg, #B23A00, var(--jp-primary));
    }
    /* 深色通栏横幅：改用色系最深色（2026-08-11，替代中性黑 --jp-ink，全站深色统一主题） */
    .banner-bar.tone-dark {
        background: linear-gradient(90deg, var(--jp-c-700), var(--jp-c-600));
    }
    /* 深色横幅：随主题色相（橙=深橙、青/蓝=深青/深蓝、夜=中灰） */
    .banner-bar.tone-teal {
        background: linear-gradient(90deg, var(--jp-primary-active), var(--jp-primary));
    }

.side-banner {
    height: 120px;
}

/* 推荐排行榜 */
.ranking {
    background: var(--jp-primary-softer);
    border-radius: var(--jp-radius);
    padding: 1rem 1.1rem;
}
    /* 2026-08-11 主题 50 色浅底 */
    .ranking h3 {
        font-size: 15px;
        font-weight: 700;
        color: var(--jp-ink);
        padding-bottom: .6rem;
        border-bottom: 2px solid var(--jp-line);
        display: inline-block;
        margin-bottom: .9rem;
    }

    .ranking .rk-item {
        display: flex;
        gap: .7rem;
        padding: .5rem 0;
        border-bottom: 1px dashed var(--jp-line);
        align-items: center;
    }

        .ranking .rk-item:last-child {
            border-bottom: 0;
        }

    .ranking .rk-num {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--jp-line);
        color: var(--jp-ink);
        font-size: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .ranking .rk-item:nth-child(-n+3) .rk-num {
        background: var(--jp-primary);
        color: #fff;
    }

    .ranking .rk-name {
        font-size: 12.5px;
        font-weight: 500;
    }

        .ranking .rk-name a {
            color: var(--jp-ink);
        }

            .ranking .rk-name a:hover {
                color: var(--jp-primary);
            }

    .ranking .rk-price {
        color: var(--jp-price);
        font-weight: 700;
        font-size: var(--jp-fs-price-sm);
        font-variant-numeric: tabular-nums;
    }

    .ranking .rk-unit {
        font-size: .75em;
        font-weight: 400;
        color: var(--jp-muted);
    }
/* 2026-08-13：排行价格后单位（/支 等）弱化显示 */

/* 列表页边栏/排序条 */
/* 统一侧栏面板（2026-08-09 静谧化）：白底清顶栏（去灰条）+ 图标强调 + 柔和选中态（浅主色底 + 左侧强调条，替代实心填充） */
.side-widget {
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius);
    overflow: hidden;
}

    .side-widget .card-header {
        background: var(--jp-surface);
        color: var(--jp-ink);
        font-weight: 700;
        font-size: .95rem;
        border-bottom: 1px solid var(--jp-line);
        padding: .9rem 1rem;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

        .side-widget .card-header i {
            color: var(--jp-primary);
        }

    .side-widget .list-group-item {
        border-color: var(--jp-line);
        color: var(--jp-body);
        border-left: 3px solid transparent;
        padding: .55rem 1rem;
    }

        .side-widget .list-group-item:hover {
            background: var(--jp-primary-softer);
            color: var(--jp-primary);
        }

        .side-widget .list-group-item.active {
            background: var(--jp-primary-softer);
            border-left-color: var(--jp-primary);
            color: var(--jp-primary-deep);
            font-weight: 600;
        }

/* 列表页统一页头（2026-08-09）：容器内圆角色带（无描边，不破出容器）
   + 主题色阶 c-50 底（4 套主题自动联动）+ 真实产品数大字（数据驱动的大气开场）。
   padding 保持舒适内边距，标题文字不贴边；垂直 padding 1.2rem（较初版降 10px）。 */
.jp-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
    background: var(--jp-primary-softer);
    padding: 1.2rem 1.75rem;
    margin-bottom: 1.5rem;
    border-radius: var(--jp-radius);
}

.jp-page-head-title {
    font-size: var(--jp-fs-display);
    font-weight: 700;
    color: var(--jp-ink);
    margin: 0;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: .6rem;
}

    .jp-page-head-title::before {
        content: "";
        width: 6px;
        height: 1.05em;
        background: var(--jp-primary);
        border-radius: 3px;
    }

.jp-page-head-sub {
    margin: .5rem 0 0;
    color: var(--jp-muted);
    font-size: .875rem;
}

.jp-page-head-count {
    text-align: right;
    padding-left: 1.5rem;
    border-left: 1px solid var(--jp-line);
    flex-shrink: 0;
}

    .jp-page-head-count strong {
        display: block;
        font-size: 2rem;
        font-weight: 700;
        color: var(--jp-primary);
        line-height: 1;
    }

    .jp-page-head-count span {
        font-size: .8rem;
        color: var(--jp-muted);
    }
/* 产品列表空态（2026-08-14）：图标+文案水平垂直居中（搜索/品牌/分类/促销/清仓共用） */
.list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    gap: .45rem;
    color: var(--jp-muted);
    text-align: center;
}

    .list-empty i {
        font-size: 2.6rem;
        line-height: 1;
    }
/* 搜索空结果/引导（2026-08-15）：0 结果时友好的「搜索经验提醒」（icon+文案+建议+操作按钮）。
   2026-08-15：无色背景（去掉原 --jp-bg 灰底与虚线边框），融入页面白底，仅靠居中图标/文案/按钮呈现，更干净 */
.search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 2rem 1rem;
    text-align: center;
}

    .search-empty > i {
        font-size: 3rem;
        line-height: 1;
        color: var(--jp-primary);
        opacity: .55;
        margin-bottom: .9rem;
    }

    .search-empty h3 {
        font-size: var(--jp-fs-heading);
        font-weight: 700;
        color: var(--jp-ink);
        margin: 0 0 .4rem;
    }

    .search-empty .sub {
        color: var(--jp-muted);
        font-size: var(--jp-fs-small);
        margin-bottom: 1.3rem;
    }

    .search-empty .tips {
        list-style: none;
        padding: 0;
        margin: 0 auto 1.6rem;
        max-width: 480px;
        text-align: left;
    }

        .search-empty .tips li {
            display: flex;
            align-items: flex-start;
            gap: .5rem;
            color: var(--jp-body);
            font-size: var(--jp-fs-body);
            line-height: 1.75;
        }

            .search-empty .tips li i {
                color: var(--jp-primary);
                margin-top: .3rem;
                flex-shrink: 0;
            }

        .search-empty .tips a {
            color: var(--jp-primary);
        }

    .search-empty .actions {
        display: flex;
        gap: .75rem;
        flex-wrap: wrap;
        justify-content: center;
    }

@media (max-width: 575.98px) {
    .jp-page-head {
        padding: 1.1rem 1.2rem;
    }

    .jp-page-head-count {
        border-left: 0;
        padding-left: 0;
        text-align: left;
    }

        .jp-page-head-count strong {
            font-size: 1.5rem;
        }
}
/* 侧栏吸顶（≥1024）：右栏产品较长时，侧栏随滚动保持可见（2026-08-11 断点统一） */
@media (min-width: 1024px) {
    .jp-side-lg {
        position: sticky;
        top: 122px;
        align-self: flex-start;
    }
}

/* 分类页/文章页左栏（2026-08-12）：左栏是主导航（分类树/文章专题）无移动抽屉，<1024 通栏堆叠显示（不被 jp-side-lg 隐藏），≥1024 25% 侧栏+吸顶 */
.jp-side-col {
    flex: 0 0 100%;
    max-width: 100%;
}

.jp-main-col {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 1024px) {
    .jp-side-col {
        flex: 0 0 25%;
        max-width: 25%;
        position: sticky;
        top: 122px;
        align-self: flex-start;
    }

    .jp-main-col {
        flex: 0 0 75%;
        max-width: 75%;
    }
}

/* 【修改说明】2026-08-13：原 .user-sidebar（旧版左导航样式）随 OrderList.cshtml 删除而移除，仅剩 .ucnav 美化版 */
/* 用户中心左导航（2026-08-12 美化版：身份卡 + 左强调条高亮 + 退出分隔） */
.ucnav {
    background: var(--jp-surface);
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius);
    overflow: hidden;
}

.ucnav-id {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.1rem 1.1rem;
    border-bottom: 1px solid var(--jp-line);
}

.ucnav-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--jp-primary-softer);
    color: var(--jp-c-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.ucnav-id-text {
    min-width: 0;
}

.ucnav-name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--jp-ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ucnav-role {
    font-size: .7rem;
    color: var(--jp-muted);
    letter-spacing: .08em;
    margin-top: .1rem;
}

.ucnav-list {
    padding: .5rem 0;
}
/* 2026-08-12：hover 背景填满整行——去掉 border-left（active 主色条改 ::before 不占布局），底色用 100 阶更清晰 */
.ucnav-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .62rem 1.1rem;
    font-size: .9375rem;
    color: var(--jp-body);
    text-decoration: none;
    position: relative;
    border-bottom: 1px solid var(--jp-line);
    transition: background .15s, color .15s;
}
    /* 2026-08-12：菜单字号 .9375 */
    .ucnav-item:last-child {
        border-bottom: 0;
    }

    .ucnav-item i {
        font-size: 1.05rem;
        color: var(--jp-muted);
        transition: color .15s;
        flex-shrink: 0;
    }

    .ucnav-item:hover {
        background: var(--jp-primary-soft);
        color: var(--jp-primary-deep);
    }

        .ucnav-item:hover i {
            color: var(--jp-c-600);
        }

    .ucnav-item.active {
        background: var(--jp-primary-soft);
        color: var(--jp-primary-deep);
    }
        /* 2026-08-12：当前项不加粗，加背景色 */
        .ucnav-item.active i {
            color: var(--jp-primary);
        }

        .ucnav-item.active::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--jp-primary);
        }

.ucnav-logout {
    color: var(--jp-muted);
}

    .ucnav-logout:hover {
        color: var(--jp-danger);
        background: transparent;
    }

        .ucnav-logout:hover i {
            color: var(--jp-danger);
        }

/* 移动端会员导航网格（2026-08-12：<1024 左侧导航隐藏，改上侧 2 行×4 列，图标在上文本在下） */
.ucnav-grid {
    display: none;
}

@media (max-width: 1023.98px) {
    .ucnav-aside {
        flex: 0 0 100%;
        max-width: 100%;
    }
        /* 2026-08-12 用户中心内容列通栏：768~1023（如 iPad Air 820px）侧栏已 100% 宽，内容仍 col-md-9=75% 导致卡片不满宽。
       用兄弟选择器精准匹配用户中心布局（aside 后紧跟 col-md-9），一处修复全部 11 个用户中心页，≥1024 桌面仍 75% 不变 */
        .ucnav-aside + .col-md-9 {
            flex: 0 0 100%;
            max-width: 100%;
        }

    .ucnav-desktop {
        display: none;
    }

    .ucnav-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: .5rem;
    }

    .ucnav-grid-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .3rem;
        padding: .6rem .25rem;
        background: var(--jp-surface);
        border: 1px solid var(--jp-line);
        border-radius: var(--jp-radius);
        color: var(--jp-body);
        text-decoration: none;
        font-size: .75rem;
        text-align: center;
    }

        .ucnav-grid-item i {
            font-size: 1.3rem;
            color: var(--jp-c-600);
            line-height: 1;
        }

        .ucnav-grid-item:hover {
            border-color: var(--jp-c-300);
            color: var(--jp-ink);
        }

        .ucnav-grid-item.active {
            background: var(--jp-primary-soft);
        }
    /* 2026-08-12：当前页面图标加背景色 */
}

/* 购物车删除按钮：圆角矩形背景（风格色 100 阶）、红色（2026-08-12，点击=移入收藏） */
.btn-del-plain {
    border: none;
    background: var(--jp-primary-soft);
    color: var(--jp-danger);
    padding: .35rem .5rem;
    font-size: 1rem;
    line-height: 1;
    border-radius: var(--jp-radius-sm);
}

    .btn-del-plain:hover {
        color: var(--jp-danger);
    }
/* 会员中心图标按钮（订单删除/详情等链接）：圆角矩形背景（风格色 100 阶），提升可见性（2026-08-12） */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 .35rem;
    font-size: 1rem;
    border-radius: var(--jp-radius-sm);
    background: var(--jp-primary-soft);
    text-decoration: none;
    vertical-align: middle;
}
/* 购物车提交按钮（2026-08-12：系统主色 btn-primary，高度由下方扁平化规则控制） */
.btn-checkout {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
}
/* 前台用户管理按钮扁平化（2026-08-12）：会员中心内容区 + 弹窗按钮统一减小高度；输入框同步降低保持对齐 */
.col-md-3 + .col-md-9 .btn,
.modal .btn {
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.col-md-3 + .col-md-9 .btn-lg {
    padding-top: .42rem;
    padding-bottom: .42rem;
}

.col-md-3 + .col-md-9 .form-control,
.col-md-3 + .col-md-9 .form-select {
    padding-top: .3rem;
    padding-bottom: .3rem;
}
/* 地址模态框（2026-08-12）：取消/保存按钮更扁；文本框恢复撑满整行（用户确认） */
.addr-modal .modal-footer .btn {
    padding-top: .25rem;
    padding-bottom: .25rem;
}
/* 地址卡操作按钮（星/笔/垃圾桶）：圆角矩形背景（风格色 100 阶）、无边框；设为默认/编辑=主题色、删除=红色；hover 颜色不变（2026-08-12） */
.addr-act {
    border: none;
    background: var(--jp-primary-soft);
    padding: .3rem .45rem;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    color: var(--jp-primary);
    border-radius: var(--jp-radius-sm);
}

    .addr-act:hover {
        color: var(--jp-primary);
    }

    .addr-act[data-act="del"] {
        color: var(--jp-danger);
    }

        .addr-act[data-act="del"]:hover {
            color: var(--jp-danger);
        }

/* 收货地址选择器（2026-08-12：点击展开 + 关键词搜索，移动端友好） */
.addr-picker {
    position: relative;
}

.addr-picker-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .3rem .75rem;
    background: var(--jp-surface);
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius-sm);
    color: var(--jp-body);
    font-size: .875rem;
    transition: border-color .15s;
}

    .addr-picker-toggle:hover {
        border-color: var(--jp-c-300);
    }

    .addr-picker-toggle:focus {
        outline: none;
        border-color: var(--jp-primary);
        box-shadow: 0 0 0 3px var(--jp-primary-softer);
    }

.addr-picker-arrow {
    color: var(--jp-muted);
    font-size: .8rem;
    flex-shrink: 0;
    transition: transform .15s;
}

.addr-picker-panel {
    position: fixed;
    z-index: 1060;
    background: var(--jp-surface);
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius-sm);
    box-shadow: var(--jp-shadow);
    flex-direction: column;
    overflow: hidden;
}
/* 2026-08-12：fixed 逃出 .side-widget 的 overflow:hidden 裁剪；top/left/width 由 JS 定位 */
.addr-picker-search {
    position: relative;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--jp-line);
    background: var(--jp-bg);
}

    .addr-picker-search > i {
        position: absolute;
        left: 1.15rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--jp-muted);
        font-size: .9rem;
    }

    .addr-picker-search input {
        padding-left: 2.1rem;
    }

.addr-picker-list {
    max-height: 220px;
    overflow-y: auto;
}

.addr-picker-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: .55rem .75rem;
    border: 0;
    border-bottom: 1px solid var(--jp-line);
    background: none;
    color: var(--jp-ink);
    cursor: pointer;
}

    .addr-picker-item:last-child {
        border-bottom: 0;
    }

    .addr-picker-item:hover {
        background: var(--jp-primary-softer);
    }

    .addr-picker-item.active {
        background: var(--jp-primary-softer);
    }
/* 订单备注多行文本框（3 行，2026-08-12），可纵向拉伸 */
.addr-beizhu {
    resize: vertical;
}

/* 触屏常显卡片操作按钮（U2） */
@media (pointer: coarse) {
    .hover-btns {
        opacity: 1;
    }
}

/* 图谱缩略图（T6） */
.catalog-thumb {
    transition: transform .2s, box-shadow .2s;
}

    .catalog-thumb:hover {
        transform: translateY(-3px);
        box-shadow: var(--jp-shadow);
        border-color: var(--jp-primary) !important;
    }

/* ═══════════════ 首页（T1）═══════════════ */
/* Hero 大 banner 轮播（Swiper 11，2026-08-08 替换 Bootstrap carousel） */
/* 2026-08-11：Hero 大图加边框；左右箭头已移除（Swiper 仅保留自动播放+分页点） */
.hero-slider {
    height: clamp(220px, 26vw, 330px);
    border-radius: var(--jp-radius);
    overflow: hidden;
    border: 1px solid var(--jp-line);
}
/* Hero 移动端：高度贴近 banner 比例(1090:450≈2.42)，减少 cover 裁切 */
@media (max-width: 575.98px) {
    .hero-slider {
        height: 180px;
    }
}

.hero-slider .swiper-slide {
    height: 100%;
}

.hero-slider .hero-slide-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* hero 分页点（2026-08-11 决策）：中性白点 + 微影，图上任意底色可见，不引入品牌色 */
.hero-slider .swiper-pagination-bullet {
    background: #fff;
    opacity: .65;
    box-shadow: 0 0 0 1px rgba(35,35,35,.25);
}

.hero-slider .swiper-pagination-bullet-active {
    background: #fff;
    opacity: 1;
}

/* 产品轮播（Swiper，2026-08-08 替换 Owl）：2026-08-11 箭头改用区块标题右侧自定义 .ps-nav（不再用 Swiper 内置箭头） */
.product-slider .swiper-slide {
    height: auto;
}

.slide-1 {
    background: linear-gradient(120deg, #FFF3EC, #FFE4D3);
}

.slide-2 {
    background: linear-gradient(120deg, #FFE9E0, #FFD2B8);
}

.slide-3 {
    background: linear-gradient(120deg, #F7F2EC, #EFE6DA);
}
/* hero-right 样式已删除（2026-08-08：首页 Hero 右侧"新品上市"banner 区移除） */

/* 栏目标题 + 栏目块 */
.cate-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .8rem;
    flex-wrap: wrap;
}
    /* 标题收敛为无衬线（2026-08-08：衬线仅 Logo 保留，规避 Windows 宋体老旧感）；2026-09-16 语义降级 h3→h2 */
    .cate-title h2 {
        font-family: var(--jp-font-body);
        font-weight: 700;
        color: var(--jp-ink);
        font-size: 1.3rem;
        margin: 0;
        white-space: nowrap;
    }

        .cate-title h2::before {
            content: "";
            display: inline-block;
            width: 6px;
            height: 1.1em;
            background: var(--jp-primary);
            border-radius: 3px;
            margin-right: .55rem;
            vertical-align: -.18em;
        }
    /* 产品轮播自定义箭头（2026-08-11：区块标题右侧，不压卡片；disabled 变灰禁用） */
    .cate-title .ps-nav {
        margin-left: auto;
        display: flex;
        gap: .4rem;
    }

.ps-nav button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--jp-line);
    background: var(--jp-surface);
    color: var(--jp-gray-700);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color var(--jp-dur) var(--jp-ease), border-color var(--jp-dur) var(--jp-ease);
}

    .ps-nav button:hover:not(:disabled) {
        border-color: var(--jp-primary);
        color: var(--jp-primary);
    }

    .ps-nav button:disabled {
        color: var(--jp-gray-300);
        border-color: var(--jp-line);
        cursor: default;
    }
/* 产品栏目区块：去边框+去底色，开放化（2026-08-08；原为 1px 边框白卡，回滚恢复原声明） */
.cate-slider2 {
    padding: 0;
    border: 0;
    background: transparent;
    margin-bottom: 1.2rem;
}


/* 产品详情富文本 */
.product-content {
    line-height: 1.8;
    color: var(--jp-body);
}

    .product-content img {
        max-width: 100%;
        height: auto;
    }

/* ═══════════════ 产品详情页（2026-08-07 用户样式调整）═══════════════ */
/* 规格购物车表格：规格/单价列小一号，单价不加粗 */
#specCartTbody .spec-name {
    font-size: .875rem;
}

#specCartTbody .spec-price {
    font-size: var(--jp-fs-price-sm);
    font-weight: 400;
    color: var(--jp-price);
    font-variant-numeric: tabular-nums;
}

/* 详情 Tab：当前 tab 标题主题色，边框恢复灰色（2026-08-13：原容器下边框+激活项边框用主题色，改回灰色，仅 title 着色） */
.product-tabs {
    border-bottom: 1px solid var(--jp-line);
}

    .product-tabs .nav-link {
        color: var(--jp-ink);
        border: 1px solid transparent;
    }

        .product-tabs .nav-link:hover:not(.active) {
            border-color: var(--jp-line);
        }

        .product-tabs .nav-link.active {
            color: var(--jp-primary);
            border-color: var(--jp-line) var(--jp-line) var(--jp-surface);
            font-weight: 600;
        }

/* 关联推荐卡片（2026-08-08：图片固定 150×150，容器随图不中空；无卡片外框） */
/* 关联推荐相关样式已移除（2026-08-08 模块弃用） */

/* 【修改说明】2026-08-12：旧主题切换器（绝对定位右对齐 4 色块，距右 100px 系旧购物车位置遗留）已弃用删除——
   改为欢迎语之后的内联下拉菜单（见上方 .jpyk-theme 样式） */

/* 首页通栏横幅图（本地化旧站 id2-banner） */
.home-banner {
    display: block;
    width: 100%;
    border-radius: var(--jp-radius);
    border: 1px solid var(--jp-line);
}
/* 首页板块间 banner：小屏 xs 隐藏（2026-08-08） */
@media (max-width: 575.98px) {
    .home-banner {
        display: none;
    }
}

/* ═══════════════ 内容页（T10–T13：文章/公告/留言）═══════════════ */
/* 侧栏紧凑产品（推荐产品挂件，_SidebarProducts） */
.side-prod {
    display: flex;
    gap: .7rem;
    padding: .55rem .9rem;
    align-items: center;
}

    .side-prod + .side-prod {
        border-top: 1px solid var(--jp-line);
    }

    .side-prod .sp-img {
        width: 52px;
        height: 52px;
        object-fit: cover;
        border-radius: var(--jp-radius-sm);
        border: 1px solid var(--jp-line);
        flex-shrink: 0;
        background: var(--jp-primary-softer);
    }

    .side-prod .sp-name {
        font-size: .875rem;
        line-height: 1.4;
        color: var(--jp-body);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

        .side-prod .sp-name:hover {
            color: var(--jp-primary);
        }

    .side-prod .sp-price {
        font-size: var(--jp-fs-price-sm);
        font-weight: 700;
        color: var(--jp-price);
        margin-top: 2px;
        font-variant-numeric: tabular-nums;
    }

/* 文章列表（2026-08-09 编辑型：无边框 + 细分隔线；2026-08-12 改造：序号列 + 黑字下划线 title + 斜体日期，行高收紧约1/3） */
.article-toolbar {
    background: var(--jp-bg);
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius);
    padding: .9rem 1rem;
    gap: .75rem;
    flex-wrap: wrap;
}

.article-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .3rem .5rem;
    padding: .75rem .2rem;
    border: 0;
    border-bottom: 1px solid var(--jp-line);
    border-radius: 0;
    background: transparent;
}

    .article-item:last-child {
        border-bottom: 0;
    }

    .article-item:hover {
        border-bottom-color: var(--jp-line);
    }
/* 2026-08-12：hover 边框不变色 */
.article-index {
    width: 50px;
    flex-shrink: 0;
    color: var(--jp-muted);
    font-size: .8125rem;
}
/* 2026-08-12：序号列宽 100px→50px（原固定 100px 使序号与 title 间距过大） */
.article-title {
    flex: 1;
    min-width: 200px;
    font-size: 1rem;
    color: var(--jp-ink);
    line-height: 1.1;
    text-align: left;
    transition: color .15s;
}
    /* 2026-08-12：去粗体，行高 1.5→1.1；title min-width 200px 自适应左对齐 */
    .article-title:hover {
        color: var(--jp-ink);
        text-decoration: underline;
    }
/* 2026-08-12：hover 保持黑 + 下划线 */
.article-meta {
    font-size: .8125rem;
    color: var(--jp-muted);
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-shrink: 0;
}

.article-date {
    font-style: italic;
    width: 130px;
    flex-shrink: 0;
}
/* 2026-08-12：发布日期斜体 + 日期列宽 130px */
.article-views {
    width: 80px;
    flex-shrink: 0;
}
/* 2026-08-12：views 列宽 80px */

/* 文章搜索框（2026-08-12）：输入框与按钮一体无间距（同头部搜索框 pattern：输入框去边框/阴影，整组描边，focus 时 :focus-within 画环，消除两控件间视觉间距） */
.article-search {
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius);
    overflow: hidden;
}

    .article-search .form-control {
        border: 0;
        box-shadow: none;
        background: var(--jp-surface);
    }

        .article-search .form-control:focus {
            box-shadow: none;
        }

    .article-search:focus-within {
        border-color: var(--jp-primary);
        box-shadow: 0 0 0 3px var(--jp-primary-softer);
    }

/* 文章专题列表选中项（Articles/Index，2026-08-09 柔和化）：浅主色底 + 左侧强调条，去实心填充 */
.side-widget .topic-item.active {
    background: var(--jp-primary-softer);
    border-left-color: var(--jp-primary);
    color: var(--jp-primary-deep);
    font-weight: 600;
}

/* 文章详情 */
.article-detail h1 {
    font-family: var(--jp-font-body);
    font-weight: 700;
    font-size: 1.45rem;
    color: var(--jp-ink);
}

.article-detail .ad-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    font-size: .8125rem;
    color: var(--jp-muted);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--jp-line);
    margin-bottom: 1.4rem;
}
    /* 2026-08-13：flex-wrap 防窄屏溢出；字号 .8→.8125 与列表页 .article-meta 统一 */
    .article-detail .ad-meta .ad-back {
        margin-left: auto;
        white-space: nowrap;
    }
/* 2026-08-13：返回上一页贴元信息行最右 */
.article-detail .ad-body {
    line-height: 1.9;
    color: var(--jp-body);
    font-size: .95rem;
}

    .article-detail .ad-body img {
        max-width: 100%;
        height: auto;
        border-radius: var(--jp-radius);
    }
    /* 2026-08-13：正文大图圆角轻修饰 */
    /* 2026-08-13：正文富文本作用域样式——标题/表格/引用/列表收进设计系统，避免浏览器默认样式（如正文 h2 比页题还大）打破层级。
   h2 用「主色竖条」与全站区块标题（uc-title-bar / jp-page-head-title::before）同一签名语言 */
    .article-detail .ad-body h2 {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--jp-ink);
        margin: 1.8rem 0 .8rem;
        padding-left: .6rem;
        border-left: 3px solid var(--jp-primary);
    }

    .article-detail .ad-body h3 {
        font-size: 1.12rem;
        font-weight: 700;
        color: var(--jp-ink);
        margin: 1.5rem 0 .6rem;
    }

    .article-detail .ad-body h4 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--jp-ink);
        margin: 1.2rem 0 .5rem;
    }

    .article-detail .ad-body p {
        margin: 0 0 .9rem;
    }

    .article-detail .ad-body ul, .article-detail .ad-body ol {
        margin: 0 0 .9rem 1.2rem;
        padding-left: .4rem;
    }

    .article-detail .ad-body li {
        margin-bottom: .3rem;
    }

    .article-detail .ad-body table {
        width: 100%;
        margin: 1rem 0;
        border-collapse: collapse;
        font-size: .875rem;
    }

    .article-detail .ad-body th, .article-detail .ad-body td {
        border: 1px solid var(--jp-line);
        padding: .5rem .65rem;
    }

    .article-detail .ad-body th {
        background: var(--jp-bg);
        font-weight: 600;
        color: var(--jp-ink);
    }

    .article-detail .ad-body blockquote {
        margin: 1rem 0;
        padding: .6rem 1rem;
        border-left: 3px solid var(--jp-primary-border);
        background: var(--jp-bg);
        color: var(--jp-muted);
        border-radius: 0 var(--jp-radius-sm) var(--jp-radius-sm) 0;
    }

    .article-detail .ad-body a {
        color: var(--jp-primary);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

        .article-detail .ad-body a:hover {
            color: var(--jp-primary-hover);
        }
/* 2026-08-13：文章详情左右栏——1024 断点（替换原 col-lg-9 / d-none d-lg-block 的 992 语义，符合重构定律）：
   <1024 正文通栏、右侧推荐产品隐藏；≥1024 正文 75% + 右侧 25% 吸顶（长文阅读时推荐产品保持可见） */
.art-main {
    flex: 0 0 100%;
    max-width: 100%;
}

.art-side {
    display: none;
}

@media (min-width: 1024px) {
    .art-main {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .art-side {
        display: block;
        flex: 0 0 25%;
        max-width: 25%;
        position: sticky;
        top: 122px;
        align-self: flex-start;
    }
}
/* 文章详情 上一篇/下一篇（2026-08-13）：两端对齐、标题超长省略；border-top 作正文结束分隔。
   上一篇=更新文章（左），下一篇=更旧文章（右）；disabled（无前后篇）置灰不可点 */
.pn-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--jp-line);
}

.pn-link {
    display: flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    max-width: 50%;
    overflow: hidden;
    color: var(--jp-body);
    font-size: .875rem;
    text-decoration: none;
}

    .pn-link i {
        flex-shrink: 0;
        color: var(--jp-muted);
    }

    .pn-link .pn-label {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .pn-link .pn-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .pn-link:first-child {
        justify-content: flex-start;
    }

    .pn-link:last-child {
        justify-content: flex-end;
    }

    .pn-link:hover, .pn-link:hover i {
        color: var(--jp-primary);
    }

    .pn-link.disabled, .pn-link.disabled:hover {
        color: var(--jp-muted);
        cursor: default;
        pointer-events: none;
    }

/* 内容公告（Notices / Guides） */
.notice-card {
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius);
    padding: 2rem 2.2rem;
}

.guide-block h2 {
    font-family: var(--jp-font-body);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--jp-ink);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--jp-line);
    margin-bottom: 1rem;
}

.guide-block ol {
    padding-left: 1.4rem;
}

.guide-block li {
    margin-bottom: .5rem;
    line-height: 1.8;
}

/* 在线留言 / 产品咨询 */
/* 2026-08-16：展示样式对齐后台产品咨询页 Question/Index（gb-card 卡片 + 左竖条回复）：
   内容 .95rem、时间 .8rem、回复 .9rem；去掉原「客服回复：/问：/答：」标签字样 */
.guestbook-item {
    border: 1px solid var(--jp-line);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: .9rem;
    background: var(--jp-surface);
}

    .guestbook-item:hover {
        box-shadow: var(--jp-shadow-sm);
    }
    /* 2026-08-16：产品咨询 tab——卡片只留底部虚横线，取消其它边框/背景/圆角 */
    .guestbook-item.gb-flat {
        border: none;
        border-bottom: 1px dashed var(--jp-line);
        border-radius: 0;
        padding: .9rem 0;
        background: transparent;
    }

    .guestbook-item .gb-content {
        font-size: .95rem;
        line-height: 1.7;
        color: var(--jp-body);
        white-space: pre-line;
        word-break: break-word;
    }
    /* 发布时间——紧跟内容之后，略小灰色；图标为钟表 */
    .guestbook-item .gb-date {
        font-size: .8rem;
        color: var(--jp-muted);
        margin-left: 1rem;
        white-space: nowrap;
    }
        .guestbook-item .gb-date i {
            margin-right: .2rem;
        }
        /* 回复时间——紧贴回复内容，间距更小 */
        .guestbook-item .gb-date.gb-date-inline {
            margin-left: .45rem;
        }
        /* 2026-09-16：回复时间「回复于 …」斜体 */
        .guestbook-item .gb-date.gb-reply-time {
            font-style: italic;
        }

    .guestbook-item .gb-reply {
        margin-top: .8rem;
        padding-left: .85rem;
        border-left: 3px solid var(--jp-line);
        font-size: .9rem;
        line-height: 1.7;
        color: var(--jp-body);
        white-space: pre-line;
        word-break: break-word;
    }

/* ═══════════════ P6 易用性 · 性能 ═══════════════ */
/* U1 搜索关键词联想下拉 */
.search-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--jp-surface);
    border: 1px solid var(--jp-line);
    border-top: 0;
    border-radius: 0 0 var(--jp-radius) var(--jp-radius);
    box-shadow: var(--jp-shadow);
    max-height: 340px;
    overflow-y: auto;
}
    /* 2026-08-15：纯产品名极简条目——白底、hover 显示主题风格色（去缩略图/单位/价格/角标；产品名已含品牌"品牌+空格+商品名"） */
    .search-suggest .si {
        display: block;
        padding: .55rem .9rem;
        font-size: .875rem;
        text-decoration: none;
        color: var(--jp-ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .search-suggest .si + .si {
            border-top: 1px solid var(--jp-line);
        }

        .search-suggest .si:hover, .search-suggest .si.active {
            /* 2026-08-25：hover 改浅主色底 + 主色深字（原整块主色太重），与关键词胶囊一致；并加与文字同色的下划线 */
            background: var(--jp-primary-soft);
            color: var(--jp-primary-deep);
            text-decoration: underline;
            text-underline-offset: 2px;
        }

    .search-suggest .si-all {
        text-align: center;
        font-size: .8rem;
        color: var(--jp-primary);
        font-weight: 600;
    }

/* U7 Toast 反馈容器（fixed 顶部居中） */
/* ====== Toast（2026-08-11：右上角 + 主题 200 色阶浅底深字） ====== */
.jpyk-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: auto;
    max-width: 92vw;
}

.jpyk-toast {
    background: var(--jp-c-200);
    color: var(--jp-ink); /* 2026-08-11：文字用语义 --jp-ink，night 下自动反转浅色 */
    box-shadow: var(--jp-shadow-sm);
    border: 1px solid var(--jp-c-300);
    border-radius: var(--jp-radius-sm);
    font-size: .8125rem;
    font-weight: 500;
    /* 【修改说明】2026-08-12：宽度较 Bootstrap 默认 ~350px 减约 40%（配短文案+图标，整体紧凑）；仅前台 .jpyk-toast，不影响后台 showToast */
    max-width: 210px;
}

    .jpyk-toast .toast-body {
        padding: .5rem .7rem;
    }
/* 【修改说明】2026-08-12：前置图标——success 绿 / error 红 / warning 琥珀（功能色，黑白灰主题下保留语义色） */
.jpyk-toast-icon {
    font-size: 1rem;
    vertical-align: -2px;
    flex-shrink: 0;
    color: var(--jp-success);
}

.jpyk-toast[data-type="error"] .jpyk-toast-icon {
    color: var(--jp-danger);
}

.jpyk-toast[data-type="warning"] .jpyk-toast-icon {
    color: var(--jp-warning);
}

/* 全局确认对话框（2026-08-12：title 中性浅灰底 + 红色标题；按钮扁平靠右下） */
.jpyk-confirm-modal .modal-content {
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius);
    box-shadow: var(--jp-shadow);
    overflow: hidden;
}

.jpyk-confirm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem;
    background: var(--jp-bg);
}

.jpyk-confirm-title {
    color: var(--jp-danger);
    font-weight: 700;
    font-size: 1rem;
}

.jpyk-confirm-body {
    padding: 1.1rem 1rem;
    font-size: .95rem;
    color: var(--jp-ink);
    line-height: 1.6;
    word-break: break-all;
}

.jpyk-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: 0 1rem 1rem;
}

    .jpyk-confirm-footer .btn {
        padding-top: .25rem;
        padding-bottom: .25rem;
        font-size: .8125rem;
    }

/* U9 键盘可达性：焦点可见环 */
:focus-visible {
    outline: 2px solid var(--jp-primary);
    outline-offset: 2px;
}

.search-suggest .si:focus-visible {
    outline: none;
    background: var(--jp-primary);
    color: #fff;
}

/* U5 移动端分类手风琴（_MobileNav → CategoryMenuMobile） */
.mb-nav-cat {
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius);
    overflow: hidden;
    margin-bottom: .5rem;
}

    .mb-nav-cat .mb-cat-title {
        background: var(--jp-primary);
        color: #fff;
        font-weight: 700;
        font-size: .9rem;
        padding: .6rem .9rem;
    }

    .mb-nav-cat .accordion-button {
        font-size: .85rem;
        font-weight: 500;
        padding: .6rem .9rem;
    }

        .mb-nav-cat .accordion-button:not(.collapsed) {
            background: var(--jp-primary-softer);
            color: var(--jp-primary-deep);
            box-shadow: none;
        }
    /* 二级：红色标题链接，hover 变主色（2026-08-08 由 div 改 a） */
    .mb-nav-cat .mb-lv2 {
        display: block;
        font-size: .8rem;
        font-weight: 700;
        color: var(--jp-danger);
    }

        .mb-nav-cat .mb-lv2:hover {
            color: var(--jp-primary);
        }

    .mb-nav-cat .mb-lv3 {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem .9rem;
    }

        .mb-nav-cat .mb-lv3 a {
            font-size: .78rem;
            color: var(--jp-body);
            display: inline-block;
            padding: .15rem 0;
        }

            .mb-nav-cat .mb-lv3 a:hover {
                color: var(--jp-primary);
            }

    .mb-nav-cat .mb-cat-link {
        display: block;
        padding: .6rem .9rem;
        font-size: .85rem;
        color: var(--jp-ink);
        border-top: 1px solid var(--jp-line);
    }

        .mb-nav-cat .mb-cat-link:hover {
            color: var(--jp-primary);
            background: var(--jp-primary-softer);
        }

/* 移动折叠菜单链接（2026-08-12）：Bootstrap nav-link 默认蓝色 → 黑字 + 下划线 */
#mbNav .nav-link {
    color: var(--jp-ink);
    text-decoration: underline;
}

    #mbNav .nav-link:hover, #mbNav .nav-link:focus {
        color: var(--jp-ink);
    }

/* 用户中心收货地址卡（Users/Info） */
/* 地址卡列宽（2026-08-12 1024 断点定律）：<1024 独占一行，≥1024 两列一排 */
.addr-col {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 1024px) {
    .addr-col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.addr-card {
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius);
    padding: 1rem 1.1rem;
    height: 100%;
    background: var(--jp-surface);
    transition: .15s;
}

    .addr-card:hover {
        border-color: var(--jp-primary);
        box-shadow: var(--jp-shadow-sm);
    }

    .addr-card.addr-default {
        border-color: var(--jp-primary);
        background: var(--jp-primary-softer);
    }

    .addr-card .addr-danwei {
        font-weight: 700;
        color: var(--jp-ink);
    }

    .addr-card .addr-row {
        font-size: .83rem;
        color: var(--jp-body);
        display: flex;
        gap: .5rem;
    }

        .addr-card .addr-row i {
            color: var(--jp-muted);
        }

/* ════════════════════════════════════════════════════════
   【2026-08-08】详情页规格表(#specCartBox)统一样式
   表头/合计行/单元格背景全取消；字体统一为"规格选择"标签文字色 var(--jp-body)(#555)，
   中性不随主题变色；数量控件(-/+)边框浅灰；删除按钮维持红色不变。
   ════════════════════════════════════════════════════════ */
#specCartBox .cart-table thead th,
#specCartBox .cart-table tbody td,
#specCartBox .cart-table tfoot td {
    color: var(--jp-body);
    background: transparent;
}

#specCartBox .cart-table tfoot tr {
    --bs-table-bg: transparent;
    background-color: transparent;
}

#specCartBox .spec-price, #specCartBox .text-price {
    color: var(--jp-price);
}
/* 数量控件统一风格（2026-08-08 起前台全站遵循，见 CLAUDE.md 注意事项 10）：
   加减按钮边框浅灰与输入框同色；单规格 #qty± / 多规格 .spec-qty± / 购物车 .qty± 共用 */
.input-group .btn-outline-secondary {
    border-color: var(--jp-line);
}

/* ====== 产品分类树页（Categorys/Index）：左树右产品 ====== */
/* 左栏树状分类导航（2026-08-09）：一级整行导航（无折叠图标），二级流式胶囊；hover/active 用网站风格色 */
.cat-lv1-link {
    display: block;
    padding: .6rem .75rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--jp-ink);
    text-decoration: none;
    border-left: 3px solid transparent;
    border-radius: var(--jp-radius-sm);
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .cat-lv1-link:hover {
        background: var(--jp-primary-softer);
        color: var(--jp-primary-deep);
    }

    .cat-lv1-link.active {
        background: var(--jp-primary-softer);
        border-left-color: var(--jp-primary);
        color: var(--jp-primary-deep);
    }
/* 二级流式胶囊（圆点 + 名称，flex 换行，避免每行独占拉长树高） */
.cat-lv2-flow {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .35rem .75rem .75rem;
}

.cat-lv2-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .7rem;
    border-radius: 999px;
    background: var(--jp-surface);
    border: 1px solid var(--jp-line);
    font-size: .82rem;
    color: var(--jp-body);
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}

    .cat-lv2-pill:hover {
        border-color: var(--jp-primary);
        color: var(--jp-primary);
    }

    .cat-lv2-pill.active {
        background: var(--jp-primary-softer);
        border-color: var(--jp-primary-border);
        color: var(--jp-primary-deep);
        font-weight: 600;
    }

/* 品牌筛选胶囊（2026-08-09）：改为单选胶囊（"全部" + 品牌），无复选框；计数小字 */
.cat-chip small {
    font-size: .72rem;
    font-weight: 400;
    opacity: .8;
}

/* 分类页筛选卡关键词输入（2026-08-08）：focus 时文本框与搜索按钮始终紧挨——
   Bootstrap focus 外阴影会向按钮侧扩散成视觉缝隙，改为内部边框高亮（inset） */
.kw-group .form-control:focus {
    box-shadow: inset 0 0 0 .0625rem var(--jp-muted);
    border-color: var(--jp-muted);
}

.kw-group .btn:focus, .kw-group .btn:hover {
    z-index: 2;
}

/* ====== 分类页（2026-08-09 静谧化）：左树导航面板与统一侧栏面板一致（白底细框清顶栏），选中态柔和 ====== */
.cat-panel {
    background: transparent;
}
/* 筛选区行（2026-08-09）：左标签定宽 + 右内容，分类/品牌 行左对齐 */
.cat-filter-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .9rem;
}

.cat-filter-label {
    flex-shrink: 0;
    width: 4.5rem;
    color: var(--jp-body);
    font-weight: 600;
}
/* 产品分类树页：筛选条件折叠按钮（2026-08-13 恢复折叠；2026-08-13 默认即 hover 样式更醒目，真 hover 背景回默认） */
.cat-filter-head-row {
    margin-bottom: .75rem;
}
/* 2026-08-13：下方间距 +10px */
.cat-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .75rem;
    border: 1px solid var(--jp-primary);
    background: var(--jp-primary-softer);
    color: var(--jp-primary);
    border-radius: var(--jp-radius-sm);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--jp-dur) var(--jp-ease), border-color var(--jp-dur) var(--jp-ease), background var(--jp-dur) var(--jp-ease);
}

    .cat-filter-toggle:hover {
        border-color: var(--jp-primary);
        color: var(--jp-primary);
        background: var(--jp-surface);
    }

    .cat-filter-toggle .chev {
        transition: transform var(--jp-dur) var(--jp-ease);
    }

    .cat-filter-toggle[aria-expanded="true"] .chev {
        transform: rotate(180deg);
    }

.cat-filter-collapse .cat-filter-row {
    margin-bottom: .5rem;
}
/* 右栏面包屑路径（_CategoryProducts，2026-08-09）：产品分类 › 父级 › 当前 */
.cat-head-path {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    font-size: .82rem;
    color: var(--jp-muted);
}

    .cat-head-path a {
        color: var(--jp-muted);
        text-decoration: none;
    }

        .cat-head-path a:hover {
            color: var(--jp-ink);
        }

    .cat-head-path i {
        font-size: .62rem;
        color: var(--jp-line);
    }

    .cat-head-path .cur {
        color: var(--jp-ink);
        font-weight: 600;
    }
/* 排序条（2026-08-09）：综合/销量/价格/上新；当前项浅主色底（柔和化），下方细分隔线与产品网格隔开 */
.cat-sort {
    font-size: .85rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--jp-line);
    margin-bottom: 1rem;
}

.cat-sort-label {
    color: var(--jp-muted);
    margin-right: .15rem;
}

.cat-sort-item {
    border: none;
    background: transparent;
    color: var(--jp-body);
    padding: .3rem .7rem;
    cursor: pointer;
    border-radius: var(--jp-radius-sm);
    transition: background .15s, color .15s;
}

    .cat-sort-item:hover {
        background: var(--jp-bg);
        color: var(--jp-ink);
    }

    .cat-sort-item.active {
        background: var(--jp-primary-softer);
        color: var(--jp-primary-deep);
        font-weight: 600;
    }
/* 分类胶囊（2026-08-09）：当前分类的子/兄弟分类，当前项浅主色底 */
.cat-chip {
    border: 1px solid var(--jp-line);
    background: transparent;
    color: var(--jp-body);
    padding: .24rem .8rem;
    border-radius: 999px;
    font-size: .8rem;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

    .cat-chip:hover {
        border-color: var(--jp-body);
        color: var(--jp-ink);
    }

    .cat-chip.active {
        background: var(--jp-primary-softer);
        border-color: var(--jp-primary-border);
        color: var(--jp-primary-deep);
        font-weight: 600;
    }
/* 右栏 AJAX 加载态（2026-08-12）：筛选/翻页时保留旧内容原位、轻微变淡（不换占位，避免高度塌陷导致页面跳动） */
#categoryProducts.loading {
    opacity: .55;
    pointer-events: none;
}
/* 【修改说明】2026-08-12：分类页品牌筛选去掉折叠/展开，品牌全部平铺展示（.brand-list/.cat-expand 已删除，不再折叠） */
.cat-clear-filter {
    border: none;
    background: none;
    color: var(--jp-muted);
    font-size: .78rem;
    cursor: pointer;
    padding: .15rem 0;
}

    .cat-clear-filter:hover {
        color: var(--jp-danger);
    }

/* 促销/清仓页左栏筛选（2026-08-09 静谧化）：包装在统一 side-widget 面板内，区块透明 + 细分隔线 + 胶囊选项 */
.sale-filter {
    padding: .35rem 1rem .55rem;
}

.sale-filter-block {
    background: transparent;
    border-radius: 0;
    padding: .85rem 0;
    margin-bottom: 0;
}

    .sale-filter-block + .sale-filter-block {
        border-top: 1px solid var(--jp-line);
    }

.sale-filter-title {
    font-weight: 700;
    font-size: .88rem;
    color: var(--jp-ink);
    margin-bottom: .6rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

    .sale-filter-title i {
        color: var(--jp-primary);
    }

.sale-filter-items {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.sale-filter-item {
    padding: .32rem .9rem;
    border-radius: 999px;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--jp-body);
    background: var(--jp-surface);
    border: 1px solid transparent;
    text-decoration: none;
    transition: color .15s, background .15s, border-color .15s;
}

    .sale-filter-item:hover {
        border-color: var(--jp-primary-border);
        color: var(--jp-primary);
    }

    .sale-filter-item.active {
        background: var(--jp-primary-softer);
        border-color: var(--jp-primary-border);
        color: var(--jp-primary-deep);
        font-weight: 600;
    }

    .sale-filter-item small {
        font-size: .75rem;
        color: inherit;
    }
/* 促销/清仓顶部横向筛选条（2026-08-11 参考产品类别页 .cat-filter：无背景无边框，胶囊用 .cat-chip） */
.sale-filter-top {
    padding: .2rem 0 1rem;
    margin-bottom: .5rem;
}

.sale-filter-head {
    font-size: .85rem;
    font-weight: 600;
    color: var(--jp-muted);
}
/* 标题行 + 开关按钮（2026-08-13：BS5 原生 collapse，显性提示"筛选条件"可展开；状态 localStorage 记忆） */
.sale-filter-head-row {
    margin-bottom: .15rem;
}
/* 2026-08-13：默认即 hover 样式（主色+浅底，更醒目）；真 hover 背景回默认白 */
.sale-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .75rem;
    border: 1px solid var(--jp-primary);
    background: var(--jp-primary-softer);
    color: var(--jp-primary);
    border-radius: var(--jp-radius-sm);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--jp-dur) var(--jp-ease), border-color var(--jp-dur) var(--jp-ease), background var(--jp-dur) var(--jp-ease);
}

    .sale-filter-toggle:hover {
        border-color: var(--jp-primary);
        color: var(--jp-primary);
        background: var(--jp-surface);
    }

    .sale-filter-toggle .chev {
        transition: transform var(--jp-dur) var(--jp-ease);
    }

    .sale-filter-toggle[aria-expanded="true"] .chev {
        transform: rotate(180deg);
    }
/* .sale-filter-body.collapsed 已移除（2026-08-13：改用 BS5 collapse 类） */
.sale-filter-row {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .3rem 0;
}
/* 标签顶部对齐；不 wrap：标签与胶囊容器永远同行（胶囊在容器内换行） */
.sale-filter-label {
    flex-shrink: 0;
    width: 4.5rem;
    color: var(--jp-body);
    font-weight: 600;
    font-size: .9rem;
}
/* 固定左侧宽，对齐产品类别页 .cat-filter-label */
/* 促销/清仓关键词 focus：外发光会向按钮侧扩散成缝隙 → 改内部高亮（inset），同产品类别页 .kw-group */
.sale-filter-top .input-group .form-control:focus {
    box-shadow: inset 0 0 0 .0625rem var(--jp-primary);
    border-color: var(--jp-primary);
}
/* 2026-08-16：分类页关键词 focus 同样用 inset，避免 input 与按钮之间出现缝隙 */
.cat-filter-collapse .input-group .form-control:focus {
    box-shadow: inset 0 0 0 .0625rem var(--jp-primary);
    border-color: var(--jp-primary);
}

/* ====== 多关键词标签输入（2026-08-25）：输入回车成胶囊，最多 2 个，可删除；搜索框加宽 ====== */
.kw-tags {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.kw-tags-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    width: 380px;                 /* 2026-08-25：搜索文本框长度增长 */
    min-height: 38px;
    padding: .15rem .5rem;
    border: 1px solid var(--jp-line);
    border-radius: .375rem;
    background: var(--jp-surface);
    transition: border-color .15s, box-shadow .15s;
}
.kw-tags-box:focus-within {
    border-color: var(--jp-primary);
    box-shadow: inset 0 0 0 .0625rem var(--jp-primary);
}
.kw-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: var(--jp-primary-soft);
    color: var(--jp-primary-deep);
    font-size: .85rem;
    cursor: default;
    white-space: nowrap;
}
.kw-tag i {
    cursor: pointer;
    font-style: normal;
    line-height: 1;
    font-weight: 700;
}
.kw-tag i:hover { color: var(--jp-primary); }
.kw-tags-input {
    flex: 1 1 80px;
    min-width: 60px;
    border: none;
    outline: none;
    background: transparent;
    font-size: .9rem;
    padding: .2rem 0;
    box-shadow: none !important;
}
.kw-tag-tip { font-size: .8rem; color: var(--jp-muted); }
/* 2026-08-25：关键词行「关键词」标签垂直居中于输入框（其余筛选行保持顶部对齐） */
.sale-filter-row-kw { align-items: center !important; }
.cat-filter-row-kw { align-items: center !important; }


/* ═══ 筛选条件 on/off 开关（2026-08-16：替代折叠按钮，状态记忆，选择条件不折叠/不重渲染筛选条）═══ */
.jp-switch {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    user-select: none;
}
.jp-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.jp-switch-slider {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    background: var(--jp-line);
    border-radius: 999px;
    transition: background .2s;
    flex-shrink: 0;
}
.jp-switch-slider::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.jp-switch-input:checked + .jp-switch-slider { background: var(--jp-primary); }
.jp-switch-input:checked + .jp-switch-slider::before { transform: translateX(18px); }
.jp-switch-label { font-size: .9rem; font-weight: 600; color: var(--jp-body); }

/* ═══ 筛选说明文字（2026-08-16）：筛选条下方、产品列表上方 ═══ */
.jp-filter-summary {
    font-size: .85rem;
    color: var(--jp-muted);
    background: var(--jp-primary-softer);
    border: 1px solid var(--jp-primary-border);
    border-radius: var(--jp-radius-sm);
    padding: .5rem .8rem;
    margin-bottom: 1rem;
}
.jp-filter-summary strong { color: var(--jp-primary-deep); font-weight: 600; }

/* 搜索页重新搜索框样式已移除（2026-08-15：搜索页不再显示二次搜索框，统一用顶部搜索框） */

/* ═══ 空态 / 加载态统一组件（2026-08-11）═══ */
.jp-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--jp-muted);
}

    .jp-empty i {
        font-size: 2.5rem;
        display: block;
        margin-bottom: .75rem;
        opacity: .3;
    }

    .jp-empty p {
        margin: 0;
        font-size: .95rem;
    }

.jp-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

    .jp-loading::before {
        content: "";
        width: 28px;
        height: 28px;
        border: 3px solid var(--jp-line);
        border-top-color: var(--jp-primary);
        border-radius: 50%;
        animation: jp-spin .8s linear infinite;
    }

@keyframes jp-spin {
    to {
        transform: rotate(360deg);
    }
}