/**
 * =============================================
 * 产品中心样式文件 products.css
 * 用途：产品中心页面专属样式，包括筛选、产品列表等
 * 作者：AI开发
 * 创建日期：2026-03-06
 * =============================================
 */

/* ===================================
 * 页面容器
 * =================================== */

.page-wrapper {
    /* 最小高度 */
    min-height: 100vh;

    /* 背景渐变 */
    background: linear-gradient(180deg, var(--current-bg) 0%, var(--current-bg2) 100%);
}

/* ===================================
 * 页面头部
 * =================================== */

/**
 * 页面头部容器
 */
.page-header {
    /* 内边距 - 顶部留空给状态栏 */
    padding: 40px 0 var(--spacing-lg);

    /* 文字居中 */
    text-align: center;
}

/**
 * 页面标题动画
 */
.animate-title {
    /* 字体大小 - 大标题 */
    font-size: 32px;
    font-weight: 700;
    color: var(--current-accent);
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--current-primary) 0%, var(--current-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* 初始状态 */
    opacity: 0;
    transform: translateY(20px);

    /* 动画 */
    animation: fadeInUp 0.6s ease forwards;
}

/**
 * 页面副标题动画
 */
.animate-subtitle {
    /* 字体大小 - 小字体 */
    font-size: var(--font-sm);
    line-height: 1.6;
    color: #666;
    margin-bottom: 0;

    /* 初始状态 */
    opacity: 0;
    transform: translateY(20px);

    /* 动画 - 延迟0.2s */
    animation: fadeInUp 0.6s ease 0.2s forwards;
}

/**
 * 淡入上浮动画
 */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/**
 * 页面副标题
 */
.page-subtitle {
    /* 字体大小 - 小字体 */
    font-size: var(--font-sm);

    /* 行高 */
    line-height: 1.6;

    /* 颜色 - 灰色 */
    color: #666;

    /* 文字居中 */
    text-align: center;

    /* 下边距 */
    margin-bottom: 0;
}

/* ===================================
 * 筛选区域
 * =================================== */

/**
 * 筛选区域容器
 */
