/* =====================================================================
   Trade —— 外贸/进出口行业主题
   全部样式 scoped 在 .trade-theme 下，不影响其它主题。
   识别度来自：卡片质感 + 区块标题 + 询盘琥珀强调 + 国际化排版。
   （不新增 Tailwind class，无需重编 tailwind.css）
   ===================================================================== */

.trade-theme {
    --trade-accent: #F59E0B;          /* 询盘/CTA 琥珀强调色 */
    --trade-ink: #0f172a;
    --trade-line: #e8edf3;
    background: #ffffff;
    font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---------- 导航：国际化字距 + 悬停下划线 ---------- */
.trade-theme header nav a { letter-spacing: .01em; }
.trade-theme header nav a:hover { color: var(--color-primary); }

/* ---------- 卡片（产品/案例/文章）：描边 + 圆角 + 上浮 ---------- */
.trade-theme a.group.rounded-lg,
.trade-theme a.group.rounded-xl {
    border: 1px solid var(--trade-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.trade-theme a.group.rounded-lg:hover,
.trade-theme a.group.rounded-xl:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px -16px rgba(14, 165, 164, .28);
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}

/* ---------- 区块标题：居中大标题 + 顶部小色条（外贸站常见） ---------- */
.trade-theme section h2:not([class*="text-left"]) {
    letter-spacing: -.01em;
}
.trade-theme section .text-center > h2::after,
.trade-theme section .text-center h2.section-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin: 16px auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--trade-accent));
}

/* ---------- 询盘 / 联系类按钮：琥珀强调 ---------- */
.trade-theme a[href*="contact"].bg-primary,
.trade-theme a[href*="inquiry"].bg-primary,
.trade-theme a.btn-inquiry {
    background: var(--trade-accent) !important;
    box-shadow: 0 8px 20px -8px rgba(245, 158, 11, .5);
}
.trade-theme a[href*="contact"].bg-primary:hover,
.trade-theme a.btn-inquiry:hover {
    filter: brightness(1.05);
}

/* ---------- 顶部信息条：细描边分隔，更克制 ---------- */
.trade-theme > div:first-of-type { border-bottom: 1px solid var(--trade-line); }

/* ---------- Banner/Hero 文案：更利落 ---------- */
.trade-theme .banner-swiper h1,
.trade-theme section h1 { letter-spacing: -.02em; }

/* ---------- 产品价格/标签点缀 ---------- */
.trade-theme .text-primary { color: var(--color-primary); }

/* ---------- 页脚：深色沉稳 ---------- */
.trade-theme footer { background: #0b1220; }

/* ---------- 响应式微调：手机端卡片上浮减弱 ---------- */
@media (max-width: 640px) {
    .trade-theme a.group.rounded-lg:hover,
    .trade-theme a.group.rounded-xl:hover { transform: translateY(-3px); }
}

/* ---------- 全站搜索弹层 / 自动补全 ---------- */
.trade-theme #ykSearchOverlay {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    padding-top: 5rem; /* 替代 Tailwind pt-20（该类在本主题不生效） */
}
@media (min-width: 640px) {
    .trade-theme #ykSearchOverlay { padding-top: 7rem; } /* 替代 sm:pt-28 */
}
.trade-theme #ykSearchPanel {
    scrollbar-width: thin;
}
.yk-hot-tag {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid #e8edf3;
    border-radius: 999px;
    font-size: 13px;
    color: #475569;
    background: #f8fafc;
    transition: all .2s ease;
    cursor: pointer;
}
.yk-hot-tag:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: #f0fdfa;
}
.yk-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    font-size: 14px;
    transition: color .15s ease;
}
.yk-suggest-item:last-child { border-bottom: none; }
.yk-suggest-item:hover { color: var(--color-primary); }
.yk-sku {
    margin-left: 8px;
    font-size: 12px;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}
.yk-hl {
    background: #fef08a;
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}
/* 移动端：弹层更靠上、输入框更大 */
@media (max-width: 640px) {
    .trade-theme #ykSearchOverlay { padding-top: 12px; }
}

