/**
 * 产品列表页 — 页面级 CSS
 * 对应 pages/product-list.php
 *
 * 视觉基线：mokeling-product-list-demo-v5.html（所有数值均从 Demo v5 精确提取）
 * 不含卡片样式（product-card.php 内嵌）、不含 badge 样式（product-badges.php 内嵌）
 *
 * CSS 三层架构：style.css(全局) < 本文件(页面) < 模块内嵌<style>(最高)
 */


/* ═══════════════════════════════════════════════════════════════
   CSS 变量 — 与 Demo v5 :root 完全一致
═══════════════════════════════════════════════════════════════ */
.mkl-list-page {
    /* 基础色板 */
    --mkl-bg:             #FAFAFA;
    --mkl-card-bg:        #FFFFFF;
    --mkl-text-primary:   #1D1D1F;
    --mkl-text-secondary: #6e6e73;
    --mkl-text-tertiary:  #AEAEB2;

    /* 产品线主色 — JS 根据 line 动态设置 */
    --mkl-consumer:    #5856D6;
    --mkl-industrial:  #0571e3;
    --mkl-accent:      #5856D6;       /* 默认 consumer */
    --mkl-accent-rgb:  88, 86, 214;   /* 默认 consumer */

    /* 圆角 */
    --mkl-radius-card: 18px;          /* 卡片圆角，推荐范围 12-24px */

    /* 字体 */
    --mkl-font: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ── 页面呼吸间距 ──────────────────────────────────────────
       微调只改这里，下方所有 padding 均引用这些变量              */
    --mkl-pad-lr:          48px;   /* 左右内边距，与 navbar padding 保持一致，推荐范围 40-60px */
    --mkl-pad-hdr-top:     4px;    /* header 上间距，推荐范围 4-20px；原值18px */
    --mkl-pad-tab-top:     12px;   /* tab-bar 上间距，推荐范围 8-24px */
    --mkl-pad-main-top:    16px;   /* main区 上间距，推荐范围 10-31px */
    --mkl-pad-main-bottom: 44px;   /* main区 下间距，推荐范围 32-88px */

    /* ── 搜索命中高亮强度 ───────────────────────────────────── */
    /* 产品网格行间距，建议范围 24px–48px */
    --mkl-grid-row-gap: 32px;

    --mkl-search-ring-opacity:   0.28;  /* 四面描边圈透明度，推荐 0.15-0.55 */
    --mkl-search-border-opacity: 0.18;  /* border-color 透明度，推荐 0.10-0.35 */
    --mkl-search-glow-opacity:   0.09;  /* 外发光透明度，推荐 0.05-0.18 */

    /* ── Sticky 三件套高度管理（单一来源）────────────────────
       视觉确认后在此统一微调，下方 top 值全部引用这三个变量   */
    --mkl-navbar-h:        60px;   /* navbar 实测高度（getBoundingClientRect = 60px） */
    --mkl-list-header-h:   24px;   /* page header 实测高度（getBoundingClientRect = 24px） */
    --mkl-tab-bar-h:       55px;   /* tab bar wrap 实测高度（getBoundingClientRect = 55px） */

    background: var(--mkl-bg);
    font-family: var(--mkl-font);
    color: var(--mkl-text-primary);
    -webkit-font-smoothing: antialiased;
}


/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER — MOKELING · 产品目录 + 搜索框
═══════════════════════════════════════════════════════════════ */
.mkl-list-header {
    display: flex;
    align-items: center;
    gap: 12px;                          /* logo 与分隔线间距，推荐 8-16px */
    padding: var(--mkl-pad-hdr-top) var(--mkl-pad-lr) 0;
    position: sticky;
    top: var(--mkl-navbar-h);           /* 紧贴 navbar 底部，= 48px */
    z-index: 100;
    background: var(--mkl-bg);
}

.mkl-list-logo {
    font-size: 11.5px;                  /* 品牌名字号，推荐 10-13px */
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--mkl-text-primary);
}

.mkl-list-hdr-sep {
    width: 1px;
    height: 11px;                       /* 竖线高度，推荐 9-14px */
    background: #D1D1D6;
    flex-shrink: 0;
}

