.category-filter-outer{background:0 0;align-items:center;margin:10px 0;padding:10px 0;display:flex;position:relative}.category-filter-wrapper{scrollbar-width:none;-ms-overflow-style:none;flex:1;position:relative;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#0000,#000 100px calc(100% - 100px),#0000);mask-image:linear-gradient(90deg,#0000,#000 100px calc(100% - 100px),#0000)}.category-filter-wrapper::-webkit-scrollbar{display:none}.category-filter-container{gap:10px;width:max-content;padding:4px 60px;display:flex}.filter-pill{color:#555;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #00000014;border-radius:50px;padding:8px 20px;font-size:.85rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 5px #00000005}.filter-pill:hover{background:#f8f9fa;border-color:#00000026;transform:translateY(-1px)}.filter-pill.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 12px #007bff40}.scroll-button{-webkit-backdrop-filter:blur(8px);color:#333;cursor:pointer;z-index:20;background:#ffffffe6;border:1px solid #0000000d;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:all .3s;display:flex;position:absolute;box-shadow:0 4px 15px #0000001a}.scroll-button:hover{background:#fff;transform:scale(1.1);box-shadow:0 6px 20px #00000026}.scroll-button.left{left:10px}.scroll-button.right{right:10px}@media (max-width:768px){.category-filter-container{padding:4px 40px}.scroll-button{width:32px;height:32px}}