/* =============================================================================
 * YHZL 移动端样式
 * YHZL_MOBILE_NAV_CSS_V1
 *
 * 本文件包含两部分：
 *   A. 移动端导航组件（.yhzl-mnav-*）
 *   B. 全站移动端修正（Hero 高度 / 页头背景 / WhatsApp 悬浮球）
 *
 * 设计原则：
 *   1. 完全自包含，不依赖 Tailwind，即使 CDN 失效也能正常工作
 *   2. 所有类名以 .yhzl-mnav- 前缀；作用于已有元素的规则全部限定在小屏媒体查询内
 *   3. 桌面端（≥1024px）零影响
 *   4. 支持阿拉伯语 RTL
 *   5. 支持 iPhone 安全区
 *   6. 触控目标 ≥ 44×44px
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 0. 样式表加载探测标记
 *
 * site-nav.js 在注入任何元素之前，会插入一个带 .yhzl-mnav-probe 的探针元素，
 * 读取 --yhzl-mnav-ready 的值。只有读到 1 才继续注入，避免样式表 404 时
 * 出现无样式的裸元素。
 *
 * 注意：绝不能改成用 getComputedStyle(...).display 来判断 ——
 * display 会被下面的媒体查询改写（手机上是 flex、桌面是 none），
 * 那样判断在手机上必然失败，导致组件完全不注入。
 * ------------------------------------------------------------------------ */

.yhzl-mnav-probe {
    --yhzl-mnav-ready: 1;
}

/* ---------------------------------------------------------------------------
 * 1. 汉堡按钮
 * ------------------------------------------------------------------------ */

.yhzl-mnav-toggle {
    display: none; /* 桌面隐藏，由媒体查询开启 */
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    cursor: pointer;
    flex: 0 0 auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background-color 0.18s ease;
}

.yhzl-mnav-toggle:hover,
.yhzl-mnav-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.22);
    outline: none;
}

.yhzl-mnav-toggle:focus-visible {
    box-shadow: 0 0 0 2px #93c5fd;
}

/* 三条横线 */
.yhzl-mnav-bars {
    position: relative;
    display: block;
    width: 22px;
    height: 16px;
}

.yhzl-mnav-bars span {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.24s ease, opacity 0.16s ease, top 0.24s ease;
}

.yhzl-mnav-bars span:nth-child(1) { top: 0; }
.yhzl-mnav-bars span:nth-child(2) { top: 7px; }
.yhzl-mnav-bars span:nth-child(3) { top: 14px; }

/* 打开时变成 X */
.yhzl-mnav-toggle[aria-expanded="true"] .yhzl-mnav-bars span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
}

.yhzl-mnav-toggle[aria-expanded="true"] .yhzl-mnav-bars span:nth-child(2) {
    opacity: 0;
}

.yhzl-mnav-toggle[aria-expanded="true"] .yhzl-mnav-bars span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
}

/* 汉堡按钮与语言按钮之间的间距由 .yhzl-mnav-actions 的 gap 负责，
   这里不再单独加 margin。 */

/* ---------------------------------------------------------------------------
 * 2. 遮罩层
 * ------------------------------------------------------------------------ */

.yhzl-mnav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10040;
    background: rgba(8, 20, 40, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s ease, visibility 0.24s ease;
}

.yhzl-mnav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

/* ---------------------------------------------------------------------------
 * 3. 抽屉面板
 * ------------------------------------------------------------------------ */

.yhzl-mnav-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;          /* 逻辑属性，RTL 自动翻转 */
    z-index: 10050;
    display: flex;
    flex-direction: column;
    width: min(340px, 88vw);
    max-width: 100%;
    background: #ffffff;
    color: #0f172a;
    box-shadow: -12px 0 40px rgba(8, 20, 40, 0.28);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.28s;
    overscroll-behavior: contain;
}

/* RTL：从左侧滑入 */
[dir="rtl"] .yhzl-mnav-drawer {
    box-shadow: 12px 0 40px rgba(8, 20, 40, 0.28);
    transform: translateX(-100%);
}

.yhzl-mnav-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

/* 顶部标题栏 */
.yhzl-mnav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: #1e3a8a;
    color: #ffffff;
    flex: 0 0 auto;
}

.yhzl-mnav-head-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.3;
}

.yhzl-mnav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.18s ease;
}

.yhzl-mnav-close:hover,
.yhzl-mnav-close:focus-visible {
    background: rgba(255, 255, 255, 0.26);
    outline: none;
}

/* 内容区（可滚动） */
.yhzl-mnav-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0 calc(20px + env(safe-area-inset-bottom, 0px));
}

/* 分组标题 */
.yhzl-mnav-group-title {
    margin: 14px 18px 8px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

/* 导航项 */
.yhzl-mnav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.yhzl-mnav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 12px 18px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.yhzl-mnav-item:hover,
.yhzl-mnav-item:focus-visible {
    background: #eff6ff;
    color: #1e3a8a;
    outline: none;
}

.yhzl-mnav-item.is-current {
    background: #eff6ff;
    color: #1e3a8a;
    box-shadow: inset 4px 0 0 #1e3a8a;
}

[dir="rtl"] .yhzl-mnav-item.is-current {
    box-shadow: inset -4px 0 0 #1e3a8a;
}

.yhzl-mnav-item-arrow {
    flex: 0 0 auto;
    font-size: 0.85rem;
    color: #94a3b8;
}

/* 语言网格 */
.yhzl-mnav-langs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 4px 18px 10px;
}

.yhzl-mnav-lang {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.yhzl-mnav-lang:hover,
.yhzl-mnav-lang:focus-visible {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e3a8a;
    outline: none;
}

.yhzl-mnav-lang.is-current {
    background: #1e3a8a;
    border-color: #1e3a8a;
    color: #ffffff;
}

/* 底部行动按钮 */
.yhzl-mnav-actions {
    display: grid;
    gap: 10px;
    padding: 14px 18px 4px;
    margin-top: 6px;
    border-top: 1px solid #e2e8f0;
}

.yhzl-mnav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.yhzl-mnav-cta-primary {
    background: #1e3a8a;
    border: 1px solid #1e3a8a;
    color: #ffffff;
}

.yhzl-mnav-cta-primary:hover,
.yhzl-mnav-cta-primary:focus-visible {
    background: #172554;
    border-color: #172554;
    color: #ffffff;
    outline: none;
}

.yhzl-mnav-cta-whatsapp {
    background: #25d366;
    border: 1px solid #25d366;
    color: #ffffff;
}

.yhzl-mnav-cta-whatsapp:hover,
.yhzl-mnav-cta-whatsapp:focus-visible {
    background: #128c4a;
    border-color: #128c4a;
    color: #ffffff;
    outline: none;
}

/* ---------------------------------------------------------------------------
 * 4. 打开时锁定页面滚动
 * ------------------------------------------------------------------------ */

body.yhzl-mnav-locked {
    overflow: hidden;
    /* 防止 iOS 滚动穿透 */
    touch-action: none;
}

body.yhzl-mnav-locked .yhzl-mnav-body {
    touch-action: pan-y;
}

/* ---------------------------------------------------------------------------
 * 5. 媒体查询：仅移动端显示
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
    .yhzl-mnav-toggle {
        display: flex;
    }

    /* 移动端收窄导航栏元素间距，给语言按钮和汉堡按钮腾空间。
       注意：这里必须写 .nav-logo 的 height。
       页面自带（手机端）：
         #mainNav .nav-logo { transition: height 0.3s ease }
         #mainNav.nav-scrolled .nav-logo { height: 3rem }   // 48px，权重 1,2,0
       如果只把 HTML 的 h-16 改成 h-9，基础高度变 36px 之后，
       滚动时页面那条规则会把 logo 拉回 48px —— 变成「滚动后 logo 反而变大」，
       方向颠倒。所以基础高度和滚动高度必须一起锁死。
       本文件由注入工具插在 </head> 之前、页面 <style> 之后，
       同权重时后写者胜，因此下面的规则能覆盖页面自带的。 */
    #mainNav .nav-inner {
        gap: 8px;
    }

    /* logo 不参与压缩；高度锁 36px，手机端不做滚动缩放。
       （导航栏高度由 46px 的按钮决定，logo 缩放本来也不影响高度） */
    #mainNav .nav-logo,
    #mainNav.nav-scrolled .nav-logo {
        flex: 0 0 auto;
        height: 36px;
    }

    /* 允许 logo 区块收缩并裁掉溢出内容。内部间距从 gap-4(16px) 收到 8px，
       再省 8px。裁掉的是站点名一侧，右侧操作组是 .nav-inner 的兄弟节点，
       不受影响。 */
    #mainNav .nav-inner > div:first-child {
        min-width: 0;
        overflow: hidden;
        gap: 8px;
    }

    /* 只收字号，绝不写 display！
       页面里有两个站点名 span：
         <span class="nav-title ... hidden md:block">桌面用</span>
         <span class="... md:hidden">手机用</span>
       它们靠 Tailwind 的 hidden / md:hidden 控制显隐。
       本规则权重 (1,2,1) 高于 Tailwind 的 .hidden (0,1,0)，
       一旦在这里写 display，桌面那个 span 会被强制显示，
       两个站点名同时占位，把按钮挤出屏幕。
       0.95rem + tracking-wider 实测宽 163.2px；
       0.85rem 无字距是 141.0px，省 22px。 */
    #mainNav .nav-inner > div:first-child > span {
        font-size: 0.85rem;
        letter-spacing: 0;
    }
}

