/* 头部导航栏样式 */
.header {
    /* 背景图片设置 */
    background: url('../../ui/Heads-Top.webp') no-repeat center center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    
    /* 布局定位 - 不需要粘性定位 */
    position: relative;
    width: 100%;
    margin-bottom: 15px;
    /* 移除overflow: hidden，允许sticky定位正常工作 */
    
    /* 高度自适应，由伪元素和背景图片决定 */
    height: calc(100vw * 0.75); /* 100vw × 768/1024 = 75vw */
    min-height: calc(100vw * 0.75); /* 最小高度保障 */
    max-height: 40vh; /* 最大高度限制 */
    
    /* 现代浏览器支持 - 提供额外比例保障 */
    aspect-ratio: 16 / 12;
}

/* 产品分类导航 */
.category-nav {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px; /* 明确设置高度，与category-list一致 */
    z-index: 999; /* 提高z-index，确保在内容上方 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.1) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    /* 确保sticky定位正常工作 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* 滚动时固定在页面顶部 - 增强毛玻璃效果 */
.category-nav.sticky {
    position: fixed;
    top: 0; /* 初始顶部位置为0，由JavaScript动态计算 */
    height: 48px; /* 保持固定高度 */
    background: rgba(13, 16, 21, 0.85); /* 半透明背景 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.category-nav-content {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 20px;
}

.category-list {
    display: flex;
    gap: 0;
    width: 100%;
    height: 54px;
    justify-content: space-between;
    align-items: stretch;
    position: relative;
}

.category-btn {
    color: rgba(255, 255, 255, 0.8);
    background: none;
    border: none;
    padding: var(--padding-sm) var(--padding-md) var(--padding-sm) var(--padding-xxl); /* 增加左侧padding，避免文字遮挡图标 */
    border-radius: 0;
    font-weight: bold;
    position: relative;
    font-family: var(--font-chinese), var(--font-latin), sans-serif;
    font-size: var(--font-size-xxl);
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.category-btn.active {
    background: #0ff796;
}

/* 平板设备响应式适配已移至 responsive-tablet.css */