.category_search_nav{z-index:90;-webkit-backdrop-filter:var(--backdrop-filter);backdrop-filter:var(--backdrop-filter);margin-top:40px;transition:top .25s;position:sticky;top:0}.category_search_nav:after{content:"";z-index:0;background-color:var(--background-color);opacity:.8;width:100%;height:100%;position:absolute;top:0;left:0}.category_search_nav__inner{z-index:1;width:var(--inner-width);max-width:var(--inner-max-width);align-items:center;gap:16px;height:60px;margin:0 auto;display:flex;position:relative}.category_search_nav.active .search-nav .input{opacity:1;pointer-events:auto}.category_search_nav.active .search-nav button{opacity:0}.search-nav{flex:none;justify-content:flex-end;align-items:center;gap:6px;display:flex}.search-nav .input{opacity:0;pointer-events:none;z-index:1;width:100%;max-width:400px;transition:opacity .25s;position:absolute;top:50%;left:0;transform:translateY(-50%)}.search-nav .input .icon{color:var(--font-sec-color);font-size:20px;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.search-nav .input input{border:1px solid var(--primary-color);width:100%;height:40px;color:var(--font-color);appearance:none;background-color:#fff;border-radius:10em;padding-left:40px;padding-right:20px;font-size:16px}.search-nav .input input:focus,.search-nav .input input:focus-visible{outline:2px solid var(--primary-color)}.search-nav .input input::placeholder{color:var(--font-sec-color);opacity:.5}.search-nav button{background-color:var(--primary-color);color:#fff;border:0;border-radius:10em;flex:none;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.search-nav button span{font-size:20px}.category-nav{z-index:-1;width:110%;height:100%;-webkit-mask-image:linear-gradient(to right, transparent, var(--background-color) 5%, var(--background-color) 95%, transparent);mask-image:linear-gradient(to right, transparent, var(--background-color) 5%, var(--background-color) 95%, transparent);-webkit-mask-image:linear-gradient(to right, transparent, var(--background-color) 5%, var(--background-color) 95%, transparent);scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;justify-content:flex-start;align-items:center;gap:8px;margin:0 -5%;padding:0 5%;display:flex;position:relative;overflow-x:auto}.category-nav::-webkit-scrollbar{display:none}.category-nav button{background-color:var(--border-color);min-width:60px;height:40px;color:var(--font-sec-color);letter-spacing:.12em;cursor:pointer;border:0;border-radius:10em;flex-shrink:0;padding:0 16px;font-family:inherit;font-size:13px;line-height:1;transition:all .3s;position:relative}.category-nav button:hover{color:var(--primary-color)}.category-nav button:active{transform:scale(1.15)}.category-nav button.active{background-color:var(--primary-color);color:#fff}.category-nav button.active:after{width:100%}html.scrollUp .category_search_nav{top:var(--header-height)}[data-theme=dark] .category_search_nav:after{background-color:#11100fbf}[data-theme=dark] .search-nav input{background-color:var(--background-sec-color)}@media screen and (max-width:1023px){.category_search_nav__inner{gap:12px}.category_search_nav.active .category-nav{opacity:0}.search-nav .input{max-width:100%}}@media screen and (max-width:767px){.category_search_nav{margin-top:20px;margin-bottom:0}.category_search_nav__inner{height:60px}}