/* 超窄屏（≤343px）放不下「语言按钮 + 品牌文字」，只保留 logo。
 *
 * ⚠️ 这个阈值不能凭感觉定。实测数据（Arial Bold，品牌文字 0.85rem = 141.0px）：
 *     临界视口宽度 = 343.7px
 *     320px : 可用 173.5 / 需要 197.2 -> 差 23.7px  （iPhone SE 一代这类机器）
 *     344px : 可用 197.5 / 需要 197.2 -> 刚好
 *     360px : 可用 213.5 / 需要 197.2 -> 余量 16.3px（最常见的安卓宽度）
 *
 *   曾经误设成 max-width: 374px，结果 360px、370px 这些最主流的手机
 *   也被隐藏了品牌文字 —— 阈值必须压到临界值以下。
 *
 *   顺带一提：这里写 display: none 是安全的，两个 span 本来就要一起隐藏，
 *   不存在「强制显示桌面那个 span」的问题（见上方 767px 段的说明）。
 */
@media (max-width: 343px) {
    #mainNav .nav-inner > div:first-child > span {
        display: none !important;
    }
}

/* 桌面端彻底隐藏移动组件 */
@media (min-width: 768px) {
    .yhzl-mnav-toggle,
    .yhzl-mnav-backdrop,
    .yhzl-mnav-drawer {
        display: none !important;
    }
}

/* ---------------------------------------------------------------------------
 * 6. 无障碍与动效偏好
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .yhzl-mnav-backdrop,
    .yhzl-mnav-drawer,
    .yhzl-mnav-bars span,
    .yhzl-mnav-toggle,
    .yhzl-mnav-close {
        transition: none !important;
    }
}

/* 键盘焦点可见 */
.yhzl-mnav-drawer :focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* =============================================================================
 * 全站移动端修正
 *
 * 说明：本文件同时承担「移动端全站样式」的职责。之所以放在这里而不是新建
 * 文件，是为了避免再往 45 个页面注入第三条引用，减少改动面。
 * 下面所有规则都只作用于**已有元素**，且全部限定在小屏媒体查询内，
 * 桌面端不受影响。
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * F1. 首页 Hero 高度
 *
 * 原样式用的是 Tailwind 的 h-screen（height:100vh）。在手机浏览器上 100vh
 * 大于实际可视高度（地址栏占位），导致 hero 底部被截，按钮顶到屏幕最下缘。
 * 曾改用 svh（small viewport height）作为最小高度，保证按钮不被截。
 *
 * v10 起不再强撑满屏：
 *   v8 把手机端文案缩短后（标题 1 行、副标题 2 行，合计约 232px），
 *   如果仍保留 88svh / 100svh 的最小高度，文字只占中间一小块，
 *   上下各空出约 200px 背景 —— 反而比文案长的时候更不协调。
 *   现在高度完全由内容决定，靠内边距让开固定导航栏并留出呼吸空间，
 *   首屏能同时看到 Hero 与下方的数据条。
 *
 * 选择器权重 .hero-bg.h-screen = (0,2,0)，高于 Tailwind 的 .h-screen (0,1,0)。
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    .hero-bg.h-screen {
        height: auto;
        min-height: 0;
    }
}

/* ---------------------------------------------------------------------------
 * F2. 页头背景固定
 *
 * about.html 与 contact.html 的 .page-header 使用了
 * background-attachment: fixed。在 iOS Safari 与 Instagram / Facebook
 * 内置浏览器（WebView）上该属性要么不支持、要么强制每帧重绘整屏，
 * 会造成首屏渲染错位与滚动掉帧。
 *
 * 只在 1024px 以下关闭；大屏保留视差效果。
 * 用 body 前缀提高权重，避免依赖文件加载顺序。
 * ------------------------------------------------------------------------ */
@media (max-width: 1023px) {
    body .page-header {
        background-attachment: scroll;
    }
}

/* ---------------------------------------------------------------------------
 * F3. WhatsApp 悬浮球避让
 *
 * 组件自带的定位是 mobile 下 right:16px; bottom:16px。这里上移，
 * 并叠加 iPhone home 指示条的安全区（未启用 viewport-fit=cover 时 env() 为 0，
 * 不影响其它设备）。
 * body 前缀保证覆盖组件自身的规则，不依赖加载顺序。
 *
 * v8 起 bottom 由 20px 提到 76px：
 *   悬浮球是 position:fixed，页面滚动时会一直悬在右下角，挡住下方的按钮。
 *   抬到 76px 可以避开浏览器底部工具栏与页面底部的操作按钮。
 *   联系页则整个隐藏，见下方 P3-2。
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body .yhzl-wa-widget {
        right: 16px;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}

/* =============================================================================
 * P3 批次：联系页与子类目的进一步优化
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * P3-1. 联系页：手机上把表单排到联系信息前面
 *
 * 页面结构：
 *   <div class="grid md:grid-cols-5">
 *       <div class="md:col-span-2 ...">联系信息</div>   ← DOM 里排第一
 *       <div class="md:col-span-3 ...">表单</div>       ← DOM 里排第二
 *   </div>
 *
 * 桌面左右并排没问题。手机上 grid 变单列后，联系信息（地址/邮箱/电话/
 * 3 条优势/社交图标，约 1.5 屏高）会挡在表单前面，
 * 而用户来联系页的目的是提交询价，不是读公司信息。
 *
 * 用 order 把表单提到前面，联系信息作为兜底放到最后。
 * 只影响 max-width:767px，桌面顺序完全不变。
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body .grid.md\:grid-cols-5 > .md\:col-span-3 { order: 1; }
    body .grid.md\:grid-cols-5 > .md\:col-span-2 { order: 2; }
}

/* ---------------------------------------------------------------------------
 * P3-2. 联系页隐藏 WhatsApp 悬浮球
 *
 * 悬浮球固定悬在右下角，会盖住表单输入框的右侧，影响点按。
 * 联系页本身已经有醒目的绿色「WhatsApp Inquiry」大按钮，功能重复，
 * 因此在这一页直接隐藏整个悬浮球组件。
 *
 * yhzl-hide-wa-fab 由 site-nav.js 在检测到 #contactForm 时加到 body 上。
 * 用 JS 而不是 CSS :has()，是为了不依赖 :has() 的浏览器支持。
 * 只在手机端生效：桌面空间充足，保留悬浮球。
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body.yhzl-hide-wa-fab .yhzl-wa-widget {
        display: none !important;
    }
}

/* ---------------------------------------------------------------------------
 * P3-3. 分类页子类目：只显示 3 项 + 底部渐变箭头提示
 *
 * 承接 P2-2（限高纵向滚动）。P2-2 用 224px 约显示 5 项，
 * 用户反馈仍然挡住下面的产品，因此收到 150px（约 3 项，
 * 第 4 项露出一小截——这本身就是最自然的「还有更多」暗示）。
 *
 * 另外加两个视觉提示，只在列表真的溢出时才显示
 * （由 site-nav.js 判断 scrollHeight 后切换 yhzl-has-more）：
 *   ::after  底部白色渐变遮罩
 *   ::before 向下箭头（用边框绘制，不依赖字体，任何语言下都一致）
 *
 * 这些提示是语言中立的，7 种语言都不需要翻译。
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body .subcategory-list {
        max-height: 150px;
    }

    /* ⚠️ top: auto 不能省！
       页面自带（桌面端）：.subcategory-panel { position: sticky; top: 105px }
       页面自带（≤900px）：.subcategory-panel { position: static }  ← 只改了 position，
                           top:105px 仍留在层叠里，static 下不生效
       本文件把 position 改回 relative（渐变提示 ::after 需要定位上下文），
       于是那条遗留的 top:105px 立刻生效 —— 面板被相对定位向下顶 105px，
       而且不占文档流，表现为「目录面板上方凭空多出一大片空白」。

       实测吻合：3D Printing 页空白 = py-14(56) + 105 = 161px（截图量到 162px）。
       所以必须显式把 top 归零。 */
    body .subcategory-panel {
        position: relative;
        top: auto !important;
    }

    body .subcategory-panel.yhzl-has-more::after {
        content: '';
        position: absolute;
        left: 1px;
        right: 1px;
        bottom: 1px;
        height: 34px;
        border-radius: 0 0 13px 13px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.97) 62%);
        pointer-events: none;
    }

    body .subcategory-panel.yhzl-has-more::before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 9px;
        z-index: 2;
        width: 8px;
        height: 8px;
        border: solid #94a3b8;
        border-width: 0 2px 2px 0;
        transform: translateX(-50%) rotate(45deg);
        pointer-events: none;
        animation: yhzl-subcat-hint 1.6s ease-in-out infinite;
    }
}

