.category-filter{--category-filter-shadow-size:16px;top:var(--safe-area-top);background:#ffffffe6}.category-filter__scrollbar{--fade-mask-width-start:0vw;--fade-mask-width-end:5vw;--left-fade-mask:linear-gradient(90deg, #0000, #0000 var(--fade-mask-width-start), #000 var(--fade-mask-width-end));--right-fade-mask:linear-gradient(90deg, #000, #000 calc(100% - var(--fade-mask-width-end)), #0000 calc(100% - var(--fade-mask-width-start)));--both-sides-mask:linear-gradient(90deg, #0000, #0000 var(--fade-mask-width-start), #000 var(--fade-mask-width-end), #000 calc(100% - var(--fade-mask-width-end)), #0000 calc(100% - var(--fade-mask-width-start)));--current-mask:none;-webkit-mask:var(--current-mask);-webkit-mask:var(--current-mask);mask:var(--current-mask)}.category-filter__scrollbar--mask-left{--current-mask:var(--left-fade-mask)}.category-filter__scrollbar--mask-right{--current-mask:var(--right-fade-mask)}.category-filter__scrollbar--mask-both{--current-mask:var(--both-sides-mask)}@media (width>=1280px){.category-filter__scrollbar{--fade-mask-width-start:5px;--fade-mask-width-end:50px}}.category-filter__items{padding-top:var(--category-filter-shadow-size);margin-left:calc(var(--category-filter-shadow-size)*-3);padding-left:calc(var(--category-filter-shadow-size)*3);margin-top:calc(var(--category-filter-shadow-size)*-1);padding-bottom:calc(var(--category-filter-shadow-size)*.5);touch-action:pan-x}.category-filter__group{box-shadow:-3px 1px calc(var(--category-filter-shadow-size) - 2px) #6d696812}