/* ---------- RTL（阿拉伯语等）：品牌 Logo 始终固定视觉左侧，与其他语言版本一致 ----------
   html[dir="rtl"] 时 flex 主轴从右向左，DOM 首个元素（Logo）会落到视觉右端；
   通过 order 把它排到 flex 末端（= 视觉最左），导航/搜索仍按 RTL 习惯从右往左排列。 */
html[dir="rtl"] .trade-theme .yk-header-logo {
    order: 999;
}

/* ---------- LOGO 防挤压变形：任意拥挤状态下保持原始比例，不被 flex 压缩 ----------
   原 header.php 中 LOGO 为 <img class="h-10">（固定高度），父容器 flex 空间不足时
   宽度被压缩导致图片变形。以下规则（LTR/RTL 通用，仅作用于 header LOGO，不影响导航等其他功能）：
   - .yk-header-logo 作为 flex 子项 flex-shrink:0，不被压缩、不挤占导航空间；
   - img 用 max-width/max-height + object-fit:contain 保持固有宽高比，任何屏幕尺寸不拉伸/压缩。 */
.trade-theme .yk-header-logo {
    flex-shrink: 0;
    min-width: 0;
    max-width: 100%;
}
.trade-theme .yk-header-logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 2.5rem;      /* 与原 h-10（40px）视觉高度一致 */
    object-fit: contain;
    flex-shrink: 0;
}

/* ---------- RTL 精细适配：物理间距类在从右向左时镜像，仅作用于阿拉伯语等 RTL 语言，不影响 LTR ---------- */
/* 客户评价卡片：头像在右、文字在左，间距应落在头像左侧（mr-4 → ml-4） */
html[dir="rtl"] .trade-theme .u-card .flex.items-center > *:first-child {
    margin-right: 0;
    margin-left: 1rem;
}
/* 文章卡片标题行【置顶/推荐】标签：间距方向镜像（mr-2 → ml-2） */
html[dir="rtl"] .trade-theme a.group h3 .mr-2 {
    margin-right: 0;
    margin-left: 0.5rem;
}
/* 文章卡片文字区：RTL 下封面在右、文字在左，右内边距改到左侧保持视觉均衡（pr-4 → pl-4） */
html[dir="rtl"] .trade-theme a.group .flex-1.pr-4 {
    padding-right: 0;
    padding-left: 1rem;
}
/* L-23 客户评价卡片引号装饰图标：LTR 右上角 → RTL 左上角（right-4 → left-4） */
html[dir="rtl"] .trade-theme .u-card .absolute.top-4.right-4 {
    right: auto;
    left: 1rem;
}
/* L-23 产品/文章卡片左上角【NEW/HOT/热门/新品】角标：RTL 下镜像到右上角（left-2 → right-2） */
html[dir="rtl"] .trade-theme span.absolute.top-2.left-2 {
    left: auto;
    right: 0.5rem;
}

/* ---------- 页脚动态栏目：PC 固定容器居中 + 移动端固定 4 栏 ----------
   需求（2026-09-04）：
   1) PC / 平板（≥768px）：页脚栏目区固定宽度容器、栏目平均分布、整体居中，
      容器两侧留固定比例空间（见后台示例图：栏目区窄于页面、居中显示）。
   2) 移动端（<768px）：固定 4 栏（grid 4 列，栏数不足时按 data-cols 实际栏数），
      整体居中显示。
   栏数经容器 data-cols / --footer-cols 传入（footer.php 计算）；
   col_span>1 的栏用 grid-column: span 放大（footer.php 已输出内联样式）。 */