@keyframes yhzl-subcat-hint {
    0%, 100% { transform: translateX(-50%) rotate(45deg) translate(0, 0); }
    50%      { transform: translateX(-50%) rotate(45deg) translate(0, 3px); }
}

/* 用户偏好减少动效时停掉箭头动画 */
@media (prefers-reduced-motion: reduce) {
    body .subcategory-panel.yhzl-has-more::before {
        animation: none;
    }
}

/* =============================================================================
 * P1 批次：移动端体验优化
 *
 * 下面所有规则都限定在小屏媒体查询内，桌面端零影响。
 * 用 body 前缀 + !important 是为了稳定覆盖 Tailwind CDN 运行时注入的样式
 * （CDN 生成的 <style> 可能在我们的 <link> 之后插入，同权重下会赢）。
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * P1-1. 区块留白响应式
 *
 * 这些 Tailwind 间距类按桌面设计（py-24 = 上下各 96px），手机上相邻区块
 * 之间会空掉一大片，一屏装不下多少内容。
 *
 * ⚠️ 刻意不动 mt-16 / mt-12：
 *    这两个类同时承担「给固定导航栏留偏移」的职责，例如
 *      <header class="page-header h-64 ... mt-16">
 *      <div class="... mt-16 md:mt-20">   （首页 hero 内层）
 *    压缩它们会让页头/首屏文字钻到固定导航栏底下。
 *    区块之间的大间距由下面的 py-* 与 mb-* 负责。
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body .py-24 { padding-top: 3rem !important;    padding-bottom: 3rem !important; }
    body .py-20 { padding-top: 2.5rem !important;  padding-bottom: 2.5rem !important; }
    body .py-16 { padding-top: 2.5rem !important;  padding-bottom: 2.5rem !important; }
    body .pt-16 { padding-top: 2.5rem !important; }
    body .pb-16 { padding-bottom: 2.5rem !important; }

    body .mb-16 { margin-bottom: 2rem !important; }
    body .mb-12 { margin-bottom: 1.5rem !important; }
}

/* ---------------------------------------------------------------------------
 * P1-2. 分类卡片改双列（首页 + 产品目录页）
 *
 * 这两个页面的分类网格是 grid md:grid-cols-4，手机上退化为单列全宽，
 * 8 / 17 张卡片会把页面拉得很长。手机改双列并把图片压矮。
 *
 * 选择器精确限定：
 *   .grid.md\:grid-cols-4   分类网格
 *   :not(.max-w-6xl)        排除页脚里同名的网格（页脚带 max-w-6xl）
 * 经核实，这个组合只命中 index.html 与 products.html 的分类网格。
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body .grid.md\:grid-cols-4:not(.max-w-6xl) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }

    body .grid.md\:grid-cols-4:not(.max-w-6xl) .img-box {
        height: 128px !important;
    }

    body .grid.md\:grid-cols-4:not(.max-w-6xl) > a > div:not(.img-box) {
        padding: 0.7rem 0.5rem !important;
    }

    body .grid.md\:grid-cols-4:not(.max-w-6xl) h3 {
        font-size: 0.92rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.2rem !important;
    }

    body .grid.md\:grid-cols-4:not(.max-w-6xl) p {
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
    }
}

/* ---------------------------------------------------------------------------
 * P1-3. 图片容器在小屏统一压矮
 *
 * .img-box 在各页面的高度：index / products 是 220px，category 是 200px。
 * 手机上压矮能明显减少滚动长度。分类网格内的会由 P1-2 进一步覆盖为 128px。
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body .img-box { height: 160px; }

    /* 分类页产品网格：原本 sm:grid-cols-2（≥640px 才双列），手机也改双列 */
    body #productGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }
    body #productGrid .img-box { height: 128px; }
}

