/* ============================================================
   Creawith Tabs 2.0（分类胶囊导航 · 国际画廊级永久扁平版）
   设计哲学：新结构主义、零线框摩擦、字形呼吸感、高对比面性遮罩
   气质定义：沉静而非冷漠，精致而非繁复，富有创造力而非视觉喧闹
============================================================ */

/* 1. 顶级主外壳：严格与全局大 Header 的物理总宽与侧边距垂直咬合 */
.cw-search-nav.glass-nav {
    display: flex;
    align-items: center; /* 🌟 强制全线组件在 76px 纵深内绝对垂直居中，彻底根治位置偏下 Bug */
    justify-content: space-between;
    width: 100%;
    max-width: 1480px; 
    min-height: 76px; /* 阔气的留白高度，为大分类模块提供充足的“视觉降噪空间” */
    margin: 0 auto;
    padding: 0 24px;   /* 严丝合缝卡准隐形纵向栅格线，消灭散架感 */
    background: transparent;
    border-bottom: 1px solid #EEEEEE; /* 一条极致干净、没有丝毫羽化的平整分层线 */
    box-sizing: border-box;
}

/* 2. 横向滚动轨道：无损平滑流动 */
.cw-nav-capsules.scroll-x {
    display: flex;
    align-items: center; /* 锁死轨道内部轴线 */
    gap: 16px; /* 适度拓宽组件间距，用大留白营造不浮躁的松弛感 */
    flex: 1;
    padding: 8px 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.cw-nav-capsules.scroll-x::-webkit-scrollbar {
    display: none;
}

/* 3. 核心胶囊结构：骨骼重塑！换装 8px 现代硬圆角，彻底拔除塑料感与局促感 */
.cw-capsule {
    height: 38px; /* 极为精致大方的 38px 画廊规格 */
    padding: 0 20px; /* 拉长身段，让扁平几何体展现出沉稳的物理秩序 */
    border-radius: 8px; /* 🔥 告别幼稚的全圆角药丸，转向高度自信、自律的建筑感硬圆角 */
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em; /* 🌟 优雅拉开字间距，让文本产生先锋平面印刷品的呼吸感 */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: none !important; /* 彻底摧毁边框，靠字形与纯面性块面来划分空间 */
    outline: none;
    user-select: none;
    
    /* 常态常驻：全透明打底。让文字赤裸、赤诚地浮在画布上，无边框，无底色，无阴影 */
    background-color: transparent; 
    color: #6A6A6A; /* 谦逊、内敛的中灰 */
    
    /* 极致纯净的颜色无缝溶解切换（0.18s 物理匀速响应，绝不拖泥带水） */
    transition: 
        background-color 0.18s ease,
        color 0.18s ease;
}

/* 常态 Hover 交互：不产生任何抖动或 translateY 物理浮动，仅通过明度过渡轻轻唤醒 */
.cw-capsule:hover {
    background-color: #EEEEEE; /* 融入极其克制的浅灰阴蔽面 */
    color: #1A1A1A; /* 文字唤醒为纯正的深邃暗灰 */
}

/* 4. 🔥 终极激活状态：品牌主轴大单色聚焦（向高端平面先锋设计看齐） */
.cw-capsule.active {
    font-weight: 600;
    
    /* 
       彻底丢弃毛玻璃与彩色大模糊投影！
       使用一块绝对扁平、充满力量与高级质感的“暗哑迷雾蓝绿”满色块包裹住纯白字体。
       在干净大气的极浅灰页面大画布上，它像一记精准的视觉图章，高级且充满长期审美价值。
    */
    background-color: #3A8B82 !important; /* 🔥 独创调制的深邃松林雾气色 */
    color: #FFFFFF !important; /* 纯白反白字体，实现极其高反差、利落的图形遮罩效果 */
    box-shadow: none !important; /* 坚决零阴影，用绝对的平面纯净度来展现自信 */
}

/* 斩断所有尾巴线、提示条等短期流行 trends 的杂音 */
.cw-capsule.active::after {
    display: none;
}

/* ============================================================
   5. 极简 More 按钮：高度与大类完全咬合，形成收尾右锚点
============================================================ */
.cw-nav-more {
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.cw-nav-btn {
    height: 38px; /* 锁死 38px 物理等高线 */
    padding: 0 16px;
    border-radius: 8px; /* 同步 8px 硬圆角，达成几何形体的系统认同感 */
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #6A6A6A;
    background: transparent;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none;
    transition: all 0.18s ease;
}

/* More 按钮悬停：黑化反转 */
.cw-nav-btn:hover {
    background: #1A1A1A; 
    color: #FFFFFF;
}