/* style.css */

/* --- 全局和基础样式 --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    margin: 0;
    background-color: #fff;
    /* 主背景设为白色 */
    color: #333;
}

.container-cp {
    display: flex;
    max-width: 1400px;
    /* 适当加宽容器 */
    margin: 40px auto;
    padding: 0 15px;
    gap: 30px;
    /* 两栏之间的间距 */
}

/* --- 左侧边栏 (与之前相同，确保颜色正确) --- */
.sidebar {
    flex: 0 0 300px;
    height: fit-content;
}

.category-box h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 26px;
    font-weight: bold;
    color: #000;
}

.company-name {
    font-size: 13px;
    color: #888;
    margin: 0 0 15px 0;
}

.red-divider {
    width: 40px;
    height: 4px;
    background-color: rgb(55, 90, 200);
    /* 蓝色 */
    margin-bottom: 20px;
}

.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-list li {
    margin-bottom: 2px;
}

.category-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    color: #002d5b;
    font-size: 17px;
    background-color: #f7f7f7;
    /* 浅灰色背景 */
    transition: background-color 0.2s, color 0.2s;
}

.category-list a:hover {
    background-color: rgb(55, 90, 200);
    color: #fff;
}

.category-list a::after {
    content: '▶';
    font-size: 10px;
    color: #aaa;
}

.category-list a:hover::after {
    color: #fff;
}

.category-list a.active {
    background-color: #e9e9e9;
    color: #002d5b;
}

.category-list a.active::after {
    content: '';
}

/* --- 右侧主内容区 --- */
.main-content {
    flex: 1;
}

/* --- 产品网格布局 --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 固定三列 */
    gap: 15px;
}

/* --- 新的产品卡片样式 --- */
.product-card {
    background-color: #fff;
    border: 1px solid #e9e9e9;
    overflow: hidden;
    position: relative;
    /* 为绝对定位的子元素和伪元素提供基准 */
    padding: 15px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* 左上角装饰 - 深灰色三角 */
.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 50px 0 0;
    border-color: #343a40 transparent transparent transparent;
    /* 深灰色 */
    z-index: 1;
}

/* 左上角装饰 - 红色三角 (覆盖在灰色之上) */
.product-card::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 35px 35px 0 0;
    border-color: rgb(55, 90, 200) transparent transparent transparent;
    /* 蓝色 */
    z-index: 2;
}

.brand-logo {
    position: absolute;
    top: 15px;
    right: 15px;
    font-weight: bold;
    color: #002d5b;
    z-index: 3;
}

.product-image-container {
    width: 100%;
    padding-top: 80%;
    /* 宽高比控制 */
    position: relative;
    margin-bottom: 10px;
    margin-top: 30px;
    /* 为logo和角标留出空间 */
}

.product-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 80%;
    object-fit: contain;
    /* 保证图片完整显示 */
}

.company-stamp {
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    font-size: 10px;
    color: #aaa;
    transform: scale(0.85);
    /* 缩小字体以匹配设计 */
    text-align: center;
}

.product-info {
    padding: 10px 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.product-name {
    font-size: 22px;
    color: #333;
    font-weight: 500;
    margin: 0 0 5px 0;
    line-height: 1.4;
    min-height: 42px;
    /* 至少两行的高度，防止跳动 */
}

.product-code {
    font-size: 18px;
    color: #888;
    margin: 0 0 15px 0;
}

.click-more-btn {
    display: inline-block;
    padding: 8px 30px;
    background-color: rgb(55, 90, 200);
    /* 蓝色按钮 */
    color: #fff;
    text-decoration: none;
    border-radius: 20px;
    /* 圆角按钮 */
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    margin: 0 auto;
    /* 水平居中 */
}

.click-more-btn:hover {
    background-color: rgb(45, 75, 180);
    /* 悬停时更深的蓝色 */
}

/* --- 分页控制样式 (全新升级版) --- */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    margin-top: 20px;
    gap: 8px;
    /* 按钮之间的间距 */
}