/* ---------------------------------------------------------------------------
 * P1-4. 联系页询价表单移动优化
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    /* iOS 对字号小于 16px 的输入框会在聚焦时自动放大整个页面，
       导致填表过程中页面来回跳动。表单控件统一到 16px。 */
    #contactForm input[type="text"],
    #contactForm input[type="email"],
    #contactForm input[type="tel"],
    #contactForm input[type="number"],
    #contactForm textarea,
    #contactForm select {
        font-size: 16px !important;
    }

    /* 「产品 / 数量」行原本是 12 列栅格里的 5/5/2，
       手机上每格只有约 150px，型号根本填不下。改为纵向堆叠。 */
    .item-row {
        display: block !important;
    }
    .item-row > div {
        width: 100% !important;
        grid-column: auto !important;
    }
    .item-row > div + div {
        margin-top: 0.5rem;
    }
    .item-row > div.text-right {
        text-align: right;
    }

    /* 表单外框内边距（p-10 = 40px）在手机上太占宽度 */
    body .p-10 { padding: 1.5rem !important; }

    /* 提交按钮全宽，便于点按 */
    #submitBtn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------------
 * P1-5. 页头背景块高度自适应
 *
 * 问题：
 *   products.html / category.html / product.html 的页头是 h-64（256px 固定高），
 *   about.html / contact.html 是 h-80（320px）。
 *   手机上标题和副标题加起来只占一半高度，配合 items-center 居中后，
 *   文字下方会留一大片空白背景——看起来像「背景图被拉大了」。
 *
 *   这 5 个页面 × 7 种语言 = 35 个页面都是这个写法。
 *   product.html 自己已在 max-width:560px 里做了 height:auto 处理，
 *   其余 4 个页面完全没有。
 *
 * 修复：
 *   1. 手机端改为按内容自适应高度（去掉固定高度）
 *   2. 用 margin-top 让开固定导航栏，读 CSS 变量 --yhzl-nav-h
 *      原页面写的 mt-16（64px）其实小于导航栏高度，只是靠 items-center
 *      居中才没露馅；改成自适应高度后必须给足偏移。
 *   3. 上下留出 2rem 内边距，文字不贴边
 *
 * ⚠️ margin-top 不再写死数值。
 *   v9 把 logo 从 64px 缩到 36px 后，导航栏高度由 88px 变成 70px；
 *   而高度取决于哪个子元素最高（logo / 语言按钮 / 汉堡按钮），
 *   写死数值迟早会再错位一次（v8 就踩过）。
 *   现在由 site-nav.js 实测 nav.offsetHeight 写入 --yhzl-nav-h，
 *   JS 未执行时回退到 4.375rem（=70px，当前实际高度）。
 *
 * 不动 min-height：product.html 自带的 min-height 12rem / 16rem 继续生效。
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body .page-header.h-64,
    body .page-header.h-80 {
        height: auto !important;
        margin-top: var(--yhzl-nav-h, 4.375rem) !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* =============================================================================
 * P2 批次：移动端版式优化
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * P2-1. 首页 Hero 移动端版式
 *
 * 原状（手机上）：
 *   h1  text-4xl（36px）＋ 标题里的 <br> → 占 3 行
 *   p   text-xl（20px）＋ font-light ＋ text-gray-300 → 占 4 行，深色背景上很淡
 *   间距：标题下 24px、副标题下 40px
 *   按钮：py-4（52px 高）× 2，gap-6（24px）
 *   Hero 高度 100svh → 整屏被占满
 * 结果：像把桌面页缩小塞进手机，7 行文字 + 2 个大按钮铺满一屏。
 *
 * 改为：标题 28px、副标题 16px 并提亮、间距收紧、按钮 44px。
 *
 * ⚠️ 高度（v10 修订）：
 *   v8 曾把高度设成 88svh 想让下一屏露一点。但文案缩短后内容只剩约 232px，
 *   88svh（约 634px）下文字只占中间一小块，上下各空出约 200px 背景，
 *   看上去反而比文案长的时候更空旷、更不协调。
 *   现在完全按内容高度，用内边距让开固定导航栏并留出呼吸空间：
 *     padding-top    = 导航栏高度 + 1.75rem（用 CSS 变量，导航栏变化自动跟随）
 *     padding-bottom = 3.5rem
 *   手机端首屏因此能同时看到 Hero 与下方数据条。
 *
 *   内层那个 mt-16(64px) 原本是用来让开固定导航栏的，
 *   现在偏移改由 padding-top 负责，必须清零，否则会重复叠加。
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body .hero-bg.h-screen {
        min-height: 0 !important;
        height: auto !important;
        padding-top: calc(var(--yhzl-nav-h, 4.375rem) + 1.75rem) !important;
        padding-bottom: 3.5rem !important;
    }

    body .hero-bg.h-screen > div {
        margin-top: 0 !important;
    }

    body .hero-bg h1 {
        font-size: 1.75rem !important;
        line-height: 1.28 !important;
        margin-bottom: 1rem !important;
    }

    body .hero-bg p {
        font-size: 1rem !important;
        line-height: 1.62 !important;
        margin-bottom: 1.75rem !important;
        color: #dbeafe !important;
    }

    /* 两个行动按钮：44px 高既满足触控尺寸又更紧凑 */
    body .hero-bg a {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    body .hero-bg .flex.flex-col {
        gap: 0.75rem !important;
    }
}

/* ---------------------------------------------------------------------------
 * P2-2. 分类页子类目面板：限高 + 纵向滚动
 *
 * 需要解决的问题：
 *   页面自带 @media (max-width: 560px) { .subcategory-list { grid-template-columns: 1fr } }
 *   单列后，子类目多的分类会占掉大半屏：
 *     Relays 有 10 个子类目 → 10 × 46px + 面板标题 55px ≈ 515px
 *     800px 屏幕被吃掉三分之二，用户必须往下滑才能看到产品。
 *
 * ⚠️ 记录一次失败尝试，避免以后重蹈覆辙：
 *   曾经把这里改成「横向滑动胶囊」并上线，结果把分类页改崩了。
 *   原因是 .category-catalog-layout 用的是 grid-template-columns: 1fr，
 *   它等价于 minmax(auto, 1fr)，而这个 auto 最小值 = grid item 的 min-content；
 *   grid item 的 min-width 默认又是 auto。
 *   于是当 .subcategory-list 改成 display:flex / flex-wrap:nowrap 之后，
 *   它的 min-content = 所有胶囊宽度之和 ≈ 1500px，
 *   grid 轨道被撑到 1500px → 整页横向溢出。
 *   溢出后固定导航栏的 w-full 也跟着变宽，汉堡按钮被推到屏幕右侧之外。
 *   （现象：内容只占屏幕一部分、右侧一片空白、只有分类页没有汉堡按钮）
 *   结论：要在 grid/flex 里做横向滚动容器，必须给整条祖先链加 min-width: 0。
 *
 * 现在的做法（最稳妥）：
 *   保留原有的卡片外观与网格布局，只限制列表高度。
 *   面板高度约 515px → 约 275px，进页面即可看到产品。
 *   纵向滚动不产生横向溢出，风险几乎为零。
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body .subcategory-list {
        max-height: 224px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
}

/* ---------------------------------------------------------------------------
 * P2-3. 分类页产品卡片：长产品名截断
 *
 * 问题：卡片标题是 text-lg（18px），而双列卡片只有约 170px 宽。
 *       例如 "ST3PA-A ST3PA-B ST3PC-B Time Relay 10s-60min with Socket"
 *       在 18px 下要占 5 行，把卡片撑得很高、名字挤成一团。
 * 改为：字号降到 0.9rem，最多显示 3 行，超出显示省略号。
 *       型号本来就在下方单独一行显示，不会被截掉。
 * 只用 #productGrid 限定，避免影响首页分类卡片。
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body #productGrid .product-card h3 {
        display: -webkit-box !important;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.9rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0.25rem !important;
    }

    body #productGrid .product-card > div:not(.img-box) {
        padding: 0.65rem 0.5rem !important;
    }

    body #productGrid .product-card p {
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
        /* 型号也限制两行，避免个别超长型号撑高卡片 */
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* =============================================================================
 * P4 批次：导航栏语言按钮 + 浏览器语言提示
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * P4-1. 右侧操作组（语言按钮 + 汉堡按钮）
 *
 * 为什么不直接把语言按钮塞进 .nav-inner 当第三个兄弟节点：
 *   .nav-inner 是 display:flex + justify-between。
 *   两个可见子元素时是「左 logo ／ 右按钮」；
 *   变成三个就会是「左 logo ／ 语言按钮居中 ／ 右汉堡」——
 *   语言按钮会被甩到导航栏正中间。所以包一层。
 * ------------------------------------------------------------------------ */
.yhzl-mnav-tools {
    display: none;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    position: relative;
}

@media (max-width: 767px) {
    .yhzl-mnav-tools {
        display: flex;
    }
}

/* ---------------------------------------------------------------------------
 * P4-2. 语言按钮
 *
 * 电脑端也有语言切换，但那是 hidden md:flex，手机上完全看不到。
 * 用户从广告落地时如果语言不对，只能去汉堡抽屉里找，很多人不知道那里有。
 * 这里在汉堡按钮左侧放一个轻量入口。
 *
 * 图标沿用电脑端的 fas fa-globe（Font Awesome 6 已从 CDN 加载，零额外请求）。
 * 刻意不用国旗：国旗代表国家不代表语言
 * （阿拉伯语、西班牙语各有 20 多个国家，挂哪面旗都不合适）。
 *
 * 宽度约 53px —— 这个数不是随手取的：
 *   手机端导航栏可用 328px，减去汉堡 54 + 两个 gap 16 后剩 258px，
 *   还要容纳「logo 48.4 + 内部间距 8 + 品牌文字 141」= 197.4px。
 *   改动这里的尺寸前请重新核算，余量只有十几 px。
 * ------------------------------------------------------------------------ */
.yhzl-mnav-langbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 46px;
    padding: 0 6px;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background-color 0.18s ease;
}

.yhzl-mnav-langbtn:hover,
.yhzl-mnav-langbtn:focus-visible {
    background: rgba(255, 255, 255, 0.22);
    outline: none;
}

.yhzl-mnav-langbtn:focus-visible {
    box-shadow: 0 0 0 2px #93c5fd;
}

.yhzl-mnav-langbtn .fa-globe {
    font-size: 0.78rem;
}

.yhzl-mnav-langbtn-code {
    line-height: 1;
}

.yhzl-mnav-langbtn-chev {
    font-size: 0.55rem;
    opacity: 0.75;
    transition: transform 0.2s ease;
}

