/* === 样式保持不变 === */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background: #ffffff; font-family: Roboto, Helvetica, Arial, sans-serif; line-height: 1.4; color: #1e293b; }
        .product-category-module { width: 100%; background: #ffffff; padding: 2rem 1rem 2.5rem 1rem; }
        .category-wrapper { max-width: 1440px; margin: 0 auto; }
        .category-scroll { width: 100%; overflow-x: auto; overflow-y: visible; scrollbar-width: thin; scrollbar-color: #cbd5e1 #f1f5f9; -webkit-overflow-scrolling: touch; }
        .category-scroll::-webkit-scrollbar { height: 6px; }
        .category-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 8px; }
        .category-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
        .category-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        .category-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0.75rem; padding: 0.5rem 0.25rem 0.75rem 0.25rem; min-width: min-content; }
        .category-item { flex: 1 0 auto; min-width: 100px; max-width: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background-color: transparent; border-radius: 2px; padding: 0.85rem 0.3rem 0.7rem 0.3rem; cursor: pointer; transition: all 0.3s ease-in-out; border-bottom: 3px solid transparent; gap: 0.7rem; }
        .category-item i { font-size: 1.8rem; transition: color 0.2s ease, transform 0.2s; color: #5a6e8a; }
        .category-item span { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.2px; transition: color 0.2s ease, font-weight 0.2s; color: #2c3e50; white-space: nowrap; overflow-x: visible; }
        .category-item:hover { background-color: #f1f5f9; transform: translateY(-2px); }
        .category-item.active { border-bottom-color: #2563eb; }
        .category-item.active i, .category-item.active span { color: #2563eb; }
        .category-item.active span { font-weight: 700; }
        .category-item.active:hover { background-color: #eef2ff; }
        .category-item:active { transform: scale(0.97); transition: transform 0.05s; }
        .category-item:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; border-radius: 24px; }
        @media (min-width: 1280px) { .category-item { max-width: 180px; min-width: 100px; } .category-item i { font-size: 1.8rem; } .category-item span { font-size: 0.9rem; } .category-row { gap: 1rem; } }
        @media (max-width: 860px) { .category-item { min-width: 82px; padding: 0.75rem 0.2rem 0.6rem 0.2rem; } .category-item i { font-size: 1.6rem; } .category-item span { font-size: 0.8rem; } .category-row { gap: 0.5rem; } }
        @media (max-width: 580px) { .category-item { min-width: 76px; } .category-item i { font-size: 1.5rem; } .category-item span { font-size: 0.75rem; } }
        .product-category-module, .category-wrapper, .category-scroll, .category-row { background: transparent; }