.mkl-list-hdr-sub {
    font-size: 11.5px;
    color: var(--mkl-text-secondary);
}


/* ═══════════════════════════════════════════════════════════════
   TAB BAR — Consumer / Industrial 切换
   注意：Tab 是 <a> 跳转链接，不是 JS 切换
═══════════════════════════════════════════════════════════════ */
.mkl-tab-bar-wrap {
    padding: var(--mkl-pad-tab-top) var(--mkl-pad-lr) 0;
    position: sticky;
    top: calc(var(--mkl-navbar-h) + var(--mkl-list-header-h));   /* navbar + header，= 84px */
    z-index: 99;
    background: var(--mkl-bg);
}

.mkl-tab-bar {
    display: inline-flex;
    background: #EFEFEF;
    border-radius: 11px;                /* 外壳圆角，推荐 8-14px */
    padding: 3px;
    gap: 2px;
}

.mkl-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;                           /* 色点与文字间距，推荐 5-10px */
    padding: 7px 22px;                  /* 按钮内边距，推荐 6-10px / 16-28px */
    border: none;
    background: transparent;
    font-family: var(--mkl-font);
    font-size: 13.5px;                  /* Tab 字号，推荐 12-15px */
    font-weight: 500;
    color: #86868B;
    cursor: pointer;
    border-radius: 8px;                 /* 内部按钮圆角，推荐 6-10px */
    transition: background 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.18s ease,
                box-shadow 0.18s ease;
    letter-spacing: -0.01em;
    user-select: none;
    text-decoration: none;
}

.mkl-tab-btn.active {
    background: white;
    color: var(--mkl-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12),
                0 0 0 0.5px rgba(0, 0, 0, 0.05);
}

.mkl-tab-dot {
    width: 5px;                         /* 色点直径，推荐 4-7px */
    height: 5px;
    border-radius: 50%;
    background: var(--mkl-accent);
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.2s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mkl-tab-btn.active .mkl-tab-dot {
    opacity: 1;
    transform: scale(1);
}


/* ═══════════════════════════════════════════════════════════════
   MAIN LAYOUT — sidebar + product area
═══════════════════════════════════════════════════════════════ */
.mkl-list-main {
    display: flex;
    padding: var(--mkl-pad-main-top) var(--mkl-pad-lr) var(--mkl-pad-main-bottom);
    gap: 24px;                          /* 侧栏与产品区间距，推荐 20-36px */
    align-items: flex-start;
}


/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — 三层筛选
═══════════════════════════════════════════════════════════════ */
.mkl-list-sidebar {
    width: 130px;                       /* 侧栏宽度，推荐 120-160px */
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--mkl-navbar-h) + var(--mkl-list-header-h) + var(--mkl-tab-bar-h) + 12px);
    /* navbar + header + tabbar + 呼吸间距，推荐 8-16px */
}

.mkl-filter-panel {
    display: flex;
    flex-direction: column;
    gap: 26px;                          /* 筛选区块间距，推荐 20-32px */
}

.mkl-filter-section {
    display: flex;
    flex-direction: column;
    gap: 9px;                           /* 标题与选项间距，推荐 6-12px */
}

.mkl-filter-heading {
    font-size: 10.5px;                  /* 标题字号，推荐 9.5-12px */
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mkl-text-secondary);
}

.mkl-filter-options {
    display: flex;
    flex-direction: column;
    gap: 5px;                           /* 选项行间距，推荐 3-8px */
}

/* 直接覆盖 Bricks 继承的 15px 基础字号 */
.mkl-list-page .mkl-filter-option {
    font-size: 11.5px !important;       /* 选项字号，推荐 10-12px */
    color: #3a3a3c !important;           /* 选项文字颜色，比 text-secondary 深 */
}
.mkl-list-page .mkl-filter-heading {
    font-size: 11px !important;         /* 分组标题字号，推荐 10-12px */
    color: #1d1d1f !important;           /* 标题颜色，用 text-primary 最深 */
}