.filter-section {
    /* 内边距 */
    padding-bottom: var(--spacing-lg);

    /* 底部边框 - 可选，增加视觉分隔 */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/**
 * 筛选Tab容器
 * 可横向滚动的分类Tab
 */
.filter-tabs {
    /* Flex布局 - 水平排列Tab */
    display: flex;

    /* 横向滚动 - 内容超出时可以滑动 */
    overflow-x: auto;

    /* 隐藏滚动条 - 视觉更美观 */
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */

    /* 最小高度 - 确保可点击 */
    min-height: 44px;

    /* 防止页面整体滚动，只有Tab区域滚动 */
    overscroll-behavior-x: contain;
}

/**
 * 隐藏滚动条 - WebKit浏览器
 */
.filter-tabs::-webkit-scrollbar {
    display: none;
}

/**
 * Tab项
 */
.tab-item {
    /* 相对定位 */
    position: relative;

    /* Flex布局 - 居中文字 */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 内边距 */
    padding: 10px 20px;

    /* 最小宽度 - 确保可点击区域 */
    min-width: 80px;

    /* 字体大小 - 小字体 */
    font-size: var(--font-sm);

    /* 字重 */
    font-weight: 500;

    /* 颜色 - 默认灰色 */
    color: #666;

    /* 背景色 - 透明 */
    background: transparent;

    /* 边框 - 无 */
    border: none;

    /* 圆角 */
    border-radius: 20px;

    /* 光标 - 手型 */
    cursor: pointer;

    /* 白色空间 - 不换行 */
    white-space: nowrap;

    /* 过渡效果 */
    transition: all var(--transition-fast);

    /* Flex-shrink - 不压缩 */
    flex-shrink: 0;

    /* 防止点击穿透，确保Tab区域独立滚动 */
    touch-action: pan-x;
}

/**
 * Tab项hover效果
 */
.tab-item:hover {
    /* hover时颜色变深 */
    color: var(--current-primary);

    /* 背景色 - 浅色半透明 */
    background: rgba(93, 207, 222, 0.1);
}

/**
 * Tab项active效果
 * 当前选中的Tab
 */
.tab-item.active {
    /* 颜色 - 主题色 */
    color: #fff;

    /* 背景色 - 主题色 */
    background: linear-gradient(135deg, var(--current-primary) 0%, var(--current-light) 100%);

    /* 字重 - 加粗 */
    font-weight: 600;
}

/**
 * Tab指示器
 * 可选：底部指示器，标示当前选中的Tab
 */
.tab-indicator {
    /* 绝对定位 */
    position: absolute;
    bottom: 0;
    left: 0;

    /* 高度 */
    height: 3px;

    /* 宽度 - 初始为0 */
    width: 0;

    /* 背景色 - 主题色 */
    background: linear-gradient(90deg, var(--current-primary) 0%, var(--current-light) 100%);

    /* 圆角 */
    border-radius: 3px 3px 0 0;

    /* 过渡效果 */
    transition: width var(--transition-normal), transform var(--transition-normal);
}

/* ===================================
 * 产品区域
 * =================================== */

/**
 * 产品区域容器
 */
.products-section {
    /* 内边距 */
    padding: var(--spacing-lg) 0 var(--spacing-xl);
}

/**
 * 产品网格
 */
.products-grid {
    /* 网格布局 - 2列 */
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    /* 网格间距 */
    gap: var(--spacing-md);
}

/* ===================================
 * 产品卡片
 * =================================== */

/**
 * 产品卡片
 */
.product-card {
    /* Flex列布局 - 垂直排列内容 */
    display: flex;
    flex-direction: column;

    /* 颜色 - 继承 */
    color: inherit;

    /* 过渡效果 */
    transition: all var(--transition-normal);

    /* 下划线 - 无 */
    text-decoration: none;

    /* 初始状态 - 用于过滤动画 */
    opacity: 1;
    transform: translateY(0);
}

/**
 * 产品卡片隐藏状态
 * 当被过滤掉时的样式
 */
.product-card.hidden {
    /* 隐藏 */
    display: none;
}

/**
 * 产品卡片过滤动画
 * 显示/隐藏时的过渡效果
 */
.product-card.filtering {
    /* 过渡 */
    transition: all var(--transition-normal);
}

/**
 * 产品图片区域
 */
.product-image {
    /* 相对定位 */
    position: relative;

    /* 宽度和高度 */
    width: 100%;
    height: 120px;

    /* 圆角 */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;

    /* 背景渐变 */
    background: linear-gradient(135deg, var(--current-bg) 0%, var(--current-bg2) 100%);

    /* Flex布局 - 居中占位符 */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 溢出隐藏 */
    overflow: hidden;
}

/**
 * 产品图片占位符
 */
.product-image-placeholder {
    /* Flex布局 - 居中图标 */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 宽度和高度 */
    width: 100%;
    height: 100%;

    /* 图标颜色 - 使用主题色 */
    color: var(--current-primary);

    /* 过渡效果 */
    transition: transform var(--transition-normal);
}

/**
 * 占位符SVG
 */
.product-image-placeholder svg {
    /* 尺寸 */
    width: 48px;
    height: 48px;

    /* 透明度 */
    opacity: 0.5;
}

/**
 * 产品信息区域
 */
.product-info {
    /* Flex列布局 - 垂直排列内容 */
    display: flex;
    flex-direction: column;

    /* 内边距 */
    padding: var(--spacing-md);

    /* Flex-grow - 填充剩余空间 */
    flex: 1;
}

/**
 * 产品标题
 */
.product-title {
    /* 字体大小 - 中等 */
    font-size: var(--font-md);

    /* 字重 - 加粗 */
    font-weight: 600;

    /* 颜色 - 使用强调色 */
    color: var(--current-accent);

    /* 下边距 */
    margin-bottom: var(--spacing-xs);

    /* 文字省略 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/**
 * 产品描述
 */
.product-description {
    /* 字体大小 - 小字体 */
    font-size: var(--font-xs);

    /* 行高 */
    line-height: 1.4;

    /* 颜色 - 灰色 */
    color: #666;

    /* 下边距 */
    margin-bottom: var(--spacing-sm);

    /* 文字省略 - 最多2行 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/**
 * 产品链接
 */
.product-link {
    /* 字体大小 - 超小字体 */
    font-size: 11px;

    /* 颜色 - 使用主题色 */
    color: var(--current-primary);

    /* 字重 - 加粗 */
    font-weight: 600;

    /* 过渡效果 */
    transition: transform var(--transition-fast);

    /* Flex布局 - 自行对齐 */
    align-self: flex-start;
}

/**
 * 产品卡片hover效果
 */
.product-card:hover {
    /* 向上移动 */
    transform: translateY(-4px);

    /* 阴影增强 */
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/**
 * 产品卡片hover - 图片效果
 */
.product-card:hover .product-image-placeholder {
    /* 图标放大 */
    transform: scale(1.05);
}

/**
 * 产品卡片hover - 链接效果
 */
.product-card:hover .product-link {
    /* 箭头移动 */
    transform: translateX(4px);
}

/* ===================================
 * 空状态
 * =================================== */

/**
 * 空状态容器
 * 当没有匹配的产品时显示
 */
.empty-state {
    /* Flex列布局 - 垂直居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* 内边距 */
    padding: 60px var(--spacing-md);

    /* 文字居中 */
    text-align: center;

    /* 最小高度 */
    min-height: 200px;
}

/**
 * 空状态图标
 */
.empty-state-icon {
    /* 尺寸 */
    width: 80px;
    height: 80px;

    /* 圆形 */
    border-radius: 50%;

    /* 背景色 - 浅色半透明 */
    background: rgba(0, 0, 0, 0.05);

    /* Flex布局 - 居中图标 */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 下边距 */
    margin-bottom: var(--spacing-md);
}

/**
 * 空状态图标SVG
 */
.empty-state-icon svg {
    /* 颜色 - 灰色 */
    fill: #999;

    /* 尺寸 */
    width: 40px;
    height: 40px;
}

/**
 * 空状态标题
 */
.empty-state-title {
    /* 字体大小 - 中等 */
    font-size: var(--font-md);

    /* 字重 - 加粗 */
    font-weight: 600;

    /* 颜色 - 灰色 */
    color: #666;

    /* 下边距 */
    margin-bottom: var(--spacing-xs);
}

/**
 * 空状态描述
 */
.empty-state-description {
    /* 字体大小 - 小字体 */
    font-size: var(--font-sm);

    /* 颜色 - 浅灰色 */
    color: #999;
}

/* ===================================
 * 加载更多
 * =================================== */

/**
 * 加载更多容器
 */
.load-more {
    /* Flex布局 - 居中 */
    display: flex;
    justify-content: center;

    /* 上边距 */
    margin-top: var(--spacing-lg);
}

/**
 * 加载更多按钮
 */
.load-more-btn {
    /* 内边距 */
    padding: 12px 32px;

    /* 最小宽度 */
    min-width: 160px;

    /* 字体大小 - 小字体 */
    font-size: var(--font-sm);

    /* 字重 - 加粗 */
    font-weight: 600;

    /* 颜色 - 主题色 */
    color: var(--current-primary);

    /* 背景色 - 浅色半透明 */
    background: rgba(93, 207, 222, 0.1);

    /* 边框 - 主题色 */
    border: 2px solid var(--current-primary);

    /* 圆角 */
    border-radius: 20px;

    /* 光标 - 手型 */
    cursor: pointer;

    /* 过渡效果 */
    transition: all var(--transition-fast);

    /* Flex布局 - 居中内容 */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 间距 */
    gap: var(--spacing-xs);
}

/**
 * 加载更多按钮hover效果
 */
.load-more-btn:hover {
    /* 背景色 - 主题色 */
    background: linear-gradient(135deg, var(--current-primary) 0%, var(--current-light) 100%);

    /* 文字颜色 - 白色 */
    color: #fff;
}

/**
 * 加载中状态
 */
.load-more-btn.loading {
    /* 指针 - 不允许 */
    cursor: not-allowed;

    /* 透明度 */
    opacity: 0.7;
}

/**
 * 加载动画图标
 */
.loading-icon {
    /* 尺寸 */
    width: 16px;
    height: 16px;

    /* 旋转动画 */
    animation: spin 1s linear infinite;
}

/**
 * 旋转动画
 */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ===================================
 * 响应式适配
 * =================================== */

/**
 * 小屏设备适配
 */
@media (max-width: 375px) {
    /* Tab最小宽度减小 */
    .tab-item {
        min-width: 60px;
        padding: 8px 16px;
        font-size: 13px;
    }

    /* 产品网格改为单列 */
    .products-grid {
        grid-template-columns: 1fr;
    }
}

/**
 * 大屏设备适配
 */
@media (min-width: 768px) {
    /* 产品网格改为3列 */
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}