.pagination-button {
    min-width: 40px;
    /* 按钮最小宽度 */
    height: 40px;
    padding: 0 12px;
    margin: 0;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #555;
    /* 默认文字颜色 */
    cursor: pointer;
    border-radius: 4px;
    /* 轻微的圆角 */
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* 鼠标悬停在非激活按钮上 */
.pagination-button:hover:not(:disabled):not(.active) {
    background-color: #f7f7f7;
    border-color: #ccc;
}

/* 当前激活的页码按钮 */
.pagination-button.active {
    background-color: rgb(55, 90, 200);
    /* 蓝色背景 */
    color: white;
    border-color: rgb(55, 90, 200);
    cursor: default;
}

/* 禁用状态的按钮 (上一页/下一页) */
.pagination-button:disabled {
    background-color: #f9f9f9;
    color: #ccc;
    cursor: not-allowed;
}

/* 省略号的样式 */
.pagination-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    color: #888;
    font-size: 16px;
}

/* --- 搜索框容器样式 --- */
.content-header {
    display: flex;
    justify-content: flex-end;
    /* 核心：将内部元素推到右侧 */
    margin-bottom: 25px;
    /* 在搜索框和产品网格之间创建一些间距 */
    padding: 0 5px;
    /* 防止在小屏幕上紧贴边缘 */
}

/* --- 搜索表单本身 --- */
.search-form {
    display: flex;
    /* 让输入框和按钮在同一行 */
    width: 100%;
    max-width: 400px;
    /* 限制搜索框的最大宽度，避免在大屏幕上过长 */
    border: 1px solid #ccc;
    border-radius: 20px;
    /* 圆角边框 */
    overflow: hidden;
    /* 确保内部元素不会超出圆角范围 */
}

/* --- 搜索输入框 --- */
.search-form input {
    width: 100%;
    border: none;
    /* 移除默认边框 */
    outline: none;
    /* 移除点击时的蓝色轮廓 */
    padding: 10px 15px;
    font-size: 14px;
    color: #333;
}

/* --- 搜索按钮 --- */
.search-form button {
    border: none;
    /* 移除默认边框 */
    background-color: rgb(55, 90, 200);
    /* 使用主题蓝色 */
    color: white;
    padding: 0 18px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s;
}

.search-form button:hover {
    background-color: rgb(45, 75, 180);
    /* 鼠标悬停时颜色加深 */
}

/*
  为导航栏的背景颜色和阴影添加平滑过渡效果。
  这个 transition 应该应用在导航栏本身上，
  确保您 HTML 中 header 的 class 包含 transition-all 和 duration-300。
*/
#navbar {
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    /* --- 导航栏冻结核心样式 --- */
    position: sticky;
    /* 关键：让元素变为粘性定位 */
    top: 0;
    /* 关键：当滚动到顶部时开始固定 */
    width: 100%;
    /* 确保导航栏横跨整个页面 */
    z-index: 1000;
    /* 确保它在页面其他内容之上 */
    /* background-color: #ffffff; */
    /* 为了更好的用户体验，初始就给一个白色背景 */
}

/*
  这是滚动后应用的类
  它会将背景设置为白色，并添加一个细微的底部阴影
*/
.navbar-scrolled {
    background-color: #ffffff !important;
    /* 使用 !important 确保覆盖 Tailwind 的 bg-transparent */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 可选：添加阴影以增强效果 */
}