/* ── 层三：Badge Toggle Group ── */
.mkl-badge-toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;                           /* badge 间距，推荐 4-8px */
}

.mkl-badge-toggle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;                   /* 内边距，推荐 2-5px / 6-10px */
    border-radius: 5px;                 /* 圆角，推荐 4-6px */
    font-size: 11px;                    /* 字号，推荐 10-12px */
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: opacity 0.15s, box-shadow 0.15s;
    user-select: none;
    line-height: 1.5;
    opacity: 0.5;                       /* 默认淡化 */
}
.mkl-badge-toggle:hover { opacity: 0.78; }

.mkl-badge-toggle.active {
    opacity: 1;
    box-shadow: 0 0 0 1.5px currentColor;
}


/* ═══════════════════════════════════════════════════════════════
   PRODUCT AREA
═══════════════════════════════════════════════════════════════ */
.mkl-product-area {
    flex: 1;
    min-width: 0;
}

.mkl-results-info {
    font-size: 12px;                    /* 统计字号，推荐 11-13px */
    color: var(--mkl-text-tertiary);
    margin-bottom: 14px;
    height: 18px;
    letter-spacing: 0.01em;
}

/* 产品网格 — 3列 */
.mkl-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;                   /* 水平间距，推荐 14-28px */
    row-gap: var(--mkl-grid-row-gap);   /* 垂直间距，引用变量 */
}

.mkl-product-card.hidden {
    display: none !important;
}

.mkl-empty-msg {
    grid-column: 1 / -1;
    padding: 80px 0;                    /* 上下留白，推荐 60-100px */
    text-align: center;
    color: var(--mkl-text-tertiary);
    font-size: 14px;
}


/* ═══════════════════════════════════════════════════════════════
   搜索系统预留区域（Chat ④ 填充）
═══════════════════════════════════════════════════════════════ */
.mkl-search-wrap {
    margin-left: auto;
    position: relative;
    flex-shrink: 0;
}

.mkl-search-banner {
    border-radius: 11px;
    margin-bottom: 13px;
}
.mkl-search-banner.hidden { display: none; }

.mkl-product-card.search-match {
    box-shadow: 0 0 0 2px rgba(var(--mkl-accent-rgb), var(--mkl-search-ring-opacity)),
                0 4px 18px rgba(var(--mkl-accent-rgb), var(--mkl-search-glow-opacity));
    border-color: rgba(var(--mkl-accent-rgb), var(--mkl-search-border-opacity)) !important;
}
.mkl-product-card.search-dim {
    opacity: 0.38;                      /* 暗化透明度，推荐 0.30-0.50 */
}
.mkl-product-card.search-dim:hover {
    opacity: 0.8;
}


/* ═══════════════════════════════════════════════════════════════
   页面适配修补
═══════════════════════════════════════════════════════════════ */
.page.type-page > h1:first-child,
.brxe-post-title,
.page .entry-title,
.page-title {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   宽度系统 — 与 navbar (.mkl-nav-inner) 保持完全一致
   ──────────────────────────────────────────────────────────────
   · 最小宽度：由 style.css body { min-width: 1200px } 统一控制（单一来源）
   · 最大宽度 1600px：对齐 .mkl-nav-inner max-width，超宽屏不失真
   · 全宽突破通过 100vw + 负 margin 实现，不依赖 Bricks 容器设置
═══════════════════════════════════════════════════════════════ */

/* 全宽突破 WordPress 容器 */
.mkl-list-page {
    min-width: 1400px;               /* 窄窗口保持布局，三列净宽≥1150px保障 */
    width: 100vw !important;
    max-width: none !important;
    position: relative;
    left: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box;
}

/* ⚠️ SINGLE SOURCE OF TRUTH — max-width 只在此处定义
   与 .mkl-nav-inner max-width 保持一致，推荐同步修改  */
.mkl-list-page > * {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* ── 顶部留白：防止内容被固定 navbar 遮挡 ──
   数值 = navbar 实际高度；推荐范围 56–88px    */
.mkl-list-page {
    padding-top: 40px;                  /* navbar 高度补偿，推荐范围 36–60px；原值72px */
}