.footer-columns-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    width: 100%;
}
.footer-columns-grid .footer-col-item {
    flex: 0 1 auto;            /* 宽度按内容自适应 */
    min-width: 0;
    max-width: 320px;
    text-align: start;         /* LTR 左对齐 / RTL 右对齐，随 dir 自动镜像 */
}
/* PC / 平板 ≥768px：固定宽度容器，平均居中分布，两侧留固定比例空间 */
@media (min-width: 768px) {
    .footer-columns-grid {
        max-width: 1000px;      /* 固定分辨率容器：整体居中，两边留白（示例图比例） */
        margin: 0 auto;
        justify-content: space-evenly;  /* 栏目平均分布、整体居中 */
    }
    .footer-columns-grid .footer-col-item {
        max-width: 320px;
    }
}
/* 移动端 <768px：2×2 卡片式分区（方案C）——全部栏目可见，
   卡片浅底圆角、标题与内容居中；「关注我们」（最后一项）占满整行居中；
   仅作用于移动端，PC/平板（≥768px）不受影响 */
@media (max-width: 767px) {
    .footer-columns-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        justify-items: stretch;
    }
    .footer-columns-grid .footer-col-item {
        width: 100%;
        max-width: 100%;
        text-align: center;
        background: rgba(255, 255, 255, .05);
        border-radius: .75rem;
        padding: 1rem .75rem;
        box-sizing: border-box;
    }
    .footer-columns-grid .footer-col-item h3 {
        margin-bottom: .65rem;
    }
    /* 栏数不足 4 时：最后一项占满整行居中（1 / 3 栏适用） */
    .footer-columns-grid[data-cols="1"] .footer-col-item,
    .footer-columns-grid[data-cols="3"] .footer-col-item:last-child,
    .footer-columns-grid[data-cols="5"] .footer-col-item:last-child {
        grid-column: 1 / -1;
    }
}

/* =====================================================================
   方案B：手机端（≤640px）内容整体缩小 —— 只作用于手机端，不影响 PC/平板
   正文字号 18→16px、行高 26→24px、区块标题 30→25px、
   内容区左右留白 16→20px、段落间距 24→16px、卡片内边距略收紧
   ===================================================================== */
@media (max-width: 640px) {
    /* 1) 正文字号 18px → 16px（首页介绍 text-lg / 富文本 prose-lg） */
    .trade-theme p.text-lg.leading-relaxed,
    .trade-theme .content-body p.text-lg {
        font-size: 16px;
    }
    .trade-theme .prose.prose-lg p,
    .trade-theme .content-body p {
        font-size: 16px;
        line-height: 1.7;
    }

    /* 2) 正文行高 26px → 24px */
    .trade-theme p.text-lg.leading-relaxed {
        line-height: 24px;
    }

    /* 3) 内容区块标题 30px → 25px（blk-title；banner hero 大标题保留不变） */
    .trade-theme section .blk-title,
    .trade-theme .blk-title {
        font-size: 25px;
    }
    .trade-theme .prose.prose-lg h2 {
        font-size: 25px;
    }
    .trade-theme .prose.prose-lg h3 {
        font-size: 21px;
    }

    /* 4) 内容区左右留白 16px → 20px（仅页面内容区，header/footer 保持不动） */
    .trade-theme .container.mx-auto.px-4:not(header *):not(footer *) {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* 5) 正文段落间距 24px → 16px（首页介绍段落 mb-6 mt-6） */
    .trade-theme p.text-lg.leading-relaxed.mb-6 {
        margin-top: 16px;
        margin-bottom: 16px;
    }

    /* 6) 卡片内边距略收紧（产品/案例/文章等链接型卡片 p-4→14px、p-6→20px） */
    .trade-theme a.group .p-4 {
        padding: 14px;
    }
    .trade-theme a.group .p-6 {
        padding: 20px;
    }
}

/* =====================================================================
   文章详情页：封面图左侧浮动环绕式（方案C）
   封面图浮动在正文左侧，文字环绕图片
   ===================================================================== */
.article-float-cover-wrap {
    position: relative;
}

.article-cover-float-left {
    float: left;
    width: 45%;
    max-width: 420px;
    margin: 0 24px 16px 0;
    border-radius: 8px;
    overflow: hidden;
}

.article-cover-float-left img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.article-body-with-float {
    overflow: visible;
}

.article-body-with-float p {
    overflow: visible;
}

.clear-both {
    clear: both;
}