.yhzl-mnav-langbtn[aria-expanded="true"] .yhzl-mnav-langbtn-chev {
    transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
 * P4-3. 语言浮层
 *
 * 内容由 site-nav.js 克隆电脑端语言下拉里的链接生成，
 * 因此自动适配 7 种语言、相对／绝对路径、土耳其语特殊链接与阿拉伯语 RTL。
 * 不重复写一份语言链接，避免两边不同步。
 * ------------------------------------------------------------------------ */
.yhzl-mnav-langbtn-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 172px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px 0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.yhzl-mnav-langbtn-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* RTL 布局下按钮组在屏幕左侧，浮层要向左展开才不会跑出屏幕 */
[dir="rtl"] .yhzl-mnav-langbtn-menu {
    right: auto;
    left: 0;
}

.yhzl-mnav-langbtn-menu a {
    display: block;
    padding: 11px 16px;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.yhzl-mnav-langbtn-menu a:hover {
    background: #f1f5f9;
    color: #1e3a8a;
}

.yhzl-mnav-langbtn-menu a.is-current {
    background: #eff6ff;
    color: #1e3a8a;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * P4-4. 浏览器语言提示条
 *
 * 落地页语言与浏览器语言不一致时出现，主动告诉用户「可以换语言」。
 * 比单纯放一个按钮更直接 —— 按钮仍然需要用户自己想到去看。
 *
 * 语言一致时不生成这个元素，完全不打扰。
 * 用户点过关闭后写入 localStorage，不再重复出现。
 * 7 种语言的提示文案在 site-nav.js 里。
 * ------------------------------------------------------------------------ */
.yhzl-langbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #0f172a;
    color: #e2e8f0;
    font-size: 0.82rem;
    line-height: 1.4;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
    transform: translateY(110%);
    transition: transform 0.26s ease;
}

.yhzl-langbar.is-open {
    transform: translateY(0);
}

.yhzl-langbar-text {
    flex: 1 1 auto;
    min-width: 0;
}

.yhzl-langbar-go {
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.yhzl-langbar-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-family: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

/* 桌面端不显示语言按钮、浮层与提示条 */
@media (min-width: 768px) {
    .yhzl-mnav-tools,
    .yhzl-mnav-langbtn-menu,
    .yhzl-langbar {
        display: none !important;
    }
}

/* =============================================================================
 * P5 批次：首页数据条压缩
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * P5-1. 首页「10+ / 50+ / 3000+ / 24h」数据条高度压缩
 *
 * 用户反馈：「这一版块蓝色区域好像有点太多了」
 *
 * 实测（手机端，360px 视口）：
 *   py-12 上       48px
 *   数字 30px + 间距 4px + 标签 16px      56px
 *   gap-8 行间距                          32px
 *   第二行                                56px
 *   py-12 下       48px
 *   ────────────────────────────────────────
 *   合计                                 240px   ← 占 721px 屏幕的 33%
 *
 * 而里面只有 4 个数字 + 4 行小字。
 * 这和 Hero 是同一个毛病：容器按桌面的宽松标准写（py-12 / gap-8），
 * 手机屏幕上内容少、留白多，就成了一大块蓝。
 * 另外 bg-blue-800 是 #1e40af，比导航栏的 bg-blue-900 (#1e3a8a) 更亮，
 * 所以这块蓝特别抢眼。
 *
 * 处理：
 *   第一轮（v11）只压缩高度，不动颜色：
 *     py-12          -> 1.75rem (28px)    省 40px
 *     gap-8          -> 1rem 0.75rem      省 16px
 *     数字 text-3xl  -> 1.5rem (24px)     省 14px
 *     标签字距 widest -> 0.06em           视觉收紧
 *     合计 240px -> 约 166px（省 31%）
 *
 *   第二轮（v13）用户反馈「蓝色区域还是有点大」，再压一档：
 *     上下内边距 28px      -> 18px        省 20px
 *     行间距     16px      -> 8px         省 8px
 *     数字       24px      -> 21px        省 8px
 *     合计 166px -> 约 130px（再省 22%）
 *
 * 选择器用 section.bg-blue-800.py-12 精确定位这一个区块，
 * 避免影响页面上其它 py-12 / text-3xl 元素。
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body section.bg-blue-800.py-12 {
        padding-top: 1.125rem !important;
        padding-bottom: 1.125rem !important;
    }

    /* 行间距 16px -> 8px；列间距保持 12px，配合中间分割线 */
    body section.bg-blue-800.py-12 > div {
        gap: 0.5rem 0.75rem !important;
    }

    body section.bg-blue-800.py-12 .text-3xl {
        font-size: 1.3125rem !important;   /* 21px */
        line-height: 1.15 !important;
    }

    /* 标签：字距从 0.1em 收到 0.06em，一行更紧凑 */
    body section.bg-blue-800.py-12 .tracking-widest {
        letter-spacing: 0.06em !important;
        line-height: 1.3 !important;
    }

    /* -----------------------------------------------------------------------
     * 修正分隔线：divide-x 在 2×2 网格下会多画一条
     *
     * Tailwind 的规则是
     *   .divide-x > :not([hidden]) ~ :not([hidden]) { border-left-width: 1px }
     * 也就是只给「第 2、3、4 个」子元素加左边框。
     * 桌面端 4 列一行时，这 3 条正好是列间分隔。
     * 但手机上变成 2×2 后，第 3 个（3000+）落到第二行最左边，
     * 它的左边框变成一条贴在左边缘的多余竖线
     * （用户看到的现象：10+ 前面没有线，其余三个前面都有）。
     *
     * 正确做法：全部清零，然后只给偶数列（第 2、4 个）画线，
     * 这样两行都只有中间那一条分隔线。
     * -------------------------------------------------------------------- */
    body section.bg-blue-800.py-12 .divide-x > * {
        border-left-width: 0 !important;
    }

    body section.bg-blue-800.py-12 .divide-x > :nth-child(even) {
        border-left: 1px solid #1d4ed8 !important;   /* divide-blue-700 */
    }
}

/* =============================================================================
 * P6 批次：首页三个板块的列数与密度
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * P6-1. Popular Products：1 列 -> 2 列
 *
 * 原始写法：#popularProductsGrid 是 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4，
 * 手机上落到 grid-cols-1，卡片全宽而且图片框 200px 高，比上面的分类卡片还大。
 *
 * 板块关系上这是「喧宾夺主」：Featured Categories 是 2 列（产品入口），
 * 热门产品反而 1 列更大，视觉层级反了。统一成 2 列。
 *
 * 配套调整：
 *   图片框 200px -> 128px（与 #productGrid 一致）
 *   标题限制 3 行、型号限制 2 行，避免长名字撑高卡片
 *
 * 注意：手机端的分页按钮 (#popularPrevMobile / #popularNextMobile) 是有的，
 * 这里不动它们，2 列后每页仍显示 4 个。
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body #popularProductsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.85rem !important;
    }

    body #popularProductsGrid .popular-img-box {
        height: 128px !important;
        padding: 0.6rem !important;
    }

    body #popularProductsGrid .product-card > div:not(.popular-img-box) {
        padding: 0.65rem 0.5rem !important;
    }

    body #popularProductsGrid .product-card h3 {
        font-size: 0.9rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0.25rem !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body #popularProductsGrid .product-card p {
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ---------------------------------------------------------------------------
 * P6-2. Our Advantage：1 列纵向 -> 1 列横向（图标在左、文字在右）
 *
 * 卡片结构（3 个，类名完全一致）：
 *   <div class="bg-white p-8 rounded-xl shadow-sm ... text-center border ...">
 *       <div class="w-16 h-16 bg-blue-50 ... mx-auto mb-6 text-2xl"><i></i></div>
 *       <h3 class="text-xl font-bold mb-3">...</h3>
 *       <p class="text-gray-500 text-sm leading-relaxed">...</p>
 *   </div>
 *
 * 为什么不做成 2 列（这是本次最容易踩的坑）：
 *   卡片文字量是「标题 21 字符 + 描述 86 字符」。
 *   2 列时每列只有约 165px：标题换 3 行、描述换 6~7 行，
 *   卡片高约 388px，两行合计 776px —— 并没有比 1 列（824px）矮多少，
 *   却把文字挤成一团。对文字型卡片来说，分列省下的高度会被换行吃回去。
 *   横向布局则是用满横向空间：描述占 4 行，每张卡片降到约 158px。
 *
 * 另外居中排版只适合 1~2 行文字，多行居中会明显难读，这里一并改成左对齐。
 *
 * 布局用 CSS Grid 自动分配，不改 HTML（h3/p 没有共同父容器，用 flex 做不到）：
 *   图标  -> 第 1 列，跨 2 行
 *   标题  -> 第 2 列，第 1 行
 *   描述  -> 第 2 列，第 2 行
 *
 * 选择器说明：用卡片自身的 4 个类名定位。
 *   分类卡片是 product-card bg-white rounded-xl shadow-lg（无 p-8 / text-center）
 *   评价卡片是 bg-gray-50 p-8 rounded-xl（底色不同）
 *   所以 div.bg-white.p-8.rounded-xl.text-center 只会命中这 3 张优势卡片。
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body div.bg-white.p-8.rounded-xl.text-center {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 0.85rem;
        align-items: start;
        text-align: left !important;
        padding: 1.25rem !important;
    }

    /* 图标：左列，跨两行，靠上对齐 */
    body div.bg-white.p-8.rounded-xl.text-center > div:first-child {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: start;
        width: 3rem !important;
        height: 3rem !important;
        margin: 0 !important;
        font-size: 1.15rem !important;
    }

    body div.bg-white.p-8.rounded-xl.text-center > h3 {
        grid-column: 2;
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
        margin: 0 0 0.4rem 0 !important;
    }

    body div.bg-white.p-8.rounded-xl.text-center > p {
        grid-column: 2;
        margin: 0 !important;
        line-height: 1.6 !important;
    }

    /* 优势卡片之间的行距：gap-10(40px) -> 1rem */
    body .grid.md\:grid-cols-3.gap-10 {
        gap: 1rem !important;
    }
}

/* ---------------------------------------------------------------------------
 * P6-3. What Our Customers Say：保持 1 列，只压缩留白
 *
 * 为什么不分 2 列：
 *   评价正文约 150 字符。1 列(328px)占 5 行；2 列(165px)会变成 10 行以上。
 *   评价、推荐语属于「必须读」的长文本，手机上必须全宽。
 *   强行分列只会让人放弃阅读，省下的高度没有意义。
 *
 * 所以这里只收紧密度：
 *   p-8            -> 1.25rem
 *   头像 56px      -> 44px
 *   各段间距       -> 收紧
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body div.bg-gray-50.p-8.rounded-xl.text-center {
        padding: 1.25rem !important;
    }

    /* 头像 */
    body div.bg-gray-50.p-8.rounded-xl.text-center > div:first-child {
        width: 2.75rem !important;
        height: 2.75rem !important;
        margin-bottom: 0.7rem !important;
        font-size: 1rem !important;
    }

    /* 星级行 */
    body div.bg-gray-50.p-8.rounded-xl.text-center > div:nth-child(2) {
        margin-bottom: 0.7rem !important;
    }

    /* 评价正文 */
    body div.bg-gray-50.p-8.rounded-xl.text-center > p {
        margin-bottom: 0.9rem !important;
    }

    /* 姓名 / 职务 / 公司 区块 */
    body div.bg-gray-50.p-8.rounded-xl.text-center > div:last-child {
        padding-top: 0.9rem !important;
    }

    /* 评价卡片之间的行距：gap-8(32px) -> 1.1rem */
    body .grid.md\:grid-cols-3.gap-8 {
        gap: 1.1rem !important;
    }
}

