@charset "utf-8";  /* 设置字符编码为UTF-8 */

/* 平板设备响应式设计 (768px - 1024px) */
@media (max-width: 1024px) {
    /* 调整轮播图高度 */
    .slider {
        height: 400px;  /* 减小高度 */
    }
    
    /* 调整轮播标题大小 */
    .slide-content h2 {
        font-size: 2em;  /* 缩小标题字体 */
    }
    
    /* 调整轮播描述文字大小 */
    .slide-content p {
        font-size: 1em;  /* 缩小描述字体 */
    }
    
    /* 调整功能区块布局 */
    .features {
        justify-content: center;  /* 居中显示 */
    }
    
    /* 调整单个功能区块尺寸 */
    .feature {
        flex: 0 0 calc(50% - 30px);  /* 每行显示2个 */
        max-width: calc(50% - 30px);  /* 最大宽度计算 */
    }
}

/* 小尺寸平板/大手机响应式设计 (小于768px) */
@media (max-width: 768px) {
    /* 主导航栏调整为移动端样式 */
    .main-nav {
        display: none;  /* 默认隐藏 */
        position: absolute;  /* 绝对定位 */
        top: 100%;  /* 从头部下方开始 */
        left: 0;  /* 左侧对齐 */
        width: 100%;  /* 全宽 */
        background-color: #0d47a1;  /* 深蓝色背景 */
    }
    
    /* 激活状态显示导航 */
    .main-nav.active {
        display: block;  /* 显示导航 */
    }
    
    /* 导航菜单垂直排列 */
    .main-nav ul {
        flex-direction: column;  /* 垂直布局 */
        padding: 10px 0;  /* 上下内边距 */
    }
    
    /* 导航链接样式调整 */
    .main-nav a {
        padding: 12px 20px;  /* 增大点击区域 */
        display: block;  /* 块级显示 */
    }
    
    /* 移动端菜单按钮显示 */
    .mobile-menu-btn {
        display: block;  /* 显示按钮 */
        font-size: 1.5em;  /* 增大图标 */
        background: none;  /* 无背景 */
        border: none;  /* 无边框 */
        color: white;  /* 白色图标 */
    }
}

/* 小屏幕手机响应式设计 (小于480px) */
@media (max-width: 480px) {
    /* 进一步减小轮播图高度 */
    .slider {
        height: 250px;  /* 最小高度 */
    }
    
    /* 调整轮播内容区域宽度 */
    .slide-content {
        max-width: 90%;  /* 增大左右边距 */
    }
    
    /* 产品网格单列布局 */
    .product-grid {
        grid-template-columns: 1fr;  /* 单列显示 */
    }
    
    /* 分类筛选按钮样式调整 */
    .category-filter button {
        padding: 6px 12px;  /* 减小内边距 */
        font-size: 0.9em;  /* 缩小字体 */
    }
}