/* 平板端：封面图宽度调整 */
@media (max-width: 1024px) {
    .article-cover-float-left {
        width: 48%;
        margin: 0 20px 14px 0;
    }
}

/* 手机端：封面图改为全宽显示，不浮动 */
@media (max-width: 640px) {
    .article-cover-float-left {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px 0;
    }
}

/* =====================================================================
   文章正文图片对齐样式
   支持：左浮动、右浮动、全宽横幅
   使用方式：在 TinyMCE 编辑器中给图片添加 class
   - img-float-left：左浮动
   - img-float-right：右浮动
   - img-banner：全宽横幅
   ===================================================================== */

/* 左浮动图片（使用max-width而非固定width，允许用户自定义图片大小） */
.prose .img-float-left,
.article-body-with-float .img-float-left {
    float: left;
    max-width: 45%;
    margin: 8px 20px 12px 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 右浮动图片（使用max-width而非固定width，允许用户自定义图片大小） */
.prose .img-float-right,
.article-body-with-float .img-float-right {
    float: right;
    max-width: 45%;
    margin: 8px 0 12px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 全宽横幅图片 */
.prose .img-banner,
.article-body-with-float .img-banner {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 浮动图片后的清除浮动 */
.prose .img-float-left + p,
.prose .img-float-right + p,
.article-body-with-float .img-float-left + p,
.article-body-with-float .img-float-right + p {
    overflow: visible;
}

/* 平板端：浮动图片宽度调整 */
@media (max-width: 1024px) {
    .prose .img-float-left,
    .prose .img-float-right,
    .article-body-with-float .img-float-left,
    .article-body-with-float .img-float-right {
        max-width: 48%;
        margin: 8px 16px 10px 0;
    }
    .prose .img-float-right,
    .article-body-with-float .img-float-right {
        margin: 8px 0 10px 16px;
    }
}

/* 手机端：浮动图片改为全宽显示 */
@media (max-width: 640px) {
    .prose .img-float-left,
    .prose .img-float-right,
    .article-body-with-float .img-float-left,
    .article-body-with-float .img-float-right {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 16px 0;
    }
}

/* =====================================================================
   文本元素增强样式
   支持：圆角边框、阴影、提示框、首字下沉、引用块、高亮标记
   ===================================================================== */

/* 圆角边框图片 */
.prose .img-bordered,
.article-body-with-float .img-bordered {
    border: 3px solid #e5e7eb;
    border-radius: 8px;
    padding: 4px;
    background: #fff;
}

/* 阴影效果图片 */
.prose .img-shadow,
.article-body-with-float .img-shadow {
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border-radius: 8px;
}

/* 提示框 - 默认（信息） */
.prose .callout,
.article-body-with-float .callout {
    border-left: 4px solid #3b82f6;
    background: #eff6ff;
    padding: 16px 20px;
    margin: 20px 0;
    border-radius: 0 8px 8px 0;
    color: #1e40af;
}
.prose .callout p,
.article-body-with-float .callout p {
    margin: 0;
    color: #1e40af;
}

/* 提示框 - 警告 */
.prose .callout-warning,
.article-body-with-float .callout-warning {
    border-left-color: #f59e0b;
    background: #fffbeb;
    color: #92400e;
}
.prose .callout-warning p,
.article-body-with-float .callout-warning p {
    color: #92400e;
}

/* 提示框 - 危险 */
.prose .callout-danger,
.article-body-with-float .callout-danger {
    border-left-color: #ef4444;
    background: #fef2f2;
    color: #991b1b;
}
.prose .callout-danger p,
.article-body-with-float .callout-danger p {
    color: #991b1b;
}

/* 提示框 - 成功 */
.prose .callout-success,
.article-body-with-float .callout-success {
    border-left-color: #10b981;
    background: #ecfdf5;
    color: #065f46;
}
.prose .callout-success p,
.article-body-with-float .callout-success p {
    color: #065f46;
}

/* 首字下沉 */
.prose .text-dropcap::first-letter,
.article-body-with-float .text-dropcap::first-letter {
    font-size: 3.5em;
    float: left;
    line-height: 1;
    padding-right: 8px;
    font-weight: 700;
    color: #3b82f6;
}

/* 引用块增强 */
.prose blockquote,
.article-body-with-float blockquote {
    border-left: 4px solid #d1d5db;
    padding-left: 20px;
    color: #6b7280;
    font-style: italic;
    margin: 20px 0;
    background: #f9fafb;
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
}
.prose blockquote p,
.article-body-with-float blockquote p {
    margin: 0;
}

/* 高亮标记 */
.prose mark,
.article-body-with-float mark {
    background: #fef08a;
    padding: 2px 6px;
    border-radius: 3px;
    color: #713f12;
}

/* 键盘按键样式 */
.prose kbd,
.article-body-with-float kbd {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.875em;
    font-family: monospace;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    box-shadow: 0 1px 0 #d1d5db;
    color: #374151;
}

/* 代码块增强 */
.prose pre,
.article-body-with-float pre {
    background: #1f2937;
    color: #e5e7eb;
    padding: 16px 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 20px 0;
}
.prose pre code,
.article-body-with-float pre code {
    background: transparent;
    padding: 0;
    color: #e5e7eb;
}
.prose code,
.article-body-with-float code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.875em;
    color: #dc2626;
}

/* 分隔线增强 */
.prose hr,
.article-body-with-float hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, #d1d5db, transparent);
    margin: 32px 0;
}

/* 文章详情页：封面图右浮动（方案D 支持，后台可选） */
.article-cover-float-right {
    float: right;
    margin: 0 0 16px 24px;
    border-radius: 8px;
    overflow: hidden;
}
.article-cover-float-right img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* 平板端：右浮动封面图宽度调整 */
@media (max-width: 1024px) {
    .article-cover-float-right {
        margin: 0 0 14px 20px;
    }
}

/* 手机端：右浮动封面图改为全宽显示，不浮动 */
@media (max-width: 640px) {
    .article-cover-float-right {
        float: none;
        width: 100% !important;
        max-width: 100%;
        margin: 0 0 20px 0;
    }
    .article-cover-float-left {
        width: 100% !important;
    }
}

/* 封面图全宽横幅容器（宽度可由后台调节，<100% 时居中） */
.article-cover-banner {
    display: block;
    text-align: center;
}
.article-cover-banner img {
    display: block;
    margin: 0 auto;
}

/* 手机端：封面图（横幅/浮动）统一全宽显示 */
@media (max-width: 640px) {
    .article-cover-banner {
        width: 100% !important;
        margin: 0 0 20px 0 !important;
    }
}

/* ---------- PC 端头部两端固定留白（LOGO 左侧 / 搜索·语言右侧），仅 ≥1280px 生效 ----------
   用户确认方案：LOGO 左侧固定留白、搜索图标右侧固定留白、导航栏贴近搜索图标。
   使用 logical 属性（margin-inline-start / padding-inline-end），阿拉伯语 RTL 自动镜像，
   不影响移动端/平板布局，不影响导航功能。 */
@media (min-width: 1280px) {
    .trade-theme .yk-header-logo { margin-inline-start: 1rem; }
    .trade-theme header nav { padding-inline-end: 1rem; }
}

/* ---------- 表单/搜索框响应式补齐 ----------
   tailwind.css 未编译 sm:w-48 / sm:w-auto 工具类，此处补齐：
   ≥640px（平板/PC）搜索框恢复 192px 固定胶囊、容器按内容宽靠右；
   <640px（手机）由 w-full 撑满整行。
   仅影响搜索框宽度与位置，不影响表单提交、分页等任何功能。 */
@media (min-width: 640px) {
    .sm\:w-48 { width: 12rem; }
    .sm\:w-auto { width: auto; }
}

/* ============================================================
   移动端侧滑抽屉导航 (Mobile Drawer Navigation)
   ============================================================ */

/* 抽屉初始状态：隐藏在右侧视窗外 */
#mobileDrawer {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    will-change: transform;
}