/* =============================================================================
 * P7 批次：Global Reach, Rapid Delivery 板块
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * P7-1. 图片、段落字号与间距
 *
 * 用户反馈：「这一板块现在看起来不太协调，图片好像太大了点，文字又全是靠最左对齐的」
 *
 * 实测：
 *   图片 images/delivery.jpg.jpg = 765 × 899（竖图）
 *   HTML 里是 <img class="w-full h-full object-cover">，父级没有高度约束，
 *   所以手机上按原始比例撑开：328px 宽 -> 385px 高。
 *   一个 721px 的可视高度里，这张图占 53%；整个板块约 891px（1.24 屏），
 *   其中图片占 43%。
 *
 *   另外两处偏大：
 *     段落 text-lg（18px）-> 6 行；手机正文一般 15~16px
 *     gap-16（64px）      -> 文字与图片之间空隙过大，视觉上被割裂
 *
 * 处理：
 *   图片  aspect-ratio: 4/3 + object-fit: cover  -> 385px 降到 246px
 *         （原图是竖幅的地球+飞机+卡车+集装箱，裁成 4:3 保留画面中部，
 *           也就是地球与飞机那一带，是画面的主体）
 *   段落  18px -> 1rem（16px），6 行降到 5 行
 *   间距  64px -> 1.75rem（28px）
 *   板块总高 891px -> 约 700px
 *
 * 文字对齐刻意保持左对齐（用户确认）：
 *   段落有 5 行，居中排版只适合 1~2 行文字；
 *   5 行以上居中时每行起点都不同，眼睛每次都要重新找位置，明显更难读。
 *
 * 选择器说明：
 *   section.py-24.bg-gray-50.border-t.border-b 在本页唯一
 *   （另有 py-24.bg-gray-50.border-t 和 py-24.bg-gray-50，都没有 border-b）
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body section.py-24.bg-gray-50.border-t.border-b > div {
        gap: 1.75rem !important;
    }

    /* 图片：压到 4:3 并裁切，避免竖图铺满后高达 385px */
    body section.py-24.bg-gray-50.border-t.border-b img {
        aspect-ratio: 4 / 3 !important;
        height: auto !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    /* 段落：18px -> 16px */
    body section.py-24.bg-gray-50.border-t.border-b > div > div:first-child p {
        font-size: 1rem !important;
        line-height: 1.65 !important;
    }

    /* 标题：30px -> 26px，两行更收敛 */
    body section.py-24.bg-gray-50.border-t.border-b > div > div:first-child h2 {
        font-size: 1.625rem !important;
        line-height: 1.25 !important;
        margin-bottom: 1rem !important;
    }
}

/* =============================================================================
 * P8 批次：About 段落排版 + 品牌 logo
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * P8-1. About 段落（Your Premier Supply Chain Partner）：左对齐 + 缩字号
 *
 * 原文 371 字符（俄语 427 最长 / 中文 102 最短），
 * 手机 328px 宽、18px、text-center 下约 11 行。
 * 「文字量大 + 居中」是最难读的组合：每行起点都不同，眼睛每次都要重新定位。
 *
 * 处理：
 *   左对齐        多行文字的最优选择
 *   18px -> 16px  手机正文标准字号
 *
 * 文字本身已在 HTML 层拆成「手机短文案 / 桌面原文」（各语言 156~198 字符），
 * 见 patch-page-content.php 的 pc_patch_premier()。
 * 这里只作用于 <p>，不动 h2 —— 标题两行居中仍然好看。
 *
 * 选择器 section.py-24.bg-blue-900 在本页唯一，7 种语言各 1 个。
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body section.py-24.bg-blue-900 > div > p {
        text-align: left !important;
        font-size: 1rem !important;
        line-height: 1.65 !important;
    }
}

/* ---------------------------------------------------------------------------
 * P8-2. 品牌 logo
 *
 * 图片本身已在包内换成透明 PNG 并裁切（原图是 JPEG + 烧进像素的棋盘格底，
 * 以及一个深蓝实底的 adi.png），HTML 里的高度类也统一成了 h-7。
 * 这里只补两件事：
 *
 *   1. 限制最大宽度 72px
 *      裁切后等高等于「等视觉高度」，但各标宽高比差异很大：
 *      TI 是 1.01（接近方形），NXP 是 2.80（很宽）。
 *      等高时 NXP 会到 78px 宽而 TI 只有 28px，宽标会抢视觉重心。
 *      加一个上限让这一排更均衡。
 *
 *   2. 收紧行距
 *      原 gap-10（40px）让 5 个标占掉过多竖向空间；改 1.5rem 后
 *      三行合计约省 80px。
 *
 * 选择器 section.py-16.bg-gray-50.border-b 在本页唯一。
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body section.py-16.bg-gray-50.border-b img {
        max-width: 4.5rem !important;   /* 72px */
    }

    body section.py-16.bg-gray-50.border-b .flex.flex-wrap {
        gap: 1.5rem !important;
    }
}

