/**
 * 产品分类侧边栏滚动修复
 * Category Sidebar Scroll Fix
 * 修复左侧分类显示不完全的问题，添加滚动条
 */

/* 桌面端分类侧边栏滚动 */
@media (min-width: 769px) {
    .page-left {
        /* 设置最大高度，确保不超出视口 */
        max-height: calc(100vh - 150px) !important;
        /* 添加垂直滚动 */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* 平滑滚动 */
        scroll-behavior: smooth !important;
    }

    /* 当页面滚动时调整高度 */
    .page-left.scrolled {
        max-height: calc(100vh - 100px) !important;
    }

    /* 美化滚动条 - Webkit浏览器 (Chrome, Safari, Edge) */
    .page-left::-webkit-scrollbar {
        width: 8px !important;
    }

    .page-left::-webkit-scrollbar-track {
        background: rgba(106, 72, 31, 0.05) !important;
        border-radius: 4px !important;
    }

    .page-left::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #9e6c15, #d4af37) !important;
        border-radius: 4px !important;
        transition: background 0.3s ease !important;
    }

    .page-left::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #d4af37, #9e6c15) !important;
    }

    /* Firefox滚动条样式 */
    .page-left {
        scrollbar-width: thin !important;
        scrollbar-color: #9e6c15 rgba(106, 72, 31, 0.05) !important;
    }

    /* 确保分类列表内容不会被截断 */
    .page-left > ul {
        padding-bottom: 20px !important;
    }

    /* 分类组标题固定样式优化 */
    .category-group {
        margin-bottom: 8px !important;
    }

    .category-group-title {
        position: sticky !important;
        top: 0 !important;
        background: linear-gradient(135deg, #fef8ec 0%, #f4e4c1 100%) !important;
        z-index: 10 !important;
        padding: 8px 12px !important;
        margin: 0 -12px !important;
        border-bottom: 1px solid rgba(106, 72, 31, 0.1) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    /* 一级分类标题悬停效果 - 金色背景白色文字 */
    .category-group-title:hover {
        background: linear-gradient(135deg, #9e6c15 0%, #d4af37 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(106, 72, 31, 0.15) !important;
        transform: translateX(3px) !important;
    }

    .category-group-title:hover span {
        color: #ffffff !important;
    }

    .category-group-title:hover i {
        color: #ffffff !important;
    }

    /* 确保文字颜色 */
    .category-group-title span {
        color: #3d2817 !important;
        font-weight: 600 !important;
        transition: color 0.3s ease !important;
    }

    .category-group-title i {
        color: #9e6c15 !important;
        transition: color 0.3s ease !important;
    }

    /* 分类项列表 */
    .category-group-list {
        max-height: none !important;
        overflow: visible !important;
        transition: all 0.3s ease !important;
    }

    /* 图标旋转动画 */
    .category-group-title i {
        transition: transform 0.3s ease, color 0.3s ease !important;
    }

    /* 展开状态的图标 */
    .category-group-title .icon-xiala {
        transform: rotate(0deg) !important;
    }

    /* 收起状态的图标 */
    .category-group-title .icon-jiantou {
        transform: rotate(-90deg) !important;
    }

    /* 优化分类项间距 */
    .category-item {
        margin: 2px 0 !important;
    }

    /* 标题固定时的阴影效果 */
    .category-group-title.sticky-shadow {
        box-shadow: 0 2px 8px rgba(106, 72, 31, 0.1) !important;
    }
}

/* 移动端保持原样 */
@media (max-width: 768px) {
    .page-left {
        display: none !important;
    }
}

/* 平板端适配 */
@media (min-width: 769px) and (max-width: 1024px) {
    .page-left {
        width: 260px !important;
        max-height: calc(100vh - 120px) !important;
    }
}

/* 大屏幕优化 */
@media (min-width: 1920px) {
    .page-left {
        max-height: calc(100vh - 180px) !important;
    }
}

/* 确保内容可见性 */
.page-left * {
    box-sizing: border-box !important;
}

/* 防止内容溢出 */
.category-group-title,
.category-item {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* 滚动时的性能优化 */
.page-left {
    will-change: scroll-position !important;
    -webkit-overflow-scrolling: touch !important;
}