/* 抽屉打开状态 */
#mobileDrawer.drawer-open {
    transform: translateX(0);
}

/* 遮罩层 */
#mobileDrawerOverlay {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity 0.3s ease;
}

/* 手风琴子菜单过渡 */
.mobile-nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.mobile-nav-submenu:not(.hidden) {
    max-height: 3000px;
}

/* 汉堡按钮 active 状态：三条线变 X */
.hamburger.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
}
.hamburger.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}
.hamburger span {
    transition: transform 0.3s ease, opacity 0.2s ease;
}

/* 平板端：抽屉宽度固定 */
@media (min-width: 768px) {
    #mobileDrawer {
        width: 420px !important;
        max-width: 420px !important;
    }
}

/* RTL 语言（阿拉伯语）：抽屉从左侧滑入 */
html[dir="rtl"] #mobileDrawer,
body.rtl #mobileDrawer {
    right: auto !important;
    left: 0 !important;
    transform: translateX(-100%);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
}
html[dir="rtl"] #mobileDrawer.drawer-open,
body.rtl #mobileDrawer.drawer-open {
    transform: translateX(0);
}

/* 抽屉内滚动条美化 */
#mobileDrawer ::-webkit-scrollbar {
    width: 4px;
}
#mobileDrawer ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}
#mobileDrawer ::-webkit-scrollbar-track {
    background: transparent;
}