/* =============================================================================
 * P9 批次：产品长描述可滚动
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * P9-1. .full-description-card：超长描述改为框内纵向滚动
 *
 * 用户反馈：「描述看起来像一大堆字堆在一起，看起来有点疲劳」
 *          并建议「像处理类目一样，做成可以往下滑动的那样」
 *
 * 实测：这类描述约 750 字符，16px 字号、卡片内宽约 264px，
 *       每行约 33 字 → 约 23 行，行高 1.625 → 纯文字高约 600px（约 0.83 屏）。
 *
 * 注意：描述本身是**有结构**的 —— 渲染函数 formatLongDescription() 已经
 *       按空行拆段、把 Features/Applications 转成 <h4>、把 - / • / 1. 转成 <ul>。
 *       所以问题不是格式，而是信息量本身。
 *
 * 处理：
 *   max-height: 16rem（256px，约 10 行）+ overflow-y: auto
 *   padding 略收（1.5rem -> 1.15rem），每行多容纳约 2 个字符
 *
 * 关于「滚动陷阱」（手指在框内滑动时只滚框、不滚页面）：
 *   这里用 overscroll-behavior: auto（默认值，允许滚动链）——
 *   框内滚到底之后继续滑，页面会接着滚，不会卡住。
 *   ⚠️ 与子类目面板相反：那里用的是 contain（防止误触带动页面），
 *      因为子类目只有几项、不需要长距离滚动；描述是长内容，必须允许链式滚动。
 *
 * 底部提示用「纯 CSS 滚动阴影」实现（见下方 background 的多层写法）：
 *   background-attachment: local 的渐变跟着内容走 —— 滚到底时它正好盖住阴影，
 *   所以不会一直压着最后一行；background-attachment: scroll 的阴影固定不动，
 *   始终贴在可视区底部。这样「有更多内容」和「已到底」两种状态都能正确表达，
 *   不需要 JS 参与。
 *
 * 选择器用 .full-description-card（product.html 里就是这个类名，
 * 7 种语言一致）。桌面端不受影响（规则都在 max-width 内）。
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body .full-description-card {
        max-height: 16rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: auto;

        padding: 1.15rem 1.1rem !important;

        /* 多层背景：
           第 1 层（local，跟随内容）—— 滚到底时盖住底部阴影
           第 2 层（scroll，固定）  —— 底部滚动阴影
           第 3 层                  —— 卡片本身的底色 */
        background:
            linear-gradient(#f9fafb 35%, rgba(249, 250, 251, 0)) bottom / 100% 44px no-repeat local,
            radial-gradient(farthest-side at 50% 100%, rgba(15, 23, 42, 0.10), rgba(15, 23, 42, 0)) bottom / 100% 14px no-repeat scroll,
            #f9fafb;
    }

    /* 段落间距略加大，给眼睛更多落脚点 */
    body .full-description-card p {
        margin-bottom: 1.15rem !important;
    }

    /* 键盘可达性：site-nav.js 检测到内容溢出时会加上 tabindex/role，
       这里给一个可见的聚焦轮廓（仅键盘操作时出现） */
    body .full-description-card:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }
}

