/* ============================================================
   隽沐 jm.css — 设计令牌 / 公共组件 / 体验增强层 (v1.0.0)
   定位：site.css 之后的统一覆盖与增量层。
   规则：
   1) 色调与布局沿用既有设计语言（主红 #E72044），本文件不改色调不改版式骨架；
   2) 新增页面优先使用本层组件类（jm-*），不再写内联样式；
   3) 令牌集中于此：换肤/调整只改 :root。
   ============================================================ */

/* ---------- 设计令牌（扩展 site.css 既有 --jm-* 体系） ---------- */
:root {
    /* 间距（4pt 基准） */
    --jm-space-1: 4px;
    --jm-space-2: 8px;
    --jm-space-3: 12px;
    --jm-space-4: 16px;
    --jm-space-5: 24px;
    --jm-space-6: 32px;
    --jm-space-8: 48px;
    /* 圆角 / 阴影 / 动效 */
    --jm-radius: 8px;
    --jm-radius-sm: 6px;
    --jm-shadow-sm: 0 1px 3px rgba(45, 45, 47, .08);
    --jm-shadow-md: 0 4px 14px rgba(45, 45, 47, .10);
    --jm-shadow-red: 0 4px 14px rgba(231, 32, 68, .18);
    --jm-ease: cubic-bezier(.4, 0, .2, 1);
    --jm-t-fast: .15s var(--jm-ease);
    --jm-t: .25s var(--jm-ease);
    /* 层级 */
    --jm-z-nav: 100;
    --jm-z-modal: 1000;
}

/* ---------- 基础体验（不改观感，只改质感） ---------- */
html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
::selection { background: var(--jm-red); color: #fff; }

/* 键盘可达性：统一的焦点环（鼠标点击不出现） */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--jm-red); outline-offset: 2px; border-radius: 2px; }

/* 动效偏好：尊重系统"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 全局链接过渡（老站链接保持原色，仅加平滑） */
a { transition: color var(--jm-t-fast); }
img { -webkit-user-drag: none; }

/* ---------- 公共组件：页头区（jm-section-head，替代内联样式） ---------- */
.jm-section-head { text-align: center; margin: 0 0 18px; }
.jm-section-head .jm-section-head-title { font-size: 2.4rem; color: var(--jm-text); margin: 0 0 6px; line-height: 1.4; }
.jm-section-head .jm-section-head-sub { color: var(--jm-muted); margin: 0; font-size: 1.4rem; letter-spacing: .5px; }

/* ---------- 公共组件：灯箱（产品大图预览） ---------- */
.jm-lightbox { display: none; position: fixed; z-index: var(--jm-z-modal); left: 0; top: 0; width: 100%; height: 100%;
               background: rgba(0, 0, 0, .85); text-align: center; cursor: zoom-out; }
.jm-lightbox.is-open { display: block; }
.jm-lightbox-img { max-width: 92%; max-height: 92%; margin-top: 3vh; border-radius: var(--jm-radius-sm);
                   box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }

/* ---------- 公共组件：产品卡片（统一悬浮语言） ---------- */
.jm-prod-card { transition: transform var(--jm-t), box-shadow var(--jm-t); }
.jm-prod-card:hover { transform: translateY(-3px); box-shadow: var(--jm-shadow-md); }
.jm-prod-card .product_box_img img { transition: transform var(--jm-t); }
.jm-prod-card:hover .product_box_img img { transform: scale(1.04); }

/* ---------- 公共组件：面包屑（一行内紧凑，过长自动省略不打散版式） ---------- */
.breadcrumbs_box { line-height: 1.7; }
.breadcrumbs_box .jm-crumb-current { font-weight: bold; }

/* ---------- 公共组件：按钮统一焦点/active 反馈（沿用既有配色） ---------- */
.jm-btn { transition: background var(--jm-t-fast), color var(--jm-t-fast), border-color var(--jm-t-fast),
                      box-shadow var(--jm-t-fast), transform var(--jm-t-fast); }
.jm-btn:active { transform: translateY(1px); }
.jm-btn:hover:not(:disabled) { box-shadow: var(--jm-shadow-red); }
.jm-btn:focus-visible { outline: 2px solid var(--jm-navy); outline-offset: 2px; }

/* ---------- 公共组件：内容表格斑马纹与悬浮（富文本内表格增强） ---------- */
.jm-rich tbody tr:nth-child(even) td { background: #fafafc; }
.jm-rich tbody tr { transition: background var(--jm-t-fast); }
.jm-rich tbody tr:hover td { background: #f3f6fb; }

/* ---------- 公共组件：联系/信息卡图标行（contact 等页面通用） ---------- */
.jm-info-line { display: flex; align-items: flex-start; gap: 10px; color: var(--jm-text); font-size: 1.5rem; line-height: 26px; }

/* ---------- 布局工具类（新页面直接调用） ---------- */
.jm-text-muted { color: var(--jm-muted); }
.jm-mt-0 { margin-top: 0 !important; }
.jm-hidden-mobile { }
.jm-text-center { text-align: center; }

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
    .jm-hidden-mobile { display: none !important; }
    .jm-section-head .jm-section-head-title { font-size: 2rem; }
}

/* ---------- 打印（沿用 site.css 隐藏项，补充细节） ---------- */
@media print {
    .jm-lightbox, .jm-nav-toggle { display: none !important; }
    body { background: #fff; }
}