/* 页脚关注我们-社交图标：手机端居中，平板/PC左对齐 */
.footer-social-icons {
    justify-content: center;
}
@media (min-width: 640px) {
    .footer-social-icons {
        justify-content: flex-start;
    }
}

/* ===== Blox 两列图文布局：图片列撑满高度，与文字列等高 ===== */
@media (min-width: 768px) {
  .md\:col-span-6 { display: flex; flex-direction: column; }
  .md\:col-span-6 .yk-imgfx { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .md\:col-span-6 .yk-imgfx .yk-imgfx-frame { flex: 1 1 auto; display: flex; overflow: hidden; }
  .md\:col-span-6 .yk-imgfx img { width: 100%; height: 100%; object-fit: cover; }
}

/* =====================================================================
   修复：.prose 容器内 Tailwind Typography 的 .prose img { margin:0 }
   优先级高于 .md:mx-auto，导致带 mx-auto 类的图片无法居中。
   此规则让 .prose 里显式带 mx-auto 的图片恢复水平居中，不影响其他图片。
   ===================================================================== */
.prose img[class*="mx-auto"] {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =====================================================================
   通用「移动端横向滑动栏目胶囊栏」（.msub）
   ---------------------------------------------------------------------
   设计：默认整端隐藏，仅在手机与平板端（<1024px）显示为横向可滑动的胶囊条；
   PC（>=1024px）保持原有栏目布局，完全不受影响。
   功能：胶囊样式、当前栏目高亮（主题色底+白字）、隐藏横向滚动条、
   手指惯性滑动、可选吸顶（sticky）固定在视口顶部。
   ===================================================================== */
/* 所有端默认隐藏：PC/平板不会出现该栏目条 */
.msub { display: none; }

/* PC 专用元素（如左侧垂直分类树卡片、右侧导航箱）：手机/平板端隐藏，>=1024px
   恢复显示，从而保留 PC 原有栏目布局不变（平板改为统一使用横向胶囊） */
.msub-pc-only { display: none; }
@media (min-width: 1024px) {
    .msub-pc-only { display: block; }
}

@media (max-width: 1023px) {
    /* 手机端显示为块级通栏；负外边距抵消容器 px，实现整条满宽（含吸顶底色） */
    .msub--mobile {
        display: block;
        width: auto;
        margin-left: -16px;
        margin-right: -16px;
        background: #ffffff;
        border-bottom: 1px solid #e5e7eb;
    }
    /* 吸顶：下滑时固定在视口最顶部（手机端头部为 static 会随页面滚走） */
    .msub--sticky {
        position: sticky;
        top: 0;
        z-index: 40;
    }
    /* 横向轨道：不换行、横向滚动、隐藏滚动条、开启 iOS 惯性滑动 */
    .msub__track {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        padding: 10px 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* Firefox 隐藏滚动条 */
        -ms-overflow-style: none;      /* 旧版 IE/Edge 隐藏滚动条 */
    }
    /* WebKit（Chrome/Safari）隐藏横向滚动条 */
    .msub__track::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    /* 单个胶囊：圆角（胶囊形）、不换行、自适应宽度、灰底灰字 */
    .msub__pill {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        background: #f3f4f6;
        color: #4b5563;
        border: 1px solid transparent;
        border-radius: 9999px;
        padding: 7px 16px;
        font-size: 13px;
        line-height: 1.2;
        text-decoration: none;
        transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
    .msub__pill:active { opacity: .85; }
    /* 当前选中栏目：主题色背景 + 白色文字（主题色取站点 --color-primary 变量） */
    .msub__pill.is-active {
        background: var(--color-primary, #0EA5A4);
        border-color: var(--color-primary, #0EA5A4);
        color: #ffffff;
    }
    /* JS 吸顶固定态（.is-pinned）：满宽固定到视口顶部，清零原负外边距，加轻投影 */
    .msub--mobile.is-pinned {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        z-index: 60;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    }

    /* —— 统一留白：胶囊栏紧贴横幅（间距 0，与「新闻与资讯」一致）——
       当胶囊栏是某区块首个内容时，去掉该区块顶部内边距（page.php 单页区块为 py-12、
       Blox 产品目录区块为 py-8），让胶囊直接接在横幅下方。仅作用于手机/平板，
       PC（>=1024）胶囊本身隐藏、不受影响。
       注意：mobile-subnav 组件在 nav 前还输出一个 display:none 的 .msub__spacer
       占位（真正的首子元素），故 :has 以 .msub__spacer:first-child 判定。 */
    section:has(> .container > .msub__spacer:first-child),
    section:has(> div > [data-product-catalog] > .msub__spacer:first-child) {
        padding-top: 0;
    }
}

/* =====================================================================
   手机/平板「统一搜索白栏」（.msub-mobile-bar）
   ---------------------------------------------------------------------
   设计：默认整端隐藏，仅在手机与平板端（<1024px）显示；搜索输入框为
   圆角胶囊形，上下留白 py-4，与「新闻与资讯」搜索栏完全一致。
   PC（>=1024px）保持各栏目原有搜索位置（卡片/表格上方），不受影响。
   负外边距抵消父容器 px-4，使白栏整条满宽（与胶囊栏/新闻口径一致）。
   ===================================================================== */
.msub-mobile-bar { display: none; }
@media (max-width: 1023px) {
    .msub-mobile-bar {
        display: block;
        margin-left: -16px;
        margin-right: -16px;
    }
}

/* =====================================================================
   手机/平板「底部导航栏」（.mobile-bottom-nav，footer.php 顶部）
   ---------------------------------------------------------------------
   设计：导航项一律不换行；栏目数量超出屏宽时整条可左右滑动，隐藏横向
   滚动条并保留 iOS 惯性滑动。PC（>=1024）该导航本身不输出（lg:hidden）。
   ===================================================================== */
/* 轨道：不换行、横向滚动、隐藏滚动条
   justify-content 用 safe center：内容放得下（平板宽屏）时整条居中；
   内容溢出（手机窄屏）时自动回退为靠左，避免开头几项被裁切、滑不到。 */
.mobile-bottom-nav .mobile-bottom-track {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    justify-content: safe center;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;          /* Firefox 隐藏滚动条 */
    -ms-overflow-style: none;      /* 旧版 IE/Edge 隐藏滚动条 */
    -webkit-overflow-scrolling: touch;
}
/* WebKit（Chrome/Safari）隐藏横向滚动条 */
.mobile-bottom-nav .mobile-bottom-track::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
/* 单个导航项：固定宽度、不伸缩不压缩，保证整条可横滑（覆盖原 flex-1/min-w/max-w） */
.mobile-bottom-nav .mobile-bottom-track > a {
    flex: 0 0 auto;
    width: 66px;
    min-width: 66px;
    max-width: none;
}