/* =============================================================================
 * P10 批次：分类页连续流
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * P10-1. Featured 之后按子类目分节
 *
 * 背景：分类页原本只显示「Featured Products」（= 没有 subcat 字段的老产品），
 *       其余产品必须点侧栏才可见。实测可见率：
 *         optoelectronics 2/37   relays 9/59   drone_components 17/134   sensors 37/146
 *
 * site-nav.js 的 initCategoryFeed() 会把「有 subcat」的产品按子类目分组，
 * 接在 #productGrid 后面，并用 IntersectionObserver 做到「滑到才渲染」。
 *
 * 这里只负责样式。所有规则都在 max-width 内 —— 连续流本身也只在手机端启用
 * （桌面端侧栏筛选是原本的设计，不动）。
 *
 * 卡片结构沿用页面 v270ProductCard（.product-card > .img-box + .p-4 > h3 + p），
 * 所以卡片的字号、行数限制与主网格保持同一套写法。
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    body .yhzl-cat-feed {
        margin-top: 2.25rem;
    }

    /* 分节之间用一条浅分隔线隔开，让「换了一个子类目」看得出来 */
    body .yhzl-cat-section + .yhzl-cat-section {
        margin-top: 2rem;
        padding-top: 1.75rem;
        border-top: 1px solid #e5e7eb;
    }

    /* 分节标题条
       用户反馈：「每一节的产品标题……单文字的话看起来好像不是太明显？
                  是不是可以给它加个框框？」

       配色与**分类页自己的侧栏选中态**完全一致（category.html 里的
       .subcategory-link.active），这样「浅蓝底 + 深蓝字 = 你正在看的位置」
       在两处表达同一个意思：
         #eff6ff  选中态背景
         #1e3a8a  选中态文字 / 左侧强调条（同时也是站点 theme-color）
         #1e40af  选中态徽章文字色，用于右侧数量

       （更正记录：初版我用了 #eff5ff / #183f86 —— 那两个色来自半导体页
        专用的 semiconductors-ic-nav.css，不是分类页的色板，
         而且和分类页的 #eff6ff / #1e3a8a 并不是同一个值。已改回分类页的色。）

       顺带解决一个视觉错觉：卡片有 shadow-lg，阴影向四周外扩约 7 CSS px，
       所以卡片"看起来"比实际边框更宽 —— 实测标题字形在 x=61、
       卡片实边框在 x=57~62（其实是同一个位置），但阴影一直抹到 x=39，
       视觉上就差了 22 物理像素。加了框之后框的边缘与卡片实边框对齐，
       标题有了明确的视觉基准，错觉自然消失。

       框有 0.9rem 内边距，所以框内文字比卡片边缘再内缩 14px ——
       这是加框的必然结果：视觉基准从「文字 vs 卡片」变成「框 vs 卡片」。 */
    body .yhzl-cat-section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.9rem;

        padding: 0.68rem 0.9rem;
        background: #eff6ff;
        border-left: 4px solid #1e3a8a;
        border-radius: 0.55rem;
    }

    body .yhzl-cat-section-title {
        margin: 0;
        font-size: 1.15rem;
        line-height: 1.3;
        font-weight: 700;
        color: #1e3a8a;
    }

    /* 与侧栏选中态徽章同色（#1e40af），浅蓝底上比纯灰更协调 */
    body .yhzl-cat-section-count {
        flex: none;
        font-size: 0.78rem;
        color: #1e40af;
        white-space: nowrap;
    }

    /* 与主网格一致：两列 */
    body .yhzl-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }

    body .yhzl-cat-grid .img-box {
        height: 128px !important;
    }

    body .yhzl-cat-grid .product-card h3 {
        display: -webkit-box !important;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.9rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0.25rem !important;
    }

    body .yhzl-cat-grid .product-card p {
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* =============================================================================
 * P11 批次：Blogs（resources）页抬头
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * P11-1. Blogs 页抬头：补背景图 + 改成真正的垂直居中
 *
 * 用户反馈：
 *   「抬头那里还没有放背景图，而且文案位置好像也有点问题，有点太靠下了」
 *
 * 实测（用户截图 1896x798）：
 *     抬头区间  y = 116 … 565     高 449px，中心 340
 *     文字块中心 y = 414          → 在抬头 66% 处
 *     上方留白 232px  vs  下方留白 85px    → 上面多 147px
 *
 * 根因：resources.html 是全站唯一用「纯色 + pt-28/md:pt-32」的抬头页，
 *       它不是垂直居中，位置由内边距决定：
 *           上 pt-32(128px，为让开固定导航栏) + 内层 py-12(48px) = 176px
 *           下                                   内层 py-12(48px) =  48px
 *       其余页面都是 h-64 / h-80 + flex items-center（真居中）。
 *
 * 处理：换成与其他页面相同的结构（见 patch-page-content.php 的
 *       pc_patch_resources_header），背景图由这个新类 .resources-header 承接。
 *
 * ⚠️ 这条改动**手机和桌面都会生效** —— 用户报告的就是桌面端的问题。
 *
 * 背景图分两档：
 *     手机（<768px）  product-header-1000.jpg   106 KB   ← 为手机新建的版本
 *     桌面（≥768px）  product header.jpg        288 KB   ← 原图，一个字没改
 *   实测手机抬头全宽 360 CSS px、3 倍屏需要 1080px，1000px 这档基本够用。
 *   这样 Blogs 页在手机上只多下 106 KB，而不是 288 KB。
 *
 * 为什么不会「卡住」：
 *   background-color: #173f6d 就是原来那个纯色，作为图的兜底。
 *   CSS 背景不阻塞渲染 —— 文字先出来，图加载好再平滑出现，
 *   既不白屏也不会布局跳动。
 *
 * 路径用绝对地址且空格写成 %20：这段 CSS 在 /assets/mobile/ 下，
 * 用相对路径会解析成 /assets/mobile/images/... 而 404。
 * ------------------------------------------------------------------------ */
body .resources-header {
    background-color: #173f6d;
    background-image:
        linear-gradient(rgba(10, 30, 50, 0.78), rgba(10, 30, 50, 0.78)),
        url('/images/external%20resources/product-header-1000.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (min-width: 768px) {
    body .resources-header {
        background-image:
            linear-gradient(rgba(10, 30, 50, 0.78), rgba(10, 30, 50, 0.78)),
            url('/images/external%20resources/product%20header.jpg');
        background-attachment: fixed;
    }
}
/* =============================================================================
 * P12 批次：桌面端抬头高度改成视口自适应
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * P12-1. 抬头（page-header）高度不再固定，跟着窗口高度走
 *
 * 用户反馈：「你觉得背景栏的大小会大了点吗？」
 *
 * 实测（4 张截图，按导航 72px 反推缩放比例）：
 *     截图            导航     抬头      视口高     抬头占视口
 *     Blogs  50%      72px    314px     ~985px       32%  ✅
 *     Blogs 100%      72px    319px     ~497px       64%  ❌
 *     About 100%      72px    320px     ~490px       65%  ❌
 *     About  50%      72px    332px    ~1032px       32%  ✅
 *
 * 抬头本身是**固定 320px（h-80）不随窗口变化**，所以：
 *     窗口高 1030px  ->  占 32%   观感正常
 *     窗口高  490px  ->  占 65%   偏大（320 抬头 + 72 导航 = 392px，只剩 98px 给正文）
 *   在正常的 1080p 最大化窗口（视口约 950px）里是 34%，本来是合适的。
 *   用户截图的浏览器窗口很矮，才会显得大。
 *
 * 处理：高度取「设计值」与「视口百分比」里小的那个 ——
 *     大窗口保持原设计值不变，小窗口自动收窄，短窗口也能露出正文。
 *
 *     h-80（about / contact / Blogs）  min(20rem, 34vh)   320px / 167px@490vh
 *     h-64（products / category / product）min(16rem, 28vh) 256px / 137px@490vh
 *
 * 只作用于 min-width:768px：手机端这两个类已经被 P1-5 改成 height:auto，
 * 两者在不同媒体查询里，不冲突。
 * ------------------------------------------------------------------------ */
@media (min-width: 768px) {
    /* ⚠️⚠️ 这里有两个坑，都踩过，注释留在这里：
     *
     * 坑 1（v24 修过）：Blogs（resources.html）的抬头是 `h-64 md:h-80`，
     *   **同时带两个类**。如果两条规则写成 .h-80 与 .h-64，权重完全相同，
     *   就变成「谁写在后面谁赢」，Blogs 会错误地拿到 h-64 的高度
     *   （实测 133px，应该 163px）。所以两条都加 :not() 排除对方。
     *
     * 坑 2（v26 修）：v23 把高度写成了**固定** height。
     *   但页面自己的 CSS 原本是 `height: auto !important; min-height: 16rem`
     *   —— 也就是「自适应 + 最小高度」。改成固定高度之后，
     *   产品名很长时（俄语最长 142 字符，会占 2 行）抬头**撑不高**，
     *   内容会直接溢出到下方的白色区域。
     *   现在改回 min-height，并且产品页单独用一个更矮的最小高度。
     */

    /* h-64 之「目录页 products.html / 分类页 category.html」
       高度数值不变，只是把 v23 的固定高度改回自适应。 */
    body .page-header.h-64:not(.h-80):not(.yhzl-product-header) {
        height: auto !important;
        min-height: min(16rem, 28vh) !important;
    }

    /* h-64 之「产品页 product.html」
       内容只有 h1（产品名）+ 型号一行，单行只需约 97px，
       所以最小高度调矮；名字长时靠 height:auto 自己撑高。 */
    body .page-header.h-64.yhzl-product-header {
        height: auto !important;
        min-height: min(11rem, 22vh) !important;
    }

    /* h-80：about / contact / Blogs */
    body .page-header.h-80 {
        height: auto !important;
        min-height: min(20rem, 34vh) !important;
    }
}

/* ===== YHZL_MOBILE_FIX_V1_APPLIED ===== */
/* =============================================================================
   YHZL_MOBILE_FIX_V1 —— 全站移动端修正 V1
   （这一行是标记，install.sh 会检查它是否存在，不要删）

   作用：追加到 site-nav.css 末尾。
   安装时间：2026-10-10
   包名：yhzl-mobile-fix-01

   这个文件是【追加】的，不覆盖原来的 site-nav.css。
   每一条规则都写明了解决什么问题，方便以后维护。
   ============================================================================= */

/* -----------------------------------------------------------------------------
   FIX-1  【首页地球图标】
   问题：首页 /yhzl-xinyouhua/ 在 ≤400px 时地球图标被隐藏，与其他页面的
         "🌐 EN" 样式不一致（用户反馈：语言切换那里没有地区标识了）。
   原因：v3 时为了给汉堡按钮腾空间，加了 .lang-globe { display: none }。
   做法：把地球上移显示，改为压缩其他元素腾空间 —— 品牌文字放弃省略号截断、
         用整词换行前的自然收窄，并进一步收紧按钮内边距。
   ----------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .header-right { gap: 5px; }
    .brand-text { overflow: visible; text-overflow: clip; }
    .lang-btn { padding: 8px 9px; }
    .lang-btn .ico { width: 16px; height: 16px; }
    .lang-globe { display: block; }
    .nav-toggle { width: 40px; height: 40px; }
    .nav-toggle-bar { width: 20px; }
}

/* -----------------------------------------------------------------------------
   FIX-2  【横向溢出兜底】
   问题：部分页面（如 products.html）在手机上内容比屏幕宽，右侧被裁掉
         （用户反馈：产品页面右边也有点问题）。
   做法：把页面宽度钳制到视口，并禁止横向滚动。
         这是【防御性】规则 —— 即使某个元素意外撑宽，也不会让整页能横向拖动。
   ----------------------------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }

/* 关键容器不允许超出视口 */
#mainNav, #mainNav .nav-inner, #mainNav .max-w-7xl, .page-header,
main, .container, #yhzlCatalogSearch {
    max-width: 100% !important;
    box-sizing: border-box;
}

/* 长型号/长英文单词不撑宽容器 */
#yhzlCatalogSearch input[type="search"],
.p-card-name, .p-card-pn, .cat-card-body {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* -----------------------------------------------------------------------------
   FIX-3  【首页头部与其他页面统一】
   问题：首页 logo / 公司名字号与其他页面不一致（用户反馈）。
   说明：首页是自包含页面（用 assets/base.css），其他页面用旧的 Tailwind 导航
         + site-nav.css。完全统一需要重写首页头部，风险大。
         这里只把【字号和 logo 高度】对齐到其他页面的观感，不做结构改动。
   ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* 其他页面（site-nav.css）里：logo 高 36px、公司名 0.85rem */
    .brand img { height: 36px !important; width: auto !important; }
    .brand-text { font-size: 0.85rem !important; letter-spacing: 0 !important; }
}