@media (max-width: 768px) {

    /* 1. 整体布局调整 */
    .container-cp {
        flex-direction: column;
        /* 将左右布局改为上下堆叠布局 */
        margin-top: 20px;
        padding: 0 10px;
        /* 减小页面左右边距 */
        gap: 20px;
    }

    /* 2. 侧边栏调整 */
    .sidebar {
        flex-basis: auto;
        /* 取消固定的宽度 */
        width: 100%;
    }

    .category-box h3 {
        font-size: 22px;
        /* 适当缩小标题字体 */
    }

    .category-list a {
        font-size: 15px;
        /* 调整分类字体大小 */
        padding: 10px 15px;
    }

    /* 3. 搜索框调整 */
    .content-header {
        justify-content: center;
        /* 在移动端让搜索框居中 */
        padding: 0;
        margin-bottom: 20px;
    }

    .search-form {
        max-width: 100%;
        /* 允许搜索框占据全部可用宽度 */
    }

    /* 4. 产品网格调整 */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 在手机上显示两列 */
        gap: 15px;
        /* 减小产品之间的间距 */
    }

    /* 5. 产品卡片细节调整 */
    .product-card::before {
        /* 调整左上角角标大小 */
        border-width: 40px 40px 0 0;
    }

    .product-card::after {
        border-width: 28px 28px 0 0;
    }

    .brand-logo {
        font-size: 14px;
        top: 10px;
        right: 10px;
    }

    .product-name {
        font-size: 16px;
        /* 显著减小产品名称字体 */
        min-height: auto;
        /* 允许高度根据内容自适应 */
        line-height: 1.3;
        margin-bottom: 8px;
    }

    .product-code {
        font-size: 13px;
        /* 减小编码字体 */
        margin-bottom: 12px;
    }

    .product-image-container img {
        width: 90%;
        /* 稍微增加图片显示比例 */
        height: 90%;
    }

    .click-more-btn {
        padding: 6px 20px;
        font-size: 13px;
    }

    /* 6. 分页按钮调整 */
    .pagination-controls {
        flex-wrap: wrap;
        /* 允许按钮在空间不足时换行 */
        gap: 5px;
    }

    .pagination-button {
        min-width: 36px;
        height: 36px;
        font-size: 14px;
        padding: 0 10px;
    }

    .pagination-ellipsis {
        min-width: 36px;
        height: 36px;
    }
}

/* --- 多级分类菜单样式 --- */

/* 1. 给包含子菜单的父级 li 设置相对定位，作为子菜单定位的基准 */
.sidebar .category-list li.has-submenu {
    position: relative;
}

/* 2. 默认隐藏子菜单，并设置其为绝对定位 */
.sidebar .category-list li .submenu {
    /* justify-content: space-between;
    align-items: center; */

    display: none;
    /* 默认隐藏 */
    position: absolute;
    left: 100%;
    /* 定位到父元素的右侧 */
    top: -10px;
    /* 向上微调位置，使其对齐 */
    width: 200px;
    /* 设置子菜单的宽度 */
    background-color: #ffffff;
    /* 白色背景 */
    border: 1px solid #e0e0e0;
    /* 浅灰色边框 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* 添加阴影，更有立体感 */
    z-index: 100;
    /* 确保子菜单在最上层，不会被其他内容遮挡 */
    padding: 10px 0;
    border-radius: 4px;
}

/* 3. 这是关键：当鼠标悬停在父级 li 上时，显示其下的子菜单 */
.sidebar .category-list li.has-submenu:hover>.submenu {
    display: block;
    /* 悬停时显示 */
}

/* 4. 子菜单项的样式 */
.sidebar .category-list li .submenu li {
    list-style: none;
    /* 移除默认的列表点 */
}

.sidebar .category-list li .submenu li a {

    padding: 8px 15px;
    color: #333;
    /* 默认文字颜色 */
    font-size: 14px;
    white-space: nowrap;
    /* 防止文字换行 */
    transition: all 0.2s ease;
    /* 添加平滑过渡效果 */
}

/* 5. 鼠标悬停在子菜单项上时的样式 */
.sidebar .category-list li .submenu li a:hover {
    background-color: rgb(55, 90, 200);
    /* 悬停时改变背景色 */
    color: #ffffff;
    /* 悬停时改变文字颜色 */
}

/* 6. 父分类链接中的箭头样式 */
.sidebar .category-list li.has-submenu>a .fa-chevron-right {
    float: right;
    /* 让箭头浮动到右侧 */
    margin-top: 4px;
    font-size: 12px;
    transition: transform 0.2s ease;
}

/* 7. 鼠标悬停在父分类上时，让箭头旋转（可选，增加交互感） */